网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.

Presentation on theme: "网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案."— Presentation transcript:

1 网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案

2 第6章 使用CSS修饰常见的网页元素 6.1 设置文字的样式 6.2 文本的排版 6.3 设置图片样式 6.4 设置背景样式
6.1 设置文字的样式 6.2 文本的排版 6.3 设置图片样式 6.4 设置背景样式 6.5 设置表格样式 6.6 设置表单样式 6.7 图文混排 6.8 综合案例——制作网络书城环保社区页面 6.9 实训——制作家具商城会员注册页面

3 6.1 设置文字的样式 设置文字的字体 在HTML中，设置文字的字体需要通过<font>标记的face属性。而在CSS中，则使用font-family属性。 语法：font-family : 字体名称 【演练 6-1】字体设置，本例页面6-1.html的显示效果如图6-1所示。

4 6.1 设置文字的样式 设置字体的大小 在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font-size属性设置字体的大小。 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 【演练 6-2】字体大小设置，本例页面6-2.html的显示效果如图6-2所示。

5 6.1 设置文字的样式 6.1.3 设置字体的粗细 CSS样式中使用font-weight属性设置字体的粗细。
6.1 设置文字的样式 设置字体的粗细 CSS样式中使用font-weight属性设置字体的粗细。 语法：font-weight : bold | number | normal 【演练 6-3】字体粗细设置，本例页面6-3.html的显示效果如图6-3所示。

6 6.1 设置文字的样式 6.1.4 设置字体的倾斜 CSS中的font-style属性用来设置字体的倾斜。
6.1 设置文字的样式 设置字体的倾斜 CSS中的font-style属性用来设置字体的倾斜。 语法：font-style : normal || italic || oblique 【演练 6-4】字体倾斜设置，本例页面6-4.html的显示效果如图6-4所示。

7 6.1 设置文字的样式 设置字体的修饰 使用CSS样式可以对文本进行简单的修饰，例如给文字添加下划线、顶划线和删除线，它是通过text-decoration属性来实现这些效果的。 语法：text-decoration : underline || blink || overline || line-through | none 【演练 6-5】字体修饰设置，本例页面6-5.html的显示效果如图6-5所示。

8 6.1 设置文字的样式 设置文本的颜色 在CSS样式中，对文字增加颜色修饰十分简单，只需添加color属性即可。color属性的语法格式： color:颜色值; 【演练6-6】文本颜色设置，本例页面6-6.html的显示效果如图6-6所示。

9 6.2 设置段落的样式 设置文字的对齐方式 使用CSS样式可以设置文字的对齐方式，它是通过text-align属性来实现这些效果的。 语法：text-align : left | right | center | justify

10 6.2 设置段落的样式 6.2.2 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。
6.2 设置段落的样式 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 语法：text-indent : length 【演练6-7】设置首行缩进，本例页面6-7.html的显示效果如图6-8所示。

11 6.2 设置段落的样式 6.2.3 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。
6.2 设置段落的样式 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 【演练6-8】设置首字下沉，本例页面6-8.html的显示效果如图6-9所示。

12 6.2 设置段落的样式 6.2.4 设置行高 在CSS样式中，使用line-height属性控制行与行之间的垂直间距。
6.2 设置段落的样式 设置行高 在CSS样式中，使用line-height属性控制行与行之间的垂直间距。 语法：line-height : length | normal 【演练6-9】设置行高，本例页面6-9.html的显示效果如图6-10所示。

13 6.2 设置段落的样式 6.2.5 设置字间距 在CSS样式中，使用word-spacing属性设置字（单词）之间的间距。
6.2 设置段落的样式 设置字间距 在CSS样式中，使用word-spacing属性设置字（单词）之间的间距。 语法：word-spacing ：length | normal 【演练6-10】设置字间距，本例页面6-10.html的显示效果如图6-11所示。

14 6.2 设置段落的样式 6.2.6 设置字符间距 在CSS样式中，使用letter-spacing属性设置字符或字母之间的间距。
6.2 设置段落的样式 设置字符间距 在CSS样式中，使用letter-spacing属性设置字符或字母之间的间距。 语法：letter-spacing ：length | normal 【演练6-11】设置字符间距，本例页面6-11.html的显示效果如图6-12所示。

15 6.2 设置段落的样式 6.2.7 设置文本的大小写 在CSS样式中，使用text-transform属性设置文本的大小写。
6.2 设置段落的样式 设置文本的大小写 在CSS样式中，使用text-transform属性设置文本的大小写。 语法：text-transform ：none | capitalize | uppercase | lowercase 【演练6-12】设置文本的大小写，本例页面6-12.html的显示效果如图6-13所示。

16 6.3 设置图片样式 图片的边框 在HTML中可以直接通过<img>标记的border属性值为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border属性值为0时，则显示为没有边框。 【演练 6-13】设置图片边框，本例页面6-13.html的显示效果如图6-15所示。

17 6.3 设置图片样式 6.3.2 图片的缩放 使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。
6.3 设置图片样式 图片的缩放 使用CSS样式控制图片的大小，可以通过width和height两个属性来实现。 【演练 6-14】设置图片缩放，本例页面6-14.html的显示效果如图6-16所示。

18 6.4 设置背景 6.4.1 设置背景颜色 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。
6.4 设置背景 设置背景颜色 在CSS中，网页元素的背景颜色使用background-color属性来设置，属性值为某种颜色。 语法：background-color : color | transparent 【演练 6-15】设置背景颜色，本例页面6-15.html的显示效果如图6-19所示。

19 6.4 设置背景 6.4.2 设置背景图像 在CSS样式中，使用background-image属性设置背景图像来美化网页。
6.4 设置背景 设置背景图像 在CSS样式中，使用background-image属性设置背景图像来美化网页。 语法：background-image : url(url) | none 【演练 6-16】设置背景图像，本例页面6-16.html的显示效果如图6-20所示。

20 6.4 设置背景 设置背景重复 在默认情况下，图像会自动向水平和竖直两个方向平铺。可以使用background-repeat属性来控制。 语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 【演练 6-17】设置背景重复，本例页面6-17.html的显示效果如图6-21所示。

21 6.4 设置背景 设置背景定位 当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，可以通过background-position属性来改变图片的插入位置。 语法： background-position : length || length background-position : position || position 【演练 6-18】使用关键字进行背景定位，本例页面6-18.html的显示效果如图6-22所示。

22 6.4 设置背景 设置背景大小 background-size是CSS3提供的一个新特性，它可以让用户随心所欲的控制背景图的尺寸大小。 语法：background-size ：[ length | percentage | auto ]{1,2} | cover | contain 需要说明的是，IE 不支持该属性，下面是Opera浏览器中显示的效果，如图6-25所示。

23 6.4 设置背景 案例——制作购物车统计信息 【演练6-21】制作购物车统计信息，本例页面6-21.html的显示效果如图6-26所示。

24 6.5 图文混排 图文混排就是将文字与图片混合排列，在网页设计与制作中具有实际意义。
6.5 图文混排 图文混排就是将文字与图片混合排列，在网页设计与制作中具有实际意义。 【演练6-22】使用CSS样式结合HTML代码实现网络鞋城商品展示局部信息的图文混排，为后续章节讲解图文信息列表打下基础。本例页面6-22.html的显示效果如图6-27所示。

25 6.6 综合案例——制作网络鞋城驴友天地页面 6.6.1 页面布局规划
6.6 综合案例——制作网络鞋城驴友天地页面 页面布局规划 通过成熟的构思与设计，网络鞋城驴友天地页面的效果如图6-28所示，页面布局示意图如图6-29所示。

26 6.6 综合案例——制作网络鞋城驴友天地页面 6.6.2 页面的制作过程 1．前期准备 （1）栏目目录结构
6.6 综合案例——制作网络鞋城驴友天地页面 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹style下新建一个名为style.css的样式表文件。

27 6.6 综合案例——制作网络鞋城驴友天地页面 6.6.2 页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作
6.6 综合案例——制作网络鞋城驴友天地页面 页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面中部的制作 （4）页面底部的制作 （5）页面结构代码

28 6.7 实训——制作什锦果园博客页面 制作什锦果园博客页面，页面效果如图6-34所示，布局示意图如图6-35所示。

29 习题6 1．使用图文混排技术制作什锦果园产品信息页面，如图6-36所示。
2．使用CSS对页面中的图像和文本加以控制，制作网络鞋城社区页面，如图6-37所示。 3．使用CSS对页面中的图像和文本加以控制，制作如图6-38所示的网络设计中心页面。