前言：寻找写作灵感？中文期刊网用心挑选的Web模块化下网页设计分析，希望能为您的阅读和创作带来灵感，欢迎大家阅读并分享。
摘要：就当下web在网页设计开发的现状进行分析，在组织信息的过程中参考的基本单位即为网页，在传统设计方式之下，会导致Web应用开发效率不高，增大后期维护任务量。本研究主要结合Web在网页设计开发过程中出现的问题，构建出模块化网页设计方式，并进行模块化网页浏览，从而使开发效率得到提升，减轻维护任务。
关键词：Web；模块化；网页设计；浏览技术
借助Web的模块化网页设计技术，能够有效维护、组织信息，明显优于传统设计方式，大大改善了Web应用设计开发效率。而且在这种网页设计技术的支持下，能够为访问者的浏览提供便利，可以将关键信息呈现出来，全面提高了网页浏览性能。
1Web模块化的网页设计
在开展程序设计工作时，一般都会将反复利用的程序制作为子模块。在对程序段进行运用的过程中，仅需借助语句对子模块进行调用即可，这种设计方式应用的就是模块化程序设计理念。利用Web模块化的设计方式，能够确保开发程序的设计任务不会过于繁重，也有效降低了程序错误问题的发生。如果需要改动程序功能，仅需对相关子模块进行修改，不必要完全修改程序，由此减轻了维护、修改网页程序的任务量。在不断研究和分析众多网页之后，能够得知网站内的页面中包括多种信息，而且相同信息的量也较多，包括：广告、版权信息以及标头等。参考程序设计过程中所运用的模块化设计理念，将其运用到网页设计方面，由此形成了模块化网页设计基础[1]。针对网页开展模块化设计，能够使网页开发设计任务量得到明显的减轻，同时也容易对网站开展后期修改、维护等操作，从而更加高效化的组织信息，最终能够达到使Web性能得到全面改善的效果。Web模块化网页设计的核心理念即为：基于Web，将基本单位设定为模块，完成组织信息的操作。主模块、多个子模块共同组成了网页，其中主模块与程序主函数作用相同，可以将其视作网页主干。程序必须具备主函数，同样网站页面也应拥有其主模块。从本质上看，网页主模块像容器一样，能够对子模块进行存放，也能够对多种页面元素进行存放，例如：图片和文本等。而网页子模块的主要功能就是基本页面元素进行组织、存放，一般会将应用率较高的元素制作为子模块，会借助独立模块文件的方式来对子模块进行存放处理。对页面进行制作的过程中，利用子模块能够针对页面元素开展相关操作，例如：删除或插入等[2]。结合实际需求，还可以将其余子模块嵌入到子模块内，进行多层嵌套处理。通常认为网页包括脚注模块、左/右导航模块、主内容模块以及标头模块五大子模块，在这种网页结构下开展相关设计工作。网页模块结构示意图详见下图：在网站的网页中，上脚注模块、标头模块均固定不变，而且左/右导航两大模块基本上也相类似，不会出现较大的变动。网页存在的差异主要在于不同的主内容模块，但是在主内容模块内所含有的详细内容，不同网页中也会出现重复的现象，在这种情况下就需要将子模块嵌套到网页主内容模块内，从而达到重用信息的目的。
2Web模块化网页的浏览
在对应用模块化网页设计技术时，可以将网页划分为五个不同的子模块，从逻辑层面来看各个子模块彼此独立。网页中的左导航模块、右导航模块的主要作用就是对站内、外访问频率较高的链接进行供应，包括站点链接、网页链接两大类。网站、公司的版权信息以及商标信息都能够存放在脚注模块内，网页关键在于主内容模块，主内容模块的差异才形成了不同的网页。借助传统方式对模块化网页进行浏览的过程中，Web服务器能够收到由客户端浏览器所发出的HTTP请求。在请求送达之后，Web服务器会向客户端浏览器传送页面主模块内容[3]。对于主模块内容，浏览器能够依据前后顺序开展解读处理，若页面涵盖的元素有子模块、图片等，则浏览器会将元素HTTP请求传输至Web服务器。当子模块、图片等元素被浏览器所接收时，即可在网页主模块内进行插入，在接收全部元素之后，即可构成整体页面。借助该浏览技术对网页进行浏览的过程中，面向访问者所呈现的是由上至下的页面内容。若网络带宽良好，即仅需较短时间就能够打开页面，这种情况下借助传统页面浏览技术即可。使用者在对网页进行浏览的过程中，关注点主要放在页面信息上，之后才会注意到网页结构设计美观性、合理性等内容。这就表示玩野主内容模块下的信息才是使用者所关注的要点。但是若网络带宽相对较窄的情况下，需要耗费长时间打开页面，使用者会不自主在等待过程中观察网页其他模块，包括有导航模块、表模块等模块所涵盖的信息，主内容模块之后才会呈现出来。若在打开页面的过程中，最先呈现的是网页主内容模块信息，则算是理想状况，然而在等待时通常会因为标头模块较大，Web服务器会显示浏览器连接超时，并未对主内容模块进行呈现，页面剩下内容也同样无法呈现出来。这样就会让使用者不能对网页内容进行查看，再次对页面进行刷新也无法呈现。在处理这一问题的过程中，就需要找到在宽带、时间有限的情况下，有效呈现页面主要内容的方式，而且要做到在向访问者呈现信息的过程中，要按照主内容模块、其他模块的顺序来进行。为了达成这种特殊顺序页面浏览目的，对网页设计提出了更高的要求，设计人员需要对也页面不同模块赋予权值，进行页面浏览的操作时，浏览器也要依据模块权值大小的排序来对页面各个模块进行呈现[4]。页面设计人员可以借助对不同页面模块权值大小调整的方式，即针对最先呈现的关键模块赋予的权值较大，这样就实现了对模块呈现顺序的合理安排。
3技术实现
Web模块化网页技术明显优于传统Web技术，但是后者无法起到直接支持的作用，所以不仅需要扩充HTML语言，同时还应合力扩充浏览器、Web服务器。
3.1扩充HTML语言
要想发挥Web模块化网页技术的作用，需要应用到HTML语言，并对此进行适当的扩充处理。首先，可以将模块标示符增添到HTML语言内。可以将标示模块的标示符〈mod〉增添到HTML标示符集内。标示符〈mod〉同包括〈img〉在内的多种页面元素相比，均具备不同属性，〈mod〉的核心属性意义主要为：1）name属性。其主要作用就是命名不同模块；2）src属性。该属性主要是对模块文件的来源进行标注，以src="./head.mod'为例，其主要体现的就是模块下同级目录head.mod文件是模块文件的来源；3）bgcolor属性。该模块可以对模块背景颜色进行显示；4）weight属性。该属性能够呈现出使用者对于模块内容的关注性，在对页面进行浏览时，浏览器会最先将拥有较大权值的模块进行呈现；5）height属性。该属性表示页面中模块显示高度；6）width属性。该属性表示页面中模块显示宽度。其次，主模块文档。对模块化网页技术进行运用的过程中，网页文档、现存网页文档具有兼容性，非显示页面元素同样涵盖在主模块文档内，例如：〈HEAD〉〈/HEAD〉、〈HTML〉〈/HT⁃ML〉以及〈BODY〉〈/BODY〉等，在对文件进行存放的过程中，还是需要应用htm、html的后缀[5]。最后，子模块文档。在存放过程中各子模块形式均为单独文件，采用mod的后缀。子模块文档内涵盖的页面元素仅限于页面主体呈现信息的匀速，并不包括呈现全部页面信息的元素。开展网站设计开发工作的过程中，能够针对不同页面均会运用的共同内容构成子模块，包括：广告、版权信息、标头等等。根据需求，也可以针对子模块开展删除、添加或修改等处理。因为子模块位置并非固定的，所以能够将其在页面任意进行放置，比如在页面中放置广告子模块时，可以选择右下角、左上角或右侧中间等多个位置。页面设计时，也要考虑到实际状况，将下一级子模块填入到子模块中，这种嵌入层次没有限制，然而考虑到网站结构烦琐性，最理想嵌入层次应≤2层。完成修改模块的操作之后，会对全部运用到子模块的页面产生影响。
3.2扩充客户端浏览器
扩充HTML语言之后，要想实现对语言的有效支持，从而根据子模块权值分布来按照一定排序对子模块内容进行呈现，还应适当扩充浏览器。在对浏览器进行扩充之后，也要兼容多种功能，并允许继续浏览非结构化页面。浏览器在完成扩充之后，对页面进行浏览时的步骤具体为：首先，Web服务器接收由浏览器所发出的相关页面URL请求；其次，向浏览器传输Web服务器请求页面相关主模块文档；然后，基于传统方法下，浏览器解读文档，针对全部〈mod〉标示符，对最大weight属性值进行选取，同时结合src属性值，将有关子模块文档URL请求传输给Web服务器；之后，面向浏览器，Web服务器对子模块文档进行发送；最后，浏览器能够基于主文档内，嵌入子模块文档，并对文档进行组织和呈现。在对浏览器进行扩充处理后能够借助网络有线宽带资源进行有效运用，应面向访问者最先呈现页面主内容，逐次呈现整个页面。网站设计人员借助对特定子模块赋予取值的途径、在页面主模块放置特定子模块的不同方式，最先对选定内容进行呈现。
3.3扩充Web服务器
在对Web服务器进行扩充时，也要保证能够兼容之前的功能。在扩充过程中，可以对mod后缀文件进行识别。浏览器在对该类文件进行请求后，无须进一步处理，仅向浏览器传输文本文件即可。
4结语
在信息技术和资源快速发展的过程中，当前首要任务就是有效维护、组织Web中的信息，提升Web页面的浏览性能。Web的模块化网页设计技术建立在模块化程序设计理念的基础之上，该技术在信息浏览、维护数据以及快速制作网页等上的应用均具有较高的应用价值和参考意义。
作者:汤孝云 徐明伟 单位:合肥滨湖职业技术学院教务处