网页制作案例教程-清华大学出版社-第9章-使用CSS布局规划网页

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第9章 使用CSS布局规划网页本章学习目标（知识要点）n掌握CSS布局网页n掌握DIV+CSS布局网页n掌握AP DIV布局网页本章学习导航nCSS布局网页是一种非常流行的网页布局方式，能够做到使网页元素精确定位，美观的效果，本章主要介绍创建CSS、DIV+CSS和AP DIV布局网页。n本章内容在全书知识结构中所处位置如图所示 基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页

2、CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护9.1 CSS布局网页入门n9.1.1 CSS盒模型简介内容padding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-leftborder-rightmargin-topmargin-bottommargin-leftmargin-right图9-1-1 盒子模型n9.1.2 常用的CSS布局属性n（1）边界（margin）n1）边界属性n边界属性m

3、argin是一个不可继承的属性，包括上边界（margin-top）、下边界（margin-bottom）、左边界（margin-left）、右边界（margin-right）。这些元素属性是用来设置边界的，它们可以取的值有长度length、百分比percentage。百分比的值要参考上级元素的宽度。语法格式为：nmargin: margin-top margin-right margin-bottom margin-leftn例：nBODYmargin-top:10pt;margin-right:20pt;margin-bottom:30pt;margin-left:40ptn2）使用单侧边界

4、属性n若body体里是margin，那margin可以取1到4个值。如果margin只被赋予了一个值，那就表示上、下、左、右边界都使用同样数值，它们的顺序不能改变。除了margin可以设置四个边界外，其他的四个特性只能设置与它们相对应的一条边界。如果被赋予了两个或三个数值，没有指定值的边距，它的值将和与它相对的边距值相同。n3）相邻边界属性n 如果在页面中同时对多个元素使用边界属性，并且这些元素相邻，那么这些元素的边界部分会根据具体情况有不同的现实效果，当两个相邻元素在垂直方向上设置了边界值，两者的边界距离并不是两者的边界值的和，而是两者中边界较大的那个。n4）在内联元素中使用边界属性n上述的

5、边界属性设置都是针对块元素的，而在内联元素里使用边界属性的显示效果是不同的。当对内联元素设置垂直边界时，边界属性不能改变内联元素的垂直大小，也就是该属性设置将无意义。而在水平方向上的显示效果和块元素一致。n（2）填充（padding）n填充用来描述BOX的边框和内容之间插入多少空间。不但为元素设置了补白属性，而且增加了元素所占有的空间。语法格式为：npadding: 长度值/百分比值n例如：n.mn height: 50px;n width: 20px;n padding:20px;nn（3）边框（border）n平常我们在查看HTML文档时，看到一段文字，并不会把它作为一个BOX，实际上BO

6、X是有边框的，只是平时不显示出来罢了，而border就是用来描述BOX边框的。Border属性分为边框宽度（border-width）、边框颜色（border-color）、边框样式（border-style）。n（4）文本与背景n从CSS的基本语句可以看出，属性是CSS非常重要的部分。如果熟练掌握了CSS的各种属性将会使页面的编辑更加得心应手。CSS的属性包括很多种，如字体属性、颜色和背景属性、文本属性、”容器”属性、分级属性、鼠标属性等。在这节中，我们主要来分析以下字体属性和文本属性。 属性属性 属性含义属性含义 属性值属性值text-align设定文本的对齐方式left、right、ce

7、nter、justifytext-decoration用来设定文本的删除线、下划线或者围绕文本的线以及闪烁文本等，默认值是无效果none。所画的线颜色同文本本身的颜色相同，线的厚度跟浏览器相关。None、underline(下划线下划线)、overline（在文本（在文本顶端画一条线）、顶端画一条线）、line-through（在文本中间画一条线）、（在文本中间画一条线）、blink（文本闪烁）（文本闪烁）text-indent设定文本首行缩进、line-height设定每行之间的距离Normal（默认行高）、数值（行高值，需要写单（默认行高）、数值（行高值，需要写单位）、乘数（无单位，表示是

8、字体的倍数）、百分位）、乘数（无单位，表示是字体的倍数）、百分比（基于比（基于font-size设置行高）设置行高）letter-spacing设定字母之间的距离Normal（默认不插入任何空间）、长度数值（设（默认不插入任何空间）、长度数值（设定字母间距，如为负数，则缩小间距）定字母间距，如为负数，则缩小间距）word-spacing设定单词之间的距离同同letter-spacingtext-transform使文本从大写改为小写或小写改为大写等。Capitalize（首字母大写）、（首字母大写）、uppercase（所有（所有小写字母改为大写）、小写字母改为大写）、Lowercase（大写

9、字母改（大写字母改为小写）、为小写）、none、inherit（使用包含盒子的值）（使用包含盒子的值）vertical-align设定了元素在垂直方向上的位置Baseline、sub、super、top、text-top、m i d d l e 、 b o t t o m 、 t e x t - b o t t o m 、color设定文本的字体颜色设定文本的字体颜色所有所有表9-1-1 常用文本属性 n（5）颜色与背景n在早起的网页中，只存在黑白灰三种颜色，单调乏味，css提供了控制颜色和背景的功能，这和只用html控制有很大不同。关于颜色背景的属性主要包括颜色的属性、背景颜色、背景图像、背

10、景重复、背景附件、背景位置等。n（6）列表n1）list-style-type属性nlist-style-type属性是用来修改用于列表项的标志类型的，列表项的左侧是有符号或者是编号的，比如无序列表中可能是圆点，方块等，有序列表中可能是字母或者数字等。如果要将这些符号或者数字修改就需要该属性。n2）list-style-image属性nlist-style-image属性可以将用户的图像文件当作项目编号，语法格式为：n选择器list-style-image : url(图像地址)n示例代码为：nul li list-style-image : url(xxx.gif)n3）list-style

11、-position属性n当列表项目的文本很长时，就会有段落文本缩排的问题，该属性用来放置列表中的列表项中第二行文本的对齐方式。n（7）表单nCSS的格式化能力不仅对文本、图片等，还可以对表单进行格式化设置，使信息更容易阅读，帮助浏览者完成项目分类等。n1）标签n在设计表单标签的样式时，可以按照其他的html块设置进行，例如：nform fieldsetmargin-left:10px; border:0 solid;nlabel border: 1px; dotted gray;nlegend color:red;n通过css可以为标签、字段等设置统一的格式。n2）文本输入字段n可以对文本框设

12、置字体、前景色和背景色等。例如：nInput type=”text”n background-color: red;n Color:white;n nTextarea font-family: Tahoma; height: 30%;n3）按钮及复选框n按钮和复选框都是input属性的，它们在css设置属性时只要在input关键字后加上具体属性即可设置其样式。n4）选择列表n在html中通过select标签和option标签可以设置选择列表，同样在css中也可以设置选择列表的样式。例如：nSelect width:50%nOptionvalue=n9.1.3 CSS布局网页方法n（1）定位属性

13、n1）定位属性positionnPosition属性可以控制如何以及在何处显示某个特定的元素，该属性是不可以继承的，语法格式为：nposition: static/ relative/ absolute/ fixedn2）层叠定位属性z-indexn该属性是为了定义页面元素的层叠顺序，属性的取值是没有单位的数字，而且可以为负数，它只是表示了某个元素相对其他元素的层叠次序。n（2）浮动n1）浮动属性floatn在标准流中，一个块级元素在水平方向会自动伸展，只能在竖直方向和其他元素依次排列，不能并排，而浮动属性则使得块级元素的表现有所不同。nFloat属性默认取值为none，也就是标准流通常的情况

14、，float的另外两个取值为：nLeft：标签向左边浮动。nRight：标签向右边浮动。n2）相邻固定元素n在HTML中，两块由包起来的块元素会按照图9-1-14所示排列块1块2图9-1-14未加浮动的两个固定元素n而如果给块1设置了向左浮动，则排列会变为图9-1-15所示。块1块2图9-1-15 块1设置左浮动n3）浮动元素相邻n当多个浮动元素相邻的时候，如图9-1-18所示，所有的块都采用了向左浮动，则所有的块都会紧挨着向左靠齐，直到超过页面的宽度，则会换行继续靠左对齐。图9-1-18 浮动元素相邻n4）清除浮动属性n由于在一些浏览器上浮动元素的显示效果会不同，所以，在现实需求中有时需要清

15、除这些浮动属性，清除浮动属性即clear属性。n9.1.4 CSS布局和Table布局的区别nCSS布局与传统表格布局的最大区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制布局版块的间距；而css则采用层(div)来定位，通过层的margin，padding，border等属性来控制版块的间距。9.2 DIV+CSS布局网页n9.2.1 DIV+CSS布局网页简介nDiv是专门用于布局设计的容器对象，div标签也是成对出现，即和两个标签，将内容放在两个标签之间。div除了可以直接放入文本，也可以放入其他标签，也可以多个div进行嵌套使用，最终目的就是合理的标识出

16、我们的页面区域。nHTML中的对象有两类，一类是block即块状对象，块状对象指的是当前对象显示为一个方块，默认的现实状态下，将占据整行，其他的对象在下一行显示。另一类是行间对象或者内联元素，这种对象允许下一个对象与它本身在一行中显示。ndiv是属于块状对象，它的最终样式根据CSS的功能编写的，实现了实现和样式分离，而且由它来设计的网页布局更灵活，不像表格设计的布局那样死板，不好转换。n9.2.2 DIV+CSS布局网页分类n（1）单行单列n（2）单行两列n（3）单行三列n（4）顶行三列9.3 AP DIV布局网页n（1）AP Div的定义及特性n1）所谓AP Div，是指存放文本、图像、表单

17、和插件等网页内容的容器，可以想象成是一张一张叠加起来的透明胶片，每张透明胶片上都有不同的画面，它用来控制浏览器窗口中网页内容的位置、层次。n2）特性：AP Div最主要的特性就是它是浮动在网页内容之上的；也就是说，可以在（不影响其他网页元素情况下）网页上任意改变其位置，实现对AP Div的准确定位；把页面元素放入AP Div中可以使用户对页面操作的布局更加轻松。n3）AP Div元素还有一些其他的重要特性。AP Div元素可以重叠n（2）绘制AP Div的步骤：n1）将光标放在文档插入点，在“布局”面板中单击“绘制AP Div”按钮。n2）在文档窗口中拖动画出AP Div元素，按住Ctrl可画

18、多个AP Div元素。也可以通过复制、粘贴，快速制作出多个类似的AP Div元素。n3）每个AP Div元素中添加相应的文字和图片。n4）为元素命名并调整好各元素的位置，可以通过菜单“修改”|“排列顺序”命名操作。n（3）与时间轴结合的动画效果n1）添加AP Div元素，并加入相应的图片或文字。n2）通过“窗口”菜单，调出时间轴。n3）把刚添加的AP Div元素拖动到时间轴上。n4）右击时间轴，选择“记录AP元素的路径”命令，拖动AP Div元素在屏幕中移动。n5）选中时间轴上的“自动播放”和“循环”按钮，查看效果。n（4）与行为结合的交互效果nAP Div元素属性的一个重要功能就是显示/隐藏

19、功能，与“行为”中显示/隐藏元素结合并利用光标的OnMouseOver和OnMouseOut事件制作出交互效果。n实现的步骤如下：n1）插入四个AP Div元素并命名，在其中加入对应的四张大图片。n2）同时选中新加入的四元素和“kuang”元素，通过修改菜单调整它们的位置相同。n3）在AP元素面板中把“kuang”元素拖到四元素的上面，达到挡板的作用。n4）设置AP Div元素的可见性让四个大图片先隐藏。n5）通过菜单“窗口”“行为”调出行为面板，选中“zgt”，单击+，显示/隐藏元素，选中“zgd“元素单击显示，确定；并把行为的触发条件改为“onMouseOver”；实现效果光标放在中国馆的

20、小图像上，在框内出现中国馆的大图片。n6）通过菜单“窗口”调出行为面板，选中“zgt”，单击+，显示/隐藏元素，选中“zgd“单击隐藏，确定；并把行为的触发条件改为“onMouseOut”。 实现光标离开中国馆的小图像上，在框内中国馆的大图片消失的效果。9.4项目案例学习目标学习目标 案例描述案例描述 学习和使用DIV+CSS布局网页。根据CSS布局方法，使用Dreamweaver CS5制作医药商务系统网站系统网页，如图9-4-1所示。案例要点案例要点 CSS布局规划网页的方法、常用的CSS布局属性的设置。案例实施案例实施 （1）选择“开始”“所有程序”“Adobe Dreamweaver

21、CS5”，启动Adobe Dreamweaver CS5，新建一站点，将images、Scripts和flash素材文件夹复制到本站点文件夹中。（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”，单击“创建”按钮，新建一个网页。（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为index.html。（4）在页面index.html的文档编辑区的【标题】文本框里，将标题命名为“医药商务网站”。案例实施案例实施 （5）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“CSS”，单击“创建”按钮，新建CSS文

22、档。（6）在站点文件夹中新建一个css文件夹，将刚建立的css文档保存到该文件夹中，并命名为style.css。（7）在style.css文档中，设置网页中每个元素边界属性margin值为0、填充属性padding值为0，其语句为：*margin:0;padding:0;，加上这句就可以删除浏览器这些默认值，方便后面的设置。（8）在style.css文档中，设置网页body的margin、padding、font-size和color的默认属性值，其语句为：bodymargin:0;padding:0;font-size:12px;color:#666666;。（9）在style.css文档中

23、，设置网页中标题、列表、表单的margin和padding默认属性值，其语句为：h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,inputmargin:0;padding:0案例实施案例实施 （10）点击“css样式”面板中的附加样式表图标 ，则会弹出如图9-4-2所示的“链接外部样式表”对话框，目的是把刚建好的style.css链接到index.html网页中。案例实施案例实施 （11）将index.html分为五个区域，分别为：top、nav、centent、link和footer，分别代表网页的logo部分、导航条部分、中间主体部分、友情链接部分和底部的版权部分。（1

24、2）在style.css文档中，设定top属性的初始值#topwidth:760px;height:110px;margin:0 auto;.top_zwidth:304px;height:110px;float:left;.top_ywidth:456px;height:110px;float:right;（13）在index.html文档中，将光标放置在top部分，点击“插入”|“常用”面板的插入图像按钮 ，弹出插入图像对话框。案例实施案例实施 （14）选中刚插入的图片，在属性面板中的“类”选择top_z类来设定其属性，如图9-4-4所示。案例实施案例实施 （15）在index.html文

25、档中，将光标放置在刚插入的图片的后面，点击“插入”|“常用”面板的插入媒体的SWF按钮 ，弹出“选择SWF”对话框。（16）选中刚插入的flash，在属性面板中的“类”选择top_y类来设定其属性（17）在dreamweaver cs5设计窗口中效果如图9-4-7所示。案例实施案例实施 （18）在style.css文档中，设定nav属性、nav ul即项目列表属性、nav ul li即列表项属性以及nav ul li a即列表项超链接属性的初始值，代码如下：#navwidth:760px;height:23px;background:#578cb8;margin:0 auto; positio

26、n:relative;#nav ulborder:#FFFFFF 1px solid;#nav ul lifloat:left;#nav ul li a,#nav ul li a:visiteddisplay:block;color:#FFFFFF;font-size:14px; text-decoration:none;width:100px;height:23px;line-height:23px;text-align:center;border-right:#FFFFFF 1px solid;案例实施案例实施 （19）在index.html文档中，将光标放置在nav区域，插入项目列表，代

27、码如下： 首页 IT服务 医药商务系统 员工招聘 联系我们 案例实施案例实施 （20）在dreamweaver cs5设计窗口中效果如图9-4-8所示。案例实施案例实施 （21）在style.css文档中，设定centent区域属性、centent左侧区域属性和centent右侧区域属性，其代码如下：#cententwidth:760px;height:313px;margin:10px auto 10px; clear:both;.leftwidth:182px;height:313px;float:left.rightwidth:569px;height:313px;float:right

28、;border:#c0c0c0 1px solid;（22）在index.html文档中，centent区域分为left和right两个区域，其代码如下： 案例实施案例实施 （23）经过上述步骤后，在dreamweaver cs5设计窗口中效果如图9-4-9所示。案例实施案例实施 （24）在style.css文档中，设定centent区域中left区域的需要的类，其代码如下：.left_swidth:182px;height:228px;background:#f5f5f5; .left_s h1width:162px;height:25px; background:url(./images/

29、left_h1bj.gif) no-repeat 10px 9px; line-height:25px;padding-left:20px;margin-top:10px;.left_s h1 a,left_s h1 a:visitedfont-size:14px;color:#5f8eb8; .chawidth:100px;height:17px; background:url(./images/left_ul.gif) no-repeat left top;line-height:17px;padding-left:35px;margin-left:15px;.cha a,.cha a:v

30、isitedcolor:#076392;.cha1width:100px;height:17px; background:url(./images/left_ul1.gif) no-repeat left top; line-height:17px;padding-left:35px;margin-left:15px;.cha1 a,.cha1 a:visitedcolor:#076392;.cha2width:100px;height:17px; background:url(./images/left_ul2.gif) no-repeat left top; line-height:17px;padding-left:35px;margin-left:15px;.cha2 a,.cha2 a:visitedcolor:#076392;.cha3width:100px;height:17px; background:url(./images/left_ul3.gif) no-repeat left top; line-height:17px;padding-left:35px;margin-left:15px;.cha3 a,.cha3 a:visitedcolor:#076392;.dengluwidth:180px;height:97px;border:#