《实战Dreamweaver8网页制作教程 教学课件 ppt 作者 刘天真 第2章 网页元素的添加》由会员分享，可在线阅读，更多相关《实战Dreamweaver8网页制作教程 教学课件 ppt 作者 刘天真 第2章 网页元素的添加（37页珍藏版）》请在金锄头文库上搜索。
1、学习目标,掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局,2.1 文本和页面属性 2.2 图像的插入和设置 2.3 超链接的设置方法 2.4 翻转图 2.5 Flash对象,本章内容,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,通过本案例的操作，你将学会： 如何插入文本和设置文本的属性、 如何插入网页背景图像和设置项目列表。,2.1 文本和页面属性,2.1.2 新知解析,1. 文本的属性面板 在文档窗口输入一段文字，此时属性面板变为文本属性面板，可通过文本属性面板对文本进行设定。,2. 插入空格 在Dreamweaver中，无论按键盘上的
2、空格键多少次，只能添加一个空格。若要添加多个空格，一般采用按住Ctrl+Shift +空格键的方法，每按一次，添加一个空格。,2.1 文本和页面属性,3. 页面属性的设置 当我们需要对网页的整体外观进行设置时，可通过“页面属性”命令进行设置。在属性面板中单击“页面属性”按钮，或单击菜单“修改”“页面属性”命令，出现页面属性对话框。在“外观”选项下可以整体上对网页中采用默认方式输入的文字的字体、大小、颜色、页面背景、边距等进行设定。,2.1 文本和页面属性,2.1 文本和页面属性,4. 特殊字符,当在网页中需输入一些特殊字符时，可单击菜单“插入”“HTML” “特殊字符”选择相应选项。,2.1
3、文本和页面属性,5. 水平线,水平线主要用于分隔文档内容，使文档结构清晰，层次分明。单击菜单“插入”“HTML”“水平线”命令，或单击插入面板组中“HTML”选项下的 按钮可插入水平线，此时属性面板变为水平线属性面板，可对水平线的宽、高、对齐方式、阴影等进行设置。,2.1 文本和页面属性,2.1.3 技巧提示,1. 水平线颜色的修改,2. 换行与回车键的不同,2.1 文本和页面属性,2.1.4 实战演练：网页“藏獒鉴赏”的制作,通过本案例的操作，你将学会：如何插入文本和设置文本的属性、如何插入网页背景图像、如何插入水平线、日期、特殊符号并进行设置。,2.2 图像的插入和设置,2.2.1 案例制
4、作：网页“球星-亨利”,通过本案例的操作，你将学会：如何插入图像和设置图像属性、如何设置网页背景颜色、如何设置图像和文本的对齐方式和进行文本换行。,2.2 图像的插入和设置,2.2.2 新知解析,1. 常见的图像类型和格式 目前已知的图像格式有几十种，但能在浏览器中显示的图像只有GIF、JPEG和PNG三种，而最常用的是GIF和JPEG两种。,2. 插入图像 在插入图像前，应将图像与网页文件保存到同一文件夹。在网页中插入图像的方法如下。 将光标移到要插入图片的地方，选择“插入”“图像”命令，打开“选择图像源文件”对话框。选中需要插入的图像文件，单击“确定”按钮，打开“图像标签辅助功能属性”对话
5、框。输入所需的信息后，单击“确定”按钮，此时在文档窗口中将显示出该图像。,3. 图像属性面板 在网页中用鼠标单击图像，则图像处于选中状态，四周出现控制柄，拖动柄可调整图像大小，同时属性面板显示出与图像有关的属性设置。,2.2 图像的插入和设置,宽和高：浏览器中为图像保留的宽度和高度，默认单位为像素。 源文件：指定图像的路径。 链接：指定图像的超链接。 替换：为图像添加注释。 编辑：单击其右侧的优化、裁剪、重新取样、亮度/对比度、锐化等按 钮对图像进行处理，也可以单击按钮打开指定的图像处理软件重新编辑 图像。 垂直边距：指定图像在垂直方向上与文本或其他网页元素的间距。 水平边距：指定图像在水平-
6、方向上与文本或其他网页元素的间距。 目标：指定链接时的目标窗口或框架。 边框：指定图像边框的宽度 图像所处的段落在文档中的对齐方式。 对齐：指定当前图像与旁边的文本的混排方式。 低解析度源：指定当前图像的低分辨率副本的路径。 地图：用于制作图像热点链接。,2.2 图像的插入和设置,2.2 图像的插入和设置,2.2.3 技巧提示,1. 图像“属性”中的“对齐”与段落对齐方式的不同,2. 网页元素的定位,2.2 图像的插入和设置,2.2.4 实战演练：网页“球星风采”的制作,通过本案例的操作，你将学会：如何插入图像和设置图像属性、如何借助表格进行文本和图像的定位。,2.3 超链接的设置方法,2.3
7、.1案例制作：网站“诗词大观”首页,通过本案例的操作，你将学会：如何插入文本、图像和设置它们的属性、如何插入表格并借助表格进行文本和图像的定位、如何建立锚记链接、电子邮件链接、绝对超链接、空连接。,2.3 超链接的设置方法,2.3.2 新知解析,1. 超链接的表现形式,（1）网页之间的超连接 （2）网页内的超链接 （3）E-mail链接 （4）空链接和脚本链接 （5）图像热点链接,（1）网页之间的超连接 要在网页中创建超链接，首先选中要创建链接的对象（文本、图像或其他页面对象），然后可以通过以下3种方法创建超链接。 在属性面板的“链接”文本框中输入目标对象的URL或路径。 拖动“链接”文本框后
8、面的“指向文件”图标到“文件”面板中的目标 对象上（默认使用相对路径）。 单击“链接”文本框后面的“浏览文件”按钮，在打开的“选择文件” 对话框中选择链接对象，然后单击“确定”按钮。,2.3 超链接的设置方法,设置完链接后，在属性面板的“目标”下拉列表框也变为可用状态。“目标”下拉列表框中各选项的含义如下。 _parent：在含有该链接的框架的父框架集或父窗口中打开目标文件。 _self：在该链接所在的窗口或同一框架中打开目标文件，此为默认选项。 _top：在整个浏览器窗口中打开目标文件，因而会删除所有框架。 _blank：在一个新的浏览器窗口中打开目标文件。,2.3 超链接的设置方法,（2）
9、网页内的超链接 创建网页内超链接是通过使用“命名锚记”来完成的。 “命名锚记链接”一般用在单个网页篇幅较长，浏览者需要翻屏查看的情况下。 制作锚记链接，首先将光标移到需要插入锚点的位置，单击菜单“插入”“命名锚记”命令，在弹出的对话框中输入锚记名称，单击“确定”按钮，于是就添加了命名锚记 。然后再创建跳转到这些命名锚记的超链接。建立锚记链接的格式是“#锚记名称”。,2.3 超链接的设置方法,（3）E-mail链接 E-mail链接是一种特殊的链接，单击这种链接将打开一个空白通讯窗口，允许用户创建电子邮件，并发送到指定的邮箱地址。 创建E-mail链接方法是选择要创建E-mail链接的对象，然后
10、在属性面板的“链接”文本框中输入“mailto:”和E-mail地址，例如“mailto:”。还可以单击菜单“插入”“电子邮件链接”命令或单击“插入”面板“常用”选项卡下的“电子邮件链接”按钮，在打开的“电子邮件链接”对话框中进行设置，,2.3 超链接的设置方法,（4）空链接和脚本链接 空链接指的是一个无指向的链接，只要在属性面板的“链接”文本框中输入“#”就可以了。空链接一般为网页上的对象或文本附加行为。此外，空链接还有一个作用，当网页太长时，在底部设一个空链接，可以点击它直接回到网页顶部。 脚本链接是指执行JavaScript代码或调用JavaScript函数。要创建脚本链接，只需在选定文
11、字或图像后，在属性面板的“链接”文本框中输入“javascript:”，并且跟一些JavaScript代码或函数调用即可。例如，可输入javascript:alert(Hello!)，这是当单击该链接时，系统将弹出一个提示框，其中将显示上面输入的文字Hello!,2.3 超链接的设置方法,（5）图像热点链接 为图像创建链接时，如果图像比较大、要创建链接的区域不规则，或是只给图像的部分区域创建链接时，可以将图像选中，利用属性面板中的矩形热点工具、椭圆热点工具和多边形热点工具在图像上绘制热点区域，利用指针热点工具选中热区，在属性面板的“链接”栏中指定链接文件，于是就建立了热点链接。,2.3 超链接
12、的设置方法,2. 页面超链接状态的设定 单击菜单“修改”“页面属性”或单击文本属性面板中的“页面属性”按钮，打开页面属性对话框，在分类下单击“链接”选项，其中“链接颜色”即为正常显示的超链接文字颜色，“变换图像链接”为鼠标移到超链接文字上时文字显示颜色，“活动链接”为鼠标移到链接文字上按下鼠标并未松开时文字显示颜色。“已访问链接”为已访问过的超链接文字的显示颜色。还可以设置所有超链接文字是否带有下划线。,2.3 超链接的设置方法,2.3 超链接的设置方法,2.3.3 技巧提示,绝对超链接和相对超链接,2.3 超链接的设置方法,2.3.4 实战演练：网站“诗词大观”的制作,通过本案例的操作，你将
13、学会：如何插入表格及编辑调整单元格、如何在表格中插入文本和图像、如何建立网页间超链接、电子邮件链接。,2.4 翻转图,2.4.1 案例制作：网站“美联”导航部分,通过本案例的操作，你将学会：如何插入表格及编辑调整单元格、 如何在表格中插入翻转图像。,2.4 翻转图,2.4.2 新知解析,翻转图是最简单的一种动态网页，当光标指向图像时会变为另一幅图像，光标移出后又变回原先的图像。 要制作翻转图，只需单击菜单“插入”“图像对象”“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框，如图2-33所示，各选项的含义如下。 “图像名称”：输入图像名称。 “原始图像”：单击“浏览”按钮可以选择初始图像。
14、“鼠标经过图像”：单击“浏览”按钮可以选择替换的图像。 “预载鼠标经过图像”复选框：选中该项可以使浏览器一开始就下载更换的图像，不 必等到光标指向图像时再下载，可以避免翻转不连贯的现象。 “替换文本”：为翻转图像添加注释。 “按下时，前往的URL”：设置单击图像时跳转的链接页面。,2.4 翻转图,2.4.3 技巧提示,翻转图像链接的设置方法,2.4 翻转图,2.4.4 实战演练：网站“闪闪作坊”页眉局部部分制作,通过本案例的操作，你将学会：如何插入表格及编辑调整单元格、如何在表格中插入翻转图像。,2.5 Flash对象,2.5.1 案例制作：网页“球星风采”页眉部分,通过本案例的操作，你将学会
15、：如何插入表格及单元格中插入文本和图像、如何在表格中插入flash文件。,2.5 Flash对象,2.5.2 新知解析,1. 插入Flash动画 单击菜单“插入”“媒体”“Flash”命令在打开的“选择文件”对话框中指定需要插入的Flash动画文件即可。 Flash动画文件插入后，可通过属性面板进行相关设置，如图2-39所示。可设置Flash动画的大小、对齐方式、与周围网页元素的边距、背景色等，可通过单击“播放”按钮进行测试，也可通过“参数”设置Flash动画背景透明 。,2.5 Flash对象,2. 插入Flash 视频 Flash 视频文件格式 (.flv)是一种视频文件，它包含经过编码的
16、音频和视频数据，用于通过 Flash Player 传送。例如，如果有 QuickTime 或 Windows Media 视频文件，您可以使用编码器（如 Flash 8 Video Encoder 或 Sorensen Squeeze）将视频文件转换为 FLV 文件。 要在网页中插入Flash视频，可以单击菜单“插入”“媒体”“Flash视频”命令，或单击“插入”面板“常用”选项卡下的“媒体”按钮旁的下拉箭头，在下拉菜单中选择“Flash Video”命令，打开“插入Flash视频”对话框，进行相关设置即可。,2.5 Flash对象,可以利用Flash 8软件包中自带的Flash 8 Video Encoder软件将素材文件夹中的视频文件dzxx.avi转化为dzxx.flv，然后在网页中单击菜单“插入”“媒体”“Flash视频”命令，插入F
