1、网页设计与网站建设,主讲人：杜永红,第7章 网页布局,网页版面布局概述,7.1,7.2,使用表格排版网页,7.3,了解CSS样式表,7.4,利用CSS+DIV进行网页布局,本章主要介绍了两种网页布局技术：表格排版和CSS+DIV排版。 【本章学习目的】通过学习，读者能够： 了解网页版面布局结构 掌握表格排版技术 了解CSS的功能与用途 掌握定义CSS规则的方法 掌握利用CSS进行网页美化的技巧 重点掌握利用CSS+DIV进行网页布局,案例导入：,利用CSS样式表还可以代替表格进行网页布局，这是目前比较流行的页面布局方式。,该实例主要采用CSS+Div排版，主要涉及以下几个知识点： 1）分析构架
2、：画出构架图； 2）模块拆分：分别定义特定ID的Div标签的CSS样式； 3）在网页中插入Div标签，在Div中插入网页元素； 4）总体调整：色彩及内容的调整，适当修改CSS样式。,7.1 网页版面布局概述,网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现1024*768像素，1280*1024等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种。,1.“T”结
3、构布局页面顶部为横条的网站标志、广告条，下方左面（或右面）为主菜单，右面（或左面）显示内容的布局，因为菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。,2. “口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。,3.“三”型布局这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整
4、体分割为四部分，色块中大多放广告条。,4.POP布局POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。,在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法用于规划和设计页面：表格、CSS+DIV。,表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。如图所示。在网页中使用表格一般有两种情况
5、：一种是在需要组织数据显示时用；另一种是在布局网页时用。当表格被用作布局时，需要对表格的属性进行设置。,7.2 使用表格布局网页,7.2.1 插入表格和编辑表格,表格在网页中通常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。1、插入独立表格 插入表格一般有两种方法方法一：单击“插入”栏“常用”选项“表格”按钮；方法二：选择“插入”菜单|“表格”命令；弹出“表格”对话框,2. 插入嵌套表格在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元格，然后在区域单元格中再插入嵌套表格，
6、这样各区域的排版即规范又灵活。其操作步骤如下：光标放在表格的某个单元格内，再单击“插入”栏“常用”选项“表格”按钮。,. 编辑表格增加行与列 删除行或列 格式化表格排序表格导入与导出表格数据,7.2.2表格及单元格属性的设置,1、表格属性设置 要对表格进行属性设置，必须首先选中表格，选中表格的常用方法有以下四种： 方法一：将光标置于表格内，单击“文档”窗口左下角的标签选中整个表格。 方法二：将鼠标指针移动到表格的边框处，单击鼠标左键选中表格。 方法三：将光标置于表格内，选择“修改”菜单|“表格”|“选择表格”命令，选中表格。,方法四：将光标置于表格内，单击鼠标右键，在弹出菜单中，选择 “表格”
7、|“选择表格”命令，选中表格。选中表格后，在“属性”面板中设置表格的属性，如图所示。,2.单元格属性的设置 光标放在单元格内，在“属性”面板中设置单元格属性。如图所示，“属性”面板分为上下两部分，上半部分是对单元格中对象的属性设置，下半部分是对单元格属性的设置。 另外对单元格还可进行拆分和合并单元格的操作。,7.2.3使用表格排版网页,表格是能将网页元素按设计者要求的方式显示的一种排版技术。通过单元格的拆分、合并以及在单元格中插入嵌套表格等方法对网页元素进行更细致的控制。其操作步骤如下：步骤1 插入一个表格，按照事先考虑好的版面设计将表格划分为几个大的单元格，设置合适的宽度，边框设置为，使边框
8、不可见，需要时可在单元格中插入嵌套表格，同样将边框设为，使边框不可见。步骤2 向各个单元格中加入网页元素，编辑完毕后保存文档。,使用表格构造网页布局时应遵循如下原则：要规划好再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。 从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。 在外部使用绝计像素方法，在内部使用相对百分比方法。,7.3 了解CSS样式表,CSS（Cascading Style Sheet），中文译为层叠样式表。用于定义网页元素的表现形式，是W3C推出的用于格式化网页内容的标准技术，是用于控制网页样式信息与网页内容分离的一种标记性语言。CSS是由一系列样
9、式选择器和CSS属性组成，它支持页面背景属性、方框属性、边框属性、文本属性和列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。使用CSS样式表的一个优点是可以利用同一个CSS样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改其设置时，只要在这个CSS样式表中修改，而不用对每个页面逐个进行修改，简化了网页编辑的工作。,7.3.1 CSS样式表概述,1.样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区域。 外部链接法。将样式表写在一个后缀名为CSS文件中，在需要应用CSS样式的网页中链接该CSS文件，在页面和之
10、间用以下代码调用。 ,2、CSS样式表语法结构 选择符 属性1：值1；属性2：值2 参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。,1. 创建CSS样式 选择“窗口”菜单“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单“CSS样式”“新建”命令，弹出“新建CSS规则”对话框。,7.3.2 定义CSS,选择器类型有以下四种： （1） 类（可应用于任何HTML元素）自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定义来规定标签中的
11、格式。命名时，前面加.,比如将类的样式myh1定义于某个标题，那么代码为：标题1应用自定义的样式 （2） 标签（重新定义HTML元素）重新定义指定标签的外观，例如：创建或更改 ul标签的 CSS 样式时，所有用 ul标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。,（3） ID（仅应用于一个HTML元素） 定义ID的CSS样式，即针对特定网页元素的样式设置，仅用于命名为ID的网页元素。命名时前面加# （4）复合内容（基于选择的内容）：在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗号隔开），定义嵌套的样式（td img 空格隔开）。,
