Dreamweaver網(wǎng)頁設(shè)計(jì)與制作指南-第18章

1、第18章查詢網(wǎng)站的制作本章介紹用ASP開發(fā)的一個(gè)查詢網(wǎng)站的制作流程，包括分析網(wǎng)站的構(gòu)思、結(jié)構(gòu)策劃、配置ASP開發(fā)環(huán)境、建立本地站點(diǎn)、創(chuàng)建并連接數(shù)據(jù)庫(kù)文件。本章重要知識(shí)點(diǎn)：如何查看站點(diǎn)地圖創(chuàng)建數(shù)據(jù)庫(kù)以及建立數(shù)據(jù)庫(kù)連接文件第18章查詢?cè)兙W(wǎng)站的的制作如何制作作表單以以及表單單中各元元素屬性性的設(shè)置置設(shè)置請(qǐng)求求變量如何使用用程序設(shè)設(shè)置段落落換行制作信息息分頁框架頁的的使用及及應(yīng)用18.1構(gòu)思意圖圖按客戶的的需求，該查詢?cè)兙W(wǎng)站定定位為“吉林查查詢網(wǎng)”，即將將吉林省省中的企企業(yè)按區(qū)區(qū)域劃分分，并按按地區(qū)分分配二級(jí)級(jí)域名，通過該該網(wǎng)站可可以讓企企業(yè)免費(fèi)費(fèi)加入查查詢網(wǎng)，并通過過增值服服務(wù)為企企業(yè)生成成名片，方

2、便查查詢不同同地區(qū)不不同類別別的企業(yè)業(yè)名稱，為企業(yè)業(yè)與企業(yè)業(yè)之間、客戶和和企業(yè)之之間提供供了開放放式的平平臺(tái)。18.2結(jié)構(gòu)設(shè)計(jì)計(jì)及布局局設(shè)置在定位了了網(wǎng)站的的構(gòu)思策策劃以后后，就要要對(duì)網(wǎng)站站的整體體結(jié)構(gòu)進(jìn)進(jìn)行設(shè)置置，并通通過圖片片和文字字等基本本元素對(duì)對(duì)網(wǎng)站進(jìn)進(jìn)行相應(yīng)應(yīng)的布局局設(shè)置。18.2.1網(wǎng)站結(jié)構(gòu)構(gòu)設(shè)計(jì)在正式制制作網(wǎng)站站之前，首先進(jìn)進(jìn)行網(wǎng)站站目錄結(jié)結(jié)構(gòu)的策策劃與分分析，然然后進(jìn)行行網(wǎng)站布布局的設(shè)設(shè)置，以以方便對(duì)對(duì)網(wǎng)站進(jìn)進(jìn)行管理理和更新新。18.2.2網(wǎng)站布局局設(shè)置界面采用用簡(jiǎn)單的的設(shè)計(jì)，為不同同地區(qū)的的查詢分分站設(shè)置置不同的的Logo和Banner。頁面布布局采用用左右結(jié)結(jié)構(gòu)，左左側(cè)欄放

3、放置企業(yè)業(yè)的類別別，右側(cè)側(cè)放置明明星企業(yè)業(yè)以及推推薦企業(yè)業(yè)。18.3分析站點(diǎn)點(diǎn)地圖為該網(wǎng)站站所有的的目錄建建立一個(gè)個(gè)站點(diǎn)，使得ASP文件可以以在瀏覽覽器中運(yùn)運(yùn)行，首首先要在在DW8中配置ASP的運(yùn)行環(huán)環(huán)境。下下面補(bǔ)充充介紹如如何查看看站點(diǎn)中中各頁面面之間的的超級(jí)鏈鏈接。18.4數(shù)據(jù)庫(kù)分分析制作ASP的網(wǎng)站，必須應(yīng)應(yīng)用數(shù)據(jù)據(jù)庫(kù)才能能完成整整個(gè)網(wǎng)站站數(shù)據(jù)的的更新、查詢、編輯等等操作，本例使使用的是是Access數(shù)據(jù)庫(kù)jlcx.mdb，使用了了“admin”、“dengji”、“entercard” 3個(gè)表。18.5制作CSS樣式在制作網(wǎng)網(wǎng)站之前前，首先先要為網(wǎng)網(wǎng)站定制制相應(yīng)的的CSS樣式，建建立C

4、SS樣式表。本例中中所使用用的CSS樣式表有有main.css和style.css，前一個(gè)個(gè)應(yīng)用首首頁和分分站及查查詢模板板，后一一個(gè)應(yīng)用用于后臺(tái)臺(tái)管理及及企業(yè)名名片樣式式。18.6準(zhǔn)備網(wǎng)頁頁素材和和制作軟軟件在制作網(wǎng)網(wǎng)頁過程程中，需需要使用用的軟件件有UleadGIFAnimator和Photoshop，因本例例所實(shí)現(xiàn)現(xiàn)的主要要是查詢?cè)児δ?，因而在在界面美美化方面面沒有過過多的要要求，主主要讓瀏瀏覽者使使用方便便，操作作快捷。18.7配置ASP環(huán)境制作ASP的網(wǎng)站，首先要要指定硬硬盤中的的某一文文件夾為為本地站站點(diǎn)，并并在DW8中配置站站點(diǎn)的相相關(guān)參數(shù)數(shù)。18.8創(chuàng)建數(shù)據(jù)據(jù)庫(kù)運(yùn)行Access

5、軟件，為為本例創(chuàng)創(chuàng)建數(shù)據(jù)據(jù)庫(kù)及數(shù)數(shù)據(jù)表。18.8.1建立jlcx.mdb數(shù)據(jù)庫(kù)本節(jié)建立立jlcx.mdb數(shù)據(jù)庫(kù)。18.8.2建立admin數(shù)據(jù)表本節(jié)建立立admin數(shù)據(jù)表。18.8.3建立dengji數(shù)據(jù)表本節(jié)建立立dengji數(shù)據(jù)表。18.8.4建立entercard數(shù)據(jù)表本節(jié)建立立entercard數(shù)據(jù)表。18.8.5定義數(shù)據(jù)據(jù)表初始始值新建的數(shù)數(shù)據(jù)表中中值都為為空，為為了設(shè)計(jì)計(jì)的需求求，先將將數(shù)據(jù)表表設(shè)置初初始值。18.9制作數(shù)據(jù)據(jù)庫(kù)連接接文件在DreamweaverCS4中可以自自定義數(shù)數(shù)據(jù)庫(kù)連連接。18.10制作網(wǎng)站站首頁index.htm網(wǎng)站的首首頁用靜靜態(tài)HTML設(shè)計(jì)，應(yīng)應(yīng)用AS

6、P技術(shù)制作作的網(wǎng)站站只需將將調(diào)用程程序和腳腳本的文文件制作作成為.asp文件即可可。18.11制作“關(guān)關(guān)于我們們”頁面面about.htm在網(wǎng)站中中“關(guān)于于我們”、“誠(chéng)誠(chéng)征代理理”、“廣告服服務(wù)”均均為靜態(tài)態(tài)頁面，同用一一個(gè)網(wǎng)站站界面模模板，將將Photoshop中制作的的界面用用ImageReady切割成為為網(wǎng)頁。18.11.1切割圖片片為網(wǎng)頁頁在切割圖圖片的過過程中，注意圖圖片的整整體分割割與局部部分割相相結(jié)合，讓界面面中的圖圖片大小小合適，又不至至于太零零散，因因?yàn)楸緯鴷?5章、16章已經(jīng)詳詳細(xì)介紹紹了靜態(tài)態(tài)頁面的的制作流流程，在在此不再再重復(fù)介介紹頁面面的具體體制作過過程。18.11

7、.2設(shè)置網(wǎng)頁頁標(biāo)題和和頁面屬屬性本節(jié)設(shè)置置網(wǎng)頁標(biāo)標(biāo)題和頁頁面屬性性。18.11.3從外部導(dǎo)導(dǎo)入CSS樣式本節(jié)從外外部導(dǎo)入入CSS樣式。18.11.4新建CSS鏈接樣式式本節(jié)新建建CSS鏈接樣式式。18.11.5設(shè)置文本本內(nèi)容本節(jié)設(shè)置置文本內(nèi)內(nèi)容。18.11.6設(shè)置尾部部版權(quán)信信息本節(jié)設(shè)置置尾部版版權(quán)信息息。18.12制作企業(yè)業(yè)登記頁頁面現(xiàn)在開始始制作有有ASP程序的頁頁面，首首先制作作為企業(yè)業(yè)提供免免費(fèi)登記記的頁面面EnterReg.asp。18.12.1新建文檔檔本節(jié)新建建文檔。18.12.2制作登記記表格本節(jié)制作作登記表表格。18.12.3制作表單單接下來在在表格中中插入表表單。18.12

8、.4設(shè)置表單單屬性本節(jié)設(shè)置置表單屬屬性。18.12.5插入包含含文件本頁需要要與數(shù)據(jù)據(jù)庫(kù)相連連接，因因此在頁頁面中必必須插入入數(shù)據(jù)庫(kù)庫(kù)連接文文件。18.12.6設(shè)置請(qǐng)求求變量本節(jié)設(shè)置置請(qǐng)求變變量。18.12.7制作腳本本文件在登記表表中有幾幾項(xiàng)文本本框是必必填項(xiàng)，需使用用一段Java腳本文件件來進(jìn)行行說明，當(dāng)讀者者沒有填填寫這幾幾個(gè)必填填項(xiàng)時(shí)，彈出提提示這段段代碼需需插入在在之前。18.13制作分站站信息顯顯示頁面面從網(wǎng)站的的首頁進(jìn)進(jìn)入各分分站后，顯示該該地區(qū)的的企業(yè)信信息，還還有“明明星單位位”和“最新加加入企業(yè)業(yè)”，左左側(cè)是企企業(yè)的分分類。18.13.1定義變量量界面的模模板與前前面的靜靜

9、態(tài)頁相相同，其其實(shí)每個(gè)個(gè)地區(qū)的的頁面都都是相同同的，只只是Logo和Banner都分別定定義了變變量，在在實(shí)際頁頁面中采采用程序序調(diào)用的的方式。18.13.2設(shè)置網(wǎng)頁頁標(biāo)題每一個(gè)地地區(qū)的標(biāo)標(biāo)題都是是從變量量中提取取的。18.13.3設(shè)置Logo和Banner圖像屬性性在之前已已經(jīng)定義義好了Logo和Banner圖片名稱稱的變量量，在制制作中只只需設(shè)置置變量名名稱以及及設(shè)置好好圖像的的大小即即可。設(shè)置分站站Logo圖像的源源文件為為“images/.gif”。18.13.4制作左側(cè)側(cè)欄本節(jié)制作作左側(cè)欄欄。18.13.5制作搜索索欄本節(jié)制作作搜索欄欄。18.13.6制作頁面面中部信信息在頁面正正中

10、位置置制作信信息顯示示，此處處顯示“滾動(dòng)公公告”、“明星星單位”及“最最新加入入企業(yè)”。滾動(dòng)公告告明星單位位最新加入入企業(yè)18.14制作企業(yè)業(yè)信息顯顯示頁面面單擊企業(yè)業(yè)名稱，顯示的的頁面是是從數(shù)據(jù)據(jù)庫(kù)中按按企業(yè)在在數(shù)據(jù)庫(kù)庫(kù)中的id編號(hào)顯示示，本頁頁由之前前制作好好的靜態(tài)態(tài)頁面另另存生成成，保存存文件名名為“ShowEnter.asp”，在文檔檔代碼第第一行插插入包含含文件。18.14.1數(shù)據(jù)庫(kù)查查詢?cè)谥谱黜擁撁鎯?nèi)容容之前，先要在在標(biāo)簽中制制作數(shù)據(jù)據(jù)庫(kù)查詢?cè)冋Z句。18.14.2企業(yè)信息息表格在右側(cè)正正文部分分制作企企業(yè)信息息表格。18.14.3制作段落落換行腳腳本在記錄顯顯示中因因?yàn)閱挝晃缓?jiǎn)介的

11、的內(nèi)容比比較多，可能會(huì)會(huì)存在分分段的情情況，在在文檔代代碼中，設(shè)置代代碼讓該該記錄可可以按發(fā)發(fā)布的樣樣式分段段顯示，在中插入代代碼。18.15企業(yè)名片片頁面在登記企企業(yè)時(shí)，如果有有網(wǎng)址，即顯示示企業(yè)網(wǎng)網(wǎng)址，如如果沒有有，“吉吉林查詢?cè)兙W(wǎng)”為為用戶提提供了付付費(fèi)企業(yè)業(yè)名片，在付費(fèi)費(fèi)后單擊擊“企業(yè)業(yè)名片”鏈接，即可顯顯示其信信息。18.16.1制作頁面面在搜索框框中輸入入關(guān)鍵字字。制作查詢?cè)兘Y(jié)果頁頁面與index_jl.asp的制作方方法基本本相同，只是將將明星單單位滾動(dòng)動(dòng)顯示移移到左側(cè)側(cè)欄，中中間部分分顯示查查詢結(jié)果果，是明明星企業(yè)業(yè)的的優(yōu)優(yōu)化顯示示，并用用符號(hào)“”作作為標(biāo)記記，普通通企業(yè)在在記

12、錄前前用方框框圖標(biāo)作作為標(biāo)記記。18.16.2制作分頁頁制作分頁頁。18.17后臺(tái)管理理登錄頁頁面login.asp所有的信信息都可可以在后后臺(tái)進(jìn)行行添加、修改、刪除等等管理，本站的的后臺(tái)功功能包括括“地區(qū)區(qū)管理員員維護(hù)”、“企企業(yè)資料料維護(hù)”、“企企業(yè)名片片管理”、“管管理員密密碼維護(hù)護(hù)”，下下面分別別加以介介紹。18.18后臺(tái)管理理首頁admin_index.asp在login.asp登錄成功功后，轉(zhuǎn)轉(zhuǎn)入后臺(tái)臺(tái)管理首首頁，admin_index.asp，該頁由由左右框框架頁組組成。18.19案例擴(kuò)展展本章案例例詳細(xì)講講解了“吉林查查詢網(wǎng)”的制作作過程，相信讀讀者對(duì)于于使用ASP制作網(wǎng)頁頁的

13、流程程有了一一定的認(rèn)認(rèn)識(shí)，應(yīng)應(yīng)用ASP制作本例例的網(wǎng)站站還只能能算是一一個(gè)比較較簡(jiǎn)單的的操作。在制作作好網(wǎng)頁頁以后，還要進(jìn)進(jìn)行以下下的操作作，才能能讓網(wǎng)站站在互聯(lián)聯(lián)網(wǎng)上能能夠正常常訪問。18.19.1測(cè)試網(wǎng)站站鏈接打開“文文件”面面板，選選擇文件件index.htm，單擊鼠鼠標(biāo)右鍵鍵，在彈彈出的菜菜單中選選擇“檢檢查鏈接接”|“選擇文件件/文件夾”命令。18.19.2申請(qǐng)域名名和空間間每個(gè)網(wǎng)站站都要自自己的獨(dú)獨(dú)立主機(jī)機(jī)和服務(wù)務(wù)器，域域名也必必須是唯唯一的。有了域域名，才才會(huì)讓網(wǎng)網(wǎng)站在無無邊無際際的互聯(lián)聯(lián)網(wǎng)中占占有一席席之地，就比如如人有了了名字，可以讓讓別人記記住你。申請(qǐng)域名名配置二級(jí)級(jí)域名申請(qǐng)空間間18.19.3配置FTP站點(diǎn)屬性性在DreamweaverCS4中可以直直接進(jìn)行行FTP上傳下載載。18.19.4更新網(wǎng)站站信息在本案例例中，在在前臺(tái)可可以讓用用戶通過過EnterReg.asp自助登記記企業(yè)信信息，由由管理員員在后臺(tái)臺(tái)將企業(yè)業(yè)審核通通過，使使其成為為正式用用戶。在后臺(tái)也也可以進(jìn)進(jìn)行添加加企業(yè)的的資料、增加企企業(yè)名片片，以及及對(duì)企業(yè)業(yè)資料的的修改、刪除、添加等等操作。18.20本章小結(jié)結(jié)本章介紹紹的是使使用AS