第20章 DIV CSS页面布局实例制作课件.ppt

第20章 DIV+CSS页面布局实例：制作服饰商城 20.1 服饰商城构架分析 本章制作的服饰商城共有三个页面，包括首页、商品列表页、商品详细介绍页。分别命名为index.html、list.html和detail.html。本章制作的三个页面是服饰商城的基本页面的模板。完整的商城还包含许多其余的页面，例如登录和注册的页面等。但本章只讲解如何制作商城的主要页面，以下为每个页面的功能： 首页（index.html）：包含商城的主要内容列表和热门列表； 商品列表页（list.html）：某一类商品的列表页； 商品详细介绍页（detail.html）：某一商品的详细介绍页面； 20.2 制作服饰商城的首页的总体布局 在对效果图进行分析得到页面结构图后，首先要制作服饰商城的首页。服饰商城的首页要从规划整个网页的结构开始。服饰商城的首页分为header、nav、firestCol、secondCol、guide和footer部分，这些部分都是水平居中在页面。 20.2.1 建立网站文件夹以及构建整体网页的结构 建立网站文件夹。新建一个文件夹命名为“服饰商城”，在该文件夹中新建一个标准XHTML文档，命名为index.html。再新建一个images文件夹，用于存放图片；新建css文件夹用于放置CSS文件。 20.2.2 构建整体网页的布局 对需要应用一致样式的标签预先进行设置 20.3 制作服饰商城首页头部（header） 在完成首页的整体基本布局后，就可以对页面进行分块制作，首先制作网页头部header。 header分为左右两个部分，左边是网站的logo，右边是网站的搜索条。这两个部分分别用logo和search的容器嵌入页面。在搜索条中包含了一个文本输入框和一个搜索按钮。文本框用于用户输入关键字，搜索按钮用于用户搜索关键字。 20.4 制作服饰商城导航（nav） 在完成页面的header部分后，接着就要制作导航nav部分的内容。服饰商城的导航的宽度是不固定的，无论用户的分辨率是多少，导航都会横跨整个浏览器。这样的导航在许多网站中出现，主要的作用是分离网页的头部和主要内容，起到分割的作用。在网页整体构架设置时，已经设置了nav容器的高度，下面是添加其背景图。 20.5 制作服饰商城第一栏（firstCol） 服饰商城第一栏是一个固定高度的容器，设置为400像素。由于商城用于放置页面主体内容的容器有两个，分别是第一栏和第二栏。所以第一栏最好固定其高度，第二栏则可以不需要固定高度。这样做的好处是，第一栏不会因为内容而改变布局，从而影响页面的外观。 20.5.1 制作服饰商城第一栏的布局 服饰商城第一栏分为左中右三个部分。左边是商城所有商品的总目，当用户选择其中一个选项，就能跳转到相应的商品列表。例如，在商品总目列表中选择了“风衣”，页面就会转到风衣的商品列表页面中。左边的商品总目命名为sortList。中间是一个宣传栏目，用于摆放商城的活动宣传或者促销宣传。很多网站使用flash或者JavaScript的图片轮转来制作这个效果。由于本书不涉及过多的CSS技术以外的技术，所以这个栏目放置一张图片作为替代。中间的宣传栏目命名为midFlash。右边的栏目中包含了用户登录框、商城新闻和促销图片。这个栏目包含了比较多的内容，不能使用一个名称概括，所以使用rightBox来命名。 20.5.2 制作服饰商城第一栏的左边部分sortList sortList是商城的商品总目，效果如图20.8所示。 20.5.3 制作服饰商城第一栏的中间部分midFlash和右边部分rightBox 第一栏中间部分midFlash是一张宽490x像素，高390像素的图片，在midFlash中使用img标签嵌入图片 20.6 制作服饰商城第二栏（secondCol） 在制作完成第一栏后，就要开始制作商城的第二栏，首先完成第二栏的整体布局。 20.6.1 制作服饰商城第二栏的布局 服饰商城首页的第一栏是固定高度的，而第二栏是自适应高度的。第二栏secondCol包含左右两列，左列是折扣专区，右列是热卖专区。使用secondColLeft嵌套左列，使用secondColRight嵌套右列。 20.6.2 制作服饰商城第二栏的左列secondColLeft 第二栏的左列secondColLeft是商城的折扣专区，区域里三个垂直排列的折扣商品框。首先制作出其中一个框，其余两个复制后更改其内容即可。首先要制作secondColLeft的标题“折扣专区”。使用h4标签为容器嵌入标题，由于使用背景图制作标题文字，所以在标签中不需要嵌入文字。 20.6.3 制作服饰商城第二栏的右列secondColRight 图为服饰商城第二栏的右列secondC