网页制作综合实训任务1任务5.docx
《网页制作综合实训任务1任务5.docx》由会员分享，可在线阅读，更多相关《网页制作综合实训任务1任务5.docx（71页珍藏版）》请在冰豆网上搜索。
网页制作综合实训任务1任务5
项目5网页制作综合实训
知识技能目标
●掌握HTML代码设计网页结构和内容的技能
●掌握使用CSS控制网页外观的技能
●掌握设计JavaScript网页脚本效果的技能
●掌握综合运用网页制作技术、整合各种效果、完成整体网站设计的能力
本项目结合一个鲜花销售网站作为蓝本，通过五个任务完成网站几个主要页面静态模板的综合设计。
任务5.1鲜花销售网站首页的制作
5.1.1任务分析
本任务设计制作一个鲜花销售网站首页的静态模板。
5.1.2页面结构分析
1．页面效果图如图5-1所示：
图5-1页面效果图
2．布局分析
页面采用上下布局，突出主题。
主要布局结构如图5-2所示：
banner
zpzs（作品展示）
fshd（图片切换）
wawy（唯爱物语）
tsdz（特殊定制）
bottom
图5-2页面布局结构图
5.1.3任务实施
1．新建网站根目录，将图片素材images目录拷到网站目录下。
新建一个style子目录，在其中创建一
个样式文件css.css。
本网站还用到了jquery效果，将其使用的样式文件lanren.css拷入style子目录中并将脚本素材js目录拷到网站目录中；
2．在网站根目录中新建一个名为index.html的网页文档，在HTML文档头部加上以下代码来附加脚本文件和样式文件：
3．在css.css文档中添加以下样式代码：
*{
margin:
0;padding:
0;border:
0;
}
body{
background-color:
#f3f3f3;font-size:
12px;color:
#19181c;
}
4．在HTML页面的body标记中添加以下代码，在页面右侧添加返回页面顶部的图标及顶部导航
fixed;bottom:
120px;right:
100px;cursor:
pointer;display:
none;"title="返回页面顶部">
升级会员 