网页设计与制作 教学课件 ppt 作者 朱金华 第3章 页面布局

第3章 页面布局,教学目标,1.了解表格布局。 2. 理解DIV与SPAN。 3. 掌握DIV+CSS布局设计方法。 4. 掌握中间自适应宽度三栏页面布局。 5. 掌握固定宽度页面布局。 6. 理解HTML5文档结构元素。,教学内容,3.1 表格布局 3.2 DIV与SPAN 3.3 DIV+CSS布局设计方法 3.4 中间自适应宽度三栏页面布局 3.5 固定宽度布局 3.6 HTML5的文档结构元素,教学重点和难点,重点：页面布局技术、HTML5文档结构元素。 难点：固定宽度页面布局、中间自适应宽度三栏页 面布局。,导入：,新浪、搜狐、网易的页面布局。,博客的页面布局。,3.1 表格布局,传统TABLE布局方式利用了HTML中table表格元素具有的无边框特性。将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。 利用表格搭建页面时，应先规划好页面中各元素的具体位置，通过表格将这些区域划分出来，在单元格中插入元素后，再仔细调整各单元格的大小、位置，使页面各个元素的所在位置与实际需要相符。同时灵活利用表格的背景、框线等属性设置，准确定位页面元素的排版技术，创建布局合理、美观的网页效果。,3.1 表格布局,进行表格属性的设置时，外层表格一般水平居中；宽度根据个人设计可以在950-1000px之间；表格边距与间距设置为0px；一般的外观还是用CSS来实现。 如果需要嵌套表格，嵌套层数越少越好；最外层表格的宽度和高度一般使用像素值，嵌套表格一般使用百分比。 对于非表格式数据呈现的网页整体布局，我们不推荐使用。,3.2 DIV与SPAN,（1）div标记的使用 在写HTML文件时，要定义区域间不同样式时，可以使用标记达到这个效果，除此以外，通过设置的z-index属性还可以设置层次的效果。 （2）标记的使用 标记主要用来定义网页上的区域，通常用于比较大范围的设置，而标记被用来组合文档中的行内元素。 基本语法： 或者 语法说明： 如果不对span应用样式，那么span元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。,3.2 DIV与SPAN,（3）与的区别 基本上与标记在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。 区域内是否换行：标记区域内的对象与区域外的上下文会自动换行，而标记区域内的对象与区域外的对象不会自动换行。 标记相互包含：与标记可以同时在网页上使用，一般在使用上建议用标记包含标记；但最好不包含标记，否则会造成标记的区域不完整，而形成断行的现象。,3.3 DIV+CSS布局设计方法,DIV+CSS布局是一种最近最流行的排版理念。 设计步骤： 将页面使用整体划分几个板块。 对各个板块进行CSS定位。 在各个板块中添加相应的内容。,3.3 DIV+CSS布局设计方法,使用DIV+CSS布局主要有以下三大优势： （1）表现和内容分离，便于站点重构页面。将网页结构与表现分离，代码简洁，利于搜索，方便后期维护和修改，重构时主要也是重新定义样式而已。 （2）结构清晰，对搜索引擎更加友好。 （3）便于Web项目开发分工协作。程序员和页面设计者可以充分发挥自己的长处。,3.3 DIV+CSS布局设计方法,简单DIV+CSS布局设计方法： 1. 将页面用DIV分块 在利用CSS布局页面时，首先要有一个整体的规划，包括整个页面分成哪些模块，各个模块之间的父子关系等。例如，如图3-1所示的页面由顶部横幅（Banner）、主体内容（Content）、右侧导航（Navigation）和页脚（Footer）几个部分组成，各个部分分别用自己的id来标识。,3.3 DIV+CSS布局设计方法,图3-1 简单布局框架,3.3 DIV+CSS布局设计方法,HTML代码如下：,3.3 DIV+CSS布局设计方法,2. 设计各块的位置 确定好页面的内容后，即可根据页面布局类型使用CSS进行定位。container是一个容器，主要用来设置水平居中效果和容器宽度，CSS代码如下： #container margin：0 auto；width：800px；,3.4 中间自适应宽度三栏页面布局,我们经常还看到水平方向满屏的网页，一般都是采用自适应宽度制作，完全自适应的制作还是较为简单的，所以我们今天制作一种相对复杂一点的混合布局方法，即左右均为固定宽度、中间栏自适应。,3.3 DIV+CSS布局设计方法,banner区块（banner一般是放在头部区域，这个区块一般命名为header）至少需要设置高度样式，而宽度会自动继承父元素container的宽度，其CSS代码如下。 #header height：60px； 由于content和navigation这两个区块是水平方向排列，所以需要使用浮动（Float）方法才能将其实现。两个区块的宽度和高度也是需要确定的，其CSS代码如下。 #content float：left;width：590px;height：400px; #nav float:right;width:200px;height:400px;,3.3 DIV+CSS布局设计方法,content和nav元素设置的浮动属性会使后面的footer区块也排到了同一行，因此需要设置clear属性来清除前面设置的浮动所带来的影响，CSS代码如下： #footerclear:both;,3.4 中间自适应宽度三栏页面布局,制作步骤如下： 1. 使用Dreamweaver制作的准备工作 （1）新建站点（修改首选项参数）。 （2）新建网页文件和外部CSS文件（首页文件名为index.html ；外部CSS文件style.css ）。 （3）定义初始化的CSS：* margin：0px;padding：0px；,3.4 中间自适应宽度三栏页面布局,2. 新建布局区块,3.4 中间自适应宽度三栏页面布局,此时设计视图显示为：,3.4 中间自适应宽度三栏页面布局,3. 设置各区块的基本样式 根据DIV标签的区块属性，这6个区块是从上到下依次排列的，只是宽度、高度不同而已。为了将left、content和right三个区块水平方向并排，需要设置float属性。,3.4 中间自适应宽度三栏页面布局,此时，浏览器里预览的效果是，left、content、right和footer都水平并排了，而且footer的位置在content和right的中间。为了让footer回归下面的位置，需要使用clear清除刚才设置的float。,3.4中间自适应宽度三栏页面布局,现在，在浏览器中看到的效果基本上是我们设想的布局了。但我们在content中增加很多内容时，发现content的宽度又撑满了浏览器窗口，导致各区块又没有实现水平并排，left、content、right三个区块又回到了原来的上中下的实际显示效果。,3.4 中间自适应宽度三栏页面布局,解决方法之一是我们可以考虑设置content的左边距和右边距（略大于left和right的宽度），给left和right两个区块留下了位置。 但浏览器中看到的效果，左右是留下了空间，但left、content和right仍然是上、中、下的位置。我们可以去掉content的float试试。,3.4 中间自适应宽度三栏页面布局,此时，left和content已经并排了，但right还在下面，这是因为content已经没有了float，我们应该在网页文件index.html中把right区块和content区块的位置交换，使content区块在页面流中自动填补left区块和right区块由于左右浮动后留下的中间区域。,3.4 中间自适应宽度三栏页面布局,现在终于正常了，为了较容易区分各区块的范围，我们可以为各区块加上背景颜色或边框线。 注意，不能在各区块的四周都加边框线，否则在两区块相邻位置会出现双线，看起来像粗线。,3.4 中间自适应宽度三栏页面布局,所以，我们可以： 在#header和#nav中增加“border-bottom:1px solid #ccc;”； 在#footer中增加“border-top:1px solid #ccc;”； 在#left中增加“border-right:1px solid #ccc;”； 在#right中增加“border-left:1px solid #ccc;”。,3.5 固定宽度布局,本节重点介绍如何使用CSS+DIV创建固定宽度布局，对于包含很多大图片和其他元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局是处理这种内容的最好方法 。 1. 一列固定宽度 一列布局是所有布局的基础，也是最简单的布局形式。一列固定宽度是常见的网页布局方式，多用于封面型的主页设计中，标题正文型也属于这种。,3.5 固定宽度布局,2. 两列固定宽度 两列固定宽度非常简单，可参考前面“DIV+CSS布局设计方法”小节中的例子，这种布局也很常见，比如个人博客多采用这种布局形式。,3.5 固定宽度布局,3. 三列固定宽度居中 三列固定宽度居中，可以采用将所有区块放入一个大的容器container中的方式，只需要设置container左右边距为自动就可以实现居中了。下面介绍以“中间自适应宽度三栏页面布局”小节示例为基础修改成“三列固定宽度居中”的方法。,3.5 固定宽度布局,首先添加container容器，将content区块恢复到left和right区块之间，示例HTML代码如下。 头部区块 水平导航区块 左边固定宽度栏 中间固定宽度栏 右边固定宽度栏 页脚版权区块 ,3.5 固定宽度布局,然后，在样式表中为content添加float和width属性，添加container的margin属性为左右自动（即容器水平居中显示）。最后为footer添加clear属性以清除footer的float属性，示例CSS代码如下。 #container width：800px;margin：0px auto; border-left：1px solid #ccc;border-right：1px solid #ccc； #content width:390px；float：left；height：400px; #footer clear：both；border-top：1px solid #ccc；border-bottom：1px solid #ccc；,3.6 HTML5的文档结构元素,HTML5引入了多个新的元素用来更加细致地描述页面及文档结构，包括header、nav、section、article、aside和footer，这些元素可以让文档页面更加具有意义、更加易读，也可以让搜索引擎更好地理解页面的内容和各个部分之间的关系。 如图3-2所示非常清晰地表述了各个元素对应的文档内容关系。,3.6 HTML5的文档结构元素,需要注意的是，这些元素的布局和呈现方式并不是由其自身定义，而是由CSS来呈现，就像是呈现元素，但元素没有语义，而这几个元素有语义。,图3-2 HTML5 的结构元素使用,3.6 HTML5的文档结构元素,1. 文章语义（article、header、footer）元素 根据WHATWG（The Web Hypertext Application Technology Working Group）给出的定义，article元素表示在文档、页面、应用程序或网站中自我包含的部分，也就是指在页面中用来表示一套结构完整且独立的内容部分，原则上讲是独立分布和重复使用的。比如论坛的一个帖子、杂志或报纸中的一篇文章、一篇博客、用户提交的一个评论内容，以及页面上可用于互动的一个widget（微件）模块等。,3.6 HTML5的文档结构元素,article元素可以被嵌套使用，内层的内容原则上要与外层内容相关联