![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=1738836526-OAgeau4JRVqAdgGDcHlM9lQbhBG4qYQd-0-120440a35acfcf9c0a50d24bf19dd0e6)
练习要点
□新建文档
□插入表格
□设置表格属性
□应用CSS规则
□新建CSS规则
操作步骤
STEP|01 启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00401.jpg?sign=1738836526-t1FAd1uDdAw2frLn5mDxWQKOaAOauyzR-0-0553b5b00dc1f54c9f7ab7a39f324b62)
STEP|02 在页面下方的【属性】面板中,单击【页面属性】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00402.jpg?sign=1738836526-9bKvizxqSA8xxLOy5kPhb8sV3z82m9DH-0-48cbad18931ca4b658ecbaace014bb7c)
STEP|03 在弹出的【页面属性】对话框中的【外观(CSS)】选项卡中,设置页面文本大小和文本颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00403.jpg?sign=1738836526-uRdIDTarah4mjaXo2mW6H9x4bLXSREbR-0-cc98296bd1089c956d40737e7dbb3913)
STEP|04 激活左侧【标题/编码】选项卡,在【标题】文本框中输入页面标题,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00404.jpg?sign=1738836526-z7nBu2XmTxSaZkpa5xKFbSG3qh13CFCM-0-228c5b5427a6b67d4c955d771d3983fa)
STEP|05 执行【插入】|【表格】命令,在弹出的【表格】对话框中,设置相应选项,单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00405.jpg?sign=1738836526-2JJxEFcxzgT3H6xSfo7122t1iTKnEU8T-0-e4db73624735513d02da7bc8abb3464a)
STEP|06 切换到【代码】视图中,在<style type="text/css"></style>标签之间输入有关表格属性的CSS代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00406.jpg?sign=1738836526-mWlDbD5B3dSmoge8dgVfuBK6lMYk4uO0-0-db233e5066380f4076cbcb1f9a79c761)
STEP|07 切换到【设计】视图中,选择表格,在【属性】面板中,将Align设置为“居中对齐”,并将Class设置为Product。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00407.jpg?sign=1738836526-QNLMbp2TOvBiSsQBHhCcNMuTyef8sSL0-0-81277fcd60b9d6f9bf5c7163f0f39b56)
STEP|08 切换到【代码】视图中,在<style type="text/css"></style>标签之间添加类名称为title的CSS代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00408.jpg?sign=1738836526-ZUgbc0MsKLU6rUJLcbSXiIzL5gHhcsdJ-0-8b88117ca0f4736568ed20a7359a90f9)
STEP|09 将光标定位在表格第1个单元格之间,在【属性】面板中的HTML选项卡中,将【类】设置为title,并在单元格中输入相应的文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00409.jpg?sign=1738836526-wjhD4gJ7f2qqPkiErHpONHaobPY7zeQQ-0-549a902c68a79671cfe443a66ddcca10)
STEP|10 在【代码】视图中的<style type= "text/css"></style>标签之间,输入所有的CSS代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00410.jpg?sign=1738836526-i6xfSP4uMA9Glv4iGBLk6nzeaw4RApRe-0-beea5a47938d5df5ec99440e9548194e)
STEP|11 在【设计】视图中,将光标定位在第2行单元格中,单击【属性】面板中的【拆分单元格为行或列】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00411.jpg?sign=1738836526-fgzmNqCqPWYZFkpwPKk5PaV78eT5MtNJ-0-ff6331c5734f044eef48245ac2a93ff6)
STEP|12 在弹出的【拆分单元格】对话框中,选中【列】选项,并将【列数】设置为3。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00412.jpg?sign=1738836526-DIjKcavziQFjsrKgUSZCqh6Nvz7fPtgH-0-cb761e52c0469e568dc996296116463f)
STEP|13 选择拆分后的第1列单元格,在【属性】面板中的HTML选项卡中,将【类】设置为tdleft。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00413.jpg?sign=1738836526-bEeJR9r9TWPz5DwLWSnNeXGJz361migx-0-9fbc8bcc93ab5d8260c3987d4cbe3656)
STEP|14 执行【插入】|【图像】|【图像】命令,在弹出的【选择图像源文件】对话框中,选择图像文件,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00414.jpg?sign=1738836526-4WycEfOHknjqMl5WgTU6hp4m93Jg2hJ2-0-48bbc58ae6d41161306240713efe62ac)
STEP|15 选择拆分后的第2列单元格,单击【属性】面板中的【项目列表】按钮,在单元格中输入文本列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00415.jpg?sign=1738836526-v5BPiuqmOFzNziHYpzunR8KHzcpXtZif-0-b12be344162049e5c7bce02f2010832b)
STEP|16 在【属性】面板中的HTML选项卡中,将【类】设置为tdcenter。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00416.jpg?sign=1738836526-Kw2JnjOBaPs6vvjmiqsLCY2e8Ik1khtu-0-77754620d8db2bbc9e8f26ca0548b2a8)
STEP|17 选择拆分后的第3列单元格,单击【属性】面板中的【项目列表】按钮,在单元格中输入文本列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00417.jpg?sign=1738836526-yDEBjrrCNnO7px8jSjeypmhSRLuvn6L1-0-16fc0c697830c30e183014bd7b86af9c)
STEP|18 在【属性】面板中的HTML选项卡中,将【类】设置为tdright。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00418.jpg?sign=1738836526-BRoe3mFWJS4d3FMCxJQp5mMRTqy0qt8f-0-cf34036bd805cb6acbf19e15d35ac030)
STEP|19 选择表格中的第3行单元格,在【属性】面板中的HTML选项卡中,将【类】设置为title,并输入相应文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00419.jpg?sign=1738836526-1USdTogmQElgEy9qOOi0HwtXlGcZPxFv-0-369dbea8d189741bc4fc383aafa232e1)
STEP|20 选择表格中的第4行单元格,在【属性】面板中的HTML选项卡中,将【类】设置为tdtext,并输入相应文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00420.jpg?sign=1738836526-XY9k7srxcOh68s9XCPYJB4TfjqkE9Ud2-0-69859933d587b95bdf29a50eb121e912)