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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,,第六章 网站项目规划与实现,6.1,网站整体设计,设计的首要任务是实现的功能，即从内容上保证网站的吸引力；其次是创作漂亮的页面评价一个网站成功与否的因素，内容应该占,70%,，页面美观程度占,30%,，因为网站的根本功能是用来传播信息，没有内容的网站页面再漂亮也不会给人留下长久的印象由此可见内容设计是网站的灵魂，在此基础上制作漂亮的页面，网站才会显的有血有肉站点的性质不同，设计的任务也不同6.1,网站整体设计,从形式上，可以将站点分为以下三类：,第一类是资讯类站点，像网易、搜狐等门户网站这类站点将为访问者提供大量的信息，而且访问量较大因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象第三类则是形象类网站，比如一些中小型的公司或单位这类网站一般较小，有的则有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象这类网站对设计者的美工水平要求较高。

6.1,网站整体设计,6.1.1,网页的构成元素,1,网页布局类型,网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、,Flash,型、变化型：,1,、“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些栏目标题，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等这种结构是我们在网上见到的差不多最多的一种结构类型2,、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接3,、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类4,、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用这种类型结构非常清晰，一目了然。

5,、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架6,、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构7,、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉8,、,Flash,型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的,Flash,，与封面型不同的是，由于,Flash,强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体6.1,网站整体设计,6.1.1,网页的构成元素,2,网页色彩搭配,有了好的框架和页面设计，而色彩把握不准，则会导致整个设计失败色彩，是最先也是最持久地给浏览者以网站形象的因素色彩和谐是一个网站是否漂亮的重要判断标志色彩的搭配是一门很有讲究的学问，一般来说常常使用相近的颜色进行搭配，这样显得颜色比较和谐例如在红色里面加白，红色就会越来越亮，明度提高。

而加黑，红色就越来越暗，明度降低又如在蓝色里面加了黑、白、灰，或另一种颜色，就会使得蓝色不纯（色彩的纯度就是指彩色系中每个色彩的鲜艳程度），不再鲜艳同色彩系（同色相），明度不同或纯度不同的几种颜色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题同一页面尽量不要多出,4,种颜色6.1,网站整体设计,6.1.1,网页的构成元素,2,网页色彩搭配,色彩的心理感觉不同的颜色会给浏览者不同的心理感受红色,-,是一种激奋的色彩刺激效果，能使人产生冲动，愤怒，热情，活力的感觉绿色,-,介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉它和金黄，淡白搭配，可以产生优雅，舒适的气氛橙色,-,也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果黄色,-,具有快乐，希望，智慧和轻快的个性，它的明度最高蓝色,-,是最具凉爽，清新，专业的色彩它和白色混合，能体现柔顺，淡雅，浪漫的气氛,(,象天空的色彩,:),白色,-,具有洁白，明快，纯真，清洁的感受黑色,-,具有深沉，神秘，寂静，悲哀，压抑的感受灰色,-,具有中庸，平凡，温和，谦让，中立和高雅的感觉每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。

以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深网页内容，是信息存储空间，要求背景要亮，文字要暗，对比度要高一般是白黑字，如果是黑底，也可以是灰字，可以用很淡的颜色来做，淡到让人可以忽略网页标头，是,LOGO,和主要信息放置的地方一般要深色，具有较高对比度，以便用户能够非常方便地看到他在该站点的所在位置导航菜单所在区域可以把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开侧栏，尽管不是所有网页都使用侧栏，它仍不失为显示附加信息的一个有用方式它应与网页内容清楚地区分开，同时也要易于阅读页脚，这一项最不重要，不应该喧宾夺主可以考虑和侧栏相同的颜色，或稍微压一下深一些的颜色6.1,网站整体设计,6.1.2,实现的方法,设计的实现可以分为两个部分第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成第二部分为网页的制作，这一过程是在计算机上完成的设计首页的第一步是设计版面布局我们可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。

除了要有一台配置不错的计算机外，软件也是必需的不能简单地说一个软件的好坏，只要是设计者使用起来觉得方便而且能得心应手的，就可以称为好软件当然，它应该能满足设计者的要求常用的软件是,Macromedia,的,Dreamweaver,、,Fireworks,、,Flash,以及,Adobe,的,Photoshop,、,Imageready,，这些都是很不错的软件6.1,网站整体设计,6.1.3,网站建设规划,本章将介绍一个新闻网站的设计和制作过程首先要做的是网站内容规划，即确定这个网站要向浏览者提供什么样的信息，这些信息应该以什么样的组织形式展现出来通过这样的分析就可以制定出网站的主要栏目以这个新闻网站为例，该网站要向用户提供各式各样的新闻，而把大量的新闻简单的罗列出来又不能满足特定用户的需求，因此根据用户的要求将新闻分类假设经过认真的调研后发现用户主要关心的是国内新闻、国际新闻、财经新闻和体育新闻，这样这个新闻网站的主要栏目也就确定了同时为了突出重点新闻，应该将各个栏目中较重要的新闻综合起来，形成一个热点新闻栏目此外根据新闻网站信息量大、过期新闻查阅不便的特点要向用户提供查询功能以及为了能更好的为用户服务和了解用户对网站的满意程度，还应设置用户服务栏目、网站调查和友情链接。

通过以上分析该网站的整体框架就勾勒出来了其次是进行网页的布局设计，首当其冲的是网站首页的设计通过内容规划确定了网站由五个主要栏目（热点新闻，国内新闻，国际新闻，财经新闻，体育新闻）、四个辅助栏目（新闻搜索，用户服务，网站调查，友情链接）构成，因此网站首页栏目多、信息量大，比较适合采用“国”字型布局结构据此可以画出首页的草图，即在网页的上部是,LOGO,图片和站点宣传动画在下部的左侧有,4,个栏目（辅助栏目）；在下部的右侧有,5,个栏目（主要内容）；在最下面是站点相关信息最后是制作过程，先是利用,Fireworks MX,准备一些素材图片，然后利用,Flash MX,制作一个网页宣传动画，最后利用,Dreamweaver,MX,完成网页的制作6.2,网页素材设计,6.2.1,制作,LOGO,图片,6.2.2,制作辅助栏目图片,6.2.3,制作主要栏目图片,6.2.4,制作导航图片,6.2.5,制作,Flash,宣传动画,,6.3,利用,Dreamweaver,集成网页,6.3.1,创建站点,6.3.2,网站首页制作,6.3.3,利用,Dreamweaver,MX,发布发布网页,,。