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

第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 0auto 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元素的样式content元素中 主要定义元素的宽度和居中属性 使主体内容部分和头部对齐 left部分定义左侧内容的宽度 18 4 3制作主体左侧部分的样式 2 标题部分样式标题部分样式 分别定义在titlewhite和titlered两个类选择符中 18 4 3制作主体左侧部分的样式 3 搜索部分样式搜索部分的样式 主要是定义表单的位置 文本框的大小 按钮与文本框的间隔等属性 18 4 3制作主体左侧部分的样式 4 服务列表部分样式服务列表部分样式 主要包括定义头部圆角 标题和列表 其中包括列表的位置 间隔 字体 链接等样式 18 4 3制作主体左侧部分的样式 5 新闻部分样式新闻的标题部分和服务部分基本相同 采用背景颜色的方式来修饰 同时在新闻内容部分的父元素中 定义合适的高度 用来显示新闻部分的背景 在新闻每一条内容中 定义边框的样式来进行分隔 18 4 4制作主体中间部分的结构 主体中间部分的结构可以分为两个部分 展示图片部分和服务分类部分 1 展示图片部分的结构展示图片部分的结构比较简单 可以不用任何包含元素 直接放在middle元素之中 不过由于img元素是内联元素 所以还要增加一个附加的clear元素 或者定义展示图片为块元素 来换行显示 18 4 4制作主体中间部分的结构 2 服务展示部分服务展示部分 主要由几个重复的部分组成 其中为了制作各个展示内容之间的分隔线 将五个展示的内容分成三类 左侧内容 右侧内容和底部中间内容 每个展示部分的图片 标题和内容 都使用相同的样式 18 4 5制作主体中间部分的样式 对应中间部分的结构 样式部分也可以分为两个部分来讲解 在制作具体内容之前 依然先定义父元素的样式 1 定义middle元素的样式因为首页和其他级别页面 中间部分的宽度是不同的 所以此时可以不定义middle元素的宽度 而只定义它的浮动属性 此时middle元素的宽度 由它所包含的元素决定 18 4 5制作主体中间部分的样式 2 定义展示图片的样式展示图片的样式 主要是定义图片的宽度和高度 18 4 5制作主体中间部分的样式 3 服务展示内容部分这个部分的样式稍微复杂一点 可以分为以下几个部分进行定义 1 services标题部分services标题部分 是指页面中含有文本Services的部分 2 三个位置的容器和其中图片的样式 3 定义图片标题和内容的样式 18 4 5制作主体中间部分的样式 定义完中间内容的样式后 页面的显示效果如图18 10所示 18 4 6制作主体右侧部分的结构 主体右侧部分的结构可以分为两个部分 关于我们 的部分和欢迎图片的部分 1 关于我们 的部分的结构 关于我们 的部分的结构 大致可以分为下面几个部分 头部圆角 标题 内容 更多 底部圆角 18 4 6制作主体右侧部分的结构 2 欢迎图片的部分欢迎图片部分的结构 相对来说要简单的多 只有一个图片部分和一个欢迎文本部分 18 4 7制作主体右侧部分的样式 对应右侧结构部分 依然分两个方面来定义右侧部分的样式 1 制作 关于我们 部分的样式 关于我们 部分的样式 和前面章节讲解的圆角框的制作方法类似 分别用背景图片制作头部和底部的圆角部分 然后用设置背景颜色的方法制作中间内容部分 来衔接头部和底部的圆角 18 4 7制作主体右侧部分的样式 2 制作欢迎图片部分的样式这部分的样式比较简单 18 4 7制作主体右侧部分的样式 定义了右侧样式后 页面显示效果如图18 11所示 18 5制作首页的底部 首页的底部相对来说就要简单一些了 主要也是由三个部分组成的 分别是左侧的圆角 中间的内容 右侧的圆角 其效果图如图18 12所示 18 6二级页面的制作 从效果图中可以看出 首页和二级页面的头部 左侧 底部都是相同的 所以只需要更改首页中间内容部分和右侧部分就可以了 18 6 1分析二级页面的效果图 二级页面的中间内容部分的效果图 如图18 14所示 18 6 2制作二级页面中间内容部分的结构 在制作二级页面之前 首先要在页面头部文件中 增加链接新样式表的代码 如下所示 中间图片展示的部分可以使用首页的结构 不同之处在于 此时图片使用的样式不同 因为此时图片的宽度和首页图片的宽度不同 接下来的部分是一个标题 然后是分隔的颜色块 再下面是日期和标题的列表 18 6 3制作二级页面中间内容部分的样式 这个部分的样式可以分为两个部分 一部分是其他二级页面也会使用的公用样式 另一部分是新闻页面独立使用的样式 其中 公用样式要定义在mian css中 独立的样式定义在newsroom css之中 下面分别进行制作 1 制作页面中间内容公用的样式二级页面的公用样式包括 图片大小 标题 分隔色块等 18 6 3制作二级页面中间内容部分的样式 2 制作页面中间内容独立的样式新闻页面中间部分的独立样式 主要是对两个列表的控制 其中包括 列表的宽度 文本 链接等属性 18 6 3制作二级页面中间内容部分的样式 页面在定义完中间部分样式后 显示效果如图18 15所示 18 6 4制作二级页面右侧部分的结构 二级页面右侧部分的结构比较简单 包括一个标题 一个列表和一个图片 18 6 5制作二级页面右侧