第五章 在网页中使用CSS样式
教你轻松上手使用AdobeDreamweaver进行网页设计和开发
教你轻松上手使用AdobeDreamweaver进行网页设计和开发第一章：Adobe Dreamweaver 简介Adobe Dreamweaver 是一款专业的网页设计和开发工具，可帮助用户快速创建和编辑网页。
它提供了直观的用户界面，并支持多种编程语言和标准，包括HTML、CSS、JavaScript等。
同时，Dreamweaver 还提供了丰富的模板和库，使用户能够轻松创建漂亮、功能强大的网页。
第二章：Dreamweaver 安装与设置在开始使用 Dreamweaver 之前，首先需要进行安装和设置。
用户可从 Adobe 官方网站下载安装程序，并按照指示进行安装。
安装完成后，用户可以根据个人喜好进行常用设置，包括默认编码、背景颜色等。
此外，Dreamweaver 还提供了多种主题供用户选择，使工作界面更加个性化。
第三章：网页设计基础在进行网页设计之前，我们需要先了解一些基础知识。
Dreamweaver 提供了丰富的工具和资源，帮助用户轻松上手。
用户可以使用所见即所得的编辑器，直接拖放元素、调整样式和布局。
另外，Dreamweaver 还支持分屏编辑，用户可同时查看代码和预览效果，便于快速调试和修改。
第四章：HTML 编辑与管理HTML 是网页设计和开发的基础，掌握 HTML 编辑和管理是使用 Dreamweaver 的重要技能之一。
Dreamweaver 提供了强大的HTML 编辑功能，用户可以直接编辑 HTML 代码，或通过所见即所得的编辑器进行拖放操作。
同时，Dreamweaver 还支持代码自动完成、智能提示等功能，提高编辑效率和准确性。
第五章：CSS 样式设计CSS 是网页样式设计的核心语言，Dreamweaver 提供了全面的CSS 编辑和管理支持。
用户可以使用CSS面板进行样式编辑，包括选择器、属性和值的设置。
Dreamweaver 还提供了强大的样式库，用户可以直接选择样式模板，快速应用到网页上。
使用样式表的三种方式
在网页中使用CSS的三种方式
1、行内样式（在HTML元素内部，利用style属性直接定义样式）例：
2、内部样式表（在网页<head>标签中，利用style标签定义样式）
例：
2、外部样式表（将样式定义在另外一个样式表文件中）
例：
（a）通过<link>标签引入样式表（推荐）
（b）通过@import导入样式表
优先级原则：
如果声明的样式出现重复的情况，就出现了优先级的问题。
优先级如下：
1、就近原则；
2、后面的样式设定>前面的样式设定；
3、特殊的样式设定>一般的样式设定；
4、行内样式>ID样式>类别样式>HTML标签样式；。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
网页制作课后练习
《网页制作》课后练习第一章网页制作基础判断正误（1）HTML标记符一般不区分大小写。
（对）（2）网站就是一个链接的页面集合。
（对）（3）将网页上传到Internet时通常采用FTP方式。
（对）（4）所有的HTML标记符都包括开始标记符和结束标记符。
（错）选择题（单选）（1）WWW是的意思。
答案：BA．网页B．万维网C．浏览器D．超文本传输协议（2）在网页中显示特殊字符，如果要输入“<”，应使用_________。
答案：D A．lt; B．≪ C．< D．<（3）浏览器是一种_________。
答案：BA．系统程序B．客户端程序C．服务器端程序D．编程工具填空题（1）如果要为网页指定黑色的背景颜色，应使用以下html语句：<body > 答案：bgcolor="black"（2）网页的扩展名通常是：答案：.htm或.html（3）要为网页添加背景音乐，应使用标记符。
答案：BGSOUND（4）BODY的属性用于设置未被访问过的超链接的颜色。
答案：link简答题（1）简要说明HTML 的基本工作原理。
综合题（1）编写一个能够显示背景图案并能播放背景音乐的网页。
（2）编写一个显示为如图所示的页面。
第二章文本与超链接判断正误（1）用H1标记符修饰的文字通常比用H6标记符修饰的要小（错）。
（2）B标记符表示用粗体显示所包括的文字。
（对）（3）使用FONT 标记符的size 属性可以指定字体的大小。
（对）（4）OL和LI标记符结合，可以创建无序列表，UL和LI 标记符结合可以创建有序列表。
（错）（5）在网页中创建超链接，其中URL 可以是相对地址或绝对地址。
（对）选择题（单选）（1）以下关于FONT标记符的说法中，错误的是：答案：D A．可以使用color 属性指定文字颜色。
B．可以使用size 属性指定文字大小（也就是字号）。
C．指定字号时可以使用1~7 的数字。
CSS网页设计标准教程课程设计
CSS网页设计标准教程课程设计简介随着互联网的普及，越来越多的人学习网页设计。
但是，许多人对CSS的理解都不够深入，只能做出简单的网页，并不能做出恰当的效果。
因此，在本课程设计中，我们将重点讲授CSS的使用，让学生们对CSS 有深入和全面的理解，掌握制作一流网页的技能。
学习目标本课程设计的学习目标如下：1.理解CSS的基本概念，掌握CSS的语法和基本知识点。
2.熟悉盒模型和文本属性等CSS层叠样式的基本属性。
3.掌握定位和浮动等CSS布局的基本方法和技巧。
4.练习使用CSS实现不同的网页设计效果。
5.学习常用的CSS框架和工具，提高工作效率。
课程安排本课程设计共分为7个章节，具体内容如下：第一章：CSS基础•CSS概述•CSS语法和选择器•三种CSS样式表：行内样式、嵌入式样式和外部样式表•CSS样式表的优先级和继承第二章：CSS样式属性•盒模型和文本属性•背景、边框、文本、字体、颜色等CSS属性•overflow、display、visibility、z-index等CSS属性第三章：CSS布局•浮动和清除浮动•定位和层级•相对定位、绝对定位、固定定位•弹性布局和栅格布局第四章：CSS选择器•常用选择器：ID选择器、类选择器、标签选择器、伪类选择器•层次选择器、属性选择器、通用选择器、伪元素选择器•选择器组合和选择器优先级第五章：CSS动画和过渡•CSS过渡的基本使用方法•CSS动画的基本使用方法•CSS动画的关键帧动画第六章：CSS预处理器•Less、Sass、Stylus等CSS预处理器的基本语法•CSS预处理器的变量、嵌套、混合等功能•使用CSS预处理器提高工作效率第七章：CSS框架和工具•Bootstrap框架的使用•jQuery库的基本使用方法•Webpack等前端构建工具的基本使用方法教学方法本课程设计采用“讲授+实践”相结合的教学方法，通过灵活的授课方式帮助学生深度理解CSS知识点的实现。
第5章 CSS和DIV的应用
第5章 CSS和DIV的应用
5.1 CSS样式 5.1.3 创建CSS样式 在Dreamweaver CS6中，执行“窗口”|“CSS样式” 命令，打开“CSS样式”面板，如图5.1所示。在 “CSS样式”面板的底部排列有几个按钮，具体内容 如下。 “附加样式表”：可以在HTML文档中链接一 个外部的CSS文件。 “新建CSS规则”：可以编辑新的CSS样式文件。
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“CSS规则定义”对话框左侧的“分类”列表框中选择“区块”选项可 以定义标签和属性的间距和对齐设臵，如图5.5所示。
图5.5 区块样式的定义
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“区块”中的各选项参数如下： • Word-spacing：设臵单词的间距，若要设臵特定的值，在下拉列表框 中选择“值”选项，然后输入一个数值，在第二个下拉列表框中选择 度量单位。 • Letter-spacing：增加或减小字母或字符的间距。若要减少字符间距， 指定一个负值，字母间距设臵覆盖对齐的文本设臵。 • Vertical-align：指定应用它的元素的垂直对齐方式。仅当应用于＜img ＞标签时，Dreamweaver才在文档窗口中显示该属性。 • Text-align：设臵元素中的文本对齐方式。 • Text-indent：指定第一行文本缩进的程度。可以使用负值创建凸出， 但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才 S和DIV的应用
5.1.4 定义CSS样式属性 在“类型”中的各选项参数如下： • Font-weight：对字体应用特定或相对的粗体量。“正常”等于 400,“粗体”等于700。 • Font-variant：设臵文本的小型大写字母变量。Dreamweaver不在文 档窗口中显示该属性。 • Text-transform：将选定内容中的每个单词的首字母大写或将文本设 臵为全部大写或小写。 • color：设臵文本颜色。
css样式表的作用及使用方式
css样式表的作用及使用方式CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
使用CSS样式设置页面格式，可将页面内容与表现形式分离。
以下是CSS样式表的主要作用及使用方式：一、作用：1. 可以灵活控制网页中文本的字体、颜色、大小、间距、风格及位置。
2. 可以灵活地为网页中的元素设置各种效果的边框。
3. 可以方便地为网页中的元素设置不同的背景颜色、背景图像及平铺方式。
4. 可以控制网页中各元素的位置，使元素在网页中浮动。
5. 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。
6. 可以与脚本语言相结合，使网页中的元素产生各种动态效果。
二、使用方式：1. 将样式定义在HTML元素的style属性中。
2. 将样式定义在HTML文档的header部分。
3. 将样式声明在一个专门的CSS文件中，以供HTML页面引用。
此外，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。
如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。
在多个页面中使用同一个CSS样式表，可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表，实现多个页面风格的统一。
例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
以上信息仅供参考，如需获取更多信息，建议咨询专业的编程人员。
人机交互界面设计第五章 CSS3详解_OK
07 css3中的动画
07-01 2d变形
07-03 3d变形
07-02 css3过渡
07-04 animation动画
2
01 css3概述
CSS(Cascading Style Sheets)，即层叠样式表。他用来设置网页中各种标签的样式，如设 置文字大小，颜色，行高，背景等等。“层叠”是指当在 HTML文件中引用多个样 式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突。
Css部分： p a{
color:#ff0000; font-size:14px; }
11
03 css的声明及选择器
通配符选择器
它由星号*来表示选择器的名称，可以定义所有的网页元素显示 格式。通配符一般用于统一浏览器设置
例如： *{ margin:0; padding:0; } 意思是，将该页面的所有标签样式 中的外边距、内边距重置为0，来统 一浏览器样式
16
05 css3基本属性
----背景属性 背景图片
图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。 语法为background-image:url(图片路径)
背景位置
在网页中需要将背景图片放在我们希望的位置，所以可以通过backgroundposition属性来改变默认的位置。 background-position：top center background-position:10px 10px background-position:50% 50% background-position:left 20px top 10px
20
05 css3基本属性
----背景属性 案例
请完善html及css。将素材提供的bg.jpg放到页面中间，并且可以根据页面大小自 动缩放，不重复，背景图片以外填充#dff2f4天蓝色。文字大小为20像素。
如何在Dreamweaver中使用CSS进行样式设计
如何在Dreamweaver中使用CSS进行样式设计章节一：Dreamweaver介绍Dreamweaver是一种流行的网页设计和开发工具，由Adobe公司开发。
它提供了一种图形用户界面，使用户可以轻松创建和编辑网站，以及添加样式和交互功能。
在本文中，我们将学习如何在Dreamweaver中使用CSS进行样式设计。
章节二：CSS介绍CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于定义网页元素外观和布局的语言。
它通过将样式与HTML文档分离，使得样式的更改更加容易和快捷。
章节三：在Dreamweaver中创建新的CSS文件在开始样式设计之前，我们需要创建一个新的CSS文件。
在Dreamweaver中，你可以选择菜单中的“文件”>“新建”>“CSS样式表”，然后在弹出的对话框中输入文件名和保存路径。
章节四：链接CSS文件一旦创建了CSS文件，我们需要将其链接到HTML文件中。
在Dreamweaver中，你可以选择菜单中的“窗口”>“CSS样式表”以打开CSS面板。
然后，你可以选择将CSS文件链接到HTML文件中，以应用定义的样式。
章节五：应用样式现在我们可以开始应用样式了。
在Dreamweaver中，你可以选择需要应用样式的HTML元素，然后在CSS面板中找到符合要求的属性。
你可以通过简单地设置属性值来更改元素的样式，比如修改字体、颜色、背景等。
章节六：类选择器类选择器是CSS中使用频率最高的一种选择器。
它允许将样式应用于特定的HTML元素。
在Dreamweaver中，你可以在CSS规则面板中使用“.类名”来定义类选择器，并将其应用于需要样式的HTML元素。
章节七：ID选择器ID选择器与类选择器类似，但它只能应用于具有唯一ID属性的HTML元素。
在Dreamweaver中，你可以在CSS规则面板中使用“#ID名”来定义ID选择器，并将其应用于特定的HTML元素。
[PPT模板]CSS+DIV_教程_OK
![[PPT模板]CSS+DIV_教程_OK](https://img.taocdn.com/s3/m/017f42f3de80d4d8d05a4f24.png)
</STYLE>
作为选择符。
</HEAD>
5-1.htm
CSS样式表
4
一、CSS的基本概念
• 3、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一 起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用相同样式：
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
CSS样式表
23
鼠标属性
• 让鼠标移到不同对象上面，显示不同形状。 – Cursor属性，取值如下 • Auto：自动按默认显示 • Crosshair：“＋” • Hand:手形 • Text：文本I形 • Wait：等待 • ……
CSS样式表
24
练习：
• 1、若要在网页上使用使用统一的页面风格： – 背景为浅蓝灰色（#cdcdfe）， – 文本为深蓝色（#000066）， – 所有网页都不留边(Margin)， – 且列表项目、表格及段落文本中的字体均为10.5pt；颜色：绿色；文本对 齐：居中；字体：楷体,Times New Roman；文字格式：加粗。
CSS样式表
7
一、CSS的基本概念
• 4、注释
➢ CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
CSS样式表
8
一、CSS的基本概念
• 5、选择符
➢ 样式表的基本语法形式：
selector{property1:value1; property2:value2;…}
CSS样式表
25
练习：
• 2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格： – 文字大小：10.5pt; – 颜色：绿色； – 文本对齐：居中； – 字体：楷体 – 文字格式：加下划线
如何使用Dreamweaver进行网页设计布局
如何使用Dreamweaver进行网页设计布局第一章：介绍DreamweaverDreamweaver是一款流行的网页设计和开发工具，由Adobe公司开发。
它提供了一个强大的可视化界面，用于创建和编辑网页。
Dreamweaver与其他网页设计软件相比具有许多独特的功能和工具，使它成为许多专业和业余设计师的首选工具。
第二章：了解网页布局在开始使用Dreamweaver进行网页设计布局之前，我们首先需要了解什么是网页布局。
网页布局指的是在网页上组织和排列各个元素，如文本、图像、导航菜单等。
良好的网页布局能够提高用户体验和页面可读性，使网页更具吸引力。
第三章：使用Dreamweaver创建网页在Dreamweaver中创建网页非常简单。
首先，我们需要选择一个合适的页面布局模板或创建一个空白页面。
然后，我们可以通过拖放元素、插入图像和设置样式等方式来设计和构建网页。
Dreamweaver还提供了许多预设的布局和组件，使设计变得更加便捷。
第四章：使用表格布局表格布局是一种常见的网页布局方法，特别适用于多列和多行的网页设计。
在Dreamweaver中，我们可以使用表格工具来创建和编辑表格布局。
我们可以定义表格的行数、列数和单元格大小，并在单元格中添加各种元素。
使用表格布局时要注意合理使用合并单元格、嵌套表格等技巧，以实现更复杂的布局需求。
第五章：使用CSS布局CSS布局是一种现代化和灵活的网页布局方法，它使用CSS样式来控制网页的排列和布局。
在Dreamweaver中，我们可以使用CSS面板来编辑和管理CSS样式。
通过定义和应用不同的CSS类，我们可以轻松地实现网页布局的各种效果，如浮动、定位和自适应布局等。
第六章：使用Bootstrap布局Bootstrap是一个流行的CSS框架，具有响应式布局和预定义的组件，可以大大简化网页设计和开发的工作。
Dreamweaver集成了Bootstrap框架，可以轻松应用和定制各种Bootstrap组件和布局。
第5章 CSS样式和Div标签
图 5-2-5 “背景”栏
图 5-2-6 “区块”栏
（3）“垂直对齐”下拉列表框：用它可以设置选中的对象相对于上级对象或相对所在行的值。 （4）“文本对齐”下拉列表框：用来设置首行文字的对齐方式。 （5）“文字缩进”文本框：用来输入文字的缩进量。 （6）“空格”下拉列表框：设置文本空白的使用方式。“正常”选项表示将所有空白填满，“保留”选项表示 由用户输入时控制，“不换行”选项表示只有加入标记<BR>时才换行。 （7）“显示”下拉列表框：在其中可以选择区块需要显示的格式。 3．定义 CSS 的列表属性 选择图 5-2-4 所示的对话框内左边“分类”列表框内的“列表”栏，此时该对话框 右边的显示如图 5-2-7 所示。其中各选项的作用如下： （1）“类型”下拉列表框：用来设置列表的标记。该下拉列表框内有九个选项，包 括“圆点”、“圆圈”等。
（3）过滤器中几个常用滤镜的显示效果如下： ① “Blur”（模糊）效果：选择该选项后，其选项内容为“Blur（Add=?，Direction=?，Strength=?）”，用 户需要用数值取代其中的“？”，即给这三个参数赋值。Add 用来确定是否在模糊移动时使用于图像一般选“1”；Direction 决定了模糊移动的角度，可在 0～360 之间 取值，表示 0°～360°；Strength 决定了模糊移动的力度，如果设置为 Blur（Add=1，Direction=60，Strength=90）， 则图 5-2-9 所示的图像在浏览器中看到的则是图 5-2-10 所示的样子。 ②“翻转图像”（FlipH/FlipV）效果：选择“FlipV”（垂直翻转图像）选项后，图 5-2-9 所示的图像在浏览 器中看到的是图 5-2-11 所示的样子；选择“FlipH”（水平翻转图像）选项后，图 5-2-9 所示的图像在浏览器中 看到的是图 5-2-12 所示样子。
CSS样式表在网页制作中的应用
一
＜ 一一 ！
．
ｂｓｙ ｅ ｛ｂ ｃ ｇ ｏ ｎ ｊｔ ｌ ａ ｋ ｒ ｕ ｄ：＃ｃ０ ｂ ｃ ０ ｂ｝
的 区域 做 修 改 ， 你就 不 能 对 网站 样 式 表 结 构有一个整体的把握 。 链 接 或 者 导 入 你 的 样 式 表 不 是 随 意 的 事情。 创建 干 净 整洁 的样 式 表 并 保 持 下去 ， 工作就会更开心、 高效。 更 以 上 是 使 用 ＣＳ 样 式 表 时 我 们 应 遵 循 Ｓ
ｂａ ｋｇｒ ｕｎｄ—ｒ ｐ ａ ｒ ｐ ａ －ｙ； ｃ Ｏ ｅ ｅ ｔ：ｅ ｅ ｔ
方法 。 同意 有 条 件 的 注 释 比 在 你 的 Ｃ Ｓ 我 Ｓ 文 ｊ ｇ ； Ｐ）
科技创新导报 Ｓ ｉｎ ｅ ａ ｄ Ｔ ｃ ｎ ｌ ｇ ｎ ｏ ａ ｉｎ Ｈ ｒ ｌ ｃｅ ｃ ｎ ｅ ｈ ｏｏ ｙ Ｉｎ ｖ ｔ ｅ ａｄ ｏ
名 为ｔ ｓ ｙ ｅ 接 着 在 网 页 中 选 中 需 要 设 置 ｘｔｌ，
的 原 则 ， 了能 充分 用 好 样 式 表 的 强 大 性 颜 色 的 文 字 ， 后 在 工 具 栏 中 单 击 一 下 为 然
ｔ ｓｙｅ 就 下面就 是 一个 定 义背景 图 和 灵 活 性 ， 就 怎 样 在 网 页 制 作 中 有 效 使 “ｘ ｔ ｌ” 行 了。 我 用样 式 表 ， 谈 谈 几 个 实 例 。 来
是 一 个 定 义 颜 色 背 景 的 ＣＳ 的 源 代 码 ： Ｓ
（ ｔ ｌ ｙ ｅ ｔ ｘ ／ ｓ ” ｓ ｙ ｅ ｔ ｐ ＝”ｅ ｔ ｃ ｓ ＞
Dreamweaver网页开发形考任务5
Dreamweaver网页开发形考任务5任务概述
形考任务5要求学生在Dreamweaver中创建一个动态网页。
该网页应具有交互性，并且能够根据用户的操作动态更新内容。
任务要求
- 使用JavaScript编写客户端脚本，以实现网页的交互效果。
- 选择适当的网页布局，并使用CSS样式进行美化。
- 在网页中添加适当的导航菜单，以便用户可以浏览不同的页面或部分。
任务步骤
1. 设计网页布局：根据需求设计适当的网页布局，可以考虑使用栅格系统进行排版。
3. 添加样式：使用CSS样式表为网页添加适当的样式，包括字体、颜色、背景和边框等。
5. 编写客户端脚本：使用JavaScript编写客户端脚本，以实现网页的交互效果，例如表单验证、动画效果等。
6. 测试和优化：在完成网页开发后，进行测试并根据需要进行优化，确保网页在不同的浏览器和设备上正常显示和运行。
注意事项
- 在开发过程中，尽量避免使用复杂的JavaScript代码，以确保网页的性能和可维护性。
- 使用Dreamweaver的帮助文档和在线资源，以获取更多关于动态功能和JavaScript编程的信息和示例。
- 定期保存工作，并使用版本控制工具进行代码管理，以免丢失或混淆代码。
祝您顺利完成Dreamweaver网页开发形考任务5！。
在网页中使用CCS样式
第10章
在页面中使用CSS样式
重命名层叠样式
第10章
在页面中使用CSS样式
自定义CSS样式的应用
•
在CSS样式中的HTML标签样式和CSS选择器
样式是自动应用的，只有自定义层叠样式需 要用户手动操作。
第10章
在页面中使用CSS样式
链接外部CSS样式
• 通过链接外部CSS样式可将其他网页中的样式应 用到当前网页中。
第10章
在页面中使用CSS样式
• 方框设置 “方框”设置可以定义控制元素在页面上的放置 方式和属性等。
第10章
在页面中使用CSS样式
• 边框设置
“边框”设置包括定义元素周围边框的样式、宽 度及颜色等。
第10章
在页面中使用CSS样式
• 列表设置 “列表”设置主要用于控制列表内各项元素的属 性，如项目符号类型、项目符号图像和项目符号 位置。
式，使用它可以对网页中的布局元素，如表格、
字体、颜色、背景、链接效果和其他图文效果
实现更加精确的控制。CSS样式不仅可以在一
个页面中使用，而且可以用于其他多个页面。
第10章
在页面中使用CSS样式
CSS样式的主要功能如下:
可以更加灵活地控制网页中文字的字体、大小、 颜色等属性。
可以精确地控制网页中各个元素的位置。
第10章
在页面中使用CSS样式
• 定位设置
“定位”设置主要用于控制网页元素，特别是层 的位置。
第10章
在页面中使用CSS样式
• 扩展设置
“扩展”设置主要用于为打印的页面设置分页和
为网页元素设置视觉效果。
第10章
在页面中使用CSS样式
管理CSS样式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7/25
第5章 在网页中使用CSS样式
制作步骤
1．使用CSS样式面板建立文章正文及文章标题的样 式，并应用于相应的对象。 2．通过创建高级样式改变超级链接的样式风格。 3．将超级链接样式作为外部样式应用于其它文档中， 统一网页的风格。 4．为网页设置背景颜色及背景图片。 5．使用CSS的滤镜效果美化文字。 6．为图片设置立体边框。
将页面的顶部信息元素放置在一个Div中，并命 名为logo，操作步骤见教程P94。 创建Div元素Navigation、content、footer，并装 载相对应的元素，操作步骤见教程P96。 将网页的所有内容放置在一个Div中，并命名为 wrapper，操作步骤见教程P96。
20/25 20/25
第5章 在网页中使用CSS样式
为图片设置立体边框
为图像添加彩色立体边框，操作步骤见教程P91。
14/25 14/25
第5章 在网页中使用CSS样式
利用CSS与Div进行页面布局实例 与 利用 进行页面布局实例
设计目标 页面分析 实训引导 制作步骤
15/25 15/25
第5章 在网页中使用CSS样式
返回
5/25
第5章 在网页中使用CSS样式
页面分析
本实例分别对文章正文、文章标题、超级链接 的各种状态、网页背景、网页标题以及网页中的 图像进行了以下设置，如 ：
正文、标题； 超链接 ； 重定义HTML标签<body>； 使用CSS的滤镜 ； 为图像添加彩色立体边框 。
（参见教程P74～P75）：
第5章 在网页中使用CSS样式
利用CSS对Div进行定位 对 利用 进行定位
将整个Div元素wrapper居中对齐，操作步骤见教 程P101。 将导航栏放置在页面的左边，主要内容区域放置 在页面的右边 ，操作步骤见教程P101。
22/25 22/25
第5章 在网页中使用CSS样式
本章小结
本章主要介绍了利用CSS样式面板创建、修改和应 用CSS样式的方法。 CSS的三种样式是：类样式、标签样式、高级样式。 样式又分为内部样式和外部样式两种。 利用CSS与Div进行页面布局，主要是将页面的内 容划分成一个个区域，装载到每一个Div中，然后 利用CSS对Div元素进行编辑并对其进行定位，达 到页面布局的效果。
ห้องสมุดไป่ตู้
设计目标
利用CSS与Div进行页面布局，浏览效果如图所示 。
返回
16/25 16/25
第5章 在网页中使用CSS样式
页面分析
该页面可分为4部分，分别装载在4个Div中，通 过对这4个Div进行定位美化，实现页面效果。
返回
17/25 17/25
第5章 在网页中使用CSS样式
实训引导
1．本页面用到的图像文件img5_logo.jpg由配套光 盘webcourse\chapter05\images文件夹提供，在制作 页面之前，先将用到的图像文件复制到本地站点 future\images future\images文件夹中。 2．素材网页文件index_css_div.html由配套光盘 webcourse\chapter05\materials文件夹提供，请将该 文件复制到本地站点future\webpages文件夹下。 3．页面效果请参见配套光盘webcourse\chapter05 文件夹下的index_css_div.html文件。
12/25 12/25
第5章 在网页中使用CSS样式
使用CSS的滤镜效果美化文字 的滤镜效果美化文字 使用
将网页中的标题文字“未来都市”制作成阴影字， 操作步骤见教程P89。 将网页中的文字“虽然这些未来城市有点儿像海 市蜃楼般迷离，……”制作成光晕文字，操作步 骤见教程P91。
13/25 13/25
10/25 10/25
第5章 在网页中使用CSS样式
使用超级链接样式统一网页风格
将外部样式文件main.css中的超级链接样式应用 于其他文档中，使其保持一致风格，操作步骤见 教程P87。
11/25 11/25
第5章 在网页中使用CSS样式
为网页设置背景颜色及背景图片
设置页面背景颜色为#EBF6FC，背景图像为 img5_5.gif，并使背景图像纵向重复，操作步骤见 教程P88。
第5章 在网页中使用CSS样式
利用CSS编辑每个 编辑每个Div的属性 利用 编辑每个 的属性
利用CSS对话框设置Div元素Navigation的属性值， 具体操作步骤见教程P97。 分别设置wrapper、logo、content、footer的属性， 各项属性值见教程P100。
21/25 21/25
返回
18/25 18/25
第5章 在网页中使用CSS样式
制作步骤
（1）将网页主要内容包围在Div中并分配ID。 （2）利用CSS编辑每个Div的属性。 （3）利用CSS对Div进行定位。
返回
19/25 19/25
第5章 在网页中使用CSS样式
将网页主要内容包围在Div中并分配 中并分配ID 将网页主要内容包围在 中并分配
返回
8/25
第5章 在网页中使用CSS样式
建立并应用正文及标题的样式
为网页文件的正文设置类样式.textcss，该样式可 以在整个HTML中被调用，操作步骤见教程P76。 为网页文件的标题（Heading2）设置标签样式。 操作步骤见教程P78。 应用类样式.textcss，操作步骤见教程P79。 应用重新定义的HTML标签<h2>，操作步骤见教 程P80。 修改类样式.textcss，操作步骤见教程P80。
返回
6/25
第5章 在网页中使用CSS样式
实训引导
1．本页面用到的9个图像文件：img4_3_3.jpg、img4_3_4.jpg、 img4_3_5.jpg、img4_3_6.jpg（文档中的图像）、 img5_1.gif、img5_2.gif、img5_3.gif、img5_4.gif（图像项 目符）及img5_5.gif（背景图片）由配套光盘 webcourse\chapter05\images文件夹提供，在制作页面之前， 先将用到的图像文件复制到本地站点future\images文件夹 中。 2．素材网页文件ex5_city.html由配套光盘 webcourse\chapter05\materials文件夹提供，请将该文件复 制到本地站点future\webpages文件夹下。 3．页面效果请参见配套光盘webcourse\chapter05\result文件夹 下的ex5_city.html文件。
23/25 23/25
第5章 在网页中使用CSS样式
配套实训
参见教材第104～105页，利用提供 的素材文件，按要求制作网页。
24/25 24/25
第5章 在网页中使用CSS样式
练习题
参见教材第105～106页，完成相应 的练习题：
填空题 单选题 思考题
25/25 25/25
第5章 在网页中使用CSS样式
9/25
第5章 在网页中使用CSS样式
创建高级样式改变超级链接样式风格
设置重新定义HTML标签<a>，操作步骤见教程 P82。 设置a:link的样式，操作步骤见教程P84。 设置a:visited的样式，操作步骤见教程P84。 设置a:active的样式，操作步骤见教程P85。 设置a:hover的样式，操作步骤见教程P85。
2/25
第5章 在网页中使用CSS样式
目录
CSS 样式美化网页实例 利用CSS与Div进行页面布局实例 本章小结 配套实训 练习题
3/25
第5章 在网页中使用CSS样式
CSS 样式美化网页实例
设计目标 页面分析 实训引导 制作步骤
4/25
第5章 在网页中使用CSS样式
设计目标
应用CSS样式对网页中的各种元素进行格式化， 浏览效果如图所示 。
第5章 在网页中使用CSS样式 在网页中使用CSS样式
主讲： 主讲：栾庆磊
1/25
学习目标
掌握创建类样式、标签样式、高级样式的方法； 掌握利用CSS样式面板创建、修改、应用各种 CSS样式的方法； 掌握利用外部样式文件统一网站风格的方法； 了解类样式、标签样式与高级样式的区别； 了解CSS滤镜效果的实现方法。