- HTML+CSS+JavaScript网页设计与布局:从新手到高手
- 王修洪 张振
- 640字
- 2024-12-21 07:33:00
4.7 新手训练营
练习1:制作个人主页
downloads\4\新手训练营\个人主页
提示:本练习中,首先设置网页标题,以及背景图片和body的CSS样式。具体代码如下所示。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P108_204321.jpg?sign=1739240586-knc6PjzJrbLLAA5v9UptR92ePEaGAVeC-0-19e1a6e699ba66c467d828490c2224e1)
然后,在<body>标签内插入相应的表格,设置表格属性,并设置单元格的具体内容。最终效果如下图所示。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P108_44578.jpg?sign=1739240586-yH29zsevRMwe0E8tKwmKwXgi9ANgcRE9-0-f60cb87937d55e7394ab35a4dd7372d6)
练习2:制作软件下载页
downloads\4\新手训练营\软件下载页
提示:本练习中,首先,在<head>标签内输入设置body和表格属性的CSS样式,并链接外部的CSS文件。具体代码如下所示。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P109_200977.jpg?sign=1739240586-EWxcqxntuV0h6kPi7hGYsP8nCOXGtmSt-0-6b7d6bde0ddbe14277db9016d72d8e9d)
然后,在<body>标签内插入相应的Div层及表格,设置表格属性,并设置单元格的具体内容。最终效果如下图所示。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P109_44787.jpg?sign=1739240586-b6x0ak5qwdz7Ct574b7gP7jLCYcVslrd-0-5ac8cc079a5d24e1b61563edceee459a)
练习3:制作相册展示页面
downloads\4\新手训练营\相册展示页面
提示:首先,在<head>标签内输入设置body和表格属性的CSS样式,并链接外部的CSS文件。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P109_204322.jpg?sign=1739240586-QuXt7gab8dMhPqnEDIrTvzQVwKwUYpTv-0-52942720dfc9bc3ef1516540209066ae)
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P110_204323.jpg?sign=1739240586-ow9Zz2Ut7KaF5OASJSgjLNHCzqy6j69j-0-082e130b845753e56fb1b64cae6508ad)
然后,在<body>标签内插入相应的Div层及表格,设置表格属性,并设置单元格的具体内容。最终效果如下图所示。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P110_45375.jpg?sign=1739240586-eoIvenaYVfkLv8noixrfMVL3tFxhx5Nu-0-90f086e1dfc74f9eec94b6d658768fb6)
练习4:排序数据
downloads\4\新手训练营\排序数据
提示:在本练习中,首先在Dreamweaver软件中新建空白文档,执行【插入】|【表格】命令,插入一个12行11列的表格。然后,在表格中输入数据,并在【属性】面板中设置单元格区域的背景颜色。最后,选择表格,执行【命令】|【排序表格】命令,在弹出的【排序表格】对话框中,将【排序按】设置为“列11”,将【顺序】设置为“按数字排序”,单击【确定】按钮后,表格中的数据即按总成绩的升序进行排列,如下图。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P110_45401.jpg?sign=1739240586-XMVB3b5Bxlzu3LpEue4WG6k3GhOG6goX-0-23bb19e347e5c5b74f27b9e5db831bd8)
练习5:制作饮食文化网页
downloads\6\新手训练营\饮食文化网页
提示:本练习中,在<head>标签内输入设置body和表格属性的CSS样式,并链接外部的CSS文件。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P110_204324.jpg?sign=1739240586-2x8L50SgeaZA6BbnyPrVIoYNYwTedmoK-0-04c3ecd14922e62d83db506ca9faf6eb)
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P111_204326.jpg?sign=1739240586-8b1h4NfeXGEUv9YIHvEGoWWf1aqkk32i-0-3fc0a7a613c77945543562061e677263)
然后,插入6行3列的表格,设置表格属性,添加表格内容以制作表格结构,如下图。
![](https://epubservercos.yuewen.com/72F591/15289822204506006/epubprivate/OEBPS/Images/Figure-P111_45835.jpg?sign=1739240586-UoyJf19EnMbzRiWqFIxjQevlSYXW7Ve8-0-5f101ad361426ee7ca49e7d25fed0b18)