《页面布局设计》PPT课件

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

1、第7章页面布局设计目录1、用表格定位页面元素2、使用层定位页面元素3、创建框架页面4、单元同步练习可视化助理使用【标尺】功能使用【网格】功能使用【跟踪图像】功能7页面元素定位技术要设计一个页面，就要涉及到很多页面元素，例如图像、文本、表格、动画、视频等等。如何将这些页面元素有机的组合起来，达到满意的视觉效果，这不仅需要页面元素有自身的特点，还必须把这些元素放在合适的位置上，这就是页面元素的定位，或称页面布局。目标：在本章的学习中我们将具体介绍Dreamweaver提供的几种页面元素的定位方法。第一种是用表格定位页面元素，第二种是用层定位页面元素，

2、第三种是创建框架页面。7.1用表格定位页面元素采用表格进行页面布局，可以简洁明了和高效快捷的将文本、图片和多媒体对象等页面元素有序地显示在页面上，从而设计出版式美观的页面效果。7.1.1关于表格表格的实质是把页面的某个空间区域划分为若干行和列，其中的每一“格”称为表格单元。在网页设计中，表格除了可以用来存放表格化的数据外，它还是重要的页面布局工具，可以用来定位页面元素，如设计页面分栏，定位页面上的文本和图像等等。7.1.2表格的基本操作要熟练运用表格进行页面布局，必须学会表格的创建、编辑方法，以及表格和表格单元属性设置操作技巧。1．创建表格●表格

3、宽度：指定以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。●边框粗细：指定以像素为单位的表格边框宽度。当没有明确指定边框粗细时，大多数浏览器默认边框宽度为1像素。如果不需要边框请输入0。●单元格边距：指定单元格内容与单元格边框线之间的距离，默认间距为1像素，如果不需要边距请输入0。●单元格间距：指定单元格与单元格之间的距离，默认间距为2个像素，如果不需要间距请输入0。7.1.2使用表格定位页面元素2．表格的基本操作在创建表格之后，常常需要对表格作进一步的处理，如改变表格大小、扩充表格、合并或拆分单元格等等，以便更好地定位页面元素。（1）选

4、择整个表格和调整表格的大小（2）选择和删除行或列（3）选择、合并和拆分单元格（4）嵌套表格（5）设置表格或单元格的背景颜色制作基本的数据统计表7.1.3表格的属性设置1．设置表格属性行和列，宽，填充和间距，对齐和边框等。2．设置列、行和单元格属性使用属性面板的扩展部分可以设置以下属性：水平，垂直，宽高，不换行，标题，背景颜色等。7.1.4使用表格定位页面元素3．使用表格定位页面元素表格由于具有比较规范的格式，对于整齐排列页面元素非常有效，下面通过一个具体的实例介绍使用表格设计一个页面的方法。图1表格布局页面元素7.1.5归纳与思考有了表格，我们就

5、可以轻松实现网页元素的页面定位，设计出整齐美观的网页来。要能熟练运用表格进行网页布局，必须掌握表格的基本操作，包括表格的创建、调整，单元格的选取、拆分、合并等等。表格和单元格可以设置背景颜色，但能不能设置一些背景图案使页面更好看呢？当我需要显示表格线时，能否改变线条的大小和颜色？我用Excel制作的表格内容很多，能否快捷地把它放到网页中？插入一个一定行列的表格是很容易的，但要插入一个行列不那么规则的复杂表格却是比较麻烦，有无更好的解决办法吗？7.1.6应用技巧与常见错误应用表格进行页面布局，掌握一些小小的操作技巧，可以提高工作效率，达到更好的设计

6、效果。例如：（1）把鼠标移到表格中的某一条线，则鼠标指针会变成双箭头，按住鼠标左键并拖动鼠标，则可以改变某一行或某一列的大小，这在调整页面布局时经常用到。（2）在创建表格时，表格宽度选择使用像素为单位，可以防止用户在浏览网页时改变浏览器窗口的大小而导致页面布局变形。（3）充分利用表格单元的合并或拆分功能，可以获得行列不规则的复杂表格，达到自己设计的要求。（4）如果你只想删除单元格中的内容而不删除单元格，请选择一个或多个单元格，然后选择“编辑”>“清除”或按Delete键。但要注意，如果选择了一行或一列的所有单元格，选定的行或列（不仅仅是它的内容）

7、将被删除。7.2使用层定位页面元素在设计网页时，除了可以使用表格对页面元素进行定位外，还可以使用层进行页面元素的定位。使用层可以以像素为单位精确定位页面元素。可以把层放置在页面的任意位置。7.2.1关于层与其它一些图像处理软件中的图层有所不同，Dreamweaver的层是用来存放DIV或SPAN标记描述的HTML内容的容器。层可以包含文本、图像、表单、插件等页面元素。甚至层内还可以包含其它层，即层可以嵌套。7.2.2层的基本操作使用表格定位页面元素虽然可行，但要在页面中自由移动表格是不行的。然而，层却可以在页面中随意移动和定位，比之使用表格更加灵

8、活方便。1．创建层要使用层进行页面布局，首先要创建层。创建层有下列4种方法。（1）插入层：把光标置于文档窗口中想插入层的地方，然后选择“