学习目标 掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局.

Presentation on theme: "学习目标 掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局."— Presentation transcript:

1 学习目标 掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局

2 本章内容 2.1 文本和页面属性 2.2 图像的插入和设置 2.3 超链接的设置方法 2.4 翻转图 2.5 Flash对象

3 2.1 文本和页面属性 2.1.1 案例制作：网页“藏獒鉴赏”部分正文
通过本案例的操作，你将学会： 如何插入文本和设置文本的属性、 如何插入网页背景图像和设置项目列表。

4 2.1 文本和页面属性 2.1.2 新知解析 1. 文本的属性面板 在文档窗口输入一段文字，此时属性面板变为文本属性面板，可通过文本属性面板对文本进行设定。

5 2.1 文本和页面属性 2. 插入空格 在Dreamweaver中，无论按键盘上的空格键多少次，只能添加一个空格。若要添加多个空格，一般采用按住Ctrl+Shift +空格键的方法，每按一次，添加一个空格。

6 2.1 文本和页面属性 3. 页面属性的设置 当我们需要对网页的整体外观进行设置时，可通过“页面属性”命令进行设置。在属性面板中单击“页面属性”按钮，或单击菜单“修改”→“页面属性”命令，出现页面属性对话框。在“外观”选项下可以整体上对网页中采用默认方式输入的文字的字体、大小、颜色、页面背景、边距等进行设定。

7 2.1 文本和页面属性 4. 特殊字符 当在网页中需输入一些特殊字符时，可单击菜单“插入”→“HTML” →“特殊字符”→选择相应选项。

8 2.1 文本和页面属性 5. 水平线 水平线主要用于分隔文档内容，使文档结构清晰，层次分明。单击菜单“插入”→“HTML”→“水平线”命令，或单击插入面板组中“HTML”选项下的 按钮可插入水平线，此时属性面板变为水平线属性面板，可对水平线的宽、高、对齐方式、阴影等进行设置。

9 2.1 文本和页面属性 2.1.3 技巧提示 1. 水平线颜色的修改 2. 换行与回车键的不同

10 2.1 文本和页面属性 2.1.4 实战演练：网页“藏獒鉴赏”的制作
通过本案例的操作，你将学会：如何插入文本和设置文本的属性、如何插入网页背景图像、如何插入水平线、日期、特殊符号并进行设置。

11 2.2 图像的插入和设置 2.2.1 案例制作：网页“球星---亨利”
通过本案例的操作，你将学会：如何插入图像和设置图像属性、如何设置网页背景颜色、如何设置图像和文本的对齐方式和进行文本换行。

12 2.2 图像的插入和设置 2.2.2 新知解析 1. 常见的图像类型和格式
目前已知的图像格式有几十种，但能在浏览器中显示的图像只有GIF、JPEG和PNG三种，而最常用的是GIF和JPEG两种。 2. 插入图像 在插入图像前，应将图像与网页文件保存到同一文件夹。在网页中插入图像的方法如下。 将光标移到要插入图片的地方，选择“插入”→“图像”命令，打开“选择图像源文件”对话框。选中需要插入的图像文件，单击“确定”按钮，打开“图像标签辅助功能属性”对话框。输入所需的信息后，单击“确定”按钮，此时在文档窗口中将显示出该图像。

13 2.2 图像的插入和设置 3. 图像属性面板 在网页中用鼠标单击图像，则图像处于选中状态，四周出现控制柄，拖动柄可调整图像大小，同时属性面板显示出与图像有关的属性设置。

14 2.2 图像的插入和设置 宽和高：浏览器中为图像保留的宽度和高度，默认单位为像素。 源文件：指定图像的路径。 链接：指定图像的超链接。
替换：为图像添加注释。 编辑：单击其右侧的优化、裁剪、重新取样、亮度/对比度、锐化等按 钮对图像进行处理，也可以单击按钮打开指定的图像处理软件重新编辑 图像。 垂直边距：指定图像在垂直方向上与文本或其他网页元素的间距。 水平边距：指定图像在水平-方向上与文本或其他网页元素的间距。 目标：指定链接时的目标窗口或框架。 边框：指定图像边框的宽度 图像所处的段落在文档中的对齐方式。 对齐：指定当前图像与旁边的文本的混排方式。 低解析度源：指定当前图像的低分辨率副本的路径。 地图：用于制作图像热点链接。

15 2.2 图像的插入和设置 2.2.3 技巧提示 1. 图像“属性”中的“对齐”与段落对齐方式的不同 2. 网页元素的定位

16 2.2 图像的插入和设置 2.2.4 实战演练：网页“球星风采”的制作
通过本案例的操作，你将学会：如何插入图像和设置图像属性、如何借助表格进行文本和图像的定位。

17 2.3 超链接的设置方法 2.3.1案例制作：网站“诗词大观”首页
通过本案例的操作，你将学会：如何插入文本、图像和设置它们的属性、如何插入表格并借助表格进行文本和图像的定位、如何建立锚记链接、电子邮件链接、绝对超链接、空连接。

18 2.3 超链接的设置方法 2.3.2 新知解析 1. 超链接的表现形式 （1）网页之间的超连接 （2）网页内的超链接 （3）E-mail链接
（4）空链接和脚本链接 （5）图像热点链接

19 2.3 超链接的设置方法 （1）网页之间的超连接 要在网页中创建超链接，首先选中要创建链接的对象（文本、图像或其他页面对象），然后可以通过以下3种方法创建超链接。 在属性面板的“链接”文本框中输入目标对象的URL或路径。 拖动“链接”文本框后面的“指向文件”图标到“文件”面板中的目标 对象上（默认使用相对路径）。 单击“链接”文本框后面的“浏览文件”按钮，在打开的“选择文件” 对话框中选择链接对象，然后单击“确定”按钮。

20 2.3 超链接的设置方法 设置完链接后，在属性面板的“目标”下拉列表框也变为可用状态。“目标”下拉列表框中各选项的含义如下。
_parent：在含有该链接的框架的父框架集或父窗口中打开目标文件。 _self：在该链接所在的窗口或同一框架中打开目标文件，此为默认选项。 _top：在整个浏览器窗口中打开目标文件，因而会删除所有框架。 _blank：在一个新的浏览器窗口中打开目标文件。

21 2.3 超链接的设置方法 （2）网页内的超链接 创建网页内超链接是通过使用“命名锚记”来完成的。 “命名锚记链接”一般用在单个网页篇幅较长，浏览者需要翻屏查看的情况下。 制作锚记链接，首先将光标移到需要插入锚点的位置，单击菜单“插入”→“命名锚记”命令，在弹出的对话框中输入锚记名称，单击“确定”按钮，于是就添加了命名锚记 。然后再创建跳转到这些命名锚记的超链接。建立锚记链接的格式是“#锚记名称”。

22 2.3 超链接的设置方法 （3） 链接 链接是一种特殊的链接，单击这种链接将打开一个空白通讯窗口，允许用户创建电子邮件，并发送到指定的邮箱地址。

23 2.3 超链接的设置方法 （4）空链接和脚本链接 空链接指的是一个无指向的链接，只要在属性面板的“链接”文本框中输入“#”就可以了。空链接一般为网页上的对象或文本附加行为。此外，空链接还有一个作用，当网页太长时，在底部设一个空链接，可以点击它直接回到网页顶部。 脚本链接是指执行JavaScript代码或调用JavaScript函数。要创建脚本链接，只需在选定文字或图像后，在属性面板的“链接”文本框中输入“javascript:”，并且跟一些JavaScript代码或函数调用即可。例如，可输入javascript:alert(‘Hello!’)，这是当单击该链接时，系统将弹出一个提示框，其中将显示上面输入的文字Hello!

24 2.3 超链接的设置方法 （5）图像热点链接 为图像创建链接时，如果图像比较大、要创建链接的区域不规则，或是只给图像的部分区域创建链接时，可以将图像选中，利用属性面板中的矩形热点工具、椭圆热点工具和多边形热点工具在图像上绘制热点区域，利用指针热点工具选中热区，在属性面板的“链接”栏中指定链接文件，于是就建立了热点链接。

25 2.3 超链接的设置方法 2. 页面超链接状态的设定 单击菜单“修改”→“页面属性”或单击文本属性面板中的“页面属性”按钮，打开页面属性对话框，在分类下单击“链接”选项，其中“链接颜色”即为正常显示的超链接文字颜色，“变换图像链接”为鼠标移到超链接文字上时文字显示颜色，“活动链接”为鼠标移到链接文字上按下鼠标并未松开时文字显示颜色。“已访问链接”为已访问过的超链接文字的显示颜色。还可以设置所有超链接文字是否带有下划线。

26 2.3 超链接的设置方法 2.3.3 技巧提示 绝对超链接和相对超链接

27 2.3 超链接的设置方法 2.3.4 实战演练：网站“诗词大观”的制作
通过本案例的操作，你将学会：如何插入表格及编辑调整单元格、如何在表格中插入文本和图像、如何建立网页间超链接、电子邮件链接。

28 2.4 翻转图 2.4.1 案例制作：网站“美联”导航部分 通过本案例的操作，你将学会：如何插入表格及编辑调整单元格、
如何在表格中插入翻转图像。

29 2.4 翻转图 2.4.2 新知解析 翻转图是最简单的一种动态网页，当光标指向图像时会变为另一幅图像，光标移出后又变回原先的图像。
要制作翻转图，只需单击菜单“插入”→“图像对象”→“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框，如图2-33所示，各选项的含义如下。 “图像名称”：输入图像名称。 “原始图像”：单击“浏览”按钮可以选择初始图像。 “鼠标经过图像”：单击“浏览”按钮可以选择替换的图像。 “预载鼠标经过图像”复选框：选中该项可以使浏览器一开始就下载更换的图像，不 必等到光标指向图像时再下载，可以避免翻转不连贯的现象。 “替换文本”：为翻转图像添加注释。 “按下时，前往的URL”：设置单击图像时跳转的链接页面。

30 2.4 翻转图 2.4.3 技巧提示 翻转图像链接的设置方法

31 2.4.4 实战演练：网站“闪闪作坊”页眉局部部分制作
2.4 翻转图 2.4.4 实战演练：网站“闪闪作坊”页眉局部部分制作 通过本案例的操作，你将学会：如何插入表格及编辑调整单元格、如何在表格中插入翻转图像。

32 2.5 Flash对象 2.5.1 案例制作：网页“球星风采”页眉部分

33 2.5 Flash对象 2.5.2 新知解析 1. 插入Flash动画
Flash动画文件插入后，可通过属性面板进行相关设置，如图2-39所示。可设置Flash动画的大小、对齐方式、与周围网页元素的边距、背景色等，可通过单击“播放”按钮进行测试，也可通过“参数”设置Flash动画背景透明 。

34 2.5 Flash对象 2. 插入Flash 视频 Flash 视频文件格式 (.flv)是一种视频文件，它包含经过编码的音频和视频数据，用于通过 Flash Player 传送。例如，如果有 QuickTime 或 Windows Media 视频文件，您可以使用编码器（如 Flash 8 Video Encoder 或 Sorensen Squeeze）将视频文件转换为 FLV 文件。 要在网页中插入Flash视频，可以单击菜单“插入”→“媒体”→“Flash视频”命令，或单击“插入”面板“常用”选项卡下的“媒体”按钮旁的下拉箭头，在下拉菜单中选择“Flash Video”命令，打开“插入Flash视频”对话框，进行相关设置即可。

35 2.5 Flash对象 可以利用Flash 8软件包中自带的Flash 8 Video Encoder软件将素材文件夹中的视频文件dzxx.avi转化为dzxx.flv，然后在网页中单击菜单“插入”→“媒体”→“Flash视频”命令，插入Flash视频素材dzxx.flv，效果如下图所示。

36 2.5 Flash对象 2.5.3 技巧提示 设置Flash文件背景透明

37 2.5 Flash对象 2.5.4 实战演练：网页“蝴蝶谷”页眉的制作
通过本案例的操作，你将学会：如何插入表格及设置单元格背景图像、如何在表格中插入Flash文件并设Flash背景透明、如何建立图像热点链接。