“高山流水”——《網(wǎng)頁設(shè)計與制作》課程大作業(yè)制作報告
“高山流水”——《網(wǎng)頁設(shè)計與制作》課程大作業(yè)制作報告說明：為了表現(xiàn)出網(wǎng)站的最佳效果，建議在1024*768或1280*800分辨率下，使用IE7.0、Adobe flash player 9.0 ActiveX或其更高版本訪問本網(wǎng)站，并注意設(shè)置瀏覽器允許運行ActiveX控件。
主題說明和logo介紹
主題：高山流水
選題原因和主題介紹：
“高山流水”原出自《列子?湯問》，喻指知音或知己。從典故出發(fā)，我們可以看到山和水對中國文化的深刻影響。以山水為題材的中國的文學(xué)創(chuàng)作和傳統(tǒng)繪畫不可勝數(shù)。
山和水作為風景中的佳美者，不僅給人與視覺上的享受，更能賦予人多樣的感情，還能讓人從中感悟出哲理。我們以此為出發(fā)點，利用網(wǎng)站來介紹中國山水的景物美、人文美和哲理美。從神州大地的眾多奇山秀水中，我們挑選了靈異的“天下第一奇山”黃山，令人敬畏的世界最高峰珠穆朗瑪峰，眾生供奉朝神積德之圣地三神山，秀甲天下、詩意濃濃的廬山；我們還收納了神秀天下、凈化心境的漓江，美如西子、世人傾倒的西湖，圣潔美麗、古樸瑰麗的若爾蓋，不拘于平靜、絢爛壯麗的瀑布。
網(wǎng)站對四山四水進行了介紹，排布了許多山水美圖，并附上精美的文字，希望訪問者從中享受美、感知美、創(chuàng)造美。
網(wǎng)站Logo： 設(shè)計思路：鑒于本網(wǎng)站整體風格帶有濃厚的中國畫色彩，我們將網(wǎng)站的Logo設(shè)計成一個紅色的中國印，一方面與頁面風格相符，另一方面可作為國畫中的落款。 總體規(guī)劃與結(jié)構(gòu)框圖
網(wǎng)站共分為三個層次，頂層為主頁，以一幅畫卷展示出網(wǎng)站所囊括的內(nèi)容。主頁之下設(shè)置兩個一級分類（第二層），分別是“山之奇”和“水之秀”，其中“山之奇”部分介紹了四座名山：黃山、珠穆朗瑪峰、三神山和廬山；“水之秀”部分也分為四個子頁面，依次是：漓江、若爾蓋、杭州西湖、瀑布。各頁面層次關(guān)系見如下結(jié)構(gòu)框圖：
共計11個頁面。開發(fā)工具和技術(shù)開發(fā)工具：Adobe PhotoShop CS3、 Adobe Dreamweaver CS4、?
Adobe Flash CS4、 Ulead GIF Animator 5.05使用技術(shù)：JavaScript框架庫jQuery+Marquee插件
Div+CSS布局
Flash相關(guān)：引導(dǎo)層、遮罩層、ActionScript2.0/3.0、交互按鈕
PhotoShop圖像處理 ，GIF動畫制作原創(chuàng)素材制作說明網(wǎng)站首頁Flash
Flash效果截圖 效果：首頁Flash動畫是一幅緩緩拉開的畫卷，畫卷上根據(jù)本網(wǎng)站的結(jié)構(gòu)描繪了一幅山水圖，點擊圖中的相應(yīng)區(qū)塊即可進入相應(yīng)頁面，每個鏈接區(qū)塊都制作了鼠標懸停效果，點擊鏈接時將收回畫卷，然后進入子頁面。
素材1 素材2 制作說明：首先利用PhotoShop將兩幅原始素材圖片（上圖）合并成畫卷中的山水圖，每一個鏈接區(qū)域均轉(zhuǎn)換成“按鈕”元件，以便設(shè)置鼠標懸停效果。其中“漓江”上漂流的小舟利用路徑引導(dǎo)層引導(dǎo)小舟的運動軌跡。水流效果和瀑布流動效果利用的是Flash的遮罩功能。Flash中加入了動作腳本（ActionScript2.0）用于實現(xiàn)鏈接和對播放的控制。 二級頁面頭部Flash
Flash效果截圖
素材1 素材2 制作說明：利用PhotoShop將兩幅原始素材圖片（上圖）經(jīng)過處理后合并成該Flash的背景圖片，在中下部的空白區(qū)域制作四個“按鈕”元件及其鼠標懸停效果。為使頁面更富于動感，加入三條無規(guī)則移動的半透明線條。Flash中的鏈接采用ActionScript3.0編寫。（該Flash制作先于主頁Flash，起初還未考慮到降低作品對播放器的要求，因此編寫的是ActionScript3.0腳本） 頁面布局
網(wǎng)站完全采用Div+CSS開發(fā)，主要部分由人工輸入代碼，保證了代碼的整潔高效，也實現(xiàn)了網(wǎng)站整體風格的統(tǒng)一。網(wǎng)站的DOM樹結(jié)構(gòu)為： 主頁：
山、水主頁：
各個分頁：
各個div標簽的背景圖片及內(nèi)容圖片設(shè)計
各種圖片都采用圓角矩形的設(shè)計思路，使得頁面更加的生動和友好。 頁面滾動看板的設(shè)計
采用了jQuery框架庫和其插件marquee.js，配合
二級頁面右側(cè)GIF動畫
Gif動畫 素材1 素材2素材3 制作說明：使用Photoshop將圖片素材1做成只有邊框而其他部分透明的png圖片，并將素材2和素材3的文字去除，縮小為和畫卷框架匹配的圖片。再使用GIF Animator將三副圖片拼合為gif圖片，并在畫卷框內(nèi)的的圖片轉(zhuǎn)換時加入淡入淡出的效果。Gif動畫共有8個，分別放置在各個二級頁面中。 二級頁面底部滾動圖片F(xiàn)lash
flash效果截圖
圖片1
圖片2 制作說明：首先利用Photoshop十六張素材圖片合成兩張張圖片，如上圖的圖片1圖片2，然后利用Flash制作滾動效果。滾動圖片flash共有兩個，分布在各個二級頁面中。 角色分工分工說明
包括素材搜集在內(nèi)，總共花費了大約一周的時間，由于各自分工比較明確，對軟件和相關(guān)技術(shù)比較熟悉，制作起來效率較高。 參考資料
[1] 百度知道
http://zhidao.baidu.com
[2] 百度圖片
http://
image.baidu.com/
[3] 昵圖網(wǎng)
http://www.
nipic.com/site/search/1
.html
