网站规划与设计.ppt

网站规划与设计 欣赏优秀作品 一、欣赏优秀作品： v1. 观鸟/birds 二、思考以下问题： 1.这些网站是怎样围绕主题展现内容的？ 2.这些网站提供了哪些栏目及功能？ 3.网站的链接有哪些特色，是否便捷？ 4.网站主页的布局、色彩运用有哪些特点？ 系统学习网站的规划、设计、制作、 管理、评价。 网站规划与设计 基本概念基本概念 v问题：什么是网站？ v网站就是因特网上具有相似性质、共同内容 的一组信息资源。 基本概念基本概念 v网页（page） 网页是用html语言写成的文件，它存放 在某一台计算机中，而这台计算机必须是与 因特网相连。 v主页（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.网页制作工具的选择 网页制作工具网页制作工具 工具名称frontpagedreamweaver 简介 微软office组件之一，著名 的“所见即所得”的网页编 辑软件，是很好的入门级网 页编辑工具 macromedia公司针 对专业网页设计师 特别发展的视觉化 网页开发工具 优点 功能强大，操作简单易学、 灵活方便，站点管理功能强 大 对平台和浏览器的 兼容性好，对动态 效果的支持性好 缺点 兼容性不好；生成的垃圾代 码多；对动态效果支持不好 站点管理功能弱， 对中文支持不好 选择网页制作工具选择网页制作工具 v为了使网页制作得更加精美，还需要一些 辅助工具： 图像处理工具：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.版面布局设计 常见网页布局类型 布局类型布局方式实例 “国”字型 上面是网站的标题 及横幅广告，接下来是网站 的主要内容，左右分别列一些小条，中间是主 要内容，下面是一些网站的信息 人民网 拐角型 上面是标题 广告，接下来在左侧是导航栏，右 侧是正文，下面是网站的信息。 http:/www.i /zuop in2007/mansu 标题 正文型上面是标题 ，下面是正文。 左右框型 左边是导航栏，右边是正文。有时最上方会有 一个小标题 。 上下框型上面是导航栏，下面是正文。 http:/design. /show / 综合框架型左右、上下两种框架结构的结合。 封面型（flash型）精美的平面或动画作为首页。 http:/