网页布局设计.ppt

《网页布局设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章网页布局设计好的网页布局创意后，还必须掌握网页布局的一些方法和技巧。只有这样才能让设计者的绝妙构思得到很好的表现7.1用表格布局页面在“布局”模式中，可以使用表格作为基础结构来设计您的网页，同时也避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。7.1.1用布局表格布局网页1.切换到布局模式2．布局顶部部分3.布局主体部分4.布局底部信息部分5.美化网页运行效果7.1.2关于“布局”模式在“布局”模式中，可以在添加网页内容前使用布局表格和布局单元格对页面进行布局，就象实例中的页面一样，根据自己的设计绘制出布局表格

2、和单元格，然后在里面添加自己的内容。在“布局”模式中能对单元格直接添加内容，这样可以按需要随时移动单元格位置、调整其大小。绘制的布局表格外框默认颜色为绿色，而布局单元格外框默认颜色为蓝色。执行【编辑】｜【首选参数】命令，在弹出的对话框中执行【布局模式】命令，在这里可以更改布局表格和布局单元格的颜色，还可以在这里指定间隔图像文件。相关的信息可以选择对话框中的【帮助】按钮获得。7.1.3绘制“布局表格”和“布局单元格”1．绘制“布局表格”2．绘制“布局单元格”3．绘制嵌套布局表格7.1.4在“布局单元格”添加内容在“布局”模式中可以

3、将文本、图像和其他内容添加到布局单元格中，就像在“标准”模式中将内容添加到表格单元格一样。单击要添加内容的单元格，然后键入文本或插入其他内容。7.1.5“布局表格”和“布局单元格”的调整及设置1．清除自动设置的单元格高度单击表格标题菜单，然后选择“清除所有高度”。选中所要清除高度的布局表格，使表格四边出现八个控制点，然后执行【窗口】｜【属性】命令，调出属性面板，单击【清除行高】按钮2．调整布局表格、布局单元格的大小以及移动它们调整布局表格、布局单元格的大小的方法如下：（1）选中所要调整的布局表格或布局单元格。该布局表格或布局单元

4、格周围出现选择控制点。（2）拖动选择控制点来调整表格或单元格的大小。移动布局表格的方法如下：（1）单击该布局表格中的空白区域或过单击表格顶部的标签。（只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格。）（2）将表格拖到页上的另一个位置。也可以按键盘上箭头键移动该表格，每次移动1个像素。3．设置布局单元格和表格的格式在属性面板中设置布局表格的多种属性，包括宽度、高度、边距和间距设置布局单元格的格式：在属性面板中设定布局单元格内容对齐方式，宽度和高度，以及背景色。4．设置列宽度在【布局】视图中使用两种类型的宽度：【固定】

5、宽度和【自动伸展】。每列的宽度都在列顶部或底部的列头区域显示。7.2用层布局页面在网页设计中，用来定位内容的元素一般包括：表格和图层，其中表格是大家在网页的整体布局中它的使用应该是最广的，也最常看到的；相对来说图层则更灵活性，操作更方便。层（Layer）是一种HTML页面元素，它的功能强大，可以创建复杂的页面布局。可以将它定位在页面上的任意位置。层可以包含文本、图像或其它HTML文档。一个网页可以有多个层；各个层可以重叠，可以设定是否可见，是否有子层等。层的出现使网页从二维平面拓展到三维。7.2.1用层布局网页1．使用跟踪图像辅

6、助页面的布局2.布局页面顶部3.布局左侧的导航条及友情链接4.布局右边的主体部分5.布局页面的底部信息部分运行效果7.2.2插入层1．插入一个或多个层2．嵌套层绘制嵌套层的方法插入嵌套层的方法3．层的HTML代码7.2.3操作和管理层1．选择层2．移动层3．调整层的大小4．对齐层使用对齐层命令就可按最后一个选定层的边框来对齐一个或多个层7.2.4层属性1．单个层的层属性2．多个层的层属性7.3框架布局页面Dreamwaver还提供了一种更方便的工具——框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网

7、页。访问者浏览站点时，可以使某个区域的文档永远不更改，通过导航条的链接更改主要内容框架的内容，从而达到网页布局的相对统一。一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。7.3.1用框架布局页面1．建立框架2．编辑各框架内的文件3．制作其他需要调用至各框架的文件4．框架页面之间链接运行效果7.3.2创建框架和框架集1．使用预定义的框架集2．自己设计框架集3．拆分或删除框架4．创建嵌套框架7.3.3设置框架及框架集属性1．首先应该选取要进行更改的框架和框架集。在视图窗

8、口中选择框架在“框架”面板中选择框架在视图窗口中选择框架集在“框架”面板中选择框架集2．设置框架属性3.设置框架集属性7.3.4保存框架和框架集1．保存框架集内所有的文件执行【文件】｜【保存全部】命令。此时会弹出一个对话框要求选择保存路径和文件名。粗框的范围表明