电子政务网页设计与制作实验教案

第一篇：电子政务网页设计与制作实验教案

《电子政务网页设计与制作》实验教案

实验名称 IIS的安装与调试

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握检测不同版本Windows操作系统IIS的安装与否； 2.掌握在Windows操作系统中安装IIS的方法；

3．掌握利用IIS设置虚拟目录调试ASP程序的初步方法。

二、实验重点、难点

利用IIS设置虚拟目录调试ASP程序

三、实验原理

ASP模型的运行原理是：当浏览器向Web服务器请求.asp文件时，服务器端脚本开始运行，WEB服务器调用.asp文件，将运行结果发送到浏览器。

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤

1、实验前先观看指导老师的演示；

2、如果计算机未安装IIS，使用安装程序安装IIS；

3、利用记事本编写教材P13 1－1的ASP程序并存盘；

4、在IIS中建立虚拟目录，调试ASP程序，找出并解决问题，确保调试成功，并相互访问；

5、学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

对于因操作系统本身的原因，无法安装调试好IIS，需重新安装系统。

十、课外实验或思考题

教材P13 练习1-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 HTML网页编辑

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握HTML基本标记的使用； 2.掌握HTML中超级链接的使用方法；

3．掌握HTML中特殊符号、图片链接的使用方法。

二、实验重点、难点

HTML中特殊符号、图片链接的使用方法

三、实验原理 HTML标记语言

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况 无

六、实验的基本操作与实验重要步骤

1.实验前先观看指导老师的演示；

2.利用记事本编写教材P34 2－1的HTML程序并存盘； 3.调试；

4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

注意热点链接的使用，调试出问题时，多从连接文件的上下级目录上找原因。

十、课外实验或思考题

教材P34 练习2-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 Vbscript对象编程

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握Vbscript的基本数据类型、常量、变量、表达式和常用函数； 2.掌握在HTML中插入Vbscript编码的方法； 3．掌握事件驱动程序的编制。

二、实验重点、难点

事件驱动程序的编制，面向对象的程序设计思想的掌握。

三、实验原理

Vbscript事件驱动程序编制。

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤

1.实验前先观看指导老师的演示；

2.利用记事本编写教材P74练习4－1题的程序并存盘； 3.调试；

4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

对象编程的思想，对象事件的编程方法。

十、课外实验或思考题

教材P74 练习4-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 表单设计

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握DHTML中INPUT控件的使用； 2.掌握DHTML中SELECT控件的使用； 3．掌握DHTML中TextArea控件的使用。

二、实验重点、难点

掌握DHTML中INPUT控件的使用

三、实验原理 DHTML语言

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤 1.实验前先观看指导老师的演示；

2.利用记事本或Dreamweaver等软件编写表单程序并存盘； 3.调试；

4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项 Dreamweaver集成化工具的使用

十、课外实验或思考题

教材P121 练习6-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 Response对象应用

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握Response对象中Write方法的使用； 2.掌握Response对象中Redirect方法的使用； 3．掌握Response对象中End方法的使用。

二、实验重点、难点

Response对象中Write方法的使用

三、实验原理

ASP中Response对象应用

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤

1.实验前先观看指导老师的演示；

2.利用记事本或Dreamweaver等软件编写程序并存盘； 3.打开IIS并设置虚拟目录进行调试； 4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

对于ASP的内置对象，注意代码的编写规范性。

十、课外实验或思考题

教材P142 练习7-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

实验名称 交互式表单程序设计

实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生

一、实验目的

1．掌握交互式表单程序设计的方法； 2.掌握Response对象中Write方法的使用； 3.掌握Request对象中Form集合的应用。

二、实验重点、难点

Request对象中Form集合的应用

三、实验原理

ASP交互式表单程序设计

四、实验设备、实验教学软件介绍

个人PC，Windows 2000,IIS 5.0,记事本

五、实验分组及组织情况

无

六、实验的基本操作与实验重要步骤 1.实验前先观看指导老师的演示；

2.利用记事本或Dreamweaver等软件编写程序并存盘； 3.打开IIS并设置虚拟目录进行调试； 4.学生独立完成相应的实验报告。

七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；

参照上述实验内容，分模块讲解各业务流程的作用和操作方法

八、预期的实验效果

多数学生能独立完成实验，掌握基本原理和方法。

九、实验中应注意事项

注意对于Form集合的运用，代码要规范。

十、课外实验或思考题

教材P163 练习8-1

十一、实验教材及实验参考资料

《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版

十二、实验后记

学生独立完成实验报告

第二篇：网页设计与制作教案

《网页设计与制作教案》

教师：系部：信息技术工程系专业：计算机应用班级：计机

湄洲湾职业技术学院

2008-2009学年第一学期

唐 俊 奇

电子信息

07（1）信息07（1）08（2）

1.3 网页中所使用的技术

1.3.1 HTML语言和XML语言

1、HTML语言

ØHTML只使用SGML中很小一部分标记

ØHTML语言（Hyper Text Markup Language 超文本标记语言）

ØHTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具

2、XML语言

XML（eXtensible Markup Language）1.3.2 动态网页

1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序

1.4 制作网页的基本方法

1.4.1 制作网页的基本步骤

1、确定网页的内容

2、设计网页的组织结构

3、资料的收集与整理

4、选择网页的设计方法

1.4.2 制作网页时要注意的问题

1、网页的标题要简洁，明确。

2、在文本中要使用水平线，以分割不同部分。

3、对重点段落要强调显示。

4、网页中插入的图片要尽量的小。

5、图形要附加文字说明，以便关闭图像时查看。

6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】

通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。

第二讲 HTML的基本标志与格式标志

【教学内容】

讲解HTML基本标志对和格式标志。【教学目的】

使学生标志对与格式标志对的使用。【教学重点】

格式标志的使用。【教学难点】

* 使学生掌握超级链接标志的使用。【教学重点】

* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入。【教学难点】

* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义。【教学方式】

讨论式、案例分析式、练习式。【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《WEB网站设计》Joel Sklar著 高等教育出版社。

3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】

2.2 插入文字

2.2.1 划分段落 格式

段落内容

标题内容 2.2.3 字号属性

设置基准字号： 网页内的其他文字，采用下面的格式来定义 ...... Size的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。2.2.4 颜色属性 两种方式

字符串 2.2.5 字体属性

2.2.6

文本修饰

......，文字以粗体显示。......，文字显示为斜体。......，显示下划线。

......，中心线贯穿文字。< EM>......，强调文字，通常用斜体。

< STRONG>......，特别强调的文字，通常用黑体。

2.3.2 图片的属性

2.4 建立超级链接

2.4.1 指向一个目标

1、建立超级链接

字符串

2、为图片建立超级链接

3、链接到邮件和多媒体文件 链接到邮件

请与我联系 2.4.2 使用锚点

Ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。Ø建立锚点：

Ø锚点文字 Ø使超级链接指向已定义的锚点。Ø文字 Ø文字 2.4.3 新窗口和基准链接

1、打开新窗口

Target=“window-name”>开一个新窗口

2、基准链接

在 与 之间设定

BorderColor=“#008000“ >

2.7.3 子窗口属性设置

-2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分

（3）目录和标题，分为左上、左下、右三部分

（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页

</p><p><BODY> 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。</p><h2><a name="3" >第三篇：网页制作与规划实验教案</a></h2><p>实验一 站点的创建与基本HTML标记的应用</p><p>一、实验目的及要求</p><p>1.了解组成网页的基本元素</p><p>2.掌握文本元素的添加和编辑方法 3.掌握图像元素的添加和运用技巧 4.掌握几种链接的具体创建方法 5.掌握图像元素的添加和运用技巧</p><p>二、实验学时</p><p>4学时</p><p>三、实验内容</p><p>任务一：在网页中基本页面元素的应用 1．准备工作</p><p>在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb3。复制给定的一个图像文件夹images和一个网页文件sx3-2.htm。</p><p>2．建立本地站点</p><p>‘ 用已学方法建立本地站点。</p><p>3．依据图3．38所示的效果，向网页中添加并编辑页面元素，具体操作步骤如下。</p><p>(1)在默认打开的网页中选择“修改”|“页面属性”菜单命令，设置使</p><p>背景颜色为#CCCCCC。</p><p>(2)输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFF00，字体为“华文行楷”粗体，居中对齐。</p><p>(3)在网页第二行插入更新日期和版权信息，选择“插入”l“日期”菜单命令，将当前编辑日期插入网页，然后利用“插入”面板上“文本”选项卡中的晶按钮，插入多个空格，再输入版权信息“◎版权所有：D．Wei@sohu．com”整行文字大小为18像素，颜色为#000000，字体为默认字体，粗体，居中对齐。</p><p>(4)在网页第三行选择“插入”|“水平线”菜单命令，插入一条水平线，高度为5，其他属性取默认值。</p><p>(5)在网页第四行、第七行各插入一行文本，内容分别为“纪33(C33)：中国古代科学家、1955．8．25发行600万套、全套4枚、新票市场参考价￥550元。”和“纪36(C36)：中国工农红军胜利完成二万五千里长征二十周年、1955．12．30发行600万套、全套2枚、新票市场参考价￥850元。”文字大小为18像素，格式为“项目列表”，其他属性取默认值。</p><p>(6)在网页第五行选择“插入”I“图像”菜单命令，插入四张邮票图像，文件名分别为0637.jpg、0638.jpg、0639.jpg、0640.ipg。每张图像的宽为</p><p>110、高为150，其他属性取默认值。</p><p>(7)在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。</p><p>(8)在网页第八行插入两张邮票图像，文件名分别为0645.jPg、0646.ipg，图像宽高分别为150／110和110／150，其他属性取默认值。</p><p>4．保存网页 选择“文件”“|保存”菜单命令，在站点中将此网页保存为sx3-1．htm。5．打开并编辑给定的网页文件sx3．2．htm，如图3-39所示。</p><p>(1)建立图像热点链接。为此选中网页上方图像，利用“属性”检查器</p><p>中的热点工具在图像上建立两个热点，如图3．40所示。从左到右两个热点分别链接到sx3-2-1．htm和sx3-2-2．htm文件(两个文件可稍后建立)。</p><p>(2)插入命名锚记。为此将光标放在网页标题“教育天地”后，选择“插入”I‘‘命名锚i6'’菜单命令，在输入对话框中输入锚记“A0“。依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。</p><p>(3)创建锚点链接。为此分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。</p><p>(4)创建无址链接。选中网页上方文本“教师篇”，在“属性”检查器的链接栏中输入“≠}”即可。</p><p>(5)创建邮件链接。选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“mailto：abc@163．com'’即可。如图3—41所示。</p><p>6．保存网页</p><p>选择“文件”I“保存”菜单命令，将此网页保存在站点中。7建立其他网页</p><p>(1)新建一张网页，输入“名人看教育”，文件名为sx3-2-1.htm，保存</p><p>在站点中。</p><p>(2)再新建一张网页，输入“教育话题”，文件名为sx3-2-2.htm，保存在站点中。</p><p>8．站点测试</p><p>按【F12】键在浏览器中预览，观察效果与样图是否一致。单击建立的每个链接，以测试超链接是否都能够正确跳转。</p><p>任务二：HTML基本标记的应用 1．准备工作</p><p>在C盘或其他盘符下新建一个工作夹，制作的所有页面都保存在这个文件夹内。将给定的图像素材文件复制到工作文件夹中。</p><p>2．建立名称为了test.html的HTML页面，效果如图4-1所示。页面功能要求为：</p><p>（1）页面标题为“基本标记测试”；</p><p>（2）页面内的所有标题文字均为标题2格式；</p><p>（3）单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身；</p><p>(4)图片名称为1．gif，存放在工作文件夹中，与test．htm页面位于同一位置；</p><p>(5)依据图4—1所示样式，完成页面中的表格制作</p><p>3．建立名称为login．htm的HTMI。页面，效果如图4—2所示。页面功能要求为：</p><p>(1)页面标题为“表单标记测试”；</p><p>(2)“姓名”为单行文本框，宽10个字符，最多能填写20个字符；(3)“性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；</p><p>(4)“职业”为下拉列表框，内容有“教师”、“工人”和“职员”；(5)“爱好”为复选按钮，传递的值分别对应为1，2，3，4，第一个按</p><p>钮为默认选中；</p><p>(6)“留言”为多行文本框，大小为5行40列，默认内容为“说几句吧!”；(7)“提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get；</p><p>(8)页面上的所有文字默认为3号字。4．页面测试</p><p>在浏览器中浏览所完成的页面，观察效果是否符合要求。</p><p>实验二 表格、表单和框架的应用</p><p>一、实验目的及要求 1.掌握表格的基本用法 2.掌握表格布局页面的方法 3.学会用框架布局页面的方法 4.了解框架布局的特点</p><p>二、实验学时</p><p>10学时</p><p>三、实验内容</p><p>任务一：表格的应用 1．准备工作</p><p>在c盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入myweb5。在此文件夹中新建一个图像文件夹images，并将给定图像素材复制到其中。</p><p>2．建立本地站点</p><p>用已学方法建立本地站点。3．利用表格编辑首页</p><p>(1)在默认打开的网页中，选择“修改”l‘‘页面属性”菜单命令，设置背景颜色为#clclcl。</p><p>(2)在网页中插入一个2行2列的表格，参数设置如图5-21所示。选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“％”。将第一行两个单元格合并为一个，如图5-22所示。</p><p>．</p><p>(3)利用“属性”检查器调整3个单元格的宽度和高度。将光标放在第一行单元格内，在“属性”检查器“高”输入框中输入110，“宽”不输入；将光标放在第二行第一个单元格内，在“属性”检查器“宽”输入框中输入250，“高”不输入；将光标放在第二行第二个单元格内，在“属性”检查器“宽”输入框中输入450，“高”不输入。效果如图5-22所示。</p><p>(4)按样张(如图5-23所示)在第一行单元格中输入“饮食本草”，文字大小80像素，字体“华文彩云”，前两个字白色，后两个字颜色为#009900。在文字下方插入一条水平线，属性取默认值。</p><p>(5)在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。如图5．23所示。</p><p>(6)在第二行第二个单元格内插入一嵌套表格，表格相关属性分别为3行3列、表格高度和宽度均为100％、边框粗细为</p><p>2、单元格边框为0、单元格间距为0。如图5-23所示。</p><p>(7)在左侧嵌套表格各行中分别输入图5．24所示内容，然后将8个单元格的高度均设置为50。文字大小为36，字体为“华文新魏”，然后将每行文字均创建无址链接。</p><p>（8）在中侧嵌套表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150，注意：当图片尺寸变小后，表格不会自动缩小，这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。</p><p>4．保存网页</p><p>选择“文件”！“保存”菜单命令，将此网页保存在站点中。5．站点测试</p><p>按【F12】键在浏览器中预览，观察效果是否与样张一样。任务二：框架的应用 1．准备工作</p><p>在C盘或其他盘新建一个文件夹，作为站点文件夹。并将给定的图片文件和素材文件复制到站点文件夹中。</p><p>2．建立本地站点</p><p>用已学方法建立本地站点。3．利用框架布局页面</p><p>站点首页部局效果如图15-15所示，页面制作步骤如下。（1）在默认打开的网页中，选择“插入”面板上的“布局’’选项卡。单击框架按钮的下拉箭头，从下拉菜单中选择命令。</p><p>(2)将光标置于顶端框架内，选择“修改”|“页面属性”菜单命令，设置背景颜色为#C1C1C1。同理将左框架和主框架的页面背景色都设置为#C1C1C1。</p><p>(3)选择“窗口“|‘‘框架”菜单命令，将“框架”面板调出来。然后设置三个框架的大小。</p><p>“顶端框架”：在“框架”面板中选定外层框架集，在“属性”检查器将顶端框架的高度设置为“120像素”，下面部分设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为1’，边框颜色设置为“#CCCCCC”。如图15—16所示。</p><p>“左侧框架”在“框架”面板中选定内层的子框架集，在“属性”检查器将左侧框+架的宽度设置为“250像素”，右侧主框架设置为“1”，单位为“相对”。将“边框”设置为“是”，“边框宽度”设置为“1’，边框颜色设置为“#CCCCCC”。如图15—17所示。</p><p>(4)在顶端框架内输入站点标题‘‘饮食本草”，文字大小为80像素，字体为“华文彩云”，前两个字白色，后两个字颜色为#009900，居中对齐。</p><p>(5)在左侧框架内插入一个表格，表格相关属性分别为9行1列、表格高度和为100％、宽度为100％、边框粗细为0、单元格边框为0、单元格间距为0、对齐方式为右对齐。然后</p><p>将9个单元格的高度均设置为50，在其中输入样张中的文字，文字大小为36，字体为“华文</p><p>新魏”。如图15．15所示。</p><p>(6)在右侧主框架中插入一个表格，表格相关属性分别为3行3列、表格高度和宽度任意、边框粗细为</p><p>2、单元格边框为0、单元格间距为0、居中对齐。按样张效果在表格中分别插入5 张文件夹images中的图片，每张图片的宽度和高度均为150。注意：当图片尺寸变小后，要在“属</p><p>性，检查器中单击cc清除行高’’和“清除列宽”两个按钮，使表格调整到最小。如图15—15所示。</p><p>4．保存框架网页</p><p>选择“文件”|“保存全部”菜单命令，按照保存窗口弹出的顺序，分别将框架集、右侧</p><p>主框架、左侧框架、顶端框架命名为index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站点中。</p><p>5．建立导航链接 具体制作步骤如下。</p><p>(1)按导航栏目分别建立8个相关内容的页面，或者从提供的素材文件中获取。</p><p>(2)在左侧框架内选择“首页”文字，在“属性”检查器的链接栏中设置目标文件为本框架集页面．Index．htm，目标选择“parent'’。</p><p>(3)在左侧框架内选择“谷物篇”文字，在“属性”检查器的“链接”栏中设置目标文件为素材文件guwu．htm，“目标”栏选择右侧主框架的名称“mainframe”。同理，将左侧框 架内的各项导航内容分别链接到对应的素材文件，且“目标”均设置为“mainframe”。</p><p>(4)再次选择“文件”|“保存全部”菜单命令。6．预览和测试站点</p><p>在打开的Index．htm文件中，按【F12】键在浏览器中预览，观察效果与样张是否一样，然后，测试各导航链接内容和显示位置是否正确。效果如图15-18所示。</p><p>实验三 网页图像和动画的设计与应用</p><p>一、实验目的及要求</p><p>1．掌握在Fireworks中创建动画的方法 2．掌握在Fireworks中制作蒙版的创建方法 3．掌握基本动画补间操作</p><p>二、实验学时</p><p>8学时</p><p>三、实验内容 任务一：gif动画 1．准备工作</p><p>在c盘或其他盘新建一个文件夹，本次实训的内容将全部保存在该文件夹下。</p><p>2．一张向日葵画框图片的制作(1)新建文件</p><p>打开Fireworks 8，在“开始页”中选择“新建Fireworks文件”，新建一个空白文件。在弹出的“新建文档”中设置画布的“宽”为360，“高”为400，画布颜色选择白色，然后单击“确定”按钮。选择“文件”|‘‘另存为”菜单命令，将文件以“sx6—1．png”为文件名保存在指定文件夹下。</p><p>(2)制作图片 选择“文件”l‘‘导入”菜单命令，在“导入”对话框中选择需要导入的图片“画框．gif”。此时光标的形状变为V-，在画布上单击鼠标左键，即可将该图片以原始大小导入(也可以按下左键拖放，将图片以不同的大小导入)。此时可以在“层”面板中看到刚导入的对象。用相同的方法导入第二张图片“向日葵．png”，将图片的大小调整合适，放入画框内，并调整整个图片的坐标，到此这个图片的制作就完成了。单击“主要”工具栏上的“保存”按钮，保存文件。</p><p>(3)图片的优化和导出</p><p>选择“窗口”l“优化”菜单命令，打开“优化”面板，如图6-23所示的设置。选择“文件”|“导出”菜单命令，在弹出的“导出”对话框中，“文件名”一栏输入文件名“sx6—1．jpg”，选择侏存类型为“仅图像”，单击“保存”按钮，该文件即可以JPEG的文件格式输出。</p><p>选择“文件”l砾存”菜单命令，保存源文件，单击“预览”按钮预览效果，如图6-24所示。</p><p>3．进一步编辑向日葵画框图片(1)新建一帧</p><p>打开刚刚创建的向日葵画框，即“sx6—1．png”。在“帧”面板，选择刚才已有的第一帧，将它拖到“新建／重制帧”按钮上释放，得到复制的一帧。</p><p>将新复制的第二帧选中，将原有的向日葵图片删除，重新导入另一幅图像“椰子树．jpg”，并调整大小使其居于画框内。这样当前文件具有两个帧的画面，如图6—25所示。</p><p>(2)观看动画播放效果</p><p>单击位于工作窗口下方帧控制器的“播放”按钮，观看动画播放效果。单击“停止”按钮，停止播放。</p><p>如果不满意，可以返回帧1或帧2进行修改。</p><p>如果想调整两帧的播放速度，可以在帧面板双击每帧右侧的数字“7”，将其修改成想要的值。</p><p>再次通过帧控制器观看动画播放效果，如果想再增加几帧，可以按上面的方法进行编辑，直至满意为止。</p><p>选择“文件”|“另存为”菜单命令，将文件以“sx6．2．png'’为文件名保存在指定文件夹下保存文件。</p><p>再选择“文件”|“图像预览”菜单命令，打开“图像预览”对话框，如图6—26所示。</p><p>选择导出的文件格式为“GIF动画”，然后再选择“导出”按钮，就可以导出GIF动画文件，文件名为“sx6．2．gift。这样可以在Fireworks之外，同样看到动画效果。</p><p>任务二：蒙版和动画的制作 1．准备工作</p><p>在c盘或其他盘新建一个文件夹，将给定图像素材复制到其中，本次实训的内容将全部保存在该文件夹下。</p><p>2．导入图像并调整画布</p><p>新建空白文档，大小、颜色均默认。</p><p>选择“文件”l“导入”菜单命令，将指定文件夹中的图像导入文档。选中图片，在“属性”检查器中修改图片的宽、高值(500×400)。然后单击画布之外，在“属性”检查器选择“符合画布”命令，使画布和图片一样大且对齐。</p><p>在“属性”检查器选择“画布”旁边的拾色器，把画布颜色改成自己喜欢的颜色。</p><p>3．制作矢量蒙版</p><p>选择椭圆工具，在窗口中画一个椭圆。选择“编辑”I“剪切”菜单命令，椭圆消失，用鼠标再次选中导入的图像，然后选择“编辑”I“粘贴为蒙版”菜单命令，出现蒙版效果，如图9-36所示。</p><p>打开“层”面板，如图9-37所示。单击层中图片与蒙版之间的链接@标记，可以使它消失，再次单击又会出现。它的出现与消失决定着蒙版是否与图片链接在一起。当未链接时，单击“层”面板中的蒙版图标，使它周围出现绿框。如图9-38所示。</p><p>用鼠标移动画布上椭圆的位置，效果如图9-39所示。</p><p>把位置调整到理想状态后，选择“文件”|“另存为”菜单命令，将文件以“sx9-1．png'，为名保存在指定文件夹下。</p><p>4．修改蒙版效果</p><p>打开刚才新建的蒙版文件，在“层”面板选中蒙版。在“属性”检查器中，选择“蒙版”为“灰度外观”，将方式改为“放射状”，并单击旁边的拾色器，将放射状填充的中心调整为透明(白色)，边缘调整为不透明(黑色)，如图9-40所示。</p><p>在“属性”检查器中，将“边缘”修改为“羽化”，值为“50'’，“描边”设置为“无”，如下图9-41所示。</p><p>在画布上适当调整椭圆填充的放射中心和幅度，最后达到如图9—42所示效果。</p><p>5．制作位图蒙版，打开给定图像文件0258.jpg，另存为sx9-2.jpg。把显示的缩放比例调整为66%。单击“层”面板的“添加蒙版”按钮，并在“层”面板选中，然后按照图9-43蒙版图标。</p><p>在“工具”面板“颜色”部分中选择“渐变”工具设置蒙版的相关属性。</p><p>在图像中间拖动鼠标，使填充呈由中心向四周的放射形状。图像产生了蒙版效果，同时“层”面板的蒙版图标也发生了变化。如图9-44所示。</p><p>6.制作文本蒙版</p><p>打开给定图像文件0258.jpg，另存为sx9-3.jpg。把显示的缩放比例调整为66%。在“工具”面板“矢量”部分中选取“文字”工具。输入文字“热带风情”，字体为华文行楷，大小150。选中文字，选择“编辑”|“剪切”菜单命令，将其剪切。在“层”面板中选择取位图标，然后选择“编辑”|“粘贴为蒙版”菜单命令。图像产生了蒙版效果，同时“层”面板也出出了文本蒙版图标，如图9-45所示。</p><p>任务三：风吹树叶(1)新建Flash文件。</p><p>(2)修改背景颜色为“蓝色”。</p><p>(3)使用“文本工具”按钮，创建文字“风吹效果”四个字，用工具选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。如13-11所示。</p><p>(4)再次用工具，选中“风”字然后选择“修改”|转换为元件”菜单命令。在弹出转换为符号“对话框中，将元件名称改为“风”，如图13-12所示。</p><p>(5)重复步骤(4)，将剩下的三个字“吹”、“效”、“果”也依次做成图形元件。</p><p>(6)选中所有的文字，然后鼠标右击，在弹出的上下文菜单中选择“分散到各层”，于是个字将分别处于四个不同的图层。这样做是为了动画渐变能够正确的执行。</p><p>如果分散到各层后文字没有对齐，则可用“对齐面板”，将各层的文字重新排列好。“对面板如图13-13所示，可以通过菜单“窗口”|对齐’’菜单命令打开“对齐”面板。</p><p>(7)在时间轴中第1 5帧处，给各层“添加关键帧”，选中第15帧。(8)将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形”|“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图13-14所示。</p><p>(9)选中所有元件，在“属性，检查器中将颜色“Alpha”值设为“O”，如图13-15所示。</p><p>(1 O)在“吹”、“效”、“果”三个元件所在层的第1帧处创建动画补间，如图13-16所示。</p><p>(11)按住【Ctrl】键，选择第二层的第2帧到最后一帧。按住鼠标左键不放，将位置向后拖放一段距离，如图13-17所示。</p><p>(1 2)参照步骤(1 0)内容，将‘‘效”、“果”两个元件所在层的位置分别后移，如图13-l8所示。</p><p>(1 3)按【Ctrl】+【Enter】组合键查看效果。任务四：球的跳动 1.准备工作</p><p>在c盘或其他盘新建一个文件夹，并将给定的图片文件和素材文件复制到站点文件夹中。本次初训的内容将全部保存在该文件夹下。</p><p>2．素材的导入</p><p>1)新建文件</p><p>打开Flash 8，在“开始页”中选择“新建Flash文件”，以新建一个空白文件。背景色为“白色’’。</p><p>选择“文件”|“保存”菜单命令，将文件保存为ex3.fla文件。2)“球’’的导入</p><p>选择“文件”|“导入”|“导入到库”菜单命令将“球”导入到库，如图13-33所示。</p><p>3.元件的转换</p><p>选择“修改”|“转换为元件”菜单命令，将图片转换为“图形”元件，并命名为“球”。13-34所示。</p><p>4．动作补间的设置</p><p>将元件“球”拖放到场景1的图层1中。在图层1的第60帧处插入关键帧，如图13-35所示。</p><p>在第1帧处添加‘‘动画补-间，效果，如图13-36所示。</p><p>在第1帧处处的“属性”检查器中，单击“缓动”旁边的“编辑”按钮，设置动作的“缓入|缓出”效果(通过缓入／缓出可以控制动画渐变的速度和状态)。设置效果如图13-37所示。</p><p>在“自定义缓入／缓出”对话框定义各个帧处的动画补间速度和方向。新建图形元件，命名为“阴影”，设置笔触色为“无”，填充色为“黑白渐变”，白色部分的alpha透明度为29％。使用椭圆工具绘制一个椭圆，设置面板如图13-38所示，绘制的效果如13-39所示。</p><p>在场景1中新建图层2，将元件“阴影”拖放到第1帧处的恰当位置(在球落下的下方)，并在第60帧插入关键帧，阴影位置如图13—40所示。</p><p>在图层2第1帧处设置元件“阴影”的A1pha透明度为20％，如图1 3-4 1所示。</p><p>在图层2第1帧处设置补间动作，如图1 3—42所示。</p><p>打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键【Ctrl】+【c】复制缓动效果。打开图层2第一帧处的“自定义缓入／缓出”面板，按I Ctrl 】+【V】组合键，将其粘贴到阴影动画补间中。</p><p>5．发布动画</p><p>使用“文件”|“发布”菜单命令进行发布。</p><p>实验四 层叠样式与层的应用</p><p>一、实验目的及要求 1.掌握层的正确定位方法</p><p>2.学会利用层来制作弹出式菜单 3.了解时间轴的编辑特点和方法 4．学会定义和应用CSS样式</p><p>二、实验学时</p><p>6学时</p><p>三、实验内容</p><p>任务一：利用层制作弹出菜单</p><p>步骤：</p><p>l准备工作</p><p>在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的素材文件存入其中。</p><p>2．建立本地站点</p><p>启动Dreamweaver·8，用已学方法建立本地站点。3．利用图层制作下拉弹出菜单</p><p>(1)新建一个空白页面，选择“修改”I“页面属性”菜单命令，设置页面的背景颜色为#FFCC99，左边距为0，上边距为0。</p><p>(2)在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。</p><p>(3)在标题的下一行插入一个l行5列的表格，表格宽度800像素，边框粗细为l，高 度30，平均分配各列(每列宽度为160像素)，表格背景颜色为#9999FF。</p><p>(4)在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。如图16—16所示。</p><p>(5)在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”应在此列当中。如果不在，可用鼠标将其拖到此列中。然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999F’F，文字为粗体显示。三个单元格内容为“学院简介”、“办学思想”、“校园风景”，如图16．17所示。</p><p>(6)同样在其他几列中也分别添加图层，各自命名为“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格属性与Layerl中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与L,ayerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。如图16—18所示。</p><p>(7)调整各层的位置。注意：层的调整非常重要，不同的浏览器窗口大</p><p>小，不同的分辨率，层的位置显示都不是一样。即使在同一个机器上调整浏览器的窗口大小，都会出现位置的变动。Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。为此，首先固定表格的宽度，本例中将表格固定为宽度800，高度30。然后固定层的位置，这</p><p>个位置需要计算一下，计算公式并不是很难。本例中表格总宽度为800，共有5列，这样每列的横坐标起始位置的计算公式为：</p><p>800÷5*(当前列一1)对于“Layerl”，当前列为2，所以结果为160。</p><p>最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：</p><p>800--5x(当前列-1)+偏移量</p><p>这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同的。这里测试满意的效果是-1，所示Layer1的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。要使用“属性”检查器来设置。(8)打开“层，面板，将Layerl～Layer4都设置为隐藏状态。．</p><p>(9)在窗口左下方选中第2列“学院概况”所在单元格的标签选择器<td>，在“行为”面板中为其添加“显示一隐藏层’’行为，将“Layerl”设定为“显示”，如图16-19所示。</p><p>(10)更改行为的触发事件为“onMouseOver”。(11)再次选中第二列的标签选择器<td>，在‘‘行为’’面板中为其添加“显示一隐藏层”行为，设定图层Layerl为‘‘隐藏”，并更改此行为的触发事件为“onlMoluseOut”。．</p><p>(12)重复步骤9～1l，为第三列、第四列、第五列添加显示与隐藏图层的行为。</p><p>4．保存与预览</p><p>保存文件为Index．html，然后按IFl2]键进行预览。当移动鼠标到菜单时，将显示当前菜单项所属的子菜单内容，当鼠标离开显示的子菜单时，子菜单隐藏，返回初始状态。最终效果如图16—20所示。</p><p>5．为下拉菜单设置超级链接</p><p>(1)根据菜单内容，建立相应的其他页面文件。(2)为各菜单项设置跳转到这些页面的超级链接。(3)再次保存文件并预览效果。任务二：时间轴 步骤：</p><p>1．准备工作</p><p>在C。盘或其他盘新建一个文件夹，作为站点文件夹。在此站点中再建一个images子文件夹，将给定的素材存入其中。2．建立本地站点</p><p>启动Dreamweaver 8，用已学方法建立本地站点。</p><p>3.利用时间轴使层做直线运动</p><p>(1)打开给定的网页文件sx17-1-1.htm，在网页上插入一个层”Layerl",并将其位置调整好，然后在其中插入给定的图片imgl．gif,图片大小为64×64。如图17-9所示.(2)打开“时间轴”面板，把图层Layerl拖到“时间轴’’面板上，单击最后一帧关键帧，并将其拖到第100帧的位置。再单击图层Layerl，将 Layerl水平拖动到页面的右侧。如图17-10所示。</p><p>(3)选中“时间轴”面板上的“自动播放”和“循环”选项。</p><p>(4)将文件另存为sxl7-1-3．htm，并在浏览器中预览，即可看到小猪从页面左侧运动到 右侧，并循环播放。</p><p>4．利用时间轴使层做轨迹运动</p><p>(1)打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100，如图17-11所示。</p><p>(2)右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2'’。</p><p>(3)选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择</p><p>“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。同时，时间轴上也出现了一个有多个关键帧的动画条。如图17-12所示。</p><p>(4)选中“时间轴”面板上的“自动播放”和“循环”选项。</p><p>(5)保存文件，并在浏览器中预览，即可看到小猪从页面左侧运动到右侧的同时，另一小猪在页面上按绘制的轨迹进行移动，并循环播放。5．给移动的小猪添加行为和超级链接</p><p>(1)选中页面中的Layer2，打开“行为”面板，单击“+”按钮，从弹出的菜单中选择“时间轴”I“停止时间轴”命令。然后从对话框中选择“1'imeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseover。(2)再次单击“行为”面板的“+”按钮，从弹出的菜单中选择“时间轴”}“播放时间轴”命令。然后从对话框中选择“Timeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseout。</p><p>(3)选中Layer2层中的图片，在“属性”检查器的链接栏中输入“sxl7-1-2．htm'’(预先编辑好的网页)，在替代栏中输入“单击有惊喜”。</p><p>(4)保存文件，并在浏览器中预览，即可看到当鼠标指向小猪时，小猪停止移动；当鼠标离开小猪时，小猪继续移动。当鼠标单击小猪时，跳转到sxl7-1-2．htm页面。</p><p>任务三：利用CSS样式改变页面风格 步骤：</p><p>1．准备工作</p><p>在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的网页文件及素材文件夹存入该文件夹中。</p><p>2．建立本地站点</p><p>启动Dreamweaver 8，用已学方法建立本地站点。3．自定义样式的定义及应用</p><p>(1)打开站点中给定的sx20．1．1．htm文档。(2)选择“窗口”I‘‘样式”菜单命令，将“CSS样式”面板打开。(3)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框。在选择器类型处选择“类(可应用于任何标签)”，名称处输入“ysl”，定义在处选择“仅对该文档”。单击“确定”按钮。</p><p>(4)在弹出的“ysl的CSS样式定义”对话框中，进行如图20-25所示的样式定义(类型：字体为隶书，大小为36像素，颜色为#0033FF；区块：文字对齐为居中)。</p><p>(5)用同样的方法定义样式“ys2”，定义内容如图20-26所示(类型：</p><p>字体为华文新魏，大小为24像素；区块：文字对齐为居中)。</p><p>(6)用同样的方法定义样式“ys3”，定义内容如图20—27所示(类型：字体为隶书，大小为36像素，粗细为粗体，#00CC33；区块：文字对齐为居中)。</p><p>(7)下面开始应用已定义的样式。选中第一行标题“唐诗欣赏”，单击右键，选择“CSS样式ysl，(或者用前面介绍的其他方法来应用ysl)，这时标题已变成所定义的样式了。用同样的方法，将每首诗的诗文内容应用</p><p>‘‘ys2’’，将每首诗的标题段落应用“ys3”。效果如图20-28所示。</p><p>(8)修改页面的背景风格。首先为页面设置背景图像(站点中images文件夹中的bj．jpg文件)，效果如图20-29所示。由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复的形式铺满整个页面，视觉效果不够理想。</p><p>(9)在“CSS样式”面板新建自定义样式“ys4”，在样式定义对话框中，背景样式的设置如图20—30所示(背景：重复为不重复，附件为固定，水平位置为居中，垂直位置为居中)。</p><p>(10)选择文档窗口左下方的标签选择器<．body>，然后单击右键，从下拉列表中选择“设置类，ys4”，文档应用样式ys4后的效果如图20-31所示。当预览时会发现背景图像居中并不再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。</p><p>4．重定义特定标签外观</p><p>(1)单击“CSS样式”面板下方的“新建(；SS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ln定义在处选择“仅对该文档”。单击“确定”按钮。</p><p>(2)在弹出的“li的CSS样式定义”对话框中，进行如图20-32所示的样式定义(类型：字体为华文新魏，大小为24像素；列表：项目符号图像为0001．gif)。</p><p>(3)单击“确定”按钮，发现页面列表外观发生了变化。效果如图20-33</p><p>所示。</p><p>(4)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“a”，定义在处选择“仅对该文档”。单击“确定”按钮。</p><p>(5)在弹出的‘‘a的cSS样式定义”对话框中，进行定义，其中类型分类中只将修饰选择为‘‘无”。单击“确定”后，页面中超级链接的下划线处的修饰没有了，如图20-33所示。</p><p>5．链接文字技术</p><p>(1)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“高级(ID、伪类选择器等)”，选择器处下拉列表选择“a：link”，定义在处选择“仅对该文档”。单击“确定”按钮。</p><p>(2)在弹出的“a：link的(；SS样式定义”对话框中，进行如图20—34所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#CC0099，修饰为无)。</p><p>(3)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，在对话框中其他选项不变，只将选择器选为“a：hover'。然后在“a：hover的CSS样式定义”对话框中，进行如图20—35所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#FF0000，修饰为下划线)。</p><p>(4)单击“确定”按钮，关闭定义对话框。预览时可以看到当鼠标指针移到超级链接文字时，文字变为红色且出现下划线修饰。</p><p>(5)将网页另存为Index．．html，按【F12】预览网页，观察各种样式的应用效果。</p><p>实验五</p><p>网页综合设计</p><p>一、实验目的及要求</p><p>利用所学的网页设计的方法来设计一个个性化的网站，网站的内容一定要合理，内容健康，页面美观。</p><p>二、实验学时</p><p>6学时</p><p>三、实验内容</p><p>自己设计</p><h2><a name="4" >第四篇：网页设计与制作实验过程及报告</a></h2><p>网页制作过程及报告</p><p>网页设计与制作的一般实验步骤：</p><p>1、确定网站主题</p><p>网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。最重要的是做出自己的风格，吸引浏览者的眼球。</p><p>2、搜集材料</p><p>主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。</p><p>3、规划网站</p><p>我的网站包括5个页面。版面设计要灵活，根据各部分内容的不同适当的自由设计。但是每个页面的主元素和位置不能变。用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。</p><p>4、选择合适的制作工具</p><p>做网页的首先工具当然为Dreamweaver。</p><p>5、认识网页设计工具Dreamweaver</p><p>（1）Dreamweaver的启动</p><p>（2）窗口组成的认识</p><p>6、新建站点</p><p>7、站点中首页的创建</p><p>8、制作网页</p><p>素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点。网页中的css 样式文件也应统一管理，做到有条不紊。</p><p>9、根据自己的网页风格，在网上搜集合适的图片。</p><p>最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。</p><p>10、上传测试</p><p>网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。</p><p>实验结果及理论分析：</p><p>通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。最后，我感受最深的是，技术方面的学习，最重要的是自己实践做出东西，只通过自己的亲身实践，才能学会、学懂、学通技术。</p><p>朱礼明</p><p>信息管理与信息系统1301班</p><p>2014.07.23</p><h2><a name="5" >第五篇：网页设计与制作简答题</a></h2><p>1、简述Web浏览器打开一个Web文件的工作过程。</p><p>2、描述网页设计的一般步骤。</p><p>3、简述网页设计的基本准则。</p><p>4、简述规划网站目录结构时应遵循的原则。</p><p>5、描述版面布局的步骤。</p><p>6、什么是“HTML”？HTML“标记”又是什么？</p><p>7、简述“HTML”文档的基本结构。</p><p>8、简述以下一段HTML代码中各对标记的作用。〈html〉</p><p>〈head〉</p><p>〈title〉网页设计〈/title〉 〈/head〉</p><p>〈body〉</p><p>〈h2〉北国风光〈/h2〉</p><p>〈/body〉 〈/html〉</p><p>9、如何进行本地网页的测试？</p><p>10、网站管理和维护的主要工作有哪些？</p><p>11、什么是Web浏览器?</p><p>12、简述网页设计中所需要注意的通用规则。</p><p>13、简述DHTML的概念及主要组成。</p><p>14、简述使用FrontPage在网页中插入一个日历的过程。</p><p>15、简述色彩的三原色的概念及每种颜色的调配范围。</p><p>16、为什么要采用DHTML技术？客户端动态网页技术有哪些优点？</p><p>17、网站栏目划分的原则是什么？</p><p>18、XML与HTML相比的主要优点有哪些？</p><p>19、请简述一下网站的设计流程？</p><p>20、简述FireWorks的特点。</p><p>21、网页制作的步骤是什么？</p><p>22、怎样让链接没有下划线?</p><p>23、怎样在网页中加入多媒体播放?</p><p>24、怎样让网页的背景图像不滚动?</p><p>25、怎样定义网页的关键字?</p><p>26、什么是Web浏览器?</p><p>27、网页上所说的重心平衡指的是什么?</p><p>28、什么是DHTML？DHTML技术主要由哪几部分组成？</p><p>29、在CSS中，对字体的的设置所涉及到的属性有哪些？</p><p>30、用HTML语言回答一个HTML文件应具有的基本结构。</p><p>31、比较GIF格式和JPG格式的原理与各自的适用范围。</p><p>32、为什么要采用DHTML技术?客户端动态网页技术有哪些优点?</p><p>33、简述站点的概念以及虚拟目录和实际目录之间的对应关系。</p><p>34、什么是Web安全色?</p><p>35、简述虚拟主机的概念和功能。</p><p>36、简述Dreamweaver的工作窗口由哪些部分组成。</p><p>37、在Dreamweaver中，插入图像的方法有哪些？</p><p>38、在Fireworks中，如何使文字附加于路径？</p><p>39、在Flash MX中可以创建哪些类型的元件？各元件的含义是什么？</p><p>40、HTML中<BR>标记和<p>标记有何区别?</p><p>41、简述在网页中插入背景音乐的方法。</p><p>42、怎样在网页中插入Flash影片？</p><p>43、简述设计Web站点的一般步骤。</p><p>44、简要说明html的基本工作原理。</p><p>45、简要说明表格与框架布局的区别。</p><p>46、举例说明在网页中使用CSS样式表的三种方式（都使用对p标记符应用color属性为例），并简要分析各自的特点。</p><p>47、简要说明使用网页图像时应注意的问题</p><p>48、简要回答选择符的作用及分类。</p><p>49、XML的主要特征有哪些？</p><p>50、FrontPage的主要功能有哪些？</p><p>51、简答HTML文件的基本标记组成。</p><p>52、简答Java与JavaScript的主要区别。</p><p>53、简述网站的开发流程。（10分）</p><p>54、简述静态网页的执行过程。（7分）</p><p>55、简述在Dreamweaver MX中制作以插件方式播放音乐的页面的步骤。</p><p>56、简述网页制作有哪些基本流程。</p><p>57、在Dreamweaver MX中，目标端点的链接有哪几种？</p><p>58、简述在Fireworks中，可以做哪几个方面的环境设置。</p><p>59、在Flash MX中，帧有哪几种类型？各自的含义是什么？</p><p>参考答案：</p><p>1、简述Web浏览器打开一个Web文件的工作过程。</p><p>1）</p><p>Web浏览器向服务器发出页面请求</p><p>2）</p><p>服务器接收页面请求，并将搜索到的页面发给Web浏览器</p><p>3）</p><p>Web浏览器接收并显示页面</p><p>2、描述网页设计的一般步骤。</p><p>1)</p><p>设计主题</p><p>2)</p><p>设计网页的总体结构</p><p>3)</p><p>资料的收集和整理</p><p>4)</p><p>选择网页的设计方法</p><p>5)</p><p>注意一些基本问题，如：标题要简明、图片最好加说明等</p><p>3、简述网页设计的基本准则。</p><p>需要遵循的艺术原则主要有：</p><p>1）</p><p>对比原则</p><p>2）</p><p>协调原则</p><p>3）</p><p>平衡原则</p><p>4）</p><p>趣味原则。</p><p>还包括统一、连贯、分割、对比、和谐、易读、易找、清晰、精选。</p><p>4、简述规划网站目录结构时应遵循的原则。</p><p>在创建目录时需要注意：</p><p>（1）不要将所有文件都存放在根目录下。</p><p>（2）目录层次不要太深，建议不要超过三层。</p><p>（3）不要使用过长的目录名和尽量不要使用中文目录名。</p><p>5、描述版面布局的步骤。</p><p>步骤：</p><p>1）</p><p>绘制网页草图</p><p>2）</p><p>粗略布局</p><p>3）</p><p>定案</p><p>6、什么是“HTML”？HTML“标记”又是什么？</p><p>HTML是一种建立网页文件的语言，透过标记式指令，将影像、声音、图片和文字等连接起来。</p><p>在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图形等显示方式的符号。</p><p>7、简述“HTML”文档的基本结构。</p><p>HTML网页的基本结构。<HTML></p><p>HTML文件开始</p><p><HEAD></p><p>文件头开始</p><p>文件头</p><p></HEAD></p><p>文件头结束</p><p><BODY></p><p>文件体开始</p><p>文件体</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载电子政务网页设计与制作实验教案word格式文档"> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">下载电子政务网页设计与制作实验教案.doc</div> <div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div> </div> <div class="download_card_btn"> <img src="//static.xiexiebang.com/skin/default/images/icon_download.png"> <div class="downlod_btn_right"> <div>点此处下载文档</div> <p>文档为doc格式</p> </div> </div> </a> <div class="post-tags mt20 mb30"><span>相关专题</span> <a href="/tag/wysjyzzja/" target="_blank">网页设计与制作教案</a> </div> <div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a15/201905154/af8ecc1299a7f9d3.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div> <div class="single-xg mb40"> <div class="con-title"> <h3><a name="6"></a>相关范文推荐</h3> </div> <div class="sticky mb20"> <ul><h2 class="mb20"><a href="/a5/2019051222/d5a69e9c5fdec7bb.html" target="_blank">《网页设计与制作》教学大纲</a></h2><p>《网页设计与制作》教学大纲 一、 课程基本信息 课程编号： 中文名称：网页设计与制作 英文名称：Web Design and Production 课程类别：选修课 适用专业：所有专业 开课学期：2011-2012......</p><h2 class="mb20"><a href="/a5/2019051222/8eebb9cb9f7e5e24.html" target="_blank">网页制作与设计教学大纲</a></h2><p>《网页制作与设计》教学大纲 课程编号： 总学时数：36学时（其中讲授：20学时，实验：16学时） 一、课程性质、目的和要求 本课程是我系各专业必修专业课程之一。该课程以Dreamweaver和CSS......</p><h2 class="mb20"><a href="/a5/2019051222/59156504c526d05d.html" target="_blank">网页设计与制作教学大纲</a></h2><p>网页设计与制作教学大纲 (供医学影像学、护理学本科各专业用) 前 言 《网页设计与制作》是一门应用性和理论性都很强的课程，是医学影像和护理学专业的选修课程。通过学习本......</p><h2 class="mb20"><a href="/a5/2019051222/402b607e8d410d1b.html" target="_blank">《网页设计与制作》教学大纲</a></h2><p>《网页设计与制作》教学大纲 课程编号：14411400 课程总学时：48 周学时数：3 学分：3 课程类型：专业必修课 开课（系）院：教育学院 执笔人：朱 玲 审核人：刘 梅 一、课程简介 《网页设计与制......</p><h2 class="mb20"><a href="/a5/201905131/795b6818682f82de.html" target="_blank">网页设计与制作教学计划</a></h2><p>网页设计与制作教学计划 网页设计与制作情况介绍：13级计算机专业就业班每周课时为8课时，其中上机操作6课时、理论2课时；高考班每周课时为6课时，其中上机操作4课时、理论2课时。......</p><h2 class="mb20"><a href="/a2/2019051223/e92bee76c5535ff5.html" target="_blank">网页设计与制作课程设计</a></h2><p>一、 设计目的 通过一个月的网页设计学习，设计一个简单的网站来检测自己的学习成果，看看哪些东西还没有掌握，需要进一步的去巩固！网页的设计区别于实体化的一些东西，其多为多媒体......</p><h2 class="mb20"><a href="/a1/201905128/57fe4f309c3e4607.html" target="_blank">网页设计与制作总结</a></h2><p>网页设计与制作 实训报告 班级：多媒体152 姓名：张莉钧 学号：201501032118 指导老师：薛杨 王淑惠 实训时间：6.20——6.24 一、实训目的：1、进一步熟悉和掌握网站建设的基本流程和技......</p><h2 class="mb20"><a href="/a3/2019051213/f2c394ecab56c0ea.html" target="_blank">网页设计与制作课程设计</a></h2><p>使用所学知识独立制作一个网站，网站的主题可以是文学、音乐、影视、自我介绍（求职）、家乡介绍等。 1．设计基本要求 （1）要将站点目录明确分层，不能将内容都放在根目录下；不要使用中文......</p></ul> </div> </div> </div> </div> <div class="right-content-box wow fadeInRight delay300 right-content"> <script src="/e/member/login/loginjs.php"></script> <div class="sidebar"> <div id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜欢</h3> <ul class="new-list"><li><a href="/a11/2019051410/45ecc87c7ad56312.html" title="网页设计与制作报告书" target="_blank">网页设计与制作报告书</a></li><li><a href="/a5/2019051223/c65e010ba8b44be3.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a5/2019051223/5c5766cd995d68ed.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a5/201905130/84cb5012f197b7e3.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a1/201905121/5b0823fcf58667b1.html" title="多媒体实验四多媒体网页制作" target="_blank">多媒体实验四多媒体网页制作</a></li><li><a href="/a5/2019051223/9e01774a23e0e7e3.html" title="网页制作教学设计与创新" target="_blank">网页制作教学设计与创新</a></li><li><a href="/a5/2019051223/166ea2288c3ee66d.html" title="网页制作教学设计与思考" target="_blank">网页制作教学设计与思考</a></li><li><a href="/a5/2019051222/9690af3cd8255571.html" title="网页设计与制作课程教学大纲" target="_blank">网页设计与制作课程教学大纲</a></li><li><a href="/a1/201905120/49654652f17b9fe0.html" title="网页设计与制作教学总结" target="_blank">网页设计与制作教学总结</a></li><li><a href="/a1/2019051219/a8b6c7494fadb796.html" title="《网页设计与制作》教学大纲(精)" target="_blank">《网页设计与制作》教学大纲(精)</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div class="container"> <div class="footer-top clearfix"> <div class="copyr"> <div class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li> </ul> </div> <p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved &nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 云ICP备11051236号</a>&nbsp;&nbsp; <script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div> </div> </div> </section> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script> <div class="right_bar hidden-xs "> <ul> <li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=8524560123&amp;Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li> <li class="rtbar_li5"><a href="#1">第一篇</a></li> <li class="rtbar_li6"><a href="#2">第二篇</a></li> <li class="rtbar_li7"><a href="#3">第三篇</a></li> <li class="rtbar_li8"><a href="#4">第四篇</a></li> <li class="rtbar_li9"><a href="#5">第五篇</a></li> <li class="rtbar_li10"><a href="#6">更 多</a></li> <li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> </body> </html>