《网页设计与制作实例教程》第6章（唐小华）ppt课件（全）.pptx

《《网页设计与制作实例教程》第6章（唐小华）ppt课件（全）.pptx》由会员分享，可在线阅读，更多相关《《网页设计与制作实例教程》第6章（唐小华）ppt课件（全）.pptx（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、清华大学出版社 网页设计与制作实例教程第6章高等学校计算机应用规划教材 2022-5-12主编 方其桂一个美丽、大方、简洁的页面和高访问量的网站，是网一个美丽、大方、简洁的页面和高访问量的网站，是网页设计者的追求。然而，仅通过页设计者的追求。然而，仅通过HTMLHTML实现是非常困难的，实现是非常困难的，HTMLHTML仅仅定义了网页结构，对于文本样式没有过多涉及。这仅仅定义了网页结构，对于文本样式没有过多涉及。这就需要一种技术对网页布局、字体、颜色、背景和其他图文就需要一种技术对网页布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制。效果的实现提供更加精确的控制。本章通过实例，介绍

2、使用本章通过实例，介绍使用CSSCSS样式美化网页的方法。样式美化网页的方法。内容提要CSS样式基础知识样式基础知识CSS样式基本语法样式基本语法CSS样式设置文本样式设置文本0102034CSS样式美化页面样式美化页面章节目录内容提要教学内容CSS是Cascading Style Sheet的缩写，即层叠样式表。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用CSS为文件名后缀。可以通过简单的更改CSS文件，改变网页的整体表现形式，可以减少网页制作工作量。教学内容实

3、例1 制作多彩标题本实例要求使用创建一个文字标题，然后使用CSS样式对标题进行修饰，可以从颜色、尺寸、字体、背景、边框等方面入手。完成“制作多彩标题”实例，首先要构建HTML页面，选择使用CSS样式的方式；然后添加代码改变颜色、字体和尺寸后，加入边框，添加背景图像；最后定义标题的宽度和字体颜色。教学内容教学内容知识库1CSS功能功能随着Internet不断发展，对网页效果的诉求也越来越强烈，只依赖HTML这种结构化标记实现样式已经不能满足网页设计者的需求，其表现在如下几个方面：维护困难：为了修改某个特殊标记格式，需要花费很多时间，尤其对整个网站而言，后期修改和维护成本较高。标记不足：HTML本

4、身标记非常少，很多标记都是为网页内容服务，而关于内容样式标记，如文字间距、段落缩进，很难在HTML中找到。网页过于臃肿：由于没有对各种风格样式进行控制，HTML页面往往体积过大，占用掉很多宝贵的宽度。定位困难：在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的table标记将会导致页面的复杂和后期维护的困难。CSS可以将结构化标记与丰富的页面表现相结合，目的是将“网页结构代码”和“网页样式风格代码”分离开，从而使网页设计者可以对网页布局进行更多的控制。利用样式表，可以将整个站点上所有的网页都指向一个CSS文件，设计者只需要修改CSS文件中的某一行，整个网页上对应的样式都会随之

5、发生改变。教学内容知识库2浏览器与浏览器与CSS CSS制定完成之后，具有很多新功能，即新样式。但这些样式在浏览器中不能获得完全支持，主要在于各种浏览器对CSS很多细节处理上存在差异。例如，一种标记的某个属性，一种浏览器支持，另外一种浏览器不支持，或者两种浏览器都支持，但其显示效果不一样。各主流浏览器，为了各自的产品利益和推广，定义了很多私有属性，以便加强页面显示样式的效果，导致现在每个浏览器都存在大量的私有属性。虽然使用私有属性，可以快速构建效果，但是对网页设计者来说是一个大麻烦，因为设计一个页面就需要考虑在不同浏览器上显示的效果，一不注意就会导致同一个页面在不同浏览器上的显示效果不一样。甚

6、至有的浏览器不同版本之间，也具有不同的属性。教学内容实例2 制作段落标题本实例要求简单，使用创建一个标题，然后使用CSS样式对标题进行修饰。可以从颜色、尺寸、字体、背景、边框等方面入手。实例完成后，其效果如图所示。使用“记事本”程序编辑CSS同使用其编写HTML文档基本一样。首先需要打开一个“记事本”程序，然后在里面输入相应的CSS代码即可。教学内容教学内容知识库1CSS语法格式语法格式CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档来定义它们显示的外观。每一条样式规则由3部分组成：选择符（selector）、属性（properties）和属性值（value），基本格

7、式如下：selector选择符有多种形式，既可以是文档中的HTML标记，如、等，也可以是XML文档中的标记。properties属性则是选择符制定的标记所包含的属性。value指定了属性的值。如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号（；）隔开。例如：selectorproperty1：value1；property2：value2；property3：value3； 教学内容知识库2CSS样式规则样式规则 下面给出一条样式规则，例如：pcolor:red。该样式规则的选择符为p，为段落标记提供样式，color为制定文字颜色属性，red为属性值。此样式表示标记指定的段落文

8、字为红色。如果要为段落设置多种样式，则可以使用下列语句：pfont-family “隶书”；color:red；font-size：40px；font-weight：bold 教学内容实例实例3 制作欢迎标题制作欢迎标题Dreamweaver最大的特点是所见即所得。它可以自动生成源代码 ， 大 大 提 高 了 网 页 开 发 人 员 的 工 作 效 率 。 下 面 就 使 用Dreamweaver CS6软件编写HTML，制作“欢迎标题”，其效果如图6-12所示。制作前需要安装Dreamweaver软件，Dreamweaver软件版本很多，本书使用Dreamweaver CS6编写HTML。教

9、学内容教学内容知识库1在在HTML中使用中使用CSS的方法的方法CSS样式表能很好地控制页面显示，已达到分离网页内容和样式代码。CSS样式表控制HTML页面达到好的样式效果，其方法包括行内样式、内嵌样式、链接样式和导入样式。2CSS样式优先级样式优先级 如果同一个页面，采用了多种CSS使用方式，如行内样式、链接样式和内嵌样式，且这几种样式共同作用于同一个标记，就会出现优先级问题，即究竟哪种样式设置有效果。例如，内嵌样式设置字体为宋体，链接样式设置为红色，二者会同时生效。如果设置字体、颜色，情况就会复杂。教学内容知识库1在在HTML中使用中使用CSS的方法的方法CSS样式表能很好地控制页面显示，

10、已达到分离网页内容和样式代码。CSS样式表控制HTML页面达到好的样式效果，其方法包括行内样式、内嵌样式、链接样式和导入样式。2CSS样式优先级样式优先级 如果同一个页面，采用了多种CSS使用方式，如行内样式、链接样式和内嵌样式，且这几种样式共同作用于同一个标记，就会出现优先级问题，即究竟哪种样式设置有效果。例如，内嵌样式设置字体为宋体，链接样式设置为红色，二者会同时生效。如果设置字体、颜色，情况就会复杂。通过使用CSS样式规则能够修饰HTML标记，起到网页美化的作用。但其更大的作用是将网页内容和网页样式分离，这样方便了以后的维护。本节将介绍CSS基本语法和作用。主要介绍了选择器、选择器声明及

11、CSS常用单位相关知识。通过实例详细讲解了CSS 规则由选择器，以及一条或多条声明构成。选择器通常是需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成；属性是希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。1标签选择器HTML文档是由多个不同标记组成，而CSS选择器就是声明那些标记采用样式。例如：p选择器，就是用于声明页面中所有标签的样式风格。同样也可以通过h1选择器来声明页面中所有标记的风格。（1）格式：）格式：TagNameproperty：value其中TagName表示标记名称，如：p、h1等HTML标记；property表示CSS属性；value表示CSS属性值

12、。（2）用途：）用途：通过一个具体标记来命名，可以对文档里这个标记出现的每一个地方应用样式定义。这种做法通常在设置那些在整个网站都会出现的基本样式。例如，下面的定义就用于为一个网站设置默认字体。1标签选择器（3）实例：新建记事本文件，输入下面的样式代码后，保存为.html格式文件，使用IE浏览器查看效果，如图6-21所示，可以看到段落以蓝色字体显示，大小为20px。2类选择器在一个页面中，使用标签选择器，会控制该页面中所有此标记显示样式，如果需要为此类标记中其中一个标记重新设定，此时仅使用标签选择器是不能达到效果的，还需要使用类（class）选择器。（1）格式：.classValue prop

13、erty:value其中classValue是选择器的名称，具体名称由CSS制定者自己命名。如果一个标记具有class属性且class属性值为classValue，那么该标记的呈现样式由该选择器指定。在定义类选择符时，需要在classValue前面加一个句点（.）表示标记名称，如：p、h1等HTML标记；property表示CSS属性；value表示CSS属性值。（2）用途：下面定义了两个类选择器，分别为rd和se。类的名称可以是任意英文字符串或以英文开头与数字的结合，一般情况下，是用其功能及效果的简要缩写。.rd color:red .se font-size:3px 2类选择器（3）实例：

14、3ID选择器ID选择器和类选择器类似，都是针对特定属性的属性值进行匹配。ID选择器定义的是某一个特定的HTML元素，一个网页文件中只能有一个元素使用某一ID的属性值。（1）格式： #idValue property:value 其中#idValue是选择器的名称，可以由CSS定义者自己命名。如果某标记具有id属性，并且该属性值为idValue，那么该标记的呈现样式由该ID选择器制定。在正常情况下id属性值在文档中具有唯一性。（2）用途：定义ID选择器，如下所示。在页面中，具有ID属性的标记才能够使用ID选择器定义样式，所以与类选择器相比，使用ID选择器是有一定的局限性。类选择器与ID选择器主要

15、的区别有：类选择器可以给任意数量的标记定义样式，但选择器在页面的标记中只能使用一次；ID选择器比较类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用ID选择器。3ID选择器（3）实例：新建记事本文件，输入下面的样式代码后，保存为.html格式文件，使用IE浏览器查看效果，如图6-23所示，可以看到第一段落以红色字体显示，大小为22px；第二段以蓝色字体显示，大小为22px；标题以红色字体显示，大小为20px。1集体声明在一个页面中，有时不同种类的标记样式要保持一致。例如，p标记和h1标记要保持一致，此时可以将p标记和h1标记共同使用类选择器，除了这个方法之外，还可以使用集体

16、声明的方法。实例：新建记事本文件，输入下面的样式代码后，保存为.html格式文件，使用IE浏览器查看效果，如图6-24所示，可以看到网页上标题1、标题2和段落都以红色字体加粗显示，并且大小为20px。2多重嵌套声明在CSS控制HTML标记样式时，还可以使用层层递进的方式，即嵌套方式，对制定位置的HTML标记进行修饰。例如，当与之间包含和标记时，就可以使用这种方式对HTML标记进行修饰。实例：新建记事本文件，输入下面的样式代码后，保存为.html格式文件，使用IE浏览器查看效果，如图6-25所示，可以看到在段落中，超级链接显示红色字体，大小为30px，其原因是使用嵌套声明。实例4 制作古诗页面使

17、用Dreamweaver软件设计制作一个古诗欣赏页面。本实例使用CSS控制HTML标记创建古诗欣赏页面。效果如图6-26所示，做到页面布局合理、样式美观大方。创建一个古诗欣赏页面，需要包含两个部分：一个是页面导航，用来表明网页类别；一个是内容部分，包括古诗标题和内容。创建页面的方法很多，可以用表格创建，也可以用列表创建，还可以使用段落创建。本实例在Dreamweaver软件中采用p标记结合div创建。实例4 制作古诗页面使用Dreamweaver软件设计制作一个古诗欣赏页面。本实例使用CSS控制HTML标记创建古诗欣赏页面。效果如图6-26所示，做到页面布局合理、样式美观大方。创建一个古诗欣赏

18、页面，需要包含两个部分：一个是页面导航，用来表明网页类别；一个是内容部分，包括古诗标题和内容。创建页面的方法很多，可以用表格创建，也可以用列表创建，还可以使用段落创建。本实例在Dreamweaver软件中采用p标记结合div创建。知识库1CSS颜色单位通常使用颜色用于设置字体以及显示背景的颜色，在CSS中颜色设置的方法有很多，有命名颜色、RGB颜色、十六进制等。知识库 常见的网站、博客是使用文字或图片来阐述自己的观点，其中文字是传递信息的主要手段。而美观大方的网页，需要使用CSS样式修饰。设置文本样式是CSS技术的基本使命，CSS对文本样式进行修饰主要包括字体和段落属性。实例5 设置新闻页面制

19、作一个体育新闻页面，包括标题和正文两个部分。结合前面章节介绍的CSS知识，对网页文字进行设置，效果如图6-34所示。实例6 制作学校简介本实例将会利用前面介绍的文本和段落属性，创建一个简单的“学校简介”网页。首先要构建HTML页面，再分别对页面的标题、文字、段落、图片等元素通过CSS样式进行美化，效果如图6-43所示。 CSS样式不仅可以规范网页中的文字，还可以规范定义和美化网页中图片、背景、边框等其它元素。使用CSS样式，可以轻松设置图片属性、设置页面背景、添加边框，使网页变得更加生动、活泼。实例7 一句话新闻在各大网站中，点击率最高的就是新闻。新闻格式要求简洁明了，文字表达清楚，配上图片更

20、是图文并茂。对于网页新闻排版，应根据其新闻内容，可以显示一句话新闻。本实例将介绍如何配合图片，设计出一句话新闻的网页版面，效果如图6-54所示。实例8 设计公司主页打开各种类型的商业网站，最先映入眼帘的就是首页，也成为主页。作为一个网站的门户，主页一般要求版面整洁、美观大方。综合前面学习的CSS知识，运用背景和边框属性，创建一个简单的公司主页，效果图如6-63所示。CSS是Cascading Style Sheets（层叠样式表）的简称， CSS文件也可以说是一个文本文件，它包含了一些CSS标记。网页设计者可以通过简单的更改CSS文件，轻松改变网页的整体表现形式，大大减少网页修改和维护的工作量

21、。本章详细介绍了定义CSS样式方法和技巧，具体包括以下主要内容。了解 CSS样式基础知识：以一个完整的CSS定义入手，介绍了CSS样式的优点及使用。分别使用“记事本”程序和Dreamweaver编写CSS，介绍了CSS的语法、定义规则和在HTML中使用CSS的方法，为进一步学习CSS样式奠定基础。掌握CSS样式基本语法：主要介绍了选择器、选择器声明及CSS常用单位相关知识。通过实例详细讲解了CSS 规则由选择器，以及一条或多条声明构成。选择器通常是需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成；属性是希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。运用CSS样式设置文

22、本：介绍使用CSS样式规范网页文本，包括文本的字体属性和段落属性。字体属性主要介绍了“字体”、“字号”、“字体风格”、“加粗字体”、“字体颜色”等；段落属性重点介绍了“水平对齐方式”、“文本缩进”和“文本行高”等。通过实例，讲解了这些常用的字体和段落属性在规范、美化网页文字中的使用方法。使用CSS样式美化页面：从图片、背景和边框，通过实例详细介绍了使用CSS样式美化图片，设置背景和边框的方法和技巧，从而达到美化页面的效果。内容包括改变图片的边框、设置图片大小、位置；设置背景颜色、背景图片和现实方式；定义边框的样式、颜色、线宽等。一、选择题一、选择题1下列关于CSS样式表作用的叙述中正确的是（

23、B ）A精减网页，提高下载速度B只需修改一个CSS代码，就可改变页数不定的网页外观和格式C可以在网页中显示时间和日期D在不同浏览器和平台之间具有较好的兼容性2下列选项中，对CSS样式的格式，描述正确的是（ C ）Abody:color=black(bodyBbody:color=blackCbody color: blackDbody;color:black3为了增强CSS样式代码的可读性，可以在代码中插入注释语句。下列选择中注释语句格式正确的是（ C ）A/* 注释语句 */ B/ 注释语句 C/ 注释语句 / D 注释语句 4使用CSS样式定义，将p元素中的字体定义为粗体。下列代码正确的是

24、（ B ）A.p text-size:boldBp font-weight:boldCD5在下列CSS样式代码适用对象是“所有对象”的是（ A ）A背景附件B文本排列 C纵向排列D文本缩进6下列哪段代码能够定义所有P标签内文字加粗（ D ）AB Cp text-size:bold; Dp font-weight:bold; 7以下关于CLASS和ID的说法错误的是（ D ）Aclass的定义方法是：.类名样式；Bid的应用方法：Cclass的应用方法：Did和class只是在写法上有区别，在应用和意义上没有区别8下列哪段代码能够定义所有P标签内文字加粗（ D ）A B Cp text-size

25、:bold; Dp font-weight:bold; 9在HTML文档中，引用外部样式表的正确位置是（ B ）A文档的末尾 B C文档的顶部 D部分10阅读下面HTML代码，两个DIV之间的空白距离是（ C ） .header margin-bottom: 10px; border:1px solid #f00; .container margin-top: 15px; border:1px solid #f00; . A0px B10px C15px D25px二、判断题二、判断题1在CSS中，border:1px 2px 3px 4px表示设置某个HTML元素的上边框为1px、右边框为2

26、px、下边框为3px、左边框为4px。 （ ）2在CSS中，padding和margin的值都可以为负数。 （ ）3在CSS中，使用/或用来书写一行注释。 （ ）4由于Table布局相比Div布局缺点较多，因此在网页制作时应当完全放弃使用Table布局。 （ ） 5在W3C规范中，每一个标签都应当闭合，使用可以实现和段落标签同样的效果。 （ ）6一个Div可以插入多个背景图片。 （ ）7背景颜色的写法background:#ccc等同于background-color:#ccc。 （ ）8结构表现标准语言包括XHTML和XML以及HTML。 （ ）9任何标签都可以通过加style属性来直接定义

27、它的样式。 （ ）10同padding属性与margin属性类似，border属性也有单侧属性，即也可以单独定义某一个方向上的属性。 （ ）二、判断题二、判断题11margin不可以单独定义某一个方向的值。 （ ）12Border是CSS的一个属性，用它可以给能确定范围的HTML标记，如td、Div添加边框。只能定义边框的样式（style）、宽度(width)。 （ ）13CSS选择器中用户定义的类和用户定义的ID在使用上只有定义方式不同。（ ）14对于自定义样式，其名称必须以点（.）开始。 （ ）15标签简单而言是一个区块容器标签。 （ ）16position允许用户精确定义元素框出现的相对位置。 （ ） 联系信箱：清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材