第3章 编辑网页文本及图像

第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是一种所见即所得的网页制作工具，这意味着对文本格式的设置，可以直接从屏幕上看到设置结果，Dreamweaver提供了强大的文本格式化功能，您几乎可以随心所欲地对文档进行各种格式化操作。无论在文档中选择的是文本、段落还是列表，在属性面板中都会显示文本属性中的各个选项3.1编辑网页文本格式化普通文本常见的普通文本格式化主要包括文本颜色、字体、大小、粗体、斜体等。这些均可以在文本属性面板中进行设置。设置字体时用户只需在属性面板中字体下拉列表中选择相应的字体；设置文本大小时用户只需在属性面板大小中输入相应数值并在其后的单位下拉列表中选择单位；设置字体颜色时用户只需在属性面板中单击文本颜色，在弹出的颜色拾取器中选择相应的颜色；设置字体加粗、倾斜时只需单击属性面板中和

两个按钮即可。3.1编辑网页文本格式化普通文本例如为普通文本设置字体为：黑体，大小为20px，粗体加斜体，字体颜色为红色后的效果对比如图所示。3.1编辑网页文本格式化段落文本段落文本除了可以设置普通文本的属性外，还可以设置排列方式、缩进等。用户只需单击相应属性面板中的按钮即可。常见的段落对齐方式主要有左对齐（）、居中对齐（）、右对齐（）以及两端对齐（），用户只需选择相应段落，再单击相应的对齐按钮；段落的缩进主要有文本凸出（）和文本缩进（）两种操作，用户需要增加段落的左缩进时，只需选择相应段落，再单击文本缩进按钮；用户需要减少段落的左缩进时，只需选择相应段落，再单击文本凸出按钮。3.1编辑网页文本格式化列表若要更改列表类型（将编号列表转换为项目列表或将项目列表转换为编号列表），用户只需要选择需要更改的列表项目，再单击属性面板中的编号列表按钮（）或项目列表按钮（）。3.1编辑网页文本格式化列表若要更改列表的样式、开始计数值时，用户首先选择需要更改的相应列表项目，再执行菜单“文本”→“列表”→“属性”命令，此时系统弹出“列表属性”对话框，如图所示。用户根据需要在该对话框中选择相应的选项即可。3.1编辑网页文本课堂案例3-2（1）打开课堂案例3-1中完成的页面“about.htm”。（2）选择“关于我”文字，并在【属性】面板中设置格式为“标题1”3.1编辑网页文本课堂案例3-2（3）选择“文章分类”文字，并在【属性】面板中设置格式为“标题2”3.1编辑网页文本课堂案例3-2（4）按步骤（8）的方法，对文字“最近发表”设置格式为“标题2”。（5）选择“文章分类”下面的四段文字，并在【属性】面板中点击，将文字设置为项目列表3.1编辑网页文本课堂案例3-2（6）按步骤（5）的方法对“最近发表”下面的文字设置项目列表格式。（7）保存网页文件。3.2编辑网页图像图像格式PNG（PortableNetworkGraphic）PNG格式是WEB图像中最通用的格式。它是一种无损压缩格式，但是如果没有插件支持，有的浏览器可能不支持这种格式。PNG格式最多可以支持32位颜色，但是不支持动画图。GIF（GraphicsInterchangeFormat）GIF是Web上最常用的图像格式，它可以用来存储各种图像文件。特别适用于存储线条、图标和电脑生成的图像、卡通和其它有大色块的图像。GIF文件非常小，它形成的是一种压缩的8位图像文件，所以最多只支持256种不同的颜色。Gif支持动态图、透明图和交织图3.2编辑网页图像图像格式BMP（WindowsBitmap）BMP格式使用的是索引色彩，它的图像具有极其丰富的色彩，可以使用16M色彩渲染图像。此格式一般用在多媒体演示和视频输出等情况下。TIFF（TagInageFileFormat）TIFF格式是对色彩通道图像来说最有用的格式，支持24个通道，能存储多于4个通道。TIFF格式的结果要比其它格式更大、更复杂，它非常适合于印刷和输出。3.2编辑网页图像图像格式JPEG（JointPhotographicExpertsGroup）JPEG是Web上仅次于GIF的常用图像格式。JPEG是一种压缩得非常紧凑的格式，专门用于不含大色块的图像。JPEG的图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的差别。，而JPEG文件只有GIF文件的1/4大小。JPEG对图标之类的含大色块的图像不很有效，不支持透明图和动态图。在IE7.0中.写HTML代码时,若想插入JPEG格式的图片,后缀名必须是JPG格式,否则图片根本无法显示.TGA（Targa）TGA格式与TIFF格式相同，都可以用来处理高质量的色彩通道图形。3.2编辑网页图像插入图像1、插入背景图像常用的背景图像一般可以应用在网页背景和表格（行、单元）背景上，属于Dreamweaver中的一种页面属性。在背景图像上用户可以输入文本、可以插入图像等操作，但不影响背景图像本身的显示。插入背景图像的方法是单击属性面板中的页面属性按钮（），此时系统弹出页面属性对话框，如图所示3.2编辑网页图像插入图像插入背景图像3.2编辑网页图像插入普通图像插入普通图像是拼合网页常用的方式之一，当插入普通图像时，在该图像上不能插入文本、图像等其他元素。插入普通图像的方法是首先将光标定位到需要插入图像的位置，再执行菜单【插入记录】→【图像】命令，此时系统弹出选择图像源文件对话框，用户根据需要选择需要插入的图像即可。3.2编辑网页图像插入鼠标经过图像鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变为另一幅图像。鼠标经过图像实际上是由两幅图像组成，初始图像（页面首次装载时显示的图像）和替换图像（当鼠标指针经过时显示的图像）。用于鼠标经过图像的两幅图像大小必须相同。如果图像的大小不同，Dreamweaver会自动调整第二幅图像的大小，使之与第一幅图像匹配。3.2编辑网页图像插入鼠标经过图像插入鼠标经过图像的方法是首先将光标定位到需要插入鼠标经过图像的位置，再执行菜单“插入记录”→“图像对象”→“鼠标经过图像”命令，此时弹出插入鼠标经过图像对话框，如图所示。分别单击原始图像后的浏览按钮和鼠标经过图像后的浏览按钮选择不同的原始图像和鼠标经过图像即可，若单击图像时需要实现超级链接，则单击按下时，前往的URL后的浏览按钮选择超级链接的目的地或者直接在输入框中输入超级链接的目的地3.2编辑网页图像插入鼠标经过图像3.2编辑网页图像插入分层图像通常情况下插入网页中的图像格式为GIF或者JPEG，但是由于DreamweaverCS3包括了与PhotoshopCS3相同的增强的集成功能，这样在Dreamweaver中就可以插入具有多个图层的图像。与PhotoshopCS3相结合，还可以根据不同的情况插入选区图像或者切片图像。插入PSD格式图像插入PSD格式图像的方法与插入普通图像的方法相同，但选择图像时选择PSD格式图像即可。在选择了相应的图像后，系统弹出图像预览对话框，用于预览图像效果以及设置图像将要显示在网页中的格式。如图所示。3.2编辑网页图像插入分层图像插入PSD格式图像3.2编辑网页图像插入分层图像插入一层图像由于PSD图像为一个多图层图像，所以还可以在PhotoshopCS3中选择并复制一个图层，然后粘贴到DreamweaverCS3中。插入一层图像的方法是首先启动PhotoshopCS3，选择其中需要的一层图像，执行全选，再执行复制，进入DreamweaverCS3，将光标定位到需要插入该图像的位置，执行粘贴操作，此时弹出图像预览对话框，用户根据需要设置好格式、大小等后，单击确定按钮即可。3.2编辑网页图像插入分层图像插入选区图像除了复制单个图层的图像到网页中以外，还可以复制整幅图像中的一部分到网页中。插入选区图像的方法是首先启动PhotoshopCS3，利用PhotoshopCS3中的选取工具选择其中需要的部分图像，执行复制操作，进入DreamweaverCS3，将光标定位到需要插入该图像的位置，执行粘贴操作，此时弹出图像预览对话框，用户根据需要设置好格式、大小等后，单击确定按钮即可。3.2编辑网页图像插入分层图像插入切片图像在DreamweaverCS3中还可以插入利用PhotoshopCS3切片的切片图像。插入切片图像的方法是首先启动PhotoshopCS3，利用PhotoshopCS3中的切片工具（）对图像进行切片，再使用切片选择工具（）选择需要的切片图像，执行复制操作，进入DreamweaverCS3，将光标定位到需要插入该图像的位置，执行粘贴操作，此时弹出图像预览对话框，用户根据需要设置好格式、大小等后，单击确定按钮即可。3.2编辑网页图像课堂案例3-3（1）将在“关于我”页面中要用到的图片拷贝到站点的“images”文件夹下3.2编辑网页图像课堂案例3-3（2）在Dreamweaver中，打开课堂案例3-2中完成的页面about.htm。（3）将光标置于文档开始，选择【插入】|【图像】，在弹出的【选择图像源文件】对话框中选择header.jpg图像3.2编辑网页图像课堂案例3-33.2编辑网页图像课堂案例3-3（4）在【选择图像源文件】对话框中，点击，在弹出的【图像标签辅助功能属性】对话框中进行设置3.2编辑网页图像课堂案例3-3（5）在【图像标签辅助功能属性】对话框中，点击。网页的头部插入了相应图片3.2编辑网页图像课堂案例3-3（6）仿照步骤（3）至步骤（5）的方法，在页面其他位置插入图像，并保存网页，在浏览器中预览3.2编辑网页图像课堂案例3-33.2编辑网页图像设置图像属性插入图像后，可以通过【属性】面板对图像的各属性进行设置。选择相应的图像时，在属性面板中会显示出图像的相关属性，如图所示。在该面板中可以设置图像名称、图像大小、图像超级链接、边框、对齐方式等属性。3.2编辑网页图像1、设置图像大小在网页中图像大小主要是指图像的宽和高，用户选择需要设置大小的图像后，在属性面板的宽和高后的输入框中输入需要的宽和高数值即可改变图像的大小。2、设置图像对齐方式当在文本中插入图像时，需要设置文本与图像之间的对齐方式，而这种对齐方式主要有基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐以及默认值几种。用户选择需要设置对齐方式的图像后，在属性面板的对齐下拉列表中选择需要的对齐方式即可。3.2编辑网页图像3、设置图像位置当图像与文本混排时，除了设置图像与文本之间的对齐方式外，还需要设置图像与文本之间的间隔距离，此时只需要设置图像的垂直边距和水平边距。用户选择需要设置位置的图像后，在属性面板的垂直边距和水