《WEB前端开发案例教程》教学教案(上)

1、WEB前端开发案例教程教学教案（上）课程名称任务、项目、课题名称教学内容教学目标教学重点教学难点网页设计基础网页的相关知识网站设计流程掌握网页的相关知识了解网站设计流程网页相关概念网站设计流程WEB前端开发（1）课次课时12学时教学活动及主要环节导入新课：（2分钟）1有无制作过网页？2以前学过的网页课程？课程介绍：(10分钟)本学期主要学习如下内容：1）HTML52）DreamweaverCC2018网页制作编辑软件的使用3）CSS的使用4)DIV+CSS网页布局考试方法：平时成绩（40）+期末考试（60）平时40分：到课率10分+提交实验作业10分+上课表现10分+作品10分新授：一、网页展

2、示与认识（展示百度、淘宝官网，历届学生的优秀作品）10分钟）（动手操作，任意打开一个网页，查看网页源代码学生一起操作，实现教学做一体化）在学习创建网站、制作网页之前，我们先浏览几个网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。二、相关概念（15分钟）1、IP地址和域名2、URL：统一资源定位符3、HTTP：超文本传输协议，提供一种发布和接收HTML页面的方法。4、网站、网页与主页：主页通常用index.htm或index.html表示。15、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。（学生操作）

3、6.WEB标准：包括结构标准（HTML）、表现标准(CSS)和行为标准(JAVASCRIPT).三、HTML5概述（13分钟）HTML5主要优势：（1）良好的移植性（2）更直观的结构。（3）内容和样式分离。（4）新的表单元素。（5）更方便地嵌入音频和视频。（6）矢量图绘制。（演示canvas画布）四、常用的浏览器（5分钟）三大浏览器：IE、火狐FireFox、谷歌Chrome（推荐使用）。总结：（5分钟）本节介绍与网页有关的一些基本常识和基本概念，介绍HTML的基本工作原理，以及常用的网页制作工具、网页设计流程等。作业：理解IP地址、域名、URL、HTTP、HTML的概念。预习：DW工具的使用

4、课程名称任务、项目、课题名称WEB前端开发（1）Dreamweaver工具的使用课次课时22学时教学内容教学目标教学重点教学难点Dreamweaver工具的使用新建HTML5页面熟悉Dreamweaver操作界面掌握新建HTML5页面的方法掌握新建HTML5页面的方法Dreamweaver工具的使用教学活动及主要环节2复习提问（5分钟）URL/HTTP/HTML的含义导入新课：（3分钟）制作网页的工具很多（Hbuilder、VScode等课下可自行了解，大同小异），Dreamweaver就是其中一种，它提供的可视化设计环境可非常方便地创建和编辑网页.因此本节介绍该软件的基本使用。）（超星平台利

5、用“随机选人”功能，学生回答问题。新授：一、DreamweaverCC2018界面介绍（2分钟）1、初始化设置（10分钟）（学生跟随教师一起操作）工作区布局设置字体选择菜单栏中的【编辑】【首选项】选项，分类列表中选择“字体”，右侧设置“代码视图”合适的字号大小。设置界面分类列表中选择“界面”，更改可应用程序主题和代码主题更改主浏览器和次浏览器分类列表中选择“实时预览”，主浏览器快捷键F122、界面介绍（15分钟）（教师演示知识点涉及的具体操作）菜单栏：文件、编辑、站点、窗口工具栏：“格式化源代码”按钮、“应用注释”按钮、“删除注释”按钮3浮动面板：“文件”面板二、新建HTML5页面（15分钟）

6、（学生跟随教师一起操作）“文件”“新建”，打开“新建文档”对话框，单击“创建”按钮。（演示后让学生总结，确保每一个同学都会新建网页文件）在标记中写入一个段落标记，输入内容“这是我的第一个网页文件”。F12再浏览器预览。（注：因电脑设置，部分电脑按Fn+F12预览）小结：（5分钟）熟悉DW界面构成、DW的运行环境，会创建最简单的网页文件并运行。作业：实训一超星作业课程名称任务、项目、课题名称WEB前端开发（1）HTML标记及其属性课次课时32学时教学内容教学目标教学重点教学难点HTML文档的基本结构HTML标记HTML标记属性了解HTML文档的基本结构掌握HTML标记的基本语法格式掌握HTML标

7、记属性规则HTML标记的基本语法格式HTML标记属性规则教学活动及主要环节4复习提问（5分钟）使用DW创建网页文件的步骤？（一名学生回答，其余同学用电脑操作）导入新课：（3分钟）第一节课我们了解了如何查看网页源代码，HTML标记语言构成了网页的具体内容，因此了解和掌握HTML语言也是非常必要的，因此本章学习HTML语言的使用。新授：三、HTML文档的基本结构（20分钟）一个WEB页对应于一个HTML文件，通常以.html或.htm为扩展名。HTML文档的基本结构如下：（学生观察自己新建好的网页文件基本结构）这里是网页的标题这是页面上显示的内容，网页的主体部分（教师讲解每一部分标记的内容）1:用

8、来标识HTML文档。2:头部标记，提供一些与WEB页有关的特定信息。例如网页的标题、定义样式表、插入脚本等。3:用于定义网页的标题。4:主体标记，包括WEB页的具体内容，包括文字、图形、超链接以及其他各种HTML对象。四、HTML的基本语法1标记（15分钟）标记的格式：受标记影响的内容标记的规则：标记以结束。标记一般由开始标记和结束标记组成。结束标记前有/符号。少数标记只有开始标记，无结束标记。如.5标记不区分大小写，但一般用小写。可以同时使用多个标记共同作用，各标记之间的顺序任意。（超星选人功能，学生总结回答）2标记的属性（15分钟）属性的规则：所有属性必须在开始标记里，不同属性间用空格隔开

9、。每个属性都有默认值，值放在相应的属性后，用等号分隔；用双引号括起来，双引号可省略。属性之间顺序任意。小结：（5分钟）（教师提问）HTML文档的基本结构HTML标记HTML标记属性作业：实训二超星作业课程名称任务、项目、课题名称WEB前端开发（1）HTML文本标记课次课时42学时教学内容教学目标教学重点教学难点HTML文本标记理解HTML文本标记的作用、掌握其使用HTML文本标记HTML文本标记教学活动及主要环节复习提问：（5分钟）HTML文档的基本页面结构？（超星平台利用“随机选人”功能，学生回答问题）导入新课：（3分钟）6网页中出现最多的元素的文本元素和图像元素，这些内容如何显示在浏览器中

10、的呢？这节课我们来介绍一下常用的HTML文本标记。新授：（教师通过古诗案例贯穿讲解段落标记、换行标记、标题标记、水平线标记、字体样式标记、特殊字符标记，实现教学做一体化）五、段落标记align属性：用于设置段落的对齐方式。六、换行标记单标记格式：文本注意：需要产生多个空行，可以连续使用多个标记实现。七、标题标记标识文档中的标题和副标题，其中n是1到6的数字；表示1到6级标题。align属性：设置对齐方式,left(默认)、center、right。说明：浏览器在解释标题标记符时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。四、水平线标记单标记添加水平线可以使文字隔开，起

11、到修饰页面的作用。五、字体样式标记符粗体：,斜体:,删除线：,下划线：,六、特殊字符如果用户需要在网页中显示某些特殊字符，如：>；：<；&:&；空格： ；注意：转义字符输入时，必须区分大小写。7小结：标题标记段落标记水平线标记换行标记字体样式标记特殊字符（超星平台利用“随机选人”功能，学生回答问题）作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）HTML列表标记课次课时52学时教学内容教学目标教学重点教学难点HTML列表标记：无序列表、有序列表、自定义列表、列表的嵌套理解HTML列表标记的作用、掌握其使用HTML列表标记：无序列表、有序列表、自定义列表列表的

12、嵌套教学活动及主要环节复习提问：（3分钟）HTML标题标记有哪些？（超星平台利用“随机选人”功能，学生回答问题）导入新课：（2分钟）列表是一种最常用的组织信息的方式，HTML提供了用于实现列表的标记。列表样式有无序列表、有序列表、自定义列表，这节课我们来学习一下HTML列表标记。新授：（教师通过案例讲解有序列表、无序列表、列表的嵌套、自定义列表，实现教学做一体化）八、有序列表（10分钟）常用格式：列表项1列表项2列表项38说明：type属性用来设置数字序列样式。属性值可以为：1(默认值),A,a,I,i。Start属性设置序列的起始值，可以是任意整数。（10九、无序列表(unorderedli

13、st)分钟）常用格式：列表项1列表项2列表项3说明：type属性用来设置项目符号的类型。属性值可以为：disc(默认值),circle,square,分别表示实心圆点、空心圆点和方块。（学生独立思考，做完找老师签字）十、列表嵌套（10分钟）有序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。参考课本25页。课堂练习：列表嵌套的案例（10分钟）十一、自定义列表（10分钟）自定义列表项前没有任何项目符号。语法如下：标题1数据1数据2标题2数据1数据2小结：（3分钟）有序列表无序列表9列表的嵌套自定义列表（超星平台利用“随机选人”功能，学生回答问题）作业：超星作业课程名称任务、项目、课题名称WE

14、B前端开发（1）HTML超链接标记课次课时62学时教学内容教学目标教学重点教学难点HTML超链接标记HTML超链接的类型绝对URL与相对URL理解HTML超链接标记的作用、掌握其使用HTML超链接标记HTML超链接的类型绝对URL与相对URL教学活动及主要环节复习提问：HTML列表标记有几种？导入新课：超链接是所有网站都具有的重要特征，通过超链接我们可以实现网页之间的链接，接下来我们一起来学习超链接的相关知识。（将简单学院官网首页设置超链接效果）新授：一、创建超链接超链接(hyperlink):是实现不同页面之间或者不同网站之间信息浏览的主要手段。包括页面链接、锚点链接、电子邮件链接。创建超链

15、接需要使用标记符。它的基本属性是href，用于指定链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。title属性设置鼠标指向超链接时显示的文字。在文字和图像上都可以创建超链接。target属性用于设置打开新的链接时是否在新的窗口打开。二什么是URL（教师演示，学生动手操作，实现教学做一体化）URL(UniversalResourceLocator,统一资源定位器)是表示WEB上资源的一种方法。10例如，在指定Internet资源时，可以使用绝对路径，也可以使用相对路径。即绝对URL和相对URL.绝对URL：是指Internet上资源的完整地址，包括协议名、计算机域名和文档名

16、。/haoserver/wn.htm相对URL：是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。使用相对URL时用./表示上一级目录。注意：用户在编写网页时，通常使用的都是相对URL.三创建页面链接页面链接是最常见的超链接，单击页面链接时可跳转到相应的网页。如果超连接的目标网页位于同一站点，则可以使用相对URL;如果超链接的目标网页位于其他位置，则需要指定绝对URL.格式：超链接的文字超链接示例这是一个超链接链接到百度说明：超链接默认有下划线，并且显示为蓝色。使用超链接时，一定要确保href属性所指定的页面在指定位置是存在的。若链接的网页文件不在当前目录

17、中，则需指定路径。链接到上一级目录中的文件11这是一个超链接链接到下一级目录web中的文件这是一个超链接链接到同一级不同目录web中的文件这是一个超链接四创建电子邮件链接使用如下格式可链接到指定的电子邮件。当用户指向电子邮件的超链接时，会默认启动OutlookExpress.小结：创建超链接URL:绝对URL、相对URL创建页面超链接创建电子邮件链接作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）HTML图像标记课次课时72学时教学内容教学目标教学重点教学难点复习演示：1HTML图像标记常用的图像格式为图像创建超链接理解HTML图像标记的作用、掌握其使用HTML图像标记常用的图像

18、格式为图像创建超链接为图像创建超链接教学活动及主要环节为页面与页面之间创建超链接？导入新课：图像是所有网站都具有的重要特征，如何在网页中插入图像呢？新授：一Web页图像格式常用的有GIF.JPEG.PNG三种标准的位图格式。12GIF格式GIF格式可以高度压缩图像，但它只能包含最多256种颜色，不适于表现真彩色照片或具有渐变色的图片。GIF格式可以支持动画效果。JPEG格式它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。PNG格式PortableNetworksGraphics,可移植的网络图形格式，是近年来新出现的一种图像格式。.二插入图像使用标记img在网页中插入

19、图像。HTML代码如下：无标题文档在西藏自助旅行，为高原神奇的风景如痴如醉的同时。说明属性的含义(学生自行查阅HTML5文档，超星选人进行知识分享)三建立图像超链接：使用标记也可创建图像的超链接。13小结：HTML图像标记常用的图像格式为图像创建超链接课程名称任务、项目、课题名称WEB前端开发（1）HTML5结构元素课次课时82学时教学内容教学目标教学重点教学难点掌握HTML5结构元素理解HTML5结构元素的使用HTML5结构元素HTML5结构元素的应用教学活动及主要环节导入新课：HTML5中新增了几个结构元素，这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观

20、和明确、更加具有语义化和更具有现代风格。新授：一、header元素header元素为页面或页面中某一个区块的页眉，通常是一些引导和导航信息。它可以包含页面标题、logo图片，搜索表单等。语法格式：标题二、nav元素nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。通常nav元素用于以下几种场合。传统的导航条。侧边栏导航。内页导航。翻页导航。三、section元素section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于有文章的章节、页眉、页脚或文档中的其他部分。14四、article元素artic

21、le元素用来定义独立的内容，该元素定义的内容可独立于其它的内容使用。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评或独立的插件等。五、aside元素aside元素通常用来表示当前页面的附属信息部分，它可以包含我们当前页面或者主题内容相关的一些引用，如侧边栏、广告、目录、索引、Web应用、链接、当前页内容简介等，有别与我们主要内容。六、footer元素footer元素用于定义页面或区域的页脚，可以为网站的版权信息、作者、日期及联系信息。一个页面中可以包含多个footer元素，也可以在section元素或article元素中使用footer元素。小结：header元素nav元素secti

22、on元素article元素aside元素footer元素课程名称任务、项目、课题名称WEB前端开发（1）HTML5分组元素、HTML5页面交互元素、HTML5语义元素课次课时92学时教学内容教学目标教学重点教学难点掌握HTML5分组元素、HTML5页面交互元素、HTML5语义元素理解HTML5分组元素、HTML5页面交互元素、HTML5语义元素的使用HTML5分组元素、HTML5页面交互元素、HTML5语义元素HTML5分组元素、HTML5页面交互元素、HTML5语义元素的应用教学活动及主要环节导入新课：分组元素用于对页面元素进行分组。我们熟悉的div、p、ol、ul都是分组元素标记，本节来看

23、3个新加的分组元素，分别是figure元素、figcaption元素和hgroup元素。新授：（操作课本案例，在操作的过程中，更好理解分组元素的意义）七、figure元素和figcaption元素15figure元素用来定义一块独立内容，该内容如果被删除也不会对周围的内容有影响。它可以用来表示图片、图表、音频、视频，代码等。figcaption元素用于为figure元素组添加标题。八、hgroup元素hgroup元素用于对网页或区段（section）的标题进行组合。它常与h1h6元素组合使用。通常，将hgroup元素放在header元素中。九、details和summary元素details元

24、素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。十、progress元素progress元素定义运行中的任务进度（进程）。如Windows系统中软件的安装、文件的复制等场景的进度。progress元素的常用属性值有两个，具体如下。（1）value：已经完成的工作量。（2）max：总共有多少工作量。十一、meter元素meter元素用于表示指定范围内的数值。如磁盘使用情况、查询结果、或投票比例等，都可以使用meter元素。属性highlowmaxminoptimumvalue说明定义度量的

25、值位于哪个点被界定为高的值定义度量的值位于哪个点被界定为低的值定义最大值，默认值是1定义最小值，默认值是0定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好定义度量的值十二、time元素time元素用来定义公历的时间（24小时制）或日期。time元素不会在任何浏览器中呈现任何特殊效果。但能够以机器可读的方式对日期和时间进行编码。十三、mark元素16mark元素的主要功能是高亮显示文本或字符，以引起用户注意。其用法与strong类似，但是mark元素更随意灵活。十四、cite元素cite元素用来表示它所包含的文本对某个参考

26、文献的引用，比如书籍或者杂志的标题。被引用的文本将以斜体显示，以和其他见容区分。小结：figure元素和figcaption元素hgroup元素details和summary元素progress元素meter元素课程名称任务、项目、课题名称WEB前端开发（1）引入CSS的方法课次课时102学时教学内容教学目标教学重点教学难点CSS样式表的概念样式表的创建及引用掌握CSS样式表的概念掌握样式表的创建及使用方法样式表的创建及使用方法样式表的创建及使用方法教学活动及主要环节复习演示：1.为页面与页面之间创建超链接？导入新课：网页如何变得美观？新授：一CSS概述：CSS（CascadingStyleS

27、heets）层叠样式表。是一种格式化网页的标准格式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。HTML+CSS:html没有装修的房子css装修房子的过程（美化）精美的页面CSS样式表是由一系列样式选择器和CSS属性组成的，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性及精确定位网页元素等属性，从而大大增进了网页的格式化能力。二HTML中引入CSS的方法（例子演示）17（1）行内式行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。例如：这是一行文本(2)嵌入式：即内部样式表嵌入式将对页面中各种元素的设置

28、写在之间。例如：h1color:white;background-color:blue(3)链接式:外部样式表最常用的方式例：小结：CSS概述行内式内嵌式外链式作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）CSS选择器（1）课次课时112学时教学内容教学目标教学重点教学难点CSS选择器：标记选择器、类选择器、ID选择器掌握CSS选择器：标记选择器、类选择器、ID选择器CSS选择器：标记选择器、类选择器、ID选择器CSS选择器的使用方法教学活动及主要环节复习演示：如何通过外链式进行样式设置？（操作演示）导入新课：18什么是CSS选择器呢？新授：1.标记选择器（body,h1,h2

29、,h6,p,ul,ol,dl,table,td,tr.）h1属性：值;属性：值;属性：值;属性：值;h2属性：值;属性：值;属性：值;属性：值;p属性：值;属性：值;属性：值;属性：值;2.类别选择器（类选择器）.class属性：值;属性：值;Class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音）CSS类别选择器.title1background-color:#0CF;color:#fff;.title2background-color:#9C0;color:#f00;这是第一段的内容。19这是第二段的内容。3.ID选择器(代表唯一)#onebackground-color:#0

30、CF;color:#fff;width:200px;height:200px;#twobackground-color:#9C0;color:#f00;width:200px;height:200px;这是第一个块的内容。这是第二个块的内容。注意：CSS样式的优先规则：行内样式ID样式类别样式标记样式小结：标记选择器类选择器ID选择器作业：课下巩固复习课程名称任务、项目、课题名称WEB前端开发（1）CSS选择器（2）课次课时122学时教学内容教学目标教学重点CSS选择器：交集选择器、并集择器、后代选择器、通配符选择器掌握CSS选择器：交集选择器、并集择器、后代选择器、通配符选择器CSS选择器：

31、交集选择器、并集择器、后代选择器、通配符选择器20教学难点CSS选择器的使用方法教学活动及主要环节复习演示：类选择器如何进行样式的书写？（操作演示）导入新课：上节课学习了基本的CSS选择器，除了这些选择器还有哪些选择器呢？新授：（操作课本案例，在操作的过程中，更好理解选择器的意义）一、交集选择器交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器，表示二者各自元素范围的交集。两个选择器之间不能有空格。其语法格式如下：标记名称.类名称属性：属性值；属性：属性值；.二、并集选择器如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，并集选择器由各

32、个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等），都可以作为并集选择器的一部分。h1,h2,pfont-size:24px;color:blue;三、后代选择器后代选择器也叫包含选择器，用于对容器对象中的子对象进行控制，使其他容器对象中的同名子对象不受影响。后代选择器书写时将容器对象写在前面，子对象写在后面，中间用空格分隔。若容器对象有多层时，则分层依次书写。pstrongfont-size:24px;color:red;四、通配符选择器通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素。其基本语法格式如下：*属性：属性值；属性：属性

33、值；.小结：交集选择器并集选择器后代选择器21通配符选择器作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）CSS常用文本属性课次课时132学时教学内容教学目标教学重点教学难点CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高掌握CSS常用文本属性及使用方法CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高CSS常用文本属性的应用教学活动及主要环节复习演示：后代选择器如何进行样式的书写？（操作演示）导入新课：学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为

34、此，CSS提供了相应的文本设置属性。使用CSS可以更轻松方便的控制文本样式。新授：（案例演示）一CSS字体样式属性（通过案例将字体样式属性进行演示）（1）font-size:字号大小font-size属性用于设置字号，一般用像素（px）表示。(2)font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。（3）font-weight:字体粗细font-weight属性用于定义字体的粗细。(4)font-style:字体风格font-sty

35、le属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。22italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。二CSS文本外观属性（通过案例将字体外观属性进行演示）使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性，具体如下：(1)color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，最常用。RGB代

36、码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。(2)letter-spacing:字间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。(3)word-spacing:单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。(4)line-height:行间距，即行高。line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字

37、符的垂直间距，一般称为行高。(5)text-transform:文本转换text-transform属性用于控制英文字符的大小写，其可用属性值如下：none：不转换（默认值）。capitalize：首字母大写。uppercase：全部字符转换为大写。lowercase：全部字符转换为小写。(6)text-decoration:文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。23underline：下划线。overline：上划线。line-through：删除线。(7)text-align:水平对

38、齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。(8)text-indent:首行缩进text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。(9)white-space:空白符处理使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：no

39、rmal：常规（默认值），文本中的空格、空行无效，满行后自动换行。pre：预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。小结：CSS文本属性：字体字号粗细倾斜文本装饰颜色对齐方式首行缩进作业：超星作业24课程名称任务、项目、课题名称WEB前端开发（1）CSS的高级特性课次课时142学时教学内容教学目标教学重点教学难点CSS的层叠性、继承性和优先级理解CSS的层叠性、继承性和优先级CSS的层叠性、继承性和优先级CSS优先级教学活动及主要环节复习提问：上节课学习的常用

40、文本属性有哪些？导入新课：(案例演示我很调皮，猜猜我是什么颜色？)CSS的高级特性是指CSS的层叠性、继承性和优先级等。对于网页设计师来说，应深刻理解这些特性。新授：（案例演示）pfont-family:方正隶变简体;.onecolor:#00F;#twofont-size:68px;spancolor:#FF0;giveyousomecolortoseesee(通过案例讲解样式的优先级，同学们动手操作，实现教学做一体化)一、层叠性所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式定义标记字号大小为12像素，外部样式表定义标记颜色为红色，那么段落文本将显示为12像素红色，即这两种

41、样式产生了叠加。二、继承性25所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号等。例如，定义页面主体标记body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标记都是body标记的子标记。注意：当为body元素设置字号属性时，标题文本不会采用这个样式。因为标题标记h1h6有默认的字号样式。三、CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级问题。根据规定，样式表的优先级别从高到低为：行内样式、嵌入式和外部样式表。也就是最接近目标元素的样式优先级越高，即就近原则。(根据案例效果同学们自行总结，找学生代表分

42、享总结)小结：层叠性继承性优先级作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）CSS的高级特性（1）课次课时152学时教学内容教学目标教学重点教学难点属性选择器、关系选择器理解属性选择器、关系选择器属性选择器、关系选择器属性选择器、关系选择器教学活动及主要环节导入新课：使用高级选择选择器可以方便的定位于指定的元素，而不用使用额外的class或id，通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。新授：（案例演示）一、属性选择器属性选择器可以通过元素的属性来选择元素。本节将介绍CSS3新增的3种属性选择器：Eatt=val、Eatt$=val、Eatt*=val。26

43、(通过案例讲解属性选择器的使用，同学们动手操作，实现教学做一体化)1.Eatt=val属性选择器Eatt=val属性选择器，是指选择名称为E，att属性值以val开头的元素。如pid=txt是指id属性值以txt字符串为前缀的p标记。E可以省略，如果省略则表示可以匹配满足条件的任意元素。2.Eatt$=val属性选择器Eatt$=val属性选择器，是指选择名称为E，att属性值以val结尾的元素。如pid$=txt是指id属性值以txt字符串为后缀的p标记。E可以省略，如果省略则表示可以匹配满足条件的任意元素。3.Eatt*=val属性选择器Eatt*=val属性选择器，是指选择名称为E，at

44、t属性值包含val的元素。如pid*=txt是指id属性值包含txt字符串的p标记。E可以省略，如果省略则表示可以匹配满足条件的任意元素。二、关系选择器本节介绍3个关系选择器，分别是子代选择器（）、相邻兄弟选择器（+）、普通兄弟选择器（）。1.子代选择器（）子代选择器主要用于选择某元素的第一级子元素，而且必须是第一级子元素。前面学习过的（后代选择器用于选择某元素的子元素，只要是子元素都可以。实例演示）2.相邻兄弟选择器（+）和普通兄弟选择器（）相邻兄弟选择器（+）和普通兄弟选择器（）统称兄弟选择器。相邻兄弟选择器用“+”连接两个元素，这两个元素有相同的父元素，并且第二个元素紧跟第一个元素。普通

45、兄弟选择器用“”（连接两个元素，这两个元素有相同的父元素，第二个元素不必紧跟第一个元素。实例演示）小结：属性选择器关系选择器作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）CSS的高级特性（2）课次课时162学时教学内容结构化伪类选择器27教学目标教学重点教学难点理解结构化伪类选择器结构化伪类选择器结构化伪类选择器教学活动及主要环节导入新课：CSS3常用的结构化伪类选择器有很多，本节将详细介绍这些选择器。新授：（案例演示）（设置无序列表不同列表项样式的例子讲解不同的结构化伪类选择器）一、结构化伪类选择器1:root选择器:root选择器用于选择文档的根元素。在HTML中，文档的根

46、元素为html元素。因此:root选择器定义的样式，对本文档内所有元素生效。2:not选择器:not选择器又被称为否定选择器，可以选择除了某个元素之外的所有元素。3:empty选择器:empty选择器用于来选择没有内容的元素。4:target选择器:target选择器可用于选取当前活动的目标元素。当用户单击了超链接，而且此链接地址为本页面内的目标位置，:target选择器样式起作用。5:onlychild选择器only-child选择器用于匹配属于父元素中唯一子元素的元素。也就是说，匹配元素的父元素中仅有一个子元素，而且是一个唯一的子元素。6:firstchild选择器、:lastchild选

47、择器、:nthchild（n）选择器、:nthlastchild（n）选择器。:first-child选择器和:last-child选择器分别用于选择父元素中的第一个或者最后一个子元素。如果父元素内子元素较多，我们可以用:nth-child（n）选择器和:nth-last-child（n）选择器分别来选择第n个或者倒数第n个元素。n可以为数值，也可以为odd（奇数）或even（偶（数），odd和even分别代表子元素中第奇数个子元素和第偶数个子元素。案例演示）7:nthoftype（n）选择器、:nthlastoftype（n）选择器。:nth-of-type（n）选择器、:nth-last-

48、of-type（n）选择器分别用于选择父元素的特定类型的第n个子元素或倒数第n个子元素。二、伪元素选择器伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。常用的伪元素有:before28选择器和:after选择器。在最新的CSS3标准中，伪元素选择器的格式改为双冒号，这两个元素可以写为:before、:after，但只兼容IE9以上的现代浏览器。如果为了往下兼容，可以使用单冒号格式。1:before选择器:before选择器用于在元素内部所有子元素之前插入内容，插入的内容必须用content属性值来设定。其语法格式如下：标记名称：beforecontent:属性值;2:after选择

49、器:after选择器用于在元素内部所有子元素之后插入内容，用法与:after选择器相同。小结：结构化伪类选择器伪元素选择器作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）盒子模型课次课时172学时教学内容教学目标教学重点教学难点盒子模型概念盒子大小计算方式盒子模型的相关属性理解盒子模型概念掌握盒子大小计算方式掌握盒子模型的相关属性盒子模型的相关属性盒子大小计算方式教学活动及主要环节复习提问：CSS的高级特性包含？导入新课：互动盒子模型？（生活中的盒子对比）盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。新授：一认识盒

50、子模型29所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容、器。每个矩形都由元素的内容、内边距（padding）边框(border)和外边距(margin)组成。二盒子大小计算方式一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。（后跟习题见PPT）三盒子模型的相关属性1边框（border）属性边框（border）属性设置方式如下：border-top：上边框宽度样式颜色border-right：右边框宽度样式颜色border-bottom：下边框宽度样式颜色border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜

51、色，则可以一个次设置如下：border：边框宽度样式颜色注意：边框宽度、样式和颜色属性的顺序可以随意。2内边距（padding）属性内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。其设置方法类似于padding属性的设置，其设置方式如下：30padding-top：上内边距大小padding-right：右内边距大小padding-bottom：下内边距大小padding-left：左内边距大小若四个内边距具有相同的大小，则可以一个次设置如下：padding：内边距大小3外边距（margin）属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子

52、设置外边距。外边距用于设置盒子与其它盒子之间的距离。其设置方法类似于内边距（paddding）属性的设置，其设置方式如下：margin-top：上外边距大小margin-right：右外边距大小margin-bottom：下外边距大小margin-left：左外边距大小若四个外边距具有相同的大小，则可以一次设置如下：margin：外边距大小小结：认识盒子模型盒子大小计算方式盒子模型相关属性作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）CSS背景属性课次课时182学时教学内容教学目标教学重点教学难点设置背景颜色设置背景图像综合设置CSS背景理解如何设置背景颜色理解如何设置背景图像

53、能够综合设置CSS背景综合设置CSS背景综合设置CSS背景教学活动及主要环节31复习提问：盒子模型的属性有哪些？导入新课：网页能通过背景颜色或背景图像给人留下第一印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设计中，控制背景颜色和图像是一个很重要的步骤。新授：（案例演示）一设置背景颜色格式：backgroundcolor：#RRGGBB或#rgb(r,g,b)或预定义的颜色值。修改h3标题的CSS样式，设置标题行的背景色和标题文字的颜色的样式。文件名：4-3.html。h3background-color:#0080FF;/*设置标题行背景色*/color:#fff;/*设

54、置标题行文字颜色*/text-align:center;/*设置标题水平居中*/height:30px;/*设置标题的高度*/line-height:30px;/*设置标题的行高，使文字垂直居中*/浏览网页，效果图如图4-3所示。图4-3设置了标题行的背景色.二设置背景图像格式：backgroundimage：#RRGGBB或#rgb(r,g,b)或预定义的颜色值。继续修改4-3，添加body的CSS样式，设置网页的背景图像。文件名：4-4.html。bodybackground-image:url(bodybg.jpg);浏览网页，效果图如图4-4所示。32图4-4设置了网页的背景图像默认情

55、况下，背景图像自动沿着水平和竖直两个方向平铺，充满整个网页。.三综合设置背景图像格式：background：url(“图像”)平铺定位继续修改4-4，修改body的CSS样式，设置网页的背景图像。文件名：4-5.html。bodybackground:url(school1.jpg)no-repeatrightbottom;浏览网页，效果图如图4-5所示。图4-5设置网页的背景图像在网页的右下方若修改为如下代码：bodybackground:url(school1.jpg)no-repeat;则默认背景图像在网页左上角出现一次。若修改为如下代码：bodybackground:url(schoo

56、l1.jpg)no-repeatleftbottom;则背景图像在网页左下角出现一次。若修改为如下代码：bodybackground:url(school1.jpg)no-repeatrighttop;33则背景图像在网页右上角出现一次。若修改为如下代码：bodybackground:url(school1.jpg)no-repeatleftcenter;则背景图像在网页左侧垂直居中位置出现一次。若修改为如下代码：bodybackground:url(school1.jpg)repeat-x;则背景图像沿上方X轴平铺。若修改为如下代码：bodybackground:url(school1.jp

57、g)repeat-y;则背景图像沿左侧Y轴平铺。若修改为如下代码：bodybackground:url(school1.jpg)no-repeat40px50px;则背景图像不平铺，距离左侧40px，距离上方50px。小结：设置背景颜色设置背景图像综合设置CSS背景作业：超星作业课程名称任务、项目、课题名称WEB前端开发（1）元素的类型与转换课次课时192学时教学内容教学目标教学重点教学难点块元素、行内元素元素的转换块元素间的外边距理解块元素、行内元素掌握元素的转换理解块元素间的外边距元素的转换块元素间的外边距34教学活动及主要环节复习提问：设置元素的CSS背景使用什么属性？导入新课：互动块元

58、素？行内元素？HTML提供了丰富的标记，用于组织页面结构。为了使页面结构组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。新授：（案例演示）一、块元素块元素在页面中以区域块的形式出现，其特点是：每个块元素通常都会占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。标记是最典型的块元素。二、行内元素行内元素也称为内联元素或内嵌元素，其特点是：不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占据独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑

59、结构，一般不可以设置宽度、高度和对齐等属性，常用于控制页面中的特殊文本的样式。标记是最典型的行内元素。三元素的转换网页是由多个块元素和行内元素构成的盒子排列而成的。使用display属性对元素的类型进行转换。display属性常用的属性值及含义如下：inline：行内元素block：块元素inline-block：行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。none：元素被隐藏、不显示。四块元素间的垂直外边距当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者

60、中的较大者。小结：35块元素、行内元素元素的转换块元素间的外边距作业：巩固复习课程名称任务、项目、课题名称WEB前端开发（1）列表样式设置课次课时202学时教学内容教学目标教学重点教学难点CSS控制列表样式CSS控制超链接样式案例制作：学院新闻块页面制作掌握CSS控制列表样式掌握CSS控制超链接样式CSS控制列表样式、CSS控制超链接样式CSS控制超链接样式教学活动及主要环节36复习提问：设置元素的CSS背景使用什么属性？导入新课：网站页面中新闻块的制作方法，需要包含什么内容，展示学院官网通知公告块（小组为单位讨论，派小组代表分享知识）新授：（案例演示：学院官网导航条）一CSS控制列表样式使用