課程《網(wǎng)站設(shè)計、建設(shè)與維護實務(wù)》設(shè)計報告

上傳人：奔*** IP屬地：河北更新時間：2024-03-01 格式：docx 頁數(shù)：37 大?。?.58MB 人氣指數(shù)：12 舉報 版權(quán)申訴

已閱讀1頁，還剩36頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

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

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

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

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

5、　　2、課程設(shè)計報告書第二頁為任務(wù)書。　　3、課程設(shè)計報告書第三頁為教師評語。　　4、課程設(shè)計報告書第四頁為目錄。　　5、課程設(shè)計報告書第五頁開始為具體內(nèi)容　?。?）前言

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

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

8、　　教師評語　　目錄　　任務(wù)書………………………………………………..2　　二、教師評語……………………………………………3　　三、前言……………………………………………………5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

53、gt;　　q,s,samp,small,strike,strong,sub,　　sup,tt,var,dd,dl,dt,li,ol,ul,　　fieldset,form,label,legend,table,　　caption,tbody,tfoot,thead,tr,th,<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; }　　ul, ol { list-sty

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

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

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

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

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

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

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

62、.inner .message a.help { margin-left:5px; padding:0 0 0 15px; background-color:#FFFFFF }　　.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;　　text-align:center; overflow:hidden; text-decoration:none; color:#FFF; }　　.header .inner .message a.vip:hover { color:#FFF; }

64、　　.header .inner .nav { position:absolute; top:90px; left:45px; }　　.header .inner .nav a { float:left; height:27px; text-align:center; }　　.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; }　　.header .inner .nav a #nav_index { width:66px; }&l

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

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

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

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

70、ader .inner .sub_nav a { margin-right:15px; }　　.header .inner .sub_nav a.current { color:#6C7100; font-weight:bold; }　　.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;　　text-align:center; color:#FFFFFF; }　　.header .inner a.return:hover { text-decoration:none;

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

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

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

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

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

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

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

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

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

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

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

83、uot;0" cellpadding="0">　　<tr>　　<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>　　<td width=&

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

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

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

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

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

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

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

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

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

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

95、amp;nbsp;   注冊</td>

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

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

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

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

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

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

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

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

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

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

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

107、　　MARGIN: 0px;　　PADDING-LEFT: 0px;　　PADDING-RIGHT: 0px;　　PADDING-TOP: 0px}　　.num {　　P

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

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

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

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

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

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

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

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

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

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

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

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

120、ODEPAGE = "936" %>　　<%　　'　　'　　'&

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

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

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

124、　　}　　else if(isNaN(document.liuyanForm.QQ.value))　　{　　alert('QQ號碼不正確!');　　return

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

126、;%　　colorbool = 1　　colorone = "#99CC99"　　colortwo = "#CCFFCC"　　filename = "bbs.mdb"&

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

128、　Const adOpenKeyset = 1　　Const adOpenDynamic = 2　　Const adOpenStatic = 3　　Const adLockReadOnly = 1　　Const adLockPessimistic = 2

129、;　　Const adLockOptimistic = 3　　Const adLockBatchOptimistic = 4　　Const adCmdUnknown = &H0008　　Const adCmdText = &H0001

130、　　Const adCmdTable = &H0002　　Const adCmdStoredProc = &H0004　　Const adCmdFile = &H0100　　Const adCmdTableDirect = &H0200

眾賞文庫> 全部分類> 畢業(yè)設(shè)計

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 眾賞文庫僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

課程《網(wǎng)站設(shè)計、建設(shè)與維護實務(wù)》設(shè)計報告

文檔簡介

溫馨提示

最新文檔

評論

課程《網(wǎng)站設(shè)計、建設(shè)與維護實務(wù)》設(shè)計報告

文檔簡介

溫馨提示

最新文檔

評論

免費下載

課程《網(wǎng)站設(shè)計、建設(shè)與維護實務(wù)》設(shè)計報告