網絡技術畢業(yè)設計(論文)個人主頁設計

上傳人:仙*** 文檔編號:27875680 上傳時間:2021-08-21 格式:DOC 頁數(shù):16 大小:1.78MB
收藏 版權申訴 舉報 下載
網絡技術畢業(yè)設計(論文)個人主頁設計_第1頁
第1頁 / 共16頁
網絡技術畢業(yè)設計(論文)個人主頁設計_第2頁
第2頁 / 共16頁
網絡技術畢業(yè)設計(論文)個人主頁設計_第3頁
第3頁 / 共16頁

下載文檔到電腦,查找使用更方便

15 積分

下載資源

還剩頁未讀,繼續(xù)閱讀

資源描述:

《網絡技術畢業(yè)設計(論文)個人主頁設計》由會員分享,可在線閱讀,更多相關《網絡技術畢業(yè)設計(論文)個人主頁設計(16頁珍藏版)》請在裝配圖網上搜索。

1、 網絡技術畢業(yè)論文 論文題目: 個人主頁設計 專 業(yè): 計算機網絡 學生姓名: 準考證號: 060510100 指導教師: 2010年 1 月 1 日 摘  要 隨著現(xiàn)代計算機科學的發(fā)展,網絡已經越來越普及,如今網絡已經成為每個人生活的一部分,同時網絡也提供了一種很好的信息交換平臺,而個人主頁是一個可以在網絡上展示個人信息的方便手段。本文介紹了如何開發(fā)個人網站。首先介紹開發(fā)工具Dreamweaver以及HTML等

2、技術,然后詳細講解了個人主頁的結構與開發(fā)。 關鍵詞:Dreamweaver 個人主頁 HTML 簡歷 ABSTRACT Along with the modern computer science development, the network already more and more popularized, now the network already became a part each person life, at the same time the network has also provided one kind of very good exchange

3、 of information platform, but individual main page was may demonstrate individual information in the network the convenient method. This article introduced how to develop individual website. First introduced development kit Dreamweaver and HTML technology, then in detail explained the structure of t

4、he individual page and how to develop. Keywords: Dreamweaver; Individual website; HTML; resume 目  錄 第一章 引言 5 第二章 網頁制作概述 6 2.1 網頁的基礎知識 6 2.1.1 Internet簡介 6 1.1.2 站點與網頁的建立 6 2.2 Dreamweaver的運用 6 2.2.1 背景的設置 6 2.2.2 表格的使用 6 2.2.3 插入圖像及調整圖像大小 7 2.2.4文本段落的編輯 7 2.3 應用多媒體 7 2.3.1 在頁面中插入

5、背景音樂 7 2.3.2 添加Flash影片 7 2.4模板的制作與應用 8 2.5 應用HTML語言 8 2.5.1制作跑馬燈效果 8 第三章 網頁內容介紹 10 3.1 首頁的設計及目的 10 3.2 簡歷頁面的設計及內容 11 3.3 相冊頁面的設計及內容 11 3.4 日志頁面的設計及內容 12 3.5 聯(lián)系我頁面的設計及內容 13 結 論 14 參考文獻 15 第一章 引言 在Internet飛速發(fā)展的今天,互聯(lián)網成為人們快速獲取、發(fā)布和傳遞信息的重要渠道,它在人們政治、經濟、生活等各個方面發(fā)揮著重要的作用。Internet上發(fā)布信息主要是通過網

6、站來實現(xiàn)的,獲取信息也是要在Internet“海洋”中按照一定的檢索方式將所需要的信息從網站上下載下來。因此網站建設在Internet應用上的地位顯而易見,它已成為政府、企事業(yè)單位信息化建設中的重要組成部分,從而倍受人們的重視。我利用Dreamweaver軟件制作了我的個人主頁。下面我將從所運用的技術和包含的內容兩方面向大家全面的介紹其制作過程。 第二章 網頁制作概述 2.1 網頁的基礎知識 2.1.1 Internet簡介 Internet是一個全球性的計算機互聯(lián)網絡,中文名稱為“國際互聯(lián)網”或“因特網”,它集現(xiàn)代通信技術和計算機技術與一體,是計算機之間進行國際信息交流和實現(xiàn)

7、資源共享的良好手段。 Internet是全球最大的信息資源庫,幾乎包括了人類生活的方方面面的信息,如政府部門、教育、科研、商業(yè)、工業(yè)、文化藝術、娛樂等。經過多年的發(fā)展,互聯(lián)網已經在社會的各個層面為全人類提供便利。 1.1.2 站點與網頁的建立 在制作網頁之前,首先要創(chuàng)建和設置本地站點。首先要創(chuàng)建本地站點的文件夾,命名為MY PW.然后分別建立“首頁”、“簡歷”、“相冊”、“日志”、“聯(lián)系我”等主要網頁。然后在“日志”中有設分頁,將內容進一步擴展。編輯網頁時,直接點擊右側文件中的相應網頁即可。 2.2 Dreamweaver的運用 2.2.1 背景的設置 網頁的背景顏色決定了網頁

8、的風格,合理的設計和搭配是網頁成功的關鍵,由于是個人主頁,所以背景顏色沒有特殊的要求,全憑個人喜好,我比較喜歡夜晚的星空,所以用星空作為背景,并保持整個網站的主色調為黑色,看起來眼睛也會覺得很舒服。對于原有圖形利用Photoshop進行處理,調整好大小和顏色在頁面屬性中插入預先設計好的圖片。 2.2.2 表格的使用 表格是網頁設計的精華,它使信息更加簡潔和條理化。表格是網頁排版布局不可缺少的工具,合理利用表格,可以使網頁結構清晰有層次,而且便于管理和修改。在設計過程中,我在布局頁面通過設定表格區(qū)域,插入表格,對網頁進行布局,使結構看起來整潔有序。 2.2.3 插入圖像及調整圖像大小 一

9、個純文本的網頁會讓人感到索然無味,所以適當?shù)膱D片是必須的,但是要保證不能太多,不但會喧賓奪主,而且還影響網頁的下載速度,讓用戶因為受不了焦急的等待而離開頁面。通過網絡我搜索了與網站內容相關,顏色搭配的一些素材,力在突出我的專業(yè)特色,在網頁里插入了一些與電子方面相關的圖片。 2.2.4文本段落的編輯 文本的編輯是網頁設計中比較容易實現(xiàn)的功能,但也是一個網站的主要內容所在,不管網頁做的有多么花哨,內容一定要充實,這樣才能吸引別人光顧。在需要輸入文字的表格中單擊之后即可輸入文字。利用“屬性”命令,可以更改輸入文字的字體及大小。在輸入文字過程中,若想連續(xù)輸入空格,則需要單擊“編輯—首選參數(shù)—允許連

10、續(xù)輸入多個空格”選中該框即可,也可以按住shift+ctrl+任意次空格。 其中如果想讓各個網頁的文字有統(tǒng)一的格式,可以用CSS來對文本進行設置,具體CSS的用法在下面詳細介紹。 2.3 應用多媒體 2.3.1 在頁面中插入背景音樂 除了靜態(tài)的圖片,越來越多的動態(tài)效果被應用到網頁的設計和制作過程中。多媒體技術使網頁變得更加生動、有趣、絢麗多彩。在制作時,可以在網頁中插入背景音樂,增加意境。首先是鼠標放在需要插入音樂的地方,單擊插入插件,打開“選擇文件”對話框,選擇站點文件夾中的聲音文件,并單擊確定。在“屬性”檢查其中“參數(shù)”按鈕中輸入“hidden”,”autostart”,在列中

11、均輸入”true”,則播放器被隱藏且無限期重復。 但是考慮到插入背景音樂會很大程度上影響網頁的下載速度,并且有很多用戶不喜歡背景音樂,甚至剛一開網頁突然的很大聲的音樂會給訪問者帶來不好的印象,所以我沒有在我的個人主頁里插入背景音樂。 2.3.2 添加Flash影片 Flash是一種交互式動畫,在網頁中插入Flash影片,增添了動態(tài)效果,使網頁看起來更加富有動感。它是網頁的亮點,它能給網頁帶來新鮮與活力。好的flash能讓網頁添色很多,但是如果flash總不停的閃爍,影響訪問者的閱讀,讓訪問者的眼睛感到不適,那樣的flash就很失敗了。經過我的精心挑選,幾乎在每個網頁中我都插入了flash

12、動畫。 Flash圖像瀏覽器可以通過自定義參數(shù)實現(xiàn)圖像的切換特效。將光標放置于要插入圖像瀏覽器的位置,執(zhí)行菜單欄上“插入-媒體-圖像查看器命令”打開“保存Flash元素”的對話框,將其保存在指定的站點目錄下,將文件名輸入browse.swf并保存。設置Flash元素面板,即可完成操作。 2.4模板的制作與應用 如果網頁中的布局格式基本相同,可以采用創(chuàng)建模板,不但可以節(jié)省大量時間,也便于網站的維護管理。 創(chuàng)建模板通常有兩種方式,一是先創(chuàng)建文檔,再把文檔轉化成模板;另一種方法是直接創(chuàng)建。在此次網頁制作過程中,創(chuàng)建模板的方法為首先創(chuàng)建網頁中所有子頁相同的部分,然后在模板窗口中插入表格作為可編

13、輯區(qū)。最后保存模板。應用模板時,單擊右側的“文件”窗格,選擇“資源”面板,單擊“應用”按鈕即可應用。在編輯區(qū)編輯子頁,最后進行保存。 2.5 應用HTML語言 HTML(HyperText Mark-up Language)即超文本標記語言或超文本鏈接標示語言,是目前網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。設計HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起,形成有機的整體,HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。 2.5.1制作跑馬燈效果 在網頁的下面,我利

14、用HTML提供的marquee命令,即:
歡迎光臨我的主頁,希望這里可以給你帶來輕松與歡笑!
完成了滾動公告板的制作。 具體過程不用記住代碼,可以用Dreamweaver自帶的“標簽檢查器”設置標簽的屬性值,它的功能類似于

15、屬性面板,但是比屬性面板更強大。步驟如下: 1.把光標插入點放在需要插入滾動字幕的地方。 2.點擊插入面板的“標簽選擇器 ” 3.選擇 marquee標簽,點擊“插入”按鈕。 4.轉換到代碼視圖。把光標插入點放在 marquee標簽內。 5. 選擇“窗口”-->“標簽檢查器”。然后選擇屬性,單擊未分類前面的"+",可以在“標簽檢查器”中設置標簽的各種用法。 6.點擊behavior設置項右邊的下拉箭頭,選擇滾動字幕內容的運動方式。 7.direction屬性設置字幕內容的滾動方向。 8.scrollamount屬性設置字幕滾動的速度。 9.scrolldelay屬性設置字幕內

16、容滾動時停頓的時間,單位為毫秒。如果要讓滾動看起來流暢,數(shù)值應該盡量小。實例中設置為1毫秒。如果要有步進的感覺,就設置時間長一點。 10.width屬性設置滾動字幕的寬度。 11.style屬性設置字幕內容的樣式。實例中設置字幕文字大小,輸入了“font:12px;”。 12.loop屬性設置字幕內容滾動次數(shù),默認值為無限。“-1”也為無限。 第三章 網頁內容介紹 本網站制作的主要關于我生活學習中的一些事情,主要分為“首頁”“簡歷”“相冊”“日志”“聯(lián)系我”五個板塊,從不同方面展示我自己。同時還鏈接了簡歷下載,供用人單位下載。我將在下面進行詳細介紹。 3.1 首頁的設計及目

17、的 首頁是一個網站的主索引頁,是令訪客了解網站概貌并引導其調閱重點內容的向導。首頁是一個網站的第一頁,也是最重要的一頁。首頁是體現(xiàn)個人主頁的主人性格的的重中之重,也是網站所有信息的歸類目錄或分類縮影。首頁設計要求在保障整體感的前提下,根據大多數(shù)人的閱讀習慣以色彩、線條、圖片等要素將導航條、各功能區(qū)以及內容區(qū)進行分隔。以營造高易用性與視覺舒適性的人機交互界面為終極目標。 最上面為通過CSS修飾了的“于鵬的個人主頁”,下面是導航條,包括了網站里的所有主要的網頁,清晰明了。左邊以flash按鈕的方式列出了一些常用的網站鏈接,以方便平時上網。按鈕下面是我的英文個性簽名,使得網頁更加突出個人性格色彩

18、。中間是對網站三大部分的闡述和簡介,以一個指南針和一個flash時鐘修飾,右下角是一個世界時間的flash,可以用來查看各個時區(qū)的時間,左上角用一個flash作為banner條,具有動態(tài)效果,又不顯得凌亂。頁面最下方用滾動條的形式顯示了歡迎語。整個頁面簡潔大方,富有個性,動靜結合,達到了我努力營造的比較和諧的效果。具體布局如下圖。 首頁 3.2 簡歷頁面的設計及內容 簡歷頁面是從方便招聘公司的角度來進行設計的。首先一個黑色的頁面里有一棵大樹,后面是藍天和白云,讓人的眼睛感到很舒服,心情很平靜愉快,黑色不刺激眼睛,而藍色則能讓人的眼睛放松。 為了方便用人單位進行查看,我對簡歷的每一個

19、部分都同多錨記進行了鏈接,可以方便快捷的查看每個部分,并且由于網頁比較長,我在最后也通過錨記鏈接到了頁首,使界面友好。并且可以通過點擊簡歷下載來下載我的正式版的個人簡歷,以供用人單位參考和保存。網頁通過導航條跟各個頁面連接。 文字通過CSS進行修飾,整體采用綠色和白色兩種色調,主要還是起到即明顯又不累眼睛的作用。 文字右上方用Dreamweaver自帶的相冊生成工具制作,具體方法為插入—媒體—圖像查看器,然后按向導進行各個設置,最后就自動生成了一個簡介的相冊,用來動態(tài)的展示我的獎勵與證書。 3.3 相冊頁面的設計及內容 相冊頁面大體布局跟首頁相似,只是中間內容區(qū)顯示的是我通過Fla

20、sh軟件制作的個人相冊,里面有我去沈陽,北京的照片以及我自己的影的作品和收藏的圖片。 Flash相冊功能強大,左下角的圖像用來選擇背景音樂,右邊顯示圖片的預覽,并且可以直接點進任何一個照片,下面的按鈕用來一個一個的查看以及幻燈片效果播放。右上角的蝴蝶可以拖到相冊的任何位置,并不時的扇動翅膀,增加相冊的動感。 3.4 日志頁面的設計及內容 日志模塊里存放了我原創(chuàng)的和搜集日志,里面有我大學一直在做的智能車相關的日志以及各種生活感悟,各種有教育意義的內容。 日志首頁通過一個“鼠標經過圖像”來裝飾,讓頁面生動有趣。左邊有各個日志的鏈接,可以方便快捷的查看各個日志。 3.5 聯(lián)系我頁面

21、的設計及內容 最后是能跟我進行交互的聯(lián)系我頁面,上面的表單可以方便瀏覽者留下個人信息并跟我進行交流,不過數(shù)據庫方面沒有做,所以只是一個形式,具體內容有待添加。 下面是我的個人信息,其中電子郵件通過在鏈接里輸入mailto:yup775@可以直接打開用戶電腦里的郵件軟件給我發(fā)送郵件,方便讀者。 結 論 在整個網站的設計制作過程中,我運用了CSS,表格布局網頁,并添加了圖像、Flash動畫、按鈕、動態(tài)圖片等,力求使網頁更加美觀,引人入勝。但由于本人專業(yè)水平有限,雖力求完美,卻仍有很大的不足亟待改正。在以后的學習中,我將會不斷努力,提高自己的專業(yè)水平,設計制作出更加完美的網頁。

22、 參考文獻 [1] 劉霆雨 編著DreamweaverMX2004 人民郵電出版社2006 [2] 林毅 編著 精通Dreamweaver8 北京:清華大學出版社 2007 [3] 湯倩 編著 Dreamweaver基礎精講與實例 人民郵電出版社 2006 [4] 彭力揚 編著 網頁制作 中國青年出版社2006 [5] 王杰 周湘文 等編著 網頁編程入門與應用實例 清華大學出版社 2003 [6] 張楠 刑謹 編著 網頁設計基礎教程 清華大學出版社 2004 [7] 李剛 編著 網頁美工基礎 機械工業(yè)出版社 2004. [8] 姜楠 編著 Dreamw

23、eaver完美網站設計與制作 中國青年出版社 2004 [9] 管建軍 編著 CSS動態(tài)網頁設計與制作 清華大學出版社 2006 [10]張孝文 編著 Dreamweaver設計與制作 人民郵電出版社 [11]程佩青 編著 完美網頁制作與設計實例 機械工業(yè)出版社 2003 [12]王學武 編著 基礎網站建立與設計 中國青年出版社 2003 指 導 教 師 評 語 指導教師簽名: 畢 業(yè) 論 文 成 績 指導教師簽名:

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

相關資源

更多
正為您匹配相似的精品文檔
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服 - 聯(lián)系我們

copyright@ 2023-2025  zhuangpeitu.com 裝配圖網版權所有   聯(lián)系電話:18123376007

備案號:ICP2024067431-1 川公網安備51140202000466號


本站為文檔C2C交易模式,即用戶上傳的文檔直接被用戶下載,本站只是中間服務平臺,本站所有文檔下載所得的收益歸上傳人(含作者)所有。裝配圖網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對上載內容本身不做任何修改或編輯。若文檔所含內容侵犯了您的版權或隱私,請立即通知裝配圖網,我們立即給予刪除!