第六章.设计页面布局.ppt

《网页色彩搭配》 第四章 设计页面布局 4.1 网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种： “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。 “口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。 “三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 4.1 网页版面布局概述 POP布局 POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法用于规划和设计页面：表格、层、框架和CSS+DIV，本章只介绍前三种方式。 4.2 实例导入：表格排版网页 4.2 实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在一起，使整个网页井井有条而不至于杂乱无章。 【例4.1】某生物工程公司网站，在本实例中，主要涉及以下知识点： 页面采用表格进行整体布局，表格划分为若干个单元格，在单元格内填充网页元素，实现网页的布局； 通过定义网页的背景图片达到美化网页的效果； 该页的栏目导航采用 “导航条”效果。 4.3 使用表格排版 表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所示。 在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。 4.3.1 插入表格和编辑表格 表格在网页中通常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。 1、插入独立表格 插入表格一般有两种方法 方法一：单击“插入”栏｜“常用”选项｜“表格”按钮； 方法二：选择“插入”菜单|“表格”命令；弹出“表格”对话框 4.3.1 插入表格和编辑表格 4.3.1 插入表格和编辑表格 2.　插入嵌套表格 　 　 在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。其操作步骤如下：光标放在表格的某个单元格内，再单击“插入”栏｜“常用”选项｜“表格”按钮。 4.3.1 插入表格和编辑表格 ３.　编辑表格 增加行与列 删除行或列 格式化表格 排序表格 导入与导出表格数据 4.3.2表格及单元格属性设置 1、表格属性设置 要对表格进行属性设置，必须首先选中表格，选中表格的常用方法有以下四种： 方法一：将光标置于表格内，单击“文档”窗口左下角的table标签选中整个表格。 方法二：将鼠标指针移动到表格的边框处，单击鼠标左键选中表格。 方法三：将光标置于表格内，选择“修改”菜单|“表格”|“选择表格”命令，选中表格。 4.3.2表格及单元格属性设置 方法四：将光标置于表格内，单击鼠标右键，在弹出菜单中，选择 “表格”|“选择表格”命令，选中表格。选中表格后，在“属性”面板中设置表格的属性，如图所示。 4.3.2表格及单元格属性设置 2.单元格属性的设置 光标放在单元格内，在“属性”面板中设置单元格属性。如图所示，“属性”面板分为上下两部分，上半部分是对单元格中对象的属性设置，下半部分是