HTML5+CSS3网页设计与制作课件：添加段落和文字_第1页
HTML5+CSS3网页设计与制作课件：添加段落和文字_第2页
HTML5+CSS3网页设计与制作课件：添加段落和文字_第3页
HTML5+CSS3网页设计与制作课件：添加段落和文字_第4页
HTML5+CSS3网页设计与制作课件：添加段落和文字_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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添加网页中的段落和文字内容。任务目标

添加段落和文字本次任务要求根据D清单网页内容，使用HTML格式化标签，在基础上添加文字和段落内容。完成后的效果图如图1-3所示。任务描述图1-3添加文字和段落内后的网页效果图

添加段落和文字要完成D清单网页文本和段落内容的编写，需要：学习标题、段落和其它常见文本标签的使用；分析D清单页面中的文本和段落内容，正确使用格式化标签完成D清单网页内容制作。任务分析图1-3-1D清单网页部分标题与段落分析图

添加段落和文字知识与技能准备HTML文档中包含有各种级别的标题，各种级别的标题由<h1>到<h6>标签来定义，<h1>到<h6>标题标签中的字母h是英文headline（标题行）的简称。其语法形式如下：1、标题标签<h1>~<h6>1级标题：<h1></h1>2级标题：<h2></h2>……6级标题：<h6></h6>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-3-1显示6级标题的效果123456<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>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-3-2使用标题和段落的网页1234567891011121314<h1>W3C的介绍</h1><p>W3C指万维网联盟，它是建立于1994年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发web世界的全部潜能。</p><p>W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。</p><p>为了简化网站代码，降低网站建设的成本，保证网站在长期互联网环境中能有效，加强网站的兼容性，能适应不同的网络设备和网络终端。我们在建设网站时应该要保证代码符合W3C规范。</p>显示效果如下：课堂练习1-3-2使用标题和段落的网页图1-3-3使用了标题和段落的网页知识与技能准备在HTML中，换行需要使用<br/>标签来完成。换行标签<br/>是一个单标签，它没有结束标答，是英文单词break的缩写，作用是将文字在一个段内强制换行。使用换行标签时，在需要换行的位置添加<br/>标签即可。其语法形式如下：3、换行标签<br/>换行标签<br/>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-3-3使用换行标签编写网页123456<p>

我轻轻的来<br/>

正如我静静的走<br/>

挥一挥衣袖<br/>

不带走一片云彩</p>显示效果如下：课堂练习1-3-3使用换行标签编写网页图1-3-4使用换行标签的网页知识与技能准备div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。div元素是通用的，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面布局。其语法形式如下：注释：HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前面所讲过的p，h1，div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height（高度）属性不起作用，如后面要讲的span，a等元素。4、通用div块元素<div><div>…任何网页元素（标签）</div>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-3-4使用div分割文档12345678<div><h1></h1><p>制作酒店宣传单页的内容</p></div><div><h1></h1><p>使用CSS3设置网页格式</p></div>显示效果如下：课堂练习1-3-4使用div分割文档图1-3-5使用div分割文档知识与技能准备span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式（在后面的章节中会进行详细讲解）时，它才会产生视觉上的变化。span标签在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果。span标签本身没有任何属性。其语法形式如下：5、通用内联元素<span><span>要修改样式的文字</span>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-3-5使用span标签分隔文档12345678<div><h2></h2><p>这是中的<span>span</span></p></div><div><h2></h2><p>这是中的<span>span</span></p></div>显示效果如下：课堂练习1-3-5使用span标签分隔文档图1-3-5使用div分割文档知识与技能准备除了用段落和标题组织文本，有时还需要使用短语元素来指定标记之间的文本的上下文与含义。6、常见的短语元素格式标签及应用功能应用效果<strong>内容</strong>强调文本，加粗显示内容<em>内容</em>强调标签，字体被加斜体效果内容<sup>上标</sup>上标标签内容上标<sub>下标</sub>下标标签内容下标<mark>内容</mark>记号文本，高亮显示内容表1-3-1常见的短语元素任务实施1、打开中的index.html文件。2、分析D清单效果图的标题、段落等内容，完成D清单网页中标题和段落的代码编写。参考代码如下：123456789101112131415161718192021222324<body><header><nav></nav></header><article><h1>达成更多，用心生活。</h1><p>与全球千万用户一起，在D清单中记录和规划大小事务。<br>

用更少的时间达成目标，从冗杂的待办事项中解脱出来。</p></article><article><section><h1>使用D清单规划好每一天</h1><p>从记录到管理，D清单能帮你把一切打理得井井有条，你可以充分享受高效生活的乐趣。</p></section><section></section><section><h3>文件夹，清单，任务和子任务</h3>

<p>当你记录的事情越来越多，那么合理的组织就尤为重要了。D清单提供了四个层级，你可以根据任务的分类进行整理，将它们移动到“工作”、“个人”或“家庭”里去。</p>252627282930313233343536373839404142434445464748<h3>标签</h3>

<p>在使用清单分类的基础上，你还可以为任务打上标签，用来标识“情境”、“状态”或其他，以便更加灵活的进行筛选。</p><h3>多优先级</h3><p>为了保证你将精力花在重要的事情上，D清单提供了四个优先级，你可以根据事情的重要程度进行分类。</p><h3>排序</h3><p>D清单共支持6种排序方式，不管是按时间顺序查看、还是按重要程度查看，你都能以你希望的方式来排序任务。</p><h3>统计</h3><p>你可以查看每周的“完成率”和“最佳工作日”，在“最近已完成”了解近期取得的成果，通过“最佳专注时段”找到注意力最集中的时间段。</p>

<h3>搜索</h3>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论