网页制作综合实训(任务1--任务5).docVIP

项目5 网页制作综合实训 知识技能目标 掌握HTML代码设计网页结构和内容的技能 掌握使用CSS控制网页外观的技能 掌握设计JavaScript网页脚本效果的技能 掌握综合运用网页制作技术、整合各种效果、完成整体网站设计的能力 本项目结合一个鲜花销售网站作为蓝本，通过五个任务完成网站几个主要页面静态模板的综合设计。 任务5.1 鲜花销售网站首页的制作 5.1.1 任务分析 本任务设计制作一个鲜花销售网站首页的静态模板。 页面结构分析 1．页面效果图如图5-1所示： 图5-1 页面效果图 2．布局分析 页面采用上下布局，突出主题。主要布局结构如图5-2所示： banner zpzs（作品展示） fshd（图片切换） wawy（唯爱物语） tsdz（特殊定制） bottom 图5-2 页面布局结构图 任务实施 新建网站根目录，将图片素材images目录拷到网站目录下。新建一个style子目录，在其中创建一 个样式文件css.css。本网站还用到了jquery效果，将其使用的样式文件lanren.css拷入style子目录中并将脚本素材js目录拷到网站目录中； 2．在网站根目录中新建一个名为index.html的网页文档，在HTML文档头部加上以下代码来附加脚本文件和样式文件： link rel=stylesheet media=screen href=style/lanren.css / link href=style/css.css rel=stylesheet type=text/css / script src=js/jquery.min.js/script script src=js/lanrenzhijia.js/script script src=js/jquery.sequence-min.js/script script src=js/sequencejs-options.modern-slide-in.js/script script $(function(){ scrolltotop.offset(5,120); scrolltotop.init(); }); /script 3．在css.css文档中添加以下样式代码： *{ margin:0; padding:0; border:0; } body{ background-color:#f3f3f3; font-size:12px; color:#19181c; } 4．在HTML页面的body标记中添加以下代码，在页面右侧添加返回页面顶部的图标及顶部导航 div id=topcontrol style=position: fixed; bottom: 120px; right: 100px; cursor: pointer; display:none; title=返回页面顶部 img src=images/top.png width=40 height=40 / /div div style=width:100%; height:466px; background-color:#605d70; background-image:url(images/boby.jpg); background-repeat:repeat-x; div id=banner div id=login a href=# target=_blankdiv class=md1/div/a a href=# target=_blankdiv class=md2/div/a a href=# target=_blankdiv class=md3/div/a div class=md4/div a href=vlove2.htmldiv class=md5/div/a a href=vlove3.html div class=md6/div/a a href=vlove4.html div class=md7/div/a a href=vlove5.html div class=md8/div/a /div /div/div 5．在css.css中加入以下样式代码，效果如图5-3所示： #banner{ padding-top:20px; width:1001px; height:446px; margin:0 auto; background-image:url(../images/bg11.jpg); background-repeat:no-repeat; } #login{ height:46px; width:42