搜索
第3章输入和编辑网页中的基本元素3.1网页中文本的操作本节课堂目标：熟练掌握网页文本的操作方法和技巧本节教学内容：1：文本对象的插入和格式设置（重点）2：设置文本标题（难点）3：段落的设置效果（难点）4：项目符号和编号的插入使用5：历史记录面板的使用•思考题：根据以前所学知识说出文本的编辑和设置属性各包括几个方面？•文本插入栏的按钮和属性面板的功按钮相似。３.１.１认识文本按钮及属性面板３.１.２插入文本和对象１.文本是网页中最基础的载体；纯文本网页占用的存储空间小，占用的网络带宽较少，打开速度快。将文本（英文、中文、数字）添加到文档中的方法有以下三种：直接输入、粘贴剪贴板中的文字、导入word格式的文档。复制/粘贴，巧妙使用“选择性粘贴”命令。导入其他格式的文本（需要清理word生成的无关html代码）•文件－导入－word／excel文档•也可拖动文件放入网页的适当位置，将文档链接到网页中（链接文本是链接文件的名称）。２.插入特殊字符：在html中它被称作实体，以名称或数字的形式出现。特殊字符如右所示。操作方法分别是：–菜单法：插入－html－特殊字符–插入栏按钮法：插入－文本－字符按钮默认情况下Html中只允许字符之间包含一个空格，输入连续的多个空格的方法：①设置首选参数改变默认设置②在输入法为全角状态下输入多个空格３.水平线（垂直线）插入水平线以可视方式分割文本和对象来组织信息。插入－html－水平线可在属性检查器中修改水平线（宽、高等）４.插入日期：–菜单法；–插入栏按钮法5.对插入的文本也可以执行删除、搜索、替换、检查拼写（文本－检查拼写／shift+f7）等操作。３.１.３设置文本格式字符的样式指的是字符的外观显示方式。利用Dw可以设置多种字符样式，如字体、加粗、倾斜、下划线、删除线、打字型、强调等。默认时Dreamweaver使用css设置文本的格式,当使用命令来设置格式和对齐文本时，css规则将嵌入到当前文档中；也可以使用标签来对齐文本（div标签）和设置文本格式（font标签等），但要在首选参数中进行设置。３.１.４设置文本标题文本标题来强调段落要表现的内容。在HTML中，定义了6级标题，从1到6级，每级标题的字体大小依次递减。一段文字只能设置一个标题级别。在HTML中，采用如下的标记来定义标题：h1和/h1定义标题1h2和/h2定义标题2h3和/h3定义标题3每级标题的字符大小并没有一个实际上的固定的值，它是由浏览器所决定的，为标题定义的级别只决定了标题之间的相互大小。3.１.５设置段落效果1.设置段落格式的方法使用【属性】面板的【格式】弹出式菜单选择【文本】|【段落格式】菜单2.缩进段落所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端而言的。属性检查器：“缩进”、“凸出”按钮文本菜单：“缩进”、“凸出”命令３.对齐段落段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有四种对齐方式：左对齐、居中对齐、右对齐、两端对齐。关于文本对齐，源代码设置为：divalign=“center/right/left/justify…/div４.添加段间距：通过添加换行符在段间添加空行–添加段落换行符：按enter键–添加换行符：按shift+enter键／添加特殊字符/换行符换行与分段的区别：文本换行时，按Enter键换行的行距较大（在代码区生成p/p标签），按Enter＋Shift键换行的行间距较小（在代码区生成br标签）。３.１.６创建项目列表１.在HTML中，从总体上分有两种类型的项目列表，一种是无序项目列表（使用项目符号来标记项目，产生ul标签），另一种是有序项目列表（使用编号来标记项目顺序，产生ol标签）。２.在Dreamweaver中，一旦插好一个，下一个列表只需按enter键即可；列表可以嵌套。３.创建项目列表的步骤：①选中要转换为项目列表的所有段落。②单击“属性”面板上的“项目列表”按钮或“编号列表”按钮；也可以单击“文本”→“列表”菜单项，选择相应的“无序列表”、“有序列表”菜单项。③这时被选中的段落文字就被转换为项目列表的形式。本节习题和作业1.填空题（1）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体、字形（如粗体或斜体）______、和______。（2）若要插入更多的特殊字符，请选择______|______|______或在______栏中选择______图标，选择一个字符，然后单击【确定】。2.选择题（多选）（1）设置文本属性可以通过_______来设置。A．属性面板B．控制面板C．启动面板D．文本菜单（2）在网页中连续输入空格的方法是_______。A．连续按空格键B．按下Ctrl键再连续按空格键C．转换到中文的全角状态下连续按空格键D．按下Shift键再连续按空格键3.简答题：（1）下图所示情况何时出现？(2)如何将已经加入了粗、斜体的文字改为正常字体？(3)如何使日期保持在页面右下角？(4)如何使编号呈下图所示的样式？（属性面板—列表项目按钮）4.操作题（1）将页面中添加如下图所示的表格（暂时可以通过导入word文档的方法实现）（2.）制作如下的文字页面３.２网页图像的运用本节内容和目标：■了解GIF、PNG和JPEG三种图像格式的异同点和使用环境。(重点、难点)■掌握在Dreamweaver8.0中使用图像的一些基本方法和技巧（重点）■掌握编辑和设置图像的方法■掌握创建图像映射和电子相册的方法３.２.１网页中图像格式简介图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格，恰到好处地使用图像能使网页更加地生动、形象和美观。图像比文本更能直观地表达信息。网页中图像格式有：GIF、JPEG、PNG、TIFF、BMP等，而最常用图像格式有：GIF、JPEG、PNG图1JPEG图2GIF图3PNG1．GIF（GraphicsInterchangeFormat）格式(图形交换格式)：使用最早、应用最广泛。a.无损压缩、跨平台兼容；b.占用磁盘空间小、支持动画，交织下载、支持透明背景图像。c.支持8位(256色）图像，能够很好地表现不连续色调和大面积色彩统一的图像，如：导航条、按钮、图标、广告条（banner）、徽标等对色彩要求不高的图像格式。2.JPEG：JointPhotographicExpertGroup（联合图像专家组）格式：目前最受欢迎。a.采用特殊的压缩算法，在失真较小的前提下，对图片进行有损压缩；b.用来表现较为专业的或有连续色调的图像．可包含数百万种色彩.分辨率较高，可用于处理照片。c.JPEG格式不支持透明色，也没有动画的概念;采用JPEG格式对图像进行压缩后，不能再重新打开图像。3.PNG：PortableNetworkGraphic(便携或可移植网络图形格式，开发于1995年)：使用量逐渐增多。a.采用与GIF图像格式类似的压缩算法，能真实地显示原始图像，支持透明背景，可控制压缩比，文件小,灵活性强,完全可替代GIF格式,是fireworks软件自身的文件格式，其扩展名为.png,只有带扩展名dw才能识别.b.支持真彩色，与JPEG格式没有太大的差别，目前在网络上得到大力推广。c.但只有MicrosoftIE(4.0及以上版本)和NetscapeNavigator(4.04及以上版本)才支持，GIF和JPEG不受浏览器限制，应用较广泛。d.Png支持监视器的伽码设置修正，可跨平台兼容。总结：•当只需要静态图像且色彩要求也不高时：当所选用图像较小时用gif格式文件小；而当所选用图像大时用jpg格式文件小。此时png格式不具备优势。•GIF、JPEG、PNG这几种格式都是标准的位图格式.所谓位图格式就是指用图片上每一点的信息来描述图像；而矢量格式则是用线条和填充色等数学信息来描述图像。矢量格式的文件要比位图格式的文件小得多，可表现一般的静态画面也可以表现动画.在Web页上显示图片之前，通常需要考虑下列三个问题：①确保文件较小:采用正确的格式进行优化处理,使图像具有所需的像素大小②控制图像的数量和质量；③合理使用动画。３.２.２在网页中使用图像1．插入图像：为了保证参数的正确，图象文件必须保存在当前站点的images文件夹中，否则dw提示将其复制到当前站点目录下。插入后产生img标签。具体操作步骤：单击插入---图像命令/常用插栏的插入图像按钮。2.插入图像占位符：暂时为图片占个位置，在浏览器中不显示，在发布网站之前需用具体图象替换它，在属性检查器中（源文件）完成替换更新。一旦插入在html代码中自动产生一个包含属性的图象标签src和替换文本标签（alt）。src表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是GIF文件、JPEG文件或PNG文件。alt表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示，以帮助访问者了解图像的信息。具体操作步骤：单击“插入---图像对象—图像占位符”命令/常用插栏的插入图像—图像占位符按钮。在名称框中给占位符取名的命名规则：字母开头，只能包含字母和数字，不能使用空格和ASCII字符。3.创建鼠标经过图象（轮换图像）：只能在浏览器中查看（在文档窗口中不能查看效果）并使用鼠标指针移过它时发生变化的图像，由主图像（即页面首次装载时所显示出的图像）和翻转图像（当鼠标指针掠过时所显示的图像）组成，二者大小要一样。一旦插入在html代码中自动产onmouseover事件。4.在dw中图像的编辑功能仅适用于GIF和JPEG图像格式。–在属性检面板中编辑图像在其中可设置图像的属性参数（宽、高、替代）、对齐图像（左、右、居中对齐）、边距、边框、改变图像的尺寸（也可直接拖动调整控制点）、裁剪图像、调整其对比度、锐化图像。–上述设置也可通过菜单实现：修改---图像–用fireworks优化图像：要方便地完成相关的处理工作，则需要图形图像处理软件的协助。具体操作：修改—图像---在fireworks优化图像。在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在网页中使用。５．为图像添加热点热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。使用图像或图像中的某些区域来创建超链接，为网页设计增色不少。如果我们不建立链接，只是当鼠标移到图像的某些区域时，能显示一些提示信息或对图的注释，那么效果也一定不错。在Dreamweaver中为图像添加热点的方法为：选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左键并拖动，在图像中设置热点形状。６.设置图文混排和图像边距的效果。图像和文字的对齐有：对齐时要先选择图像，再选对齐方式。设置图像边距，可以使图像和相邻的文字或其他图片之间有一个间距。7.制作电子相册：命令——创建网站相册本节习题和作业1填空题（1）在计算机领域中，图像分为________和________2大类。（2）GIF图像采用的是________压缩格式。2选择题（2）网页通常可以支持的图像格式有___________。A．GIFB．BMPC．AVID．PSDE．PNGF．JPEG。3简答题（1）网页中常用的图像格式有哪些？各有什么特点？如果在网页中添加动画格式的浮动广告，采用何种格式？为什么？电子相册，应该用哪种格式最好？(2)如何创建鼠标变换图像和图像热点？4操作题：搜集自己的喜爱的图片，制作一个电子相册。上机练习练习1美化文字格式制作一个文字网页，效果如图1-80所示。请按照图中的提示信息进行制作。设置为标题2设置为标题3设置为项目列表插入水平线插入版权符号图1-80美化文字格式练习2图文并茂制作一个图文并茂的网页，效果如图1-81所示。注意这里要应用图