個人生活網站的設計與制作論文
摘要:如今網絡遍布世界各地,中國互聯網經過10多年的發展,已經形成了一個巨大的產業。建立個人網站可以使更多地人展示自己的才能,更加的人性與多元化,因此越來越多的人選擇建立自己的個人網站。學習好網站建設,不僅可以提高計算機的專業技術水平,更重要的是,今后對于網站的運用可以得心應手,方便交流,本網站設計主要應用了網頁制作軟件dreamreaver、flash、html技術。以靜態網頁為主,同時加入了部分的動態效果,包括簡單的后臺處理與內嵌網頁技術。
關鍵詞:個人網站;Dreamweaver;flash;html
中圖分類號:TP393文獻標識碼:A文章編號:1009-3044(2013)35-8096-02
1網站制作基本說明
1.1制作人員所需具備技能
靜態網頁設計與制作是網站建設與開發的重要步驟,如果要想制作出美觀、實用的網頁,需要制作人員需掌握網頁設計基本工具的使用,首先,制作者要掌握HTML標簽和語法規則,可以使用記事本等工具編寫基本網頁,還要掌握dreamweaver網頁設計與制作軟件,同時,網頁設計與制作過程中還要對圖片進行處理,所以制作人員需要熟練操作photoshop等圖像處理軟件。網站制作完成后,制作人員需要具備空間、域名申請和上傳網站的能力。
1.2網站運行環境
硬件環境
CPU:主頻在166MHz以上,Intel或AMD。
內存:容量在32MB以上。
硬盤:空間在1GB以上,轉速在5400轉/秒或者更高。
顯示器:尺寸在15英寸以上,色彩為16位色以上,分辨率800*600,推薦使用1024*768。
顯卡:VGA顯卡,顯存在1MB以上。
軟件環境
操作系統:簡體中文版WindowsXP。
瀏覽器:InternetExplorer4.0/5.0。
調試與運行輔助工具:InternetInformationServer。
2網站的總體規劃
2.1網站總體規劃
根據自己的思考和設計前的準備,將此個人生活網站分為“首頁”、“日志”、“相冊”、“個人檔”、“音樂”、“收藏”這6個網站模塊。總體結構圖1所示。
2.2網站的風格
網站整體運用格布做背景,格布上加入格布花、紐扣等進行點綴。風格上主要強調簡潔、大方、布局簡單的特點。主頁由flash制作,通過div+css布局模式進行網站布局風格的統一,同時利用CSS層疊樣式表對網站的導航和字體大小以及版權信息進行統一的設計,使得網站的風格得到了統一。
3網站開發過程
3.1素材準備
素材的準備是制作網站的基本條件,只有準備好必備的素材,才能夠快速的制作網站,而不會浪費不必要的時間和精力。
準備網站的素材不僅要從網站的各個欄目的.規劃考慮,也要考慮各個頁面用到的圖片、內容、特殊效果等等,具體的網站有:網頁大寶庫、懶人圖庫、素材精品屋等。
準備好素材以后,需要對文本、圖片、樣式、特效等進行基本的處理,同時還要將素材進行分類,具體分類文件夾如:images、flash、music、style。
3.2首頁制作
首先把整理好的素材分別放在images、flash、music三個文件夾下。
建立站點
1)打開Dreamweaver軟件。
2)單擊“站點”菜單,進行“新建站點”操作。
3)在站點定義對話框中輸入網站名稱“mywebsite”,本地根目錄文件夾”是指你網站保存的磁盤路徑,選擇d:\myweb后,單擊“確認”按鈕。
4)經過以上基本操作,一個站點就建立好了。
5)把images、flash、music三個文件夾剪切到站點文件夾下,再新建html文件夾。
6)右鍵單擊“站點”面板中根目錄下的html文件夾,新建網頁首頁文件,命名為”index.html”。
7)打開首頁文件index.html進入編輯狀態。
8)建立表格,使表格居中對齊。
9)點擊表格內部在執行菜單中,插入——媒體——flash。
10)同樣的方法插入flash背景音樂文件未命名-5.swf。
11)點擊修改——頁面屬性——外觀——背景圖像,單擊瀏覽選擇所需背景圖片。
4模版的建立
1)首先建立一個大表格并且使表格居中,接著制作嵌套表格,使用插入表格命令,在大表格內插入所需行數和列數表格,設置寬度百分比“Percent”(百分比),在文本框中輸入100,單擊“OK”,所插入的表格剛好充滿第一個單元,然后插入一行三列的表格,左右分別為100寬居中表格寬度為600,最后再居中嵌入一行七列的導航欄和一列的文本內容欄。
2)表格嵌套完成后開始編輯導航條,首先輸入導航文字內容,給每欄文字分別添加鏈接為【#】點擊導航條表格的,在屬性菜單下編輯邊框大小為3、顏色為#FFCC99。選擇執行菜單中,頁面屬性——鏈接,設置文字鏈接,添加鏈接效果:鏈接顏色與已訪問鏈接顏色為#ffcc99變換圖像鏈接顏色為#ffff00,下劃線樣式為僅在變換圖像是顯示下劃線。
3)添加網頁背景圖案,頁面屬性——外觀——背景圖像,選擇好事先存放在images里的背景圖案。
4)添加table中的背景圖案,單擊在屬性中選擇背景圖像,添加圖像,這樣模板就完成了。
參考文獻:
[1] 中文版Dreamweaver CS4案例教程(1CD)[M].北京:龍騰科技出版 ,2009.
[2] 洪光,馬希敏.靜態網站建設[M]. 2版.大連:大連理工出版社,2008.
【個人生活網站的設計與制作論文】相關文章:
個人網站的前端設計論文11-17
網站設計與制作課程體系實踐的論文11-19
網站設計的制作合同03-04
網站設計制作合同03-06
網站規劃設計制作合同03-04
教育網站的設計及制作12-06
基于PHP的個人網站設計與實現論文11-17
網站制作個人鑒定范文06-04
網站設計制作策劃書06-07