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

网页设计与布局项目化教程课件网页设计与布局项目化教程课件1第4章 教育公司网站布局本章简介：本章简介：在前面两章中，分别重点介绍了在前面两章中，分别重点介绍了“绝绝对定位对定位”和和“相对定位相对定位”两种两种重要的定位重要的定位方式，以及如何使用方式，以及如何使用“浮动浮动”的方法进行的方法进行页面布局。页面布局。请读者请读者务必真正理解上述的基务必真正理解上述的基础概念和原理，它们将贯穿在实际工作础概念和原理，它们将贯穿在实际工作的的每每一个细节中。本章中将使用这些基本的一个细节中。本章中将使用这些基本的方法，制作一个两列布局方法，制作一个两列布局的案例的案例，作为对，作为对上两章内容的复习。希望读者通过本案例上两章内容的复习。希望读者通过本案例熟练掌握熟练掌握这些基础这些基础内容。内容。第第4章章 教育公司网站布局本章简介：教育公司网站布局本章简介：2课堂学习目标掌握在掌握在CSSCSS中使用背景图像的方法中使用背景图像的方法理解实现圆角设计的技巧理解实现圆角设计的技巧课堂学习目标掌握在课堂学习目标掌握在CSS中使用背景图像的方法中使用背景图像的方法3教育公司网站布局效果效果图教育公司网站布局效果效果图教育公司网站布局效果效果图44.1 两列布局如果读者经常在网上浏览，就会发现，两列布局是各种布局形如果读者经常在网上浏览，就会发现，两列布局是各种布局形式中使用最普遍的一种，而且其表现形式也非常灵活。例如，两个式中使用最普遍的一种，而且其表现形式也非常灵活。例如，两个页面，二者的页面，二者的HTMLHTML内容是相同的，但使用了两套完全不同的内容是相同的，但使用了两套完全不同的CSSCSS设计，设计，从而得到完全不同的设计风格。左边使用了相当简洁舒适的风格，从而得到完全不同的设计风格。左边使用了相当简洁舒适的风格，而右边则使用了相当华丽的风格。两个页面尽管风格不同，但都很而右边则使用了相当华丽的风格。两个页面尽管风格不同，但都很漂亮。漂亮。4.1 两列布局如果读者经常在网上浏览，就会发现，两列布局两列布局如果读者经常在网上浏览，就会发现，两列布局54.2 案例描述本案例的学习从研究开始，研究的对象就是本案例的学习从研究开始，研究的对象就是“AdobeAdobe实验室实验室”的的网站。相信本书的大多数读者对网站。相信本书的大多数读者对AdobeAdobe公司应该都不陌生，著名的公司应该都不陌生，著名的PhotoshopPhotoshop，FlashFlash，IllustratorIllustrator和和DreamweaverDreamweaver等众多软件都是该等众多软件都是该公司的产品。公司的产品。Adobe 实验室网站4.2 案例描述本案例的学习从研究开始，研究的对象就是案例描述本案例的学习从研究开始，研究的对象就是“A6仍然像第仍然像第3 3章的案例一样，先章的案例一样，先来明确首页上要展示的内容是什来明确首页上要展示的内容是什么。我们直接列出了需要在页面么。我们直接列出了需要在页面上放置的内容，读者也可以从中上放置的内容，读者也可以从中清楚地看出搭建这个页面的清楚地看出搭建这个页面的HTMLHTML结构。该网页在没有使用任何结构。该网页在没有使用任何CSSCSS设置的情况下，使用浏览器观察设置的情况下，使用浏览器观察的效果，用绿色半透明的区块表的效果，用绿色半透明的区块表明了各个部分。明了各个部分。4.3 内容分析基本的HTML 结构仍然像第仍然像第3章的案例一样，先来明确首页上要展示的内容是什么。我章的案例一样，先来明确首页上要展示的内容是什么。我7上面列出的是单纯的上面列出的是单纯的HTMLHTML结构，按结构，按照工作流程，下面应该设计出一个网页照工作流程，下面应该设计出一个网页的原型线框图。原型设计可以使自己对的原型线框图。原型设计可以使自己对各个部分的位置关系一目了然。各个部分的位置关系一目了然。从这个图中可以看出，内容要比上从这个图中可以看出，内容要比上一张复杂不少，更为重要的一点是，我一张复杂不少，更为重要的一点是，我们必须要考虑每一个部分的扩展情况，们必须要考虑每一个部分的扩展情况，例如主菜单以后有可能会增加菜单项目，例如主菜单以后有可能会增加菜单项目，因此不能把主菜单部分的高度固定死。因此不能把主菜单部分的高度固定死。如果读者使用过表格布局就会知道，使如果读者使用过表格布局就会知道，使各个部分的高度可以变化是很麻烦的一各个部分的高度可以变化是很麻烦的一个问题，那么在个问题，那么在CSSCSS布局中，又会如何呢布局中，又会如何呢？4.4 原型设计为本案例设计的原型线框图上面列出的是单纯的上面列出的是单纯的HTML结构，按照工作流程，下面应该设计出结构，按照工作流程，下面应该设计出84.5 CSS技术准备在CSS中使用背景图像 设置平铺方式设置平铺方式设置背景图像的位置设置背景图像的位置背景的简写背景的简写图像的固定设置图像的固定设置4.5 CSS技术准备技术准备在在CSS中使用背景图像中使用背景图像 设置平设置平9背景图像在默认情况下，会自动向水平和竖直两个方向平铺。如果不希望平铺，背景图像在默认情况下，会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用或者只希望沿着一个方向平铺，可以使用background-repeatbackground-repeat属性来控制。该属性可属性来控制。该属性可以设置为以下以设置为以下4 4种之一。种之一。repeat repeat：沿水平和竖直两个方向平铺，这也是默认值。沿水平和竖直两个方向平铺，这也是默认值。no-repeat no-repeat：不平铺，即只显示一次。不平铺，即只显示一次。repeat-x repeat-x：只沿水平方向平铺。只沿水平方向平铺。repeat-y repeat-y：只沿竖直方向平铺。只沿竖直方向平铺。4.5.1 设置平铺方式水平方向平铺背景图像的效果设置背景颜色后的效果背景图像在默认情况下，会自动向水平和竖直两个方向平铺。如果不背景图像在默认情况下，会自动向水平和竖直两个方向平铺。如果不10下面来研究一下背景图像的位置，假设将网页的下面来研究一下背景图像的位置，假设将网页的bodybody元素设置如下元素设置如下CSSCSS样式。样式。4.5.2 设置背景图像的位置设置背景图像不重复并精确定位设置背景图像不重复并放置在右下角设置背景图像不重复下面来研究一下背景图像的位置，假设将网页的下面来研究一下背景图像的位置，假设将网页的body元素设置如元素设置如11就如同就如同fontfont，borderborder等属性在等属性在CSSCSS中可以简写一样，背景样式的中可以简写一样，背景样式的CSSCSS属性也可以简属性也可以简写。例如下面这段样式使用了写。例如下面这段样式使用了4 4条条CSSCSS规则。规则。4.5.3 背景的缩写缩写方式正常书写方式就如同就如同font，border等属性在等属性在CSS中可以简写一样，背中可以简写一样，背12当在网页上设置背景图像时，随着滚动条的移动，背景图片也会跟着一起移动。当在网页上设置背景图像时，随着滚动条的移动，背景图片也会跟着一起移动。拖动滚动条时，背景图像一起移动。拖动滚动条时，背景图像一起移动。4.5.4 图像的固定设置效果图代码显示当在网页上设置背景图像时，随着滚动条的移动，背景图片也会跟着当在网页上设置背景图像时，随着滚动条的移动，背景图片也会跟着13这个设计需要的美工配合也不多，例如网站这个设计需要的美工配合也不多，例如网站LogoLogo和网页标题使用一个图像做文字和网页标题使用一个图像做文字的图像替换，这个方法在前两个案例中已经多次使用。注意本案例的一个特殊之处在的图像替换，这个方法在前两个案例中已经多次使用。注意本案例的一个特殊之处在于使用了深色背景，这时制作标题图像的时候，为了使图像的颜色更好地融合到背景于使用了深色背景，这时制作标题图像的时候，为了使图像的颜色更好地融合到背景中，可以将图像制作为透明背景的图像。当背景的深灰色变透明以后，图像和文字周中，可以将图像制作为透明背景的图像。当背景的深灰色变透明以后，图像和文字周围会出现一些锯齿，这是边缘的过渡色。围会出现一些锯齿，这是边缘的过渡色。4.6 制作标题图像标题图像这个设计需要的美工配合也不多，例如网站这个设计需要的美工配合也不多，例如网站Logo和网页标题使用和网页标题使用14接下来介绍本案例中的一个重点问题。读者可以看到，这个方案中使用了圆角的接下来介绍本案例中的一个重点问题。读者可以看到，这个方案中使用了圆角的设计，因此需要一定的美工配合来实现各个部分的圆角效果。设计，因此需要一定的美工配合来实现各个部分的圆角效果。效果图中共有效果图中共有3 3个部分使用了圆角框，一个是上侧的主菜单，另外两个分别是左个部分使用了圆角框，一个是上侧的主菜单，另外两个分别是左右两列。从最简单的想法出发，我们可以设想给一个矩形区域设置一个固定的圆角矩右两列。从最简单的想法出发，我们可以设想给一个矩形区域设置一个固定的圆角矩形的背景图像，就可以产生圆角效果。但是这样做的结果是这个区域的高度会固定，形的背景图像，就可以产生圆角效果。但是这样做的结果是这个区域的高度会固定，不能扩展，因为背景的圆角矩形已经固定。不能扩展，因为背景的圆角矩形已经固定。因此，我们可以考虑使用两个背景图像来实现一个圆角框。将一个圆角矩形分为因此，我们可以考虑使用两个背景图像来实现一个圆角框。将一个圆角矩形分为3 3个部分，然后把上下两个部分导出为图像文件。如果中间部分是纯色，那么中间部个部分，然后把上下两个部分导出为图像文件。如果中间部分是纯色，那么中间部分就不需要导出为图像了，因为可以在分就不需要导出为图像了，因为可以在CSSCSS中设置背景颜色。中设置背景颜色。4.7 CSS技术准备实现圆角设计一个圆角框由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什么是面包屑型网站导航链接呢？读者可能没有听说过这个名字，但是一定看到什么是面包屑型网站导航链接呢？读者可能没有听说过这个名字，但是一定看到过。在很多网站上都会有一串指示访问者当前位置的文字，例如过。在很多网站上都会有一串指示访问者当前位置的文字，例如“首页首页 科技科技 互联互联网网 Web 2.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 添加页面内容到这里，实际上页面布局已经完成，剩下的就是向到这里，实际上页面布局已经完成，剩下的就是向#content28本章介绍了一种常见的两列布局形式，以及一种圆角框的制作方法。本章介绍了一种常见的两列布局形式，以及一种圆角框的制作方法。实际上实际上CSS对页面的布局是非常灵活的，对于多列布局以及圆角框的实现，对页面的布局是非常灵活的，对于多列布局以及圆角框的实现，有着很多不同的方法。读者随着学习的不断深入，应该不断地总结，并寻有着很多不同的方法。读者随着学习的不断深入，应该不断地总结，并寻找其中的规律，这样才能在工作中根据不同的实际情况，灵活地选择最适找其中的规律，这样才能在工作中根据不同的实际情况，灵活地选择最适当的方法。当的方法。4.10 本章小结本章介绍了一种常见的两列布局形式，以及一种圆角框的制作方法。本章介绍了一种常见的两列布局形式，以及一种圆角框的制作方法。29