網(wǎng)頁(yè)元素智能顯示與生成的方法

紀(jì)宏偉， 李 萍， 朱亞林

(南通師范高等專科學(xué)校 1. 數(shù)理系；2. 信息技術(shù)系，南通 226010)

網(wǎng)頁(yè)元素智能顯示與生成的方法

紀(jì)宏偉1， 李 萍2， 朱亞林2

(南通師范高等專科學(xué)校 1. 數(shù)理系；2. 信息技術(shù)系，南通 226010)

利用FSO組件和動(dòng)態(tài)編程語(yǔ)言，實(shí)現(xiàn)了批量圖片在頁(yè)面一次性顯示和動(dòng)態(tài)增減的功能。采用相同的思路，實(shí)現(xiàn)對(duì)于多個(gè)文件的下載鏈接的智能生成，從而有效避免在網(wǎng)頁(yè)頁(yè)面上對(duì)文件千篇一律的重復(fù)操作，自動(dòng)化程度和執(zhí)行效率都非常高。利用這個(gè)實(shí)用的功能，可為網(wǎng)站實(shí)現(xiàn)某些特殊的用途帶來(lái)幫助。

FSO組件； 動(dòng)態(tài)性； 智能顯示； 生成

0 引言

在網(wǎng)頁(yè)中插入圖片是制作網(wǎng)頁(yè)的基本技能。通常情況下，插入圖片是在Dreamweaver軟件的可視化操作界面下使用菜單命令或者使用插入工具欄來(lái)完成，也可使用標(biāo)簽，其屬性包括src、alt、width、heigu、border等，其中src不可或缺，基本語(yǔ)法格式是[1]。但是如果圖片非常多，以上方法就都不太適合了。例如用文件菜單，一個(gè)圖片一個(gè)圖片插入，其繁瑣程度可想而知。若用代碼，那么不僅需要多次對(duì)代碼進(jìn)行復(fù)制粘貼，而且還需要一個(gè)一個(gè)錄入文件名，設(shè)想有200張圖片，文件名和屬性各不相同，那將是怎樣的麻煩。利用FSO組件，通過(guò)編寫asp代碼實(shí)現(xiàn)了批量圖片在頁(yè)面一次性顯示的功能[2-4]，采用相同的思路，對(duì)于多個(gè)文件的下載鏈接，也做到了讓其在同一網(wǎng)頁(yè)上智能生成，批量顯示，有效避免了重復(fù)操作，自動(dòng)性強(qiáng)，智能程度高，不失為一項(xiàng)實(shí)用功能。

1 網(wǎng)頁(yè)圖片批量顯示

第一步：?jiǎn)?dòng)Dreamweaver網(wǎng)頁(yè)編輯軟件，將文件命名為index，切換到代碼模式，在標(biāo)簽的上部添加如下代碼：

<%

Const UploadDir="pic/" Const Dnum=8

Function IsObjInstalled(strClassString)

IsObjInstalled = False

Err = 0

Dim xTestObj

Set xTestObj = Server.CreateObject(strClassString)

If 0 = Err Then IsObjInstalled = True

Set xTestObj = Nothing

Err = 0

End Function

dim strFileName

dim totalPut,CurrentPage,TotalPages

dim TruePath,fso,theFolder,theFile,whichfile,thisfile,FileCount,TotleSize

strFileName="?"

TruePath=Server.MapPath(UploadDir)

If not IsObjInstalled("Scripting.FileSystemObject") Then

Response.Write ""

Else

set fso=CreateObject("Scripting.FileSystemObject")

%>

本段代碼的作用是檢測(cè)服務(wù)器是否支持FSO，檢查其是否已經(jīng)安裝，以便后面程序的調(diào)用。這一步不可或缺，否則程序會(huì)報(bào)錯(cuò)。FSO的英文全稱是File System Object，簡(jiǎn)稱FSO組件，是操作文件的基本組件[5-6]。Const UploadDir是定義存放文件的目錄，可以自行定義存儲(chǔ)位置和目錄名，本例是把所有需要在網(wǎng)頁(yè)上顯示出來(lái)的圖片存放在pic目錄下，Const Dnum定義每列顯示的圖片數(shù)量。

第二步：在之間添加如下代碼：

<%

if fso.FolderExists(TruePath)then

FileCount=0

TotleSize=0

strTemp=strTemp&"

strTemp=strTemp&"

Set theFolder=fso.GetFolder(TruePath)

For Each theFile In theFolder.Files

FileCount=FileCount+1

if FileCount mod Dnum =0 then

strTemp=strTemp&"

strTemp=strTemp&"

end if

TotleSize=TotleSize+theFile.Size

Next

strTemp=strTemp&"

strTemp=strTemp&"

end if

Response.Write(strTemp)

%>

本代碼的作用是先循環(huán)讀取TruePath目錄下的所有文件，然后把當(dāng)前圖片顯示出來(lái)。這樣的話，只要把圖片放到pic目錄下，頁(yè)面上將會(huì)自動(dòng)顯示這些圖片，有多少圖片就顯示多少，智能程度非常高。參考網(wǎng)址http://www.qiusuowu.com/download/tubiao，在此頁(yè)面上圖標(biāo)有上千之多，但全部可視化顯示，就是這樣制作出來(lái)的。顯然，用插入圖片的方式來(lái)完成這些工作是非常不現(xiàn)實(shí)的。

2 文件下載鏈接批量顯示

同樣，當(dāng)需要?jiǎng)?chuàng)建文件下載鏈接，并且數(shù)目非常多時(shí)，也可仿照上面的思路進(jìn)行設(shè)計(jì)。首先仍然是判斷FSO是否存在，并用Const UploadDir=" "來(lái)指定存放文件的目錄，這與上例相同，之后在之間添加如下代碼：

<%

if fso.FolderExists(TruePath)then

FileCount=0

TotleSize=0 Set theFolder=fso.GetFolder(TruePath)

For Each theFile In theFolder.Files

FileCount=FileCount+1

strTemp=strTemp&"

TotleSize=TotleSize+theFile.Size

Next

end if

%>

本段代碼采用FolderExists 方法，其作用與上面類似，也是讀取指定目錄下的所有文件，并顯示出來(lái)。先判斷TruePath 這個(gè)目錄是否存在，之后循環(huán)讀取TruePath目錄下的所有文件，每循環(huán)一次，變量加1，計(jì)算這些文件大小的總數(shù)。這樣的話，只需要把供下載的所有文件存放在某個(gè)指定的目錄下，程序就會(huì)自動(dòng)識(shí)別這些文件，并將它們的下載鏈接自動(dòng)顯示在頁(yè)面上[7]。通過(guò)這種自適應(yīng)的設(shè)計(jì)，避免了在Dreamweaver中對(duì)文件下載鏈接千遍一律的重復(fù)設(shè)置，提高了工作效率。

3 功能的深化拓展

以上的程序只針對(duì)單個(gè)文件夾，也就是目錄只指定一個(gè)，然后把相關(guān)圖片或文件放在該目錄下，實(shí)際使用的時(shí)候，這有一定的局限，因?yàn)閳D片或文件可能需要分組放到不同的目錄下，如何分批量、分目錄地智能化顯示呢？所以有必要對(duì)功能做進(jìn)一步的深化、拓展，從單個(gè)目錄到多個(gè)目錄而保持各個(gè)目錄下的文件鏈接一次性生成。

以下載鏈接的創(chuàng)建為例，設(shè)想現(xiàn)在的具體目的是這樣的：A類的文件放在file1目錄下，B類的文件放在file2目錄下，……，然后在窗口右側(cè)放置一個(gè)懸浮分類導(dǎo)航，當(dāng)點(diǎn)擊file1，頁(yè)面上顯示A類的所有文件下載鏈接，若點(diǎn)擊file2，即顯示B類的所有文件下載鏈接，依此類推，其功能和結(jié)構(gòu)示意圖，如圖1所示。

圖1 功能和結(jié)構(gòu)示意圖

實(shí)現(xiàn)以上功能需要在之間添加兩段核心代碼，其中之一要達(dá)到類似菜單導(dǎo)引的作用，鑒于瀏覽者的訪問(wèn)習(xí)慣，一般考慮在頁(yè)面右端位置提供一個(gè)有效的指向標(biāo)志，以便引導(dǎo)瀏覽者有條理地在各個(gè)目錄之間切換；其中之二是確保當(dāng)點(diǎn)擊某一目錄時(shí)，該目錄下的文件名能顯示出來(lái)，并且其下載鏈接同步自動(dòng)生成。因此在設(shè)計(jì)這段代碼時(shí)，先要判斷是否選擇了右端分類導(dǎo)航下的文件目錄，若選擇了對(duì)應(yīng)目錄，再判斷這個(gè)目錄是否存在，若存在則輸出該目錄內(nèi)的所有文件名和下載鏈接，若沒(méi)有選擇目錄，則讀取分類導(dǎo)航下的第一個(gè)目錄，并輸出該目錄下的所有文件名和下載鏈接。這樣的話，創(chuàng)建文件下載鏈接的工作，簡(jiǎn)單到只需要?jiǎng)?chuàng)建一下目錄，并把文件分門別類放置在相應(yīng)的目錄下就可以了，至于各目錄下文件的下載鏈接生成則交給程序自動(dòng)完成[8]，不需要任何手工操作。

4 總結(jié)

當(dāng)我們需要將文件進(jìn)行條理性地管理，同時(shí)又需要將下載鏈接顯示在頁(yè)面以方便別人隨時(shí)隨地進(jìn)行下載時(shí)，以上所述思路不失為很好的參考，具有啟發(fā)意義。在如何實(shí)現(xiàn)圖片批量顯示，文件下載鏈接自動(dòng)生成等這些實(shí)用性功能方面，文中所述的程序也有值得參考、借鑒和模仿的地方，當(dāng)然其在實(shí)際應(yīng)用中應(yīng)該還有改善、加工提高的地方，我們希望在今后的研究中，能對(duì)以上思路和方法進(jìn)行拓展和完善，以期更進(jìn)一步提高它的應(yīng)用效率和實(shí)踐價(jià)值。

[1] 徐洪霞. 網(wǎng)站設(shè)計(jì)必學(xué)的66個(gè)實(shí)例[M].上海：上海科學(xué)技術(shù)出版社，2008.

[2] 傅豐. 淺議ASP、JSP和PHP [J].微型電腦應(yīng)用，2004，20(2)：59-62.

[3] 李偉民，何偉，楊琳. 基于web的圖片相關(guān)內(nèi)容到數(shù)據(jù)庫(kù)存取的ASP實(shí)現(xiàn)[J].微型電腦應(yīng)用，2009，25(9)：52-54.

[4] 姜昌華，朱敏.運(yùn)用組件技術(shù)開發(fā)WEB應(yīng)用程序[J].微型電腦應(yīng)用，2002，18(8)：35-38.

[5] 紀(jì)宏偉. ASP頁(yè)面中一種簡(jiǎn)單實(shí)用評(píng)論功能的設(shè)計(jì)[J].中小學(xué)電教，2016，(1-2)：141-143.

[6] 紀(jì)宏偉，朱亞林.一種用于信息收集的ASP頁(yè)面設(shè)計(jì)方法[J].天津科技，2016，43(3)：54-57.

[7] 求索屋.網(wǎng)頁(yè)圖片智能性一次性顯示實(shí)例[EB/OL]. (2015-03-17). http://t.qiusuowu.com/email/fsoandasp/file/.

[8] 求索屋.下載鏈接智能生成實(shí)例[EB/OL]. (2015-06-12).http://t.qiusuowu.com/email/fsoandasp/allfile/.

Method for Intelligent Display and Generation of Web Page Elements

Ji Hongwei1，Li Ping2，Zhu Yalin2

(1.Department of Mathematics and Physics， Nantong Teachers College；Nangtong 226010，China; 2.Department of Information Technology， Nantong Teachers College；Nangtong 226010，China)

By using FSO components and dynamic programming language, the batch image on the page display and one-time dynamic function changes. By the same method, multiple file download link can be intelligenly genered, so as to avoid in downloading the Web page file with the same repeated operation. The degree of automation and efficiency of the operation is very high. Using this utility function, it can help to realize some special purposs for the website.

FSO component； Dynamic property； Intelligent display； Generation

全國(guó)教育信息技術(shù)研究2015年度青年專項(xiàng)課題(156242691)；江蘇高等教育學(xué)會(huì)十三五規(guī)劃課題立項(xiàng)建設(shè)一般項(xiàng)目(16YB161)；江蘇省高校教改項(xiàng)目(2015JSJG391)；江蘇省高校青藍(lán)工程基金項(xiàng)目(2014)。

紀(jì)宏偉(1977-)，男，通州人，南通師范高等專科學(xué)校，副教授，碩士，研究方向：應(yīng)用數(shù)學(xué)、數(shù)學(xué)教育、信息技術(shù) 李萍(1979-)，女，如皋人，南通師范高等專科學(xué)校，講師，碩士，研究方向：計(jì)算機(jī)教育、教育技術(shù) 朱亞林(1982-)，男，如東人，南通師范高等專科學(xué)校，講師，碩士，研究方向：計(jì)算機(jī)應(yīng)用技術(shù)、信息技術(shù)教學(xué)

1007-757X(2017)03-0016-02

TP311

A

2016.11.18)