“高山流水”——《網(wǎng)頁設(shè)計與制作》課程大作業(yè)制作報告

時間：2023-10-05 02:36:01 | 來源：網(wǎng)站運營

時間：2023-10-05 02:36:01 來源：網(wǎng)站運營

“高山流水”——《網(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控件。

1. 主題說明和logo介紹
   主題：高山流水
   選題原因和主題介紹：
   “高山流水”原出自《列子?湯問》，喻指知音或知己。從典故出發(fā)，我們可以看到山和水對中國文化的深刻影響。以山水為題材的中國的文學創(chuàng)作和傳統(tǒng)繪畫不可勝數(shù)。
   山和水作為風景中的佳美者，不僅給人與視覺上的享受，更能賦予人多樣的感情，還能讓人從中感悟出哲理。我們以此為出發(fā)點，利用網(wǎng)站來介紹中國山水的景物美、人文美和哲理美。從神州大地的眾多奇山秀水中，我們挑選了靈異的“天下第一奇山”黃山，令人敬畏的世界最高峰珠穆朗瑪峰，眾生供奉朝神積德之圣地三神山，秀甲天下、詩意濃濃的廬山；我們還收納了神秀天下、凈化心境的漓江，美如西子、世人傾倒的西湖，圣潔美麗、古樸瑰麗的若爾蓋，不拘于平靜、絢爛壯麗的瀑布。
   網(wǎng)站對四山四水進行了介紹，排布了許多山水美圖，并附上精美的文字，希望訪問者從中享受美、感知美、創(chuàng)造美。
   

網(wǎng)站Logo：
設(shè)計思路：鑒于本網(wǎng)站整體風格帶有濃厚的中國畫色彩，我們將網(wǎng)站的Logo設(shè)計成一個紅色的中國印，一方面與頁面風格相符，另一方面可作為國畫中的落款。

1. 總體規(guī)劃與結(jié)構(gòu)框圖
   網(wǎng)站共分為三個層次，頂層為主頁，以一幅畫卷展示出網(wǎng)站所囊括的內(nèi)容。主頁之下設(shè)置兩個一級分類（第二層），分別是“山之奇”和“水之秀”，其中“山之奇”部分介紹了四座名山：黃山、珠穆朗瑪峰、三神山和廬山；“水之秀”部分也分為四個子頁面，依次是：漓江、若爾蓋、杭州西湖、瀑布。各頁面層次關(guān)系見如下結(jié)構(gòu)框圖：
   共計11個頁面。
2. 開發(fā)工具和技術(shù)
3. 開發(fā)工具：Adobe PhotoShop CS3、 Adobe Dreamweaver CS4、
   Adobe Flash CS4、 Ulead GIF Animator 5.05
4. 使用技術(shù)：JavaScript框架庫jQuery+Marquee插件
   Div+CSS布局
   Flash相關(guān)：引導(dǎo)層、遮罩層、ActionScript2.0/3.0、交互按鈕
   PhotoShop圖像處理 ，GIF動畫制作
5. 原創(chuàng)素材制作說明
6. 網(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)鏈接和對播放的控制。

1. 二級頁面頭部Flash
   

Flash效果截圖



素材1 素材2
制作說明：利用PhotoShop將兩幅原始素材圖片（上圖）經(jīng)過處理后合并成該Flash的背景圖片，在中下部的空白區(qū)域制作四個“按鈕”元件及其鼠標懸停效果。為使頁面更富于動感，加入三條無規(guī)則移動的半透明線條。Flash中的鏈接采用ActionScript3.0編寫。（該Flash制作先于主頁Flash，起初還未考慮到降低作品對播放器的要求，因此編寫的是ActionScript3.0腳本）

---

1. 頁面布局

網(wǎng)站完全采用Div+CSS開發(fā)，主要部分由人工輸入代碼，保證了代碼的整潔高效，也實現(xiàn)了網(wǎng)站整體風格的統(tǒng)一。網(wǎng)站的DOM樹結(jié)構(gòu)為：

1. 主頁：
   

1. 山、水主頁：
   

1. 各個分頁：
   

1. 各個div標簽的背景圖片及內(nèi)容圖片設(shè)計

各種圖片都采用圓角矩形的設(shè)計思路，使得頁面更加的生動和友好。

1. 頁面滾動看板的設(shè)計
   采用了jQuery框架庫和其插件marquee.js，配合<marquee>標簽實現(xiàn)滾動功能，而且能夠?qū)崿F(xiàn)對鼠標事件的判斷和響應(yīng)。
   

1. 二級頁面右側(cè)GIF動畫
   

Gif動畫 素材1 素材2素材3
制作說明：使用Photoshop將圖片素材1做成只有邊框而其他部分透明的png圖片，并將素材2和素材3的文字去除，縮小為和畫卷框架匹配的圖片。再使用GIF Animator將三副圖片拼合為gif圖片，并在畫卷框內(nèi)的的圖片轉(zhuǎn)換時加入淡入淡出的效果。Gif動畫共有8個，分別放置在各個二級頁面中。

1. 二級頁面底部滾動圖片F(xiàn)lash

flash效果截圖

圖片1

圖片2

制作說明：首先利用Photoshop十六張素材圖片合成兩張張圖片，如上圖的圖片1圖片2，然后利用Flash制作滾動效果。滾動圖片flash共有兩個，分布在各個二級頁面中。

1. 角色分工
2. 分工說明

包括素材搜集在內(nèi)，總共花費了大約一周的時間，由于各自分工比較明確，對軟件和相關(guān)技術(shù)比較熟悉，制作起來效率較高。

1. 參考資料

[1] 百度知道http://zhidao.baidu.com

[2] 百度圖片http://image.baidu.com/

[3] 昵圖網(wǎng)http://www.nipic.com/site/search/1.html