项目CSS样式表的应用.doc

项目四 CSS样式表的应用 项目（实训）名称 CSS样式表的应用 项目（实训）学时数 本实训项目预计实训学时数为2课时。 实训时间：2014-11-17-----2014-11-21 实训地点：S504 项目（实训）目标 1、理解CSS样式表的功能 2、掌握CSS样式表的应用方法 项目（实训）中的具体任务 利用CSS样式表美化网页 教师知识和能力要求 1、熟悉CSS样式表的应用 2、能解决学生在使用CSS样式表过程中出现的问题 学生知识和能力准备 1、了解CSS样式表的用处 2、掌握创建CSS样式表的方法 3、能够根据实训内容完成知识点的学习 工具与设备 PC机Windows操作系统，Dreamweaver CS5软件。 辅助教学资料 《CSS+DIV网页布局技术教程》，黄玉春，清华大学出版社，2012年。 《网页制作综合技术教程》，温谦，人民邮电出版社，2009年。 实施步骤与技术要点 打开index.html网页。 选择“修改/页面属性”命令，打开“页面属性”对话框，对“页面字体”、“大小”、“背景颜色”、“左边距”、“右边距”、“上边距”、“下边距”的设置如图5-1所示： 图5-1 打开页面属性 在“分类”列表框中选择“链接”选项，在右侧的“链接颜色”文本框中输入“#966”，在“变换图像链接”文本框中输入“#939”，如图5-2所示： 图5-2 设置链接 单击“确定”按钮完成页面属性的设置。 选择“窗口/CSS样式”命令打开“CSS样式”面板，单击面板右下角的“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，在“选择器类型”下拉列表框中选择“ID（仅用于一个HTML元素）”项，在名称下拉列表框中输入“left”，在“规则定义”栏中选中“仅限该文档”项，如图5-3所示： 图5-3 新建CSS规则 单击“确定”按钮，在打开的对话框“分类”列表框中选择“背景”选项，各项设置如图5-4所示： 图5-4 定义“#left”样式背景 选择“分类”列表框中的“方框”选项，在“width”栏中输入180，在“float”栏下拉列表框中选择“left”选项，在“margin”栏中去除“全部相同”复选框前的“√”，在“top”栏中输入1，其他栏输入0，如图5-5所示： 图5-5 定义“#left”样式方框 单击“确定”按钮完成“#left”样式的定义。 根据第5中所用的方法，新建“#category”样式，选择“分类”列表框中的“背景”选项，各项设置如图5-6，选择“分类”列表框中的“方框”选项，各项设置如图5-7所示： 图5-6 定义“#category”样式背景 图5-7 定义“#category”样式方框 在“CSS样式”面板中，单击面板右下角的“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，在“选择器类型”下拉列表框中选择“类（可用于任何HTML元素）”项，在名称下拉列表框中输入“.title”，在“规则定义”栏中选中“仅限该文档”项，如图5-8所示： 图5-8 新建CSS规则-类选择器 单击确定，在打开的“.title的CSS规则定义”对话框中，在“分类”列表中选择“类型”项，在“font-size”栏中输入12，如图5-9所示： 图5-9 定义“.title”样式类型 在“分类”列表中选择“背景”项，在“background-color”栏中输入“#ffd1d1”，如图5-10所示： 图5-10 定义“.title”样式背景 在“分类”列表中选择“方框”项，在“padding”栏和，margin栏的设置如图5-11所示： 图5-11 定义“.title”样式方框 点击确定完成“.title”的样式定义。 在设计视图的编辑窗口中选中文字“用途”，点击鼠标右键，选择“CSS样式”|“title”，给文字“用途”应用“.title”样式。如图5-12所示： 图5-12 应用样式 按照同样的方法，给文字“花材”应用“.title”样式。 在“CSS样式”面板右下角单击“附加样式表”按钮，打开对话框，如图5-13所示： 图5-13 链接样式表 在“文件/URL”下拉列表框中输入“style.css”。 单击“确定”钮，完成外部样式表的链接。此时的“CSS样式”面板如图5-14所示： 图5-14 CSS面板 保存网页文档，在浏览器中预览。 考核或评价标准 考评项目 考评方法 比例 小计 形成性评价 学习态度 根据作业完成情况、课堂回答问题情况、小组协作情况，由教师和学生干部综合评定学习态度的得分% 20% 组织纪律 根据考勤情况由教师和学生干部评定纪律得分% 制定计划 根据小组的计划完成情况由学生自评、组长评价和教师评价相结合评定成绩% 80% 任务实施 根据小组任务的实施步骤，成员完成的具体结果、