05第5章Dreamweaver8设计页面布局(三).pptVIP

网站设计 刘雪燕 物理科学与技术学院 Email: lxy5462@ 在网页制作中，对页面进行布局是非常重要的，表格就是页面布局中常用的方式。 Dreamweaver 8不仅支持在表格中有序地排列数据，还可用表格对网页中的文本、图像及其他元素进行定位。 但是，使用表格进行定位不太方便。 最初创建表格是为了显示表格数据，而不是用于对web页进行布局。 为了简化使用表格进行页面布局的过程，Dreamweaver 8提供了一个非常方便的布局工具：布局表格。 使用布局表格，页面布局将变得轻松自如。在“布局”模式中，用户可以使用表格作为基础结构来设计用户的页面，同时避免使用传统方法创建基于表格的设计时经常出现的一些问题。 布局表格实例 布局表格实例 （1）新建网页文件，切换到布局视图，单击布局 窗口上的绘制布局表格按钮，拖动出第一个大 的布局表格。 （2）单击布局表格按钮，同时按住Ctrl键，在页面 中三次拖动鼠标，即在一个大的表格内嵌套三 个小表格。 （3）单击布局窗口的绘制布局单元格按钮，分别 在左侧、右侧的嵌套单元格中拖动出两个布局 单元格。 （4）在中间的表格中插入三个布局单元格。 布局表格实例 （5）单击插入工具栏上的插入图像按钮，在指定 位置插入图像。 （6）在2、7位置输入文字，利用文字属性面板设 置其属性。 （7）切换到标准视图，利用属性面板设置内嵌的 三个小表格的边框宽度、边框颜色、各表格 的间距。 （8）设置左、右侧表格的背景颜色值为 #99FFFF，外围大表格的背景颜色为FFFCC。 网页布局类型 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型 关于第一屏 一般来讲，在800×600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px×435px。 有关导航栏的位置 一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑 。 什么样的布局是最好的 如果内容非常多，就要考虑用“国字型”或拐角型； 如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型； 那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活； 而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选； Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。 页面的主要内容 LOGO（标志） Banner（横幅） 导航栏 网页内容 版权声明 1、页眉区设计 几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。 LOGO: 167×71 2、导航栏形式 　　导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 导航栏有： 横排的 竖排的 也有两种都有的。 网页结构分析 这是一个主页的简单结构，由三个表格组成。 第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。 第二个表格，放网页内容。 第三个表格，放版权信息。 常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构： 表格初始设置 做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。 用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。 表格布局要领 完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。 如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容，如图所示： 5.2.1 布局表格和单元格 当切换到“布局”模式时，用户可以添加布局单元格到页面中，这些单元格将帮助用户勾画自己的页面布局。 Dreamweaver 8提供了标准视图、扩展视图、布局视图3种视图模式。通常使用的是标准视图，可通过插入栏的“布局”类别，切换到布局视图或扩展视图。 扩展视图 　 扩展视图的主要作用是临时向文档中的所有表