动画制作三章-网页中的基本元素课件

第三章网页中的基本元素第三章网页中的基本元素本章提纲本章内容:第一节插入文本与列表第二节插入图像第三节插入其它基本元素第四节超级链接第五节综合实例本章难点、重点:文本、图像和其它基本元素的插入超级链接的建立本章提纲本章内容:第一节文本与列表1、页面中文本编辑在页面中插入文本的方法：输入、复制、导入文本的分段:按Enter（HTML标记<P>……</P）文本的换行:Shift+Enter（HTML标记<br>）一、文本小技巧：1、空格的输入2、换行和段落的输入

3、使用插入特殊字符面板第一节文本与列表1、页面中文本编辑一、文本小技巧：动画制作三章-网页中的基本元素课件动画制作三章-网页中的基本元素课件

2、文本属性(文本属性即文字的大小、字形、颜色等格式)(1)基本样式设置[属性面板]

格式：段落标题1—标题6（从大到小）预先格式化

字体：字体的编辑字符的颜色、大小、加粗倾斜等(2)段落属性设置对齐方式缩进与凸出2、文本属性(文本属性即文字的大小、字形、颜色等格式)

列表：将具有先后顺序或相似特性的几行文字进行对齐排列，而且在左侧添加编号或符号。二、列表的使用列表：将具有先后顺序或相似特性的几行文字进行对齐排列，而无序列表无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。无序列表无序列表又称为项目列表，是一系列无顺序级有序列表有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，其中前导字符可以是阿拉伯数字、英文字母或罗马数字等。有序列表有序列表又称为编号列表，是有一定排列顺创建嵌套列表

嵌套列表是包含在其它列表中的列表。创建嵌套列表嵌套列表是包含在其它列表中的列表。为现有文本创建列表

除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。1、创建列表

（1）将光标停在要插入列表的地方，单击属性面板“编号列表”或“项目列表”。（2）选中要成为列表的所有段落，单击按钮即可；取消方法相同。为现有文本创建列表除了先创建列表项再输入文本外，还2、在结束列表的位置，连续输入两次回车或再次单击该按钮。3、列表嵌套选中要缩进的项目或光标移动到要缩进的某一项列表中，单击“文本缩进”按钮。4、更改列表的属性(属性面板中的“列表项目”)光标移到要修改列表属性的任一项中，点击“列表属性”按钮，修改。2、在结束列表的位置，连续输入两次回车或再次标尺标尺分为水平标尺和垂直标尺，分别显示在Dreamweaver文档编辑区的上方和左侧。标尺的单位包括像素、厘米和英寸，在默认状态下使用像素为单位。标尺标尺分为水平标尺和垂直标尺，分别显示网格网格与标尺都是定位工具，但在网页布局中使用网格更方便。文档编辑区中显示了网格后，就可以对网页元素进行准确定位。网格网格与标尺都是定位工具，但在网页布局中第二节图像二、插入图片对象三、设置对象属性1、选中图像2、在属性面板中设置各属性名称：脚本引用中所使用的名称。宽与高：图像的大小。源文件：图像文件的路径。一、图像文件的类型a.拖动图像上的控制点。

b.或在属性面板上输入图像的尺寸。c.恢复图像的原始尺寸。第二节图像二、插入图片对象一、图像文件的类型a.拖动图链接：单击图像打开的网页。对齐：图像在当前行的对齐方式。替代：在浏览器中当鼠标指向图片时，打开说明框的内容。垂直边距与水平边距：图像四周空白宽度。低品质源：主图像下载前显示的图像。边框制作图像热点区链接：

a.使用热点工具在图像上画热点区。

b.选中热点区，在属性面板中设置链接。链接：单击图像打开的网页。制作图像热点区链接：

a.使用热点图像大小处理当用户在网页中添加一幅大尺寸的图像时，即使用【宽】和【高】文本框或拖动方式将图像调小，因图像的容量并未改变，仍然会影响下载时间。因此，在加入图像之前，最好用Fireworks或Photoshop之类图像处理软件将图像尺寸设置好。地图名称和热点工具：一般在指向图像某一点时设置超级链接时用。重设大小：还原图像到原始大小。编辑：对图像进行编辑操作类，将CSS中所建立的样式应用到图像中。图像占位符：在网页中给图片预留位置。图像大小处理当用户在网页中添加一幅大尺寸的图像时，即使用【宽文本说明

在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。文本说明在选取图像后的属性面板的“替换”下拉列图像与文本的对齐

选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。图像与文本的对齐选取图像后，在属性面板的“对齐”下拉列图像边距

选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其它网页元素之间的距离。图像边距选取图像在属性面板的“垂直边距”和“水图像边框

选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。图像边框选取图像后，在属性面板的“边框”文本框占位符插入

制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用图像占位符来代替图像的方式插入到文档中。将图像确定后双击占位符，在打开的对话框中设置后插入即可。占位符插入制作网页时还未选定需插入的图像，但确定GIF格式GIF全称为“GraphicsInterchangeFormat”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。GIF格式GIF全称为“GraphicsInterchJPEG格式

JPEG全称为“JointPhotographicExpertsGroup”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。JPEG格式JPEG全称为“JointPhotogrPNG格式

PNG全称为“PortableNetworkGraphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。PNG格式PNG全称为“PortableNetwor图像插入新建空白HTML文档。打开“选择图像源”对话框：菜单命令单击按钮拖动图像按钮选择图像的路径名，单击“确定”按钮。在询问“是否”将图片复制到当前站点文件夹中时单击“是”按钮。设置图片文件保存路径。注意：图像插入新建空白HTML文档。1、如果网页中插入的对象不在当前站点中，在IE浏览器中可能不会正常显示,图像文件名最好用英文。2、如果要将一幅图片作为背景可在网页中插入表格,然后选中表格的单元格,在属性面板中单击“背景图像”后“文件夹”按钮，在对话框中进行选择。通过“修改”菜单中“页面属性”对话框在“背景图像”浏览图标设置。1、如果网页中插入的对象不在当前站点中，在第三节其它基本元素水平线：用来分隔网页标题和正文，可以是一条也可以是多条。在属性面板中可以设置水平线的格式。二、鼠标经过图像三、导航条四、Flash动画一、水平线第三节其它基本元素水平线：用来分隔网页标题和正文，可以1、日期对象的作用在网页中插入当前日期2、步骤：打开“插入日期对话框”选择日期时间格式“确定”五、日期对象1、日期对象的作用五、日期对象添加水平线

在文档编辑区将插入点定位到所需位置，选择插入/HTML/水平线菜单命令或单击“插入”栏中“HTML”选项卡,在其中单击按钮即可添加水平线。添加水平线在文档编辑区将插入点定位到所需位置，选择修改水平线

初始绘制的水平线的格式往往不能满足实际需要，此时可通过属性面板对其进行修改。修改水平线初始绘制的水平线的格式往往不能满足实际鼠标经过图像1、特点:当用户将鼠标移动到图像上时,图像变成另一幅图像,鼠标移开时恢复原状。2、插入“鼠标经过图像”步骤准备两幅图像打开插入“鼠标经过图像”对话框：菜单法：“图像”/“鼠标经过图像”。按钮法：“常用”选项卡“鼠标经过图像”按钮设置对话框中“原始图像”和“鼠标经过图像”。鼠标经过图像1、特点:预载“鼠标经过图像”：图像预先载入内存。替换文本：指向图像时的提示文字。前往的URL:单击时的超级连接。预览预载“鼠标经过图像”：图像预先载入内存。导航条一、导航条的作用：打开所连接的网页。二、创建步骤：1、准备图像集：一般有4幅图片一般状态鼠标经过鼠标按下按下鼠标经过2、打开插入导航条对话框菜单法按钮法起导航作用，是以图像做链接的。导航条一、导航条的作用：打开所连接的网页。起导航作用，是以图3、设置导航条4、修改导航条：“修改”菜单中的导航条命令。

注意：

一个网页只允许有一组导航条。在“插入导航条”对话框中，单击加号按钮，继续添加。单击向上和向下按钮，调节导航按钮间的顺序。3、设置导航条在“插入导航条”对话框中，单击加号按钮，继续添Flash动画一、步骤1、打开“选择文件”对话框菜单法按钮法2、选择动画文件3、浏览Flash文件类型：.fla、.swf、.swt、.exe网页中Flash文件类型：.swf、.swt二、设置动画对象的属性（属性面板）

1、动画编辑工具

动画分为Flash制作的动画和Fireworks制作的Gif动画。2、动画插入方法

a.

Gif动画和静态的图像的插入方法相同。

b.

Flash制作的动画，可通过插入面板的“插入Flash”按钮，格式为：.swf。Flash动画一、步骤1、动画编辑工具

动画分为Flas第四节超级链接1、概念超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体（源端点）和链接目标（目标端点）。2、超级链接的载体和种类一、超级链接超级链接是因特网最伟大特性之一，可以实现在不同的URL之间跳转。源锚可以是一段文本、一幅图像、图像的热区等；

目标锚可以是一个网页、一幅图像、一段声音、一段程序、网页某一位置等。第四节超级链接1、概念一、超级链接超级链接是因特网3、绝对路径与相对路径二、创建通用链接三、创建热点链接四、创建锚记链接五、创建E-mail链接六、虚拟链接及脚本链接3、绝对路径与相对路径超级链接的载体和种类1、链接的载体文字、图片、图片热区、鼠标经过图像和导航条等。2、超级链接种类

按链接的目标分为：内部链接：与本站点中其它文档链接。外部链接：与本站点外其它文档链接。E-mail链接：通过Outlook打开E-mail窗口。锚记链接：与本网页或其它网页的特定位置链接。虚拟链接：单击链接不会跳转到其它任何地方，只使页面产生一些变化。按链接载体形式超级链接可以分为：文字链接、图像链接、图像的热区链接、轮转图链接和导航条链接等。外部链接用绝对地址表示；内部链接用相对地址表示。超级链接的载体和种类1、链接的载体按链接载体形式超级链接绝对路径和相对路径绝对路径（特点：与链接的源端点无关。）提供完整的URL地址，链接到其它服务器的网页时采用。路径包括所使用的协议、文档所在文件夹的上级各文件夹和文档名称。如：/buy/index.html

File:///C|/WINDOWS/1STBOOT.BMP相对路径URL地址表述源端点到目标端点之间的相对位置，本地连接时常采用此种方法。源端点与目标端点在同一个目录下：文档名如：flower.htm优点：只要目标文件的地址不变，无论源文档在站点中如何移动，都可以正常跳转。

缺点：不利于测试。优点：便于网站移植，如果站点的结构和文档的相对位置不变，链接就不会出错。

缺点：若源/目标端点相对位置发生变化，链接就会失效。绝对路径和相对路径绝对路径（特点：与链接的源端点无关。）优目标文档在当前目录的子目录中：子目录名/文档名如：new/image/d1.gif目标文档在当前目录之外其它目录中：../文档名，../../目录名/文档名如：../index.htm，../../myself/myweb.htm根目录相对路径从站点文件夹到文档的路径。（实际很少使用）目标文档在当前目录的子目录中：创建通用链接1、选择链接载体2、创建链接方法在属性面板的文本框中输入路径或完整URL单击“链接”文本框右侧“浏览文件”按钮，选择链接目标文件。将“指向文件”图标拖到文件面板中目标文件上。3、选择目标文档打开的位置_blank：用新窗口显示链接网页或文档。_self：在本窗口中打开链接网页或文档。_parent：在父窗口中打开链接网页或文档。（主要用于框架结构的页面。）_top：将链接文件载入整个浏览器窗口。（主要用于框架结构的页面。）创建通用链接1、选择链接载体创建热点链接1、热点链接热点链接是指将一张图像分成若干个区域，每个区域建立不同链接。2、创建步骤选择图像。设立热点区域矩形热点工具椭圆热点工具多边形热点工具选择热点，建立链接。创建热点链接1、热点链接创建锚记链接1、锚记

在网页中指定位置处的像“锚”一样的记号，用来作为链接目标的一个标记。2、锚记链接的创建

（1）创建锚记定位光标打开命名锚记对话框菜单法：“插入”/“命名锚记”按钮法：“插入面板”中“常用”选项卡“命名锚记”按钮创建锚记链接1、锚记在对话框中输入锚记名称，“确定”。（2）锚记和目标在一个网页中的链接选择链接目标，采用以下方法：在属性面板的链接文本框中输入：#锚记名称将“指向文件”图标拖至锚记。【Shift】+拖动鼠标。（3）锚记和目标不在一个网页的链接在文本框中输入：文件的路径#锚记名在对话框中输入锚记名称，“确定”。创建E-mail链接1、E-mail链接当浏览者单击该链接时，系统将自动启动计算机中的邮件发送程序（OutlookExpress），并将链接设置的E-mail地址放在“收件人”一栏中2、E-mail链接的创建

方法一：以文字作为链接载体选择链接的位置或文本。打开电子邮件链接对话框。在对话框中输入文本，如果选择了文本就不再输入。创建E-mail链接1、E-mail链接在对话框中输入E-mail地址，“确定”。

方法二：以文本、图片、鼠标经过对象或导航条等为链接载体选择链接载体。在“属性”面板中的“链接”文本框中输入mailto：邮件地址。在对话框中输入E-mail地址，“确定”。虚拟链接和脚本链接一、虚拟链接1、虚拟链接

未指定链接目标的空链接。2、虚拟链接方法选择对象，在“链接”文本框中输入“#”。3、虚拟链接作用可以为虚拟链接附加行为（播放声音、弹出信息、交换图片等），当激活链接载体时，将会按照预先设置的行为进行操作。虚拟链接和脚本链接一、虚拟链接二、脚本链接1、脚本链接执行JavaScript代码或调用JavaScript函数。2、链接方法选择对象，在“链接”文本框中输入代码或函数，如：javascript:alert(‘要显示的字符串’)