HTML+CSS+JavaScript网页设计与布局:从新手到高手
上QQ阅读APP看书,第一时间看更新

4.7 新手训练营

练习1:制作个人主页

downloads\4\新手训练营\个人主页

提示:本练习中,首先设置网页标题,以及背景图片和body的CSS样式。具体代码如下所示。

然后,在<body>标签内插入相应的表格,设置表格属性,并设置单元格的具体内容。最终效果如下图所示。

练习2:制作软件下载页

downloads\4\新手训练营\软件下载页

提示:本练习中,首先,在<head>标签内输入设置body和表格属性的CSS样式,并链接外部的CSS文件。具体代码如下所示。

然后,在<body>标签内插入相应的Div层及表格,设置表格属性,并设置单元格的具体内容。最终效果如下图所示。

练习3:制作相册展示页面

downloads\4\新手训练营\相册展示页面

提示:首先,在<head>标签内输入设置body和表格属性的CSS样式,并链接外部的CSS文件。

然后,在<body>标签内插入相应的Div层及表格,设置表格属性,并设置单元格的具体内容。最终效果如下图所示。

练习4:排序数据

downloads\4\新手训练营\排序数据

提示:在本练习中,首先在Dreamweaver软件中新建空白文档,执行【插入】|【表格】命令,插入一个12行11列的表格。然后,在表格中输入数据,并在【属性】面板中设置单元格区域的背景颜色。最后,选择表格,执行【命令】|【排序表格】命令,在弹出的【排序表格】对话框中,将【排序按】设置为“列11”,将【顺序】设置为“按数字排序”,单击【确定】按钮后,表格中的数据即按总成绩的升序进行排列,如下图。

练习5:制作饮食文化网页

downloads\6\新手训练营\饮食文化网页

提示:本练习中,在<head>标签内输入设置body和表格属性的CSS样式,并链接外部的CSS文件。

然后,插入6行3列的表格,设置表格属性,添加表格内容以制作表格结构,如下图。