第18章 综合案例三制作英文网站.ppt

第18章 综合案例三：制作英文网站 学习了关于CSS布局页面的方法后，如果要更好地使用各种属性，进行页面元素的控制，就要不断地实践。这一章主要的内容是讲解一个完整的站点首页和一个二级页面的制作。目的是通过实例，来讲解站点制作的步骤和注意的技巧。 18.1 分析效果图 因为在该实例中，只是讲解使用CSS进行整站布局的方法，所以只讲解站点首页和一个二级页面的制作方法。其中站点首页的效果图，如图18.1所示。 18.1 分析效果图 18.1 分析效果图 一个二级页面的效果图，如图18.2所示。 18.1 分析效果图 从图18.1和图18.2可以看出，首页和二级页面的头部、左侧和底部是相同的，右侧部分的宽度和内容是不同的，中间的内容部分也有很大的区别。下面分别进行分析。 1．首页效果图的分析 从图18.1可以看出，此时首页在纵向，可以分为三个部分：头部（包括logo部分和导航）、内容部分、底部。 2．二级页面的分析 二级页面和首页的结构基本相同，其中区别在于，右侧部分的宽度和首页有差别。 18.2 切图 分析完页面结构之后，就是切图的制作。其内容包括，文本的隐藏、切片的选择、保存格式等几个方面。 18.2.1 制作首页的切图 在制作切图时，首先要区分出，页面的内容和修饰部分。然后分析出，哪些修饰部分是可以用CSS代码来实现的，哪些部分是可以用重复背景来实现的，最后要切出需要知道详细宽度的部分。制作好的首页切片如图18.3所示。 18.2.1 制作首页的切图 18.2.2 二级页面的切图 从首页和二级页面的结构可以知道，此时二级页面需要重新切图的地方并不多。其切图的主要目的是，切出两个内容图片，同时确定内容各个部分的宽度。其切图后的效果如图18.4所示。 18.2.2 二级页面的切图 18.3 制作站点首页头部 切完图、新建了站点、做好准备工作后，就可以开始制作页面了。同前面章节的实例制作一样，要将整个页面分成几个部分进行制作。 18.3.1 首页头部的信息和基础样式的制作 下面来看一下首页头部的信息和基础样式的制作的代码。 18.3.2 首页头部的分析 首页头部信息和基础样式制作完成后，就开始详细制作首页的头部。首先还是对首页头部的效果图进行分析，其目的是，区分页面中内容和修饰的部分。头部的效果图，如图18.5所示。 18.3.3 首页头部结构的制作 在制作头部之前，分析一下页面所要显示的效果。此时页面定义了背景色为#5c5c5c（一种灰色），而从效果图可以看出，页面的主体部分的背景是白色。所以首先要增加一个用于显示背景颜色的父元素。 18.3.4 首页头部CSS代码的编写 制作完页面结构之后，就可以编写CSS部分了。在编写CSS部分时，如果发现结构部分存在不合理的地方，要及时修改。 1．main部分的样式 main部分的样式主要作用是，制作页面白色的背景和除顶部以外的白色边界。其具体代码如下所示。 #main{ width:820px; margin:0 auto; background-color:#ffffff; } 2．header部分的样式 header部分的样式主要用来显示头部的背景图片，同时还要控制元素的居中显示，所以要定义元素的margin属性和合适的高度、宽度。同时由于在header部分中，存在着两个导航文本，所以要控制link元素的位置，使导航的文本显示在正确的位置上。 header部分的样式页面的显示效果如图18.6所示。 3．menu部分的样式 menu部分包括两个部分，一个是左侧的圆角框，另一个是导航列表部分。定义menu部分样式，页面的显示效果如图18.7所示。 18.4 制作首页的主体部分 首页的主体部分可以分为三个部分，分别是左侧服务和新闻部分，中间内容部分，右侧的关于我们和欢迎部分。 18.4.1 分析主体部分效果图 在制作之前，同样先要分析一下效果图，分清页面中的内容和修饰部分。主体部分的效果图，如图18.8所示。 18.4.2 制作主体左侧部分的结构 主体左侧部分的结构，可以分为下面三个部分来制作。 1．搜索部分的结构 搜索部分，主要是由一个文本框和一个按钮构成。 18.4.2 制作主体左侧部分的结构 2．服务列表部分的结构 服务列表部分，主要由顶部的圆角、列表标题、列表内容构成的。 18.4.2 制作主体左侧部分的结构 3．新闻部分的结构 新闻部分，也是由标题和内容两个大部分构成的，其中为了确定高度和背景，要将内容部分放到一个父元素之中。 18.4.3 制作主体左侧部分的样式 与结构部分相对应，样式部分也分为三个主要部分。在制作具体样式之前，首先要制作页面父元素的样式。 1．content和left元素的样式 con