《网页设计与制作—Dreamweaver MX 2004、Fireworks MX 2004、Flash MX 2004课程网站》
课件介绍
《网页设计与制作》是我院高职计算机专业的核心课程，是我院本科非计算机专业学生的计算机公共基础课程的后续选修课程。该课程主要讲授网站的建立与发布、网页的设计与制作、网页图形图像处理、Flash动画制作。
本课件是以计算机网络技术和多媒体技术为手段开发的课程网站.。本课件设计制作了两个教学网站——『课堂教学网站』与『远程自学网站。』（见图1）
图1
一.课堂教学网站
课堂教学网站适用于在多媒体教室或计算机房教师授课时使用。该网站课件包括8个模块：（见图2）
1.多媒体网络授课教案：该课件将课程的全部内容制作成多媒体网页，教师在讲授过程中通过访问课程网站，打开多媒体网页，通过讲解、演示教案网页进行授课。本课件对每章教案都设计了教学目标→范例预览→知识讲解→操作演示→课堂练习→要点总结→实验作业→单元测试8个教学环节。
2.知识结构图与学习路径导航：本教程分别制作了Dreamweaver网页制作、Fireworks图像制作、Flash动画制作的知识结构图；并在每章教案中使用学习路径流程图进行导航。学生通过这些结构图，可以较快地建构、掌握整个知识体系。并方便学生在课后访问课程网站时根据自己的实际水平与学习需要自主快捷地获取知识。
图2 3.实验指导：本课件根据各知识点的教学要求设计每次上机练习需要学生完成的实验，在课件中说明实验的制作方法、展示实验范例样本，提供实验素材下载、提供制作方法的动画演示。学生通过访问课程网站可自主获取课程实验的全部相关信息与在线辅导。
4.在线测试： 为了使学生能够及时对所学的知识进行总结、复习与检测，本课件制作了在线测试系统（目前已制作了48套单元测试卷）。根据每章内容的重点与知识点进行单元自测。要求学生在完成每个单元的学习后，通过访问课程网站进行在线测试，测试系统进行自动评判并给出答案或试题分析。通过自测使学生复习并掌握各个单元的知识点。
5.动画演示：本网站将课程中的教学难点、操作方法等制作成Flash演示动画（目前共制作了140余个Flash演示动画）。学生通过访问课程网站，观看操作演示动画课件，仿真课堂教学中的教师演示进行网络自学。
6.考勤管理：本课件根据计算机教室上课的出勤管理需要制作了电子考勤模块。用于记录学生的出勤与计算机的使用情况。学生可以通过网站查询个人的出勤记录；教师可以查阅班级考勤与计算机使用的历史记录。
7.作业管理：本课件通过网站对学生的作业进行全程管理．学生完成作业后通过网站提交作业、教师通过网站查阅学生作业，并将学生作业成绩登记在学生成绩数据库中。学生通过网站可以随时查阅自己的作业成绩与教师评语。
8.师生互动：本课件制作了联机讨论论坛，老师与学生，学生与学生之间可以进行自由的消息传送与联机讨论。
二.远程自学网站
近年来，网络在人们学习、工作中的位置越来越重要，掌握网页制作方法，通过网络进行信息传播与交流已经成为现代职业人必备的一项技能。在学校里许多学生急需学习网页设计与制作的知识。许多教师由于现代化教学的需要希望掌握制作多媒体网络课件和精品课程网站的技术与方法。但是由于各种原因许多人不能到课堂参加面授学习，为此我设计制作了网页设计与制作课程的远程自学网站。(见图3)
图3 为了给学习者提供一个通过网络完全自学计算机课程的教学途径，远程自学网站采用了五项教学策略；设计了三条自学路径；制作了六个功能模块。
1.采用课堂教学全程模拟策略，设计［自学教案］学习路径：对于需要按照知识点循序渐进地学习，本教程制作了［自学教案］模块。按照教师课堂面授教学的整个过程，将讲述性的知识、概念等制作成文字、图片、图像等形式的网页供学习者阅读；将演示型的制作方法、操作步骤等制作成Flash动画，以仿真课堂教师的操作展示，供学习者观看。以实现课堂面授的教学功能。
2.采用知识自主建构策略，设计［制作流程］学习路径：对于需要按照制作流程选择性地学习，本教程设计了［制作流程动画演示］模块。该模块包括网站建立与网页制作流程、网页图像制作流程、Flash动画制作流程。点击流程图中的操作点，可以打开相应的操作方法的动画演示与操作步骤的文字说明。学习者可根据自己的实际水平与制作需要自主地选择课程知识。方便学习者自主建构与掌握整个知识体系。
3.采用任务驱动教学策略，设计［范例教学］学习路径：网页制作课程是一门应用性学科，要求学习者亲身操练，反复练习，在制作各种类型的网页、图像或动画操作中切实掌握所学的内容。为此本教程设计了[范例教学]模块。根据各知识点的教学要求设计需要完成的目标任务与范例，学习者通过预览范例、源文件下载、观看制作方法动画演示等步骤，边学边练，切实掌握网页设计与制作的技能。
4.采用自助学习教学策略，设计［在线测试］学习环节：为了使自学者能够及时对所学的知识进行总结、复习与检测，本课件设计了[在线测试系统]。根据每章内容的重点与知识点进行单元自测。学习者在完成每个单元的学习后，通过访问课程网站进行在线测试，测试系统进行自动评判并给出答案或试题分析。通过自测使自学者复习并掌握课程的知识。
5.采用网络信息交互策略，建立网上讨论与教师在线答疑功能：为了解决自学者在学习中可能遇到的各种问题，本网站制作了[联机讨论论坛]与[教师在线答疑]模块。学生与学生之间可以进行文字消息传送与联机讨论，老师与学生之间可以进行远程答疑与指导，帮助学习者解决学习过程中遇到的问题，以保证学习效果。本人担任大学计算机课程教师23年，主讲《网页设计与制作》、《Flash动画制作》等课程已近10年。本课件是我多年来教学经验的积累与总结，制作该课件先后耗时三年多，课件大小约608MB、其中用于演示和自测的Flash动画近200个。衷心希望这个课件能够为需要学习网站建立与网页制作知识的学生、为需要掌握多媒体课件和精品课程制作方法的同事同行们提供一点帮助。
1、简述Web浏览器打开一个Web文件的工作过程。
2、描述网页设计的一般步骤。
3、简述网页设计的基本准则。
4、简述规划网站目录结构时应遵循的原则。
5、描述版面布局的步骤。
6、什么是“HTML”？HTML“标记”又是什么？
7、简述“HTML”文档的基本结构。
8、简述以下一段HTML代码中各对标记的作用。〈html〉
〈head〉
〈title〉网页设计〈/title〉 〈/head〉
〈body〉
〈h2〉北国风光〈/h2〉
〈/body〉 〈/html〉
9、如何进行本地网页的测试？
10、网站管理和维护的主要工作有哪些？
11、什么是Web浏览器?
12、简述网页设计中所需要注意的通用规则。
13、简述DHTML的概念及主要组成。
14、简述使用FrontPage在网页中插入一个日历的过程。
15、简述色彩的三原色的概念及每种颜色的调配范围。
16、为什么要采用DHTML技术？客户端动态网页技术有哪些优点？
17、网站栏目划分的原则是什么？
18、XML与HTML相比的主要优点有哪些？
19、请简述一下网站的设计流程？
20、简述FireWorks的特点。
21、网页制作的步骤是什么？
22、怎样让链接没有下划线?
23、怎样在网页中加入多媒体播放?
24、怎样让网页的背景图像不滚动?
25、怎样定义网页的关键字?
26、什么是Web浏览器?
27、网页上所说的重心平衡指的是什么?
28、什么是DHTML？DHTML技术主要由哪几部分组成？
29、在CSS中，对字体的的设置所涉及到的属性有哪些？
30、用HTML语言回答一个HTML文件应具有的基本结构。
31、比较GIF格式和JPG格式的原理与各自的适用范围。
32、为什么要采用DHTML技术?客户端动态网页技术有哪些优点?
33、简述站点的概念以及虚拟目录和实际目录之间的对应关系。
34、什么是Web安全色?
35、简述虚拟主机的概念和功能。
36、简述Dreamweaver的工作窗口由哪些部分组成。
37、在Dreamweaver中，插入图像的方法有哪些？
38、在Fireworks中，如何使文字附加于路径？
39、在Flash MX中可以创建哪些类型的元件？各元件的含义是什么？
40、HTML中
标记和
标记有何区别?
41、简述在网页中插入背景音乐的方法。
42、怎样在网页中插入Flash影片？
43、简述设计Web站点的一般步骤。
44、简要说明html的基本工作原理。
45、简要说明表格与框架布局的区别。
46、举例说明在网页中使用CSS样式表的三种方式（都使用对p标记符应用color属性为例），并简要分析各自的特点。
47、简要说明使用网页图像时应注意的问题
48、简要回答选择符的作用及分类。
49、XML的主要特征有哪些？
50、FrontPage的主要功能有哪些？
51、简答HTML文件的基本标记组成。
52、简答Java与JavaScript的主要区别。
53、简述网站的开发流程。（10分）
54、简述静态网页的执行过程。（7分）
55、简述在Dreamweaver MX中制作以插件方式播放音乐的页面的步骤。
56、简述网页制作有哪些基本流程。
57、在Dreamweaver MX中，目标端点的链接有哪几种？
58、简述在Fireworks中，可以做哪几个方面的环境设置。
59、在Flash MX中，帧有哪几种类型？各自的含义是什么？
参考答案：
1、简述Web浏览器打开一个Web文件的工作过程。
1）
Web浏览器向服务器发出页面请求
2）
服务器接收页面请求，并将搜索到的页面发给Web浏览器
3）
Web浏览器接收并显示页面
2、描述网页设计的一般步骤。
1)
设计主题
2)
设计网页的总体结构
3)
资料的收集和整理
4)
选择网页的设计方法
5)
注意一些基本问题，如：标题要简明、图片最好加说明等
3、简述网页设计的基本准则。
需要遵循的艺术原则主要有：
1）
对比原则
2）
协调原则
3）
平衡原则
4）
趣味原则。
还包括统一、连贯、分割、对比、和谐、易读、易找、清晰、精选。
4、简述规划网站目录结构时应遵循的原则。
在创建目录时需要注意：
（1）不要将所有文件都存放在根目录下。
（2）目录层次不要太深，建议不要超过三层。
（3）不要使用过长的目录名和尽量不要使用中文目录名。
5、描述版面布局的步骤。
步骤：
1）
绘制网页草图
2）
粗略布局
3）
定案
6、什么是“HTML”？HTML“标记”又是什么？
HTML是一种建立网页文件的语言，透过标记式指令，将影像、声音、图片和文字等连接起来。
在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图形等显示方式的符号。
7、简述“HTML”文档的基本结构。
HTML网页的基本结构。
HTML文件开始
文件头开始
文件头
文件头结束
文件体开始
文件体
《网页设计与制作教案》
教师：系部：信息技术工程系专业：计算机应用班级：计机
湄洲湾职业技术学院
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.2 插入标题文字 格式
标题内容 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 不支持框架的网页
