页面布局设计 推荐

《页面布局设计 推荐》由会员分享，可在线阅读，更多相关《页面布局设计 推荐（89页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作第四章第四章 设计页面布局设计页面布局4.14.24.34.44.54.6网页版面布局概述实例导入：表格排版网页使用表格排版使用层排版时间轴特效及行为使用框架排版网页4.1 网页版面布局概述网页版面布局是网页设计中的一项重要内容。版面指的 是浏览器看到的完整的一个页面。因为每个人的显示器分辨 率不同，所以同一个页面的分辨率可能出现800*600像素， 1024*768像素等。布局，就是以最适合浏览的方式将图片和 文字摆放在页面的不同位置。网页版面布局是指定网页内容 在浏览器中的显示方式，例如徽标的位置、导航栏的显示、 主要内容的排版等。经常用到的版面布局结构主要有以下几 种：v

2、“T”结构布局页面顶部为横条的网站标志、广告条，下方左面为主菜 单，右面显示内容的布局，因为菜单条的背景较深，整体效 果类似英文字母“T”，这是网页设计中用的最广泛的一种布 局方式。这种布局的优点是页面结构清晰，主次分明。是初 学者最容易上手的布局方法。缺点是规矩呆板，如果细节和 色彩上不注意，很容易让人“看之无味”。v “口”型布局这是一个象形的说法，就是页面一般上下各有一个 广告条，左面是主菜单，右面是友情连接等，中间是主 要内容。这种布局的优点是充分利用版面，信息量大。 缺点是页面拥挤，不够灵活。 “三”型布局这种布局多用于国外站点，国内用的不多。特点是 页面上横向两条色块，将页面整体分

3、割为四部分，色块 中大多放广告条。4.1 网页版面布局概述4.1 网页版面布局概述v POP布局POP引自广告术语，就是指页面布局像一张宣传海 报，以一张精美图片作为页面的设计中心。常用于时尚 类站点，比如ELLE.com。优点显而易见:漂亮吸引人。缺 点就是速度慢。在确定好版面布局结构后，继续要做的就是根据内 容调整页面的结构。如页面尺寸选择多大？怎样放置网 页的网页元素？在Dreamweaver中提供了四种主要的方法 用于规划和设计页面：表格、层、框架和CSS+DIV，本章 只介绍前三种方式。 4.2 实例导入：表格排版网页4.2 实例导入：表格排版网页在网页设计中，表格以简洁明了和高效快

4、捷的方式 将网页设计的各种元素有序地组织在一起，使整个网页 井井有条而不至于杂乱无章。【例4.1】某生物工程公司网站，在本实例中，主要 涉及以下知识点： v 页面采用表格进行整体布局，表格划分为若干个单元格 ，在单元格内填充网页元素，实现网页的布局； v 通过定义网页的背景图片达到美化网页的效果； v 该页的栏目导航采用 “导航条”效果。4.3 4.3 使用表格排版v 表格是由一些被线条分开的单元格组成。线条即表格的 边框，被边框分开的区域被称为单元格，数据、文字、 图像等网页元素均可根据需要放置在相应的单元格中。 如图所示。v 在网页中使用表格一般有两种情况：一种是在需要组织 数据显示时用；

5、另一种是在布局网页时用。当表格被用 作布局时，需要对表格的属性进行设置。 4.3.1 4.3.1 插入表格和编辑表格插入表格和编辑表格表格在网页中通常存在两种形式：一种是独立的形 式存在，二是以嵌套的形式存在。1、插入独立表格 v 插入表格一般有两种方法方法一：单击“插入”栏“常用”选项“表格 ”按钮；方法二：选择“插入”菜单|“表格”命令；弹出“ 表格”对话框 4.3.1 4.3.1 插入表格和编辑表格插入表格和编辑表格4.3.1 4.3.1 插入表格和编辑表格插入表格和编辑表格v 2. 插入嵌套表格在网页中为了保证各部分内容之间相对独立性，而 不会因为编辑其它内容的同时被修改，表格的嵌套形

6、式 在网页中普遍存在。一般，网页有一个大的外层表格， 按区域划分为若干单元格，然后在区域单元格中再插入 嵌套表格，这样各区域的排版即规范又灵活。其操作步 骤如下：光标放在表格的某个单元格内，再单击“插入 ”栏“常用”选项“表格”按钮。4.3.1 4.3.1 插入表格和编辑表格插入表格和编辑表格v . 编辑表格 v 增加行与列 v 删除行或列 v 格式化表格 v 排序表格 v 导入与导出表格数据4.3.24.3.2表格及单元格属性设置表格及单元格属性设置1、表格属性设置v 要对表格进行属性设置，必须首先选中表格，选中表格 的常用方法有以下四种： v 方法一：将光标置于表格内，单击“文档”窗口左下

7、角 的标签选中整个表格。 v 方法二：将鼠标指针移动到表格的边框处，单击鼠标左 键选中表格。 v 方法三：将光标置于表格内，选择“修改”菜单|“表格 ”|“选择表格”命令，选中表格。4.3.24.3.2表格及单元格属性设置表格及单元格属性设置v 方法四：将光标置于表格内，单击鼠标右键，在弹出菜单 中，选择 “表格”|“选择表格”命令，选中表格。选中 表格后，在“属性”面板中设置表格的属性，如图所示。4.3.24.3.2表格及单元格属性设置表格及单元格属性设置2.单元格属性的设置 v 光标放在单元格内，在“属性”面板中设置单元格属性。 如图所示，“属性”面板分为上下两部分，上半部分是对 单元格中

8、对象的属性设置，下半部分是对单元格属性的设 置。 v 另外对单元格还可进行拆分和合并单元格的操作。4.3.34.3.3使用表格排版网页使用表格排版网页表格是能将网页元素按设计者要求的方式显示的一 种排版技术。通过单元格的拆分、合并以及在单元格中 插入嵌套表格等方法对网页元素进行更细致的控制。其 操作步骤如下：步骤1 插入一个表格，按照事先考虑好的版面设计 将表格划分为几个大的单元格，设置合适的宽度，边框 设置为，使边框不可见，需要时可在单元格中插入嵌 套表格，同样将边框设为，使边框不可见。步骤2 向各个单元格中加入网页元素，编辑完毕后 保存文档。4.3.34.3.3使用表格排版网页使用表格排版

9、网页使用表格构造网页布局时应遵循如下原则：v 要规划好再运行，甚至要进行无数次的实验和重复运行 才能制作出好的页面框架。 v 从外向内工作。先建立最大的表格，再在它内部创建嵌 套的较小表格。 v 在外部使用绝计像素方法，在内部使用相对百分比方法 。4.3.4 4.3.4 在布局模式下插入表格和单元格在布局模式下插入表格和单元格为了简化使用表格进行页面布局的过程，在 Dreamweaver提供了布局模式。在布局模式下，使用布局 表格作为基础结构来设计网页，在布局表格中创建布局 单元格，然后插入网页元素。在布局模式下，使用表格进行布局具有定位简单、 容易调整等优点。例如：在布局模式中可以在页面上方

10、 便地绘制布局单元格，可将这些单元格拖动到所需的位 置；还可以方便地创建固定宽度的布局或自动伸展为整 个浏览器窗口宽度的布局。 4.3.4 4.3.4 在布局模式下插入表格和单元格在布局模式下插入表格和单元格1、绘制布局表格与布局单元格首先从标准模式切换到布局模式：单击“插入” 栏“布局”选项“布局模式”按钮。切换到布局模 式后，就可以创建布局表格，并在其中添加布局单元格 。要说明的是，布局单元格不能在布局表格之外，同一 个布局表格中可放置多个布局单元格，布局表格可嵌套 。操作步骤如下：步骤1 单击“绘制表格”按钮，鼠标在页面上 变为“+”形，按下鼠标左键拖动可绘制布局表格。步骤2 单击“绘制

11、布局单元格”按钮，鼠标在 页面上变为“+”形，按下鼠标左键拖动可绘制布局 单元格。4.3.4 4.3.4 在布局模式下插入表格和单元格在布局模式下插入表格和单元格如图所示：4.3.5 4.3.5 表格排版实例的制作过程表格排版实例的制作过程本小节讲解【例4.1】利用表格进行网页布局的制作 过程。作为专业的设计者，首先利用图形制作软件如： Fireworks、Photoshop等，绘制一张网页草图，然后根 据网页草图利用表格对网页进行排版。 4.4 使用层排版v 除了表格以外，层是另外一种定位网页元素的方法 。本节介绍层的概念和操作，并通过一个实例说明如何 利用层进行页面布局的设计。4.4.1

12、实例导入：层排版网页Dreamweaver中的层是一种网页元素定位技术，它可 以包含文字、图像、表格、插件甚至其它层。一个网页 中可以含有多个层，层的特点在于各个层之间可以重叠 ，并可以决定每个层是否可见，还可以定义各个层之间 的层次关系。层可以转换成表格，通过与“时间轴”及 行为的结合，能够实现动态交互效果。4.4.1 实例导入：层排版网页【例4.2】八珍食府网站首页，本网页实例采用了层排版网 页，时间轴与行为结合制作了网页动态效果，如图所示 。 在本实例中，主要涉及以下知识点： v 以层作为页面布局的工具，设置层的背景颜色、大小及 位置； v 调整层与层间的相对关系，通过“Z”值设置层的叠

13、放顺 序； v 向层内添加图像、FLASH动画、文本、表格等网页元素； v 利用时间轴和行为制作网页动态效果。4.4.1 实例导入：层排版网页4.4.2 插入层和编辑层1、插入层在Dreamweaver中，插入层的方法有多种，常用的方 法有以下两种： v 方法一：将光标放置在需要插入层的地方，选择“ 插入”菜单“布局对象”“层”命令，在“文档” 窗口中插入一个空的预设大小的层。 v 方法二： 单击“插入”栏“布局”选项“描绘 层”按钮，移动鼠标到“文档”窗口，当鼠标变成“ ”形状，单击鼠标左键并拖动，即创建了层，如图所示 。4.4.2 插入层和编辑层2、层的关系 v 如果两个层有交叉，它们有两

14、种关系：重叠与嵌套 。重叠就是位置上有重叠，但两个层是独立的，一个层 发生变化时，不影响另外一个层，而嵌套时，子层会随 着父层的某些属性的变化而变化，而父层不随子层发生 变化。 3、创建嵌套层 v 层的嵌套和表格的嵌套有些类似，就是在层里面再 建立一个层。创建嵌套层常用的方法有以下三种：方法一：光标放在当前层中，选择“插入”菜单 “布局对象”“层”命令。方法二：选中当前层，单击“插入”栏“布局” 选项“绘制层”按钮，同时按下Alt键绘制层。方法三：打开“层”面板，按下Ctrl键，将某一层 拖动到另一层位置。4.4.2 插入层和编辑层4、层的属性设置设置层的属性时，首先要选中层。选中层的常用方法

15、 有以下三种：方法一：单击层边框线。方法二：单击层锚记。方法三：单击“层”面板上的层名称。当层被选中后，周围出现控制手柄，层锚记变为蓝色 显示。要同时选择多个层，按下Shift键，连续单击要选 择的层。选中层后，通过“属性”面板进行属性设置，如 图所示。4.4.2 插入层和编辑层5、层的操作v （1） 层的移动操作步骤如下：选中层，拖动到合适的位置。 v （2）层的对齐选中多个层，选择“修改”菜单|“排列顺序”某 项“对齐方式”命令。对齐方式：左对齐、右对齐、对 齐上缘、对齐下缘等，如图4.28所示，设定层的对齐方 式时，以最后一个选中的层的上、下、左、右边界为对 齐参考点。4.4.2 插入层

16、和编辑层v （3）改变层的顺序当网页中出现多个层时，就会出现重叠现象。那么 层的叠放顺序会影响其显示效果。改变层顺序的常用方 法有以下两种：方法一：选中层，在“属性”面板中，Z轴文本框中 输入数值来决定层的叠放顺序。其值越大越靠上，如果 其为负值，表示层位于页面之下，页面中的内容将会覆 盖层中的内容。方法二：在“层”面板中双击Z轴的值，修改此值； 或是直接拖动层，改变它们的上下位置，Z轴值会自动变 化。4.4.2 插入层和编辑层v （4）显示和隐藏层选中层，选择“窗口”菜单“层”命令，打开“ 层”面板，单击“层”面板上的眼睛图标，眼睛睁开为 显示层，眼眼闭上为隐藏层，无眼睛图标表示可见性为 默认， v （5）层与表格的相互转换由于层所具有的灵活性是表格所无法比拟的，因此 可以通过在层中添加内容，使其布局在页面中任何位置 ，而且不会使其它页面元素受到影响。但由于它缺乏紧 凑性，在不同浏览器显示，可能会发生层的位置偏移， 因此Dreamweaver提供了层与表格互相转换功能，