個人網(wǎng)站設(shè)計論文[共18頁]
《個人網(wǎng)站設(shè)計論文[共18頁]》由會員分享,可在線閱讀,更多相關(guān)《個人網(wǎng)站設(shè)計論文[共18頁](18頁珍藏版)》請在裝配圖網(wǎng)上搜索。
1、 合肥經(jīng)濟(jì)技術(shù)職業(yè)學(xué)院 畢業(yè)設(shè)計論文 ( 2011 — 2012 學(xué)年) 論文(設(shè)計)題目_____________________________________ 院 系 名 稱___________________________________ 專 業(yè) 班 級______________________________________ 學(xué) 生 姓 名______________________________________ 學(xué) 號____________________________________
2、__ 指 導(dǎo) 教 師______________________________________ 日期 2012年 月 日 目 錄 摘 要 3 引 言 4 第一章 網(wǎng)站制作的基礎(chǔ)知識 5 1.1建站工具 5 1.2網(wǎng)站建設(shè)的三個階段 5 1.3網(wǎng)站設(shè)計步驟 5 第二章 制作網(wǎng)頁 7 2.1 建立站點 7 2.2 制作首頁 7 2.2.1 頁面設(shè)置 7 2.2.2 網(wǎng)頁布局 8 2.2.3 插入圖像 9 2.2.4 插入多媒體 9 2.2.5插入文本 10 2.3 建立子網(wǎng)頁
3、 10 第三章 網(wǎng)頁鏈接 11 3.1文本鏈接 11 3.2圖像鏈接 12 3.3郵件鏈接 12 3.4錨點鏈接 12 第四章 HTML語言 14 4.1HTML語言結(jié)構(gòu) 14 4.2 網(wǎng)頁的基本代碼 14 4.3表格的基本語法 15 4.4超鏈接代碼 15 第五章 網(wǎng)站維護(hù)和測試 16 總 結(jié) 17 參考文獻(xiàn) 18 摘 要 隨著經(jīng)濟(jì)社會的發(fā)展,計算機(jī)已被應(yīng)用到社會生活的各個領(lǐng)域。與此同時,互聯(lián)網(wǎng)作為信息技術(shù)的通信橋梁連接著全球的計算機(jī),而網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者,在Internet上表現(xiàn)出其及
4、其重要的地位,并發(fā)揮著其及其重要的作用。無論是在國內(nèi)還是國外都得以迅速的發(fā)展和壯大,并被人們重視和關(guān)注。互聯(lián)網(wǎng)已經(jīng)徹底的改變了世界,互聯(lián)網(wǎng)的世界里蘊藏著無限的可能,在這種情況下,各行各業(yè)及其個人、單位、工廠、企事業(yè)等等在網(wǎng)上構(gòu)筑屬于自己的網(wǎng)絡(luò)信息平臺,保護(hù)自己的網(wǎng)絡(luò)資源并在互聯(lián)網(wǎng)上開辟自己的市場和消費群體,以及構(gòu)造自己的數(shù)字化世界和加強(qiáng)全球范圍內(nèi)不同地域的人們聯(lián)系交流等等活動也就顯的日益重要。于是各種各樣的網(wǎng)站便如雨后春筍般地出現(xiàn)魚龍混雜且良莠不齊。Internet的日益興起和以網(wǎng)頁為載體的網(wǎng)絡(luò)信息的廣泛傳播和應(yīng)用,使得網(wǎng)站的建設(shè)及網(wǎng)頁制作得到發(fā)展的空間,大至大型企業(yè)的產(chǎn)品推銷、售后服務(wù)、解決
5、方案,小至個人Web頁面開發(fā),形形色色,五彩繽紛,網(wǎng)站建設(shè)和網(wǎng)頁制作也成為計算機(jī)網(wǎng)絡(luò)領(lǐng)域最熱門的話題。 基于如今社會的需要,本論文主要介紹怎樣制作一個靜態(tài)的個人網(wǎng)站。并且在建立個人網(wǎng)站的過程中逐漸理解和加強(qiáng)大學(xué)這幾年所學(xué)習(xí)的關(guān)于制作網(wǎng)站的各種知識點。在我個人的理解中,制作一個具有特色的個人網(wǎng)站,能夠有自己的個性和特點。這樣才能吸引人。只有一個目標(biāo),那就是做好自己。 關(guān)鍵詞: 個人 設(shè)計 網(wǎng)站 引 言 人類已進(jìn)入21世紀(jì),科學(xué)技術(shù)突飛猛進(jìn),經(jīng)濟(jì)知識和信息產(chǎn)業(yè)初見端倪,特別是信息技術(shù)和網(wǎng)絡(luò)技術(shù)的訊速發(fā)展和廣泛應(yīng)用,對社會的政治,經(jīng)
6、濟(jì),軍事,文化等領(lǐng)域產(chǎn)生越來越深刻的影響,也正在改變?nèi)藗兊墓ぷ?生活學(xué)習(xí),交流方式。信息的獲取,處理,交流和應(yīng)用能力,已經(jīng)成為人們最重要的能力之一。 在不久的將來知識經(jīng)濟(jì)將占世界經(jīng)濟(jì)發(fā)展的主導(dǎo)地位,國家綜合國力和國際競爭能力越來越取決于教育發(fā)展,科學(xué)技術(shù)和知識創(chuàng)新的水平,教育在經(jīng)濟(jì)和社會發(fā)展過程中將呈現(xiàn)出越來越突出的重要作用。 隨著Internet的出現(xiàn),網(wǎng)絡(luò)正在改變整個世界,由于Internet具有傳播信息容量極大、形態(tài)多樣、迅速方便、全球覆蓋、自由和交互的特點,已經(jīng)發(fā)展成為新的傳播媒體,而將教育和網(wǎng)絡(luò)相結(jié)合,將會更好的推動教育的發(fā)展?,F(xiàn)在不僅很多大學(xué)和眾多企業(yè)部門都已經(jīng)建立了自己的網(wǎng)站
7、,而且個人網(wǎng)站也如雨后春筍般大量的出現(xiàn),通過計算機(jī)網(wǎng)絡(luò)實現(xiàn)宣傳、交流及資源的整合 第一章 網(wǎng)站制作的基礎(chǔ)知識 1.1建站工具 編輯網(wǎng)頁的工具有很多,但是我們一般用的是Macromedia公司的網(wǎng)頁制作三劍客來制作網(wǎng)頁。三劍客分別為Dreamweaver CS3、fireworks、flash。 1.2網(wǎng)站建設(shè)的三個階段 (1)、網(wǎng)站的定位 即網(wǎng)站設(shè)計的最終目標(biāo)及指導(dǎo)方針。確立網(wǎng)站的主題,解決為誰設(shè)計、吸引誰,交流什么。 (2)、制作網(wǎng)頁 通過網(wǎng)頁設(shè)計體現(xiàn)網(wǎng)站整體協(xié)調(diào)一致的風(fēng)格。網(wǎng)站的色彩基調(diào)、配色方案、頁面色彩的格調(diào)、頁面構(gòu)圖及圖片、
8、動畫的處理等都要反復(fù)研究。方便的導(dǎo)航設(shè)計使用戶易于訪問站點中的資源。 (3)、網(wǎng)站的發(fā)布與維護(hù) 完成對網(wǎng)站所有文件的測試并上傳到服務(wù)器,進(jìn)行網(wǎng)站的推廣和宣傳,建立信息的收集反饋系統(tǒng),及時更新網(wǎng)頁。 1.3網(wǎng)站設(shè)計步驟 (1)、設(shè)定網(wǎng)站主題并搜集資料 分析網(wǎng)站的訪問對象是什么樣的群體,確定網(wǎng)站要為訪問者提供什么樣的服務(wù)。圍繞網(wǎng)站設(shè)計要達(dá)到的目標(biāo),進(jìn)一步?jīng)Q定網(wǎng)站展示的內(nèi)容和網(wǎng)站要實現(xiàn)的功能。 (2)、建立站點的目錄結(jié)構(gòu) 用來分類保存網(wǎng)站中的不同的資源,精心設(shè)計的網(wǎng)站目錄結(jié)構(gòu)有利于網(wǎng)站類容的擴(kuò)充和移植需要。很多初學(xué)者往往不注意建立站點的目錄結(jié)構(gòu),所有的文件都保存在一個目錄中,這給今后的
9、網(wǎng)站維護(hù)和擴(kuò)充帶來了很大的困難。例如,files保存非index之外是文件,images保存圖片文件,sounds保存聲音文件等等。 (3)、建立網(wǎng)頁的鏈接關(guān)系 網(wǎng)頁的鏈接結(jié)構(gòu)要層次清晰、訪問方便快捷,就要設(shè)計網(wǎng)站中網(wǎng)頁的鏈接關(guān)系。用最少的點擊打開網(wǎng)站內(nèi)的任何一個網(wǎng)頁,為用戶提供最便捷的服務(wù)。 (4)、頁面設(shè)計與網(wǎng)頁制作 網(wǎng)站圖標(biāo)、網(wǎng)頁標(biāo)題、導(dǎo)航欄設(shè)計、各頁風(fēng)格、頁面規(guī)劃、便捷的鏈接、合理使用框架、巧用背景色、合適的圖片、網(wǎng)頁空白。 (5)、網(wǎng)站測試 已經(jīng)建好的一個設(shè)計精美的網(wǎng)站在發(fā)布之前要進(jìn)行嚴(yán)格的測試。如果在測試過程中發(fā)現(xiàn)了錯誤,就要及時修改,在準(zhǔn)確無誤后,可正式在Intern
10、et上發(fā)布。 (6)、網(wǎng)站發(fā)布 把制作好的網(wǎng)站發(fā)布到自己的服務(wù)器系統(tǒng)上,也可以使用上傳工具把網(wǎng)站發(fā)布到ISP提供的虛擬主機(jī)上。在國外或國內(nèi)網(wǎng)站提供免費的主頁空間和域名,上傳后就可以使用瀏覽器訪問自己的網(wǎng)站了 (7)、推廣宣傳與后期維護(hù) 網(wǎng)頁上傳后,及時更新網(wǎng)站內(nèi)容,為瀏覽者提供豐富、及時的信息。網(wǎng)頁的更新速度是衡量一個網(wǎng)站的主要目標(biāo)。同時為了增加網(wǎng)站的訪問量,要采用各種方法加以推廣。例如在搜索引擎上注冊,發(fā)布網(wǎng)絡(luò)廣告提供免費服務(wù)或者使用傳統(tǒng)的促銷媒介等等方式來推廣網(wǎng)站。 第二章 制作網(wǎng)頁 2.1 建立站點 選擇“
11、站點”,單擊“管理站點”,單擊“新建”,選擇站點。如圖(2—1): 圖2—1 在按上圖完成所填部分,在面板組就會出現(xiàn)站點等文件夾了。在右邊的面板組中選擇“站點”文件名,右擊“新建文件”,命名為“index”,完成首頁的命名。 2.2 制作首頁 2.2.1 頁面設(shè)置 首先雙擊“index.html”,進(jìn)入頁面的編輯窗口。右健單擊空白區(qū)域,在菜單中選擇“頁面屬性”,之后彈出“頁面屬性”對話框,若選擇主菜單“修改/頁面屬性”項,也可以把打開該對話框。在“頁面屬性”對話框中,左側(cè)窗口顯示“分類”,其中包括了“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”、“跟蹤圖像”5項
12、,右側(cè)區(qū)域則顯示各類中可以設(shè)置的項目。首頁設(shè)置的屬性如圖(2—2)所示: 圖2—2 2.2.2 網(wǎng)頁布局 在網(wǎng)頁布局中一般采用表格來進(jìn)行布局。下面簡單介紹下表格的布局方式。通過單擊“插入”面板中的“常用”選項中的“表格”來打開“表格”對話框,對話框可分為“表格大小”、“頁眉”、“輔助功能”三部分。對表格的各項屬性設(shè)置如圖(2—3)所示: 圖2—3 2.2.3 插入圖像 圖像是網(wǎng)頁中不可或缺的組成成份,恰當(dāng)?shù)厥褂脠D像,可以使網(wǎng)站充滿生活生命力與說服力,吸引更多的瀏覽者,加深他們欣賞你網(wǎng)站的意愿。首先將游標(biāo)停留在要插入圖像的位置,通過單擊“常用”欄中的“圖像”的下拉按鈕,單擊第
13、一個“圖像”按鈕,隨即彈出“選擇圖像源文件”對話框。從計算機(jī)磁盤中選擇想要插入的圖像文件。如圖(2—4)所示: 圖2—4 2.2.4 插入多媒體 將光標(biāo)移到要插入Flash動畫的位置,選擇“插入”面板中的“常用”選項卡單擊“媒體”右側(cè)的命令,再單擊第一個“Flash”選項。再從打開選擇文件對話框中選擇你所需要的Flash動畫(*.swf),調(diào)整Flash 動畫的大小,既可以手動調(diào)整,也可以在下面的屬性里添上我自己事先設(shè)置好的大小,如圖(2—5)所示,在瀏覽器中,F(xiàn)lash動畫才可以被看到,要想看看效果的話,只有按F12預(yù)覽下。 圖2—5 2.2.5插入文本 文字是人類語言最
14、基本的表達(dá)方式,在網(wǎng)頁中,文本內(nèi)容也可以說是重要的組成部分,它是最關(guān)鍵的因素。插入文本的兩種方式:一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入文本;另一種是復(fù)制文本的方式。直接使用Dreamweaver的文本復(fù)制功能,將大段的文本內(nèi)容拷貝到網(wǎng)頁的編輯窗口來進(jìn)行排版的工作,具體步驟如下:打開文本編輯軟件(如Microsoft Word),選中要復(fù)制的文本,執(zhí)行菜單“編輯/復(fù)制”命令或直接用快捷鍵Ctrl+C,之后切換回Dreamweaver,將游標(biāo)停留在插入文本的位置,執(zhí)行主菜單“編輯/粘貼”命令或直接使用快捷鍵Ctrl+v,即可將大段的文本快速粘貼到網(wǎng)頁中。 2.3 建立子網(wǎng)頁 制作子網(wǎng)頁的一般步
15、驟和首頁的步驟差不多。如果說你的首頁中有標(biāo)題的話,那么在子網(wǎng)頁中也一定要和首頁的位置是一樣的。在子網(wǎng)頁中一般需要大量的文字?jǐn)⑹龌蛘邎D片,這就需要做好細(xì)節(jié)工作了。 第三章 網(wǎng)頁鏈接 網(wǎng)站實際上是由很多網(wǎng)頁組成的,那么網(wǎng)頁之間是如何聯(lián)系的呢?這就是本章要講的內(nèi)容----網(wǎng)頁的“鏈接”?!版溄印保址Q“超鏈接",它作為網(wǎng)頁的橋梁。網(wǎng)頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 中,如果以“鏈接”的媒介來劃分的話,則“鏈接”可以分為“文本鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“E-mail鏈接”、“錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”,共8種
16、。下面我所介紹將是在本網(wǎng)站中所能用到的鏈接方式。 3.1文本鏈接 “文字鏈接”即以文字作為媒介的鏈接,它是網(wǎng)頁中最常被使用的鏈接方式,具有“文件小、制作簡單和便于維護(hù)”的特點。接下來結(jié)合我的個人網(wǎng)站為實例,來講解如何為文字建立“鏈接”。 將已經(jīng)制作完成的首頁的各個子網(wǎng)頁準(zhǔn)備好。在Dreamweaver 中打開首頁,之后反白選取作為“鏈接”的文字。觀察“屬性面板”,其中包括一個“鏈接”文本框和“目標(biāo)”文本框。接下來需要把鏈接的位址加入到文本框中。 在“鏈接”文本框下面還有一個“目標(biāo)”下拉列表,從中可以選擇鏈接網(wǎng)頁顯示的窗口方式,共有4種。(“目標(biāo)”文本框有四個選項。分別為-blank 、-
17、parent 、-self或 top。)點擊“blank”表示鏈接目標(biāo)出現(xiàn)在新打開的窗口。還可以設(shè)置一些“鏈接”的屬性,單擊“屬性面板”中的“頁面屬性”,選擇其中的“鏈接”分類,可以進(jìn)行的設(shè)置有“鏈接字體”、“大小”、“鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下劃線樣式”。至此,第1個欄目的鏈接就制作完畢了,按下Ctrl+S保存網(wǎng)頁,再按下F12預(yù)覽,測試一下,當(dāng)鼠標(biāo)放在你所鏈接的文字上時將變成手形,并且瀏覽器窗口下面的狀態(tài)區(qū)中會顯示鏈接到的網(wǎng)頁的位址,單擊文字,頁面會立即跳轉(zhuǎn)到第1個欄目中,這表示鏈接已經(jīng)制作成功了。 3.2圖像鏈接 “圖像”也是常被使用
18、的鏈接媒體,它和“文字鏈接”非常相似。為圖像加入鏈接,首先應(yīng)該在網(wǎng)頁中插入“圖像”,有關(guān)插入“圖像”或“導(dǎo)航條”按鈕的內(nèi)容,接下來以我的網(wǎng)站為例,講解如何建立“圖像鏈接”。 首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁和各個欄目的頁面在Dreamweaver中打開網(wǎng)站的首頁,之后選取要制作“鏈接”的圖像。觀察“屬性面板”,在“鏈接”文本框中輸入鏈接的文字位址。如果有需要,可以在“目標(biāo)”下拉列表中選擇“鏈接”網(wǎng)頁顯示的窗口方式,分別為-blank 、-parent 、-self或 top。至此,第1個欄目的圖像鏈接就制作完畢了,按下Ctrl+S保存網(wǎng)頁,再按下F12預(yù)覽,測試一下,將鼠標(biāo)放在“主頁”上時
19、將變成手形,同時瀏覽器窗口下面的狀態(tài)區(qū)中會顯示出鏈接到的網(wǎng)頁的地址,并且會顯示出“替代”文本“動畫制作”,單擊文字,頁面會立即跳轉(zhuǎn),這表示鏈接已經(jīng)制作成功了。同理,按照以上步驟,再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接。如果有需要,在欄目頁面中制作“返回首頁”的鏈接,使得單擊后可以跳轉(zhuǎn)回首頁。 3.3郵件鏈接 為了保持訪問者與網(wǎng)頁制作人員之間的聯(lián)系,應(yīng)該建立指向電子郵件的鏈接。選擇要鏈接的元素。單擊“插入”面板“常用”選項卡中的“電子郵件鏈接”圖標(biāo),在打開的對話框中輸入E—mail地址就行了。如圖(3—1)所示?;蛘咴凇版溄印蔽谋究蛑休斎搿癿ailto:”加上郵件地址也可以的。按下Ctrl+
20、S保存網(wǎng)頁,再按下F12預(yù)覽,單擊E—mail地址,看看能不能跳轉(zhuǎn)到空的網(wǎng)頁。 圖3—1 3.4錨點鏈接 錨點是在網(wǎng)頁文檔中設(shè)置的標(biāo)記,這些標(biāo)記通常放在文檔的特定處。錨點鏈接可以快速將訪問者帶到指定的位置。創(chuàng)建到錨點的過程分為兩步:第一步創(chuàng)建命名錨記;第二步創(chuàng)建到命名錨記的鏈接。 首先將光標(biāo)放在你想要插入錨點的位置。選擇菜單“插入”中的“命名錨記”,在彈出的對話框中輸入你想命名的錨記的名稱,如圖(3—2)所示。錨記的名稱不能為漢字。單擊“確定”按鈕。然后在網(wǎng)頁文檔中選擇要建立鏈接的文本,之后在“屬性”面板的“鏈接”文本中輸入“#錨記名稱”。按下Ctrl+S保存網(wǎng)頁,再按下F12預(yù)覽
21、,看看單擊你所錨點的文本,能不能跳轉(zhuǎn)到你想要的位置??梢缘脑挘链?,整個“錨點鏈接”的實例就全部完成了。 圖3—2 第四章 HTML語言 4.1HTML語言結(jié)構(gòu) HTML是超文本標(biāo)記語言的縮寫。它使用一些寫在<>中的標(biāo)記對文本格式、特性等進(jìn)行描述,形成的文件稱為超文本文件。通過瀏覽器解釋標(biāo)記的含義,顯示文件的內(nèi)容。下面來介紹一下網(wǎng)頁的HTML代碼結(jié)構(gòu): 標(biāo)記用于定義注釋的內(nèi)容,注釋的內(nèi)容在瀏覽器中不顯示。 ......標(biāo)記定義HTML文件(網(wǎng)頁),用于瀏覽器識別網(wǎng)頁文件
22、。網(wǎng)頁文件的所有內(nèi)容都在......標(biāo)記中。
......標(biāo)記定義網(wǎng)頁的頭部信息。頭部定義包括網(wǎng)頁的簡介和為搜索引擎提供相關(guān)信息等內(nèi)容。23、會使文本顯示出不同的標(biāo)題風(fēng)格。
......
段落標(biāo)記,定義文本的段落。換行標(biāo)記。
水平線標(biāo)記,使網(wǎng)頁中出現(xiàn)分隔線。 ......標(biāo)記用來定義網(wǎng)頁頁腳的版權(quán)信息,其中內(nèi)容是傾斜的。
...... | 的個數(shù)所確定。單元格中的內(nèi)容都在...... | 中。 4.4超鏈接代碼 超鏈接是通過......標(biāo)記定義的,定義文本超鏈接或圖片超鏈接是必須指定所鏈接的目標(biāo)位置。通過標(biāo)記的href屬性的值來確定鏈接的目標(biāo)位置。格式為: 描述文字