第5.4 网页版面的布局技术23ppt课件.ppt

在此输入您的封面副标题第5.4 网页版面的布局技术23中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著：编著：李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲：主讲： 李红李红第第5 5章章 几种典型的网页布局技术几种典型的网页布局技术 中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B DIV+CSS布局本节主要内容：块元素与内联元素块元素与内联元素 5.4.2 div标签标签5.4.4 div+CSS的用法的用法5.4.3 向向div+CSS的布局转变的布局转变中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 1.块元素块元素 块元素块元素(block element)是矩形的，有自己的高度和宽度是矩形的，有自己的高度和宽度。块元素一般是其他元素的容器元素，块元素一般都从新。块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素，块状元素前行开始，它可以容纳内联元素和其他块元素，块状元素前后元素会换行。常见块标签有：后元素会换行。常见块标签有： p - 段落段落 table - 表格表格 div - 常用块级容易，也是常用块级容易，也是css layout的主要标签的主要标签 form - 交互表单交互表单 ul 和和ol无序列表、排序列表无序列表、排序列表 h1 - h6 大标题大标题 menu - 菜单列表菜单列表 address - 地址地址 中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 2.内联元素内联元素 内联元素内联元素(inline element)，又叫内嵌元素或行内元素，又叫内嵌元素或行内元素，和块级元素相反，内联元素没有固定形状，也没无法设置和块级元素相反，内联元素没有固定形状，也没无法设置宽度和高度，行内元素前后元素不会换行。内联元素一般宽度和高度，行内元素前后元素不会换行。内联元素一般都是基于语义级都是基于语义级(semantic)的基本元素，只能容纳文本或的基本元素，只能容纳文本或者其他内联元素，常见内联元素是者其他内联元素，常见内联元素是标签和标签和标标签。签。 块元素块元素(block element)和内联元素和内联元素(inline element)都是都是html规范中的概念。块元素和内联元素的基本差异是块元规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了素一般都从新行开始。而当加入了CSS控制以后，块元素控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素完全可以把内联元素cite加上加上display:block这样的属性，这样的属性，让他也有每次都从新行开始的属性。让他也有每次都从新行开始的属性。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B div标签标签 1.定义和用法定义和用法 可定义文档中的分区或节（可定义文档中的分区或节（division/section）。）。标签可以把文档分割为独立的、不同的部分。它可标签可以把文档分割为独立的、不同的部分。它可以用作严格的文档组织工具，并且不使用任何格式与其关以用作严格的文档组织工具，并且不使用任何格式与其关联。如：联。如： News headline 2 some text. some text. some text. 2.的属性的属性 标签可以有一个标签可以有一个align属性，但属性，但HTML5也不推荐使也不推荐使用，其他属性是用，其他属性是HTML的全局属性，常用的有的全局属性，常用的有id、class或或style，如果用，如果用id或或class来标记来标记 ，那么该标签的作，那么该标签的作用会变得更加有效。用会变得更加有效。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 3.用法用法 是一个块级元素。这意味着它的内容自动地开始一是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是个新行。实际上，换行是 固有的唯一格式表现。可固有的唯一格式表现。可以通过以通过 的的 class 或或 id 应用额外的样式。应用额外的样式。 div+CSS布局的核心是运用布局的核心是运用div标签，它和标签，它和CSS相结合可相结合可以精准的定位页内元素。以精准的定位页内元素。DIV元素就是一个容器，是用来元素就是一个容器，是用来为为HTML文档块内容提供结构和背景的元素，本身没有任文档块内容提供结构和背景的元素，本身没有任何语义。何语义。DIV是双标签，起始标签和结束标签之间的所有是双标签，起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用标签的属性来控制，或者是通过使用CSS来进行控制来进行控制。DIV用于设定文字、图像、表格等的摆放位置，当你把用于设定文字、图像、表格等的摆放位置，当你把文字、图象，或其他的放在文字、图象，或其他的放在 DIV 中，它可称作为中，它可称作为“DIV block”，或，或“DIV element”。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 向向div+CSS的布局转变的布局转变 DIV+CSS布局与表格布局相比有哪些特点呢？布局与表格布局相比有哪些特点呢？ 表格布局容易上手，可以形成复杂的变化，简单快速，表表格布局容易上手，可以形成复杂的变化，简单快速，表现上更加现上更加“严谨严谨”，在不同的浏览器中都能得到很好的兼，在不同的浏览器中都能得到很好的兼容。但是如果你的网站有布局变化的需要时，表格布局就容。但是如果你的网站有布局变化的需要时，表格布局就需要重新设计，再加上需要重新设计，再加上table标签中标签中tr、td的改动，页面变的改动，页面变化会很大，基本上需要重新设计，并会影响你前期做好一化会很大，基本上需要重新设计，并会影响你前期做好一些排名和搜索基础。用些排名和搜索基础。用DIV+CSS布局的网页就不同了，布局的网页就不同了，设计者可以把网页的主要表达内容放在设计者可以把网页的主要表达内容放在div里，而把控制里，而把控制表现形式的内容写在表现形式的内容写在CSS里。如果网页需要改动，只要表里。如果网页需要改动，只要表达内容不变，页面的结构布局的改动就不会太大，也就对达内容不变，页面的结构布局的改动就不会太大，也就对搜索引擎的影响不大了。搜索引擎的影响不大了。DIV+CSS布局可以实现网站整布局可以实现网站整体风格的统一，让网页一边载入一边显示，可以让网页变体风格的统一，让网页一边载入一边显示，可以让网页变得更小，可以很简单实现网页换肤等表现。得更小，可以很简单实现网页换肤等表现。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B div+CSS的用法的用法 是一个块级元素，这意味着它的内容自动地开始一是一个块级元素，这意味着它的内容自动地开始一个新行。实际上，换行是个新行。实际上，换行是 固有的唯一格式表现。固有的唯一格式表现。标签通过使用标签通过使用CSS来进行控制会更显威力，它最终来进行控制会更显威力，它最终目的是给设计者另一种组织能力，也具有所有标签的目的是给设计者另一种组织能力，也具有所有标签的class、style、title、id 等属性。可以通过等属性。可以通过 的的 class 或或 id 应用其他定义的样式。应用其他定义的样式。 对对 元素应用元素应用 class 或或 id 属性（常见的情况是只应属性（常见的情况是只应用其中一种），这两者的主要差异是：用其中一种），这两者的主要差异是：class 用于元素组用于元素组（类似的元素，或者可以理解为某一类元素），而（类似的元素，或者可以理解为某一类元素），而 id 用用于标识单独的唯一的元素。于标识单独的唯一的元素。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 第一部分：第一部分：设计设计div，放置内容。，放置内容。部分的代码如下：部分的代码如下： 第二部分：第二部分：编辑编辑CSS样式样式，部分的样式代码如下：部分的样式代码如下：<div id=header><div id=nov> <div id=article> <div id=section><div id=sidebar><div id=footer>中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 30px;width: 550px;background-color: #999;margin: 5px;text-align: center;#footer float: left;#article background-color: #999;margin: 2px;height: 80px;width: 300px;float: left;body background-color: #FF3;#section background-color: #666;margin: 3px;height: 50px;width: 295px;#sidebar margin: 2px;height: 80px;width: 242px;float: left;background-color: #999;#dd margin: 5px;中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 2016.9 B CSS块元素；块元素； div标签；标签； div+CSS布局网页的方法。布局网页的方法。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B HTML5布局布局本节主要内容：5.5.1 HTML5新增的结构元素新增的结构元素5.5.2 HTML5布局实例布局实例中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B HTML5新增的结构元素新增的结构元素1.HTML5的主结构元素的主结构元素表是表是HTML5的新增加的主体结的新增加的主体结构标签。构标签。标签标签含义含义header定义一个页面或一个区域的头部内容。旨在作为网页的一个片段，增个页面的介绍信息的“容器”。它可以包含网站的名称、标记线、广告或者公司的LOGO标志。nav该元素应用于构建导航。article标记定义一篇文章，代表一个独立的、完整的相关内容块。section该标签一般应用于文章的章节、标签对话框中的标签页、或者论文中有编号的部分。aside该元素用来表示当前页面或文章的附属部分，该部分内容是与主要内容相关的内容，但并不属于主要内容的一部分。通常应用于侧边栏相关链接，广告等等。footer此元素定义一个网页文档或section区域的底部内容。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B header元素和元素和footer元素。元素。 header元素和元素和footer元素用于构建元素用于构建HTML5文档的页眉和文档的页眉和页脚区域，也可以作为其他区域的页脚区域，也可以作为其他区域的header和和footer部分。部分。一个一个HTML5文档中可以有多个文档中可以有多个header和和footer元素。元素。 header元素元素在布局中置于一个页面的头部，可以用来定在布局中置于一个页面的头部，可以用来定义一个页面的头部内容，就是页眉部分信息的义一个页面的头部内容，就是页眉部分信息的“容器容器”，可以包含网站的名称、标记线、广告口号或者公司的可以包含网站的名称、标记线、广告口号或者公司的LOGO标志等内容。标志等内容。 footer元素元素在布局中置于一个页面的底部，可以提供有关在布局中置于一个页面的底部，可以提供有关该页面的其他的信息内容。例如网站建设着的一些信息、该页面的其他的信息内容。例如网站建设着的一些信息、相关文章的链接或者版权信息等等。如案例相关文章的链接或者版权信息等等。如案例5-7。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 2016.9 B aside元素元素。 网页布局中，常有与主文章（网页布局中，常有与主文章（article）或主要内容（）或主要内容（section）相关的一块内容，但并不属于主要内容的一部）相关的一块内容，但并不属于主要内容的一部分，我们称之为分，我们称之为“边栏边栏”。这块内容我们可以用。这块内容我们可以用aside元元素来定义，素来定义，aside元素中的内容是重要的引文、相关链接元素中的内容是重要的引文、相关链接或广告等等。或广告等等。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B html5的标签的的标签的id属性和属性和clsss属性属性。 以上以上6种种HTML5布局标签仅仅是语义化的布局标签，没有布局标签仅仅是语义化的布局标签，没有任何明确的意义，在布局中可能会多次使用某个标签，最任何明确的意义，在布局中可能会多次使用某个标签，最好为每个容器添加一个好为每个容器添加一个id属性，为每个标签定义一个名称属性，为每个标签定义一个名称，以便于用，以便于用CSS来定义它们的区域表现样式。来定义它们的区域表现样式。 如果要为多个区块定义相同的样式，可以使用如果要为多个区块定义相同的样式，可以使用class属性属性。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 标签。标签。 标签用于对网页或区段（标签用于对网页或区段（section）的标题元素）的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的）进行组合。例如，在一个区段中你有连续的h1-h6系列的标签元素，则可以用系列的标签元素，则可以用hgroup将它们括起来。将它们括起来。 标签。标签。 标签规定独立的流内容（图像、图表、照片、代标签规定独立的流内容（图像、图表、照片、代码等等），码等等），figure 元素的内容应该与主内容相关，但如果元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。一般在图像的排版中被删除，则不应对文档流产生影响。一般在图像的排版中运用，假如我们的页面中包含很多产品图像，如果要让所运用，假如我们的页面中包含很多产品图像，如果要让所有的图片有相同的尺寸，并且一行排列，我们需要运用有的图片有相同的尺寸，并且一行排列，我们需要运用标签。下面我们给出标签。下面我们给出标签的用法：标签的用法：中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 标签标签。 标签用来定义一个视频内容。标签用来定义一个视频内容。 标签。标签。 标签用来定义音频内容。标签用来定义音频内容。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B HTML5布局实例布局实例 【案例案例5-9】 第第1部分：编写部分：编写HTML5布局标签布局标签。 首先，写清楚首先，写清楚HTML5的文档声明：的文档声明：。按。按照照HTML5的结构标签编写网页文档结构代码。如下：的结构标签编写网页文档结构代码。如下：中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 第第2部分：设计部分：设计CSS布局标签显示效果。布局标签显示效果。 HTML5布局元素的显示效果是布局元素的显示效果是CSS3渲染的，渲染的，CSS3的代的代码可以和码可以和HTML5的代码放在同一个文件，也可以是独立的代码放在同一个文件，也可以是独立的文件，只要在的文件，只要在HTML5文件里引用即可。文件里引用即可。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 2016.9 B html5布局（结构）元素；布局（结构）元素； Html5多媒体元素；多媒体元素； html5布局网页的方法。布局网页的方法。中国铁道出版社电子商务网页设计（第2版）课件 2016.9 B 2016.9 B http:/