范例學(xué)Dreamweaver+Flash+Photoshop網(wǎng)頁(yè)制作

第1章  網(wǎng)頁(yè)設(shè)計(jì)軟件基礎(chǔ) 1
任務(wù)一  初識(shí)Dreamweaver 8 2
相關(guān)知識(shí)點(diǎn)：新特點(diǎn)、界面組成、工具箱的用法
Dreamweaver是美國(guó)Macromedia公司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得的網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。
任務(wù)二  初識(shí)Flash 8 .5
相關(guān)知識(shí)點(diǎn)：Flash的優(yōu)點(diǎn)、界面組成、主要工具的作用
Flash 8是Macromedia公司推出的一種優(yōu)秀的矢量動(dòng)畫編輯軟件，F(xiàn)lash 8是其最新版本。利用該軟件制作的動(dòng)畫尺寸要比位圖動(dòng)畫文件，如GIF動(dòng)畫尺寸小得多，用戶不但可以在動(dòng)畫中加入聲音，視頻和位圖圖像，還可以制作交互式的影片或者具有完備功能的網(wǎng)站。Flash 8還有一個(gè)可貴之處，就是可以作為藝術(shù)家的數(shù)字化草稿板。它可以幫助那些不太精通藝術(shù)的商人們，將他們的想法圖形化。Flash 8所輸出的文件可以被高檔的圖形軟件所接受，專業(yè)人員可以利用這些高檔的圖形軟件，對(duì)其做進(jìn)一步的加工和完善。這樣，這些專業(yè)人員就不必再?gòu)脑疾莞彘_始創(chuàng)作了。
任務(wù)三  認(rèn)識(shí)Photoshop CS3 .11
相關(guān)知識(shí)點(diǎn)：圖像格式、模式、界面組成、功能簡(jiǎn)介
Photoshop是Adobe公司的王牌產(chǎn)品，它是一款圖像處理軟件，在圖形圖像處理領(lǐng)域擁有毋庸置疑的權(quán)威。無論是平面廣告 設(shè)計(jì)、室內(nèi)裝潢，還是處理個(gè)人照片，Photoshop都已經(jīng)成為不可或缺的工具。同樣在網(wǎng)頁(yè)設(shè)計(jì)方面它也是設(shè)計(jì)師不可或缺的工具，它不僅可以應(yīng)用在前期網(wǎng)頁(yè)素材的準(zhǔn)備和處理上，而且還被廣泛應(yīng)用在網(wǎng)頁(yè)的布局和效果圖設(shè)計(jì)上，并且在網(wǎng)頁(yè)制作后期它還可以優(yōu)化網(wǎng)頁(yè)上的圖像輸出。所以對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來說Photoshop是不可或缺的助手。
測(cè)試題 15
第2章  網(wǎng)頁(yè)制作入門 17
任務(wù)一  創(chuàng)建商業(yè)網(wǎng)站的本地站點(diǎn) 18
相關(guān)知識(shí)點(diǎn)：安裝、配置IIS服務(wù)器、建立虛擬目錄
要學(xué)會(huì)網(wǎng)頁(yè)制作，就必須了解怎么樣創(chuàng)建商業(yè)網(wǎng)站的本地站點(diǎn)，以用來調(diào)試網(wǎng)站。那么什么是IIS？IIS是Internet信息服務(wù)（Internet Infomation Server）的縮寫。它是一種Web服務(wù)，Gopher Server和FTP Server全部包容在里面。IIS意味著用戶可以發(fā)布網(wǎng)頁(yè)，并且有ASP（Active Server Pages）、Java、VBScript產(chǎn)生頁(yè)面，以及一些擴(kuò)展功能。在安裝IIS之前，系統(tǒng)必須已經(jīng)安裝TCP/IP。查看系統(tǒng)是否安裝了IIS服務(wù)的最簡(jiǎn)單辦法是查看系統(tǒng)C盤下是否存在“Inetput”文件夾，如果存在則表示已經(jīng)安裝過IIS服務(wù)，無須再次安裝；如果沒有則表示該系統(tǒng)還未安裝IIS服務(wù)。
任務(wù)二  創(chuàng)建Deamweaver 8站點(diǎn) 23
相關(guān)知識(shí)點(diǎn)：建立站點(diǎn)、站點(diǎn)的管理、文件的比較、站點(diǎn)地圖
在Dreamweaver中，“站點(diǎn)”一詞既表示W(wǎng)eb站點(diǎn)，又表示屬于Web站點(diǎn)的文檔在本地的存儲(chǔ)位置。在開始構(gòu)建Web站點(diǎn)之前，需要建立站點(diǎn)文檔的本地存儲(chǔ)位置。Dreamweaver 站點(diǎn)可以組織與Web站點(diǎn)相關(guān)的所有文檔，跟蹤和維護(hù)鏈接，管理文件，共享文件及將站點(diǎn)文件傳輸?shù)絎eb服務(wù)器。
任務(wù)三  制作簡(jiǎn)歷網(wǎng)頁(yè) 36
相關(guān)知識(shí)點(diǎn)：輸入、編輯文本 插入圖片 特殊字符
IIS站點(diǎn)已經(jīng)創(chuàng)建完成，而且Dreamweaver 8站點(diǎn)也已經(jīng)建立完成，下面就來制作我們的第一個(gè)網(wǎng)頁(yè)。來開始我們的網(wǎng)頁(yè)制作之旅。制作什么呢？現(xiàn)在越來越多的人將個(gè)人簡(jiǎn)歷放到個(gè)人網(wǎng)站、博客上，以便聯(lián)系。正好張三在最近正在找工作，那么就來制作一份個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)，可是怎么做呢，張三什么都不懂。沒關(guān)系，下面就和張三一起制作他的第一份簡(jiǎn)歷網(wǎng)頁(yè)。
測(cè)試題 47
第3章  使用Dreamweaver編輯網(wǎng)頁(yè) 49
任務(wù)一  制作網(wǎng)頁(yè)快樂少年班 50
相關(guān)知識(shí)點(diǎn)：CSS的導(dǎo)入和導(dǎo)出、CSS屬性的設(shè)置、應(yīng)用樣式
本節(jié)將通過制作網(wǎng)頁(yè)快樂少年班來向讀者講解CSS在Dreamweaver中的應(yīng)用，通過本節(jié)的學(xué)習(xí)讀者應(yīng)該學(xué)會(huì)通過設(shè)置CSS的屬性來改變網(wǎng)頁(yè)背景、網(wǎng)頁(yè)內(nèi)容樣式和字體格式等。
任務(wù)二  設(shè)計(jì)日記導(dǎo)航頁(yè) 58
相關(guān)知識(shí)點(diǎn)：插入表格、樣式設(shè)置、插入圖片、級(jí)鏈接的設(shè)置與應(yīng)用
所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的鏈接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁(yè)中用來超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。下面就來介紹在網(wǎng)頁(yè)中怎么樣設(shè)置和應(yīng)用超級(jí)鏈接。
測(cè)試題 73
第4章  網(wǎng)頁(yè)布局 75
任務(wù)一  設(shè)計(jì)商業(yè)網(wǎng)站 76
相關(guān)知識(shí)點(diǎn)：Flash的插入、對(duì)齊屬性、布局頁(yè)面
下面將結(jié)合以前所講的內(nèi)容來制作高科技企業(yè)的首頁(yè)文件，讀者應(yīng)重點(diǎn)體會(huì)在這類網(wǎng)頁(yè)設(shè)計(jì)中的布局風(fēng)格和界面色彩搭配。
任務(wù)二  制作購(gòu)物網(wǎng)站 95
相關(guān)知識(shí)點(diǎn)：表格CSS、表格的套用、網(wǎng)頁(yè)的布局、設(shè)置頁(yè)面元素
表格是在網(wǎng)頁(yè)設(shè)計(jì)中用得最多的元素，大多數(shù)的網(wǎng)頁(yè)都是使用表格來組織的。利用表格來組織網(wǎng)頁(yè)內(nèi)容，可以設(shè)計(jì)出布局合理、結(jié)構(gòu)協(xié)調(diào)和美觀勻稱的網(wǎng)頁(yè)。本節(jié)將通過表格的應(yīng)用來制作公司主頁(yè)。
測(cè)試題 113
第5章  網(wǎng)頁(yè)中Flash元素的制作 115
任務(wù)一  用Flash設(shè)計(jì)時(shí)裝節(jié)招帖 116
相關(guān)知識(shí)點(diǎn)：圓角矩形半徑工具，分離、組合命令
Paris時(shí)裝節(jié)一直是時(shí)尚節(jié)目的焦點(diǎn)，作為時(shí)裝節(jié)的招帖自然要有個(gè)性，畢竟這里將聚焦全球的目光。此任務(wù)將講解時(shí)裝節(jié)招帖的制作方法，通過學(xué)習(xí)讀者應(yīng)該學(xué)會(huì)應(yīng)用圓角矩形半徑按鈕、分離命令和組合命令來完成圖形的繪制。
任務(wù)二  制作Flash動(dòng)畫“古韻” 126
相關(guān)知識(shí)點(diǎn)：遮罩、混色器\時(shí)間軸、創(chuàng)建補(bǔ)間動(dòng)畫
在Flash 8的作品中，常?？吹胶芏囔拍可衿娴男Ч渲胁簧倬褪怯米詈?jiǎn)單的“遮罩”完成的，如水波、萬(wàn)花筒、百葉窗、放大鏡和望遠(yuǎn)鏡，等等。那么怎么樣才能實(shí)現(xiàn)遮罩效果呢？在Flash 8.0中沒有一個(gè)專門的按鈕來創(chuàng)建遮罩層，遮罩層其實(shí)是由普通圖層轉(zhuǎn)化的。你只要在要某個(gè)圖層上單擊鼠標(biāo)右鍵，在彈出菜單中把“遮罩”前打個(gè)鉤，該圖層就會(huì)生成遮罩層，“層圖標(biāo)”就會(huì)從普通層圖標(biāo)變?yōu)檎谡謱訄D標(biāo)，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”，如果你想關(guān)聯(lián)更多層被遮罩，則只要把這些層拖到被遮罩層下面就行了。此外遮罩層中的圖形對(duì)象在播放時(shí)是看不到的，遮罩層中的內(nèi)容可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，則可以將線條轉(zhuǎn)化為“填充”。被遮罩層中的對(duì)象只能透過遮罩層中的對(duì)象被看到。在被遮罩層，可以使用按鈕、影片剪輯、圖形、位圖、文字和線條?？梢栽谡谡謱?、被遮罩層中分別或同時(shí)使用形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫、引導(dǎo)線動(dòng)畫等動(dòng)畫手段，從而使遮罩動(dòng)畫變成一個(gè)可以施展無限想象力的創(chuàng)作空間。下面我們就通過實(shí)例來講解怎么來實(shí)現(xiàn)遮罩效果。
任務(wù)三  制作網(wǎng)頁(yè)中的透明按鈕 135
相關(guān)知識(shí)點(diǎn)：掌握弱化填充邊緣、工具欄 、混色器面板、直線工具
大家知道Flash在網(wǎng)頁(yè)制作方面有著巨大的好處，不僅是表現(xiàn)在動(dòng)畫的制作上，在繪畫方面也同樣出色。與其他的圖形軟件相比，用Flash 繪圖更像在紙上繪圖。因?yàn)镕lash 的繪圖工具更隨意一些。而用Flash 繪圖又不同于在紙上繪圖，F(xiàn)lash 可以識(shí)別所畫的形狀、平滑所畫的曲線，使“隨手涂鴉”變得整潔規(guī)范。去描一幅畫好的圖畫是學(xué)習(xí)繪畫最簡(jiǎn)單的方法。因?yàn)橥ㄟ^描圖可以很快地找到繪畫的感覺。通過本實(shí)例的學(xué)習(xí)，讀者將體會(huì)到用Flash 繪圖是何等容易。所以下面將通過繪制透明按鈕，來使讀者掌握基本繪圖工具的使用方法和繪圖常用命令。同時(shí)還傳授一些繪圖技巧，利用它們可使繪圖作品顯得更專業(yè)。
任務(wù)四  制作運(yùn)動(dòng)會(huì)標(biāo)志動(dòng)畫 146
相關(guān)知識(shí)點(diǎn)：填充工具、放大、復(fù)制到網(wǎng)格、翻轉(zhuǎn)幀、元件
運(yùn)動(dòng)會(huì)馬上就要舉行了，作為校園網(wǎng)Flash設(shè)計(jì)者的小王卻不知道運(yùn)動(dòng)會(huì)標(biāo)志怎么設(shè)計(jì)，運(yùn)動(dòng)會(huì)的標(biāo)志既要美觀，又要體現(xiàn)運(yùn)動(dòng)的流暢美，怎樣才能做到這點(diǎn)呢？突然他想到了Flash。通過幀的應(yīng)用和動(dòng)作腳本的結(jié)合就可以很好地實(shí)現(xiàn)流暢變化的動(dòng)畫效果。本節(jié)將通過設(shè)計(jì)運(yùn)動(dòng)會(huì)標(biāo)志動(dòng)畫來學(xué)習(xí)復(fù)制到網(wǎng)格命令和翻轉(zhuǎn)幀命令等，同時(shí)對(duì)幀的應(yīng)用應(yīng)有初步了解，特別是關(guān)鍵幀和普通幀的插入，以及在動(dòng)畫中的應(yīng)用。
測(cè)試題 163
第6章  Flash動(dòng)畫的制作 165
任務(wù)一  iPod宣傳Flash的制作 166
相關(guān)知識(shí)點(diǎn)：填充變形工具、直接復(fù)制命令、混色器 、動(dòng)作
作為一個(gè)動(dòng)畫工作者，可以決定在一個(gè)場(chǎng)景中發(fā)生什么，以及什么時(shí)候發(fā)生。現(xiàn)在談一談?dòng)嘘P(guān)控制的問題。動(dòng)畫制作者可以讓鳥兒飛、讓卡通人物說話，甚至可以決定它們說什么，以及說的時(shí)候是否打光。本實(shí)例將以iPod的宣傳Flash為例，通過應(yīng)用橢圓、填充變形等工具來繪制時(shí)尚背景畫。然后調(diào)用動(dòng)作面板來插入腳本，以便通過鼠標(biāo)單擊來控制左右聲道的轉(zhuǎn)換，從而實(shí)現(xiàn)音樂與讀者的交互。
任務(wù)二  設(shè)計(jì)數(shù)碼相機(jī)的Flash展示 174
相關(guān)知識(shí)點(diǎn)：幀動(dòng)畫、Alpha值、動(dòng)作面板、透明度
在Flash 8的作品中，常?？吹胶芏噙B貫的鏡頭，我們稱之為動(dòng)畫，它讓我們感覺不到跳躍。從前些年的迪斯尼動(dòng)畫片到當(dāng)前不可思議的用計(jì)算機(jī)制作的電影，我們已經(jīng)陶醉于那種將美麗的畫面和動(dòng)作結(jié)合到一起的效果，盡管其中的許多動(dòng)作在現(xiàn)實(shí)生活中并不會(huì)發(fā)生。本例將制作數(shù)碼相機(jī)廣告，通過改變每一幀的Alpha值來實(shí)現(xiàn)漸變的動(dòng)畫效果。

任務(wù)三  制作Flash服飾網(wǎng)頁(yè) 186
相關(guān)知識(shí)點(diǎn)：關(guān)鍵幀、腳本語(yǔ)言、圖層位置、頁(yè)面布局
Flash 特別適用于創(chuàng)建通過 Internet 提供的內(nèi)容，因?yàn)樗奈募浅Ｐ?。那么用Flash來建全站不是更好，理論上是這樣的。然而事實(shí)上，現(xiàn)在只有極少數(shù)人掌握使用Flash建立全Flash站點(diǎn)的技術(shù)。因?yàn)樗馕吨叩慕缑婢S護(hù)能力和開發(fā)者的網(wǎng)站架構(gòu)能力，并且需要你有很好的語(yǔ)言基礎(chǔ)。當(dāng)然用Flash來建站帶來的好處也異常明顯，即全面的控制，無縫的導(dǎo)向跳轉(zhuǎn)，更豐富的媒體內(nèi)容，用戶的流暢交互，跨平臺(tái)和受客戶端的支持，以及與其他Flash應(yīng)用方案無縫連接集成等。下面將以實(shí)例服飾網(wǎng)頁(yè)向讀者講解Flash網(wǎng)站的建設(shè)，讓讀者了解Flash網(wǎng)站的優(yōu)點(diǎn)和建設(shè)技巧。
測(cè)試題 196
第7章  Photoshop在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用 199
任務(wù)一  設(shè)計(jì)MY HOME網(wǎng)頁(yè)圖標(biāo) 200
相關(guān)知識(shí)點(diǎn)：建立圖層、圖層的命名、文字工具、前景色、背景色
沒有做不到的，只有想不到的！”—這是Adobe為Photoshop進(jìn)行產(chǎn)品宣傳的廣告標(biāo)語(yǔ)?？梢奝hotoshop不僅在圖像處理上有實(shí)力，在繪圖方面也同樣卓越。而這恰恰是網(wǎng)頁(yè)設(shè)計(jì)中所需要的，一個(gè)網(wǎng)站首先吸引讀者的往往是其網(wǎng)頁(yè)的圖像效果，而這就需要好的圖片效果來支撐。然而事實(shí)上很多時(shí)候都不可能有直接的素材，這就要求自己來設(shè)計(jì)。本節(jié)將利用Photoshop自帶的工具，向大家展示Photoshop強(qiáng)大的自繪能力，下面將以設(shè)計(jì)橢圓圖形—MY HOME為例，介紹在Photoshop中最常用的新建、保存、新建和保存圖形設(shè)置的前景色和背景色、建立和調(diào)整選區(qū)、使用圖層面板、使用圖層樣式和處理文字圖層等的操作。
任務(wù)二  設(shè)計(jì)POPO動(dòng)漫網(wǎng)的LOGO 208
相關(guān)知識(shí)點(diǎn)：合并圖層、自由變換、蒙版的應(yīng)用、編輯路徑
標(biāo)志、徽標(biāo)和商標(biāo)（LOGO）是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物，它不同于古代的印記，現(xiàn)代標(biāo)志承載著企業(yè)的無形資產(chǎn)，是企業(yè)綜合信息傳遞的媒介。標(biāo)志作為企業(yè)CIS戰(zhàn)略的最主要部分，在企業(yè)形象傳遞過程中，是應(yīng)用最廣泛、出現(xiàn)頻率最高，同時(shí)也是最關(guān)鍵的元素。企業(yè)強(qiáng)大的整體實(shí)力、完善的管理機(jī)制、優(yōu)質(zhì)的產(chǎn)品和服務(wù)，都被涵蓋于標(biāo)志中，通過不斷的刺激和反復(fù)刻畫，深深地留在群眾心中。LOGO是與其他網(wǎng)站鏈接并讓其他網(wǎng)站鏈接的標(biāo)志和門戶，所以在網(wǎng)頁(yè)設(shè)計(jì)中LOGO的設(shè)計(jì)是至關(guān)重要的。而Photoshop的圖像設(shè)計(jì)能力在這里體現(xiàn)出來，它不僅可以設(shè)計(jì)出普通LOGO而且我們利用其的漸變、填充和蒙版等命令來制作出各種各樣的特效。下面就開始今天的實(shí)戰(zhàn)練習(xí)。
任務(wù)三  制作“華章工坊”電影站點(diǎn) 214
相關(guān)知識(shí)點(diǎn)：參考線、濾鏡、色調(diào)、對(duì)比度、填充漸變、自由變換
在網(wǎng)頁(yè)設(shè)計(jì)中，Photoshop最重要的作用之一就是，我們可以通過Photoshop中自帶的參考線等工具來布局和規(guī)劃網(wǎng)頁(yè)的頁(yè)面效果，并應(yīng)用Photoshop中的濾鏡、蒙版來渲染網(wǎng)頁(yè)效果，制作出絢麗的網(wǎng)頁(yè)，同時(shí)應(yīng)用切片等命令來輸出高質(zhì)量小體積的網(wǎng)頁(yè)圖片。本節(jié)將用Photoshop 進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)，通過已有素材并利用Photoshop中的濾鏡、蒙版、自由變形等命令來進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)，同時(shí)讀者應(yīng)學(xué)會(huì)怎樣利用參考線來進(jìn)行網(wǎng)站的布局規(guī)劃。在網(wǎng)站的設(shè)計(jì)上布局是基礎(chǔ)，沒有好的布局規(guī)劃是不可能設(shè)計(jì)出好網(wǎng)頁(yè)的。下面先介紹一些網(wǎng)頁(yè)布局的基礎(chǔ)知識(shí)。
測(cè)試題 229
第8章  網(wǎng)站設(shè)計(jì)綜合案例 231
任務(wù)  設(shè)計(jì)美容類整站 232
相關(guān)知識(shí)點(diǎn)：站點(diǎn)的建立、網(wǎng)站規(guī)劃、鏈接、一、二級(jí)頁(yè)面的設(shè)計(jì)
美容是所有女士永恒的話題，也是最能吸引眼球和最需要?jiǎng)?chuàng)作力的地方，做這類網(wǎng)站前一般應(yīng)考慮到此類站點(diǎn)的瀏覽者多為女性，所以這類網(wǎng)站一般要體現(xiàn)出女性美，給人一種柔和親切的感覺。這類網(wǎng)頁(yè)一幫多采用暖色調(diào)，以吸引瀏覽者。本節(jié)將應(yīng)用以前學(xué)過的知識(shí)來建立站點(diǎn)IIS服務(wù)，并建立本地文件夾用來存放網(wǎng)站內(nèi)容，再用網(wǎng)頁(yè)制作軟件制作美容類站點(diǎn)的一級(jí)頁(yè)面和二級(jí)頁(yè)面，并通過鏈接來架構(gòu)整站。通過本節(jié)的學(xué)習(xí)讀者將對(duì)建站技術(shù)有一個(gè)整體了解，主要的是讀者應(yīng)該對(duì)這類站點(diǎn)的布局和界面設(shè)計(jì)，以及在網(wǎng)頁(yè)建設(shè)中Flash的美化作用有一個(gè)全面了解。