第二单元：项目一教育类网站的设计与制作

1、第二单元：项目一教育类网站的设计与制作前期准备（网站策划过程） 一、客户需求分析 二、网站风格定位 1、色彩 2、排版 3、特效 三、网站建设方案1、页面风格创意设计（色彩、排版、特效） 四、网站设计方案报价明细2、网站栏目划分3、网站栏目内容介绍4、网站建设拓扑图第二单元色彩色彩色彩色彩色彩的使用在网页制作中起着非常关键的作用，网页的色彩是树立网站色彩的使用在网页制作中起着非常关键的作用，网页的色彩是树立网站形象的关键之一，有很多网站以其成功的色彩搭配令人过目不忘。色形象的关键之一，有很多网站以其成功的色彩搭配令人过目不忘。色彩总的应用原则应该是彩总的应用原则应该是“总体协调，局部对比总体协

2、调，局部对比”，即主页的整体色彩效，即主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。比。网页制作用彩色还是非彩色好呢？根据专业的研究机构表明：彩色的记网页制作用彩色还是非彩色好呢？根据专业的研究机构表明：彩色的记忆效果是黑白的忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面比完全黑白倍。也就是说，在一般情况下，彩色页面比完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色（黑色），页面更加吸引人。我们通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体

3、不单调，看主要内容也不会眼边框、背景、图片用彩色，这样页面整体不单调，看主要内容也不会眼花花色彩色彩色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；而暖色色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；而暖色（如红色）给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生（如红色）给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。意想不到的效果。 暖色：如图（暖色：如图（a）中的黄色、橙色、红色、紫色等都属于暖色彩列。暖）中的黄色、橙色、红色、紫色等都属于暖色彩列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于色跟黑色调和可以达到很好的效果。暖色一般应用于

4、购物类网站、电子商购物类网站、电子商务网站、儿童类网站等，用以体现商品的琳琅满目，儿童类网站的活泼、务网站、儿童类网站等，用以体现商品的琳琅满目，儿童类网站的活泼、温馨等效果。温馨等效果。 冷色：如图（冷色：如图（b）中的绿色、蓝色、蓝紫色等都属于冷色彩列。冷色一）中的绿色、蓝色、蓝紫色等都属于冷色彩列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技、游高科技、游戏类网站，主要表达严肃、稳重等效果。戏类网站，主要表达严肃、稳重等效果。色彩色彩 相近色：色环中相邻的三种颜色。如图（相近色：色环中相邻的三种颜色。如图（c）中

5、的黄）中的黄绿色、黄色和橘黄色。相近色的搭配给人的视觉效果很绿色、黄色和橘黄色。相近色的搭配给人的视觉效果很舒适，很自然，所以相近色在网站设计中极为常用。舒适，很自然，所以相近色在网站设计中极为常用。 互补色：色环中相对的两种色彩。如图（互补色：色环中相对的两种色彩。如图（d）中的亮）中的亮绿色和紫色，另外如红色和绿色，蓝色和橙色等。互补绿色和紫色，另外如红色和绿色，蓝色和橙色等。互补色调整一下补色的亮度，有时候是一种很好的搭配。补色调整一下补色的亮度，有时候是一种很好的搭配。补色在网站设计中用得也极为普遍。色在网站设计中用得也极为普遍。色彩色彩网页色彩的搭配网页色彩的搭配网页设计中，色彩永远

6、是最重要的一部分。当人们距离显网页设计中，色彩永远是最重要的一部分。当人们距离显示屏较远的时候，看到的不是优美的版式或者是美丽的图示屏较远的时候，看到的不是优美的版式或者是美丽的图片，而是网页的色彩。片，而是网页的色彩。 使用单色使用单色：先选定一种色彩，然后调整透明度或者饱和度，先选定一种色彩，然后调整透明度或者饱和度，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 使用相近色：使用相近色：就是在色带上相邻近的颜色，例如绿色和蓝色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以

7、使网页避免色红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。彩杂乱，易于达到页面的和谐统一。 使用互补色：使用互补色：对比色可以突出重点，产生强烈的视觉效果，通对比色可以突出重点，产生强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。 背景色的使用：背景色的使用：背景色一般采用素淡清雅的色彩，避免采用花纹背景色一般采用素淡清雅的色彩，避免采用花纹复杂的

8、图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。对比强烈一些。色彩色彩 色彩的数量：色彩的数量：网站用色并不是越多越好，对于初学者来说，网页网站用色并不是越多越好，对于初学者来说，网页用色最好控制在三种色彩以内，通过调整色彩的各种属性用色最好控制在三种色彩以内，通过调整色彩的各种属性(三个属性）来三个属性）来产生变化。产生变化。确定网站的色调确定网站的色调色彩色彩 主色调：主色调：页面色彩的主要色调、总趋势，其他配色不能超过页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积（背景白色不一定根据视觉

9、面积决定，该主要色调的视觉面积（背景白色不一定根据视觉面积决定，可以根据页面的感觉需要）。可以根据页面的感觉需要）。 辅色调：辅色调：仅次于主色调的视觉面积的辅助色，是烘托主色调、仅次于主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。支持主色调、起到融合主色调效果的辅助色调。 点睛色：点睛色：在小范围内点上强烈的颜色来突出主题效果，使页在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。面更加鲜明生动。 背景色：背景色：衬托环抱整体的色调，协调、支配整体的作用。衬托环抱整体的色调，协调、支配整体的作用。色彩色彩返回返回色彩色彩案例欣赏案例欣赏排版排版(

10、网页版式规划）网页版式规划）网页设计中版式规划是最重要也是最关键的一个步骤网页设计中版式规划是最重要也是最关键的一个步骤，网站的版式规划要根据不同的行业、不同的主题规，网站的版式规划要根据不同的行业、不同的主题规划最适合的网页版式。同时还要考虑到以后用划最适合的网页版式。同时还要考虑到以后用dreamweaver布局时的方便性。布局时的方便性。排版排版常用到的版面布局形式有：常用到的版面布局形式有： (1)(1)骨骼型（分栏式结构）骨骼型（分栏式结构）（2 2）“国国”字型布局结构：字型布局结构：页面的顶部和底部各有一个横向的分页面的顶部和底部各有一个横向的分栏，中间是竖向分栏，其栏目数为三个

11、以上，通过上下分栏和两侧的竖栏，中间是竖向分栏，其栏目数为三个以上，通过上下分栏和两侧的竖分栏形成一个封闭的矩形框，也可以通过一个矩形的边框来形成。这种分栏形成一个封闭的矩形框，也可以通过一个矩形的边框来形成。这种结构有一种聚合的力量，使中间的内容更加突出。结构有一种聚合的力量，使中间的内容更加突出。排版排版n横栏式划分横栏式划分排版排版n竖栏式划分竖栏式划分排版排版n国国字字形形结结构构排版排版（3 3） “ “同同”字型布局结构：字型布局结构：与国字型结构类似，不同的只是与国字型结构类似，不同的只是页面的底部没有横分栏，同样也可采用边框来形成。这种结构由于没页面的底部没有横分栏，同样也可采

12、用边框来形成。这种结构由于没有完全封闭，版面的开放性比国字型结构要好一些。整个版面除上部有完全封闭，版面的开放性比国字型结构要好一些。整个版面除上部的横分栏外，以竖向分栏为主体，兼有平安、稳定和严肃、蓬勃向上的横分栏外，以竖向分栏为主体，兼有平安、稳定和严肃、蓬勃向上的感觉。的感觉。（4 4）自由式结构：）自由式结构：看上去没有明显的矩形分割痕迹，给予设计看上去没有明显的矩形分割痕迹，给予设计者一个自由、开放的设计空间，设计者的创意能够得到充分的发挥和者一个自由、开放的设计空间，设计者的创意能够得到充分的发挥和表现，能够设计出更高艺术水平的页面。大多用于网站的导入页，或表现，能够设计出更高艺术

13、水平的页面。大多用于网站的导入页，或者首页。者首页。但自由版式的页面布局要复杂一些，需要利用表格中大小不等的矩形但自由版式的页面布局要复杂一些，需要利用表格中大小不等的矩形单元格来进行无缝拼贴，才能形成一个完整的自由图形。单元格来进行无缝拼贴，才能形成一个完整的自由图形。排版排版n同同字字形形结结构构排版排版n自由版式自由版式排版排版排版排版排版排版版块（频道）划分版块（频道）划分把网站的内容按照一定的逻辑关系分类，形成网站的把网站的内容按照一定的逻辑关系分类，形成网站的内容版块。可按照内容的属性、内容的媒体形式、等内容版块。可按照内容的属性、内容的媒体形式、等进行分类，分类的依据和逻辑关系要

14、让浏览者一目了进行分类，分类的依据和逻辑关系要让浏览者一目了然，这样浏览者根据版块结构就知道网站整体内容结然，这样浏览者根据版块结构就知道网站整体内容结构，明白了是否有他需要的信息以及应该在哪个版块构，明白了是否有他需要的信息以及应该在哪个版块去浏览他需要的信息。去浏览他需要的信息。网站栏目划分版块划分应该注意的问题：版块划分应该注意的问题： （1）版块的数目不宜太多）版块的数目不宜太多 网站的版块并非越多、分得越细就越好，只要分类明确，应该尽可能网站的版块并非越多、分得越细就越好，只要分类明确，应该尽可能少一些。一方面分得过细显得结构不紧凑，另一方面通常版块信息要少一些。一方面分得过细显得结

15、构不紧凑，另一方面通常版块信息要带到它的下级的各个栏目中，要占掉非常宝贵的屏幕空间。带到它的下级的各个栏目中，要占掉非常宝贵的屏幕空间。 （2）给版块起一个好的名称）给版块起一个好的名称 版块的名称是该版块内容的综合体现，一要看它是否能体现出版块内版块的名称是该版块内容的综合体现，一要看它是否能体现出版块内容；二是准确没有歧义；三是字数要少，要简练，并且各版块名称的容；二是准确没有歧义；三是字数要少，要简练，并且各版块名称的字数最好一致；四要通俗易懂。字数最好一致；四要通俗易懂。 （3）版块要独立）版块要独立 版块间没有包容关系；版块间没有交叉关系版块间没有包容关系；版块间没有交叉关系（例如：

16、娱乐和观看电影（例如：娱乐和观看电影包容关系包容关系 美女和影星美女和影星交叉关系）交叉关系）网站栏目划分栏目确定栏目确定网站内容在版块之下再分栏目，如果内容很多，还可以在一级栏目之网站内容在版块之下再分栏目，如果内容很多，还可以在一级栏目之下再分二级栏目，就像书的章下面分节，节下面再分点一样。栏目的下再分二级栏目，就像书的章下面分节，节下面再分点一样。栏目的级数不宜太多，一般不超过三级。栏目级数越多，网站的结构就越深级数不宜太多，一般不超过三级。栏目级数越多，网站的结构就越深，浏览者要通过多次点击才能看到，这是浏览者不愿意的。，浏览者要通过多次点击才能看到，这是浏览者不愿意的。栏目是版栏目是

17、版块内容和功能的具体体现，除信息内容栏目外，还有一些功能栏目，块内容和功能的具体体现，除信息内容栏目外，还有一些功能栏目，如如“在线留言、下载专区等在线留言、下载专区等“一般的个人站点内容少，只有主栏目一般的个人站点内容少，只有主栏目(主菜单主菜单)就够了，不需要设置版就够了，不需要设置版块。如果你觉得的确有必要设置版块的，应该注意块。如果你觉得的确有必要设置版块的，应该注意1.各版块要有相对各版块要有相对独立性。独立性。2.各版块要有相互关联。各版块要有相互关联。3.版块的内容要围绕站点主题。关版块的内容要围绕站点主题。关于版块方面，主要是门户站点等较大网站需要考虑的问题于版块方面，主要是门

18、户站点等较大网站需要考虑的问题网站栏目划分一般的网站栏目安排要注意以下几方面一般的网站栏目安排要注意以下几方面: :(1).(1).一定记住要紧扣你的主题一定记住要紧扣你的主题! !一般的做法是:将你的主题按一定的方法分类并将它们作为网站的主栏目。例如制作一个发布动画的网站，可以将栏目分为动物动画，标志动画，三维动画，卡通动画等，在首页上标明最近更新的动画。记住:主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。 (2).(2).设一个最近更新或网站指南栏目设一个最近更新或网站指南栏目如果你的首页没有安排版面放置最近更新内容信息，就有必要设立一个“最近更新

19、”的栏目。这样做是为了照顾常来的访客，让你的主页更有人性化。如果你的主页内容庞大(超过15MB)，层次较多，而又没有站内的搜索引擎，建议您设置“本站指南”栏目。可以帮助初访者快速找到他们想要的内容。网站栏目划分(3).(3).设定一个可以双向交流的栏目设定一个可以双向交流的栏目不需要很多，但一定要有。比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。有调查表明，提供双向交流的站点比简单的留一个Email me的站点更具有亲和力。(4).(4).设一个下载或常见问题回答栏目设一个下载或常见问题回答栏目网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料，你肯定希望能一次性下

20、载，而不是一页一页浏览存盘。“将心比心”在你自己的主页上设置一个资料下载栏目，会得到大家的喜欢。有些站点为了广告显示量，一篇文章还要分几页显示，我觉得迟早会因访问量下降而淘汰(个人意见:)。另外，如果您的站点经常收到网友关于某方面的问题来信，你最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间用以学习。网站栏目划分至于其他的辅助内容，如关于本站，版权信息等可以不放在主栏目里，以免冲淡主题。总结以上几点，我们得出划分栏目需要注意的是:n尽可能删除与主题无关的栏目尽可能删除与主题无关的栏目n尽可能将网站最有价值的内容列在栏目上尽可能将网站最有价值的内容列在栏目上n尽可能方便访问者

21、的浏览和查询尽可能方便访问者的浏览和查询网站栏目划分网站栏目划分n搜狐网站的频道与位置n页面底栏信息内容网站栏目划分n网页中不同的信息栏目网站栏目划分网站栏目划分n第一级栏目网站栏目划分n第二级栏目网站栏目划分第三级栏目栏目的级数不宜太多，一般不要超过3级。网站栏目划分点击第二个版块点击第二个版块“吃喝吃喝”网站栏目划分网站栏目划分网站栏目划分网站栏目划分网站栏目划分网站栏目划分n首页首页网站栏目划分n企业情报版块企业情报版块网站栏目划分n企业情报版块企业情报版块关于麦当劳关于麦当劳n返回n一般来说，确定网站的链接结构有两种基本方式：一般来说，确定网站的链接结构有两种基本方式：1) 1) 树状

22、链接结构（一对一）。树状链接结构（一对一）。类似类似DOSDOS的目录结构，的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会确知道自己在什么位置，不会“迷迷”路。缺点是浏览效路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。如必须绕经首页。如:

23、: 校园动态校园动态- -教师活动教师活动- -教师节教师节首页首页 教学园地教学园地- -教师成果教师成果- -学生作品学生作品链接链接案列案列链接链接链接链接2) 星状链接结构（一对多）星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置、看了多少内容。如: 校园动态校园动态-教师活动教师活动-学生活动学生活动 首页首页 教学园地教学园地-教师成果教师成果-学生作品学生作品 这两种基本结构都只是理想方式，在实际的网站设计中，一般要将这两种结构混合起来使用。

24、链接链接 要使网站的链接结构清晰明了，一般做法是：首页和一级页面之间用星状链接结要使网站的链接结构清晰明了，一般做法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。如：一个新闻站点的页面结构如下：构，一级和二级页面之间用树状链接结构。如：一个新闻站点的页面结构如下： 一级页面一级页面 二级页面二级页面 财经新闻页财经新闻页 - 财经新闻财经新闻1，财经新闻，财经新闻2. / | 首页首页 - 娱乐新闻页娱乐新闻页 - 娱乐新闻娱乐新闻1，娱乐新闻，娱乐新闻2. | IT新闻页新闻页 - IT新闻新闻1，IT新闻新闻2. 其中，首页、财经新闻页、娱乐新闻页、其中，首页、财

25、经新闻页、娱乐新闻页、IT新闻页之间是星状链接，可以互相点新闻页之间是星状链接，可以互相点击，直接到达。而财经新闻页和它的子页面之间是树状连接，浏览财经新闻击，直接到达。而财经新闻页和它的子页面之间是树状连接，浏览财经新闻1后后，我们必须回到财经新闻页，才能浏览，我们必须回到财经新闻页，才能浏览IT新闻新闻2.所以所以,如果为了免去返回一级页面如果为了免去返回一级页面的麻烦，可将二级页面直接用新开窗口的麻烦，可将二级页面直接用新开窗口(POP up windows)打开，浏览结束后关闭打开，浏览结束后关闭即可。即可。链接链接n如果站点内容庞大、分类明细，需要超过三级页面，那么一定要在页面里显示

26、导航条，帮助浏览如果站点内容庞大、分类明细，需要超过三级页面，那么一定要在页面里显示导航条，帮助浏览者明确自己所处的位置。者明确自己所处的位置。n返回链接链接 网页网页: :又称又称WebWeb页面页面，是网络文件的组成部分，是可以被，是网络文件的组成部分，是可以被浏览器访问的单个浏览器访问的单个HTMLHTML超文本文件超文本文件. . 它由文字、表格、图片、声音、视频以及各种功能按它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、图片、按钮往往又是指向别的主页的钮等组成，这些文字、图片、按钮往往又是指向别的主页的连接点。在连接点。在InternetInternet网上，这些

27、连接点又叫超级链接。网上，这些连接点又叫超级链接。 网站网站: :在设计时，将某个主题明确后，再按所需的单元、在设计时，将某个主题明确后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求内容经过安排，化为各个不同的网页，在同一个结构及诉求下出现的集合体，就是网站（下出现的集合体，就是网站（Web SiteWeb Site）。）。 有主题性的网站是要经过规划和构架过的网站。在互联有主题性的网站是要经过规划和构架过的网站。在互联网上，网上，WebWeb站点由一组相互关联的页面组成，如果把整个站点由一组相互关联的页面组成，如果把整个WWWWWW信息世界看作一个村子，那么一个信息世界看作一个村子，那么一个WebWeb站点可以理解成一个站点可以理解成一个家庭。所有由首页链接出去的网页集合起来就是网站家庭。所有由首页链接出去的网页集合起来就是网站. . 进入页（引导页）进入页（引导页）: : 进入页是访问者登录网站时看到的第一个页面，其主要进入页是访问者登录网站时看到的第一个页面，其主要作用是表明浏览网站所需要的浏览环境或者网站不同时期、作用是表明浏览网站所需要的浏览环