网页设计与布局项目化教程04课件

网页设计与布局项目化教程04课件1第4章教育公司网站布局本章简介：在前面两章中，分别重点介绍了“绝对定位”和“相对定位”两种重要的定位方式，以及如何使用“浮动”的方法进行页面布局。请读者务必真正理解上述的基础概念和原理，它们将贯穿在实际工作的每一个细节中。本章中将使用这些基本的方法，制作一个两列布局的案例，作为对上两章内容的复习。希望读者通过本案例熟练掌握这些基础内容。第4章教育公司网站布局本章简介：2课堂学习目标掌握在CSS中使用背景图像的方法理解实现圆角设计的技巧课堂学习目标掌握在CSS中使用背景图像的方法3教育公司网站布局效果效果图教育公司网站布局效果效果图44.1两列布局如果读者经常在网上浏览，就会发现，两列布局是各种布局形式中使用最普遍的一种，而且其表现形式也非常灵活。例如，两个页面，二者的HTML内容是相同的，但使用了两套完全不同的CSS设计，从而得到完全不同的设计风格。左边使用了相当简洁舒适的风格，而右边则使用了相当华丽的风格。两个页面尽管风格不同，但都很漂亮。4.1两列布局如果读者经常在网上浏览，就会发现，两列布局54.2案例描述本案例的学习从研究开始，研究的对象就是“Adobe实验室”的网站。相信本书的大多数读者对Adobe公司应该都不陌生，著名的Photoshop，Flash，Illustrator和Dreamweaver等众多软件都是该公司的产品。Adobe实验室网站4.2案例描述本案例的学习从研究开始，研究的对象就是“A6仍然像第3章的案例一样，先来明确首页上要展示的内容是什么。我们直接列出了需要在页面上放置的内容，读者也可以从中清楚地看出搭建这个页面的HTML结构。该网页在没有使用任何CSS设置的情况下，使用浏览器观察的效果，用绿色半透明的区块表明了各个部分。4.3内容分析基本的HTML结构仍然像第3章的案例一样，先来明确首页上要展示的内容是什么。我7上面列出的是单纯的HTML结构，按照工作流程，下面应该设计出一个网页的原型线框图。原型设计可以使自己对各个部分的位置关系一目了然。从这个图中可以看出，内容要比上一张复杂不少，更为重要的一点是，我们必须要考虑每一个部分的扩展情况，例如主菜单以后有可能会增加菜单项目，因此不能把主菜单部分的高度固定死。如果读者使用过表格布局就会知道，使各个部分的高度可以变化是很麻烦的一个问题，那么在CSS布局中，又会如何呢？4.4原型设计为本案例设计的原型线框图上面列出的是单纯的HTML结构，按照工作流程，下面应该设计出84.5CSS技术准备——在CSS中使用背景图像

设置平铺方式设置背景图像的位置背景的简写图像的固定设置4.5CSS技术准备——在CSS中使用背景图像设置平9背景图像在默认情况下，会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。该属性可以设置为以下4种之一。

repeat：沿水平和竖直两个方向平铺，这也是默认值。

no-repeat：不平铺，即只显示一次。

repeat-x：只沿水平方向平铺。

repeat-y：只沿竖直方向平铺。4.5.1设置平铺方式水平方向平铺背景图像的效果设置背景颜色后的效果背景图像在默认情况下，会自动向水平和竖直两个方向平铺。如果不10下面来研究一下背景图像的位置，假设将网页的body元素设置如下CSS样式。4.5.2设置背景图像的位置设置背景图像不重复并精确定位设置背景图像不重复并放置在右下角设置背景图像不重复下面来研究一下背景图像的位置，假设将网页的body元素设置如11就如同font，border等属性在CSS中可以简写一样，背景样式的CSS属性也可以简写。例如下面这段样式使用了4条CSS规则。4.5.3背景的缩写缩写方式正常书写方式就如同font，border等属性在CSS中可以简写一样，背12当在网页上设置背景图像时，随着滚动条的移动，背景图片也会跟着一起移动。拖动滚动条时，背景图像一起移动。4.5.4图像的固定设置效果图代码显示当在网页上设置背景图像时，随着滚动条的移动，背景图片也会跟着13这个设计需要的美工配合也不多，例如网站Logo和网页标题使用一个图像做文字的图像替换，这个方法在前两个案例中已经多次使用。注意本案例的一个特殊之处在于使用了深色背景，这时制作标题图像的时候，为了使图像的颜色更好地融合到背景中，可以将图像制作为透明背景的图像。当背景的深灰色变透明以后，图像和文字周围会出现一些锯齿，这是边缘的过渡色。4.6制作标题图像标题图像这个设计需要的美工配合也不多，例如网站Logo和网页标题使用14接下来介绍本案例中的一个重点问题。读者可以看到，这个方案中使用了圆角的设计，因此需要一定的美工配合来实现各个部分的圆角效果。效果图中共有3个部分使用了圆角框，一个是上侧的主菜单，另外两个分别是左右两列。从最简单的想法出发，我们可以设想给一个矩形区域设置一个固定的圆角矩形的背景图像，就可以产生圆角效果。但是这样做的结果是这个区域的高度会固定，不能扩展，因为背景的圆角矩形已经固定。因此，我们可以考虑使用两个背景图像来实现一个圆角框。将一个圆角矩形分为3个部分，然后把上下两个部分导出为图像文件。如果中间部分是纯色，那么中间部分就不需要导出为图像了，因为可以在CSS中设置背景颜色。4.7CSS技术准备——实现圆角设计一个圆角框由3个部分组成接下来介绍本案例中的一个重点问题。读者可以看到，这个方案中使154.8制作页头部分

搭建页头部分的HTML结构页面标题的图像替换主菜单搜索框页头部分的圆角框4.8制作页头部分搭建页头部分的HTML结构16下面先来解决header部分，header部分的HTML代码如下。4.8.1搭建页头部分的HTML结构HTML代码显示下面先来解决header部分，header部分的HTML代码17对于h1标题的文字替换，也已经多次使用了，这里仅列出代码，不再详细解释。4.8.2页面标题的图像替换CSS代码显示对于h1标题的文字替换，也已经多次使用了，这里仅列出代码，不18接下来设置顶部菜单。使用绝对定位，可以把它固定在标题的右侧。具体代码如下：4.8.3顶部菜单CSS代码显示效果图接下来设置顶部菜单。使用绝对定位，可以把它固定在标题的右侧。19接下来，就要设置主菜单部分了。主菜单部分需要实现圆角效果，在实现圆角效果之前，我们先来把菜单和搜索框的内容布置好，然后再给它设置圆角。在主菜单区域包括左右两部分，左边是菜单，右边是搜索框。首先设定菜单部分的宽度和文字颜色，这个菜单是使用ul列表实现的。代码如下：4.8.4主菜单CSS代码显示效果图接下来，就要设置主菜单部分了。主菜单部分需要实现圆角效果，在20设置好主菜单以后，再来设置搜索框。为了使搜索框靠右对齐，使用向右浮动的设置。代码如下：4.8.5搜索框CSS代码显示效果图设置好主菜单以后，再来设置搜索框。为了使搜索框靠右对齐，使用21下面的任务就是要给主菜单和搜索框外面套一个圆角框。这里需要使用两个背景图像，因此必须要有两个HTML元素，我们使用两层div。代码如下：4.8.6页头部分的圆角框HTML代码显示下面的任务就是要给主菜单和搜索框外面套一个圆角框。这里需要使224.9制作主体部分结构分析面包屑导航设置正文标题设置页脚添加页面内容4.9制作主体部分结构分析23通常来说，对于上面有页头、下面有页脚、中间分两列的布局，可以使用的布局形式。为了使中间的div#content和div#sideBar并列，可以先把它们放入一个div中（这里id为“#content”），然后对其使用浮动方式。如果在HTML中，#content写在#sideBar的前面，那么使#content向左浮动，然后#sideBar向左或者向右浮动都可以。4.9.1结构分析常见的两列布局形式使用的两列布局形式通常来说，对于上面有页头、下面有页脚、中间分两列的布局，可以24什么是面包屑型网站导航链接呢？读者可能没有听说过这个名字，但是一定看到过。在很多网站上都会有一串指示访问者当前位置的文字，例如“首页>科技>互联网>Web2.0>CSS>盒子模型”，这就表示访问者正在浏览的网页处于整个网站的哪个细分类别中。通常访问者可以点击这一系列词语中的任何一个，以跳转到相应的页面。4.9.2面包屑导航什么是面包屑型网站导航链接呢？读者可能没有听说过这个名字，但25接下来，对正文的标题进行一些设置。代码如下：4.9.3设置正文标题CSS代码显示接下来，对正文的标题进行一些设置。代码如下：4.9.3设26最后设置#footer。设置清除属性、背景以及上侧的padding，这个padding的值正是背景图像的高度，以保证#footer中的内容不会压在背景图像上面。4.9.4设置页脚CSS代码显示效果图最后设置#footer。设置清除属性、背景以及上侧的padd27到这里，实际上页面布局已经完成，剩下的就是向#content，#sideBar和#footer中添加内容了。随着内容的增加，这两列的高度自然就会增加，圆角框始终会保持正确的状态。4.9.5添