欢迎来到天天文库
浏览记录
ID：50050198
大小：6.22 MB
页数：36页
时间：2020-03-08
《HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第14章 网页布局综合案例——宝贝.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、第14章网页布局综合案例——宝贝屋网上商店在本章中，我们将结合前面所学知识，分析、策划、设计并制作一个完整的案例。这个案例是为一个名为“BabyHousing”（宝贝屋）的儿童用品网上商店制作一个网站。通过这个网站的学习，读者不仅可以更进一步了解我们前面所学过的所有知识，而且能够掌握一套遵从Web标准的网页设计流程。14.1案例分析在本章，我们只介绍“BabyHousing”（宝贝屋）网站首页的制作过程。在首页竖直方向分为上中下3部分，其中上下2个部分的背景会自动延伸，中间的内容区域分为左右两列，左列为主要内容，右列由若干个圆角框构成。网站首页效果如图14.1所示。14.1案例分析14
2、.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.1整体样式设计首先对整个页面进行一个整
4、体设计，这里我们根据图14.3给出页面设计的基本结构代码。代码共分为3部分，一部分是页头部分，一部分是内容部分、一部分是页脚部分，每一部分用一个
5、.12所示。14.4.2页头部分至此，网页页头部分就设计完成，页头部分整体效果如图14.13所示。14.4.3内容部分下面开始设计网页中间的内容区域。根据图14.6我们将内容区域分为“主要内容”和“侧边栏”两个部分，每个部分用
元素来显示“今日推荐”的文字内容。（2）CSS样式设置接下来设置“
6、主要部分”的CSS样式。首先设置“主要内容”的宽度并设置为左浮动。然后，为“主要内容”中展示的图片设置边框样式，这样可以使图像看起来更精致。这时，内容区域中的图像就增加了一个边框，如图14.14所示。（2）CSS样式设置接着，设置“今日推荐”的样式，可以看出“今日推荐”中图片是在文字的左边，要使图片向左浮动，并使图像和文字之间间隔10像素。对于“最受欢迎”的样式，要使图片向右浮动，也使图像和文字之间间隔10像素。对于“分类推荐”的样式，是将“分类推荐”分为3列的栏目，要设定每一个列表项目的固定高度，然后使用浮动排列方式。接下来，我们对“主要内容”中的
7、显得更精致一些。这里我们设置了标题的字体、颜色、下划线，以及在标题的最右端插入一个装饰花的图片。1.主要内容至此，“主要内容”的设计就完成了，效果如图14.15所示。2.侧边栏接下来进行内容部分的“侧边栏”的设计。根据图14.7，我们仍然使用
此文档下载收益归作者所有
