Dreamweaver中网页元素的插入与运用.pptVIP

Dreamweaver中网页元素的插入与运用 主讲：梁敦毫 相对路径的用法 要链接的文件与当前文档处于同一个文件夹中，只需输入文件名。 要链接的文件位于当前文档所在文件夹的子文件夹中，提供子文件夹名，然后是一正斜线（/）和文件名。 要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加../（其中“..”表示“文件夹分层结构中的上一级文件夹”） 练一练 1.拟定一个主题（比如庆祝三八妇女节、个人简介等）制件一个图文混排的网页。 2.利用本章学习的知识，制作一个电子相册主页，要求有循环播放的背景音乐并且制作Flash按钮组成导航菜单。（第一次作业，完成时间一个星期） * * 教学目标 了解各种网页元素的特点、重要性及使用场景；掌握DW在插 入网页元素时涉及到相关概念，如图像占位符、鼠标经过的 图像、Flash按钮、Flash文本、FlashPaper、Flash视频、锚 点链接、E -mail链接、空链接、脚本链接、图像热点链接、 绝对/相对路径和URL等；会用DW插入和编辑文本、插入和编 辑图像、插入和编辑各种Flahs元素（包括：Flash、Flash按 钮、Flash文本、FlashPaper文档和Flash视频）、插入声音 和视频、插入和编辑各种超链接（包括：普通链接、锚点链 接、E -mail链接、空链接、脚本链接和图像热点链接）。 本节重点 u 在网页中插入和编辑文本 u 在网页中插入和编辑图像 u 在网页中插入和编辑各种Flash 元素（难点） u 在网页中插入音频和视频 u 在网页中插入和编辑各种超链接（难点） u 相对路径和绝对路径（难点） u 图像热点链接（ 难点） 1 文本 1.1 认识【文本】工具栏 文本是网页中最常见、运用最广泛的元素之一,是网 页内容的 核心部分。在网页中添加文本与在Word等文字处 理软件中添加文本一样方便 ， 可以直接输入文本,也可从 其他文档中复制文本，还可以插入水平线和特殊字符等。 使用【文本】工具栏、可以快速插入各种类型的文本 。 单击插入栏上的【文本】选项卡，打开【文本】插入栏。 粗体 斜体 加强 强调 块引用 段落 已编排格式 标题 项目列表 列表项 定义术语 缩写 编号列表 定义列表 定义说明 首字母缩写词 字符 1.2 插入文本 （1）直接输入文本 在DW的【设计】视图中，将 光标移至要插入文本的位置，然 后直接即可。可用Enter键来分 段，用Shift+Enter键强制换行。 （ 2）复制和粘贴文本 （ 3）导入文本 选择【文件】|【导入】可将 Word和Excel的内容直接导入到 网页中。 1 文本 输入文本效果界面 （1）特殊字符 在【文本】工具 栏中，点击【字 符】按钮旁边的 1 文本 1.3 插入特殊字符、水平线和日期 （2）水平线 ：在菜单栏中，选择【插入记 录】｜HTML|【水平线】命令即可插入，选中 该水平线，可在【属性】面板设置它。 下拉箭头进行插 入。 （3）日期 ：在插入栏的【常用】选项卡中， 即可打开日期对话框进 点击【日期】按钮 行插入。 1.4 编辑文本 （1）应用标准文本格式 DW定义了3类标准文本格式：段落（p）、标题（h1- h6）和预格式化文本（pre）。可将光标定位在段落内 或选择段落的全部或部分文本（最小单位是段落），然后 使用【属性】面板的【格式】下拉框应用标准文本格式。 1 文本 （2）设置文本字体 选择要设置字体的文本内容， 然后使用【 属性】面板的【字 体】下拉框选择即可。 选择即可。 （3）设置字体大小 （4）设置文本颜色 择即可。 （5）设置文本对齐方式 使用【属性】面板 使用【属性】面板的 使用【 属性】面板的按 的【大小】下拉框 【文本颜色】按钮选 钮： 即可。从左 到右分别为： 1）左对齐 2）居中对齐 3）居中对齐 4）两端对齐 1 文本 1.4 编辑文本 下面3个操作都需：先选择要操作的文本内容。 2 图像 2.1 插入图像 图像是网页上最常用的元素之一，在网页中适当地插 入图像可以可以大大增强网页的视觉效果。 点击 选择要插入的图像 设置图像的替换文体 2 图像 2.2 设置图像的属性 选中图像后，在【属性】面板即可进行设置。 （1）【图像】文本框：可以省略，设置的值会给img的id和name属性； （2）【宽】和【高】：设置图像的宽度和高度； （3）【替换】：设置图像的替换文本； （4）【类】：选择应用于图像的CSS样式； （5）【链接】和【目标】：