第3章 编辑网页文本及图像精要.ppt

3.2 编辑网页图像 插入鼠标经过图像 3.2 编辑网页图像 插入分层图像 通常情况下插入网页中的图像格式为GIF或者JPEG，但是由于Dreamweaver CS3包括了与Photoshop CS3相同的增强的集成功能，这样在Dreamweaver中就可以插入具有多个图层的图像。与Photoshop CS3相结合，还可以根据不同的情况插入选区图像或者切片图像。 插入PSD格式图像 插入PSD格式图像的方法与插入普通图像的方法相同，但选择图像时选择PSD格式图像即可。在选择了相应的图像后，系统弹出图像预览对话框，用于预览图像效果以及设置图像将要显示在网页中的格式。如图所示。 3.2 编辑网页图像 插入分层图像 插入PSD格式图像 3.2 编辑网页图像 插入分层图像 插入一层图像 由于PSD图像为一个多图层图像，所以还可以在Photoshop CS3中选择并复制一个图层，然后粘贴到Dreamweaver CS3中。 插入一层图像的方法是首先启动Photoshop CS3，选择其中需要的一层图像，执行全选，再执行复制，进入Dreamweaver CS3，将光标定位到需要插入该图像的位置，执行粘贴操作，此时弹出图像预览对话框，用户根据需要设置好格式、大小等后，单击确定按钮即可。 3.2 编辑网页图像 插入分层图像 插入选区图像 除了复制单个图层的图像到网页中以外，还可以复制整幅图像中的一部分到网页中。 插入选区图像的方法是首先启动Photoshop CS3，利用Photoshop CS3中的选取工具选择其中需要的部分图像，执行复制操作，进入Dreamweaver CS3，将光标定位到需要插入该图像的位置，执行粘贴操作，此时弹出图像预览对话框，用户根据需要设置好格式、大小等后，单击确定按钮即可。 3.2 编辑网页图像 插入分层图像 插入切片图像 在Dreamweaver CS3中还可以插入利用Photoshop CS3切片的切片图像。 插入切片图像的方法是首先启动Photoshop CS3，利用Photoshop CS3中的切片工具（ ）对图像进行切片，再使用切片选择工具（ ）选择需要的切片图像，执行复制操作，进入Dreamweaver CS3，将光标定位到需要插入该图像的位置，执行粘贴操作，此时弹出图像预览对话框，用户根据需要设置好格式、大小等后，单击确定按钮即可。 3.2 编辑网页图像 课堂案例3-3 （1） 将在“关于我”页面中要用到的图片拷贝到站点的“images”文件夹下 第3章 编辑网页文本及图像 本章要点： 网页文本的编辑 图像的插入及编辑 3.1 编辑网页文本 文本是网页中最基本的元素，具有信息量大、编辑方便、生成文件小、容易被浏览器下载等特点。因此，掌握好对文本的编辑，是做好网页的基本要求。 插入文本 1、插入普通文本 直接输入法 复制粘贴法 导入Word文档 3.1 编辑网页文本 插入文本 2、插入特殊符号 【插入记录】 →【HTML】 →【特殊字符】 3.1 编辑网页文本 插入文本 3、插入段落文本 在网页中，是以Enter键作为段落标记的。当在文档窗口中输入了一段文本，按Enter键后，已经输入的文本将转换为段落，在光标后再次输入的文本作为一个新的段落。 若希望段落与段落之间没有空行，那么可以在按下Shift+Enter键。 3.1 编辑网页文本 插入文本 4、创建项目列表以及编号列表 无序列表（项目列表） 【文本】→【列表】 →【项目列表】 3.1 编辑网页文本 插入文本 4、创建项目列表以及编号列表 有序列表（编号列表） 【文本】→【列表】 →【编号列表】 3.1 编辑网页文本 课堂案例3-1 （1） 在Dreamweaver中新建HTML页面，并保存到站点“MyBlog”，命名为“about.htm” 3.1 编辑网页文本 课堂案例3-1 （2） 设置标题为“关于我” （3） 在文档窗口中输入文字 3.1 编辑网页文本 课堂案例3-1 （4） 将光标置于第一行文字末，并按Enter键。 （5） 选择【插入】|【HTML】|【水平线】 3.1 编辑网页文本 课堂案例3-1 （6） 在Dreamweaver中继续输入文本 （7） 保存网页文件 3.1 编辑网页文本 格式化文本 无论制作网页的目的是什么，文本都是网页中不可缺少的网页元素。良好的文本格式，能够充分体现文档要表述的意图，激发读者的阅读兴趣。 在文档中构建丰富的字体、段落格式以及赏心悦目的文本效果，对于一个专业的网站来说，是必不可少的要求之一。 3.1 编辑网页文本 格式化文本 Dreamweaver是一种所见即所得的网页制作工具，这意味着对文本格式的设置，可以直接从屏幕上看到设置结果，Dreamweave