《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元24：使用CSS美化网页 网设计 、 课程引导 二、明确知识技能目标 湖南城道营政饰学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元24：使用CSS美化网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 网没计然 Dreamweaver8中的样式与Word中的样式似， 湖南城道质业政饰学院 能够让用户更加方便、有效地对网页元素进行控制 。 创建一个样式，可以将该样式应用到多处，达到“创 建一次，使用多次”的目的，大大提高了网页排版的 效率，方便网页制作者统一网站的整体风格。 网顷设计与制作
（一）课程引导 Dreamweaver 8中的样式与Word中的样式似， 能够让用户更加方便、有效地对网页元素进行控制。 创建一个样式，可以将该样式应用到多处，达到“创 建一次，使用多次”的目的，大大提高了网页排版的 效率，方便网页制作者统一网站的整体风格
(二)明确知识技能目标 说计 (1)掌握CSS样式表的基本语法和定义位置。 湖南城道营政饰学院 (2)掌握标签样式、高级样式、类样式的定义方法。 (3)掌握样式的编辑方法。 (4)掌握如何使用CSS样式表美化页面。 网页设计与制作
（二）明确知识技能目标 （1）掌握CSS样式表的基本语法和定义位置。 （2）掌握标签样式、高级样式、类样式的定义方法。 （3）掌握样式的编辑方法。 （4）掌握如何使用CSS样式表美化页面
(三)展示网页浏览效果 时设计 1.预览网页 本章制作的网页13.html的浏览效果如图所示。 湖南城道质营政饰学院 习时尚李与-cromoft1 nternet Exp1oro ■回x 文件)编相健)查看Y)收撑)工具)积助D G后一⊙回同合户秘率含收豫天学煤体⊙·色西·以夕 地址(@包6：教材中的网话旅游同站13黄化同页15.hd 习)种制上网助手☑， 五洲风竹，蛙方四射 互州天州陵限是母聚衣的装的+年清机脚实势资色修 春精盈绿上老盐前洲的的前多安做州的车英和美洲西 长沙世界之富递请全国顽失的编测、导演、舞美、服装、音乐专家精 心打适，演样五大洲的各间各民族风情 味学醋 、浮世给，还是花道、茶道：东 他性训静精 到板致的目太风情逸布。 吉典与规代的双重结合，是对欧训吉病文化的激情展示，充满强孤节 奏惠的见代音乐幻属出流烈蹄放的北美风情，流苏、虎革等观代服装羹有 的灵活途拥使现众们由梦幻四归见实，神秘将帐的古典文化与筒钓自然 的观代瓜情自然结合，展观出中世纪黄族般的富黄与奢华， 公司筒介1 民旅速抗 长世界之商吹吧你 复的电脑 图12-1 网页13.html的预览效果 网页设计与制作
（三）展示网页浏览效果 本章制作的网页13.html的浏览效果如图所示。 1．预览网页 图12-1 网页13.html的预览效果
(四)分析操作任务 理计 (1)在“长沙世界之窗”站点下创建文件夹“13 湖南城道质業政饰学院 美化网页”，在“13美化网页”文件夹中创建网 13.html。 (2)建立多种CSS样式，对13.html进行美化。 网页设计与制作
（四）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“13 美化网页”，在“13美化网页”文件夹中创建网 13.html。 （2）建立多种CSS样式，对13.html进行美化
(五)知识讲解与操作示范（1) 时没计 12.1 CSS概述 12.1.1CSS的概念 湖南城道营政饰学院 CSS是“Cascading Style Sheet"?的缩写，称为 “层叠样式表”，一般简称为“样式表”，“层叠”是 指多个样式可以同时应用于同一个页面或网页中的同一 个元素。 CSS样式表的主要优点是提供便利的更新功能，更新 CSS样式时，使用该样式的所有文档的格式都自动更新 为新样式。 CSS具有更好的易用性与扩展性，CSS样式表可以应 用到很多页面中，从而使不同的页面获得相同的布局和 外观 网页设计与制作
（五）知识讲解与操作示范（1） CSS是“Cascading Style Sheet”的缩写，称为 “层叠样式表”，一般简称为“样式表”，“层叠”是 指多个样式可以同时应用于同一个页面或网页中的同一 个元素。 CSS样式表的主要优点是提供便利的更新功能，更新 CSS样式时，使用该样式的所有文档的格式都自动更新 为新样式。 CSS具有更好的易用性与扩展性，CSS样式表可以应 用到很多页面中，从而使不同的页面获得相同的布局和 外观。 12.1 CSS概述 12.1.1 CSS的概念
(五)为 知识讲解与操作示范（2) 没计 12.1.2 CSS样式表的应用举例 湖南绒道营政御学院 创建名称为“131.html'的网页，该网页只包含 个2行1列的表格，表格中只有文字，对该网页进行 如下设置： (1)通过“页面属性”对话框设置“页面字体大 小”为“12px”,“左边距”、“右边距”设置为 “10px”。 (2)通过属性面板将表格中第一行的文字“长沙 世界之窗欢迎你”的“字体”设置为“隶书”，“大 小”设置为“18px”,文字颜色设置为“#0000FF”。 (3)切换到代码视图，在代码窗口设置表格中第 二行的文字的“大小”设置为“10px”,文字颜色设 置为#FF6600” 网页设计与制作
（五）知识讲解与操作示范（2） 创建名称为“13_1.html”的网页，该网页只包含 一个2行1列的表格，表格中只有文字，对该网页进行 如下设置： （1）通过“页面属性”对话框设置“页面字体大 小”为“12px”，“左边距”、“右边距”设置为 “10px”。 （2）通过属性面板将表格中第一行的文字“长沙 世界之窗欢迎你”的“字体”设置为“隶书”，“大 小”设置为“18px”，文字颜色设置为“#0000FF”。 （3）切换到代码视图，在代码窗口设置表格中第 二行的文字的“大小”设置为“10px”，文字颜色设 置为“#FF6600”。 12.1.2 CSS样式表的应用举例
(五)知识讲解与操作示范（3) 没计 12.1.3 CSS样式表的基本语法 湖南城道质业政饰学院 1. CSS样式表的定义位置 (1)CSS样式定义在HEAD内 CSS一般位于HTML文件的头部，即与 标记内，并且以开始，以 结束，例如如下的代码定义了、、 标记使用的字号。 body,td,th font-size:12px; }<style 网页设计与制作
（五）知识讲解与操作示范（3） 1．CSS样式表的定义位置 （1）CSS样式定义在HEAD内 CSS一般位于HTML文件的头部，即与 标记内，并且以开始，以 结束，例如如下的代码定义了、、 标记使用的字号。 body,td,th { font-size: 12px; } <style 12.1.3 CSS样式表的基本语法
(五)知识讲解与操作示范（4) 网没计然 12.1.3 CSS样式表的基本语法 (2) CSS样式嵌入BODY内部 湖南城道业政饰学院 代码style:="font-size:10pt;color:#FF6600;" 用于控制段落文字的字号和颜色，采用 的格式把样式写在HTML中的任意行内，“=”右边的 属性设置放入双引号中，多个属性用“；”分隔。 (3)在独立的外部文件中定义 CSS的定义既可以在HTML文档内部，也可以单 独在外部文件（例如style.css)中定义。把编辑好的 CSS文档保存成外部文件，然后在中添加如 下所示的代码： 网页设计与制作
（五）知识讲解与操作示范（4） （2）CSS样式嵌入BODY内部 代码style="font-size: 10pt; color: #FF6600;" 用于控制段落文字的字号和颜色，采用 的格式把样式写在HTML中的任意行内，“=”右边的 属性设置放入双引号中，多个属性用“;”分隔。 （3）在独立的外部文件中定义 CSS的定义既可以在HTML文档内部，也可以单 独在外部文件（例如style.css）中定义。把编辑好的 CSS文档保存成外部文件，然后在中添加如 下所示的代码： 12.1.3 CSS样式表的基本语法