网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc

11.3 实例1：数字化教学资源平台网站布局 11.3.1效果图的分析与切片 本实例是为了让读者更清楚使用CSS进行整站布局的方法，所以这里只介绍站点首页的制作方法。其中，站点首页的效果图如图12-22所示。 在制作切图时，首先要区分出页面的内容和修饰部分。然后分析出哪些修饰部分是可以用CSS代码来实现的，哪些部分是可以用重复背景来实现的，最后要切出需要知道详细宽度的部分。在制作切图时，最好把修饰背景上的文本内容去掉，同时尽量减少图片文件的数量。制作好的首页切图如图12-23所示。 图 12-22 站点首页效果图 图 12-23 首页的切片 从图12-22可以看出可以看出，首页在纵向可以分为3个部分：头部（包括logo部分和导航）、内容部分、底部。其中，中间内容部分又可以分为3个部分：左侧的精品课程和专题学习网站部分、中间内容部分、右侧关于我们部分。 分析完页面结构之后，就是切图的制作，其内容文本的隐藏、切片的选择、保存格式等方面。下面进行详细的讲解。 从图12-23可以看出，切片中作为背景使用的大多是圆角框的部分和含有渐变颜色的部分。其中使用单纯一种颜色的部分，可以用CSS来实现。具体哪些修饰部分使用背景图片，哪些修饰部分使用CSS制作，将在后面详细介绍。切好图后，将切片导出保存为html格式即可。 11.3.3制作站点的首页头部 效果图切图完成后，就可以开始制作页面了。现在整个页面分成几个部分进行制作，下面分解进行讲解。 1．首页头部的信息和基础样式的制作 首先制作页面头部信息，主要包括页面标题等，其代码程序如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta name=robots content=all / meta name=author content=HTML爱好者 / meta name=Copyright content= / meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=description content=精品课程，专题学习网站，网络课程，多媒体课件 / meta name=keywords content=HTML,CSS / title数字化教学资源平台网站/title link href=style/main.css type=text/css rel=stylesheet / /head 在链接样式的语句后面，第12行增加了link元素，其目的是附加外部样式表。 注意：第8行设置charset=utf-8，如果网站全部页面都这样设置，可以防止出现乱码页面。 接下来制作页面的基础样式，其代码如下所示。 /* 基础样式 */ *{ margin: 0px; padding: 0px; font-family: 宋体; /*定义使用的字体*/ color:#58595B; font-size:11px; list-style-type: none; text-decoration: none;} body{ height: 100%; background-color:#5c5c5c;} /*定义背景颜色*/ img{ border:none;} a { /*定义页面链接的样式*/ color: #ffffff; text-decoration: none;} a:link{ text-decoration:none;} a:hover { text-decoration: underline;} form { margin: 0px; padding: 0px;} .clear{ line-height:1px; clear:both; visibility:hidden;} 在第3-10行代码的基础样式中定义了字体、页面的背景颜色和相关各个页面元素的初始样式、同时取消了可能存在兼容问题的元素的补白和边界。第15行的border：none，表示所有图片没有边框。 2．首页头部的分析 首先还是对头部的效果图进行分析，其目的是区分页面中内容和修饰的部分。头部的效果图如图12-24所示。 图 12-24 页面头部效果图 从图12-24可以看出，头部主要分为两个部分，其中导航列表以上的部分可以采用背景图片的方式实现。导航菜单部分，左侧可以用一个圆角图片背景实现，其