《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目15》由会员分享，可在线阅读，更多相关《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目15（37页珍藏版）》请在金锄头文库上搜索。
1、项目15 使用CSS样式布局页面,项目描述,知识储备,实践向导,能力拓展,退 出,项目小结,15.1 项目描述,在学习CSS基础知识之后，进一步学习更高级的CSS应用技能，使用CSS样式表进行网页布局。本项目主要通过实例讲解CSS布局的手工编写和工具运用，完成“海思教育”网站首页的草稿布局和首页的布局美化。在最后一个任务中增加了CS6的流体网格布局内容。,15.2 知识储备,15.2.1 常用布局标记 15.2.2 盒子模型 15.2.3 元素定位方法,15.2知识储备,15.2.1常用布局标记 1.块级元素,表15-1 常见的块级元素(block element),15.2知识
2、储备,15.2.1常用布局标记 2.行内元素,表15-2 常见的行内元素(inline element),15.2知识储备,15.2.2 盒子模型 CSS 盒子模型是CSS中最重要的概念之一，也叫框模型。一个盒子模型的基本组成如图15-1所示。,图15-1 盒子模型,15.2知识储备,15.2.2 盒子模型 1.内边距 CSS中，padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值，但不允许使用负值。例如，希望所有元素的各边都有 10 像素的内边距，只需如下规则： * padding: 10px; 这里的符号“*”是通用选择器，即所有的标记都选择，
3、与DOS操作系统中通配符“*”作用相似。也可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，例如： div padding: 5px 0.5em 0px 40%;,15.2知识储备,15.2.2 盒子模型 2.外边距 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位可以是像素、英寸、毫米或 em，百分数值甚至负值都可以。margin 还可以设置为 auto。当然，常见的做法是为外边距设置长度值。 例如：h1 margin : 10px 0px 15px 5
4、px; 上例为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px) ，与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。,15.2知识储备,15.2.2 盒子模型 3.外边距的合并 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如图15-3所示。,图15-3 边距合并,15.2知识储备,15.2.2 盒子模型 3.外边距的合并 当元素发生嵌套时（这里内边距为0），内外元素的上下外边距也会发生合并。如图15-4所示。,图15-4 嵌套边距合并,15.2知识储备,15.2.3元素定位方法 1. fl
5、oat浮动定位 浮动定位（float）是CSS排版中最常用的手段，图片的浮动可以使文字环绕图片。浮动的元素仍然是网页流的一部分，常常通过对DIV元素应用float浮动来进行定位。 属性float的值可以设置为left、right或者默认值none。当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。,15.2知识储备,15.2.3元素定位方法 2. position定位 CSS中通过position属性可以选择四种不同类型的定位： Static（无定位）：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 Relative
6、（相对定位）：元素框偏移一定距离。元素仍保持形状，它原本所占的位置保留。 Absolute（绝对定位）：元素框从标准流删除，并相对于其包含块级元素定位。包含块级元素可以是文档中的另一个元素。元素原先在正常文档流中所占的位置会失去。元素定位后生成一个块级元素，无论定位之前是否是块级元素。 Fixed（相对于窗口的固定定位）：表现类似于把 position 设置为absolute，固定在浏览器的某个位置。IE6不支持该属性。,15.2知识储备,15.2.3元素定位方法 2. position定位,图15-7 相对定位,图15-8 绝对定位,15.3 实践向导,任务15-1 手工代码草稿布局 通常在
7、进行页面布局前，都会对页面的“盒子”摆放进行一个简单的规划，构筑基础的页面结构，然后再进行具体的设置和美化。在Dreamweaver中手工编写代码进行基础布局，是前端工作的基本功之一。对一个页面进行如图15-9所示的简单色块结构布局。,图15-9 草稿页面规划,15.3 实践向导,任务15-1 手工代码草稿布局 1.固定容器位置以及设置容器大小 body margin:0px; padding:0px; #container width:960px; padding:5px; background-color:#CCC; margin:auto auto; ,15.3 实践向导,任务15-1
8、手工代码草稿布局 2.设置页首部分 #head height:120px; background-color:#99F; 这里并没有对容器head的宽度进行设置是因为在它所占的行中只有一个元素，会自动伸展到父元素的宽度960px。,15.3 实践向导,任务15-1 手工代码草稿布局 3.设置中间各板块元素 #guide width:260px; height:400px; float:left; background-color:#966; #banner width:700px; height:200px; float:left; background-color:#069; #news,#
9、ad width:350px; height:200px; float:left; background-color:#999; ,15.3 实践向导,任务15-1 手工代码草稿布局 4.底部色块 #footer height:100px; background-color:#96C; float:left; width:960px; 这里定义了宽度，因为在某些浏览器下，若不定义页脚宽度，容器将无法伸展。完成页脚后发现页面中的父容器并未随着内部容器的增加而自动扩展高度，因此要对其进行固定高度为620px，完成后效果如图15-10所示。,15.3 实践向导,任务15-2 编写纯CSS
10、弹出菜单 1.编写HTML代码 网站首页 服务项目 网站建设 广告设计 影视制作 案例精选 地球集团 火星集团 银河企业 联系我们 ,图15-13 菜单标准流,15.3 实践向导,任务15-2 编写纯CSS弹出菜单 2.编写CSS代码 ul margin: 0px; padding: 0px; ul li float: left; display: inline; height: 30px; width: 100px; list-style: none; ,ul li a color: #FFF;
11、text-decoration: none; line-height: 29px; width: 91px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080; font-family:微软雅黑; font-size:0.9em; ,图15-12 弹出菜单原始状态,15.3 实践向导,任务15-3 对任务
12、15-1手工代码草稿布局的页面进行详细制作，并对页面进行美化，网页效果如图15-14所示。 1.页首的修饰,图15-14 首页效果图,15.3 实践向导,任务15-3 1.页首的修饰 #head height:119px; background:url(15-5/logo.jpg) center left no-repeat; background-color:#FFF; border-bottom:#036 1px solid; ,15.3 实践向导,任务15-3 2.中间主体部分 导航菜单 导航菜单是本页面的难点，任务15-2中介绍了如何使用UL标记制作纯CSS弹出
13、菜单，这里的竖排菜单无需弹出，原理完全相同且更加简单。首先应准备好HTML标准流，再加工div本身以及ul边框。,图15-15 修改UL前后效果图,15.3 实践向导,任务15-3 2.中间主体部分 接着可以制作“按钮”，主要通过li与a标记完成，li负责定位，a负责表现出按钮的形状和简单的鼠标悬停效果。有两个关键点，首先是a标记的高度要和行高一致，文字才能垂直居中，其次display属性设置为block，a标记的可选区域才会呈现按钮状。 这里利用左侧和顶部的margin值，强行把span拉到了应该显示的位置，这也是一种定位的技巧。但是这种定位方式会在不同浏览器中可能有不同的表现。
14、Span标记就位后空位依然很大，可以为每个按钮增加一个背景图案进一步美化。,图15-17 导航菜单,15.3 实践向导,任务15-3 2.中间主体部分 右侧横幅banner部分 这个部分一般都是放置图片切换的FLASH或者JS特效，或者是固定的大幅图片，主要依靠的不是CSS技术而是图像处理或者动画制作技术，这里只需将其载入即可，这里我们插入一个静态图片。,图15-18 横幅效果,15.3 实践向导,任务15-3 2.中间主体部分 新闻板块的设计 一般显示文本片段或者文章列表的版块，通常都有标题栏，以及正文内容块。若是文本片段，则由h1-h6和p标记构成，文章列表则由h1
15、-h6和ul-li-a列表标记构成。,图15-19 新闻列表,15.3 实践向导,任务15-3 2.中间主体部分 广告版块的设计 新闻旁边的广告版块，用来放置人物评论，这个部分的内容采取图片、简介二者合一的形式，下面先列出HTML标准流代码。左侧放置IMG图片标记，右侧放置P标记，每行容纳一个IMG和一个P标记。,图15-20 广告版块,15.3 实践向导,任务15-3 3.页脚的设计 #footer height:89px; float:left; width:950px; border-top:#036 1px solid; background-color:#F9
16、F9F9; #footer p font-size:12px; color:#666; text-align:center; line-height:20px; ,15.3 实践向导,任务15-4 流体网格布局 1.新建流体网格 图15-22设备中央的小框中填写的是格数，即把页面划分成几个等分。下方的格中填写的是页面内容宽度占整个浏览界面的百分比，可以根据实际需要的情况填写。本例中将设置为：移动设备中15列宽百分比，桌面电脑用12格网格。单击“创建”按钮后，首先会询问保存CSS文件的位置和命名，这里命名为main.css。先保存HTML文件本身，然后保存CSS文件，保存时系统会自动将流体网格所需要的boilerplate.css和respond.min.js一起复制到目标文件夹。,图15-22 三种预设,15.3 实践向导,任务15-4 流体网格布局 2.使用流体网格布局 为了方便操作，可以将界面调整为“经典”模式，然后通过工具菜单新建网格。注意：默认页面上会有一些文字和一个DIV元素，可以删除它，但是不能把这部分DIV标记删除，
