第4章 网页布局.ppt

1、,DIV+CSS 网页布局,传统布局与DIV+CSS布局,应用实例,在Dreamweaver中定义CSS,XHTML与CSS基础,第,4,章,理解网页布局的原理，了解传统布局与DIV+CSS布局的不同之处。 了解XHTML语法规范，掌握CSS语法基础。 掌握CSS布局与定位的方法和技巧。,学习目标,布局：英文名称叫做Layouts，就是在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。 布局的实质：表格或者DIV+CSS（Web标准）。,传统Table布局方式只是利用了HTML的

2、table元素所具有的零边框特性。因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。,传统Table布局示意图,Table布局的缺点,设计复杂，改版时工作量巨大； 表现代码与内容混合，可读性差； 不利于数据调用分析； 网页文件量大，浏览器解析速度慢如蜗牛。,Web标准的构成,表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等. 主要技术就是CSS,目前版本2.0,行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技

3、术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言),结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML,Web标准布局,基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： 高效率的开发与简单维护； 信息跨平台的可用性； 降低服务器成本，加快网页解析速度； 更良好的用户体验。 CSS2.0从真正意义实现了设计代码与内容分离。,真正的表现与内容完全分离，代码可读性强，样式可重复应用。,CSS布局代码示例, 测试页 头部 主体 尾部 ,Xhtml文档,* font-family: Arial, Helv

4、etica, sans-serif, 宋体; font-size: 12px; margin: 0px; text-align:center; #container width: 810px; margin:auto; background:#CCCCCC; #header height: 100px; width: 800px; padding:5px; background-color: #6699FF; #content height: 400px; width: 800px; padding:5px; background-color#FF9900; #footer width: 80

5、0px; height: 50px; padding:5px; background-color: #6699FF; ,Style1.css,最终布局效果,表格布局的定位都采用表格，通过表格的间距或者声名无色透明的GIF图片来控制各布局版块的间距；而CSS布局则采用DIV来定位，通过层的margin（边界）、padding（填充）、border（边框）等属性来控制版块的间距。 在考虑页面整体表现效果前，应当先考虑页面内容的语义和结构（即分块），然后再使用CSS对每一个内容块进行布局。,CSS布局与传统表格布局最大区别,分析和规划页面结构，可能得到类似如下几块： 标志和站点名称 主页面内容 站点

6、导航（主菜单） 子菜单 搜索框 功能区（如购物车、收银台等） 页脚（版权和有关法律声明） 用DIV+CSS布局时，一般要求将所有辅助图片都用背景来实现。,为什么要使用XHTML? XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。 HTML：更多的被用于网页设计和表现 XHTML：它的初衷就不是为了表现，而是对网页内容进行结构设计，严格的说它是面向文档结构的语言，更符合未来的发展要求！,选择合适的DTD,一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。对于XHTML而言，可以选择三种不

7、同的XHTML文档类型，请看下面代码：, 无标题文档 ,Transitional类型：过度类型。浏览器对XHTML的解析将为宽松（建议使用） Strict类型：严格类型。文档中不允许使用任何表现样式的标识和属性 Frameset类型：框架页类型。网页使用框架结构时，声明此类型,DreamweaverCS3中DTD,（DTD文档类型）选择画面,XHTML 语法规范,属性名称必须小写，因此时区分在大小写 属性值必须使用双引号 不允许使用标签简写 使用id替代name 必须使用结束标签 注意：选择合适的标签（区别与table布局的习惯.） 布局用：； 文本用：， 图片用： 列表用： 数据用： 其他的

8、：form，input，select,各司其职,CSS （Cascading Style Sheet）中文译为层叠样式表或级联样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。 使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。,利用CSS样式还可以代替表格进行网

9、页布局，这是目前较为流行页面排版方式，如下页图所示。 该实例主要采用了div标签css样式，涉及到的知识点有以下几点： 分析构架：画出构架图； 模块拆分：分别定义Div的CSS样式； 在网页中插入Div标签，在Div中填充网页内容； 总体调整：色彩及内容调整，适当修改CSS样式。,CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定。,实例代码：CSS按位置的分类, 测试页 头部 主体 尾部 ,在之间加入 import url(css/style2.css); 称为：导入式样式表,创建CSS样式 选择“窗口”菜单“CSS样式”命令，打开“

10、CSS样式”面板，出现 “CSS样式”面板。,单击面板右下角的“新建CSS样式”按钮 ，创建CSS样式，弹出“新建CSS样式”对话框。,选择器类型有以下三种： （1） 类 自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定义来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为： 标题1应用自定义的样式 （2） 标签 重新定义指定标签的外观，例如：创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。,（3） 高级 在CSS 选择

11、器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗号隔开），定义嵌套的样式（td img空格隔开），定义包含特定 id 属性的标签的格式设置（注：在网页中每个ID名称只能使用一次）。,定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页和标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“

12、确定”按钮后，弹出“H1的CSS规则定义”对话框，如下页图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。,类型：主要用于定义文字的属性,背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。,重复：设置图像作为背景时是否需要重复显示。 附件：设置背景图像是否跟随内容滚动。,区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。,垂直对齐：应用于图像，可以设置图文的对齐方式,方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高度和浮动方式等。,注： 方框（盒子）属性把对象作为一个整体看待，装在一盒子里。,边框：主要用于设置边框的样式。,

13、列表：主要用于设置文本列表的类型、列表项图片等。,定位：主要设置对象在网页中的具体位置。,扩展：主要用于制作鼠标样式、图片特殊效果,滤镜效果的应用,CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜可以为样式控制的对象指定特殊效果。 注意：CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或层应用CSS样式。,Alpha透明效果 Blur模糊效果

14、 Chroma将指定的颜色设置成透明 Dropshadow投影效果 FlipH进行水平翻转 FlipV进行垂直翻转 Glow发光效果,Grayscale产生灰阶 Invert反转底片效果 Light灯光投影 Mask遮罩 Shadow阴影效果 Wave水平与垂直波动效果 Xray设置X光效果,滤镜效果的应用,Alpha 滤镜 功能：指定一个元素的透明度。 例如：设置滤镜 Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=100, StartY=75, FinishX=200, FinishY=150),Blur 滤镜 功能：指定一个元素的

15、模糊效果。 例如：设置滤镜 blur（add=true，direction=135，strength=10）,FlipH， FlipV 滤镜 功能：这两个滤镜可以分别将对象水平翻转和垂直翻转。 例如：设置滤镜 FilpH与FilpV,Chroma 滤镜 语法：filter:chroma（color=color） 功能：可以设置一个对象中指定的颜色为透明色。 DropShadow 滤镜 功能：可以给对象添加阴影效果。 例如： 设置滤镜dropshadow（color=gray，offx=5，offy=5，positive=1）,Glow 滤镜 功能：使对象的边缘产生类似发光的效果。 例如：设置滤

16、镜glow（color=red，strength=10）,Gray ，Invert，Xray 滤镜 功能：Gray滤镜是把一张图片变成灰度图。Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值。Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X光片”效果。 如图：三种滤镜后的效果。,Light 滤镜 语法：filter:light 功能：这个滤镜可以模拟光源的投射效果。一旦为对象定义了“light”滤镜属性，那么就可以调用它的方法来设置或者改变属性。 Mask 滤镜 语法：filter:mask（color=color） 功能：可以为对象建立一个覆盖于表

17、面的膜，其效果就象戴者有色眼镜看物体一样。,Shadow 滤镜 功能：可以在指定的方向建立物体的投影。 例如：设置滤镜shadow（color=gray，direction=225）,Wave 滤镜 功能：把对象按照垂直的波形样式打乱。 例如：设置滤镜Wave(Add=true, Freq=3, LightStrength=10, Phase=10, Strength=10),、应用自定义的CSS样式 （1）在文档窗口中，选定要应用样式的对象。可以在文档窗口中直接选择对象，也可以使用窗口底部状态栏的标签选择器来选择对象。 （2）从“属性”检查器上的“样式”列表中选择要应用的样式，如图所示。有些

18、样式应用后会立刻在文档窗口中显示出来，有些样式应用后需在IE浏览器中才能显示出来。,应用自定义的CSS样式,、取消对自定义CSS样式的应用 要想取消文档中某个元素对自定义CSS样式的应用，可以在上面应用样式中介绍的各种下拉列表或菜单中选择“无”即可。也可以在“CSS样式”面板中将该样式删除。,用户可以选用自己文档中的所有样式表，也可以选用或链接已存在的样式表并应用到文档中。要附加外部的CSS样式表，可按下面进行操作： （1）在“CSS样式”面板，单击面板下方的“附加样式表”按钮，弹出“链接外部样式表”对话框，如图所示。,附加外部CSS样式表,说明： 样式表文件的扩展名为“.css”。 “链接”

19、：只是读入样式表中的信息，而没有将信息导入到当前文档中。 “导入”：将外部CSS样式表中的信息导入到当前文档中。 在 “媒体”下拉列表中选择样式表的目标媒体。 单击“确定”按钮，在CSS样式面板的“全部”模式下，可以看到附加的外部CSS样式表文件。,为了达到样式的共享，可以导出文档中存在的所有样式： （1）打开CSS样式面板，切换到“全部”模式。 （2）选择要导出的样式，并单击鼠标右键，从弹出的菜单中选择“导出”，出现“导出样式为CSS文件”对话框。 （3）设置样式文件的文件名和文件夹位置，单击“保存”按钮，关闭对话框，完成样式的导出。,导出外部CSS样式表,、编辑当前文档中创建的CSS样式表

20、 在CSS样式面板的“全部”模式下，选择要修改的样式，然后采取以下任意一种方法来进行编辑： 单击鼠标右键，从菜单中选择“编辑”，在对话框中编辑。 单击CSS样式面板下方的“编辑样式”按钮。 双击要修改的样式。 在“全部”模式的“属性”窗格中，直接进行编辑。 注：编辑完成后，系统会立即重新格式化所有该样式表控制的对象。,编辑CSS样式表,2、编辑外部CSS样式表 方法一：在应用它的文档中进行编辑。编辑方法与文档中创建的样式的编辑方法一样。编辑时，会自动弹出样式表文件的代码窗口，所进行的修改不仅会立即反映到文档窗口中，而且也会反映到外部样式表文件中，因此，在编辑完成后还需对该样式文件进行保存。 方

21、法二：打开外部样式表文件进行编辑。打开需要更新的样式表文件，直接对其中的样式属性进行编辑，完成后保存并关闭样式表文件。网站中所有应用该样式表的内容将全部自动更新。,某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。,删除CSS样式,【例】应用CSS样式设计出图文混排效果，如图所示。 此实例所涉及到的知识点是CSS样式的创建和应用，主要包括以下几个方面： 背景样式、文本及列表样式、方框与边框样式、动态链接样式； 建立单独的CSS文件，应用于多个网页。,背景样式的应用,在本例中，上方桔黄色的横条其实是重定义了body标签的网页背景图像，背景

22、图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下： 步骤 单击“窗口”菜单“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，弹出“CSS规则定义”的对话框，选择“选择器类型”为“标签”，在“标签”下拉列表中选择body，定义在：选择“仅为该文档”，单击“确定”按钮，弹出 “body的CSS规则定义”的对话框，单击“背景”选项卡，设置背景图像为：images/bg.gif，单击“重复”下拉列表，选择“横向重复”命令。 步骤2 设置页边距单击“方框”选项卡，在边界中分别设置上、下均为50像素，左右均为100像素。,文本及列表的应用,在本例中，文本和列表都应用

23、了CSS样式，分别设置字体、段落、列表的相关属性。第一行文本是标题1（标签为H1），第二行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1、字体的样式设置 在“CSS规则定义”对话框的“类型”选项卡中设置。 2、文本段落的样式设置 在“CSS规则定义”对话框的“区块”选项卡，设置。 3、列表的样式设置 类型：设置项目符号或编号的外观。 项目符号图像：指定图像替代项目符号的样式，美化项目符号。 重定义项目列表（标签为UL)。,方框和边框样式的应用,在本例中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。 图像边距的设置 图像的边框的设置,动态链接样式,简单的CSS链接样式可以在页面属性中的“链接”选项卡中设置。 在本例中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。,1、建立链接CSS样式 单击“CSS样式”