网页制作操作步骤之一.docx

网页制作操作步骤之一.docx

《网页制作操作步骤之一.docx》由会员分享，可在线阅读，更多相关《网页制作操作步骤之一.docx（13页珍藏版）》请在冰豆网上搜索。

网页制作操作步骤之一

国家职业资格鉴定

《网页设计制作员》（中级/四级）试卷

注意事项：

1、在R盘新建一个考生文件夹，其文件夹名为：

机号+网页设计制作员+考生准考证号最

后五位（例：

01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。

考试过程中应注意经常保存文件。

2、考试所需素材在S盘：

\网页设计制作员素材文件夹内。

3、答题以试题文字要求为准，样张仅供参考。

4、试卷不得带走，否则考试成绩做无效处理。

一、设计制作网页内容文字和图表效果：

共20分。

（题库1.1.1试题单）

1.在R:

\01网页设计制作员90001目录下新建1.1.1文件夹。

2.把素材库文件夹“网页设计制作员素材\1.1.1”内的“文件夹”中的和images文件夹复制到R:

\01网页设计制作员90001文件夹中。

打开素材库文件夹“网页设计制作员素材\1.1.1”内的样张“1.1.1.”。

3.用打开R盘（考生目录1.1.1文件夹下）的文件，

2种打开文件的方式：

1）打开软件，菜单里选择打开，选择文件。

2）右击文件，“使用Dreamweaver8编辑”。

4.在适当位置插入图片,并在“替换”中键入“用户注册”（添加注释）；如下图：

5.在用户注册后的两列中设置背景图片为，如下图：

6.在CSS浮动面板中新建CSS规则，名称自定（如ziti），单选按钮选“仅对该文档”（内部标签）；如下图：

在类型中选择a）大小：

12像素；b）行高：

2倍行高；

7.按样张填入表单对象、文字，并设置CSS样式。

8.布局表格内适当位置添置按钮对象，值为“检查会员名是否…”，并设置表单对象的动作属性为无；如下图：

9.布局表格内适当位置添置按钮对象，值为“同意以下服务条款…”，表单对象的动作属性为“提交”；如下图:

10.为文本“推荐：

QQ邮箱”设置链接“，为“sogou邮箱”设置链接“；如下图：

11.保存文件，注意一定要保存至到考试盘R盘R:

\01网页设计制作员90001目录下的1.1.1文件夹内。

二、制作Gif动画：

共15分。

（题库1.2.1试题单）

1.在R:

\01网页设计制作员90001目录下新建1.2.1文件夹。

2.打开软件，新建Fireworks文档，宽度710像素，高度160像素，画布选择自定义的黑色；如下图：

3.使用文本工具键入“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盘的文件夹。

9.保存文档为1.2.1.png文件，保存至R盘的文件夹。

三、设计制作网页动态效果：

共15分。

（题库1.4.1试题单）

1.在R:

\01网页设计制作员90001目录下新建1.4.1文件夹。

2.打开软件，新建2个空白页（基本页），另存到1.4.1文件夹，一个文件名为“，另外一个文件名任意（例如）。

在中复制入文字“欢迎光临淘淘乐网站，祝您购物愉快”，字体，大小，颜色任意，标题任意。

3.打开“标签检查器”浮动窗口，选择“行为”选项卡，添加行为->设置文本->设置状态栏文本->其中键入或复制文字“欢迎光临淘淘乐网站，祝您购物愉快”；如下图:

4.继续添加行为->打开浏览器窗口->要显示的URL中选文件->窗口宽度和高度建议设置200（也可任意选择，不要太大）；如下图:

5.保存并浏览文件。

五、制作网站主要页面：

共40分。

（题库1.7.1试题单）

1.在R盘新建一个考生文件夹，其文件夹名为：

机号+网页设计制作员+考生准考证号最后五位（例：

01网页设计制作员90001），考生所做的结果必须保存在该考生文件夹内。

考试过程中应注意经常保存文件。

2.在R:

\01网页设计制作员90001目录下新建1.7.1文件夹。

3.在1.7.1文件夹中新建images目录。

4.打开软件，选择“菜单”中的“站点”->新建站点->“站点名称”填入“SweetWedding1.7.1”（也可任意设置，不能与其他题目相同）->站点根文件夹选择R:

\01网页设计制作员90001\这个目录，勾选“自动刷新本地文件列表”，如下图：

5.打开S:

\网页设计制作员素材中的1.7.1文件夹，右击.bmp文件->EditwithFireWorks，参照.bmp的要求，在中对图片进行切片：

可在切片属性中设置宽和高；每个切片务必在类型下的格式中选择Gif接近网页256色格式，如下图：

（如果是BMP格式将无法在界面中显示）

选择“文件”菜单中的“导出”，“保存在”设置为1.7.1文件夹，文件名设置为index，类型HTML和图像，勾选“将图像放入子文件夹”，按“保存”，如下图：

在软件的站点文件中可看到如下文件列表，如下图：

6.在软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“”（选中文件后按F2重命名），并双击打开，在编辑界面键入“公司介绍”四个字，如下图：

选中文字，属性中设置链接文件为,如下图：

7.如第6步，在软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“”（选中文件后按F2重命名），并双击打开，在编辑界面键入“婚庆服务”四个字；选中文字，属性中设置链接文件为。

8.如第6步，在软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，名称改为“”（选中文件后按F2重命名），并双击打开，在编辑界面键入“结婚手册”四个字，选中文字，属性中设置链接文件为。

9.（a）选择如下区域图片，在“公司介绍”部分，制作热点链接，链接文件为,目标选择“_self”,表示在当前页打开链接页面，如下图：

（b）选择如下区域图片，在“婚庆服务”部分，制作热点链接，链接文件为,目标选择“_blank”,表示在新窗口打开链接页面。

（C）选择如下区域图片，在“结婚手册”部分，制作热点链接，链接文件为,目标选择“_blank”,表示在新窗口打开链接页面。

（d）为“首页”图片建立空链接“#”，如下图：

（e）为“登陆”图片建立空链接“#”，如上图：

（f）为“注册”图片建立空链接“#”，如上图：

（g）为“联系我们”图片建立邮件链接，为”。

（注意使用英文冒号:

）

10.a）在软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，文件名改为“”（选中文件后按F2重命名），并双击打开，在编辑界面键入“bbs_top”。

b）在软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，文件名改为“”（选中文件后按F2重命名），并双击打开，在编辑界面键入“bbs_left”。

C）在软件“文件”浮动窗口下的“SweetWedding1.7.1”站点根目录下，右击“新建文件”，文件名改为“”（选中文件后按F2重命名），并双击打开，在编辑界面键入“bbs_main”；把s盘素材文件目录文件夹下的.swf复制到images目录，并在中插入此flash文件。

11.a）文件菜单->新建框架集->上方固定，左侧嵌套（T字型）；

b）建立好框架以后马上在“文件”菜单中选择“框架集另存为”，把框架集另存在SweetWedding1.7.1根目录下，文件名为为。

c）打开框架浮动窗口，选中topFrame区域，打开“标签”浮动窗口，在“CSS/辅助功能”项中把id改为top，回车确认（框架名称改为top）；如下图：

分别设置其他两个区域的的框架id名称为left和main。

d）分别选中框架浮动菜单中的3个区域，设置3个区域的源文件为,和。

如下图：

e）选中文件中的文字，链接到文件,目标中选择“main”；如下图：

f）选中横向的框架分割线，属性中选择上方区域，行设置为120像素；如下图：

下方区域行设置为308像素。

g）选中竖向的框架分割线，属性中选择左面区域，列设置为150像素；如下图：

右面区域设置为578像素。

11.右击上方文件列表条，保存全部，并在IE中浏览（快捷键F12）。