Web前端开发案例教程(HTML5 CSS3) 教案 任务1创建第一个HTML5网页

html5+css3 教案教案标题：HTML5+CSS3 基础课程教学课程简介：本课程旨在帮助学生掌握HTML5和CSS3的基础知识和技能。

通过系统地学习与实践，学生将能够编写具有良好结构和样式的网页。

本课程将包括HTML5标记语言的基本结构、常用标签的应用，以及CSS3样式表的基本语法和常用样式的设计。

通过本课程的学习，学生将能够独立完成简单的网页设计与制作。

教学目标：1. 了解HTML5的基本语法和标签，能够正确地编写HTML5文档结构；2. 掌握常用HTML5标签的应用，理解常见标签的作用和使用场景；3. 熟悉CSS3的基本语法和选择器，能够编写CSS3样式表；4. 掌握常用CSS3样式的设计与应用，能够为网页添加样式和布局效果；5. 能够使用浏览器开发者工具进行调试和网页效果的预览。

教学内容与安排：第一课时：HTML5基础1. HTML5概述- 介绍HTML5的定义和特点；- 讲解HTML5文档结构的基本要素。

2. HTML5基本标签- 介绍常用的HTML5标签，如标题、段落、列表、链接等；- 演示这些标签的使用方法。

3. HTML5表单- 介绍HTML5表单的新特性和输入控件；- 讲解表单元素的属性和用途；- 演示表单的创建和提交。

第二课时：CSS3基础1. CSS3概述- 介绍CSS3的定义和特点；- 讲解CSS3样式的基本语法。

2. CSS3选择器- 介绍常用的CSS3选择器，如标签选择器、类选择器、ID选择器等；- 演示这些选择器的使用方法。

3. CSS3样式设计- 介绍常用的CSS3样式，如文本样式、背景样式、边框样式等； - 讲解这些样式的属性和使用技巧；- 演示如何为网页添加样式和布局效果。

第三课时：HTML5+CSS3实践1. 综合练习- 要求学生根据给定的设计稿，使用HTML5和CSS3编写一个简单的网页；- 学生可以自行选择合适的标签和样式。

2. 调试与预览- 介绍浏览器开发者工具的使用方法；- 演示如何使用工具进行调试和网页效果的预览。

《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的基本结构，能够区分两者的结构差异。

课程名称WEB前端开发（1）课次13 任务、项目、课题名称盒子模型课时2学时教学内容盒子模型概念盒子大小计算方式盒子模型的相关属性教学目标理解盒子模型概念掌握盒子大小计算方式掌握盒子模型的相关属性教学重点盒子模型的相关属性教学难点盒子大小计算方式教学活动及主要环节复习提问：1. CSS的高级特性包含？导入新课：互动——盒子模型？盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。

新授：一．认识盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

每个矩形都由元素的内容、内边距（padding）、边框(border)和外边距(margin)组成。

二．盒子大小计算方式一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。

（后跟习题见PPT）三．盒子模型的相关属性1．边框（border）属性边框（border）属性设置方式如下：●border-top：上边框宽度样式颜色●border-right：右边框宽度样式颜色●border-bottom：下边框宽度样式颜色●border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：●border：边框宽度样式颜色注意：边框宽度、样式和颜色属性的顺序可以随意。

2．内边距（padding）属性内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。

其设置方法类似于padding属性的设置，其设置方式如下：●padding-top：上内边距大小●padding-right：右内边距大小●padding-bottom：下内边距大小●padding-left：左内边距大小若四个内边距具有相同的大小，则可以一个次设置如下：●padding：内边距大小3．外边距（margin）属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。

≪HTM15+CSS3Web前端开发技术》课程教学大纲学分：4学分学时：学时64(其中：理论学时32实践学时：32)先修课程：图形图像处理、程序设计基础、Intemet应用基础后续课程：Web前端技术(JaVaSCriPt)适用专业：计算机类相关专业开课部门：计算机系一、课程的性质与目标《HTM15+CSS3Web前端开发技术》是面向计算机相关专业的一门专业核心课，该课程的内容适应Web前端开发工作岗位群的实际要求。

课程融入“1+X”Web前端开发技术技能等级证书的相关内容，对接互联网+大学生创新创业大赛，秉承“以赛促赛，赛证融合、以岗促赛，岗证融合、以创促课，专创融合”的思想，整合专业教育教学资源和内容，构建基于专业知识的模块化课程内容。

通过本课程的学习，学生可以掌握网页设计领域核心知识和技能，了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容。

本课程是一门基于真实项目的课程，具有较强的职业性、实践性和技术性，学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识，在操作实践中提升实战能力，同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力，对学生职业能力培养和职业素质养成起到支撑和促进作用，为职业能力的培养打下坚实的基础。

二、教学条件要求操作系统：Windows7开发工具：Hbui1derX三、课程的主要内容及基本要求学习单元一学习单元二学习单元三学习单元四学习单元五学习单元六学习单元七学习单元八学习单元九学习单元十学习单元十一学习单元十二四、学时分配五、教学效果评价及方式本课程为考试课程，根据课程特点采用多阶段、节点化、多方式的评价方式。

构建了素质、知识和能力考核相结合，过程性考核和终结性考核相结合，理论考核和实践考核相结合，校内评价和校外评价相结合的四个结合；知识、能力、素质、思政的四个维度、教师、学生、工程师的三个主体，课前、课中、课后的三个阶段的考评体系。