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

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

练习要点

□新建文档

□插入表格

□设置表格属性

□应用CSS规则

□新建CSS规则

操作步骤

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,并输入相应文本。