学时新手做网站教程

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