网页制作操作步骤之一

1国家职业资格鉴定《网页设计制作员》（中级/四级）试卷注意事项：1、在R盘新建一个考生文件夹，其文件夹名为：机号+网页设计制作员+考生准考证号最后五位（例：01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。考试过程中应注意经常保存文件。2、考试所需素材在S盘：\网页设计制作员素材文件夹内。3、答题以试题文字要求为准，样张仅供参考。4、试卷不得带走，否则考试成绩做无效处理。一、设计制作网页内容文字和图表效果：共20分。（题库1.1.1试题单）1.在R:\01网页设计制作员90001目录下新建1.1.1文件夹。2.把素材库文件夹“网页设计制作员素材\1.1.1”内的“1.1.1.2文件夹”中的zc.htm和images文件夹复制到R:\01网页设计制作员90001文件夹中。打开素材库文件夹“网页设计制作员素材\1.1.1”内的样张“1.1.1.1.bmp”。3.用Dreamweaver8.0打开R盘（考生目录1.1.1文件夹下）的zc.htm文件，2种打开文件的方式：1）打开Dreamwaever8.0软件，菜单里选择打开，选择zc.htm文件。2）右击zc.htm文件，“使用Dreamweaver8编辑”。4.在适当位置插入图片zc-1.gif,并在“替换”中键入“用户注册”（添加注释）；如下图：5.在用户注册后的两列中设置背景图片为zc-4.gif，如下图：6.在CSS浮动面板中新建CSS规则，名称自定（如ziti），单选按钮选“仅对该文档”（内部标签）；如下图：2在类型中选择a）大小：12像素；b)行高：2倍行高；7.按样张填入表单对象、文字，并设置CSS样式。8.布局表格内适当位置添置按钮对象，值为“检查会员名是否…”，并设置表单对象的动作属性为无；如下图：9.布局表格内适当位置添置按钮对象，值为“同意以下服务条款…”，表单对象的动作属性为“提交”；如下图:310.为文本“推荐：QQ邮箱”设置链接“”，为“sogou邮箱”设置链接“”；如下图：11.保存文件zc.html，注意一定要保存至到考试盘R盘R:\01网页设计制作员90001目录下的1.1.1文件夹内。二、制作Gif动画：共15分。（题库1.2.1试题单）1.在R:\01网页设计制作员90001目录下新建1.2.1文件夹。2.打开Fireworks8.0软件，新建Fireworks文档，宽度710像素，高度160像素，画布选择自定义的黑色；如下图：43.使用文本工具键入“loading……”，设置文本字体属性：字体“Arial”、字体大小为“18”，白色，加粗；并调整至适当的位置。4.在新建的动画文档中绘制白色矩形，具体要求：a)大小：1像素×45像素；b)位置（80，40）。5．选中矩形，在“帧”浮动窗口的右上角“选项中”选择“重制帧”，如下图：6.在第2帧中修改矩形宽度为40像素，再重制一帧宽度改为80，依次重制到12帧，每帧宽度增加40左右，最后一帧的宽度设为450。如下图：7.打开“历史记录”浮动窗口，框选所有的记录，按右下角保存为命令，名称为“1.2.1”。8.优化浮动窗口中选择“动画gif”，导出为1.2.1.gif，保存至R盘的1.2.1文件夹。9.保存文档为1.2.1.png文件，保存至R盘的1.2.1文件夹。5三、设计制作网页动态效果：共15分。（题库1.4.1试题单）1.在R:\01网页设计制作员90001目录下新建1.4.1文件夹。2.打开Dreamweaver8.0软件，新建2个空白页（基本页），另存到1.4.1文件夹，一个文件名为“1.4.1.html”，另外一个文件名任意（例如aa.html）。在aa.html中复制入文字“欢迎光临淘淘乐网站，祝您购物愉快”，字体，大小，颜色任意，标题任意。3.打开“标签检查器”浮动窗口，选择“行为”选项卡，添加行为-设置文本-设置状态栏文本-其中键入或复制文字“欢迎光临淘淘乐网站，祝您购物愉快”；如下图:4.继续添加行为-打开浏览器窗口-要显示的URL中选aa.html文件-窗口宽度和高度建议设置200（也可任意选择，不要太大）；如下图:5.保存并浏览文件。五、制作网站主要页面：共40分。（题库1.7.1试题单）1.在R盘新建一个考生文件夹，其文件夹名为：机号+网页设计制作员+考生准考证号最后五位（例：01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。考试过程中应注意经常保存文件。2.在R:\01网页设计制作员90001目录下新建1.7.1文件夹。3.在1.7.1文件夹中新建images目录。64.打开Dreamweaver8.0软件，选择“菜单”中的“站点”-新建站点-“站点名称”填入“SweetWedding1.7.1”（也可任意设置，不能与其他题目相同）-站点根文件夹选择R:\01网页设计制作员90001\1.7.1这个目录，勾选“自动刷新本地文件列表”，如下图：5.打开S:\网页设计制作员素材中的1.7.1文件夹，右击1.7.1.1.bmp文件-EditwithFireWorks，参照1.7.1.2.bmp的要求，在Firewoks8.0中对图片进行切片：可在切片属性中设置宽和高；每个切片务必在类型下的格式中选择Gif接近网页256色格式，如下图：（如果是BMP格式将无法在Dreamweaver8.0界面中显示）选择“文件”菜单中的“导出”，“保存在”设置为1.7.1文件夹，文件名设置为index，类型HTML和图像，勾选“将图像放入子文件夹”，按“保存”，如下图：7在Dreamweaver8.0软件的站点文件中可看到如下文件列表，如下图：6.在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“comintro.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“公司介绍”四个字，如下图：选中文字，属性中设置链接文件为index.htm,如下图：87.如第6步，在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“wedserv.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“婚庆服务”四个字；选中文字，属性中设置链接文件为index.htm。8.如第6步，在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“wedbook.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“结婚手册”四个字，选中文字，属性中设置链接文件为index.htm。9.（a）选择如下区域图片，在“公司介绍”部分，制作热点链接，链接文件为comintro.html,目标选择“_self”,表示在当前页打开链接页面，如下图：（b）选择如下区域图片，在“婚庆服务”部分，制作热点链接，链接文件为wedserv.html,目标选择“_blank”,表示在新窗口打开链接页面。（C）选择如下区域图片，在“结婚手册”部分，制作热点链接，链接文件为wedbook.html,目标选择“_blank”,表示在新窗口打开链接页面。（d）为“首页”图片建立空链接“#”，如下图：（e）为“登陆”图片建立空链接“#”，如上图：（f）为“注册”图片建立空链接“#”，如上图：9（g）为“联系我们”图片建立邮件链接，为“mailto:[e-mail]”。（注意使用英文冒号:）10.a）在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，文件名改为“bbs_top.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“bbs_top”。b）在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，文件名改为“bbs_left.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“bbs_left”。C）在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，文件名改为“bbs_main.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“bbs_main”；把s盘素材文件目录1.7.1文件夹下的1.7.1.3.swf复制到images目录，并在bbs_main.html中插入此flash文件。11.a）文件菜单-新建框架集-上方固定，左侧嵌套（T字型）；b）建立好框架以后马上在“文件”菜单中选择“框架集另存为”，把框架集另存在SweetWedding1.7.1根目录下，文件名为为bbs.html。c）打开框架浮动窗口，选中topFrame区域，打开“标签”浮动窗口，在“CSS/辅助功能”项中把id改为top，回车确认（框架名称改为top）；如下图：分别设置其他两个区域的的框架id名称为left和main。d）分别选中框架浮动菜单中的3个区域，设置3个区域的源文件为bbs_top.html,bbs_left.html和bbs_main.html。如下图：e）选中bbs_top.html文件中的文字，链接到文件index.htm,目标中选择“main”；如下图：10f）选中横向的框架分割线，属性中选择上方区域，行设置为120像素；如下图：下方区域行设置为308像素。g）选中竖向的框架分割线，属性中选择左面区域，列设置为150像素；如下图：右面区域设置为578像素。11.右击上方文件列表条，保存全部，并在IE中浏览（快捷键F12）。