网中文本图像和动画元素.ppt

《网中文本图像和动画元素.ppt》由会员分享，可在线阅读，更多相关《网中文本图像和动画元素.ppt（56页珍藏版）》请在三一办公上搜索。

1、华东师范大学计算中心,1,5.4 网页中文本、图像和动画元素,1.网页中的文本元素 2.文本超级链接 3.图像处理 4.在网页中插入Flash动画及其他多媒体 5.使用CSS样式控制站点风格,华东师范大学计算中心,2,1.网页中的文本元素,文字应尽量符合人们的阅读习惯除一般文字外，网页中可能还会包含一些特殊文字，如换行符、不换行空格符、水平线等,华东师范大学计算中心,3,插入文本和特殊字符,插入文本 在Dreamweaver 8中文本处理与在其他文字处理程序中基本一样插入空格需全角 插入特殊字符菜单【插入】【HTML】【特殊字符】或者在【插入】工具栏选择【文本】工具栏，单击最右侧的插入特殊符号

2、,华东师范大学计算中心,4,添加可选的中文字体,选中文字后，在【属性】面板中【字体】列表中即可设置文字字体如果所需字体不在【字体】列表中，可以在列表的最下方单击【编辑字体列表】命令，弹出【编辑字体列表】对话框进行添加,华东师范大学计算中心,5,设置文本属性,文本格式分为字符格式和段落格式字符格式包括：字符的字体、大小、颜色和样式等段落格式包括：段落的对齐方式、项目符合和段落的缩进等选中文字，在【属性工具栏】中进行属性设置,华东师范大学计算中心,6,设置文本属性,某些简单的文本属性，可以直接通过HTML标记实现。如：粗体HTML语言斜体HTML语言加下划线HTML语言 表示强调，一般为斜体 表示

3、特别强调，一般为粗体注意，如果同时还需设置其它属性，则需要借助CSS样式,华东师范大学计算中心,7,设置文本属性,网页元素很多样式属性（如字体、颜色、大小等）的设置都是使用CSS样式来实现的完成字体、颜色、大小等属性设置后，可以在【样式】选择框中找到一个名称类似“Style 1”的样式在【CSS面板】中，可以看到该样式的各属性 当需要对样式进行修改时，如果明确CSS样式中各属性的含义，可以在【CSS面板】中直接设置。,华东师范大学计算中心,8,2.文本超级链接,超级链接的HTML标记为：根据指向目标不同，在一个网页文档中可以创建如下4种类型的链接。链接到其他文档或文件（如图形、影片、PDF或声

4、音文件）的链接 跳转至文档内的特定位置（命名锚记链接）电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件 无址链接和脚本链接，此类链接能够在对象上附加行为，或者创建执行JavaScript代码的链接,华东师范大学计算中心,9,“相对路径”和“绝对路径”,绝对路径绝对路径提供所链接文档的完整URL，而且包括所使用的协议如果需要链接到其他服务器上的文档，必须使用绝对路径 文档相对路径省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分一般情况下，站内链接多使用文档相对路径，这样当网站移动时，链接不需要变化 站点根目录相对路径使用从站点的根文件夹到文档的路径。用

5、正斜杠（/）表示站点根文件夹,华东师范大学计算中心,10,华东师范大学计算中心,11,链接到其他文档或文件的链接,直接在【属性检查器】中设置链接和目标 常用目标选项：_blank、_parent、_self、_top如果使用了框架集网页，也会出现各框架名,华东师范大学计算中心,12,链接到其他文档或文件的链接,如果是链接到网站内其他网页需注意应先保存新文件，再创建文档相对路径，因为如果没有一个确切的起点，文档相对路径无效。否则，Dreamweaver将使用以 file:/开头的临时绝对路径；当保存文件时，自动将其转换为相对路径,临时绝对路径,站内链接的相对路径,华东师范大学计算中心,13,书签

6、链接,当网页内容较多时，可以在网页内部的适当位置增加书签锚记，然后在网页其他位置插入书签超链接，并使书签指向该锚记。单击书签超链接可跳转到书签锚记处第一步，创建书签锚记选择【插入】工具栏的【常用】类别，单击【命名锚记】按钮，在弹出的【命名锚记】对话框中输入锚记名称注意，锚记名称区分大小写,华东师范大学计算中心,14,书签链接,第二步，创建书签超链接 选中需要创建书签超链接的对象（如文字），在【属性检查器】的链接中，输入符号“#”锚记名称若要链接到当前文档中的名为“bottom”的锚记，输入#bottom若要链接到同一文件夹内其他文档中的名为“bottom”的锚记，可输入filename.htm

7、l#bottom,华东师范大学计算中心,15,电子邮件链接,单击电子邮件链接后，将打开一个空白邮件信息窗口（如Outlook Express等）在电子邮件消息窗口中，【收件人】框中自动为电子邮件链接中指定邮件地址选择菜单【插入】【电子邮件链接】，在弹出的【电子邮件链接】对话框中输入文本和Email地址 或者，直接在【属性检查器】的【链接】框中按“mailto:Email地址”规则输入，制作电子邮件链接,华东师范大学计算中心,16,无址链接和脚本链接,无址链接是未指派的链接无址链接用于向网页中的对象或文本附加行为选择菜单【插入】【超级链接】，链接内容为空或者“#”或者，直接在【属性检查器】的【链

8、接】框中输入“#”脚本链接用于执行JavaScript代码或调用JavaScript函数,华东师范大学计算中心,17,脚本链接示例-弹出对话框,创建无址链接选中该链接，在【行为】面板中添加行为【弹出信息】，输入内容“欢迎来到我的网上家园”F12浏览,华东师范大学计算中心,18,练习：网站的建立和管理,（1）利用Dreamweaver 建立名为“我的网站”的网站，网站的位置在“c:sy”，站点中应包含素材中的fazhanshi.htm、xianshiqi.htm、bj1.gif、bj2.gif、fly.JPG和xx.swf文件。,华东师范大学计算中心,19,（2）利用素材“电脑小常识.txt”在

9、新创建的c:sy站点中新建网页index.htm，使其如图1的样张所示，其中的“计算机的发展史”超级链接到站点中的fazhanshi.htm，单击“显示器的使用”，可以在独立的窗口中看到xianshiqi.htm的内容。,华东师范大学计算中心,20,图1,华东师范大学计算中心,21,（3）在index.htm的标题下方增加一条蓝色的水平线，在文档的最下方，增加能够左右交替移动的文字“电脑与生活”，蓝色的文字在黄色的背景上。,华东师范大学计算中心,22,（4）在c:sy站点中建立文件夹txt，并将素材中的“电脑小常识.txt”文件导入到其中。最终效果在浏览器中显示,华东师范大学计算中心,23,3

10、.图像处理,恰当的使用图像，可以使网页的表现能力事半功倍。但是过多的使用图片，会增加网页下载流量，影响网页的浏览速度目前网页中使用较多的图像格式GIF：GIF图像格式用于透明图像或动画256色JPG：JPG图像格式多用于质量要求较高的图像真彩色，可设定质量因子图像的HTML标签：,华东师范大学计算中心,24,插入图像,插入图像时，为了确保图像引用的正确性，图像文件尽量置于当前站点中 菜单【插入】【图像】，在【选择图像源文件】对话框中选择所需文件或者，将图像从【文件】面板中直接拖曳到【文档】窗口中的所需位置弹出【图像标签辅助功能属性】对话框，用以设置【替代文本】和【详细描述】。根据需要输入，完成

11、图像插入,华东师范大学计算中心,25,设置图像,设置图像大小 直接用鼠标拖曳改变图像大小使用【属性检查器】精确设置 设置替换文字 设置替换文字后，当在浏览器浏览时，图像如果没有被正常下载，将会在浏览器中显示替换文字 为图像添加超级接 在【属性检查器】中设置图像链接和目标后，浏览时点击图像即可转向目标位置,华东师范大学计算中心,26,设置图像,设置图像边距【垂直边距】指图像的顶部和底部与其他元素的距离【水平边距】指图像左侧和右侧与其他元素的距离 设置低解析度源 低解析度源指定在载入主图像之前应该载入的图像有时，对于一些比较大的图像，可以设置低解析度源为原图像的黑白版本（黑白图较原图小）设置对齐方

12、式 设置图像边框,华东师范大学计算中心,27,设置图像,图像地图与热点设置 图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新网页等）。这样，就相当于在一幅图像上设置了多个链接,矩形热点工具,椭圆热点工具,多边形热点工具,华东师范大学计算中心,28,一幅中国地图的北京与上海位置处设置了两个热点，分别指向北京和上海网页的链接,华东师范大学计算中心,29,编辑图像,裁剪图像单击【裁剪】按钮，用鼠标在图像的8个切割点上拖曳裁剪修正图像亮度和对比度 调整图像的高亮显示、阴影和中间色调 锐化图像 通过增加图像中边缘的对比度来调整图像的焦点，使图像更清

13、晰,华东师范大学计算中心,30,插入网页背景图,切忌使用过大的图像，这样会影响浏览速度一般也不用颜色太深太复杂的图像，这样容易“喧宾夺主”在【属性检查器】中单击【页面属性】，弹出【页面属性】对话框，选择【外观】，然后选择需要添加的背景图,华东师范大学计算中心,31,4.在网页中插入Flash动画及其他多媒体,Flash动画凭借其较好的画质、精简的大小、开发较易和提供简单的互动等诸多优点，已被越来越多的应用在网页设计中,华东师范大学计算中心,32,插入已有的Flash动画,打开菜单【插入】【媒体】，在弹出的选单中选择Flash插入Flash动画后，使用【属性检查器】可以设置常用Flash动画属性

14、大小、边距、是否循环、是否自动播放、品质、显示比例、背景颜色、对齐方式等还可以设置Flash插件的各种特殊参数,华东师范大学计算中心,33,单击【属性检查器】右下方的【参数】按钮，在弹出的【参数】对话框中，可以设置Flash插件的特殊参数。如参数“wmode”设置为“transparent”，表示Flash动画背景将为透明,华东师范大学计算中心,34,插入Flash按钮,Flash按钮可用于网页导航，样式较文字导航美观打开菜单【插入】【媒体】【Flash按钮】，选择按钮样式，输入按钮文本、链接地址和背景色等信息，点击【确定】按钮后即可插入Flash按钮,华东师范大学计算中心,35,插入Flas

15、h文本对象,打开菜单【插入】【媒体】【Flash文本】，输入显示文本、文字大小、字体、颜色、链接地址和背景色等信息，单击【确定】按钮后即可插入Flash文本,注：图中第二行文本使用Webdings字体,华东师范大学计算中心,36,插入其他多媒体,其他类型的多媒体即视频、声音等媒体文件插入插件操作基本与插入Flash动画相同【插入】【媒体】【插件】，在弹出的【选择文件】对话框中指定插入的媒体文件即可。插入完成后，通过【属性检查器】进行属性设置。,华东师范大学计算中心,37,插入背景音乐示例1,插入背景音乐方法很多，列举两种：使用标签法只适用于IE，其参数设定不多直接把标记放于网页文件的.之间，设

16、置好音乐文件的路径即可FrontPage中经常使用,华东师范大学计算中心,38,插入背景音乐示例2,使用插件法【插入】【媒体】【插件】，在弹出的【选择文件】对话框中指定插入的背景音乐文件选中插件，单击【属性检查器】右下方的【参数】按钮，在弹出的【参数】对话框中如图输入,华东师范大学计算中心,39,5.使用CSS样式控制站点风格,层叠样式表(Cascading Style Sheets，CSS)是一系列格式设置规则，用来控制Web页面内容的外观使用CSS，可以将页面内容与表现形式分开页面内容（即 HTML代码）驻留在页面文件自身中；用于定义表现形式的CSS样式规则可以保存在另一个文件中外部样式表

17、文件，通常扩展名为CSS在本页面文档的其他部分通常放置在文件头部,华东师范大学计算中心,40,使用CSS样式控制站点风格,借助CSS技术，可以非常方便的统一网站所有页面的风格各网页使用统一的外部样式表文件CSS对样式的控制能力也比HTML代码强很多，允许设置许多HTML代码无法独自控制的属性,华东师范大学计算中心,41,CSS格式设置规则,CSS格式设置规则由两部分组成：选择器和声明选择器是用于标识格式元素声明用于具体定义元素样式,.masterfont-size:25pt;,选择器,声明,华东师范大学计算中心,42,选择器类型可分为三类类选择器，可应用于任何HTML标签。使用类选择器的规则也

18、被称为自定义CSS规则标签选择器，重新定义指定标签的外观样式。使用标签选择器的规则也被称为HTML 标签样式规则高级选择器，用于为某个标签组合或所有包含特定Id属性的标签定义格式设置声明由两部分组成：属性和值,名为myclassstyle的类选择器,针对超级链接的标签选择器,针对ID为table1的高级选择器,华东师范大学计算中心,43,CSS样式表存储位置,外部CSS样式表，存储在一个单独的外部CSS文件（扩展名为css）中在网页文件的头部中指定需要的外部CSS样式表文件链接一个CSS样式文件可以被链接到站点中的一个或多个页面，可以方便地统一网站风格内部（或嵌入式）CSS 样式表，保存在在网

19、页文件头部的标签内内联样式，直接定义在网页的每个具体的标签中Dreamweaver 8中不鼓励这种做法,华东师范大学计算中心,44,CSS样式冲突,将两个或更多CSS规则应用于同一对象时，这些规则可能会发生冲突并产生意外的结果浏览器按“就近原则”应用CSS规则如果应用于同一文本的两种规则的属性发生冲突，则浏览器显示最里面规则（离文本本身最近的规则）的属性如果有直接冲突，则类选择器样式的属性将覆盖标签选择器样式的属性 手动设置的HTML格式会覆盖通过CSS应用的格式为使CSS规则能够控制段落格式，必须删除所有手动设置的HTML格式,华东师范大学计算中心,45,CSS样式冲突示例,为 h1 定义的

20、样式可以指定所有 h1 段落的字体、大小和颜色，但应用于该段落的自定义 CSS 规则.Blue 将覆盖 h1 样式。另一个自定义 CSS 规则.Red 将覆盖.Blue。,This paragraph is controlled by the.Blue custom style and h1 HTML tag style.Except this sentence is controlled by the.Red style.Now were back to the.Blue style.,华东师范大学计算中心,46,创建外部CSS样式表文件及新的CSS样式规则,之前介绍设置文本、图像等对象的样

21、式属性时，已经使用了保存在网页文件头部的嵌入式CSS样式表接着将介绍如何创建外部CSS样式文件外部CSS样式表文件可被多个网页文件使用借助这种CSS样式表，可以非常方便的统一网站所有页面的风格,华东师范大学计算中心,47,创建外部CSS样式表文件及新的CSS样式规则,首先创建CSS样式表文件菜单【文件】【新建】，在弹出的【新建文档】对话框中选择【基本页】分类【CSS】文件，点击【创建】然后创建CSS样式规则在【CSS面板】中，单击面板右下侧的【新建CSS规则】按钮,华东师范大学计算中心,48,创建外部CSS样式表文件及新的CSS样式规则,在弹出的【新建CSS规则】对话框中选择选择器类型、名称及

22、该规则的创建位置本例定义了一条名为“mytitle”的类选择器，并且该规则将保存在之前创建的外部CSS文件中,华东师范大学计算中心,49,创建外部CSS样式表文件及新的CSS样式规则,确定后将弹出【CSS规则定义】对话框，在其中定义希望的CSS样式属性，单击确定，即完成一条CSS规则的创建,华东师范大学计算中心,50,创建外部CSS样式表文件及新的CSS样式规则,最后，外部CSS样式表文件定义了三条规则名为“mytitle”的类选择器规则（显示为.mytitle），定义其字体大小为24像素；p标签选择器，定义所有p标签字体为10像素；对未访问过的链接（a:link），定义其颜色为红色（#FF0

23、000）。,华东师范大学计算中心,51,编辑CSS样式规则,在【CSS面板】中选中需要修改的规则后，单击【编辑CSS规则】按钮，将弹出【CSS规则定义】对话框，在其中修改样式规则即可,华东师范大学计算中心,52,在网页文件中使用CSS样式,在网页文件中使用嵌入式CSS样式表中的样式规则如果网页文件中新建的是标签选择器或高级选择器样式规则，则网页中的相应标签或对象会自动使用该样式规则如果新建的是类选择器样式规则，则需要选中对象后，在【属性检查器】的【样式】选择框中选择该规则，之后，选中对象将按照该规则显示,华东师范大学计算中心,53,在网页文件中使用CSS样式,在网页文件中使用外部CSS样式表中

24、的样式规则需要先在网页文件中链接外部CSS文件然后在网页文件中使用CSS规则,华东师范大学计算中心,54,在网页文件中链接外部CSS文件,打开网页文件，在【CSS面板】中点击【添加样式表】按钮，在弹出的【链接外部样式表】对话框中，选择CSS文件，选择添加方式为“链接”。如果当前网页文档未保存过，则会生成一个对CSS文件的file:/绝对引用。将网页文档保存后，会自动转换为文档相对路径。,华东师范大学计算中心,55,在网页文件中使用CSS规则,成功链接后，对外部CSS文件中样式规则的使用与嵌入式CSS样式规则的使用一样。如果是标签选择器或高级选择器样式规则，则网页中的相应标签或对象会自动使用该样式规则；如果是类选择器样式规则，则需要选中对象后，在【属性检查器】的【样式】下拉列表框中选择该规则。,华东师范大学计算中心,56,作业与实验内容,作业07教材P240，5.4.6 习题与思考实验06版实验指导，实验1516对自己制作的多个网页，使用同一个外部CSS样式文件，统一超级链接颜色、表格背景色等样式,