网页设计与制作39828.ppt

网页设计与制作 杨莉 任务四 利用CSS修饰腾讯公司会员活动页 复习引课 学习目标 知识点拨 技能训练 知识扩展 小结作业 复习引课 复习 【要求】设计三个网页： 1.主页：包含图片、文字，对文字进行链接。 2.二级链接页1：包含文字并自行进行格式设置。 3.二级链接页2：包含文字，格式同二级链接页1。 引课 上次课主要讲解针对某一网页进行基本元素的使用以及格式设置问题。如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。 学习目标 以腾讯公司会员活动页为参考学习CSS样式的使用。 利用CSS技术创建和应用CSS样式，对网页进行格式设置和特殊处理。 知识点拨 第4章 使用css样式 4.1 CSS技术概述 4.2 设置CSS属性 4.3 创建和使用CSS样式 4.1CSS概述 CSS（Cascading Style Sheet，层叠样式表 ）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 4.2设置CSS属性 4.2.1类型（Type）属性 图4-1“CSS样式定义”对话框 4.2.2 背景（Background）属性 4.2.3区块（Block）属性 选择“CSS样式定义”对话框中“分类”列表中的“区块”选项，可以对CSS样式的“区块”属性进行设置 。 4.2.4方框（Box）属性 4.2.5边框（Board）属性 选择“CSS样式定义”表中的“边框”选项，可以对CSS样式的“边框”属性进行设置 。 4.2.6列表（List）属性 4.2.7定位（Positioning）属性 选择“CSS样式定义” 对话框中“ 分类 ”列表中的“定位”选项，可以对CSS样式的“定位”属性进行设置 。 4.2.8扩展（Extensions）属性 选择“CSS样式定义”对话框中“分类”列表中的“扩展”选项，可以对CSS样式的“扩展”属性进行设置 。 4.3创建和应用CSS样式 技能训练 学做CSS样式修饰腾讯公司会员活动页。 请看源图与修改后的效果图的比较。 思考与动手训练 自行设计CSS样式，对上述网页进行控制。 展开班级讨论 上传到教师机，由教师和同学互评。相互学习，提高制作能力。 知识扩展 链接外部现有CSS样式文件 导出外部CSS样式表 【要点】 导出样式的目的是将来可以备用，链接外部的样式可以借鉴好的样式拿来为自己所用，这样可以相互借鉴，相互学习和应用。 小结与作业 小结 本次课主要讲授CSS样式的建立、应用及属性设置。 【重点】学会对CSS样式的创建与应用操作 ，并了解其属性设置，通过技能训练加深对网页制作中CSS样式的理解和加强格式处理能力。 【难点】CSS样式的最终效果是与网页设计完美结合。 小结与作业 作业 1.对上海凯泉生物科技有限公司主页的CSS样式导出为独立文件。 2.对LDLON网页文字使用外部链接CSS样式。 作业1 作业2 图 4-12上海凯泉生物科技有限公司主页效果图 * CSS样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式 ，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。 类型、背景、区块、方框、 边框、列表、定位、扩展 选择“CSS样式定义”对话框中“分类”列表中的“类型”选项，可以对CSS样式的“类型”属性进行设置 。 选择“CSS样式定义”对话框中“分类”列表中的“背景”选项，可以对CSS样式表中的“背景”选项，可以对CSS样式的“背景”属性进行设置 。 图4-2“CSS样式定义”对话框 图4-3“CSS样式定义”对话框 选择“CSS样式定义”对话框中“分类”列表中的“方框”选项，可以对CSS样式的“方框”属性进行设置 。 图4-4“CSS样式定义”对话框 图4-5“CSS样式定义”对话框 选择“CSS样式定义”对话框中“分类”列表中的“列表”选项，可以对CSS样式的“方框”属性进行设置 。 图4-6“CSS样式定义”对话框