网站结构设计经典课件(ppt 69页).ppt

电子商务系统分析与设计 七 网站结构设计 网站的结构 网站的结构可以分为网站的物理结构和逻辑链接结构网站的物理结构是指网站文件的物理存储结构 也就是网站文件在服务器上存储的方式 逻辑链接结构是网站在运行时抽象出来的拓扑结构 它建立在网站物理结构之上而又跨越物理结构 网站的物理结构 网站的物理结构体现为网站在服务器上的目录结构 网站的物理结构不应十分复杂 层次也不应太多 应该根据网站文件的功能 地位和大致的逻辑结构来建立树状的目录结构 例如主页的HTML文件一般直接放于服务器虚拟路径的根上 与之相关联的资源 如图片 声音等 作为一个一级目录 其他的一级页面构成各个一级目录 而在一级页面的目录里又有与之相关的资源和上级页面构成二级目录 类似地再往下分为三级目录等 建立目录结构的建议 不要将所有文件都存放在根目录下 文件管理混乱 你常常搞不清哪些文件需要编辑和更新 哪些无用的文件可以删除 哪些是相关联的文件 上传速度慢 服务器一般都会为根目录建立一个文件索引 当你将所有文件都放在根目录下 那么即使你只上传更新一个文件 服务器也需要将所有文件再检索一遍 建立新的索引文件 很明显 文件量越大 等待的时间也将越长 建立目录结构的建议 按栏目内容建立子目录所有程序一般都存放在特定目录 所有需要下载的内容也最好放在一个目录下 在每个主目录下建立独立的images目录 目录的层次不要太深 目录的层次建议不要超过3层 全局的资源应该放在根目录下的Global目录中 其他注意事项 不要使用中文目录 因为编码的差异以及异地服务器解释程序的差异可能使中文目录网址的正确显示造成困难 不要使用过长的目录 尽管服务器支持长文件名 但是太长的目录名不便于记忆 尽量使用意义明确的目录 上面的例子中 你可以用Flash Dhim1 JavaScript来建立目录 也可以用1 2 3建立目录 但是当然是前者更便于记忆 管理 网站的逻辑连接结构 网站的链接结构是指页面之间相互链接的拓扑结构 它建立在目录结构基础之上 但可以跨越目录结构 形象的说 每个页面都是一个固定点 链接则是在两个固定点之间的连线 一个点可以和一个点连接 也可以和多个点连接 更重要的是 这些点并不是分布在一个平面上 而是存在于一个立体的空间中 建立网站的链接结构两种基本方式 树状链接结构 一对一 类似DOS的目录结构 首页链接指向一级页面 一级页面链接指向二级页面 立体结构看起来就像蒲公英 这样的链接结构浏览时 一级级进入 一级级退出 优点是条理清晰 访问者明确知道自己在什么位置 不容易 迷路 缺点是浏览效率低 一个栏目下的子页面到另一个栏目下的子页面 必须绕经首页 建立网站的链接结构两种基本方式 星状链接结构 一对多 类似网络服务器的链接 每个页面相互之间都建立有链接 这种链接结构的优点是浏览方便 随时可以到达自己喜欢的页面 缺点是链接太多 页面之间的层次结构不清晰 容易使访问者 迷路 搞不清自己所在的位置 也不能确定自己已经浏览过的内容 网站的链接结构 最好的办法是 首页和一级页面之间用星状链接结构 一级和二级页面之间用树状链接结构 关于链接结构的设计 在实际的网页制作中是非常重要的一环 采用什么样的链接结构直接影响到版面的布局 页面流程设计 页面流程相对于结构设计来说 是一个动态的概念 网站结构是一个静态的概念 它反映的是网站的静态布局 而页面流程反映了访问者在浏览网站时的访问经历 设计者为访问者设计这些浏览经历的工作就是页面流程的设计 页面流程和网站结构的区别 页面流程是用来反映访问者浏览网站经历的 它的特点是以访问者角度去观察网站的构造 页面流程是局部 具体地设计网站的阶段 而网站结构设计是对网站全局性的定位 页面流程是动态地观察网站 而网站结构是静态的策划 网页流程是基于网站结构的 页面流程的设计 1 划分网站页面网站功能确定了网站页面 因此在设计页面流程时应该先将网站页面按照功能组别以及功能调用关系进行划分 第一步应该对网站的功能进行细分 划分网站功能模块 2 功能模块的划分网站的功能模块是指完成一个独立功能的一个或多个网页 所谓的独立功能 就是指这部分的功能可以完成一定的任务而不需要其他功能模块的支持 也就是说只需要功能模块中的页面来完成而没有必要运行其他的页面 功能模块与页面之间的区别与联系 一个页面可以帮助完成几种功能 它可以存在于几个不同的功能模块中 可以把它比喻为功能模块中的组成部分 一个功能模块可以包含一个或多个页面 它是页面的载体 页面的功能最终是为它所在的功能模块服务 注意 这里所讲的页面是指利用ASP等编写的动态页面 而不是指一般的静态html页面 它们的内容是可以根据传入参数的不同而不同的 网站的功能模块划分的三种方法 按流程划分按网站的目录结构划分按流程与按目录结构相结合的方法 按流程划分功能模块 这种划分方法是根据用户访问网站的过程来划分网站的功能模块的 这种划分法以用户的访问足迹为线索 每一个功能模块就像线索上的结点 一般来说 以用户登录服务为主题的用户社区类型网站 就大多采取这类划分法 流程划分的应用实例 我们以一个提供免费邮箱服务的网站为例 根据用户访问的流程来示范划分的过程 当用户登录到提供免费邮箱服务网站的首页 首页服务功能模块 时 会见到一个登录框 如果用户初次申请 不能在登录框中输入密码进行登录 就必须申请新账号而进入申请功能模块 如果用户已经在该网站申请到了合法ID 就可以在登录框中填入用户名与数据 进入登录功能模块 流程划分的应用实例 用户登录后 就进入了自己的信箱 进入了信箱文件夹列表功能模块 列出了收件箱 发件箱 回收站等文件夹 假设用户想收邮件 将会点击收件箱链接进入收件箱中 从而进入另一个功能模块 信件列表 收到新信件 用户当然想阅读一下 这时它们点击选中的信件 查看信件的内容 又进入了另外一个叫显示信件内容的功能模块 阅读完后 用户要回信 它们在原来信件的显示页面上写上自己恢复的内容 就可以按 回信 按钮而调用信件回复的功能模块 流程划分的应用实例 同样原理 如果用户进入其他文件夹进行其他操作 同样可以划分其他分支流程的功能模块 按用户访问流程这种划分功能模块的方法 能清晰的反映用户访问网站的整个过程 设计者能很好地体会到用户在访问过程中的感受 从而把网站设计的更体贴 更符合用户的习惯 但是这种划分方法指从用户角度来设计 如果用户访问过程中 分支流程太多 整个网站的设计就会显得凌乱 甚至造成功能模块的重复 而浪费了网络资源 此时就应该考虑采用另外的分类方法 按网站的目录结构划分 这种划分方法从网站的目录结构 也就是按网站的内容分类来确定功能模块的分类 按这种划分法设计的网站 把网站向访问者提供的功能分类 一般都是每种功能分成一个功能模块 如果一个网站的交互性不高 那么就没有必要从户访问的流程未划分 这种网站用按目录结构的分法是最合适不过的 流程划分与功能划分相结合 基于ASP一类技术的交互网站 很多情况下不同操作会调用相同的页面 只是入口参数不同 两种方法结合起来才是真正有前途的方法 这种结合应该是互相渗透的 而不是互相排斥的 可以在按流程划分的功能模块中按目录分类 又可以在按目录分类的大功能模块中按流程来分类 流程划分与功能划分相结合的应用实例 大型的商业网站必然提供多种多样的服务 例如以提供免费邮箱以及其他各方面信息服务的21世纪网站 就分成 新闻 娱乐 财经 旅游 计算机 广告服务 邮箱登录 等很多种大功能模块 在这些功能模块中 又可以嵌套另外的划分方法 比如在 邮箱服务 的功能中就是按流程分类的 这个分类过程在上面已经详细讲过 而在登录邮箱之后选择各个文件夹选项操作这个过程 又是按目录结构来划分的 如何将两种方法结合 那么在具体功能分块中应如何选择这两种分法以及把它们集合起来呢 首先看网站提供多少种不同类的服务 每种服务可以把它分成一个大类 归到一个目录中 在每种交互性的服务中 再看服务提供的过程是怎样实现的 按实现的步骤来再细分 在细分后 再根据需要进行不同的划分 当然 这里划分方法的运用是灵活的 要按照实际情况作决定 根据功能模块划分网站页面 分好了功能模块之后 可以进一步把功能细分到网站页面上 通过页面来实现每个模块的功能 网站页面功能分配可以看成是一种函数调用 基于目录分类的网页 在一个功能中 每个页面都是并列的 而基于流程分类的网页 就要按照功能调用的顺序 把页面按次序的显示出来 根据功能模块划分网站页面 在网页流程中 每个网页都要处理一些参数 包括输入参数与输出参数 说得形象一些 就是从输入参数中知道要做什么和通过输出参数告诉下一个被调用页面要接着做什么 页面要获得的输入参数常常是通过上一个页面产生的 如果这个页面在上一个页面没有被调用就开始运行 那么它根本没有可能得到参数或者正确的参数 也就没有办法继续运行下去 所以 确定功能模块中页面的流程非常重要 设计功能中的流程图 大部分具有交互性的网站功能 都包括一个流程 我们来分析一下注册流程 新用户注册流程 进入 显示注册的注意事项或者网站管理法规 接受 N 返回上级页面 正式注册页面 提交 进入内部处理页面 按类分配页面 另外一类分配页面功能的方法就是纯粹的按类分配 在每一个功能模块中按类划分子功能模块 然后再在其中把功能细分 直到所有的功能都被分到每一个页面中 这种分类方法主要用来划分网站中的大功能模块 把各不相同的功能分到不同目录之下 或用在实现起来比较简单的个人网页中 一个网站例子 H营销网 的页面划分 网站分为前台公众访问以及后台网站管理部分 两个部分是相互独立的 所以分别对这两个部分作介绍 划分网站公众页面页面的划分主要以功能为单位 一组联系紧密的或功能相关的页面组构成了一个功能 为了实现网站目标中确定的功能 首先要定义好功能的使用过程 方式 界面等因素 确定公众部分的目标 用户注册 新用户的注册已经注册用户的身份识别 新闻浏览 发表评论 社区讨论 新用户注册 网站显眼的地方提供访问者进入新用户注册功能的接口 由新用户填写自己的注册账号 填写密码等相关资料 根据登录的结果返回访问者信息并回到首页 采用了分开处理账号和资料的方法 更优化的方案是将密码的填写也作为独立的一步划分出来 以方便错误的即时回应 不同的处理流程 不同的处理流程 统一的分支序列 整理后的用户注册分支序列 划分的页面组结果 新用户注册接口 一个嵌入在首页和导航系统中的链接 注册用户账号页面ApplyName asp 页面上给出注册规则的提示 账号合法性检查页面CheckName asp 操作性页面 含有账号非法时的异常信息 填写用户密码页面FillPassword asp 页面上给出注册规则的提示 划分的页面组结果 密码合法性检查页面CheckPassword asp 操作性页面 含有密码非法异常信息 填写个人资料页面Register asp 资料合法性检查及注册账号插入数据库页面userUpdate asp 操作性页面 含有资料非法的异常信息以及注册成功信息 提供返回首页的链接 划分的页面组结果 注意 没有增设显示服务器操作结果的操作性页面 即在注册资料都通过后并完全成功地存入数据库时返回成功信息 由于网络信息传送失败 服务器忙 页面超时等原因导致没有把数据存入数据库时返回错误信息 是为了简化本例的设计过程 在实际应用中这诸多方面都是应该仔细考虑的 对于这样的页面组 访问者无论进行了什么操作 网站都可以作出正确的页面回应了 已注册用户的身份鉴别页面 同步练习 1 按照上述思路 设计 新闻浏览 的页面序列划分 2 提示 考虑两种新闻 重要的或者最新的新闻和新闻专题方便访问者对新闻进行自行搜索和寻找 新闻浏览的分支序列 电子商务网站规划与设计 十七 建立页面连接流程公众页面流程设计管理员页面流程设计 建立页面连接流程 这是描述众多分散的页面之间联系的重要步骤 也是分支序列的形式化 所划分的页面之间应该根据其相互调用的关系建立链接 通常实现一个网站功能的页面组的链接关系构成一个链接网 而各个功能的链接网合并就组成了整个网站的链接网 建立各个功能的链接子网 它主要沿用了页面划分的成果 在进行页面划分时 采用基于分支序列的方法 在很大程度上已经反映了各个页面的链接关系 根据所划分好的页面的相互功能调用关系来建立链接关系 实现链接子网的建立 注意调用的双向性和调用的条件 即对于相互响应的页面 其链接是双向的 并且是有条件的 根据传递的参数所确定 建立网站整体链接网 将各子网合并成一个整体 实现整个网站的页面链接流程 在合并时 是通过修改接口页面或者通过导航系统来实现的 修改接口页面是为了使同一层次而分属于不同功能的页面建立联系 或者为了联系上下级关系的功能而进行的 导航系统通常使网站各分别独立的功能实现横向联系 公众页面流程设计 页面的自我链接 页面为一个内容很长的信息列表或一个分类的列表 在一个屏幕内不能将信息显示完毕时 或者需要显示的内容是经过分类的 一页应该只显示一个类别的时候 对两个页面进行双向链接 当一个页面提供数据给另外一个页面处理时 例如一个表单提交数据给一个操作性页面 对数据进行处理的页面有可能对不合格的数据要求重新输入 这时处理数据的页面同样地指向提交数据的页面 页面的自我链接 这种情况在需要进行列表的时候出现最多 通常都采用由服务器处理参数来实现动态刷新的html效果 在我们的商业网站例子中 有几个页面是需要进行自我链接的 如新闻三级栏目列表 新闻内容 社区讨论的文章列表等等 新闻三级栏目列表应该总是显示当前已经选定的三级栏目及其新闻条目 并且应该提供同一级别的其他栏目的链接 页面的自我链接 在处理方法上 就是采用了将栏目号作为参数传递回自身而刷新页面的方法实现的 新闻内容页面的自我链接主要是为提供相关新闻链接而设的 社区讨论的文章列表页面在文章过多 一页显示不完时 可采用分页显示技术 设计一个利用页号为参数的页面实现动态地刷新访问者当前所看到的内容 通过自我链接来显示所有文章 页面的双向链接 这种情况实际上就是在分支序列的基础上 将异常信息的页面合并到操作页面后所形成的形式 这种情况多见于一个进行输入操作的页面和一个进行数据处理的页面之间的链接 新闻浏览的页面链接流程 建立网站整体流程 较为紧密的合并方式是采用修改接口页面的方法 从两个具有一定关系的功能 同级的或者上下级的 各自的流程中抽取功能相同或者相似的页面组成一个页面 即舍弃其中一方 然后将它的功能加入到另外一方中 同时完成加入接口参数 调整数据的完整性等工作 实现两个功能的合并 较为松散的合并方式是通过导航系统实现的 只需要建立一个公共性质的导航页面 或者在需要合并的功能中各自加入到对方的链接 无须对页面的内核进行调整 功能流程合并的例子新闻浏览和发表评论的合并 这两个功能之间属于上下级的关系 它们之间的接口页面是新闻内容页面 在新闻显示内容之后提供发表评论的链接入口 当访问者要发表评论时 点击相应的按钮 新闻内容页面就会将有关的参数 当前访问者的身份 当前所阅读的新闻编号 新闻主题 所属栏目等等信息 传递给发表评论的表单页面 待访问者填写后一并交由系统进行处理 用户登录和新闻浏览的合并 显然这两个功能之间没有必然的联系 在合并时 我们只需要在首页给出两者相应的链接入口 并在导航系统中建立两个相应的功能类别即可 制作网站页面流程图 页面流程图是由划分好的页面单元和连接单元之间的箭头以及图例等元素组成的 绘制页面流程图的步骤 流程图标题 通常在版面的左上方 采用较显眼的字体和颜色标出 绘制页面流程图的步骤 结点 流程内的每个页面是图中的一个结点 通常用方框来表示 方框内写有页面的文件名字 为了区别一般的页面和操作性页面 以不同的颜色或底纹作为两种结点方框的底色 箭头 箭头由一个结点指向另外一个结点 表示页面流程的链接方向 自我链按时箭头的尾部和头部都指向同一个结点 形成环型 双向链接时 可以采用两根箭头 也可以采用一根两头都有箭头的箭头 建议 箭头旁应该标出该箭头所属流程路线的流程号 绘制页面流程图的步骤 图例 结点底色说明 指出哪种底色是一般页面 哪种底色是操作性页面 流程路线说明 给每条流程路线标号 列出标号和路线的对应关系 图例置于正图的下方 留意以下注意事项 版面的安排 箭头的安排 页面流程图 网页设计 第一步 设计版面布局 就象传统的报刊杂志编辑一样 我们将网页看作一张报纸 一本杂志来进行排版布局 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧 但是固定的网页版面设计基础依然是必须学习和掌握的 版面和布局的含义 版面指的是浏览器看到的完整的一个页面 可以包含框架和层 因为每个人的显示器分辨率不同 所以同一个页面的大小可能出现640 480像素 800 600像素 1024 768像素等不同尺寸 布局 就是以最适合浏览的方式将图片和文字排放在页面的不同位置 版面布局的步骤 1 草案新建页面就象一张白纸 没有任何表格 框架和约定俗成的东西 你可以尽可能的发挥你的想象力 将你想到的 景象 画上去 我们建议您用一张白纸和一支铅笔 当然用作图软件photoshop等也可以 2 粗略布局在草案的基础上 将你确定需要放置的功能模块安排到页面上 注 功能模块我们在 首页设计 引子 中提过 主要包含网站标志 主菜单 新闻 搜索 友情链接 广告条 邮件列表 计数器 版权信息等 版面布局的步骤 3 定案将粗略布局精细化 具体化 靠你的智慧和经验 旁敲侧击多方联想 才能作出具有创意的布局 布局遵循的原则 正常平衡 亦称 匀称 多指左右 上下对照形式 主要强调秩序 能达到安定诚实 信赖的效果 异常平衡 即非对照形式 但