1、我的個人網站設計作者： 張 亮班級： 工設09-1班導師： 陳功日期：2012年1月8號前言隨著時代的發展，網站建設越來越接近于一門藝術而不僅僅是一項技術。網頁的藝術設計，日益被網站建設者所注重。網頁藝術設計是伴隨著計算機互聯網絡的產生而形成的視聽設計新課題，是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎，依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網絡技術的發展而發展。表面上看，它不過是關于網頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術與技術的高度統一。網頁三劍客，是一套強大的網頁編輯工具， Dreamw

2、eaver 是一個“所見即所得”的可視化網站開發工具，主要用于動態網頁的開發；Fireworks主要是用于對網頁上常用的jpg、gif的制作和處理，也可用于制作網頁布局；Flash主要用來制作動畫，現推出Flash平臺，可預見有極好的前景。之所以稱之為三劍客， 很大一部分是因為這三種軟件能相互無縫合作。現在，制作網頁，通常由Fireworks導出切片、圖片等，然后在Dreamweaver中繪制表格；較為流行的一種是在Firework中做好主要頁面，然后導出，在Dreamweaver中加以修改，添加鏈接等，便做出一個非常好看的頁面。Flash是美國Macromedia公司所設計的二維動畫軟件，全

3、稱Macromedia Flash（被Adobe公司收購后稱為Adobe Flash），主要用于設計和編輯Flash文檔。附帶的Macromedia Flash Player，用于播放Flash文檔。 被大量應用于互聯網網頁的矢量動畫文件格式。 使用向量運算Vector Graphics的方式，產生出來的影片占用存儲空間較小。 使用Flash創作出的影片有自己的特殊檔案格式swf。該公司聲稱全世界97%的網絡瀏覽器都內建Flash播放器Flash Player。是Macromedia/Adobe提出的“富因特網應用”（RIA）概念的實現平臺。 Adobe Fireworks可以加速 Web 設

4、計與開發, 是一款創建與優化 Web 圖像和快速構建網站與 Web 界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性, 還提供了一個預先構建資源的公用庫, 并可與 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash軟件省時集成。 在Fireworks 中將設計迅速轉變為模型, 或利用來自 Illustrator、Photoshop 和 Flash 的其它資源。 然后直接置入Dreamweaver 中輕松地進行開發與部署。矢量編輯與位圖編輯。創建和編輯矢量圖像與位圖圖像，并導入和編輯本機 Ph

5、otoshop 和 Illustrator 文件。圖像優化。采用預覽、跨平臺灰度系統預覽、選擇性 JPEG 壓縮和大量導出控件, 針對各種交付情況優化圖像。Dreamweaver、Flash以及在Dreamweaver之后推出的針對專業網頁圖像設計的Fireworks，三者被Macromedia公司稱為DreamTeam（夢之隊），足見市場的反響和Macromedia公司對它們的自信。說到Dreamweaver我們應該了解一下網頁編輯器的發展過程，隨著互聯網(Internet) 的家喻戶曉，HTML技術的不斷發展和完善，隨之而產生了眾多網頁編輯器，從網頁編輯器基本性質可以分為所見即所得網頁編輯

6、器和非所見即所得網頁編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網頁編輯器的優點就是直觀性，使用方便，容易上手，您在所見即所得網頁編輯器進行網頁制作和在WORD中進行文本編輯不會感到有什么區別，但它同時也存在著致命的弱點。 目 錄前言2一、設計任務的提出5二、網站總體規劃5三、網站的設計創意及設計風格6四、主頁設計6五、分頁面設計7六、各類素材制作的主要過程及技術8（一）Fireworks素材制作8（二）Flash素材制作10（三）Dreamweaver素材制作14七、站點整合16（一）站點建立16（二）網頁框架構建17八、總結18參考文獻19我的個人網站設計作者：張亮 指導：陳功（中

7、國礦業大學藝術與設計學院工業設計09-1班 ）摘要:網頁三劍客網頁三劍客，顧名思義，是一套強大的網頁編輯工具，最初是由Macromedia公司開發出來的。由Dreamweaver，Fireworks，Flash三個軟件組成，俗稱三劍客。之所以稱之為三劍客， 很大一部分是因為這三種軟件能相互無縫合作。現在，制作網頁，通常由Fireworks導出切片、圖片等，然后在Dreamweaver中繪制表格；較為流行的一種是在Firework中做好主要頁面，然后導出，在Dreamweaver中加以修改，添加鏈接等，便做出一個非常好看的頁面。網頁三劍客的三者結合是當今網站開發的必備工具。如果用別的軟件來替代的

8、話：Fireworks可用Photoshop與CorelDRAW來替換。Frontpage只對初學者有一定的幫助，無法設計出更復雜的網頁。 在以前Adobe公司與Macromedia競爭，然而，網頁制作當推Dreamweaver，而圖片處理卻是Photoshop占優，但Fireworks在做網頁方面有一點優勢。在Adobe收購了Macromedia后，Macromedia公司有不少軟件停產，而三劍客得以幸存并不斷發展壯大，繼續推出全新的產品。關鍵詞：三劍客Dreamweaver Fireworks FlashABSTRACT:Web Page Three Musketeers, by defi

9、nition, is a powerful web editing tools, originally developed by Macromedia out. From the Dreamweaver, Fireworks, Flash of three software components, commonly known as The Three Musketeers. Is called a Three Musketeers, a large part because of the three software can cooperate with each other seamles

10、sly. Now, web pages, usually derived from the Fireworks section, pictures, and then draw the table in Dreamweaver; the more popular one is doing a good job in the Firework in the main page, and then export the modified in Dreamweaver, add links, they do a very nice page.The combination of The Three

11、Musketeers of the three pages of today's web development tool. If you use other software to replace, then: Fireworks can be used to replace Photoshop and CorelDRAW. Frontpage only be helpful for beginners, can not design a more complex web pages. Adobe, and Macromedia in the previous competition

12、, however, web-page when push Dreamweaver, and Photoshop image processing is dominant, but Fireworks is doing a little edge web pages. After Adobe acquired Macromedia in, Macromedia has a lot of software companies stop production, and Three Musketeers survive and continue to grow, continue to introd

13、uce new products.KEY WORDS：Three Musketeers Dreamweaver Fireworks Flash一、 設計任務的提出1 隨著Internet在中國的迅速發展,人們日常生活中越來越多地使用這項新的技術來為自己的工作和學習服務。由于WEB頁面能把文本、圖像、聲音、動畫、視像等多種媒體信息集于一體，不但使信息的顯示更加生動，而且使信息的瀏覽更為方便,同時WEB頁能實現網上交易平臺、客戶信息反饋方便了企業與客戶之間信息交流，因此許多企業紛紛建設具有自己獨特風格的網站以增強企業知名度。2 與此同時，個人主頁設計也日益盛行，一個好的個人主頁不但可以推廣自己，還

14、可以擁有網民的點擊率，直接關系到個人的知名度。二、網站總體規劃3 運用所學的Flash、DreamWaver、FireWorks技術設計一個關于我的家鄉徐州介紹的網站，在設計中充分運用fireworks中的蒙板、補間、切片、熱區、圖片優化等技術，flash中的逐幀動畫、運動漸變動畫、形狀漸變動畫、遮罩層動畫、引導層動畫、聲音和元件、交互控制等技術進行網站各類素材的處理，素材圖文并茂、效果突出、聲色兼備、交互性強，素材制作符合網站的總體風格。4 利用flash、Dream waver等軟件進行網站的整合設計。充分運用各種文字、圖片的編輯方法，合理建立各種超級鏈接和各類表單元素，利用時間軸、行為、

15、動作制作簡單動畫及交互，并運用各種定位技術進行網頁元素的合理定位，合理運用CSS樣式表、模板、庫等方法技術進行網站頁面的設計。3.站點布局地圖三、網站的設計創意及設計風格1、資料收集前期資料的收集從上海世博會前期中期以及后期的各方面宣傳工作進行詳細的調查，找出重要的信息，我們所需要的。2、網頁設計：設計計風格：我的網頁以橙色為主題。網頁風格統一自然。四、主頁設計主頁：將分頁主要內容集中了起來，并且加入了我最常連接的網站的連接。五、分頁面設計 六、各類素材制作的主要過程及技術（一）Fireworks素材制作主要用Fireworks制作一些背景為通明的網頁素材。如主頁上面的切換圖片按鈕。主要步驟1

16、：用橢圓選取框花出標準的圓。2：用油漆桶工具為選區上色。3：插入文本文字。4：用導出向導導出。并將色彩設置成alpha通道（二）Flash素材制作1.網頁logo上的水滴掉落制作（1） 用鋼筆工具畫出雨滴，并做好色彩關系（2） 將其轉化為圖形元件。（3） 新建影片剪輯元件將之前的雨滴圖形元件放入，將其對其到舞臺中心。在第10幀的地方按f6（4） 在最后一幀將雨滴適當往下移動（5） 將鼠標移動到其中一幀將補間設置為動畫，緩動設置為-100（6） 最后在返回場景，建立logo背景圖層再新建另外兩個圖層，將影片剪輯元件分別放到兩個圖層中，調整每個剪輯的透明度以及大小。按f5延伸每個層的播放時間。（7

17、） 將其保存為swf文件便于網頁制作使用。2.我的家鄉圖像切換制作。（1） 將選好的圖片全部轉換成圖形元件，將輸入的文本打散(cturl+b)在轉換為圖形元件（2） 每張圖片都新建圖層（3） 圖層一動畫效果從下往上升，為了突出彈性將緩動值設為100，起始幀的透明設為13%（4） 制作其他圖片進出效果時根據圖片需要調整大小透明度，進出方向等（5） 為了圖片進出的效果自然柔和，開始幀和結束幀都將透明度設置的低一點3我的漫畫圖像切換制作（1） 選擇【文件】|【新建】命令，新建一個空白文檔。（2） 選擇【修改】|【文檔】命令，創建一個1200*300像素，背景色是白色的新文檔。（3） 動畫制作將所有圖

18、片轉換為圖形元件。（4） 制作背景的黑色線條（5） 前幀為第1幀，插入圖片，并將圖片的右邊移動至文檔的左邊。在第14幀處按F6鍵，按SHIFT鍵將圖片的右邊移動至文檔的左邊。（6） 在1-14幀進行【動畫】補間。緩動值為100（7） 之后每張圖片處理方法類似，最后將前面制作動畫按f5進行延伸保證前面的圖片不消失4我的電影圖像切換制作，下面類似過程如下所制作（1） 選擇【文件】|【新建】命令，新建一個空白文檔。（2） 選擇【修改】|【文檔】命令，創建一個1200*300像素，背景色是黑色的新文檔。（3） 動畫制作將所有圖片轉換為圖形元件。（4） 當前幀為第10幀，插入圖片，并將圖片的右邊移動至文

19、檔的左邊。在第20幀處按F6鍵，按SHIFT鍵將圖片的右邊移動至文檔的左邊。（5） 在10-20幀進行【動畫】補間。緩動值為100（6） 之后每張圖片處理方法類似，最后將前面制作動畫按f5進行延伸保證前面的圖片不消失5我的音樂圖像切換制作（1） 選擇【文件】|【新建】命令，新建一個空白文檔。（2） 選擇【修改】|【文檔】命令，創建一個1200*300像素，背景色是灰色的新文檔。（3） 動畫制作將所有圖片轉換為圖形元件。（4） 寫入“聽音樂”“最愛”文本，將其打散并轉換為圖形元件。（5） 將文字起始幀顏色透明度降低做出飛入畫面的動畫為了讓文字顯出彈性設置緩動值。（6） 當前幀為第40幀，插入周杰

20、倫圖片，在第45幀處按F6鍵，并將圖片的左上角邊移動至文檔的中間。在50幀出按f6將圖片拖到右上角將透明度降低，設置緩動值。（7） 之后的圖片均以每隔一幀建立新的圖層做出圖片依次由右向左出現的動畫。（三）Dreamweaver素材制作1制作網頁導航欄（1）首先用ps制作出導航按鈕兩種狀態的圖片 (2)點擊選擇圖像對象下的鼠標經過圖像（3）原始圖像選擇未選中狀態的圖片，鼠標經過的圖像選擇選中狀態的圖片。用類似的方法處理了主頁面上的切換圖像按鈕。2.制作主頁面上的圖像切換效果當鼠標移動到圖片上的1234時可切換圖片。（1） 將1.2.3.4號圖片分別放入繪制的ap div的框里，（2） 將鼠標點中

21、的圖標在窗口中勾選行為窗口（3） 為按鈕1添加顯示隱藏元素動作，鼠標動作設置為onmouseover除了1按鈕對應的圖像設置成顯示，其他的圖層設置成隱藏。其他的按鈕設置方法類似。七、站點整合（一）站點建立1、選擇【站點】|【新建站點】命令，打開【站點定義】對話框，如圖所示（2）單擊【高級】標簽，在【高級】選項卡中設置本地站點的參數，如圖所示：（二）網頁框架構建(1)檢查本地站點根文件夾“wangye”中的素材是否正確。（2）選擇【站點】|【管理站點】命令，檢查當前站點設置是否正確。（3）在網頁文檔窗口中，選擇【修改】|【頁面屬性】命令，在；【頁面屬性】對話框中作各項參數的設置。（4）單擊【布局

22、模式】區域中的【布局表格】的按鈕，將鼠標移到網頁編輯窗口中，此時鼠標指針變為十字形狀，在制定位置拖拽鼠標，就可以在網頁編輯窗口中劃出布局表格。在繪制布局表格的地方不能有任何的文字和圖片。在場景中分別畫出1200*300像素、800*190像素等尺寸不同的幾個布局單元格。（5）在布局單元格中必須畫好布局單元格后才可以插入文字或圖片等對象。單擊【布局模式】區域中的【布局單元格】的按鈕，在布局表格中根據需要畫出多個布局單元格。（6）在布局單元格中根據頁面需要輸入文字或插入圖片等對象，如圖所示：（7）大體框架構建好之后，在主頁及各子頁面進行文字的添加。（8）在【標準模式】中使用【繪制層】，添加做好的Flash素材。