《数据结构域算法设计-第三章 网页编辑和超级链接 课件》由会员分享，可在线阅读，更多相关《数据结构域算法设计-第三章 网页编辑和超级链接 课件（38页珍藏版）》请在金锄头文库上搜索。
1、第三章 网页编辑和超级链接v 3.1 网页文档的格式化v 3.2 插入对象v 3.3 超级链接的应用v 3.4 应用实例DREAMWEAVERv 3.1 网页文档的格式化 文字是网页中最文字是网页中最基本的页面元素的页面元素 占用占用存储空间小空间小 传递信息的主要传递信息的主要载体网页文档格式化是一种修饰页面文 字的操作， DW文字格式化主要有两种方式： 用用HTMLHTML标记格式化标记格式化DREAMWEAVER 用用CSSCSS样式格式化样式格式化CSS样式是一种对网页文档内容进行精确格式化 的方法，它可以使用许多HTML样式不能使用的属 性。CSS样式还可以同时对多篇文档格式化，可
2、将创建好的样式保存在外部样式表中，若修改样 式表，便可对相关网页进行相应的更新，从而实 现对文本格式化的自动化管理 两种格式化方法的优先级两种格式化方法的优先级 HTML标记 CSS样式关于插入文本Dreamweaver 允许您通过以下方式在Web 页中添 加 文本：直接将文本键入页中，从其他文档复制和粘贴文 本，或从其他应用程序拖放文本。(ASCII文本文件、RTF文件和MS Office 文档)DREAMWEAVER关于插入文本将文本添加到文档中直接在“文档”窗口中键入文本。从其他应用程序中复制文本，切换到Dreamweaver，将插入 点定位在“文档”窗口的“设计”视图中，然后选择“编
3、辑” “粘贴”。Dreamweaver 不保留在其他应用程序中应用的文本格式， 但它保留换行符。 从MS Office 文档复制和粘贴文本Word或Excel文档的内容可添加到新的或现有的Web 页中Dreamweaver 将文件转换为HTML 后，其大小必须小于300K如果使用Microsoft Office 97，您将无法添加Word 或 Excel 文档的内容，您必须插入指向该文档的链接若要将Word 或Excel 文档的内容添加到新的或现有的Web 页中，执行以下操作：DREAMWEAVER1、打开您要将Word 或Excel 文件的内容复制到的目标Web 页2、执行以下操作之一以选择
4、文件：将文件从当前位置拖放到希望在其中显示内容的页中。 如果出现“插入Microsoft Word 或Excel 文档”对话框， 单击“插入将文档的内容插入到此Web 页中”，然后单击 “确定”。选择“文件”“导入”“Word 文档或文件”“导入 ”“Excel 文档”。在“打开”对话框中，浏览到要添加 的文件，然后单击“打开” 插入指向Word 或Excel 文档的链接若要创建指向Word 或Excel 文档的链接，请执行以下 操作：打开希望在其中显示链接的页。将文件从当前位置拖放到希望在其中显示链接的 Dreamweaver 页中。出现“插入Microsoft Word 或 Excel 文
5、档”对话框。DREAMWEAVER选择“创建链接”，然后单击“确定”。如果正在创建的链接所指向的文档位于站点的根文件 夹以外，Dreamweaver 将提示您将文档复制到站点根 文件夹。通过将文档复制到站点的根文件夹，可以确 保发布Web 站点时该文档可用。指向Word 或Excel 文档的链接出现在页中DREAMWEAVER3.1.1 用HTML标记格式化文本应用实例： 制作一个符合下列要求的网页文件。将word文件oa.doc转换成HTML文件oa.htm在新的网页页面中导入HTML文件oa.htm，并 设置页面背景图片为bg0052.gif添加标题“办公自动化”，将其格式设置为 Head
6、ing1、红色、居中、加粗用HTML标记heading2heading6分别格式化 后5段文字，并给这些文字设置不同颜色将网页一oa.htm为名保存在本地站点的根文件 夹myweb中DREAMWEAVER3.1.3设置段落格式和文档结构 1.设置段落格式 2.对齐文本 3.缩进文本使用“缩进”命令可以将blockquote HTML 标签应用于文 本段落，缩进页面两侧的文本。缩进文本和取消缩进：1 将插入点放在要缩进的段落中。2 单击属性检查器中的“缩进”或“凸出”按钮，选择“ 文本” “缩进”或“凸出”，或从上下文菜单中选择“ 列表” “缩进”或“凸出”。注意：可以对段落应用多重缩进。每选择
7、一次该命令，文 本就从文档的两侧进一步缩进。DREAMWEAVER4.添加段落间距添加段落换行添加换行符 5.使用水平线水平线对于组织信息很有用。在页面上，可以使用一 条或多条水平线以可视方式分隔文本和对象。 6.创建项目列表和编号列表若要创建新列表，请执行以下操作： 1 在Dreamweaver 文档中，将插入点放在要添加列表的 位置，然后执行下列操作之一：单击属性检查器中的“项目列表”或“编号列表”按 钮。选择“文本” “列表”，然后选择所需的列表类型 ：“不排序（项目）列表”、“排序（编号）列表” 或“定义列表”。 2 键入列表项文本，然后按Enter 键DREAMWEAVER使用现有文
8、本创建列表： 1 选择一系列段落组成一个列表。 2 单击属性检查器中的“项目列表”或“编号列表”按 钮，或选择“文本” “列表”，然后选择所需的列 表类型：“不排序列表”、“排序列表”或“定义列 表”创建嵌套列表： 1 选择要嵌套的列表项。 2 单击属性检查器中的“缩进”按钮，或选择“文本” “缩进”。 3 按照以上使用的同一过程，对缩进的文本应用新的列 表类型或样式。DREAMWEAVERv 3.2 插入对象 3.2.1 插入水平线 3.2.2 插入日期Dreamweaver 提供了一个方便的日期对象，该对象使 您可以以任何喜欢的格式插入当前日期（包含或不包 含时间都可以），您可以选择在每次
9、保存文件时都自 动更新该日期。注意：“插入日期”对话框中显示的日期和时间不是 当前日期，也不反映访问者在显示您的站点时所看到 的时期/ 时间。它们只是说明此信息的显示方式的示 例。将当前日期插入到文档中：1 在“文档”窗口中，将插入点放在要插入日期的位 置。2 执行下列操作之一：选择“插入” “日期”。在“插入”栏的“常用”类别中，单击“日期”按 钮。DREAMWEAVER3 在出现的对话框中，选择星期格式、日期格式和时 间格式。4 如果希望在每次保存文档时都更新插入的日期，请 选择“储存时自动更新” 。如果希望日期在插入后变 成纯文本并永远不自动更新，请取消选择该选项。5 单击“确定”插入日
10、期。提示：如果选择了“储存时自动更新”，则在日期格 式插入到文档中后可以对其进行编辑，方法是单击已 设置格式的文本，然后在属性检查器中选择“编辑日 期格式” 3.2.3 插入特殊字符 3.2.4 在字符之间添加空格HTML 只允许字符之间包含一个空格；若要在文档 中添加其他空格，必须插入连续空格。可以设置 一个在文档中自动添加连续空格的参数选择。DREAMWEAVER若要插入连续空格，请执行下列操作之一：1.在“插入”栏中的“文本”类别中，单击“字符” 按钮选择“插入连续空格”。2.选择“插入” “HTML” “特殊字符” “ 连续空格”。 3.按Control+Shift+ 空格键若要设置添
11、加连续空格的参数，请执行以下操作：1 选择“编辑”“首选参数”(Windows)2 在“常规”类别中确保选中“允许多个连续的空格 ”。 3.2.5 插入Flash按钮和Flash文字在DW中，利用内置的Flash按钮和文字，可以直接在网 页上制作出有动态效果的Flash按钮和文字若要在网页上插入Flash按钮，请执行以下操作1 在网页中选择Flash按钮插入点的位置DREAMWEAVER2 在网页编辑窗口中选择“插入|交互式图像|Flash 按钮”命令，此时系统打开插入Flash按钮对话框。3 单击OK按钮后，就会产生一个“.SWF”格式的文件 ，文件会被自动导入当前正在编辑的网页中。4 在网
12、页中选中此按钮，可以设置该按钮的属性若要在网页上插入Flash文字，请执行以下操作：1 在网页中选择Flash文字的插入位置2 在网页编辑窗口中选择“插入|交互式图像|Flash 文本”命令，此时系统打开插入Flash文本对话框。3 单击OK按钮后，就会产生一个“.SWF”格式的文件 ，文件会被自动导入当前正在编辑的网页中。在网页上插入Flash按钮和文字，不用安装和使用 Flash系统，就可以给网页增添动态效果DREAMWEAVER3.2.6 插入Rollover图片Rollover图片是由主图片(Original Image)和翻转 图片(Rollover Image)两部分组成。页面载入
13、后， 先显示主图片，当鼠标移到主图片上方时，图片 内容发生变化，自动更新为翻转图片，鼠标移出 时，图片又恢复原样。制作Rollover图片是应准备两幅尺寸相同的图片。 若两幅图片尺寸不同的话，将调整第2幅图片如何在网页上插入Rollover图片DREAMWEAVERv 3.3 超级链接的应用 3.3.1 超级链接概述用预先准备好的文本、按钮、图像等对象与其他 对象建立一种链接，也就是在源端点和目标端点 建立一种链接。超级链接的划分：DREAMWEAVER源端点超文本：文本下方有下划线非超文本：文本之外的其他对象构建的链接目标端点外部链接内部链接电子邮件链接局部链接、脚本链接相对路径与绝对路径3
14、.3.2 创建超级链接使用属性检查器链接到文档属性检查器文件夹图标和“链接”文本框可用于创建 从图像、对象或文本到其它文档或文件的链接。关于属性检查器中的“目标”_blank 将链接的文档载入一个新的、未命名的浏览器窗口 。_parent 将链接的文档载入该链接所在框架的父框架或父 窗口。_self 将链接的文档载入链接所在的同一框架或窗口。_top 将链接的文档载入整个浏览器窗口，从而删除所有框 架。DREAMWEAVER使用完整的URL的地址的链接路径称为绝对路径 ，它指明了目标的具体位置指明目标端点与原端点的相对位置关系的路径成 为相对路径使用“指向文件”图标链接文档“指向文件”图标可用
15、于创建从图像、对象或文本到 其它文档或文件的链接。若要使用“指向文件”图标链接文档，请执行以下操 作：1 在“文档”窗口的“设计”视图中选择文本或图像 。2 拖动属性检查器中“链接”文本框右侧的“指向文 件”图标，然后指向另一个打开的文档、已打开文档 中的可见锚记或者指向“文件”面板中的一个文档。注意：只有当“文档”窗口中的文档未最大化时，才 能链接到打开的文档。如果指向打开的文档，则在进 行选择时，该文档移至屏幕的最前面。3 释放鼠标按钮。使用站点地图链接文档DREAMWEAVER3.3.3 管理链接为避免站点中出现断开的链接，可以激活链接管理， 使Dreamweaver 在您作出更改后自动
16、更新链接。也可 以使用站点的可视化表示形式来修改链接，或者，可 以通过一次更改将所有链接更新到一个特定的文件中 。自动更新链接每当在本地站点内移动或重命名文档时，Dreamweaver 可更新起自以及指向该文档的链接。当将整个站点（ 或其中完全独立的一个部分）存储在本地硬盘上时， 此项功能最实用。Dreamweaver不更改远程文件夹中的 文件，除非将这些本地文件放在或者存回到远程服务 器上。若要在Dreamweaver 中启用链接管理，请执行以下操 作：DREAMWEAVER1 选择“编辑”“首选参数”(Windows) “首选参数 ”对话框出现。2 从左侧的分类列表中选择“常规”。出现“常规” 首选参数选项。3 在“文档选项”部分，从“移动文件时更新链接”弹出菜 单中选择“总是”或者“提示”。若选择“总是”，则每 当移动或重命名选定文档时，Dreamweaver 将自动
