DIVCSS页面布局实例.ppt

固定宽度布局综合实例：制作个人网站首页 本实例讲解如何制作个人网站的首页。内容包括： 分析个人网站首页的架构 分块制作个人网站首页 个人网站首页构架分析 当网页设计师制作好个人网站的首页效果图，交给页面制作人员进行网页制作。页面制作人员只需要制作出与效果图一致并且兼容主流浏览器的标准页面即可。 分块制作个人网站首页 在对效果图进行分析得到页面结构图后，就可以进行分块制作网页。制作网页的主要遵循从总体到部分，从上部到下部的顺序。 制作个人网站首页的总体布局 制作个人网站首页首先从制作其总体布局开始，然后再细分到每个块区。本实例的页面分为左中右三部分，使用左中右浮动的布局方式。 1．建立网站文件夹 2．构建整体网页的结构 3．构建整体网页的布局 实现左中右浮动布局 1．实现左中右浮动布局 2．制作leftCol容器的背景 3．设置midCol容器的背景图 4．设置rigthCol容器的背景图 制作个人网站首页的左边栏目（leftCol） 在leftCol中只包含相册一个栏目，命名为gallery。在相册中包含相册栏目的栏目标题，使用h4标签嵌套。相册中的相片使用一个无序列表嵌套。 制作个人网站首页的中间栏目（midCol） 在midCol中包含三个垂直排列的文章列表。这三个文章列表分别为“必威体育精装版日志”、“必威体育精装版留言”和“旅游日志”。 1．设置文章列表的位置 2．添加文章列表 3．设置文章列表的样式 制作个人网站首页的右边栏目（rightCol） rightCol用于放置网页的导航，使用一个无序列表嵌入导航内容。