《中文版网页制作实用教程》课件第11章.ppt

《《中文版网页制作实用教程》课件第11章.ppt》由会员分享，可在线阅读，更多相关《《中文版网页制作实用教程》课件第11章.ppt（18页珍藏版）》请在三一办公上搜索。

1、第4章 插入文本和图像,文本与图像是网页制作中最重要的两大元素。文本组成了大部分网页的结构；而图像在页面中的恰当运用，不仅使得网页更加美观，而且令网页表达信息更加直观，吸引了浏览者。本章主要介绍了在通常网页制作过程中如添加并设置各种文本、图像元素。通过本章知识的学习，用户可以掌握各种编辑网页文本与图像的方法，包括设置文本的格式、使用统一样式、添加按钮、插入背景照片、创建鼠标指针经过图像、导航条等。,教学重点与难点,绘制点 插入文本 编辑文本 插入图像 编辑图像 创建网页导航条,4.1 插入文本,文本时网页中最常见也是运用最广泛的元素之一，是网页内容的核心部分。在网页中哈如文本与在Word等文字

2、处理软件中添加文本一样方便，可以直接输入文本，也可以从其他文档中复制文本，还可以插入水平线和特殊字符等。认识“文本”插入栏 插入文本 插入水平线和日期,4.1.1 认识“文本”插入栏,使用“文本”工具栏，可以快速第插入各种类型的文本。单击插入栏上的“文本”选项卡，打开“文本”插入栏，如图所示。,4.1.2 插入文本,在Dreamweaver CS3中输入文本是非常简单的，其输入方式与其他文本处理软件中的文本输入方式十分类似。,4.1.3 插入水平线和日期,水平线对于信息的组织很有用，在页面中，可以使用一条或多条水平线来可视化分隔文本和对象，使用段落更加分明和更具层次感。在Dreamweaver

3、 CS3中，还可以插入日期对象，可以以任何格式插入当前的日期(可以包括时间)，并且在每次保存文件时都会自动更新该日期。,4.2 编辑文本,对于插入的文本，可以进行相应的编辑，使枯燥的文本更显生动。编辑文本的操作主要指设置文本的基本格式，例如文本字体、字体颜色、对齐方式等。设置文本格式 查找和替换文本,4.2.1 设置文本格式,设置文本格式，可以使文本更加条理清楚、主次分明。可以在文本的“属性”面板中进行相应的设置，完成文本格式的设置。,4.2.2 查找和替换文本,在建立Web站点的过程中，有时会需要更新或者简单地修改某些文本内容。DreamweaverCS3提供的查找与替换功能，可以快速地打开

4、指定的网页、文件夹或站点的文本、HTML源代码、标签所在的位置，同时还可以对查找到的内容进行替换。要使用查找与替换功能，可以选择“编辑”|“查找和替换”命令，打开“查找和替换”对话框，如图所示，该对话框中各选项具体作用如下。,4.3 插入图像,图像是网页上最常用的对象之一，制作精美的图像可以大大增强网页的视觉效果。图像所蕴涵的信息量对于网页而言越加显得重要。在网页中插入图像通常是用于添加图形界面(例如按钮)、创建具有视觉感染力的内容(例如照片、背景等)或交互式设计元素(例如鼠标指针经过图像或图像地图)。网页中常见的图像格式 在网页中插入图像,4.3.1 网页中常见的图像格式,图像是网页中非常重

5、要的内容。在Dreamweaver CS3中，可以在页面中插入图像，并利用软件自带的功能设置各种图像效果，例如导航栏、链接和鼠标经过效果等。网页中常用的图像文件格式有JPEG(JPG)、GIF和PNG这3种。,4.3.2 在网页中插入图像,如果网页中的内容全是密密麻麻的文字，无论有多精彩的内容，都容易产生厌烦感。所以任何精美的网页中可能没有文本，但不可能没有图像等多媒体元素，这足见图像在网页中的作用。在网页中适当地插入图像可以使网页增色不少，更重要是可以借此直观地向浏览者表达信息。,4.4 编辑图像,在网页中插入图像后，需要设置图像属性和排列图像与文本之间的位置，这将直接影响网页的整体效果。设

6、置图像属性 使用图像编辑器,4.4.1 设置图像属性,设置图片属性，主要包括设置图片的大小、对齐方式、边距等。,4.4.2 使用图像编辑器,图像编辑器，主要分为内部图像编辑器和外部图像编辑器。,4.5 创建网页导航条,“导航条”由一个或多个图像组成，它的显示随着动作的改变而改变，因此，在使用导航条命令之前，应首先创建一个用于导航条的图像集。插入导航条 编辑导航条,4.5.1 插入导航条,要在网页文档中插入导航条，“插入”栏中的“常用”选项卡，打开“常用”插入栏，单击“图像”按钮右边的下拉箭头，在弹出的菜单中选择“导航条”命令，打开“插入导航条”对话框，如图所示。,4.5.2 编辑导航条,用户在文档创建导航条后，选择“修改”|“导航条”命令，打开“修改导航条”对话框，如图所示。在该对话框中可以添加图像，或从导航条中删除图像。用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。,