Web前端开发案例教程(HTML5 CSS3) 教案 任务1创建第一个HTML5网页
html5+css3 教案
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项目开发案例教程》教学课件 项目一《HTML5+css3项目开发案例教程》
（3）主要区域。
表示主要区域的元素是main，它用于标记一个页面的主要内容。一个页面中只能 包含一个main元素。main元素不能被放在header、nav、article、aside或footer元素中， 在<main>标签中设置role属性的值为main可以帮助阅读器定位页面的主要区域。
（4）文章块。
（3）注释标签是HTML5中一种特殊的标签。使用注释标签括起来的内容不会显示 在页面上，但是会保存在页面的源代码中。它的基本语法格式为：
<!--注释内容-->
在各功能模块的开头和结尾处添加注释可方便合作开发的人员修改和理解代码。
2．HTML5标签的属性
在HTML5中，可以根据需要为标签设置属性，比如在段落标签中设置该 段落的文本颜色或字号大小等。设置标签属性的语法格式为：
4．body元素
body元素用于标记HTML5文档所要显示的内容，也称为主体标记。页面
中的所有文本、图像、音频或视频等信息都必须写在<body>标签之内。 <body>标签中的信息才是最终展示给用户的内容。
html、head和body这3种元素在一个HTML5文档中只能各出现一次， 且<head>和<body>标签必须在<html>标签之内，<body>标签位于<head>标
2．HTML5的成功
就在失败的同时，HTML5的演化取得了 成功。因为HTML5在开发时就综合考虑了当 前与未来需要进行的开发任务，所以它向后 兼容，且包含了的全部特性，并进行了少量 的修改与完善。
2014年，W3C正式宣布，HTML5制作完 成并公开发布。目前HTML5已经得到主流浏 览器的良好支持。
Web前端开发案例教程(HTML5+CSS3) 第1章 WEB前端开发概述
1.2 WEB相关概念
WEB相关 概念
1
2
3
IP地址 域名 URL
4 HTTP
5
网站、网 页与主页
6
7
HTML Web标准
13
第1章 WEB前端开发概述 1.3 HTML5概述
14
1.3 HTML5概述
HTML5是超文本标记语言的第5代版本， 目前在互联网的应用越来越普及。HTML5将 WEB应用带入一个标准的应用平台。在 HTML5平台上，视频、音频、图像和动画等 都被标准化。
本书是学习WEB前端开发技术的教材，主要学习利用HTML5和CSS3构建WEB网页的知识。
3
第1章 WEB前端开发概述 1.2 WEB相关概念
4
1.2 WEB相关概念
1、IP地址
IP地址(Internet Protocol Address)用于确定Internet上的每台主机，它是 每台主机唯一性的标识。在 Internet 上，每台计算机或网络设备的 IP 地 址是全世界唯一的。 IP 地址的格式是 xxx.xxx.xxx.xxx，其中 xxx 是 0 到 255 之间的任意整数。 例如，某台主机的 IP 地址是 61.172.201.232。
火狐浏览器
谷歌浏览器
21
1.5 创建第一个HTML5页面
编辑创建网页可以使用常用的文本编辑器，如Editplus、记事本等。但最方便 的网页制作工具是Dreamweaver，其智能化的输入代码方式、方便的可视化操作都 为网页制作和浏览提供了很大的方便。本节介绍在Dreamweaver 环境下创建网页的 步骤。
与前端开发对应的是后端开发，如果只做WEB前端的话，则只能供用户浏览而不 能与服务器交互。因此，要想开发一个用户体验更好、功能更强大的网站，我们就有必 要去学习一些后端技术。譬如PHP、JSP和等这些开发技术，通过这些编程 工具的使用，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。
网页设计与制作案例教程(HTML5+CSS3) 第1章网页基础
1.3 基础项目2：制作“陈欧介绍”网页
WEB
11
1.3 基础项目2：制作“陈欧介绍”网页 知识技能目标
（1）了解Dreamweaver工作界面，熟练掌握创建站点及网页的方法。 （2）初识超链接，能够为当前网页添加指向同站点内其它页面的超链接。 （3）了解HTML语言和CSS样式基本书写格式。 （4）掌握<style>标签的使用方法，能够使用<style>标签创建内部样式表。
网站程序开发
1.2.1 网 站 开 发 流 程
后 期 测 试 发 布
页面效果 链接有效性
浏览器兼容性 网站发布
视觉效果、布局、内容、亲 和力、易操作…… 所有链接是否都跳转正常、 所有页面是否均可到达…… 在各主流浏览器下均能正常 显示
本地发布、远程发布
测试过程通常也伴随着优化过程，优化是尽可能地减小网页文件的体积及日后发生错误的机率。
更改界面颜色
1.4.4 使用Dreamweaver CC 2018的几个小技巧 实时预览 快速更改代码（Ctrl+E） 同时编辑多行代码
WEB
13
1.5 提高项目：制作“青春颂歌”网页
14
1.6 拓展项目：制作“支付”网页
15
4
1.2 知识库：网页基础知识
1.2.1 网 站 开 发 流 程
前期准备
中期制作
后期测试 发布
WEB
5
1.2.1 网 站 开 发 流 程
前期准备 需求分析 确定主题 确定网站架构 收集素材 设计页面 导出效果图切片
功能分析、目标用户分析、内容分析等
1.2.1 网 站 开 发 流 程
中期制作
创建站点 静态页面制作
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的基本结构，能够区分两者的结构差异。
Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-HTML5标签
实训
（1）<header>标签
<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>
（2）<footer>标签
<footer>
COPYRIGHT@小北
</footer>
（3）<hgroup>标签
<hgroup>
<h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
<h2>HTML 5</h2>
</hgroup>
（4）<nav>标签
<nav>
<ul>
<li>HTML 5</lii>
<li>JavaScript</li>
</ul>
</nav>
（5）<aside>标签
<article>
<p>内容</p>
<aside>
<h1>作者简介</h1>
<p>小北，前端一枚</p>
</aside>
</article>
（6）<section>标签
<section>
<h1>section是啥？</h1>
Web前端开发HTML5 CSS3教案盒子模型教案
课程名称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）属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。
Web前端开发HTML5 CSS3教案HTML标记及其属性教案
学生观察自己 新建好的网页 文件基本结构
标记不区分大小写，但一般用小写。 可以同时使用多个标记共同作用，各标记之间的顺序任意。 2．标记的属性（15 分钟）
实训二 超星作业
课程名称
WEB 前端开发（1）
任务、项目、课题名称 HTML 标记及其属性
HTML 文档的基本结构
教学内容 HTML 标记
HTML 标记属性
了解 HTML 文档的基本结构
教学目标 掌握 HTML 标记的基本语法格式
掌握 HTML 标记属性规则
教学重点 HTML 标记的基本语法格式
教学难点 HTML 标记属性规则
属性的规则： 所有属性必须在开始标记里，不同属性间用空格隔开。 每个属性都有默认值，值放在相应的属性之后，用等号分隔；用双引号括
起来，双引号可省略。 属性之间顺序任意。
小结：（5 分钟）
（教师提问）
超选人功能， 学生总结回答
HTML 文档的基本结构 HTML 标记 HTML 标记属性
作业：
教学活动及主要环节
课次
3
课时 2 学时
学生活动
复习提问（5 分钟）
一学生回答，其
使用 DW 创建网页文件的步骤？ 导入新课：（3 分钟） 第一节课我们了解了如何查看网页源代码，HTML 标记语言构成了网页的具体内 容，因此了解和掌握 HTML 语言也是非常必要的，因此本章学习 HTML 语言的使 用。
余同学用电脑 操作
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
介绍万维网 的发明者，蒂姆・伯纳斯♦李，互联网之父，改变了人类的 生活。
引导 学生立大志，科技报
国，实现人生价值。
介绍万维网
的发明者， 蒂姆・伯纳 斯
♦李，互联 网之父，改变了人类的生活。
引导 学生立大 志，科技报 国，实现人 生价值。
一、HTML5 概述
HTML5主要优势：
*良好的移植性♦：♦更直观的结构
♦内容和样式分离新的表单元素♦更方便地嵌入音频和视频矢量图绘制。
二、常用的浏览器三大浏览器：IE浏览器（美国微软公司）、火狐FireFox （开源基金组织mozilla研发的产品是一家美国公司）、谷歌Chrome （推荐使用，美国公司）。
我国的浏览器：百度浏览器、360浏览器、UC浏览器、QQ浏览器三、常用的网页编辑软件HBilderX:本课程使用该软件。
Visual Studio CodeAdobe Dremweaver
Sublime Text四、任务实现：创建第一个网页
务・均目nHB*1.创建项目
执行菜单栏的“文件” I “新建”命令，选择“项目”，出现新建项目对话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。
2.新建文件在左侧
视图中，右击项目名称，执行“新建”命令，选择"html文件”，出现“新建html文件”对话框，输入文件名，单击“创建”按钮。
在网页文件代码的＜title＞与〈/title》之间，输入HTML文档的标题，这里输入：“第一个htm15网页”然后在＜body＞与＜/body＞标记之间写入
tst
m HBilderX 是由Dcloud 即数字天堂（北京）网络技术有限公司推出的一款支持HTML5 的Web开发编辑那，是一款优秀的国产免费软件，在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验。