個人生活網站的設計與製作論文

個人生活網站的設計與製作論文

　　摘要：如今網路遍佈世界各地，中國網際網路經過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.