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

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

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