网页设计PPT电子课件教案-第6章_使用CSS布局美化网页.ppt

第6章 使用css布局美化网页,教学内容：css在当前的网页设计中已经成为不可缺少的技术。css是cascading style sheets的简称。它允许作者在html文档中加入样式。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供html调用。,教学重点 掌握使用css定义文本样式 掌握使用css美化段落 掌握设置css样式属性 掌握使用css创建特效文字 掌握css滤镜的使用 教学难点 掌握使用css和div布局网页 掌握在网页中使用css综合实例,教学目标和基本要求 _ _ _ 教学时间：本章共分_课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample第6章 练习文件：exercise第6章,本章各节课时分配及链接,6.1 任务20使用css定义文本样式（ ）课时 6.2 任务21使用css美化段落（ ）课时 6.3 任务22使用css创建特效文字（ ）课时 6.4 任务23使用css和div布局网页（ ）课时 6.5 综合实训在网页中使用css综合实例（ ）课时 本 章 小 结 思考与练习,6.1 任务20使用css定义文本样式,对于网页设计者来说css是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供html调用。,6.1.1 简单讲评 在制作网页时，如果没有css样式，那么对文本的格式化将是一件很繁琐的工作。利用css样式表可以对文本格式进行精确的页面美化。,6.1.2 核心知识 “css样式”面板 。,在“css样式”面板中单击鼠标右键，在弹出的快捷菜单中选择“新建”选项，在弹出的“新建css规则”对话框中进行相应的设置。,6.1.3 实际操作 利用css可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小。 使用css定义文本样式具体操作步骤如下。,步骤2 选择“窗口css样式”命令，打开“css样式”面板，在面板中单击鼠标右键，在弹出的菜单中选择“新建”选项。,步骤3 弹出“新建css规则”对话框。,步骤4 设置完毕，单击“确定”按钮，弹出“.b的css规则定义”对话框，在对话框中进行相应的设置。,步骤5 设置完毕，单击“确定”按钮，在“css样式”面板中即可出现新建的css样式。,步骤6 在文档中选择想要应用样式的文本，在“css样式”面板中选择新建的样式，单击鼠标右键，选择“套用”选项。,6.2 任务21使用css美化段落,css是cascading style sheet的缩写，有些书上称为“层叠样式表”或“级联样式表”，是一种网页制作新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。,6.2.1 简单讲评 css样式可以用来一次对若干个文档所有的样式进行控制，同html样式相比，使用css样式表的好处除了在于它可以同时链接多个文档之外，当css样式有所更新或被修改之后，所有应用了该样式表的文档都会被自动更新。,6.2.2 核心知识设置css样式属性 控制网页元素外观的css样式用来定义字体、颜色、边距和字间距等属性，可以使用dreamweaver来对所有的css属性进行设置。css样式属性包括类型、背景、区块、方框、边框、列表、定位、扩展等8种选项，在每个选项中都可以设置不同的参数。,6.2.3 实际操作 使用css美化段落具体操作步骤如下。 步骤1 打开原始网页文档，选择“格式css样式新建”命令，在弹出的“新建css规则”对话框中将“选择器类型”设置为“类（可应用于任何html元素）”，“名称”设置为.w，“定义在”设置为“仅限该文档”,步骤2 单击“确定”按钮，弹出“.w的css规则定义”对话框中将“字体”设置为“宋体”，“大小”设置为13像素，“行高”设置为20像素。,步骤3 在弹出的“.w的css规则定义”对话框中选择“分类”列表中的“区块”选项，将“单词间距”和“字母间距”分别设置为0.5 em。,步骤4 单击“确定”按钮，创建css样式。选中要应用样式的文字，在“css样式”面板中选中要应用的样式，单击鼠标右键，在弹出的快捷菜单中选择“套用”选项。,6.3 任务22使用css创建特效文字,css滤镜是css的一个扩展，能把可视化的滤镜和转换效果添加到一个标准的html元素上，使应用样式的对象产生模糊、反转和发光等特殊效果。,6.3.1 简单讲评 在dreamweaver cs3中可以直接在对话框中添加滤镜参数，而不用编写复杂的代码。,6.3.2 核心知识css滤镜的使用 在“过滤器”下拉列表中选择特殊效果，也就是通常说的css滤镜。,6.3.3 实际操作 使用css创建特效文字效果具体操作步骤如下。 步骤2 选择“窗口css样式”命令，打开“css样式”面板，在面板中单击鼠标的右键，在弹出的下拉菜单中选择“新建”选项。,步骤3 弹出“新建css规则”对话框，在对话框中的“选择器类型”选项中选择“类（可应用于任何html元素）”，“名称”文本框中输入.e，“定义在”选项中选择“仅限该文档” 。,步骤4单击“确定”按钮，弹出“.e的css的规则定义”对话框，在对话框中将“font-family”设置为“宋体”，“font-size”设置为36px，“font-weight”设置为“bold” 。,步骤5 在“.e的css的规则定义”对话框中的“分类”选项中选择扩展选项，在“filter “选项中选择滤镜。,步骤6 将“滤镜”设置为“shadow(color=#5b7315，direction=150)” 。,6.4 任务23使用css和div布局网页,css是网页制作过程中普遍用到的技术，采用css的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。,6.4.1 简单讲评 css是cascading style sheets的简称。允许作者在html文档中加入样式。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供html调用。,6.4.2 核心知识 选择“文件新建”命令，弹出“新建文档”对话框，在“布局”栏中可以任意选择一种布局模式。,6.4.3 实际操作 使用css和div布局网页 具体操作步骤如下。 步骤1 选择“文件新建”命令，打开“新建文档”对话框。,步骤2 选择“空白页html2列弹性，左侧栏”命令，单击“创建”按钮，创建一网页。,步骤3 在文档中输入文本。,步骤4 选择“窗口css样式”命令，打开“css样式”面板，可以看出在“css样式”面板中可以列出了css样式，可以对这些样式任意的更改，双击其中的一个样式，打开“css规则定义”对话框，将“分类”中的“背景”选项中的“background-color”修改为#fc9。,步骤6 单击其中的一个css样式，弹出“css规则定义”对话框，将“分类”中的“背景”选项中的“background-color”修改为#f93。,6.5 综合实训在网页中使用css综合实例,在网页中使用css具体操作步骤如下。 步骤2 选择“窗口css样式”命令，打开“css样式”面板，在面板中单击鼠标右键，在弹出的菜单中选择“新建”命令。,步骤3 弹出“新建css规则”对话框，在对话框中将“选择器类型”选择“类（可应用于任何html元素）”，“选择器”名称设置为carp，“规则定义”选择“仅限该文档”,步骤4 设置完毕，单击“确定”按钮，弹出“carp的css规则定义”对话框，将“font-size”设置为14px，“line-height”设置为25px。,步骤5 单击“确定”按钮，在文档中选择文本，在“css样式”面板中选择创建的样式，单击鼠标右键，在弹出的菜单中选择“套用”命令。,步骤6 在文本中相应的位置插入网站根目录下的images文件夹中的图像jianjie.jpg。,本 章 小 结,在网页的适当位置放置一些图像，不仅使内容清晰易懂，而且更具吸引力。网页中除了能够插入文本和图像之外，还有一些多媒体元素是非常重要的，如flash动画、背景音乐、以及java applet小程序。本章的重点是文本、图像、flash动画的插入和使用以及超链接的创建。,思考与练习,1填空题 （1）在“css样式”面板的底部排列有几个按钮，分别是_、_、_、_。 （2）_即重定义html样式，选择该项后，可以在其下拉列表中输入一个html标签，或从下拉列表中选择一个标签。 （3）css样式属性包括_、_、_、_、_、_、_、_等8种选项，在每个选项中都可以设置不同的参数。,2选择题 （1）css属性被分为8大类，不包括_。 （a） 类型 （b） 扩展 （c） 高级 （d） 区块 （2）_过滤器将使对象产生模糊效果，可以通过各参数的设置控制模糊的方向和模糊程度。,（a） blur （b） blendtrans （c） mask （d） invert （3）利用css布局网页时，_的列宽是以站点访问者的浏览器