页面布局CSSDIV布局技术的常用技巧.ppt

2.6 页面布局 2.6.1 使用表格布局页面 传统的页面布局通常采用表格布局技术，适合一些页面结构不太复杂的小型网站 优点是：布局方便直观 缺点是：显示速度慢，需要将整个表格下载完毕才开始显示页面内容 目前最为流行的页面布局方法是采用CSS+DIV的布局技术 2.6 页面布局 2.6.1 使用表格布局页面 表格布局示例 运行结果 2.6 页面布局 2.6.2 使用DIV和CSS布局页面 优点：体现了结构和表现分离的网页设计思想 浏览器是边解析边显示，速度快 页面结构分析：根据页面所表现的内容构思和规划页面组成的过程 页面布局：在页面结构确定后使用div标记创建需要的各板块区域。 样式设置：对所有div及其他页面元素的表现进行的设置。 2.6 页面布局 1.CSS+DIV页面布局示例 【例2-2】使用CSS+DIV技术设计如图所示的页面布局效果。 （1）页面结构分析 页面由6个板块组成，其中“左边”、“中间”和“右边”3个 板块需要横向排成一行。 设计时将6个板块分别放置在6个不同的层结构中，通过 对各层属性设置实现页面布局效果 （2）创建DIV层 新建一个ASP.NET网站，在Ddfault.aspx页面的源视图中 找到由系统自动添加的div和/div标记，在其中添加 6对div标记。 （3）创建CSS样式表 添加一个样式表，为避免重复设置可对层同时应用元素ID 选择符和类选