版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第7章网页布局
当遨游Internet时，一幅幅漂亮的网页令人流连忘返，网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切，除此之外，还有一个非常重要的因素——网页的布局。本章介绍用Dreamweaver进行网页布局的方法和技巧，主要内容有：使用布局模式进行布局利用层进行布局利用表格＋CSS进行布局利用DIV＋CSS进行布局第7章网页布局当遨游Internet时，一幅幅7.1使用布局模式前面学习了利用表格布局页面的方法，利用表格直接布局网页元素灵活性不强，比如无法精确定位网页内容，对网页版面进行调整时，也不很方便。为了提高表格布局的灵活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作为基础结构来设计网页，同时也使网页布局更加高效。7.1使用布局模式前面学习了利用表格布局页面的方法，利用7.1.1在布局模式下绘制表格1．切换布局模式在【插入】工具栏上选择【布局】类别。在右边的工具栏上单击【布局】按钮，弹出一个【从布局模式开始】对话框。按【确定】按钮即进入“布局模式”中。2．绘制布局表格在工具栏的【布局】类别中，单击【布局表格】按钮。鼠标移到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。3．绘制布局单元格在工具栏的【布局】类别中，单击【绘制布局单元格】按钮。鼠标移到布局表格上或者网页内容下边的空白处时指针变为加号“+”。拖动鼠标绘制一个布局单元格。4．绘制嵌套布局表格绘制嵌套布局表格，就是将一个布局表格绘制在另一个布局表格中。对外部表格所进行的更改不会影响嵌套表格中的单元格。7.1.1在布局模式下绘制表格1．切换布局模式7.1.2设置布局表格布局表格是使用布局模式的基础，进入布局模式首先要做的就是要插入一个布局表格，然后设置尺寸、背景等属性，另外布局表格还有个特有的属性——“自动伸展”也需要进行设置。1．设置布局表格的大小2．设置布局表格自动伸展7.1.2设置布局表格布局表格是使用布局模式的基础，进入布7.1.3设置布局单元格在布局模式中，光有布局表格是不够的，布局表格内部不能直接插入页面内容，必须先添加布局单元格，然后再在布局单元格内部插入页面内容。本小节讲解布局单元格的设置。1．设置布局单元格的位置2．设置布局单元格内容的格式3．为布局单元格添加间隔图像7.1.3设置布局单元格在布局模式中，光有布局表格是不够的7.1.4课堂实例――用布局表格布局网站主页要设计一个精美的网页，先要规划好版式。网页中最常用的版式类似于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。1．绘制网页顶部布局2．布局网页主体部分布局3．绘制网页底部布局7.1.4课堂实例――用布局表格布局网站主页要设计一个精美7.2应用层布局网页层（Layer）是一种HTML页面元素，它的功能强大，可以创建复杂的页面布局。层提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整层的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。7.2应用层布局网页层（Layer）是一种HTML页7.2.1制作层在Dreamweaver的“标准”模式下，利用“布局”工具栏上的“绘制层”按钮可以绘制层。1．插入层2．为层添加内容3．层的可见性4．层的重叠7.2.1制作层在Dreamweaver的“标准”模式下，7.2.2层属性详解1．单个层的层属性2．多个层的层属性7.2.2层属性详解1．单个层的层属性7.2.3嵌套层嵌套层是指在层内部的子层，当移动层的时候，其内部的嵌套层也会随之移动。制作嵌套层有两种方式，一种是在层内部新建嵌套层，另外一种是将已经存在的层添加为另外一个层的嵌套层。1．添加嵌套层2．设置层之间的嵌套关系7.2.3嵌套层嵌套层是指在层内部的子层，当移动层的时候，7.2.4层HTML代码当在网页文档中创建层时，Dreamweaver将在代码视图中自动插入该层对应的HTML代码。当在Dreamweaver中使用工具栏上的【绘制层】按钮绘制一个层时，在设计视图中，该层会显示在绘制它的当前位置；但在代码视图中，Dreamweaver将在页开头且紧接在<body>标签之后插入该层的代码，如图所示。7.2.4层HTML代码当在网页文档中创建层时，Dream层CSS样式层标签图7-57用绘制层的方法时层HTML代码的位置层CSS样式层标签图7-57用绘制层的方法时层HTML代码7.2.5使用辅助工具精确定位
网页元素当页面内容越来越复杂时，尤其使用了大量图片时，页面内容的精确定位就会成为一个大问题，Dreamweaver8提供了相当丰富的页面内容功能来解决这个问题，比如使用辅助线、视图的缩放工具和使用视图的选取工具等。1．垂直辅助线2．水平辅助线3．缩放和选取工具7.2.5使用辅助工具精确定位
网页元素当页面内容越来越复杂7.2.6表格和层的相互转换层的主要特点是操作比较灵活，比如可以通过拖动任意设置层在页面中的位置，而表格的主要优势是比较整洁，布局清晰。早期版本的浏览器无法显示层，但能够显示表格。为了灵活应用表格和层这两种页面布局手段，Dreamweaver8提供了层和表格之间相互转换的方法。1．将层转换成表格2．将表格转换成层7.2.6表格和层的相互转换层的主要特点是操作比较灵活，比7.3课堂实例――用层布局
网站首页前面学习了绘制层和编辑层的方法和技巧，本节利用层布局一个个性化的网站首页，通过这个具体实例进一步学习层的应用。7.3课堂实例――用层布局
网站首页前面学习了绘制层和编辑7.3.1实例效果这是一个个人网站首页，充满个性化的页面效果活泼可爱，如图7-79所示。利用层来布局具有个性化的网页，灵活性更强，更容易设计布局。7.3.1实例效果这是一个个人网站首页，充满个性化的页面效7.3.2制作步骤1．使用跟踪图像辅助页面的布局2．布局页面顶部3．布局左侧的导航条及友情链接4．布局右边的主体部分5．布局页面的底部信息部分7.3.2制作步骤1．使用跟踪图像辅助页面的布局7.4课堂实例――表格
＋CSS布局表格＋CSS布局可以使设计的网页结构更加合理，更便于维护和更改网页的样式，但是从本质上讲，这种布局网页的方式只是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。7.4课堂实例――表格
＋CSS布局表格＋CSS布局可以使7.4.1实例效果本节通过一个实例来讲解一下用表格＋CSS布局的方法。如图7-87所示是本实例的最终效果。这是在网站首页布局中经常会看到的局部布局效果，位置一般在网页的两侧。图7-87表格＋CSS布局实例效果7.4.1实例效果本节通过一个实例来讲解一下用表格＋CSS针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格＋CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制，示意图如图7-88所示。用left_top样式控制用left_mid样式控制用left_end样式控制用left_tdbgall样式控制表格这里定义了4个CSS类选择符：.left_tdbgall、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格7.4.2制作步骤1．创建CSS文件2．创建网页文档7.4.2制作步骤1．创建CSS文件7.5DIV＋CSS布局上一节用表格＋CSS进行网页布局，虽然在某种程度上提高了网站开发和维护的效率，但是这种方法毕竟还是传统的网页布局技术，没有跳出表格布局的模式。如果网页布局比较复杂，那么必然会使用大小不一的表格和表格嵌套来定位排版网页内容。这时<table>标签、<tr>标签、<td>标签交织在一起，它们之间的关系变得晦涩难懂。这样的网页代码结构给网站的开发和维护带来了不便。利用DIV＋CSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以越来越受到网页开发者的欢迎。7.5DIV＋CSS布局上一节用表格＋CSS进行网页布局，7.5.1理解CSS盒子模型网页中的表格或者其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也都具备这些属性。如图7-93所示是一个CSS盒子的示意图。图7-93一个CSS盒子7.5.1理解CSS盒子模型网页中的表格或者其他块都具备内在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图7-94所示是一个网站首页的CSS盒子布局示意图。图7-94CSS布局示意图从图7-94可以看出，这个网页一共设计了7个盒子。最大的盒子是body{}，这是一个HTML元素，是HTML网页的主体标签。在body{}盒子中嵌套一个#container{}盒子（这里的#container是一个CSS样式定义，是一个标识选择符），可以称这个盒子为页面容器。在#container{}盒子中有嵌套3个盒子#header{}、#main{}、#bottom{}，这3个盒子分别是网页的头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#main{}盒子中嵌套两个盒子#left{}、#right{}，这是一个两栏的页面布局，这两个盒子分别用来容纳左栏和右栏的内容。在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的7.5.2DIV标签的应用XHTML是一种在HTML4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。在网页文档中，利用DIV标签定义XHTML代码进行网页布局。在Dreamweaver中将“插入”工具栏切换到“布局”工具栏，可以看到一个“插入Div标签”按钮，如图所示。插入Div标签7.5.2DIV标签的应用XHTML是一种在HTML4.07.5.3课堂实例――DIV＋CSS布局网站首页1．实例效果如图7-103所示是一个网站首页的CSS盒子布局规划。本实例将网页布局分成网页顶部（Logo、Banner、导航条）、网页中部（网页主体，分成左右两栏）、网页底部（版权信息）三个盒子，其中网页中部盒子中又装了左栏和右栏两个盒子。2．制作步骤图7-103网站首页布局7.5.3课堂实例――DIV＋CSS布局网站首页1．实例效本章习题
上机练习
本章习题
上机练习
练习1使用布局表格排版网站首页
在布局模式下，通过使用布局表格设计一个网站首页的版式，效果如图所示。练习1使用布局表格排版网站首页在布局模式下，通过使用布局练习2使用CSS布局网页表格＋CSS布局和DIV＋CSS布局是目前最常用的CSS布局方法，请尝试利用CSS布局一个两栏的网站首页。练习2使用CSS布局网页表格＋CSS布局和DIV＋CSS布第7章网页布局
当遨游Internet时，一幅幅漂亮的网页令人流连忘返，网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切，除此之外，还有一个非常重要的因素——网页的布局。本章介绍用Dreamweaver进行网页布局的方法和技巧，主要内容有：使用布局模式进行布局利用层进行布局利用表格＋CSS进行布局利用DIV＋CSS进行布局第7章网页布局当遨游Internet时，一幅幅7.1使用布局模式前面学习了利用表格布局页面的方法，利用表格直接布局网页元素灵活性不强，比如无法精确定位网页内容，对网页版面进行调整时，也不很方便。为了提高表格布局的灵活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作为基础结构来设计网页，同时也使网页布局更加高效。7.1使用布局模式前面学习了利用表格布局页面的方法，利用7.1.1在布局模式下绘制表格1．切换布局模式在【插入】工具栏上选择【布局】类别。在右边的工具栏上单击【布局】按钮，弹出一个【从布局模式开始】对话框。按【确定】按钮即进入“布局模式”中。2．绘制布局表格在工具栏的【布局】类别中，单击【布局表格】按钮。鼠标移到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。3．绘制布局单元格在工具栏的【布局】类别中，单击【绘制布局单元格】按钮。鼠标移到布局表格上或者网页内容下边的空白处时指针变为加号“+”。拖动鼠标绘制一个布局单元格。4．绘制嵌套布局表格绘制嵌套布局表格，就是将一个布局表格绘制在另一个布局表格中。对外部表格所进行的更改不会影响嵌套表格中的单元格。7.1.1在布局模式下绘制表格1．切换布局模式7.1.2设置布局表格布局表格是使用布局模式的基础，进入布局模式首先要做的就是要插入一个布局表格，然后设置尺寸、背景等属性，另外布局表格还有个特有的属性——“自动伸展”也需要进行设置。1．设置布局表格的大小2．设置布局表格自动伸展7.1.2设置布局表格布局表格是使用布局模式的基础，进入布7.1.3设置布局单元格在布局模式中，光有布局表格是不够的，布局表格内部不能直接插入页面内容，必须先添加布局单元格，然后再在布局单元格内部插入页面内容。本小节讲解布局单元格的设置。1．设置布局单元格的位置2．设置布局单元格内容的格式3．为布局单元格添加间隔图像7.1.3设置布局单元格在布局模式中，光有布局表格是不够的7.1.4课堂实例――用布局表格布局网站主页要设计一个精美的网页，先要规划好版式。网页中最常用的版式类似于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。1．绘制网页顶部布局2．布局网页主体部分布局3．绘制网页底部布局7.1.4课堂实例――用布局表格布局网站主页要设计一个精美7.2应用层布局网页层（Layer）是一种HTML页面元素，它的功能强大，可以创建复杂的页面布局。层提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整层的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。7.2应用层布局网页层（Layer）是一种HTML页7.2.1制作层在Dreamweaver的“标准”模式下，利用“布局”工具栏上的“绘制层”按钮可以绘制层。1．插入层2．为层添加内容3．层的可见性4．层的重叠7.2.1制作层在Dreamweaver的“标准”模式下，7.2.2层属性详解1．单个层的层属性2．多个层的层属性7.2.2层属性详解1．单个层的层属性7.2.3嵌套层嵌套层是指在层内部的子层，当移动层的时候，其内部的嵌套层也会随之移动。制作嵌套层有两种方式，一种是在层内部新建嵌套层，另外一种是将已经存在的层添加为另外一个层的嵌套层。1．添加嵌套层2．设置层之间的嵌套关系7.2.3嵌套层嵌套层是指在层内部的子层，当移动层的时候，7.2.4层HTML代码当在网页文档中创建层时，Dreamweaver将在代码视图中自动插入该层对应的HTML代码。当在Dreamweaver中使用工具栏上的【绘制层】按钮绘制一个层时，在设计视图中，该层会显示在绘制它的当前位置；但在代码视图中，Dreamweaver将在页开头且紧接在<body>标签之后插入该层的代码，如图所示。7.2.4层HTML代码当在网页文档中创建层时，Dream层CSS样式层标签图7-57用绘制层的方法时层HTML代码的位置层CSS样式层标签图7-57用绘制层的方法时层HTML代码7.2.5使用辅助工具精确定位
网页元素当页面内容越来越复杂时，尤其使用了大量图片时，页面内容的精确定位就会成为一个大问题，Dreamweaver8提供了相当丰富的页面内容功能来解决这个问题，比如使用辅助线、视图的缩放工具和使用视图的选取工具等。1．垂直辅助线2．水平辅助线3．缩放和选取工具7.2.5使用辅助工具精确定位
网页元素当页面内容越来越复杂7.2.6表格和层的相互转换层的主要特点是操作比较灵活，比如可以通过拖动任意设置层在页面中的位置，而表格的主要优势是比较整洁，布局清晰。早期版本的浏览器无法显示层，但能够显示表格。为了灵活应用表格和层这两种页面布局手段，Dreamweaver8提供了层和表格之间相互转换的方法。1．将层转换成表格2．将表格转换成层7.2.6表格和层的相互转换层的主要特点是操作比较灵活，比7.3课堂实例――用层布局
网站首页前面学习了绘制层和编辑层的方法和技巧，本节利用层布局一个个性化的网站首页，通过这个具体实例进一步学习层的应用。7.3课堂实例――用层布局
网站首页前面学习了绘制层和编辑7.3.1实例效果这是一个个人网站首页，充满个性化的页面效果活泼可爱，如图7-79所示。利用层来布局具有个性化的网页，灵活性更强，更容易设计布局。7.3.1实例效果这是一个个人网站首页，充满个性化的页面效7.3.2制作步骤1．使用跟踪图像辅助页面的布局2．布局页面顶部3．布局左侧的导航条及友情链接4．布局右边的主体部分5．布局页面的底部信息部分7.3.2制作步骤1．使用跟踪图像辅助页面的布局7.4课堂实例――表格
＋CSS布局表格＋CSS布局可以使设计的网页结构更加合理，更便于维护和更改网页的样式，但是从本质上讲，这种布局网页的方式只是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。7.4课堂实例――表格
＋CSS布局表格＋CSS布局可以使7.4.1实例效果本节通过一个实例来讲解一下用表格＋CSS布局的方法。如图7-87所示是本实例的最终效果。这是在网站首页布局中经常会看到的局部布局效果，位置一般在网页的两侧。图7-87表格＋CSS布局实例效果7.4.1实例效果本节通过一个实例来讲解一下用表格＋CSS针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格＋CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制，示意图如图7-88所示。用left_top样式控制用left_mid样式控制用left_end样式控制用left_tdbgall样式控制表格这里定义了4个CSS类选择符：.left_tdbgall、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格7.4.2制作步骤1．创建CSS文件2．创建网页文档7.4.2制作步骤1．创建CSS文件7.5DIV＋CSS布局上一节用表格＋CSS进行网页布局，虽然在某种程度上提高了网站开发和维护的效率，但是这种方法毕竟还是传统的网页布局技术，没有跳出表格布局的模式。如果网页布局比较复杂，那么必然会使用大小不一的表格和表格嵌套来定位排版网页内容。这时<table>标签、<tr>标签、<td>标签交织在一起，它们之间的关系变得晦涩难懂。这样的网页代码结构给网站的开发和维护带来了不便。利用DIV＋CSS布局网页是一种盒子模式的开发技术。它是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以越来越受到网页开发者的欢迎。7.5DIV＋CSS布局上一节用表格＋CSS进行网页布局，7.5.1理解CSS盒子模型网页中的表格或者其他块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，一个CSS盒子也都具备这些属性。如图7-93所示是一个CSS盒子的示意图。图7-93一个CSS盒子7.5.1理解CSS盒子模型网页中的表格或者其他块都具备内在利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图7-94所示是一个网站首页的CSS盒子布局示意图。图7-94CSS布局示意图从图7-94可以看出
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年自动化立体仓库的电气传动系统
- 2026年互联网+土木工程智能化施工的探索
- 2026春招：行政主管题库及答案
- 2026年建筑电气设计的多样化方案
- 2026春招：五粮液真题及答案
- 贴面课件教学课件
- 货运船舶相关知识培训课件
- 货运安全生产标准化培训课件
- 医疗物联网设备与智慧医院建设
- 护理护理安全管理与患者护理
- 教师三笔字培训课件
- 中国医药行业中间体出口全景分析：破解政策难题深挖全球红利
- 河南省百师联盟2025-2026学年高一上12月联考英语试卷（含解析含听力原文及音频）
- 污水管道更换工程施工方案
- 租户加装充电桩免责补充合同（房东版）
- 甘肃省天水市2024-2025学年九年级上学期期末考试物理试题（含答案）
- 2025年佛山市均安镇专职消防队招聘消防员5人备考题库及1套参考答案详解
- 2026年海南卫生健康职业学院单招职业技能考试题库参考答案详解
- 京港澳高速公路段改扩建工程施工保通方案(总方案)
- 医用设备EMC培训资料课件
- RoHS培训资料课件
评论
0/150
提交评论