网页制作操作步骤之一

1、国 家 职 业 资 格 鉴 定网页设计制作员（中级/四级）试卷注意事项：1、在R盘新建一个考生文件夹，其文件夹名为：机号+网页设计制作员+考生准考证号最后五位（例：01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。考试过程中应注意经常保存文件。2、考试所需素材在S盘：网页设计制作员素材文件夹内。3、答题以试题文字要求为准，样张仅供参考。4、试卷不得带走，否则考试成绩做无效处理。一、设计制作网页内容文字和图表效果：共20分。（题库1.1.1试题单）1. 在R: 01网页设计制作员90001目录下新建1.1.1文件夹。2. 把素材库文件夹“网页设计制作员素材1.1.1”内的“

2、文件夹”中的zc.htm和images文件夹复制到R: 01网页设计制作员90001文件夹中。打开素材库文件夹“网页设计制作员素材1.1.1”内的样张“.bmp”。3. 用Dreamweaver8.0打开R盘（考生目录1.1.1文件夹下）的zc.htm文件， 2种打开文件的方式：1）打开Dreamwaever8.0软件，菜单里选择打开，选择zc.htm文件。 2）右击zc.htm文件，“使用Dreamweaver 8编辑”。4. 在适当位置插入图片zc-1.gif,并在“替换”中键入“用户注册”（添加注释）；如下图： 5. 在用户注册后的两列中设置背景图片为zc-4

3、.gif，如下图：6. 在CSS浮动面板中新建CSS规则，名称自定（如ziti），单选按钮选“仅对该文档”（内部标签）；如下图：在类型中选择 a）大小：12像素；b)行高：2倍行高；7. 按样张填入表单对象、文字，并设置CSS样式。8. 布局表格内适当位置添置按钮对象，值为“检查会员名是否”，并设置表单对象的动作属性为无；如下图： 9. 布局表格内适当位置添置按钮对象，值为“同意以下服务条款”，表单对象的动作属性为“提交”；如下图:10. 为文本“推荐：QQ邮箱”设置链接“”，为“sogou邮箱”设置链接“”；如下图：1

4、1. 保存文件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像素，画布选择自定义的黑色；如下图：3. 使用文本工具键入“loading”，设置文本字体属性：字体“Arial”、字体大小为“18”，白色，加粗；并调整至适当的位置。4. 在新建的动画文档中绘制白色矩形，具体要求：a)大小：1像素45像素；b)位置（80，40

5、）。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文件夹。三、设计制作网页动态效果：共15分。（题库1.4.1试题单）1. 在R: 01网页设计制作员90001目录下新建1.4.1文件夹。2

6、. 打开Dreamweaver8.0软件，新建2个空白页（基本页），另存到1.4.1文件夹，一个文件名为“1.4.1.html”，另外一个文件名任意（例如aa.html）。在aa.html中复制入文字“欢迎光临淘淘乐网站，祝您购物愉快”，字体，大小，颜色任意，标题任意。3. 打开“标签检查器”浮动窗口，选择“行为”选项卡，添加行为-设置文本-设置状态栏文本-其中键入或复制文字“欢迎光临淘淘乐网站，祝您购物愉快”；如下图:4. 继续添加行为-打开浏览器窗口-要显示的URL中选aa.html文件-窗口宽度和高度建议设置200（也可任意选择，不要太大）；如下图:5. 保存并浏览文件。五、制作网站主要

7、页面：共40分。（题库1.7.1试题单）1. 在R盘新建一个考生文件夹，其文件夹名为：机号+网页设计制作员+考生准考证号最后五位（例：01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。考试过程中应注意经常保存文件。2. 在R: 01网页设计制作员90001目录下新建1.7.1文件夹。3. 在1.7.1文件夹中新建images目录。4. 打开Dreamweaver8.0软件，选择“菜单”中的“站点”-新建站点-“站点名称”填入“SweetWedding1.7.1”（也可任意设置，不能与其他题目相同）-站点根文件夹选择R: 01网页设计制作员900011.7.1这个目录，勾选

8、“自动刷新本地文件列表”，如下图：5. 打开S:网页设计制作员素材 中的1.7.1文件夹，右击.bmp文件-Edit with FireWorks，参照.bmp的要求，在Firewoks8.0中对图片进行切片：可在切片属性中设置宽和高；每个切片务必在类型下的格式中选择Gif接近网页256色格式，如下图：（如果是BMP格式将无法在Dreamweaver8.0界面中显示）选择“文件”菜单中的“导出”，“保存在”设置为1.7.1文件夹，文件名设置为index，类型HTML和图像，勾选“将图像放入子文件夹”，按“保存”，如下图：在Dreamweaver8.0软件的站点文件中

9、可看到如下文件列表，如下图：6. 在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“comintro.html”(选中文件后按F2重命名)，并双击打开，在编辑界面键入“公司介绍”四个字，如下图：选中文字，属性中设置链接文件为index.htm,如下图：7. 如第6步，在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“wedserv.html” (选中文件后按F2重命名)，并双击打开，在编辑界面键入“婚庆服务”四个字；选中文字，属

10、性中设置链接文件为index.htm。8. 如第6步，在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“wedbook.html” (选中文件后按F2重命名)，并双击打开，在编辑界面键入“结婚手册”四个字，选中文字，属性中设置链接文件为index.htm。9. （a）选择如下区域图片，在“公司介绍”部分，制作热点链接，链接文件为comintro.html,目标选择“_self”,表示在当前页打开链接页面，如下图：（b）选择如下区域图片，在“婚庆服务”部分，制作热点链接，链接文件为wedserv.html,目标选

11、择“_blank”,表示在新窗口打开链接页面。（C）选择如下区域图片，在“结婚手册”部分，制作热点链接，链接文件为wedbook.html,目标选择“_blank”,表示在新窗口打开链接页面。 （d）为“首页”图片建立空链接“#”，如下图： （e）为“登陆”图片建立空链接“#”，如上图：（f）为“注册”图片建立空链接“#”，如上图：（g）为“联系我们”图片建立邮件链接，为“mailto:”。（注意使用英文冒号:）10. a）在Dreamweaver8.0软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建

12、文件”，文件名改为“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

13、_main”；把s盘素材文件目录1.7.1文件夹下的.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和b