网页设计项目一
活动 1 找到电商网站
（ 1 〕 认识电了务网是设计与开发电了商务网页的前提和基础 ． 互联网电商网站千姿百态 、 但万变不离其宗 。 电了商务务网是指一个企业、机构或公司在互联网上建立的站点 ， 是企业 、 机构或公司开展电子商务的基础设施和信息平台 ， 是实施电子商务的公司或商家与客户之间的交界面 ， 是电了商务系统运行的承担者和表现者 ， 其目的是宣传企业形象 、及布产品信息 、 宣传经济法蠼 、 提供龠业服务等 。 （ 多选 ）
（ 2 ） 浏览器及搜索引擎选择选择
常见的浏览器有 《 IE 浏览器 、 360 浏览器 、 搜狗浏器 、 火狐浏览器 、 谷歌浏览器 Chrome。
每种浏览器都有各自的版本 ， 当网站页面不能顺利显示时 · 可以通过史換浏览器或升组浏览器的版本来解决 。 常见的搜索引擎有百度 （ http：//www.baidu.com） 360《http://www.360.cn)、
Google(http://www.google.com)、 搜狗(https.//www.sougou.com)， · 其中百度是目前国内最大的搜索引擎 ， 占据市场第一位 ， 能解决用户的人部分同题 ， 是 90% 以上中国网民所依懒的搜索引擎 。
（ 3 ） 电了商务网夷特点
电了商务网站的网页设计需遵循下面五个则 ； 页面易读 、 容易浏览 、 方便查找 、 风格布局保持一致 、 页面快速下载 。
规则一：页面易读 。 用户会使用完拿不同的电脑 、 显示器 、 网络连接 ， 以及浏览览器 。 因此 ， 作为一个通用的规则 ， 在设计者向主要的站点目提交站点之前 ， 网页中的每一项目都需要在主要的浏览器和两种电脑上清晰易读。
规则二 ： 容易浏览 。 “ 容易浏览 “ 意昧着目标客户在任何时候访问站点都能知道他们所处的位置 ． 导航明确 ， 导向清晰 、 使用方便 。 由于人们习惯于从左到右 、 从上到下阅读 ， 所以主要的导航条应放置在页面左边 · 对于较长页面来说 ， 在最底部设置一个简单导航也很有必要 ．
规则三 ： 方使查找 ． 网站提供的独特的产品 、 服务 ， 以及信息应该很容易地在用户登录站点后找到 。 一般来说客户不想在登录主页后处寻找信息 ． 人们愿意浏览直接包含他们寻找的信息的网页 。 如果他们必点击史多次 ， 可能就会灰心 ， 然后离开 。
规则四 ： 风格布局保持一致 。 网站的风格和布局应该保持一致 ， 布局设计的一致性能够帮助客户在浏览站点时 ， 使他感觉舒服 · 在站点的设计过程中 ， 许多方面都是重复的生站点中的每一个网页在主体文本 、 超链接 ， 以及标中使用的字体 、 样式 、 颜色应该都是一样的 。
规则五 ： 页而快速下载 。 页面下载速度是网站留住访问者的关因 。 如果 5 秒还不能打开一个网页 · 一般人就会没有耐心 ． 页面快速下载保证访同者能以最快的速度进出网站 ，
（ 4 } PC端和移动端网页旱现的区别
随着移动电商的发展 ， 企业在开发品惚的官网时 ， 不仅重视页面在端的呈 ， 同时也非常重视页面在移动端呈现的效果 · 移动端网页开发和端网页开发的特点区别在以下两点生
(1) 网身特点 ： pc 端带宽高 ， 网络连接相对稳定 ： 而移动带宽低 ， 网络不稳定 ， 间歇性连通

（2）分辨率 ： 端分率相对固定 ： 而移动端不同手机品膂甚至同一品牌手机不同型号 ，分辨率别都很大 。

活动 2 描述电商网站功能及架构
（ 1） 电子商务网站功能的设计是电子商务实施与运作的关键环节 ， 是电子商务应用系统构建的前提 。 随着网络信息技术的逐渐发展和普及 ， 企业认识到利用互联网进厅品牌建设 、市场拓展的重性 。 由于在网上开展的电了商务业务不尽相同，所以每一个电了商务网在具体实施功能上也不相同 。 其中有些企业专注于电子商务 ， 也有些企业利用电子商务作为
运作的第二道。 但无论哪种企业 ， 电了商务网站的功能殊途同归 ， 即充分利用互联网信息传播范围广 、 速度快的优势 ． 拓展线 下交易 ， 建立网上展示 、 交易平台 。 对企业电了到务网
站来说 ， 一般要拥有以下功能 ：
(1) 商品展示 ·
（2）信息检索 ．
（3）商品订购 ·
（4）网上支付 ．
（5）信息管理 ，
（6）信息反帻 ·
(7) 形象宣传 ·
电子商务网站由一系列硬件 、 软件系统 、 网页和数据库等组成
（ 2 ） 电了商务网站各功能的作用
1商 品展示
用户进入企业的电子商务网站 ， 像进入现实中的超市一样 ， 能够看到琳琅满目的商品 ·
这些商品是经过分类的 ， 就像超市中旖商品分为服装类 、 副食类 、 家电类等一样 。
2 ． 信息检索

务网站提供信息搜索与查询功能 ， 可以使客户在电了务数撫阼中轻松而快捷地找到
需要的信息 ， 这是电子商务网站能否使用户久留的重要因素 ．
3 ． 商品订购
用户发峴自己感兴趣的商品时 ， 单击该商品可以看到该高品的文字 、 图片 ， 视頻等多种
样式的描述性信息 。 网上的订购通常是在产品介绍的页面上提供十分友好的订购提示信息和
订购交互对话框 ， 实现用户在线贸易磋商 、 在线预订商品 、 网上购物或获取网上服务的业务
功能 ． 提供全天候的随时易 ·
4 、 网卜支付
网支付必须有电了金融的支持 ， 即裉行或信用卡公司及保险公司等金单位要为金融
服务提供网上作的服务 ， 目前客户和商嚷之间主要采用信用卡进五支付 ， 信用卡卡号或银
行账号都是电子账户的一种标志 · 一些新的网上支付形式在不断探索中 ·
5 ． 信息管理
完整的电了商务网站还要包括艄售业务信息管理功能 。 客户信息管理是反醺网站主体能
否以客户为中心 、 能否充分地利用客户信息挖掘巾炀潜力 、 有重要利用价值的功能 ， 是电子
商务中主要的信息管理内容 。
6 ． 信息反馈
一个成功的网站必须是交互性的 、 多点信息互动的 · 企业发布功能包括新闻的动态更新 、
新闻的检索 · 热点问迦追踪 ， 行业信息 、 供求信息 ， 需求信息的发布等 · 企业可以利用网站
收集客户反馈回来的信息 ， 然后根撫这些信息作出自己的决定 。
7 ， 形象宣传

DW网页设计项目一操作题一

1.在D盘新建文件夹，将其命名为“Myweb”，在该文件夹中新建“images”文件夹存储站点素材图片，利用Dreamweaver软件建立站点，命名为“易购网”。
2.新建网页命名为“index.html”，将网页标题命名为“易购网登录页面”，设置页面文字大小为12像素。
3.新建一个2行2列的表格，宽度为1 024像素；根据效果图在表格第一行适当位置插入相应图片和文字。
4.设置第2行背景颜色如效果图所示，在第2行第1列插入如效果图所示图片，设置第2行第2列的对齐方式为“水平居中，垂直居中对齐”，在第2行第2列表格中插入4行1列宽350像素的表格，在该表格中插入相应文字和图片。
5.保存网页并进行预览。

DW网页设计项目一操作题二

1.新建站点，将素材放入站点根文件夹中，新建index.html文件。
2.插入2×1的表格，并在第1行插入店招。
3.将光标停在第2行，选择“插入—布局对象—AP div”，插入AP div,并在新建的AP div中插入图片1。
4.按照步骤3添加另外两个AP div，并在里面插入图片。
5.再插入一个AP div，并在里面插入一个1×3的表格，单击“插入—表单—按钮”，依次添加按钮，并分别把属性值改成1、2、3。
6.把三个AP div移到同一区域，如效果图所示。
7.单击“窗口—行为”，打开行为面板，选中第一个按钮，单击行为面板下方的“+”号，在弹出的菜单中选择“显示-隐藏元素”，将AP div1设置成显示，AP div2和AP div3设置成隐藏。
8.单击行为面板左侧的英文，在弹出的菜单中选择“OnMouseOver”。
9.按照上面步骤设置第2、3个按钮。
10.保存并预览网页。

DW网页设计项目一操作题三

1.新建站点，将素材放入站点根文件夹中，新建index.html文件。
2.新建3×1的表格，按照效果图在第1、3行放入图片，并设置格式。将光标停在第2行，选择“插入—spry—spry菜单栏”，在弹出的“spry菜单”对话框中选取“水平”布局方式。
3.修改“spry菜单栏”的各项属性，通过点击“+”和“-”来添加主菜单项或子菜单项，根据题目要求完成导航文字的添加。
4.在CSS面板中，修改spry菜单组件中各样式。
5.保存并预览网页。

DW网页设计项目一操作题四

1.新建站点，将素材放入站点根文件夹中，新建index.html文件。
2.新建3×1的表格，在第1、3行插入图片，并设置单元格格式。
3.在第2行插入一个1×6的表格，宽度为75%，水平居中，命名为“tb1”,并按效果图插入文字。
4.新建“tb1”的鼠标经过文字单元格样式，令其当鼠标指针经过导航时，导航文字变粗，文字颜色变成白色，背景色为#C60。
5.保存并预览网页。

DW网页设计项目一操作题五

1.新建站点，将素材放入站点根文件夹中，新建index.html文件。
2.插入2×1的表格，并在第1行插入店招。
3.将光标停在第2行，选择“插入—布局对象—AP div”，插入AP div,并在新建的AP div中插入图片1。
4.按照步骤3添加另外两个AP div，并在里面插入图片。
5.再插入一个AP div，并在里面插入一个1×3的表格，单击“插入—表单—按钮”，依次添加按钮，并分别把属性值改成1、2、3。
6.把三个AP div移到同一区域，如效果图所示。
7.单击“窗口—行为”，打开行为面板，选中第一个按钮，单击行为面板下方的“+”号，在弹出的菜单中选择“显示-隐藏元素”，将AP div1设置成显示，AP div2和AP div3设置成隐藏。
8.单击行为面板左侧的英文，在弹出的菜单中选择“OnMouseOver”。
9.按照上面步骤设置第2、3个按钮。
10.保存并预览网页。

DW网页设计项目一操作题六

1.新建站点，将素材放入站点根文件夹中，新建index.html文件。
2.插入4×1的表格，在第1、2、3行中按效果图插入图片，第4行插入1×3的表格，表格宽度为75%，单元格间距为20，并在单元格中插入图片。
3.选中第一张收藏宝贝的图片，单击行为面板下方的“+”号，在弹出的菜单中选择“效果-晃动”。单击行为面板左边的英文，在弹出的菜单中选择“OnMouseOver”。
4.用同样的方式设置另外两张图片。
5.插入一个AP div，放置在网页的右上角，调整AP div的大小。
6.选中AP div，新建CSS样式，命名为“#AP div1”，设置定位方式为固定在网页中。
7.在AP div中插入图片。
8.保存并预览网页。

DW网页设计项目一操作题七

1.新建站点“1号店”，新建zhuce.html页面。
2.绘制div1，设置边框为灰色实线。
3.在div1内左边插入图像“dianzhao.jpg”，右上角输入文字“您好，欢迎光临1号店！请登录”。
4.在页面中间位置绘制div2。
5.在div2中插入表单，并在表单里面插入10行1列的表格。
6.在表格的第1行输入标题“1号店注册”，设置为黑体16号字加粗显示。
7.在表格的第2、3、5、6行插入文本域，新建CSS样式类.wb1-方框–宽度300像素，高度50像素并套用，初始文字分别为“用户名”“手机号”“设置密码”“确认密码”。
8.把表格的第4行拆分成两列，左边插入文本域，新建CSS样式类.wb2-方框–宽度170像素，高度50像素并套用，初始文字为“短信验证码”；右边插入按钮，值为“获取验证码”，新建CSS样式类.anniu1-方框–宽度120像素，高度55像素，同时设置深灰色#57565f背景，白色16号文字，并套用。
9.在表格的第7行输入文字“点击注册，表示您同意1号店《服务协议及隐私声明》”。“《服务协议及隐私声明》”注为蓝色宋体12号字。
10.在表格的第8行插入按钮，值为“同意协议并注册”， 新建CSS样式类.anniu2-方框–宽度300像素，高度55像素，红底#ff3c3c，黑体16号加粗白字，并套用。
11. 预览，保存。

DW网页设计项目一操作题八

1.新建空白HTML页面，命名为xiangqing.html，更改页面标题为“淘宝详情页”。
2.在表单内插入2行3列宽1 024像素的表格，居中对齐。
3.在表格第1行第1列放入淘宝Logo图片1.png。
4.在表格第1行第2列内插入表单，再插入文本框和按钮，右对齐。新建CSS样式类.wb3-方框–宽度280像素，高度30像素，红色边框并套用在文本框上；新建CSS样式类.anniu3-方框–高度35像素，#ff3c3c红色背景，黑体14号白字，套用在按钮上。
（1）设置表单的动作为http://www.baidu.com/baidu,目标为“_blank”,方法为“默认”。
（2）将文本域的Name值修改为“word”。
（3）通过“插入—表单—隐藏域”菜单，在表单中插入4个隐藏域。
（4）设置第一个隐藏域的名“TN”,值为“BDS”。
（5）设置第二个隐藏域的名“CL”，值为“3”。
（6）设置第三个隐藏域的名“CT”，值为“2097152”。
（7）设置第四个隐藏域的名“SI”，值为“www.zkorz.com”。
5.在第2行第1列单元格中插入一个2行5列嵌套表格，宽91％，填充0，间距5，边框0，合并第1行5列，插入5个400像素×400像素的AP div，并在每个AP div中插入对应的5副图，在第2行的每1列中分别插入80像素×80像素的素材图，并对每一副小图添加行为“显示-隐藏层”，事件onMouseOver。
6.在第2行第2列中插入9行1列嵌套表格，宽98％，填充0，间距5，边框0，依样图所示在各行输入相应的文字和图片。第1行标题字体为黑体18号字，其余字体为默认大小14号字，第2行￥ 439.00的字体为黑体30号字，颜色为#FF6600，单元格背景颜色设为#FFF2E8。
7.第7行文字“数量”后面插入2个按钮，值为“+”和“-”，再输入对应文字。
8.第8行插入2个按钮，值为“立即购买”和“加入购物车”，新建CSS规则类，边框宽120像素，高40像素，边框颜色为#FF6600，填充颜色为#FFF9F5，14号字，并套用。
9.在表格第3列添加素材图片3.png。
10.预览，保存。

DW网页设计项目一操作题九

1.建立并设置本地根文件夹，新建本地站点，命名为“购物车”。
2.新建一个HTML文档，命名为gouwuche.html，并将其保存到“操作题”文件夹中。
3.设置页面属性。
（1）页面文字为宋体，大小为12像素，左右上下边距均为0。
（2）页面标题设为“购物车”。
4.插入8行1列的表格，宽度为1 024像素。
5.第1行拆分成两列，左边单元格插入图片“gwc.png”。
6.第1行第2列插入表单，表单内插入1行3列表格，宽度为525像素。
7.表单内第1列插入下拉列表，属性样中设置初始值“宝贝”；新建CSS规则类.leibiao，设置方框宽80像素，高37像素，上、下、左边框宽度为“中”，颜色为#fb4402；套用在下拉列表中。
8.表单内第2列插入文本框；新建CSS规则类.wenben，设置背景图像Q37.png，不重复，左对齐；方框宽350像素，高29像素，上、下边框宽度为“中”，颜色为#fb4402；套用在文本框中。
9.表单内第3列插入按钮；设置值为“搜索”，新建CSS规则类.anniu，设置字体为黑体，18号，加粗，白色；背景颜色#fb4402，方框宽95像素，高37像素，边框颜色#fb4402；套用在按钮上。
10.第2行拆分成两列，左边插入文字“全部商品34”“降价商品0”“库存紧张0”，数字设为红色，空链接，新建CSS，a:link宋体16号字，加粗，无下画线；a:hover宋体16号字红色文字，加粗，带红色下画线。
11.右边插入文字“已选商品（不含运费） 0.00”，数字设为红色；插入按钮，值为“结算”，新建CSS规则类.anniu1，设置字体为黑体，12号，白色；背景颜色为#999999，方框宽50像素，高24像素，套用在按钮上。
12.第3行如样图所示插入复选框和文字。
13.第4行如样图所示插入复选框、图片和文字。
14.第5行插入1行8列表格，宽度为96%，新建CSS规则类.bk，设置表格边框为灰色细线。各列中如样图所示插入复选框、图片和文字。其中“颜色分类”列为灰色文字，12号字；“单价”列中原价为灰色文字，12号字，带删除线，新价格为黑色12号字；“数量”列为单行文本框。；“金额”列为红色12号字。
15.第6行如样图所示插入复选框、图片和文字。
16.第7行插入1行8列表格，宽度为96%，套用CSS规则类.bk。各列中如样图所示插入复选框、图片和文字。样式如第5行。
17.第8行设置背景颜色为#CCCCCC，如样图所示插入复选框、图片、文字和按钮。新建CSS规则类.anniu2，设置字体为黑体，18号，白色，加粗；背景颜色#999999，方框宽100像素，高40像素，套用在按钮上。
18.预览，保存。

DW网页设计项目一操作题十

1.新建站点，新建空白HTML页面jiesuan.html，并更改页面标题为“买家订单结算”。
2.设置页面属性。
（1）页面文字为宋体，大小为12像素，左右上下边距均为0。
（2）页面标题为“买家订单结算页面”。
3.插入表单。
4.在表单中插入9行1列的表格，居中对齐。
5.在第1行插入图片“tmt.png”。
6.在第2行插入文字“选择收货地址”，加粗，左对齐。
7.在第3行插入图片“b.jpg”，设置行为——交换图像D.jpg；插入图片“a.jpg”，设置行为——交换图像C.jpg。
8.在第4行插入按钮，值为“使用新地址”。
9.在第5行插入14行1列的嵌套表格，如样图所示插入文字和图片，插入水平线，并设置为蓝色，生成如图所示的“确认订单信息”，其中第10—13行设为蓝色背景。
10.将第6行拆分成2列，第2列内插入1行1列嵌套表格，新建CSS规则类.bk，设置红色实线边框#fd0036；输入文字，其中“实付款：”“寄送至：”“收货人：”加粗；价格“￥ 69.90”为红色14号字。
11.第7行插入按钮，值为“提交订单”，新建CSS规则类.anniu，设置字体为黑体，12号，白色，加粗；背景颜色为红色#fd0036，方框宽130像素，高28像素，边框细，颜色为#fd0036，套用在按钮上。
12.预览，保存。

DW网页设计项目一操作题十一

1.建立并设置本地根文件夹，新建本地站点，命名为“化妆品专卖店”。
2.新建一个HTML文档，命名为index.html，并将其保存到文件夹中。
3.设置页面属性，默认宋体12号字，左边距、上边距均为0。
4.插入4行1列的表格，居中对齐。
5.第1行插入1行2列的嵌套表格，调整大小。在第1列插入图片“logo.jpg”，在第2列设置背景图片“bg.jpg”，输入导航栏文字，设首页的链接为index.html，商品查询的链接为spcx.html，积分兑换的链接为jfdh.html，其他为空链接，黑体14号字。
6.第2行插入表单，再插入1行3列的嵌套表格，在第2列设置背景图片“bkk.jpg”，插入文本域，设置宽度为300像素，第3列插入图片“search.jpg”。
7.第3行插入1行2列的嵌套表格。第1列占比30%，并插入7行1列的嵌套表格，如样图所示插入图片和文字。
8.在第2列内插入4行1列的嵌套表格。在第1行内插入两个大小相同并重叠的层div1和div2，在两个层内分别插入图片“TIM00.png”和“TIM24.png”。在单元格右下角插入div3，里面插入①和②，打开行为面板，设置显示-隐藏层，鼠标经过①时显示图片“TIM00.png”，鼠标经过②时显示图片“TIM24.png”。
9.在第2行内插入图片“sx.png”，输入文字“推荐商品”，设置为黑体14号字。
10.第3行拆分成5列，如样图所示插入图片。
11.第4行拆分成5列，如样图所示输入文字，价格为红色，设置间距和文字样式。
12.最底下一行输入版权信息，设置文字为宋体灰色10号字。
13.保存网页并预览。

DW网页设计项目一操作题十二

1.打开首页index.html。
2.删除轮播图片和推荐商品栏。
3.插入可编辑区域，命名为banner01。
4.执行“文件—另存为模板”命令，模板名称为huazp.dwt。
5.执行“文件—新建—模板中的页”命令，选择模板huazp.dwt，创建网页。
6.执行“文件—保存”命令，输入文件名jfdh.html。
7.在可编辑区域插入2行1列100%的表格，在第1行中插入图片，输入文字。
8.在第2行中插入2行2列的嵌套表格，插入图片，输入文字。
9.保存网页。
10.执行“文件—新建—模板中的页”命令，选择模板huazp.dwt，创建网页。
11.执行“文件—保存”命令，输入文件名wsgw.html。
12.在可编辑区域插入5行3列100%的表格。
13.合并第1行的3列，插入图片，输入文字。
14.在第2、3行各单元格中插入图片，输入文字。
15.保存网页。
16.预览，要求三个文件之间跳转正常。

DW网页设计项目一操作题十四

1.新建文件夹“操作题”。
2.新建一个Photoshop文档，尺寸为640像素×1 920像素，命名为“index.psd”，并将其保存到“jiaju”文件夹中。
3.制作活动主题海报图。设置海报区域尺寸为640像素×430像素，将图片“yt01.jpg”拉入，输入家装节相关文字。
4.制作优惠券模块图。在活动主题海报下方适当位置绘制黄色矩形，尺寸为186像素×190像素,输入“优惠券”等文字；另绘制两个蓝色矩形，尺寸为175像素×190像素，输入满减等优惠信息。
5.制作热销商品模块图。在优惠券下方适当位置将图片“Q58.png”“Q33.png”“Q05.png”依次拉入，调整间距，下方配上蓝底白色相关文字。
6.制作新款推荐模块图。在热销商品模块下方适当位置将图片“Q38.png”“Q21.png”“Q25.png”“Q40.png”“Q14.png”依次拉入，调整间距，下方配上蓝底白色相关文字。
7.保存。
8.利用切片工具将文档进行按不同模块进行切割，并另存成网页，首页index.html和图片保存在“操作题”文件夹中。

DW网页设计项目一操作题十五

1.打开淘宝进入“卖家中心”页面，单击“手机淘宝店铺”，在页面中单击“无线店铺”的“立即装修”。
2.从“店铺装修”中的“店铺首页”进入“无线装修”。
3.输入店铺名“美居家居工厂直销店”。
4.制作首页轮播图模块。在“店铺装修”的“图文类”模块中选择“轮播图模块”，拖入中间预览的虚线区域。在右侧编辑页面中，上传操作训练一中切割出来的活动主题海报图。
5.制作优惠券模块。在“店铺装修”的“图文类”模块中选择“多图模块”，拖入中间预览图中。在右侧编辑页面中，输入标题“优惠券”，上传操作训练一中切割出来的优惠券图。
6.制作生成热销产品模块。依据切割出的图片类型，在“店铺装修”的“图文类”模块中选择“单列图片模块”或“双列图片模块”或“多图模块”，上传图片。
7.制作生成新款上市模块。依据切割出的图片类型，在“店铺装修”的“图文类”模块中选择“单列图片模块”或“双列图片模块”或“多图模块”，上传图片。
8.保存，预览。检查无误后，单击“发布”按钮，选择“立即发布”。

Dreamweaver上机考试题目示例

一、页面元素操作类

• 锚点链接设置
  • 在1.html 中的顶部添加一个锚点链接，点击之能立即到达页面最底端2。
• 超链接样式修改
  • 将1.html 中的所有链接的默认样式改成红色字体及不带下划线（使用CSS规则a:伪类）2。
• 热点链接创建
  • 在2.html 页面中将地图中的烟水亭位置增加一个热点链接指向pic文件夹下的烟水亭.jpg，实现点击看到烟水亭大图的效果2。
• 表格边框与单元格操作
  • 将3.html 中的表格边框设置成只有外边框而内部单元格则没有4。
  • 将3.html 中的表格单元格2拆成2列，其中第二列插入图片（pic/嘻嘻.jpg），并且让图片靠上边对齐4。
• 文本字体修改
  • 从网站上下载到一个好看的字体（其它素材中的汉仪柏青体简.ttf），将1.html 页面中的所有默认字都变成这种字体4。

二、多媒体相关操作类

• Flash相册制作
  • 在5.html 页面中制作一个简易的Flash相册，要求自动翻页，并包含2张图片（pic/photo1.jpg 、photo2.jpg ）4。
• 背景音乐添加与设置
  • 在5.html 中添加一首背景音乐1001.mid ，并让它只播放一次4。
  • 在5.html 中添加一个mp3的音乐播放器，带有控制界面，并且只能点击后才会开始播放4。

三、表单相关操作类

• 密码框及邮件框设置
  • 在7.html 表单页面中，将密码及确认框改成在预览时输入密码呈现*号且最多输入10位的密码，另外将邮件框改成默认里面就已经存在@163.com ，方便用户预览时省去输入这部分4。
• 表单元素添加
  • 在7.html 表单页面中，添加2个表单元素，1是出生年的下拉选择菜单和一个可多选的兴趣爱好组（包含3个选项：运动，音乐，网游）4。

四、站点相关操作类

• 站点规划与创建
  • 规划并创建“果蔬网”站点，先规划站点的结构，明确站点每部分的分类，及分类文件夹中的页面，然后在Dreamweaver中进行站点、文件和文件夹的创建与编辑3。

五、插件相关操作类

• 右键菜单制作
  • 将其它素材中的右键菜单插件安装后，再在Dreamweaver中打开4 – 右.html，调用此插件制作一个简易的右键菜单（添加一个访问网易的链接）4。

六、页面布局与特效类

• 滚动文字设置
  • 将5.html 页面中的这些字“就在这个框里插入考题中要求的内容(如音乐播放器=)”滚动起来，要求从上往下滚，滚动速度值为14。
• 图片转换与交互设置
  • 利用Fireworks8.0将下面pic/pic2html.jpg 转换成一个网页文件，并且要求鼠标移上About时，会在状态栏出现一段文字描述“欢迎来到我们的网站，点击鹰会打开更详细的介绍页面!”此外点击鹰真的会打开1.html ，试着在pic2html.jpg 图片上添加一圈文字效果（文字可以自己随便写一句）4。
• 页面跳转与搜索引擎优化设置
  • 为了更好的被搜索引擎收录，设置1.html 的关键词为:“九江简介，九江概况”；网页说明为:“关于九江的基本介绍，包括地理环境，人文历史，物产资源等，欢迎来九江!”此外希望在打开1.html 后过5秒，不需点击链接页面会自动跳转到4.html 页面4。

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

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”，使其始终固定在页面的右上角

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

  网页设计与制作部分