中职高教版《网页设计与制作任务驱动教程》10.1制作“E游天下”网站的主页课件

1 单元10　设计网站主页与整合网站 【任务10-1】制作“E游天下”网站的主页 《网页设计与制作任务驱动教程（第3版）》 1 2 网页index1001.html的浏览效果如图10-1所示。 图10-1 网页index1001.html的浏览效果 《网页设计与制作任务驱动教程（第3版）》 3 【任务描述】 【任务10-1-1】网站主页主体布局 结构设计 设计网站主页index1001.html的主体布局结构，应用“div标答+CSS样式”对网站主页的主体结构进行布局。 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 1．定义网页主体布局结构的CSS样式 网站主页index1001.html的主体布局示意图如图10-2所示。 图10-2　网站主页index1001.html的主体布局示意图 《网页设计与制作任务驱动教程（第3版）》 5 在文件夹style中创建一个CSS样式文件“style10.css”，在该样式文件中定义网页布局结构所需的CSS样式。 （1）定义innerWrapper样式 innerWrapper样式的属性设置如表10-1所示。 表10-1　innerWrapper样式的属性设置 行号 CSS样式代码 01 02 03 04 05 div#innerWrapper { width: 980px; margin: 0px auto 0px; } 《网页设计与制作任务驱动教程（第3版）》 5 6 （2）定义daohang样式 daohang样式的属性设置如表10-2所示。 表10-2　daohang样式的属性设置 行号 CSS样式代码 01 02 03 04 05 06 07 08 09 10 #daohang { height: 40px; width: 980px; margin-right: auto; margin-left: auto; line-height: 24px; background-image: -webkit-linear-gradient(top, #FFF, #EEE); background-image: -ms-linear-gradient(top, #FFF, #EEE); background-image: linear-gradient(top, #FFF, #EEE); } 《网页设计与制作任务驱动教程（第3版）》 7 （3）定义sidebar样式 sidebar样式的属性设置如表10-3所示。 表10-3　sidebar样式的属性设置 行号 CSS样式代码 01 02 03 04 05 div#sidebar { float: left; width: 175px; clear: left; } 《网页设计与制作任务驱动教程（第3版）》 8 （4）定义content样式 content样式的属性设置如表10-4所示。 表10-4　content样式的属性设置 行号 CSS样式代码 01 02 03 04 05 06 div#content { float: right; width: 800px; font: 12px Tahoma; } 《网页设计与制作任务驱动教程（第3版）》 9 （5）定义proPanel样式 proPanel样式的属性设置如表10-5所示。 表10-5　proPanel样式的属性设置 行号 CSS样式代码 01 02 03 04 05 div#proPanel { width: 800px; font: 12px Tahoma; } 《网页设计与制作任务驱动教程（第3版）》 10 6）定义left样式 left样式的属性设置如表10-6所示。 表10-6　left样式的属性设置 行号 CSS样式代码 01 02 03 04 05 div#content div.left { float: left; width: 266px; } 《网页设计与制作任务驱动教程（第3版）》 11 （7）定义right样式 right样式的属性设置如表10-7所示。 表10-7　right样式的属性设置 行号 CSS样式代码 01 02 03 04 05 div#content div.right { float: right; width: 266px; } 《网页设计与制作任务驱动教程（第3版）》 12 （8）定义proPanelCon2样式 proPanelCon2样式的属性设