《网页中文本图像和动画元素》由会员分享，可在线阅读，更多相关《网页中文本图像和动画元素（56页珍藏版）》请在金锄头文库上搜索。
1、计算机技术应用计算机技术应用第五章第五章网页中文本图像和动画元素Stillwatersrundeep.流静水深流静水深,人静心深人静心深Wherethereislife,thereishope。有生命必有希望。有生命必有希望计算机技术应用计算机技术应用第五章第五章1. 网页中的文本元素网页中的文本元素文字应尽量符合人们的阅读习惯文字应尽量符合人们的阅读习惯除一般文字外，网页中可能还会除一般文字外，网页中可能还会包含一些特殊文字包含一些特殊文字 ，如换行符、，如换行符、不换行空格符、水平线等不换行空格符、水平线等 2华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章
2、插入文本和特殊字符插入文本和特殊字符插入文本插入文本 在在Dreamweaver 8中文本处理与在其他文字中文本处理与在其他文字处理程序中基本一样处理程序中基本一样插入空格需全角插入空格需全角 插入特殊字符插入特殊字符菜单【插入】菜单【插入】【HTML】【特殊字符】【特殊字符】或者在【插入】工具栏选择【文本】工具栏，或者在【插入】工具栏选择【文本】工具栏，单击最右侧的插入特殊符号单击最右侧的插入特殊符号 3华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章添加可选的中文字体添加可选的中文字体 选中文字后，在【属性】面板中【字体】列表选中文字后，在【属性】面板中【字
3、体】列表中即可设置文字字体中即可设置文字字体如果所需字体不在【字体】列表中，可以在列如果所需字体不在【字体】列表中，可以在列表的最下方单击【编辑字体列表】命令，弹出表的最下方单击【编辑字体列表】命令，弹出【编辑字体列表】对话框进行添加【编辑字体列表】对话框进行添加已添加字体可添加字体4华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章设置文本属性设置文本属性 文本格式分为字符格式和段落格式文本格式分为字符格式和段落格式字符格式包括：字符的字体、大小、颜色和字符格式包括：字符的字体、大小、颜色和样式等样式等段落格式包括：段落的对齐方式、项目符合段落格式包括：段落的对
4、齐方式、项目符合和段落的缩进等和段落的缩进等选中文字，在【属性工具栏】中进行属选中文字，在【属性工具栏】中进行属性设置性设置 5华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章设置文本属性设置文本属性某些简单的文本属性，可以直接通过某些简单的文本属性，可以直接通过HTML标标记实现。如：记实现。如： 粗体粗体HTML语言语言斜体斜体HTML语言语言加下划线加下划线HTML语言语言 表示强调，一般为斜体表示强调，一般为斜体 表示特别强调，一般为粗体表示特别强调，一般为粗体注意，如果同时还需设置其它属性，则需要借注意，如果同时还需设置其它属性，则需要借助助CSS样式
5、样式6华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章设置文本属性设置文本属性网页元素很多样式属性（如字体、网页元素很多样式属性（如字体、颜色、大小等）的设置都是使用颜色、大小等）的设置都是使用CSS样式来实现的样式来实现的完成字体、颜色、大小等属性设置完成字体、颜色、大小等属性设置后，可以在【样式】选择框中找到后，可以在【样式】选择框中找到一个名称类似一个名称类似“Style 1”的样式的样式在【在【CSS面板】中，可以看到该样式的面板】中，可以看到该样式的各属性各属性 当需要对样式进行修改时，如果明当需要对样式进行修改时，如果明确确CSS样式中各属性的含义，
6、可以样式中各属性的含义，可以在【在【CSS面板】中直接设置。面板】中直接设置。7华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章2. 文本超级链接文本超级链接 超级链接的超级链接的HTML标记为：标记为： 根据指向目标不同，在一个网页文档中可以创根据指向目标不同，在一个网页文档中可以创建如下建如下4种类型的链接。种类型的链接。链接到其他文档或文件链接到其他文档或文件（如图形、影片、（如图形、影片、PDF或声或声音文件）的链接音文件）的链接 跳转至文档内的特定位置（跳转至文档内的特定位置（命名锚记链接命名锚记链接）电子邮件链接电子邮件链接，此类链接新建一个收件人地
7、址已经，此类链接新建一个收件人地址已经填好的空白电子邮件填好的空白电子邮件 无址链接和脚本链接无址链接和脚本链接，此类链接能够在对象上附加，此类链接能够在对象上附加行为，或者创建执行行为，或者创建执行JavaScript代码的链接代码的链接8华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章“相对路径相对路径”和和“绝对路径绝对路径” 绝对路径绝对路径绝对路径提供所链接文档的完整绝对路径提供所链接文档的完整URL，而且包括所使，而且包括所使用的协议用的协议如果需要链接到其他服务器上的文档，必须使用绝对如果需要链接到其他服务器上的文档，必须使用绝对路径路径 文档相对
8、路径文档相对路径省略掉对于当前文档和所链接的文档都相同的绝对省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分部分，而只提供不同的路径部分一般情况下，站内链接多使用文档相对路径，这样当一般情况下，站内链接多使用文档相对路径，这样当网站移动时，链接不需要变化网站移动时，链接不需要变化 站点根目录相对路径站点根目录相对路径使用从站点的根文件夹到文档的路径。用正斜杠使用从站点的根文件夹到文档的路径。用正斜杠（/）表示站点根文件夹）表示站点根文件夹 9华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章10华东师范大学计算中心华东师范大学计算中心
9、计算机技术应用计算机技术应用第五章第五章链接到其他文档或文件的链接链接到其他文档或文件的链接直接在【属性检查器】中设置链接和目标直接在【属性检查器】中设置链接和目标 常用目标选项：常用目标选项：_blank、_parent、_self、_top如果使用了框架集网页，也会出现各框架名如果使用了框架集网页，也会出现各框架名11华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章链接到其他文档或文件的链接链接到其他文档或文件的链接如果是链接到网站内其如果是链接到网站内其他网页需注意他网页需注意应先保存新文件，再创建应先保存新文件，再创建文档相对路径，因为如果文档相对路径，
10、因为如果没有一个确切的起点，文没有一个确切的起点，文档相对路径无效。档相对路径无效。否则，否则，Dreamweaver将使将使用以用以 file:/ 开头的临时绝开头的临时绝对路径；当保存文件时，对路径；当保存文件时，自动将其转换为相对路径自动将其转换为相对路径 临时绝对路径站内链接的相对路径12华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章书签链接书签链接当网页内容较多时，可以在网页内部的适当位当网页内容较多时，可以在网页内部的适当位置增加置增加书签锚记书签锚记，然后在网页其他位置插入，然后在网页其他位置插入书书签超链接签超链接，并使书签指向该锚记。单击书签
11、超，并使书签指向该锚记。单击书签超链接可跳转到书签锚记处链接可跳转到书签锚记处第一步，创建第一步，创建书签锚记书签锚记选择【插入】工具栏的【常用】类别，单击【命名选择【插入】工具栏的【常用】类别，单击【命名锚记】按钮，在弹出的【命名锚记】对话框中输入锚记】按钮，在弹出的【命名锚记】对话框中输入锚记名称锚记名称注意，锚记名称区分大小写注意，锚记名称区分大小写13华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章书签链接书签链接第二步，创建第二步，创建书签超链接书签超链接 选中需要创建书签超链接的对象（如文字），选中需要创建书签超链接的对象（如文字），在【属性检查器】
12、的链接中，输入符号在【属性检查器】的链接中，输入符号“#”锚记名称锚记名称若要链接到当前文档中的名为若要链接到当前文档中的名为“bottom”的的锚记，输入锚记，输入#bottom若要链接到同一文件夹内其他文档中的名为若要链接到同一文件夹内其他文档中的名为“bottom”的锚记，可输入的锚记，可输入filename.html#bottom14华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章电子邮件链接电子邮件链接单击电子邮件链接后，将打开一个空白邮件信息窗口单击电子邮件链接后，将打开一个空白邮件信息窗口（如（如Outlook Express等）等）在电子邮件消息
13、窗口中，【收件人】框中自动为电子邮件链在电子邮件消息窗口中，【收件人】框中自动为电子邮件链接中指定邮件地址接中指定邮件地址选择菜单【插入】选择菜单【插入】【电子邮件链接】，在弹出的【电子邮件链接】，在弹出的【电子邮件链接】对话框中输入文本和电子邮件链接】对话框中输入文本和Email地址地址 或者，直接在【属性检查器】的【链接】框中按或者，直接在【属性检查器】的【链接】框中按“mailto:Email地址地址”规则输入，制作电子邮件链接规则输入，制作电子邮件链接15华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章无址链接和脚本链接无址链接和脚本链接无址链接无址链接
14、是未指派的链接是未指派的链接无址链接用于向网页中的对象或文本附加行为无址链接用于向网页中的对象或文本附加行为选择菜单【插入】选择菜单【插入】【超级链接】【超级链接】 ，链接内容，链接内容为空或者为空或者“#”或者，直接在【属性检查器】的【链接】框中或者，直接在【属性检查器】的【链接】框中输入输入“#”脚本链接脚本链接用于执行用于执行JavaScript代码或调用代码或调用JavaScript函数函数16华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章脚本链接示例脚本链接示例-弹出对话框弹出对话框创建无址链接创建无址链接选中该链接，在【行为】面板中添加行选中该链接
15、，在【行为】面板中添加行为为【弹出信息】，输入内容【弹出信息】，输入内容“欢迎来到欢迎来到我的网上家园我的网上家园”F12浏览浏览17华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章练习：网站的建立和管理练习：网站的建立和管理（1）利用）利用Dreamweaver 建立名为建立名为“我的我的网站网站”的网站，网站的位置在的网站，网站的位置在“c:sy”，站点中应包含素材中的，站点中应包含素材中的fazhanshi.htm、xianshiqi.htm、bj1.gif、bj2.gif、fly.JPG和和xx.swf文件。文件。 18华东师范大学计算中心华东师范大学计
16、算中心计算机技术应用计算机技术应用第五章第五章（2）利用素材）利用素材“电脑小常识电脑小常识.txt”在新在新创建的创建的c:sy站点中新建网页站点中新建网页index.htm，使其如图使其如图1的样张所示，其中的的样张所示，其中的“计算机计算机的发展史的发展史”超级链接到站点中的超级链接到站点中的fazhanshi.htm，单击，单击“显示器的使用显示器的使用”，可以在独立的窗口中看到，可以在独立的窗口中看到xianshiqi.htm的内容。的内容。19华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章图120华东师范大学计算中心华东师范大学计算中心计算机技术应
17、用计算机技术应用第五章第五章（3）在）在index.htm的标题下方增加一条蓝的标题下方增加一条蓝色的水平线，在文档的最下方，增加能色的水平线，在文档的最下方，增加能够左右交替移动的文字够左右交替移动的文字“电脑与生活电脑与生活”，蓝色的文字在黄色的背景上。，蓝色的文字在黄色的背景上。 21华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章（4）在）在c:sy站点中建立文件夹站点中建立文件夹txt，并将，并将素材中的素材中的“电脑小常识电脑小常识.txt”文件导入文件导入到其中。到其中。 最终效果在浏览器中显示最终效果在浏览器中显示22华东师范大学计算中心华东师范
18、大学计算中心计算机技术应用计算机技术应用第五章第五章3. 图像处理图像处理 恰当的使用图像，可以使网页的表现能力事半恰当的使用图像，可以使网页的表现能力事半功倍。但是过多的使用图片，会增加网页下载功倍。但是过多的使用图片，会增加网页下载流量，影响网页的浏览速度流量，影响网页的浏览速度目前网页中使用较多的图像格式目前网页中使用较多的图像格式GIF：GIF图像格式用于透明图像或动画图像格式用于透明图像或动画256色色JPG：JPG图像格式多用于质量要求较高的图像图像格式多用于质量要求较高的图像真彩色，可设定质量因子真彩色，可设定质量因子图像的图像的HTML标签：标签：23华东师范大学计算中心华东师
19、范大学计算中心计算机技术应用计算机技术应用第五章第五章插入图像插入图像插入图像时，为了确保图像引用的正确性，图插入图像时，为了确保图像引用的正确性，图像文件尽量置于当前站点中像文件尽量置于当前站点中 菜单【插入】菜单【插入】【图像】，在【选择图像源文【图像】，在【选择图像源文件】对话框中选择所需文件件】对话框中选择所需文件或者，将图像从【文件】面板中直接拖曳到【或者，将图像从【文件】面板中直接拖曳到【文档】窗口中的所需位置文档】窗口中的所需位置弹出【图像标签辅助功能属性】对话框，用以弹出【图像标签辅助功能属性】对话框，用以设置【替代文本】和【详细描述】。根据需要设置【替代文本】和【详细描述】。
20、根据需要输入，完成图像插入输入，完成图像插入24华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章设置图像设置图像 设置图像大小设置图像大小 直接用鼠标拖曳改变图像大小直接用鼠标拖曳改变图像大小使用【属性检查器】精确设置使用【属性检查器】精确设置 设置替换文字设置替换文字 设置替换文字后，当在浏览器浏览时，图像如果没设置替换文字后，当在浏览器浏览时，图像如果没有被正常下载，将会在浏览器中显示替换文字有被正常下载，将会在浏览器中显示替换文字 为图像添加超级接为图像添加超级接 在【属性检查器】中设置图像链接和目标后，浏览在【属性检查器】中设置图像链接和目标后，浏览时点
21、击图像即可转向目标位置时点击图像即可转向目标位置 25华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章设置图像设置图像设置图像边距设置图像边距 【垂直边距】指图像的顶部和底部与其他元素的距【垂直边距】指图像的顶部和底部与其他元素的距离离【水平边距】指图像左侧和右侧与其他元素的距离【水平边距】指图像左侧和右侧与其他元素的距离 设置低解析度源设置低解析度源 低解析度源指定在载入主图像之前应该载入的图像低解析度源指定在载入主图像之前应该载入的图像有时，对于一些比较大的图像，可以设置低解析度有时，对于一些比较大的图像，可以设置低解析度源为原图像的黑白版本（黑白图较原图小
22、）源为原图像的黑白版本（黑白图较原图小）设置对齐方式设置对齐方式 设置图像边框设置图像边框 26华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章设置图像设置图像图像地图与热点设置图像地图与热点设置 图像地图指已被分为多个区域（或称图像地图指已被分为多个区域（或称“热点热点”）的图像；当用户单击某个热点时，会发）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新网页等）。生某种操作（例如，打开一个新网页等）。这样，就相当于在一幅图像上设置了多个链这样，就相当于在一幅图像上设置了多个链接接矩形热点工具矩形热点工具椭圆热点工具椭圆热点工具多边形热点工具多边
23、形热点工具27华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章一幅中国地图的北京与上海位置处设置一幅中国地图的北京与上海位置处设置了两个热点，分别指向北京和上海网页了两个热点，分别指向北京和上海网页的链接的链接 28华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章编辑图像编辑图像 裁剪图像裁剪图像单击【裁剪】按钮，用鼠标在图像的单击【裁剪】按钮，用鼠标在图像的8个切个切割点上拖曳裁剪割点上拖曳裁剪修正图像亮度和对比度修正图像亮度和对比度 调整图像的高亮显示、阴影和中间色调调整图像的高亮显示、阴影和中间色调 锐化图像锐化图像 通过增
24、加图像中边缘的对比度来调整图像的通过增加图像中边缘的对比度来调整图像的焦点，使图像更清晰焦点，使图像更清晰 29华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章插入网页背景图插入网页背景图 切忌使用过大的图像，这样会影响浏览速度切忌使用过大的图像，这样会影响浏览速度一般也不用颜色太深太复杂的图像，这样容易一般也不用颜色太深太复杂的图像，这样容易“喧宾喧宾夺主夺主” 在【属性检查器】中单击【页面属性】，弹出【页面在【属性检查器】中单击【页面属性】，弹出【页面属性】对话框，选择【外观】，然后选择需要添加的属性】对话框，选择【外观】，然后选择需要添加的背景图背景图 3
25、0华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章4. 在网页中插入在网页中插入Flash动画及其他动画及其他多媒体多媒体 Flash动画凭借其较好的画质、精简动画凭借其较好的画质、精简的大小、开发较易和提供简单的互动的大小、开发较易和提供简单的互动等诸多优点，已被越来越多的应用在等诸多优点，已被越来越多的应用在网页设计中网页设计中 31华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章插入已有的插入已有的Flash动画动画 打开菜单【插入】打开菜单【插入】【媒体】，在弹出的选单【媒体】，在弹出的选单中选择中选择Flash插入插入F
26、lash动画后，使用【属性检查器】可以设动画后，使用【属性检查器】可以设置常用置常用Flash动画属性动画属性大小、边距、是否循环、是否自动播放、品质、显大小、边距、是否循环、是否自动播放、品质、显示比例、背景颜色、对齐方式等示比例、背景颜色、对齐方式等还可以设置还可以设置Flash插件的各种特殊参数插件的各种特殊参数32华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章单击【属性检查器】右下方的【参数】按钮，单击【属性检查器】右下方的【参数】按钮，在弹出的【参数】对话框中，可以设置在弹出的【参数】对话框中，可以设置Flash插插件的特殊参数。件的特殊参数。如参数
27、如参数“wmode”设置为设置为“transparent”，表示，表示Flash动画背景将为透明动画背景将为透明 33华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章插入插入Flash按钮按钮 Flash按钮可用于网页导航，样式较文字导航美按钮可用于网页导航，样式较文字导航美观观打开菜单【插入】打开菜单【插入】【媒体】【媒体】【Flash按钮】，按钮】，选择按钮样式，输入按钮文本、链接地址和背选择按钮样式，输入按钮文本、链接地址和背景色等信息，点击【确定】按钮后即可插入景色等信息，点击【确定】按钮后即可插入Flash按钮按钮 34华东师范大学计算中心华东师范大学
28、计算中心计算机技术应用计算机技术应用第五章第五章插入插入Flash文本对象文本对象 打开菜单【插入】打开菜单【插入】【媒体】【媒体】【Flash文本】，文本】，输入显示文本、文字大小、字体、颜色、链接输入显示文本、文字大小、字体、颜色、链接地址和背景色等信息，单击【确定】按钮后即地址和背景色等信息，单击【确定】按钮后即可插入可插入Flash文本文本 注：图中第二注：图中第二行文本使用行文本使用Webdings字体字体35华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章插入其他多媒体插入其他多媒体 其他类型的多媒体即视频、声音等媒体文件其他类型的多媒体即视频、声音
29、等媒体文件插入插件操作基本与插入插入插件操作基本与插入Flash动画相同动画相同【插入】【插入】【媒体】【媒体】【插件】，在弹出的【插件】，在弹出的【选择文件】对话框中指定插入的媒体文件即可。选择文件】对话框中指定插入的媒体文件即可。插入完成后，通过【属性检查器】进行属性设插入完成后，通过【属性检查器】进行属性设置。置。 36华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章插入背景音乐示例插入背景音乐示例1插入背景音乐方法很多，列举两种：插入背景音乐方法很多，列举两种：使用使用标签法标签法只适用于只适用于IE，其参数设定不多，其参数设定不多直接把直接把标记放于网
30、页文件的标记放于网页文件的.之间，设置好音乐文件的路径之间，设置好音乐文件的路径即可即可FrontPage中经常使用中经常使用37华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章插入背景音乐示例插入背景音乐示例2使用插件法使用插件法【插入】【插入】【媒体】【媒体】【插件】，在弹出的【选【插件】，在弹出的【选择文件】对话框中指定插入的背景音乐文件择文件】对话框中指定插入的背景音乐文件选中插件，单击【属性检查器】右下方的【参数选中插件，单击【属性检查器】右下方的【参数】按钮，在弹出的【参数】对话框中如图输入】按钮，在弹出的【参数】对话框中如图输入38华东师范大学计算
31、中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章5. 使用使用CSS样式控制站点风格样式控制站点风格 层叠样式表层叠样式表 (Cascading Style Sheets，CSS) 是是一系列格式设置规则，用来控制一系列格式设置规则，用来控制Web页面内容页面内容的外观的外观使用使用CSS，可以将页面内容与表现形式分开，可以将页面内容与表现形式分开页面内容（即页面内容（即 HTML代码）驻留在页面文件自身中；代码）驻留在页面文件自身中；用于定义表现形式的用于定义表现形式的CSS样式规则可以保存在另一样式规则可以保存在另一个文件中个文件中外部样式表文件，通常扩展名为外部样式表文件
32、，通常扩展名为CSS在本页面文档的其他部分在本页面文档的其他部分通常放置在文件头部通常放置在文件头部39华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章使用使用CSS样式控制站点风格样式控制站点风格借助借助CSS技术，可以非常方便的统一技术，可以非常方便的统一网站所有页面的风格网站所有页面的风格各网页使用统一的外部样式表文件各网页使用统一的外部样式表文件CSS对样式的控制能力也比对样式的控制能力也比HTML代码强很多，允许设置许多代码强很多，允许设置许多HTML代码无法独自控制的属性代码无法独自控制的属性40华东师范大学计算中心华东师范大学计算中心计算机技术应用
33、计算机技术应用第五章第五章CSS格式设置规则格式设置规则CSS格式设置规则由两部分组成：格式设置规则由两部分组成：选择器选择器和和声明声明选择器是用于标识格式元素选择器是用于标识格式元素声明用于具体定义元素样式声明用于具体定义元素样式.masterfont-size: 25pt;选择器选择器声明声明41华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章选择器选择器类型可分为三类类型可分为三类类选择器类选择器，可应用于任何，可应用于任何HTML标签。使用类选择器标签。使用类选择器的规则也被称为自定义的规则也被称为自定义CSS规则规则标签选择器标签选择器，重新定义指定
34、标签的外观样式。使用标，重新定义指定标签的外观样式。使用标签选择器的规则也被称为签选择器的规则也被称为HTML 标签样式规则标签样式规则高级选择器高级选择器，用于为某个标签组合或所有包含特定，用于为某个标签组合或所有包含特定Id属性的标签定义格式设置属性的标签定义格式设置声明声明由两部分组成：属性和值由两部分组成：属性和值 名为名为myclassstyle的类选择器的类选择器针对超级链接的针对超级链接的标签选择器标签选择器针对针对ID为为table1的高级选择器的高级选择器42华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章CSS样式表存储位置样式表存储位置 外
35、部外部CSS样式表样式表，存储在一个单独的外部，存储在一个单独的外部CSS文件（扩展名为文件（扩展名为css）中）中在网页文件的头部中指定需要的外部在网页文件的头部中指定需要的外部CSS样式表文样式表文件链接件链接一个一个CSS样式文件可以被链接到站点中的一个或多样式文件可以被链接到站点中的一个或多个页面，可以方便地统一网站风格个页面，可以方便地统一网站风格内部（或嵌入式）内部（或嵌入式）CSS 样式表样式表，保存在在网页，保存在在网页文件头部的文件头部的标签内标签内内联样式内联样式，直接定义在网页的每个具体的标签，直接定义在网页的每个具体的标签中中Dreamweaver 8中不鼓励这种做法中
36、不鼓励这种做法43华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章CSS样式冲突样式冲突 将两个或更多将两个或更多CSS规则应用于同一对象时，这些规则应用于同一对象时，这些规则可能会发生冲突并产生意外的结果规则可能会发生冲突并产生意外的结果浏览器按浏览器按“就近原则就近原则”应用应用CSS规则规则如果应用于同一文本的两种规则的属性发生冲突，则如果应用于同一文本的两种规则的属性发生冲突，则浏览器显示最里面规则（离文本本身最近的规则）的浏览器显示最里面规则（离文本本身最近的规则）的属性属性如果有直接冲突，则类选择器样式的属性将覆盖标签如果有直接冲突，则类选择器样式的
37、属性将覆盖标签选择器样式的属性选择器样式的属性 手动设置的手动设置的HTML格式会覆盖通过格式会覆盖通过CSS应用的格应用的格式式为使为使CSS规则能够控制段落格式，必须删除所有规则能够控制段落格式，必须删除所有手动设置的手动设置的HTML格式格式44华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章CSS样式冲突示例样式冲突示例为为 h1 定义的样式可以指定所有定义的样式可以指定所有 h1 段落的字体、大小和颜段落的字体、大小和颜色，但应用于该段落的自定义色，但应用于该段落的自定义 CSS 规则规则 .Blue 将覆盖将覆盖 h1 样式。另一个自定义样式。另一个
38、自定义 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. 45华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建外部创建外部CSS样式表文件及新的样式表文件及新的CSS样式规则样式规则之前介绍设置文本、图像等对象的样式之前介绍设置
39、文本、图像等对象的样式属性时，已经使用了保存在网页文件头属性时，已经使用了保存在网页文件头部的嵌入式部的嵌入式CSS样式表样式表接着将介绍如何创建外部接着将介绍如何创建外部CSS样式文件样式文件外部外部CSS样式表文件可被多个网页文件使用样式表文件可被多个网页文件使用借助这种借助这种CSS样式表，可以非常方便的统一样式表，可以非常方便的统一网站所有页面的风格网站所有页面的风格 46华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建外部创建外部CSS样式表文件及新的样式表文件及新的CSS样式规则样式规则首先创建首先创建CSS样式表文件样式表文件菜单【文件】菜单【
40、文件】【新建】，在弹出的【新建文档】【新建】，在弹出的【新建文档】对话框中选择【基本页】分类对话框中选择【基本页】分类【CSS】文件，点】文件，点击【创建】击【创建】然后创建然后创建CSS样式规则样式规则在【在【CSS面板】中，单击面板右下侧的【新建面板】中，单击面板右下侧的【新建CSS规则】按钮规则】按钮 添加样式表添加样式表新建新建CSS规则规则编辑编辑CSS规则规则删除删除CSS规则规则47华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建外部创建外部CSS样式表文件及新的样式表文件及新的CSS样式规则样式规则在弹出的【新建在弹出的【新建CSS规则】对话
41、框中选择选择器类规则】对话框中选择选择器类型、名称及该规则的创建位置型、名称及该规则的创建位置本例定义了一条名为本例定义了一条名为“mytitle”的类选择器，并的类选择器，并且该规则将保存在之前创建的外部且该规则将保存在之前创建的外部CSS文件中文件中 48华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建外部创建外部CSS样式表文件及新的样式表文件及新的CSS样式规则样式规则确定后将弹出【确定后将弹出【CSS规则定义】对话框，在其中定规则定义】对话框，在其中定义希望的义希望的CSS样式属性样式属性 ，单击确定，即完成一条，单击确定，即完成一条CSS规则的创
42、建规则的创建 49华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建外部创建外部CSS样式表文件及新的样式表文件及新的CSS样式规则样式规则最后，外部最后，外部CSS样式表文件定样式表文件定义了三条规则义了三条规则名为名为“mytitle”的类选择器规的类选择器规则（显示为则（显示为.mytitle），定义），定义其字体大小为其字体大小为24像素；像素；p标签选择器，定义所有标签选择器，定义所有p标签标签字体为字体为10像素；像素；对未访问过的链接（对未访问过的链接（a:link），），定义其颜色为红色（定义其颜色为红色（#FF0000）。）。 50华东师范大
43、学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章编辑编辑CSS样式规则样式规则在【在【CSS面板】中选中需要修改的规则后，面板】中选中需要修改的规则后，单击【编辑单击【编辑CSS规则】按钮，将弹出【规则】按钮，将弹出【CSS规则定义】对话框，在其中修改样式规则定义】对话框，在其中修改样式规则即可规则即可添加样式表添加样式表新建新建CSS规则规则编辑编辑CSS规则规则删除删除CSS规则规则51华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章在网页文件中使用在网页文件中使用CSS样式样式在网页文件中在网页文件中使用嵌入式使用嵌入式CSS样式表样
44、式表中的中的样式规则样式规则如果网页文件中新建的是如果网页文件中新建的是标签选择器标签选择器或或高级高级选择器样式规则选择器样式规则，则网页中的相应标签或对，则网页中的相应标签或对象会自动使用该样式规则象会自动使用该样式规则如果新建的是如果新建的是类选择器样式规则类选择器样式规则，则需要选，则需要选中对象后，在【属性检查器】的【样式】选中对象后，在【属性检查器】的【样式】选择框中选择该规则，之后，选中对象将按照择框中选择该规则，之后，选中对象将按照该规则显示该规则显示52华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章在网页文件中使用在网页文件中使用CSS样式样
45、式在网页文件中在网页文件中使用外部使用外部CSS样式样式表表中的样式规则中的样式规则需要先在网页文件中链接外部需要先在网页文件中链接外部CSS文件文件然后在网页文件中使用然后在网页文件中使用CSS规则规则53华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章在网页文件中链接外部在网页文件中链接外部CSS文件文件打开网页文件，在【打开网页文件，在【CSS面板】中点击【添加面板】中点击【添加样式表】按钮，在弹出的【链接外部样式表】样式表】按钮，在弹出的【链接外部样式表】对话框中，选择对话框中，选择CSS文件，选择添加方式为文件，选择添加方式为“链接链接”。如果当前网页
46、文档未保存过，则会生成一个对如果当前网页文档未保存过，则会生成一个对CSS文件的文件的file:/绝对引用。将网页文档保存后，绝对引用。将网页文档保存后，会自动转换为文档相对路径。会自动转换为文档相对路径。 54华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章在网页文件中使用在网页文件中使用CSS规则规则成功链接后，对外部成功链接后，对外部CSS文件中样式规则的使文件中样式规则的使用与嵌入式用与嵌入式CSS样式规则的使用一样。样式规则的使用一样。如果是如果是标签选择器标签选择器或或高级选择器样式规则高级选择器样式规则，则，则网页中的相应标签或对象会自动使用该样式
47、规网页中的相应标签或对象会自动使用该样式规则；则；如果是如果是类选择器样式规则类选择器样式规则，则需要选中对象后，则需要选中对象后，在【属性检查器】的【样式】下拉列表框中选在【属性检查器】的【样式】下拉列表框中选择该规则。择该规则。55华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章作业与实验内容作业与实验内容作业作业07教材教材P240，5.4.6 习题与思考习题与思考实验实验06版实验指导，实验版实验指导，实验1516对自己制作的多个网页，使用同一个外部对自己制作的多个网页，使用同一个外部CSS样式文件，统一超级链接颜色、表格背样式文件，统一超级链接颜色、表格背景色等样式景色等样式56华东师范大学计算中心华东师范大学计算中心
