課程《網(wǎng)站設(shè)計(jì)、建設(shè)與維護(hù)實(shí)務(wù)》設(shè)計(jì)報(bào)告

1、<p>　　課程《網(wǎng)站設(shè)計(jì)、建設(shè)與維護(hù)實(shí)務(wù)》設(shè)計(jì)報(bào)告</p><p>　　專 業(yè)：XXX </p><p>　　學(xué) 號(hào)：XXX</p><p>　　姓 名：XXX </p><p><b>　　指導(dǎo)老師：XXX </b></p><p>　　計(jì)算機(jī)工程系XXXX<

2、/p><p><b>　　2011—6—13</b></p><p>　　《網(wǎng)站設(shè)計(jì)、維護(hù)與管理實(shí)務(wù)》任務(wù)書</p><p>　　課程名稱：《網(wǎng)站設(shè)計(jì)、維護(hù)與管理實(shí)務(wù)》</p><p><b>　　性質(zhì)和目的:</b></p><p>　　本大作業(yè)是對(duì)學(xué)生在課堂上所學(xué)知識(shí)的一次綜

3、合檢測(cè)。學(xué)生通過本次大作業(yè)的制作，應(yīng)能綜合使用在《靜態(tài)網(wǎng)頁(yè)制作（DreamWeaver）》、《ASP程序開發(fā)》、《數(shù)據(jù)庫(kù)應(yīng)用》等課程中學(xué)到的多種基礎(chǔ)知識(shí)，并可以很好的應(yīng)用到實(shí)際操作中去，具備簡(jiǎn)單的網(wǎng)站制作以及管理與維護(hù)能力。</p><p><b>　　課題及要求:</b></p><p><b>　　制作出個(gè)人主題網(wǎng)站</b></p>

4、;<p>　　要求：該網(wǎng)站應(yīng)該具有某種特定的主題和現(xiàn)實(shí)意義，界面統(tǒng)一、美觀，功能強(qiáng)大，后臺(tái)擁有良好的數(shù)據(jù)庫(kù)支持，做到既友好美觀又方便實(shí)用；網(wǎng)站制作完成后，能夠做日常的維護(hù)與管理功能。</p><p>　　四、課程設(shè)計(jì)報(bào)告書要求：</p><p>　　1、課程設(shè)計(jì)報(bào)告書第一頁(yè)為封面，封面上寫清楚標(biāo)題、副標(biāo)題、班級(jí)、姓名、指導(dǎo)老師、完成日期，格式自己設(shè)計(jì)。</p>

5、<p>　　2、課程設(shè)計(jì)報(bào)告書第二頁(yè)為任務(wù)書。</p><p>　　3、課程設(shè)計(jì)報(bào)告書第三頁(yè)為教師評(píng)語(yǔ)。</p><p>　　4、課程設(shè)計(jì)報(bào)告書第四頁(yè)為目錄。</p><p>　　5、課程設(shè)計(jì)報(bào)告書第五頁(yè)開始為具體內(nèi)容</p><p><b>　　（1）前言</b></p><p>　　

6、（2）對(duì)本次課程設(shè)計(jì)的詳細(xì)描述</p><p><b>　　（3）總結(jié)</b></p><p><b>　?。?）參考文獻(xiàn)</b></p><p>　　6、字?jǐn)?shù)不少于4000字。</p><p><b>　　7、用B5紙打印。</b></p><p>　

7、　五、如有雷同，將作不及格處理。</p><p>　　六、完成日期：2011.6.25</p><p><b>　　指導(dǎo)老師：XX</b></p><p>　　2011年3月 </p><p>

8、<b>　　教師評(píng)語(yǔ)</b></p><p><b>　　目錄</b></p><p>　　任務(wù)書………………………………………………..2</p><p>　　二、教師評(píng)語(yǔ)……………………………………………3</p><p>　　三、前言……………………………………………………5</p>

9、;<p>　　四、網(wǎng)站設(shè)計(jì)目的…………………………………….6</p><p>　　五、網(wǎng)站設(shè)計(jì)題目…………………………………….6</p><p>　　六、需求分析…………………………………………….6</p><p>　　七、技術(shù)簡(jiǎn)介…………………………………………….8</p><p>　　八、網(wǎng)站步驟分析……………………

10、……………..12</p><p>　　九、總結(jié)………………………………………………….36</p><p>　　十、參考文獻(xiàn)………………………………………….37</p><p><b>　　前言</b></p><p>　　人類社會(huì)已經(jīng)進(jìn)入網(wǎng)絡(luò)信息時(shí)代，網(wǎng)絡(luò)技術(shù)的發(fā)展日新月異。在網(wǎng)站技術(shù)如火如荼地發(fā)展的今天，它的規(guī)劃

11、建設(shè)和管理維護(hù)是網(wǎng)絡(luò)工程技術(shù)人員和管理人員永待解決的問題，而如何經(jīng)營(yíng)網(wǎng)站、真正使網(wǎng)站成為資源共享、實(shí)現(xiàn)互動(dòng)的平臺(tái)更是一項(xiàng)長(zhǎng)期工作。</p><p>　　網(wǎng)站設(shè)計(jì)、建設(shè)與維護(hù)實(shí)務(wù)是計(jì)算機(jī)網(wǎng)絡(luò)課程的延伸和計(jì)算機(jī)專項(xiàng)技能培養(yǎng)的重要方面，對(duì)高職高專計(jì)算機(jī)專業(yè)及相近專業(yè)的學(xué)生開設(shè)網(wǎng)站的規(guī)劃建設(shè)和管理維護(hù)的課程十分重要，也十分迫切。它為學(xué)習(xí)者提供了廣闊的應(yīng)用空間，一方面反應(yīng)的當(dāng)前網(wǎng)絡(luò)信息技術(shù)的發(fā)展方面；另一方面又具有很強(qiáng)的工

12、程使用性，能為學(xué)生所認(rèn)可，從而激發(fā)學(xué)生學(xué)習(xí)的興趣和求知欲望。</p><p>　　Step 1：激發(fā)性課程，基于工作過程的技術(shù)感受經(jīng)歷。</p><p>　　使學(xué)生了解本項(xiàng)工作的整體過程，激發(fā)學(xué)生學(xué)習(xí)的興趣，結(jié)合工作過程的講解、技術(shù)和相關(guān)理論知識(shí)的認(rèn)知做簡(jiǎn)單介紹，是采用問題中心范型的課程。</p><p>　　Step 2：學(xué)科性課程，重點(diǎn)是學(xué)科知識(shí)的掌握、復(fù)用。&

13、lt;/p><p>　　使學(xué)生掌握本項(xiàng)工作所需要的相關(guān)理論知識(shí)，部分涉及技術(shù)過程以及與本職業(yè)能力有關(guān)的各類學(xué)科知識(shí)，可以按照學(xué)科中心范型的課程或任務(wù)中心的課程來組織。</p><p>　　Step 3：技術(shù)性課程，重點(diǎn)是技術(shù)知識(shí)的掌握、復(fù)用。</p><p>　　使學(xué)生掌握本項(xiàng)工作所需要的，結(jié)合現(xiàn)行具體工作崗位的關(guān)鍵技術(shù)技能，同時(shí)進(jìn)一步深化、提高已經(jīng)學(xué)習(xí)過的理論知識(shí)。可

14、以根據(jù)國(guó)家職業(yè)標(biāo)準(zhǔn)、行業(yè)技術(shù)培訓(xùn)標(biāo)準(zhǔn)來組織培訓(xùn)中心范型的課程。</p><p>　　Step 4：訓(xùn)練性課程，目的是理論和技術(shù)的領(lǐng)會(huì)和內(nèi)化。</p><p>　　通過選取典型的工作過程，編制綜合實(shí)習(xí)、培訓(xùn)課程，全面領(lǐng)會(huì)、內(nèi)化前三個(gè)階段的知識(shí)和技能，同時(shí)講授工作過程中的經(jīng)驗(yàn)性知識(shí)，使學(xué)生成為“高技能人才”預(yù)備者。可以采用任務(wù)中心范型課程。</p><p><b&

15、gt;　　網(wǎng)站設(shè)計(jì)目的</b></p><p>　　本課程的設(shè)計(jì)目的是通過實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver cs3開發(fā)的全過程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識(shí)。結(jié)合具體的開發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver cs3可視化開發(fā)工具進(jìn)行網(wǎng)頁(yè)開發(fā)的方法；了解網(wǎng)頁(yè)設(shè)計(jì)制作過程</p><p>　　通過設(shè)計(jì)達(dá)到掌握網(wǎng)頁(yè)設(shè)計(jì)、制作的技巧。

16、</p><p>　　了解和熟悉網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和實(shí)現(xiàn)技巧。</p><p>　　根據(jù)題目的要求，給出網(wǎng)頁(yè)設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁(yè)設(shè)計(jì)作品。</p><p>　　熟練掌握Photoshop cs3、Dreamweaver cs3等軟件的的操作和應(yīng)用。</p><p>　　增強(qiáng)動(dòng)手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜

17、合素質(zhì)。</p><p>　　二、網(wǎng)站設(shè)計(jì)題目 </p><p><b>　　海南旅游網(wǎng)</b></p><p><b>　　三、需求分析</b></p><p>　　選定主題，確定題目之后，在做整個(gè)網(wǎng)站之前對(duì)網(wǎng)站進(jìn)行需求分析。首先，做好需求調(diào)研。調(diào)研方式主要是上網(wǎng)查閱資料，在圖書館里翻閱相關(guān)

18、書籍。調(diào)研內(nèi)容如下：</p><p>　　1、 網(wǎng)站當(dāng)前以及日后可能出現(xiàn)的功能需求。 </p><p>　　2、 客戶對(duì)網(wǎng)站的性能（如訪問速度）的要求和可靠性的要求。 </p><p>　　3、 確定網(wǎng)站維護(hù)的要求。 </p><p>　　4、 網(wǎng)站的實(shí)際運(yùn)行環(huán)境。 </p><p>　　5、 網(wǎng)站頁(yè)面總體風(fēng)格以及美工

19、效果。</p><p>　　6、 主頁(yè)面和次級(jí)頁(yè)面數(shù)量等。</p><p>　　7、 內(nèi)容管理及錄入任務(wù)的分配。 </p><p>　　8、 各種頁(yè)面特殊效果及其數(shù)量（如flash等）。 </p><p>　　9、 項(xiàng)目完成時(shí)間及進(jìn)度。</p><p>　　然后，調(diào)研結(jié)束之后對(duì)整個(gè)網(wǎng)站進(jìn)行功能描述，并對(duì)網(wǎng)站進(jìn)行總體規(guī)劃

20、，接著逐步細(xì)化。</p><p>　　我們選做的主題是旅游交通，并且選定題目為“海南旅游網(wǎng)”，其目的是做一個(gè)簡(jiǎn)單的網(wǎng)站，介紹海南旅游的各個(gè)方面，提供一定的資訊信息，。進(jìn)行一番調(diào)研之后，該網(wǎng)站整體站功能結(jié)構(gòu)圖如下：</p><p><b>　　四、技術(shù)簡(jiǎn)介</b></p><p><b>　　(一)建立布局</b></

21、p><p>　　在這次的網(wǎng)頁(yè)設(shè)計(jì)中用到大量的布局，所以怎么樣建立布局是關(guān)鍵。Dreamweaver cs3是大多數(shù)人設(shè)計(jì)網(wǎng)頁(yè)的稱手兵器，也是眾多入門者的捷徑。特別是其在布局方面的出色表現(xiàn)，更受青睞。大家都知道，沒有表格的幫助，很難組織出一個(gè)協(xié)調(diào)合理的頁(yè)面。</p><p>　　1.點(diǎn)擊“ALT+F6”鍵，進(jìn)入布局模式，插入布局表格。建立一個(gè)大概的布局。 </p><p>

22、;　　2.使用背景圖片：選中該項(xiàng)，按瀏覽可以插入一幅準(zhǔn)備好的圖片作為表格的背景，因?yàn)閳D片是以平鋪的形式作為表格背景，所以表格大小和圖片尺寸都要控制好。</p><p><b>　　（二）網(wǎng)頁(yè)中的圖像</b></p><p>　　圖像傳輸是WWW的真正魅力所在，它與文字相比具有顯著的優(yōu)點(diǎn)：一是直觀，人眼觀看圖像時(shí)接受信息的速度遠(yuǎn)遠(yuǎn)超過觀看文字時(shí)接受信息的速度；二是能更清

23、楚地表達(dá)細(xì)節(jié)內(nèi)容。正是由于這些優(yōu)點(diǎn)，所以在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)圖像很受歡迎。如果網(wǎng)頁(yè)做得像一幅風(fēng)景畫，瀏覽者一定會(huì)流連忘返（如果圖片很大，效果會(huì)適得其反）。 圖像文件的格式有幾十種，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，現(xiàn)在Internet Explorer和Netscape支持的、最常用的圖像格式是GIF、JPEG和BMP。 </p><p>　　（1）在網(wǎng)頁(yè)中插入圖

24、像 </p><p>　　利用Dreamweaver cs3可以方便地在網(wǎng)頁(yè)中插入圖像，還可以設(shè)置圖像邊框、大小、和位置，并且可以直接對(duì)圖像進(jìn)行編輯。在網(wǎng)頁(yè)中加入圖像的操作非常簡(jiǎn)單：</p><p>　　1.新建一個(gè)空白網(wǎng)頁(yè)，把光標(biāo)定位在網(wǎng)頁(yè)的開始位置。</p><p>　　2.打開“工具”菜單，選擇“圖片”菜單項(xiàng)，在子菜單中選擇“來自文件”菜單項(xiàng)，或者單擊工具欄中

25、的圖片工具圖標(biāo)，彈出一個(gè)“圖片”對(duì)話框。</p><p>　　3.在此對(duì)話框中單擊“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。</p><p>　　4.在“選擇文件”對(duì)話框的文件列表中選擇某個(gè)圖像文件，然后單擊“確定”按鈕，或直接雙擊該圖像文件，該圖像即被加入到網(wǎng)頁(yè)中。在網(wǎng)頁(yè)中插入圖像后我們就可以對(duì)圖像的各種屬性進(jìn)行設(shè)置了。</p><p>　?。?）圖像的各種屬性設(shè)

26、置</p><p>　　1.選中所插入的圖片，單擊鼠標(biāo)右鍵，彈出一個(gè)快捷菜單，在菜單中選擇“圖片屬性”菜單項(xiàng)，出現(xiàn)一個(gè)“圖片屬性”對(duì)話框.</p><p>　　2.打開“外觀”選項(xiàng)卡。</p><p>　　(1)設(shè)定圖像邊框粗細(xì)：在“外觀”選項(xiàng)卡的“布局”欄里可以根據(jù)需要定義圖像的邊框，也可以定義邊框值為“0”，即無邊框。</p><p>　

27、　(2)設(shè)置圖像環(huán)繞方式：一般情況下一幅圖像只能與一行文字處在同一高度，但有時(shí)需要將圖像和文字分開，且兩者互不影響。比如在網(wǎng)頁(yè)左邊插入一幅圖像，要求右邊的文字就像沒有圖像時(shí)可以多行輸入，這就要通過設(shè)置圖像的環(huán)繞方式來實(shí)現(xiàn)。在網(wǎng)頁(yè)中圖像的環(huán)繞方式有兩種：</p><p>　?、僮蟓h(huán)繞：圖像在左邊，文本在圖像的右邊進(jìn)行環(huán)繞。</p><p>　?、谟噎h(huán)繞：圖像在右邊，文本在圖像的左邊進(jìn)行環(huán)繞。

28、</p><p>　　在“外觀”選項(xiàng)卡的“布局”欄中打開“對(duì)齊方式”下拉列表框，選擇“左”選項(xiàng)，并單擊“確定”按鈕，圖像就被設(shè)置為左環(huán)繞方式，同樣，如果選“右”，圖像就被設(shè)置為右環(huán)繞方式。</p><p>　　(3)編輯圖像大小：在Dreamweaver cs3中，當(dāng)在網(wǎng)頁(yè)中加入一幅圖像后，圖像大小默認(rèn)設(shè)置為其原來的大小，如果加入的圖像太大或太小，或有其他特別需要，就得調(diào)整圖像的大小。調(diào)整

29、圖像大小非常簡(jiǎn)單靈活，只要你選中加入的圖像，用鼠標(biāo)左鍵拖動(dòng)圖像邊框，可任意調(diào)整圖像的寬度和高度直到達(dá)到你滿意的尺寸。</p><p>　　(4)設(shè)置圖像縮放比例：網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)重要原則就是網(wǎng)頁(yè)的兼容性，對(duì)于不同的瀏覽器或者不同的分辨率，不管是800×600的窗口，還是1024×768的窗口，網(wǎng)頁(yè)都要能正常的顯示。設(shè)置圖像縮放比例就是將圖像設(shè)置為大小可以按比例變化，與瀏覽器的大小成一固定比例，這

30、樣在不同大小的瀏覽器窗口里圖像都能正常的顯示外觀。設(shè)置圖像縮放比例的步驟如下：</p><p>　　1.選中網(wǎng)頁(yè)中的圖像，單擊鼠標(biāo)右鍵，在彈出的快捷菜單里，選擇“圖像屬性”菜單項(xiàng)，彈出一個(gè)“圖像屬性”對(duì)話框.</p><p>　　2.在“大小”欄中選中“指定大小”復(fù)選框，同時(shí)選中“寬度”和“高度”下面的“百分比”單選按鈕，然后在“寬度”和“高度”欄里輸入想顯示的比例，單擊“確定”完成設(shè)置。

31、外還可以在“外觀”選項(xiàng)卡的“水平間距”和“垂直間距”欄里進(jìn)行設(shè)置，水平間距是指圖像與周圍元素在水平方向的間距，以象素為單位；垂直間距指圖像與周圍元素在垂直方向的間距。</p><p>　　（3）怎樣編輯網(wǎng)頁(yè)中的圖像</p><p>　　在Dreamweaver cs3中，可以使用“圖片”工具欄中的各種工具對(duì)網(wǎng)頁(yè)中的圖像進(jìn)行編輯，編輯功能主要有：圖像旋轉(zhuǎn)和翻轉(zhuǎn)、剪裁、圖像淡化、凹凸效果等等。

32、</p><p>　　另外，為了使圖片更符合要求，我們還在photoshop cs3中隊(duì)所用的圖片進(jìn)行了處理，使得圖片看起來更加精細(xì)美觀，符合我們的主題要求。</p><p><b>　　（4）使用背景圖像</b></p><p>　　使用背景圖像與使用背景色不同，使用背景色只將網(wǎng)頁(yè)的背景用某種顏色填充，而使用背景圖像則是將網(wǎng)頁(yè)的背景用圖像平

33、鋪。這樣做可以使制作的網(wǎng)頁(yè)更美觀好看。網(wǎng)頁(yè)中使用背景圖像的具體步驟如下：</p><p>　　1.新建一個(gè)空白網(wǎng)頁(yè)。</p><p>　　2.單擊鼠標(biāo)右鍵，彈出的快捷菜單里選“網(wǎng)頁(yè)屬性”，彈出“網(wǎng)頁(yè)屬性”對(duì)話框.</p><p>　　3.開“背景”選項(xiàng)卡。</p><p>　　4.在“背景”選項(xiàng)卡的“格式”欄中選中“背景圖片”復(fù)選框，然后單擊

34、下面的“瀏覽”按鈕，出現(xiàn)一個(gè)“選擇背景圖片”對(duì)話框。</p><p>　　5.在“選擇背景圖像”對(duì)話框中單擊“瀏覽文件”按鈕，出現(xiàn)一個(gè)“選擇文件”對(duì)話框。</p><p>　　6.在“選擇文件”對(duì)話框的文件列表中選擇圖像文件，單擊“確定”按鈕。</p><p>　　這樣，所選圖片將作為整個(gè)網(wǎng)頁(yè)的背景，如果在第4步時(shí)同時(shí)選中“水印”復(fù)選框，背景圖片將顯示為特殊的水印效

35、果，當(dāng)網(wǎng)頁(yè)滾動(dòng)時(shí)，背景不動(dòng)，只有網(wǎng)頁(yè)內(nèi)容滾動(dòng)，產(chǎn)生一種透明層的效果，非常吸引人。</p><p>　　（5）插入flash動(dòng)畫</p><p>　　關(guān)于 Flash 視頻 使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內(nèi)容插入 Web 頁(yè)面，而無需使用 Flash 創(chuàng)作工具。該命令可以插入 Flash 組件；當(dāng)您在瀏覽器中查看它時(shí)，它顯示所選擇的

36、Flash 視頻內(nèi)容以及一組播放控件。</p><p>　　（6）設(shè)置鼠標(biāo)經(jīng)過圖片，進(jìn)行圖片交互</p><p>　　再插入圖片的下拉菜單中有一項(xiàng)是“鼠標(biāo)經(jīng)過”，點(diǎn)擊這一項(xiàng)，會(huì)彈出一個(gè)對(duì)話框，在對(duì)話框中可以設(shè)置鼠標(biāo)經(jīng)過前的圖片和經(jīng)過時(shí)的圖片，選擇“確定”即可。</p><p><b>　　（7）設(shè)置鏈接</b></p><p

37、>　　選中圖片或者文字，在下面的鏈接屬性中輸入所要連接到的地址，同時(shí)，下方的目標(biāo)屬性被激活，輸入blank設(shè)置成在新窗口中打開網(wǎng)頁(yè)。我們?cè)O(shè)置了鏈接本站點(diǎn)的網(wǎng)頁(yè)頁(yè)面，同時(shí)也連接了外網(wǎng)，使得大家訪問頁(yè)面時(shí)能夠查詢更多詳細(xì)的信息，方便用戶查詢。</p><p><b>　?。?）設(shè)置字體滾動(dòng)</b></p><p>　　使圖片在頁(yè)面連續(xù)滾動(dòng)出現(xiàn)，其中某頁(yè)代碼如下：&l

38、t;marquee id="scrollarea" direction="up" scrolldelay="2" scrollamount="2" width="？" height="？" onmouseover="this.stop();" onmouseout="this.start(

39、);"> </p><p>　　<strong>內(nèi)容</strong></marquee></p><p><b>　　五、網(wǎng)站步驟分析</b></p><p>　　海南島，是我國(guó)的第二大島，旅游資源豐富，極富熱帶特色。隨著海南國(guó)際旅游島建設(shè)的加速，肯定會(huì)有越來越多的人喜歡上海南這片美麗的土地

40、。下面，我們就根據(jù)海南島的行政區(qū)劃，來給大家介紹一下海南的各地旅游景區(qū)景點(diǎn)、好玩的地方。大家只要點(diǎn)擊各個(gè)城市（縣），就能看到各市縣的旅游景點(diǎn)。</p><p>　　各個(gè)界面都有不同的設(shè)計(jì)，大多都是采用了DIV和CSS制作的，對(duì)各個(gè)方面進(jìn)行控制。</p><p><b>　?。?）網(wǎng)站首頁(yè)：</b></p><p>　　首先簡(jiǎn)介首頁(yè)的實(shí)現(xiàn)：導(dǎo)航條

41、是采用了DIV和CSS樣式實(shí)現(xiàn)的，其CSS代碼為：</p><p>　　#apDiv36 {position:absolute;left:461px;top:203px;width:714px;height:28px;z-index:4;}</p><p><b>　　DIV部分：</b></p><p>　　<div id="

42、wrapper" class="wrapper"></p><p>　　<div id="innerWrapper" class="innerWrapper"></p><p>　　<ul id="navigator"></p><p>　　<

43、;li class="youAreHere"><a href="" onclick="MM_goToURL('parent','file:///H|/zhandian1/shouye.html');return document.MM_returnValue">首頁(yè)</a></li></p>

44、<p>　　<li><a href=""onclick="MM_goToURL('parent','sanya/sanyaqu.html');return document.MM_returnValue">三亞</a></li></p><p>　　<li><a h

45、ref="" onclick="MM_goToURL('parent','haikou/haikou.html');return document.MM_returnValue">?？?lt;/a></li></p><p>　　<li><a href="" onclick=&qu

46、ot;MM_goToURL('parent','file:///H|/zhandian1/五指山/wuzhishan.html');return document.MM_returnValue">五指山</a></li></p><p>　　<li><a href="" onclick="MM_

47、goToURL('parent','file:///H|/zhandian1/瓊海/qionghai.html');return document.MM_returnValue">瓊海</a></li></p><p>　　<li><a href="" onclick="MM_goToURL(&

48、#39;parent','file:///H|/zhandian1/文昌/wenchang.html');return document.MM_returnValue">文昌</a></li></p><p>　　<li><a href="">更多</a></li></p>

49、;<p><b>　　</ul></b></p><p><b>　　</div></b></p><p>　　<div id="shadow" class="shadowWrapper"></div></p><p>&

50、lt;b>　　</div></b></p><p>　　地圖是一個(gè)鏈接：<img src="images/海南地圖.jpg" width="497" height="324" onclick="MM_openBrWindow('ditu/google-api.html','地圖導(dǎo)航&#

51、39;,'')"/></p><p>　　分頁(yè)是同一種模版制作實(shí)現(xiàn)的</p><p>　?。?）網(wǎng)站其一分頁(yè)：</p><p>　　導(dǎo)航條：采用了DIV+CSS</p><p>　　CSS部分代碼：@charset "utf-8";</p><p>　　html,bo

52、dy,div,span,applet,object,iframe,</p><p>　　h1,h2,h3,h4,h5,h6,p,blockquote,</p><p>　　pre,a,abbr,acronym,address,big,cite,</p><p>　　code,del,dfn,em,font,img,ins,kbd,</p><p&

53、gt;　　q,s,samp,small,strike,strong,sub,</p><p>　　sup,tt,var,dd,dl,dt,li,ol,ul,</p><p>　　fieldset,form,label,legend,table,</p><p>　　caption,tbody,tfoot,thead,tr,th,</p><p&g

54、t;　　td { margin:0; padding:0; border:0; font-size:12px; font-family:arial, "宋體", Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica; line-height:20px; }</p><p>　　ul, ol { list-sty

55、le:none; }</p><p>　　table { border-collapse:collapse; border-spacing:0; }</p><p>　　table,h1,h2,h3,h4,h5,</p><p>　　h6 { font-size:100%; }</p><p>　　/* 共用樣式 */</p>

56、<p>　　html { overflow-y:scroll;}</p><p>　　body { color:#535353; }</p><p>　　a { color:#535353; text-decoration:none; cursor:pointer!important; }</p><p>　　a:hover { color:#EF5300

57、; text-decoration:underline; }</p><p><b>　　/* 頭部 */</b></p><p>　　.header .inner { position:relative; width:900px; height:152px; margin:0 auto; }</p><p>　　.header .inner

58、h1 { position:relative; top:13px; left:0; width:177px; height:52px; }</p><p>　　.header .inner h1 span { display:block; height:52px; line-height:150px; overflow:hidden; }</p><p>　　.header .inner

59、h1 a { position:absolute; top:0; }</p><p>　　.header .inner .message { position:absolute; top:5px; right:0px; z-index:100; height:20px; line-height:20px; padding-right:65px; color:#535353; }</p><p&

60、gt;　　.header .inner .message a { color:#259301; text-decoration:underline; }</p><p>　　.header .inner .message a:hover { color:#EF5300; text-decoration:none; }</p><p>　　.header .inner .message sp

61、an.online { margin-right:5px; }</p><p>　　.header .inner .message a.login { padding-right:5px; }</p><p>　　.header .inner .message a.message_center { margin:0 5px; }</p><p>　　.header

62、.inner .message a.help { margin-left:5px; padding:0 0 0 15px; background-color:#FFFFFF }</p><p>　　.header .inner .message a.vip { position:absolute; top:1px; right:0; width:60px; height:17px; line-height:17p

63、x; line-height:21px\9; +line-height:19px;</p><p>　　text-align:center; overflow:hidden; text-decoration:none; color:#FFF; }</p><p>　　.header .inner .message a.vip:hover { color:#FFF; }</p>

64、<p>　　.header .inner .nav { position:absolute; top:90px; left:45px; }</p><p>　　.header .inner .nav a { float:left; height:27px; text-align:center; }</p><p>　　.header .inner .nav a strong {

65、 display:block; width:86px; height:27px; line-height:27px; line-height:30px\9; font-weight:normal; font-size:14px; color:#FFFFFF; cursor:pointer; }</p><p>　　.header .inner .nav a #nav_index { width:66px; }&l

66、t;/p><p>　　.header .inner .nav a #nav_privileg { width:100px; }</p><p>　　.header .inner .nav strong.last { background:none; }</p><p>　　.header .inner .nav a:hover { text-decoration:non

67、e; background:none; }</p><p>　　.header .inner .nav a.current { position:relative; top:-1px; }</p><p>　　.header .inner .nav a.current:hover { position:relative; top:-1px; background:none; }</p

68、><p>　　.header .inner .nav a.current strong { height:34px; line-height:36px; overflow:hidden; color:#6C7100; font-weight:bold; }</p><p>　　.header .inner .sub_nav { position:absolute; top:126px; }&l

69、t;/p><p>　　.header .inner #sub_nav_01 { left:124px; }</p><p>　　.header .inner #sub_nav_02 { left:209px; }</p><p>　　.header .inner #sub_nav_03 { left:310px; }</p><p>　　.he

70、ader .inner .sub_nav a { margin-right:15px; }</p><p>　　.header .inner .sub_nav a.current { color:#6C7100; font-weight:bold; }</p><p>　　.header .inner a.return { position:absolute; right:0; top:9

71、0px; width:91px; height:26px; line-height:26px; line-height:28px\9; +line-height:28px;</p><p>　　text-align:center; color:#FFFFFF; }</p><p>　　.header .inner a.return:hover { text-decoration:none;

72、 color:#FFFFFF; }</p><p><b>　　/* 背景圖 */</b></p><p>　　.header,.header .inner .nav strong { background:url(bg_repeat.png) repeat-x; }</p><p>　　.header { background-positio

73、n:0px 0px; }</p><p>　　.header .inner .nav strong { background-repeat:no-repeat; background-position:right -370px; }</p><p>　　.header .inner .nav a.current strong,</p><p>　　.header .

74、inner .nav a.current:hover strong,</p><p>　　.header .inner .nav a.current #nav_index,</p><p>　　.header .inner .nav a.current #nav_privileg,</p><p>　　.header .inner .nav a.current:ho

75、ver #nav_index,</p><p>　　.header .inner .nav a.current:hover #nav_privileg,</p><p>　　.header .inner a.return{ background:url(bg.png) no-repeat; }</p><p>　　.header .inner .nav a.curr

76、ent strong { background-position:-220px -240px; }</p><p>　　.header .inner .nav a.current:hover strong { background-position:-220px -240px; }</p><p>　　.header .inner .nav a.current #nav_index { b

77、ackground-position:-480px -420px; }</p><p>　　.header .inner .nav a.current #nav_privileg { background-position:-370px -420px; }</p><p>　　.header .inner .nav a.current:hover #nav_index { backgrou

78、nd-position:-480px -420px; }</p><p>　　.header .inner .nav a.current:hover #nav_privileg { background-position:-370px -420px; }</p><p>　　.header .inner .message a.vip { background-position:-460px

79、 -310px; }</p><p>　　.header .inner a.return { background-position:-220px -280px; }</p><p>　　.header .inner .nav a:hover strong,</p><p>　　.header .inner .nav a:hover #nav_index,</

80、p><p>　　.header .inner .nav a:hover #nav_privileg { background:url(nav_hover.png) no-repeat 0 -40px; }</p><p>　　.header .inner .nav a:hover strong { background-position:0 -40px; }</p><p&

81、gt;　　.header .inner .nav a:hover #nav_index { background-position:0 -0px; }</p><p>　　.header .inner .nav a:hover #nav_privileg { background-position:0 -80px; }</p><p><b>　　DIV部分代碼：</b&g

82、t;</p><p>　　<div class="header"></p><p>　　<div class="inner"></p><p>　　<div><table width="898" border="0" cellspacing=&q

83、uot;0" cellpadding="0"></p><p><b>　　<tr></b></p><p>　　<td width="199" rowspan="3" align="center" valign="bottom" cl

84、ass="g">三亞<img src="images/3-100106150429360.jpg" alt="g" width="92" height="62" align="absmiddle" />旅游</td></p><p>　　<td width=&

85、quot;540" height="30" align="center" valign="top" class="c"><!-- #BeginDate format:wfcIS1m -->Wednesday, 2011-06-08 9:50<!-- #EndDate --></td></p>

86、<p>　　<td width="159" rowspan="3" align="left" valign="middle"><input type="button" onclick="popup_show()" value='登錄'/></p>&l

87、t;p>　　<div class="sample_popup" id="popup" style="visibility: hidden; display: none;"></p><p>　　<div class="menu_form_header" id="popup_drag"

88、></p><p>　　<img class="menu_form_exit" id="popup_exit" src="bg.png" /></p><p><b>　　Login</b></p><p><b>　　</div></

89、b></p><p>　　<div class="menu_form_body"></p><p>　　<form method="post" action="#"></p><p><b>　　<table></b></p>&

90、lt;p><b>　　<tr></b></p><p>　　<th>Username:</th></p><p>　　<td><input class="field" type="text" onfocus="select();" /><

91、/td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<th>Password:</th></p><p>　　<td><input class="

92、field" type="password" onfocus="select();" /></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<th&g

93、t; </th></p><p>　　<td><input class="btn" type="submit" value="Submit" /></td></p><p><b>　　</tr></b></p><p>&l

94、t;b>　　</table></b></p><p><b>　　</form></b></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p>　　&

95、amp;nbsp;<span class="c" onclick="MM_goToURL('parent','../denglu/index.html');return document.MM_returnValue">&nbsp;&nbsp;&nbsp;注冊(cè)</span></td></p>

96、<p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height="21">&nbsp;</td></p><p><b>　　</tr></b&g

97、t;</p><p><b>　　<tr></b></p><p>　　<td align="center" valign="middle" class="f">三亞之旅 與您同行</td></p><p><b>　　</tr>

98、;</b></p><p><b>　　</table></b></p><p><b>　　</div></b></p><p>　　<map name="nav" id="nav"></p><p>　　&l

99、t;div class="nav"> <a href="#" onclick="MM_goToURL('parent','../shouye.html');return document.MM_returnValue"><strong id="nav_index">首 頁(yè)</strong&g

100、t;</a> <a href="http://www.865171.cn/icons/" class="current"><strong>三 亞</strong></a> <a href="../haikou/haikou.html"><strong id="nav_privileg&quo

101、t;>海 口</strong></a> <a href="http://www.865171.cn/admin-templates/"><strong>五指山</strong></a> <a href="http://www.865171.cn/css-code/"><strong>瓊 海<

102、/strong></a> <a href="http://www.865171.cn/css-menu/"><strong>文 昌</stro</p><p><b>　　</map></b></p><p><b>　　</div></b></p&

103、gt;<p><b>　　</div></b></p><p><b>　?。?）實(shí)現(xiàn)：</b></p><p><b>　　其CSS代碼：</b></p><p>　　BODY {font-size:12px}</p><p>　　UL {PADDI

104、NG: 0px; MARGIN: 0px;}</p><p>　　LI {PADDING: 0px; MARGIN: 0px;}</p><p>　　P {line-height:10px;}</p><p>　　.container {</p><p>　　WIDTH: 610px;</p><p>　　HEIGHT

105、: 205px}</p><p>　　.container A IMG {</p><p>　　WIDTH: 610px;</p><p>　　HEIGHT: 205px}</p><p>　　.container IMG {</p><p>　　BORDER-BOTTOM-STYLE: none;</p>

106、<p>　　BORDER-RIGHT-STYLE: none;</p><p>　　BORDER-TOP-STYLE: none;</p><p>　　BORDER-LEFT-STYLE: none}</p><p>　　.td_f A IMG {</p><p>　　PADDING-BOTTOM: 0px;</p>

107、<p>　　MARGIN: 0px;</p><p>　　PADDING-LEFT: 0px;</p><p>　　PADDING-RIGHT: 0px;</p><p>　　PADDING-TOP: 0px}</p><p><b>　　.num {</b></p><p>　　P

108、OSITION: absolute;</p><p>　　WIDTH: 90px;</p><p>　　FLOAT: right;</p><p>　　TOP: 180px;</p><p>　　LEFT: 520px}</p><p><b>　　.num LI {</b></p>

109、<p>　　TEXT-ALIGN: center;</p><p>　　LINE-HEIGHT: 15px;</p><p>　　LIST-STYLE-TYPE: none;</p><p>　　MARGIN: 1px;</p><p>　　WIDTH: 15px;</p><p>　　FONT-FAMIL

110、Y: Arial;</p><p>　　BACKGROUND: url(../images/flashbutton.gif) no-repeat -15px 0px;</p><p>　　FLOAT: left;</p><p>　　HEIGHT: 15px;</p><p>　　COLOR: #86a2b8;</p><

111、p>　　FONT-SIZE: 12px;</p><p>　　CURSOR: pointer}</p><p>　　.num LI.on {</p><p>　　LINE-HEIGHT: 15px;</p><p>　　WIDTH: 15px;</p><p>　　BACKGROUND: url(../image

112、s/flashbutton.gif) no-repeat;</p><p>　　HEIGHT: 15px;</p><p>　　COLOR: #ffffff}</p><p><b>　　DIV的實(shí)現(xiàn)代碼：</b></p><p><b>　　<div></b></p>&

113、lt;p>　　<body style="text-align:center"></p><p>　　<DIV id=idContainer2 class=container></p><p>　　<TABLE id=idSlider2 border=0 cellSpacing=0 cellPadding=0></p>

114、<p><b>　　<TBODY></b></p><p><b>　　<TR></b></p><p>　　<TD class=td_f><A href="#" target="_blank"><IMG src="images/

115、01.jpg"></A></TD></p><p>　　<TD class=td_f><A href="#" target="_blank"><IMG src="images/02.jpg"></A></TD></p><p>　　

116、<TD class=td_f><A href="#" target="_blank"><IMG src="images/03.jpg"></A></TD></p><p>　　<TD class=td_f><A href="#" target="_

117、blank"><IMG src="images/04.jpg"></A></TD></p><p>　　<TD class=td_f><A href="#" target="_blank"><IMG src="images/05.jpg"><

118、/A></TD></p><p>　　</TR></TBODY></TABLE></p><p>　　<UL id=idNum class=num></UL></p><p><b>　　</DIV></b></p><p><

119、;b>　　<SCRIPT></b></p><p>　　其余的一些實(shí)現(xiàn)功能差不多是DIV＋CSS制作的，那就說說最后的，且是最重要部分～留言板！</p><p><b>　　留言板的文件夾：</b></p><p>　　留言板主頁(yè)index.asp代碼：</p><p>　　<%@ C

120、ODEPAGE = "936" %></p><p><b>　　<%</b></p><p><b>　　'</b></p><p><b>　　'</b></p><p><b>　　'</b>&

121、lt;/p><p><b>　　%></b></p><p>　　<script language="Javascript"></p><p>　　function checkdate()</p><p><b>　　{</b></p><p&g

122、t;　　if(document.liuyanForm.name.value=="") </p><p><b>　　{</b></p><p>　　alert('昵稱沒有寫!');</p><p>　　return false;</p><p><b>　　}</b&g

123、t;</p><p>　　else if(document.liuyanForm.comment.value=="") </p><p><b>　　{</b></p><p>　　alert('你留下了什么？');</p><p>　　return false;</p>

124、<p><b>　　}</b></p><p>　　else if(isNaN(document.liuyanForm.QQ.value))</p><p><b>　　{</b></p><p>　　alert('QQ號(hào)碼不正確!');</p><p>　　return

125、 false;</p><p><b>　　}</b></p><p>　　return true;</p><p><b>　　}</b></p><p><b>　　</script></b></p><p><b>　　<

126、;%</b></p><p>　　colorbool = 1</p><p>　　colorone = "#99CC99"</p><p>　　colortwo = "#CCFFCC"</p><p>　　filename = "bbs.mdb"</p>&

127、lt;p>　　tablename = "liuyan"</p><p>　　dbfile = server.mappath(filename)</p><p><b>　　'設(shè)置數(shù)據(jù)庫(kù)</b></p><p>　　Const adOpenForwardOnly = 0</p><p>　

128、　Const adOpenKeyset = 1</p><p>　　Const adOpenDynamic = 2</p><p>　　Const adOpenStatic = 3</p><p>　　Const adLockReadOnly = 1</p><p>　　Const adLockPessimistic = 2</p>

129、;<p>　　Const adLockOptimistic = 3</p><p>　　Const adLockBatchOptimistic = 4</p><p>　　Const adCmdUnknown = &H0008</p><p>　　Const adCmdText = &H0001</p><p>

130、　　Const adCmdTable = &H0002</p><p>　　Const adCmdStoredProc = &H0004</p><p>　　Const adCmdFile = &H0100</p><p>　　Const adCmdTableDirect = &H0200</p><p>