第3讲-网页的布局与定位.pptVIP

本章知识点和技能点： 利用布局视图、表格、层、框架进行页面布局的方法 ?创建表单的方法以及表单的提交与校验设置 Dreamweaver内置行为的应用 一、网页布局定位 经过前面的学习，相信你已经掌握了基本的网页制作知识，可以独立制作一些较简单的网页了。 但仅仅这些知识还是远远不够的，因为你还不能解决对象的位置会随着浏览器窗口大小的变化而发生变的这个问题，下面我们将介绍网页的布局定位技术，从而实现对网页对象的精确控制。 什么是网页布局定位？ 网页布局定位，就是指把网页元素诸如文本、图片等按需要放在合适的位置，Dreamweaver提供了诸如布局视图、表格、框架、层等网页定位技术，掌握它们才能真正学到网页制作技术的精髓。 网页设计的思想和排版方式是需要网页制作者通过自己的灵感和艺术思想产生的。所以在制作网页前，制作者一般都要有一个设计的总体规划，然后才能按照规划的思想完成网页的制作。 （一）、利用布局视图进行布局 Dreamweaver提供了三种视图模式：标准、扩展和布局，其中“布局”插入栏如图1所示。注意Dreamweaver的某些功能只能在某一种视图模式下使用，如描绘层，只能在标准视图下才有效，而在布局视图中却无效。 1.首页布局 使用布局视图进行首页页面布局的操作过程如下： 步骤1：新建页面index.htm，设置页面属性，标题为动物天堂之门，上、下、左、右边界均为0。 步骤2：执行【查看】→【表格模式】→【布局模式】或单击“布局”插入栏中的“布局”按钮，切换到布局视图模式下。切换到布局视图模式后，文档窗口工具栏的下方会出现一个横条，正中央显示“布局模式【退出】”，这表示当前处于布局模式下，它不会显示在浏览器中。单击“布局”插入栏中的“标准”或单击横条上的【退出】可以回到标准视图模式中。 步骤3：单击“布局”插入栏中的 布局表格按钮，在页面空白处单击并拖动鼠标，绘制布局表格。在其属性面板中设置布局表格的宽度760、高度420。绘制的布局表格如图3所示，布局表格的属性面板如图4所示。 默认设置下，布局表格以灰色显示，顶端有一个标签，底部有一个横条，其中包含列宽及菜单、表格宽度及菜单。 步骤4：在760×420的布局表格中，再绘制四个纵向排列的布局表格，高度分别为80、30、280、30，如图5所示。 步骤5：根据需要在已有的布局表格中嵌套其他的布局表格，如图6所示。 现在大致的布局结构已经出来了，但是还不能添加内容，因为在布局视图下，不允许在布局表格中添加内容，只能在布局单元格中添加内容。 注意： 在一个布局表格中可以嵌套其他布局表格，但是各布局表格之间不能交叉。 当绘制的布局表格与已有的相邻布局表格之间的距离小于等于8个像素时，Dreamweaver会自动对齐已有的相邻布局表格。 步骤6：使用“布局”插入栏中的 布局单元格工具，绘制布局单元格。 在第一行布局表格中绘制三个布局单元格，宽度分别为：80、600、80； 第二行布局表格中绘制一个布局单元格； 第三行绘制三个布局单元格； 第四行绘制一个布局单元格。默认情况下，布局单元格以白色显示，绘制的布局单元格如图7所示。 当鼠标指针移动到布局单元格边框时，它会变成红色，单击可以选择此布局单元格，选中后布局单元格边框变为蓝色，并显示控制柄。布局单元格不能覆盖其他单元格，也不能移动到布局表格之外。 利用布局单元格的属性面板可以设置单元格宽度、高度以及内容的对齐方式等。图8为第一行右侧布局单元格的属性面板设置。 注意：在布局模式下，不能在一个表格的单元格中再绘制布局表格。如果要在表格的单元格中嵌套表格，必须使用标准模式。 在布局表格和布局单元格的属性面板中都有“自动伸展”选项，其作用是使表格或单元格的宽度可以随着浏览器窗口的变化而自动伸展。 在给定的布局表格中，只能让一列自动伸展。如果把一列设置为自动伸展，那么这一列里所有的单元格都具有自动伸展特性。 2.首页制作 在制作首页的过程中，需要插入用Fireworks制作的网页素材，如Logo图标、Banner广告、导航条等。 步骤1：设置760×420布局表格的背景颜色为#DDFFDF。 步骤2：在第一行的三个布局单元格中，分别插入Logo图标、插入Banner广告条和输入文字。 步骤3：在第二行中插入利用Fireworks制作的导航条。单击“常用”插入栏中的 Fireworks HTML按钮，弹出“插入Fireworks HTML”对话框，如图9所示，通过【浏览】按钮选择所需的文件dh.htm。然后单击【确定】按钮，结果如图10所示 步骤4：在内容区插入图片、输入相关文字，在页面范围的下端输入版权声明。文字的大小为10pt，版权声明布局单元格的颜色为#C8F7FE。内容添加完成后的结果如图11所示。 步骤5：切换