网站架构简要概述

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网站架构,定义网站架构,今天我们所面临的挑战，不是搜集信息，而是发现信息对我们的冲击。,定义网站架构,信息架构（information architecture),对数据的,组织（organization),归类（labeling),数据演示（presentation of data),定义网站架构,网站架构，是信息架构与交互设计的一种模糊结合。它包括：,包含在网站中的内容，或信息片段。,信息片段与信息片段之间的关系。,导航，访问者用来探寻这种关系的指导。,提示：要让导航对于用户来说越简单直接， 我们在构建过程中要做的工作可能越多。,1 归类,网站归类：相当于为一本图书创建索引和目录。,包括导航标签，菜单链接，页面标题，页头，用于搜索和浏览的关键字。,如何设计标签？,从网站的内容，尤其是从标题和子标题中，摘选出有意义的标签。,仔细阅读竞争者的网站，从中获得启发。,参考一些行业的在线主体词表(可能作为标签的特定行业术语，经过整理，定义，并相互参照）。,检查现有服务器日志，从中找出访问者在现有的网站上，用来找寻内容的搜索关键词。,2主题分类,火车交通工具,火车玩具,火车爱好模型,摄影网站的分类：,业余爱好者,专业人士,替代为：,4000元以下,4000元以上,3为开发者组织网站结构,娴熟程序员的规范，或许是基于宝贵的经验：,越早开始编写代码，项目花费的时间将会越多，先花点时间做一下规划吧。,3.1组织服务器上的文件和目录,目录结构要遵循网站架构层级：,每个主页创建一个主目录（文件夹），在这个主目录下面还有子目录，正如子页面位于主页下面一样。,为可重复使用的元素建立独立目录，如高级CSS，javascript, image。,电脑零售商网站的目录结构示例,根文件夹（包含index.html),images,css,javascript,beta,desktopSystems,laptopSystems,accessories,webImages,originalImages,webImages,css,javascript,orginalImages,webImages,originalImages,css,javascript,两个帮助管理网站结构的工具,Adobe Dreamweaver中的,站点地图,连接检查器（Link Checker),3.2建立标准命名规范,NavshoppingCart.gif,navShoppingCart.gif,nav_shopping_cart.gif,nav-shopping-cart.gif,采用什么规范，远远没有保持规范的一致性重要。,要求只采用字母、数字、连字符和下划线。,请比较：,aa123,navbar,请比较：,navBlueButton.gif,navGobutton.gif,根据作用，而不是视觉属性，统一文件的命名惯例。,3.3相对寻址和绝对寻址,相对寻址：相对于存放当前页面的目录，而建立的链接路径。,如：images/gif/myButton.gif,绝对寻址：每个页面通过完整的URL，进行独立访问。,如：