网站规划与设计.ppt
网站规划与设计,欣赏优秀作品,一、欣赏优秀作品：1.观鸟http:/www.green-web.org/birds二、思考以下问题：1.这些网站是怎样围绕主题展现内容的？2.这些网站提供了哪些栏目及功能？3.网站的链接有哪些特色，是否便捷？4.网站主页的布局、色彩运用有哪些特点？,系统学习网站的规划、设计、制作、,管理、评价。,学习目的,网站规划与设计,基本概念,问题：什么是网站？网站就是因特网上具有相似性质、共同内容的一组信息资源。,基本概念,网页（Page）网页是用HTML语言写成的文件，它存放在某一台计算机中，而这台计算机必须是与因特网相连。主页（Home Page）主页是通常用来表示访问某个网站时出现的第一个页面，用来对整个网站进行概括性的介绍，描述其他各个页面的内容的。,一、开发网站的基本过程,网站的规划,网站规划是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。,一个网站的成功与否与建站前的网站规划有着极为重要的关系！在建立网站前应明确建设网站的目的，确定网站的功能以及网站规模、投入费用，进行必要的市场分析等。,网站主题的确定网站运行环境的确定网页制作工具的选择网站开发任务的管理,网站的规划,网站的规划,2.3确定网站主题与整体风格,1 确定网站主题,网站主题，就是指网站的题材。网络上的题材可以说是千奇百怪，琳琅满目。,美国个人电脑杂志评出的1999年度排名前100位的全美知名网站的十类题材：,第2章 网站规划设计,第1类：网上求职第2类：网上聊天/即时信息/ICQ第3类：网上社区/讨论/邮件列表第4类：计算机技术第5类：网页/网站开发第6类：娱乐网站第7类：旅行第8类：参考/资讯第9类：家庭/教育第10类：生活/时尚,第2章 网站规划设计,“用户在网上经常查询那方面的信息”专题调查结果：,新闻：74.0%计算机软硬件信息：55.6%休闲娱乐信息：46.5%生活服务信息：27.8%社会文化信息：20.4%电子书籍：37.4%科技、教育信息：31.8%金融证券、房地产信息：16.4%求职招聘信息：22.2%商贸信息：9.9%旅游、交通信息：11.4%各类广告信息：6.4%医疗信息：7.7%交友征婚信息：4.5%法律、法规、政策信息：13.7%其他：1.6%,第2章 网站规划设计,确定网站主题的三条原则：,网站定位要小，内容要精,制作一个包罗万象的网站，把所有你认为精彩的东西都放在里面，那仫往往会事与愿违，给人的感觉是没有主题，没有特色，样样都有却样样都很肤浅。网络上的“主题站”比“万全站”更受人们喜爱。,最好是自己擅长或者喜爱的内容,一个企业要建立网站，应该紧密结合自己的业务范围选择内容，而不要脱离业务主体去搞什么国内国际新闻、娱乐动态等。,第2章 网站规划设计,题材不要太滥，目标不要过高,“题材太滥”是指到处可见，人人都有的题材，比如网页设计、软件下载，免费信息等。“目标过高”是指在这一题材上已经有非常优秀而且知名度很高的网站了，除非你下决心且有实力竞争并超过它。,1、2、3,Style,第2章 网站规划设计,确定网站的整体风格,风格（style）是指艺术作品在整体上呈现出的具有代表性的独特面貌。网站设计虽然不是纯艺术，网页也并非单纯的艺术品，但是，它也要求表达美，要求设计要具有鲜明的个性和特色，是粗犷豪放的，还是清新秀丽的；是温文儒雅的，还是执著热情的；是活泼易变的，还是墨守成规的，给人以美感。,Style,第2章 网站规划设计,网站的风格是指某一网站的整体形象给浏览者的综合感受。这个“整体形象”包括网站的CI（Corporate Identity）、版面布局、浏览方式、交互性、文字内容等诸多因素。不管是色彩、技术、文字、布局，还是交互方式，只要能让浏览者明确分辨出这个网站，就形成了网站的风格。,要形成网站的独特风格！,Style,在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，即最能体现网站风格的东西并以它作为网站的特色加以重点强化、宣传，并在实践中不断修改完善，最终形成自己的风格。,第2章 网站规划设计,将网站标志（logo）尽可能的放在每个页面最突出 的位置,如何形成网站的独特风格？,？,第2章 网站规划设计,突出标准色彩,使用标准字体,使用统一的图片处理效果,Style,如何形成网站的独特风格？,？,二、网站的规划,网站环境包括网站服务器情况、文件磁盘存储空间、网站域名管理等方面。,2.网站运行环境的确定,二、网站的规划,网页制作工（Frontpage、Dreamweaver)、,3.网页制作工具的选择,网页制作工具,选择网页制作工具,为了使网页制作得更加精美，还需要一些辅助工具：图像处理工具：Photshop、Fireworks;动画处理工具：Flash;视频处理工具：VideoPack；,二、网站的规划,(1)任务分工(2)时间安排,4.网站开发任务的管理,网站的设计,随着技术的不断发展和用户对网站功能性的需求不断提高，如今网站的设计已经不能再仅仅简单地利用静态HTML文件来实现了，与最初由一两名网页设计师自由的创作相比，网站的设计和开发越来越像一个软件工程，也越来越复杂，网站的设计和开发已经进入了一个需要强调流程和分工的时代。,网站设计的目的：把信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。,网站设计的主要任务包括：网站结构设计，网站的版面设计，以浏览器为客户端的Web应用程序开发（例如新闻中心、网上商店、虚拟邮局、客户关系管理等），系统测试及网站发布等。,网站的设计,（一）网站结构的设计：设计网站的栏目。网站的栏目可以有多层，以能够恰当地体现网站主题为好。此外，每个栏目本身应有一个大致的内容描述，以表达该栏目的设计思路，充实整个网站的总体结构设计。,“虎门销烟启思录”网站的结构,“虎门销烟启思录”网站的结构,三、网站的设计,（二）网页的版面设计1.风格设计 包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。如：严肃庄重、清爽温馨、深沉厚重、生动活泼、古朴典雅。,简洁大方,风格独特，构图巧妙,生动活泼,色彩丰富,浓郁的文化气息,第2章 网站规划设计,“内容为王”（Content Is King）,成功网站的最大秘诀在于让用户感到网站对他们非常有用!,1、网站内容设计原则,第2章 网站规划设计,网站应该包括的十项内容,一个标准的网站应该包括以下十项内容：,站点结构图（SITE MAP）,站点结构图是一种有关站点结构、组织方式的示意图。站点的主要栏目或者关键内容列在其下的副标题中。当访问者单击标题、题目或副标题时，相关的网页就会出现在屏幕中。站点结构图还可以被看作是站点的分级结构图，以这种方式组织起来的信息可以使访问者迅速找到信息所在的位置。,站点结构图与导航栏的区别,第2章 网站规划设计,导航栏（NAVIGATION BAR）,每个网站都应该包括一组导航工具，它出现在此网站的每一个页面中，称为导航栏。导航栏中的按钮应该包括：主页、联系方式、反馈及其它一些用户感兴趣的内容。这些内容应该与站点结构中的主要题目相关联。,设计导航栏应该注意以下几点：,第2章 网站规划设计,图片比单纯的文字效果好，但它必须能够清楚地体现出它连接的内容。无任何连接的内容不要做成按钮的形式。使用常用颜色。应该使用标准、醒目的颜色，避免在连接处使用特殊的颜色。当前页面所对应的按钮应该相应的变成灰色、突出显示或以其它方式表示出来。每个页面都应包括代表“返回”或“前进”的按钮。,导航栏,第2章 网站规划设计,联系方式页面（CONTACT PAGE）,在此页面中创建可发送E-mail的连接，使E-mail地址可以自动地在“收信人”栏中。这样，访问者在录入相关内容后单击“发送”按钮即可完成发送操作。联系页面还应包括其他联系方式，如通信地址及联系人、传真、电话号码等。在导航栏中应能够很方便地找到这些信息。,CONTACT ME、联系我们 CONTACT US,第2章 网站规划设计,反馈表（FEEDBACK FORMS）,利用反馈表，用户可以随时提出信息需求，而不必记下电话号码。反馈表还为那些没有E-mail的用户提供了方便。有了反馈表，可以选择是以寄信件、发Email，还是打电话的方式与用户联系。每个反馈表都是一个不断提高服务质量以满足用户需求的机会。从反馈表中可以发现在你的网站中可以发现你在网站中哪些信息是重要的，哪些是无关紧要的。,还可以考虑假设信息栏。用户可以在此发表一些评论，提出问题。这不仅可以使用户与你保持联系，也可以让他们互相之间进行交流。,第2章 网站规划设计,引人入胜的内容（COMPELLING CONTENT）,在每页中都要包含相关的、引人入胜的内容，特别是当你要销售产品的时候，每个页面都要用详细的内容和图片精心修饰一番。因为你的目的是为了吸引用户，所以网站上所使用的语言也应该通俗易懂，对专业用语及技术术语要进行解释。将特别重要的内容用符号标签出来，但不要用的过多，以保持页面的简洁。,不要把网站建成单纯的网上介绍，应尽可能地利用多种媒体形式进行介绍。,第2章 网站规划设计,常见问题解答（FAQs）,创建FAQs可以避免重复回答相同的问题以节省管理者和访问者的时间和精力。可以将问题列于FAQs页面的上部，并将每个问题与回答链接在一起。另外，要确认在导航栏中包含有FAQs按钮。,常见问题、,第2章 网站规划设计,精美的图片（GOOD GRAPHICS）,图片不要用得过多，要选择合适的、无须太多内存及下载时间的图片。可以降低图片精度，对每页的文字和图象进行限制，或创建纯文本的版本。,搜索工具（SEARCHING MECHANISMS）,用户可以在搜索工具中键入关键词语或词组，在单击查询按钮后，与关键词相关的网页列表就会出现在屏幕上。注意要提供关于有效查询的说明。,第2章 网站规划设计,新闻页面（NEWS PAGE）,引导用户访问新信息有以下几种方法：,在最新更新的信息边加注一个漂亮的小图标“新！”。为最新消息创建单独页面，并在一段时间后将其移动到适当的目录中。在主页和每个页面下加注一行文字，表明本网站或每个单独的页面最近一次被更新的时间。,第2章 网站规划设计,相关网点链接（RELEVANT LINKS）,好的站点通常都可以链接到其他相关站点以提供更多信息。对每个链接都要做简要说明，并对它被链接原因进行阐述，这些信息可以帮助访问者选择最适合其需求的站点，删除那些“死”站点，以免访问者感到厌烦。,内容是网站吸引浏览者最重要的因素，内容少或信息不实用的网站无法吸引匆匆浏览者的访问。建议事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以便及时调整网站内容。,标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。,一般来说：屏幕中央最能引人注意，屏幕上方紧随其后，屏幕左右侧通常放置不太重要或固定信息，附加信息一般放在最下方。,2.版面布局设计,常见网页布局类型,第2章 网站规划设计,版面布局,“T”型布局,第2章 网站规划设计,版面布局,“口”字型布局,第2章 网站规划设计,版面布局,POP布局,第2章 网站规划设计,版面布局,对比性布局,第2章 网站规划设计,版面布局,第2章 网站规划设计,版面布局,第2章 网站规划设计,版面布局,第2章 网站规划设计,版面布局,（三）网页的交互设计,用户如何访问网站？怎样从一个位置到另一个位置？怎样防止用户在网站中”迷路”?链接点设计要考虑人们在浏览网站时通常有哪些需求？帮助浏览者快捷的跳转到所需的页面。,
