教学大纲标准格式.docx

教学大纲标准格式.docx

《教学大纲标准格式.docx》由会员分享，可在线阅读，更多相关《教学大纲标准格式.docx（51页珍藏版）》请在冰点文库上搜索。

教学大纲标准格式

网页制作-Dreamweaver

教学大纲

2006年2月9日

Version1.0

一、课程目标

1.理解什么是网站

2.使用Dreamweaver创建网页

3.标准化网页制作

4.通过网页链接创建交互站点

二、课程对象

●中职学校学生，学习启蒙星课程的第一个学期

三、课程学时

理论课

（课时数）

上机课

（课时数）

总课时

（课时数）

16

16

32

四、课程地位

五、课程内容组织结构

六、课程各章内容、重点、组织结构及授课要求

理论部分,共　16　课时

第一章　介绍

内容概述

介绍了web的一些基本概念，Dreamweaver的环境和界面，及设置网页属性。

重点和难点

●熟悉Dreamweaver的环境

内容组织结构

1.1简介

●进入点

●操作点

●退出点

●设计好网站的重要准则

●基本术语

1.2介绍Dreamweaver在网站项目中的作用

DreamweaverMX是专业的HTML编辑器，用于设计、编码和开发网站、网页，还有功能强大的Web应用。

DreamweaverMX具有手动编码HTML控制和可视化编辑环境。

Dreamweaver提供了有用的工具，可以增强Web创建体验。

Dreamweaver是一种完全成熟的WYSIWYG（WhatYouSeeISWhatYouGet，所见即所得）HTML编辑器，允许您轻松、快捷地创建网页和网站。

1.3Dreamweaver概念

●静态站点

●动态站点

●本地站点

●远程站点

●根文件夹

1.4界面

●插入栏

●属性栏

●面板

●面板组

●页面属性

●段落样式

●段落对齐

●段落缩进

练习和作业

选择题，巩固本章的概念

第二章　文本格式化

内容概述

介绍了如何在网页中添加文本，设置文本格式，及如何创建各种列表。

重点和难点

●添加文本，及对文本进行格式化

●创建列表，设置列表属性

内容组织结构

2.1简介

在本章中，将学习创建网页的各种方法，使用最常用的格式.html和.htm保存网页，如何在页面上添加文本，以及如何根据要求对文本进行格式化。

2.2新建页面

在启动DreamweaverMX时，将看到一个新的空白页面。

这是一个无标题的新页面，可保存为HTML格式。

介绍页面标题的意义。

2.3保存文件

应确保将文件保存在为站点创建的文件夹中。

一旦将页面保存到站点中，就可以在“站点”窗口中查看并打开它。

本节介绍保存文件的步骤。

2.4添加文本

在DreamweaverMX中添加文本与在MSWord应用程序中键入文本一样简单。

在“文档”窗口中单击时，将出现闪烁的光标。

此时即可键入需要添加的文本。

●换行

●不换行空格

2.5拷贝粘贴文本

Dreamweaver提供很多输入文本的方法，其中最简单的就是直接键入。

但是，也可以直接从字处理程序拷贝文本，并粘贴到Dreamweaver的“文档”窗口。

本节介绍拷贝和粘贴文本的步骤。

2.6从Word导入HTML

在Dreamweaver中，可以使用“文件”菜单中的“打开”或“导入”选项，来打开以HTML格式保存的Word文件。

2.7段落

一般来说，在文档窗口输入文字，然后按下回车，即可定义为一个段落，Dreamweaver会自动为文字两端添加上

和

和

本节讲解以下知识点：

●段落样式

●段落对齐

●段落缩进

2.8字符

在Dreamweaver中把“插入”面板切入到“字符”分类。

可以直接输入很多特殊字符。

如©、®等。

系统为这些HTML代码和特殊字符提供一个完整菜单。

本节主要介绍以下知识点：

文本样式、HTML样式

2.9Lists列表

列表是一种将主题或数据与文档的其他部分区分开的有效方法。

最常用的列表类型为项目列表和编号列表。

项目列表被称为无序列表,编号列表被称为有序列表。

●项目列表和编号列表

●定义列表

●嵌套列表

练习和作业

选择题，巩固本章的概念

第三章　表格

内容概述

介绍了表格的基本概念，如何创建和使用表格，及如何导出表格式的数据。

重点和难点

●对表格的操作

内容组织结构

3.1表格的基础知识

创建网页并不仅仅是将各种内容组合起来后上载到服务器上，而是一项需要动脑筋的艺术创作。

有条理地创建网页的内容和图形，与内容的深度一样重要。

表格可以用来以结构化的方式更有效地排列网页上的内容。

在HTML中，可以采用布局视图或标准视图创建表格。

3.2插入表格

本节介绍有关表格的一些基本术语，并讲解在Dreamweaver中插入表格的步骤。

3.3格式化表格

●绘制布局单元格

●布局单元格属性

●嵌套表格

●表格式数据

●对表格中的数据进行排序

●导出表格式数据

练习和作业

选择题，巩固本章的概念

第四章　库和代码片断

内容概述

介绍了Dreamweaver中提供的库项目和代码片断功能，如何管理和使用库项目，及如何创建和使用代码片断。

重点和难点

●使用代码片断

内容组织结构

4.1库项目

库是页面元素的列表，它将这些元素存储起来以便重复使用。

这些页面元素为HTML序列，可以在站点中的许多文档里重复使用。

页面元素可以是图像、文本或可以在多个页面中使用的任何其他对象。

本节介绍以下知识点：

●创建库项目

●在网页中添加库项目

●管理库项目

4.2代码片段

代码片断是可以放置在网页中的代码部分。

需要时可以重新使用它们。

将一段段的代码存储在“代码”面板的“代码片断”选项卡中，以备将来使用。

使用代码片断，可以收集并管理代码部分。

在许多方面，“代码片断”库就是代码库。

●创建代码片段

●在网页中添加代码片段

●更新代码片段

●保存代码为代码片段

练习和作业

选择题，巩固本章的概念

第五章　图片

内容概述

介绍了在网页上常用的图片类型，如何在网页的使用图片及设置图片的属性。

重点和难点

●在网页中使用图片

内容组织结构

5.1Web的图像类型

●JPG图像

●GIF图像

●PNG图像

5.2图像属性

只要在网页中插入图像，就可在属性检查器中为其指定名称，修改其属性，以适合需要；还可以将图像链接到另一页面或图像，对齐图像，设置边框等。

为了在属性检查器中显示图像属性，需要选择图像才可以在属性检查器中显示可修改的属性。

5.3添加图像

如果要使用DreamweaverMX将图像添加到网页中，就不需要为其编写代码。

只需要插入图像，DreamweaverMX就会自动生成代码。

本节讲解将图像插入网页的步骤。

分别讲解：

●在单元格中添加图像

●在表格里添加图像

●在网页中添加图像

●添加图像占位符，将图像占位符插入到页面中。

5.4为水平标尺导入1×1像素图像

●跟踪图像功能

练习和作业

选择题，巩固本章的概念

第六章　表单

内容概述

介绍了表单和表单元素的概念，及如何创建表单和表单元素。

重点和难点

●使用表单和表单元素

内容组织结构

6.1表单的基础知识

表单用于在网页中向网站访问者请求信息。

这是一个在网站中包括Web互动性的极好方法。

表单包含文本域、标签、下拉式列表和其他元素。

使用表单对象，可以在Dreamweaver中轻松地创建表单。

6.2创建表单

本节介绍创建表单的步骤，以及如何设置表单属性，最后介绍了各种表单方法。

6.3增加表单元素

表单元素指用来将互动性添加到网页的各种方法。

每个表单元素都有特定的用途、优点或缺点。

本节介绍一些表单元素，并通过示例逐个了解这些元素。

●文本域

●隐藏域

●文件域

●图像域

●复选框

●单选按钮

●提交和重设按钮

●列表

●调转菜单

练习和作业

选择题，巩固本章的概念

第七章　框架

内容概述

介绍了框架网页的概念和类型，及如何创建框架和设置框架的属性。

重点和难点

●框架集属性

内容组织结构

7.1框架的基础知识

框架是集成到一个页面以使用户更容易定位的几个网页。

可以创建各种框架，使一些数据（如公司徽标、广告条、导航主题等）保持不变，而使其他数据不断更新。

框架与表格类似，它们都用于创建用户友好、整洁的布局。

框架集就是多个框架的集合。

它是在同一窗口显示两个或更多HTML页面的方法。

7.2框架类型

DreamweaverMX提供许多现成的框架结构，只需从“插入”栏拖放它们，就可以将其插入网页中。

7.3创建框架

除了使用预定义的框架集以外，在DreamweaverMX中还有另一种创建框架集的方法。

可以自己设计框架，而不使用现成的框架。

尽管现成框架是在文档中设置框架的最简单的方法，有时必须创建自己的框架集。

7.4框架和框架集属性

本节介绍框架和框架集的属性。

框架的属性包括：

框架名称、源文件、“滚动”选项、边框、边框颜色、边界。

框架集的属性包括：

像素、百分比、相对。

练习和作业

选择题，巩固本章的概念

第八章　处理 Flash

内容概述

介绍了如何使用Dreamweaver中提供的功能创建Flash文本和Flash按钮，及插入Flash动画。

重点和难点

●在网页中使用Flash

内容组织结构

8.1创建Flash文本

当您想要创建比纯文本的网站有趣得多的网站时，动画文本、图形和影片就非常有用。

在DreamweaverMX中，可以插入并修改Flash对象。

还可以在Dreamweaver内部创建Flash文本。

本节介绍在页面中插入Flash对象的步骤。

8.2创建Flash按钮

Dreamweaver还提供Flash按钮这一提供方便的功能，可用于插入各种现成的Flash按钮。

这些按钮带有简单的转滚效果、有趣的动画或良好的效果，使其看起来赏心悦目。

本节通过示例讲解插入Flash按钮的步骤。

8.3导入swf类型Flash

如果在浏览器中加载了Shockwave插件，就可以加载swf文件，并使用浏览器查看。

几乎所有浏览器都支持这些文件类型。

在Dreamweaver中，可以使用“插入”栏来插入.swf文件。

练习和作业

选择题，巩固本章的概念

第九章　用附加效果增强网页

内容概述

介绍了如何使用Dreamweaver中提供的功能增强网页效果，如创建图像地图、导航条等。

重点和难点

●插入导航条

内容组织结构

9.1滚动

鼠标经过图像是一种鼠标指针经过它时会变化的图像。

图像滚动与文本滚动相同。

在用户将鼠标移过图像时，将会从一个图像翻过另一个图像。

Dreamweaver中的滚动效果包含两个图像，这种图像也称为状态。

主图像或原始状态是用户看见的第一个图像，副图像或鼠标经过状态是鼠标经过主图像时显示的图像。

此功能可以有效地用于导航条，这样如果用户的鼠标经过链接，图像就会变化。

本节通过示例介绍如何添加鼠标经过图像。

9.2图像地图

图像地图是一种包含一个或多个可单击部分的图像，这些可单击部分称为热点，起着超级链接的作用。

因此，如果单击标记为热点的一个区域，它会打开另一文档。

DreamweaverMX提供了内置图像地图创建工具，使得为网页创建图像地图变得容易。

本节介绍如何创建图像地图的步骤。

9.3导航条

在创建网站时，网站包括大量页面，因此有必要创建导航条，帮助用户浏览各个页面。

DreamweaverMX提供一个选项，使您可轻松创建导航条。

导航条是一系列鼠标经过图像，它们水平或垂直并排放在页面上，用于创建网站菜单。

本节介绍插入导航条的步骤。

练习和作业

选择题，巩固本章的概念

第十章　处理层

内容概述

介绍了如何在Dreamweaver中创建层，使用层，及制作层动画。

重点和难点

●创建层动画

内容组织结构

10.1层

虽然可以使用表格来指定Web浏览器中页面的布局，但是为复杂的网页创建表格非常困难。

Dreamweaver提供了一个功能，可以使高级页面布局的创建变得更容易。

使用层，网页设计人员就可以精细地调整元素的准确像素布置。

层就是包含内容的容器，可以将其放置在文档中的任何位置。

由于可以制作层的动画，因此层属于动态内容类。

本节介绍创建层的步骤。

10.2修改层

在“层”面板中可以查看所有层。

在此处可以更改层的可见性，编辑层的名称，以及决定层的重叠顺序。

可以决定是要显示还是隐藏层，还是继承父层的可见性。

可以将多个层嵌套起来，使一个层控制其他层。

本节介绍如何在“层面板中查看所有层、如何移动层和绘制连续的层、如何选择多个层、如何调整文本或图像层的大小等知识点。

10.3时间轴

可以使用时间轴，在屏幕中移动一个层，或同时移动多个层。

时间轴允许使用随“时间”变化的DHTML功能来创建复杂的动画。

本节介绍如何将对象添加到时间轴中以及如何修改时间轴。

10.4将层转换为表格

在前面已经知道，虽然层是动态内容，而且可以制作层动画，但并非所有浏览器都支持层。

而且，如果层重叠，不同的浏览器就会以不同方式显示这些层，而且会将站点的原始布局弄乱。

要使层能够与任何Web浏览器都兼容，将层转换为表格是最佳方法。

练习和作业

选择题，巩固本章的概念

第十一章　行为

内容概述

介绍了如何使用Dreamweaver中提供的行为功能，及如何使用。

重点和难点

●转到URL

内容组织结构

11.1创建行为

除了页面布局以外，Dreamweaver能够通过“行为”将互动性添加到页面。

行为使访问者能够与网页互动，并且以许多不同方式修改网页，如显示弹出式窗口、播放声音和交换图像等。

行为是应用于特定HTML标签的JavaScript事件。

行为可以应用于任何对象，如页面、图像、链接、按钮等。

尽管行为由JavaScript组成，但您不需要了解脚本语言，因为Dreamweaver会为您编写。

11.2使用行为

要创建行为，首先，此决定取决于正在处理的对象、表单或页面的类型。

其次，需要决定要与特定动作关联的鼠标事件。

本节介绍如何将行为应用于页面元素，并详细介绍以下知识点：

●表单的有效性检查

●弹出消息

●打开浏览窗口

●转到URL

练习和作业

选择题，巩固本章的概念

第十二章　自动化Dreamweaver

内容概述

介绍了如何使用Dreamweaver中提供的相册功能。

重点和难点

●创建相册

内容组织结构

12.1网站相册

网站相册是一个网站，它包含用Dreamweaver的“命令”菜单创建的一组页面。

用此命令创建的页面显示相片，开始先显示缩略图（图像的小尺寸低带宽版本）的索引页和指定的描述。

要在网页上仅显示图片时，此命令尤其有用。

12.2创建网站相册

如果您的计算机上安装了DreamweaverMX和Fireworks4或更高版本，就可以使用“创建网站相册”来创建网站相册。

最好将所有原始图像保存为jpeg格式，因为浏览器可以最好地支持此格式，以使下载速度更快。

本节介绍如何创建网站相册。

12.3检查历史记录

在Dreamweaver中，如果要以同一方式重复使用某件东西，就可以利用“历史记录”面板，以减少创建相同步骤所需的时间。

“历史记录”面板会记录您所作的操作。

而且，如果需要，它还可以用名称保存选定步骤，以便在其他文档上重复使用。

12.4站点文件

Dreamweaver有助于有效并广泛地管理文件。

通过利用站点缓存，可以重命名、拷贝和移动文件，而无需断开与其他文件的链接。

在修改链接时，Dreamweaver将会在您工作时更新链接。

可以使用非常灵活的查找和替换功能，更新创建的所有新链接。

12.5站点地图

Dreamweaver还可以为站点生成完整的可视地图（请参见图12.8）。

站点地图是基于图标的站点表示。

在此可以看到图标形式的所有相互链接的文件，并且可以直观地了解哪个文件链接到多少文件。

练习和作业

选择题，巩固本章的概念

第十三章　链接

内容概述

介绍了什么是样式表，样式表的各种类型，及如何创建和使用样式表。

重点和难点

●创建内部链接

●创建外部链接

内容组织结构

13.1关于链接

Dreamweaver是功能强大的软件，用于将各种内容集成到一个网站中。

迄今为止，已经学习了创建属于一个网站的各个页面，这些页面没有互相链接在一起。

简言之，如果希望单击一个项目可以打开另一页面，在Dreamweaver中要做的工作是使用超级链接命令、属性检查器中的链接选项或命名锚记选项，将这些项目互相链接起来。

所有这些命令均可用于将一个项目链接到另一项目。

13.2链接类别

如果要将站点页面链接到本地站点以外的页面，那么需要指定另一个页面的完整地址。

但是，在创建本地链接（从同一站点上的一个文档到另一个文档的链接）时，不必指定要链接的文档的完整URL。

相反，只需要指定从当前文档或从站点的根文件夹的相对路径。

链接一个项目与另一个项目的常用的主要链接类别有：

●相对的

●绝对的

13.3链接类型

在Dreamweaver中主要有以下两种链接：

●内部链接

内部链接可用于链接同一网站内的文档。

如果要插入的链接指向网页内的文件，只需将文件名键入对象属性工具栏的正确选项中。

尽管在此不必指定整个URL，但必须键入包括扩展名的完整文件名（如“document.html”）。

●外部链接

外部链接是为本地网站之外的文档指定的链接。

创建外部链接的方法与创建内部链接的方法相同，只是必须指定站点的完整URL。

如果URL很长，可从Web浏览器或文本文档拷贝URL，然后将它粘贴到属性检查器的“链接”选项框中。

与内部链接类似，必须选择要应用外部链接的文本或图像。

本节还介绍了用命名锚记创建链接的方法.

练习和作业

选择题，巩固本章的概念

第十四章　层叠样式表

内容概述

介绍了什么是样式表，样式表的各种类型，及如何创建和使用样式表。

重点和难点

●创建样式表

内容组织结构

14.1什么是样式表

样式是一组格式属性，用来控制一个文档中一系列文本的外观。

样式表只是由告诉浏览器如何显示HTML页面的代码行组成的文本文件（.css）。

层叠样式表可用于同时控制多个文档，它包括一个文档的所有样式。

CSS是CascadingStyleSheets（层叠样式表）的缩写。

14.2样式表类型

在网页中应用层叠样式表的方法有两种，它们是：

●外部

当创建那些链接到所有页面的外部层叠样式表文件时，可以通过只修改一个文件中的值来更新网页的外观，其他文件都会立即更新。

这样可以为Web设计人员节省大量时间和精力，而且，由于不必重复检查其他网页是否已经更新，操作就会变得更加安全，所以比较安全。

●嵌入

嵌入样式表只会影响对其应用了样式的网页的样式效果，但如果要更新这些网页，就必须编辑每个网页。

14.3创建样式表

创建新的CSS样式就是在创建自定义样式，自定义样式就是根据您自己的规格和偏好来创建的样式。

可以将这个样式另存为外部样式或嵌入样式，以及作为外部样式或嵌入样式来重复使用。

本节介绍如何创建新样式。

14.4将样式表应用到网页

创建层叠样式表后，下一步就是将它应用到所选的项目。

本节介绍将样式链接和应用到项目的方法。

练习和作业

选择题，巩固本章的概念

第十五章　模板

内容概述

介绍了如何在网页中创建和使用模板。

重点和难点

●编辑模板

内容组织结构

15.1什么是模板

模板就是计划或标准结构，可以反复用于创建网站上的其他文档。

此功能对于团队项目很有用，有些人员可以设计模板，使网页的外观一致，而其他人员可以集中精力创建特定页面的内容。

15.2创建模板

既可以使用现有的HTML文档创建模板，也可以使用空白的HTML文档从头开始创建模板。

最简单的方法就是先创建一个网页，然后将它用作模板。

另一个方法是从头开始创建一个模板，然后在其中添加图像、表格和文本。

接着，必须决定哪些区域可以修改（内容），然后保存模板，这样就可以开始创建页面了。

Dreamweaver采用标准HTML备注来决定采用哪个模板和哪些区域可编辑。

模板会自动存储在Templates文件夹中，而且存储在站点的本地根文件夹中。

本节介绍如何将现有文档保存为模板。

15.3在网页中添加模板

制作了模板后，就需要确保所有页面均使用该模板，这样，在更新模板时，使用该模板的页面就会自动更新。

本节介绍将模板应用于页面的步骤。

●编辑模板

●明白可编辑和不可编辑的区域

●添加可重复编辑区域

●插入一个可重复表

练习和作业

选择题，巩固本章的概念

第十六章　测试站点

内容概述

介绍了网页的测试，及如何使用Dreamweaverw检查网页中的错误，并纠正。

重点和难点

●检查网页的错误并纠正

内容组织结构

16.1在浏览器中预览

对于要在Internet上发布网站的Web开发人员，Web浏览器非常重要。

如果不知道网页在最常用的浏览器中外观如何，则难以了解所有访问者是否能正确查看站点。

如果是商业站点，由于大多数客户不能用各自浏览器查看内容，这肯定会影响业务。

两种常用的浏览器有：

Internetexplorer、NetscapeNavigator

16.2测试网页

创建网页之后，应该使用Dreamweaver的“检查目标浏览器”选项在目标浏览器中检查这些网页。

此选项允许您确定在DreamweaverMX中定义的浏览器是否支持已经创建的网页。

本节详细介绍以下知识点：

●浏览器的兼容性

●查找和修复断掉的链接

●语法错误

练习和作业

选择题，巩固本章的概念

上机部分,共　16　课时

第一阶段介绍（参照学生用书第1章）

阶段目标

在本阶段结束时，学生将掌握：

●什么是web？

●Dreamweaver在创建网站中如何起作用

●Dreamweaver的相关概念

●Dreamweaver界面

●页面属性

内容安排

第一部分：

指导

1、显示站点项目并简单介绍Dreamweaver的组件

2、为站点项目定义本地站点

第二部分：

作业

在旅游网站项目的页面中使用文本

第二阶段文本格式化（参照学生用书第2章）

阶段目标

在本阶段结束时，学生将掌握：

●添加和格式化文本

●创建列表

●保存文件

●导入文本

●拷贝和粘贴文本

内容安排

第一部分：

指导

详细指导如何新建页面、保存文件、设置页面属性、添加文本、拷贝和粘贴文本、进行文本格式化、导入使用MSWord创建的HTML文档。

第二部分：

作业

在旅游网站项目的页面中使用文本

第三阶段表格（参照学生用书第3章）

阶段目标

在本阶段结束时，学生将掌握：

●表格的基础知识

●