精品第7章网页布局.ppt

《网页设计与网站建设》;第7章 网页布局;;案例导入：;7.1 网页版面布局概述; 1.“T”结构布局 页面顶部为横条的网站标志、广告条，下方左面（或右面）为主菜单，右面（或左面）显示内容的布局，因为菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。 ; 2. “口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。; 3.“三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 ;4.POP布局 POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。; 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法用于规划和设计页面：表格、CSS+DIV。 ; 表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所示。 在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。 ;7.2.1 插入表格和编辑表格; 2.　插入嵌套表格 　 　 在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。其操作步骤如下：光标放在表格的某个单元格内，再单击“插入”栏｜“常用”选项｜“表格”按钮。 ; ３.　编辑表格 增加行与列 删除行或列 格式化表格 排序表格 导入与导出表格数据;7.2.2表格及单元格属性的设置; 方法四：将光标置于表格内，单击鼠标右键，在弹出菜单中，选择 “表格”|“选择表格”命令，选中表格。选中表格后，在“属性”面板中设置表格的属性，如图所示。 ;2.单元格属性的设置 光标放在单元格内，在“属性”面板中设置单元格属性。如图所示，“属性”面板分为上下两部分，上半部分是对单元格中对象的属性设置，下半部分是对单元格属性的设置。 另外对单元格还可进行拆分和合并单元格的操作。 ;7.2.3使用表格排版网页; 使用表格构造网页布局时应遵循如下原则： 要规划好再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。 从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。 在外部使用绝计像素方法，在内部使用相对百分比方法。 ;7.3 了解CSS样式表;7.3.1 CSS样式表概述; 2、CSS样式表语法结构选择符 { 属性1：值1；属性2：值2…… } 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。; 1. 创建CSS样式 选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框。 ;选择器类型有以下四种： （1） 类（可应用于任何HTML元素） 自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定义来规定标签中的格式。命名时，前面加.,比如将类的样式myh1定义于某个标题，那么代码为： h1 class=”myh1”标题1应用自定义的样式/h1 （2） 标签（重新定义HTML元素） 重新定义指定标签的外观，例如：创建或更改 ul标签的 CSS 样式时，所有用 ul标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。; （3） ID（仅应用于一个HTML元素） 定义ID的CSS样式，即针对特定网页元素的样式设置，仅用于命名为ID的网页元素。命名时前面加# （4）复合内容（基于选择的内容）：在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗