网页编辑和超级链接.ppt

第三章网页编辑和超级链接3 1网页文档的格式化3 2插入对象3 3超级链接的应用3 4应用实例 DREAMWEAVER 3 1网页文档的格式化文字是网页中最基本的页面元素占用存储空间小传递信息的主要载体网页文档格式化是一种修饰页面文字的操作 DW文字格式化主要有两种方式 用HTML标记格式化 DREAMWEAVER 用CSS样式格式化CSS样式是一种对网页文档内容进行精确格式化的方法 它可以使用许多HTML样式不能使用的属性 CSS样式还可以同时对多篇文档格式化 可将创建好的样式保存在外部样式表中 若修改样式表 便可对相关网页进行相应的更新 从而实现对文本格式化的自动化管理两种格式化方法的优先级HTML标记 CSS样式关于插入文本Dreamweaver允许您通过以下方式在Web页中添加文本 直接将文本键入页中 从其他文档复制和粘贴文本 或从其他应用程序拖放文本 ASCII文本文件 RTF文件和MSOffice文档 DREAMWEAVER 关于插入文本将文本添加到文档中直接在 文档 窗口中键入文本 从其他应用程序中复制文本 切换到Dreamweaver 将插入点定位在 文档 窗口的 设计 视图中 然后选择 编辑 粘贴 Dreamweaver不保留在其他应用程序中应用的文本格式 但它保留换行符 从MSOffice文档复制和粘贴文本Word或Excel文档的内容可添加到新的或现有的Web页中Dreamweaver将文件转换为HTML后 其大小必须小于300K如果使用MicrosoftOffice97 您将无法添加Word或Excel文档的内容 您必须插入指向该文档的链接若要将Word或Excel文档的内容添加到新的或现有的Web页中 执行以下操作 DREAMWEAVER 1 打开您要将Word或Excel文件的内容复制到的目标Web页2 执行以下操作之一以选择文件 将文件从当前位置拖放到希望在其中显示内容的页中 如果出现 插入MicrosoftWord或Excel文档 对话框 单击 插入将文档的内容插入到此Web页中 然后单击 确定 选择 文件 导入 Word文档或文件 导入 Excel文档 在 打开 对话框中 浏览到要添加的文件 然后单击 打开 插入指向Word或Excel文档的链接若要创建指向Word或Excel文档的链接 请执行以下操作 打开希望在其中显示链接的页 将文件从当前位置拖放到希望在其中显示链接的Dreamweaver页中 出现 插入MicrosoftWord或Excel文档 对话框 DREAMWEAVER 选择 创建链接 然后单击 确定 如果正在创建的链接所指向的文档位于站点的根文件夹以外 Dreamweaver将提示您将文档复制到站点根文件夹 通过将文档复制到站点的根文件夹 可以确保发布Web站点时该文档可用 指向Word或Excel文档的链接出现在页中 DREAMWEAVER 3 1 1用HTML标记格式化文本应用实例 制作一个符合下列要求的网页文件 将word文件oa doc转换成HTML文件oa htm在新的网页页面中导入HTML文件oa htm 并设置页面背景图片为bg0052 gif添加标题 办公自动化 将其格式设置为Heading1 红色 居中 加粗用HTML标记heading2 heading6分别格式化后5段文字 并给这些文字设置不同颜色将网页一oa htm为名保存在本地站点的根文件夹myweb中 DREAMWEAVER 3 1 3设置段落格式和文档结构1 设置段落格式2 对齐文本3 缩进文本使用 缩进 命令可以将blockquoteHTML标签应用于文本段落 缩进页面两侧的文本 缩进文本和取消缩进 1将插入点放在要缩进的段落中 2单击属性检查器中的 缩进 或 凸出 按钮 选择 文本 缩进 或 凸出 或从上下文菜单中选择 列表 缩进 或 凸出 注意 可以对段落应用多重缩进 每选择一次该命令 文本就从文档的两侧进一步缩进 DREAMWEAVER 4 添加段落间距添加段落换行添加换行符5 使用水平线水平线对于组织信息很有用 在页面上 可以使用一条或多条水平线以可视方式分隔文本和对象 6 创建项目列表和编号列表若要创建新列表 请执行以下操作 1在Dreamweaver文档中 将插入点放在要添加列表的位置 然后执行下列操作之一 单击属性检查器中的 项目列表 或 编号列表 按钮 选择 文本 列表 然后选择所需的列表类型 不排序 项目 列表 排序 编号 列表 或 定义列表 2键入列表项文本 然后按Enter键 DREAMWEAVER 使用现有文本创建列表 1选择一系列段落组成一个列表 2单击属性检查器中的 项目列表 或 编号列表 按钮 或选择 文本 列表 然后选择所需的列表类型 不排序列表 排序列表 或 定义列表 创建嵌套列表 1选择要嵌套的列表项 2单击属性检查器中的 缩进 按钮 或选择 文本 缩进 3按照以上使用的同一过程 对缩进的文本应用新的列表类型或样式 DREAMWEAVER 3 2插入对象3 2 1插入水平线3 2 2插入日期Dreamweaver提供了一个方便的日期对象 该对象使您可以以任何喜欢的格式插入当前日期 包含或不包含时间都可以 您可以选择在每次保存文件时都自动更新该日期 注意 插入日期 对话框中显示的日期和时间不是当前日期 也不反映访问者在显示您的站点时所看到的时期 时间 它们只是说明此信息的显示方式的示例 将当前日期插入到文档中 1在 文档 窗口中 将插入点放在要插入日期的位置 2执行下列操作之一 选择 插入 日期 在 插入 栏的 常用 类别中 单击 日期 按钮 DREAMWEAVER 3在出现的对话框中 选择星期格式 日期格式和时间格式 4如果希望在每次保存文档时都更新插入的日期 请选择 储存时自动更新 如果希望日期在插入后变成纯文本并永远不自动更新 请取消选择该选项 5单击 确定 插入日期 提示 如果选择了 储存时自动更新 则在日期格式插入到文档中后可以对其进行编辑 方法是单击已设置格式的文本 然后在属性检查器中选择 编辑日期格式 3 2 3插入特殊字符3 2 4在字符之间添加空格HTML只允许字符之间包含一个空格 若要在文档中添加其他空格 必须插入连续空格 可以设置一个在文档中自动添加连续空格的参数选择 DREAMWEAVER 若要插入连续空格 请执行下列操作之一 1 在 插入 栏中的 文本 类别中 单击 字符 按钮选择 插入连续空格 2 选择 插入 HTML 特殊字符 连续空格 3 按Control Shift 空格键若要设置添加连续空格的参数 请执行以下操作 1选择 编辑 首选参数 Windows 2在 常规 类别中确保选中 允许多个连续的空格 3 2 5插入Flash按钮和Flash文字在DW中 利用内置的Flash按钮和文字 可以直接在网页上制作出有动态效果的Flash按钮和文字若要在网页上插入Flash按钮 请执行以下操作1在网页中选择Flash按钮插入点的位置 DREAMWEAVER 2在网页编辑窗口中选择 插入 交互式图像 Flash按钮 命令 此时系统打开插入Flash按钮对话框 3单击OK按钮后 就会产生一个 SWF 格式的文件 文件会被自动导入当前正在编辑的网页中 4在网页中选中此按钮 可以设置该按钮的属性若要在网页上插入Flash文字 请执行以下操作 1在网页中选择Flash文字的插入位置2在网页编辑窗口中选择 插入 交互式图像 Flash文本 命令 此时系统打开插入Flash文本对话框 3单击OK按钮后 就会产生一个 SWF 格式的文件 文件会被自动导入当前正在编辑的网页中 在网页上插入Flash按钮和文字 不用安装和使用Flash系统 就可以给网页增添动态效果 DREAMWEAVER 3 2 6插入Rollover图片Rollover图片是由主图片 OriginalImage 和翻转图片 RolloverImage 两部分组成 页面载入后 先显示主图片 当鼠标移到主图片上方时 图片内容发生变化 自动更新为翻转图片 鼠标移出时 图片又恢复原样 制作Rollover图片是应准备两幅尺寸相同的图片 若两幅图片尺寸不同的话 将调整第2幅图片如何在网页上插入Rollover图片 DREAMWEAVER 3 3超级链接的应用3 3 1超级链接概述用预先准备好的文本 按钮 图像等对象与其他对象建立一种链接 也就是在源端点和目标端点建立一种链接 超级链接的划分 DREAMWEAVER 源端点 超文本 文本下方有下划线非超文本 文本之外的其他对象构建的链接 目标端点 外部链接内部链接电子邮件链接局部链接 脚本链接 相对路径与绝对路径3 3 2创建超级链接使用属性检查器链接到文档属性检查器文件夹图标和 链接 文本框可用于创建从图像 对象或文本到其它文档或文件的链接 关于属性检查器中的 目标 blank将链接的文档载入一个新的 未命名的浏览器窗口 parent将链接的文档载入该链接所在框架的父框架或父窗口 self将链接的文档载入链接所在的同一框架或窗口 top将链接的文档载入整个浏览器窗口 从而删除所有框架 DREAMWEAVER 使用完整的URL的地址的链接路径称为绝对路径 它指明了目标的具体位置指明目标端点与原端点的相对位置关系的路径成为相对路径 使用 指向文件 图标链接文档 指向文件 图标可用于创建从图像 对象或文本到其它文档或文件的链接 若要使用 指向文件 图标链接文档 请执行以下操作 1在 文档 窗口的 设计 视图中选择文本或图像 2拖动属性检查器中 链接 文本框右侧的 指向文件 图标 然后指向另一个打开的文档 已打开文档中的可见锚记或者指向 文件 面板中的一个文档 注意 只有当 文档 窗口中的文档未最大化时 才能链接到打开的文档 如果指向打开的文档 则在进行选择时 该文档移至屏幕的最前面 3释放鼠标按钮 使用站点地图链接文档 DREAMWEAVER 3 3 3管理链接为避免站点中出现断开的链接 可以激活链接管理 使Dreamweaver在您作出更改后自动更新链接 也可以使用站点的可视化表示形式来修改链接 或者 可以通过一次更改将所有链接更新到一个特定的文件中 自动更新链接每当在本地站点内移动或重命名文档时 Dreamweaver可更新起自以及指向该文档的链接 当将整个站点 或其中完全独立的一个部分 存储在本地硬盘上时 此项功能最实用 Dreamweaver不更改远程文件夹中的文件 除非将这些本地文件放在或者存回到远程服务器上 若要在Dreamweaver中启用链接管理 请执行以下操作 DREAMWEAVER 1选择 编辑 首选参数 Windows 首选参数 对话框出现 2从左侧的分类列表中选择 常规 出现 常规 首选参数选项 3在 文档选项 部分 从 移动文件时更新链接 弹出菜单中选择 总是 或者 提示 若选择 总是 则每当移动或重命名选定文档时 Dreamweaver将自动更新起自和指向该文档的所有链接 在站点地图中修改链接可以通过在站点地图中添加 更改和删除链接来修改站点的结构 Dreamweaver自动更新站点地图以显示对站点所做的更改 若要更改链接 请执行以下操作 1在站点地图中 选择要更改的链接所指向的页面 DREAMWEAVER 选择 站点 更改链接 右键单击 然后从上下文菜单中选择 更改链接 2通过浏览找到希望链接指向的文件 或者键入URL 3 3 4创建锚点链接在网页设计中 要创建某个网页的某个指定位置的超链接称为创建锚点的链接 命名锚记使您可以在文档中设置标记 这些标记通常放在文档的特定主题处或顶部 然后可以创建到这些命名锚记的链接 这些链接可快速将访问者带到指定位置 创建到命名锚记的链接的过程分为两步 首先 创建命名锚记 然后创建到该命名锚记的链接 若要创建命名锚记 请执行以下操作 1 在 文档 窗口的 设计 视图中 将插入点放在需要命名锚记的地方 DREAMWEAVER 2执行下列操作之一 选择 插入 命名锚记 按下Control Alt A在 插入 栏的 常用 类别中 单击 命名锚记 按钮 3在 锚记名称 文本框中 键入锚记的名称 并单击 确定 注意 如果看不到锚记标记 可选择 查看 可视化助理 不可见元素 若要链接到命名锚记 请执行以下操作 1在 文档 窗口的 设计 视图中 选择要从其创建链接的文本或图像 2在属性检查器的 链接 文本框中 键入一个数字符号 和锚记名称 注意 锚记名称区分大小写 DREAMWEAVER 3 3 5创建电子邮件链接3 3 6创建导航条导航条由图像或图像组组成 这些图像的显示内容随用户操作而变化 使用 插入导航条 命令之前 须首先为各个导航项目的显示状态创建一组图像 可将导航条项目视为按钮 因为单击它时 导航条项目将用户带到其它页面 为文档创建导航条后 可使用 修改导航条 命令向导航条添加图像 或从导航条中删除图像 此命令可用于更改图像或图像组 更改单击项目时所打开的文件 选择在不同的窗口或框架中打开文件以及重新排序图像 DREAMWEAVER 插入导航条插入导航条时 须命名导航条项目 并选择要用于它们的图像 若要创建导航条 请执行以下操作 1 选择 插入 图像对象 导航条 2完成对话框 3 3 7创建跳转菜单跳转菜单是文档中的弹出菜单 对站点访问者可见 并列出链接到文档或文件的选项 可以创建到整个Web站点内文档的链接 到其它Web站点上文档的链接 电子邮件