中职电商（DWcs6网页设计）

一、文件规范

1、在E盘创建考生文件夹命名为“准考证号码+姓名”，将素材复制到考生文件夹中。

2、创建站点，站点名为“新鲜果蔬”，本地根文件夹指定为考生文件夹“准考证号码+姓名”，新建网页，命名为“index.html”，保存在站点根目录下。

二、页面属性

1、页面边距上下左右均为0；链接颜色：#F60；变换图像链接：#FFCC35；始终无下划线，页面背景：#FFCC00。

2、将页面标题三字体设置成宋体、18像素、#FF6600。网页标题：新鲜水果。

三、页面布局

1、插入表格4行1列，宽度100%，填充间距边框均为0。

2、第一行单元格高度为50，将第一行单元格拆分成3列，第一列宽度300，第三列宽度300；第三行单元格高度为800，单元格水平和垂直方向均为居中对齐，在单元格内插入表格4行5列，宽度80%。

四、素材导入

1、根据页面展示图片插入表格相对应的位置。

2、文本在指定位置输入。

五、基本表单制作

1、在第一行第三单元格插入表单域，并插文本域，设置文本域的id名称为“sousuo”,初始值设置为“鲜果知识”。创建外部css,命名为style.css.新建样式属性：边框：1px solid #FFc；背景：#FC0

2、插入登录和注册按钮，创建类命名为“bottom”，背景#FC0，边框：1px solid #FFC，字体：白色

六、超链接

1、将青柠两字添加超链接，使其跳转到网址baike.so.com/doc/5623295-5835913.html

2、将火龙果添加超链接，使其能正确打开指定目标西瓜.mp4.

七、编辑排版

1、logo宽290高50；轮播图图片大小：宽1600高640；水果产品图宽400高240；蔬菜产品图宽400高300

2、图文排版样式设置符合试题要求

3、使用行为，使得鼠标经过柠檬图片的时候显示柠檬介绍

4、第四行插入没有阴影的水平线

八、功能实现

     1、设置浮动广告，插入ap div标签，根据效果图进行布局，在ap div 中插入两行一列的表格，第二行插入插件果蔬.mp4.要求能对浮动广告进行拖动和关闭。

 2、设置图片轮播，第2行插入4个apdiv ，名字为apdiv1，apdiv2，apdiv3，apdiv4，并利用行为——鼠标单击按钮设置4张图片轮播效果。

3、导航条为添加spry横向菜单栏，分为网站首页、时令蔬菜、新鲜水果、关于我们四个栏目，时令蔬菜包括玉米、西红柿、西蓝花；新鲜果蔬包括柠檬、青柠、火龙果。相关特效要求：背景#FFCC00。

九、上交作品

将根目录压缩成以“考生号+姓名”的压缩包，上传至FTP。

网页制作评分标准（总分：50分）

4.项目评分表

1. (创建站点)，站点名：府城生活网；
2. 创建站点目标文件夹，命名为：准考证号码+姓名；并新建站点内文件（index.html）及文件夹（images、css）；
3. （网页布局）

• 打开index.html，插入宽为1024像素的表格，设置居中，命名为table1；
• 再在table1内插入一个宽为100%，行为6，列为4的表格，命名为table2；
• 网页标题：欢迎光临府城生活网；页面背景颜色文字颜色自选

4. （网页头部）

• 在table2的第一行插入一行三列表格：插入对应素材等，运用表单，表格等完成效果图所示。

5. （设置网页导航栏）

在table2的第2行插入spry选项（所有商品分类）面板为主目录设置子目录:水果，镇店之宝，蔬菜，肉禽蛋品，水产海鲜等。其他子目录为默认；

（设置图片轮播）在table2的第3行，插入4个apdiv ，名字为apdiv1，apdiv2，apdiv3，apdiv4，并利用行为——鼠标单击按钮设置4张图片轮播效果。

6. 设置table2第4行的为4张产品广告图，。
7. 设置table2第5行的为网站特色图，
8. (网页元素应用)在table2第6行插入文字介绍，如效果图所示。
9. （固定的浮动广告）在AP Div内插入二维码，素材已经提供，并固定显示在网页右上角。当鼠标放上，产生晃动效果。
10. 保存，F12浏览网页（对比效果图）。