网页制作综合实训任务1任务5.docx

1、网页制作综合实训任务1任务5项目5 网页制作综合实训知识技能目标 掌握HTML代码设计网页结构和内容的技能 掌握使用CSS控制网页外观的技能 掌握设计JavaScript网页脚本效果的技能 掌握综合运用网页制作技术、整合各种效果、完成整体网站设计的能力本项目结合一个鲜花销售网站作为蓝本，通过五个任务完成网站几个主要页面静态模板的综合设计。任务5.1 鲜花销售网站首页的制作5.1.1 任务分析本任务设计制作一个鲜花销售网站首页的静态模板。5.1.2 页面结构分析1页面效果图如图5-1所示：图5-1 页面效果图 2布局分析页面采用上下布局，突出主题。主要布局结构如图5-2所示：bannerzpzs

2、（作品展示）fshd（图片切换）wawy（唯爱物语）tsdz（特殊定制）bottom图5-2 页面布局结构图5.1.3 任务实施 1 新建网站根目录，将图片素材images目录拷到网站目录下。新建一个style子目录，在其中创建一个样式文件css.css。本网站还用到了jquery效果，将其使用的样式文件lanren.css拷入style子目录中并将脚本素材js目录拷到网站目录中；2在网站根目录中新建一个名为index.html的网页文档，在HTML文档头部加上以下代码来附加脚本文件和样式文件：$(function() scrolltotop.offset(5,120); scrolltoto

3、p.init(); ); 3在css.css文档中添加以下样式代码：* margin:0; padding:0; border:0;body background-color:#f3f3f3; font-size:12px; color:#19181c;4在HTML页面的body标记中添加以下代码，在页面右侧添加返回页面顶部的图标及顶部导航 5在css.css中加入以下样式代码，效果如图5-3所示：#banner padding-top:20px; width:1001px; height:446px; margin:0 auto; background-image:url(./images/

4、bg11.jpg); background-repeat:no-repeat;#login height:46px; width:423px; margin-left:505px; float:left;.md1 width:25px; height:12px; margin-left:118px; float:left;.md2 float:left; width:25px; height:12px; margin-left:5px;.md3 float:left; width:60px; height:12px; margin-left:20px; margin-bottom:8px;.m

5、d4 clear:both; width:33px; height:15px; margin-left:4px; margin-top:8px; float:left;.md5 float:left; width:60px; height:15px; margin-left:38px; margin-top:8px;.md6 float:left; width:60px; height:15px; margin-left:35px; margin-top:8px;.md7 float:left; width:60px; height:15px; margin-left:35px; margin

6、-top:8px;.md8 float:left; width:60px; height:15px; margin-left:35px; margin-top:8px;图5-3 页面顶部效果图 6在上面DIV后面添加名为box的DIV，并在其中插入相应div（作品展示），代码如下： hjdfgjdf66776$34.00 hjdfgjdf66776$34.00 hjdfgjdf66776$34.00 hjdfgjdf66776$34.00 hjdfgjdf66776$34.00 7在css.css文档中加入以下样式代码，显示效果如图5-4所示：#box width:1001px; margin

7、:0 auto; #zpzs width:1001px; height:866px; background-image:url(./images/bg2.jpg); background-repeat:no-repeat; .sp1 width:158px; height:136px; float:left; margin-left:780px; margin-top:160px; .sp2 width:158px; height:136px; float:left; margin-left:460px; margin-top:128px; .sp3 width:158px; height:1

8、36px; float:left; margin-left:160px; margin-top:140px; .sp4 width:158px; height:136px; float:left; margin-left:370px; margin-top:120px; .sp5 width:158px; height:136px; float:left; margin-left:67px; margin-top:120px; 图5-4 效果图8在box后插入以下div，引入一个jquery的图片切换效果： hjdrgfe7wgtbehjvgdrg hjg78478g4gyu dfgdsfhd

9、sfhdsfhdsfh 45g4t45y45y54b 45v4by54b4b 67n6n5n5ub5 9. 在css.css中添加以下样式，显示效果如图5-5所示：#fshd_title width:1001px; margin:0 auto;#fshd width:1001px; margin:0 auto; height:600px;图5-5 效果图10在上面DIV后面加入以下的DIV（唯爱物语和特殊定制）： hgdhsfhs234 hgdhsfhs234 hgdhsfhs234 hgdhsfhs234 hgdhsfhs234 hgdhsfhs234 11. 在css.css中添加以下样式

10、，显示效果如图5-6所示：.wawy width:268px; height:218px; float:left; margin-right:30px; margin-bottom:30px; border:1px solid #dadada; .wawy_title margin-bottom:20px; height:135px;.wawy_text width:268px; height:50px; border-top-color:1px solid #dadada;.tsdz width:1001px; text-align:center; margin-bottom:30px;图5-6 效果图 12在上述DIV后面加入class名为bottom_top的div，并设置样式如下：.bottom_top width:100%px; height:30px; background-color:#ccc; 13. 在bottom_top后添加名为bottom的div，用来设置版权、地址、联系方式等信息： hjhdsfhjadsfhjdfhghdfhugyushjhdsfhjadsfhjdfhghdfhugyus sdg