[精选]DW文字图像和多媒体插入6375.pptx
《[精选]DW文字图像和多媒体插入6375.pptx》由会员分享,可在线阅读,更多相关《[精选]DW文字图像和多媒体插入6375.pptx(67页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、 第第第第3 3章输入和编辑网页中的基本元素章输入和编辑网页中的基本元素章输入和编辑网页中的基本元素章输入和编辑网页中的基本元素3.1网页中文本的操作网页中文本的操作本节课堂目标:本节课堂目标:熟练掌握网页文本的操作方法和技巧熟练掌握网页文本的操作方法和技巧本节教学内容:本节教学内容:1:文本对象的插入和格式设置(重点):文本对象的插入和格式设置(重点)2:设置文本标题(难点):设置文本标题(难点)3:段落的设置效果:段落的设置效果(难点)(难点)4:项目符号和编号的插入使用:项目符号和编号的插入使用5:历史记录面板的使用:历史记录面板的使用思考题:根据以前所学知识说出文本的编辑和设置属性思考
2、题:根据以前所学知识说出文本的编辑和设置属性各包括几个方面?各包括几个方面?文本插入栏的按钮和属性面板的功按钮相似。文本插入栏的按钮和属性面板的功按钮相似。.认识文本按钮及属性面板认识文本按钮及属性面板.插入文本和对象插入文本和对象.文本是网页中最基础的载体;纯文本网页占用的存储空间文本是网页中最基础的载体;纯文本网页占用的存储空间小,占用的网络带宽较少,打开速度快。小,占用的网络带宽较少,打开速度快。将将文本(英文、中文、数字)文本(英文、中文、数字)添加到文档中的方法有以下添加到文档中的方法有以下三种:三种:直接输入、粘贴剪贴板中的文字、导入直接输入、粘贴剪贴板中的文字、导入word格式格
3、式的文档的文档。复制复制/粘贴,粘贴,巧妙使用巧妙使用“选择性粘贴选择性粘贴”命令。命令。导入其他格式的文本(需要清理导入其他格式的文本(需要清理word生成的无关生成的无关html代码)代码)文件导入文件导入wordexcel文档文档也可拖动文件放入网页的适当位置,将文档链接也可拖动文件放入网页的适当位置,将文档链接到网页中(链接文本是链接文件的名称)。到网页中(链接文本是链接文件的名称)。.插入特殊字符:在插入特殊字符:在html中它被称作实体,以中它被称作实体,以名称或数字的形式出现。名称或数字的形式出现。特殊字符如右所特殊字符如右所示。示。操作方法分别是:操作方法分别是:菜单法:插入菜
4、单法:插入html特殊字符特殊字符插入栏按钮法:插入文本字符按钮插入栏按钮法:插入文本字符按钮默认情况下默认情况下Html中只允许字符之间包含一中只允许字符之间包含一个空格,输入连续的多个空格的方法:个空格,输入连续的多个空格的方法:设置设置首选参数首选参数改变默认设置改变默认设置在输入法为在输入法为全角全角状态下输入多个空格状态下输入多个空格.水平线(垂直线)水平线(垂直线)插入水平线以可视方式分割文本和对象来组织信息。插入水平线以可视方式分割文本和对象来组织信息。插入插入html水平线水平线可在属性检查器中修改水平线(宽、高等)可在属性检查器中修改水平线(宽、高等).插入日期:插入日期:菜
5、单法;菜单法;插入栏按钮法插入栏按钮法5.对插入的文本也可以执行删除、搜索、替换、检查拼对插入的文本也可以执行删除、搜索、替换、检查拼写(文本检查拼写写(文本检查拼写shift+f7)等操作。)等操作。.设置文本格式设置文本格式字符的样式指的是字符的外观显示方式。利用字符的样式指的是字符的外观显示方式。利用Dw可可以设置多种字符样式,如字体、加粗以设置多种字符样式,如字体、加粗、倾斜、倾斜、下下划线划线、删除线删除线、打字型打字型、强调等强调等。默认时默认时Dreamweaver使用使用css设置文本的格式设置文本的格式,当当使用命令来设置格式和对齐文本使用命令来设置格式和对齐文本时,时,cs
6、s规则将嵌规则将嵌入到当前文档中;入到当前文档中;也可以使用标签来对齐文本(也可以使用标签来对齐文本(div标签)和设置文标签)和设置文本格式(本格式(font标签等),但要在首选参数中进行设置。标签等),但要在首选参数中进行设置。.设置文本标题设置文本标题文本标题来强调段落要表现的内容。在文本标题来强调段落要表现的内容。在HTML中,定义了中,定义了6级标题,从级标题,从1到到6级,每级标题的字体大小依次递减。一段级,每级标题的字体大小依次递减。一段文字只能设置一个标题级别。文字只能设置一个标题级别。在在HTML中,采用如下的标记来定义标题:中,采用如下的标记来定义标题:和和定义标题定义标题
7、1和和定义标题定义标题2和和定义标题定义标题3每级标题的字符大小并没有一个实际上的固定的值,它每级标题的字符大小并没有一个实际上的固定的值,它是由浏览器所决定的,为标题定义的级别只决定了标题之是由浏览器所决定的,为标题定义的级别只决定了标题之间的相互大小。间的相互大小。3.设置段落效果设置段落效果1.设置段落格式的方法设置段落格式的方法使用使用【属性】面板的【格式】弹出式菜单【属性】面板的【格式】弹出式菜单选择【文本】选择【文本】|【段落格式】菜单【段落格式】菜单2.缩进段落缩进段落所谓缩进,主要是相对于文档窗口(或浏览器窗口)左端所谓缩进,主要是相对于文档窗口(或浏览器窗口)左端而言的。而言
8、的。属性检查器:属性检查器:“缩进缩进”、“凸出凸出”按钮按钮文本菜单:文本菜单:“缩进缩进”、“凸出凸出”命令命令.对齐段落对齐段落段落的对齐方式,指的是段落相对文档窗口(或浏览器窗段落的对齐方式,指的是段落相对文档窗口(或浏览器窗口)在水平位置的对齐方式。有四种对齐方式:左对齐、口)在水平位置的对齐方式。有四种对齐方式:左对齐、居中对齐、右对齐、两端对齐。居中对齐、右对齐、两端对齐。关于文本对齐,源代码设置为:关于文本对齐,源代码设置为:.添加段间距:通过添加换行符在段间添加空行添加段间距:通过添加换行符在段间添加空行添加段落换行符:按添加段落换行符:按enter键键添加换行符:按添加换行
9、符:按shift+enter键添加特殊字符键添加特殊字符/换行符换行符换行与分段的区别:换行与分段的区别:文本换行时,按文本换行时,按Enter键换行的行距较键换行的行距较大大(在代码区生成(在代码区生成标签),按标签),按EnterShift键换键换行的行间距较小行的行间距较小(在代码区生成(在代码区生成标签)。标签)。.创建项目列表创建项目列表.在在HTML中,从总体上分有两种类型的项目列表,一种是无中,从总体上分有两种类型的项目列表,一种是无序项目列表(使用项目符号来标记项目,产生序项目列表(使用项目符号来标记项目,产生ul标签标签),另,另一种是有序项目列表(使用编号来标记项目顺序,产
10、生一种是有序项目列表(使用编号来标记项目顺序,产生ol标标签签)。)。.在在Dreamweaver中,一旦插好一个,下一个列表只需按中,一旦插好一个,下一个列表只需按enter键即可;列表可以嵌套。键即可;列表可以嵌套。.创建项目列表的步骤:创建项目列表的步骤:选中要转换为项目列表的所有段落。选中要转换为项目列表的所有段落。单击单击“属性属性”面板上的面板上的“项目列表项目列表”按钮或按钮或“编号列表编号列表”按钮;也可以单击按钮;也可以单击“文本文本”“列表列表”菜单项,菜单项,选择选择相应的相应的“无序列表无序列表”、“有序列表有序列表”菜单项。菜单项。这时被选中的段落文字就被转换为项目列
11、表的形式。这时被选中的段落文字就被转换为项目列表的形式。本节习题和作业本节习题和作业1.填空题填空题(1)使用属性检查器或【文本】菜单中的选项可以设置或)使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体、字形(如粗更改所选文本的字体特性。可以设置字体、字形(如粗体或斜体)体或斜体)_、和、和_。(2)若要插入更多的特殊字符,请选择)若要插入更多的特殊字符,请选择_|_|_或在或在_栏中选择栏中选择_图标,选择一个字符图标,选择一个字符,然后单击【确定】。,然后单击【确定】。2.选择题(多选)选择题(多选)(1)设置文本属性可以通过)设置文本属性可以通过_来设置
12、。来设置。A属性面板属性面板B控制面板控制面板C启动面板启动面板D文本菜单文本菜单(2)在网页中连续输入空格的方法是)在网页中连续输入空格的方法是_。A连续按空格键连续按空格键B按下按下Ctrl键再连续按空格键键再连续按空格键C转换到中文的全角状态下连续按空格键转换到中文的全角状态下连续按空格键D按下按下Shift键再连续按空格键键再连续按空格键3.简答题:简答题:(1)下图所示情况何时出现?)下图所示情况何时出现?(2)如何将已经加入了粗、斜体的文字改为正常字体?如何将已经加入了粗、斜体的文字改为正常字体?(3)如何使日期保持在页面右下角?如何使日期保持在页面右下角?(4)如何使编号呈下图所
13、示的样式?(属性面板如何使编号呈下图所示的样式?(属性面板列表列表项目按钮)项目按钮)4.操作题操作题(1)将页面中添加如下图所示的表格(暂时将页面中添加如下图所示的表格(暂时可以通过导入可以通过导入word文档的方法实现)文档的方法实现)(2.)制作如下的文字页面)制作如下的文字页面.网页图像的运用网页图像的运用本节内容和目标:本节内容和目标:了解了解GIF、PNG和和JPEG三种图像格式三种图像格式 的异同点和的异同点和使用环境。使用环境。(重点、难点重点、难点)掌握在掌握在Dreamweaver 8.0中使用图像的一些基本方中使用图像的一些基本方法和技巧(重点)法和技巧(重点)掌握编辑和
14、设置图像的方法掌握编辑和设置图像的方法 掌握创建图像映射和电子相册的方法掌握创建图像映射和电子相册的方法.网页中图像格式简介网页中图像格式简介图像在网页中通常起到画龙点睛的作用,它能装饰网页,表图像在网页中通常起到画龙点睛的作用,它能装饰网页,表达个人的情趣和风格,恰到好处地使用图像能使网页更加地达个人的情趣和风格,恰到好处地使用图像能使网页更加地生动、形象和美观生动、形象和美观。图像比文本更能直观地表达信息。图像比文本更能直观地表达信息。网页中图像格式有:网页中图像格式有:GIF、JPEG、PNG、TIFF、BMP等,等,而最常用图像格式有:而最常用图像格式有:GIF、JPEG、PNG 图1
15、 JPEG 图2 GIF 图3 PNG 1GIF(GraphicsInterchangeFormat)格式)格式(图形交换图形交换格式格式):使用最早、应用最广泛。:使用最早、应用最广泛。a.无损压缩、跨平台兼容;无损压缩、跨平台兼容;b.占用磁盘空间小、支持动画,交织下载、支持透明背景占用磁盘空间小、支持动画,交织下载、支持透明背景图像。图像。c.支持支持8位位(256色)图像,能够很好地表现不连续色调和大色)图像,能够很好地表现不连续色调和大面积色彩统一的图像,如:导航条、按钮、图标、广告面积色彩统一的图像,如:导航条、按钮、图标、广告条(条(banner)、徽标等对色彩要求不高的图像格式
16、。)、徽标等对色彩要求不高的图像格式。2.JPEG:JointPhotographicExpertGroup(联合图(联合图像专家组)像专家组)格式:目前最受欢迎。格式:目前最受欢迎。a.采用特殊的压缩算法,在失真较小的前提下,对图片采用特殊的压缩算法,在失真较小的前提下,对图片进行有损压缩;进行有损压缩;b.用来表现较为专业的或有连续色调的图像可包含用来表现较为专业的或有连续色调的图像可包含数百万种色彩数百万种色彩.分辨率较高,可用于处理照片。分辨率较高,可用于处理照片。c.JPEG格式不支持透明色,也没有动画的概念格式不支持透明色,也没有动画的概念;采用采用JPEG格式对图像进行压缩后,不
17、能再重新打开图像。格式对图像进行压缩后,不能再重新打开图像。3.PNG:PortableNetworkGraphic(便携或可移植网络便携或可移植网络图形格式,开发于图形格式,开发于1995年年):使用量逐渐增多。:使用量逐渐增多。a.a.采用与采用与GIFGIF图像格式类似的压缩算法,能真实地显图像格式类似的压缩算法,能真实地显示原始图像,支持透明背景,可控制压缩比,文件小示原始图像,支持透明背景,可控制压缩比,文件小,灵活性强灵活性强,完全可替代完全可替代GIFGIF格式格式,是是fireworksfireworks软件自身软件自身的文件格式,其扩展名为的文件格式,其扩展名为.png,.p
18、ng,只有带扩展名只有带扩展名dwdw才能才能识别识别.b.b.支持真彩色,与支持真彩色,与JPEGJPEG格式没有太大的差别,目前在格式没有太大的差别,目前在网络上得到大力推广。网络上得到大力推广。c.c.但只有但只有Microsoft IE(4.0Microsoft IE(4.0及以上版本及以上版本)和和Netscape Netscape Navigator(4.04Navigator(4.04及以上版本及以上版本)才支持,才支持,GIFGIF和和JPEGJPEG不受不受浏览器限制,应用较广泛。浏览器限制,应用较广泛。d.d.PngPng支持监视器的伽码设置修正,可跨平台兼容。支持监视器的
19、伽码设置修正,可跨平台兼容。总结:总结:当只需要静态图像且色彩要求也不高时:当所选用图像较当只需要静态图像且色彩要求也不高时:当所选用图像较小时用小时用gif格式文件小;而当所选用图像大时用格式文件小;而当所选用图像大时用jpg格式文格式文件小。此时件小。此时png格式不具备优势。格式不具备优势。GIFGIF、JPEG JPEG、PNGPNG这几种格式都是标准的位图格式这几种格式都是标准的位图格式.所谓所谓位位图格式图格式就是指用图片上每一点的信息来描述图像;而就是指用图片上每一点的信息来描述图像;而矢量矢量格式格式则是用线条和填充色等数学信息来描述图像。矢量格则是用线条和填充色等数学信息来描
20、述图像。矢量格式的文件要比位图格式的文件小得多,可表现一般的静态式的文件要比位图格式的文件小得多,可表现一般的静态画面也可以表现动画画面也可以表现动画.在在Web页上显示图片之前,通常需要考虑下列三个问题:页上显示图片之前,通常需要考虑下列三个问题:确保文件较小确保文件较小:采用正确的格式进行优化处理采用正确的格式进行优化处理,使图像具使图像具有所需的像素大小有所需的像素大小控制图像的数量和质量;控制图像的数量和质量;合理使用动画。合理使用动画。.在网页中使用图像在网页中使用图像 1插入图像:为了保证参数的正确,图象文件必须保存插入图像:为了保证参数的正确,图象文件必须保存在当前站点的在当前站
21、点的images文件夹中,否则文件夹中,否则dw提示将其复制提示将其复制到当前站点目录下。插入后产生到当前站点目录下。插入后产生img标签。标签。具体操作步骤:具体操作步骤:单击插入单击插入-图像命令图像命令/常用插栏的插入图像常用插栏的插入图像按钮按钮。2.插入图像占位符:暂时为图片占个位置,在浏览器中不插入图像占位符:暂时为图片占个位置,在浏览器中不显示,在发布网站之前需用具体图象替换它,在属性检显示,在发布网站之前需用具体图象替换它,在属性检查器中(源文件)完成替换更新。一旦插入在查器中(源文件)完成替换更新。一旦插入在html代码代码中自动产生一个包含属性的图象标签中自动产生一个包含属
22、性的图象标签src和替换文本标签和替换文本标签(alt)。)。src表示要插入图像的文件名,必须包含绝对路径或相对路表示要插入图像的文件名,必须包含绝对路径或相对路径,图像可以是径,图像可以是GIF文件、文件、JPEG文件或文件或PNG文件。文件。alt表表示图像的简单文本说明,用于不能显示图像的浏览器或浏示图像的简单文本说明,用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示,以帮助访问者览器能显示图像但显示时间过长时先显示,以帮助访问者了解图像的信息。了解图像的信息。具体操作步骤具体操作步骤:单击单击“插入插入-图像对象图像对象图像占位符图像占位符”命命令令/常用插栏的插入图
23、像常用插栏的插入图像图像占位符图像占位符按钮。按钮。在名称框中给占位符取名的命名规则:字母开头,只能包在名称框中给占位符取名的命名规则:字母开头,只能包含字母和数字,不能使用空格和含字母和数字,不能使用空格和ASCII字符。字符。3.创创建建鼠鼠标标经经过过图图象象(轮轮换换图图像像):只只能能在在浏浏览览器器中中查查看看(在在文文档档窗窗口口中中不不能能查查看看效效果果)并并使使用用鼠鼠标标指指针针移移过过它它时时发发生生变变化化的的图图像像,由由主主图图像像(即即页页面面首首次次装装载载时时所所显显示示出出的的图图像像)和和翻翻转转图图像像(当当鼠鼠标标指指针针掠掠过过时时所所显显示示的的
24、图图像像)组组成成,二二者者大大小小要要一一样样。一一旦旦插插入入在在html代代码码中中自动产自动产onmouseover事件。事件。4.在在dw中图像的编辑功能仅适用于中图像的编辑功能仅适用于GIF和和JPEG 图像格式。图像格式。在属性检面板中编辑图像在属性检面板中编辑图像在其中可设置图像的属性参数(宽、高、替代)、对齐图在其中可设置图像的属性参数(宽、高、替代)、对齐图像(左、右、居中对齐)、边距、边框、改变图像的尺像(左、右、居中对齐)、边距、边框、改变图像的尺寸寸(也可直接拖动调整控制点)、裁剪图像、调整其对(也可直接拖动调整控制点)、裁剪图像、调整其对比度、锐化图像。比度、锐化图
25、像。上述设置也可通过菜单实现:上述设置也可通过菜单实现:修改修改-图像图像用用fireworks优化图像:优化图像:要方便地完成相关的处理工作,则需要图形图像处理软件的要方便地完成相关的处理工作,则需要图形图像处理软件的协助。协助。具体操作:修改具体操作:修改图像图像-在在fireworks优化图像。优化图像。在页面中合理地使用图形图像已经成为网页制作的一个在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中,基本要求。但是并非所有图形图像都可以直接用在网页中,大多数情况下,需要对原始图像素材进行一些处理,例如大多数情况下,需要对原始图像素材进行一
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 精选 DW 文字 图像 多媒体 插入 6375
限制150内