网页设计ppt电子课件教案第6章使用css布局美化网页

《网页设计ppt电子课件教案第6章使用css布局美化网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章使用CSS布局美化网页教学内容：CSS在当前的网页设计中已经成为不可缺少的技术。CSS是CascadingStyleSheets的简称。它允许作者在HTML文档中加入样式。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。教学重点掌握使用CSS定义文本样式掌握使用CSS美化段落掌握设置CSS样式属性掌握使用CSS创建特效文字掌握CSS滤镜的使用教学难点掌握使用CSS和DIV布局网页掌握在网页中使用

2、CSS综合实例教学目标和基本要求_________________________________________________________________________________________________________教学时间：本章共分_______课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第6章练习文件：exercise第6章本章各节课时分配及链接6.1任务20使用CSS定义文本样式——（）课时6.2任务21使用CSS美化段落——（）课时6.3任务22使用CSS创建特效文字

3、——（）课时6.4任务23使用CSS和DIV布局网页——（）课时6.5综合实训——在网页中使用CSS综合实例——（）课时本章小结思考与练习6.1任务20使用CSS定义文本样式对于网页设计者来说CSS是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。6.1.1简单讲评在制作网页时，如果没有CSS样式，那么对文本的格式化将是一件很繁琐的工作。利用CSS样式表可以对文本格式进行精确的页面美化。6.1.2核心知识“CSS样式”

4、面板。在“CSS样式”面板中单击鼠标右键，在弹出的快捷菜单中选择“新建”选项，在弹出的“新建CSS规则”对话框中进行相应的设置。6.1.3实际操作利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小。使用CSS定义文本样式具体操作步骤如下。步骤2选择“窗口>CSS样式”命令，打开“CSS样式”面板，在面板中单击鼠标右键，在弹出的菜单中选择“新建”选项。步骤3弹出“新建CSS规则”对话框。步骤4设置完毕，单击“确定”按钮，弹出“.b的CSS规则定义”对话框，在对话框中进行相应的设置。步骤5设置完毕，

5、单击“确定”按钮，在“CSS样式”面板中即可出现新建的CSS样式。步骤6在文档中选择想要应用样式的文本，在“CSS样式”面板中选择新建的样式，单击鼠标右键，选择“套用”选项。6.2任务21使用CSS美化段落CSS是CascadingStyleSheet的缩写，有些书上称为“层叠样式表”或“级联样式表”，是一种网页制作新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。6.2.1简单讲评CSS样式可以用来一次对若干个文档所有的样式进行控制，同HTML样式相比，使用CSS样式表的好处除了在于它可以同时链接多个文档之外，当

6、CSS样式有所更新或被修改之后，所有应用了该样式表的文档都会被自动更新。6.2.2核心知识——设置CSS样式属性控制网页元素外观的CSS样式用来定义字体、颜色、边距和字间距等属性，可以使用Dreamweaver来对所有的CSS属性进行设置。CSS样式属性包括类型、背景、区块、方框、边框、列表、定位、扩展等8种选项，在每个选项中都可以设置不同的参数。6.2.3实际操作使用CSS美化段落具体操作步骤如下。步骤1打开原始网页文档，选择“格式>CSS样式>新建”命令，在弹出的“新建CSS规则”对话框中将“选择器类型”设置为“类（可应用于任何HT

7、ML元素）”，“名称”设置为.w，“定义在”设置为“仅限该文档”步骤2单击“确定”按钮，弹出“.w的CSS规则定义”对话框中将“字体”设置为“宋体”，“大小”设置为13像素，“行高”设置为20像素。步骤3在弹出的“.w的CSS规则定义”对话框中选择“分类”列表中的“区块”选项，将“单词间距”和“字母间距”分别设置为0.5em。步骤4单击“确定”按钮，创建CSS样式。选中要应用样式的文字，在“CSS样式”面板中选中要应用的样式，单击鼠标右键，在弹出的快捷菜单中选择“套用”选项。6.3任务22使用CSS创建特效文字CSS滤镜是CSS的一个扩

8、展，能把可视化的滤镜和转换效果添加到一个标准的HTML元素上，使应用样式的对象产生模糊、反转和发光等特殊效果。6.3.1简单讲评在DreamweaverCS3中可以直接在对话框中添加滤镜参数，而不用编写复杂