06第六章 网站项目规划与实现-网页设计(精品).ppt

《06第六章 网站项目规划与实现-网页设计(精品).ppt》由会员分享，可在线阅读，更多相关《06第六章 网站项目规划与实现-网页设计(精品).ppt（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第六章 网站项目规划与实现 6.1 网站整体设计网站整体设计设计的首要任务是实现的功能，即从内容上保证设计的首要任务是实现的功能，即从内容上保证网站的吸引力；其次是创作漂亮的页面。评价一网站的吸引力；其次是创作漂亮的页面。评价一个网站成功与否的因素，内容应该占个网站成功与否的因素，内容应该占70%70%，页面，页面美观程度占美观程度占30%30%，因为网站的根本功能是用来传，因为网站的根本功能是用来传播信息，没有内容的网站页面再漂亮也不会给人播信息，没有内容的网站页面再漂亮也不会给人留下长久的印象。由此可见内容设计是网站的灵留下长久的印象。由此可见内容设计是网站的灵魂，在此基础上制作漂亮的页面

2、，网站才会显的魂，在此基础上制作漂亮的页面，网站才会显的有血有肉。站点的性质不同，设计的任务也不同。有血有肉。站点的性质不同，设计的任务也不同。6.1 网站整体设计网站整体设计从形式上，可以将站点分为以下三类：从形式上，可以将站点分为以下三类：第一类是资讯类站点，像网易、搜狐等门户网站。这类站第一类是资讯类站点，像网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。等问题。第二类是资讯和形象相结合的网站，像一些较

3、大的公司、第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。讯类网站的上述要求，同时又要突出企业、单位的形象。第三类则是形象类网站，比如一些中小型的公司或单位。第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较这类网站一般较小，有的则有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。对设计者的美

4、工水平要求较高。6.1 网站整体设计网站整体设计6.1.16.1.1网页的构成元素网页的构成元素1 1网页布局类型网页布局类型 网页布局大致可分为网页布局大致可分为“国国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、FlashFlash型、变化型：型、变化型：1 1、“国国”字型：也可以称为字型：也可以称为“同同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些栏目标题，中间是

5、主要部分，与左右一起罗列到底，最下告条，接下来就是网站的主要内容，左右分列一些栏目标题，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。型。2 2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一

6、种很常见的类左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。型是最上面是标题及广告，左侧是导航链接。3 3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。就是这种类。4 4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或

7、标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。型结构非常清晰，一目了然。5 5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。6 6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型拐角型”结构的，结构的，只是采用了框架结构。只是采用了框架结构

8、。7 7、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个上几个简单的链接或者仅是一个“进入进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。8 8、FlashFlash型：其实这与封面型结构是类似的，只是这种类型

9、采用了目前非常游戏行的型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的FlashFlash，与封面型不同的，与封面型不同的是，由于是，由于FlashFlash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。的多媒体。6.1 网站整体设计网站整体设计6.1.16.1.1网页的构成元素网页的构成元素2 2网页色彩搭配网页色彩搭配有了好的框架和页面设计，而色彩把握不准，则会导致整个设计有了好的框架和页面设计，而色彩把握不准，则会导致整个设计失败。色彩，是最先

10、也是最持久地给浏览者以网站形象的因素。失败。色彩，是最先也是最持久地给浏览者以网站形象的因素。色彩和谐是一个网站是否漂亮的重要判断标志。色彩和谐是一个网站是否漂亮的重要判断标志。色彩的搭配是一门很有讲究的学问，一般来说常常使用相近的颜色彩的搭配是一门很有讲究的学问，一般来说常常使用相近的颜色进行搭配，这样显得颜色比较和谐。例如在红色里面加白，红色进行搭配，这样显得颜色比较和谐。例如在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗，明度降色就会越来越亮，明度提高。而加黑，红色就越来越暗，明度降低。又如在蓝色里面加了黑、白、灰，或另一种颜色，就会使得低。又如在蓝色里面加了黑、白、

11、灰，或另一种颜色，就会使得蓝色不纯（色彩的纯度就是指彩色系中每个色彩的鲜艳程度），蓝色不纯（色彩的纯度就是指彩色系中每个色彩的鲜艳程度），不再鲜艳。同色彩系（同色相），明度不同或纯度不同的几种颜不再鲜艳。同色彩系（同色相），明度不同或纯度不同的几种颜色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题。同一页面尽量不要多出有太大问题。同一页面尽量不要多出4 4种颜色。种颜色。6.1 网站整体设计网站整体设计6.1.16.1.1网页的构成元素网页的构成元素色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。色彩的心理感觉。不同

12、的颜色会给浏览者不同的心理感受。红色红色-是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。绿色绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以它和金黄，淡白搭配，可以产生优雅，舒适的气氛。产生优雅，舒适的气氛。橙色橙色-也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。黄色黄色-具有快乐，希望，智慧和轻快的个性，它的明度最高。具有快乐，希望，

13、智慧和轻快的个性，它的明度最高。蓝色蓝色-是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色象天空的色彩彩:):)白色白色-具有洁白，明快，纯真，清洁的感受。具有洁白，明快，纯真，清洁的感受。黑色黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。具有深沉，神秘，寂静，悲哀，压抑的感受。灰色灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。具有中庸，平凡，温和，谦让，中立和高雅的感觉。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉每种色彩在饱和度，透

14、明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。意境，而蓝绿色则显得幽宁，阴深。网页内容，是信息存储空间，要求背景要亮，文字要暗，对比度要高。一般是白黑字，如果是黑底，也网页内容，是信息存储空间，要求背景要亮，文字要暗，对比度要高。一般是白黑字，如果是黑底，也可以是灰字，可以用很淡的颜色来做，淡到让人可以忽略。网页标头，是可以是灰字，可以用很淡的颜色来做，淡到让人可以忽略。网页标头，是LOGOLOGO和主要信息放置的地方。和主要信息放置的地方。一般要深色，具有较高对比度，以便用户能够非常方便地看到他在该站点的所在位置。导航菜单所在区一般要深

15、色，具有较高对比度，以便用户能够非常方便地看到他在该站点的所在位置。导航菜单所在区域可以把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将域可以把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。侧栏，尽管不是所有网页都使用侧栏，它仍不失为显示附加网页内容和菜单的不同目的准确地区分开。侧栏，尽管不是所有网页都使用侧栏，它仍不失为显示附加信息的一个有用方式。它应与网页内容清楚地区分开，同时也要易于阅读。页脚，这一项最不重要，不信息的一个有用方式。它应与网页内容清楚地区分开，同时也要易于阅读。页

16、脚，这一项最不重要，不应该喧宾夺主。可以考虑和侧栏相同的颜色，或稍微压一下深一些的颜色。应该喧宾夺主。可以考虑和侧栏相同的颜色，或稍微压一下深一些的颜色。6.1 网站整体设计网站整体设计6.1.26.1.2实现的方法实现的方法设计的实现可以分为两个部分。第一部分为站点的规划及设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成。第二部分为网页草图的绘制，这一部分可以在纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。的制作，这一过程是在计算机上完成的。设计首页的第一步是设计版面布局。我们可以将网页看作设计首页的第一步是设计版面布局。我们可以将网页看作传

17、统的报刊杂志来编辑，这里面有文字、图像乃至动画，传统的报刊杂志来编辑，这里面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。页面的不同位置。除了要有一台配置不错的计算机外，软件也是必需的。不除了要有一台配置不错的计算机外，软件也是必需的。不能简单地说一个软件的好坏，只要是设计者使用起来觉得能简单地说一个软件的好坏，只要是设计者使用起来觉得方便而且能得心应手的，就可以称为好软件。当然，它应方便而且能得心应手的，就可以称为好软件。当然，它应该能满足设计者的要求。常用的软件是该能满足设计者的要求。常用的软件是M

18、acromediaMacromedia的的DreamweaverDreamweaver、FireworksFireworks、FlashFlash以及以及AdobeAdobe的的PhotoshopPhotoshop、ImagereadyImageready，这些都是很不错的软件。，这些都是很不错的软件。6.1 网站整体设计网站整体设计6.1.36.1.3网站建设规划网站建设规划本章将介绍一个新闻网站的设计和制作过程。本章将介绍一个新闻网站的设计和制作过程。首先要做的是网站内容规划，即确定这个网站要向浏览者提供什么样的信息，这些信首先要做的是网站内容规划，即确定这个网站要向浏览者提供什么样的信息

19、，这些信息应该以什么样的组织形式展现出来。通过这样的分析就可以制定出网站的主要栏目。息应该以什么样的组织形式展现出来。通过这样的分析就可以制定出网站的主要栏目。以这个新闻网站为例，该网站要向用户提供各式各样的新闻，而把大量的新闻简单的以这个新闻网站为例，该网站要向用户提供各式各样的新闻，而把大量的新闻简单的罗列出来又不能满足特定用户的需求，因此根据用户的要求将新闻分类。假设经过认罗列出来又不能满足特定用户的需求，因此根据用户的要求将新闻分类。假设经过认真的调研后发现用户主要关心的是国内新闻、国际新闻、财经新闻和体育新闻，这样真的调研后发现用户主要关心的是国内新闻、国际新闻、财经新闻和体育新闻，

20、这样这个新闻网站的主要栏目也就确定了。同时为了突出重点新闻，应该将各个栏目中较这个新闻网站的主要栏目也就确定了。同时为了突出重点新闻，应该将各个栏目中较重要的新闻综合起来，形成一个热点新闻栏目。此外根据新闻网站信息量大、过期新重要的新闻综合起来，形成一个热点新闻栏目。此外根据新闻网站信息量大、过期新闻查阅不便的特点要向用户提供查询功能。以及为了能更好的为用户服务和了解用户闻查阅不便的特点要向用户提供查询功能。以及为了能更好的为用户服务和了解用户对网站的满意程度，还应设置用户服务栏目、网站调查和友情链接。通过以上分析该对网站的满意程度，还应设置用户服务栏目、网站调查和友情链接。通过以上分析该网站

21、的整体框架就勾勒出来了。网站的整体框架就勾勒出来了。其次是进行网页的布局设计，首当其冲的是网站首页的设计。通过内容规划确定了网其次是进行网页的布局设计，首当其冲的是网站首页的设计。通过内容规划确定了网站由五个主要栏目（热点新闻，国内新闻，国际新闻，财经新闻，体育新闻）、四个站由五个主要栏目（热点新闻，国内新闻，国际新闻，财经新闻，体育新闻）、四个辅助栏目（新闻搜索，用户服务，网站调查，友情链接）构成，因此网站首页栏目多、辅助栏目（新闻搜索，用户服务，网站调查，友情链接）构成，因此网站首页栏目多、信息量大，比较适合采用信息量大，比较适合采用“国国”字型布局结构。据此可以画出首页的草图，即在网页字

22、型布局结构。据此可以画出首页的草图，即在网页的上部是的上部是LOGOLOGO图片和站点宣传动画。在下部的左侧有图片和站点宣传动画。在下部的左侧有4 4个栏目（辅助栏目）；在下部个栏目（辅助栏目）；在下部的右侧有的右侧有5 5个栏目（主要内容）；在最下面是站点相关信息。个栏目（主要内容）；在最下面是站点相关信息。最后是制作过程，先是利用最后是制作过程，先是利用Fireworks MXFireworks MX准备一些素材图片，然后利用准备一些素材图片，然后利用Flash MXFlash MX制作制作一个网页宣传动画，最后利用一个网页宣传动画，最后利用DreamweaverDreamweaver M

23、X MX完成网页的制作。完成网页的制作。6.2 网页素材设计网页素材设计6.2.1 6.2.1 制作制作LOGOLOGO图片图片6.2.2 6.2.2 制作辅助栏目图片制作辅助栏目图片6.2.3 6.2.3 制作主要栏目图片制作主要栏目图片6.2.4 6.2.4 制作导航图片制作导航图片6.2.5 6.2.5 制作制作FlashFlash宣传动画宣传动画6.3 利用利用Dreamweaver 集成网页集成网页6.3.16.3.1创建站点创建站点6.3.26.3.2网站首页制作网站首页制作6.3.36.3.3利用利用DreamweaverDreamweaver MX MX发布发布网页发布发布网页