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

PAGE2互動媒體設(shè)計(jì)PAGE7工業(yè)設(shè)計(jì)專業(yè)互動媒體設(shè)計(jì)設(shè)計(jì)報(bào)告我的個(gè)人網(wǎng)站設(shè)計(jì)作者：張亮班級：工設(shè)09-1班導(dǎo)師：陳功日期：2012年1月8號前言隨著時(shí)代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計(jì)，日益被網(wǎng)站建設(shè)者所注重。網(wǎng)頁藝術(shù)設(shè)計(jì)是伴隨著計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽設(shè)計(jì)新課題，是網(wǎng)頁設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ)，依照設(shè)計(jì)目的和要求自覺地對網(wǎng)頁的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動，必然要成為設(shè)計(jì)藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過是關(guān)于網(wǎng)頁版式編排的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與技術(shù)的高度統(tǒng)一。網(wǎng)頁三劍客，是一套強(qiáng)大的網(wǎng)頁編輯工具，Dreamweaver是一個(gè)“所見即所得”的可視化網(wǎng)站開發(fā)工具，主要用于動態(tài)網(wǎng)頁的開發(fā)；Fireworks主要是用于對網(wǎng)頁上常用的jpg、gif的制作和處理，也可用于制作網(wǎng)頁布局；Flash主要用來制作動畫，現(xiàn)推出Flash平臺，可預(yù)見有極好的前景。之所以稱之為三劍客，很大一部分是因?yàn)檫@三種軟件能相互無縫合作?，F(xiàn)在，制作網(wǎng)頁，通常由Fireworks導(dǎo)出切片、圖片等，然后在Dreamweaver中繪制表格；較為流行的一種是在Firework中做好主要頁面，然后導(dǎo)出，在Dreamweaver中加以修改，添加鏈接等，便做出一個(gè)非常好看的頁面。Flash是美國Macromedia公司所設(shè)計(jì)的二維動畫軟件，全稱MacromediaFlash（被Adobe公司收購后稱為AdobeFlash），主要用于設(shè)計(jì)和編輯Flash文檔。附帶的MacromediaFlashPlayer，用于播放Flash文檔。被大量應(yīng)用于互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫文件格式。使用向量運(yùn)算﹙VectorGraphics﹚的方式，產(chǎn)生出來的影片占用存儲空間較小。使用Flash創(chuàng)作出的影片有自己的特殊檔案格式﹙swf﹚。該公司聲稱全世界97%的網(wǎng)絡(luò)瀏覽器都內(nèi)建Flash播放器﹙FlashPlayer﹚。是Macromedia/Adobe提出的“富因特網(wǎng)應(yīng)用”（RIA）概念的實(shí)現(xiàn)平臺。AdobeFireworks可以加速Web設(shè)計(jì)與開發(fā),是一款創(chuàng)建與優(yōu)化Web圖像和快速構(gòu)建網(wǎng)站與Web界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性,還提供了一個(gè)預(yù)先構(gòu)建資源的公用庫,并可與AdobePhotoshop、AdobeIllustrator、AdobeDreamweaver和AdobeFlash軟件省時(shí)集成。在Fireworks中將設(shè)計(jì)迅速轉(zhuǎn)變?yōu)槟Ｐ?或利用來自Illustrator、Photoshop和Flash的其它資源。然后直接置入Dreamweaver中輕松地進(jìn)行開發(fā)與部署。矢量編輯與位圖編輯。創(chuàng)建和編輯矢量圖像與位圖圖像，并導(dǎo)入和編輯本機(jī)Photoshop和Illustrator文件。圖像優(yōu)化。采用預(yù)覽、跨平臺灰度系統(tǒng)預(yù)覽、選擇性JPEG壓縮和大量導(dǎo)出控件,針對各種交付情況優(yōu)化圖像。Dreamweaver、Flash以及在Dreamweaver之后推出的針對專業(yè)網(wǎng)頁圖像設(shè)計(jì)的Fireworks，三者被Macromedia公司稱為DreamTeam（夢之隊(duì)），足見市場的反響和Macromedia公司對它們的自信。說到Dreamweaver我們應(yīng)該了解一下網(wǎng)頁編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)(Internet)的家喻戶曉，HTML技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁編輯器，從網(wǎng)頁編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁編輯器和非所見即所得網(wǎng)頁編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網(wǎng)頁編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，您在所見即所得網(wǎng)頁編輯器進(jìn)行網(wǎng)頁制作和在WORD中進(jìn)行文本編輯不會感到有什么區(qū)別，但它同時(shí)也存在著致命的弱點(diǎn)。目錄和學(xué)習(xí)服務(wù)。由于WEB頁面能把文本、圖像、聲音、動畫、視像等多種媒體信息集于一體，不但使信息的顯示更加生動，而且使信息的瀏覽更為方便,同時(shí)WEB頁能實(shí)現(xiàn)網(wǎng)上交易平臺、客戶信息反饋方便了企業(yè)與客戶之間信息交流，因此許多企業(yè)紛紛建設(shè)具有自己獨(dú)特風(fēng)格的網(wǎng)站以增強(qiáng)企業(yè)知名度。與此同時(shí)，個(gè)人主頁設(shè)計(jì)也日益盛行，一個(gè)好的個(gè)人主頁不但可以推廣自己，還可以擁有網(wǎng)民的點(diǎn)擊率，直接關(guān)系到個(gè)人的知名度。二、網(wǎng)站總體規(guī)劃運(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中的逐幀動畫、運(yùn)動漸變動畫、形狀漸變動畫、遮罩層動畫、引導(dǎo)層動畫、聲音和元件、交互控制等技術(shù)進(jìn)行網(wǎng)站各類素材的處理，素材圖文并茂、效果突出、聲色兼?zhèn)?、交互性?qiáng)，素材制作符合網(wǎng)站的總體風(fēng)格。利用flash、Dreamwaver等軟件進(jìn)行網(wǎng)站的整合設(shè)計(jì)。充分運(yùn)用各種文字、圖片的編輯方法，合理建立各種超級鏈接和各類表單元素，利用時(shí)間軸、行為、動作制作簡單動畫及交互，并運(yùn)用各種定位技術(shù)進(jìn)行網(wǎng)頁元素的合理定位，合理運(yùn)用CSS樣式表、模板、庫等方法技術(shù)進(jìn)行網(wǎng)站頁面的設(shè)計(jì)。3.站點(diǎn)布局地圖三、網(wǎng)站的設(shè)計(jì)創(chuàng)意及設(shè)計(jì)風(fēng)格1、資料收集前期資料的收集從上海世博會前期中期以及后期的各方面宣傳工作進(jìn)行詳細(xì)的調(diào)查，找出重要的信息，我們所需要的。2、網(wǎng)頁設(shè)計(jì)：設(shè)計(jì)計(jì)風(fēng)格：我的網(wǎng)頁以橙色為主題。網(wǎng)頁風(fēng)格統(tǒng)一自然。四、主頁設(shè)計(jì)主頁：將分頁主要內(nèi)容集中了起來，并且加入了我最常連接的網(wǎng)站的連接。五、分頁面設(shè)計(jì)六、各類素材制作的主要過程及技術(shù)（一）Fireworks素材制作主要用Fireworks制作一些背景為通明的網(wǎng)頁素材。如主頁上面的切換圖片按鈕。主要步驟1：用橢圓選取框花出標(biāo)準(zhǔn)的圓。2：用油漆桶工具為選區(qū)上色。3：插入文本文字。4：用導(dǎo)出向?qū)?dǎo)出。并將色彩設(shè)置成alpha通道（二）Flash素材制作1.網(wǎng)頁logo上的水滴掉落制作用鋼筆工具畫出雨滴，并做好色彩關(guān)系將其轉(zhuǎn)化為圖形元件。新建影片剪輯元件將之前的雨滴圖形元件放入，將其對其到舞臺中心。在第10幀的地方按f6在最后一幀將雨滴適當(dāng)往下移動將鼠標(biāo)移動到其中一幀將補(bǔ)間設(shè)置為動畫，緩動設(shè)置為-100最后在返回場景，建立logo背景圖層再新建另外兩個(gè)圖層，將影片剪輯元件分別放到兩個(gè)圖層中，調(diào)整每個(gè)剪輯的透明度以及大小。按f5延伸每個(gè)層的播放時(shí)間。將其保存為swf文件便于網(wǎng)頁制作使用。2.我的家鄉(xiāng)圖像切換制作。將選好的圖片全部轉(zhuǎn)換成圖形元件，將輸入的文本打散(cturl+b)在轉(zhuǎn)換為圖形元件每張圖片都新建圖層圖層一動畫效果從下往上升，為了突出彈性將緩動值設(shè)為100，起始幀的透明設(shè)為13%制作其他圖片進(jìn)出效果時(shí)根據(jù)圖片需要調(diào)整大小透明度，進(jìn)出方向等為了圖片進(jìn)出的效果自然柔和，開始幀和結(jié)束幀都將透明度設(shè)置的低一點(diǎn)3我的漫畫圖像切換制作選擇【文件】|【新建】命令，新建一個(gè)空白文檔。選擇【修改】|【文檔】命令，創(chuàng)建一個(gè)1200*300像素，背景色是白色的新文檔。動畫制作將所有圖片轉(zhuǎn)換為圖形元件。制作背景的黑色線條前幀為第1幀，插入圖片，并將圖片的右邊移動至文檔的左邊。在第14幀處按F6鍵，按SHIFT鍵將圖片的右邊移動至文檔的左邊。在1-14幀進(jìn)行【動畫】補(bǔ)間。緩動值為100之后每張圖片處理方法類似，最后將前面制作動畫按f5進(jìn)行延伸保證前面的圖片不消失4我的電影圖像切換制作，下面類似過程如下所制作選擇【文件】|【新建】命令，新建一個(gè)空白文檔。選擇【修改】|【文檔】命令，創(chuàng)建一個(gè)1200*300像素，背景色是黑色的新文檔。動畫制作將所有圖片轉(zhuǎn)換為圖形元件。當(dāng)前幀為第10幀，插入圖片，并將圖片的右邊移動至文檔的左邊。在第20幀處按F6鍵，按SHIFT鍵將圖片的右邊移動至文檔的左邊。在10-20幀進(jìn)行【動畫】補(bǔ)間。緩動值為100之后每張圖片處理方法類似，最后將前面制作動畫按f5進(jìn)行延伸保證前面的圖片不消失5我的音樂圖像切換制作選擇【文件】|【新建】命令，新建一個(gè)空白文檔。選擇【修改】|【文檔】命令，創(chuàng)建一個(gè)1200*300像素，背景色是灰色的新文檔。動畫制作將所有圖片轉(zhuǎn)換為圖形元件。寫入“聽音樂”“最愛”文本，將其打散并轉(zhuǎn)換為圖形元件。將文字起始幀顏色透明度降低做出飛入畫面的動畫為了讓文字顯出彈性設(shè)置緩動值。當(dāng)前幀為第40幀，插入周杰倫圖片，在第45幀處按F6鍵，并將圖片的左上角邊移動至文檔的中間。在50幀出按f6將圖片拖到右上角將透明度降低，設(shè)置緩動值。之后的圖片均以每隔一幀建立新的圖層做出圖片依次由右向左出現(xiàn)的動畫。（三）Dreamweaver素材制作1．制作網(wǎng)頁導(dǎo)航欄（1）首先用ps制作出導(dǎo)航按鈕兩種狀態(tài)的圖片(2)點(diǎn)擊選擇圖像對象下的鼠標(biāo)經(jīng)過圖像（3）原始圖像選擇未選中狀態(tài)的圖片，鼠標(biāo)經(jīng)過的圖像選擇選中狀態(tài)的圖片。用類似的方法處理了主頁面上的切換圖像按鈕。2.制作主頁面上的圖像切換效果當(dāng)鼠標(biāo)移動到圖片上的1234時(shí)可切換圖片。將1.2.3.4號圖片分別放入繪制的apdiv的框里，將鼠標(biāo)點(diǎn)中的圖標(biāo)在窗口中勾選行為窗口為按鈕1添加顯示隱藏元素動作，鼠標(biāo)動作設(shè)置為onmouseover除了1按鈕對應(yīng)的圖像設(shè)置成顯示，其他的圖層設(shè)置成隱藏。其他的按鈕設(shè)置方法類似。七、站點(diǎn)整合（一）站點(diǎn)建立1、選擇【站點(diǎn)】|【新建站點(diǎn)】命令，打開【站點(diǎn)定義】對話框，如圖所示（2）單擊【高級】標(biāo)簽，在【高級】選項(xiàng)卡中設(shè)置本地站點(diǎn)的參數(shù)，如圖所示：（二）網(wǎng)頁框架構(gòu)建(1)檢查本地站點(diǎn)根文件夾“wangye”中的素材是否正確。（2）選擇【站點(diǎn)】|【管理站點(diǎn)】命令，檢查當(dāng)前站點(diǎn)設(shè)置是否正確。（3）在網(wǎng)頁文檔窗口中，選擇【修改】|【頁面屬性】命令，在；【頁面屬性】對話框中作各項(xiàng)參數(shù)的設(shè)置。（4）單擊【布局模式】區(qū)域中的【布局表格】的按鈕，將鼠標(biāo)移到網(wǎng)頁編輯窗口中，此時(shí)鼠標(biāo)指針變?yōu)槭中螤?，在制定位置拖拽鼠?biāo)，就可以在網(wǎng)頁編輯窗口中劃出布局表格。在繪制布局表格的地方不能有任何的文字和圖片。在場景中分別畫出1200*300像素、800*190像素等尺寸不同的幾個(gè)布局單元格。（5）在布局單元格中必須畫好布局單元格后才可以插入文字或圖片等對象。單擊【布局模式】區(qū)域中的【布局單元格】的按鈕，在布局表格中根據(jù)需要畫出多個(gè)布局單元格。（6）在布局單元格中根據(jù)頁面需要輸入文字或插入圖片等對象，如圖所示：（7）大體框架構(gòu)建好之后，在主頁及各子頁面進(jìn)行文字的添加。（8）在【標(biāo)準(zhǔn)模式】中使用【繪制層】，添加做好的Flash素材。（9）利用Dreamweaver將主頁與各子頁面鏈接起來八、總結(jié)1、Fireworks是網(wǎng)絡(luò)圖形的處理軟件，它記網(wǎng)頁圖形的創(chuàng)建、編輯、管理于一體，簡化了制作網(wǎng)頁圖形的流程，能生成大小適合而且質(zhì)量較好的網(wǎng)頁圖形。當(dāng)然它也可以做相對簡單的動畫，比如旋轉(zhuǎn)的圖形等。在我的網(wǎng)頁制作中，對于Fireworks的運(yùn)用只有一處，就是按鈕圖標(biāo)背景的透明處理。對于它的學(xué)習(xí)，我還應(yīng)該努力。2、Flash是制作適合網(wǎng)絡(luò)傳輸?shù)牧髅襟w動畫的軟件。Flash動畫文件具有體積小、可邊下載邊播放、多媒體交互性等特點(diǎn)，已成為當(dāng)前制作高壓縮網(wǎng)絡(luò)動畫的專業(yè)工具。在我的網(wǎng)頁制作中，對于Flash的運(yùn)用很多，有圖片展示的制作，也有漢字的閃動制作等，這些東西大多都是老師上課所講的內(nèi)容自己創(chuàng)新的內(nèi)容太少。3、Dreamweaver是集網(wǎng)頁制作和網(wǎng)站管理于一身的網(wǎng)頁編輯軟件，是一套針對專業(yè)網(wǎng)頁設(shè)計(jì)者和開發(fā)者的可視化網(wǎng)頁開發(fā)工具。它具有功能強(qiáng)大、代碼簡潔和操作方便等特點(diǎn)，利用它可以非常輕松地制作出跨越平臺和瀏覽器限制的充滿動感的網(wǎng)頁。在我的網(wǎng)頁制作中，對于Dre