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.保存，预览。检查无误后，单击“发布”按钮，选择“立即发布”。