《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.5 绘制网站线框图

2.5 绘制网站线框图

网站规划的下一步是确定如何在网页之间分配内容,并制定在网页之间导航的方案。如果有很多需要以复杂的方式链接起来的内容,请坐下来制定具体的内容分配计划,这对您以后开发和链接网页大有裨益。

2.5.1 线框图是什么,为何需要绘制线框图
线框图是网站完成后的大致轮廓,指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的。有了线框图后,开发每个网页时就无须牢记它在整个网站所处的准确位置,也无须牢记它与其他网页之间的复杂关系。

在网站特别大的情况下,如果有线框图,就可将网站不同部分的开发工作分配给不同的人去完成。清晰的线框图让您能够最大限度地避免重复工作,减少每个人都必须牢记的上下文信息。

如果网站较小,或者网站是使用提供了具体结构的内容管理应用程序创建的,也许不需要线框图。然而,对于复杂的大型网站,线框图可节省大量的时间,避免众多的弯路。如果您无法牢记内容的各个部分以及它们之间的关系,就应考虑绘制线框图。

线框图什么样呢?一般而言,它们是成组的文档或图像,每组表示网站中一种特定类型的网页。文档包含网页的粗略示意图,指出了网页各个部分处于什么位置、占据多大空间以及将发挥的作用。例如,报纸网站的线框图包括主页示意图、各个版面的主页以及文章页面的线框图。线框图还可能包括网站的注册表单以及购买广告版面的页面。图2.8是一个使用工具Balsamiq创建的线框图。

线框图并非必须非常漂亮,也并非一定要使用线框图绘制软件来创建。绘制线框图的关键在于,将网页以适合您的方式组织起来。如果您喜欢索引卡和细绳,使用这些工具就是了;如果在纸上或计算机中绘制简单的草图更佳,这样做就是了。

2.5.2 线框图绘制小贴士
绘制线框图时,需要考虑如下几点。

  • 如何在网页之间分配主题?

确定一个网页包含多少信息可能比较棘手。有些网站将所有内容都放在一个设计巧妙的冗长网页中,有些网站将内容分配到大量不同的网页中,还有些网站使用新技术按需动态地加载网页的各个部分,用户根本不需要从一个网页切换到另一个网页。为避免过于花哨,最佳的做法是这样组织内容,即让每个页面都包含一个主题的信息。如果页面有好几屏长,也许该将相应的主题按逻辑分成多个子主题。

  • 在网页之间导航的主要方式是什么?

为了让访客能够在页面之间导航,您需要哪些链接。这些是文档中的主链接,让访客能够实现您确定的目标。向前、向后、向上、向下的链接以及到主页的链接都属于主要的导航方式。

  • 要提供其他哪些导航方式?

除简单的导航链接外,有些网站还包含与主要Web内容平行的额外信息,如术语表、按字母顺序排列的概念索引、版权信息或职员页面。制定计划时一定要考虑这些额外的信息,想想要如何将它们链接到主要内容。

  • 要在主页上放置哪些内容?

鉴于主页是访问网站其他信息的入口,需要考虑要将哪些信息放在主页上。一篇博客?即将推出的产品摘要?一系列到其他主题的链接?无论您决定将哪些内容放在主页上,都必须确保它们有足够的吸引力,让目标受众留下来。

  • 如何让访问内部网页的用户知道他身处何方?

除非您的网站要求访客注册才能访问,否则访客很可能是通过搜索引擎进入网页的。务必要让访客能够知道他访问的是哪个网站,并指出该网站还有更多他可能感兴趣的信息。通常,您可通过设计和导航实现这个目标。

  • 您的目标是什么?

设计网站的框架时,别忘了您要达成的目标,并避免您的目标因额外的信息或内容而变得模糊不清。

时间: 2024-11-05 23:27:35

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.5 绘制网站线框图的相关文章

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——导读

**前言**在过去的十年中,Web已成为人类社会不可分割的一部分:企业大多都有网站,而电视广告很少有不显示URL的.最能说明问题的一个简单事实是大多数人都知道URL是什么:几年前不知道互联网为何物的人现在通过FaceBook又与高中同学联系上了. Web最大的优点是,即便不是什么大公司,也能在Web上发布信息.您只要有一台能够访问互联网的网站并愿意学习,就能创建自己的网站.您既然选择了阅读本书,显然是对Web发布感兴趣.您之所以学习Web发布,可能是出于工作需要,也可能是旨在寻找新的自我表达途径

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——第1章 何为Web发布 1.1像Web发布者一样思考

第1章 何为Web发布 千里之行,始于足下:这是学习编写.设计和发布网页之旅的第一站,但实际踏上旅程前,您应学习一些简单的基础知识,包括: 万维网(World Wide Web)的工作原理: Web浏览器是做什么用的,用户通常使用哪些浏览器: 何为Web服务器,您为何需要它: 一些有关统一资源定位符(URL)的知识. 当前Web无处不在,因此本章的内容可能有点老生常谈.如果您这么认为,可大致地扫一眼,再进入第2章,迈出创建网页的第一步. 1.1 像Web发布者一样思考 从用户的角度看,您很可能很

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.6 Web托管

2.6 Web托管 您迟早需要将您在本地计算机上创建的网站放到Internet服务器上.这样做之前,您必须确定自己需要什么样的托管协议.最简单的方法是,获取一个这样的Web托管账户,即让您能够将HTML文件.图像.样式表和其他Web内容上传到一台Web服务器.这种方法让您能够在本地轻松地创建网站,并原封不动地发布到服务器. 2.6.1 使用内容管理应用程序另一种选择是使用应用程序将内容发布到Web上.如果您要创建的网站属于已有的类型,市面上有相应的发布工具,这种选择将更合适.无论使用上述哪类应用

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.8 作业

2.8 作业 在本节的第一个小节,将回答一些与网站规划相关的常见问题.接下来,将由您来完成一些测验题,如果有测验题您回答不了,请参阅随后的答案.练习旨在帮助您想出一些创建网站的点子. 2.8.1 问与答问:确保组织有序好像需要做大量的工作.我只想做些简单的事情,可您跟我说必须有计划和线框图.这些步骤确实必不可少吗? 答:如果要做的事情很简单,本章建议您做的大多数工作都不用做.然而,如果要开发多个相互链接的网页,先制定计划将大有裨益.如果您制定计划就动手做,可能发现很难理清头绪,导致结果不符合预期

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.7 作业

1.7 作业 本书的每章都有作业,旨在帮助您复习刚学习的主题.在本节的第一个小节中,将回答一些与Web相关的常见问题.接下来,将由您来回答一些有关Web的问题,而随后列出了这些小测验的答案.在每章的最后都有几个练习,旨在帮助您记住刚学到的Web知识. 1.7.1 问与答问:Web有谁负责运营?这些协议都是由谁控制的?这一切都是由谁管理的? 答:万维网并非由某个组织拥有或控制.鉴于向Web提供信息的独立网站数不胜数,任何单个组织都无法制定相关的规则或指南.然而,有两类组织给Web的外观和发展方向带

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.3 使用Google Chrome 开发者工具

2.3 使用Google Chrome 开发者工具 下载并安装Google Chrome后,启动它并访问http://getbootstrap.com/.Bootstrap是一个通用的网页框架,将在本书后面讨论.就当前而言,它很有用,因为这个网页的源代码易于理解.在Chrome中,选择菜单"更多工具">"开发者工具",这将打开开发者工具,如图2.4所示[1]. 有一个打开开发者工具的快捷键,在Windows中为Ctrl + Shift + I,在OS X中为C

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.2 Web浏览器

1.2 Web浏览器 前面说过,Web浏览器是一款应用程序,您使用它来浏览网页以及在万维网中导航.Web浏览器有很多,适用于您想象得到的任何平台的都有.例如,Windows自带Microsoft Internet Explorer,OS X自带Safari,而Mozilla Firefox.Google Chrome和Opera都可免费下载.另外,通过移动设备和平板电脑使用浏览器的人越来越多.iPhone和iPad自带了Mobile Safari,Android移动平台也自带浏览器.还有其他移动

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.4 统一资源定位符

1.4 统一资源定位符 前面说过,URL指向Web上的一些数据,该数据可以是Web文档.图像.样式表或JavaScript脚本,这些都将在本书后面介绍.URL为查找并访问信息提供了统一而一致的方法. 除在浏览器中直接输入URL来访问网页外,您还可使用URL在文档中创建到另一个文档的超文本链接.因此,无论从什么角度看,URL对您和浏览器在Web上导航来说至关重要. URL包含有关如下方面的信息: 如何获取信息(使用哪种协议:FTP.HTTP还是file): 该信息所在计算机的Internet主机名

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——第2章 准备好工具 2.1网站剖析

第2章 准备好工具 无论是编写图书还是给房间刷漆,您都不会草率行事,抓起刷子就干或立即坐在计算机前敲字,而是先制定完成项目的计划并搜集完成项目所需的材料.您的计划可能很简单--先刷墙再刷天花板,也可能很复杂--详细列出您要写到书中的每项内容. 搜集材料方面亦如此.如果您要给房间刷漆,就需要刷子和油漆,还有防止油漆落在其他地方的东西.同样,如果您要编写图书,就需要安装字处理程序,还可能需要搜集为写作提供支持的研究材料.与其他大多数项目一样,设计并编写网页也需要思考并制定计划,然后再着手处理文本和图