1 引言隨著Internet 的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設中。企業(yè)建站相當于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作

1 引言隨著Internet 的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設中。企業(yè)建站相當于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設計而言，網(wǎng)頁設計具有更多的新穎性，更多可以表現(xiàn)的手法。結合本人的實習過程，現(xiàn)就網(wǎng)站建設與管理過程中，網(wǎng)頁設計與制作的具體經(jīng)歷，包括：網(wǎng)頁設計與制作過程中的網(wǎng)頁布局、色彩構置，框架結構等相關事項做以下論述。長治職業(yè)技術學院信息工程系畢業(yè)設計 2 第一章需求分析 1.1 性能需求 Dreamweaver8.0 要求的運行環(huán)境 1． CPU P3-800 2．內存256MB 3．硬盤剩余空間1.8GB 4．顯示器分辨率1024×768 5．16 位視頻卡。 6．軟件WINDOWS2000/XP 當前的開發(fā)環(huán)境（硬件、軟件） 1．CPU AMD Arhlon(tm) 64 ×2 dual Core Processor TK-57 2．內存1GB 3．硬盤剩余空間20GB 4．顯示器分辨率1280×800 5．顯示卡 ATI Redeon X1250 7．軟件WINDOWS XP 1.2 開發(fā)工具的介紹 1.2.1 夢幻網(wǎng)頁的編織者------Dreamweaver8.0 Dreamweaver 是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver 可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia 的Roundtrip HTML 技術允許用戶隨意導入 HTML 文檔而無需重新設置代碼格式。 Dreamweaver 可以為用戶做到：使用動態(tài)HTML 功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。長治職業(yè)技術學院信息工程系畢業(yè)設計 3 Dreamweaver 還是一個可以完全自定義的應用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript 代碼擴展Dreamweaver 的行為和屬性檢查器。至于Dreamweaver 工作區(qū)是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver 工作區(qū)組件有以下若干種： (1) 文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。 (2) 裝載器中包含一些打開和關閉常用檢查器和模板的按鈕。 (3) 對象工具欄包含創(chuàng)建不同類型的對象（例如圖象、表格和層等）

的按鈕。 (4) 屬性檢查器顯示選定對象的屬性。 (5) 快捷菜單可以使用戶對當前選擇或區(qū)域快速執(zhí)行某些命令。 (6) 可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中 1.2.2 網(wǎng)頁動畫的制作軟件----Micromedia Flash 8.0 Micromedia Flash 8.0 用于web 站點的交互式的矢量圖形和動畫的制作，它可制作出用于瀏覽時的導航控制、制作動畫圖標、帶同步聲音的大段的動畫，創(chuàng)建出生動的富于表現(xiàn)力的網(wǎng)頁。Flash 中的圖形都是矢量的，占據(jù)存儲空間較少，因而下載時間短，且能很好地適應瀏覽者不同尺寸的屏幕。 Flash 的交互性的大部分設置就在 Action 和 Fs Command 里，通過對 Action 和 Fs Command 的設置，你可以隨意的設置各事件發(fā)生的效果，還有對變量及函數(shù)的設置。

1.2.3 JavaScript JavaSript 是一種基于對象(Object)和事件驅動(Event Driven) 并具有安全性能的腳本語言。使用它的目的是與HTML 超文本標記語言、Java 腳本語言（Java 小程序）一起實現(xiàn)在一個Web 頁面中鏈接多個對象，與Web 客戶交互作用。從而可以開發(fā)客戶端的應用程序等。它是通過嵌入或調入在標準的HTML 語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML 語言的缺陷，它是Java 與HTML 折衷的選擇。 1.2.4 影像與動畫的制作軟件—Adobe Photoshop8.0 Photoshop 8.0 是目前最流行的圖形、圖像編輯設計軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網(wǎng)頁設計等領域都被廣泛地應用。 (1) 文字處理更加方便 (2) 增加的圖層集使圖層管理更有序。 (3) 新增圖像功能：圖像的剪切和剪裁更加方便。長治職業(yè)技術學院信息工程系畢業(yè)設計 4 (4) 將所有工具的選項板改進為工具選項欄放置在工作區(qū)頂部，方便先項參數(shù)的設置。 (5) 為了更方便地用路徑繪畫，改進增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強。 1.3 網(wǎng)站設計的步驟 1．規(guī)劃網(wǎng)站； 2．建立站點及制作頁面； 3．注冊域名、租用空間； 4．上傳；推廣及維護 1.4 網(wǎng)站總體結構設計功能模塊圖（層次圖）個人主頁主頁日志相冊音樂欣賞小游戲長治職業(yè)技術學院信息工程系畢業(yè)設計

5 第二章個人網(wǎng)站設計分析 2.1 相關術語及解析 2.1.1 相關術語及解釋 1、Internet Internet(英特網(wǎng)) 誕生于上世紀60 年代，發(fā)展非常慢，到90 年代才開始迅速發(fā)展?，F(xiàn)在英特網(wǎng)已經(jīng)是世界上最大的網(wǎng)絡的，聯(lián)在英特網(wǎng)上的電腦有數(shù)億臺。上面的資料、信息數(shù)不勝數(shù)，所以有人把英特網(wǎng)叫成是信息的海洋、知識的海洋。 2、站點所謂站點，就是將網(wǎng)頁文件和素材文件，有條理地放置站點文件夾里，這些文件與文件夾就構成了網(wǎng)站的實質內容。站點文件夾里除了網(wǎng)頁文件還有素材文件，所謂素材就是網(wǎng)頁中所用到的圖像、聲音、視頻等，這些內容是以單獨文件的形式存在。 3、超鏈接我們在瀏覽網(wǎng)頁時，當鼠標指針指向某段文本或是某個圖像，鼠標指針變成小手狀，單擊鼠標可以打開其他的網(wǎng)頁或是跳轉到其他的網(wǎng)站，這就是超鏈接。采用超鏈接技術可以將不同的網(wǎng)站、網(wǎng)站中的不同網(wǎng)頁、網(wǎng)頁中的不同位置彼此串在一起，實現(xiàn)相互間的跳轉，方便信息的瀏覽和查找。人們通過超鏈接可以很方便很迅速地訪問分布于全球計算機上的海量資源，實現(xiàn)在互聯(lián)網(wǎng)中的漫游。超鏈接能使Web 服務存在廣泛和持久的生命力，超鏈接可以說是Web 的靈魂。 4、URL URL（Uniform Resource Locator 的縮寫），統(tǒng)一資源定位器?；ヂ?lián)網(wǎng)中某種信息資源以某種方式存儲在網(wǎng)絡中的某處，必須用一個惟一的URL 來進行標識，這樣才能方便查找。對于Web 來說，可以簡單并通俗把URL 理解為網(wǎng)址。每個Web 網(wǎng)頁都有自己的網(wǎng)址，在瀏覽器地址欄里輸入網(wǎng)頁的URL ，就可以訪問這個網(wǎng)頁。例如， http://www.sina.com/index.html，其意思就是采用http 超文本傳輸協(xié)議訪問新浪網(wǎng)的首頁，由于網(wǎng)頁均是通過http 超文本傳輸協(xié)議進行訪問，默認下，“http://”可以省略不輸。 5、IP 地址為了使互聯(lián)網(wǎng)上的電腦主機在通信時能夠相互識別，每臺主機都分配一個能表示其位置的IP （Internet Protocol）地址，這如同公用電話網(wǎng)中電話的號碼一樣。IP 地址是由專門的互聯(lián)網(wǎng)機構來分配。IP 地址具有惟一性，是由32 位二進制數(shù)組成，分為四組，每組8 位，每組之間用小數(shù)點分隔，在實際之中常轉換成十進制數(shù)表示。長治職業(yè)技術學院信息工程系畢業(yè)設計 6 2.1.2 個人網(wǎng)站的由來和發(fā)展互聯(lián)網(wǎng)

在中國的出現(xiàn)只有短短七年時間，1994 年中國科學院高能物理研究所設立了國內第一個Web 服務器，推出一個叫做“中國之窗”的網(wǎng)頁，這可能是國內Internet 上出現(xiàn)的第一個Web 網(wǎng)頁，1995 年開始，中國教育科研網(wǎng)，中國科技網(wǎng)，中國公用計算機互聯(lián)網(wǎng)以及中國金橋網(wǎng)這構成中國數(shù)字神經(jīng)系統(tǒng)的四大互聯(lián)網(wǎng)絡相繼建成，使互聯(lián)網(wǎng)在中國開始真正進入社會生活之中。這時期，個人網(wǎng)站出現(xiàn)的條件還很不成熟，國內上網(wǎng)的人數(shù)很少，也缺乏支持個人建站的環(huán)境，用戶很難找到理想的個人主頁存放地。個人網(wǎng)站發(fā)展的第二階段是從1997 年初到1998 年，這段時間，中國網(wǎng)民數(shù)量飛速增長，個人網(wǎng)站日漸繁榮，個人主頁的數(shù)量急劇增加。同時，越來越多的商業(yè)網(wǎng)站開始免費提供個人主頁空間，這些良好的外部極大地促進了個人網(wǎng)站的發(fā)展，涌現(xiàn)了一批很著名的個人網(wǎng)頁，從1998 年下半年開始，隨著互聯(lián)網(wǎng)應用的深入的普及，隨著眾多主頁制作工具的出現(xiàn)，使得建站成為一件非常容易的事，創(chuàng)建一個能充分體現(xiàn)自我風格和特色的個人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。長治職業(yè)技術學院信息工程系畢業(yè)設計 7 第三章、站點的建立及頁面制作 3.1 站點建立（1）打開：“窗口”下的“新建站點”（2）按“下一步（3）單擊“下一步”（4）單擊“下一步”（出現(xiàn)“你如何連接到遠程服務器”時選擇“無”）（5）單擊完成⑴⑵⑶⑷長治職業(yè)技術學院信息工程系畢業(yè)設計 8 ⑸ 3.2 各個頁面的制作頁面圖 3.2.1 首頁的頁面：本頁有滾動字幕及背景音樂。滾動字幕的制作：使用“標簽選擇器”插入marquee 標簽 1. 把光標插入點放在需要插入滾動字幕的地方。 2. 點擊插入面板的“標簽選擇器”長治職業(yè)技術學院信息工程系畢業(yè)設計 9 3. 選擇 marquee 標簽，點擊“插入”按鈕。使用“標簽檢查器”設置marquee 標簽的屬性 4. 轉換到代碼視圖。把光標插入點放在 marquee 標簽內。長治職業(yè)技術學院信息工程系畢業(yè)設計 10 5. 選擇“窗口”>“標簽檢查器”?？梢栽凇皹撕灆z查器”設置標簽的各種用法。設置marquee 標簽的主要用法 6. 點擊behavior 設置項右邊的下拉箭頭，選擇滾動字幕內容的運動方式。 7.direction 屬性設置字幕內容的滾動方向。長治職業(yè)技術學院信息

工程系畢業(yè)設計 11 8.scrollamount 屬性設置字幕滾動的速度。 9.scrolldelay 屬性設置字幕內容滾動時停頓的時間，單位為毫秒。如果要讓滾動看起來流暢，數(shù)值應該盡量小。實例中設置為1 毫秒。如果要有步進的感覺，就設置時間長一點吧。 10.width 屬性設置滾動字幕的寬度。長治職業(yè)技術學院信息工程系畢業(yè)設計 12 11.onMouseOver 事件設置鼠標移動到滾動字幕時的動作，常設置為停止?jié)L動。 onMouseOut 事件設置鼠標離開滾動字幕時的動作，常設置為開始滾動。 12.style 屬性設置字幕內容的樣式。實例中設置字幕文字大小，輸入了“font:12px;”。 13.loop 屬性設置字幕內容滾動次數(shù)，默認值為無限。“-1”也為無限。長治職業(yè)技術學院信息工程系畢業(yè)設計 13 背景音樂的添加： 1．打開行為面板，點擊“＋”按鈕添加行為。 2．選擇“播放聲音”。 3. 選擇聲音文件。一個網(wǎng)頁的背景音樂就添加好了。如果要修改背景音樂屬性 1. 在文檔中選擇背景音樂的圖標。 2. 在屬性檢查器中，點擊“參數(shù)”按鈕。 3. 修改參數(shù)。長治職業(yè)技術學院信息工程系畢業(yè)設計 14 3.2.2 日志的頁面：制作過程：本頁只是簡單的超鏈接與文本編輯，無特殊效果。 3.2.3 相冊的頁面：制作過程：本頁有flash 相冊。長治職業(yè)技術學院信息工程系畢業(yè)設計 15 flash 相冊的制作： 2、插入 Flash 。在工具欄中轉到“ Flash 元素”工具條，插入 Flash 元素并保存文件，如下圖所示。 3、保存Flash 文件，然后可以在屬性面板中修改Flash 的長和寬要和預先準備的圖片的長和寬一樣?。〗又O置 Flash 元素的參數(shù)，如下圖所示。長治職業(yè)技術學院信息工程系畢業(yè)設計 16 4、保存文件，完成操作。 3.2.4 音樂欣賞頁面：制作過程：音樂播放器插入以下代碼：長治職業(yè)技術學院信息工程系畢業(yè)設計 17 長治職業(yè)技術學院信息工程系畢業(yè)設計 18 } } 3.2.5 小游戲頁面：長治職業(yè)技術學院信息工程系畢業(yè)設計 19 制作過程：插入flash 動畫：選擇“插入”>“媒體”>“flash 視頻”。在“插入 Flash 視頻”對話框中，從“視頻類型”彈出式菜單中選擇“漸進式下載視頻”。關于Flash 視頻使用 Dreamweaver 中的“插入 Flash 視頻”命令，可將 Flash 視頻內容插入 Web 頁面，而無需使用 Flash 創(chuàng)

作工具。該命令可以插入 Flash 組件；當您在瀏覽器中查看它時，它顯示您選擇的 Flash 視頻內容以及一組播放控件?！安迦?Flash 視頻”命令提供以下選項，用于將視頻內容發(fā)送給站點訪問者：累進式下載視頻將 Flash 視頻 (FLV) 文件下載到站點訪問者的硬盤上，然后播放。但是，與傳統(tǒng)的“下載并播放”視頻傳送方法不同，累進式下載答應在下載完成之前就開始播放視頻文件。流視頻將 Flash 視頻內容進行流處理并立即在 Web 頁面中播放。若要在 Web 頁長治職業(yè)技術學院信息工程系畢業(yè)設計 20 面中啟用流視頻，您必須具有對 Macromedia Flash Communication Server 的訪問權限，這是唯一可對 Flash 視頻內容進行流處理的服務器。在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相對路徑，方法是單擊“瀏覽”，瀏覽至 cafe_townsend_home.flv 文件（位于站點的 cafe_townsend 根文件夾中），并選擇該 FLV 文件。從“外觀”彈出式菜單中選擇 Halo Skin 2。所選外觀的預覽會出現(xiàn)在“外觀”彈出式菜單下方?！巴庥^”選項指定將包含 Flash 視頻內容的 Flash 視頻組件的外觀。在“寬度”和“高度”文本框中，執(zhí)行以下操作：在“寬度”文本框中，鍵入 180。在“高度”文本框中，鍵入 135 ，然后按 Enter 鍵。長治職業(yè)技術學院信息工程系畢業(yè)設計 21 第四章注冊域名、租用免費空間 4.1 搜索可以免費申請空間的網(wǎng)站 4.2 注冊會員，申請成功長治職業(yè)技術學院信息工程系畢業(yè)設計 22 第五章上傳發(fā)布虛擬主機上傳網(wǎng)頁常用的FTP 軟件有CuteFTP 、LeapFTP 、FlashFXP 等等， Dreamweaver 、以及FrontPage 也有發(fā)布網(wǎng)頁的功能。 CuteFTP 是一款非常受歡迎的FTP 工具，界面簡潔，并具有支持上、下載斷點續(xù)傳，操作簡單方便等特征，使其在眾多的FTP 軟件中脫穎而出，無論是下載軟件還是更新主頁， CuteFTP 都是一款不可多得的好工具。 CuteFTP 上傳操作說明（1）啟動CuteFtp （2）打開“文件”－＞“站點管理器”（3）定義站點：點擊“新建”建立FTP 站，然后定義站點標簽，可任意填寫?！癋TP 主機地址”中填入您的IP 地址或您的域名都可，如：210.192.102.112 ，“站點用戶長治職業(yè)技術學院信息工程系畢業(yè)設計 23 名”中填寫您的用

戶名（管理員用戶名），“站點密碼”中填寫您的密碼。輸入密碼時，框中只有*字，防止被別人看到。FTP 連接端口為默認的“21”，登錄類型請選擇“普通”。（4）接遠程站點：點擊“連接”，即可連接至虛擬主機目錄我們可以看到現(xiàn)在我們所看到的界面分為以下四部分：上部：命令區(qū)域（工具欄和菜單）中間:（分左右兩邊）左邊：本地區(qū)域，即本地硬盤，上面兩個小框可以選擇驅動器和路徑。右邊：遠程區(qū)域，即遠端服務器，雙擊目錄圖標可進入相關目錄。下部：記錄區(qū)域，從此區(qū)域可以看出進程，程序已進行到哪一步。長治職業(yè)技術學院信息工程系畢業(yè)設計 24 （5）上傳網(wǎng)頁：從本地區(qū)域選定要上傳的網(wǎng)頁或文件，雙擊或用鼠標拖至遠程區(qū)即可完成上傳工作。（6）相關操作：連接至遠程服務器后可利用鼠標右鍵中的常用選項對遠端文件和目錄進行操作，如刪除、重命名、移動、修改屬性、建立目錄等。（7）經(jīng)過以上操作就可以將您的網(wǎng)頁順利上傳至虛擬主機。長治職業(yè)技術學院信息工程系畢業(yè)設計 25 參考文獻 [1]鄧文淵. 網(wǎng)頁制作高手[M].北京：人民郵電大學出版，2007，6 [2]李憲廣. 網(wǎng)頁制作邊學邊用[M].北京：清華大學出版社， 2009，3 [3]網(wǎng)頁設計入門

[EB/OL].http://www.xue8.com/sale/view.asp?Article ID=288 [4]許凌云，柳勇良. 網(wǎng)頁設計全方位學習[M].北京：清華大學出版社，2008，11 [5]陳琳.photoshop cs3 入門實戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008，11 [6]焦慧. 網(wǎng)頁制作基礎與典型范例[M].北京：電子工業(yè)出版社，2008，7 [7]戎馬工作室.Dreamweaver 8 與asp 動態(tài)網(wǎng)站開發(fā)[M].北京：機械工業(yè)出版社， 2006，5 [8]戴一波.Dreamweaver CS3 網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社， 2008， 1 [9]何秀芳. 網(wǎng)頁制作與網(wǎng)站建設課堂實錄[M].北京：人民郵電出版社. 2009，3 [10]孫連三. 新編網(wǎng)頁制作與網(wǎng)站建設入門與提高[M].北京：人民郵電出版社. 2008，9 [11]鄧文淵. 網(wǎng)頁制作高手FLASH 8[M].北京：人民郵電出版社， 2007，6 [12]胡崧. 超夢幻勁爆網(wǎng)頁[M].中國青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 [14]卓越科技.PHOTOSHOP CS3 美工廣告設計百煉成精[M].電子科技出版社， 2009， 3 [15]David Hunter

etal ，Beginning XML[J].Wrox Press Ltd，2005 [16]楊大勇，李金江.ASP 網(wǎng)絡開發(fā)自學導航[M].北京：機械工業(yè)出版社，2007，6 [17]卓越科技.SQL SERVER 數(shù)據(jù)庫開發(fā)培訓教程[M].北京：電子工業(yè)出版社， 2009， 4 [18]李曦琳.WEB 導航設計[M].北京：電子工業(yè)出版社，2009，3 [19]力誠教育.ACCESS 2007 完全自學手冊[M].成都：四川出版集團，2009，3 [20]叢書編委會.ASP 動態(tài)網(wǎng)頁編輯[M].北京：清華大學出版社，2006，10 [21]陳剛. 商業(yè)網(wǎng)站開發(fā)從入門到精通[M].科學出版社，2008，2 長治職業(yè)技術學院信息工程系畢業(yè)設計 26 結束語不知不覺中網(wǎng)頁設計與制作的畢業(yè)設計將要結束了，這門課程所包含內容的豐富是我從沒有想到的。在整個學習過程中，我接觸了Flash 、Dreamweaver 、等重要工具，我很慶幸我能夠學到這么多的內容。網(wǎng)頁設計與制作畢業(yè)設計是在宋麗芳老師的悉心指導下獨立完成的。雖然整個內容還有很多不足，但是我的確能夠感到在我制作過程中技能的提高。在今后的學習生活中，我將不斷提高自己網(wǎng)頁設計與制作的能力和水平，從而彌補在本次畢業(yè)設計中的不足。在此我要感謝在畢業(yè)設計期間給予我?guī)椭脑S多人。首先，我要特別感謝的是我的指導老師宋麗芳老師。因為是他為我提供了一個正確的方向，才使我完成了畢業(yè)設計。在設計期間他也給予我無私的幫助，在此表示深深的謝意。