content

对这两个层进行CSS样式设置，代码如下:

#logo {height:70px;width: 300px ; background: #ccffee;float:left;}#menu {height:70px;width: 550px; background: #d3F8BC; float:right; }

此处添加背景色是为了看得更清晰，最终效果要将背景色去掉。继续细化头部区域,将Logo图像加入Logo层中，代码如下:

接下来制作导航部分。导航区域使用了标准的横向导航栏，采用通用的列表方式实现。在menu层中添加列表，即可插入导航栏。但此时预览的话，列表项目为竖向排列，且列表项目前面有实心圆点项目符号，看不到横向效果，如图所示。

这时需要在CSS中加入如下代码:

menu ul {list-style: none;margin:Opx;}#menu ul li{float: left; }

4. Banner的制作

该网站的Banner栏使用了一张制作好的背景图像，在主体结构中使用了一个Div进行控制，先处理好图像大小，要求其与Div层的高度和宽度匹配。其CSS样式代如下:

#banner {background:ur1(images/header-bg.gif) bottom left no-repeat;height: 150px; }

5．制作首页的中间内容区域

首页中间内容区域的布局是将中间主体内容分为左、右两个部分。其中左侧栏为主要区域，又分为上下区域，上部区域为班级欢迎内容，下部区域又分为了宽度相等的左右两个板块，分别为班级活动和班级新闻。右侧栏作为侧边栏分为上下两部分，上部分为动态滚动的班级公告栏，下部分为班级课程表。总体中间部分布局的划分要使用嵌套Div的形式。

6.制作首页的中间内容区域为了显示效果，为每一区域添加了background属性,设置不同的背景色，并设置Div层的高度和宽度，后期制作时应去掉背景色，宽度和高度可根据需要灵活进行调整，布局效果如图所示。

在这些基础上，继续细化中间内容区域。操作步骤如下。添加首页欢迎区域。班级欢迎区域主要由文字组成，在这个区域的设计中，重点应关注文字的排版，如标题栏的字体、颜色、字号的处理,内容栏的字体、字号、行间距等的处理。标题可采用一些字体类型的变形，以突出效果。

添加班级活动区域。班级活动区域主要由板块标题和班级图片组成，班级图片的展示方式有很多方法可以实现。例如，可以使用嵌套在这个Div层的表格实现，或者在该Div层中继续嵌套Div层实现。这部分的CSS样式的设置主要是图像位置及大小的设置，代码如下:

#activity img {padding-right: 10px; padding-bottom: 10px; width: 90px ; height: 50px; }

添加班级新闻区域。班级新闻区域是定期公布班级重要事件的地方。通常如果新闻是纯粹的文字信息，则一般较多采用列表的方式实现。但从效果图来看，该区域为配合整体页面的美观布局，采用了标题、图片、文字等内容混合排版的方式，因此在实现上需要采用更加灵活的方式。

添加右侧栏的班级公告栏和课程表区域。右侧栏分为上下两个部分，上部分为动态滚动的班级公告栏，下部分为班级课程表。滚动的班级公告主要显示日常通知信息，从整体布局的美观性来看左侧栏主要使用了白色背景，根据板块与板块之间的留白区域进行板块的分割,这样可以达到简单、干净的效果。

添加公告栏区域样式并为公告栏中的标题文字和段落文字添加CSS样式添加CSS样式后公告栏区域的显示效果如图13-19所示，在“设计”视图中可看到文字溢出了公告栏区域，但因为文字部分是滚动的，所以在预览时不会溢出。

课程表区域采用标准的表格标签实现。需要注意的是，表格中的文字应居中显示，表格背景色应和页面的整体色彩协调。在本例中，调整表格背景色与公告栏背景色一致,对表格外边框进行加粗设置，并将表格边框颜色设置为灰色，以分割区域板块。

底部区域包含底部导航栏和版权信息两部分内容。底部导航栏能够方便浏览者浏览到页面底部时可以快速进行二级页面的切换，其实现步骤和顶部导航栏相似，这里不再详细介绍，读者可自行进行设计。

本章小结：

本章通过一个班级网站的实例化制作过程，让读者了解到了从网站规划、设计到制作的详细工作流程，希望读者能按照本章提供的操作步骤、素材及源代码来完成该班级网站的制作。

案例四：356英国上市官网学院本科教学评建网建设

项目目标：

1．知识目标：运用所学的网页设计与制作知识解决实际问题。

2．能力目标：通过教师、同学及网络的帮助，感受实际工作中网站设计的一般工作流程，学会表达解决问题的过程和方法，培养学生综合运用知识分析、处理实际问题的能力；锻炼学生发现问题的能力，提高学生组织能力、交往与合作能力、学习技能

。

3．教育目标：培养学生的情感、态度、价值观：培养学生实际操作能力，以及与同伴合作交流意识和能力，加强团队合作。

项目重点：

1．使学生了解实施一个项目的全流程。

2．综合运用知识解决实际问题。

3．熟练所学的网页设计与制作知识解决实际项目。

项目难点：

1．学生综合运用知识来解决实际问题的能力。

2．分工合作完成整个项目。

3. 网页界面创新能力。

教学方法：

项目教学法

教学过程：

一、项目要求：

为迎接国家教育部本科教学工作水平评估，要体现“以评促建，以评促改，以评促管，评建结合，重在建设”的方针，实现评估倒计时，包括“组织机构”、“评估文件”、“评建动态”、“迎评简报”、“评建知识”、“他山之石”等模块，网站中应包含“学院主页”与“教务在线”链接，网站风格要简介、清爽。

确定任务：建设356英国上市官网本科教学评建网项目。

二、项目分析（导入课程）

1. 我们的学校有这种需求吗?有哪些学校有类似的需求？

教师根据回答进行总结，展示类似项目较广。

2. 引出今天的课程，展示一张由教师最终设计的效果图为例子。将Photoshop、Dreamweaver软件与具体的网站设计工作结合起来，设计一张实际工作中的网站效果图，让学生从亲身的感受中说、做、学，优化教学过程，改进学习方式，并倡导学生主动参与学习和同学交流合作，用不同的方式来学习知识。通过自己的讨论交流进行探索和实现问题的解决，形成一定的知识解决模型，最终解决实际生活问题。

示范项目：以一张网站效果图为例，细致演示项目的整个流程。

（整个演示过程制作成多媒体课件(视频录像)放在局域网上，可供学生在实战项目时，遇到问题可随时下载再观看。）

3.项目分析

得到问题解决的思路与方法。

分析：

根据客户提供的需求，利用Word（visio）、Photoshop、Dreamweaver等软件制作项目策划或草图设计、效果图、网站前台方案。整个设计过程分为以下四个子项目：

1.项目需求的整理。

2.项目策划（详细）或草图设计（粗略）。

3.效果图设计。

4.后期制作与前后台代码整合。

三、教学策略分析

1．学习者分析

学生学习该项目之前已经掌握了Photoshop、Dreamweaver的基本命令，能够熟练使用这些网页设计与制作软件。

2.教学理念和教学方式

教学是师生之间、学生之间交往互动与共同发展的过程。计算机教学，要紧密联系学生的生活实际。采用项目教学法学习，教师可以利用网络的优势，成为知识传播者、问题情境的创设者、尝试点拨的引导者、知识反馈的调整者。学生是学习的主人，在教师的帮助下，小组合作交流中，利用动手操作探索，发现新知识，自主学习。

教学评价方式多样化，包括师生评价、学生评价、小组评价等多种方式。在课堂上利用明确无误的工作表结果对学生的学习和练习作出评价，让每个学生都能体验到成功的乐趣。采用项目教学法，让学生把分散知识的各知识点综合起来，应用于实际的行业工作中。

四、教学准备

50台计算机联网，有电子教室软件或投影机。

五、时间安排（总课时：30课时）

任务1项目需求的整理。（4课时）

任务2 项目策划（详细）或草图设计（粗略）（4课时）

任务3 效果图设计。（14课时）

任务4 后期制作与代码的整合。（4课时）

项目内部验收（4课时）

六、项目实施

1.实训项目：356英国上市官网本科教学评建网建设

（老师提供相关图片文件与资源，可供学生下载）

2.学生分组实战

将学生分成10到12个组，每组三、四名同学，每个组模拟一家设计公司。

角色扮演：

小组：网站设计公司

小组成员：设计人员

小组组长：项目经理

教师：客户

组名	项目经理	成员	公司名称
1组	（由教师指派）		公司名称由各小组在项目经理的组织下自己命名
2组
…	…	…	…
12组

3.客户交流：由教师扮演客户，每组在实施项目之前，派出各组的项目经理和客户交流，听取客户的意见，并适当提出自己的各种想法。

4.各小组分组设计：首先由各组的项目经理向小组成员讲述客户需求，组员开始分子项目进行设计，一个子项目应当按期完成，然后项目经理在组内分阶段评选最佳的设计，交客户（教师）审阅，由客户（教师）提出修改意见，再实施下一个子项目。

5.存盘交付作品：每组选出一个优秀设计作品，存盘保存后交客户（教师）竞标评选。

七、项目验收（内部验收）

各组项目经理向全班汇报、展示、交流本组设计的最终作品，在介绍过程中要求说明各组平面布置图的设计思路以及制作过程中遇到过什么问题，这些问题是如何解决的，同时，其他组的同学也可提出问题，让设计者解释设计所用的相关技术及特点。

最后各组之间进行互评，互相学习，通过相互评价进一步修改各自的设计，评选出客户最满意的作品，教师点评。

自评/互评表如下：

优秀作品展示

优秀作品展示，让学生看到在小组内评选出的“网页设计师”的作品，给学生以美的欣赏和智慧的碰撞，这样的活动很好地激发了学生的学习积极性，促使学生从多方面思考问题，培养创新精神。