网页设计实例教程陈旭东孙永芳崔为花张晓诺05章节.pptVIP

本章内容 5.1 大学生服务网首页分析 5.2 使用表格设计布局 5.3 使用层设计布局 5.4 使用框架集 5.1 大学生服务网首页分析 首先从页面尺寸上分析，读者使用浏览器浏览网页的时候，浏览器窗口内不应出现水平滚动条，页面高度不宜过大。由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去一些宽度，留下给你的页面范围变得越来越小。 一般分辨率在640×480的情况下，页面的显示尺寸为:620×311 个象素；分辨率在800x600的情况下，页面的显示尺寸为：780×428个象素；分辨率在1024×768的情况下，页面的显示尺寸为：1007×600。 从以上数据可以看出，分辨率越高页面尺寸越大。做网站开发，必须认真考虑页面尺寸，使得在满足展示内容需要的前提下，适应尽可能多的显示器。 第5章 网页布局设计 网页布局的实现在技术上常用两种方式： 第一种是使用表格控制页面布局，这种方式简单直观，适合网页设计的入门者使用。 第二种是使用层控制页面布局，层元素的使用比较灵活，但使用有一定难度。目前使用层控制页面布局的网站越来越多。　 5.1 大学生服务网首页分析 图5-2 大学生服务网首页布局分析 5.2 使用表格设计布局 5.2 使用表格设计布局 【实例解说】 在本实例中，全部的布局代码都以table来实现，其中的样式起辅助作用。而其中表格的边框（border: 1px solid #000000）、单元格的背景设置为灰色（background: #CCCCCC），是为了能清楚的看到布局上的版块儿。在实际应用是应根据需要做适当修改。 从以上代码可以看出，表格布局的特点是对页面按行列进行拆分，设计起来形象直观。因为表格是网络上很早就开始使用的元素之一，所以浏览器对表格的支持都非常好。 从另一个方面看，表格随着布局的复杂化，代码嵌套的层次会越来越多，代码冗余是必然的现象。而浏览器打开页面的速度就会下降。 5.3 使用层设计布局 随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。这是一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。 相对于表格布局来说，使用层布局代码量要小，因而使得页面的载入更快。层将页面分割成若干独立的区域，打开页面的时候逐层加载，逐块儿显示。更重要的是因为CSS样式可以独立到CSS文件中，使得正文部分更为突出，可以更好的被有哪些信誉好的足球投注网站引擎收录。 不过相对来说，使用层进行布局比用表格难度要大一些。如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。 对于DIV+CSS的网页来说，嵌套两层以上的DIV是很常见的，DIV布局时需要嵌套的层数要远远少于表格，这也决定了这类网页在被有哪些信誉好的足球投注网站引擎有哪些信誉好的足球投注网站时的优势--快而全。 5.3 使用层设计布局 5.3 使用层设计布局 【实例解说】 在本实例中，全部的布局代码都以层div来实现，使用层就必须使用样式。样式center850针对页面上的容器div，定义其宽度为850（width: 850px），使容器div在页面内居中的样式比较特别，需要通过margin属性的定义来实现（margin: 0 auto）。 样式fleft使得层在其容器元素内向左浮动，fright使得层在其容器元素内向右浮动。在这里，边框（border: 1px solid #000000;）和背景（background: #CCCCCC）的定义同样是为了更好的展现布局效果，在实际应用是应根据需要做适当修改。 5.4 使用框架集 5.4.1 创建框架集 5.4.2 在框架中使用链接 5.4.3 使用内联框架iframe 5.4.1 创建框架集 框架技术可以将浏览器窗口分割为几个独立的区域，每个区域都可独立加载不同的页面。定义一组框架结构的HTML页面，称为框架集。框架集页面内只包含框架集的定义，不包含其他HTML页面元素。 在框架集页面中，使用frameset标记定义一个框架集，使用frame标记定义其中的一个框架。框架集页面只记录框架如何分割，body标记咋框架页面内会被忽略，其中即使有内容也不会被显示。 5.4.1 创建框架集 1. 启动Dreamweaver，在菜单栏选择“文件--新建”命令，打开新建文档对话框，在类别列表中选“框架集”，如图5-10所示。 2. 在框架集列表中选择所需的样式，这里选默认值“上方固定”。完成后点“创建”按钮，编辑区的显示如图5-11所示： 同样，在Dreamweaver中，框架集作为布局元素，默认显示为