1 / 29

第 7 章 网页布局

第 7 章 网页布局. 当遨游 Internet 时，一幅幅漂亮的网页令人流连忘返，网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切，除此之外，还有一个非常重要的因素 —— 网页的布局。 本章介绍用 Dreamweaver 进行网页布局的方法和技巧，主要内容有： 使用布局模式进行布局 利用层进行布局 利用表格＋ CSS 进行布局 利用 DIV ＋ CSS 进行布局. 7.1 使用布局模式.

mufutau-bell
Download Presentation

第 7 章 网页布局

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第7章 网页布局 当遨游Internet时，一幅幅漂亮的网页令人流连忘返，网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切，除此之外，还有一个非常重要的因素——网页的布局。 本章介绍用Dreamweaver进行网页布局的方法和技巧，主要内容有： 使用布局模式进行布局 利用层进行布局 利用表格＋CSS进行布局 利用DIV＋CSS进行布局

  2. 7.1 使用布局模式 • 前面学习了利用表格布局页面的方法，利用表格直接布局网页元素灵活性不强，比如无法精确定位网页内容，对网页版面进行调整时，也不很方便。为了提高表格布局的灵活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作为基础结构来设计网页，同时也使网页布局更加高效。

  3. 7.1.1 在布局模式下绘制表格 • 1．切换布局模式 • 在【插入】工具栏上选择【布局】类别。在右边的工具栏上单击【布局】按钮，弹出一个【从布局模式开始】对话框。按【确定】按钮即进入“布局模式”中。 • 2．绘制布局表格 • 在工具栏的【布局】类别中，单击【布局表格】按钮。鼠标移到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。 • 3．绘制布局单元格 • 在工具栏的【布局】类别中，单击【绘制布局单元格】按钮。鼠标移到布局表格上或者网页内容下边的空白处时指针变为加号“+”。拖动鼠标绘制一个布局单元格。 • 4．绘制嵌套布局表格 • 绘制嵌套布局表格，就是将一个布局表格绘制在另一个布局表格中。对外部表格所进行的更改不会影响嵌套表格中的单元格。

  4. 7.1.2 设置布局表格 • 布局表格是使用布局模式的基础，进入布局模式首先要做的就是要插入一个布局表格，然后设置尺寸、背景等属性，另外布局表格还有个特有的属性——“自动伸展”也需要进行设置。 • 1．设置布局表格的大小 • 2．设置布局表格自动伸展

  5. 7.1.3 设置布局单元格 • 在布局模式中，光有布局表格是不够的，布局表格内部不能直接插入页面内容，必须先添加布局单元格，然后再在布局单元格内部插入页面内容。本小节讲解布局单元格的设置。 • 1．设置布局单元格的位置 • 2．设置布局单元格内容的格式 • 3．为布局单元格添加间隔图像

  6. 7.1.4 课堂实例――用布局表格布局网站主页 • 要设计一个精美的网页，先要规划好版式。网页中最常用的版式类似于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 1．绘制网页顶部布局 2．布局网页主体部分布局 3．绘制网页底部布局

  7. 7.2 应用层布局网页 • 层（Layer）是一种 HTML 页面元素，它的功能强大，可以创建复杂的页面布局。层提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整层的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。

  8. 7.2.1 制作层 • 在Dreamweaver的“标准”模式下，利用“布局”工具栏上的“绘制层”按钮可以绘制层。 • 1．插入层 • 2．为层添加内容 • 3．层的可见性 • 4．层的重叠

  9. 7.2.2 层属性详解 • 1．单个层的层属性 • 2．多个层的层属性

  10. 7.2.3 嵌套层 • 嵌套层是指在层内部的子层，当移动层的时候，其内部的嵌套层也会随之移动。制作嵌套层有两种方式，一种是在层内部新建嵌套层，另外一种是将已经存在的层添加为另外一个层的嵌套层。 • 1．添加嵌套层 • 2．设置层之间的嵌套关系

  11. 7.2.4 层HTML代码 • 当在网页文档中创建层时，Dreamweaver 将在代码视图中自动插入该层对应的HTML代码。当在 Dreamweaver 中使用工具栏上的【绘制层】按钮 绘制一个层时，在设计视图中，该层会显示在绘制它的当前位置；但在代码视图中，Dreamweaver将在页开头且紧接在<body>标签之后插入该层的代码，如图所示。

  12. 层CSS样式 层标签 图7-57　用绘制层的方法时层HTML代码的位置

  13. 7.2.5使用辅助工具精确定位网页元素 • 当页面内容越来越复杂时，尤其使用了大量图片时，页面内容的精确定位就会成为一个大问题，Dreamweaver 8提供了相当丰富的页面内容功能来解决这个问题，比如使用辅助线、视图的缩放工具和使用视图的选取工具等。 • 1．垂直辅助线 • 2．水平辅助线 • 3．缩放和选取工具

  14. 7.2.6 表格和层的相互转换 • 层的主要特点是操作比较灵活，比如可以通过拖动任意设置层在页面中的位置，而表格的主要优势是比较整洁，布局清晰。早期版本的浏览器无法显示层，但能够显示表格。为了灵活应用表格和层这两种页面布局手段，Dreamweaver 8提供了层和表格之间相互转换的方法。 • 1．将层转换成表格 • 2．将表格转换成层

  15. 7.3 课堂实例――用层布局网站首页 • 前面学习了绘制层和编辑层的方法和技巧，本节利用层布局一个个性化的网站首页，通过这个具体实例进一步学习层的应用。

  16. 7.3.1 实例效果 • 这是一个个人网站首页，充满个性化的页面效果活泼可爱，如图7-79所示。利用层来布局具有个性化的网页，灵活性更强，更容易设计布局。

  17. 7.3.2 制作步骤 • 1．使用跟踪图像辅助页面的布局 • 2．布局页面顶部 • 3．布局左侧的导航条及友情链接 • 4．布局右边的主体部分 • 5．布局页面的底部信息部分

  18. 7.4 课堂实例――表格＋CSS布局 • 表格＋CSS布局可以使设计的网页结构更加合理，更便于维护和更改网页的样式，但是从本质上讲，这种布局网页的方式只是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。

  19. 7.4.1 实例效果 • 本节通过一个实例来讲解一下用表格＋CSS布局的方法。如图7-87所示是本实例的最终效果。这是在网站首页布局中经常会看到的局部布局效果，位置一般在网页的两侧。 图7-87 表格＋CSS布局实例效果

  20. 用left_top样式控制 用left_mid样式控制 用left_tdbgall 样式控制表格 用left_end样式控制 • 针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格＋CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制，示意图如图7-88所示。 这里定义了4个CSS类选择符：.left_tdbgall、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。

  21. 7.4.2 制作步骤 • 1．创建CSS文件 • 2．创建网页文档

  22. 7.5 DIV＋CSS布局 • 上一节用表格＋CSS进行网页布局，虽然在某种程度上提高了网站开发和维护的效率，但是这种方法毕竟还是传统的网页布局技术，没有跳出表格布局的模式。如果网页布局比较复杂，那么必然会使用大小不一的表格和表格嵌套来定位排版网页内容。这时<table> 标签、<tr>标签、<td>标签交织在一起，它们之间的关系变得晦涩难懂。这样的网页代码结构给网站的开发和维护带来了不便。 • 利用DIV＋CSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以越来越受到网页开发者的欢迎。

  23. 7.5.1 理解CSS盒子模型 • 网页中的表格或者其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也都具备这些属性。如图7-93所示是一个CSS盒子的示意图。 图7-93 一个CSS盒子

  24. 在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图7-94所示是一个网站首页的CSS盒子布局示意图。在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图7-94所示是一个网站首页的CSS盒子布局示意图。 从图7-94可以看出，这个网页一共设计了7个盒子。最大的盒子是body{}，这是一个HTML元素，是HTML网页的主体标签。在body{}盒子中嵌套一个#container{}盒子（这里的#container是一个CSS样式定义，是一个标识选择符），可以称这个盒子为页面容器。在#container{}盒子中有嵌套3个盒子#header{}、#main{}、#bottom{}，这3个盒子分别是网页的头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#main{}盒子中嵌套两个盒子#left{}、#right{}，这是一个两栏的页面布局，这两个盒子分别用来容纳左栏和右栏的内容。 图7-94 CSS布局示意图

  25. 插入Div标签 7.5.2 DIV标签的应用 • XHTML是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。 • 在网页文档中，利用DIV标签定义XHTML代码进行网页布局。在Dreamweaver中将“插入”工具栏切换到“布局”工具栏，可以看到一个“插入Div标签”按钮，如图所示。

  26. 7.5.3 课堂实例――DIV＋CSS布局网站首页 • 1．实例效果 • 如图7-103所示是一个网站首页的CSS盒子布局规划。本实例将网页布局分成网页顶部（Logo、Banner、导航条）、网页中部（网页主体，分成左右两栏）、网页底部（版权信息）三个盒子，其中网页中部盒子中又装了左栏和右栏两个盒子。 • 2．制作步骤 图7-103 网站首页布局

  27. 本章习题上机练习

  28. 练习1 使用布局表格排版网站首页 • 在布局模式下，通过使用布局表格设计一个网站首页的版式，效果如图所示。

  29. 练习2 使用CSS布局网页 • 表格＋CSS布局和DIV＋CSS布局是目前最常用的CSS布局方法，请尝试利用CSS布局一个两栏的网站首页。

More Related