《商务网页设计与制作》-教学教案.docx

《《商务网页设计与制作》-教学教案.docx》由会员分享，可在线阅读，更多相关《《商务网页设计与制作》-教学教案.docx（71页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、商务网页设计与制作教学教案授课教师：授课班级：课程学分：总学时数：周学时数：上课周次：第2课（2.1-2.3）第2章商务网页设计2.1 商务网页视觉设计2.2 商务网页创意设计2.3 3商务网页原型设计课 时2学时教学方法讲:慢、启发式 进程 第2次课教学目的1 .理解商务网页视觉设计2 .理解商务网页创意设计要点3 .掌握商务网页原型设计重 点商务网页视觉设计对象及要点，商务网页风格与形象创意设计，商 务网页原型设计步骤难 点网页网页风格设计，商务网页原型设计方法实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3, ）三、进入本次课讲授内容（77）四、小结巩固（重申教学目的、重点、难点

2、）（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)动画网页视觉设

3、计要点1 .网页布局2 .网页配色3 .导航栏4 . Logo (企业徽标)5 . Banner (广告条)6 .按钮7 .文字、图片及其他2.2商务网页创意设计2.2.1 商务网页创意设计概述2.2.2 商务网页创意设计的思路1 .服务于企业的市场策划2 .服务于目标客户(1)目标客户概念(2)目标客户市场分类3 3)目标客户的消费分析(4)吸引目标客户放大产品信息去抓住用户。用视频代替现场体验。提供免运费服务。放大折扣信息。提供尽可能多的支付方式。钱不是万能的，没有钱是万万不能的！2. 2.3商务网页创意设计1 .商务网页风格创意2 .形象设计(1)设计企业徽标(Logo)(2)设计网页字

4、体(3)设计网页宣传语(4)设置背景音乐2.3商务网页原型设计2. 3.1绘制网页草图1 .徒手绘制草图2 .计算机绘制草图2. 3.2绘制网页效果图2. 3.3制作网页原型方案2. 3.4网页原型方案评审小结巩固商务网站视觉设计的概念、原则、视觉设计对象、商务网页设计要 点；商务网站创意设计、网页原型设计。课堂练习重点概念：商务网站视觉设计、创意设计、网页原型设计课后作业思考：1 .赏析商务网页，通常从哪些方面入手？2 .网页原型设计有什么作用？3 .绘制网页原型草图。参考资料教材2章；“互联网”及期刊杂志的相关内容。第 3 课(3.1-3.2.3)第3章HTML网页制作技术3. 1网页基础

5、知识3.2文本设置方法3.2.1设置网页标题3. 2.2设置文字属性设置文档标题课时2学时教学方法讲授、示例讲解进程第3次课教学目的1 .熟悉网页基础知识2 .掌握设置网页文字标题、文字属性和文档标题的设置方法重点标签的概念及属性，文字属性、文档标题设置方法。难点标签的概念及属性，文字属性设置方法。教学提示:实施步骤：一、组织教学、课前提问(5 )二、教学引导(3)三、进入本次课讲授内容(77)四、小结巩固(重申教学目的、重点、难点)(5 )讲授内容：第3章HTML网页制作技术3. 1网页基础知识网页源文件1 .网页源文件的概念.网页源文件的存储格式2 .网页源文件的运行方式2网页解释代码1

6、.网页解释代码的产生.网页解释代码的查看与保存3.1. 3网页制作语言介绍HTML语言(1) HTML 定义HTML 发展(2) HTML 与 XML、XHTML 的关系HTML与XML的关系(3) HTML与XHTML的关系CSS语言1. 1.4 HTML基础知识网页元素1. HTML标签的作用和特点HTML标签的概念(1) HTML标签的作用HTML标签的特点2. HTML标签的种类基础标签、格式标签、表单标签、框架标签、图像标签、 视音频标签、链接标签、列表标签、表格标签、样式标签、 元信息标签、编程标签、全局标签3. HTML标签属性形象理解：标签是定义类别的，属性是个性化描述的。4.

7、 HTML事件设置标签及标签属性的方法标签标签属性1二属性值标签属性2二属性值标 签属性3二属性值标签内容/标签)标签1标签1属性二属性值标签2标签2属性二属性值)标签实例/标签2/标签17. HTML基本结构举例说明示例演示.标记语言含义.文档头部分html为标记语言声明的标签，告诉浏览器 以下文件为超文本标记语言vhead是html文档头部的标签，网页头 部及头部以上的信息不在网页中显示，主 要作用是描述整个网页，定义或声明CSS 样式等。如网页标题、字符格式、语言、 兼容性、关键字等title网页结构介绍为网页标题的标签。指明“网页结 构介绍”标题显示在浏览器标题栏中v/head是文档头

8、部结束的标签文档体部分 近里是正文内容vbody是网页文档体正文开始的标签。所 有网页需要显不的内容，均应在此标识后 面处理。本例中的正文内容是“这里是正 文内容”。是网页文档体结束的标签是超文本标记语言结束的标签， 也代表了网页结束3.2文本设置方法设置网页标题设置文字属性设置文档标题小结巩固网页源文件和解释代码，网页元素、HTML标签及属性，设置网页标 题、文字属性、文档标签的方法课堂练习重点概念：网页源文件、网页元素、网页元素、HTML标签课后作业思考：简述HTML与XML、HTML的关系。作业：制作一个设置文本的网页，写出完整的HTML代码。具体要求如下： （1）网页标题为“古诗欣赏”

9、；（2）设置1个h2文档标题，靠左 显示，字的颜色为蓝色，标题内容为“登鹳雀楼”；（3）设置一段 文本，内容为诗句：“白日依山尽，黄河入海流。欲穷千里目，更 上一层楼。”每句诗都单独一行，字体为隶书，字的颜色为绿色， 字号为6号。参考资料教材3章；“互联网”及期刊杂志的相关内容。第 4 课(3. 2. 4-3. 2. 6)第3章HTML网页制作技术3. 2.4设置文本段落3. 2.5设置文本列表3. 2.6制作文本网页综合范例课 时2学时 教学方法讲授、示例讲解进程 第4次课教学目的1 .掌握文本段落、文本列表的设置方法2 .掌握制作文本网页范例的基本方法。重 点设置文本段落、设置文本列表难

10、点制作文本网页范例实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3, ）三、进入本次课讲授内容（77）四、小结巩固（重申教学目的、重点、难点）（5）讲授内容：第3章HTML网页制作技术3.2.4 设置文本段落3.2.5 设置文本列表1 .设置无序列表2 .设置有序列表制作文本网页综合范例教学提示：示例教学第3章网页制作技术第1节了解网贞要出知识一、互联网的功能互联网的英文名称为Internet,又称网际互联网，或音译为因特网、英特网。互联网始 于1969年美国国防部高级研究计划署（DARAP）研究的用于支持军事研究的计算机实验 网络（即阿帕阿，ARPAnet）,之后逐渐发展成为全球互连

11、的庞大网络。这些网络与网络 之间以一组通用的协议相连，彩成逻辑上的单一巨大国际网络。（一）主要功能1 .电广邮件服务2 .远程置术服务3 .文件传输服务4 . WW服务（二）其他功能 Gopher 磨务 Archie 服务 电子公告栏 网络新闻股务 HHOIS朦务小结巩固本课程需要理解掌握文本段落、文本列表的设置方法，课堂练习重点概念：无序文本列表、有序文本列表。 练习：制作无序文本列表、有序文本列表网页。课后作业作业：制作一个设置段落的网页，写出完整的HTML代码。具体要求如下： （1）制作一个文本段落，内容为“诗歌是一种语言凝练而形象，结 构自由而跳跃，富有节奏和韵律，饱含联想与想象，高度

12、集中与概 括地反映社会生活、表达思想感情的文学体裁。诗歌的基本特点 为：”。字体为黑体，字号为5号，字的颜色为蓝色，段落中的文 本居中显示；（2）制作一个文本段落，在其中再制作一个文本列表， 文本列表的字体为楷体，字号为5号，字的颜色为紫色，文本列表 的内容如下：A.生活美：对生活高度的提炼、集中、概括；B.思想美：饱含深切的思想感情；C.意境美：用丰富的想象和联想力营造出优美的意境；D.语言美：文字色彩鲜活、语言节奏分明；E.音乐美：韵律和谐。参考资料教材3章；“互联网”及期刊杂志的相关内容。第5课(3.3-3.3.2)第3章HTML醐制彳3.3图像设置方法3. 3.1图像文件的存储管理3.

13、 3.2图像引用课 时2学时教学方法讲授、示例讲解进程第5次课教学目的1 .掌握图像文件的存储管理2 .掌握引用图像的方法重 点图像文件的存储管理、引用图像的方法。难 点图像文件的存储路径及其引用方法教学进度计划章节项目计划课时教学模式教学环境第1章共2节理实一体化理实一体化机房第2章共3节理实一体化理实一体化机房第3章共8节理实一体化理实一体化机房第4章共7节理实一体化理实一体化机房第5章共2节理实一体化理实一体化机房第6章共2节理实一体化理实一体化机房课程考评总计教学提示:实施步骤：一、组织教学、课前提问（5）二、教学引导（3,）三、进入本次课讲授内容（77）四、小结巩固（重申教学目的、重

14、点、难点）（5 ）讲授内容：第3章HTML网页制作技术3.3图像设置方法3. 3.1图像文件的存储管理网站通常有很多图像文件，需要对这些图像文件进行有效的管 理。一是起好文件名称。文件名称应当有助于理解图片内容， 言简意赅。二是规划好图像文件存储目录。子 功 能图片文件目漫 网页文件目录 C5S文杵目京 锹据废文件目设其他文件目设子 功 能图片文件目理网页文杵目现C5S文件目送皱据医文件目充其他文件自读子 功 能图片文件目漫同页文件目澄C5S文件目京锹据底文件目读其他文件目漫功 能图片文件目没 网页文件目漫 CSS文件目录 敞据点文件目录其他文件目理3. 3.2图像引用1 .相对路径引用（1）

15、引用当前目录下的文件（同级目录）（2）引用下级目录下的图像文件（3）引用上级目录下的图像文件（4）引用上两级目录下的一个子目录中的文件2 .绝对路径引用小结巩固课堂练习重点概念：相对路径、绝对路径练习：引用相对路径“photo”下的图像文件1X1. jpg o 引用绝对路径“C:/Class3/”下的“1x2. jpg”课后作业课后作业参考资料教材3章；“互联网”及期刊杂志的相关内容。第 6 课(3. 3. 3-3. 3. 7)第3章HTML网页设计与制作3. 3. 3设里设里3. 3. 5设童设生3. 3.7 制4事图像显示尺寸工图像对齐方式录图像替换文本部网页背景图像与背景颜色E图文网页综

16、合范例课 时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制作图文

17、网页综合范例教学提示：示例讲解小结巩固回顾图像尺寸的赋值形式，设置图像对齐的方法，以及设置图像替 换文本、背景图像和背景颜色的方法。课堂练习练习：制作一个网页，设置图像“lx. jpg”的宽度属性值为60%、高度属 性值为200pxo课后作业作业：制作一个设置图像的网页，写出完整的HTML代码，具体要求如下： Q）设置网页的背景图像，该图像存储在该网页所在目录的下一级 目录“images”中，图像文件名称为“photo, jpg ； （2）网页中 引用一个图像，该图像为该网页所在目录的上两级目录中，这个图 像的名称是computer. jpg，设置其显小尺寸为宽200px、rft 180px。

18、参考资料教材3章；“互联网”及期刊杂志的相关内容。第7课（3.4）第3章HTML网页设计与制作3.4超链接设置方法课 时2学时教学方法讲授、示例讲解进程第7次课教学目的1 .理解超链接的概念及类型；2 .掌握指向网站内部、外部的超链接设置方法；3 .掌握文本、图像超链接设置方法；4 .掌握设定超链接打开窗口的方法；5 .掌握制作简单的图文超链接网页的制作方法。重 点超链接的概念、超链接的设置方法难 点图文超链接网页制作实施步骤：一、组织教学、课前提问（5）二、教学引导（3 ）三、进入本次课讲授内容（77 ）四、小结巩固（重申教学目的、重点、难点）（5）讲授内容：第3章HTML网页制作技术3.

19、4.1超链接的概念及类型1 .超链接的概念什么是超链接？超链接的链接目标、超链接的载体。2 .超链接的类型内部链接、外部链接3 .超链接的标签及属性3. 4.2指向网站内部的超链接1 .指向站点内部文件的链接2 .指向本页面中特定部分的链接3 .指向空链接3. 4.3指向网站外部的超链接1 .指向其他网站的超链接2 .指向电子邮箱的超链接3. 4.4给文本设置超链接3. 4.5给图像设置超链接3. 4.6设置超链接的打开窗口3. 4.7制作图文超链接网页综合范例教学提示：示例讲解小结巩固回顾超链接的概念、超链接的设置方法、超链接的打开窗口的设置方法。课堂练习练习：1 .制作一个网页，设置图像“

20、lx.jpg”的超链接指向当前路径下的 文件“study, apk”;2 .制作一个网页，设置设置文本“淘宝网”的超链接指向 “https:www. taobao. com”，并在一个新窗口打开超链接。课后作业作业：制作一个设置超链接的网页，写出完整的HTML代码，具体要求如下： （1）设置一行文本，内容为“搜狐网站”，并给该文本设置指向搜 狐网的超链接；（2）设置一行文本，内容为“发邮件”，并给该文 本设置指向“test2018”的超链接；（3）引用本级路径下 的图像（名称为imag0009.png）,并给该图像设置指向同级路径的 computer. htmr,文件；（4）设置全网在新窗口中

21、打开超链接。参考资料教材3章；“互联网”及期刊杂志的相关内容。第8课(3.5-3.5.4)第3章HTML网页设计与制作3.5表格市表43. 5. 2制43. 5. 3单3. 5. 4制干U作方法旨的代码结构E表格的方法E格或表头的合并方法E单元格内容课时2学时教学方法讲授、示例讲解进程第8次课教学目的1 .理解网页表格的概念及代码结构；2 .掌握表格的制作方法；3 .掌握单元格或表头的合并方法；4 .掌握制作单元格内容的方法。重点表格的概念及代码结构、表格的制作方法、单元格和表头合并的设 置方法、制作单元格内容。难点网页表格的概念、单元格合并实施步骤：一、组织教学、课前提问（5）二、教学引导（

22、3,）三、进入本次课讲授内容（77）四、小结巩固（重申教学目的、重点、难点）（5 ）讲授内容：第3章HTML网页制作技术3.5表格制作方法表格的概念、表格的作用1. 5.1表格的代码结构表行表头或单元格3. 5.2制作表格的方法（1）先创建表；（2）创建行，创建本行内的单元格或表头；（3）重复第二步，直至表格内容创建结束。4. 5.3单元格与表头的合并方法1 .多列单元格合并2 .多行单元格合并3 .多行多列单元格同时合并3. 5.4制作单元格内容1 .引用文本2 .引用图像教学提示：示例讲解小结巩固回顾网页表格的概念、表格的代码结构，表格制作方法，单兀格合 并，以及单元格内容制作方法。课堂练

23、习练习：1 .制作一个含有5行3列表格的网页；2 .制作一个1行2列的表格，表格式样如下：奔驰SUN：=：Umi课后作业作业：参考资料教材3章；“互联网”及期刊杂志的相关内容。第 9 课(3. 5. 5-3. 5. 6)第3章HTML晒设计与制作翟鬣普鹫布局网市约公茄的3. 5. 6运用表格技术布局网贝综合氾例课 时2学时 教学方法讲授、示例讲解进程 第9次课教学目的1 .理解表格外观设置方法；2 .掌握利用表格技术布局网页的制作方法。重 点表格外观的设置方法，包括行、歹人单元格、表格线等的设置。难 点统一设置行、列的有关属性。实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3,）三、进

24、入本次课讲授内容（77 ）四、小结巩固（重申教学目的、重点、难点）（5）讲授内容：第3章HTML网页制作技术3. 5.5设置表格外观1 .设置表的外观（1）设置表的标题（2）设置表的宽度（3）设置表的高度（4）设置表的水平对齐方式教学提示：示例讲解(5)设置表的背景颜色(6)设置表的背景图像2.设置表头与单元格(1)设置表头水平对齐(2)设置表头垂直对齐(3)设置单元格水平对齐(4)设置单元格垂直对齐方式(5)设置表头和单元格的宽度(6)设置表头和单元格的高度(7)设置背景图像(8)设置背景颜色3.统一设置列的宽度与行的高度(1)统一设置列的宽度(2)统一设置行的高度4,统一设置行的对齐方式水

25、平对齐、垂直对齐5.设置表格边框3. 5.6运用表格技术布局网页综合范例小结巩固回顾网页表格的外观设置，包括表的标题、宽度和高度、水平对齐 方式，以及表的背景图像和背景颜色的设置；设置表格与单元格； 以及统一设置列宽、行高的方法，设置行的对齐方式；设置表格边 框的方法，隐形边框的设置。课堂练习课后作业作业：制作一个设置表格的网页，写出完整的HTML代码，具体要求如下：(1) 制作一个表格，设置表格水平居中对齐，表格内容及其水平对齐、垂直对齐的效 果如下。采购清单产品名称数量单价笔记本电脑55600.0028000.00台式机1()4500.0045(X)0.0()总计73000.00参考资料教

26、材3章；“互联网”及期刊杂志的相关内容。第10课（3.6-3.7）第3章UTU网而创片制作工6多媒体引用方法HTML网贝设计与制作3. 7滚动字幕制作方法课 时2学时教学方法讲授、示例讲解进 程 第10次课教学目的1 .掌握多媒体引用的方法；2 .掌握滚动字幕制作的方法。重 点多媒体引用的方法、滚动字幕的制作方法难 点滚动字幕的属性设置实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3）三、进入本次课讲授内容（77 ）四、小结巩固（重中教学目的、重点、难点）（5）讲授内容：第3章HTML网页制作技术3.6多媒体引用方法3. 6.1设置视频1 .设置视频手动播放2 .设置视频自动播放3.

27、6.2设置音频1 .设置音频手动播放2 .设置音频自动播放3 .隐藏音频4 .设置网页背景音乐3. 7滚动字幕制作方法3. 7.1制作文字滚动字幕3. 7.2制作图像滚动字幕3. 7.3制作滚动字幕综合范例教学提示：示例讲解小结巩固总结多媒体引用的方法，滚动字幕的制作方法。课堂练习练习：制作一个网页，引用一个视频文件，并制作背景音乐。素材网上自 选。课后作业作业：制作一个设置滚动字幕的网页，写出完整的HTML代码，具体要求如 下：（1）设置一个文字滚动字幕，字幕内容为“市场调查问卷”， 向右滚动，滚动方式为“slide，无限循环滚动；（2）设置一个 图像滚动字幕，图像名称为“scdc.jpg，

28、存放在该网页路径下， 向上滚动，滚动方式为“alternate”，滚动5次。参考资料教材3章；“互联网”及期刊杂志的相关内容。第 11 课（3.8）第3章HTML网页设计与制作3. 8网页框架制作方法课 时2学时 教学方法讲授、示例讲解进程 第11次课教学目的1 .掌握网页框架的制作方法；2 .掌握网页框架重定向的实现方法。重 点网页框架的概念、框架制作的方法，以及框架重定向的实现方法。难 点框架重定向的实现方法、制作嵌套框架。实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3 ）三、进入本次课讲授内容（77 ）四、小结巩固（重申教学目的、重点、难点）（5）讲授内容：第3章HTML网页制

29、作技术3.8网页框架制作方法3. 8.1上下型框架制作3. 8. 2左右型框架制作3. 8.3框架重定向3. 8. 4制作嵌套框架综合范例教学提示：示例讲解小结巩固理解网页框架的概念，掌握框架的制作方法。第 1 课（L 1-1.2）第1章商务网站项目策划与建设1.1 理解传统商务与电子商务1.2 商务网站项目的策划与实施课 时2学时教学方法讲:慢、启发式 进程 第1次课教学目的1 .理解电子商务面临的安全问题2 .理解商务网站项目的策划与实施重 点电子商务与传统商务的关系，商务网站项目策划难 点商务网站项目设计与开发实施步骤：一、熟悉学生情况（3 ）二、课程简介、前期知识储备要求（5）三、进入

30、本次课讲授内容（包括课堂练习）（77 ）四、小结巩固（重申教学目的、重点、难点）（5）讲授内容：第1章商务网站项目策划与建设1.1 理解传统商务与电子商务1.1.1 传统商务介绍传统商务的概念及应用的场景。1.1.2 电子商务介绍电子商务的概念及应用场景。1.1.3 传统商务与电子商务的关系介绍两者的区别和联系。1.1.4 电子商务的优势和不足1 .电子商务的优势（1）交易虚拟化（2）交易成本低（3）交易效率高（4）交易透明化2 .电子商务的不足（1）缺乏安全性（2）没有真实的触感电子商务的载体电子商务的主要载体就是商务网站。商务网站应当建在班里？如何实现教学提示：【课程介绍、课 程地位、总体

31、概 论】【以日常商务 活动为例进行 对比说明】练习：制作一个上、下左、下右型的网页框架，三个框架分别填充不同的 背景颜色或底纹，素材自行确定。网页整体效果如下：页眉区课堂练习导航栏区主功能区课后作业作业：制作一个框架结构的网页，写出完整的HTML代码，具体要求如下： (1)制作一个左右型的框架结构，左框架名为leftframe”,绑定 的网页源文件为leftpage.右框架名为rightframe”,绑定的网页源文件为rightpage. html“； (2)制作 leftpage. html,设 置一个文本超链接，文本内容为产品演示，超链接指向网页源文 件“demo.html”并在right

32、frame 中打开。参考资料教材3章；“互联网”及期刊杂志的相关内容。第 12 课(4.1-4.1.3)CSS网页式样制作技术4.1 CSS基础知识4.1.1 CSS的作用4. 1.2 CSS的构成规则4. 1.3 CSS样式类别课 时2学时 教学方法讲授、示例讲解|进 程|第12次课教学目的1 .熟悉CSS网贝式样基础知识，CSS式样的作用;2 .熟悉CSS的构成规则和式样类别。重 点CSS的构成规则、CSS式样类别。难 点CSS式样类别。实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3 ）三、进入本次课讲授内容（77 ）四、小结巩固（重申教学目的、重点、难点）（5）讲授内容：第4章

33、CSS网页式样制作技术CSS就是显示样式，专门用来设置各类网页元素的显示效果。 我们把元素的显示效果事先采用CSS技术封装成一个样式，在 主HTML文档中调用这个样式，就能得到这个事先设定的显示效 果。4.1 CSS基础知识CSS是增强网页显示效果的超文本标记语言，能够起到代替和 增强标签属性的作用。css的突出特点是：简洁、易用、高效， 可以重复使用，也可以继承使用。1 .1.1 CSS的作用CSS是增强网页显示效果的超文本标记语言，能够起到代替和 增强标签属性的作用。CSS的突出特点是：简洁、易用、高效， 可以重复使用，也可以继承使用。4 . 1. 2 CSS的构成规则教学提示：示例讲解f

34、bnl-侑mily:宋体”；cok)r:#OOOOCC: Rml-sizc: 16px; 画选杼符声明（用花括号“ （ ”括起来.声明的内容按照“屈性：屈性值: 属性计”的排列港式书写 属性切性值之间用“：”分 隔，两个屈性之间用分隔,通常各个属性之间没有前一后的啾 序关系.）CSS样式类别CSS是配合HTML网页文件使用的，如果没有HTML,则CSS没有 任何作用。HTML使用CSS样式时主要分以下几种情况：内联样 式、内部样式、外部样式（链接样式、导入样式）。1 .内联样式内联样式，也称为“行内样式”，就是在HTML的标签中，直 接定义并立即使用CSS样式的应用方式。内联样式对改进网 页制

35、作效率方面儿乎没有什么作用，所以很少使用。2 .内部样式内部样式，也称为“内嵌样式”，是指将CSS代码内嵌在HTML 文档头中的应用方式。该方式能够简化HTML的文档代码，提 高HTML的制作效率。实现方法是将CSS代码封装在style 和/style之间，形成一个CSS代码模块，整体嵌入在HTML 文档的文档头中，也就是嵌入在标签head与/head之间。3 .外部样式外部样式是指把CSS代码存储在HTML的文件外部，以“.css 文件格式独立存储的应用方式。当HTML需要引用CSS样式时; 需要以链接或者导入的方式将CSS文件中定义的样式全部集 成到HTML的文档头中，就像在一个HTML文

36、件中一样。后续 的引用方法与内部样式的引用方法相同。外部样式又分为外部链接样式和外部导入样式两种类型。（1）外部链接式样外部链接样式是最常用、最实用的一种CSS使用方法，将HTML 网页内容和CSS显示规则分离，形成“一个网页文件+一个 CSS文件（如果必要，可以形成多个CSS文件）”的形式。 这种分离非常有利于项目人员之间的分工协作，代码编写人 员侧重于网页功能的实现，美工人员侧重于页面的美化设计， 工作效率大大提高。而且这种分离使得HTML代码极其精炼, 易于项目后期的升级与维护。（2）外部导入式样示例讲解示例讲解示例讲解示例讲解外部导入样式与外部链接样式的基本作用是相同的，CSS源 文件

37、的代码规则也完全相同，只是引用CSS代码文件的技术 实现方式不同：一种是外部链接方式，一种是外部导入方式。但外部导入样式也有其优点，不仅可以导入到HTML中，也可 以导入到CSS样式中。外部导入样式特别适用于对10访问要求高、网页响应速度快 的场景。4.样式的优先级内联样式内部样式外部样式小结巩固总结CSS网页式样基础知识，CSS式样的作用，CSS的构成规则和式 样类别。课堂练习课后作业思考：没有css同样能做出漂亮的网页，而且使用CSS式样制作技术需要 额外增加代码，所以css没有多少实用价值。参考资料教材4章；“互联网”及期刊杂志的相关内容。第13课(4.1.4-4.1.6)第4章CSS网

38、贝式样制作技术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.3 CSS选择符类型及使用方法CSS的选择符包括：标签选择符、类选择符、ID选择符、全局 选择

39、符、组合选择符、继承选择符、伪类选择符、字符串匹配 的属性选择符等，其中前三者最为常用。1 .标签选择符标签选择符，就是把HTML的标签作为CSS的选择符。在HTML 中使用该标签时，自动跟踪选择该标签在CSS中定义的显示 样式。每个HTML标签均可用作标签选择符，如h4、font、 table等都能作为标签选择符。2 .类选择符类选择符是非常灵活的，是由用户自己定义的。类选择符相 当于自定义显示样式。类选择符只能用于内部式样和外部式样。类选择符的标志：3 . ID选择符ID选择符的定义和使用方法跟类选择符相似，但其只能在 HTML中使用一次，因而更具针对性。ID选择符同样也只能在内部样式和外

40、部样式中使用。ID选择符的标志：。4.1.4 CSS中的度量单位主要有颜色单位、长度单位、时间单位、角度单位和频率单位 5种。其中，颜色单位、长度单位比较常用。1 .颜色单位颜色有英文单词、16进制、RGB （）三种表达形式。2 .长度单位长度单位有固定数值、百分比两种形式，或从父辈继承数值。3 .1.6 CSS 注释在CSS代码中用/*注释说明*/”对文档进行注释说明。教学提示:示例讲解示例讲解小结巩固总结CSS选择符类型及使用方法，度量单位的表达形式，CSS注释 的方法。练习：1.制作一个网页，显示三级文档标题“三级文档标题的css式样”，课堂练习显示要求为6号字、楷体、蓝色，米用内部式样

41、制作。2.制作一个网页，显示三级文档标题“三级文档标题的CSS式样”， 显示要求为3号字、黑体、红色，采用外部链接式样制作。课后作业参考资料教材4章；“互联网”及期刊杂志的相关内容。第 14 课(4.2)第4章CSS式样制作技术4.2用CSS设置文本样式4. 2.1设置文字属性4. 2.2设置段落属性4. 2.3用CSS设置文本综合范例课 时2学时教学方法讲授、示例讲解进 程 第14次课教学目的掌握CSS技术制作文本式样的方法。重 点采用CSS设置文本属性、设置段落属性。难 点设置段落属性实施步骤：一、组织教学、课前提问（5 ）二、教学引导（3 ）三、进入本次课讲授内容（77 ）四、小结巩固（

42、重申教学目的、重点、难点）（5）讲授内容：第4章CSS网页式样制作技术文本样式包括文本的文字属性（包括字体、字号、粗体字、斜 体字、字间距等）和文本的段落属性等4. 2.1设置文字属性1 .设置字体CSS中，设置字体的属性需要使用文字类标签选择符、类选 择符或ID选择符，及其字体属性font-family（也可以使 用 font 属性为所有文本设置字体属性）。教学提示：示例讲解2 .设置字的大小达式 表形值含义及描述1文词示对小 英单表绝大xx-small最小x-small很小small小medium中等large大x-large很大xx-Iarge最大2文词示对小 英单表相大smaller把font-size设置为比父元素更小 的尺寸larger把font-size设置为比父元素更大 的尺寸3定值示量位 固数表度单PX像素（如果没有度量单位，系统 默认为px）Pt磅,lpt=l/72inin英寸em指的是字符宽度的倍数。如： 0.8em, 1.2em, 2em 等4百分 比%把font-size设置为基于父元素 的一个百分比5继承inherit从父元素继承的属性值3