项目一 第一阶段 任务3 添加段落和文字-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件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文档中包含有各种级别的标题，各种级别的标题由<h1>到<h6>标签来定义，<h1>到<h6>标题标签中的字母h是英文headline（标题行）的简称。 其语法形式如下： 1、标题标签<h1>~<h6> 1级标题：<h1></h1> 2级标题：<h2></h2> …… 6级标题：<h6></h6> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-3-1 显示6级标题的效果 1 2 3 4 5 6 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> 显示效果如下： 课堂练习1-3-1 显示6级标题的效果 图1-3-2 标题标签的使用 知识与技能准备 段落标签为<p></p>，在<p>开始标签和</p>结束标签之间的内容形成一个段落。段落标签中的p是英文单词paragraph（段落）的首字母，用来定义网页中的一段文本，文本在一个段落中会自动换行。其语法形式如下： 2、段落标签<p> <p>段落文字</p> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-3-2 使用标题和段落的网页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>W3C的介绍</h1> <p>W3C 指万维网联盟，它是建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。 </p> <p>W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。 </p> <p>为了简化网站代码，降低网站建设的成本，保证网站在长期互联网环境中能有效，加强网站的兼容性，能适应不同的网络设备和网络终端。我们在建设网站时应该要保证代码符合W3C规范。 </p> 显示效果如下： 课堂练习1-3-2 使用标题和段落的网页 图1-3-3 使用了标题和段落的网页 知识与技能准备 在HTML中，换行需要使用<br/>标签来完成。换行标签<br/