网站规划设计基础.ppt

《网站规划设计基础.ppt》由会员分享，可在线阅读，更多相关《网站规划设计基础.ppt（58页珍藏版）》请在课桌文档上搜索。

1、网站规划与网页设计,2.1 网站设计流程2.2 确定网站的类型2.3 定位网站的主题和名称2.4 确定网站CI形象2.5 确定网站的栏目和版块2.6 确定网站的整体风格2.7 确定网站的目录结构和链接结构2.8 网站内容的确定2.9 网页的设计2.10 浏览器版本和分辨率,第2章 网站规划设计基础,网站设计的主要任务包括：网站架构设计，以浏览器为客户端的Web应用程序开发（如新闻中心、网上商店、虚拟邮局、客户关系管理等），系统测试及网站发布等。设计过程大体上分为以下13个阶段：1 编写网站设计的计划书；2 确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网

2、页的外观与使用方面的特点；3 确定网站提供的内容；4 网站交互设计，如信息反馈、意见调查等；5 对网站的内容进行分类；6 设计网页必有的内容，如公司标志、联系方法和导航条等；7 讨论并确定方案；8 制作网页的模板；9 制作网页并在不同平台的浏览器上测试网页；10 检查网页的链接；11 让部分顾客或员工试用网站，并提出反馈意见；12 根据需要修改不合适的地方；13 正式发布网站。,2.1 网站设计流程,1门户网站（Portal Site）集合了众多内容，提供多样服务，并使其尽可能地成为网络用户的首选。中文门户网站有三类：第一类:新浪、搜狐、网易由国内网络公司经营的网站，网站内容除了搜索引擎外，还

3、包括新闻、娱乐、游戏、文化、体育、健康、科技、财经、教育等若干版块，以及网上短信、个人主页空间、免费邮箱等服务项目；第二类：境外投资的网站，如中文雅虎、美国在线等，网站内容以新闻和娱乐为主，少数提供免费信箱、在线聊天等服务项目；第三类是国内传统媒体办的网站，以人民网、新华网、央视国际为代表，以提供新闻和时事评论为主。,2.2 确定网站的类型,2普及型网站 企事业单位和个人根据自身要求建立和发布的以介绍其基本情况、通信地址、产品和服务信息、供求信息、人员招聘及合作信息等为主旨的网站属于普及型网站。以向客户、供应商、公众和其他一切对该网站感兴趣的人宣传、推介自身，并树立网上形象为目的，网站内容一般

4、比较全面。访问该网站，可以了解这些单位的业务范围、最新动态、产品及价格，并可以通过网站提供的用户咨询服务与相关部门进行在线信息交流。包括企业网站、大学网站、政府网站及数量众多的个人网站。,2.2 确定网站的类型,3电子商务类网站分为B2B（商家对商家）和B2C（商家对个人客户）两种 按照交易过程可分为商品检索、商品采购、订单支付三个阶段。电子商务网站应该具有如下功能：商品发布功能；商品选购功能；具有个性化的采购订单模板，顾客进行购物组合比较；“购物车”内置的价格计算模型可以根据商家的价格体系灵活定制；在线交易功能；商品交接、资金结算功能。,2.2 确定网站的类型,4媒体信息服务类网站 媒体信息

5、服务类网站是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站，主要功能包括：信息发布、电子出版、客户在线咨询、网站管理。5办公事务管理网站 办公事务管理网站是企业事业单位为了实现办公自动化而建立的内部网站，包括以下主要功能模块：办公事务管理、人力资源管理、财务资产管理和网站管理。6商务管理网站 商务管理网站是企业内部为了进行广告及商品管理、客户管理、合同管理、营销管理等目的而建立的网上办公平台。,2.2 确定网站的类型,2.3.1 网站主题的确定 网站的主题也就是网站的题材。网站使用的主要题材有：网上求职、网上聊天/ICQ、网上社区/讨论/邮件列表、计算

6、机技术、网页/网站开发、娱乐网站、旅行、参考/资讯、家庭/教育、生活/时尚等。选择网站题材的时候要注意以下3点。1主题小而内容精 2题材最好是自己擅长的内容 3题材不要太滥、目标不要过高,2.3 定位网站的主题和名称,2.3.2 网站名称的确定 选择网站的名称时要注意以下3点。1名称要端正 2名称要易记 3名称要有特色:潇湘书院 铁血军事 例如，“电脑学习室”和“电脑之家”相比，后者更简练些；,2.3 定位网站的主题和名称,CI（Corporate Identity，企业形象）指通过强化视觉效果的手段来加深用户对企业形象的印象。例：可口可乐公司。1设计网站的标志（Logo）Logo是站点特色和

7、内涵的集中体现。Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。,2.4 确定网站CI形象,2设计网站的标准色彩“标准色彩”是指能体现网站形象和延伸内涵的色彩。一个网站的标准色彩不宜超过3种;标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。,2.4 确定网站CI形象,3设计网站的标准字体 标准字体是指用于Logo、标题和主菜单的特有字体。一般网页默认的字体是宋体。4设计网站的宣传标语 网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句.汽

8、车之家:我的汽车网站，我的汽车之家中国银行：中国银行 全球服务,2.4 确定网站CI形象,2.5.1 设计网站的栏目 网站栏目:实质是一个网站的大纲索引；索引应该将网站的主体明确显示出来。一般的网站栏目安排要注意以下4点。1紧扣网站主题 2设计一个最近更新或网站指南栏目 3设计一个可以互动交流的栏目 4设计一个下载或常见问题回答栏目,2.5 确定网站的栏目和版块,2.5.2 设计网站的版块 版块比栏目的概念要大一些，每个版块都可以有自己的栏目。设置版块时，应该注意以下几点：各版块要有相对独立性；各版块要相互关联；版块的内容要围绕站点主题。,2.5 确定网站的栏目和版块,1风格是建立在有价值的内

9、容之上的 2将网站Logo尽可能地放在每个页面最突出的位置 3使用统一的图片处理效果 4设计宣传标语,2.6 确定网站的整体风格,2.7.1 设计网站的目录结构 网站的目录是指用户建立网站时创建的目录。目录结构好坏，对浏览者没有什么太大的感觉，对于站点本身的上传维护，以及内容的扩充和移植有着重要的影响。建立目录结构的一些注意事项。1不要将所有文件都存放在根目录下 2按栏目内容建立子目录 3在每个主目录下都建立独立的images目录 4目录的层次不要太深 5不要使用中文目录名 6不要使用过长的目录名,2.7 确定网站的目录结构和链接结构,2.7.2 设计网站的链接结构 网站的链接结构：指页面之间

10、相互链接的拓扑结构。建立在目录结构基础之上，但可以跨越目录。建立网站的链接结构有以下两种基本方式。1树状链接结构 树状链接结构类似于DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。优点：条理清晰，访问者明确知道自己在什么位置，不会“迷路”。缺点：浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。2星（网状）状链接结构 星状链接结构类似于网络服务器的链接，每个页面相互之间都建立有链接。优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者“迷路”，搞不清自己在什么位置，看了多少内容。,2.7 确定网站的目录结构和链接结构,网页组织结构树状结

11、构（分级结构）,树状结构：由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,网页组织结构线性结构,组织线性顺序形式存在的信息，可以引导浏览者按顺序地浏览整个网站文件。,线性和分级结构的结合,网站文件的结构通常是树状结构和线性结构相结合,星（网）状结构,确定网站的题材，并且收集和组织了许多相关的资料内容后，按照以下方面组织内容来吸引浏览者浏览网站。1站点结构图 2导航栏 3精美的图片 4引人入胜的内容 5反馈表 6联系方式页面 7搜索工具 8常见问题解答,2.8 网站内容的确定,站点结构图,导航栏,精美的图片,引人入胜的内容,联系方式,搜索工具,2.9

12、.1 网页的基本元素网页通常以网页文件及其附属文件形式存在。1文本 2图片和动画 3声音和视频 4超链接 5导航栏 6表格 7表单 8其他常见元素,2.9 网页的设计,1文本,2图片和动画,4超链接,5导航栏,6表格,图像格式,由于受网络带宽的限制，在Web页上使用的图像都是一些压缩格式，最常用的包括：GIF格式、JPEG格式、PNG格式和矢量格式。1GIF格式 GIF格式采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。2JPEG格式 JPEG格式支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。JPEG格式使用有损压缩来减小图片文

13、件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。3PNG格式 PNG格式是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。4矢量格式,图像,浏览器能识别的图象有jpg（也可叫jpeg）、gif、png和bmp等目前网上用的最多的是jpg和gif，因这两种格式文件体积较小。Gif格式的图象用工具处理后能去掉本身的背景，而很好的和页面融合，还能做成动画。,使用网页图像的要点,在Web页上显示图片之前，通常需要考虑下列三个问题：确保文件较小；控制图像的数量和质量；合理使用动画。,超级链接,超链接是是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相

14、互联系，从而使单独的网页形成一个有机的整体。（1）什么是超级链接 超链接：指从一个网页指向一个目标的连接关系，目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,超级链接,按照链接路径的不同，分为3种类型：内部链接、锚点链接和外部链接。按照使用对象的不同，链接分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。,1。避免孤立文件的存在：应该避免

15、存在孤立的文件，能使将来在修改和维护链接时有清晰的思路。2。避免使用过多的超级链接：在一个网页中设置过多超链接会导致网页的观赏性不强，文件过大。如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。3。网页中的超链接不要超过4层：链接层数过多容易让人产生厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4层。4。页面较长时可以使用书签：在页面较长时，可以定义一个书签，这样能让浏览者方便地找到想要的信息。5。设置主页或上一层的链接：有些浏览者可能不是从网站的主页进入网站的，设置主页或上一层的链接，会让浏览者更加方便地浏览全部网页。,合理安排超链接,在超链接过程中的路径问题

16、,网站中3种类型的文档路径：绝对路径、和根目录相对路径以及和文档相对路径。绝对路径：是包含服务器协议（对于网页来说通常是http:/或ftp:/）的完全路径，绝对路径包含的是精确地址而不用考虑源文件的位置。但是如果目标文件被移动，则链接无效。创建外部超链接时必须使用绝对路径。和根目录相对的路径：是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。和文档相对的路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。,2.9.2 网页布局 1网页布局的基本概念

17、（1）页面尺寸分辨率为1024*768像素情况，页面显示尺寸为1007*600 像素；分辨率为800*600像素情况，页面显示尺寸为780*428像素；分辨率为640*480像素情况，页面显示尺寸为620*311像素。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。除非设计者肯定站点的内容很有吸引力，否则不要让浏览者拖动页面超过三个屏幕。,2.9 网页的设计,2.9.2 网页布局（2）整体造型 整体造型:页面的整体形象，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组合，如矩形、圆形、三角形、

18、菱形等。网页制作大多结合多种图形加以设计，只是其中某一种图形的构图比例可能占得多一些。,2.9 网页的设计,2.9.2 网页布局 2网页布局的一般步骤（1）构思 根据网站内容的整体风格，设计版面布局。不要讲究细节，只要有一个轮廓就行。（2）初步填充内容 把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。然后再考虑其他元素的放置。（3）细化 利用网页编辑工具把草案做成一个简略的网页，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。,2.9 网页的设计,2.9.2 网页布局 3网页排版布局的原则（1）平衡性（2）对称性（3）对比性（4）疏密度（5）比例,2.9

19、 网页的设计,2.9.2 网页布局 4网页布局类型“国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型,2.9 网页的设计,（1）“国”字型布局,也可以称为“同”字型一些大型网站经常使用最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。,（2）拐角型布局 拐角型布局与上一种布局只是形式上的区别，其实是很相似的。该布局上面是标题及广告横幅，接下来的左侧是一窄列链接等内容，右面是很宽的正文，最下面也有一些

20、网站的辅助信息。在这种布局中，左侧一般是导航链接。,2.9 网页的设计,拐角型布局,（3）标题正文型布局 最上面是标题或类似的一些东西，下面一般是正文，例如，一些文章页面或注册页面等就属于这种类型。,（4）左右框架型布局网页分为左、右两部分，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。,2.9.2 网页布局（5）上下框架型布局 上下框架型布局与左右框架型布局类似，区别仅仅在于这种布局分为上、下两部分。（6）综合框架型布局 综合框架型布局是左右框架型布局与上下框架型布局的结合，相对较复杂，类似于拐角型布局，只是采用了框架结构。（7）封面型布局 封面型布局一般出现在一些网站的

21、首页，由一些精美的平面设计结合一些小的动画组成，在页面中放上几个简单的链接或者仅仅是一个“进入”的链接，甚至直接在图片上加上链接而没有任何提示。这种布局需要精心设计，能给人带来赏心悦目的感觉。,2.9 网页的设计,封面型布局,2.9.2 网页布局 5网页布局的常用技术（1）CSS（层叠样式表）布局 CSS运用的好坏是判断一个网站优秀与否的关键。（2）表格布局 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。（3）框架布局 从布局上考虑，框架结构不失为一

22、个好的布局方法。,2.9 网页的设计,框架,框架：可以将整个网页分割为多个独立的区域，每一个区域称为一个框架窗口，可以在任何一个框架窗口中单独显示一个网页。应用框架的页面称为框架页面。框架将页面分成几个部分，每一个部分都是独立的HTML文件。一个框架页面包含多个HTML页，可以分别控制每个框架区域的内容。框架由两部分组成：一个框架集和独立的框架。框架集文件定义了包含在该框架集中的框架数量、每个框架的大小、链接到每个框架的页面。框架集并不在浏览器中显示，它只存储包括上述信息在内的、关于每个框架的信息。,框架的作用,1）节约下载时间2）导航功能,2.9.3 配色原则 第一印象：视觉 处理原则“总体

23、协调，局部对比 1色彩的形成 色彩是一种视觉，是光作用于眼睛的结果。2色彩的特征 色彩的基本特征主要有色调、亮度和饱和度三个。色调:色彩的种类。同一色调指色彩中组成彩色成分的三原色光组合比例相同的一系列色彩。亮度:色彩的明亮程度。指颜色的深浅之分。饱和度:色彩的鲜艳程度。受物体表面结构、照射光源的特点以及视觉生理特性的影响。,2.9 网页的设计,2.9.3 配色原则 3色彩的心理感觉 红色是一种激奋的色彩，具有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉；绿色介于冷暖两类色彩的中间，给人以和睦、宁静、健康、安全的感觉，它和金黄、淡白色搭配，可以产生优雅、舒适的气氛；橙色也是一种激奋的色彩，

24、具有轻快、欢欣、热烈、温馨、时尚的效果；黄色表现快乐、希望、智慧和轻快的个性，它的透明度最高；蓝色是最具凉爽、清新、专业感的色彩，它和白色混合，能体现柔顺、淡雅、浪漫的气氛；白色具有洁白、明快、纯真、清洁的感觉；黑色具有深沉、神秘、寂静、悲哀、压抑的感觉；灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。,2.9 网页的设计,2.9.3 配色原则 4色彩的分类 暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、热情。中性系：黄绿、绿等色彩让人觉得舒适、和谐。冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高雅。,2.9 网页的设计,色彩具有联想与象征的特质,红色象征火、血、太阳 蓝色象征大海、天空和水面等。,2.9.3 配色原则 5色彩的选择和搭配（1）色彩的鲜明性：吸引读者注意，驻留时间长。（2）色彩的独特性：留下深刻的印象。（3）色彩的适合性：与网站气氛一致，不超过3，4种适宜。（4）色彩的联想性,2.9 网页的设计,1024768像素800600像素640480像素首先考虑800600像素，因为现在大多数用户都在使用这种分辨率。,2.10 浏览器版本和分辨率,网页的外观设计,根据网页的具体性质选择网页布局选择合适的字体 注意要用常用的分辨率不要有太多的广告背景或墙纸的统一规划底色或墙纸必须与文字对比强烈不要把图片白色当作透明,