《HTML5+CSS3网站设计基础教程》_教学大纲
HTML5CSS3网站设计基础教程_教学指导大纲
HTML5CSS3网站设计基础教程_教学指导大纲一、引言A. 简介1. 概述HTML5和CSS32. 网站设计的重要性和必要性B. 目标读者1. 网站设计初学者2. 对HTML和CSS有一定了解的读者C. 教学目标1. 理解HTML5和CSS3的基本概念和语法2. 掌握基本的网站设计技巧和方法3. 能够设计简单但具有吸引力的网页布局4. 运用HTML5和CSS3创建响应式网站二、HTML5基础A. HTML5简介1. HTML5的发展历程2. HTML5的新特性和改进之处B. HTML5的基本结构1. DOCTYPE声明2. HTML文档的基本结构C. HTML5常用标签1. 文本标签2. 超链接标签3. 图像标签4. 表格标签5. 表单标签D. HTML5多媒体1. 音频和视频标签的使用2. 使用Canvas绘制图形3. 嵌入地图和地理定位E. HTML5表单和表单验证1. 表单元素2. 表单验证的基本原理和方法三、CSS3基础A. CSS3简介1. CSS的发展历程2. CSS3的新特性和改进之处B. CSS选择器和样式规则1. ID选择器和类选择器2. 标签选择器和属性选择器3. 组合选择器和伪类选择器C. CSS盒模型1. 盒子的尺寸和边框2. 盒子的内边距和外边距D. CSS布局和定位1. 流式布局2. 弹性盒子布局3. 定位布局E. CSS3过渡和动画1. 过渡效果的基本原理和用法2. 动画效果的实现方法四、响应式网站设计A. 响应式网站设计的概念1. 什么是响应式网站设计2. 为什么需要响应式网站设计B. 响应式网站设计的原则和方法1. 弹性网格布局2. 媒体查询的应用3. 图像和媒体资源的处理C. 响应式网站设计的实践1. 设计响应式布局2. 适配不同设备和屏幕尺寸3. 进行兼容性测试和优化五、总结A. 知识回顾1. HTML5的基本概念和语法2. CSS3的样式规则和布局B. 学习建议1. 实践和练习的重要性2. 深入学习和进阶的方向C. 结束语1. 网站设计的未来发展趋势2. 鼓励读者继续学习和探索六、附录A. HTML5和CSS3的常用资源和工具推荐B. 参考文献和学习资料以上为《HTML5CSS3网站设计基础教程_教学指导大纲》的详细内容概述，本教程将通过逐步引导读者学习HTML5和CSS3的基础知识，同时指导读者如何运用所学知识进行网站设计。
HTML5+CSS3网页设计与制作—教学大纲
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
HTML5 CSS3网页设计与制作教学导航
【
（1）学会创建本地站点和管理本地站点
（2）熟悉Dreamweaver CC的工作界面
（3）熟悉浏览器窗口的基本组成和网页的基本组成元素
（4）学会管理网站中的文件和文件夹
（5）学会新建网页文档和设置网页的页面属性
（6）熟悉打开网页文档、浏览网页、保存网页文档和关闭网页文档等基本操作
（7）学会设置首选项
6课时
单元
【
（1）学会创建样式文件、设计页面的布局结构、定义页面的布局样式
（2）学会利用CSS样式美化页面元素
（3）学会使用使用Div+CSS结构布局页面
（4）学会插入Div标签对网页的页面进行布局
（5）了解网页元素的自适应技术
（6）了解网页的单列式、两列式、三列式和多行多列式布局技术
任务驱动法、分组讨论法、理论实践一体化、讲练结合
任务驱动法、分组讨论法、理论实践一体化、讲练结合
8课时
单元
【
（1）熟悉网站开发流程和规范
（2）合理规划网站的风格、栏目结构、目录结构和链接结构
（3）学会设计网站首页的主体布局结构和导航结构
（4）熟练制作网站的首页，实现网站首页各个局部版块内容
（5）学会编写javascript程序代码实现网站首页中顶部下拉菜单式导航、页侧栏菜单显示、促销公告内容定时自动轮换播放、焦点图片自动轮换播放等多种形式的网页特效功能
8课时
单元
【
（1）学会正确地插入表格，并合理地设置表格的属性
（2）学会单元格的合并、拆分、插入和删除等操作
（3）学会正确地设置表格中行和列的属性
（4）学会正确设置表格、单元格的背景图像和背景颜色
（5）学会正确地在表格中输入文字、插入图像并定位
《HTML5+CSS3网站设计基础教程》_教学大纲
《HTML5+CSS3网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5学分学时：76学时（其中：讲课学时：47学时上机学时：26学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识HTML5第二章HTML5页面元素及属性第三章CSS3入门第四章CSS3选择器第五章CSS盒子模型第六章浮动与定位第七章表单的应用第八章多媒体技术第九章CSS3高级应用第十章实战开发—制作电商网站首页面…………………………………………………………………五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
HTML5 CSS3网页设计与制作教学大纲
多媒体
27
设计与制作电脑版网站首页0801.html
规划与设计电脑版网站首页的主体布局结构
设计与实现电脑版网站首页的导航结构
设计网站首页的主体布局结构和导航结构
2
计算机
28
设计与制作电脑版网站首页0801.html
设计与实现电脑版网站首页的各个局部版块内容
实现网站首页各个局部版块内容
2
计算机
29
设计与制作电脑版网站首页0801.html
2
计算机
18
设计与制作电脑版商品筛选页面0501.html
布局与美化商品筛选页面的右侧主体内容
对商品筛选页面左侧内容的布局与美化
2
计算机
19
设计与制作电脑版商品推荐页面0601.html
规划与设计商品推荐页面的布局结构
制作用于生成网页模板的网页0601.html
制作用来生成模板的网页
2
计算机
20
制作基于模板的电脑版商品推荐页面0602.html
规划与设计商品筛选页面的布局结构
学会使用使用Div+CSS结构布局页面
2
计算机
16
设计与制作电脑版商品筛选页面0501.html
规划与设计商品筛选页面的布局结构
学会使用使用Div+CSS结构布局页面
2
计算机
17
设计与制作电脑版商品筛选页面0501.html
布局与美化商品筛选页面的左侧列表内容
利用CSS样式美化页面元素
创建帮助导航栏
设置多种文本形式的超链接
2
计算机
7
设计与制作电脑版帮助信息页面0201.html
创建电子邮件链接、图像热点链接等多种形式的超级链接
《网页设计(HTML5+CSS3)》核心课程标准
《网页设计（HTML5+CSS3）》核心课程标准本课程是软件技术专业的核心课程，也是后续JavaScript程序设计与jQuery框架的基础课程，在Web前端开发中占有重要地位。
通过本课程的课堂教学和实践教学，使学生能够掌握网页设计的两大基础，HTML和CSS,具备常见门户网站、电商网站的设计与制作能力，培养学生科学的思维方法，灵活运用知识的能力和自主学习的能力，为后续网站开发课程的学习、网页制作员工作的胜任打下坚实的基础。
二、课程设计理念本课程强调对学生职业素养和Web前端编程能力的培养，按照理实一体、课内外互补、课堂教学与培优工程相结合的课程设计指导思想，以任务或项目为载体组织教学内容，采取讲练结合、微课教学、视频辅导、单元测试、赛练融合等多种教学形式和手段，突出学生的主体地位，在校内实训室完成所有教学环节，实现“教、学、做”的有机融合；通过班级讲授、团队学习、个体辅导、展示交流、技能大赛等手段，实现从模仿到应用到创新的高职学生递进式培养。
三、课程目标（一）总体目标本课程涉及网页基础、HTML5标记、CSS3样式、网页布局等内容。
通过本课程的学习，学生能够了解HTML5基本标签和CSS3常用样式，熟悉网页设计流程，掌握常见的网页布局效果，掌握一定的Web前端开发知识，学会制作各种企业、门户、电商类网站。
同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识，为学生后续课程学习夯实基础。
（二）具体目标1.能力目标了解Web前端程序员等相关职业岗位的工作职责；具有一定的网页设计与制作能力;具备良好的编程习惯和准确的语言表达能力；具有一定的科学思维方式和分析判断解决问题的能力；具有社会适应能力、沟通能力与自我学习能力；具有良好的职业道德与敬业精神，具有团队合作意识。
2.知识目标认识网页和网站,了解相关概念；熟悉ViSU阿StUdioCode和HbUilder的使用;熟练掌握HTML5基本标签;掌握常用H5表单控件并能熟练运用；理解CSS3样式规则及选择器，能合理使用CSS美化页面；理解CSS盒子模型、浮动和定位布局，并能应用到网页设计中；掌握HTML和CSS多媒体应用;掌握CSS3的变形、动画和转换；能达到“1+X”Web前端开发初级标准。
HTML5+CSS3网站设计HTML5页面元素及属性
第2章HTML5页面元素及属性《HTML5+CSS3网站设计基础教程》（第2版）学习目地/Target掌握结构元素地使用,可以使页面分区更明确理解分组元素地使用,能够建立简单地标题组。
掌握页面交互元素地使用,能够实现简单地交互效果。
理解文本层次语义元素,能够在页面突出所标记地文本内容。
掌握全局属性地应用,能够使页面元素实现相应地操作。
章节概述/SummaryHTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
/Contents01 02 03列表元素结构元素分组元素04页面交互元素/Contents05 06文本层次语义元素全局属性07阶段案例—制作电影影评网01列表元素章节概述HTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
为了使网页更易读,经常将网页信息以列表地形式呈现,例如,淘宝商城首页地商品服务分类,排列有序,条理清晰,呈现为列表地形式。
为了满足网页排版地需求,HTML语言提供了3种常用地列表元素,分别为ul元素（无序列表）,ol元素（有序列表）与dl元素（定义列表）,本节将对这3种元素进行详细讲解。
1.ul元素l 了解无序列表地概念,能够说出无序列表地特点。
l 掌握无序列表地基本语法格式,能够在网页定义无序列表。
学习目地1.ul元素无序列表是网页最常用地列表,之所以称为"无序列表",是因为其各个列表项之间没有顺序级别之分,通常是并列地。
HTML5+CSS3Web前端开发技术(任务式)-教学大纲
≪HTM15+CSS3Web前端开发技术》课程教学大纲学分：4学分学时：学时64(其中：理论学时32实践学时：32)先修课程：图形图像处理、程序设计基础、Intemet应用基础后续课程：Web前端技术(JaVaSCriPt)适用专业：计算机类相关专业开课部门：计算机系一、课程的性质与目标《HTM15+CSS3Web前端开发技术》是面向计算机相关专业的一门专业核心课，该课程的内容适应Web前端开发工作岗位群的实际要求。
课程融入“1+X”Web前端开发技术技能等级证书的相关内容，对接互联网+大学生创新创业大赛，秉承“以赛促赛，赛证融合、以岗促赛，岗证融合、以创促课，专创融合”的思想，整合专业教育教学资源和内容，构建基于专业知识的模块化课程内容。
通过本课程的学习，学生可以掌握网页设计领域核心知识和技能，了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容。
本课程是一门基于真实项目的课程，具有较强的职业性、实践性和技术性，学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识，在操作实践中提升实战能力，同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力，对学生职业能力培养和职业素质养成起到支撑和促进作用，为职业能力的培养打下坚实的基础。
二、教学条件要求操作系统：Windows7开发工具：Hbui1derX三、课程的主要内容及基本要求学习单元一学习单元二学习单元三学习单元四学习单元五学习单元六学习单元七学习单元八学习单元九学习单元十学习单元十一学习单元十二四、学时分配五、教学效果评价及方式本课程为考试课程，根据课程特点采用多阶段、节点化、多方式的评价方式。
构建了素质、知识和能力考核相结合，过程性考核和终结性考核相结合，理论考核和实践考核相结合，校内评价和校外评价相结合的四个结合；知识、能力、素质、思政的四个维度、教师、学生、工程师的三个主体，课前、课中、课后的三个阶段的考评体系。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《HTML5+CSS3网站设计基础教程》课程教学大纲
（课程英文名称）
课程编号：201601210011
学分：5学分
学时：76学时（其中：讲课学时：47
一、课程的性质与目标
《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路
课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限
于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例
（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为
目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
开发工具：DreamweaverCS6
第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
背景与图片不透明度的设
√置
设置背景图像平铺√
设置背景图像的位置√
设置背景图像固定√
设置背景图像的大小√
设置背景的显示区域√
设置背景图像的裁剪区域√
设置多重背景图像√
背景复合属性√
线性渐变√
径向渐变√
重复渐变√Array
第七章表单的应用
textarea元素√
select元素√
datalist元素√
keygen元素√
output元素√
CSS控制表单样式√√第八章多媒体技术?
animation-duration属性√
animation-timing-function
√
属性
animation-delay属性√
animation-iteration-count
√
属性
animation-direction属性√
animation属性√第十章实战开发—制作电商网站首页面
76学时
合计47学时29学
时
六、考核模式与成绩评定办法
本课程为考试课程，期末考试采用百分制的闭卷考试模式。
学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上机成绩（20%）。
七、选用教材和主要参考书
本大纲是根据教材《HTML5+CSS3网站设计基础教程》所设计的。
参考书籍：Array传智播客.《网页设计与制作（
传智播客.《HTML+CSS+JavaScript
本课程的授课模式为：课堂授课+。