网页编辑和超级链接.ppt

《网页编辑和超级链接.ppt》由会员分享，可在线阅读，更多相关《网页编辑和超级链接.ppt（38页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第三章 网页编辑和超级链接v 3.1 网页文档的格式化v 3.2 插入对象v 3.3 超级链接的应用v 3.4 应用实例DREAMWEAVERv 3.1 网页文档的格式化 文字是网页中最基本的页面元素 占用存储空间小 传递信息的主要载体 网页文档格式化是一种修饰页面文字的操作，DW文字格式化主要有两种方式：用HTML标记格式化DREAMWEAVER 用用CSSCSS样式格式化样式格式化 CSS样式是一种对网页文档内容进行精确格式化的方法，它可以使用许多HTML样式不能使用的属性。CSS样式还可以同时对多篇文档格式化，可将创建好的样式保存在外部样式表中，若修改样式表，便可对相关网页进行相应的更新

2、，从而实现对文本格式化的自动化管理 两种格式化方法的优先级两种格式化方法的优先级HTML标记 CSS样式 关于插入文本 Dreamweaver 允许您通过以下方式在Web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。(ASCII文本文件、RTF 文件和MS Office 文档)DREAMWEAVER 关于插入文本将文本添加到文档中直接在直接在“文档文档”窗口中键入文本。窗口中键入文本。从其他应用程序中复制文本，切换到从其他应用程序中复制文本，切换到DreamweaverDreamweaver，将插入将插入点定位在点定位在“文档文档”窗口的窗口的“设计设

3、计”视图中，然后选择视图中，然后选择“编编辑辑”“粘贴粘贴”。Dreamweaver Dreamweaver 不保留在其他应用程序中应用的文本格式，不保留在其他应用程序中应用的文本格式，但它保留换行符。但它保留换行符。从MS Office 文档复制和粘贴文本WordWord或或ExcelExcel文档的内容文档的内容可可添加到新的或现有的添加到新的或现有的Web Web 页中页中Dreamweaver Dreamweaver 将文件转换为将文件转换为HTML HTML 后，其大小必须小于后，其大小必须小于300K300K如果使用如果使用Microsoft Office 97Microsoft

4、Office 97，您将无法添加您将无法添加Word Word 或或Excel Excel 文档的内容，您必须插入指向该文档的链接文档的内容，您必须插入指向该文档的链接若要将若要将Word Word 或或Excel Excel 文档的内容添加到新的或现有的文档的内容添加到新的或现有的Web Web 页中，执行以下操作：页中，执行以下操作：DREAMWEAVER 1 1、打开您要将、打开您要将Word Word 或或Excel Excel 文件的内容复制到的目标文件的内容复制到的目标Web Web 页页 2 2、执行以下操作之一以选择文件：、执行以下操作之一以选择文件：将文件从当前位置拖放到希望

5、在其中显示内容的页中。如果出现“插入Microsoft Word 或Excel 文档”对话框，单击“插入将文档的内容插入到此Web 页中”，然后单击“确定”。选择“文件”“导入”“Word 文档或文件”“导入”“Excel 文档”。在“打开”对话框中，浏览到要添加的文件，然后单击“打开”插入指向Word Word 或Excel Excel 文档的链接 若要创建指向Word 或Excel 文档的链接，请执行以下操作：打开希望在其中显示链接的页。将文件从当前位置拖放到希望在其中显示链接的Dreamweaver 页中。出现“插入Microsoft Word 或Excel 文档”对话框。DREAMWE

6、AVER选择“创建链接”，然后单击“确定”。如果正在创建的链接所指向的文档位于站点的根文件夹以外，Dreamweaver 将提示您将文档复制到站点根文件夹。通过将文档复制到站点的根文件夹，可以确保发布Web 站点时该文档可用。指向Word 或Excel 文档的链接出现在页中DREAMWEAVER3.1.1 用HTML标记格式化文本应用实例：制作一个符合下列要求的网页文件。将word文件oa.doc转换成HTML文件oa.htm在新的网页页面中导入HTML文件oa.htm，并设置页面背景图片为bg0052.gif添加标题“办公自动化”，将其格式设置为Heading1、红色、居中、加粗用HTML标

7、记heading2heading6分别格式化后5段文字，并给这些文字设置不同颜色将网页一oa.htm为名保存在本地站点的根文件夹myweb中DREAMWEAVER3.1.3设置段落格式和文档结构1.设置段落格式2.对齐文本3.缩进文本使用“缩进”命令可以将blockquote HTML 标签应用于文本段落，缩进页面两侧的文本。缩进文本和取消缩进：1 将插入点放在要缩进的段落中。2 单击属性检查器中的“缩进”或“凸出”按钮，选择“文本”“缩进”或“凸出”，或从上下文菜单中选择“列表”“缩进”或“凸出”。注意：可以对段落应用多重缩进。每选择一次该命令，文本就从文档的两侧进一步缩进。DREAMWEA

8、VER4.添加段落间距添加段落换行添加换行符5.使用水平线 水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。6.创建项目列表和编号列表若要创建新列表，请执行以下操作：1 在Dreamweaver 文档中，将插入点放在要添加列表的位置，然后执行下列操作之一：单击属性检查器中的“项目列表”或“编号列表”按钮。选择“文本”“列表”，然后选择所需的列表类型：“不排序（项目）列表”、“排序（编号）列表”或“定义列表”。2 键入列表项文本，然后按Enter 键DREAMWEAVER使用现有文本创建列表：1 选择一系列段落组成一个列表。2 单击属性检查器中的“项目列表”

9、或“编号列表”按钮，或选择“文本”“列表”，然后选择所需的列表类型：“不排序列表”、“排序列表”或“定义列表”创建嵌套列表：1 选择要嵌套的列表项。2 单击属性检查器中的“缩进”按钮，或选择“文本”“缩进”。3 按照以上使用的同一过程，对缩进的文本应用新的列表类型或样式。DREAMWEAVERv 3.2 插入对象3.2.1 插入水平线3.2.2 插入日期Dreamweaver 提供了一个方便的日期对象，该对象使您可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），您可以选择在每次保存文件时都自动更新该日期。注意：“插入日期”对话框中显示的日期和时间不是当前日期，也不反映访问者在显示您的

10、站点时所看到的时期/时间。它们只是说明此信息的显示方式的示例。将当前日期插入到文档中：1 在“文档”窗口中，将插入点放在要插入日期的位置。2 执行下列操作之一：选择“插入”“日期”。在“插入”栏的“常用”类别中，单击“日期”按钮。DREAMWEAVER 3 在出现的对话框中，选择星期格式、日期格式和时间格式。4 如果希望在每次保存文档时都更新插入的日期，请选择“储存时自动更新”。如果希望日期在插入后变成纯文本并永远不自动更新，请取消选择该选项。5 单击“确定”插入日期。提示：如果选择了“储存时自动更新”，则在日期格式插入到文档中后可以对其进行编辑，方法是单击已设置格式的文本，然后在属性检查器中

11、选择“编辑日期格式”3.2.3 插入特殊字符3.2.4 在字符之间添加空格HTML 只允许字符之间包含一个空格；若要在文档中添加其他空格，必须插入连续空格。可以设置一个在文档中自动添加连续空格的参数选择。DREAMWEAVER若要插入连续空格，请执行下列操作之一：1.在“插入”栏中的“文本”类别中，单击“字符”按钮选择“插入连续空格”。2.选择“插入”“HTML”“特殊字符”“连续空格”。3.按Control+Shift+空格键若要设置添加连续空格的参数，请执行以下操作：1 选择“编辑”“首选参数”(Windows)2 在“常规”类别中确保选中“允许多个连续的空格”。3.2.5 插入Flash

12、按钮和Flash文字在DW中，利用内置的Flash按钮和文字，可以直接在网页上制作出有动态效果的Flash按钮和文字若要在网页上插入Flash按钮，请执行以下操作 1 在网页中选择Flash按钮插入点的位置DREAMWEAVER 2 在网页编辑窗口中选择“插入|交互式图像|Flash按钮”命令，此时系统打开插入Flash按钮对话框。3 单击OK按钮后，就会产生一个“.SWF”格式的文件，文件会被自动导入当前正在编辑的网页中。4 在网页中选中此按钮，可以设置该按钮的属性若要在网页上插入Flash文字，请执行以下操作：1 在网页中选择Flash文字的插入位置 2 在网页编辑窗口中选择“插入|交互式

13、图像|Flash文本”命令，此时系统打开插入Flash文本对话框。3 单击OK按钮后，就会产生一个“.SWF”格式的文件，文件会被自动导入当前正在编辑的网页中。在网页上插入Flash按钮和文字，不用安装和使用Flash系统，就可以给网页增添动态效果DREAMWEAVER3.2.6 插入Rollover图片Rollover图片是由主图片(Original Image)和翻转图片(Rollover Image)两部分组成。页面载入后，先显示主图片，当鼠标移到主图片上方时，图片内容发生变化，自动更新为翻转图片，鼠标移出时，图片又恢复原样。制作Rollover图片是应准备两幅尺寸相同的图片。若两幅图片

14、尺寸不同的话，将调整第2幅图片如何在网页上插入Rollover图片DREAMWEAVERv 3.3 超级链接的应用3.3.1 超级链接概述用预先准备好的文本、按钮、图像等对象与其他对象建立一种链接，也就是在源端点和目标端点建立一种链接。超级链接的划分：DREAMWEAVER源端点超文本：文本下方有下划线非超文本：文本之外的其他对象构建的链接目标端点外部链接内部链接电子邮件链接局部链接、脚本链接相对路径与绝对路径3.3.2 创建超级链接使用属性检查器链接到文档 属性检查器文件夹图标和“链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接。关于属性检查器中的“目标”_blank 将链接的

15、文档载入一个新的、未命名的浏览器窗口。_parent 将链接的文档载入该链接所在框架的父框架或父窗口。_self 将链接的文档载入链接所在的同一框架或窗口。_top 将链接的文档载入整个浏览器窗口，从而删除所有框架。DREAMWEAVER使用完整的URL的地址的链接路径称为绝对路径，它指明了目标的具体位置指明目标端点与原端点的相对位置关系的路径成为相对路径使用“指向文件”图标链接文档“指向文件”图标可用于创建从图像、对象或文本到其它文档或文件的链接。若要使用“指向文件”图标链接文档，请执行以下操作：1 在“文档”窗口的“设计”视图中选择文本或图像。2 拖动属性检查器中“链接”文本框右侧的“指向

16、文件”图标，然后指向另一个打开的文档、已打开文档中的可见锚记或者指向“文件”面板中的一个文档。注意：只有当“文档”窗口中的文档未最大化时，才能链接到打开的文档。如果指向打开的文档，则在进行选择时，该文档移至屏幕的最前面。3 释放鼠标按钮。使用站点地图链接文档DREAMWEAVER3.3.3 管理链接 为避免站点中出现断开的链接，可以激活链接管理，使Dreamweaver 在您作出更改后自动更新链接。也可以使用站点的可视化表示形式来修改链接，或者，可以通过一次更改将所有链接更新到一个特定的文件中。自动更新链接 每当在本地站点内移动或重命名文档时，Dreamweaver 可更新起自以及指向该文档的

17、链接。当将整个站点（或其中完全独立的一个部分）存储在本地硬盘上时，此项功能最实用。Dreamweaver不更改远程文件夹中的文件，除非将这些本地文件放在或者存回到远程服务器上。若要在Dreamweaver 中启用链接管理，请执行以下操作：DREAMWEAVER 1 选择“编辑”“首选参数”(Windows)“首选参数”对话框出现。2 从左侧的分类列表中选择“常规”。出现“常规”首选参数选项。3 在“文档选项”部分，从“移动文件时更新链接”弹出菜单中选择“总是”或者“提示”。若选择“总是”，则每当移动或重命名选定文档时，Dreamweaver 将自动更新起自和指向该文档的所有链接。在站点地图中修

18、改链接 可以通过在站点地图中添加、更改和删除链接来修改站点的结构。Dreamweaver 自动更新站点地图以显示对站点所做的更改。若要更改链接，请执行以下操作：1 在站点地图中，选择要更改的链接所指向的页面DREAMWEAVER 选择“站点”“更改链接”右键单击，然后从上下文菜单中选择“更改链接”。2 通过浏览找到希望链接指向的文件，或者键入URL。3.3.4 创建锚点链接在网页设计中，要创建某个网页的某个指定位置的超链接称为创建锚点的链接。命名锚记使您可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名

19、锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。若要创建命名锚记，请执行以下操作：1.在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。DREAMWEAVER 2 执行下列操作之一：选择“插入”“命名锚记”。按下Control+Alt+A 在“插入”栏的“常用”类别中，单击“命名锚记”按钮。3 在“锚记名称”文本框中，键入锚记的名称，并单击“确定”。注意：如果看不到锚记标记，可选择“查看”“可视化助理”“不可见元素”。若要链接到命名锚记，请执行以下操作：1 在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。2 在属性检查器的“链接”文本框中

20、，键入一个数字符号(#)和锚记名称。注意：锚记名称区分大小写。DREAMWEAVER3.3.5 创建电子邮件链接3.3.6 创建导航条导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图像。（可将导航条项目视为按钮，因为单击它时，导航条项目将用户带到其它页面。为文档创建导航条后，可使用“修改导航条”命令向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。DREAMWEAVER插入导航条 插入导航条时，须命名导航条项目，并选

21、择要用于它们的图像。若要创建导航条，请执行以下操作：1.选择“插入”“图像对象”“导航条”2 完成对话框。创建跳转菜单跳转菜单是文档中的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个Web 站点内文档的链接、到其它Web 站点上文档的链接、电子邮件链接、到图形的链接。跳转菜单可包含三个基本部分：（可选）菜单选择提示，如菜单项的类别说明，或一些指导信息等，例如“选择其中一项：”（必需）所链接菜单项的列表：用户选择某个选项，则链接的文档或文件被打开。（可选）“前往”按钮。DREAMWEAVERv3.4 应用实例DREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVER