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

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

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

4、計與開發(fā), 是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性, 還提供了一個預(yù)先構(gòu)建資源的公用庫, 并可與 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash軟件省時集成。 在Fireworks 中將設(shè)計迅速轉(zhuǎn)變?yōu)槟Ｐ? 或利用來自 Illustrator、Photoshop 和 Flash 的其它資源。 然后直接置入Dreamweaver 中輕松地進行開發(fā)與部署。矢量編輯與位圖編輯。創(chuàng)建和編輯矢量圖像與位圖圖像，并導(dǎo)入和編輯本機 Ph

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

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

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

8、話：Fireworks可用Photoshop與CorelDRAW來替換。Frontpage只對初學(xué)者有一定的幫助，無法設(shè)計出更復(fù)雜的網(wǎng)頁。 在以前Adobe公司與Macromedia競爭，然而，網(wǎng)頁制作當(dāng)推Dreamweaver，而圖片處理卻是Photoshop占優(yōu)，但Fireworks在做網(wǎng)頁方面有一點優(yōu)勢。在Adobe收購了Macromedia后，Macromedia公司有不少軟件停產(chǎn)，而三劍客得以幸存并不斷發(fā)展壯大，繼續(xù)推出全新的產(chǎn)品。關(guān)鍵詞：三劍客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一、 設(shè)計任務(wù)的提出1 隨著Internet在中國的迅速發(fā)展,人們?nèi)粘Ｉ钪性絹碓蕉嗟厥褂眠@項新的技術(shù)來為自己的工作和學(xué)習(xí)服務(wù)。由于WEB頁面能把文本、圖像、聲音、動畫、視像等多種媒體信息集于一體，不但使信息的顯示更加生動，而且使信息的瀏覽更為方便,同時WEB頁能實現(xiàn)網(wǎng)上交易平臺、客戶信息反饋方便了企業(yè)與客戶之間信息交流，因此許多企業(yè)紛紛建設(shè)具有自己獨特風(fēng)格的網(wǎng)站以增強企業(yè)知名度。2 與此同時，個人主頁設(shè)計也日益盛行，一個好的個人主頁不但可以推廣自己，還

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

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

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

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

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

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

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

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

22、模式】區(qū)域中的【布局表格】的按鈕，將鼠標(biāo)移到網(wǎng)頁編輯窗口中，此時鼠標(biāo)指針變?yōu)槭中螤睿谥贫ㄎ恢猛献髽?biāo)，就可以在網(wǎng)頁編輯窗口中劃出布局表格。在繪制布局表格的地方不能有任何的文字和圖片。在場景中分別畫出1200*300像素、800*190像素等尺寸不同的幾個布局單元格。（5）在布局單元格中必須畫好布局單元格后才可以插入文字或圖片等對象。單擊【布局模式】區(qū)域中的【布局單元格】的按鈕，在布局表格中根據(jù)需要畫出多個布局單元格。（6）在布局單元格中根據(jù)頁面需要輸入文字或插入圖片等對象，如圖所示：（7）大體框架構(gòu)建好之后，在主頁及各子頁面進行文字的添加。（8）在【標(biāo)準(zhǔn)模式】中使用【繪制層】，添加做好的Flash素材。