资源简介 (共29张PPT)HTML5+CSS3网页设计与制作使用HTML5+CSS3制作响应式网页项目一项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1 项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1 时间段2 时间段3 时间段4 时间段5分析规划实施阶段1 移动端内容制作阶段2 移动端格式制作阶段3 响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容第一阶段能够表述常见HTML格式化文本标签的含义。能够在网页中按内容语义正确应用HTML文本标签。能够在分析D清单网页效果图基础上，使用HTML添加网页中的段落和文字内容。任务目标任务3 添加段落和文字本次任务要求根据D清单网页内容，使用HTML格式化标签，在任务2基础上添加文字和段落内容。完成后的效果图如图1-3所示。任务描述图1-3 添加文字和段落内后的网页效果图任务3 添加段落和文字要完成D清单网页文本和段落内容的编写，需要：学习标题、段落和其它常见文本标签的使用；分析D清单页面中的文本和段落内容，正确使用格式化标签完成D清单网页内容制作。任务分析图1-3-1 D清单网页部分标题与段落分析图任务3 添加段落和文字知识与技能准备HTML文档中包含有各种级别的标题，各种级别的标题由到标签来定义，到标题标签中的字母h是英文headline（标题行）的简称。其语法形式如下：1、标题标签~1级标题：2级标题：……6级标题：打开Visual Studio Code软件，在标签中输入如下代码：课堂练习1-3-1 显示6级标题的效果1 2 3 4 5 6 这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题显示效果如下：课堂练习1-3-1 显示6级标题的效果图1-3-2 标题标签的使用知识与技能准备段落标签为，在开始标签和结束标签之间的内容形成一个段落。段落标签中的p是英文单词paragraph（段落）的首字母，用来定义网页中的一段文本，文本在一个段落中会自动换行。其语法形式如下：2、段落标签段落文字打开Visual Studio Code软件，在标签中输入如下代码：课堂练习1-3-2 使用标题和段落的网页1 2 3 4 5 6 7 8 9 10 11 12 13 14 W3C的介绍W3C 指万维网联盟，它是建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。为了简化网站代码，降低网站建设的成本，保证网站在长期互联网环境中能有效，加强网站的兼容性，能适应不同的网络设备和网络终端。我们在建设网站时应该要保证代码符合W3C规范。显示效果如下：课堂练习1-3-2 使用标题和段落的网页图1-3-3 使用了标题和段落的网页知识与技能准备在HTML中，换行需要使用标签来完成。换行标签是一个单标签，它没有结束标答，是英文单词break的缩写，作用是将文字在一个段内强制换行。使用换行标签时，在需要换行的位置添加标签即可。其语法形式如下：3、换行标签换行标签打开Visual Studio Code软件，在标签中输入如下代码：课堂练习1-3-3 使用换行标签编写网页1 2 3 4 5 6 我轻轻的来正如我静静的走挥一挥衣袖不带走一片云彩显示效果如下：课堂练习1-3-3 使用换行标签编写网页图1-3-4 使用换行标签的网页知识与技能准备div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。div元素是通用的，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面布局。其语法形式如下：注释：HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前面所讲过的p，h1，div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height（高度）属性不起作用，如后面要讲的span，a等元素。4、通用div块元素…任何网页元素（标签）打开Visual Studio Code软件，在标签中输入如下代码：课堂练习1-3-4 使用div分割文档1 2 3 4 5 6 7 8 第一阶段制作酒店宣传单页的内容第二阶段使用CSS3设置网页格式显示效果如下：课堂练习1-3-4 使用div分割文档图1-3-5 使用div分割文档知识与技能准备span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式（在后面的章节中会进行详细讲解）时，它才会产生视觉上的变化。span标签在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果。span标签本身没有任何属性。其语法形式如下：5、通用内联元素要修改样式的文字打开Visual Studio Code软件，在标签中输入如下代码：课堂练习1-3-5 使用span标签分隔文档1 2 3 4 5 6 7 8 第一阶段这是第一阶段中的span第二阶段这是第二阶段中的span显示效果如下：课堂练习1-3-5 使用span标签分隔文档图1-3-5 使用div分割文档知识与技能准备除了用段落和标题组织文本，有时还需要使用短语元素来指定标记之间的文本的上下文与含义。6、常见的短语元素格式标签及应用 功能 应用效果内容 强调文本，加粗显示 内容内容 强调标签，字体被加斜体效果 内容上标 上标标签 内容上标下标 下标标签 内容下标内容 记号文本，高亮显示 内容表1-3-1常见的短语元素任务实施1、打开任务2中的index.html文件。2、分析D清单效果图的标题、段落等内容，完成D清单网页中标题和段落的代码编写。参考代码如下：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 达成更多，用心生活。 与全球千万用户一起，在D清单中记录和规划大小事务。 用更少的时间达成目标，从冗杂的待办事项中解脱出来。 使用D清单 规划好每一天 从记录到管理，D清单能帮你把一切打理得井井有条，你可以充分享受高效生活的乐趣。 文件夹，清单，任务和子任务 当你记录的事情越来越多，那么合理的组织就尤为重要了。D清单提供了四个层级，你可以根据任务的分类进行整理，将它们移动到“工作”、“个人”或“家庭”里去。 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 标签在使用清单分类的基础上，你还可以为任务打上标签，用来标识“情境”、“状态”或其他，以便更加灵活的进行筛选。多优先级为了保证你将精力花在重要的事情上，D清单提供了四个优先级，你可以根据事情的重要程度进行分类。排序D清单共支持6种排序方式，不管是按时间顺序查看、还是按重要程度查看，你都能以你希望的方式来排序任务。统计你可以查看每周的“完成率”和“最佳工作日”，在“最近已完成”了解近期取得的成果，通过“最佳专注时段”找到注意力最集中的时间段。 搜索使用搜索功能精准查询任务。目前，很多行业上的信息都出现在网络上，每个行业都有自己的行业特性，如数学、物理和化学都有特殊的符号。那么该如何在网页上显示这些特殊字符呢？任务拓展任务3 添加段落和文字 展开更多...... 收起↑ 资源预览
使用D清单 规划好每一天 从记录到管理，D清单能帮你把一切打理得井井有条，你可以充分享受高效生活的乐趣。 文件夹，清单，任务和子任务 当你记录的事情越来越多，那么合理的组织就尤为重要了。D清单提供了四个层级，你可以根据任务的分类进行整理，将它们移动到“工作”、“个人”或“家庭”里去。 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 标签在使用清单分类的基础上，你还可以为任务打上标签，用来标识“情境”、“状态”或其他，以便更加灵活的进行筛选。多优先级为了保证你将精力花在重要的事情上，D清单提供了四个优先级，你可以根据事情的重要程度进行分类。排序D清单共支持6种排序方式，不管是按时间顺序查看、还是按重要程度查看，你都能以你希望的方式来排序任务。统计你可以查看每周的“完成率”和“最佳工作日”，在“最近已完成”了解近期取得的成果，通过“最佳专注时段”找到注意力最集中的时间段。 搜索使用搜索功能精准查询任务。目前，很多行业上的信息都出现在网络上，每个行业都有自己的行业特性，如数学、物理和化学都有特殊的符号。那么该如何在网页上显示这些特殊字符呢？任务拓展任务3 添加段落和文字 展开更多...... 收起↑