5.4 练习：制作产品简介网页

当今社会是一个网络社会，互联网已经被应用到了生活中的方方面面。电子商务势不可挡，包括日常的购物都已经通过网络来进行。在本练习中，将使用列表和段落格式来制作一个购物网中常见的产品简介网页。

操作步骤

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

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

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

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

STEP｜05　执行【插入】|【表格】命令，在弹出的【表格】对话框中，设置相应选项，单击【确定】按钮。

STEP｜06　切换到【代码】视图中，在<style type="text/css"></style>标签之间输入有关表格属性的CSS代码。

STEP｜07　切换到【设计】视图中，选择表格，在【属性】面板中，将Align设置为“居中对齐”，并将Class设置为Product。

STEP｜08　切换到【代码】视图中，在<style type="text/css"></style>标签之间添加类名称为title的CSS代码。

STEP｜09　将光标定位在表格第1个单元格之间，在【属性】面板中的HTML选项卡中，将【类】设置为title，并在单元格中输入相应的文本。

STEP｜10　在【代码】视图中的<style type= "text/css"></style>标签之间，输入所有的CSS代码。

STEP｜11　在【设计】视图中，将光标定位在第2行单元格中，单击【属性】面板中的【拆分单元格为行或列】按钮。

STEP｜12　在弹出的【拆分单元格】对话框中，选中【列】选项，并将【列数】设置为3。

STEP｜13　选择拆分后的第1列单元格，在【属性】面板中的HTML选项卡中，将【类】设置为tdleft。

STEP｜14　执行【插入】|【图像】|【图像】命令，在弹出的【选择图像源文件】对话框中，选择图像文件，并单击【确定】按钮。

STEP｜15　选择拆分后的第2列单元格，单击【属性】面板中的【项目列表】按钮，在单元格中输入文本列表。

STEP｜16　在【属性】面板中的HTML选项卡中，将【类】设置为tdcenter。

STEP｜17　选择拆分后的第3列单元格，单击【属性】面板中的【项目列表】按钮，在单元格中输入文本列表。

STEP｜18　在【属性】面板中的HTML选项卡中，将【类】设置为tdright。

STEP｜19　选择表格中的第3行单元格，在【属性】面板中的HTML选项卡中，将【类】设置为title，并输入相应文本。

STEP｜20　选择表格中的第4行单元格，在【属性】面板中的HTML选项卡中，将【类】设置为tdtext，并输入相应文本。