《2022年《HTML+CSS网站设计基础教程》_教学大纲 .pdf》由会员分享，可在线阅读，更多相关《2022年《HTML+CSS网站设计基础教程》_教学大纲 .pdf（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、博学谷让IT 教学更简单，让IT 学习更有效HTML5+CSS3网站设计基础教程 课程教学大纲（课程英文名称）课程编号： 201601210011学分： 5 学分学时： 76 学时（其中：讲课学时：47 学时上机学时： 26 学时）先修课程 ：计算机基础、计算机网络、计算机应用后续课程 ：UI 设计、JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标HTML5+CSS3 网站设计基础教程是面向计算机相关专业的一门专业基础课，涉及网页基础、 HTML标记、 CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web 发
2、展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。二、课程设计理念与思路课程设计理念： 高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向， 培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路： 基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设
3、计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合” 。三、教学条件要求名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效开发工具： Dreamweaver CS6 四、课程的主要内容及基本要求第一章初识 HTML5 学习单元初识 HTML5学时10 学时学习目标1.了解 HTML5 发展历程2.理解 HTML5 浏览器支持情况3.熟悉 HTML5 基本语法
4、 ,掌握 HTML5 语法新特性。4.掌握 HTML5 相关标记及属性，能够制作简单的网页页面。学习内容知识点了解掌握重点难点HTML5 发展历史HTML5 的优势HTML5 浏览器支持情况创建第一个HTML5 页面HTML5 文档基本格式HTML5 语法HTML 标记标记的属性HTML5 文档头部相关标记标题和段落标记文本格式化标记特殊字符标记常用图像格式图像标记 绝对路径和相对路径创建超链接锚点链接第二章HTML5 页面元素及属性学习单元HTML5 页面元素及属性学时6 学时学习目标1.掌握结构元素的使用，可以使页面分区更明确。2.理解分组元素的使用，能够建立简单的标题组。3.掌握页面交互
5、元素的使用，能够实现简单的交互效果。4.理解文本层次语义元素，能够在页面中突出所标记的文本内容。5.掌握全局属性的应用，能够使页面元素实现相应的操作。学习内容知识点了解掌握重点难点ul 元素ol 元素dl 元素名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效列表的嵌套应用header元素nav 元素article 元素section 元素footer 元素figure 和 figcap
6、tion 元素hgroup 元素details 和 summary 元素progress元素meter 元素time 元素mark 元素cite 元素draggable 属性hidden 属性spellcheck 属性contenteditable 属性第三章CSS3入门学习单元CSS3 入门学时8 学时学习目标1.了解 CSS3 的发展历史以及主流浏览器的支持情况。2.掌握 CSS 基础选择器，能够运用CSS选择器定义标记样式。3.熟悉 CSS 文本样式属性，能够运用相应的属性定义文本样式。4.理解 CSS 优先级，能够区分复合选择器权重的大小。学习内容知识点了解掌握重点难点CSS3 概述C
7、SS3 发展历史CSS3 浏览器支持情况CSS 样式规则引入 CSS 样式表CSS 基础选择器字体样式属性文本外观属性CSS 层叠性和继承性CSS 优先级第四章CSS3选择器学习单元CSS3 选择器学时8 学时学习目标1.掌握 CSS3 中新增加的属性选择器，能够运用属性选择器为页面中的元素名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效添加样式。2.理解关系选择器的用法，能够准确判断
8、元素与元素间的关系。3.掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。4.掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。5.掌握 CSS 伪类，会使用CSS 伪类实现超链接特效。学习内容知识点了解掌握重点难点Eatt=value 属性选择器Eatt$=value 属性选择器Eatt*=value 属性选择器子代选择器（ ）兄弟选择器（ +、）:root 选择器:not 选择器:only-child 选择器:first-child 和:last-child 选择器:nth-child(n)和:nth-last-child(n) 选择器:nth-of-type(n
9、)和:nth-last-of-type(n) 选择器:empty 选择器:target 选择器:before 选择器:after 选择器链接伪类第五章CSS 盒子模型学习单元CSS 盒子模型学时8 学时学习目标1.掌握盒子的相关属性，能够制作常见的盒子模型效果。2.掌握背景属性的设置方法，能够设置背景颜色和图像。3.理解渐变属性的原理，能够设置渐变背景。4.熟悉 CSS 控制列表样式的方式，能够运用背景图像定义列表项目符号。学习内容知识点了解掌握重点难点认识盒子模型 标记盒子的宽与高边框属性边距属性box-shadow 属性box-sizing 属性设置背景颜色名师资料总结 - - -精品资料
10、欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效设置背景图像背景与图片不透明度的设置设置背景图像平铺设置背景图像的位置设置背景图像固定设置背景图像的大小设置背景的显示区域设置背景图像的裁剪区域设置多重背景图像背景复合属性线性渐变径向渐变重复渐变第六章浮动与定位学习单元浮动与定位学时8 学时学习目标1.理解元素的浮动，能够为元素设置浮动样式。2.熟悉清除浮动的方法，可以使用不同方法清除浮动。3.掌握元素的定位，能够为元
11、素设置常见的定位模式。学习内容知识点了解掌握重点难点元素的浮动属性float 清除浮动overflow 属性元素的定位属性静态定位 static相对定位relative绝对定位 absolute固定定位 fixedz-index 层叠等级属性元素的类型标记元素的转换第七章表单的应用学习单元表单的应用学时8 学时学习目标1.了解表单功能，能够快速创建表单。2.掌握表单相关元素，能够准确定义不同的表单控件。3.掌握表单样式的控制，能够美化表单界面。学习内容知识点了解掌握重点难点表单的构成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - -
12、 名师精心整理 - - - - - - - 第 5 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效创建表单表单属性Input 元素的 type 属性Input 元素的其他属性textarea元素select元素datalist 元素keygen 元素output 元素CSS 控制表单样式第八章多媒体技术学习单元多媒体技术学时6 学时学习目标1.熟悉 HTML5 多媒体特性。2.了解 HTML5 支持的音频和视频格式。3.掌握 HTML5 中视频的相关属性，能够在HTML5 页面中添加视频文件。4.掌握 HTML5 中音频的相关属性，能够在HTM
13、L5 页面中添加音频文件。5.了解 HTML5 中视频、音频的一些常见操作，并能够应用到网页制作中。学习内容知识点了解掌握重点难点HTML5 多媒体的特性视频和音频编解码器多媒体的格式支持视频和音频的浏览器在 HTML5中嵌入视频在 HTML5中嵌入音频音视频中的source元素调用网页多媒体文件CSS 控制视频的宽高视频和音频的方法和事件HTML5 音视频发展趋势第九章CSS3高级应用学习单元CSS3 高级应用学时8 学时学习目标1.理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。2.掌握 CSS3 中的变形属性，能够制作2D 转换、 3D 转换效果。3.掌握 CSS3 中的动画，能
14、够熟练制作网页中常见的动画效果。学习内容知识点了解掌握重点难点transition-property 属性transition-duration 属性transition-timing-function属性名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效transition-delay 属性transition 属性认识 transform2D 转换3D 转换keyframesanim
15、ation-name 属性animation-duration 属性animation-timing-function属性animation-delay 属性animation-iteration-count属性animation-direction 属性animation 属性第十章实战开发 制作电商网站首页面学习单元实战开发 制作电商网站首页面学时6 学时学习目标1.掌握站点的建立，能够建立规范的站点。2.完成首页面的制作，并能够实现简单的CSS3 动画效果。学习内容知识点了解掌握重点难点建立站点站点初始化设置效果图分析页面布局定义公共样式制作头部、导航及视频内容制作内容部分（新品）制作内
16、容部分（试装）制作内容部分（评测）制作脚部（信息注册）及版权信息部分五、学时分配章目讲课上机合计第一章初识 HTML56 学时4 学时10 学时第二章HTML5 页面元素及属性4 学时2 学时6 学时名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 博学谷让IT 教学更简单，让IT 学习更有效第三章CSS3 入门5 学时3 学时8 学时第四章CSS3 选择器5 学时3 学时8 学时第五章CSS 盒子模型5 学时3 学时8 学时第六
17、章浮动与定位5 学时3 学时8 学时第七章表单的应用5 学时3 学时8 学时第八章多媒体技术4 学时2 学时6 学时第九章CSS3 高级应用5 学时3 学时8 学时第十章实战开发 制作电商网站首页面3 学时3 学时6 学时合计47学时29学时76 学时六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（ 30% ）和期末考试（70% ）组成，其中，平时成绩包括出勤（5% ）、作业（ 5% ）、上机成绩（ 20% ）。七、选用教材和主要参考书本大纲是根据教材HTML5+CSS3 网站设计基础教程所设计的。参考书籍：传智播客 . 网页设计与制作（HTML+CSS）中国铁道出版社.201408 传智播客 . HTML+CSS+JavaScript 网页制作案例教程人民邮电出版社.201508 八、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。撰写人：审定人：批准人：执行时间：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -