Download presentation
Presentation is loading. Please wait.
1
实例导入：表格排版网页 | 了解CSS样式 | 利用CSS美化网页| 利用CSS＋Div进行网页布局
页面布局技术 实例导入：表格排版网页 | 了解CSS样式 | 利用CSS美化网页| 利用CSS＋Div进行网页布局
2
目 录 1 实例导入：表格排版网页 2 了解CSS样式 3 利用CSS美化网页 4 利用CSS＋Div进行网页布局
3
CSS（Cascading Style Sheets），中文译为层叠样式表，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术，是用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。 本章主要介绍了CSS样式表的功能与应用，重点介绍利用CSS+DIV进行网页布局。 【本章学习目的】 通过学习，读者能够： （1）了解CSS样式表的功能与用途 （2）掌握定义CSS规则的方法 （3）掌握利用CSS样式表进行网页美化的技巧 （4）重点掌握利用CSS+DIV进行网页布局
4
第一节 实例导入：表格排版网页 CSS样式表是由一系列样式选择器和CSS属性组成的，它支持文本属性、颜色和背景属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。 使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。
5
实例导入：表格排版网页 第一节 【例5.1】 HTML标签的简单应用，在网页中若使每个段落的文字用深灰色显示，那么HTML源代码就要写成：
<p><font color="#999999">段落1</font></p> <p><font color="#999999">段落2</font></p> 如果想把段落字体改为红色，则必须对每段文字颜色的代码进行修改，这非常麻烦。而CSS样式表又是怎么解决这个问题的呢？
6
第一节 实例导入：表格排版网页 【例5.2】 CSS样式表的简单应用，只需在<head>和</head>之间添加如下CSS代码： <style type=text/css> <!-- p{ color:#999999; } --> </style>
7
第一节 实例导入：表格排版网页 所有段落文字处不用设置任何字体颜色即呈现为深灰色，如果要改成红色，只需将上述代码中颜色修改为color:#FF0000即可。 在Dreamweaver CS5中网页是基于CSS进行构造的。从下面的页面属性和文本样式的设置可以说明这一点。
8
实例导入：表格排版网页 第一节 【例5.3】 页面属性的设置。
【例5.3】 页面属性的设置。 新建一个页面，然后单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，如图5.1所示，在此做如下设置。 1）“外观”选项卡：设置字体“大小”为12像素，“背景图像”框为images/bg.gif，“重复”框选择“不重复”，页边距框均为0。 2）“链接”选项卡：设置文本链接特效，“链接颜色”为深灰色（#999），“变换图像链接”（即鼠标经过时的颜色）为红色（#F00），“已访问链接”为深灰色（#999），“下划线样式”选择为仅在变换图像时显示下划线。
9
第一节 实例导入：表格排版网页 这些设置会自动生成CSS代码，在<head>和</head>中出现，CSS样式会自动应用于网页。 图5.1 在“页面属性”对话框中设置CSS样式
10
实例导入：表格排版网页 第一节 【例5.4】 文本样式的设置。
【例5.4】 文本样式的设置。 选中文本时，在“属性”面板中进行文本设置，如字体“大小”为16像素，颜色为#FC0，如图5.2所示。 图5.2 “新建CSS规则”对话框
11
实例导入：表格排版网页 第一节 【例5.5】 利用CSS样式还可以代替表格进行网页布局，这是目前较为流行的页面排版方式，如图5.3所示。
该实例主要采用了Div标签＋CSS样式，主要涉及以下几个知识点。 1）分析构架：画出构架图。 2）模块拆分：分别定义特定ID的Div标签的CSS样式。 3）在网页中插入Div标签，在Div中插入网页元素。 4）总体调整：色彩及内容的调整，适当修改CSS样式。 图5.3 Div＋CSS进行网页布局
12
了解CSS样式表 第二节 1 CSS样式表概述 1．样式表的使用 CSS样式表常用的方法有以下两种。
方法一：页面内嵌法。将样式表代码直接写在HTML标签的<head>和</head>之间区，如例5.2。 方法二：外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面<head>和</head>之间用以下代码调用。 <link href="css/style.css" rel="stylesheet" type="text/css" /> 在符合Web标准的设计中，使用外部链接法的好处不言而喻，用户不修改页面，只修改CSS文件就可改变页面的样式。如果所有页面都调用同一个样式表文件，那么修改一个样式表文件，改变所有文件的样式。
13
了解CSS样式表 第二节 1 CSS样式表概述 2．CSS样式表语法 选择符 { 属性1：值1；属性2：值2…… } 参数说明：
属性和属性值之间用冒号（：）隔开，定义多个属性时，属性之间用分号（；）隔开。 在Dreamweaver中定义CSS
14
了解CSS样式表 第二节 2 在Dreamweaver中定义CSS 1．创建CSS样式
15
了解CSS样式表 第二节 2 在Dreamweaver中定义CSS CSS规则定义的位置 定义的位置有以下三种情况。
（1）选择“在页面中定义”，此时CSS样式的代码会嵌套在网页<head>和</head>标签中。 （2）选择“创建新的CSS文件”，则弹出“创建新的CSS文件”对话框，如图5.5所示。选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件，此处创建新的CSS文件为style.css。 图5.5 “保存样式表文件为”对话框
16
图5.6（b） “body h1的CSS规则定义”对话框
第二节 了解CSS样式表 2 在Dreamweaver中定义CSS （3）选择“已有的某CSS文件”，将新建的CSS规则写入已有的CSS文件中。 h1”后，显示“body h1的CSS规则定义”对话框，如图5.6（b）所示。在该对话框中进行CSS样式的布局、文本、边框、背景及其它等各项设置。 图5.6（a） 文本定义为“标题1” 图5.6（b） “body h1的CSS规则定义”对话框
17
了解CSS样式表 第二节 2 在Dreamweaver中定义CSS 2．编辑和删除CSS样式
创建CSS样式后，如果要修改CSS样式，直接在“CSS设计器”面板中修改，或者在“属性”面板中，“选择CSS”选项，确定“目标规则”，单击“编辑规则”进入“CSS规则定义面板”进行修改，如图5.7所示。 图5.7 修改CSS样式
18
利用CSS美化网页 第三节 【例5.6】 应用CSS样式设计出图文混排效果，如图5.8所示。
1）背景样式、文本及列表样式、方框与边框样式、动态链接样式。 2）建立单独的CSS文件，应用于多个网页。 图5.8 应用CSS样式设计图文混排效果
19
图5.9 “body的CSS规则定义”中的“背景”选项卡
第三节 利用CSS美化网页 1 背景样式的应用 在例5.6中，上方浅绿色的横条其实是重定义了body标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下。 图5.9 “body的CSS规则定义”中的“背景”选项卡
20
图5.10 “body的CSS规则定义”中的“方框”选项卡
第三节 利用CSS美化网页 1 背景样式的应用 2）设置页边距。在“属性”面板中，选择“CSS”选项，确定“目标规则”，单击“编辑规则”选择“body”，进入“body的CSS规则定义面板”，填充设置为“全部相同”，值为0，边界分别设置上、下均为50像素，左、右均为100像素，如图5.10所示。 图5.10 “body的CSS规则定义”中的“方框”选项卡
21
利用CSS美化网页 第三节 2 文本及列表的应用
2 文本及列表的应用 在例5.6中，文本和列表都应用了CSS样式，分别设置字体、段落、列表的相关属性。第一行文本是标题1（标签为h1），第二行文本是标题2（标签为h2），正文部分用了列表（标签为UL）。 1．字体的样式设置 在“CSS设计器”对话框的“文本”选项卡中，设置文本的字体、字体大小、字体颜色、字体修饰、字体的粗细、行高等。
22
图5.11 “h1的CSS规则定义”中的“区块”选项卡
第三节 利用CSS美化网页 2 文本及列表的应用 2．文本段落的样式设置 在“CSS设计器”对话框的“文本”选项卡，如图5.11所示，设置以下参数。 图5.11 “h1的CSS规则定义”中的“区块”选项卡
23
利用CSS美化网页 第三节 2 文本及列表的应用
2 文本及列表的应用 1）(Word-spacing)单词间距：用于设置每个单词之间的距离，距离的单位有很多种，一般用像素来设置。 2）(Letter-spacing)字母间距：用于设置字母、字符之间距离。 3）(Vertical-align)垂直对齐：指定对象的纵向对齐方式，比如可以设置文本的上标和下标等，如果输入一个具体的数值，则后面的下拉菜单框中显示为百分号，表示这个值是相对值。 4）(Text-align)文本对齐：文本对齐方式。 5）(Text-indent)文本缩进：指定首行缩进的数值。 ......
24
利用CSS美化网页 第三节 2 文本及列表的应用 3．标题的设置 操作步骤如下。
2 文本及列表的应用 3．标题的设置 操作步骤如下。 2）重定义标题2。方法与步骤1）相同，单击“文本”选项卡，设置字体大小为18像素，粗细为粗体，行高为25像素，颜色为绿色（#218B84），设置文本对齐为居中。
25
利用CSS美化网页 第三节 2 文本及列表的应用 4．列表的样式设置 1）类型：设置项目符号或编号的外观。
2 文本及列表的应用 4．列表的样式设置 1）类型：设置项目符号或编号的外观。 2）项目符号图像：指定图像替代项目符号的样式，美化项目符号。 重定义项目列表（标签为UL）。方法与标题设置时的步骤1）相同，在弹出的“UL的CSS规则定义”对话框中，在“文本”选项卡中，设置字体大小为14像素，字体颜色为深灰色（#666），行高为40px，如图5.12所示，在项目符号图像中输入URL地址images/li.gif。 图5.12 “ul的CSS规则定义”对话框
26
利用CSS美化网页 第三节 3 方框和边框样式的应用
3 方框和边框样式的应用 在例5.6中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。 1．图像边距的设置 在“CSS规则定义”对话框的“布局”选项卡中，主要包括以下项。 ● 高度(height)和宽度(width)：方框的尺寸。 ● 浮动(float)：设置网页元素浮于页面左边距或右边距。 ● 填充(padding分为：上下左右)：网页元素到边框的距离。 ● 边界(margin分为：上下左右)：网页元素边缘与周围元素之间的距离。
27
利用CSS美化网页 第三节 3 方框和边框样式的应用 2．图像边框的设置
1）单击“选择器”按钮，添加选择器，在文本框中输入img1。 2）方框的设置。在“CSS规则定义”对话框中，单击“布局”选项卡进行如图5.13所示设置。浮动（float）：右对齐(right)，填充（padding）：全部相同，输入一个具体数值：10像素，边界（margin）：全部相同，输入一个具体数值：10像素。 图5.13 “布局”选项卡的设置
28
利用CSS美化网页 第三节 3 方框和边框样式的应用
3 方框和边框样式的应用 3）边框的设置。单击“边框”选项卡，所有边样式（style）下拉列表中选择“虚线（dotted）”，宽度(width)设置为2像素，颜色为紫色（#30F），如图5.14所示。 图5.14 “边框”选项卡的设置
29
利用CSS美化网页 第三节 3 方框和边框样式的应用 4）类的应用。将自定义的CSS规则应用于网页元素。
3 方框和边框样式的应用 4）类的应用。将自定义的CSS规则应用于网页元素。 在代码视图中找到对应的图像标签，在标签中编写class="img1"，代码如下所示： <img src=”images/yangtu.jpg” name=”img1” width=”300” height=”259” class=”img1”>
30
利用CSS美化网页 第三节 4 动态链接样式的应用 简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，6.1节中已经讲过。
4 动态链接样式的应用 简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，6.1节中已经讲过。 在例5.6中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。
31
利用CSS美化网页 第三节 4 动态链接样式的应用 1．建立链接CSS样式
4 动态链接样式的应用 1．建立链接CSS样式 图5.15 设置链接的CSS样式
32
利用CSS美化网页 第三节 4 动态链接样式的应用
4 动态链接样式的应用 2）打开“CSS设计器”面板，选中a:link，单击右键，在弹出菜单中选择“复制”命令，如图5.16所示，弹出“复制样式”对话框，如图5.17所示，新建一个a:visited（访问后效果），样式不做任何修改，直接粘贴样式，链接后与访问后效果一致。 图5.17 “复制CSS规则”对话框 图5.16 复制CSS样式
33
利用CSS美化网页 第三节 4 动态链接样式的应用
4）在“文本”选项卡中，设定颜色为“橙色”，修饰选中“下划线”，在“粗细”下拉列表中选择“粗体”。
34
利用CSS美化网页 第三节 4 动态链接样式的应用 2．调用CSS样式文件
其他网页若应用刚才建立的CSS样式文件，则应如何调用呢？单击“CSS设计器”面板中的“源”按钮，选择“附加现有的CSS文件”弹出“使用现有的CSS文件”对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，“添加为”选择“链接”，将新建的样式文件链接到此网页，如图5.18所示。 4 动态链接样式的应用 图5.18 “链接外部样式表”对话框
35
第三节 利用CSS美化网页 5 滤镜效果的应用 CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜可以为样式控制的对象指定特殊效果，见表5.1。 名称 功能 Alpha 透明效果 Blur 模糊效果 Chroma 将指定的颜色设置成透明 Dropshadow 投影效果 FlipH 进行水平翻转 FlipV 进行垂直翻转 Glow 发光效果 Grayscale 产生灰阶 Invert 反转底片效果 Light 灯光投影 Mask 遮罩 Shadow 阴影效果 Wave 水平与垂直波动效果 Xray 设置X光效果 ♥注意：CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或层应用CSS样式。
36
利用CSS美化网页 第三节 5 滤镜效果的应用 【例5.7】 设置图像的半透明效果，操作步骤如下。
5 滤镜效果的应用 【例5.7】 设置图像的半透明效果，操作步骤如下。 1）新建一个网页，网页背景颜色为黑色，插入两幅完全相同的图像。 2）切换到源代码视图，在照片标签里分别加入class="img1"，代码如下所示： <img class=”img1” src=”images/img1.jpg” width=”354” height=”179”>
37
利用CSS美化网页 第三节 5 滤镜效果的应用 3）切换到CSS样式表代码视图，输入 .img1 {
5 滤镜效果的应用 3）切换到CSS样式表代码视图，输入 .img1 { opacity:0.4; filter:alpha(opacity=40); }。 4）按下F12键，浏览网页效果，如图5.19所示。 5.19 alpha滤镜网页效果图
38
第四节 利用CSS＋Div进行网页布局 CSS+Div是网站标准（或称“WEB标准”）中常用术语之一，它是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。 利用CSS样式还可以代替表格进行网页布局，本小节讲解例5.5所举如何利用Div标签和CSS样式的定义进行网页的排版，制作过程如下。
39
第四节 利用CSS＋Div进行网页布局 1．分析架构 网页布局如图5.20所示。
40
利用CSS＋Div进行网页布局 第四节 2．模块拆分 一个总的Div标签，它包含了4个Div标签。
1）container：最大的容器。将所有内容包含在内。Width：950px。 2）header：网站头部图标。包含了一幅家具图像和FLASH动画。Width：950px，Height：260px。 3）leftnav：左侧导航条。Width：200px，浮动为左对齐。 4）content：网站的主要内容。 左侧边界为200px。 5）footer：网站底栏，包含版权信息等，设置清除：两者。
41
利用CSS＋Div进行网页布局 第四节 3．定义Div标签的CSS样式 定义页面属性和特定ID的DIV标签的CSS样式。
首先创建本地站点，站点中包括两个子文件夹images和css，分别用于存储图像素材和CSS样式文件。 1）定义页面属性。单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，设置背景图片为images/beiijng.jpg，字体大小为14像素，页边距均为0；定义网页标题为“峻漫小社”。
42
第四节 利用CSS＋Div进行网页布局 2）定义“#containter”的CSS样式。在“属性”面板中，单击“CSS Designer”按钮，在弹出的“CSS设计器”对话框中，创建一个css文件命名为“style”，保存在css文件夹中，如图5.21所示，在“选择器”文本框中输入“#container”。弹出“#container的CSS规则定义”对话框，单击“布局”选项卡，输入宽度(width)为950像素，填充(padding)上、下、左、右均为0，margin上、下均为0，左、右设置为自动(auto)。 图5.21 “CSS设计器”对话框
43
第四节 利用CSS＋Div进行网页布局 3）定义“#header”的CSS样式。与步骤2）相同，在“选择器”文本框中输入#header。弹出“#header的CSS规则定义”对话框，单击“布局”选项卡，输入宽度(width)为950像素，高度为110像素，填充均为0，边界均为0；单击“背景”选项卡，背景图像(background-image)为“images/top.jpg”。 4）定义“#leftnav”的CSS样式。与步骤2）相同，在“选择器”文本框中输入#leftnav，在“#leftnav的CSS规则定义”对话框中，单击“背景”选项卡，设置背景(background-color)为（#9C6），单击“布局”选项卡，宽度(width)为200像素，浮动(float)：左对齐(left)，边界(margin)和填充(padding)均为0。
44
第四节 利用CSS＋Div进行网页布局 5）定义“#content”的CSS样式。与步骤2）相同，在“选择器”文本框中输入“#content”，在 “#content的CSS规则定义”对话框中，单击“背景”选项卡，设置背景(background-color)为青绿色（#cF9）单击“布局”选项卡，填充(padding)不设置，边界(margin)：左为200像素，其余均为0。 6）定义“#footer”的CSS样式。与步骤2）相同，在“选择器”文本框中输入“#footer”，在“#footer的CSS规则定义”对话框中，单击“文本”选项卡，设置字体大小(font-size)为12像素，行高(line-height)为20像素，颜色(color)为白色；单击“背景”选项卡，背景颜色为绿色（#9C9）；单击“布局”选项卡，“清除(clear)”设置为“两者(both)”（both为消除前面设置浮动左对齐的影响）。
45
利用CSS＋Div进行网页布局 第四节 4．在网页中添加Div标签
1）单击“插入”栏→“常用”选项→“Div”按钮，弹出“插入Div标签”对话框，如图5.22所示，在ID下拉列表中选择container项，单击“确定”按钮。 图5.22 “插入Div标签”对话框
46
第四节 利用CSS＋Div进行网页布局 2）光标单击container容器内，同步骤1）相同，单击“Div”按钮，弹出“插入Div标签”对话框，在“ID”下拉菜单中选择Header，单击“确定”按钮。 3）同步骤1）相同，依次插入leftnav、content、footer的Div标签，如图5.23所示。 5.23 插入指定ID的Div标签 ♥注意：最外层的Div的ID为container，其他的Div标签均包含在containter中，除了container外，其他都是并列关系，顺序为header、leftnav、content、footer，操作方法是首先插入containter，然后可切换到代码视图，光标放在<div id="container">…</div>之间，然后再单击“插入Div标签”按钮，分别插入其他的Div标签。
47
利用CSS＋Div进行网页布局 第四节 5．在Div中填充网页内容
1）单击header区域，插入Flash动画flash2773.swf，Flash文件是矢量图形，可改变其尺寸不影响动画的浏览效果。 2）单击leftnav区域，插入图像images/logo.png，输入文字内容。 3）单击“content”区域，输入文字内容，插入图片并设置图片向右浮动。 4）单击“footer”内，输入版权所有和联系方式信息。 保存网页，按下F12键浏览网页效果。
48
小结 本章主要介绍了CSS样式表的创建与应用，通过CSS样式的使用，使得网页样式更加丰富多彩。
1）CSS的概念：CSS样式、样式的分类、CSS的语法结构等。 2）CSS样式的创建。 3）CSS样式的应用。
49
练习题 （1）什么是CSS样式表？分为哪几类？ （2）定义CSS样式表有什么好处？ （3）如何调用外部CSS样式表文件？
50
上机实验 1．背景知识 根据本章所学的CSS+DIV网页布局技术，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 2．实验准备工作 实验素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。 3．实验要求 （1）利用CSS样式表制作精美的网页，如图5.24所示。 图5.24 网页效果图
51
小结 要求：根据给定的素材，首先设置页面属性。其次定义特定ID的Div标签的CSS样式，然后插入Div标签，在Div中插入网页元素，最后通过定义类，设置图像CSS样式。 （2）在网页中添加CSS扩展效果：滤镜。 要求：制作投影字体、图像的透明效果等，如图5.25所示。 4．课时安排 上机实训课时安排为2课时。 图5.25 滤镜效果
52
THANKS
Similar presentations
