HTML5+CSS3网页设计实战 授课计划 - 周课时4节

学期授课计划周次章节(课题)主要内容教学安排及学时分配（单位：分钟）课外作业及作业所需时间（单位：分钟）讲授课堂讨论课堂练习实验实训参观复习/自学测验考试小计1预备周预备周2概述 HTML、CSS概念1.2网页制作初学者上手工具1.3基础练习1.HTML、CSS、容器概念。2.百度搜索引擎的使用。3.正确、高效使用特定关键字搜索相关网页。4.网站常见页面文件的命名规则。5.Hbuilder常规快捷键操作。201045005080hbuilder编写简单HTML页面，需时30分钟。创建网站项目2.1站点相关命名规范1.文件夹的组织。2.英文命名文件的规矩。201045005080抄写该节所示表格的部分英文单词，需时20分钟。32.2图像文件规范1.图像文件的类型及特点。2.图像文件合理的命名规则。3.Photoshop输出透明底图片。2010450050802.3书写HTML代码的习惯2.4基础练习1.代码缩进。2.html及css注释语句的添加。3.认识标签的语义。4.企业网页的图像命名规则。2010450050804第3章盒子模型3.1盒子模型特点3.2标准盒模型1.理解盒子模型的概念及意义。2.了解盒子模型的分类：标准盒模型、怪异盒模型。3.标准盒模型的width属性、height属性201045005080完成【案例4】容器异常塌陷的解决，需时30分钟。3.3盒子模型的相关属性1.margin外边距属性2.padding内边距属性20104500508053.3盒子模型的相关属性1.Border边框属性2.background背景属性及x/y偏移量。2010450050803.3盒子模型的相关属性3.4基础练习1.【案例7】完成精灵图效果。2.【练习4】完成九宫格布局。2010450050806第4章常见的HTML标签与CSS样式的搭配4.1块元素、内联元素、内联块级元素的特征4.2常见CSS属性表1.块元素、内联元素、内联块级元素的特征。2.常见CSS属性表2010450050804.3常见的选择器类型1.标签选择器的写法及使用场景。2.Id选择器的写法与应用。201045005080使用手机打开某个APP，直尺绘制容器包含结构图，并辅以箭头和文字给各容器命名id，需时30分钟。74.3常见的选择器类型1.类选择器的特点，类选择器的使用场合2.同一对象应用多个类的权重分析。3.通配符选择器的用法4.后代选择器的用法5.选择器的优先级别2010450050804.4结构类标签1.Header、Nav标签的使用场景及写法。2.横向导航栏、纵向导航栏的设计。20104500508084.4结构类标签4.5文本类标签1.实际应用article、section完成文章详情页。2.设置文本段落的首行缩进、行高、字体大小、字体样式、颜色等。2010450050804.5文本类标签4.6a标签1.Span、i无语义标签的应用及使用场景。2.strong、em标签的区别。3.a标签的用法4.完成【案例12】锚点链接跳转功能。20104500508094.7图像、视音频类标签1.相对、绝对路径。2.img标签的类别3.完成一组图片外观的样式定义。201045005080自学章节：Video、audio标签的简单用法，需时60分钟。4.8列表类标签1.列表类标签的种类及使用场景。2.ul标签的实际应用201045005080【案例17】在案例16的基础上，添加左侧版面。需时40分钟。104.8列表类标签1.dl标签的构成和应用。2.页脚部分多组dl标签的布局。2010450050804.9表格标签1.thead、tbody的使用及记忆方法。2.表头Th与td标签的设置。3.Odd、even关键字的应用。201045005080利用table标签制作个人简历，需时60分钟。114.10表单类标签1.完成【练习3】校园霸凌问卷.html。201045005080第5章常见布局流5.1标准文档流布局1.标准流布局的特点及使用场景。2.主体框架的html代码及样式设定。201045005080125.2浮动流布局1.浮动流应用场景。2.浮动属性的设置。3.浮动后产生异常的解决思路。4.完成【案例8】“让中国挺起脊梁的科学家”页面效果。2010450050805.3定位流布局1.定位流布局的种类。2.相对定位的概念及使用场景，相对定位的代码实现。3.绝对定位的概念及应用场景。4.完成【案例11】北京奥运页面的代码。201045005080【案例12】在案例11的基础上，完成右上角的角标效果，需时40分钟。135.3定位流布局5.4基础练习1.固定定位的概念及使用场景2.完成【练习1】“微光2023”，z-index属性的设置。201045005080第六章个人网页布局实战6.3搭建项目并进行页面布局1.制作页面时的标准要求。2.完成第一、二<section>区块对应的代码和样式。3.利用ul标签完成第三个版块的结构。4.使用nth-of-type完成版块三的样式。201045005080自学章节：6.1将网页截图进行切片，6.2网站目录、文件整理，需时120分钟。146.3搭建项目并进行页面布局6.4代码整理1.利用dl标签完成第四个版块的结构。2.完成页脚区对应的布局和样式。3.完成样式转外部样式表。201045005080第七章CSS进阶知识7.2进一步了解CSS样式优先权7.3掌握更多的CSS选择器1.CSS样式优先权2.子元素选择器、相邻兄弟选择器、兄弟元素选择器的概念及应用。3.常见属性选择器的写法201045005080157.3掌握更多的CSS选择器1.伪类选择器的应用场景及种类。2.:Hover选择器的应用。3.:nth-of-type(n)选择器和:nth-last-of-type()选择器的应用。4.::before伪元素选择器、::after伪元素选择器。5.::before伪元素选择器完成排行榜的项目列表图标。201045005080完成【案例6】《江城子·密州出猎》的练习，需时30分钟。7.4CSS过渡与动画1.transition属性的书写格式，速度曲线过渡参数。2.@keyframes规则的创建与应用。20104500508016第八章商业网站布局实战8.4制作首页布局1.确定研究目标。2.搜集相关图文素材。3.网站目录及文件的搭建、整理。4.完成首页页头区域容器结构。5.编写对应的css样式。2010450050808.4制作首页布局1.编写内容区对应的容器结构。2.编写对应的css样式。201045005080178.4制作首页布局1.编写页脚区对应的容器结构。2.编写对应的css样式。3.完成页头、内容区、页脚区域的静态CSS代码的优化。4.完成页面中具备交互效果的代码优化，包括：盒子阴影特效、导航交互特效。201045005080自行完成代码的整理工作，删除辅助用的线框时导致细微位置、尺寸的变化，要求在相关属性进行纠正。需时30分钟。8.5设计一级栏目页面1. 完成一级页面的页头部分的制作。2.修改海报区代码。201045005080188.5设计一级栏目页面1.主体内容的ul结构及样式设置。2.翻页按钮的ul结构及样式设置。201045005080自行完成代码的整理工作，需时30分钟。8.6设计详情页布局1.完成主要框架的代码复用。2.页头区结构和样式的修改。3.定义内容区容器结构，并添加