项目3 文本和图像

第3章文本和图像复习与提问以“基本的模式”创建本地站点,命名为“广东文理职业学院”，保存在桌面上的“p2”文件夹新建一个网页，命名为index.html，保存在本地站点里本章要点插入文本和编辑文本图像文件的类型插入图像和设置图像属性插入鼠标经过图像插入导航条3.1.1添加文本执行下列操作之一：

直接在＂文档＂窗口中键入文本。从其他应用程序中复制文本，切换到Dreamweaver，将插入点定位在＂文档＂窗口的＂设计＂视图中，然后选择＂编辑＂>＂粘贴＂（Ctrl+V）或＂编辑＂>＂选择性粘贴＂（Ctrl+Shift+V）。（如图3-1所示）。3.1.2设置段落格式

使用＂属性＂检查器中的＂格式＂下拉菜单或＂文本＂>＂段落格式＂子菜单可以应用标准段落和标题标签。1）将插入点放在段落中，或者选择段落中的一些文本。2）使用＂文本＂>＂段落格式＂子菜单或＂属性＂检查器中的＂格式＂弹出式菜单，选择一个选项：

选择段落格式（例如，＂标题1＂、＂标题2＂、＂已编排格式＂等）。与所选样式关联的HTML标签（例如，表示＂标题1＂的h1、表示＂标题2＂的h2、表示＂已编排格式＂文本的pre等）即应用于整个段落。如图3-2所示。选择＂无＂删除段落格式。

对段落应用标题标签时，Dreamweaver自动添加下一行文本作为标准段落。若要更改此设置，选择＂编辑＂>＂首选参数＂；然后在＂常规＂类别中的＂编辑选项＂下确保取消选择＂标题后切换到普通段落＂。3.1.3更改文本颜色

可以更改所选文本的颜色，使新颜色覆盖＂页面属性＂中设置的文本颜色。（如果未在＂页面属性＂中设置任何文本颜色，则默认文本颜色为黑色。）1）选择文本。2）执行下列操作之一：单击＂属性＂检查器中的颜色选择器，从调色板中选择一种颜色。选择＂文本＂>＂颜色＂。出现系统颜色选择器对话框。选择一种颜色，然后单击＂确定＂。直接在＂属性＂检查器字段中输入颜色名称或十六进制数字。如图3-2所示。若要定义默认文本颜色，可使用＂修改＂>＂页面属性＂命令。3.1.4更改字体及样式

1．设置或更改字体特性：1)选择文本。如果未选择文本，更改将应用于随后键入的文本。2)从＂属性＂检查器或＂文本＂>＂字体＂子菜单中选择字体组合。或选择＂默认＂删除先前应用的字体；＂默认＂对所选文本应用默认字体（或者是浏览器的默认字体，或者是在CSS样式表中指定给该标签的字体）。2．更改字体样式：单击＂属性＂检查器中的＂粗体＂或＂斜体＂，或者从＂文本＂>＂样式＂子菜单中选择字体样式（＂粗体＂、＂斜体＂、＂下划线＂等）。3．更改字体大小：“属性”检查器或“文本”>“大小”子菜单中选择大小（从1到7）。3.1.5对齐文本

使用＂属性＂检查器或＂文本＂>＂对齐＂子菜单可以对齐页面上的文本。使用＂文本＂>＂对齐＂>＂居中对齐＂命令可以将页面元素居中对齐。1）选择要对齐的文本，或者只需将指针插入到文本开头。2）单击＂属性＂检查器中的对齐选项（＂左对齐＂、＂右对齐＂或＂居中对齐＂），或者选择＂文本＂>＂对齐＂，然后选择对齐命令。

3.1.6缩进文本1）将插入点放在要缩进的段落中。2）单击＂属性＂检查器中的＂缩进＂或＂凸出＂按钮，或选择＂文本＂>＂缩进＂或＂凸出＂，或从上下文菜单中选择＂列表＂>＂缩进＂或＂凸出＂。

3.1.7添加段落间距

按Enter键可以创建一个新段落。Web浏览器在段落之间自动插入一个空白空格行。通过插入一个换行符，可以在段落之间添加一个空格行。3.1.8创建项目列表和编号列表

1)选择一系列段落组成一个列表。2)单击＂属性＂检查器中的＂项目列表＂或＂编号列表＂按钮，或选择＂文本＂>＂列表＂，然后选择所需的列表类型：＂项目列表＂、＂编号列表＂或＂定义列表＂3.1.9插入特殊字符

1)在＂文档＂窗口中，将插入点放在要插入特殊字符的位置。2)从＂插入＂>＂HTML＂>＂特殊字符＂子菜单中选择字符名称，或在＂插入＂栏中的＂文本＂类别中，单击＂字符＂按钮选择需要的字符。

3.1.10在字符之间添加空格

HTML只允许字符之间包含一个空格；若要在文档中添加其他空格，必须插入连续空格。可以设置一个在文档中自动添加不换行空格的首选参数。插入不换行空格，执行下列操作之一：选择＂插入＂>＂HTML＂>＂特殊字符＂>＂不换行空格＂。按Ctrl+Shift+空格键。设置添加不换行空格的首选参数的操作如下：1）执行＂编辑>首选＂参数菜单命令。2）在＂常规＂类别中确保选择＂允许多个连续空格选项＂，即可完成。3.1.11使用水平线

1.创建水平线：１）在＂文档＂窗口中，将插入点放在要插入水平线的位置。２）选择＂插入＂>＂HTML＂>＂水平线＂。2.修改水平线：1)在＂文档＂窗口中，选择水平线。2)选择＂窗口＂>＂属性＂打开＂属性＂检查器，然后根据需要对属性进行修改：宽和高以像素为单位或以页面尺寸百分比的形式指定水平线的宽度和高度。对齐指定水平线的对齐方式（＂默认＂、＂左对齐＂、＂居中对齐＂或＂右对齐＂）。仅当水平线的宽度小于浏览器窗口的宽度时，该设置才适用。阴影指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。

3.1.12插入日期

1)在＂文档＂窗口中，将插入点放在要插入日期的位置。2)选择＂插入＂>＂日期＂，或在＂插入＂栏的＂常用＂类别中，单击＂日期＂按钮。3)在出现的对话框中，选择星期格式、日期格式和时间格式。如图3-3所示。4)如果希望在每次保存文档时都更新插入的日期，选择＂储存时自动更新＂。如果希望日期在插入后变成纯文本并永远不自动更新，取消选择该选项。5)单击＂确定＂插入日期。如果选择了＂储存时自动更新＂，则在日期格式插入到文档中后可以对其进行编辑，方法是单击已设置格式的文本，然后在＂属性＂检查器中选择＂编辑日期格式＂。

例3-1（3_1.html）参考如图3-1所示，插入文本，设置文本属性，插入水平线和日期。建立网站。新建网页＂3_1.html＂。插入文本，可以在打开帮助，选取文本，粘贴文本；也可以直接输入文本。设置段落格式。设置标题格式。更改文本大小及颜色对齐文本和缩进文本。添加段落间距。在文本中插入空格和其他特殊字符。创建项目列表和编号列表。插入日期。保存网页。3.2插入图像Web页面中经常使用的图像格式只有三种，即GIF、JPEG和PNG。

GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明的支持。PNG是MacromediaFireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有.png文件扩展名才能被识别为PNG文件。3.1.1插入图像

插入图像的方法：在＂插入＂栏的＂常用＂类别中，单击＂图像＂图标。在＂插入＂栏的＂常用＂类别中，将＂图像＂图标拖入＂文档＂窗口中。选择＂插入＂>＂图像＂。将图像从＂资源＂面板（＂窗口＂>＂资源＂）拖到＂文档＂窗口中的所需位置。将图像从＂站点＂面板拖到＂文档＂窗口中的所需位置。将图像从桌面拖到＂文档＂窗口中的所需位置。在【选择图像源文件】对话框中执行下列操作之一：选择【文件系统】以选择一个图形文件（此项为默认项）选择【数据源】以选择一个动态图像源。动态图像是指那些经常变化的图像，例如：广告横幅旋转系统需要请求页面时从可用横幅列表中随机选择一个横幅，然后动态显示所选横幅图像。

浏览以选择要插入的图像或内容源：如果正在一个未保存的文档中工作，则生成一个对图像文件的“file://”引用。将文档保存到站点中的任何位置后，该引用就转换为文档的相对路径。

3.2.2设置图像属性宽和高：以像素为单位指定图像的宽度和高度。当在页中插入图像时，自动用图像的原始尺寸更新这些文本框。源文件：指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。链接：指定图像的超级链接。将＂指向文件＂图标拖到＂站点＂面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入URL。对齐：对齐同一行上的图像和文本。替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。地图名称和热点工具：允许标注和创建客户端图像地图。垂直边距和水平边距：沿图像的边缘添加边距（以像素为单位）。＂垂直边距＂沿图像的顶部和底部添加边距。＂水平边距＂沿图像左侧和右侧添加边距。例3-2（3_2.html）新建网页，插入图像，设置图像属性。1）打开网站，建立网页3_2.html，如图3-7所示。2）插入表格(4行1列，宽度780，边框0，居中对齐)。3）在第1行（拆分单元格）左边插入图像（a2.gif），设置大小为630*150；右边插入图像（28.jpg），大小为150*150。4）在第2行插入表格(1行9列，宽度780，边框0，具中对齐)，在表格内插入链接文本和＂|＂，修改属性。5）在第3行插入文本，设置属性，插入图像（huangshizhai.jpg），设置属性＂对齐＂为＂左＂。6）在第4行插入版权文本和日期等信息。3.2.3插入图像占位符图像占位符是在准备好将最终图形添加到Web页面之前使用的图形。插入图像占位符：1)在＂文档＂窗口中，将插入点放置在要插入占位符图形的位置。2)执行下列操作之一：在＂插入记录＂插入栏中，选择＂图像对象＂，再选择插入＂图像占位符＂。占位符的颜色、大小属性和标签如图3-8所示。当在浏览器中查看时，不显示标签文字和大小文本。如图3-8所示。.3.2.4对齐图像可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。还可以设置图像的水平对齐方式。1)在＂设计＂视图中选择该图像。2)在＂属性＂检查器中设置该图像的对齐属性。如图3-9所示。3.2.5调整图像大小1．以可视方式调整元素的大小：1)在＂文档＂窗口中选择该元素（例如，一个图像或SWF文件）。元素的底部、右侧及右下角出现调整大小控制点。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。2）调整元素的大小。调整元素的宽度：拖动右侧的选择控制点。调整元素的高度：拖动底部的选择控制点。同时调整元素的宽度和高度：拖动顶角的选择控制点。2．在调整元素尺寸时保持元素的比例（其宽高比）：在按住Shift

键的同时拖动顶角的选择控制点。（想恢复到原始尺寸，可以删除属性检查器中的【宽】和【高】的值或者单击“重设大小”）

3.2.6裁剪图像1)打开包含要裁剪的图像的页面，选择图像，单击图像属性检查器中的＂裁减工具＂图标或选择＂修改＂>＂图像＂>＂裁剪＂。所选图像周围会出现裁剪控制点。2)调整裁剪控制点直到边界框包含的图像区域符合所需大小。3)在边界框内部双击或按Enter键裁剪所选区域。4）单击＂确定＂。所选位图的边界框外的所有像素都将被删除，但将保留图像中的其它对象。3.2.7插入鼠标经过图像选择“插入”>“交互式图像”>“鼠标经过图像”。随即显示“插入鼠标经过图像”对话框（如3.3html）。（1）在＂图像名称＂文本框中，键入鼠标经过图像的名称。本例输入＂image1＂（２）在＂原始图像＂文本框中，单击＂浏览＂并选择要在载入页时显示的图像，或在文本框中输入图像文件的路径。本例输入＂学院总体图1.gif＂（３）在＂鼠标经过图像＂文本框中，单击＂浏览＂并选择要在鼠标指针滑过原始图像时显示的图像，或在文本框中输入图像文件的路径。本例输入＂学院总体图2.gif＂（４）如果希望图像预先载入浏览器的缓存中，以便用户将鼠标指针滑过图像时不发生延