第5章制作包含常见对象的网页资料课件

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