综合设计

 

1.  形成小型商业网站的创建思路。

2.  掌握创建小型商业网站的客户端界面的方法。

3.  网站创建综合能力的养成。

 

 

通过前面的学习,我们掌握了静态网页制作的一般方法。网站就是若干网页文件和相关资源构成的,如何合理地设置网站的功能,规划网页的结构,组织网站的资源以及后期维护等各方面的工作是进行网站综合设计的基础。

网站制作的基本流程通常是:了解客户的需求→网站设计→制作网站→测试网站→发布网站→维护网站。

 



※任务分析

本项目以“茗香绿长”香茗专卖链锁公司的小型企业网站为例,完成相应任务。

本任务要求完成“茗香绿长”网站制作前的策划工作,策划内容包括网站的主题、名称、内容、栏目、布局和色彩等。

※相关知识

一.网站制作的基本流程

1.了解客户的需求

制作网站前必须先与客户进行沟通,了解客户对网站的要求,和客户协商网站基本功能需求和基本设计要求,根据网站的主要功能规划网站的结构,调查网站的浏览群体。

2.网站设计

网站的制作都是从设计开始的,网站的设计包括:主题和名称的确定,内容的组织,栏目的划分,Logo设计,界面布局设计,色彩的搭配,选择制作网页的软件工具,站点文件夹的结构设计。若规划为动态网站,还需要进行数据库设计等。

3.制作网站

根据前期的设计思路,使用各类辅助软件来制作网站,例如:PhotoshopFlashDreamweaver等。

4.测试网站

一个网站制作完成后,首先要进行测试以保证该网站能顺利运行。测试主要包括功能测试和可用性测试。功能测试包括链接测试、表单测试等;可用性测试包括导航测试、图形测试、内容测试、整体界面测试等。由于本书涉及的只是静态网页,因此不涉及表单测试的内容。

5.发布网站

网站制作完成并测试合格后,需要上传到互联网上的某台服务器,同时还要提供一个域名供访问者访问时使用。

6.维护网站

根据客户的需求,后期对网站的内容进行及时更新。

二.网站的设计

1.网站内容的设计

网站内容的设计包括网站主题的选定、内容的组织和栏目的设计等。网站的主题要明确,组织内容要合理,栏目划分要清晰。制作网站的最终目的是发布信息,因此作为信息载体的网页,最重要的是做到便于阅读。只有科学地分类和合理地组织内容,网站要表现的内容才能被方便地查找和阅读。

2.网站色彩的设计

网站的色彩选用不当,会使人产生视觉疲劳,影响网站的访问量,所以合理地选用网站色彩是设计者必须考虑的问题。一个网站不能只用单一的色彩,那会让人感觉单调乏味,但也不能将所有的色彩都用到网站中,这样会显得太过花俏。网站的色彩应尽量控制在四种以内。一个网站必须有一种或两种主色调,给人总体的色彩感觉;也可以使用一种色彩,然后通过调整透明度或饱和度,将色彩变淡或加深,这样使页面看起来色彩和谐统一、有层次感。背景和前文的对比要强烈,尽量不要用图案复杂的图像做背景。网站各个页面的色调应该保持一致,主色调之外的其他色彩可以用来点缀和衬托,但是不能给人喧宾夺主的感觉。

网页配色可以参考以下几种方案:

暖色系网站:多用红色、橙色、黄色等色彩的搭配。这种色调的使用可使页面呈现出温暖、热情的氛围。

冷色系网站:多用青色、绿色、蓝色等色彩的搭配。这种色调的使用可使页面呈现出宁静、清新、高雅的氛围。

对比色系网站:将色差对比强烈的色彩搭配在网页里,如红与绿、黄与紫、橙与蓝等。这种色彩的搭配可以产生对比性强的视觉效果,但是如果用得不好,则会显得俗气、刺眼。

不同的颜色搭配会给浏览者不同的心理感受。

3.网页的布局设计

合理恰当的网页布局,会使网站的访问者耳目一新,同样也可以使访问者比较容易在网站中找到所需要的信息。一般来讲,普通的页面通常包含的内容有:Logo(网站标志)Banner(横幅广告,用于显示网站名称或广告信息)、导航栏(方便用户在网站内的各个栏目之间跳转)、内容区和版权信息区等。这几项内容可以按照不同的布局方式组织到页面中,网页常用的布局有如下几种:

T”型布局:主要特点是页面顶部为横幅广告区(网站标志+广告条),下方左侧为导航菜单,右侧显示网页主体内容的布局。它是网页设计中比较常见的一种布局,优点是页面结构清晰、主次分明。如果网站的栏目偏少,可以考虑采用此布局方式。“T”型布局网页如图10-1所示。

10-1  T”型布局

“口”型布局:主要特点是页面上侧有—个广告条,下侧是版权区,左侧和右侧都有相关信息,如导航菜单、友情链接等,页面的中间是主体内容,形成一个“El”字型。这种布局的优点是页面利用得比较充分,展示的信息较多。“口”型布局网页如图10-2所示。

10-2  “口”型布局

“三”型布局:主要特点是页面上横向几条色块或区间,将页面整体分割为水平方向的几部分。“三”型布局网页效果如图10-3所示。

10-3  “三”型布局

对称对比布局:采取左右或者上下对称的结构,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。对称对比布局网页效果如图10-4所示。

10-4  对称对比布局

“宣传单”布局:也称POP布局。主要特点是整个页面像一张宣传海报,通常以一张精美图像作为页面的设计中心,常用于时尚型站点,页面整体清新且吸引人。“宣传单”布局网页效果如图10-5所示。

4.网站的结构设计

网站目录的结构对于网站的上传和维护有着重要的作用,不要将所有的文件都不分类别地存在站点根目录下,应该将文件进行分类。例如,存放图像的文件夹命名为“images”,存放除了主页之外网页的文件夹命名为“pages”,存放CSS样式的文件夹命名为“style”,存放Fish的文件夹命名为“nash”,主页命名为“indexhtnl”,分门别类地存放在站点根目录下,目录的层次不要过多,建议不要超过三层。站点中切忌使用中文目录,文件的名字尽量使用字母。

10-5  “宣传单”布局

三.提高网站的打开速度

在设计网页时最基本的要求是美观且精简,保证用户访问网页时有较高的访问速度。针对页面的打开速度,有一个“8秒钟法则”:当某个页面在8秒钟内还没有打开时,用户就会感到厌倦继而放弃对该页面的访问。所以在制作网站时,在保证页面基本质量的情况下,要尽量减小网页的体积。网页的体积为一个网页中的所有文件大小的总和,包括HTML文件和所有嵌入对象(图像、声音、动画等)的体积。减小网页体积可以通过以下几个方法来实现:

(1)网页布局尽量采用DIV+CSS方式。

(2)通过外部文件的形式使用CSS文件和JavaScript脚本文件。

(3)减小网页中各种多媒体文件的体积,如网页中的图像、动画等,通过图形图像处理软件和动画软件进行优化,尽量将它们的大小控制在50KB以内。

※任务实施

一.了解用户需求

该网站的客户是“茗香绿长”香茗专卖链锁公司,现需要在网络平台上来展示本公司的商品,希望通过网站能让更多的人了解公司和公司的茶叶、茶具制品,扩大公司的知名度,推销公司商品,宣传茶文化。网站的浏览群体为普通消费者。

二.网站设计

根据客户所提供的素材和要求,将“茗香绿长”作为网站的名称。将网站的栏目进行划分,栏目的主要结构如10-6所示。

10-6  网站栏目的主要结构

结合栏目主要结构示意图、各栏目的功能规划,详细地安排各功能模块的具体功能。当然所有栏目的内容均需要使用到动态网页技术,涉及后台数据库的设计与连接,本书对此不做说明,只介绍客户端界面的设计。

分析客户所提供的作品特点后,我们要对网站的色彩进行选定。根据茶叶的特点,使用绿色为主色调。背景色使用白色或浅淡的绿色。这样既保持一网页色彩的一致性,也能衬托页面翠绿清新的意境。在整个网站中还可以使用几种配色,用来对网页进行点缀和装饰。

由于该网站为小型网站,栏目数量有限,主页和子页面在布局上主要采用“T”型布局,布局结构如图10-7所示。具体网页如图10-810-9所示。

10-7  网站布局结构

网页布局时不能只局限于某一种模型,对于内容较多的页面可能会是多种模型的组合使用。本网站的具体网页可参照如图10-8和图10-9所示的布局样式。这些网页在前面的技能巩固练习中均已经制作完成。

 

10-8  网站主页布局结构                      10-9  网站子页布局结构

网站中还有一些其他布局方式的网页,如“博客”网页采用了“口”型布局等。在实际制作中应根据具体内容和功能的需要灵活选用布局方式。

 

 



※任务分析

根据任务1中网站各栏目录的分析结果,规划“茗香绿长”香茗专卖链锁公司网站的文件目录结构,收集网页素材

※相关知识

一.站点目录规划

站点目录就是存放当前网站中所有网页文件和相关文件的文件夹(目录)。例如:我们在前面的学习为“每味美味”网站创建的mwmw子目录以及为“茗香绿长”网站建立的练习文件夹exercise

目录的结构是初学者容易忽视的问题,在前面的学习中我们没有明确提出规划站点目录的重要性。但目录结构的好坏,对站点内网页文件及相关文件的维护、编辑、扩充、移植等有着至关重要的影响。要注意以下几点。

1.站点根目录中的文件存放要合理

Web服务器是以站点根目录为基础进行目录检索的。站点根目录就是站点目录,如前面介绍的mwmwexercise文件夹。将所有文件都放在站点根目录下容易造成文件管理混乱,不便于今后的编辑、修改。

另外,文件组织混乱也影响网页及相关文件的上传速度。Web服务器一般都会为根目录建立一个文件索引。将所有文件都放在站点根目录下,就会增大文件量,造成索引时间的延长。所以,站点根目录中存放的的文件数不宜太多,一般存放网站的首页等经常使用的网页文件。

2.根据划分的栏目来建立相应的文件夹

子目录一般是按网页功能分类和资源类别来建立的。例如,网页中要实现“博客”功能,就应该为此项功能建立一个子目录。在mwmw站点中,我们建立了bolg目录来组织博客网页文件。网页中的图片资源,我们使用images目录来组织。CSS目录则用来组织CSS样式表文件……等等。

为了便于今后的维护,这些子目录的命名要易读易懂,可取对应的英文单词或汉语拼音缩写。但不要直接使用汉字,因为不是所有服务器和浏览器都能支持中文网址的。为了便于表述,目录名不宜太长。如图10-10所示就是mwmw站点的目录结构。

    3.在每个栏目文件夹下建立独立的资源文件夹

通常一个站点根目录下都有一个images目录,有以组织图片资源。初学者可能会将所有图片都存放在这个目录里。随着网站的不断丰富,这样做就会很不方便。当我们需要对某个栏目的网页文件进行编辑修改时,那些图片资源却不在这个栏目的目录中,图片管理相当麻烦。

通常,我们可以在每个栏目的目录中再建立一个独立的images目录,方便图片资源管理。而根目录下的images目录只是用来放首页和一些次要栏目的图片。

当然,其他资源关文件夹(如CSSSWF等目录)的建立与images类似。

4.目录的层次不要太深

普通网站的各级目录层次一般不要超过3层。这样便于管理维护。超链接表述也会更方便些。

二.素材的收集、制作和整理

通过前面的内容学习,我们知道网站中经常使用的素材有:文字、图片、动画、声音、视频等。这些素材需要我们在制作网站之前去收集和制作的。收集素材主要是从网站客户处获取。

文字是网页的主要表现内容,要能体现网站及各栏目的主题,充分表达用户创建网站的用意。制作过程中可以围绕网站主题对文字进行增、删、改等处理。

图片是网页中最重要的元素之一,使用图片可以使网页更加形象生动,绚丽的视觉冲击,使得网页更具吸引力。收集方式主要有:通过网络搜索,使用数码相机拍摄,扫描纸质图片,使用PhotoShopFireworks等专业软件制作。网页中常用的图片文件格式主要有:GIFJPGPNG三种。

动画元素进一步丰富了网页的页面效果,增强表现力。网页中常用的动画文件主要有:SWFGIF两种格式。

声音元素为网页增添了听觉功能,让言语、音乐等日常元素进入到网页,丰富了网页的信息传播方式。网页中常用的声音文件主要有:MP3WMVRM等。

视频元素实现了在网页中看电影(视频)的功能,进一步强化了网页的信息传播能力。网页中常用的视频主要有:RMVBMPG4MOVFLV等。

所有这些素材都要分门别类的存放在各自的文件夹中,以便网页调用和今后的编辑修改。比如我们在MWMW网站目录中就建立有swf目录用以存放Flash动画文件。

※任务实施

1.在Dreamveaver CS3中打开站点文件夹exercise

2.在右侧的“文件”面板中浏览当前站点文件夹。站点中大多数文件夹都已在之前的练习中创建了。参照图10-11所示,整理文件夹:缺少的添加,多余的删除,名称有异的更名。

3.文件夹的作用如下:

activities:存放公司举办活动的公告。

blog:存放网友博客网页。

conn:为今后制作动态网页预留,用以存放数据库链接文件。

css:用以存放CSS外部样式表文件。

data:为今后制作动态网页预留,用以存放数据库。

images:用以存放站点根目录中各网页所使用的图片文件。

js:用以存放JavaScript脚本文件。

LibraryDreamweaver CS3自动创建的目录,用以存放库文件。

manage:为今后制作动态网页预留,用以存放后台管理系统。

music:网页如果要使用声音(音乐)文件,则将其存放在这里。

swf:用以存放扩展名为SWFFlash动画文件。

Tea:存放“知名茶品”板块的内容。

TemplatesDreamweaver CS3自动创建的目录,用以存放模板文件。

4.网站中文件的创建、删除、更名、移动等操作应在Dreamweaver CS3环境中进行。离开此环境所进行的文件操作将会引起网页资源引用的错误,给网站维护造成不必要的麻烦。

具体的组织方式,可参照教材素材文件夹中的练习文件夹exercise

5.不局恨于教材所提供的素材,根据各人对此网站的理解,可增添素材,制作一些有各自特点的素材,拓宽表现手法。

 

 



※任务分析

规划“茗香绿长”香茗专卖链锁公司网站的网页导航,和表单交互网页。

网页导航在前面的练习中已经基本完成了,本任务是对之前制作的模板文件、元件库、博客网页、后台管理网页进行导航和交互功能的检查和完善。

“茗香绿长”网站的导航主要有网页主菜单和辅助导航菜单方式,如图10-12所示。另外在显示板块网页时,还采用“面包屑导航”方式,如图10-13所示。

10-12  网站的主要导航方式

10-13  “面包屑导航”方式

为了美化导航界面,还可使用DreamweaverSpry菜单栏制作美观的下拉菜单、按钮菜单。在项目8的任务2中我们已经学习过这种菜单的制作方法,可应用在“茗香绿长”网站中,以丰富网页的导航方式。

表单在网页中主要用于实现数据的输入、输出交互。表单对象中的文本框、图片、按钮等控件用以接受用户的输入,并将输入内容提交给服务器处理。标签控件用以显示输出。在静态网页制作中,我们主要考虑表单控件的布局样式,一般通过CSS来进行样式控制。“在线预订”网页中使用多种表单控件可以方便用户进行数据输入。如图10-14所示就是mark.html网页中的表单交互界面。

10-14  表单控件的使用

※任务实施

一.建立导航栏超链接

1.打开站exercise中的ex_dwt.dwt模板文件。设置主菜单导航如表10-1所示。

10-1  导航主菜单的超链接设置

栏目

超链接目标

栏目

超链接目标

网站首页

home.html

在线预订

mark.html

公司介绍

company.html

加盟连锁

case.html

最新动态

news.html

招聘信息

job.html

知名茶品

product.html

联系我们

contact.html

茶叶知识

knowledge.html

 

 

10-2  辅助导航的超链接设置

栏目

超链接目标

栏目

超链接目标

关于我们

company.html

信息反馈

feedback.html

联系方式

contact.html

投诉建议

suggestion.html

茶道交流

blog/blog.html

友情链接

link.html

保存模板文件后,相应的网页文件中导航设置也会随模板文件的改变而自动改变。

2.将home.html文件中的主菜单导航和辅助导航也设置成与表10-1和表10-2所示。

3home.html文件的左侧有“知名茶叶”的分类目录导航,这是一个辅助导航栏,用于介绍我国各类知名茶叶品种。独立成为一个模块,其相关网页和资源文件存放在站点文件夹中的tea子文件夹中。图10-15所示就是“绿茶”子页的结构。

10-15  “绿茶”子网页

茶品导航的相关链接如表10-3所示。

10-3  茶品导航的超链接设置

栏目

超链接目标

栏目

超链接目标

绿茶

lucha.html

花茶

huacha.html

红茶

hongcha.html

立体茶包

ltcb.html

乌龙茶

wlcha.html

保健茶

bjcha.html

普洱茶

puercha.html

茶食品

csp.html

茉莉花茶

mlhcha.html

 

 

二.在网页中使用表单

“茗香绿长”网站中的“在线预订”(如图10-14所示)和“信息反馈”网页中均需使用表单来收集客户信息。图10-16所示就是“信息反馈”页的表单布局部分。

◆图10-16  “信息反馈”页的表单布局

 



※任务分析

“茗香绿长”网站首页是home.html,通过首页的导航可以方便地进入各专题板块和子页。在各专题板块中,我们可以根据自己对茶叶知识的认识以及收集相关素材制作相应的子页。子页的文件名可以自行设定,但一定要与板块中的导航相一致,避免链接错误的发生。

通过浏览站点可以检验导航是否正确,以及相应的子页是否已经完成。

任务1中的图10-6已经清楚地列出了当前站点的结构,本任务根据此结构整理当前站点的网页文件,通过浏览网页来发现问题,并修改完善。对缺失的网页文件进行补充添加。

※任务实施

1.在Windows环境中,打开站点首页home.html

2.测试首页中各链接是否正常,如果有不能正常打开的网页,应分析是超链接书写错,还是缺失网页文件。

3.如果是超链接书写错则通过Dreamweaver修改超链接。如果是网页缺失,则使用Dreamweaver来补充完善。

4.所有应用过网页模板的网页,只需测试其中一个就可以了,如compnay.html

5.“茶道交流”只是对当前网页的一个简单扩展,只要能正常链接就算成功。练习时,本板块的更多内容可根据自己的兴趣进行扩充。

6.“知名茶品”板块中子页较多,要对各种类型的茶叶制作相关网页。

7manager文件夹中保存着网站的后台管理系统。在案例中只是一个模拟网页,采用的是框架结构。

8.全面测试各网页正确无误后,在通过Dreamweaver将所有使用到网页模板和为的网页文件“从模板中分离”以及“从源文件中分离”。

9.发布网页。

 

 


 


一、填空题

1.常用的网页布局有________________________________________________

2.对于一般有页面来说,通常包含有以下几部分:_______________________________________

3.网页中常用的图片格式有:___________________

二、选择题

1.下列是网页设计和制作的几个关键过程:①策划制作方案;②制作与测试网页;③发布网页;④收集与整理素材。合理的操作顺序是(    )。

A)①②③④          B)④①③②         C)②④③①         D)①④②③

2网页配色方案有以下(    )种

A)暖色系            B)冷色系           C)对比色系         D)混合色系

三、简答题

1.简述网站建设的基本流程。

2.简述提高网页打开速度的方法。