2023年第六 网站项目规划与实现网页设计（教学课件）.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发布发布网页