- Dreamweaver CC中文版网页设计与制作从新手到高手
- 吴东伟
- 956字
- 2021-03-19 19:00:37
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,并输入相应文本。