版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务5-1布局概述
任务5-2布局常用属性
任务5-3布局类型任务5-1布局概述网页布局是指网页上的各种元素，如文字、图片、视频、按钮等的展示和组织方式。网页布局的目的是使页面的内容更易于理解和浏览，同时增强网站的视觉吸引力。div + CSS是Web的一种标准，也是一种网页的布局方法。div + CSS布局是采用<div>标签配合CSS实现对网页标签定位的一种布局方法。此种定位方式不同于传统的表格(table)布局定位方式，它可真正实现网页内容与表现相分离的效果。这里div为division的缩写，意思为划分，也可以称为层或区块。通过合理的网页布局设计，可以让页面内容更加有序、整洁，并且使用户更容易找到自己需要的信息。div + CSS布局的主要优点如下：(1)网页和表现内容分离，便于站点重构页面。(2)结构清晰，对搜索引擎更加友好。(3)便于Web项目开发分工协作。1. div标签<div>标签常用于对块进行标记，以便通过样式表来对<div>标签标记块进行格式化。<div>标签可以把文档分割为独立的、不同的部分。如果用id或class来标记<div>标签，那么该标签的作用会变得更加明显。1) <div>标签的基本语法<div>标签的基本语法格式如下： <div
id="id选择符">文字或图像</div>或 <divclass="类选择符">文字或图像</div>2) <div>标签的常用属性<div>标签的常用属性如下：(1) position属性：表示层的定位方式。(2) left和top属性：定义层的位置，与之并列的还有right和bottom属性，这4个属性用来设置层的位置。(3) width和height属性：定义层的宽度和高度。(4) float属性：定义层的浮动方式。(5) clear属性：定义清除属性，表示层是否允许在某个元素的周围有浮动元素，即是否去掉某个位置的浮动元素。(6) z-index属性：设置区域的上下层关系，相当于三维空间的z坐标，z-index属性值越大，其位置就越高。表5-1为<div>标签的属性及说明。2. span标签<span>标签与<div>标签一样也是一个容器元素，被广泛运用在网页制作中。<span>标签用来组合文档中的行内元素。<span>元素是一个内联元素，它包围的元素不会自动换行。<span>标签没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。<span>标签的基本语法如下：<span
id="指定样式名称">文本</span>3.使用div+CSS布局的流程为了提高网页制作的效率，布局时通常要遵循一定的布局流程，使用div+CSS布局的具体流程如下：(1)确定页面的版心宽度。版心是指浏览器内显示内容的有效面积，显示内容在浏览器窗口中一般是居中显示的。浏览器显示内容的最大面积是由显示器的分辨率决定的。目前显示器的分辨率大多在1024 × 768px(像素)以上，可设置版心宽度1000px。在设计网站时应尽量适配主流的屏幕分辨率。常见网页的宽度值为960px、980px、1000px和1200px等。(2)分析页面中的模块。在运用CSS布局之前，首先要对页面有一个整体的规划，用笔画出页面的草图，页面中包括的模块及模块间的关系。(3)控制网页的各个模块。当分析完页面的布局后，就可以运用盒子模型的原理，通过div + CSS布局来控制网页的各个模块了。初学者在制作网页时，一定要养成分析页面布局的习惯，这样可以提高网页制作的效率。任务5-2布局常用属性div + CSS布局通常有3种方式，分别是静态布局、浮动布局和定位布局。1.静态布局静态布局，其特点是将网页中各种布局标签按照其在HTML代码中的顺序从上而下依次显示。块级元素生成的是一个矩形框，它按照在文档中出现的位置正常定位显示，没有偏移量。在静态布局的网页中，用户无须设置网页各种布局标签的边距属性。例如，一个典型的HTML文档，其<body>标签中的内容通常由头部(header)、导航栏(nav)、内容(content)和页尾(footer)4个部分组成，使用<div>标签建立这4个部分所在的层，代码如下：<divclass="header1">网页的头部标签，通常包括网页的Logo、Banner和搜索框等</div><divclass="nav1">网页的导航条标签，完成站点导航的超链接。</div><divclass="content1">网页的内容标签，主要包括网站的各种版块栏目</div><divclass="footer1">网页的页尾标签，主要包含网页的版权信息及友好链接等内容</div>4个部分及<body>的样式代码如下：静态布局的显示效果如图5-6所示。静态布局的优点是结构简单，与各浏览器兼容性好，缺点是无法实现左右分栏的样式效果。2.浮动布局浮动布局的作用是，定义网页布局标签脱离网页的流动布局结构后显示的方向。在网页设计中，浮动布局可应用于多个方面，如实现文本环绕图像或实现浮动的块状标签布局。它是目前最主要的布局方法。为元素设置浮动，可以使页面元素变得整齐有序。1)认识浮动浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。定义浮动的基本语法格式如下：选择器{float:属性值;}float常用的属性值有3个，如表5-2所示。2)清除浮动运用clear属性清除浮动。其基本语法格式为：选择器{clear:属性值;}clear的常用属性值有3个，如表5-3所示。运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。3.定位布局在CSS中，使用定位属性可以实现网页中元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。1)定位模式position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值；}position的常用属性值如表5-4所示。2)边偏移通过边偏移属性top、bottom、left或right来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如表5-5所示。任务5-3布局类型使用div+CSS可以进行多种类型的布局，常见的布局类型有单列布局、双列布局、三列布局3种类型。本任务将对这3种布局进行详细讲解。1.单列布局单列布局是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。如图5-9是一个单列布局页面的结构示意图。从图5-9中可以看出，单列布局页面从上到下分别为头部(header)、导航栏(nav)、焦点图(banner)、内容(content)和页尾(footer)，每个部分独占一行，且宽度与版心相等。图5-10是一个典型的单列布局网页。2.双列布局双列布局和单列布局类似，只是网页内容被分为了左右两部分。图5-11是一个双列布局页面的结构示意图。3.三列布局对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用三列布局的页面布局方式，如图5-12当当网的内容部分就是左、中、右布局。三列布局方式只是将主体内容分成了左、中、右三部分。图5-13是一个三列布局页面的结构示意图。4.全新的HTML5结构元素在使用div + CSS布局时，需要通过为div命名的方式来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签。图5-14给出了HTML5中新增的结构元素。1) header标签HTML5中的<header>标签是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。<header>标签基本语法格式如下：在HTML网页中，并不限制<header>标签的个数，一个网页中可以使用多个<header>标签，也可以为每一个内容块添加<header>标签。2) nav标签<nav>标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。<nav>标签的基本语法格式如下：3) footer标签<footer>标签用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与<header>标签一样，在一个页面中也可以包含多个<footer>标签。4) article标签<article>标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该标签经常被用于定义一篇日志、一条新闻或用户评论等。5) section标签<section>标签用于对网站或应用程序中页面上的内容进行分块，一个<section>标签通常由内容和标题组成。需要注意的是：(1)不要将<section>标签用作设置样式的页面容器，那是div的特性。(2)如果<article>标签、<aside>标签或<nav>标签更符合使用条件，那么就不要使用<section>标签。(3)没有标题的内容
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论