分享
 
 
 

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

王朝asp·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

网页的结构化与模块化

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

想法的由来和基本思路

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

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

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

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_left和main_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 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

'显示逻辑:flag为1时不显示

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写完后,再改成纯代码方式的网页对程序员来说工作量太大。

页面结构化与模板的比较

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有