第5章 制作包含常见对象的网页

4 6 20203 38AM 网页中文字与图片的其他属性 以及如何在网页中加入其他对象 第5课为网页添加文本 4 6 20203 38AM 插入文本格式化文本项目列表的应用标尺和网格 课堂讲解 4 6 20203 38AM 插入普通文本插入特殊字符在字符之间添加空格插入水平线和日期时间 插入文本 4 6 20203 38AM 将插入点定位在文档编辑区中 直接输入文本即可 在Word等软件中编辑好文本之后 将其复制到剪贴板上 然后在Dreamweaver8中将插入点定位到文档编辑区中 粘贴剪贴板中的文本即可 插入普通文本 4 6 20203 38AM 设置字体外观设置字体大小设置颜色设置字体样式设置对齐方式设置标题格式设置样式 格式化文本 4 6 20203 38AM 属性面板的 字体 下拉列表框 设置字体外观 4 6 20203 38AM 在属性面板的 大小 下拉列表框字体的度量单位有像素 px 厘米 cm 等 可根据具体情况进行选择 但一般都以像素为单位 设置字体大小 4 6 20203 38AM 单击属性面板中的按钮 在弹出的颜色列表框在其后的文本框中直接输入颜色的英文名 如Red Green等 或以 开头的十六进制颜色代码 如 ff0000 00ff00 设置所选文本的颜色 设置颜色 4 6 20203 38AM 粗体斜体 设置字体样式 4 6 20203 38AM 左对齐 按钮 居中对齐 按钮 右对齐 按钮 两端对齐 按钮 设置对齐方式 4 6 20203 38AM 在属性栏的 格式 下拉列表框 段落 是应用标签的默认格式 标题1 选项应用标签标题号越小 字体越大 设置标题格式 4 6 20203 38AM 属性面板中的 样式 下拉列表框 设置样式 4 6 20203 38AM 编号列表项目列表定义列表为现有文本创建列表创建嵌套列表设置项目列表属性 项目列表的应用 4 6 20203 38AM 编号列表又称为有序列表 是有一定排列顺序的列表 一般前面有数字前导字符 其中前导字符可以是阿拉伯数字 英文字母或罗马数字等 编号列表 4 6 20203 38AM 项目列表又称为无序列表 是一系列无顺序级别关系的项目文本组成的列表 一般前面是用项目符号作为前导字符 项目列表 4 6 20203 38AM 定义列表不使用项目符号或数字这样的前导字符 通常用在词汇表或说明书中 定义列表 4 6 20203 38AM 除了先创建列表项再输入文本外 还可以先输入文本 然后再设置列表项 为现有文本创建列表 4 6 20203 38AM 嵌套列表是包含在其他列表中的列表 创建嵌套列表 4 6 20203 38AM 使用 列表属性 对话框可以设置列表项的外观 包括编号样式 项目符号样式等 设置项目列表属性 4 6 20203 38AM 标尺网格 标尺和网格 4 6 20203 38AM 标尺分为水平标尺和垂直标尺 分别显示在Dreamweaver8文档编辑区的上方和左侧 标尺的单位包括像素 厘米和英寸 在默认状态下使用像素为单位 标尺 4 6 20203 38AM 网格与标尺都是定位工具 但在网页布局中使用网格更方便 文档编辑区中显示了网格后 就可以对网页元素进行准确的定位了 网格 4 6 20203 38AM 编辑文本时 遇到无法通过键盘直接输入的特殊字符 如版权符号 注册商标符号 等 这时可通过插入特殊字符的功能进行插入 插入特殊字符 4 6 20203 38AM HTML编码只允许字符之间包含一个空格 所以在Dreamweaver8中无论按多少次空格键都只会输入一个空格 在字符之间添加空格 4 6 20203 38AM 插入水平线添加水平线修改水平线插入日期 插入水平线和日期时间 4 6 20203 38AM 菜单命令 插入 HTML 水平线 插入 栏中的 HTML 选项卡 单击按钮即可 添加水平线 4 6 20203 38AM 水平线的格式不能满足需要时 可通过属性面板对其进行修改 修改水平线 4 6 20203 38AM 快速插入日期和时间 插入日期 4 6 20203 38AM 在本课的上机实战中 将在已有基本框架 相关知识将在后面几课详细讲解 的 风行天科技 网站的首页页面中添加文本 项目列表 并对它们进行设置 如缩进 加粗 倾斜 大小 颜色等 上机实战 4 6 20203 38AM 网页图像的格式及来源插入图像设置图像属性图像高级设置在网页中使用flash 课堂讲解 4 6 20203 38AM GIF格式JPEG格式PNG格式网页图像来源 网页图像的格式及来源 4 6 20203 38AM GIF是可交换图像格式 它是第一个支持网页的图像格式 在PC机和苹果机上都能被正确识别 它最多支持256种颜色 可以使图像变得容量相当小 GIF图像可以在网页中以透明方式显示 还可以包含动态信息 即GIF动画 GIF格式 4 6 20203 38AM JPEG意为联合图像专家组 它可以高效地压缩图片 丢失人眼不易察觉的部分图像 使文件容量在变小的同时基本不失真 通常用来显示颜色丰富的精美图像 JPEG格式 4 6 20203 38AM PNG全称为 PortableNetworkGraphics 意为便携网络图像 它是逐渐流行的网络图像格式 PNG格式既融合了GIF能透明显示的特点 又具有JPEG处理精美图像的优势 且可以包含图层等信息 常常用于制作网页效果图 PNG格式 4 6 20203 38AM 网页图像的素材有很多来源 如可以使用图形处理软件 如Photoshop Fireworks和FreeHand等软件 制作 可以购买网页素材光盘 可以从网络上下载等 网页图像来源 4 6 20203 38AM 直接插入占位符插入图像的放大显示 插入图像 4 6 20203 38AM 选择 插入 图像 菜单命令 单击插入栏的 常用 选项卡中的按钮 按 Ctrl Alt I 键 直接插入 4 6 20203 38AM 制作网页时还未选定需插入的图像 但确定了图像大小的时候 可以使用占位符来代替图像的方式插入到文档中 将图像确定后双击占位符 在打开的对话框中设置后插入即可 占位符插入 4 6 20203 38AM Dreamweaver8新增的放大镜功能可以让用户更方便地进行对齐图像 选择较小的对象以及查看较小的文本 动画或网页元素等操作 图像的放大显示 4 6 20203 38AM 在网页中插入图像后可通过属性面板对其属性进行修改等设置 设置图像属性 图像命名图像大小编辑图片源文件设置 文本说明图像与文本的对齐图像边距图像边框 4 6 20203 38AM 为了在使用Dreamweaver行为 如交换图像 或脚本语言 如JavaScript或VBScript 时可以引用该图像 可在属性面板的 图像 文本框中为图像命名 图像命名 4 6 20203 38AM 在Dreamweaver8中插入图像后系统会自动将图像的原始大小显示在 宽 和 高 文本框 以像素为单位 中 图像大小 4 6 20203 38AM 在网页中选择图像之后 单击属性面板中的按钮 打开图像处理软件Fireworks 对图像进行处理 编辑图片 4 6 20203 38AM 源文件 文本框中显示了图像的保存路径如果要重新插入一幅新图像 可以在 源文件 文本框中重新输入要插入图像的地址 或单击右侧后的按钮 源文件设置 4 6 20203 38AM 在选取图像后的属性面板的 替换 下拉列表框中可以输入图像的文本说明 文本说明 4 6 20203 38AM 选取图像后 在属性面板的 对齐 下拉列表框中可设置处于同一行上的图像与文本的对齐方式 图像与文本的对齐 4 6 20203 38AM 垂直边距 和 水平边距 文本框中可以设置图像与页面上方和左侧之间的距离 也可以设置图像与其他网页元素之间的距离 图像边距 4 6 20203 38AM 边框 文本框可以设置图像边框的宽度 单位为像素 0 表示无边框 图像边框 4 6 20203 38AM 一幅图片设置了超链接以后 希望单击同一张图片的不同区域 希望链接到不同的网址 就需要使用图像热点工具 热点 图像上被人为分了多个区域 单击不同区域时可以触发不同的操作 每个这样的区域都叫做一个热点 图像热点工具 4 6 20203 38AM 图像热点工具 4 6 20203 38AM 图像热点工具 通过属性中的链接或单击右键选择链接 4 6 20203 38AM 鼠标经过图像设置网页中使用Flash 图像高级设置 4 6 20203 38AM 在浏览器中查看网页时 鼠标光标经过该图像时