网页制作第3次

1、第三课 使用文本和图像w 使用文本w 使用图像w 插入文本 w 格式化文本 w 项目列表的应用为网页添加文本 插入文本 w 插入普通文本 w 插入特殊字符 w 在字符之间添加空格 w 插入其他文本插入普通文本 w 将插入点定位在文档编辑区中，直接输入文本即可。Enter：创建新段落。Shift+Enter：换行。w 在Word等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在Dreamweaver 8中将插入点定位到文档编辑区中，粘贴剪贴板中的文本即可。 插入特殊字符 在Dreamweaver 8中编辑文本时，往往会遇到一些无法通过键盘直接输入的特殊字符，如版权符号、注册商标符号等，这

2、时可通过Dreamweaver 8插入特殊字符的功能进行插入。 在字符之间添加空格 Dreamweaver 8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver 8中无论按多少次空格键都只会输入一个空格。 插入其他文本w 插入水平线 添加水平线 修改水平线 w 插入日期 添加水平线 在文档编辑区将插入点定位到所需位置，选择插入HTML水平线菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。 修改水平线 初始绘制的水平线的格式往往不能满足实际需要，此时可通过属性面板对其进行修改。 插入日期 在制作网页时，

3、有时需要插入当前的日期，Dreamweaver 8提供了快速插入日期和时间的功能。 格式化文本 w 设置字体外观 w 设置字体大小 w 设置颜色 w 设置字体样式 w 设置对齐方式 w 设置标题格式 设置字体外观 用户也可对属性面板的“字体”下拉列表框中的字体列表重新编辑。 设置字体大小 在属性面板的“大小”下拉列表框中选择相应的选项，并选择其后的“单位”下拉列表框中相应的单位选项，即可设置所选文本的字体大小。 其中字体的度量单位有像素（px）、厘米（cm）等，可根据具体情况进行选择，但一般都以像素为单位。 设置颜色 单击属性面板中的 按钮，在弹出的颜色列表框中选择相应的选项可设置所选文本的字

4、体颜色，在其后的文本框中直接输入颜色的英文名（如Red、Green等）或以“#”开头的十六进制颜色代码（如#ff0000、00ff00）设置所选文本的颜色。设置字体样式 w 粗体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本加粗。单击按钮即可设置“加粗”设置，再次单击按钮可取消“加粗”设置。w 斜体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本进行倾斜设置。选中按钮即可将所选的文本应用“倾斜”。再次单击按钮可取消“倾斜”设置。 设置对齐方式 通过属性面板中的“左对齐”按钮、“居中对齐”按

5、钮、“右对齐”按钮和“两端对齐”按钮可设置文本的对齐方式。 设置标题格式 在属性栏的“格式”下拉列表框中可设置标题格式，其中“段落”是应用标签的默认格式，“标题 1”选项应用标签，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。 项目列表的应用 w 有序列表w 无序列表w 定义列表 w 为现有文本创建列表 w 创建嵌套列表 w 设置项目列表属性 有序列表 有序列表又称为编号列表，是指将具有相似特性或某种顺序的文本进行有规则地排列，列表常应用在条款或列举等类型的文本中，用列表的方式进行罗列可使内容更直观。在文档窗口中，可以用现有文本或新文本创建编号列表、项目列表及定义列表。一般列

6、表的前面有数字前导字符，其中前导字符可以是阿拉伯数字、英文字母或罗马数字等。 w 编号列表： 1：将鼠标光标定位到要创建编号列表的位置。 2：单击“属性”面板中的“编号列表”按钮，数字前导字符将出现在鼠标光标前。 3：在数字前导字符后输入相应的文本，按“Enter”键换行后，下一个数字前导字符将自动出现。 4：继续输入其他列表项的创建，完成整个列表的创建后按两次“Enter”键即可。无序列表 无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。 w 项目列表：w 1：将鼠标光标定位到要创建项目列表的位置。w 2：在“属性”面板中单击“项目列表”

7、按钮，将出现项目符号前导字符。w 3：在前导字符后面输入文本，然后按“Enter”键，项目符号前导字符将自动出现在新行的最前面。w 4：继续创建其他列表项，完成整个列表的创建后按两次“Enter”键即可。定义列表 定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。 w 定义列表：w 1：将鼠标光标定位到要创建定义列表的位置，选择“插入/HTML/文本对象/定义列表”命令。w 2：输入文本后按“Enter”键，系统会自动换行，并在新行中进行缩进，输入对上一行文本的解释文本或小类后按“Enter”键。w 3：继续输入其他项目，输入结束后按两次“Enter”键即可完成整个列表的创

8、建。为现有文本创建列表 除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。 创建嵌套列表 嵌套列表是包含在其他列表中的列表。 w 创建嵌套列表 w 1：选择要嵌套的列表项目。w 2：在属性中，单击“缩进”按钮或选择“格式”“缩进”。w 3：Dreamweaver 缩进文本并创建一个单独的列表，该列表具有原始列表的 HTML 属性。w 4：按照上面使用的同一过程，对缩进的文本应用新的列表类型或样式设置项目列表属性 使用“列表属性”对话框可以设置列表项的外观，包括编号样式、项目符号样式等。方法：在属性面板中点击列表属性按钮 其中：列表类型列表类型: 指定列表属性，根据所选的“列表类

9、型”，使用弹出菜单选择项目、编号、目录或菜单列表对话框中将出现不同的选项。样式: 确定用于编号列表或项目列表的编号或项目符号的样式。所有列表项目都将具有该样式，除非为列表项目指定新样式。开始计数: 设置编号列表中第一个项目的值。标尺和网格 w 标尺 w 网格 标尺 标尺分为水平标尺和垂直标尺，分别显示在Dreamweaver 8文档编辑区的上方和左侧。标尺的单位包括像素、厘米和英寸，在默认状态下使用像素为单位。 方法： 查看菜单 网格 网格与标尺都是定位工具，但在网页布局中使用网格更方便。文档编辑区中显示了网格后，就可以对网页元素进行准确的定位了。 方法： 查看菜单为网页添加图像 w 网页图像

10、的格式及来源w 插入图像 w 设置图像属性 w 图像高级设置 网页图像的格式及来源w GIF格式 w JPEG格式 w PNG格式 w 网页图像来源 GIF格式 GIF全称为“Graphics Interchange Format”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。 JPEG格式 JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的

11、部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。缺点：不支持透明和动画效果。 PNG格式 PNG全称为“Portable Network Graphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。优点：图像品质高 ，下载速度快，支持透明。缺点：不支持动画效果。网页图像来源 网页图像的素材有很多来源，如可以使用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作；可以购买网页素材光盘；可以从网络上下载等。 插

12、入图像 w 直接插入 w 占位符插入 w 图像的放大显示 直接插入 w 将鼠标光标定位到要插入图像的位置，选择插入图像菜单命令。w 单击插入栏的“常用”选项卡中的图像按钮。w 按【Ctrl+Alt+I】键。 占位符插入 制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。 将图像确定后双击占位符，在打开的对话框中设置后插入即可。 方法： 选择“插入”“图像对象”“图像占位符”。 在“图像占位符”对话框中，输入下面的属性：“名称” “宽度”“高度”单击颜色框并从颜色选择器中选择一种颜色。图像的放大显示 Dreamweaver 8新增的放大镜功能可以

13、让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页元素等操作。 设置图像属性 在网页中插入图像后可通过属性面板对其属性进行修改等设置。 图像命名 图像大小 编辑图片 源文件设置 文本说明 图像与文本的对齐 图像边距 图像边框 图像命名 为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。 图像大小 在Dreamweaver 8中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。 编辑图片 在网页中选择图像之后，单击属性面板中的

14、按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。 源文件设置 在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。 文本说明 在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。 图像与文本的对齐 选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。

15、图像边距 选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离。 图像边框 选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。 链接 为当前图像指定链接目标。如单击图像打开新浪网，可在文本框中输入“http:/” 图像高级设置鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。 浏览网页时，当鼠标移动到原始图像上时，会显示另外一张图像，鼠标移除时，图像范围则恢复为原始图像。鼠标经过图像由原始图像和鼠标经过图像组成，因此，

16、创建鼠标经过图像时必须先准备两张大小相同的图像。 鼠标经过图像设置步骤 方法：w 新建空白HTML网页，将鼠标光标定位在要插入鼠标经过图像的位置w 选择“插入/图像对象/鼠标经过图像”命令，打开“插入鼠标经过图像”对话框w 在“图像名称”文本框中输入图像名称，单击“原始图像”文本框后的“浏览”按钮。在打开的对话框中选择原始图像。确定。w 使用同样的方法为鼠标经过图像选择图像，再在“替换文本”文本框中输入替换文本，在“按下时，前往的URL”文本框中输入单击图像时打开的网页地址。 确定。完成鼠标经过图像的创建。上机w 岳飞 -满江红 本练习要求在空白文档中输入宋词满江红，标题“满江红”和作者“岳飞

17、”的编排要求每两个字之间插入两个空格，然后再将所有文本使用“隶书，华文行楷”为字集。最后在文档中插入两个鼠标经过图像，要求两个鼠标经过间的图像变化效果相反。 补充：HTML文件的基本结构HTML文件是一种纯文本格式的文件，HTML文件包括HTML、头部（head）和主体(body)三个标记。文件基本结构为： 网页标题 网页的内容 代表是一个HTML文件（无属性设置）网页的头部网页的标题网页内容，HTML主要的部分以上三种标记必须成对使用说明：HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐内部的内容向右缩进几格。例：简单的HTML文件。 简单的HTML文

18、件 最简单的网页 1.HTML文档标记2.HTML文件头标记3. HTML文件标题标记4. HTML文件主体标记1.HTML文档标记文档标记 HTML文档标记的格式为： 文档的内容 HTML文档的标记。处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到遇到为止。 每个HTML文件均以开始，以结束。2.HTML文件头标记习惯上将HTML文档分为文件头和文件主体两部分。文件主体是在WEB浏览器窗口的用户区显示的内容，而文件头则用来规定该文档的标题（浏览器标题栏中的内容）和文档的一些属性。HTML文件头标记格式： 头部的内容说明：HTML文件的头部在文件标记之后，在开始标记间定义。其内容可以是标题名，文本文件地址、创作信息等网页信息说明。对应于相应的标记，有标题标记等。标记在HT