《中职电商》DW网页设计项目题目

网页设计与制作部分（一）

1、创建站点：面向人人技能测试；新建目标文件夹，命名为：准考证号码+姓名；并新建空白网页（index.html）及文件夹（images），其中images用来存放图像素材；最后将完成的文件以zip格式压缩上传至教师机。

2、打开index.html，设置网页标题：网易考拉； 页面背景颜色：#FFF；页面文字颜色：#000。

3、插入表格table1：5行1列，宽为1024像素，表格粗细为0，居中显示；

4、table1的第一行插入表格table2：1行3列，插入图像和表单对象。其中“购物车”为具有按钮功能的图像。

5、Table1第二行插入table3：1行5列，宽度100%。输入文字：首页、海外直购、品质奶粉、人气面膜、联系我们。设置文字样式，宋体，18px,加粗。并居中显示

（1）其中，“联系我们“设置超链接：kaola@163.com；其他主目录均为空连接；

（2）设置超级链接样式：无下划线，链接颜色：#666，变换颜色：#0F0；已访问链接：#F00；活动链接：#FF0。

6、对Table1第三行进行单元格拆分，第一列插入Spry菜单栏，输入主目录：“美容彩妆”、“母婴儿童”、“营养保健”、“数码家电”、“个护家清”、“服饰鞋靴”、“家居用品”、“户外休闲”、“海外零食”。

“美容彩妆”设置子目录：护肤、美妆。

7、根据效果图对table1第三行的第二列插入4个ap div ，名字为apdiv1，apdiv2，apdiv3，apdiv4，并利用行为面板设置3张图片轮播效果。

8、table1第四行输入文字，设置单元格背景颜色为：#CCCCCC，输入文字：新用户下载APP，领取10元无门槛优惠券，文字颜色：#FFF。

9、Table1第五行插入图像，并设置图像效果，要求鼠标经过时图片产生晃动效果。

10、在AP Div内插入二维码，并固定显示在网页右上角。

11、根据效果图对页面进行合理调整。

12、保存，F12浏览网页。

网页设计与制作部分（二）

题目描述：根据给定的素材文件夹（网页制作素材），运用 DREAMWEAVER CS6软件，设计并制作“好会买”网站的首页和登录页面，页面参考效果如下图所示。

图（1）好会买首页效果图

具体要求： 

1．打开Dreamweaver CS6，新建站点，站点名：面向人人，本地站点文件夹：以“准考证号+姓名”作为考生文件夹，将素材文件夹中的images文件夹复制到站点中。在该站点中新建html页面，保存为“index．html”。

2．设置页面属性，网页文字大小默认为13像素，文字字体默认为宋体，背景颜色为#EEE，网页标题为“好会买”。

3．首页页面布局：

①插入4行1列的表格，命名为table1,宽度为1080像素，边框为0px，对齐方式为居中对齐，单元格边距为0，单元格间距为0。表格内各元素（包括分隔线）的摆放和定位，可自行采用合适的方法，要求网页浏览与效果图一致。

②第1行拆分为3列，分别插入logo图片，搜索框为文本域，文本域显示文字“请在此输入搜索商品”，文本域的字符宽度50，插入“搜索”按钮。

③第2行插入嵌套表格1行3列，命名为table2,宽度为100%，高为430像素，适当调整每列的宽度

• 网页导航栏：

在table2的第2行第1列插入spry选项（所有商品分类）：男装·女装·运动服饰；家居·布艺·家具；食品·酒水·生鲜……等如效果图所示，设置当鼠标经过时，背景色变为#FFD2C8，文字颜色为#F30。

• 设置图片轮播

在table2的第2列插入嵌套表格2行1列的表格table3，第1行输入导航文字，如效果图所示；第2行插入4个apdiv ，名字为apdiv1，apdiv2，apdiv3，apdiv4，分别插入轮播图片1-3，图片大小为宽620像素，高度380像素，apdiv4中利用表单插入3个按钮，利用行为面板实现轮播效果，鼠标经过时变换。

• 设置图片效果

  在table2的第3列插入嵌套表格3行1列的表格table4，分别插入商品图片和文字描述，价格，为图片制作鼠标经过“显示/渐隐”效果，20%-100%显示效果。

• 设置CSS样式

为价格“￥4.9”添加样式，类“.jiage”，设置字体为黑体，字号为24px，加粗，红色

8．网页中超链接url为#，默认链接文字颜色为#333，默认链接无下划线。鼠标移入时文字颜色为#F30。页面中的导航文字“首页，特惠好物……”以及“关于我们 | 联系我们 | 配送范围 |如何付款|品牌批发”均为超链接。“登录”为超链接，链接到“denglu.html”文件

9．页脚插入一条水平线，文字信息采用段落标签<p>实现布局

10．插入浮动广告，固定在浏览器右侧顶部，距离浏览器顶部100px，居右边窗口50px。

登录页面：

图（2）好会买首页效果图

具体要求： 

利用表单制作如上图所示的登录页面，用户名，密码为文本域，密码为隐藏显示；忘记密码、立即注册为按钮，登录，QQ，微信为图像域

网页设计与制作部分（三）

利用Dreamweaver CS6，按所提供的素材和要求，完成效果图所示的网页。

创建文件夹: 在D盘创建考生文件夹dw，将素材复制到考生文件夹中,图片素材新建images文件夹中。

1.建立并设置本地根文件夹

定义Dreamweaver CS6的本地站点，命名为“国美”。

2.创建文档

新建一个HTML文档，文档命名为index.html，并将其保存到“考生”文件夹中。

3.页面属性设置

(1)页面文字设置为宋体、大小12px、文本颜色#333333、背景颜色#FF3333、左右上下边距均为0。

(2)页面标题设为“国美首页”。

4.添加页面元素

(1)在文档中插入一个3行1列的表格1，设置表格1，名称为“table”，宽度为1089px，边框粗细、单元格边距、单元格间距均为0，表格居中对齐。

（2）在表格1的第一行单元格中嵌套一个1行3列的表格2，设置表格2名称为“table2”，背景色为#FFFFFF,宽度为100%，边框粗细、单元格边距、单元格间距均为0。

（3）设置表格2左边单元格插入表单域，并插入图像域“国美LOGO”图片。

（4）设置表格2中间单元格插入“促销”图片，单元格水平左对齐。

（5）设置表格2右边单元格插入“国美站内搜索”图片，图片加边框粗细为1。

（6）设置第二行单元格的背景颜色为：#9933CC。

（7）在第二行单元格高度设为30，并嵌套一个1行7列的表格3，设置表格3，名称为“table3”，宽度为600px，单元格高度也设为30，边框粗细、单元格边距、单元格间距均为0。

（8）在表格3的每个单元格中分别输入文字：圈子、真划算、服装城、超市、电器城、国美电器、汽车。

（9）设置输入的文字：设颜色为#ffffff，大小为14PX，粗体，单元格居中对齐。

（10）表格1的第三行单元格中插入“信息大图”图片，水平居中对齐，单元格背景色设为#ffffff。

5.设置超级链接

将导航栏中“圈子”文字设置为链接至“信息大图”图片，目标设为_blank。

6.设置行为

设置“信息大图”图片的行为效果，从100%渐隐至50%，事件为onmouseover。

7.设置CCS类

设置导航文字“汽车”的CSS样式，CSS选择器类型为类，名称.font01，文字效果：大小为16px，下划线，文字颜色为黑色（#000000）。

请将操作结果保存到“考生”文件夹中，并提交文件。

网页设计与制作部分（四）

网页设计操作步骤（50分）

技能测试题(二):网页设计与制作部分

题目描述:根据给定的素材文件夹(网页制作素材)运用 DREAMWEAVER CS6软件设计并制作“比亚迪”网站的首页，页面参考效果如图所示。

• 打开Dreamweaver CS6，新建站点，站点名: 比亚迪汽车，本地站点文件夹: “DW+准考证号”（如DW211230001），将素材文件夹中的images文件夹复制到站点中。在该站点中新建html页面，保存为index.html。
• 打开网页html，设置页面标题：“比亚迪汽车欢迎你！”。网页文字大小默认为20像素，文字字体默认为楷体，文字颜色为黑色，汉字解码方式为“utf-8”；
• 页面布局采用表格布局，建议8行1列的表格，设置表格宽度为1024像素，表格边框为0px，表格对齐方式为居中对齐，单元格边距为0，单元格间距为0。表格内各元素 (包括分隔线)的摆放和定位，可自行采用合适的方法，要求网页浏览与效果图一致。
• 网页导航要求默认链接文字大小为25像素，颜色#333,无下划线;鼠标移入时背景色为#CCC，文字颜色为#FFF，“品牌中心”链接到比亚迪官网（www.bydglobal.com）；其他设为空链接；
• 实现三张图片轮播，轮播图片尺寸为宽度1024px，高度434px，打开网页时初始显示轮播1.png图。鼠标点击或移入按钮1显示轮播1.png图片，鼠标点击或移入按钮2显示轮播2.png图片鼠标点击或移入按钮3显示轮播3.png图片。
• 预约试驾中涉及的文本域的字符宽度为25；
• 页脚信息采用段落标签<p>实现布局，上下边界为10px。
• 插入浮动广告，固定在浏览器右侧顶部，距离浏览器顶部200px，距右侧10像素。

网页设计与制作部分（五）

1. 创建站点，新建并保存文件，命名为“form.html”。。
2. 将所有文件放于以“班级+姓名+号次”命名的文件夹内。
3. 插入6行1列表格1，ID为table1，设置宽度为960px，填充、间距、边框皆为0
4. 在表格1第一行插入1行2列表格2，ID为table2，设置宽度为100%，设置表格2第一列宽度为300，并插入图片“t1.jpg”。
5. 在表格2第二列插入2行2列表格3，ID为table3，设置宽度为600px。在表格3第一行第一个单元格插入文字“美国 中国”，在表格3第二行第一个单元格插入文本域，ID为sstext，设置其ID样式为：宽500px，高30px，边框粗细2px，背景颜色#ff9900。并设置单元格宽度为520px。
6. 在表格3第二行第二个单元格插入按钮，ID为sousuo，设置其ID样式为：宽50px，文字大小为14px，白色，加粗，按钮背景颜色#ff9900，边框粗细为2px，边框线颜色为#ff9900
7. 在表格1第二行插入1行4列表格4，ID为table4，设置宽度为100%。设置每个单元格宽度为240px，制作图片经过效果
8. 设置表格4第一个单元格原始图片为“t21.jpg”，鼠标经过后变为“t22.jpg”
9. 设置表格4第二个单元格原始图片为“t31.jpg”，鼠标经过后变为“t32.jpg”
10. 设置表格4第三个单元格原始图片为“t41.jpg”，鼠标经过后变为“t42.jpg”
11. 设置表格4第四个单元格原始图片为“t51.jpg”，鼠标经过后变为“t52.jpg”
12. 在表格1第三行插入1行2列表格5，ID为table5，设置宽度为100%。设置第一列单元格宽度为720px，制作图片轮播效果。
13. 在第二列单元格插入2行1列表格6，ID为table6，设置宽度为100%。插入无需列表：【插入】-【html】-【文本对象】-【项目列表】，插入后，输入文字后，按回车键，即可继续输入。

14. 设置每一个无序符号后的文字为空链接，设置文字样式：文字大小为14px，行高（line-height）为25px。  设置链接浏览前为黑色，无下划线。鼠标经过，链接为红色，无下划线。
15. 在表格1的第四行、第五行分别插入图片“T6”、“T7”
16. 设置活动浮动广告，插入AP DIV5，设置其左边距为1000px，上边距为50px，宽高为100*100px，插入图片“chengxin.jpg”，使其始终固定在页面的右上角

网页设计与制作部分（六）

  网页设计与制作部分