HTML5+CSS3网页设计与制作课件：编写网页内容的结构_第1页
HTML5+CSS3网页设计与制作课件：编写网页内容的结构_第2页
HTML5+CSS3网页设计与制作课件：编写网页内容的结构_第3页
HTML5+CSS3网页设计与制作课件：编写网页内容的结构_第4页
HTML5+CSS3网页设计与制作课件：编写网页内容的结构_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5+CSS3网页设计与制作编写网页内容的结构项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容能够分析网页布局图，运用网页结构标签完成D清单页面结构代码。能够根据移动设备与传统电脑桌面的区别，在D清单网页输入正确的移动设备结构标签。任务目标

编写网页内容的结构本次任务要求使用VSCode开发工具，完成D清单网页HTML结构标签和移动设备设置代码的编写。任务描述图1-2-1编写完成的D清单网页HTML结构标签截图和效果图

编写网页内容的结构要完成D清单网页HTML结构和移动端设备设置代码的编写，需要：学习网页的结构，认识HTML5的结构标签；简要分析D清单移动端效果图的页面结构，完成其结构标签代码的编写；学习移动设备与传统桌面电脑的区别，认识移动设备的HTML结构标签，设置D清单的移动设备结构标签。任务分析

编写网页内容的结构知识与技能准备在HTML5文档中，必须包含<html></html>标记，并且放在HTML5文档中的开始和结束位置。其基本结构如下：注意：HTML标记不区分大小写。1、HTML5文件的基本结构12345678910<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML5基本结构</title></head><!--这是一个空白页面，在浏览器中不会展现任何内容--><body></body></html>知识与技能准备一个基本的HTML5网页由以下几部分构成。（1）<!DOCTYPEhtml>声明。（2）<html></html>标记。（3）<head></head>标记。（4）<body></body>标记。（5）<!-->标记。1、HTML5文件的基本结构知识与技能准备HTML5文件基本结构标签的层级关系如图2-2所示。1、HTML5文件的基本结构HTML文档开始标签<html>头标签<head>标题标签<title>身体标签<body>其他标签样式代码

图1-2-2

HTML5文件基本结构标签的层级关系打开VisualStudioCode，输入如下标签：

课堂练习1-2-1录入一个完整的网页结构标签1234567891011<!doctypehtml><html><head><metacharset="UTF-8"><title>HTML5基本结构</title></head><!--这是注释--><body><p>这是一个完整的网页结构标签</p></body></html>知识与技能准备HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。图1-2-2就是HTML5新标签带来的新布局：HTML5新增结构标签分为主体结构标签和非主体结构标签。2、HTML5新增的结构标签图1-2-2网页布局知识与技能准备2.1HTML5新增主体结构标签（元素）（1）article元素article代表文档，页面或程序中相对独立、完整的部分，通常用article包裹。例如文章一样，里头依然可以包括header、section等元素。（2）section元素区块元素，用于页面内容的独立分块，往往是文章的一段。通常由内容和标题组成，没有标题的内容不推荐使用section。（3）nav元素导航区块元素，作为导航连接组使用。通常用于导航栏、侧边导航栏等，使用频率高。（4）aside元素表示当前或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等。（5）time元素定义日期或时间，代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。知识与技能准备2.2HTML5新增非主体结构标签（元素）（1）header元素定义文档的页眉，具有引导和导航作用的结构元素。header标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括其它标签，比如表格、列表、表单、nav标签等，使用频率极高。（2）footer元素文档的脚注，一般是一个页面的尾部信息。通常内容为联系信息、相关阅读、版权信息等，使用频率高。（3）hgroup元素hgroup元素是将标题及其子标题进行分组的元素（标题比较多的场合下使用）。hgroup元素通常会将

h1~h6元素进行分组，使用频率高。（4）address元素用来呈现用户的联系方式，通常内容为作者、网站链接、电子邮箱、地址、电话号码等，使用频率低。打开VisualStudioCode，输入如下标签：课堂练习1-2-2完成图1-2-2所示网页布局的结构标签12345678910111213141516171819202122<!doctypehtml><head><metacharset="UTF-8">

<title>HTML5新增结构标签</title></head><body><!--网页内容头部--><header><nav></nav></header><!--网页内容主体部分--><divclass="main"><article><section></section><section></section></article><aside></aside></div><!--网页内容底部--><footer></footer></body></html>知识与技能准备智能手机和平板电脑的Web应用与传统桌面电脑的应用相比，存在以下两点区别：（1）硬件的配置。（2）屏幕的大小。为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。3、移动设备的HTML基本结构图1-2-3浏览器默认viewport的宽度知识与技能准备一个常用的针对移动网页优化过的页面的viewportmeta标签大致如下：width：控制viewport的大小，可以指定的一个值。height：和width相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalabl：是否禁用其缩放（zooming）功能。3、移动设备的HTML基本结构<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">打开VisualStudioCode，输入如下标签：课堂练习1-2-3录入一个完整的移动设备网页结构标签1234567891011121314151617181920<!doctypehtml><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1">

<title>移动设备的HTML网页结构标签</title></head><body><!--网页内容头部--><header></header><!--网页内容主体部分-->

<article><section></section><section></section>

</article><!--网页内容底部--><footer><nav></nav></footer></body></html>任务实施1、打开VisualStudioCode软件，新建文件，并将该文件保存为index.html。2、简要分析D清单移动端页面效果图，可知其主要包括头部、主体内容和底部版权信息。3、根据分析完成D清单网页HTML结构的编写，并结合前面对移动设备设置的学习，完成D清单的移动端设备设置代码。参考代码如下：12345678910111213141516<!doctypehtml><!--声明--><head><metacharset="UTF-8">

<!--移动端设备设置--><metaname="viewport"content="width=device-width,initial-scale=1">

<title>D清单</title></head><body>

<!--网页内容头部--><header><nav></nav></header><!--网页内容主体部分-->

<article><section></section>171819202122232425262728293031<section></section><section></section>

</article><!--此处内容为网页主体部分内容，可根据需要自行添加---><article><section><address></address>

<address></address></section><se

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

温馨提示

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

最新文档

评论

0/150

提交评论