1、网页设计与制作上机试卷（一） 操作题一： 1、建立并设置本地根文件夹: 新建本地根文件夹:在考生文件夹中新建本地根文件夹，命名为 root，并在该文件夹中新建 Xl-01 文件夹。 复制文件:将 DWMXUnitlYl-0lYl-Ol.jpg文件复制到 Xl-01文件夹中。 2、定义站点: 设置 “站点名称“:定义 DreamweaverMX站点，命名为 “我的站点“。 设置本地根文件夹:本地根文件夹指定为考生文件夹中的 root文件夹。 设置 “HTTP 地址“:HTTP 地址设置为 localhost。 将设置好的“定义站点 “对话框的 “高级“选项卡“分类“ 栏中“本地信息“ 列表项拷屏
2、，以Xi-OlA.bmp 文件名保存在 Xl-01 文件夹中。 3、创建与设置文档: 创建文档:启动 Dreamweaver MX，新建一个未命名的 HTML 文档。 命名和保存文档:文档命名为 Xl-0l.html，并将其保存到考生文件夹申的 rootXl-01 文件夹中。 设置文档页面属性:将 Xl-0l.htm 文档的标题设置为“ 黄河一我的母亲“;背景图像设置为 Xl-0lYl-0l.jpg 图像;左边界、边界宽带、顶部边界以及边界高度分别设置为 20。 将设置好的“页面属性“对话框拷屏，以 Xl-OlB.bmp文件名保存在 Xl-01文件夹中。 4、输入文本:在 Xl-0l.htm文
3、档中输入样图 1-OlA中的文本。 5、创建与运用 HTML样式: 创建 HTML 样式:创建样式名为 HTMl-0l 的 HTML 样式。具体设置为段落样式，应用该样式时清除已有的样式 格式;设置字体为隶书，粗体，大小为 6 号字，颜色为#66FF33，格式为 “ 标题 1“，对齐方式为居中对齐。 运用 HTML样式:对所输入文本的标题 “黄河一我的母亲“运用 HTMl-01样式。 6、使用 CSS样式表: 创建 CSS 样式:在 Xl-0l.htm 文档中创建 CSS 样式，以 cssl-0l 为 CSS 样式名保存到Xl-01 文件夹中。 设置字体为隶书，字号为 16 点数，颜色为#eC
4、66FF。左对齐，带下划线，首行缩进20 点数。 使用 CSS样式:对所输入文本的第 2段运用 cssl-O1样式，运用样式的效果如样图 1-01B所示。 将操件结果保存在 Xl-01 文件夹中。 操作题二： 1、布局页面: 绘制页面布局:新建一个文档，以 X2-OlA.htm 为文件名保存到 X2-01 文件夹中。参照样图 2-OlA在 X2-OlA.html 文档中绘制页面布局。 设置页面布局:参照样图 2-01A的标注，顶端布局单元格的宽度为 700 像素，高度为 73 像素，背景颜色 为#FFCCFF;左侧布局表格的宽度为 100 像素，高度为 403 像素，背景颜色为#FFCCCC;
5、右侧布局表格的宽度 为 600 像素，高度为 403 像素，背景颜色为#FFCC99。 2、表格的创建与设置： 创建表格:新建一个文档，以 X2-OlB.htm 为文件名保存到 Y2-01 文件夹中。参照样图 2-OlB在 X2-0l.htm 文 档中创建一个表格。 设置表格:表格的宽度为 412 像素，单元格填充和单元格间距设置为 0，表格的边框设置为 1，表格命名为 T2-OlA。填充表格: 输入 样图 2-OlB中的表格数据及文字。 3、设置单元格属性: 表格水平居中对齐;除第 1 行单元格外，其余各列单元格的宽度为 80 像素，度均为25 像素。使用格式化表格 命令。设置行颜色，奇数行
6、颜色为#FFFFCC，偶数行颜色为#CCFFgg。表格第 1 行的对齐方式为居中，文本样 式为粗体，背景颜色为#6633CC,文本颜色为白色。表格的第 1 列对齐方式为居中对齐，文本样式为斜体。表 格的边框为 1。 4、复制表格或单元格:复制 T2-OlA 的第 2 行第 6 行，粘贴到表格 T2-OlA 的下面，命名为 T2-01B。 5、管理表格:按 T2-OlB 第 2 列的升序排序 T2-OlB，如 样图 2-OlC所示。 6、重新编排表格:复制表格 T2-OlB，重命名为 T2-OlC。交换 T2-OlC 中“销售部“ 与“开发部”两列，如样图 2-01D所示。将操作结果保存到 X2
7、-01 文件夹中。 操作题三： 1、运用图像:打开 X3-0lA.htm 文档，在该文档中插入 X3-01imagesY3-0l.jpg 图像。 2、设置图像属性: 设置图像高为 300 像素，宽为 400 像素，纵向和横向间隙为 100 像素，图像在文档窗口中居中。 绘制图像热点区域，参照样图 3-01创建图像热点区域。头部采用圆形热点工具; 背部采用矩形热点工具; 翅膀和尾部采用多边形热点工具。头部热点区域替代文本为学习头部的制作;背部热点区域替代文本学 习背部的制作“;翅膀处热点区域替代文本为学习翅膀的制作;尾部热点区域替代文本为学习尾部的制作。 3、设置图像链接:分别为头部、背部、翅膀
8、和尾部热点区域创建链接，均链接到 X3-01X3-OlB.htm 文档，链 接文档在-blank 目标中打开。 4、电子相册的创建:打开一新文档窗口，创建相册图。设置主标题为“相册集“，副标题为“ 风景篇“，其他信 息为“祖国大好河山欣赏“。源文件夹指定为 DWMXUnit3Y3-0lpic文件夹，目的文件夹指定为 X3-01文件夹。 缩小尺寸为 1OOxlO0，每行显示 5 列，缩小格式及图片格式分别为 JPEG-BeHerQual时，图像的显示比例为 100， 创建图像导航。将 X3-0lindex.htm 文档重命名为 X3-0lB.htm，按提示更新链接。 将操作结果保存到 X3-01
9、 文件夹中。 操作题四： 1、框架的插入:打开一个空白文档，在该文档中创建一个框架。 2、框架的命名:将左边的框架命名为 IndeX，顶部框架命名为 Top，右边框架命名content. 3、保存框架集文件:将框架集文件命名为 X4-0lA.htm，保存到 X4-01 文件夹中. 4、填充框架内容:参照样图 4-01在 Index 框架中输入目录和各首唐诗的名称;文本格式为“ 段落“， 幼园，4 号，颜色为白色。文本格式为段落，隶书，5 号，颜色为白色，Top 框架作为标题栏输入文 本“ 唐诗欣赏“，文本格式为段落，隶书， 5 号，颜色为白色 . 5、插入代码片断:参照样图 4-01在 Top
10、 框架第 2 行单元格中插入 “代码片断。面板中 Snippets x4-0l.csn 代码片断。 6、保存与设置框架文档:保存框架到 X4-01 文件夹，其中 Top 框架保存为 X4-0lB.htm 文档;Index 框架 保存为 X4-0lC.htm;Content 框架保存为 X4-0lD.htm。设置 X4-0lB.htm 文档和 X4-01C4.htm 文档的背景 颜色为#999999。 7、超级链接的建立与框架目标的指定:创建左边 Index 框架中文本“ 与WJYY4-0lAthtm 文件链 接;文本“与 WJY4-0lB.htm 文件链接;文本“与 WJY4-0lD.htm
11、文件链接;文本“与 WjY4-0lE.htm文件链接;文本” “ 与 WJY4-0lF.htm 文件链接; 文本“与 WjY4-0lG.htm 文件链接。每首诗的正文均在 Content 框架中显示。 8、框架源文件的指定:设置 Content 框架中的源文件，源文件设置为 WjY4-0lA 文档。将操作结果保存在 X4-01 文件夹中。 操作题五： 1、创建和设置链接:在文档中的 “DreamweaverUluaDev 教程“图像处创建与 X5-01.HTM 的链接。 2、插入命名书签:在 X5-0l.htm 文档右栏“内容区“ 中，在文本“ 一、内容简介“ 二、准备工作“ 、 “三、Web
12、 应用示例 “和“四、拷贝文件“的左边分别插入命名书书签的命名依次为 X5-OlA,X5-OlD。 3、创建命名书签链接:分别创建左栏文本 “一、内容简介“与右栏命名书签“ 一、“容简介“ 处的链接; 左栏文本“二、准备工作 “与右栏命名书签 “二、准备工作“处接;左栏文本“ 三、Web 应用示例“ 与右 栏命名书签“三、 Web 应用示例“ 处的链接; 左栏文本“四、拷贝文件“ 与右栏命名书签“四、拷贝文件“ 处的链接。 、 4、链接的设置与更改:创建右栏中所有文本 “返回目录“与左栏命名书签“ 教程，目录处链接，要求 “教程目录“命名书签的名称为 x5-01e，和“教程目录“的链接，删除原
13、返回目录“文本中的空链接。 5、创建电子邮件链接:在“教程目录“栏目下的文本“联系我们“中创建电子邮接，电子邮件地址为 。 将操作结果保存到 X5-01 文件夹中。 操作题六： 1、 层的插入及命名:在该文档申分别插入三个没有包含关系的层，依次命名为Layer1、Layer2 和 Layer3。 2、 层内插入图像:将 X6-0lhimagesY6-0lA.jpg图像插入到 Layerl中，Y6-0lB.jPg 像插入到 Laye1中， Y6-0lC.jpg 图像插入到 Layer3 中。设置层的大小和坐标. 3、 调整层和层内图片的大小，使它们的大小保持一致，宽度为 400，高度为 300,
14、单位为像素。设置层在 页面中的坐标，X 为 226，Y 为 61. 4、 时间轴和行为的使用:参照样图 6-01完成时间轴和行为的使用。 5、 设置时间轴:将 Layerl图层加到第 1条动画轨道第 1-5帧中;将 Layer2图层加到第 2条动画轨道的第 5-10 帧中;将 Layer3图层加到第 3条通道的第 10-15帧中。 6、 添加行为:在第 1帧处加入显示 Layerl、同时隐藏其他层的行为;在踊处加入显示Layer2、同时隐藏其他 层的行为;在第 10 帧处加入显示 Layer3,同时隐藏其他层的行为;在第 15 帧处隐藏Layer3 的行为。 7、 设置循环和自动播放:将动画设
15、置为循环并自动播放，拖动最后 1帧频道上的小方块与15帧处行为频道 上的行为重合。 将操作结果保存到 x6-01 文件夹中。 操作题七： 1、 插入并命名表单:在 X7-0l.htm文档中插入一个命名为 LoginFom的表单。 2、 插入表单对象:参照(样图 7-01完成“调查表单“的布局、文本的输入和表单对象的插入操作。 3、 表单对象属性的设置:将 “姓名:“右边的文本域命名为 name，字符宽度为 10，最多字符数为 16, 类型为单行文本域。 将 “性别:“右边两个单选按钮均命名为 gender，取值依次为 0、1，初始状态均未被选中。 将 “EmaiI:“右边的文本域命名为 ema
16、il，字符宽度为 30,最多字符数为 20,类型为单行文本域。 将 “平均每天上网 :“右边文本域命名为 hour，类型为菜单类型。列表的选项为 1-2 小时、3-5 小时、5-10 小时、10 小时以上，列表的值依次为 01-04，初始选项为 1-2 小时。 将 “经常上的网站 :“右边的复选框从左到右命名依次为 netlnet3，初始状态均为未选中状态取值依次 为 01-03。 将 “对现在网站的建议 :“右边文本框命名为 jianyi，类型为多行文本域，字符宽度为50，字符行数为 5。 4、 插入表单按钮:将左边按钮命名为 Submitl ，右边按钮命名为 Submit2,设置按钮:左边
17、按钮标签为 “提交“ ，右边按钮标签为 “重填“;左边按钮动作为提交表单，右边按钮动作为重置表单。 5、 表单的属性设置:设置表单 LoginForm动作为 Login.asp表单处理程序，方法为发送请求。 将操作结果保存到 X7-01 文件夹中。 操作题八： 设置页面属性打开 X8-11.htm 文档,标题设置为文化教育首页_新浪网. 1. 创建 CSS样式 重定义 HTML 标记:分别将 Boby 和 Td 标记的字体设置为宋体 9 磅,仅在当前文档中使用 定义样式文件:定义名称为 CSS8-11.CSS 超链接样式文件,保存在 X8-11 文件夹中,光标移到链接时的 颜色设置为#FF00
18、00,超链接的正常状态颜色设置为#33FF33,访问过的超链接颜色设置为#993366。 2. 局页面轮廓:参照样图 8-11A完成样图 8-11B中所标注的各个区域的制作. 布局(1)区页面轮廓: 按 样图 8-11A中标注的(1)区参照 样图 8-11B用 2 行 10 列,1 行3 列和 1 行 2 列的表格 布局页面轮廓； 布局(2),(3)和(4) 区页面轮廓: 按 样图 8-11A中标注的(2),(3)和(4)区,参照样图 8-11B用 2 行 3 列表格； 布局(2),(3)和(4) 区页面轮廓.在一列单元格中布局样图 8-11A中标注的(2)区,第 1 行第 1 列单元格 中插
19、入 ed02.gif 图像,在该单元格中使用 edbg02.gif 为背景图,第 2 行第 1 列单元格中嵌套一个 12 和 4 列的表格用于布局样图 8-11A中标注的(2)区的下半部部分轮廓 .在第 3 列单元格中嵌套一个 12 行 2 列 的表格布局样图 8-11A中标注的(3)区页面轮廓.在(3) 区的下面布局 样图 8-11A中标注的(4)区页面轮廓 . 布局(5)区页面轮廓: 用 4 行 1 列的表格来布局(5)区页面轮廓. 通过对上述各布局表格中单元格的拆分或合并,布局页面轮廓. 3. 填充页面元素: 创建(样图 8-11A中标注的(1)区:第 1 行第 1 列单元格背景颜色设置
20、为#FFC800 从上到下可用 2 行 10 列, 1 行 3 我和 1 行 2 列的表格来完成,在 1 行 2 列表格的第 2 列元格中插入一个背景颜色为#666666,1 行 21 列的表格来完成,在 1 行 2 列表格的从上以下 3 个表格高度分别为 28,60 和 34,宽度为750,单位均为像素. “文化教育“导航中各文本之间用图像间隔图像的 W,H 为 14 和 21,文本,“首页“ 所在单元格背景颜色为#CCCCFF. 创建(样图 8-11A中标注的(2)区:将第 2 行单元格背景颜色设置为#CCCCFF,分别插入水平线和 1 行 3 列的表格, 在表格的第 1 无单元格中插入
21、ed03.gif 图像,第 3 列单元格中插入 ed04.gif,在表格的下面插入 12 行 4 列的表格 分别在第 1 和 4 列单元格中插入 edbg04.gif 图像,在第 12 行单元格中插入 edbg08.gif图像.创建该区时,根据需 要对相应的单元格进行合并和设置其宽度和高度,注意表格边界的修饰图和背景图像的利用. 创建(样图 8-11A中标注的(3)区:文本“文教信息“文本为宋体,3 号字,粗体,该区背景颜色为#FCFBE3. 创建(样图 8-12A中标注的(4)区:设置区域背景颜色值为#FCFBE3,表单名称为 SOusuo,方法为 Post 动作为 Search.asp 文本载的命名为 textfield.字符宽度和最多字符数分别为 16,80 类型为单行文本域,下拉列表框 的命名为 select,类型为菜单,列表值为网站 ,网页,软件.游戏和新闻 ,按钮的命名为Submit 标签为搜索 ,动作 为提交表单. 创建(样图 8-11A中标注的(5)区参照 样图 8-11B完成版权区的创建,输入版权区的文本和竖线. 4. 将操作结果保存到 X8-11文件夹中
