最新网页制作第4讲网页设计高级技术幻灯片
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Biblioteka 01.02.20212
网页编辑器内设置的页面和浏览器中显示的页面实 际效果往往有所差异，即使同一页面由于使用不同 的浏览器或由于设置不同的分辨率，最终效果也都 不同，这样设计者就很难让页面按自己的意愿精确 布局，即便是掌握HTML语言精髓的人也要通过多 次地测试，才能驾驭好这些信息的排版。
样式表可以解决这样的问题，使页面完全按照制作 者的设想显示。我们可以通过它对网页上元素进行 精确的定位，轻易地控制文字、图片等各种对象。 内容结构和格式控制相分离，使得网页可以只由内 容构成，而将所有网页的格式控制指向某个CSS样 式表文件，其好处表现在以下两个方面：
01.02.2021
3
步骤2：单击样式面板底部的 新增样式按钮， 弹出“新建CSS样式”对话框，设置“选择 器类型”为高级，在“选择器”的下拉列表 中选择“a:link”，“定义在”设置为“新建 样式表文件”，“新建CSS样式”对话框的 设置如图所示。然后单击【确定】按钮。
01.02.2021
7
步骤3：进入如图所示的“保存样式表文件为” 对话框，选择路径、命名为mystyle，然后 单击【保存】按钮。
01.02.2021
8
步骤4：进入“CSS样式定义”对话框。该对 话框左侧共有8类选项，选择其中一类，右侧 会出现相应的选项，在此定义样式的具体格 式。此处不希望链接对象出现下划线，可将 “修饰”设置为“无”，其他设置如图所示。 单击【确定】按钮完成a:link状态的样式定义。
01.02.2021
16
步骤4：切换到“代码”视图下，查看嵌入式样式 的语句，在<head>…<head>中包含如下语句： <head> <style type="text/css"> <!-.test { font-family: "隶书"; font-size: 18px; color: #66CC33; text-decoration: blink; background-color: #FFCCFF; } --> </style> </head>
01.02.2021
17
2.应用嵌入式样式
步骤1：打开yangshi.htm，输入文字 “动物的天堂、动物的世界！”，如图（a） 所示，选中文字。
步骤2：在其属性面板的“样式”选项中选择 创建的test样式，即可应用样式，如图（b） 所示。
11
步骤7：保存后预览效果，超级链接将无下划 线，如图所示。
01.02.2021
12
2.应用外部样式表
我们以在quwen.htm文档中引用已经编辑好的 mystyle.css样式文件为例进行介绍，具体操作过 程如下：
步骤1：打开quwen.htm，选择【窗口】→【CSS 样式】命令打开样式面板。
01.02.2021
9
步骤5：定义链接a:visited状态的样式。单击样式面板底 部的 编辑样式按钮，弹出如图1所示的“编辑样式表”对
话框。在“编辑样式表”对话框中单击【新建】按钮也可 进入“新建CSS样式”对话框，设置“选择器类型”为高 级，“选择器”设置为“a:visited”，“定义在”选择为 第3步中创建的外部样式文件mystyle.css，单击【确定】 按钮进入“CSS样式定义”对话框，进行如图2所示的设 置。单击【确定】按钮完成a:visited状态的样式定义。
式与导入的样式发生冲突，则内部定义的样式将不起作用。链
接外部样式表文件使用以下的语句：
01.02.2021
14
<head> <link href="../CSS/mystyle.css" rel="stylesheet" type="text/css"> </head> 导入外部样式表文件使用以下的语句：
<head> <style type="text/css"> <!-@import url("../CSS/mystyle.css"); --> </style> </head>
01.02.2021
15
10.1.2嵌入式样式
1.创建嵌入式样式 这里我们以在新建yangshi.htm文档中创建test嵌
入式样式为例进行介绍，具体的操作过程如下： 步骤1：新建yangshi.htm，执行【窗口】→
【CSS样式】命令打开样式面板。 步骤2：单击样式面板底部的 新增样式按钮，弹出
“新建CSS样式”对话框，设置“选择器类型”为 “类”，“名称”为“.test”，“定义在”设置为 “仅对该文档”，然后单击【确定】按钮。 步骤3：进入“.test CSS样式定义”对话框，分别 进行“类型”和“背景”选项的设置。然后单击 【确定】按钮完成test内部样式义。
01.02.2021
10
步骤6：按照上述步骤分别设置a:hover状态和 a:active状态的样式定义。字体、大小、修饰效果 都不变，只改变字体的颜色，a:hover状态字体颜 色为#FF33CC，a:active状态字体颜色为#000000。 设置超级链接样式后的CSS面板如图所示。
01.02.2021
网页制作第4讲网页设计高级技 术
10.1CSS样式表
CSS（Cascading Style Sheet）即层叠样 式表，是现在被广泛使用的格式控制技术。 层叠样式表的功能非常强大，可以将其定义 在HTML的TAG（标签）里，也可以存储为 一个独立的.CSS文件做为链接文件。
一个样式表文件可以作用于多个页面，甚至 整个站点，因此具有很好的易用性和扩展性， 它可以精确地控制页面中的每一个元素
步骤2：单击样式面板底部的 附加样式表按钮，或 在样式面板中右击从弹出的菜单中选择“附加样式 表”，都可打开如图所示的对话框，通过【浏览】 按钮选择样式表文件，然后单击【确定】按钮即可。
01.02.2021
13
注意：<import>导入外部样式表与<link>链接外部样式表的不 同在于：无论该网页是否应用了CSS样式表，其都将读取样式 表；链接样式表则在该网页应用CSS样式表时才去读样式表。 import导入的样式表优先级较高，当在文档标记内部定义的样
网页编辑器内设置的页面和浏览器中显示的页面实 际效果往往有所差异，即使同一页面由于使用不同 的浏览器或由于设置不同的分辨率，最终效果也都 不同，这样设计者就很难让页面按自己的意愿精确 布局，即便是掌握HTML语言精髓的人也要通过多 次地测试，才能驾驭好这些信息的排版。
样式表可以解决这样的问题，使页面完全按照制作 者的设想显示。我们可以通过它对网页上元素进行 精确的定位，轻易地控制文字、图片等各种对象。 内容结构和格式控制相分离，使得网页可以只由内 容构成，而将所有网页的格式控制指向某个CSS样 式表文件，其好处表现在以下两个方面：
01.02.2021
3
步骤2：单击样式面板底部的 新增样式按钮， 弹出“新建CSS样式”对话框，设置“选择 器类型”为高级，在“选择器”的下拉列表 中选择“a:link”，“定义在”设置为“新建 样式表文件”，“新建CSS样式”对话框的 设置如图所示。然后单击【确定】按钮。
01.02.2021
7
步骤3：进入如图所示的“保存样式表文件为” 对话框，选择路径、命名为mystyle，然后 单击【保存】按钮。
01.02.2021
8
步骤4：进入“CSS样式定义”对话框。该对 话框左侧共有8类选项，选择其中一类，右侧 会出现相应的选项，在此定义样式的具体格 式。此处不希望链接对象出现下划线，可将 “修饰”设置为“无”，其他设置如图所示。 单击【确定】按钮完成a:link状态的样式定义。
01.02.2021
16
步骤4：切换到“代码”视图下，查看嵌入式样式 的语句，在<head>…<head>中包含如下语句： <head> <style type="text/css"> <!-.test { font-family: "隶书"; font-size: 18px; color: #66CC33; text-decoration: blink; background-color: #FFCCFF; } --> </style> </head>
01.02.2021
17
2.应用嵌入式样式
步骤1：打开yangshi.htm，输入文字 “动物的天堂、动物的世界！”，如图（a） 所示，选中文字。
步骤2：在其属性面板的“样式”选项中选择 创建的test样式，即可应用样式，如图（b） 所示。
11
步骤7：保存后预览效果，超级链接将无下划 线，如图所示。
01.02.2021
12
2.应用外部样式表
我们以在quwen.htm文档中引用已经编辑好的 mystyle.css样式文件为例进行介绍，具体操作过 程如下：
步骤1：打开quwen.htm，选择【窗口】→【CSS 样式】命令打开样式面板。
01.02.2021
9
步骤5：定义链接a:visited状态的样式。单击样式面板底 部的 编辑样式按钮，弹出如图1所示的“编辑样式表”对
话框。在“编辑样式表”对话框中单击【新建】按钮也可 进入“新建CSS样式”对话框，设置“选择器类型”为高 级，“选择器”设置为“a:visited”，“定义在”选择为 第3步中创建的外部样式文件mystyle.css，单击【确定】 按钮进入“CSS样式定义”对话框，进行如图2所示的设 置。单击【确定】按钮完成a:visited状态的样式定义。
式与导入的样式发生冲突，则内部定义的样式将不起作用。链
接外部样式表文件使用以下的语句：
01.02.2021
14
<head> <link href="../CSS/mystyle.css" rel="stylesheet" type="text/css"> </head> 导入外部样式表文件使用以下的语句：
<head> <style type="text/css"> <!-@import url("../CSS/mystyle.css"); --> </style> </head>
01.02.2021
15
10.1.2嵌入式样式
1.创建嵌入式样式 这里我们以在新建yangshi.htm文档中创建test嵌
入式样式为例进行介绍，具体的操作过程如下： 步骤1：新建yangshi.htm，执行【窗口】→
【CSS样式】命令打开样式面板。 步骤2：单击样式面板底部的 新增样式按钮，弹出
“新建CSS样式”对话框，设置“选择器类型”为 “类”，“名称”为“.test”，“定义在”设置为 “仅对该文档”，然后单击【确定】按钮。 步骤3：进入“.test CSS样式定义”对话框，分别 进行“类型”和“背景”选项的设置。然后单击 【确定】按钮完成test内部样式义。
01.02.2021
10
步骤6：按照上述步骤分别设置a:hover状态和 a:active状态的样式定义。字体、大小、修饰效果 都不变，只改变字体的颜色，a:hover状态字体颜 色为#FF33CC，a:active状态字体颜色为#000000。 设置超级链接样式后的CSS面板如图所示。
01.02.2021
网页制作第4讲网页设计高级技 术
10.1CSS样式表
CSS（Cascading Style Sheet）即层叠样 式表，是现在被广泛使用的格式控制技术。 层叠样式表的功能非常强大，可以将其定义 在HTML的TAG（标签）里，也可以存储为 一个独立的.CSS文件做为链接文件。
一个样式表文件可以作用于多个页面，甚至 整个站点，因此具有很好的易用性和扩展性， 它可以精确地控制页面中的每一个元素
步骤2：单击样式面板底部的 附加样式表按钮，或 在样式面板中右击从弹出的菜单中选择“附加样式 表”，都可打开如图所示的对话框，通过【浏览】 按钮选择样式表文件，然后单击【确定】按钮即可。
01.02.2021
13
注意：<import>导入外部样式表与<link>链接外部样式表的不 同在于：无论该网页是否应用了CSS样式表，其都将读取样式 表；链接样式表则在该网页应用CSS样式表时才去读样式表。 import导入的样式表优先级较高，当在文档标记内部定义的样