第7章-网站的规划方案与设计.ppt

4.网站详细设计 整体形象设计,页面布局结构 开发制作 调试完善 * 第7章 网站的规划与设计 本章学习重点 网站项目建设流程 网站主题和名称 网站的栏目和版块 网站的目录结构与链接结构 设计版面布局 首页的设计 网站的规划 网站的规划是指在网站建设前对网站进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、测试、维护等作出规划。 网站规划对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用 7. 1网站项目建设流程 1.项目立项 ：成立专门的项目小组 2.网站的需求分析 3.网站总体设计： 组织网站的内容和设计其结构。 项目小组在明确网页制作的目的及要包括的内容之后，对网站中各网页文件的链接结构进行设计，以确保文件内容条理清楚、结构合理。 * * 7. 1网站项目建设流程 4. 网页设计与制作 网页制作一般包括静态网页制作和动态网页程序设计。其流程一般是收集整理资料，准备素材，内容规划，然后就是制作了。 通常在进行网页开发时，首先进行静态网页的制作，设计页面布局结构，在各局部区域放入展示的内容，然后再在其中加入交互表单、动态脚本程序等。 * * 7. 1网站项目建设流程 5. 测试网页 当小组设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。 6. 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程服务器，也可以是本地服务器。 7. 网站后期维护 7. 2网站主题和名称 1．确定网站的主题 ⑴ 主题要小，内容要精 ⑵ 题材最好是自己擅长或喜爱的内容 ⑶ 题材不要太泛，目标不要太高 2.确定网站的名称 ⑴ 名称要端正 ⑵ 名称要易记 ⑶ 名称要有特色 搜狐、谷歌（Google） 网易、MATLAB中文论坛 必应（bing） 7. 3网站的栏目和版块 1．确定网站的栏目 紧扣网站主题 设计一个最近更新或网站指南栏目 设计一个可以双向交流的栏目 设计一个下载或常见问题回答栏目 2．确定网站的版块 一般网站可不设置版块 每个版块都有自己的栏目 若设置版块，需注意： 各版块要有相对独立性 各版块要有相互关联 版块的内容要围绕站点主题 版块和栏目的区别 版块比栏目的概念要大一些，每个版块都有自己的栏目。 如：网易的站点分新闻，体育，财经，娱乐，教育等版块， 每个版块下面各有自己的主栏目，新闻版块分为国际、国内、社会、评论等栏目 版块强调整体效果，栏目注重内容分类 7. 4网站的目录结构与链接结构 1.网站的目录结构 不要将所有的文件都存放在根目录下 按栏目的内容建立子目录 每一个主栏目对应的目录下建立images目录 目录的层次不要太深（三层为宜） 7. 4网站的目录结构与链接结构 2.网站的链接结构 树状链接结构（一对一） 星状链接结构(一对多) 树状链接结构 类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在什么位置，不会“迷路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。 树状链接结构 星状链接结构 类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。 这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。 缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。 星状链接结构 混合两种结构 首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构 　　一个新闻站点的页面结构如下: 　　--------------------------------------------------- 　　一级页面 二级页面 　　财经新闻页 -- [财经新闻1，财经新闻2...] 　　/ | 　　首页 -- 娱乐新闻页 -- [娱乐新闻1，娱乐新闻2...] 　　/ | 　　IT新闻页 -- [IT新闻1，IT新闻2...] 　　---------------------------------------------------- 　　其中，首页，财经新闻页，娱乐新闻页，IT新闻页之间是星状链接，可以互相点击，直接到达。而财经新闻页和它的子页面之间是树状连接，浏览财经新闻1后，你必须回到财经新闻页，才能浏览IT新闻2。所以,有站点为了免去返回一级页面的麻烦，将二级页面直接用新开窗口(POP up windows)打开，浏览结束后关闭即可。 7. 5设计版面布局 版面指浏览器看到的完整的一个页面 布局是以最