![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
5.4 练习:制作产品简介网页
当今社会是一个网络社会,互联网已经被应用到了生活中的方方面面。电子商务势不可挡,包括日常的购物都已经通过网络来进行。在本练习中,将使用列表和段落格式来制作一个购物网中常见的产品简介网页。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00400.jpg?sign=1739289769-um0zfiQcpiWBtnEBLOZuzeWsXmg9rulZ-0-722830ffc0b7915a5be97f55260b9aff)
练习要点
□新建文档
□插入表格
□设置表格属性
□应用CSS规则
□新建CSS规则
操作步骤
STEP|01 启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00401.jpg?sign=1739289769-JPjE94w25SPLL2ZIqinjKCotcTLVoWzO-0-95a794a71823aa0107f6d48d4d244601)
STEP|02 在页面下方的【属性】面板中,单击【页面属性】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00402.jpg?sign=1739289769-byS18sZlB6hy6KXWfnTdGNuQioM2owlJ-0-49f0a8217fb06118108245564d48492b)
STEP|03 在弹出的【页面属性】对话框中的【外观(CSS)】选项卡中,设置页面文本大小和文本颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00403.jpg?sign=1739289769-xFQYXlV3eNT925Z6fnc22OBpbmXGnj8a-0-b7ae5379bedef89035f08a41c04fbb38)
STEP|04 激活左侧【标题/编码】选项卡,在【标题】文本框中输入页面标题,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00404.jpg?sign=1739289769-lbBoM5HTHFlHWO23B7fhBcdb3V9RDmcr-0-c7d01c2390938c78bb046e387167e0da)
STEP|05 执行【插入】|【表格】命令,在弹出的【表格】对话框中,设置相应选项,单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00405.jpg?sign=1739289769-xigHG42ufoMjSeQoCRHxnf0FYpzPpMok-0-6d8112ce0701254ca9e499e535ecc147)
STEP|06 切换到【代码】视图中,在<style type="text/css"></style>标签之间输入有关表格属性的CSS代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00406.jpg?sign=1739289769-waaaksZRgpfwIDmSEhLvWI9z9tIF3cYP-0-069e3aebbc0024022393cc8fd4af8724)
STEP|07 切换到【设计】视图中,选择表格,在【属性】面板中,将Align设置为“居中对齐”,并将Class设置为Product。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00407.jpg?sign=1739289769-bvpPot7Mg50zxrtfn5eolm23ERoKxNt6-0-b8992cb15d4daa2a4821bb0fc8ca472f)
STEP|08 切换到【代码】视图中,在<style type="text/css"></style>标签之间添加类名称为title的CSS代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00408.jpg?sign=1739289769-YxwSWeTv7BQ7BoqvGt6fahjWv0ogfa8J-0-973c97a5213ae5a7b4157433ce24109b)
STEP|09 将光标定位在表格第1个单元格之间,在【属性】面板中的HTML选项卡中,将【类】设置为title,并在单元格中输入相应的文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00409.jpg?sign=1739289769-6VpO7CZlc2Um7Pob0vXv1gDuwKSWamXa-0-9cd7e8c4965c3ae9376980e7a1b8c14b)
STEP|10 在【代码】视图中的<style type= "text/css"></style>标签之间,输入所有的CSS代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00410.jpg?sign=1739289769-qQC9JNNsaltdzzSjfXVHvpz1ldsvIPhX-0-67179df302c92ed8a8e0786a4a6cc59e)
STEP|11 在【设计】视图中,将光标定位在第2行单元格中,单击【属性】面板中的【拆分单元格为行或列】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00411.jpg?sign=1739289769-b340kLSUSDetgfJr7RKcee6dnQrZk75N-0-d41cb65e1cec3adbb3ce6dea07b43dd6)
STEP|12 在弹出的【拆分单元格】对话框中,选中【列】选项,并将【列数】设置为3。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00412.jpg?sign=1739289769-UFgcWivQmw9zidAlO2i6swEf3RZfysrd-0-252f1ccd6859924b0f9ef5010fbd9c1f)
STEP|13 选择拆分后的第1列单元格,在【属性】面板中的HTML选项卡中,将【类】设置为tdleft。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00413.jpg?sign=1739289769-dnxyTXGSFXBMz2TjGIw1K9fFdWc68Wlh-0-92a4c47d951ee3ddfb5a970601bc12c2)
STEP|14 执行【插入】|【图像】|【图像】命令,在弹出的【选择图像源文件】对话框中,选择图像文件,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00414.jpg?sign=1739289769-gJDseilssGc3IF08cyKzIAmEMfq7mPp0-0-ac56ce30bc0d160ea1755668539004f7)
STEP|15 选择拆分后的第2列单元格,单击【属性】面板中的【项目列表】按钮,在单元格中输入文本列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00415.jpg?sign=1739289769-nG2Enh0j1OdAAy1rw97SzJ1PhNuO0OEy-0-679ad24841a0b831567f6141eba26513)
STEP|16 在【属性】面板中的HTML选项卡中,将【类】设置为tdcenter。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00416.jpg?sign=1739289769-bkBfDbAHGPD4xuQ217lkkFh3MSrYg6Ei-0-7d00cca65b20eb5a9c2309739bf5306a)
STEP|17 选择拆分后的第3列单元格,单击【属性】面板中的【项目列表】按钮,在单元格中输入文本列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00417.jpg?sign=1739289769-mGeiXHNkfgGwsT82RdWtaHkAUdkskkOs-0-d8de539ef30314e91acf6b1d2fe29f2e)
STEP|18 在【属性】面板中的HTML选项卡中,将【类】设置为tdright。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00418.jpg?sign=1739289769-1pBjWAHm63VJIKceBx8KLb99TUn2uIXZ-0-9201257ba41cedab4c5a0e68d1d2fdd1)
STEP|19 选择表格中的第3行单元格,在【属性】面板中的HTML选项卡中,将【类】设置为title,并输入相应文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00419.jpg?sign=1739289769-SRBsR8DnucwTsp4aeUE0JgC0a2hbI2an-0-599067d85ca2f3aa9632570aa6013fc7)
STEP|20 选择表格中的第4行单元格,在【属性】面板中的HTML选项卡中,将【类】设置为tdtext,并输入相应文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00420.jpg?sign=1739289769-vkJivijZ7cV9mxdajiT0XOzZWTbjy8aa-0-254554de9a939e6e80936ae7ce0d95e9)