Chapter6_布局

1网页设计与制作实用教程（Dreamweaver+Flash+Photoshop）2013.32第6章网页布局网页布局类型用表格进行网页布局框架用CSS进行网页布局网站的设计，不仅体现在具体内容与细节的设计制作上，也需要对框架进行整体的把握。在进行网站设计时，需要对网站的版面与布局进行一个整体性的规划。本章主要内容：35.1网页布局类型述在网页布局设计上，根据用户的使用习惯与设计经验，已经形成了一些常见的布局方式。网页布局方式主要从用户使用的方便性、界面大方美观、网页特色等方面考虑。5.1.1“国”字型5.1.2“厂”字型5.1.3“框架”型5.1.4“封面”型45.1.1“国”字型常见的网页布局类型。这种布局类型是在网页的上下各设计一个通幅广告条，左面是主菜单或导航条，右面是友情链接或其他链接的内容，中间是网页的主要内容。这样布局可以充分利用网页的版面，信息量大。“国”字型布局效果如图55.1.2“厂”字型网页的上部放置Logo和Banner，左边放置导航条与其他链接，网页的右下方放置网页的主要内容。这种布局的好处是网页的各个部分布局非常集中，可以在一个区域突出网页的重要内容。网页中的内容主次分明，很有层次感。65.1.3“框架”型以框架网页的形式实现网页的布局。框架将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。其他的网页布局都是在一个网页上实现。而框架的每个窗格都是不同的网页，集合在一起，构成框架集75.1.4“封面”型一般出现在网站的首页，页面上通常是一些精美的平面设计结合一些小动画，放上几个简单链接或者仅是一个“进入”链接，甚至直接在首页的图片上设计链接。“封面”型布局的网页结构常常很简单，需要使用精美的封面效果来体现网页的内容。85.2用表格进行网页布局表格可以用来控制页面布局，通过在表格里放置内容，能把对象放置到页面的指定位置，创建更复杂的视觉结构。表格是一种可以让设计人员初步控制站点布局的HTML元素。5.2.1在页面中插入表格5.2.2设置表格属性5.2.3表格标签5.2.4在普通模式下用表格布局网页5.2.5在布局模式下用表格布局网页95.2用表格进行网页布局5.2.1在页面中插入表格5.2.2设置表格属性5.2.3表格标签105.2.4在普通模式下用表格布局网页表格是最常用的网页布局方式。表格操作容易，且能被各种浏览器支持。网页布局效果如图。115.2.5在布局模式下用表格布局网页为了简化使用表格进行页面布局，Dreamweaver提供了“布局”模式。“布局”模式的工作方式是，用户可以在页面上绘制表格，然后把文本或图形放置在表格里。在布局模式下创建表格具有更大的灵活性。可以根据需要的网页排版方式，画出表格和单元格。然后再根据具体内容进行适当的编辑和调整，这样大大提高了网页布局的效率。125.3框架框架可以把浏览器窗口划分为若干个区域，每个区域分别显示不同的网页。这些区域通过导航链接，在主框架中打开内容。一般情况下，框架中保持不变的部分为导航或者是目录区，较大的框架窗口用来展现所选择的网页内容。制作框架网页，首先建立框架集。框架集可以将网页的内容组织到相互独立的HTML页面内。本节制作一个简单的框架网页，先对框架集和框架等概念有一个概括的认识。135.3.1用框架布局页面1．建立框架集在Dreamweaver中可通过两种方式插入框架集。一种是插入预先定义的框架集，另一种是自己直接拆分。Dreamweaver预先定义的框架集存在“插入”工具栏“布局”选项中的“框架”按钮中，用户可以随意选择自己需要的框架集类型。145.3.1用框架布局页面方法一：选择“文件—新建”，在“新建文档”对话框中选择“示例中的页—框架页”。在列表中根据需要选择样式。155.3.1用框架布局页面•为框架指定标题•按shift+F2（或窗口-框架）打开“框架”面板，观察布局。•选上面框架边框，如设置顶部框架高度为“120像素”，选中左侧边框，设置框架宽度为100。•“文件”→“保存全部”框架页面•或：分别给各个框架取名如：top、left、right，分别选择上、左和右部框架。然后在文件菜单选择保存框架：top.html、left.html、main.html16方法二：•在DW中新建一个页面•打开“查看”→“可视化助理”→“框架边框”页面四周将出现框架边框5.3.1用框架布局页面17•用鼠标拖动页面四周的边框，使它成为框架结构的网页，如本例拖动左边边框，成为左右结构的框架结构。（ctrl+拖动、alt+拖动）5.3.1用框架布局页面185.3.1用框架布局页面设置框架集的属性•查看框架集属性，单击框架边框。查看所有框架集属性，单击外框。•边框：控制当前框架集内框架的边框。•边框宽度：指定当前框架集中边框的宽度。•边框颜色：设置当前框架集中所有边框的颜色。•值：指定所选择的行或列的大小。•单位：指定象素或百分比。•行列选定范围：识别选定行或列的选择。195.3.1用框架布局页面修改框架属性（主要通过属性面板）•框架名称：用作超级链接目标和脚本引用的当前框架名。框架不要使用中文。•源文件：框架显示的文档，可输入文件名或浏览选择。或：光标置于框架中，文件—在框架中打开。•滚动：是否使用滚动条。大多数浏览器默认值为“自动”。•不能调整大小：使当前框架不能重调大小。•边框：控制当前框架的边框。•边框颜色：设置所有和当前框架相邻的边框的颜色。•边界宽度、边界高度：设置左右上下边距的宽度。是指框架边框和内容之间的空间（单位为象素）。203．设置框架链接•如左边“经典文学”链接到“a1.htm”文件，目标设置为right，在右窗口显示5.3.1用框架布局页面211．浮动框架•前述的框架型网页是在一个窗口中划分出多个子窗口，每个框架中显示一个页面。•浮动框架又称内嵌框架，是在一个普通页面中嵌套一个子窗口，在这个子窗口中可以显示另一个页面，比较灵活，通常用于网页通知、登录表单等。5.3.2制作浮动框架网页222．步骤：•建立一个新页面并起名保存。•光标定位—布局—HTML→iframe→浮动框架•出现下图所示浮动小框架5.3.2制作浮动框架网页23•打开“标签检查器”面板，按照下图属性设置：5.3.2制作浮动框架网页24制作浮动框架链接5.3.2制作浮动框架网页25•建立一个新页面并保存，然后在浮动框架标签检查器的src中设置。•name属性用以设置浮动框架链接。假设起名为S，便于后面设置链接时引用。5.3.2制作浮动框架网页26•为文字设置链接，目标必须设置成“s”，表示链接页面在名称为“s”的框架中显示。5.3.2制作浮动框架网页275.4用CSS进行网页布局随着Web2.0的广泛流行，越来越多的网站工程师采用符合W3C（WorldWideWebConsortium）标准的技术开发网页，这是今后网页设计的发展方向。CSS页面布局使用层叠样式表格式（而不是传统的HTML表格或框架），用于组织网页上的内容。CSS布局的基本构造块是div标签，它是一个HTML标签，在大多数情况下用作文本、图像或其它页面元素的容器。5.4.1表格＋CSS布局5.4.2DIV＋CSS布局28表格＋CSS布局是从传统的网页设计技术到符合Web2.0标准的网页设计技术一种过渡。传统的网页设计，往往利用表格进行布局。table标签本意并不是用来布局网页的技术，表格用来表现网页中具有二维关系的数据。用大量嵌套的表格进行布局，容易将网页内容、结构和表现混杂在一起，这样设计出来的网页不利于维护和搜索引擎的搜索。附图是传统布局方式的一个网页源文件代码片断。利用了大量的嵌套表格，代码十分复杂，不利用维护和管理。5.4.1表格＋CSS布局29符合Web2.0标准的网页设计是将网页内容、结构与表现分开，做到“表现和结构相分离”。表格＋CSS布局可以使设计的网页结构更加合理，但这种布局方式仍然只是一种过渡如图所示是在网站首页布局中经常会看到的局部布局效果，位置一般在网页的两侧。5.4.1表格＋CSS布局30•这个效果用传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。•表格＋CSS的布局方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制，示意如图。这里定义了4个CSS类选择符：.left_tdbgall、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。5.4.1表格＋CSS布局用left_top样式控制用left_mid样式控制用left_end样式控制用left_tdbgall样式控制表格31DIV＋CSS布局网页是一种盒子模式的开发技术。通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备，所以越来越受到网页开发者欢迎。1．CSS布局简介网页中的表格或者其他区块都具备内容(content)、填充(padding)、边框(border)、边界(margin)等基本属性，CSS盒子也具备这些属性。一个CSS盒子的示意图5.4.2DIV＋CSS布局32•利用DIV＋CSS布局网页时，需要利用CSS定义大小不一的CSS盒子以及盒子嵌套。如图是一个网站首页的CSS盒子布局示意图。•这个网页共设计了7个盒子。最大的盒子是body{}，是网页的主体。在body{}中嵌套一个#container{}（这是一个CSS样式定义），可以看做页面容器。在#container{}中嵌套3个盒子#header{}、#main{}、#bottom{}，分别是头部（Banner、Logo、导航条等）、中部（网页的主体内容）、底部（版权信息等）。#main{}中嵌套两个盒子#left{}、#right{}，是一个两栏页面布局，这两个盒子分别用来容纳左栏和右栏的内容。5.4.2DIV＋CSS布局332．利用DIV＋CSS布局在网页文档中，利用DIV标签进行网页布局。在DW中将“插入”工具栏切换到“布局”工具栏，可以看到一个“插入Div标签”按钮，如图。5.4.2DIV＋CSS布局插入Div标签34下面利用DIV＋CSS具体创建一个盒子。（1）新建一个网页文档，切换到“代码”视图下。可以看到head标签前的几行代码是用来定义网页文档XHTML类型的。当我们使用DIV＋CSS布局页面时，这几行代码不能缺少。如图所示。5.4.2DIV＋CSS布局35（2）将光标定位在body标签下面一行，单击“布局”工具栏上的“插入Div标签”按钮，弹出“插入Div标签”对话框选择插入div标签的位置CSS样式不在这里选择，“确定”在“设计”视图，可看到一个虚线框5.4.2DIV＋CSS布局选择插入Div标签的位置选择或者输入类样式选择或者输入ID样式单击它可以新建CSS样式36（3）在“CSS样式”面板中单击“新建CSS规则”，在“新建CSS规则”对话框中如图设置。在“#divcss1的CSS规则定义”对话框中，选择“背景”，设背景色为灰色；在“方框”中设置宽和高分别为700像素和300像素。5.4.2DIV＋CSS布局37选择“边框”，设样式为实线，宽度为1像素，颜色为红色，并设置全部相同。确定，代码视图中新增了一些CSS样式定义代码。5.4.2DIV＋CSS布局新增加的CSS样式定义代码38（4）光标定位在div标签代码行，在标签选择器上选择div标签右击，在弹出的快捷菜单中选择“设置ID”-“divcss1”，这样就将样式divcss1应用到div标签上了，这时的div标签代码行变为：divid=divcss1此处显示新Div标签的内容/div切换到“设计”视图，可以看到用DIV＋CSS定义的一个盒子的外观，这个盒子的背景色为灰色，宽为700像素，高为300像素，边框为红色1个像素的细线。5.4.2DIV＋CSS布局39Thankyou!