1、网页设计与制作,第四章 设计页面布局,网页版面布局概述,实例导入：表格排版网页,使用表格排版,使用层排版,时间轴特效及行为,使用框架排版网页,4.1 网页版面布局概述,网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种：“T”结构布局 页面顶部为横条的网站标志、广告条，下方
2、左面为主菜单，右面显示内容的布局，因为菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。,“口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。 “三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。,4.1 网页版面布局概述,4.1
3、网页版面布局概述,POP布局 POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法用于规划和设计页面：表格、层、框架和CSS+DIV，本章只介绍前三种方式。,4.2 实例导入：表格排版网页,4.2 实例导入：表格排版网页,在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在一起，使整个网页井井有条而不至于杂
4、乱无章。 【例4.1】某生物工程公司网站，在本实例中，主要涉及以下知识点：页面采用表格进行整体布局，表格划分为若干个单元格，在单元格内填充网页元素，实现网页的布局；通过定义网页的背景图片达到美化网页的效果；该页的栏目导航采用 “导航条”效果。,4.3 使用表格排版,表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所示。在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。,4.3.1 插入表格和编辑表格,表格在网页中通
5、常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。1、插入独立表格插入表格一般有两种方法 方法一：单击“插入”栏“常用”选项“表格”按钮； 方法二：选择“插入”菜单|“表格”命令；弹出“表格”对话框,4.3.1 插入表格和编辑表格,4.3.1 插入表格和编辑表格,2.插入嵌套表格 在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。其操作步骤如下：光标放在表格的某个单元格内，再单击“插入”栏“常用”选项“表格”
6、按钮。,4.3.1 插入表格和编辑表格,.编辑表格 增加行与列 删除行或列 格式化表格 排序表格 导入与导出表格数据,4.3.2表格及单元格属性设置,1、表格属性设置要对表格进行属性设置，必须首先选中表格，选中表格的常用方法有以下四种：方法一：将光标置于表格内，单击“文档”窗口左下角的标签选中整个表格。方法二：将鼠标指针移动到表格的边框处，单击鼠标左键选中表格。方法三：将光标置于表格内，选择“修改”菜单|“表格”|“选择表格”命令，选中表格。,4.3.2表格及单元格属性设置,方法四：将光标置于表格内，单击鼠标右键，在弹出菜单中，选择 “表格”|“选择表格”命令，选中表格。选中表格后，在“属性”
7、面板中设置表格的属性，如图所示。,4.3.2表格及单元格属性设置,2.单元格属性的设置光标放在单元格内，在“属性”面板中设置单元格属性。如图所示，“属性”面板分为上下两部分，上半部分是对单元格中对象的属性设置，下半部分是对单元格属性的设置。另外对单元格还可进行拆分和合并单元格的操作。,4.3.3使用表格排版网页,表格是能将网页元素按设计者要求的方式显示的一种排版技术。通过单元格的拆分、合并以及在单元格中插入嵌套表格等方法对网页元素进行更细致的控制。其操作步骤如下： 步骤1插入一个表格，按照事先考虑好的版面设计将表格划分为几个大的单元格，设置合适的宽度，边框设置为，使边框不可见，需要时可在单元格
8、中插入嵌套表格，同样将边框设为，使边框不可见。 步骤2向各个单元格中加入网页元素，编辑完毕后保存文档。,4.3.3使用表格排版网页,使用表格构造网页布局时应遵循如下原则：要规划好再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。在外部使用绝计像素方法，在内部使用相对百分比方法。,4.3.4 在布局模式下插入表格和单元格,为了简化使用表格进行页面布局的过程，在Dreamweaver提供了布局模式。在布局模式下，使用布局表格作为基础结构来设计网页，在布局表格中创建布局单元格，然后插入网页元素。 在布局模式下，使用表格进行布
9、局具有定位简单、容易调整等优点。例如：在布局模式中可以在页面上方便地绘制布局单元格，可将这些单元格拖动到所需的位置；还可以方便地创建固定宽度的布局或自动伸展为整个浏览器窗口宽度的布局。,4.3.4 在布局模式下插入表格和单元格,1、绘制布局表格与布局单元格 首先从标准模式切换到布局模式：单击“插入”栏“布局”选项“布局模式”按钮。切换到布局模式后，就可以创建布局表格，并在其中添加布局单元格。要说明的是，布局单元格不能在布局表格之外，同一个布局表格中可放置多个布局单元格，布局表格可嵌套。操作步骤如下： 步骤1单击“绘制表格”按钮，鼠标在页面上变为“+”形，按下鼠标左键拖动可绘制布局表格。 步骤2
10、单击“绘制布局单元格”按钮，鼠标在页面上变为“+”形，按下鼠标左键拖动可绘制布局单元格。,4.3.4 在布局模式下插入表格和单元格,如图所示：,4.3.5 表格排版实例的制作过程,本小节讲解【例4.1】利用表格进行网页布局的制作过程。作为专业的设计者，首先利用图形制作软件如：Fireworks、Photoshop等，绘制一张网页草图，然后根据网页草图利用表格对网页进行排版。,4.4 使用层排版,除了表格以外，层是另外一种定位网页元素的方法。本节介绍层的概念和操作，并通过一个实例说明如何利用层进行页面布局的设计。,4.4.1 实例导入：层排版网页,Dreamweaver中的层是一种网页元素定位技
11、术，它可以包含文字、图像、表格、插件甚至其它层。一个网页中可以含有多个层，层的特点在于各个层之间可以重叠，并可以决定每个层是否可见，还可以定义各个层之间的层次关系。层可以转换成表格，通过与“时间轴”及行为的结合，能够实现动态交互效果。,4.4.1 实例导入：层排版网页,【例4.2】八珍食府网站首页，本网页实例采用了层排版网页，时间轴与行为结合制作了网页动态效果，如图所示。在本实例中，主要涉及以下知识点：以层作为页面布局的工具，设置层的背景颜色、大小及位置；调整层与层间的相对关系，通过“Z”值设置层的叠放顺序；向层内添加图像、FLASH动画、文本、表格等网页元素；利用时间轴和行为制作网页动态效果
12、。,4.4.1 实例导入：层排版网页,4.4.2 插入层和编辑层,1、插入层 在Dreamweaver中，插入层的方法有多种，常用的方法有以下两种： 方法一：将光标放置在需要插入层的地方，选择“插入”菜单“布局对象”“层”命令，在“文档”窗口中插入一个空的预设大小的层。 方法二： 单击“插入”栏“布局”选项“描绘层”按钮，移动鼠标到“文档”窗口，当鼠标变成“”形状，单击鼠标左键并拖动，即创建了层，如图所示。,4.4.2 插入层和编辑层,2、层的关系 如果两个层有交叉，它们有两种关系：重叠与嵌套。重叠就是位置上有重叠，但两个层是独立的，一个层发生变化时，不影响另外一个层，而嵌套时，子层会随着父层
13、的某些属性的变化而变化，而父层不随子层发生变化。3、创建嵌套层 层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层。创建嵌套层常用的方法有以下三种： 方法一：光标放在当前层中，选择“插入”菜单“布局对象”“层”命令。 方法二：选中当前层，单击“插入”栏“布局”选项“绘制层”按钮，同时按下Alt键绘制层。 方法三：打开“层”面板，按下Ctrl键，将某一层拖动到另一层位置。,4.4.2 插入层和编辑层,4、层的属性设置 设置层的属性时，首先要选中层。选中层的常用方法有以下三种： 方法一：单击层边框线。 方法二：单击层锚记。 方法三：单击“层”面板上的层名称。 当层被选中后，周围出现控制手柄，层
14、锚记变为蓝色显示。要同时选择多个层，按下Shift键，连续单击要选择的层。选中层后，通过“属性”面板进行属性设置，如图所示。,4.4.2 插入层和编辑层,5、层的操作（1） 层的移动 操作步骤如下：选中层，拖动到合适的位置。（2）层的对齐 选中多个层，选择“修改”菜单|“排列顺序”某项“对齐方式”命令。对齐方式：左对齐、右对齐、对齐上缘、对齐下缘等，如图4.28所示，设定层的对齐方式时，以最后一个选中的层的上、下、左、右边界为对齐参考点。,4.4.2 插入层和编辑层,（3）改变层的顺序 当网页中出现多个层时，就会出现重叠现象。那么层的叠放顺序会影响其显示效果。改变层顺序的常用方法有以下两种：
15、方法一：选中层，在“属性”面板中，Z轴文本框中输入数值来决定层的叠放顺序。其值越大越靠上，如果其为负值，表示层位于页面之下，页面中的内容将会覆盖层中的内容。 方法二：在“层”面板中双击Z轴的值，修改此值；或是直接拖动层，改变它们的上下位置，Z轴值会自动变化。,4.4.2 插入层和编辑层,（4）显示和隐藏层 选中层，选择“窗口”菜单“层”命令，打开“层”面板，单击“层”面板上的眼睛图标，眼睛睁开为显示层，眼眼闭上为隐藏层，无眼睛图标表示可见性为默认， （5）层与表格的相互转换 由于层所具有的灵活性是表格所无法比拟的，因此可以通过在层中添加内容，使其布局在页面中任何位置，而且不会使其它页面元素受到
16、影响。但由于它缺乏紧凑性，在不同浏览器显示，可能会发生层的位置偏移，因此Dreamweaver提供了层与表格互相转换功能，以结合各自的优点更好地进行网页设计操作。,4.4.3 使用层排版网页的制作过程,本小节讲解【例4.2】利用层技术进行网页布局的制作过程，分辨率设置为1024*768，此网页共创建了5个层相互重叠 。,4.4.3 使用层排版网页的制作过程,4.5 时间轴特效及行为,时间轴是一条贯穿时间的线，用于表示网页存活时间中发生的各种状态。通过在这条时间轴上的不同时间放置的不同内容，就可以实现网页元素的动态效果。 Dreamweaver提供了一种简洁而且快捷的方式，无须编写任何代码便可以
17、快速在HTML代码中嵌入JavaScript脚本语言实现特效，这就是行为。,4.5.1 实例导入：网页中的时间轴特效及行为的应用,在【例4.2】中利用层、时间轴、行为相结合实现动态交互效果。 当浏览网页时，有一幅卡通图像在页面上动态飘动，当单击了该图像后，则出现了“欢迎光临八珍美食”的提示信息，当用户单击“确定”按钮后，卡通图像继续飘动。该网页特效实例主要涉及了以下几个知识点： 层与时间轴配合制作动画； 为网页元素定义“行为”特效。,4.5.2 利用时间轴制作动态特效,1. 创建时间轴 “时间轴”面板显示层与图像随时间变化的属性。选择“窗口”菜单“时间轴”，或者按下组合快捷键ALT+F9键，打
18、开“时间轴”面板。用鼠标拖动网页元素放在“时间轴”面板的相应帧上，就把该元素加入到“时间轴”中。 “时间轴”面板中出现了一段蓝色的时间轴，第一个圆圈代表时间轴的开始，最后一个圆圈代表时间轴的结束，圆圈代表关键帧。2. 什么是关键帧？ 关键帧是动画效果中的标志点，在这个标志点上可以对网页元素的状态进行调整和编辑。关键帧之间的帧称为过渡帧，这些帧是不可编辑的。确定了关键帧上的网页元素的状态后，Dreamweaver会自动计算过渡帧中网页元素的状态，从而实现动态效果。,4.5.2 利用时间轴制作动态特效,3. 修改关键帧 改变网页元素的属性：选择关键帧，在“属性”面板中改变网页元素的属性。 延长时间
19、轴的长度：在“时间轴”上单击关键帧向右移动，可延长“时间轴”的长度。 增加关键帧：单击“时间轴”，单击鼠标右键，在弹出菜单中选择“增加关键帧”命令。 删除关键帧：选中已有的关键帧，单击鼠标右键，在弹出菜单中选择“移除关键帧”命令。,4.5.2 利用时间轴制作动态特效,单击“时间轴”面板中的“前进”和“后退”按钮预览动画效果。选中“自动播放”复选框或“循环”复选框，在浏览器中自动循环播放动画 。,4.5.3 转换表格和层,4. 拖动路径创建时间轴 Dreamweaver可以将拖动层的轨迹记录下来，利用层的拖动创建图像随时间轴飘动的动态效果。其操作步骤如下： 步骤1单击“插入”栏“布局”选项“绘制
20、层”按钮，在动画开始位置绘制一个层，单击层内，插入一幅图像。 步骤2选中层，选择“修改”菜单“时间轴”“录制层路径”命令，按F4快捷键，隐藏所有的面板，在“文档”窗口中随心所欲地拖动层，最后与起点重合，放开鼠标。此时，Dreamweaver将层所经过的路径记录下来。,4.5.3 转换表格和层,步骤3打开“时间轴”面板，选中“自动播放”和“循环”两个复选框，如图所示。,4.5.3 应用Dreamweaver内部的行为,1. 行为的概念 行为主要有3部分组成：对象、事件和动作。对象是行为的主体，在网页中的对象主要有文本、图像、窗口等。 事件是针对某一对象所执行的特定的操作。如当鼠标指针指向超链接时
21、，会生成一个OnMouseOver事件；当单击超链接时，会生成一个OnClick事件。不同的对象通常会产生不同的事件。 动作主要是由JavaScript编写的实现特定功能的代码组成。一旦动作与某一特定事件关联，则当产生事件的同时会触发相应的动作，以实现特定的功能。比如要在窗口载入（OnLoad）的过程中打开新的窗口，则可以将OnLoad事件与打开新窗口的动作相关联。,4.5.3 应用Dreamweaver内部的行为,2. Dreamweaver内部的行为 Dreamweaver内置的行为有多种，通过“行为”面板查看。选择“窗口”菜单“行为”命令，打开“行为”面板，如图所示。,4.6 使用框架排
22、版网页,框架可以把一个浏览器窗口划分多个区域，每个区域显示不同的网页，它的这个特性使其成为一种常用的页面排版技术。,4.6.1 实例导入：框架排版网页,【例4.4】框架排版网页：某某电子公司网站，如图所示。 本实例所涉及到的主要知识点包括以下几点：使用框架技术布局和制作网页；该网页的布局是一个包括三个框架（topframe,leftframe,mainframe）的框架集frameset，上框架始保持不动，当浏览者单击左边的导航栏时，相应的内容显示在右边区域；使用框架技术的关键是：在使用链接时，必须指定链接的目标位置。,4.6.1 实例导入：框架排版网页,4.6.2 创建与编辑框架结构,1.
23、框架构成及设置 一个框架实际上是由多个HTML文档所构成的，其中一个页面专门负责框架的集成，比如是分行型还是分列型，或者是混合型；行和列的尺寸如何等，一般被称为框架集页面，其它的是普通的HTML文档，分别被放置到框架结构中，被称为框架页，当链接到设置框架的HTML文档时，整个框架以及各HTML文档就会一起显示在浏览器中。2.创建框架 启动Dreamweaver后，单击启动界面“从范例创建”“框架集”，弹出 “新建文档”的对话框，单击“常规”选项卡，选择“框架集”及右侧列表框中的框架样式，如图所示。,4.6.2 创建与编辑框架结构,4.6.2 创建与编辑框架结构,3、编辑框架 用户可对已经创建好
24、的框架集进行编辑和修改，例如将一个框架拆分成几个更小的框架，或是移动框架的边框来改变框架显示的范围大小。拆分框架删除框架改变框架的行高和列宽,4.6.2 创建与编辑框架结构,4. 选择框架 选择“窗口”菜单“框架”命令，打开“框架”面板，如图所示。,框架外框,框架内嵌外框,框架内部,4.6.2 创建与编辑框架结构,5. 设置框架属性（1）设置框架集属性 选中框架集，在“属性”面板中可以定义框架集的属性，如图所示。,4.6.2 创建与编辑框架结构,（2）设置框架的属性 选中某个框架，在“属性”面板可以定义框架属性，如图所示。,4.6.2 创建与编辑框架结构,6、设置超链接目标框架 所谓超链接目标
25、框架，是指当单击超链接时，超链接的目标网页文件在哪个框架中显示。例如：对于一般左窄右宽的列式框架结构，一般是在左边框架的网页中包含超链接的导航信息，而在右边的框架中显示超链接的目标网页文件。在“目标”下拉列表中，选择目标框架名，如图所示。,4.6.2 创建与编辑框架结构,在“目标”下拉列表中，选择目标框架名，如图所示。 链接目标的含义：_blank：在一个新窗口显示超链接的目标文件，同时保持当前窗口不变。_parent：在上一级框架中打开链接文件。_self：在当前框架中打开链接，同时替换该框架中的内容。为网页超链接的默认目标窗口。_top：删除所有框架，在当前浏览器窗口中打开链接的文档。如果想跳出框架结构，应选用此项。具体的框架名称：在指定的框架位置显示链接文件。,4.6.2 创建与编辑框架结构,7. 保存框架和框架集 创建好框架结构，设置好框架的属性后，就要保存框架。此时用户可以单独保存一个框架集文件，或一个框架文件，或保存所有打开的框架文件和框架集文件。8. 编辑无框架内容 如果浏览器不支持框架，则无法显示框架集和框架文档内容，这时必须生成一个无框架文档，当不支持框架的浏览器载入框架文件时，浏览器只会显示无框架内容。,
