Friday, December 19, 2008

期末作業

目標
以使用者經驗改善一家企業的網站

方法
  • 依上半學期的分組,各組自選一家企業網站,改善之。改善之道如下:
    1. 提出其可改善之處。
    2. 提出同類型的優良企業網站,供改善參考。
    3. 在部落格記錄每週改善記錄。
    4. 在部落格做改善結果意見調查。
可改善者
  • 台中技術學院日間部進修部進專補校的網站
改善實例
繳交
  1. 在你的www資料夾內新增work_7資料夾,把你修改的網站置入其中。
  2. 在你的www資料夾的index.html檔案內,將作業七超連結到上一資料夾的首頁。
期限
  1. 11/17(一)~22(六):主題選定
  2. 11/24~29:分析組織架構圖
  3. 12/01~06:設計版型
  4. 12/08~13:設計版型
  5. 12/15~20:初稿
  6. 12/22~27:修稿
  7. 12/29~03:完稿
  8. 01/05~10:檢討

Wednesday, December 17, 2008

網站外觀

目標
觀察網站,熟悉使用者經驗元素中的外觀 (surface)層,使頁面內的圖、文、色彩組合是一網站類型。

方法
  1. 援用Dreamweaver的範本,更動其圖像及CSS。
隨堂演練

一、
  1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容,你須將遠端內容下載)
  2. 在本地端網站的www資料夾內,新增work_6資料夾。
  3. 開啟Dreamweaver,點按右邊的從範本建立中的起始頁面
二、建立檔案
  1. 樣本頁面欄內選樣本,迄與你擬要改善的網站之頁面編排接近者。點按建立鈕。
  2. work_6資料夾,儲存為index.html
三、檢視及編修網頁
  1. 點按頁面的圖像元素、文字元素及表格背景色等,變更之,以接近你欲修改的網站。
  2. 儲存該index.html
四、修改CSS
  1. 在Dreamweaver右網站資訊區,點按附檔為CSS者。
  2. 將.bodyText內的color #FFFF00改為FFFFFF
  3. 關啟CSS
  4. 檢視html檔的設計,發現主文區的文字全部由黃色變為白色。
  5. 可試著更改其他樣式的屬性,如文字大小等。
隨堂作業
  1. 將www資料夾中index.html檔案內的作業六超連結到work_6index.html
  2. 將www資料夾中的index.html存檔並上傳。
建議閱讀
  • 張靜怡,葉俊賢,陳國明 (2003),Dreamweaver MX,台北:文魁。六版。
  • 胡為君譯 (2006),Wogner原著,如何設計好網站,台北:上奇。
  • 鄭巧玉譯 (2006),Wogner原著,如何設計好網站之網頁改造術。台北:上奇。
  • RoseNya, 小包子 (2007),Dreamweaver cs3即效見本,台北:上奇。
  • 視覺系研究菀 (2006),網頁設計部屋,台北:碁峯。

Tuesday, December 09, 2008

頁面編排

目標
觀察網站,熟悉使用者經驗元素中的編排 (skeleton)層。使網頁元素的排列能讓使用者用起來最有效率。。

方法
瀏覽以下超連結內的網站,評析何者的編排最適合你擬要修改的網站
隨堂演練
  1. 開啟Dreamweaver,新增html檔。
  2. 從主選單 >檢視 > 尺規 > 鉤選顯示
  3. 從主選單 >檢視 > 格線 > 鉤選顯示格線
  4. 從主選單 >檢視 > 格線 > 鉤選格線設定...。於對話框內調整間距的數值為10
  5. 點選版面標貼,選APdiv
  6. 在編輯區內畫一矩形。點選它,編輯它,並觀查及編輯區下方的屬性。並試著進行下列的屬性變動:
    1. APdiv的名稱、大小、背景色
    2. 文字的對齊
    3. 文字的超連結
    4. 置入背景圖、插入圖像、圖像的超連結
  7. 儲存檔案。
    下圖是以上述的方法為frogdesign的首頁所做的版面編排。
將APdiv改為表格
div對較早期的瀏覽器可能不適用,所以若要為這些使用者考量,則可將div的程式碼轉換為表格table語法。其作法如下:
  1. 開啟有div的網頁。
  2. 從主選單 >修改 轉換 > 圖層轉換為表格。
    從程式碼觀看程式碼的改變。
  3. 簡化表格。
隨堂作業
  1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容,你須將遠端內容下載)
  2. 在本地端網站的www資料夾內,新增work_5資料夾。
  3. work_5資料夾內新增skeleton.html,其內容係依前述瀏覽優良網站的評析,以APdiv方式排出頁面的間架--像建物的平面圖,每一APdiv插入該區間大小的圖像,並疊上文字。
  4. 儲存skeleton.html,並將它上傳到遠端伺服器。
  5. 將www資料夾中index.html檔案內的作業五超連結到skeleton.html
  6. 將index.html存檔並上傳。
  7. 在瀏覽器測視你的作品。
建議閱讀

  • 張靜怡,葉俊賢,陳國明 (2003),Dreamweaver MX,台北:文魁。六版。
  • 胡為君譯 (2006),Wogner原著,如何設計好網站,台北:上奇。
  • 鄭巧玉譯 (2006),Wogner原著,如何設計好網站之網頁改造術。台北:上奇。
  • RoseNya, 小包子 (2007),Dreamweaver cs3即效見本,台北:上奇。
  • 視覺系研究菀 (2006),網頁設計部屋,台北:碁峯。

Monday, December 01, 2008

網站結構探討

目標
觀察網站,熟悉使用者經驗元素中的策略 (Strategy)層、眼界 (Scope)層、結構 (Structure)層。培養sitemap的建構及網站結構的命名。

方法
瀏覽以下的網站
隨堂作業
  1. 以Dreamweaver連結到你在學校的網站。(假如本地端無內容,你須將遠端內容下載)
  2. 在本地端網站的www資料夾內,新增work_3資料夾。
  3. 依前二公司的網站瀏覽,在work_3資料夾內建立以下二個檔案
    1. sitemap1.html,其內容能一目了然地看到創造力公司Apple公司的網站
      1. 對象是誰? 要提供什麼?
      2. 網站地圖 (另一名稱為網站導覽 )
      3. 網站結構的資料夾命名及各網頁的英文命名。
        註:資料夾的名稱能在瀏覽器的網址欄看到,其原則如下:
        • 在http://右方第一個 / 之後未具.html的英文(和或數字)名為第一層資料夾名稱。
        • 在http://右方第二個 / 之後未具.html的英文(和或數字)名為第二層資料夾名稱,餘再依此類推。
        • 網頁的名稱為有.htm或.html或asp或php副檔名者。
  4. 在本地端網站的www資料夾內,新增work_4資料夾。
    1. sitemap2.html,內容能一目了然地看到你期未作業欲改善的公司的網站
      1. 對象是誰?要提供什麼?
      2. 網站地圖。
      3. 網站結構的資料夾命名及各網頁的英文命名。
      4. 可改善之處何在?
  5. 將前兩個檔案存檔並上傳。
  6. 將www資料夾中index.html檔案中的作業三超連結到work_3資料夾內的sitemap1.html
  7. 將www資料夾中index.html檔案中的作業四超連結到work_4資料夾內的sitemap2.html
  8. 將index.html存檔並上傳。
  9. 在瀏覽器測視你的作品。
建議瀏覽
下周進度
  • 版面編排設計
  • Fireworks軟體應用