《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第14章 网页布局综合案例——宝贝》由会员分享，可在线阅读，更多相关《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第14章 网页布局综合案例——宝贝（36页珍藏版）》请在金锄头文库上搜索。
1、第14章 网页布局综合案例宝贝屋网上商店,在本章中，我们将结合前面所学知识，分析、策划、设计并制作一个完整的案例。这个案例是为一个名为“Baby Housing”（宝贝屋）的儿童用品网上商店制作一个网站。通过这个网站的学习，读者不仅可以更进一步了解我们前面所学过的所有知识，而且能够掌握一套遵从Web标准的网页设计流程。,14.1 案例分析,在本章，我们只介绍“Baby Housing”（宝贝屋）网站首页的制作过程。在首页竖直方向分为上中下3部分，其中上下2个部分的背景会自动延伸，中间的内容区域分为左右两列，左列为主要内容，右列由若干个圆角框构成。网站首页效果如图14.1所示。,14.1 案例分
2、析,14.1 案例分析,此外，这个页面具有很好的交互提示功能。例如，在页头部分的导航菜单具有鼠标指针经过时发生变化的效果，如图14.2所示。,14.2 内容分析,在设计网页之前，首先要想清楚这个网站的内容是什么，通过一个网页要传达给访问者什么信息，这些信息中哪些是最重要的，哪些是相对重要的，以及这些信息应该如何组织。也就是说，设计一个网页的第一步根本不是这个页面的样子，而是页面的内容。现在以这个“宝贝屋网上商店”的首页为例进行一些说明。,14.3 原型设计,网页内容分析完后，还要有一个构思的过程，对网站的完整功能和内容进行更全面的分析。如果有条件，应该制作出线框图，这个过程专业上称为“原型设计
3、”。例如，在具体制作网页之前，我们就可以先设计一个如图14.3所示的网页原型。,14.3 原型设计,14.3 原型设计,网页原型设计也是分步骤完成的。例如首先要考虑，把一个页面从上至下依次分为3个部分，如图14.4所示。,14.3 原型设计,然后再将每个部分逐渐细化，例如页头部分，可以细化为如图14.5所示的样子。,14.3 原型设计,中间的内容部分分为左右两列，如图14.6（左边）所示。然后再进一步细化为如图14.7（右边）所示的样子。,14.4 布局设计,下面我们就可以根据原型设计图来进行网页的设计了。这里我们先进行整体样式的设计，然后再进行页头部分、内容部分和页脚部分的设计。,14.4.
4、1 整体样式设计,首先对整个页面进行一个整体设计，这里我们根据图14.3给出页面设计的基本结构代码。代码共分为3部分，一部分是页头部分，一部分是内容部分、一部分是页脚部分，每一部分用一个元素进行划分。,14.4.2 页头部分,下面开始对页头部分的设计进行详解。根据图14.4中设定的页头的各个部分来进行HTML代码的编写。 1.设置头部样式 2.设置h1标题样式 设置完成后h1标题效果如图14.8所示。,3.网站logo,网站logo设置完成后效果如图14.9所示。,4.顶部导航栏,顶部导航栏设置完成的效果如图14.10所示。,5.主导航栏样式,至此，主导航栏就设置完成了，效果如图14.11所示
5、。,6.账号与购物车,账号与购物车设计的效果如图14.12所示。,14.4.2 页头部分,至此，网页页头部分就设计完成，页头部分整体效果如图14.13所示。,14.4.3 内容部分,下面开始设计网页中间的内容区域。根据图14.6我们将内容区域分为“主要内容”和“侧边栏”两个部分，每个部分用元素进行划分。然后在每个元素中分别设置里面的详细内容。 1.主要内容 根据图14.7，我们使用元素将“主要内容”部分划分为“今日推荐”、“最受欢迎”、“分类推荐”3部分。,（1）HTML设计部分,在“今日推荐”中，首先使用设置标题，然后插入了一张图片链接，最后使用元素来显示“今日推荐”的文字内容。,（2）CS
6、S样式设置,接下来设置“主要部分”的CSS样式。首先设置“主要内容”的宽度并设置为左浮动。然后，为“主要内容”中展示的图片设置边框样式，这样可以使图像看起来更精致。 这时，内容区域中的图像就增加了一个边框，如图14.14所示。,（2）CSS样式设置,接着，设置“今日推荐”的样式，可以看出“今日推荐”中图片是在文字的左边，要使图片向左浮动，并使图像和文字之间间隔10像素。 对于“最受欢迎”的样式，要使图片向右浮动，也使图像和文字之间间隔10像素。 对于“分类推荐”的样式，是将“分类推荐”分为3列的栏目，要设定每一个列表项目的固定高度，然后使用浮动排列方式。 接下来，我们对“主要内容”中的标题的样
7、式再做一些设置，使它显得更精致一些。这里我们设置了标题的字体、颜色、下划线，以及在标题的最右端插入一个装饰花的图片。,1.主要内容,至此，“主要内容”的设计就完成了，效果如图14.15所示。,2.侧边栏,接下来进行内容部分的“侧边栏”的设计。根据图14.7，我们仍然使用元素将“侧边栏”部分划分为“搜索”、“分类”、“特别提示”3部分。,（1）HTML设计部分,在“搜索”中，我们插入了一个表单元素，然后在元素中添加了一个文本框和一个显示“查询商品”的按钮，用来搜素商品。 在“分类”中，我们插入了一个表示标题的元素和一个显示分类内容的元素。 在“特别提示”中，插入了一个表示标题的元素和一个显示特别
8、提示内容的元素。,（2）CSS设计部分,下面开始设置“侧边栏”的CSS样式，首先设置“侧边栏”的整体样式。 这时圆角框已经实现了，但是圆角框内部的样式还没有详细设计。接下来就来具体设置圆角框中的样式。首先，对“侧边栏”中的标题进行统一设置，设置了边距、字体、颜色和居中显示。 然后对搜索框进行设置，使文本输入框和按钮都居中对齐，并设置间距。 最后，设置分类目录的列表样式。设置了列表的字体、高度、行高和上边框的样式，然后还设置了列表中链接元素的样式，在每个链接前面插入了一张蝴蝶形状的装饰图。,2.侧边栏,至此，“侧边栏”就设计完成了，效果如图14.17所示。,14.4.4 页脚部分,页脚部分的设置
9、非常简单，就是在元素中添加了两个元素，来显示链接和版权信息。 页脚部分的CSS样式设计也非常简单。在页脚部分插入了一张背景图片，设置页脚部分的文字颜色为白色，并设置了行高和边距。,14.4.4 页脚部分,页脚部分的设计效果如图14.18所示。,14.5 交互效果设计,接下来我们进行一些交互性的动态设计，这里主要是为网页元素增加鼠标指针经过时的效果。当鼠标指针经过主导航栏、顶部导航栏和账号与购物车图像时，会有不同的效果，这是为了提示用户所进行的选择。,14.5.1 顶部导航栏,为顶部导航栏增加鼠标指针经过效果，首先准备一个和原有背景图片的形状相同，但是颜色不同的新图像top-navi-hover
10、.gif。如图14.19所示。 然后为顶部导航栏中的链接元素增加“:hover”伪类，在其中更换背景图像，同时更换“:hover”包含的元素的背景图片，此外适当修改文字的颜色。 设置完成后，当鼠标指针经过顶部导航栏时效果如图14.20所示。,14.5.2 主导航栏,主导航栏的做法和顶部导航栏的一样，准备背景图片main-navi-hover.gif，如图14.21所示。 然后为主导航栏中的链接元素增加“:hover”伪类，在其中更换背景图像，同时更换“:hover”包含的元素的背景图片，此外适当修改文字的颜色。 设置完成后，当鼠标指针经过主导航栏时效果如图14.22所示。,14.5.3 账号区
11、,接下来实现“登录账号”和“购物车”图像的鼠标经过效果。实际上，这里同样是更换背景图像，不过这里介绍一种略有变化的方法。这种方法就是把鼠标经过前和鼠标经过时的两张图片用同一张图片表示。只是在鼠标经过时，通过对背景图像位置的改变来实现交互效果。 “登录账号”和“购物车”图像的鼠标经过效果，如图14.23所示。,14.5.4 图像边框,在接下来实现的那个鼠标指针经过某个展示的图片时，边框发生变化的效果，如图14.24所示。,14.5.5 产品分类,最后，实现“侧边栏”中“产品分类”列表的鼠标经过效果，如图14.25所示。,14.6 小结,本章中为一个名为“Baby Housing”的儿童用品网上商店的网站制作了一个完整的首页。希望读者通过这个案例的学习，可以了解网页设计流程，并能熟练应用前面所介绍的HTML和CSS属性。读者也可以根据网站首页的设计，自己来设置一个简单的网站，来巩固所学的知识。,
