《网页布局设计》PPT课件

1、网页布局设计,好的网页布局创意后，还必须掌握网页布局的一些方法和技巧。只有这样才能让设计者的绝妙构思得到很好的表现,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）选中所要调整的布局表格或布局单元格。该布局表格或布局单元格周围出现选择控制点。 （2）拖动选择控制点来调整表格或单元格的大小。 移动布局表格的方法如下： （1）单击该布局表格中的空白区域或过单击表格顶部的标签。（只有当布局表

4、格嵌套在另一个布局表格中时，才可以移动该布局表格。） （2）将表格拖到页上的另一个位置。也可以按键盘上箭头键移动该表格，每次移动 1 个像素,3设置布局单元格和表格的格式 在属性面板中设置布局表格的多种属性，包括宽度、高度、边距和间距 设置布局单元格的格式： 在属性面板中设定布局单元格内容对齐方式，宽度和高度，以及背景色。 4设置列宽度 在【布局】视图中使用两种类型的宽度：【固定】宽度和【自动伸展】。每列的宽度都在列顶部或底部的列头区域显示,7.2框架布局页面,Dreamwaver还提供了一种更方便的工具框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏

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

6、框架”面板中选择框架集 2设置框架属性 3.设置框架集属性,7.2.4保存框架和框架集,1保存框架集内所有的文件 执行 【文件】【保存全部】命令。此时会弹出一个对话框要求选择保存路径和文件名。粗框的范围表明了此时正要保存的文件，如粗框围住整个视图说明此时保存的是框架集，所有没有保存的框架文档都将在框架的周围出现粗边框，并且出现一个对话框要求选择保存路径和文件名。 2保存框架中显示的文档 在需要保存的框架内单击，执行【文件】【保存框架】命令或者执行【文件】【框架另存为】命令。 3要保存框架集文件 在【框架】面板或视图窗口中选择框架集，执行【文件】【保存框架页】命令或者执行【文件】【框架集另存为】命令,7.2.5控制带有链接的框架内容,1）在文档中