全套电子课件：网页制作与实训.ppt

1、网页制作与设计网页制作与设计 第一章 网页制作概述 网站制作是一个很大的课题。本章主要介绍网页设计常用的软件及特点，然后介绍了设计网站的流程。在进行网页设计时，要注意网页设计的计划性和条理性，在进行网页组件的整合和制作之前，要把网页布局明确下来，这是网站设计的关键。教学重点与难点教学重点与难点 Internet简介及发展 Internet的主要功能 网页制作常用工具 网页制作流程1.1 Internet、WWW、HTML简介 1.1.1 Internet简介 因特网是当今世界上最大的连接计算机的电脑网络通迅系统。它是全球信息资源的公共网而受到用户的广泛使用。从功能方面看，Internet有两大

2、用处：第一用处是通信，使用电子邮件通信，速度快、费用低、特别适合国际间通信量大的用户使用；第二用处是信息的良好工具。特别是Telnet、FTP、Gophet、News、www,都是Internet检索和发送信息的良好工具1.1.2 WWW（万维网）简介 WWW是Internet 上那些支持WWW协议和超文本传输协议HTTP的客户机与服务器的集合，透过它可能存取世界各地的多媒体文件，内容包括文字、图形、声音、动画、资料库以及各式各样的软件.WWW的基本结构是采用开放式的客户/服务器结构.1.1.3 HTML简介 HTML（Hyper Text Language,超文本标记语言）是一种用来制作超级

3、文本文档的简单标记语言。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名 HTML 文档结构 除了一些个别的标记外，HTML文档的标记都可嵌套使用。通常由三对标记来构成一个HTML文档的结构。头部信息 文档主体,正文部分 1.2 网页制作工具简介1.2.1网页编辑工具 FrontPage 2000 FrontPage 2000是Microsoft公司推出的网页制作工具,它功能强大,操作方便.记事本 记事本是一个文本编辑的工具,使用记事本环境,可以方便地编写HTML代码和脚本语言程序代码.Dreamweaver MX Dr

4、eamweaver MX是Macromedia公司推出的“所见即所得”的主页制作工具.1.2.2 网页图像与动画制作工具 Photoshop 7.0 Photoshop是Adobe公司专门处理图片和文字的软件.支持在计算机中使用的大部分图片格式。Flash MX Flash是Macromedia 公司推出的动画设计与制作软件.使用Flash能创建漂亮的、可改变尺寸的网页动态插件。Fireworks Fireworks是Macromedia公司的网页图片处理工具.Fireworks与Dreamweaver结合很紧密,只要将Dreamweaver的默认图像编辑器设为Fireworks,那么在Fir

5、eworks里修改的文件将立即在Dreamweaver里更新.Ulead GIF Auimator Ulead GIF Auimator是友立公司出版的动画GIF制作软件,内建的Plugin有许多现成的特效可以立即使用,可将AVI文件转成动画GIF.1.3 网站制作流程网站设计的流程分为三个阶段:1、前期规划 2、网站制作 3、后期维护1.3.1 前期规划 在制作网站之前，首先给网站准确的定位，明确建站目的。网站主题和类型确定后，要规划好网站栏目录结构、网页版面布局.1.3.2 网站制作 Web 页面设计需要遵循以下三条原则：简洁 一致性 对比度1.3.3 后期维护 Web站点建立后，要定期更

6、新和维护Web站点内容，吸引更多的用户访问站点和重复浏览Web站点信息网页制作与设计网页制作与设计第2章 HTML基础 HTML是网页制作的一种规范、一种标准。本章介绍了用HTML制作网页的各种标记符的设置方法，包括网页数据的编辑与格式化、在网页中使用超链接和插入图片、网页中的表格设计以及表格与文字的混排等。教学重点与难点教学重点与难点 文本及版面风格控制 在网页中使用超链接与图片的编排 表格与文字的混排2.1 HTML网页构建 HTML（HyperText Markup Language）超文本标记语言，几乎所有的网页都是以HTML格式书写的。HTML以标识符来标识、排列各对象。标识符本身以

7、“”标识，标识符内的内容称为元素（element），元素代表了标识符的意义，元素是与大小写无关的。用超文本标记语言（HTML）编写的网页文件其实只是很平常、很普通的文本文件。可以用你所熟悉的文字编辑器来编辑它，如Edit、Word、写字板、记事本等，但一定要以纯文本方式保存，浏览器只能识别纯文本格式的文件。标记HTML的开始，在文件结束处要有对应的符号。一个HTML文件应具有下面的结构：/*HTML文件开始*/*文件头开始*/文件头 /*文件头结束*/*文件体开始*/文件体 /*文件体结束*/*HTML文件结束*/2.2 文本及版面风格控制一、创建HTML文档1用工具软件创建HTML文档 用比

8、较完善的工具软件来制作网页，像FronPage2000，Dreamweaver 4等2用编辑工具编写HTML文档 EDIT、记事本、写字板、Word等编辑工具可以用来编辑HTML文档。二、标签格式 在HTML文件中，重要的文字部分都由“标签”括起来，这样文字就成了特别的文字，而标签本身则以“”号标识，标签内的内容称为元素，它代表了标签的意义。如：中南省委宣传部主页 括住的文字称为“内容”，整个标签称为一个“元件”。三、标题格式 HTML提供六种标题格式，其所用的标记符为（标题n，n=16），的字体最大，的字体最小。其属性如下：（1）ALIGN=LEFT，CENTER，RIGHT：文字左对齐（L

9、EFT）、居中（CENTER）或右对齐（RIGHT）。（2）ID：指定标记符的ID选择器。（3）STYLE：指定标记符的样式表命令。（4）CLASS：指定标记符的样式类型。（5）LANG：指定标题文字的语种。（6）DIR：指定标题文字的方向。（7）TITLE：指定标记符的标题。此外，还有一些鼠标操作的属性。四、段落格式1分段与换行符 分段标记符用于将文档划分为段落，标记符为 要将文字强制换行，而不是另起段落，可以用换行标记符BR实现该功能。注意，BR仅单独使用，而非成对出现。2.添加水平线 添加水平线的标记符为（与BR类似，HR也不包括结束标记符。3.段落对齐（1）ALIGN属性 ALIGN属

10、性用于设置段落的对齐方式，其常见取值有4种：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）、JUSTIFY（两端对齐）。（2）DIV标记符（3）CENTER标记符（4）格式的嵌套五、文字格式1字符格式 通过表3.1的标记符设置字符格式2字体大小、字符颜色和字体样式（1）SIZE属性：控制文字的大小（2）COLOR属性：控制文字的颜色（3）FACE属性：指定字体样式六、列表格式1有序列表 定义有序列表需要使用有序列表标记符和列表项（List item）标记符，语法如下：List item1 List item22无序列表 无序列表标记符和列表项标记符3定义列表 定义列表的制作

11、需要3个标记符：定义列表标记符，用来指定定义列表的开头与结尾；定义术语（Definition term）标记符，用来指定第一层数据；定义描述标记符，用来指定第二层数据。标记符必须有结束标记，但和标记符的结束标记可以省略。2.3 在网页中建立超链接一、超链接标记符 创建一个超链接需要使用标记符，A是Anchor的首字母，标记符的最基本属性是HREF，用于指定链接到的文件位置。其他属性见教材。二、创建超链接1指向本地网页的链接：绝对URL2 链接至位于相同文件夹的文件：相对URL方式3链接至位于不同文件夹的文件4指向其他网页的链接，如：我要上网易5页面的特定部分链接6连接至E-mail地址的超链接

12、2.4 在网页中插入图片一、插入图片 用标记符在HTML文件中插入图片，标记符常用的属性见教材。二、图片布局 可以使用HEIGHT、WIDTH、BORDER属性指定图片的高度、宽度以及是否具有框线。1图片的高度、宽度 ，如：图片的边框 还可以用标记符的SOLID属性设置边框颜色，格式。3.图片的对齐方式 图片的对齐是指图片本身在页面中的对齐和图片与文本的对齐。2.5 表格设计一、创建基本表格 可以用标记符创建一个表格，并在它的中间加入标题和需要的数据。表格定义的代码为：具体表格内容 1.表格的标题元素定义了表格的说明。如：在这里输入标题 行里的内容 标题的属性ALIGN决定了标题的对齐方式。T

13、OP是将标题放在表格的顶部，BOTTOM将标题放在表格的下面。2.行、表头和数据 定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开始定义。行、表头和数据定义的代码为：表头 数据 二、表格及文字的对齐与布局1表格在页面中的对齐 利用表格的ALIGN属性，可以将表格显示在页面的左边或右边。如果没有设置这一属性，表格单独显示为页面的一行，在页面的左侧。ALIGN=”LEFT”将表格按左边对齐，而表格的所有文本显示在表格右侧和页面之间的位置。ALIGN=”RIGHT”将表格按右边对齐，文本显示在表格的左侧。2.表格内数据的对齐 ALIGN属性为单元格数据提供水平对齐方式，该属性有LEFT（左

14、对齐）、RIGHT（右对齐）、CENTER（居中）3个值。VALIGN属性定义单元格数据的垂直对齐方式，该属性有TOP（顶部对齐）、BOTTOM（底部对齐）、MIDDLE（中间对齐）3个值。三、设置表格尺寸 设置表格边框尺寸 利用的BORDER属性可以设置表格边框的尺寸，它以指定的粗度来显示表格边框。如：2.设置表格尺寸 利用的WIDTH和HEIGHT属性可以设置表格尺寸。如：3.设置表元间隙 利用标记符的CELLSPACING属性可以设置表元的间隙。如：4.设置表元内部空白 利用标记符中的CELLPDDING属性来，以像素为单位来设置它的值。如：四、设置表格的色彩 设置表格、行或行中单元的相

15、关颜色，可以在、和标记符里使用BGCOLOR、BORDERCOLOR、BORDERCOLORLIGHT、BORDERCOLORDARK等属性。COLOR的值可以是以十六进制表示的颜色，或者是16种颜色（BLACK、WHITE、GREEN、MAROON、OLIVE、MAVY、PURPLE、GRAY、RED、YELLOW、BLUE、TEAL、LIME、AQUA、FUCHSIA和SILVER）中的一种。五、创建跨多行、多列的表元 跨越多列 在或标记符里利用COLSPAN属性，并在其后写上想要跨越的列数。跨越多行 在或标记符里利用ROWSPAN属性，并在其后写上想要跨越的列数。网页制作与设计网页制作与

16、设计第4章 FrontPage 2000网页设计技术 本章从FrontPage的视图入手，先介绍用FrontPage设计网页的基本操作，包括网页的编辑、文本的修饰、列表与表格的使用、运用图象、设置链接、声音处理等，然后介绍FrontPage的高级应用，包括悬停按钮、滚动字幕、计数器与动态效果等，最后介绍表单的使用、样式与框架等。教学重点与难点教学重点与难点 文本的修饰与美化、列表与表格的使用 图象与声音对象的使用 悬停按钮、滚动字幕的设置 使用表单与样式4.1 FrontPage 2000简介 打开FrontPage 2000，我们发现它与其它Office软件的窗口大致相似，主窗口由标题栏、菜

17、单栏、工具栏、视图栏、编辑区和状态栏等组成。1标题栏、菜单栏、工具栏、状态栏 与Office其他组件类似。2视图栏 管理Web站点的工具。3工作区 是管理站点和编辑网页的主要场所。在站点的“网页”视图模式下，网页编辑区的下方有三个编辑按钮它们分别代表三种编辑模式：普通、HTML和预览。用户一般在普通模式下设计网页，如果切换到HTML模式下，将会看到系统自动生成的 HTML程序。4.FrontPage 2000视图 FrontPage 2000提供了六种视图模式，即网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图。它们是用户进行网站设计的有力工具，灵活运用视图模式，将极大地方便设计

18、操作和网站管理。(1)网页视图 网页视图为网页的设计提供了一个工作场所，可以在这个环境下对网页进行设计和修改。(2)文件夹视图 打开一个网页后，系统默认是以文件夹视图来显示的，文件夹视图与Windows中的资源管理器相似，它能够显示当前的Web中的内容是如何组织的。(3)报表视图 报表视图相当于属性检查，它能给出当前网站的有关属性。灵活应用报表视图能够使用户方便地了解网页的属性，便于把握和修改网页。(4)导航视图 导航视图清楚地显示了Web的结构，用户可以从中了解到网站中各部分之间的逻辑关系，它反映了网站的整个脉络。(5)超链接视图 超链接视图以图形化的界面显示了当前网页和其他文件之间的超链接

19、关系，也可以显示网站与网站之间的超链接。(6)任务视图 任务视图用任务列表的方式对任务进行管理，操作人员可以把详细的任务放在任务列表中，这样它就会提醒设计人员需要完成哪些任务，还剩哪些任务没有完成。4.2FrontPage 2000的基本操作一、标题段落 在网页内输入标题时，用户可先设置标题的格式，然后再输入标题的内容，FrontPage 2000提供了6级标题。二、修饰文本 FrontPage提供了“字体”对话框与各种格式工具按钮，可根据需要选择设置，以美化文本。1字体选择 “字体”列表框不但显示字体的名称，同时还给出了字体的实际样式。2字体大小 字符的大小共有6级，其中默认级别是3。3字体

20、颜色 选中文字，用“调色板”为文字设置颜色。4字符效果 字符的一般效果 “加粗”、“倾斜”和“下划线”使用上标和下标5字符间距 控制网页的文本间距、段落间距以及文本相对于基准线的垂直位置。“普通”、“扩充”、“紧缩”三种 “间距大小”以“pt”为单位三、插入水平线 在网页中插入水平线有分隔文本内容的作用。选择“插入”菜单的“Horizontal Line”项，可在网页中插入了一条水平线。可以对水平线进行长短或宽窄的拉伸。还可以对水平线属性进行设置，在水平线上单击鼠标右键，在弹出的菜单中选择“Horizontal Line Properties”弹出属性对话框，然后进行属性设置。3.3 图像一、

21、添加图形 打开“插入”菜单的“图片”子菜单，执行“来自文件”命令，选择图象文件的名称。二、编辑图形 包括设置图象的特殊效果、剪切图象、添加文本。1添加文本 图片工具栏的“文本按钮”就是用来在图象内添加文本信息的。2图象的特殊效果 旋转90度；图象翻转；修正对比度；调整亮度；黑白处理；图象弱化；突出效果；采样与还原；调整图象大小；设置对齐方式；使用折叠文本；设置间隔距离；设置透明背景三、设置背景图形 1设置网页的背景色 打开“格式”菜单，执行其中的“背景”命令，在随后出现的“网页属性”对话框内选择“背景”项。2设置图片为网页背景 打开“格式”菜单，执行其中的“背景”命令，在出现的“网页属性”对话

22、框内选择“背景”项在“格式”栏中选择“背景图片”项。3.4 超链接 链接（Hyperlink，简称Link）是网页中的动态部分。一、链接的建立 点击工具栏中的“Link”按钮，然后在URL文本框内输入要链接的网页的URL。也可以先输入文字，然后拖动鼠标选定要建立超链接的文字，单击鼠标右键，在弹出的对话框中，选择其中的超链接。二、目标 当用鼠标按下一个链接后，网页能够移动到当前网页或网络上的另一个网页上的某一位置，我们称此位置为目标或下锚处（Anchor）。使用目标可以使我们在浏览网页时迅速翻动到想浏览的内容。目标建立好后，就可以在网页内建立链接。3.5 表格一、创建表格 三种方式：菜单、工具栏

23、、手绘二、填充表格 表格的内容可以是文本、图片、音频文件、视频文件或超链接等。三、表格属性1标题属性2对齐格式属性 水平对齐方式有左对齐、右对齐、居中、两端对齐四种方式，垂直对齐方式有顶部对齐、底部对齐、中部和基准对齐四种方式。3边框属性 边框的大小和边框的颜色。4背景属性 包括背景颜色和背景图象两种属性。5间隔属性 表格的间隔由两个因素确定：一是单元格的填充，即单元格之间的间隔距离；一是单元格间距即单元格内部的间隔。6大小属性 包括表格的宽度和高度。有两种单位：一个是像素，另一个是百分比。3.6 使用表单 创建表单的方式有三种：表单模板、表单向导和自定义表单。一、使用表单模板二、使用表单向导

24、 使用表单模板只能创建最简单的几种表单，而用表单向导，就可以随心所欲地创建表单。3.7 使用框架 使用框架能使网页之间的关系更明显，便于了解网页的结构，也可以使设计思路更清晰，使网页便于管理。框架网页创建和设置过程：见教材3.8 动态网页一、使用“横幅广告管理器”这个组件使用一系列图形,让每一幅图形按照预定置显示一段时间,然后一个一个往下切换,直到从头开始,直到所有图形都显示完毕,然后又从头开始。具体步骤见教材一、使用“横幅广告管理器”二、使用“站点计数器”在FrongPage 2000主窗口打开“插入”菜单，执行其中的“组件”子菜单，从“组件”子菜单中选择“站点计数器”命令，出现“站点计数器

25、属性对话框，通过这个对话框，我们可以设置它的属性，包括：字符设置；起始点设置；3.位数设置。三、使用“悬停按钮”悬停是设置在超链接处的按钮。它的效果是：当鼠标点击悬停按钮处的超链接时，悬停按钮的颜色和形状都会发生变化。选择“插入”菜单，执行其中的“组件”子菜单，从“组件”子菜单中选择“悬停按钮”命令，便出现“悬停按钮属性”对话框。在“悬停按钮属性”对话框中，可以设置悬停按钮有关属性：1设置按钮文本 2设置链接对象 3字体设置 4颜色设置 5尺寸设置四、使用“字幕”使用“字幕”是能够使文字能够动态的移动。在FrontPage 主窗口中打开“插入”菜单，执行其中的“活动元素”子菜单，从“组件”子菜

26、单中选择“字幕”命令，在“字幕属性”对话框中设置字幕属性。包括：1文本设置；2方向设置；3速度设置；4表现方式设置；5 对齐方式设置；6大小设置；7重复设置；8背景颜色设置网页制作与设计网页制作与设计第4章 Dreamweaver MX 网页设计技术 Macromedia Dreamweaver MX 是一款专业级的可视化网页设计和网站管理工具，用于对Web站点、Web页和Web应用程序进行设计、编码、开发和维护。Dreamweaver MX是专业网页设计师最钟爱的网页集成工具。教学重点与难点教学重点与难点 站点创建 文本、图像应用 表格与层的应用 样式表 行为与时间线 框架 表单 多媒体对象

27、与模板 4.1 Dreamweaver 简介一、操作界面 Dreamweaver 4由两个部分组成，即页面编辑器和站点管理器。1.页面编辑器 分为五个部分：菜单栏、工具栏、控制菜单栏、工具栏、控制面板、文件工作区、状态栏面板、文件工作区、状态栏。其中控制面板有属性面板、对象面板、样式面板、帮属性面板、对象面板、样式面板、帮助面板助面板等。4.2 用Dreamweaver MX 建立Web站点1、创建站点 首先在磁盘上建立一个文件夹，比如 webdesign，此文件夹将是本网站的本地根目录。2、制作简单的网页 4.3 网页中文本的应用 网页就如同多媒体一样，文字和图形是两种基本的组成元素。当然，

28、网页还可以包含动画、音视频，还可以接受用户的输入，根据用户输入返回特定的信息，这些都是传统的多媒体所不能比拟的。但是，文字才是网页最基本的要素。Dreamweaver MX 提供了丰富的文字处理功能，可以做出漂亮的文字效果。1、文字编辑 Dreamweaver MX 的文字编辑功能与一般字处理软件类似。在网页文档中输入一段文字，然后利用属性面板对文字进行格式设置。在格式选项中设置标题格式，在字体选项中设置文字字体，在大小选项中设置文字字号，在颜色选项中设置文字颜色，利用对齐方式按钮设置文字的对齐方式。对文字不应该使用过于复杂的格式，特别是字体设置，要考虑用户浏览器是否支持，一般来讲就选默认字体

29、比较合适。2、HTML样式 通过设置HTML样式，可以快速一致地将字体格式应用于文 档 中 的 文 本。HTML样式可由单个或多个HTML字体标签属性（如颜色、字体、大小）以及其他格式属性（如粗体或斜体）组成。例如，可以为字体为Arial、大小为 4号的绿色斜体文本创建一个HTML样式。然后选 择 希 望 应 用 该 样 式 的 文 本，从“HTML样式”面板中选择该HTML样式即可为对象文本应用期望的样式。3、CSS样式 层叠样式表(CSS)是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。CSS 样式使可以控

30、制许多仅使用 HTML 无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等等）。通过使用CSS样式和以像素为单位设置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文本周围的浮动文本等等。4.4 网页中图像的应用 网页中图像是不可或缺的元素。精心设计、与文字配合协调的图像会使得网页图文并茂，更富生机和吸引力。在 Macromedia Dreamweaver MX 中，可以在“设计”视图或“代码”视图中将图像插入文档。图形文件格式有很多种，在Web页中

31、通常使用的只有三种，即GIF、JPEG和PNG。1、插入图像2、设置图像大小 3、设置图像对齐方 4、图像地图 5、用外部图像编辑器 4.5 表格和层 表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。是网页的一个非常重要的元素，我们往往借助表格实现网页的精细排版。表格由一行或多行组成；每行又由一个或多个列组成。层是一种HTML页面元素。可以将它定位在页面上的任意位置。层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。因此，层也是一种非常有用的定位工具。1、创建表格 2、设置表格属性 3、设置单元格、行和列属性 4、对表格进行排序 5、表格的嵌套 6、

32、创建层 4.6 行为和时间线 行为和时间线可以用来实现动态HTMl效果。这里所讲的动态效果是指利用客户端脚本程序实现的动态效果，而非利用服务器端技术实现的动态网页。1、行为行为是事件和由该事件触发的动作的组合。事件是浏览器生成的消息，指示页面的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个 onMouseOver 事件；然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的 JavaScript 代码。系统为不同的页元素定义了不同的事件。动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播

33、放声音或停止Shockwave影片。2、时间线 动态HTML（即 DHTML）是指HTML与特定的脚本语言比如JavaScript的组合，可以使用该脚本语言更改 HTML 元素的样式或定位属性。在Dreamweaver中，时间线（时间轴）使用动态 HTML 来更改层和图像在一段时间内的属性。使用时间轴可创建不需要任何ActiveX控件、插件或Java Applet（但需要JavaScript）的动画。利用时间轴，可以更改层的位置、大小、可见性和层叠顺序。图 时间轴面板 4.7 框架和表单 框架主要用于将Web页面分割为多个HTML页面。例如，一个Web页面由三个框架组成。边上那个较窄的框架包含

34、了一个滚动菜单；顶部的那个框架包含了Web站点的徽标和标题；而占据页面其他空间的大的那个框架包含主要内容。这些框架每个都是一个独立的HTML页面。他们通过框架集集合在一起。框架最常见的用途就是用于导航。一个Web页面可以使用一个框架来包含导航菜单，另一个框架包含页面内容。1、创建框架网页 2、链接框架内容3、表单对象 4、创建表单 4.8 其它操作 1、添加多媒体对象 Macromedia Dreamweaver可以迅速、方便地向Web 站点添加声音和影片，例如 Macromedia Flash 和 Shockwave 影片、Java applets、QuickTime、Active X 和音

35、频文件。还可以在 Dreamweaver 自身内插入 Flash 按钮和文本对象。使用“插入”中的“媒体”工具或“插入”菜单的“媒体”类别选择要在文档中插入的对象类型。Flash 影片和对象、Shockwave、Java applets 和 ActiveX 具有定义的按钮。2、模板 Dreamweaver 模板是一种特殊类型的文档。模板是创造网页的模型，用于快速创建或更新具有相似布局的页面。模板可以分为“固定区域”和“可编辑区域”，那些要出现在基于模板创建的多个文档中的信息被设计在“固定区域”。模板最强大的用途之一在于一次更新多个页面。从模板创建的文档与该模板保持连接状态，可以通过修改模板并立

36、即更新所有基于该模板的文档中的设计。可以从现有文档创建模板，或者从新建的空文档创建模板。Dreamweaver 模板文件的扩展名.dwt。模板被保存在站点的本地根文件夹中的一个特殊文件夹（Templates）中。4.9 Dreamweaver MX 网站开发实例 1、规划阶段站点窗口的使用技巧 1）快速添加站点导航。2）快速修改文件标题（Title）。3）快速生成站点地图。2、布局阶段-页面的技巧 1）使用辅助网格。2）利用表格排版页面技巧。3）表格和层互转。4）同时更新多个框架页面。3、内容组织阶段内容组织的技巧 1）快速标签编辑。2）使用拖动方式增加链接。3）加入背景声音。4、美化页面 1

37、）快速创建配色方案。2）CSS链接样式技巧。5、提高设计效率 1）清理Word文件技巧。2）快速替换文件标题。3）设置默认文档格式。6、后期维护 1）链接检测。2）快速检测无用文件。3）快速生成站点报告(Reports)。4.10本章小结 Dreamweaver MX是专业化的网页内容集成工具，既适合于开发静态网页，也适合开发动态网页，其站点管理功能已相当完善。本章中介绍了利用Dreamweaver MX 开发一个网站的基本过程，介绍了组织静态网页内容的有关技术，介绍了利用表格、层、模板进行页面布局的技术；还简单介绍了客户端动态交互功能的实现，利用时间轴制作简单动画的技术等等。网页制作与设计网

38、页制作与设计第6章 Fireworks MX 图形处理基础 使用FireworksMX 2004可以创建和编辑位图、矢量图形和动画，还可以实现网页设计中常 见的交互效果，比如翻转图像，下拉菜单等，设计完成以后，可以将它输为HTML 和JavaScript代码的网页文件，还能输出为 可以在Photoshop、Ilstrator和Flash等软件 中编辑的格式。教学重点与难点教学重点与难点 位图与矢量图 图层 切片 特效文字 菜单 元件 动画 6.1 FireworksMX简介1、位图与矢量图 2、Fireworks MX的系统需求 3、Fireworks MX 基本功能 Fireworks 是一

39、个创建、编辑和优化网页图形功能应用程序。可以创建和编辑位图和矢量图像、设计网页效果、修剪和优化图形。绘制矢量对象、位图对象或文本后，可以使用各种工具、效果、命令和技术来增强和完善图形。可以使用“按钮编辑器”中的 fireworks 工具创建交互式导航按钮。可以使用 Fireworks 工具编辑导入的图形。可以导入和编辑 JPEG、GIF、PNG、PSD 和其它许多文件格式。导入图形之后，可以对其进行修剪、润饰、蒙版处理、调整其颜色和色调等处理。切片和热点是指定网页图形中交互区域的网页对象。6.2 Fireworks MX 工作界面标题栏菜单栏工具栏工具箱位图工具面板抓取器属性检查器面板组面板标

40、题面板菜单文档窗口6.3 Fireworks MX 交互按钮的制作 按钮是网页的导航元素，几乎可以将任何图形或文本对象制作成按钮。按钮最多有四种不同的状态，每种状态表示该按钮在响应不同鼠标事件时的一种外观样式，以便用户区分不同状态。“释放”状态、“滑过”状态是、“按下”状态、“按下时滑过”状态。利用按钮编辑器，可以创建所有这些不同的按钮状态以及用来触发按钮动作的区域，可以为按钮设置超级链接，轻松便捷地创建交互式按钮。6.4 制作特效文字Macromedia Fireworks MX 提供了丰富的文字处理功能，可以用不同的字体和字号创建文字，并且可调整其字距、间距、颜色、字顶距和基线等。可以编辑

41、垂直文字、变形文字、附加到路径的文字以及转换为路径和图像的文字。将 Fireworks 文字编辑功能同大量的笔触、填充、效果以及样式相结合，能够使文字成为图形设计中一个生动的元素。可以导入文字，在导入文字的同时保留丰富的文字格式属性。在导入文字时可一为缺少字体的文字选择一种替换字体，或者将文字作为静态图像导入。1、制作特效文字 2、运用文字路径 6.5 Fireworks MX 图像处理 在Fireworks MX 中可以方便的绘制各种矢量图形，也可以对位图和适量图进行复杂的处理。Fireworks MX 把位图、矢量图、文本组织成位于层上的单独对象。对象的应用提高了编辑处理的灵活性。1、绘制

42、形状图形2、绘制路径图形3、图形的填充与描边 4、编辑对象的选择5、图层的运用 6、热点和切片 6.6 菜单、元件、标题动画的制作 1、菜单随着网站页面及其功能的复杂化，越来越多的网站使用下拉菜单进行导航。弹出菜单是为响应指针滑过触发网页对象（如切片或热点）或单击这些对象的时在浏览器中显示的菜单。弹出菜单项可以附加 URL 链接以便于导航。2、元件 元件是可重用的对象。Fireworks 提供三种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的独特特性。实例是 Fireworks 元件在图形文档中的实例。当对元件对象（原始对象）进行编辑时，实例（副本）会自动更改以反映对元件

43、所做的修改。元件对于创建按钮以及通过多个帧中的对象制作动画很有帮助。3、动画动画图形可以为网站增加一种活泼生动、复杂多变的外观。例如，可以在徽标淡入淡出的同时让公司的吉祥物在网页上来回跳动。在 Fireworks 中通过向称为动画元件的对象分配属性来创建动画。一个元件的动画被分解成多个帧，帧中包含组成每一步动画的图像和对象。可以对元件应用不同的设置以逐渐改变连续帧的内容。可以让一个元件在画布上来回移动、淡入或淡出、变大或变小或者旋转。因为单个文件中可以有多个元件，这样就可以创建一个不同类型的动作同时发生的复杂动画。当按顺序播放所有帧时，就成了动画。6.7本章小节 本章通过一些案例介绍了Fire

44、works MX的简单应用，其中主要介绍了简单的文字特效、按钮、元件、弹出菜单、动画的制作，对图层和混合模式的运用也作了简单的介绍。Fireworks MX是一款功能强大的WEB图形处理和设计工具，与Macromedia 的Dreamweaver、Flsah能够紧密配合，制作出令人满意的网页效果。网页制作与设计网页制作与设计第7章 JavaScript在网页中的应用 JavaScript是一种基于对象的脚本语言，可嵌入到HTML网页中。它除了内置了一些常用对象，还可以使用浏览器提供的对象，甚至可以创建新对象。通过采用事件驱动机制，使其能在客户端（浏览器）与用户实现大量的交互、还能创建出惊人的特

45、效。教学重点与难点教学重点与难点 事件驱动机制 对象的概念和使用 JavaScript内置对象 浏览器对象7.1 JavaScript 简介 JavaScript是一种简洁的、面向对象的、跨平台的描述语言，JavaScript和Java很类似，但并不相同。Java是一种比JavaScript复杂许多的语言，由SUN公司开发；而JavaScript则是简单而小巧的语言，由Netscape公司推出。一、JavaScript的特点 JavaScript是一种基于对象(Object Based)和事件驱动(Event Driven)并具有安全性能的脚本语言。1.基于对象 2.简单性 3.安全性 4.动

46、态性 5.跨平台二、JavaScrip运行和编辑环境三、在Html中嵌入JavaScript脚本 在Html中使用JavaScript时，应将JavaScript程序放在标记间。1.在Html中加入已有的JavaScript脚本文件2.考虑不支持JavaScript的浏览器 可以把JavaScript源程序放在HTML的注释标记内，从而使不支持JavaScript的浏览器把它当作HTML的注释而忽略JavaScript源程序。7.2 JavaScript语言结构一、数据和运算符 1数据：有六种数据类型 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变

47、量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。2运算符 （1）算术运算符 （2）比较运算符 （3）逻辑运算符 （4）字符串运算符 （5）位运算符 （6）赋值运算符二、语句和程序控制 1一般语句 （1）数据声明语句 var 变量名=初始值 （2）赋值语句 由赋值表达式组成的语句。（3）注释语句 /：单行注释，从“/”开始到本行行尾都为注释；/*.*/：多行注释，从“/*”开始到“*/”结束为注释。2选择结构 （1）if.else语句 if(条件)执行分支语句1 else 执行分支语句2 （2）switch语句 switch(expression)case label1:语句串1

48、；case label2:语句串2；case label3:语句串3；.default:语句串3；3循环结构 （1）for语句 for(循环变量初始化;循环变量结束条件;循环变量自增/减变化)循环体 （2）while语句 while(循环条件)循环体 （3）do-while语句 do 循环体 while(循环条件);（4）break语句 break语句结束当前的各种循环，并执行循环语句的下一条语句。（5）continue语句：continue语句结束当前的循环，跳过本次循环并马上开始下一个循环。4函数定义语句：function，return function 函数名(参数列表)函数功能的实现部

49、分 return 表达式 /return语句将表达式的值返回主调程序 5书写语句的注意事项（1）多个语句可以放在同一行，只要每个语句之间用分号分开即可。（2）分号是JavaScript的分行符，但不同行之间也可不用分号。（3）较长的JavaScript语句可以由多行文本组成，不需要续行符。（4）语句前可加标号语句确定执行程序的转移点。7.3 JavaScript的事件驱动一、事件 任何能引起JavaScript代码运行的操作，都称为事件(event)。事件是浏览器响应用户交互操作的一种机制。事件大多数是由WEB用户触发的。普通的事件包括：页面元素上的单击(单选按钮、submit按钮、链接等)。

50、二、事件类型 Click Focus Blur Change MouseOver Select Submit三、如何监测事件 具体形式为：onEvent“JavaScript program”四、如何调用事件处理器1函数调用 这是一个链接 2直接代码：通过直接在双引号间书写JavaScript代码来实现事件处理器。7.4 JavaScript的对象 把常用的对象封装起来提供给用户，用户可以使用JavaScript的内置对象、浏览器提供的对象、服务器提供的对象，还可以创建自己的对象扩展JavaScript的功能。一、对象的概念 1对象的基本结构 由属性(properties)和方法(method