商务网页设计与制作教案30.docx
商务网页设计与制作参考教案授课教师：授课班级：课程学分：总学时数：56周学时数：上课周次：第 2 课（2. 1-2.3）第2章商务网页设计2.1商务网页视觉设计2. 2商务网页创意设计2. 3商务网页原型设计课 时2学时 教学方法 讲授,启发式进程 第2次课教学目地1 .理解商务网页视觉设计2 .理解商务网页创意设计要点3 .掌握商务网页原型设计重 点商务网页视觉设计对象与要点,商务网页风格与形象创意设计,商务 网页原型设计步骤难 点网页网页风格设计,商务网页原型设计方法实施步骤：一，组织教学，课前提问（5）二，教学引导（3,）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第2章商务网页设计2.1 商务网页视觉设计2.1.1 商务网页赏析网页布局网页配色导航栏设计主横幅（Banner）设计企业代表（Logo）设计按钮,文字,多媒体资料综合分析网页布局与公司业务地关系2.1.2 网页视觉设计概述2.1.3 网页视觉设计地原那么1 .针对性强2 .主题鲜明3 .界面与内容统一4 .美观5 .简洁教学提示：赏析代表性地 商务网页，讨论 其优点与缺乏。6.体验为王(1)少等于多(2)合理导航(3)访问速度(4)保护用户数据平安网页视觉设计对象1 .文字(1)文字标题(2)文字信息(3)文字链接2 .图像3 .多媒体(1)音频(2)视频(3)动画网页视觉设计要点1 .网页布局2 .网页配色3 .导航栏4 . Logo (企业徽标)5 . Banner (广告条)6 .按钮7 .文字，图片与其它2.2商务网页创意设计2. 2.1商务网页创意设计概述2. 2.2商务网页创意设计地思路1 .服务于企业地市场筹划2 .服务于目地客户(1)目地客户概念(2)目地客户市场分类(3)目地客户地消费分析(4)吸引目地客户放大产品信息去抓住用户。用视频代替现场体验。提供免运费服务。放大折扣信息。提供尽可能多地支付方式。钱不是万能地，没有钱是万万不能地！商务网页创意设计1 .商务网页风格创意2 .形象设计(1)设计企业徽标(Logo)(2)设计网页字体(3)设计网页宣传语(4)设置背景音乐2.3商务网页原型设计2. 3. 1绘制网页草图1 .徒手绘制草图2 .计算机绘制草图绘制网页效果图2. 3.3制作网页原型方案2. 3.4网页原型方案评审小结巩固商务网站视觉设计地概念,原那么,视觉设计对象,商务网页设计要点； 商务网站创意设计，网页原型设计。课堂练习重点概念：商务网站视觉设计,创意设计，网页原型设计课后作业思考：1 .赏析商务网页，通常从哪些方面入手？2 .网页原型设计有什么作用？3 .绘制网页原型草图。参考资料2章；互联网与期刊杂志地有关内容。第 3 课(3.1-3.2.3)第3章HTML网页制作技术3. 1网页基础知识3.2文本设置方法3. 2. 1设置网页标题3. 2.2设置文字属性3. 2.3设置文档标题课 时2学时教学方法讲授，例如讲解进程 第3次课教学目地1 .熟悉网页基础知识2 .掌握设置网页文字标题，文字属性与文档标题地设置方法重 点标签地概念与属性,文字属性,文档标题设置方法。难 点标签地概念与属性,文字属性设置方法。教学提示:3. 1.21.2.3. 1.31.网页解释代码网页解释代码地产生网页解释代码地查看与保存网页制作语言介绍HTML语言实施步骤：一，组织教学，课前提问（5）二，教学引导（3'）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容:第3章HTML网页制作技术3. 1网页基础知识4. 1. 1网页源文件.网页源文件地概念.网页源文件地存储格式.网页源文件地运行方式（1） HTML 定义HTML 开展HTML 与 XML, XHTML 地关系 HTML与XML地关系（2）HTML与XHTML地关系CSS语言2. 1.4 HTML基础知识网页元素HTML标签地作用与特点HTML标签地概念（1） HTML标签地作用HTML标签地特点1. HTML标签地种类基础标签,格式标签,表单标签,框架标签，图像标签,视音 频标签,链接标签，列表标签,表格标签,样式标签，元信息 标签,编程标签,全局标签2. HTML标签属性形象理解:标签是定义类别地,属性是个性化描述地。3. HTML事件设置标签与标签属性地方法标签 标签属性属性值标签属性2二属性值标签属性3二属性值标签内容/标签 标签1标签1属性二属性值标签2标签2属性二属性值标签实例/标签2>/标签17二HTML基本结构文档头局部<html>html为标记语言声明地标签，告诉浏览器 以下文件为超文本标记语言<head>head是html文档头部地标签，网页头部 与头部以上地信息不在网页中显示，主要 作用是描述整个网页，定义或声明CSS样 式等。如网页标题，字符格式，语言，兼容性， 关键字等<title>网页结构介绍</title>vtitle>为网页标题地标签o指明”网页结构 介绍”标题显示在浏览器标题栏中</head></head>是文档头部结束地标签文档体局部<body>这里是正文内容</body>vbody>是网页文档体正文开始地标签。所 有网页需求显示地内容，均应在此标识后 面处理。本例中地正文内容是”这里是正 文内容”。</body>是网页文档体结束地标签</html></html>是超文本标记语言结束地标签，也 代表了网页结束标签2标签2属性二属性值标签实例/标签2>/标签17二HTML基本结构文档头局部<html>html为标记语言声明地标签，告诉浏览器 以下文件为超文本标记语言<head>head是html文档头部地标签，网页头部 与头部以上地信息不在网页中显示，主要 作用是描述整个网页，定义或声明CSS样 式等。如网页标题，字符格式，语言，兼容性， 关键字等<title>网页结构介绍</title>vtitle>为网页标题地标签o指明”网页结构 介绍”标题显示在浏览器标题栏中</head></head>是文档头部结束地标签文档体局部<body>这里是正文内容</body>vbody>是网页文档体正文开始地标签。所 有网页需求显示地内容，均应在此标识后 面处理。本例中地正文内容是”这里是正 文内容”。</body>是网页文档体结束地标签</html></html>是超文本标记语言结束地标签，也 代表了网页结束标签实例/标签2>/标签17二HTML基本结构文档头局部<html>html为标记语言声明地标签，告诉浏览器 以下文件为超文本标记语言<head>head是html文档头部地标签，网页头部 与头部以上地信息不在网页中显示，主要 作用是描述整个网页，定义或声明CSS样 式等。如网页标题，字符格式，语言，兼容性， 关键字等<title>网页结构介绍</title>vtitle>为网页标题地标签o指明”网页结构 介绍”标题显示在浏览器标题栏中</head></head>是文档头部结束地标签文档体局部<body>这里是正文内容</body>vbody>是网页文档体正文开始地标签。所 有网页需求显示地内容，均应在此标识后 面处理。本例中地正文内容是”这里是正 文内容”。</body>是网页文档体结束地标签</html></html>是超文本标记语言结束地标签，也 代表了网页结束标签实例/标签2>/标签17二HTML基本结构文档头局部<html>html为标记语言声明地标签，告诉浏览器 以下文件为超文本标记语言<head>head是html文档头部地标签，网页头部 与头部以上地信息不在网页中显示，主要 作用是描述整个网页，定义或声明CSS样 式等。如网页标题，字符格式，语言，兼容性， 关键字等<title>网页结构介绍</title>vtitle>为网页标题地标签o指明”网页结构 介绍”标题显示在浏览器标题栏中</head></head>是文档头部结束地标签文档体局部<body>这里是正文内容</body>vbody>是网页文档体正文开始地标签。所 有网页需求显示地内容，均应在此标识后 面处理。本例中地正文内容是”这里是正 文内容”。</body>是网页文档体结束地标签</html></html>是超文本标记语言结束地标签，也 代表了网页结束举例说明3.2文本设置方法3. 2.1设置网页标题3. 2.2设置文字属性3. 2.3设置文档标题第 4 课(3. 2. 4-3. 2. 6)小结巩固网页源文件与解释代码，网页元素,HTML标签与属性,设置网页标题， 文字属性,文档标签地方法课堂练习重点概念：网页源文件，网页元素，网页元素,HTML标签课后作业思考：简述HTML与XML, HTML地关系。作业：制作一个设置文本地网页，写出完整地HTML代码。具体要求如下： (1)网页标题为古诗欣赏；(2)设置1个h2文档标题,靠左显示， 字地颜色为蓝色，标题内容为登鹳雀楼；(3)设置一段文本，内容 为诗句:白日依山尽，黄河入海流。欲穷千里目，更上一层楼。每句 诗都单独一行,字体为隶书,字地颜色为绿色,字号为6号。参考资料3章；互联网与期刊杂志地有关内容。第3章HTML网页制作技术3. 2.4设置文本段落3. 2. 5设置文本列表3. 2.6制作文本网页综合范例课 时2学时教学方法讲授,不例讲解进程 第4次课教学目地1 .掌握文本段落，文本列表地设置方法2 .掌握制作文本网页范例地基本方法。重 点设置文本段落,设置文本列表难 点制作文本网页范例实施步骤：一，组织教学，课前提问（5）二，教学引导（3 '）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第3章HTML网页制作技术3. 2.4设置文本段落4. 2.5设置文本列表1 .设置无序列表2 .设置有序列表3. 2.6制作文本网页综合范例教学提示：例如教学小结巩固本课程需求理解掌握文本段落,文本列表地设置方法，课堂练习重点概念:无序文本列表,有序文本列表。练习：制作无序文本列表,有序文本列表网页。课后作业作业：制作一个设置段落地网页，写出完整地HTML代码。具体要求如下： （1）制作一个文本段落，内容为诗歌是一种语言凝练而形象，结构 自由而跳跃，富有节奏与韵律,饱含联想与想象，高度集中与概括地 反映社会生活，表达思想感情地文学体裁。诗歌地基本特点为:。字 体为黑体,字号为5号，字地颜色为蓝色，段落中地文本居中显示；（2）制作一个文本段落,在其中再制作一个文本列表,文本列表地字 体为楷体,字号为5号,字地颜色为紫色，文本列表地内容如下：第 5 课(3. 3-3. 3. 2)A.生活美:对生活高度地提炼，集中，概括；B.思想美:饱含深切地思想感情；C.意境美:用丰富地想象与联想力营造出优美地意境；D.语言美:文字色彩鲜活，语言节奏清楚；E.音乐美:韵律与谐。参考资料3章；互联网与期刊杂志地有关内容。第3章3.3图像设置方法HTML网页制作技术3. 3. 1图像文件地存储管理3. 3.2图像引用课时2学时教学方法讲授,例如讲解进程第5次课教学目地1 .掌握图像文件地存储管理2 .掌握引用图像地方法重点图像文件地存储管理，引用图像地方法。难点图像文件地存储路径与其引用方法实施步骤：一，组织教学，课前提问（5）二，教学引导（3）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第3章HTML网页制作技术3.3图像设置方法3. 3.1图像文件地存储管理网站通常有很多图像文件，需求对这些图像文件进行有效地管 理。一是起好文件名称。文件名称应当有助于理解图片内容， 言简意赅。二是规划好图像文件存储目录。4. 3.2图像引用1 .相对路径引用（1）引用当前目录下地文件（同级目录）（2）引用下级目录下地图像文件（3）引用上级目录下地图像文件（4）引用上两级目录下地一个子目录中地文件2 .绝对路径引用教学提示：例如讲解小结巩固课堂练习重点概念：相对路径,绝对路径练习：引用相对路径photo下地图像文件 1x1. jpg。引用绝对路径C:/Class3/下地 1x2. jpg教学进度计划课后作业早TJ工程计划课时教学模式教学环境第1章共2节2理实一体化理实一体化机房第2章共3节2理实一体化理实一体化机房第3章共8节18理实一体化理实一体化机房第4章共7节20理实一体化理实一体化机房弟5早共2节2理实一体化理实一体化机房第6章共2节10理实一体化理实一体化机房课程考评2总计56课后作业课后作业课后作业参考资料3章；互联网与期刊杂志地有关内容。第 6 课(3. 3. 3-3. 3. 7)第3章HTML网页设计与制作3. 3.3设置图像显示尺寸3. 3.4设置图像对齐方式3. 3.5设置图像替换文本3. 3.6设置网页背景图像与背景颜色3. 3.7制作图文网页综合范例课 时2学时 教学方法 讲授,例如讲解 进程 第6次课教学目地1 .掌握图像尺寸,对齐方式，替换文本,背景图像与背景颜色地设置 方法；2 .掌握简单图文网页地制作方法。重 点图像属性地设置方法，图文网页制作。难 点图文网页制作实施步骤：一，组织教学，课前提问（5）二，教学引导（3,）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第3章HTML网页制作技术3. 3.3设置图像显示尺寸固定数值,百分比两种赋值形式。3. 3.4设置图像对齐方式水平对齐:左中右垂直对齐:上中下3. 3.5设置图像替换文本3. 3.6设置网页背景图像与背景颜色3. 3.7制作图文网页综合范例教学提示：例如讲解小结巩固回顾图像尺寸地赋值形式,设置图像对齐地方法，以与设置图像替换 文本,背景图像与背景颜色地方法。课堂练习练习：看作一个网页，设置图像 1X. jpg地宽度属性值为60%,高度属性值为 200pxo课后作业作业：制作一个设置图像地网页，写出完整地HTML代码，具体要求如下： （1）设置网页地背景图像，该图像存储在该网页所在目录地下一级 目录images中，图像文件名称为photo. jpg；（2）网页中引用一 个图像，该图像为该网页所在目录地上两级目录中，这个图像地名称 是puter. jpg，设置其显示尺寸为宽200px,高180pxo参考资料3章；互联网与期刊杂志地有关内容。第7课（3.4）HTML网页设计与制作3.4超链接设置方法教学目地2学时教学方法讲授,例如讲解第7次课1. 理解超链接地概念与类型；掌握指向网站内部,外部地超链接设置方法；掌握文本，图像超链接设置方法；掌握设定超链接翻开窗口地方法；掌握制作简单地图文超链接网页地制作方法。超链接地概念,超链接地设置方法 图文超链接网页制作实施步骤：一，组织教学，课前提问（5）二，教学引导（3）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容:第3章HTML网页制作技术教学提示:3. 4. 11.2.3.3. 4.23. 4.34.43. 4.53. 4.63. 4.7超链接地概念与类型超链接地概念什么是超链接？超链接地链接目地，超链接地载体。超链接地类型内部链接,外部链接超链接地标签与属性指向网站内部地超链接指向站点内部文件地链接指向本页面中特定局部地链接指向空链接指向网站外部地超链接指向其它网站地超链接指向电子邮箱地超链接给文本设置超链接给图像设置超链接设置超链接地翻开窗口制作图文超链接网页综合范例例如讲解小结巩回顾超链接地概念,超链接地设置方法,超链接地翻开窗口地设置方法。课堂练习练习：1 .制作一个网页，设置图像 1X. jpg地超链接指向当前路径下地文 件study. apk;2 .制作一个网页，设置设置文本淘宝网地超链接指向 “ s :. taobao. ",并在一个新窗口翻开超链接。课后作业作业：制作一个设置超链接地网页，写出完整地HTML代码,具体要求如下： （1）设置一行文本，内容为搜狐网站，并给该文本设置指向搜狐网 地超链接；（2）设置一行文本，内容为发邮件，并给该文本设置指 向test2018126.地超链接；（3）引用本级路径下地图像（名称为 image009. png）,并给该图像设置指向同级路径地puter. html文 件；（4）设置全网在新窗口中翻开超链接。参考资料3章；互联网与期刊杂志地有关内容。第 8 课(3. 5-3. 5.4)3.5表格制作方法HTML网页设计与制作3.5表格制作方法HTML网页设计与制作HTML网页设计与制作HTML网页设计与制作3. 5. 13. 5.23. 5.33. 5.4表格地代码结构制作表格地方法单元格或表头地合并方法制作单元格内容课 时 2学时教学方法讲授，例如讲解进程 第8次课.理解网页表格地概念与代码结构;教学目地1 .掌握表格地制作方法；2 .掌握单元格或表头地合并方法；3 .掌握制作单元格内容地方法。表格地概念与代码结构,表格地制作方法,单元格与表头合并地设置 方法,制作单元格内容。网页表格地概念,单元格合并实施步骤：一，组织教学，课前提问（5）二，教学引导（3,）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第3章HTML网页制作技术3.5表格制作方法表格地概念，表格地作用3.5.1 表格地代码结构表行表头或单元格3. 5.2制作表格地方法（1）先创立表；（2）创立行，创立本行内地单元格或表头；（3）重复第二步，直至表格内容创立结束。3. 5.3单元格与表头地合并方法1 .多列单元格合并2 .多行单元格合并3 .多行多列单元格同时合并3. 5.4制作单元格内容1 .引用文本2 .引用图像教学提示：例如讲解小结巩固回顾网页表格地概念,表格地代码结构,表格制作方法,单元格合并， 以与单元格内容制作方法。课堂练习练习：1 .制作一个含有5行3列表格地网页；2 .制作一个1行2列地表格,表格式样如下：奔驰SUN课后作业作业：参考资料3章；互联网与期刊杂志地有关内容。第 9 课(3. 5. 5-3. 5. 6)(4)设置单元格垂直对齐方式(5)设置表头与单元格地宽度第3章UTUT的行出4三生止设置表格外观HTML网人设计与制作3. 5. 6运用表格技术布局网页综合范例课 时2学时教学方法讲授,例如讲解进程 第9次课教学目地1 .理解表格外观设置方法；2 .掌握利用表格技术布局网页地制作方法。重 点表格外观地设置方法,包含行,歹U,单元格,表格线等地设置。难 点统一设置行,列地有关属性。实施步骤：一，组织教学，课前提问(5)二，教学引导(3)三,进入本次课讲授内容(77 ')四，小结巩固(重申教学目地，重点，难点)(5)讲授内容：第3章HTML网页制作技术3. 5.5设置表格外观1 .设置表地外观(1)设置表地标题(2)设置表地宽度(3)设置表地高度(4)设置表地水平对齐方式(5)设置表地背景颜色(6)设置表地背景图像2 .设置表头与单元格(1)设置表头水平对齐(2)设置表头垂直对齐(3)设置单元格水平对齐教学提示：例如讲解(6)设置表头与单元格地高度(7)设置背景图像(8)设置背景颜色3 .统一设置列地宽度与行地高度(1)统一设置列地宽度 (2)统一设置行地高度4 .统一设置行地对齐方式水平对齐,垂直对齐5 .设置表格边框3. 5.63. 5.63. 5.6运用表格技术布局网页综合范例小结巩回顾网页表格地外观设置，包含表地标题，宽度与高度，水平对齐方 式，以与表地背景图像与背景颜色地设置；设置表格与单元格；以与 统一设置列宽，行高地方法，设置行地对齐方式；设置表格边框地方 法，隐形边框地设置。课堂练习课后作业作业：1产品名称数量单价笔记本电脑55600.0028000.00台式机104500.0045000.00总计73000.00制作一个设置表格地网页，写出完整地HTML代码，具体要求如下：(1)制作 一个表格，设置表格水平居中对齐，表格内容与其水平对齐，垂直对齐地效果如下。采购清单3章；互联网与期刊杂志地有关内容。参考资料第 10 课(3. 6-3. 7)幕，图像名称为scdc. jpg,存放在该网页路径下，向上滚动,滚动方 式为alternate”,滚动5次。第3章UTUT同石出、u"这3.6多媒体引用方法HTML网页设计与制作工7滚动字幕制作方法课 时2学时 教学方法讲授，例如讲解进 程 第10次课教学目地1 .掌握多媒体引用地方法；2 .掌握滚动字幕制作地方法。重 点多媒体引用地方法,滚动字幕地制作方法难 点滚动字幕地属性设置实施步骤：一，组织教学，课前提问（5）二，教学引导（3'）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第3章HTML网页制作技术3.6多媒体引用方法3. 6. 1设置视频1 .设置视频手动播放2 .设置视频自动播放3. 6.2设置音频1 .设置音频手动播放2 .设置音频自动播放3 .隐藏音频4 .设置网页背景音乐3. 7滚动字幕制作方法3. 7.1制作文字滚动字幕3. 7.2制作图像滚动字幕3. 7.3制作滚动字幕综合范例教学提示：例如讲解小结巩固总结多媒体引用地方法,滚动字幕地制作方法。课堂练习练习：制作一个网页，引用一个视频文件,并制作背景音乐。素材网上自选。课后作业作业：制作一个设置滚动字幕地网页，写出完整地HTML代码，具体要求如 下：（1）设置一个文字滚动字幕，字幕内容为市场调查问卷，向右 滚动,滚动方式为slide，无限循环滚动；（2）设置一个图像滚动字参考资料3章；互联网与期刊杂志地有关内容。第 11 课（3.8）第 12 课(4.1-4.1.3)第3章HTML网页设计与制作3.8网页框架制作方法课 时2学时教学方法讲授,例如讲解进程第11次课教学目地1 .掌握网页框架地制作方法；2 .掌握网页框架重定向地实现方法。重 点网页框架地概念,框架制作地方法，以与框架重定向地实现方法。难 点框架重定向地实现方法,制作嵌套框架。实施步骤：一，组织教学，课前提问（5）二，教学引导（3）三,进入本次课讲授内容（77 '）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第3章HTML网页制作技术3.8网页框架制作方法3. 8.1上下型框架制作3. 8.2左右型框架制作3. 8.3框架重定向3. 8. 4制作嵌套框架综合范例教学提示：例如讲解小结巩固理解网页框架地概念,掌握框架地制作方法。课堂练习练习：制作一个上，下左，下右型地网页框架，三个框架分别填充不同地背 景颜色或底纹，素材自行确定。网页整体效果如下：页眉区导航栏区主功能区课后作业作业：制作一个框架结构地网页，写出完整地HTML代码，具体要求如下： (1)制作一个左右型地框架结构，左框架名为leftframe”,绑定地 网页源文件为leftpage.右框架名为rightframe”,绑定地网页源文件为rightpage. html”; (2)制作 leftpage. html,设置一 个文本超链接，文本内容为产品演示，超链接指向网页源文件 demo. htm 1 并在r i ghtframe中翻开。参考资料3章；互联网与期刊杂志地有关内容。第4章CSS网页式样制作技术4.1 CSS基础知识4. 1. 1 CSS地作用4. 1.2 CSS地构成规那么4. 1. 3 CSS样式类别课 时2学时教学方法讲授，例如讲解 进 程|第12次课教学目地1 .熟悉CSS网页式样基础知识知SS式样地作用;2 .熟悉CSS地构成规那么与式样类别。重 点CSS地构成规那么,CSS式样类别。难 点CSS式样类别。实施步骤：一，组织教学，课前提问（5）二，教学引导（3）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第4章CSS网页式样制作技术CSS就是显示样式，专门用来设置各类网页元素地显示效果。我 们把元素地显示效果事先采用css技术封装成一个样式,在主 HTML文档中调用这个样式，就能得到这个事先设定地显示效 果。4. 1 CSS基础知识CSS是加强网页显示效果地超文本标记语言，可以起到代替与 加强标签属性地作用。CSS地突出特点是:简洁，易用，高效，可 以重复使用，也可以继承使用。4. 1. 1 CSS地作用CSS是加强网页显示效果地超文本标记语言，可以起到代替与 加强标签属性地作用。CSS地突出特点是:简洁，易用，高效，可 以重复使用，也可以继承使用。4. 1.2 CSS地构成规那么4. 1.3 CSS样式类别CSS是配合HTML网页文件使用地,如果没有HTML,贝1J CSS没有任 何作用。HTML使用CSS样式时主要分以下几种情况：内联样式， 内部样式，外部样式（链接样式,导入样式）。1 .内联样式内联样式,也称为行内样式,就是在HTML地标签中，直接定 义并立即使用CSS样式地应用方式。内联样式对改进网页制 作效率方面几乎没有什么作用，所以很少使用。2 .内部样式教学提示：例如讲解内部样式,也称为内嵌样式,是指将CSS代码内嵌在HTML文 档头中地应用方式。该方式可以简化HTML地文档代码,提高 HTML地制作效率。实现方法是将CSS代码封装在style)与 /style之间，形成一个CSS代码模块,整体嵌入在HTML文档 地文档头中，也就是嵌入在标签head与/head之间。3 .外部样式外部样式是指把CSS代码存储在HTML地文件外部，以.css 文件格式独立存储地应用方式。当HTML需求引用CSS样式时, 需求以链接或者导入地方式将CSS文件中定义地样式全部集 成到HTML地文档头中，就像在一个HTML文件中一样。后续地 引用方法与内部样式地引用方法相同。外部样式又分为外部链接样式与外部导入样式两种类型。(1)外部链接式样外部链接样式是最常用，最实用地一种CSS使用方法,将HTML 网页内容与CSS显示规那么别离,形成一个网页文件+一个CSS 文件(如果必要,可以形成多个CSS文件)地形式。这种分 离非常有利于工程人员之间地分工协作，代码编写人员侧重 于网页功能地实现,美工人员侧重于页面地美化设计,工作效 率大大提高。而且,这种别离使得HTML代码极其精炼,易于项 目后期地升级与维护。(2)外部导入式样外部导入样式与外部链接样式地基本作用是相同地,CSS源文 件地代码规那么也完全相同，只是引用CSS代码文件地技术实 现方式不同：一种是外部链接方式,一种是外部导入方式。但 外部导入样式也有其优点，不仅仅仅仅可以导入到HTML中, 也可以导入到CSS样式中。外部导入样式特别适用于对10访问要求高,网页响应速度快 地场景。4 .样式地优先级内联样式内部样式外部样式例如讲解例如讲解例如讲解例如讲解小结巩固总结CSS网页式样基础知识,CSS式样地作用，CSS地构成规那么与式样 类别。课堂练习思考：课后作业参考资料没有CSS同样能做出漂亮地网页,而且使用css式样制作技术需求额 外增加代码,所以css没有多少实用价值。4 ;互联网与期刊杂志地有关内容。第 13 课(4.1.4-4.1.6)第 14 课(4.2)第4章CSS网页式样制作技术4. 1.4 CSS选择符类型与使用方法4. 1.5 CSS中地度量单位4.1.6 CSS 注释课 时2学时教学方法讲授，例如讲解进 程 第13次课教学目地1 .掌握CSS选择符类型与使用方法；2 .熟悉CSS中地度量单位；3 .掌握CSS注释地方法。重 点CSS选择符类型与使用方法,度量单位难 点CSS选择符类型实施步骤：一，组织教学，课前提问（5）二，教学引导（3'）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第4章CSS网页式样制作技术4. 1.4 CSS选择符类型与使用方法CSS地选择符包含:标签选择符,类选择符,ID选择符,全局选择 符,组合选择符,继承选择符,伪类选择符,字符串匹配地属性选 择符等，其中前三者最为常用。1 .标签选择符标签选择符,就是把HTML地标签作为CSS地选择符。在HTML 中使用该标签时，自动跟踪选择该标签在CSS中定义地显示 样式。每个HTML标签均可用作标签选择符，如 <h4>, <font>,table等都能作为标签选择符。教学提示：例如讲解2. 类选择符类选择符是非常灵活地,是由用户自己定义地。类选择符相当 于自定义显示样式。类选择符只能用于内部式样与外部式样。类选择符地代表:.。3. ID选择符ID选择符地定义与使用方法跟类选择符相似，但其只能在HTML中使用一次，因而更具针对性。ID选择符同样也只能在内部样式与外部样式中使用。ID选择符地代表:#。4. 1. 5 CSS中地度量单位主要有颜色单位,长度单位,时间单位,角度单位与频率单位5 种。其中，颜色单位,长度单位比拟常用。1 .颜色单位颜色有英文单词，16进制,RGB ()三种表达形式。2 .长度单位长度单位有固定数值,百分比两种形式,或从父辈继承数值。4. 1. 6 CSS 注释在CSS代码中用/*注释说明*/对文档进行注释说明。例如讲解小结巩固总结CSS选择符类型与使用方法，度量单位地表达形式,CSS注释地 方法。课堂练习练习：1 .制作一个网页，显示三级文档标题三级文档标题地css式样， 显示要求为6号字,楷体,蓝色,采用内部式样制作。2 .制作一个网页，显示三级文档标题三级文档标题地CSS式样， 显示要求为3号字,黑体,红色,采用外部链接式样制作。课后作业参考资料4章；互联网与期刊杂志地有关内容。第4章CSS式样制作技术4.2用CSS设置文本样式4. 2.1设置文字属性4. 2.2设置段落属性用CSS设置文本综合范例课 时2学时教学方法讲授，例如讲解进 程 第14次课教学目地掌握CSS技术制作文本式样地方法。重 点采用CSS设置文本属性,设置段落属性。难 点设置段落属性实施步骤：一，组织教学，课前提问（5）二，教学引导（3）三,进入本次课讲授内容（77'）四，小结巩固（重申教学目地，重点，难点）（5）讲授内容：第4章CSS网页式样制作技术文本样式包含文本地文字属性（包含字体,字号,粗体字,斜体 字，字间距等）与文本地段落属性等4. 2.1设置文字属性1 .设置字体CSS中，设置字体地属性需求使用文字类标签选择符,类选择 符或ID选择符，与其字体属性font-family（也可以使用 “font 属性为所有文本设置字体属性）。2 .设置字地大小教学提示：例如讲解序号表达 形式值意义与描述1英文 单词仅小 绝对 大小xx-small最小x-small很小small小medium中等large大x-large很大xx-large最大2英文 单词住小 相对 大小smaller把font-size设置为比父元素更小 地尺寸larger把font-size设置为比父元素更大 地尺寸3固定 数” 表示 度量 单位PX像素（如果没有度量单位，系统默 认为px）Pt磅/pt=l/72inin英寸em指地是字符宽度地倍数。 如:0.8em1.2em,2em
