网页的结构化与模块化(新手帖)

原创 2004年08月27日 23:02:00

网页的结构化与模块化<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

如果你的大学毕业设计是进行一个网站的设计,对于学计算机专业的学生来说并不是一件引以为豪的事,特别是他所设计的作品不能被采用的时候。我的毕业设计是用ASP做一个教务管理系统,虽然我的并不喜欢这个毕设经历,但是通过毕设我对使用ASP设计网页有了许多认识,特别是关于如何减少页面的重复设计,这是一篇比较初级的帖子,又不妥之处还请各位网友批评指正。

想法的由来和基本思路

一个网站的设计,首先应该是页面风格的整体设计,然后才是代码的编写。我在毕业设计中因为老师的要求,多次改变了页面的风格,导致了相同功能页面的重复书写。这几次重复加大了我的工作量,也使我觉得ASP网页设计比较恶心。几经修改后我常常问自己,有没有好的办法,使页面修改对功能实现的影响不大呢?我想到了程序设计中的结构化和模块化设计。

所谓结构化是把页面框架分成几个大的部分,比如把页面分成的标题栏、菜单栏、左导航栏、页面主体和页脚几个部分。在我设计的网站中各个页面多数是使用这个框架的。使用框架是为了后面的设计比较简单,为了简化页面各个部分的设计,所以在经常要改变的地方是我使用函数来完成的,因为函数可以在实现的页面中方便的改变。

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

由于模板是整个网站的基础,所有的其他页面都是在他的基础上完成的,所以我在系统中备份了一页。根据需要我把它分为了三块:第一块是页面左边“信息栏”的内容;第二块是页面的右边的,也是页面的主要内容的显示部分;第三块包括页面主体,同时还在相应的部分调用了第一块函数和第二块函数。对应函数片断如下:

sub main()

root=0

'定义网页的位置,为的是正确的现实图片和联接。0为根目录,1为一级子目录,以此类推。

dim images(6)

images(0)="images/bg.gif"

……

images(5)="images/03.gif"

'下面的双重循环是配置temp.asp中出现图片对root的相对位置

for i=0 to 5

    while j<>root

       images(i)="../"+images(i)

       j=j+1

    wend

next

'下面是页面的书写,<html><body>什么的

……

Main_left()

……

Main_right()

……

end sub

function main_left()

response.Write("left")

end function

function main_right()

response.Write("right")

end function

%>

调用页面的内容如下:

<!--#include file="tmp.asp" -->

<%

main()

%>

只要页面改写相应的main_leftmain_right两个函数就可以改写也面对应位置的显示内容,在测试页面中,我只让两个函数输出两句话:左部显示left,右部显示right示例图如下:

在系统的编写过程中,第一次产生模块化的念头是在页面的第二次修改阶段(把代码加入最后一版的模板时)。我用HTML写了一个导航栏,并把它加入了几乎所有的系统页面(复制+粘贴)。这个导航栏中有大量的重复代码,代码十分长,写在网页中也不美观。在复制完后我发现在编辑时,我设置的网格的宽度是一定的,可是系统显示的却不一样,更重要的是我发现每当我修改了一个导航栏的图片后要手动更新近20个页面!这实在是太不方便了。为了便于菜单的移植,我决定把它模块化——写入一个VBScript函数保存到一个单独的文件中。程序如下:

function automenu()

dim link(10)

dim pic(10)

link(1)="default.asp"

……

link(9)="liuyuan.asp"

if session("MM_UserAuthorization")=1 then link(2)=" xxxx.asp" end if

if session("MM_UserAuthorization")=1 then link(5)="xxf.asp" end if

pic(1)="images/home_button"

……

pic(9)="images/liuyanban"

bkp="images/news_r8_c8.gif"

if root<>1 then

for i=1 to <?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />9校正图片路径

    link(i)="../"+link(i)

    pic(i)="../"+pic(i)

    bkp="../images/news_r8_c8.gif"

next

end if

if session("mm_username")<>"" then

    response.Write("<table width='800' border='0' background='"+bkp+"' bgcolor = '#D6D3CE'>" )

    response.Write("<tr>")

    for i=1 to 9

    '显示逻辑:flag1时不显示

       flag=0

       if (session("MM_UserAuthorization")=1 and  i=4) or (session("MM_UserAuthorization")=1 and i=8) then flag=1 end if

       if (session("MM_UserAuthorization")<>1 and  i=6) or (session("MM_UserAuthorization")<>4 and i=8) then flag=1 end if

       if (session("MM_UserAuthorization")<>1 and  i=7) then flag=1 end if

       'if not (session("MM_UserAuthorization")<>4 and i=8) then flag=1 end if

       if flag<>1 then

       response.Write("<td width='90'>")

       str="<A href='"+link(i)+"'>"

       response.Write(str)

       str="<IMG border=0 name=homeButton onmouseout='this.src='"

       str="<IMG border=0 "

       str=str+"height=22 name=homeButton "

       str=str+"onmouseout="+chr(34)+"this.src= '"

         str=str+pic(i)+"_a.gif';"+chr(34)

         str=str+" onmouseover=" +chr(34)+"this.src='"+pic(i)+"_b.gif';"+chr(34)

         str=str+" src="+chr(34)+pic(i)+"_a.gif"+chr(34)+" width=90>"

         response.Write(str)        

         response.Write("</a>")

         response.Write("</td>")

         response.Write("<td width='20'>&nbsp;</td>")

    end if

next

response.Write("</tr>")

response.Write("</table>")

end if

end function

为了发挥循环的作用,我使用了两个数组来存放导航栏中要使用的图片的名称和链接地址。然后,根据用户级别,写出适合他们的导航条。

导航栏的模块(函数)化,大大地减少了页面的代码行数,增加了代码的可读性。它还增加了页面的可维护性,现在如果要对导航栏进行修改,只要更改函数中相应的代码即可实现所有页面导航栏的更新。

结构化的优点

页面设计模块化的优点是显而易见的。它减少了代码的长度,使页面代码看起来十分简洁;它减少了程序员需要注意的网页文件结构,只要注意自己代码的编写和处理;它还减少了程序员的工作量,如果要改写页面框架的内容,只要改写模板即可使所有使用此模板的页面得到更新而不用改写其他页面;结构化后由于使用的都是ASP脚本,使得服务器在处理页面时不用在几个解释器之间切换,据微软官方的说法,纯脚本型ASP网页能提高处理器的效能10%左右。

结构化的缺点

页面的结构化又上面的优点,但是它的缺点也是非常明显的:它不是HTML页面,大多数的网页编辑器无法直接浏览和修改,这给页面设计人员(美工)造成了一些困难。如果先用HTML写完后,再改成纯代码方式的网页对程序员来说工作量太大。

页面结构化与模板的比较

页面的结构化在某种程度上说也是使用了模板的概念,但是就我个人来说结构化设计比模板使用方便。首先,模板要在模板页中插入可编辑区域在编辑区域外,无法作修改。这可能在某些时候比较方便,但在某些时候也就意味着你失去了修改叶面的自由;其次,在模板中无法把<%%>中的代码贴入由他生成的页面,而模块化设计不存在这个问题;再次,使用模板不能减少代码的长度,用模板生成的页面代码总是比模板多,页面代码不够简洁,而是用模块化设计则可以实现此目标。

模块化编程 自顶向下编程 自底向上编程 结构化编程 面向对象编程 面向过程编程

模块化程序设计(modular programming),简单地说就是程序的编写不是开始就逐条录入计算机语句和指令,而是首先用主程序、子程序、子过程等框架把软件的主要结构和流程描述出来,并定义和调试好...
  • li1914309758
  • li1914309758
  • 2016年09月08日 19:44
  • 944

html新手引导

新手引导实现原理:将说明图片定位到相应位置,按照顺序显示。用绝对定位 1.网页蒙版设置 html{ height:100%} body{  height:100%} #mask{ height:1...
  • XINGXUEXX
  • XINGXUEXX
  • 2015年09月16日 17:04
  • 340

C#流程控制语句

【宏观总结】          语句是程序完成一次完整操作的基本单位,有一些复杂的程序只有顺序语句是不能实现的,所以流程控制语句就显得异常重要!流程控制包括三大种:选择语句,迭代语句,跳出语句,宏观图...
  • zh15732621679
  • zh15732621679
  • 2015年10月06日 19:36
  • 674

网站新手引导(js+jquery)

js: 无标题文档 *{ margin:0; padding:0} html{ height:100%} body{ background:url(images/body.png) cent...
  • u013499771
  • u013499771
  • 2015年08月05日 16:19
  • 1077

Java实现的基于模板的网页结构化信息精准抽取组件:HtmlExtractor

HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件,本身并不包含爬虫功能,但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlE...
  • promise_LOVE
  • promise_LOVE
  • 2015年01月31日 16:04
  • 677

jsp、struts、spring、mybatis实现前端页面功能模块化拆分

前端页面功能模块化拆分 当一个系统的功能很多时,不可能所有功能模块的页面都写在一个页面里面,这时就需要将不同功能模块的页面拆分出去,就像模板一样,需要哪块的功能就调用哪块的页面,然后加载相应数据...
  • h254532699
  • h254532699
  • 2017年01月10日 13:23
  • 873

android新手总结帖

学习android也有将近十天了,今天想把最近的一些知识总结一下。 一、关于环境搭建 adb的应用,命令行管理模拟器,包括豌豆荚等手机管理工具就是通过调用adb命令执行相关操作。安装apk文件  ad...
  • wshcong
  • wshcong
  • 2014年02月27日 18:21
  • 404

适合新手使用的网页设计软件有哪些

Microsoft FrontPage 如果你曾对Word很熟悉,那么相信你用 FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页,你能真正体会到“功能强大,...
  • jiangmy927
  • jiangmy927
  • 2016年10月19日 14:45
  • 863

实现一般Dz论坛的刷帖功能

本文用于记录一个简单的自动论坛回帖功能,只能用于一般DZ论坛,在河畔上做过测试,功能比较简单,基于HTTP1.0 而且是绑定了我自己的账号与电脑。后续可以试着实现其他功能。 直接上代码吧!pa...
  • weiguang111
  • weiguang111
  • 2016年01月05日 16:46
  • 850

前端开发模块化思想设计浅薄看法

这里所讲的只是我个人针对前端开发的模块化思想设计的一些浅薄看法。   什么是模块化思想?模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发,每个模块之间没有必然的联系...
  • qindanwei0215
  • qindanwei0215
  • 2017年01月18日 18:23
  • 680
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页的结构化与模块化(新手帖)
举报原因:
原因补充:

(最多只允许输入30个字)