第15章 网页布局综合案例——宝贝
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 1.主要内容
• 根据图15.7，我们使用<div>元素将“主要内容”部分划分为“今日 推荐”、“最受欢迎”、“分类推荐”3部分。
（1）HTML设计部分
• 在“今日推荐”中，首先使用<h2>设置标题，然后插入了一张图片 链接，最后使用<p>元素来显示“今日推荐”的文字内容。
（2）CSS样式设置
15.3 原型设计
• 网页内容分析完后，还要有一个构思的过程，对网站的完整功能和 内容进行更全面的分析。如果有条件，应该制作出线框图，这个过 程专业上称为“原型设计”。例如，在具体制作网页之前，我们就 可以先设计一个如图15.3所示的网页原型。
15.3 原型设计
•
15.3 原型设计
• 网页原型设计也是分步骤完成的。例如首先要考虑，把一个页面从 上至下依次分为3个部分，如图15.4所示。
• 1.设置头部样式 • 2.设置h1标题样式 • 设置完成后h1标题效果如图15.8所示。
3.网站logo
• 网站logo设置完成后效果如图15.9所示。
4.顶部导航栏
• 顶部导航栏设置完成的效果如图15.10所示。
5.主导航栏样式
• 至此，主导航栏就设置完成了，效果如图15.11所示。
6.账号与购物车
• 接下来设置“主要部分”的CSS样式。首先设置“主要内容”的宽 度并设置为左浮动。然后，为“主要内容”中展示的图片设置边框 样式，这样可以使图像看起来更精致。
• 这时，内容区域中的图像就增加了一个边框，如图15.15所示。
（2）CSS样式设置
• 接着，设置“今日推荐”的样式，可以看出“今日推荐”中图片是 在文字的左边，要使图片向左浮动，并使图像和文字之间间隔10像 素。
• 账号与购物车设计的效果如图15.12所示。
15.4.2 页头部分
• 至此，网页页头部分就设计完成，页头部分整体效果如图15.13所示。
15.4.3 内容部分
• 下面开始设计网页中间的内容区域。根据图15.6我们将内容区域分 为“主要内容”和“侧边栏”两个部分，每个部分用<div>元素进行 划分。然后在每个<div>元素中分别设置里面的详细内容。
• 此外，这个页面具有很好的交互提示功能。例如，在页头部分的导 航菜单具有鼠标指针经过时发生变化的效果，如图15.2所示。
15.2 内容分析
• 在设计网页之前，首先要想清楚这个网站的内容是什么，通过一个 网页要传达给访问者什么信息，这些信息中哪些是最重要的，哪些 是相对重要的，以及这些信息应该如何组织。也就是说，设计一个 网页的第一步根本不是这个页面的样子，而是页面的内容。现在以 这个“宝贝屋网上商店”的首页为例进行一些说明。
• 然后对搜索框进行设置，使文本输入框和按钮都居中对齐，并设置 间距。
• 最后，设置分类目录的列表样式。设置了列表的字体、高度、行高 和上边框的样式，然后还设置了列表中链接<a>元素的样式，在每 个链接前面插入了一张蝴蝶形状的装饰图。
• 对于“最受欢迎”的样式，要使图片向右浮动，也使图像和文字之 间间隔10像素。
• 对于“分类推荐”的样式，是将“分类推荐”分为3列的栏目，要 设定每一个列表项目的固定高度，然后使用浮动排列方式。
• 接下来，我们对“主要内容”中的<h2>标题的样式再做一些设置， 使它显得更精致一些。这里我们设置了标题的字体、颜色、下划线， 以及在标题的最右端插入一个装饰花的图片。
1.主要内容
• 至此，“主要内容”的设计就完成了，效果如图15.15所示。
2.侧边栏
• 接下来进行内容部分的“侧边栏”的设计。根据图15.7，我们仍然 使用<div>元素将“侧边栏”部分划分为“搜索”、“分类”、“特 别提示一个表单<form>元素，然后在<form>元 素中添加了一个文本框和一个显示“查询商品”的按钮，用来搜素 商品。
15.4.1 整体样式设计
• 首先对整个页面进行一个整体设计，这里我们根据图15.3给出页面 设计的基本结构代码。代码共分为3部分，一部分是页头部分，一 部分是内容部分、一部分是页脚部分，每一部分用一个<div>元素进 行划分。
15.4.2 页头部分
• 下面开始对页头部分的设计进行详解。根据图15.4中设定的页头的 各个部分来进行HTML代码的编写。
15.3 原型设计
• 然后再将每个部分逐渐细化，例如页头部分，可以细化为如图15.5 所示的样子。
15.3 原型设计
• 中间的内容部分分为左右两列，如图15.6（左边）所示。然后再进 一步细化为如图15.7（右边）所示的样子。
15.4 布局设计
• 下面我们就可以根据原型设计图来进行网页的设计了。这里我们先 进行整体样式的设计，然后再进行页头部分、内容部分和页脚部分 的设计。
15.1 案例分析
• 在本章，我们只介绍“Baby Housing”（宝贝屋）网站首页的制作 过程。在首页竖直方向分为上中下3部分，其中上下2个部分的背景 会自动延伸，中间的内容区域分为左右两列，左列为主要内容，右 列由若干个圆角框构成。网站首页效果如图15.1所示。
15.1 案例分析
•
15.1 案例分析
第15章 网页布局综合案例——宝贝屋网 上商店
• 在本章中，我们将结合前面所学知识，分析、策划、设计并制作一 个完整的案例。这个案例是为一个名为“Baby Housing”（宝贝屋） 的儿童用品网上商店制作一个网站。通过这个网站的学习，读者不 仅可以更进一步了解我们前面所学过的所有知识，而且能够掌握一 套遵从Web标准的网页设计流程。
• 在“分类”中，我们插入了一个表示标题的<h2>元素和一个显示分 类内容的<ul>元素。
• 在“特别提示”中，插入了一个表示标题的<h2>元素和一个显示特 别提示内容的<p>元素。
（2）CSS设计部分
• 下面开始设置“侧边栏”的CSS样式，首先设置“侧边栏”的整体 样式。
• 这时圆角框已经实现了，但是圆角框内部的样式还没有详细设计。 接下来就来具体设置圆角框中的样式。首先，对“侧边栏”中的 <h2>标题进行统一设置，设置了边距、字体、颜色和居中显示。
• 根据图15.7，我们使用<div>元素将“主要内容”部分划分为“今日 推荐”、“最受欢迎”、“分类推荐”3部分。
（1）HTML设计部分
• 在“今日推荐”中，首先使用<h2>设置标题，然后插入了一张图片 链接，最后使用<p>元素来显示“今日推荐”的文字内容。
（2）CSS样式设置
15.3 原型设计
• 网页内容分析完后，还要有一个构思的过程，对网站的完整功能和 内容进行更全面的分析。如果有条件，应该制作出线框图，这个过 程专业上称为“原型设计”。例如，在具体制作网页之前，我们就 可以先设计一个如图15.3所示的网页原型。
15.3 原型设计
•
15.3 原型设计
• 网页原型设计也是分步骤完成的。例如首先要考虑，把一个页面从 上至下依次分为3个部分，如图15.4所示。
• 1.设置头部样式 • 2.设置h1标题样式 • 设置完成后h1标题效果如图15.8所示。
3.网站logo
• 网站logo设置完成后效果如图15.9所示。
4.顶部导航栏
• 顶部导航栏设置完成的效果如图15.10所示。
5.主导航栏样式
• 至此，主导航栏就设置完成了，效果如图15.11所示。
6.账号与购物车
• 接下来设置“主要部分”的CSS样式。首先设置“主要内容”的宽 度并设置为左浮动。然后，为“主要内容”中展示的图片设置边框 样式，这样可以使图像看起来更精致。
• 这时，内容区域中的图像就增加了一个边框，如图15.15所示。
（2）CSS样式设置
• 接着，设置“今日推荐”的样式，可以看出“今日推荐”中图片是 在文字的左边，要使图片向左浮动，并使图像和文字之间间隔10像 素。
• 账号与购物车设计的效果如图15.12所示。
15.4.2 页头部分
• 至此，网页页头部分就设计完成，页头部分整体效果如图15.13所示。
15.4.3 内容部分
• 下面开始设计网页中间的内容区域。根据图15.6我们将内容区域分 为“主要内容”和“侧边栏”两个部分，每个部分用<div>元素进行 划分。然后在每个<div>元素中分别设置里面的详细内容。
• 此外，这个页面具有很好的交互提示功能。例如，在页头部分的导 航菜单具有鼠标指针经过时发生变化的效果，如图15.2所示。
15.2 内容分析
• 在设计网页之前，首先要想清楚这个网站的内容是什么，通过一个 网页要传达给访问者什么信息，这些信息中哪些是最重要的，哪些 是相对重要的，以及这些信息应该如何组织。也就是说，设计一个 网页的第一步根本不是这个页面的样子，而是页面的内容。现在以 这个“宝贝屋网上商店”的首页为例进行一些说明。
• 然后对搜索框进行设置，使文本输入框和按钮都居中对齐，并设置 间距。
• 最后，设置分类目录的列表样式。设置了列表的字体、高度、行高 和上边框的样式，然后还设置了列表中链接<a>元素的样式，在每 个链接前面插入了一张蝴蝶形状的装饰图。
• 对于“最受欢迎”的样式，要使图片向右浮动，也使图像和文字之 间间隔10像素。
• 对于“分类推荐”的样式，是将“分类推荐”分为3列的栏目，要 设定每一个列表项目的固定高度，然后使用浮动排列方式。
• 接下来，我们对“主要内容”中的<h2>标题的样式再做一些设置， 使它显得更精致一些。这里我们设置了标题的字体、颜色、下划线， 以及在标题的最右端插入一个装饰花的图片。
1.主要内容
• 至此，“主要内容”的设计就完成了，效果如图15.15所示。
2.侧边栏
• 接下来进行内容部分的“侧边栏”的设计。根据图15.7，我们仍然 使用<div>元素将“侧边栏”部分划分为“搜索”、“分类”、“特 别提示一个表单<form>元素，然后在<form>元 素中添加了一个文本框和一个显示“查询商品”的按钮，用来搜素 商品。
15.4.1 整体样式设计
• 首先对整个页面进行一个整体设计，这里我们根据图15.3给出页面 设计的基本结构代码。代码共分为3部分，一部分是页头部分，一 部分是内容部分、一部分是页脚部分，每一部分用一个<div>元素进 行划分。
15.4.2 页头部分
• 下面开始对页头部分的设计进行详解。根据图15.4中设定的页头的 各个部分来进行HTML代码的编写。
15.3 原型设计
• 然后再将每个部分逐渐细化，例如页头部分，可以细化为如图15.5 所示的样子。
15.3 原型设计
• 中间的内容部分分为左右两列，如图15.6（左边）所示。然后再进 一步细化为如图15.7（右边）所示的样子。
15.4 布局设计
• 下面我们就可以根据原型设计图来进行网页的设计了。这里我们先 进行整体样式的设计，然后再进行页头部分、内容部分和页脚部分 的设计。
15.1 案例分析
• 在本章，我们只介绍“Baby Housing”（宝贝屋）网站首页的制作 过程。在首页竖直方向分为上中下3部分，其中上下2个部分的背景 会自动延伸，中间的内容区域分为左右两列，左列为主要内容，右 列由若干个圆角框构成。网站首页效果如图15.1所示。
15.1 案例分析
•
15.1 案例分析
第15章 网页布局综合案例——宝贝屋网 上商店
• 在本章中，我们将结合前面所学知识，分析、策划、设计并制作一 个完整的案例。这个案例是为一个名为“Baby Housing”（宝贝屋） 的儿童用品网上商店制作一个网站。通过这个网站的学习，读者不 仅可以更进一步了解我们前面所学过的所有知识，而且能够掌握一 套遵从Web标准的网页设计流程。
• 在“分类”中，我们插入了一个表示标题的<h2>元素和一个显示分 类内容的<ul>元素。
• 在“特别提示”中，插入了一个表示标题的<h2>元素和一个显示特 别提示内容的<p>元素。
（2）CSS设计部分
• 下面开始设置“侧边栏”的CSS样式，首先设置“侧边栏”的整体 样式。
• 这时圆角框已经实现了，但是圆角框内部的样式还没有详细设计。 接下来就来具体设置圆角框中的样式。首先，对“侧边栏”中的 <h2>标题进行统一设置，设置了边距、字体、颜色和居中显示。