《网页设计与制作(精品).ppt》由会员分享，可在线阅读，更多相关《网页设计与制作(精品).ppt（38页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 网页设计与制作网页设计与制作 杨莉杨莉任务四任务四 利用利用CSS修饰腾讯公司会员活动页修饰腾讯公司会员活动页复复习习引引课课学学习习目目标标知知识识点点拨拨技技能能训训练练知知识识扩扩展展小小结结作作业业复习引课复习引课复习复习【要求要求】设计三个网页：设计三个网页：1.主页：包含图片、文字，对文字进行链接。主页：包含图片、文字，对文字进行链接。2.二级链接页二级链接页1：包含文字并自行进行格式设：包含文字并自行进行格式设置。置。3.二级链接页二级链接页2：包含文字，格式同二级链接：包含文字，格式同二级链接页页1。引课引课 上次课主要讲解针对某一网页进行基本元上次课主要讲解针对某一网页进行
2、基本元素的使用以及格式设置问题。如今网页排版格素的使用以及格式设置问题。如今网页排版格式越来越来复杂，如果要对多个网页的同样格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用多的工作量，所以解决办法是采用CSS样式来样式来一次性对若干个文档的格式进行控制。一次性对若干个文档的格式进行控制。学习目标学习目标以腾讯公司会员活动页为参考学习以腾讯公司会员活动页为参考学习CSS样式的样式的使用。使用。利用利用CSS技术创建和应用技术创建和应用CSS样式，对网页进样式，对网页进行格式设置和特殊处理。行格
3、式设置和特殊处理。知识点拨知识点拨第第4章章 使用使用css样式样式 4.1 CSS技术概述技术概述 4.2 设置设置CSS属性属性 4.3 创建和使用创建和使用CSS样式样式4.1CSS概述概述 CSS（Cascading Style Sheet，层叠样，层叠样式表式表 ）技术是一种格式化网页的标准方式，）技术是一种格式化网页的标准方式，它扩展了它扩展了HTML的功能，使网页设计者能够以的功能，使网页设计者能够以更有效的方式设置网页格式。更有效的方式设置网页格式。CSS样式存于样式表文件中，然后在多样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式个网页中同时应用该样式表中的样式
4、，就能，就能确保多个网页具有一致的格式，并且能够随时确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维自动更新），从而大大降低了网站的开发和维护工作量。护工作量。4.2设置设置CSS属性属性 类型、背景、区块、方框、类型、背景、区块、方框、边框、列表、定位、扩展边框、列表、定位、扩展4.2.1类型（类型（Type）属性）属性 选择选择“CSS样式定义样式定义”对话框中对话框中“分类分类”列表中的列表中的“类型类型”选项，可以对选项，可以对CSS样式的样式的“类型类型”属性进行设置属性进
5、行设置。图图4-1“CSS样式定义样式定义”对话框对话框4.2.2 背景（背景（Background）属性）属性 选择选择“CSS样式定义样式定义”对话框中对话框中“分类分类”列表中的列表中的“背景背景”选项，可以对选项，可以对CSS样式表中样式表中的的“背景背景”选项，可以对选项，可以对CSS样式的样式的“背景背景”属性进行设置属性进行设置。图图4-2“CSS样式定义样式定义”对话框对话框4.2.3区块区块（Block）属性属性 选择选择“CSS样式定义样式定义”对话框中对话框中“分类分类”列表中的列表中的“区块区块”选项，可以对选项，可以对CSS样式的样式的“区块区块”属性进行设置属性进行
6、设置。图图4-3“CSS样式定义样式定义”对话框对话框4.2.4方框方框（Box）属性属性 选择选择“CSS样式定义样式定义”对话框中对话框中“分类分类”列表中的列表中的“方框方框”选项，可以对选项，可以对CSS样式的样式的“方框方框”属性进行设置属性进行设置。图图4-4“CSS样式定义样式定义”对话框对话框4.2.5边框（边框（Board）属性）属性 选择选择“CSS样式定义样式定义”表中的表中的“边框边框”选项，选项，可以对可以对CSS样式的样式的“边框边框”属性进行设置属性进行设置。图图4-5“CSS样式定义样式定义”对话框对话框4.2.6列表（列表（List）属性）属性 选择选择“CS
7、S样式定义样式定义”对话框中对话框中“分类分类”列表中的列表中的“列表列表”选项，可以对选项，可以对CSS样式的样式的“方框方框”属性进行设置属性进行设置。图图4-6“CSS样式定义样式定义”对话框对话框4.2.7定位（定位（Positioning）属性）属性 选择选择“CSS样式定义样式定义”对话框中对话框中“分类分类”列表中的列表中的“定位定位”选项，可以对选项，可以对CSS样式的样式的“定位定位”属性进行设置属性进行设置。图图4-7“CSS样式定义样式定义”对话框对话框4.2.8扩展（扩展（Extensions）属性）属性 选择选择“CSS样式定义样式定义”对话框中对话框中“分类分类”列
8、表中的列表中的“扩展扩展”选项，可以对选项，可以对CSS样样式的式的“扩展扩展”属性进行设置属性进行设置。图图4-8“CSS样式定义样式定义”对话框对话框4.3创建和应用创建和应用CSS样式样式 1.新建新建CSS样式样式 图图4-9新建名为新建名为lixi的的css2.应用应用CSS样式样式【要点要点】1）先要选中网页文档中需应用）先要选中网页文档中需应用CSS样式的样式的文本。文本。2）将）将CSS样式应用在选中的文本中。样式应用在选中的文本中。技能训练技能训练学做学做CSS样式修饰样式修饰腾讯公司会员活动页腾讯公司会员活动页。请看源图与修改后的效果图的比较。请看源图与修改后的效果图的比较
9、。图图 4-10腾讯公司会员活动页腾讯公司会员活动页源效果图源效果图颜色、大小颜色、大小去下划线去下划线文本行高文本行高文字背景文字背景 图片翻转图片翻转图图 4-11腾讯公司会员活动页腾讯公司会员活动页修改后效果图修改后效果图制作要求制作要求1.将将“大家快来看！大家快来看！”改变颜色为红色，大小改变颜色为红色，大小为为11点数（点数（pt）。）。2.去掉去掉QQ会员、会员、QQ秀红钻、秀红钻、QQ游戏蓝钻和游戏蓝钻和QQ黄钻贵族的下划线。黄钻贵族的下划线。3.设置温馨提示下面的文本行行高为设置温馨提示下面的文本行行高为20素。素。4.给活动内容下面的文字段添加背景。给活动内容下面的文字段添
10、加背景。5.制作制作QQ迎春图水平翻转效果。迎春图水平翻转效果。思考与动手训练思考与动手训练 自行设计自行设计CSS样式，对上述网页进行控制。样式，对上述网页进行控制。展开班级讨论展开班级讨论 上传到教师机，由教师和同学互评。相互上传到教师机，由教师和同学互评。相互学习，提高制作能力。学习，提高制作能力。知识扩展知识扩展链接外部现有链接外部现有CSS样式文件样式文件导出外部导出外部CSS样式表样式表 【要点要点】导出样式的目的是将来可以备用，链接外导出样式的目的是将来可以备用，链接外部的样式可以借鉴好的样式拿来为自己所用，部的样式可以借鉴好的样式拿来为自己所用，这样可以相互借鉴，相互学习和应用
11、。这样可以相互借鉴，相互学习和应用。小结与作业小结与作业小结小结 本次课主要讲授本次课主要讲授CSS样式的建立、应用及样式的建立、应用及属性设置。属性设置。【重点重点】学会对学会对CSS样式的创建与应用操作样式的创建与应用操作，并了解其属性设置，通过技能训练加深对网页并了解其属性设置，通过技能训练加深对网页制作中制作中CSS样式的理解和加强格式处理能力。样式的理解和加强格式处理能力。【难点难点】CSS样式的最终效果是与网页设计完样式的最终效果是与网页设计完美结合。美结合。小结与作业小结与作业作业作业 1.对对上海凯泉生物科技有限公司上海凯泉生物科技有限公司主页的主页的CSS样样式导出为独立文件。式导出为独立文件。2.对对LDLON网页网页文字使用外部链接文字使用外部链接CSS样式。样式。作业作业1图图 4-12上海凯泉生物科技有限公司上海凯泉生物科技有限公司主页效果图主页效果图图图 4-13 LDLON网页网页效果图效果图外部链接外部链接CSS样式样式作业作业2 结束结束