《网页设计与制作案例教程 教学课件 ppt 陈承欢 第23单元》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程 教学课件 ppt 陈承欢 第23单元（34页珍藏版）》请在金锄头文库上搜索。
1、第12章 使用CSS美化网页,Dreamweaver 8中的样式与Word中的样式类似，能够让用户更加方便、有效地对网页元素进行控制。创建一个样式，可以将该样式应用到多处，达到“创建一次，使用多次”的目的，大大提高了网页排版的效率，方便网页制作者统一网站的整体风格。,课程引导,知识技能目标,（1）掌握CSS样式表的基本语法和定义位置。 （2）掌握标签样式、高级样式、类样式的定义方法。 （3）掌握样式的编辑方法。 （4）掌握如何使用CSS样式表美化页面。,网页浏览效果展示,本章制作的网页13.html的浏览效果如图所示。,图12-1 网页13.html的预览效果,本章操作任务,（1）在“长沙世界
2、之窗”站点下创建文件夹“13美化网页”，在“13美化网页”文件夹中创建网页13.html。 （2）建立多种CSS样式，对13.html进行美化。,12.1,CSS概述,12.1 CSS概述,CSS是“Cascading Style Sheet”的缩写，称为“层叠样式表”，一般简称为“样式表”，“层叠”是指多个样式可以同时应用于同一个页面或网页中的同一个元素。,12.1.1 CSS的概念,CSS样式表的主要优点是提供便利的更新功能，更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。 CSS具有更好的易用性与扩展性，CSS样式表可以应用到很多页面中，从而使不同的页面获得相同的布局和外
3、观。,12.1.2 CSS样式表的应用举例,创建名称为“13_1.html”的网页，该网页只包含一个2行1列的表格，表格中只有文字，对该网页进行如下设置： （1）通过“页面属性”对话框设置“页面字体大小”为“12px”，“左边距”、“右边距”设置为“10px”。,（2）通过属性面板将表格中第一行的文字“长沙世界之窗欢迎你”的“字体”设置为“隶书”，“大小”设置为“18px”，文字颜色设置为“#0000FF”。 （3）切换到代码视图，在代码窗口设置表格中第二行的文字的“大小”设置为“10px”，文字颜色设置为“#FF6600”。,12.1.3 CSS样式表的基本语法,（1）CSS样式定义在HEA
4、D内 CSS一般位于HTML文件的头部，即与标记内，并且以开始，以结束，例如如下的代码定义了、标记使用的字号。,1CSS样式表的定义位置, body,td,th font-size: 12px; style,（2）CSS样式嵌入BODY内部 代码style=“font-size: 10pt; color: #FF6600;“用于控制段落文字的字号和颜色，采用的格式把样式写在HTML中的任意行内，“=”右边的属性设置放入双引号中，多个属性用“;”分隔。,（3）在独立的外部文件中定义 CSS的定义既可以在HTML文档内部，也可以单独在外部文件（例如style.css）中定义。把编辑好的CSS文档保
5、存成外部文件，然后在中添加如下所示的代码：,（1）定义标签样式 这一种方式主要是针对于某一个标记，所定义的样式也只应用于选择的标记。定义形式为：标记名称 属性名称：属性值，例如body margin-left : 15px ; margin-right : 15px; 。,2CSS样式表的定义形式,（2）定义高级样式 CSS选择符是一种特殊类型的样式，常用的有4种：a:link、a:active、a:visited和a:hoer。其中“a:link”设置正常状态下链接文字的外观，“a:active”设置鼠标单击时链接的外观，“a:visited”设置访问过的链接外观，“a:hoer”设置鼠标放
6、置在链接文字之上时文字的外观。,（3）定义类样式 定义类样式的形式为：.样式名称 属性名称 : 属性值 应用样式的形式为：,12.2 使用CSS美化页面,Dreamweaver 8的CSS样式包含了W3C组织规定定义的所有CSS的属性，把这些属性分为：类型、背景、区块、方框、列表、定位、扩展等8个部分。Dreamweaver 8的CSS属性设置实现了可视化，无需编写代码。,按以下要求定义CSS样式，且应用样式对网页进行美化。 （1）定义表格中文档的默认文本样式。 （2）定义表格标题文本的样式。,（1）在“长沙世界之窗”站点下创建子文件夹“13美化网页”，在“文件”面板中单击选中刚才新建的子文件
7、夹“13美化网页”，然后单击鼠标右键，在弹出的快捷菜单中单击【新建文件】，在子文件夹“13美化网页”中便会创建一个默认名称为“untitled.html”的网页文档。,1新建网页,（2）将新建的网页文档重命名为“13.html”，双击该文档名称打开该网页。 （3）插入一个带标题的3行3列表格，将第一行的中间的单元格拆分为两个单元格，将第二行的三个单元格合并为一个单元格。 （4）在单元格中输入文字，插入图像。,（1）在Dreamweaver 8主窗口中，单击菜单【窗口】【CSS样式】，或者单击属性面板上的【CSS】按钮，打开“CSS样式”面板，如图12-4所示。单击【新建CSS规则】按钮，弹出“
8、新建CSS规则”对话框。,2建立标签样式,（2）在“新建CSS规则”对话框的“选择器类型”外单击“标签”单选按钮，在“标签”下拉列表框中选择“td”，选择“仅对该文档”单选按钮，这样CSS样式就被定义在该文档中。,（3）设置完成后，单击【确定】按钮关闭该对话框，这时会打开样式编辑器，进入样式表的定义。,（4）在“字体”下拉列表框中选择一种字体：楷体_GB2321；在“大小”下拉列表框中选择字体大小：24，“单位”为“像素”；“颜色”文本框中输入“#FF6600”，其他属性使用默认设置。,（5）设置完成后，单击【确定】按钮，关闭对话框，这时在CSS样式面板中会出现建立好的样式。 （6）保存该网页
9、文档，浏览页面效果。,（1）单击菜单【文本】【CSS样式】【新建】，弹出如图12-5所示“新建CSS规则”对话框。,3建立用于表格标题文本的类样式,（2）在“新建CSS规则”对话框中，“选择器类型”选项中选择“类”单选按钮，在“名称”文本框中输入这个自定义样式的名称，命名必须以“.”开头，如果没有输入“.”，Dreamweaver也会自动添加，这里命名为“.caption_text1”。在“定义在”选项中选择“仅对该文档”单选按钮。,（3）单击【确定】按钮关闭对话框，自动打开样式表编辑器，进入样式表的定义。 （4）在“.caption_text1的CSS规则定义”对话框中，“字体”列表框中选择
10、“隶书”，“大小”列表框中选择“24”，“粗细”列表框中选择“粗体”，“行高”列表框中输入“20”，单位设置为“像素”，“颜色”文本框中输入“#0000FF”，其他属性使用默认设置。,（5）设置完成后，单击【确定】按钮关闭对话框。这时，在CSS样式面板中会出现建立好的样式。,（6）选中表格标题“五洲风情，魅力四射”，然后在属性面板的“样式”下拉列表框中选择“caption_text”，将新建立的类样式被应用到表格标题。 （7）保存网页文档，浏览页面，观察表格标题的效果。, 课堂实践 ,（1）打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13.html”。,（2）在该网页的HEAD部分添加以下定义CSS样式的代码。,然后在标题文字和介绍文字中分别应用CSS样式STYLE1、STYLE2，代码如下所示。,浏览网页13.html，观察其效果。, 课外拓展实践 ,在“湖铁职院学院网站”站点文件夹“13美化页面”中创建网页“13.html”，在页面插入表格，然后在表格中输入文字、插入图像。, 本章小结 ,CSS样式弥补了HTML语言的不足，可以实现HTML代码一些无法实现的效果，使用CSS美化页面更加简洁、方便。通过本章的学习应该掌握CSS样式的建立、编辑和应用。,
