網(wǎng)頁(yè)設(shè)計(jì)及制作報(bào)告

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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