下载文档原格式
XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。
2.掌握各种网页元素在DremweaverCS3中的使用。
例如，文本、表格、图像、超级链接、层、框架和表单等。
3.掌握HTML,理解各种标记的功能和用法。
4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。
5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。
6.能够解决一些网页设计中的常见问题。
（三）本课程的特点1.课程注重实际应用，即实践性强。
2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。
3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。
（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"Flash动画制作”等。
二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。
本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。
第6单元表格、图层、行为、时间轴课程目标：●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例6.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
⑥边框：设置边框的宽度，单位是像素。
⑦类：使用CSS中定义的类（见有关CSS章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
多媒体技术与网页制作第14讲2007年5月修订2013-7-22制作人：马秀麟11、创建行为动画首先打开行为面板，为创建行为动画创建条件：❑【窗口】【行为】，系统将打开行为面板。
接着，选择要被添加行为的对象。
比如单击上图左侧属性面板顶部的<Body>，表示要为<Body>添加行为。
或者选中页面中的某个对象，比如一个小图片，一个小按钮。
等等。
这里我们假设选择了<Body>，即整个页面正文。
(1) 添加弹出消息框❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【弹出信息】,系统将弹出对话框，我们可以在【消息】框中回答要输出的信息。
❑系统默认Onload时发生此事件。
它表示当这个页面刚刚被浏览时会自动弹出消息框。
❑当然我们也可以通过单击Onload右侧的按钮改变发生此事件的条件，比如修改为右单击Body时弹出消息框。
(2)设置文本❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【设置文本】,系统将弹出对话框，我们可以在此对话框中回答要进行设置的文字。
(3)弹出新的浏览窗口❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【打开浏览器窗口】,系统将弹出对话框，我们可以在URL框中回答要在此窗口中浏览的网页。
当然我们还可以利用此对话框调整新窗口的属性。
❑系统默认Onload(即调入网页)时发生此事件。
但我们一般定义单击某一对象激发此事件。
那我们可以先选中某对象，然后我们可以通过单击Onload右侧的按钮改变发生此事件的条件。
(4)同时调入其他对象❑单击行为面板左上角的+号，表示添加行为动画，系统将弹出快捷菜单，选择其中的【播放声音】等,系统将弹出对话框，我们可以在文本框中回答要播放的声音文件的名称。
❑系统默认Onload时发生此事件，我们可以通过单击Onload右侧的按钮使发生此事件的条件为Onclick。
网页制作第6单元表格、图层、行为、时间轴-标准化文件发布号：（9456-EUATWK-MWUB-WUNN-INNUL-DDQTY-KII第6单元表格、图层、行为、时间轴课程目标：掌握在网页中插入表格方法掌握网页中细线表格、立体表格等制作方法掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
2图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例36.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
中的时间轴设计与应用时间轴是一种常用的信息呈现方式，它以时间为横轴，将事件、活动或过程等按照时间顺序进行排列，帮助我们更加清晰地理解和掌握相关内容。
在各个领域和行业中，时间轴都有着广泛的应用。
本文将介绍时间轴的设计原则和常见应用场景。
一、时间轴的设计原则1. 清晰易读：时间轴上的信息应该简洁明了，可以通过精准的时间标注和简洁的文字说明来达到这一目的。
2. 时间刻度：时间轴上的时间刻度应该恰当地划分，以便读者能够清晰地理解事件的发生先后关系。
3. 信息分层：对于时间轴上的事件信息，可以通过不同的颜色、形状或文本样式等方式进行分层展示，以帮助读者更好地理解和区分不同类型的事件。
4. 引导线：时间轴上的引导线可以帮助读者更好地连接起事件，并且有助于读者理解事件之间的因果关系。
5. 多媒体支持：时间轴设计可以结合多媒体元素，如图片、视频等，来丰富信息呈现形式，提高阅读体验。
二、时间轴的应用场景1. 历史事件：时间轴在历史领域中得到广泛应用，可以用来展示各个历史事件的发生时间和先后关系，帮助读者更好地理解历史演变的脉络。
2. 项目管理：在项目管理中，时间轴可以用来安排和跟踪项目中的各个阶段和关键节点，以帮助团队成员掌握项目进展情况。
3. 学习笔记：时间轴可以用于总结和整理学习笔记，将知识点按照时间顺序进行排列，有利于知识的回顾和巩固。
4. 故事叙述：时间轴可以用来叙述一个故事的情节走向，将故事中的事件按照时间顺序展示，使读者更好地理解故事情节的演进。
5. 产品演化：对于产品设计师或市场人员来说，时间轴可以用来展示产品的演化过程，帮助他们了解产品的发展历程和关键节点。
6. 生活规划：时间轴可以用来规划个人的生活目标和时间安排，帮助我们更好地管理和利用时间，实现自己的目标。
三、时间轴设计与应用案例1. 历史事件时间轴在历史课堂上，教师可以利用时间轴来展示各个历史事件的发生时间和先后关系。
通过精确的时间刻度和相关的文字说明，学生可以更好地理解历史事件的发展脉络，提高对历史知识的理解和记忆。
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览；3、熟悉HTML基本标记的使用。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉HTML的结构、语法。
◆熟悉HTML基本标记的使用。
实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。
4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。
5、通过附录1的练习熟悉HTML基本标记的使用。
（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆文字的插入及设置。
◆图像的插入及设置。
◆各种超链接的创建。
实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。
2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。
3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。
实验八行为与时间轴●任务一行为的应用●任务二录制层路径●任务三滚动字幕的制作●任务四行为与时间轴的综合应用任务一行为的应用一、实验目的掌握添加内置的行为方法和步骤设置触发行为的事件二、实验内容与步骤：1.建立一个站点然后将素材拷贝到此站点中。
2.打开“项目简介”网页。
3.添加背景音乐：选中<body>标签，在行为菜单中选择“播放声音”，音乐网上自己找，音频格式可以是.mid、.wav、.aif、.mp3等，选择相应的事件，如果希望是网页下载后立即播放，选择OnLoad事件，修改插件参数”loop”和”autostart”为true。
4.选择2个项目效果图，然后在上设置“弹出信息”行为，事件为onClick,文本内容“版权所有，严禁下载！”5.单击<body>标签，设置“打开浏览器窗口”，要显示的URL项里找文件“公司公告.html”，并设好浏览器的高度和宽度，窗口名称为“公告”，事件为"onload"。
6.为网页上写有“专心”的图像设置“交换图像”行为，“设定原始档”为替换图像的路径，替换图像为写有“专业”的图像，事件是鼠标在图像上方（onMouseOver)时为替换，移出时（onMouseOut)为“恢复交换图像”，“预先载入图像”和“鼠标滑开时恢复图像”的勾选上，同样的方法把至诚替换为至信。
7.单击<body>标签，设置“预先载入图像”行为，预先下载不需要在网页上立即显示的图像文件到浏览器的缓冲中，那么图像就是上例中的“专业”和“至信”，事件为“onLoad”。
8.单击<body>标签，设置“检查插件”行为，检查是否有flash，事件是“onLoad”，，如果有插件转到“锚链接.html”没有则留在原网页上，保存文件，预览效果，如果有插件，为了不影响其他行为的预览，回到页面把此行为删除。
9.在“业务合作”菜单上设置显示弹出式菜单具体菜单项见下图。
目录分割线 (1)弹出菜单 (5)滑动折叠菜单 (10)多彩文字链接 (17)极酷的鼠标 (26)网站个性小图标 (28)网站过度特效 (30)插入flash按钮 (32)插入flash文字 (34)插入透明背景的flash (35)Flash个性播放界面 (38)制作电子相册 (43)随机播放音乐 (45)滚动布告栏 (47)数据库连接 (51)验证用户注册 (62)在线音乐网站 (74)实现购物车 (84)实现产品搜索 (90)Blog日历事件 (94)随笔管理及评论 (106)分割线是网页中不可缺少的元素，它主要用于分隔网页内容，也可以用于装饰网页。
效果说明在网页中间会出现一条漂亮的分隔线，并且能够不断闪动，从而充分体现出网站的个性，如图32-1 所示。
创作思想本实例使用层作为定位，然后在层中插入表格，在表格中插入图片并在时间轴中分别添加样式滤镜效果。
操作步骤（ 1 ）新建一个网页文件，并在网页中插入一个层，然后在层中插入一个1 行 2 列的表格，如图32-2 所示。
（ 2 ）设置表格的间距，然后在表格的单元格中插入图片，如图32-3 所示。
（ 3 ）设置时间轴。
调出时间轴，在时间轴的第5 帧处添加【改变属性】行为，并设置层对象的属性，如图32-4 所示。
（ 4 ）添加行为和改变属性。
在其他帧中分别添加行为，并根据需要改变属性，在第40 帧处添加转到时间轴的第 1 帧行为，再勾选【自动播放】复选框，如图32-5 所示。
本图代码如下所述：Glow(Color=red, Strength=1)Glow(Color=red, Strength=2)Glow(Color=red, Strength=3)Glow(Color=red, Strength=4)Glow(Color=red, Strength=3)Glow(Color=red, Strength=2)Glow(Color=red, Strength=1)实例制作完成。
