作業說明

這學期的作業分為兩部分 : 一般的作業 (6次, 只算最高分的5次) 跟較複雜的 Project (2個)。

成績計算 : 作業 57%(45 +12) ; Projects 28% ; 出席率 15%
你必須做自己的作業,複製、抄襲的作業會得到負的分數,作業分數為每次 9+2 分,9為作業評分、2為是否準時交的分數,遲一週扣一分、兩週扣兩分。作業共 6 次,每次都有分數,最後計分時只採計最高的5次作業評分 -- 共 45 分,再加上 6 次的準時交分數 -- 12 分。Projects 兩次各14分,期末時交。

Projects 第一個是題目 : "我的校園生活" 的網頁設計,另一個是"題目未定"的 Flash 動畫設計,這兩個 Projects 會在學期末才打成績。

作業一

Due 11/15

這個作業分為兩部分 :

  • PART A
    註冊你的作業首頁 (之後我們會正式的設計一個作業首頁,但是現在你需要以一個簡單的設計來放你的作業,你可以暫時使用我們在課堂上設計的那幾個!! 你的每一個作業必須有一個超連結在這個首頁上,我會在你的首頁上檢查你的作業! 事實上,這個暫時的作業首頁請以 HTML 來完成,這是作業一的第二部份。)

  • PART B
    你的第一次作業是使用 HTML 語法來設計一個暫時的作業首頁 (之後,你可以慢慢的修改、設計這個首頁)

    目前這個首頁必須包含 :

  • 一個標題 : 可以是文字也可以是圖片或兩者都有
  • 有一個放置所有你的作業超連結的區塊
  • 一段描述這個網頁或任何相關訊息的文字
  • 包含你個人的資料(姓名或學號)及可以聯絡到你的 E-Mail 超連結
  • 你只能直接利用 HTML 語法來設計,不能用 FrontPage、DreamWeaver、NamoEditor ... 等軟體,也不要放入任何不是你自己做的圖片或程式碼!!

    Examples : Example 1  Example 2

作業二

Due 12/23

利用 DreamWeaver 設計的網頁

我們在11月9日的課堂上,使用 Dreamweaver、利用表格排版以幾個圖片製作了一個網頁。

這個作業也請同學使用表格排版,設計一個有標題、內容 (可以是圖片加文字) 的網頁。

Example : Example 1  

作業三

Due 1/5

設計一個具有 RollOver (onMouseOver, onMouseOut) 功能的網頁

在 11/16 的課堂上我們利用 CSS 在 Navigation Links 上做了超連結的 RollOver 的效果,在 11/23 上課時也做了按鈕的 Rollover 效果,事實上滑鼠移到超連結上來改變圖片、連結的樣式或是滑鼠移到按鈕上來改變圖片、按鈕的顏色或是滑鼠移到圖片上來改變本身或另外的圖片等效果在網頁上都相當常見。例如 : Example

這個作業也必須是一個網頁,你可以新做一個,也可以利用之前的網頁做修改,再加上 Rollover 的效果,無論如何,在你的作業首頁上請加一個作業四的連結連到這一頁。

( 你也可以參考這個 教學網頁, 或者你可以直接利用 DreamWeaver 的影像物件來做)

Examples : Example 1 (11/16 課堂上的例子搭配 11/9 的例子)   Example 2 (11/9 的 Example 15 搭配 11/16 Example 17 的Links,再加上 11/23 Example 18 的 onMouseOver/Out 的效果。後記 : 這個例子用到許多圖片,花了很多時間,一開始用了太大的字型,做了幾個後又重做,再加上套用之前的例子,有些 CSS 要重新調整 ... 其實做網頁很花時間的,一開始的版面設計不提,準備圖片、相片加上 CSS 的編排,花幾小時甚至幾天都可能!! )

作業四

Due 1/9

設計第一個 Flash 動畫 (下載 試用版,選擇 Adobe Flash Professional CS5 )

  1. 利用文字和/或相片設計一個 Flash 動畫
  2. 動畫中至少要有 3 個圖層,每一圖層 至少要有 3 個 關鍵影格
  3. 也可以加上音樂 (加 MP3 請注意檔案的大小及同步的設定,你不必上傳 MP3 檔案, MP3 會被包含在 .swf 中)
  4. 你的作業必須是一個網頁檔!! 在你的首頁上設一個作業 4 的連結連到有你的 Flash 動畫的網頁檔 (不要連到 swf 檔)

Examples : Example 1  Example 2  Example 3  Example4

作業五

Due 1/16

設計第二個 Flash 動畫 (下載 試用版,選擇 Adobe Flash Professional CS5 )

  1. 使用我們教過的其他工具或技巧,例如按鈕、導引線、遮色片、或形狀漸變等製作另一個動畫
  2. 這次也請把這段動畫安排在另一個網頁中,放在首頁上也行。(你可以複製 <Object> ... </Object> 這段從 Flash 發佈的網頁原始檔到你要放這個動畫的網頁原始檔中,如果是 Flash CS3/CS4/CS5,你可以做同樣的複製或者你可以利用其中的 JavaScript 的設定,我們曾提過一次,還記得怎麼做嗎? 當然也可以使用 DreamWeaver 的 插入 --> 媒體 --> Flash/SWF!!)
  3. 在你的首頁上設一個 作業 5 的的連結連到有你的 Flash 動畫的網頁檔 (不要連到 swf 檔,既使是放在首頁也請做一個作業 5 的的連結連到首頁! 這樣我才知道首頁上的動畫是作業5)

Here is an Example

Project 1

Due 1/12/2011

本學期有兩個 Projects,這是第一個。期末時才會打分數。主要的目的是希望同學能綜合所學,把所有教過的內容 (設計的、技巧上的、工具的 ...),應用在這個 Project 上。

這個 Project 的主題是我的旅遊記,以旅遊的相片配上文字介紹為網頁的主要內容,加入的內容與設計可以是 : 影像、動畫、文字與超連結、背景、主標題的設計等,而且請應用 CSS 及 Rollover 的技術來設計。你可以利用至少三頁、或更多頁來設計這個 Project,不過不管幾頁,必須有一個導覽列,導覽列的連結可連到其他頁面,然後請在你的作業首頁上加一個 Project 1 (專題一) 的連結連到這個 Project 的主頁面。

Example : 我們在11月25日那一周開始介紹了有關這個 Project 的做法,也簡單的做了一個 Example 1

Example : 我們在12月9日那一周回來繼續設計了其他頁面 Example 2

Project 2

Due 1/18/2011

使用 Flash 做一個主題是 TV 的動畫。

Example : 我們在1月4/6日那一周開始介紹了有關這個 Project 的做法,也簡單的做了一個 Example 1