网页制作教程—项目7.pptVIP

1.项目描述及分析 2.项目资讯 1、背景 认识DIV+CSS WEB标准：网页一般由结构（Structure）、表现（Presentation）和行为（Behavior）3部分组成。 DIV+CSS:DIV+CSS是一种全新的网页布局方法，它有别于传统的表格布局，真正达到了W3C要求的内容与表现相分离。 3.项目制作 任务1.网站首页布局 3.项目制作 任务2.制作幼儿园网站首页--编写页面基本CSS代码 3.项目制作 任务2.制作幼儿园网站首页—CSS样式表 页面的基本信息 3.项目制作 任务2.制作幼儿园网站首页—CSS样式表 其他容器CSS样式 3.项目制作 任务2.制作幼儿园网站首页—CSS样式表 其他容器CSS样式 3.项目制作 任务2.制作幼儿园网站首页—CSS样式表 其他容器CSS样式 3.项目制作 任务2.制作幼儿园网站首页—CSS样式表 其他容器CSS样式 3.项目制作 任务2.制作幼儿园网站首页—CSS样式表 其他容器CSS样式 3.项目制作 任务2.制作幼儿园网站首页—页眉 3.项目制作 任务2.制作幼儿园网站首页—页眉 3.项目制作 任务2.制作幼儿园网站首页—页眉 3.项目制作 任务2.制作幼儿园网站首页—制作导航菜单 3.项目制作 任务2.制作幼儿园网站首页—制作主体部分 3.项目制作 任务3.制作幼儿园网站首页—制作主体部分 3.项目制作 任务3. 制作幼儿园网站子页 5.项目拓展 采用CSS布局具有以下一些优点： 可以缩减页面代码，提高页面浏览速度，缩减带宽成本。 结构清晰，容易被搜索引擎搜索到。 具有强大的字体控制能力和排版能力。 CSS像HTML代码一样简单、易编写。 提高了易用性，使用CSS可以结构化HTML，如p标记只用来控制段落、head标记只用来控制标题、table标记只用来表现数据等。 实现了页面表现和页面内容相分离，将设计部分分离出来放在一个独立的样式文件中。 表格布局的灵活性不大，只能用table、tr、td的格式，而采用DIV布局可以有多种格式。 在表格布局中，垃圾代码较多，一些修饰的样式及布局的代码混合在一起，很不直观，而DIV更能体现样式和结构相分离，结构的重构性强。 几乎可以在所有的浏览器上使用。 可以轻松实现一些以前只能通过图片转换实现的功能。 可以轻松地控制页面布局。 可以同时更新多个页面。当所有网页使用同一个CSS文件控制时，只要修改该CSS文件，即可改变所有页面。 实 训 利用DIV+CSS技术构建如下图所示的网页布局。将不同的DIV设置为不同的背景颜色，以观察布局效果。 * 项目7 制作教育类网站 制作童乐幼儿园网站 一、项目描述及分析 二、项目资讯 三、项目制作 四、项目检查与评估 五、项目拓展 目 录 主要任务：用DIV+CSS技术设计网站的首页及“幼儿园简介”子页 少儿类网站通常在形式上会比较活泼生动，在色彩上比较鲜亮、明妍，在版面编排上比较轻松有趣，给人一种朝气蓬勃的感觉。 网站主要用于宣传童乐幼儿园的硬件环境和教育理念，展示其师资实力和办学特色，发布一些与教学相关的信息及公告，同时为家长提供一个与幼儿园互动交流的平台。 根据网站的定位，可初步确定该网站包含“幼儿园简介”、“特色教育”、“快乐宝贝”和“教师风采”4个栏目，每个栏目下又可分别设置一些子栏目。例如，“幼儿园简介”栏目下可设置“童乐简介”、“领导简介”、“办学理念”等子栏目；“特色教育”栏目下可设置“感觉统合”、“蒙氏教育”、“阅读训练”等子栏目；“快乐宝贝”栏目下可设置“精彩活动”、“宝贝作品”等子栏目；“教师风采”栏目下可以设置“幼教名师”、“幼教心得”等子栏目。 2.项目资讯 Body{} #Container{} #Nav{} #Header{} #Content{} #Sidebar{} #Footer{} head title河南童乐幼儿园/title link rel=stylesheet href=css/style.css type=text/css / /head body div id=container div id=wrap div id=nav /div div id=header /div div id=content /div div id=sidebar /div div id=footer /div /div /div /body /html 网页文件：index.htm CSS样式表文件：css.css body { background: url(../images/bg_repeat.jpg) repeat 0