淺談Dreamweaver設(shè)計(jì)與制作網(wǎng)頁(yè)

1、第 27 卷第 2 期吉林工商學(xué)院學(xué)報(bào)V01 27 No 2201 1 年 3 月ANDJOURNALOFJILn、JBUSINESSTECHNOLOGYCOLLEGEM ar201l淺 談Dreamweave股計(jì)與制作網(wǎng)頁(yè)狄加利（吉林工商學(xué)院經(jīng)貿(mào)分院，吉林長(zhǎng)春130062）【摘要】在今天的網(wǎng)絡(luò)信息時(shí)代，互聯(lián)網(wǎng)已成為了人們生活的一部分，越來(lái)越多的人關(guān)注著網(wǎng)絡(luò)信息網(wǎng)頁(yè)作為網(wǎng)絡(luò)信息的載體，則需要更多的網(wǎng)頁(yè)設(shè)計(jì)與制作的人來(lái)構(gòu)建和維護(hù)，而學(xué)會(huì)一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)與制作開(kāi)發(fā)及維護(hù)工具是成為一個(gè)真正的網(wǎng)頁(yè)設(shè)計(jì)師的關(guān)鍵，網(wǎng)頁(yè)編輯軟件 Dreamweaver恰恰就為我們提供了一個(gè)良好的開(kāi)發(fā)環(huán)境。 關(guān)鍵詞】Drea

2、mweaver;網(wǎng)頁(yè)設(shè)計(jì)；網(wǎng)頁(yè)制作； CSS HTML 中圖分類號(hào)】TP3ll 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】1674 3288（2011）02 0100 04【收稿日期】2011-03 09 作者簡(jiǎn)介】狄加利 （1975 一） ，男，吉林長(zhǎng)春人，吉林工商學(xué)院經(jīng)貿(mào)分院講師，研究方向：電子商務(wù)與網(wǎng)頁(yè)設(shè)計(jì)。隨著 Intemet 互聯(lián)網(wǎng)的快速發(fā)展， 它已經(jīng)走入了企事業(yè)單位以及公司，同時(shí)也走入了家庭，而網(wǎng)頁(yè)也成了企事業(yè)單位和公司的信息窗口，讓自己的信息及時(shí)呈現(xiàn)在人們的面前，從而人們也不必走出家門(mén)就可以知曉外面的世界。因此，網(wǎng)頁(yè)設(shè)計(jì)與制作、網(wǎng)站維護(hù)等技術(shù)已必不可少，也顯得越來(lái)越重要了。目前， Dream

3、weaverCS3 是一個(gè)業(yè)界領(lǐng)先的網(wǎng)頁(yè)開(kāi)發(fā)工具之一，具有很強(qiáng)的使用戶高效地設(shè)計(jì)、開(kāi)發(fā)和維護(hù)基本的標(biāo)準(zhǔn)網(wǎng)站和Web應(yīng)用程序的功能。覽的效果相同，具有直觀性、使用方便、很容易上手的優(yōu)點(diǎn)。而它的三種視圖也為不同的網(wǎng)頁(yè)設(shè)計(jì)者提供了方便。一是代碼視圖更適合專業(yè)開(kāi)發(fā)網(wǎng)頁(yè)代碼的編程人員，并且有代碼提示功能，可以更快速的編寫(xiě)代碼開(kāi)發(fā)網(wǎng)頁(yè)。二是顯示設(shè)計(jì)視圖專為不熟悉網(wǎng)頁(yè) HTML弋碼的初學(xué)者 而設(shè)計(jì)，可以無(wú)需編寫(xiě)任何代碼就能快速創(chuàng)建網(wǎng)頁(yè)。三是拆分視圖更適合初學(xué)者來(lái)熟悉HTMLM頁(yè)代碼，從而更加容易學(xué)會(huì)HTM啊頁(yè)代碼編程，伴隨著有插入HTML弋碼的菜單提示，能夠快速的完成HTML弋碼的編程操作，讓初學(xué)者能夠快速

4、成為一名專業(yè)網(wǎng)站開(kāi)發(fā)人員。第一， 表格布局幾乎已經(jīng)成為一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)的標(biāo)準(zhǔn)， 我們隨便打開(kāi)一個(gè)網(wǎng)站，它們的網(wǎng)頁(yè)通常都有表格實(shí)現(xiàn)布局的。它能對(duì)不同的網(wǎng)頁(yè)對(duì)象加以處理和控制，而又不用擔(dān)心會(huì)受不同對(duì)象的影響，并且整個(gè)頁(yè)面也會(huì)變得美觀、大方且界面排列整齊有序，能精確地定位網(wǎng)頁(yè)元素，也可對(duì)數(shù)據(jù)進(jìn)行排序，還可以將其它文檔的能也為設(shè)置各個(gè)單元格的參數(shù)變得簡(jiǎn)單，有多種表格樣式，可以任意選擇所需，就自動(dòng)生成了表格的配色方案，也可以自己定義相應(yīng)樣式，并有預(yù)覽示圖可以參考，生成有個(gè)性有創(chuàng)意的格局。像新浪、網(wǎng)易等大型網(wǎng)站信息進(jìn)行格式化的，布局顯得直觀、簡(jiǎn)潔和整齊。第二，框架布局，它將一個(gè)瀏覽器窗口劃分成幾個(gè)部分，用戶不

5、用切換窗口就可以瀏覽到多個(gè)網(wǎng)頁(yè)內(nèi)容，加快了瀏覽速度，統(tǒng)一了頁(yè)面格局，實(shí)現(xiàn)了頁(yè)面的多態(tài)化，靈活運(yùn)用滾動(dòng)條來(lái)查看網(wǎng)頁(yè)內(nèi)容。當(dāng)前比較流行的騰訊網(wǎng)就采用了這種技術(shù)，只要進(jìn)入到QQ秀商城就可以看到最典型的框架結(jié)構(gòu)效果。而有的網(wǎng)站的后臺(tái)管理平臺(tái)也常采用這種技術(shù)，因?yàn)樗囊粋€(gè)窗口可以實(shí)現(xiàn)多頁(yè)面瀏覽，便于管理操作。置不能出現(xiàn)兩種網(wǎng)頁(yè)元素的弊點(diǎn)，其最大的特點(diǎn)就是它的靈活性，不占用頁(yè)面空間，可以放在頁(yè)面的任意位置，這樣也就很輕松地來(lái)構(gòu)建頁(yè)面布局。也可將沒(méi)有重疊的層的布局轉(zhuǎn)化為表格布局，以定位網(wǎng)頁(yè)元素。還? 100?萬(wàn)方數(shù)據(jù)可以和透明 Flash 形成頁(yè)面特殊效果，它也是一些網(wǎng)站常用的技術(shù)，如我們經(jīng)?？吹巾?yè)面的文本

6、內(nèi)容或圖像上有魚(yú)的游動(dòng)、蝴蝶的飛舞、光的閃爍等。另外，利用層與時(shí)間軸的結(jié)合，可以制作出動(dòng)畫(huà)效果的頁(yè)面，可以作為當(dāng)前最流行的網(wǎng)絡(luò)營(yíng)銷的一種手段。如在層中插入某公司圖片或視頻的產(chǎn)品宣傳廣告，讓這個(gè)廣告在頁(yè)面上進(jìn)行流動(dòng)，這種動(dòng)態(tài)效果會(huì)大大吸引人們的注意力，從而增加了商品宣傳和銷售，對(duì)加快公司的發(fā)展有著促進(jìn)作用。雖然我們?yōu)g覽者對(duì)打開(kāi)網(wǎng)站就會(huì)彈出這類廣告有著不同的意見(jiàn)，但是設(shè)計(jì)者人性化地加上關(guān)閉按鈕讓我們有選擇性地關(guān)閉，重要的是它的作用還是不容忽視的。設(shè)計(jì)，即使我們不是專業(yè)編程人員，我們想要的布局設(shè)計(jì)也會(huì)非常容易設(shè)計(jì)起來(lái)。 標(biāo)簽在頁(yè)面中有浮動(dòng)的特性，需要利用CSS樣式表來(lái)定位。CSS樣式表不但可以定位網(wǎng)

7、頁(yè)元素的位置，而且可以改變頁(yè)面的排版、統(tǒng)一頁(yè)面的風(fēng)格，可以不用每一個(gè)頁(yè)面都去設(shè)置單獨(dú)的樣式，只需建立一個(gè)樣式表文件，然后再將其鏈接到其它頁(yè)面就可以實(shí)現(xiàn)統(tǒng)一的頁(yè)面風(fēng)格了。同時(shí)也可以設(shè)置不同對(duì)象的不同樣式，產(chǎn)生獨(dú)特的效果。如文本格式化、藝術(shù)字效果、頁(yè)面特效、鼠標(biāo)特效，背景漸變等。這樣不但美化了頁(yè)面，而且產(chǎn)生良好的視覺(jué)效果，吸引瀏覽者的眼球，以實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)的目的。再次，Dreamweaver能很快地完成網(wǎng)頁(yè)的動(dòng)態(tài)效果、視頻和圖像的處理功能。利用行為可以產(chǎn)生奇特的鼠標(biāo)、 鍵盤(pán)和頁(yè)面效應(yīng)， 可以防止別人直接拷貝自己網(wǎng)頁(yè)的內(nèi)容。如有些網(wǎng)站利用點(diǎn)擊鼠標(biāo)打開(kāi)瀏覽器窗口行為，它可以實(shí)現(xiàn)自定義窗口，讓瀏覽者看到的

8、是個(gè)性化的窗口，加深對(duì)該網(wǎng)頁(yè)的印象并注意網(wǎng)頁(yè)的內(nèi)容。再有我們常常在網(wǎng)站上看到彈出菜單效果的導(dǎo)航條，我們只需利用行為中的狐等這樣的大型網(wǎng)站中也有選項(xiàng)卡式的內(nèi)容板塊，也只需利用DreamweaverCS*1的Spry選項(xiàng)卡式面板、Spry 可折疊式面板、 Spry 折疊式技術(shù)來(lái)輕松實(shí)現(xiàn)。懂。使用 Flash 來(lái)增加網(wǎng)頁(yè)的動(dòng)感，用 Flash 視頻產(chǎn)生影視效應(yīng)，因?yàn)樗鼈兾募?，瀏覽速度快，是其它視頻文件無(wú)法比擬的，所以在網(wǎng)頁(yè)上得到了廣泛的應(yīng)用。比如，我們經(jīng)常在新浪網(wǎng)上看到視頻新聞，以及優(yōu)酷視頻網(wǎng)和土豆視頻網(wǎng)， 或網(wǎng)站中出現(xiàn)廣告視頻窗口， 都使用了 Flash視頻的功能，利用它來(lái)實(shí)現(xiàn)在線視頻，讓瀏覽者

9、非常容易在線收看影音文件，不用擔(dān)心播放不流暢，而影響收看效果。從而對(duì)信息產(chǎn)生強(qiáng)烈的敏感性，對(duì)新聞消息產(chǎn)生的印象亦更加深刻，對(duì)新產(chǎn)品性能更加了解，為人們的生活提供了方便。這些動(dòng)畫(huà)和視頻可以像處理軟件，增強(qiáng)了圖像與網(wǎng)頁(yè)的協(xié)調(diào)性。這三款軟件合在一起就成了“網(wǎng)頁(yè)的夢(mèng)之隊(duì)” ，可謂是完美的組合，讓網(wǎng)頁(yè)設(shè)計(jì)人員成為一名真正的網(wǎng)頁(yè)設(shè)計(jì)師。最后，強(qiáng)大的動(dòng)態(tài)交互式網(wǎng)頁(yè)實(shí)現(xiàn)功能和管理維護(hù)功能。態(tài)的、數(shù)據(jù)庫(kù)驅(qū)動(dòng)的Web應(yīng)用程序(即動(dòng)態(tài)網(wǎng)頁(yè)，可以實(shí)現(xiàn)在線添加、刪除、修改和查詢等交互行為 ) 。若使用用手工書(shū)寫(xiě)代碼的優(yōu)點(diǎn)，非常適合初學(xué)者建設(shè)動(dòng)態(tài)網(wǎng)站，如建立文章發(fā)布系統(tǒng)、在線音樂(lè)網(wǎng)站、文件上傳系統(tǒng)、投票系統(tǒng)、 會(huì)員管理系

10、統(tǒng)、在線調(diào)查、商務(wù)產(chǎn)品展示和購(gòu)物、郵件群發(fā)、論壇、 Blog 和網(wǎng)站后臺(tái)管理系統(tǒng)等動(dòng)態(tài)網(wǎng)站， 其操作直觀易懂， 讓我們從枯燥的編寫(xiě)代碼中解脫出來(lái)，成為一名真正的網(wǎng)頁(yè)設(shè)計(jì)與制作高手。以AS網(wǎng)態(tài)網(wǎng)頁(yè)技術(shù)為例，當(dāng)前的商務(wù)網(wǎng)站或論壇網(wǎng)站中不可缺少的會(huì)員管理系統(tǒng)。下面簡(jiǎn)述一下利用Dreamweaver工具制作會(huì)員管理系統(tǒng)的過(guò)程。系統(tǒng)結(jié)構(gòu)設(shè)計(jì)會(huì)員從網(wǎng)站首頁(yè)登錄到首頁(yè)，才能實(shí)現(xiàn)首頁(yè)上的會(huì)員功能，如會(huì)員購(gòu)物、會(huì)員發(fā)布論壇新帖等。不是會(huì)員只有注冊(cè)為會(huì)員才能實(shí)現(xiàn)會(huì)員的功能。新會(huì)員注冊(cè)時(shí)要通過(guò)表單的行為驗(yàn)證，同時(shí)檢查用戶名不能重名，才能注冊(cè)成功，并將密碼發(fā)送到注冊(cè)時(shí)用的E Mail郵件地址中，忘記密碼時(shí)可以到自己郵

11、箱去查。若對(duì)自己注冊(cè)信息進(jìn)行修改，可登錄到修改頁(yè)，只有會(huì)員本身才能進(jìn)入其修改頁(yè)，所以每個(gè)會(huì)員只可以對(duì)自己的資料? ?101萬(wàn)方數(shù)據(jù)也1】俘吼。八月四1日E囂累班八日鞋小IRI?HJ .頭鞏舌貝酬 睢、硼際jF信雷田刪目gflJ 修以管皿性 P 健的功能。當(dāng)要在眾多會(huì)員中盤(pán)找某個(gè)會(huì)員信息時(shí)，通過(guò)會(huì)員查找立刻找到相關(guān)信息；對(duì)于非法注冊(cè)的會(huì)員，實(shí)現(xiàn)批量刪除。對(duì)于不同的會(huì)員分配給他們不同的權(quán)限等級(jí)，實(shí)現(xiàn)不同等級(jí)會(huì)員的管理功能不同。系統(tǒng)結(jié)構(gòu)圖 （ 圖 I） 。6 n 一隔丫兒午八 一 /1占贏數(shù)據(jù)庫(kù)設(shè)計(jì)符表示方式， 是為了數(shù)據(jù)庫(kù)的安全考慮 防止數(shù)據(jù)庫(kù)被下載 給周站帶來(lái)不必要的危害。這類數(shù)據(jù)庫(kù)不需要單獨(dú)服

12、務(wù)器支持即可運(yùn)行，將其存于站點(diǎn)中的 data( 此目錄可自擬 ) 目錄中，奉示例數(shù)據(jù)庫(kù)只用了一個(gè)會(huì)員表如有需要也可以將會(huì)員拆成多個(gè)表如地址信息和權(quán)限都可單獨(dú)成表，以實(shí)現(xiàn)地址單獨(dú)添加、修改和刪除，而不影響會(huì)員記錄；也可單獨(dú)增加或修改會(huì)員等級(jí).實(shí)現(xiàn)更多權(quán)限級(jí)別。membeL會(huì)員表結(jié)構(gòu)圖 ( 圖 2) 。其中，會(huì)員權(quán)限分為三個(gè)等級(jí)，默認(rèn)為普通會(huì)員。(3 劇建站點(diǎn)利用Dreamweaver的姑點(diǎn)下拉菜單新建站點(diǎn)” 設(shè)置本地信息和測(cè)試服務(wù)器信息，站點(diǎn)名稱為會(huì)員管理系統(tǒng)，本地文件夾和測(cè)試服務(wù)器文件都指向站點(diǎn)根目錄C： unetpubwwwroot,服務(wù)器模型可選擇 ASPVBScrlpl 或 ASPJav

13、aScript 這里選擇ASPVBScripl 這和后面創(chuàng)建頁(yè)面類型保持一致。(4) 測(cè)試 jI 匠務(wù)器xFProfcssiohalScrvicePack2使用 Windows版本以上或 WindowsServer2000 版本眥上的 Inter-nd 信息服務(wù)器簡(jiǎn)稱IlS) ，它的安裝方法很簡(jiǎn)單，我們可以通過(guò)控制面板”中的添加，刪除windows組件”來(lái)添加，只是添加時(shí)插入需要的當(dāng)前操作系統(tǒng)版本號(hào)相同的安裝盤(pán)才能添加成功。萬(wàn)方數(shù)據(jù)(5J 數(shù)據(jù)庫(kù)連接利用D- weaver的應(yīng)用程序面板來(lái)連接數(shù)據(jù)庫(kù)，采用自定義連接字符串的方法，這種方法便于從本地應(yīng)連接 性用測(cè)試服務(wù)器上的驅(qū)動(dòng)程序” 連接字符串 ( 圈 3) 為：目 3 自定女 接宇 #$動(dòng)志頁(yè)面宣現(xiàn)步驟在頁(yè)面中榷加表單，用于提交數(shù)據(jù)；在表單中.利 J盯表格或CSS