5.5 练习：制作招商信息网页

Dreamweaver中的Div标签具有强大的设计功能，运用该标签不仅可以在网页中添加各种类型的表单元素，还可以布局整体网页，从而达到优化网页的目的。在本练习中，将通过制作一个招商信息网页，来详细介绍使用Div标签以及嵌套Div标签布局网页的操作方法和实用技巧。

操作步骤

STEP｜01　设置页面属性。启动Dreamweaver，在欢迎界面中选择HTML选项，创建一个空白页面。

STEP｜02　在页面下方的【属性】面板中，单击【页面属性】按钮。

STEP｜03　在弹出的【页面属性】对话框中的【外观（CSS）】选项卡中，设置页面文本大小。

STEP｜04　激活左侧【标题/编码】选项卡，在【标题】文本框中输入页面标题，并单击【确定】按钮。

STEP｜05　关联CSS样式表。执行【窗口】|【CSS设计器】命令，在打开的【CSS设计器】面板中，单击【源】窗口中的【添加CSS源】按钮，选择【附加现有的CSS文件】选项。

STEP｜06　在弹出的【使用现有的CSS文件】对话框中，单击【浏览】按钮。

STEP｜07　在弹出的【选择样式表文件】对话框中，选择CSS样式表文件，单击【确定】按钮即可。

STEP｜08　制作版头部分。执行【插入】|Div命令，在弹出的【插入Div】对话框中，将ID设置为logo，并单击【确定】按钮。

STEP｜09　删除Div标签中的文本信息，执行【插入】|【图像】|【图像】命令，在弹出的【选择图像源文件】对话框中，选择图像文件，并单击【确定】按钮。

STEP｜10　切换到【代码】视图中，修改<img>标签中的代码，并添加map代码。

STEP｜11　制作导航条。将光标定位在</div>和</body>标签中间，执行【插入】|Div命令，在【插入Div】对话框中，将ID设置为nav，并单击【确定】按钮。

STEP｜12　执行【插入】|Div命令，插入一个名为time的Div标签，并在标签中输入文本。

STEP｜13　将光标定位在</div>和</div>之间，执行【插入】|Div命令，插入一个名为navText的Div标签。

STEP｜14　在【属性】面板中，单击【项目列表】按钮，然后在【代码】视图中输入列目列表文本。

STEP｜15　选择“首页”文本，在【属性】面板中的【链接】文本框中输入链接地址。

STEP｜16　在【代码】视图中，修改链接文本的HTML代码，使用同样的方法，制作其他列表目录文本。

STEP｜17　制作内容嵌套Div标签。将光标定位在</div>和</body>标签中间，插入一个名为content的Div标签。

STEP｜18　在该Div标签中，连续插入名为leftmain和xwzx的两个Div标签。

STEP｜19　在xwzx Div标签内，输入有关新闻中心内容的项目列表，并分别为每个项目列表文本添加链接和关联CSS样式表。

STEP｜20　将光标定位在</div>和</div>之间，插入一个名为xwzxbg的Div标签，并删除标签内容的文本。

STEP｜21　将光标定位在名为xwzxbg的Div标签之后的</div>标签处，连续插入名为rightmain和daohang的Div标签，并输入相关代码。

STEP｜22　在其后插入一个名为title的Div标签，并在标签中输入文本信息。

STEP｜23　插入名为banner的Div标签，删除文本。紧接着插入名为detailTilte的Div标签，并输入文本信息。

STEP｜24　在其后插入一个名为detail的Div标签，在该标签中输入文本内容，并设置文本的段落格式。

STEP｜25　制作版尾内容。将光标定位在</div>和</body>标签之间，插入一个名为footer的Div标签，并在标签之内输入版尾文本。