网页设计与制作教程第4章网页布局设计.ppt

《网页设计与制作教程第4章网页布局设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计与制作教程第4章网页布局设计主讲：第4章网页布局设计网页布局涉及到网站内各网页的风格，网页上各种元素的显示排列方式。如何方便地调整网页的布局，统一网页的风格是网页设计者非常关心的问题。本章将详细讲解如何利用CSS样式表来控制网页布局。第4章网页布局设计4.1控制网页布局版面指的是浏览器看到的一个完整的页面。因为每台计算机显示器的分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。所谓布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。第4章网页布局设计常用到的版面布局形式如下：“T”结

2、构布局“口”型布局“三”型布局对称对比布局POP布局第4章网页布局设计4.2使用CSS样式表格式化网页4.2.1CSS样式表CSS是“CascadingStyleSheet”的缩写，常被译为“层叠样式表”或“级联样式表”，也可简称为样式表。它简化了HTML语言中各种繁琐标记，使得各个标记的属性更具有一般性和通用性，并且扩展了原先的标记功能，能够实现更多的效果。使用CSS样式可以非常灵活并更好地控制具体的网页外观，从精确的布局定位到特定的字体和样式。它把对象概念真正引入了HTML语言中，使得可以使用脚本程序调用和改变对象属性，使网页中的对象产生动态效果。第4章网页

3、布局设计通过CSS样式表一般可以实现如下功能：更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。灵活地设置一个文本块的行高、缩进，并可以为其加入三维效果的边框。可以方便地为网页中任何元素设置不同的背景颜色和背景图片。可以精确地控制网页中各元素的位置。第4章网页布局设计可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。与脚本语言结合，可以使网页中的元素产生各种动态效果。它是采用直接格式的HTML代码书写，网页打开的速度非常快。第4章网页布局设计在HTML语言中，假如要在一段文字中把一部分文字变成

4、红色，需要这样书写代码：

红色字体<＞font><＞p>,而在CSS样式表中则可以简化成下面的形式：红色字体<＞p>。4.2.2应用CSS样式在Dreamweaver中通过样式面板来应用CSS样式，主要有新建样式、编辑已有样式、删除已有样式。是否保存新建样式取决于样式的应用范围。CSS样式的主要属性包括类型、背景、区块、方框、列表、定位、扩展等。在Dreamweaver中可以很方便地设置样式的各种属性。4.3管理样式表在一个网站中通常会有很多的样式表，管理好这些样式表非常重要。在Dream

5、weaver中可以很方便地管理样式表，完成样式表的创建、编辑、导入和导出。样式表的导入是指把外部的样式表文件导入到本网页文件中使用。而样式表的导出的则是指把本网页文件中所用的样式表导出为一个单独的文件，从而可以供其它网页使用。