【任务6-2】创建包含库项目和代码片断的网页

【任务描述】

 （1）将网页中的版权信息区域定义为库项目footer060201.lbi。

 （2）将网页060201.html中的友情链接区域转换为库项目friend-link060201.lbi。

 （3）在网页060202.html中对应位置插入库项目footer060201.lbi和friend-link060201.lbi。

 （4）将网页060201.html中顶部导航栏分别定义为代码片断topmenu和topnav。

 （5）在网页060202.html中对应位置，分别插入代码片码topmenu和topnav。

      网页060202.html的浏览效果如下所示。

【任务实施】

6.3.1　创建库项目

1．使用【新建文档】对话框创建库

  （1）在Dreamweaver CS4主界面中，单击菜单命令【文件】→【新建】，在弹出的【新建文档】对话框中选择“空白页”→“库项目”，如图6-25所示。然后单击【创建】按钮，创建一个空白网页。

  （2）保存库项目文件。

  （3）链接外部样式文件。

  （4）在库项目中插入Div标签与输入文字内容。

  （5）保存库文件。

2．将现有网页内容转换为库项目

  （1）打开文件夹“6-2”中网页文档“060201.html”。

  （2）选中该网页文档中的友情链接区域“<div id=“friend-link"></div>”。

  （3）在Dreamweaver CS4主界面中，单击菜单命令【修改】→【库】→【增加对象到库】，将选中的Div区域转化为库文件。在该对话框中单击【确定】按钮，库项目的内容随即会出现在“资源”面板中，等待输入新的库文件名称。

  （4）Dreamweaver CS4会把库项目文件保存在本地站点根文件夹下的“Library”子文件夹中，如果本地站点没有该文件夹，Dreamweaver CS4会自动生成这个子文件夹。

6.3.2　在网页060202.html中插入库项目

1．在网页060202.html中对应位置插入库项目footer060201.lbi

  （1）打开网页文档060202.html，将光标置于“</body>”之前。

  （2）在Dreamweaver CS4主界面，单击菜单命令【窗口】→【资源】，切换到“资源”面板，也可以在“文件”面板中直接单击“资源”选项卡切换到“资源”面板。

  （3）在“资源”面板中单击左侧的【库】按钮，显示本站点所有的库项目文件，选中要插入的库项目“friend-link060201”，单击该面板中左下角的【插入】按钮，即可插入一个库项目。

2．在网页060202.html中对应位置插入库项目friend-link060201.lbi

   将光标置于前面所插入的“友情链接”之后，在“资源”面板中选中要插入的库项目“footer060201”，然后单击该面板中左下角的【插入】按钮，即可在网页中060202.html插入另一个库项目。

6.3.3　新建代码片断

  （1）打开【代码片断】面板

     在Dreamweaver CS4主界面中，单击菜单命令【窗口】→【代码片断】，打开【代码片断】面板。

  （2）新建代码片断文件夹

  （3）创建代码片断

6.3.4 在网页060202.html中插入代码片断

1．在网页060202.html中对应位置插入代码片码topmenu，打开网页文档060202.html，切换到【代码】视图，将光标置于Div标签“<div id="header">”的之后，然后在【代码片断】面板选择文件夹“06”中的“topmenu”，单击【代码片断】面板左下角的【插入】按钮，这样代码片断“topmenu”便插入到光标所在位置。

2．在网页060202.html中对应位置插入代码片码topnav在网页文档060202.html的【代码】视图中，将光标置于Div标签“<div class="clear"></div>”与“<div class="clear"></div>”之间，然后在【代码片断】面板文件夹“06”中的“topnav”位置单击右键，在弹出的快捷菜单中单击菜单命令【插入】，这样代码片断“topnav”便插入到光标所在位置。

   保存网页文档060202.html，其浏览效果如下图所示。

网页效果图：