2010年5月22日 星期六

[作業三 台灣各縣市大學分布查詢網頁設計]



Assignment #3 台灣各縣市大學分布查詢網頁設計

請設計一個網頁,來呈現台灣各縣市大學分布資訊。你可將資訊用圖形、文字、動畫等任何形式呈現,網頁可一頁或多頁,可以直接在Blog上呈現,或由Blog連結至其它位置(便於利用blogger所未提供的系統功能)。

作業連結

http://moon.cse.yzu.edu.tw/~s961407/
( 建議解析度 1024 * 768 )

概念

利用網頁的模式來提供使用者一個台灣縣市大學分布查詢的web介面,主要是利用一個地圖點選和圖型條列當作選單,顯示在主頁框顯示哪些縣市有哪些大學。簡單的web介面,再加上簡單的美工和大學生活圖片,就可以構成一個完整的university search web。使用容易上手,操作介面也簡單明瞭。


互動機制













主要分為三大頁框(不包含top 和bottom),左頁框為兩部分選單,主頁框就是顯示縣市大學,右頁框就是放照片。有互動性的就是左頁框與主頁框,在左頁框的選單上,上部分為台灣地圖,可以依照縣市去點選連結區塊,下部分為圖型的縣市條列,也可以直接點選。因為在地圖選單上的連結是利用dreamweaver上的區塊連結,萬一這個區塊連結失敗了,還可以點選下部分選單。點選縣市後,在主頁框會顯示哪些縣市有哪些大學分部,利用圖塊的方式再加上連結,介面上看起來不複雜也比較清晰,只需要移動滑鼠就可以達到簡單的人機互動功能。

資訊技術

介紹的這項功能,就是Dreamweaver具有“設計互動式網頁”的功能。你可以利用Dreamweaver的“圖層”(Layer)和“時間軸”(Time Line)功能,來讓圖片或文字隨意地在網頁中自由移動。移動的方式可以是繞著你所設定的路徑(path)移動,也可以是左右或直線的移動。另外,你可以設計讓文字或圖片配合鼠標的點選有更多的變化。也就是說,當鼠標經過文字或圖片,文字或圖片會產生變化的動態效果。Dreamweaver還可以插入Flash的.swf動畫文件和 Firework設計的HTML文件,讓網頁更加活潑。雖然FrontPage也可以插入Flash文件,但操作方面比Dreamweaver麻煩。因為Dreamweaver、Flash、Firework 都是MacroMedia公司的產品。

心得感想

之前撰寫網頁都是單使用notepad放上html語法,這次是使用dreamweaver來寫網頁。Dreamweaver本身就是一個互動性很強的網頁軟體,很多都是可以使用內建模組,再比較程式碼後,很明顯就可以看出方便性。如果再把我的網頁加上ccs的功能性,就更能完成互動性,透過這個經驗,對web又有更深的了解。