第四讲 使用Dreamweaver制作一个简单的网页

4 插入特殊字符
在Dreamweaver 8中编辑文本时，往往会遇到一 些无法通过键盘直接输入的特殊字符，如版权符 号©、注册商标符号®等。 可通过Dreamweaver 8插入特殊字符的功能进行 插入。在“设计”窗口中，将插入点放在要插入 特殊字符的位置，执行下列操作之一： ①选择菜单栏中的“插入 插入/HTML/特殊字符 特殊字符”命令， 插入 特殊字符 现在字符名称。 ②在“插入”面板中的“文本”类别中，单击 “字符按钮”选择需要的字符。
2 在页面中插入和处理图像
2.1 网页图像的格式及来源 2.2 插入图像 2.3 设置图像属性
2.1 网页图像的格式及来源
GIF格式 格式 GIF全称为“Graphics Interchange Format”，意 为可交换图像格式，它是第一个支持网页的图像 格式，在PC机和苹果机上都能被正确识别。它最 多支持256种颜色，可以使图像变得容量相当小。 GIF图像可以在网页中以透明方式显示，还可以 包含动态信息，即GIF动画。
第4 章 使用DW制作一个简单的网页 使用DW制作一个简单的网页 DW
1 2 3
在页面中添加和处理文字 在页面中插入和处理图像 设置网页属性
1 在页面中添加和处理文字
文字处理主要包括： 文字处理主要包括：
输入文字 设置文字大小 设置字体 设置文本颜色 设通文本
3 在字符之间添加“空格” 在字符之间添加“空格”
在Dreamweaver 8.0中一般只能输入一个空格，若要输入 连续的空格时，可以采用下面几种方法中的一种： ①执行菜单命令“编辑/首选参数”，打开“首选参数” 对话框后，选定“分类”栏中的“常规”选项，然后在右 边编辑选项中勾选“允许多个连续的空格”复选框即可。 ②将光标定位到需要输入多个空格的位置，切换到代码视 图即HTML源文档中连续输入多个“ ”。 ③单击插入工具栏文本分类中的“文本”对象，弹出下拉 菜单，选择“不换行空格”选项即可。或者直接按快捷键： Ctrl+Shift+空格键。 ④切换到中文输入法，设置为全角输入状态（Shift+空格 键），然后在欲连续输入空格的位置按空格键。
网页图像来源
网页图像的素材有很多来源，如可以使用图形处 理软件（如Photoshop、Fireworks等软件）制作； 可以购买网页素材光盘；可以从网络上下载等。
2.2 插入图像 1 直接插入
选择[插入] [图像]菜单命令。 单击插入栏的“常用”选项卡中的按钮。 按【Ctrl+Alt+I】键。
2 占位符插入
制作网页时还未选定需插入的图像，但确定了图 像大小的时候，可以使用占位符来代替图像的方 式插入到文档中。 选择[插入] [图像对象] [图像占位符]菜单命令。 单击插入栏的“常用”选项卡中的按钮。 将图像确定后双击占位符，在打开的对话框中设 置后插入即可。
2.3 设置图像属性
在网页中插入图像后可通过属性面板对其属性进 行修改等设置。
6 设置标题格式
在属性栏的“格式”下拉列表框中可设置标题格 式，其中“段落”是应用<p>标签的默认格式， “标题 1”选项应用<H1>标签，设置该选项可以将 1” <H1> 所选的文本设置成各种标题。标题号越小，字体 越大。
1.3 添加和修改水平线
在文档编辑区将插入点定位到所需位置，选择[插 入] [HTML] [水平线]菜单命令或单击“插入”栏 中的“HTML”选项卡在其中单击 按钮即可添加 水平线。
斜体
根据在“首选参数”对话框的“常规”选项中设置的样 式参数选择，将<i>或<em>标签应用于选定的文本，即对 所选文本进行倾斜设置。选中按钮即可将所选的文本应用 “倾斜”。再次单击按钮可取消“加粗”设置。
5 设置对齐方式
通过属性面板中的“左对齐”按钮、“居中对齐” 按钮、“右对齐”按钮和“两端对齐”按钮可设 置文本的对齐方式。
1.2 编辑文字
1 设置字体外观
用户可对属性面板的“字体”下拉列表框中的字体 列表重新编辑。
2 设置字体大小
在属性面板的“大小”下拉列表框中选择相应的 选项，并选择其后的“单位”下拉列表框中相应 的单位选项，即可设置所选文本的字体大小。 其中字体的度量单位有像素（px）、厘米（cm） 等，可根据具体情况进行选择，但一般都以像素 为单位。
将插入点定位在文档编辑区中，直接输入文本即 可。 在Word等文本编辑软件中编辑好文本之后，将其 复制到剪贴板上，然后在Dreamweaver 8中将插 入点定位到文档编辑区中，粘贴剪贴板中的文本 即可。
2 添加“换行” 添加“换行”
如果需要开始新的一段，按<Enter>键即可，对应 的HTML标签是<p>； 如果想换行显示一段内容，可以按<Shift+Enter> 组合键，对应的HTML标签是<br>；如果输入的 文字超出一行的范围，输入的文本将自动换行。
选定插入的水平线，打开属性面板，设置水平线 的高度、宽度、对齐方式以及是否有阴影等属性 设置水平线的颜色 选中水平线，然后单击属性面板中的快速标签编 辑器按钮，打开编辑标签窗口，键入代码，如将 水平线设为红色，键入代码：color=“red”。
1.4 插入日期
在制作网页时，有时需要插入当前的日期， Dreamweaver 8提供了快速插入日期和时间的功 能。
JPEG格式 格式 JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压 缩图片，丢失人眼不易察觉的部分图像，使文件 容量在变小的同时基本不失真，通常用来显示颜 色丰富的精美图像。
PNG格式 格式 PNG全称为“Portable Network Graphics”，意为 便携网络图像，它是逐渐流行的网络图像格式。 PNG格式既融合了GIF能透明显示的特点，又具 有JPEG处理精美图像的优势，且可以包含图层等 信息，常常用于制作网页效果图。
3 源文件设置 在属性面板的“源文件”文本框中显示了图像的 保存路径，如果要重新插入一幅新图像，可以在 选取图像后的属性面板中的“源文件”文本框中 重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重 新选择需要的图像。
4 文本说明 在选取图像后的属性面板的“替换”下拉列表框 中可以输入图像的文本说明。
勾选这里， 勾选这里，日期 在每次保存文件 时自动更新
1.5 项目列表的应用
有序列表又称为编号列表，是有一定排列顺序的 列表，一般前面有数字前导字符，其中前导字符 可以是阿拉伯数字、英文字母或罗马数字等。 无序列表又称为项目列表，是一系列无顺序级别 关系的项目文本组成的列表，一般前面是用项目 符号作为前导字符。 定义列表不使用项目符号或数字这样的前导字符， 通常用在词汇表或说明书中。
3 设置颜色
单击属性面板中的 按钮，在弹出的颜色列表框 中选择相应的选项可设置所选文本的字体颜色， 在其后的文本框中直接输入颜色的英文名（如 Red、Green等）或以“#”开头的十六进制颜色代 码（如#ff0000、＃00ff00）设置所选文本的颜色。
4 设置字体样式
粗体
根据在“首选参数”对话框的“常规”选项中设置的样 式参数选择，将<b>或<strong>标签应用于选定的文本， 即对所选文本加粗。单击按钮即可设置“加粗”设置。再 次单击按钮可取消“加粗”设置。
1 图像命名 为了在使用Dreamweaver行为（如交换图像）或 脚本撰写语言（如JavaScript或VBScript）时可以 引用该图像，可在属性面板的“图像”文本框中 为图像命名。
2 图像大小 在Dreamweaver 8中插入图像后系统会自动将图 像的原始大小显示在“宽”和“高”文本框（以 像素为单位）中。 在“宽”和“高”文本框中输入新值，实现图像 大小改变，但却与图像的实际宽度和高度不相符， 若要恢复图像原始值，可单击“宽”和“高”文 本框右侧的“恢复图像到原始大小”按钮重设大 小。
5 图像与文本的对齐 选取图像后，在属性面板的“对齐”下拉列表框 中可设置处于同一行上的图像与文本的对齐方式。
6 图像边距 选取图像在属性面板的“垂直边距”和“水平边 距”文本框中可以设置图像与页面上方和左侧之 间的距离，也可以设置图像与其他网页元素之间 的距离。
7 图像边框 选取图像后，在属性面板的“边框”文本框中可 以设置图像边框的宽度，单位为像素，“0”表示 无边框。
3 设置网页的页面属性
页面属性是指网页的一般属性信息，例如，网页 标题、网页背景颜色、背景图像、超链接颜色、 跟踪图像等。 1.设置网页标题及编码 1.设置网页标题及编码 2. 设置网页其他属性 (1)外观 (1)外观 (2)链接 (2)链接 (3)跟踪图像 (3)跟踪图像
综合实例