网站规划第二课PPT课件

1、网站总体设计与网页版面,1,第一节 网站总体设计 调查与定位 网站风格 设计风格 CIS设计 内容风格 第二节网站结构与网页版面 网站结构 网页版面布局 网页基本组成元素 版式设计,2,1、调查与定位,调查: 在进行网站策划之时，要对策划环境进行调查分析，主要是开始社会环境调查、网民调查、竞争对手调查及自身资源等方面的调查分析。 例如：美国最大的网上购物网站“亚马逊”在开业之前，通过市场调查，创建人贝索斯非常严谨地列出了将在网上销售的20种商品，挑选出其中销售潜力最大的5种：图书、CD、录象带、计算机硬件、计算机软件,3,定位：,定位服务对象：无论要在网上展示什么内容，时刻要明确的一点是，网站

2、在和谁进行交流。 新浪网早期定位： 网站定位：最著名的中文论坛和新闻的首选网站。 服务人群：喜欢看新闻的人，网络技术爱好者，高层次高品位的交流者。 网站内容：新闻中心、财经纵横、都市生活、游戏世界等。 网站色彩：黄红色系，醒目、亲切并符合中国传统。,4,2、网页风格,设计风格 设计风格决定了网站的特色，设计风格的形成依赖于版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。 在设计中，针对浏览者的不同年龄、不同职业等，都应表现出不同的设计风格；面对青少年的页面要设计的活泼、明快；对于女性则要体现细腻温暖的感觉，一般以暖色为主 。 例子： 瑞丽网 儿童网站：活泼http:/www.bos

3、omi.co.kr/,5,6,7,2、网页风格,CIS的概念 CIS是英文Corporate identity system(企业识别系统)的缩写。CIS设计是企业、公司或团体在形象方面的一种整体设计 它包括企业理念识别系统(MI):企业使命,经营哲学 企业行为识别（BI） 企业视觉识别(VI):标准色,标准字,应用要素 新浪-正统 ,网易-平易近人,8,2、网页风格,内容风格 “三次单击”原则：网站设计有一个著名的原则“三次单击”，即网站的任何信息都应该在三次单击后找到。 平均栏目间的分量均衡 内容的放置,9,3、网站结构,对于一个较大的网站来说，建立一定的文档结构规范，命名规范，可以使开发

4、团队达成一致地标准化作业。 后台运行的Html、 asp等文件和图片，都保存在专门的文件夹中，然后使用文件夹来合理构建文档的结构。 通常，应首先为站点创建一个根文件夹（根目录），然后在其中创建多个子文件夹，再将文件分门别类存储到相应的文件夹下。一般情况下，每一个站点频道或栏目占用一个子文件夹，相关内容都放置在一起。 文件名称大多使用英文，并使各个文件名之间有一定的联系和区别，比如对首页的命名一般使用index,图片文件夹的命名使用images。,10,3、网站结构,一个综合网站的栏目设计,11,3、网站结构,基本的网站页面关系,12,3、网站结构,一个简单的文件夹结构,13,4、网页版面布局基

5、本组成元素,网页基本组成元素 网页标题：点名网站身份的必要内容。网页标题显示在浏览器窗口的标题栏中 网站标志：简称站标，也就是我们说的logo。 页眉：指页面的顶部，通常位于水平位置的导航栏上面。 导航栏：它将帮助访问者按照其导引浏览网站。 内容版块：是页面的主题，往往根据内容的多少划分为几个栏目。 页脚：是指页面的下面部分，通常放置版权信息，联系方法，有时也把导航栏、友情连接安排在这里。,14,4、网页版面布局版式设计,第一种：同，国.川字型 第二种：上下型 第三种：T型结构 第四种：三字型 第五种：“口字”型结构 第六种：封面型,15,第一种：同，国字型, 101远程教育网 中国工商银行

6、中科院地质地球所二级页面 招商银行 ,16,17,18,19,20,21,这种结构优点是：页面结构清晰，直观，平稳均衡，主次分明。 缺点是板式过于呆版、僵化，往往给人一种“单调乏味”的感觉。 因此，采用这种结构布局时，必须在设计过程中更加注重色彩搭配和细节的处理，调节页面的整体韵律，弥补它的不足。,22,23,第二种：上下型,例子：工商行子页面 中国工商银行,24,25,第二种：上下型,这种结构一般应用于小型网站或栏目页面中，其顶部为logo,banner以及导航条，下方则为主要内容，这种网页结构目前被广泛地栏目页面中采用。,26,第三种：T型结构, 北京蓝图市场研究公司 （封面型，T型结构）

7、 它的首页采用了封面型结构，子页面采用了T型结构。,27,28,29,30,第三种：T型结构,这种布局可以合理地安排主要的页面元素：logo ,banner的位置在顶部，左侧是主要栏目的连接导航，右侧的大片空白区域放置首页的主要连接内容。 其优点是页面结构清晰，主次分明，是初学者最容易学习的布局方法；缺点是结构呆板，如果把握不好，容易让看看之无味。,31,第四种：三字型, 金牛广告,32,第三种：三字型,金牛广告,33,34,35,36,第四种：优缺点,事实上，这种结构往往采用是一个三栏式的框架网页，由平行的三个区域组成，中间区域宽阔，上下两侧狭窄。顶部和底部内容固定不变，顶部一般放置网站标志

8、和导航系统，底部为特定的连接或版权信息。 主题内容则在中间的大部分空间出现。 该布局的优势是导航系统稳定，无论浏览者在网站何处，仍可以快速地到达所需位置，极少迷路，但由于该布局的信息容量较小，所以常常被小型网站和企业网站所采用。,37,第五种：“口字”型结构,例子； 北京晨毅户外用品有限公司,38,39,第五种：“口字”型结构,使用这种结构的站点较少，因为这种结构是一种封闭的布局，所以在网站结构中信息容量最少。 但它确实有一种新颖的视觉体验，所以经常出现在介绍产品的网站及个人网站上。,40,第六种：封面型 ,第一种网站的欢迎页上，基本元素由动画、平面设计的图片构成 学校网站 例子： （封面型） 中科院地质地球所（封面型） 中钢 精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接 。,41,42,43,44,45,第六种