网页的结构化与模块化
日期：2008-08-19 浏览次数：21038 次
网页的结构化与模块化
如果你的大学毕业设计是进行一个网站的设计，对于学计算机专业的学生来说并不是一件引以为豪的事，特别是他所设计的作品不能被采用的时候。我的毕业设计是用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
如果你的大学毕业设计是进行一个网站的设计，对于学计算机专业的学生来说并不是一件引以为豪的事，特别是他所设计的作品不能被采用的时候。我的毕业设计是用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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
