進1a 2009

01袁正修 部落格 / 網站
02王寵雅 部落格 / 網站
03楊舒姍 部落格 / 網站
04陳靜怡 部落格 / 網站
05曾美惠 部落格 / 網站
06張嘉芯 部落格 / 網站
07黃瑞琳 部落格 / 網站
09吳俊賢 部落格 / 網站
10張漢嶢 部落格 / 網站
12蔡佳祐 部落格 / 網站
13張婉真 部落格 / 網站
14許智怡 部落格 / 網站
15蔡柏鴻 部落格 / 網站
16楊于正 部落格 / 網站
17陳幸穗 部落格 / 網站
18陳韋利 部落格 / 網站
19林至中 部落格 / 網站
20鄧尊仁 部落格 / 網站
21張德名 部落格 / 網站
22王敏倩 部落格 / 網站
23張慧蓮 部落格 / 網站
24黃靖育 部落格 / 網站
25吳心如 部落格 / 網站
26謝原鈴 部落格 / 網站
27謝佳芳 部落格 / 網站
29林嘉萍 部落格 / 網站
30張永政 部落格 / 網站
31陳瑋玫 部落格 / 網站
32黃鈺婷 部落格 / 網站
33林弘泰 部落格 / 網站
34王俊達 部落格 / 網站

夜二1 2009

01張聖元 部落格 / 網站
02鄭宇傑 部落格 / 網站
03陳愛主 部落格 / 網站
04洪鏑凱 部落格 / 網站
06彭舒婷 部落格 / 網站
08林艾瑩 部落格 / 網站
09張瑜璇 部落格 / 網站
10林信宏 部落格 / 網站
11陳韋琳 部落格 / 網站
12蔡佳諦 部落格 / 網站
13陳治瑋 部落格 / 網站
14詹奕瑩 部落格 / 網站
16曾于真 部落格 / 網站
17陳江銘 部落格 / 網站
18王姿月 部落格 / 網站
19郭文宗 部落格 / 網站
20陳寶蓮 部落格 / 網站
21賴宜儀 部落格 / 網站
22黃如慧 部落格 / 網站
23林鈺婷 部落格 / 網站
25蔡旻修 部落格 / 網站
26侯欣均 部落格 / 網站
27周冠任 部落格 / 網站
28林品妤 部落格 / 網站
29洪頌雅 部落格 / 網站
30徐章通 部落格 / 網站
31吳曉曼 部落格 / 網站
32凌藝芳 部落格 / 網站
33羅伊婷 部落格 / 網站
34梁瓊丹 部落格 / 網站
35陳盈如 部落格 / 網站
36彭儀 部落格 / 網站
37徐家榮 部落格 / 網站

第一堂的願景表白

目標
此後八周，你要建一個有特色的部落格。

作法

1. 在http://www.blogger.com新建你的部落格。
2. 在你的部落格的第一篇寫下該部落格的成立宣言 (構想)--一個你必須信守的承諾。
   
3. 在本欄右下留言板留下你的學號姓名，並留下你新建的網址(最好作成超連結)。

範例

• st6六街-＊手工皮革＊銀飾＊教學
• 偵探研究
  

開懷集/神乎其技

• 五分鐘搞定

期末作業

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

方法

• 依上半學期的分組，各組自選一家企業網站，改善之。改善之道如下：
  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：檢討

網站外觀

目標
觀察網站，熟悉使用者經驗元素中的外觀 (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_6的index.html。
2. 將www資料夾中的index.html存檔並上傳。

建議閱讀

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

頁面編排

目標
觀察網站，熟悉使用者經驗元素中的編排 (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)，網頁設計部屋，台北：碁峯。
  

網站結構探討

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

方法
瀏覽以下的網站

• 創造力公司
• Apple
• frogdesign
  
• zafu
  
• woolworths

隨堂作業

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. 在瀏覽器測視你的作品。

建議瀏覽

• 到Google搜尋sitemap圖片。
• 同學的作業一
• 同學的作業二
• 同學的作業三
  

下周進度

• 版面編排設計
• Fireworks軟體應用
  

網站結構

目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

• 網站地圖 (site map)
• 線性結構
• 層屬結構
  
• 超連結

一、前置作業

1. 開啟Dreamweaver，進入網站管理，連結到遠端資訊。
2. 於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
3. 存檔。
   

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

• 線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
• 實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
• 製作步驟：
  
  1. 在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
  2. 在work_1內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一檔案夾，取名為images。
  6. 將三個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  7. 開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
  8. 為下一篇設超連結，連到入article2.html。
  9. 儲存檔案article1.html。
     
  10. 另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
      1. 為下一篇設超連結，連到入article3.html。
      2. 為上一篇設超連結，連到入article1.html。
  11. 儲存檔案article2.html。
  12. 另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
      1. 將上一篇的超連結連到article2.html。
      儲存檔案article3.html。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

四、層屬結構

• 層屬結構：像書本那樣，一書有數章，每章數節等。
• 實例簡介：利用可任選且具超連結的文字或圖像。
• 製作步驟：
  
  1. 在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
  2. 在work_2資料夾內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一個檔案，取名為article4.html。
  6. 再新增一檔案夾，取名為images。
  7. 將四個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  8. article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。
     
     1. 將第一篇做超連結到article1.html。
     2. 將第二篇做超連結到article2.html。
     3. 將第三篇做超連結到article3.html。
     4. 將第四篇做超連結到article4.html。
  9. 儲存檔案。
  10. 另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
  11. 另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
  12. 另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

五、首頁與內頁超連結

1. 將index.html檔的作業一與work_1內的article1.html連結。
2. 將index.html檔的作業一與work_2內的article2.html連結。
3. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
4. 儲存檔案。
5. 上傳到伺服器。

六、在部落格做超連結

1. 到你的部落格，新增「網站結構」的文章。
2. 於內文寫「我在校方的網站」，將這些字做成超連結，其網址是http://web2.ntit.edu.tw/~sxxxxxxx，此處的xxxxxxx是你的學號。

架網站

目標
在學校伺服器架個人網站

方法
點按右側標籤的「架設網站」。

觀摩

一、同學優良作品

• 之一
  
• 之二
• 之三
• 之四

二、值得借鏡者

• 按鈕猜謎
  使用者會像無頭蒼蠅，撞得頭冒金星。
• 超連結太亂
  瀏覽者會不知身在何處，像在走迷宮。
  
• 各頁五花八門
  瀏覽者很難理解是在瀏覽同一個網站。
  
• 首頁與內頁不搭調
  瀏覽者無法從視覺風格的一致性歸納自己是在看同一作者的網站。
  
• 黑底藍字
  瀏覽者因黑與藍的明度太接近而難以分辨字與底。

期末作業

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

方法

• 依上半學期的分組，各組自選一家企業網站，改善之。改善之道如下：
  1. 提出其可改善之處。
  2. 提出同類型的優良企業網站，供改善參考。
  3. 在部落格記錄每週改善記錄。
  4. 在部落格做改善結果意見調查。

可改善者

• 台中技術學院日間部、進修部、進專及補校的網站

改善實例

• 大煒塑膠工業有限公司
  

期限

1. 11/19~22：主題選定
2. 11/26~29：分析組織架構圖
3. 12/03~06：設計版型
4. 12/10~13：設計版型
5. 12/17~20：初稿
6. 12/24~27：修稿
7. 12/31~06：完稿
8. 01/07~10：檢討

網站類型

目標
了解網路的類型

說明
網路的類型，可以從不同的面向來分類，以下是分類中的二種大分法

類一

• 入口網站
  例：http://www.yahoo.com

• 搜尋網站
  例：http://www.google.com
  

• 社群網站
  例：http://www.facebook.com
  

• 電子商務網站
  例：http://www.zakka.com.tw
  

• 小冊子網站
  例：http://www.thu.edu.tw
  

類二

• 資訊網
  網址尾端有.edu 或 .gov (education or government)
  例： http://www.ntu.edu.tw
  

• 倡導網
  網址尾端有.org (organization)
  例： http://www.greenpeace.org
  

• 企業或行銷網
  網址尾端有.com (commercial)
  例： http://www.adobe.com
  

• 新聞網
  網址尾端有.com (organization)
  例： http://www.cnn.com
  

• 個人網
  網址尾端於.com、 .edu之後會有~
  例： http://web.ntit.edu.tw/~hsieh

使用者經驗元素

目標
介紹網站設計的使用者經驗元素，並觀看實例以理解其內涵。

說明
依據Jesse James Garrett的看法，網站設計使用者經驗元素有五種，係由表層進入到最深層，依序有以下五層：

1. 外觀 (Surface)層：圖、文元素的組合看起來是某一網站類型。
2. 編排 (Skeleton)層：網頁元素的排列能讓使用者用起來最有效率。
3. 結構 (Structure)層：內容的分類讓讀者知道如何去某目的地。
4. 眼界 (Scope)層：使結構層得以完成的功能，例如，網路書店提供與甲書性質相近的書。
5. 策略 (Strategy)層：網主及網友要能該網站取得什麼。

進行設計時，要由下往上建起。

方法

1. 請到Apple網站瀏覽，描述你對該網站的使用者經驗的各層觀點。

建議閱讀

• Jesse James Garrett, The Elements of User Experience. New Riders, 2003.
• http://semanticstudios.com/publications/semantics/000029.php
  
• 優良網站設計的四個原則--對比、重復、對齊及鄰近

隨堂作業

目標
檢討部落格製作；比較部落格與一般網站的差異

方法

在你的學習部落格內描述

1. 半學期來製作個人部落格及分組部落格的收穫與待改進之處，參考以下同學的個人與分組部落格。
   徐文嫻的部落格
   白意婷的部落格
   蔡妙音的部落格
   
   虛實之間 (入選無名網站動漫第20名)
   阿土伯的有機肥
   雪兒好
   小心眼
   
2. 以下兩者的差異
   阿默的生活
   中國攝影
3. 看以下的網站有何感想
   Macannashoe
   

調查

• 完成本部落格右上兩項調查。

參賽消息
研究參加下列比賽的可能性

1. 第六屆育秀杯

2008華文部落格決選名單

2008第四屆全球華文部落格大獎 - 決選入圍名單

• 最佳 生活情報 － Thomas Wine 葡萄酒美食漫談
• 最佳 生活情報 － 努爾古麗
• 最佳 興趣嗜好 － 立體書專門店
• 最佳 藝術文化 － 良牙的純樸記事
• 最佳 藝術文化 － 海洋之心
• 最佳 藝術文化 － Annie's 攝影筆記本
• 最佳 藝術文化 － 古蹟與狗

問題

• 觀覽以上的部落格，將有關寫部落格的啟示有條理地寫入你的學習部落格內。

進專1A發表

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4304室；
發表時間：

• 第1組10:15~10:35
• 第2組10:37~10:57
• 第3組11:05~11:25
• 第4組11:27~11:47

發表日期與貼文篇數
10/25：每組貼文篇數=2x組員人數
11/01：每組貼文篇數=3x組員人數
11/08：每組貼文篇數=4x組員人數

分組編目

• 1 三人成唬
  林佩君 33973008 (組長)
  周雅鈴 33973003
  張英森 33973007
  
  
• 2 虛實之間
  陳昭雯 33973006 (組長)
  嚴姿涵 33973018
  陳逸慈 33973028 (組3)
  
  (興趣嗜好)
  
  
• 3 狗熊一班
  林厚志 33973023(組長)
  _陳逸慈 33973028
  _熊康伶 33973026
  
  
• 4 for nothing
  白意婷 33973039 (組長)
  楊仕鵬 33973034
  曾惠萱 33973031
  (藝術文化)
  
  
• 5 嗖咪咪
  蘇裕雯 33973041
  王郁萍 33973001
  熊康伶 33973026 (組3)
  (音樂說說說)
  
  
• 6 發現Funny
  陳俊利 33973035 (組長)
  吳怡君 33973009
  李季霏 33973010
  陳俊達 33973020
  (藝術文化)
  
  
• 7 波本可樂
  劉亞倫 33973016 (組長)
  吳美瑩 33973014
  辛薏如 33973033
  
  
• 8 八分之四等於二分之ㄧ
  陳盈攸 33973005
  譚昕 33973005
  王智廣 33973017
  
  
• 9 毛毛造造
  胡浩文 33973025
  毛梅蘭 33973030
  周建成 33973038
  (藝術文化)
  
  
• 10 饕掏不嚼
  阮楚蘋 33973012
  廖庭馴 33973015
  黃圓錞 33973015
  邱美秀 33973044
  
  
• 11 人生樂不樂
  黃資華 33973043 (組長)
  楊郁葶 33973029
  陳雪華 33973042
  
  
• 12 阿土伯的有機肥
  洪坤照 33973037 (組長)
  陳巨峰 33973019
  柯豐義 33973022
  

夜二1發表

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4405室；
發表時間：

• 第1組20:35~20:55；
• 第2組20:58~21:18；
• 第3組21:21~21:41；
• 第4組21:44~22:04

發表日期與貼文篇數
10/24：每組貼文篇數=2x組員人數
10/31：每組貼文篇數=3x組員人數
11/07：每組貼文篇數=4x組員人數

分組編目

• 1 角落
  黃俞瑄 24965012(組長)
  倪紀萱 24965025
  邱義盛24965042
  (生活情報組)
  
  
• 2 無名
  李宛蒨 24965049(組長)
  王滋娸 24965043
  陳玟蓉 24965011
  (生活情報組)
  
  
• 3 插畫and亂七八糟的創作
  吳政億(組長)
  劉丞原 24965021
  蔡文欽 24965027
  
  
• 4 Tin Pan Alley流行音樂作曲家和發行人集中區
  林鈺娟 24965048(組長)
  陳思瑩 24951011
  劉雅惠 24952085
  (藝術文化；音樂)
  
  
• 5 雪兒好死share house
  魏德瑀 24965024 (組長)
  徐文嫻 24965002
  張雅君 24965044
  莊宏儀 24965050
  (生活情報；興趣嗜好)
  
  
• 6 Our life, our story
  楊淋元 24965018 (組長)
  賴麗真 24965004
  姚瑋 24965033
  陳宜欣 24965036
  (藝術文化)
  
  
• 7 音樂
  24965014 陳洺頤 (組長)
  24965009 游雅雯
  24965017 許燕婷
  
  
• 8 影音Club
  李瑀潔 24965026 (組長)
  邱家鳳 24965008
  周兆萱 24965028
  
  
• 9 3宅e生
  陳克婷 24965029 (組長)
  蕭文鳳 24965020
  廖英琦 24965037
  (生活情報組)
  
  
• 10 垃圾集中營
  宋義威 24925026
  陳奕縉 24965016
  郭芷融 24965030
  
  
• 林奇震 24965003
  
  
• 蔡芳珍 24965001
  

日三A發表

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4405室；
發表時間：第1組8:20~8:40；第2組8:45~9:05；第3組9:15~9:35；第4組9:40~10:00

發表日期與貼文篇數
10/22：每組貼文篇數=2x組員人數
10/29：每組貼文篇數=3x組員人數
11/05：每組貼文篇數=4x組員人數

分組編目

• 1 孵，藝文
  林語屏13972007 -組長
  陳思澐13972015
  顏 凡 13972039
  

• 2 台中眼
  余桂棻 13972002 組長
  鄂智涵 13972016
  張曉慧 13972009
  

• 3 設界‧介設
  吳季珊 13972003 組長
  許心瑜 13972010
  郭瀞喧 13972011
  

• 4 太陽餅馬戲團
  鹿筱薇 13972034 組長
  黃佳鈴 13972017
  陳佳慧 13972012
  

• 5 Subculture
  彭冠廸 13972035 組長
  黃邦銓 13972037
  李念祖 13972029
  李崇任 13972030
  

• 6 Mix Music
  廖姿婷 13972020 組長
  林于評 13972006
  薛仰玲 13972026
  

• 7 夏克-Shock
  廖泊宜 13972019 組長
  蔡妙音 13972022
  

• 8 Mangekyou
  蔡宛廷 13972023 組長
  余思穎 13972001
  周晏婷 13972005
  

• 9 憋頭
  彭凱盟 13972036 組長
  蔡宗儒 13972038
  陳宛渝 13972013
  鄭詔蓉 13972025
  
  
• 10 MANIA MOVIE MUSIC
  郭郭益言 13972033 組長
  陳玟如 13972014
  
  

意見調查表測試

目標
模擬做一個意見調查

步驟

1. 登入部落格
2. 點按版面設定
3. 點按右上角「新增小工具」，在「意見調查」欄按「+」鈕
4. 在問題欄內鍵入你的問題
5. 在作答欄內鍵入你的答案選項

作業
為你的部落格設計一個問卷調查。

建立部落格的秘訣

目標
觀看其他網客的建言。

國內網站

• 老貓學出版
• 如何經營部落格
• 如何經營成功部落格
• 部落客生涯的省思
• 友善易讀的好日誌
• 寫部落格的努力、毅力與自省
  

國外網站

• designer blog
  
• 2009年Time雜誌選出最優25個部落格
• 2008年Time雜誌選出最優25個部落格
• 部落客初學者秘笈
• 部落客的九門課
  

寫部落格的策略

當部落成為網路世界的一個重要媒體時，企業如何應用，成為重要的課題之一，以下是企業使用部落格的十個基本觀念。

1. 熟悉部落格寫法及由消費者所興起的媒體。
2. 決定部落格是否適用於你的公司。
3. 發展內容策略。
   
4. 找出寫你的部落格的最佳人選。
5. 選擇一個適當的發佈平台。
6. 為搜尋引擎最佳化你的部落格內容。
7. 與網友啟動誠實的對話。
8. 監視部落格氛圍以找到中肯的新聞及點子。
9. 經常寫，保持聚焦，並包含可以增加的中肯連結。
10. 設定寫部落格的政策及寫部落格的指南。

資料來源
http://www.scoutblogging.com/blogs101.html

建議閱讀

• 有效企業部落格策略的七元素
• 部落格主的九門課
• Why We Look at Some Web Ads and Not Others
  

部落格的用色

部落格的用色與網頁設計一樣，其用色目標包括：吸引人、便利閱讀 (分類)、表現該部落格的特質等。

在上述的目標下，顧及瀏覽者在不同的作業系統 (像MAC或PC)瀏覽，不生色偏，以及減低資訊的負荷，所以用到網頁安全色共216色，包含於256色內，讓每一色僅佔一個byte即可。這216色是以RGB各6個色來組合。
RGB每色有256(0到255)可能色值，今從中挑出六個，各色值的十進位及十六進位(有#表示)如下
0 (#0)
51 (#33)
102 (#66)
153 (#99)
204 (#cc)
255 (#ff)
有以上基礎概念，在部落格的範本之幕後程式HTML內，就可以較容易駕御色彩了。
另以下的網站是提供調色的好處所值得一遊。

參考網站

• Chritine的部落格色彩範本

日三a 2008

01余思穎 部落格 / 網站
02余桂棻 部落格 / 網站
03吳季珊 部落格 / 網站
05周晏婷 部落格 / 網站
07林語屏 部落格 / 網站
09張曉慧 部落格 / 網站
10許心瑜 部落格 / 網站
11郭靜暄 部落格 / 網站
12陳佳慧 部落格 / 網站
13陳宛渝 部落格 / 網站
14陳玟如 部落格 / 網站
15陳思澐 部落格 / 網站
16鄂智涵 部落格 / 網站
17黃佳鈴 部落格 / 網站
19廖泊宜 部落格 / 網站
20廖姿婷 部落格 / 網站
22蔡妙音 部落格 / 網站
23蔡宛廷 部落格 / 網站
25鄭詔蓉 部落格 / 網站
26薛仰玲 部落格 / 網站
33郭郭益言 部落格 / 網站
34鹿筱薇 部落格 / 網站

個人部落格格式編修

目標

• 完成個人部落格的版頭圖像的編修
• 分組部落格的主題及內容初製
  
  1. 設計方向
  2. 學習模範--列舉三個部落格
  3. 任務分配及執行
  4. 初試啼聲--本周先架出第一篇分組內容

看看別人

• 2008華文部落格入圍
• 台中技術學院「學生學習部落格」
• 大頭佬的創意森林
• 就醬的營養午餐
• 窩@埔里
• 律師歌手蘇兒真
• Character Design
• 出色的設計師
• 同學的版頭例一
• 雜記寶
• 範例
• 寫部落格救地球
• mr6

分組登錄

請點按右下意見comments

• 填入組員姓名學號，三人一組，一人當組長；
• 標明選定參賽主題；初步構想。

建議流覽

• 第三屆華文部落格優選
• 第四屆全球華文部落格初審入圍
  

好康相報

• 中技部落格設計競賽
• 寫部落格月入五萬元

分組作業說明

• 各組依自訂主題規畫部落格的大方向及執行計畫
• 分組的部落格要設在哪家伺服器，由各組決定。
  各組在留這區內成以<a href="http://xxxxx.xxxx.xxx">該網址標題</a> 的方式做出各組部落格的超連結。
  
• 個人的部落格每周須新增文章，記錄本課程的學習記錄、心得。
  

進專1A學生名單

01廖庭馴 部落格 / 網站
02王郁萍 部落格 / 網站
04周雅鈴 部落格 / 網站
06陳盈攸 部落格 / 網站
07陳昭雯 部落格 / 網站
08張英森 部落格 / 網站
09林佩君 部落格 / 網站
10吳怡君 部落格 / 網站
11李季霏 部落格 / 網站
13阮楚蘋 部落格 / 網站
15吳美瑩 部落格 / 網站
16黃圓錞 部落格 / 網站
17劉亞倫 部落格 / 網站
18王智廣 部落格 / 網站
19嚴姿涵 部落格 / 網站
20陳巨峰 部落格 / 網站
21陳俊達 部落格 / 網站
23柯義豐 部落格 / 網站
24林厚志 部落格 / 網站
26胡浩文 部落格 / 網站
27熊康伶 部落格 / 網站
29陳逸慈 部落格 / 網站
30楊郁葶 部落格 / 網站
31毛梅蘭 部落格 / 網站
32曾惠萱 部落格 / 網站
33譚昕 部落格 / 網站
34辛薏如 部落格 / 網站
35楊仕鵬 部落格 / 網站
36陳俊利 部落格 / 網站
38洪坤照 部落格 / 網站
40白意婷 部落格 / 網站
42蘇裕雯 部落格 / 網站
43陳雪華 部落格 / 網站
44黃資華 部落格 / 網站
45邱美秀 部落格 / 網站

夜二1 2008

01宋義威 部落格 / 網站
02陳思瑩 部落格 / 網站
04蔡芳珍 部落格 / 網站
05徐文嫻 部落格 / 網站
06林奇震 部落格 / 網站
07賴麗真 部落格 / 網站
08邱家鳳 部落格 / 網站
09游雅雯 部落格 / 網站
10陳玟蓉 部落格 / 網站
11黃俞瑄 部落格 / 網站
12吳政億 部落格 / 網站
13陳洺頤 部落格 / 網站
14陳奕縉 部落格 / 網站
15許燕婷 部落格 / 網站
16楊淋元 部落格 / 網站
17蕭文鳳 部落格 / 網站
18劉丞原 部落格 / 網站
19魏德瑀 部落格 / 網站
20倪紀萱 部落格 / 網站
21李瑀潔 部落格 / 網站
22蔡文欽 部落格 / 網站
23周兆萱 部落格 / 網站
24陳克婷 部落格 / 網站
25郭芷融 部落格 / 網站
28姚　瑋 部落格 / 網站
29陳宜欣 部落格 / 網站
30廖英琦 部落格 / 網站
31林禹陵 部落格 / 網站
32邱義盛 部落格 / 網站
33王滋娸 部落格 / 網站
34張雅君 部落格 / 網站
35江婕瑜 部落格 / 網站
36林鈺娟 部落格 / 網站
37李宛蒨 部落格 / 網站
38莊宏儀 部落格 / 網站

部落格建構

本部落格分享分為以下三個單元

• 趨勢簡述
• 架設實務
• 管理重點
  

一、趨勢簡述
行銷的工具之一部落格。為理解部落格的可能應用途，請先瀏覽以下的部落格

• Blog創意演化
  
• 黑色蛋塔
• 彎彎
  
• 女王
• 上山採藥
• 他踢的
• similarity-blog
• edublog
• 阿孝札記
• 大餅
• 就醫的部落格
  
• 雜序寶
• Annie's攝影筆記本
• 狐窩在埔里
  

以上的部落格是由個別的部落客所經營，其內容可能每日更新，也可能想到才更新，或依需要而更新，這些部落格的共同特點是它允許瀏覽者貼上意見，與格主互動或其覽客互動。
每一部落格會有一個網址，一如您瀏覽其他的網站。這個網址代表一部伺服器，它滿足國際網路協定的要求。

二、架設實務
現在您準備要擁有自己的部落格，您不必花錢，也不必留下重要的人身資料等，一般程序如下：

(一)、找到能架部落格的網站，加入會員。

• 國內
  到指定網址，從點按「加入會員」開始，依指示進行。
  Yahoo
  無名小站
  中華電信
  痞客邦
  
  
• 國外
  方法與國內類似
  http://www.blogger.com/
• http://edublogs.org/
  

(二)、在Google轄下的blogger架設部落格。
在該網站架設自己的部落格只要三個重點程序：

1. 建立帳戶
2. 命名您的 blog
3. 選擇範本

(三)、瀏覽部落格並記住其網址
您必須記住自己的部落格網址，一如記自家的電話號碼。例如，您要記的是
http://3dxxxxxx.blogspot.com (xxxxxx是你的學號像是32999999或129333333，見 實例 )

(四)、登入部落格
每一次要新增文章或編輯舊文章或新增部落格，您必須進行登入的工作，做法同新建部落格一樣。

1. http://www.blogger.com
2. 在下圖登入欄左欄鍵入您的電子信箱，右欄鍵入您的密碼，再按「登入」鈕，即可進入您的部落格的主頁。
   

(五)、新增文章、上傳圖片、影片及超連結

• 新增文章
  從.doc檔拷貝內文，先貼入記事本使成為純文字，再拷貝該純文字，貼入部落格的文字編輯區。
  
• 上傳圖片
  直接傳手邊的圖片--RGB模式下的GIF、JPG、PNG格式。
  直接傳網站上的圖片--
• 上傳影片--AVI、MOV等
• 超連結

(六)、變更設定
接下來，您有必要進入「設定」中的「格式」選項中完成下列的細項。完成更改之後，按頁面下方的「儲存設定」，再點按頁面上方「重新發佈」。
其次，您可能需要更改下列的設定：

• Blogspot的地址，方法是進入「設定」中的「發佈」選項，於blogspot地址欄更改您的網址。更改之後，按頁面下方的「儲存設定」，再點按頁面上方「重新發佈」。
• 意見的設定，方法是
  
  1. 進入「設定」中的「意見」選項。
  2. 於「誰能發表意見」欄內去選擇，當您選取任何人時，表示您完全開放給瀏覽者。更改之後，按頁面下方的「儲存設定」，再點按頁面上方「重新發佈」。

• 放大頭照的方法
  
  1. 先在您的文章內張貼一張您的大頭照(70x82pixel)，檔案須小於5k。發佈之後，進入修改，點按編寫欄的右上之「作改Html」，以檢視該圖片的位址。
  2. 選取該位址，其html語法類似：
     http://photos1.blogger.com/blogger/7622/3832/200/profile.jpg
     複製之。
  3. 進入檢視blog，於右上角 About下方點按 「View my Complete profile 」。
  4. 點按左上的Edit your profie鈕。
  5. 在相片URL右側的文字欄貼，貼上該位址。
  6. 點按最下方的「儲存簡介」。
  7. 進入修改文章模式，將步驟1中的大頭照刪除。

您也可以試著更改範本。不同的範本會有不同的風格，選一種和您最麻吉的。
要修改已張貼的文件，要先點按「張貼」再點按「修改」。
修改完之後一定要按最下方的「發佈文章」。

三、管理重點
您可能新開一門課，想要增加部落格或有一篇文章要隱藏或刪除，這就需要加以管理，以下僅就下列數項做介紹。

• 增刪部落格
• 增刪文章
• 隱藏文章
• 進階編輯

四、同學用Blogger架設的部落格

• 徐文嫻
• 白意婷
  

圖像上傳

上傳到部落格的圖像以GIF、JPG為主。
上傳的圖像來源可以用以下二種：

• 指定本地端的圖源
• 指定網路上的圖源

在此介紹第二種，該圖像是以第一種方法上傳之後，再找出它的網址的，以下是一個圖源的網址。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivoIHJNuF2ztECIqNg6guAy1RV8OWW_qtmaaDtBwtiwq6q7DBRRQIzI7Uidw889q87f_i4txUO9NN0uWHQIQOvNNr0sK4_Mfx0pNydbFCptXKRW8OFmjtPT_o4KRofhz28XF5WTQ/s1600/header-01.gif

檢驗它是否真實的方法就是將上述的字串複製，再貼入瀏覽器的網址內，按Enter鍵，看是否有一張圖。

部落格的文字處理

部落格的文字可以進行以下的處理：

• 直接在編輯區內；
• 從其他文件複製，再貼入編輯區內。

進行上述的第二項的作法時，最好完成以下的步驟：

1. 選取欲複製的文字，將複製原文字，
2. 電腦螢幕左下角→所有程式→ 附屬應用程式→記事本
3. 再貼到《記事本》軟體的文件內，做適當的編輯。
4. 複製上一步驟的文字。
5. 貼到部落格的編輯區內。
   

練習

1. 點按以下的網址

http://www.books.com.tw/exep/prod/booksfile.php?item=0010397400利用上述的方法編輯出如下圖的文字，請點按該圖以利瀏覽。

教學進度

• 上半學期由同學分組建構一個可參賽全球華文部落格大獎
  要設在哪一個伺服器未限定。
  
• 下半學期由同學分組以建構一商業網站為主。
• 個人在websxxxxxx.blogspot.com落格記錄一學期的學習心得及資訊分享

以下的o9/20^21代表9月20是或21日。

1. 09/10^12 概論，blog架設，分組完成
2. 09/17^19 個人網站架設-http://web2.ntit.edu.tw/~sxxxxxxxxxxx/
   
3. 09/24^26 blog的文字處理
   
4. 10/01^03 圖像處理
5. 10/08^10 html
   
6. 10/15^17 多媒體物件的搭配
7. 10/22^24 發表
   
8. 10/29^31 發表
   
9. 11/05^07 期中作業--分組參賽部落格
10. 11/12^14 網站內容架構
11. 11/19^21 文字處理；文字型網頁的架設；表格圖像處理
12. 11/26^28 網頁的色彩計劃
13. 12/03^05 多媒體物件的搭配。
14. 12/10^12 樣版的建立與套用
15. 12/17^19 CSS樣式表
16. 12/24^26 發表
17. 12/31^02 發表
18. 01/07^09 期末作業評核﹣﹣商業網站設計或改造
    範例
    改善前：http://www.asystem.com.tw
    改善後：http://web2.ntit.edu.tw/~s23955014/asystem/

網頁的配色

色彩在網頁設計上與平面設計有雷同之處，以下的網站可供參可：

• http//blog.yam.com/ad42/article/15268724

部落格人氣大增法

想部落格超人氣，且看

• 超級部落格人氣大增不傳心法
• 延伸閱讀
  

延伸閱讀

• 部落格經不經營

• 全球華文部落格大獎

部落洛行銷五大秘訣

部落格行銷已是重要的行銷工具，使用該工具有以下五大秘訣：

• 建立個性：不要讓你的部落格一板一眼，而是發出你的聲音，使你的部落格有個性。
• 貼文要有一致性：至少一周一次，最好是隔天一次。
• 保持簡單：簡單就是力量，貼文不在長，而是要貼有趣的。
• 允許發表意見
• 注意標題名稱：好的標題名稱會引起注意，會增加點閱流量。而且好的標題會是網路搜尋的焦點目標。

相關子題

• 網路搜尋最佳化 (Search Engine Optimization)
  

FTP的作法

目標
以FTP管理你的網站

方法
一、使用

1. 點按電腦桌面上的我的電腦。
2. 於視窗的網址區輸入如下之網址。
3. 輸入使用者名稱及密碼。

接著，遠端站台上的檔案夾及檔案會出現，你可為它編輯，或將本地端電腦上的檔案拖拉放到遠端的資料夾內。

二、利用FileZilla

1. 啟動Filezilla。(免費下載的FileZilla)
2. 將下圖 (可點按放大) 的紅色框由左而右執行。
3. 將左下近端站台的swf檔拖拉放到右下欄遠端站台指定的檔案夾內。

期未作業優選

優選榜單

設三A

• 杜靜宜
• 邱魏蕙
• 蘇郁淳
  
• 張勝智
  
• 陳其達
• 盧翔瑋

設三１

• 黃淑雯
• 鄭嘉惠

夜設三A

• 胡埔璿
• 莊薇瑧
• 曾偉玲
  

突破10MB網站空間的限制

部份同學發現學校給的網站空間10MB不夠容納一學期的作業使用，針對該問題，可進行以下的處置：

1. 完成前一欄【節約與簡單化】所描述的節約作法。
2. 檢查近端的資料夾內，凡副檔名為psd、png、fla、doc者，全數剪下，再貼到不是網站用的資料夾內備存。
3. 將瘦身過的網站上傳，蓋過原先的網站。或者先刪掉遠端的www資料夾，再將近端的www資料夾拖拉放到遠端。
4. 再次檢查遠端的www資料夾內是否仍有副檔名為psd、png、fla、doc者，若有，重復前二步驟。

節約與簡單化

設計網站時，「節約」是一項很重要的習慣。此處的節約是以不改變網站內容品質的前提下，讓檔案最小化。

網頁的節約原則
任何頁面檔案變大，一定會增加上傳及下載時間。若一個網路有50頁，每頁檔案大小多50k，整個網站就增加2.5MB，以一秒傳100k，就要多耗25秒。
一般人很難忍受六秒內看不到頁面，若你的頁面檔案太大而讓瀏覽者跳離，那會是你的損失，可能損失一筆大生意。因此，你必須謹守以下的節約原則：

• 省掉不必要的圖像。
• 可以利用底色處，就不要用同色彩的圖檔。
• 任何圖檔均在Photoshop或Fireworks完成為網路用，能壓縮儘量壓縮。
• 不要在Dreamweaver內對圖檔做縮小或放大。
• 文字要精簡扼要。
• 想想一大圖，若將它的長寬縮小為90%，則它的檔案大小可以變為原來的81%；縮小為80%則變為原來的64%，節約相當可觀。

簡單化
讓網站管理簡單化是另一類的節約，因為它可以節省許多精力。以下是簡單化的方法：

• 圖檔尺寸類型化。例如，整個網站的圖檔大小只有四種大小，第一種是主圖、第二及第三種是次圖、第四種是按鈕。
• 圖像處理可善用Photoshop的批次管理。
  
• 文字的管理CSS化，利用CSS可以有效管理文字字型及色彩等樣型的變化。
• 資料分類系統化，資料夾的命名可以結合流水號及功用名稱。
  

網路行銷之網頁設計10大秘訣

網頁設計的目的之一是行銷，而欲達此目的的秘訣有十，簡列如下：

1. 文字說明要清楚（Clear Writing）
2. 要包含連結（Include Links）
3. 要縮小圖片（Make Graphics Small）
4. 提供免費工具（Free Tools are Available）
5. 內容具說服力（Be Persuasive）
6. 多用文字少用圖（Use Text More Than Images）
7. 內容有組織（Organization）
8. 包含有價值的資訊（Include Valuable Information）
9. 聚焦在預期客戶的需求（Focus on Prospective Client's Needs）
10. 與其他網站交換橫幅廣告（Banner Exchanges）

資料來源http://website-design.themesite.info/

Meta標籤應用

在head標籤內，除了可以設style標籤之外，也可以設meta標籤，而在meta標籤的內容及用途常有下列二種：

• 頁面更換

假設你有三個頁面，檔名分別為index.htm;index1.html;index2.html,要換每格10秒換一次，則在Meta內：
第一個網頁(index.html)之<meta>標籤
<meta http-equiv="refresh" content=10;URL="index1.html">

第二個網頁(index1.html)之<meta>標籤
<meta http-equiv="refresh" content=10;URL="index2.html">

第三個網頁(index2.html)之<meta>標籤
<meta http-equiv="refresh" content=10;URL="index.html">

參考網站：http://web.ntit.edu.tw/~hsieh/meta/

• 增加網站、部落格的知名度

當你設計好網站或部落格之後，就要設法增加它的知名度，方法之一是刊登在在平面軟體如雜誌或名片上。另外，你可以在網站的head標籤內利用meta name="description"及meta name="keywords"來完成。
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="description" content="這是愛書人的雜記">
<meta name="keywords" content="謝寶泰、雜記">
一般要注意

1. <meta name="description" content="xxxxxxxxxxxx">此處的xxxxxxxxxxxx以二十個字描述網站的內容
2. <meta name="keywords" content=" yyyyyyyyyyyyy">此處的yyyyyyyyyyyyy代表總數少於二十字的關鍵字

css入門

CSS概述
CSS是Cascading Style Sheet的縮寫，中譯為樣式表。它是一組樣式的集合，功能是要讓網站頁面的設計能結構化、經濟化及美觀化。
樣式可以是網頁內部的，也可以是外部的。前者適用於單一頁面，後者適用於整個網站﹣﹣先設好一個.css檔，網頁再連結該.css檔。

網站設計的必備能力之一是善用CSS，以下的網站是值得一覽：

• http://www.csszengarden.com/
• http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/
  
• http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm
• http://www.w3schools.com/css/
• http://www.sitepoint.com/books/cssant1/
• http://www.photoshopcafe.com/tutorials.htm
• http://www.greenmaven.com/
• http://www.zafu.com
• http://www.adobe.com/devnet/dreamweaver/
• 用CSS及Photoshop做網頁粗稿http://alistapart.com/articles/quickcssmockupswithphotoshop
• 在xuite修改CSS
• CSS一招半式
  

建議閱讀

• 賴虹燕譯，Web CSS網頁樣式設計學 ，台北：博碩，200x年。
• 黃聰明，CSS版面樣式設計實務，台北：文魁，200x年。
• 碼上就用CSS，台北：上奇，，200x年。
• 胡為君譯，CSS網頁設計手扎，101個您一定會遇到的問題與解答。台北：上奇，200x年。
• 胡為君譯，The Zen of CSS-網頁視覺設計の王道，台北：上奇，200x年。
• 王煦淳譯，WebLayout設計的美學, 台北：旗標，2006。
  

日三A期末作業說明

目標
以本學期所學做以下兩者之一

• 為既有的公司改善其網站
• 為一家中小企業建立網站

同學請於12月24-28日那一周須提出設計對象或方向。

製作程序

1. 找到你認為可以修改的網站甲。
2. 仔細瀏覽並列出其可改善的部份。
3. 找到該網站的同業，找到你認為最好的網站乙。
4. 列出網站乙的優點。
5. 為網站甲規畫出版型A及B，與同學檢討，修改為C。
6. 以C的版型，陸續將網站甲修改完成。
7. 將完成的作品上傳到學校的個人網站的「final」資料夾內。
8. 從你的個人網站首頁加入以下兩項
   「擬改善之網站」六個字，並超連結到該網站。
   「期末作業」四個字，將它超連結到上一程序的首頁。

宣告被修改網站

• 請在本欄右下意見欄內留下你要修改之網站的網址。
• 在你的部落格期末作業欄，完成上述製作程序的詳實紀錄。
  

日三1期末作業說明

目標
以本學期所學做以下兩者之一

• 為既有的公司改善其網站
• 為一家中小企業建立網站

同學請於12月24-28日那一周須提出設計對象或方向。

製作程序

1. 找到你認為可以修改的網站甲。
2. 仔細瀏覽並列出其可改善的部份。
3. 找到該網站的同業，找到你認為最好的網站乙。
4. 列出網站乙的優點。
5. 為網站甲規畫出版型A及B，與同學檢討，修改為C。
6. 以C的版型，陸續將網站甲修改完成。
7. 將完成的作品上傳到學校的個人網站的「final」資料夾內。
8. 從你的個人網站首頁加入以下兩項
   「擬改善網站」六個字，並超連結到該網站。
   「期末作業」四個字，將它超連結到上一程序的首頁。

宣告被修改網站

• 請在本欄右下意見欄內留下你要修改之網站的網址。
• 在你的部落格期末作業欄，完成上述製作程序的詳實紀錄。

夜三A期末作業說明

目標
以本學期所學做以下兩者之一

• 為既有的公司改善其網站
• 為一家中小企業建立網站

同學請於12月24-28日那一周須提出設計對象或方向。

製作程序

1. 找到你認為可以修改的網站甲。
2. 仔細瀏覽並列出其可改善的部份。
3. 找到該網站的同業，找到你認為最好的網站乙。
4. 列出網站乙的優點。
5. 為網站甲規畫出版型A及B，與同學檢討，修改為C。
6. 以C的版型，陸續將網站甲修改完成。
7. 將完成的作品上傳到學校的個人網站的「final」資料夾內。
8. 從你的個人網站首頁加入以下兩項
   「擬改善之網站」六個字，並超連結到該網站。
   「期末作業」四個字，將它超連結到上一程序的首頁。

宣告被修改網站

• 請在本欄右下意見欄內留下你要修改之網站的網址。
• 在你的部落格期末作業欄，完成上述製作程序的詳實紀錄。

行動影音參賽作品上傳

將你參加行動影音的作品以work08.html一併上傳到學校的個人網站，它能由你的首頁之「作業八」超連結而得。

編故事之法--巧合

編故事，有很多種方法，其中之一是「無巧不成書」，此處的巧可做巧妙解，而巧妙又可由巧合來組成。例如：

甲：「何謂『巧合』？」
乙：「我正想問你？」

上述甲乙的問答實在很「巧」，問者揭開主題序幕，答者雖沒有給真正的答案，但卻契合問題的答案，真正的答案竟然是兩人問答的情境本身。這就是巧。這樣的巧，可以由時間、事理的巧合來完成。上述甲乙的問答，兩人同時有相同的問題，是時間的「巧」，而他們的問題本身與脈絡結合就是事理的「巧」。
這樣的巧，雖帶有不可預期性，但不可否認地，它稱得上是一種創意。

根據上述的推論，以下這則「十五貫」的故事，稱得上夠有創意了。
南宋，臨安有位先生名叫劉貴，她的妻子是王氏，妾是陳氏。
有一天，劉貴帶妻子向岳父拜壽。岳父看女婿很窮，給十五貫錢營生去。女兒要留住娘家幾天，劉貴就先回家。途中遇好友，喝醉酒後才返家，妾看他身上有錢，問原由。劉貴開玩笑說：「我因太窮，不能養活全家，所以已經把你賣給人了，這就是賣得的錢，明天就把妳送過去。」說完，就呼呼睡著了。
妾想告知父母這件事，就到鄰居朱三家，說被賣一事，所以請求借宿一夜，隔天早晨才回父母家。但這一晚，劉貴醉睡中，小偷潛入，劉貴驚覺，爬起來追賊，小偷看地下有一把斧頭，就拾起斧頭殺了劉貴，把十五貫錢全偷走。
第二天早晨，鄰居看劉貴很久沒開門，進入探視，看到劉貴死狀。朱三就說出劉貴的妾借宿之事，之後大家一起追尋。
陳氏返父母家途中，在一樹下休息。這時，到城裡賣絲的崔寧，身上帶著十五貫錢，也在樹下休息。
追陳氏的人見狀，將兩人帶到官府，判妾與有崔有奸情因而殺人、盗錢，砍首示眾。
陳貴的妻子王氏為丈夫守喪三年後，她的父親因王家太窮，就派人接她回娘家。返家途中，入樹林避雨，卻被強盗擄獲，成了押寨夫人。
強盗無意間說，數年前曾當小偷，殺了主人偷了十五貫錢。
王氏知殺死丈夫的兇手就是這位強盗，趁機到臨安府告狀，整件凶案才真相大白。強盗被判斬首，家當全抄，一半給王氏。

解析這個故事，可以發現它有以下五巧：

1. 劉貴途中遇好友，喝醉酒後才返家。酒話賣妾，嚇得陳氏要逃走。
2. 陳氏離家之際，小偷上門，要偷錢。
3. 劉貴驚覺，爬起來追賊，小偷看地下有一把斧頭，就拾起斧頭殺了劉貴。
4. 陳氏於返父母家的半途在樹下休息。與城裡賣絲的崔寧，身上帶著十五貫錢，也在樹下休息，因而被誤為兩人有奸
5. 王氏返娘家途中，入樹林避雨，卻被強盗擄獲，而強盗就是當年的殺夫凶手。

從「無巧不成書」的觀點以及「十五貫」的故事之具有五個巧合，我們可以肯定巧合所衍生的創意，你在編故事時，可以適當利用這個方法。

Flsah入門

比賽資訊：
請各位同學努力參加「行動影音創作」比賽，網址是www.vcard.com.tw

Flash的製作，應先把故事想好，再依劇情及條件來完成之。
本練習之劇情設為：雨點散落，入盆漸盈，飛卡忽降，激氣上飄。

範例

• 學生作品

步驟
一、設好影片屬性 (320X240, 24fps)
二、Flash的動畫作法

• 逐格法 (例：雨滴落盆、濺出水花、積成灘水)
  
  1. 在空白影格畫一圖形。
  2. 啟動描圖紙功能。
     
  3. 插入空白關鍵影格，並以前一圖形為底稿，畫另一圖形。
  4. 重復前一步驟，迄任務為止。
     
  
  
• 移動補間法 (例：卡片掉落)
  
  1. 先建元件圖形。
  2. 先置入一空白關鍵影格，置入元件，使成為關鍵影格。
  3. 於不相鄰的影格插入關鍵影格。
  4. 將這兩關鍵影格的登台演員做縮放、移位及旋轉等轉變。
  5. 於上二關鍵影格之間的居間影格設移動補間。
• 形狀補間法 (例：汽泡上升)
  
  1. 在一空白關鍵影格上，畫出一圖形，該影格即成為關鍵影格。
  2. 於與上一關鍵影格不相鄰的影格插入空白關鍵影格，畫出不同的圖形，此一空白關鍵影格亦成為關鍵影格。
  3. 於前二關鍵影格之居間影格設形狀補間。

三、加入音效

可參考網站

• http://www.flashperfection.com/

快捷鍵

• Ctrl+Enter：測試影片
• f5 ：插入影格
• Shift+f5：刪除影格
  

課後作業

• 為行動影音設計參賽作品，完成時間為11月14日，課堂評核成績。
• 在你的網站之www資料夾內新增swf資料夾，在Dreamweaver內新增網頁，將上述的shockwave檔插入，取名為work07.html，存入swf資料夾。
  
• 到你的網站的www資料夾內，於index.html檔內加入文字「作業七」，將「作業七」超連結到上一步驟的work07.html。

期中作業檢討

從同學相互檢討可以得出以下可資學習或借鏡者

一、優良作品

• 之一
  
• 之二
• 之三
• 之四
• 之五
• 之六

二、值得借鏡者

• 按鈕猜謎
  使用者會像無頭蒼蠅，撞得滿頭冒金星。
• 超連結太亂
  瀏覽者會不知身在何處，像在迷宮內。
  
• 各頁五花八門
  瀏覽者很難理解自己是在瀏覽同一個網站。
  
• 首頁與內頁不搭調
  瀏覽者無法從視覺風格的一致性歸納自己是在看同一作者的網站。
  
• 黑底藍字
  瀏覽者因黑與藍的明太接近而難以分辨字與底。

個人網站檢討

為了解你自己製作的網站之優缺點，請你完成以下的工作

1. 新增網路傳播設計的部落格。格址是webxxxxxxxx (xxxxxxxx代表學號)。
2. 做個超連結到你的網站。
   
3. 找兩位同學三人一組共同檢討。
4. 將檢討的結果貼上，並內容包括優點篇、待改善篇、能力續增編等。
5. 看同學的檢討：http://namentit.blogspot.com
   

夜三A網路傳播期中心得與意見

請點按右下的Comments提出迄期中作業止，在學習本課程的心得或意見。

日三A期中作業心得與建議

請點按右下的Comments提出迄期中作業止，在學習本課程的心得或意見。

期中作業續說

你的期中作業須於期中考周內的上課日完成。

• 在www資料夾內，新增一個資料夾，取名為midwork，將你的期中作業存在該資料夾內。
• 你需在www資料夾的index.html檔案加入「作業六」，將「作業六」將超連結到你的期中作業。
• 首頁要能讓瀏覽者知道網站的主題。
  
• 各頁面的標題記得要鍵入，不可出現「無標題文件」。
• 注意圖片，不要在Dreamweaver做任何縮放。換言之，圖片最好在Photoshop或Fireworks完成瀏覽的大小。
• 按鈕不可用Flash製作。
• 頁面的大小寬度以760為主，高度可依需要調大。
• 各頁面間要有同一網站的統一感。
• 要讓瀏覽者知道身在網站的那一個位置。

背景透明的GIF

網頁或部落格中，要讓某一圖像的背景透明的方法是將該圖像之背景去除成透明狀，再存成GIF。
作法：

1. 以Photoshop開啟圖檔，例如開啟鴨子，它的背景是白色的。
2. 在編輯→偏好設定→透明和色域，讓透明設定為灰白交錯的格子。
   
3. 於圖層視窗內複製一圖層。
4. 用放大鏡及選取工具，選取該圖之背景，盡可能將選取範圍接近清淅的界線。
5. 按Delete鍵將選取區去掉，會出現透明狀--有灰白交錯的格子。
6. 將原始圖層隱藏以觀看去背的結果。
7. 滿意之後，檔案→存為網頁用，選用Gif格式，及透明設定如上圖右。
8. 在Dreamweaver內置入圖形。
   

夜三A隨堂作業

今天的作業有三項

一、具按鈕功能的首頁

1. 將你上周在www資料夾之「fw-button」資料夾所完成的jpg檔，以Fireworks做成具按鈕的功能，其首頁取名為index.html。

二、修改文字式首頁

1. 回到www資料夾內，開啟index.html檔，新增「作業五」，超連結到fw-button資料夾內的index.html。
2. 儲存檔案。
3. 上傳。

三、到http://namentit.blogspot.com/去看你自己的作品。

補充
按鈕是重要的操介面，設計之原則是簡單易用，不宜耍花招，否則徒增喧賓奪主之嫌。

畫面分割﹣--Fireworks入門

目標：臨摩以Fireworks做一網頁及其分割與超連結的的用法。

Fireworks是為製作網頁編排而結合點陣式軟體與向量式軟體於一身的編輯器。此軟體方便對網頁編排中的圖像做分割以利傳輸，同時具有製作按鈕及動畫的功能。它與Dreamweaver及Flash是目前製作網頁的三大要角。

步驟：
一、預想圖
網頁的版面及內容（可以徒手畫概念圖，或直接在畫圖軟體內完成。）

二、開啟新檔，設頁大小。
對於800x600大小的螢幕，扣除瀏覽器的外框及圖示，真正可以置放內容的空間為760x420。

三、匯入圖像
圖像可以是點陣圖和∕或向量圖。在點陣式軟體如Photoshop或向量軟體如Illustrator或Freehand或CorelDraw做好圖片檔案，存成PNG檔案格式或JPEG檔。
然後在Fireworks選「檔案File」 > 「讀入Import」，匯入所需的圖像檔案。以箭頭工具做好圖像的編排。

四、使用繪圖工具

1. 影像工具
   以箭頭工具點按影像圖二下即可進入影像編輯模式。此時作業視窗下緣的「Exit Image Edit Mode」會呈紅色實彩，點按之即可切換到向量工具模式，此時該「Exit Image Edit Mode」圖示會變成半實彩狀態。
2. 向量工具
   如畫矩形、橢圓及具茲曲線等。
3. 使用上三項模式時，可用到Stroke，Fill及Effect等功能來增加圖像的特效。例如：利用「實心(Fill)」及「效果(Effect)」等功能，一圓形變成一凸起的圓鈕；或一矩形變成有底紋的按鈕。

五、製作按鈕（button)

1. 以向量工具（如圓或矩形）畫一按鈕外形。
2. 點選上一步驟之向量圖形，選擇編輯 > 拷貝。
3. 選擇視窗 > 圖庫，於右側的圖庫標貼右方點按新增元件。
4. 於對話框內選「按鈕」。
   
5. 在按鈕編輯器內修改，按Crtl+V，貼上前述的按鈕外形。
6. 選擇視窗>對齊。並選用水平及垂直對齊。
7. 選用文字工具，在按鈕框上鍵入一文字區塊，並鍵入文字。
8. 選擇視窗>對齊。並選用水平及垂直對齊。
9. 點選「滑過(Over)」標頭，點按視窗下方的「拷貝一般圖像」。
10. 點選「按下」標頭，點按視窗下方的「拷貝滑過圖像」。
11. 點選「按下後滑過」標頭，點按視窗下方的「拷貝按下圖像」。
12. 點選「作用區域」標頭，點按視窗下方的「拷貝按下圖像」。
13. 改變「滑過」標頭內之圖像的外框與內填色彩。
14. 改變「Down」標頭內之圖像的外框與內填色彩。
15. 關閉Button編輯器。
16. 將作業區的充當按鈕參考用的矩形框刪除。
17. 從元件庫(圖庫)將做好的按鈕，移入作業區
18. 在屬性區鍵入超連結如http://cd.ntit.edu.tw。
    

六、複製按鈕

1. 按住Alt鍵（Windows）或Option鍵（Machintosh），把前一按鈕下拉複製之。
2. 點按個別按鈕，在屬性區更改文字及超連結。

補充
URL分絕對URL與相對URL兩種，前者是完完整整標示出如
http: //www.cd.ntit.edu.tw/news/01.html。
而相對URL表示該URL與當下使用的html之間的相對位址關係。
檔名.htm是指在同一個資料夾內。
./../file.htm是在往上二階的資料夾內的檔案。
htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。
七、圖片作成分割

八、圖像最佳化
Fireworks讓你的文件的各個部份最佳化。每一文件有內定的最佳化設定，但你能夠將文件中的個別區域最佳化。例如文件中只有二個區域是用JPG格式，而其餘的用GIF格式。
首先，確認要為該文件最佳化的設定，它們是為文件中未在分割物件之下的圖像而設的。

1. 選擇編輯> Deselect棄選所有的物件。
2. 現出Optimize面板。
3. 確定GIF WebSnap 128是面板內之Settings彈現式選單內的選項。
   現在你將在咖啡杯上製作一個分割。
4. 用工具列中的指位器點按咖啡杯圖像，並選擇Insert > Slice。Fireworks製作出分割物件，它與所選取的物件同樣尺寸。
5. 從Optimize面板上之Settings彈現式選單選擇JPEG - Smaller File。
6. 點按作業區上的2-Up活頁標籤。必要的适，選取Hand工具，並在左方拖移，如此你可以看到咖咖杯。
   Fireworks展出文件的兩種版本。左方是原始圖像，右方是最佳化的版本。當你改變原始檔時，Fireworks會即時更新最佳化的圖像。若Web物件（hotspot及slice）被展出，則選取在左方的分割將會使其他的圖像褪色，讓你聚焦在最佳化的受選分割。
7. 在咖啡杯被選取的情況下，對Optimize面板的最佳化設定做修改，並注意這些修改能夠對右方的圖像改變到什麼情況。
8. 存檔

補充：
在Fireworks將圖像最佳化涉及三項工作

* 選擇最好的格式（format）：各種格式有不同的壓縮色彩方式，為特定類型的圖像選擇合適的格式可以大幅降低圖像檔的大小。
* 設定專屬格式選項：每一網頁檔案格式具有特定的選項以控制圖像的壓縮。例如，對GIF圖檔使用遞色（dither）就可以把較少色彩的圖像做點補償。對JPEG圖檔採用平順（smooth）方式即可讓圖像輕微模糊，如此將使該圖像在壓縮時減低檔案的大小。
* 調整圖像的色彩：把圖像的色彩設限在色盤內所指定的一群色彩，然後把色盤內未用到的色彩刪掉。色盤內的色彩越少表示該圖像用較少的色彩，這會使該圖像的檔案變得更小。減少色彩數量會降低圖像的品質，因此必須試試不同的色盤以找出圖像品質與圖檔大小間的最佳平衡。

在作業區內將圖像最佳化的方法有三種：
* 在Optimize面板（Window > Optimize）內有許多讓圖像最佳化的關鍵控制。
* 現用色盤呈現Color Table面板。
* Preview視窗會表現出轉存的圖像的樣子。

選擇預先設好的最佳化

九、輸出圖像、HTML 及JavaScript


當你轉存（export）你的文件時， Fireworks為所有的分割轉存為個別的檔案。它也同時產生在瀏覽器所需的所有的HTML及JavaScript碼。Fireworks輕易將將這些圖像、Fireworks的轉存到你以Dreamweaver來製作和管理的網站上。

1. 選擇File > Export。轉存文件會製作一個HTML檔也為每一分割製作一圖像檔。為了易於之後移除這些檔，將它們轉存到新的資料夾。
2. 選擇儲存位置，點按New Folder鈕，並為該資料夾取名，要確定該新資料夾的名稱出現在對話框的上方。
3. 接受內定base name（基底名稱）之設定，Fireworks以該名稱來做HTML檔的名稱，並以該名稱為基底來為因分割所產生的GIF及JPEG檔命名。
   你能夠點按Setup鈕來修改Fireworks為檔案命名的方式，以及設定轉存HTML的其他特性。
4. 從Slicing的彈現式選單內選擇Use Slice Objects，這會確保所有的按鈕、behavior及最佳化於瀏覽器內展現時會正常運作。
5. 從Style彈現式選單內選擇Dreamweaver 3，這會產生在Dreamweaver 3使用該檔時的最適佳化HTML碼。
6. 確定Location彈現式選單被設在Same Directory（同一目錄）。此一選項讓你指定所儲存的HTML檔與轉存的圖像之關係。你也能夠將所有的HTML拷貝到Clipboard（剪貼板）並將之直接貼到Dreameweaver檔內。點按Save (Windows) or Export (Macintosh)將該檔轉存。該HTML檔現在能夠在瀏覽器內來觀看或者在Dreamweaver內做進一步的修改。
7. 若你想一睹為快，可在Web瀏覽器內預看該HTML。
8. 開啟一個網頁瀏覽器，選擇File > Open > Page in Navigator (Netscape Navigator)或File > Open (Microsoft Internet Explorer)，並選擇你所轉存的HTML檔。
9. 你也能夠直接從Firewroks選擇File > Preview in Browser，並選定瀏覽器直接來看。若未見瀏覽器，則選Set Browser加入Primary（第一）及 Second (第二 ）個瀏覽器的名單內。
10. 試完該轉存的HTML檔，回到Fireworks並關閉該檔。

十、存檔
在Fireworks完成的作品必須加以存檔，以利之後修改或再利用，它的檔案格式是png。

1. 選擇File > Save As，取好檔名並選擇檔案的儲放位置，儲存之。

夜三A隨堂作業

今天的作業有三項，其結果可到下列的網址觀看設三A班及設三1的work04範例。

一、按鈕式首頁

1. 在你的www資料夾內新增一資料夾，取名為「fw-button」。
2. 以繪圖軟體規畫出期中作業的首頁，大小為760x420(或大於420)，它能顯呈現你的風格，可以包括圖像、按鈕及文字。
3. 以jpg或gif格式取英文檔名存放在「fw-button」資料夾內。
   

二、修改文字式首頁

1. 回到www資料夾內，開啟index.html檔，新增「作業四」，超連結到fw-button資料夾內你在上述步驟3.的jpg檔或gif檔。
2. 儲存檔案。
3. 上傳。

三、到http://namentit.blogspot.com去看你自己的作品。

期中作業之檔案命名--夜三A

今天的進度如下

1. 在Dreamweaver完作你期中作業的資料夾命名及檔案命名。
2. 完成前一篇部落格內容說明之第五項。
3. 在本篇右下的Commnets內做連結到你的網站。方法是鍵入類似以下包括前後兩個小括弧的文字串
   <a href="http://web2.ntit.edu.tw/~sxxxxxsxx">○○的作業一 </a>
   注意：上列中的綠色字必須是你的網站之絶對網址；楬色是你要呈現的文字，它與綠色不同，但若你要讓人家看到的是這個絕對網址，則可相同。

作業範例

• http://web2.ntit.edu.tw/~s13962036/work03.html

檔案命名

當你已想好主題與組織架構圖，你須依該架構圖完成以下二件工作

• 檔案的分門別類及檔案命名
• Sitemap

一、檔案的分門別類及檔案命名
就你的期中作業而言，你要做以下的工作

1. 先在www檔案夾內新增一個檔案夾，且取名自訂，例如afashow（諧音：阿花秀，好好為自己取個易記易拼的英文名，有點難，但不太難）
2. 在afashow裡頭，你可以依序做出以下的檔案及資料夾結構
   第一層是個檔案，名為index.html;
   第二層中的每項分類取個資料夾名稱，名稱有流水號較佳，例如，攝影是你的第一類，所以你將資料夾取名為01_photo。散文是你的第二類，你為該資料夾取名為02_novel；依此類推到其他的類別。
   第三層是從第二層生出來，換言之，它要放在第二層的資料夾內，例如，在01_photo資料
   夾內，你打算存放三類影像，其第一類為靜物，所以，依取名的原則，你可以取名為01_stilllife。
   第四層是你存放在第三層內的內容，它可能是資料夾，也可能是檔案，為方便計，且以檔案為主，在這層內，你放了五張靜物件品，第一張是茶杯。因為它是檔案，所以取名為01_cup.html；餘之檔案類推。此外，你可能需要管理這些圖像檔，它們是你已經做好（或者即完成）的jpg檔，它們共有五張，因此，你另做一資料夾，取名為images，再將這些jpg檔放入。

上述說明中，特別要注意的是名為index.html的檔案，該檔名在html語法扮中演很特別也很重要的角色，從瀏覽器進入網站時，當未指名要找哪一個檔案時，瀏覽器最先讀取的是index.html。所以，你在瀏覽器瀏覽自己放在學校的伺服器的個人網站時，以下二種輸入法會得到相同的結果：
http://web2.ntit.edu.tw/~sxxxxxxxx/；
http://web2.ntit.edu.tw/~sxxxxxxxx/index.html
依據這樣的特性，一個網站可能會有很多個index.html，它們分別存在不同的資料夾內。

二、建立Sitemap
sitemap其實組織架構圖的簡易結構，其呈現的方式很多樣，你可以到google去搜尋，並自已建立，將它以檔名sitemap.html存檔第一階層的位置內。

三、決定作品的版式
你已譜出自己的網站主題並建好網站的資料夾名及檔案名。現在，你要做的重要事情是：你要如何呈現你的內容，你呈現內容的方式，就像你的穿著或一本書的版面設計，要注意款式、色彩，當然，你應該重視的是你這個網站要給誰看，想完成什麼目的。

四、從仿效做起
瀏覽與你要設計的網站有關的網站，找出你最愛的二個，螢幕擷取之，並到Photoshop去處理成網路用的格式。將它們存入你的www資料夾內。

五、同上週一樣，開新檔案，做一個檔案名為work03.html，內有上一步驟的二個圖像，外加你的檔案命名擷取圖。在你的index.html檔內，加入「作業三」，超連結到work03.html。記得將index.html存檔，之後，將近端電腦整個www資料夾上傳。

期中作業結構圖及留言--夜三A

今天的作業有二項：

1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫，你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html，存入你的www資料夾。
   重新編輯你的index.html，加入「作業二」,將「作業二」超連結到work02.html，將index.html存檔。
   將www資料夾上傳。到瀏覽器瀏覽。
   
2. 在留言板內做一個超連結時以連結到你的網站，做法是鍵入類似以下含前後兩個小括弧的文字串
   <a href="http://webntit.blogspot.com">○○的作業二 </a>
   注意：上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx，楬色是你要呈現的文字，它與綠色不同，除非你要告訴人家該超連結網址。

期中作業及留言超連結-日3A

今天的作業有二項：

1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫，你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html，存入你的www資料夾。
   重新編輯你的index.html，加入「作業二」,將「作業二」超連結到work02.html，將index.html存檔。
   將www資料夾上傳。到瀏覽器瀏覽。
   
2. 在留言板內做一個超連結時，以連結到你的網站，方法是鍵入類似以下包括前後兩個小括弧的文字串
   <a href="http://webntit.blogspot.com">○○的作業二 </a>
   注意：上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx，楬色是你要呈現的文字，它與綠色不同，除非你要告訴人家該超連結網址。

網站結構之命名

當網站結構完成之後，必須為該結構取名，第一個檔案是indext.html。
之後的檔案，須分門別類放在檔案夾內。

• 檔案夾的命名及檔案的命名必須是英數字，不要有空格，除-或_之外，不要用其他符號。
• 圖檔的格式一定要RGB模式。
• 圖檔在Photoshop處理成檔案量較小者。

一些網站在命名上有值得學習的地方，例如魔瓶設計公司，它在大檔案夾的命名是加入數字，有利管理者知道資料要放在那一個檔案夾。另外，它也附上Sitemap以利瀏覽者容易看到整個網站的架構。

網站結構圖

網站是存放資料與人分享的地方，它可以包含許多資訊，為方便管理者及使用者使用，所以有必要加以分類，分類的方法一般如下圖，這樣的結構，第一層是瀏覽者到網站看到的index.html檔，係一網頁，但單一網頁無法包容許多內容，所以會有進一層的分類的必要。例如，你的網站主題是要展現你的作業，所以，你將作業分成三類，如攝影、插畫及文學創作。在攝影類之下，你可能細分成人物類、貝殼類及建築類。在人物類內，你呈現12幅作品.....每一件作品佔用一個html檔。
分類的階層依你的主題及內容而定，簡單者，到第二、三層或更多，但原則是不要讓瀏覽者不知身在何處。

你可到google搜尋，選「圖片」，鍵入「website structure」，按google搜尋，看看別人如何建構網站的架構圖。

觀摩下列網站

• http://www.abc.net.au/children
• http://www.zakka.com.tw

並思考以下幾個問題：

1. 點按同一網站不同選項時，瀏覽器上的網址有什麼變化？
2. 兩個網站的 URL之最後一個副檔名不同，代表什麼意義？
   
3. 點按Sitemap，看它呈現什麼？

留言超連結法--夜３A

在留言板內做一個超連結，以連結到你的網站，方法是鍵入類似以下包括前後兩個小括弧的文字串
<a href="http://webntit.blogspot.com">○○的作業一 </a>
注意：上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~s...........，楬色是你要呈現的文字，它與綠色不同，但若你要讓人家看到的是這個網址，則可相同。

期中作業之結構圖--日三1

今天的作業有二項：

1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫，你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html，存入你的www資料夾。
   重新編輯你的index.html，加入「作業二」,將「作業二」超連結到work02.html，將index.html存檔。
   將www資料夾上傳。到瀏覽器瀏覽。
   
2. 在留言板內做一個超連結時，以連結到你的網站，方法是鍵入類似以下包括前後兩個小括弧的文字串
   <a href="http://webntit.blogspot.com">○○的作業二 </a>
   注意：上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx，楬色是你要呈現的文字，它與綠色不同，除非你要告訴人家該超連結網址。

留言之超連結法日３A

今天的作業有二項：

1. 用Dreamweaver編寫你的期中作業﹣﹣個人網站﹣﹣的企畫，你可用文字描述再加入圖像及組織架構圖來陳述你的點子。將該文件命名為work02.html，存入你的www資料夾。
   重新編輯你的index.html，加入「作業二」,將「作業二」超連結到work02.html，將index.html存檔。
   將www資料夾上傳。到瀏覽器瀏覽。
   
2. 在留言板內做一個超連結時，以連結到你的網站，方法是鍵入類似以下包括前後兩個小括弧的文字串
   <a href="http://webntit.blogspot.com">○○的作業二 </a>
   注意：上列中的綠色字必須是你的網站的絶對網址如http://web2.ntit.edu.tw/~sxxxxxxx，楬色是你要呈現的文字，它與綠色不同，除非你要告訴人家該超連結網址。

隨堂作業

前置作業
利用Dreamweaver先在自己的電腦D:槽或隨身碟建立本地端網站，並與遠端網站連線，將遠端網站的內容下載到本地端網站。

作業目標：
完成純文字的網頁及超連結，它是網際網路剛開始時的主要功能。

製作細項：
一、利用Dreamweaver製作一文件，取名為work01，存在www資料夾內。其內容請到google、wikipedia去找出下列有關網路傳播有關的專有名詞及說明

• internet網際網路
• www全球資訊網
• web site網站
• homepage首頁
• web page 網
• hyperlink超連結
• html超文件標示語言
• URL
• http
• ftp

二、開啟你上一次的index檔，在文件內加入文字「作業一」，並將「作業一」超連結到前述的work01.html
三、修改work01.html，在文件內加入「回首頁」，並作超連結到index.html
四、完成上述作業，試著在瀏覽器看你的作品。

補充說明：

• 你可以考慮將work01.html的文字做色彩及字型級數的變化，以達易讀美觀的要求。
• 當你從其他軟體或網頁拷貝文字到dreamweaver時，最好先貼到Windows附屬軟體「筆記本」，使這些字成為純文字，再選取這些純文字，複製，再貼到dreamweaver。

學期作業

本課程以上Dreamweaver為主，Fireworks為輔。
本學期除課堂練習外，主要作業有兩項：

• 期中考：個人網頁，主題自訂。
• 期末考：公司網站，修改現有公司或為尚未有網站的公司設計網頁內容。

日設三1自我許願

請在這留言欄內許下你希望在這個學期這門課，

• 學到什麼？
• 自己完成什麼？

記得留下你的資料，例如你的部落格名或學號
如果到學期宋，上兩項都完成，我會給你85-95分。

參考書目

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

日設三A自我許願

請在這留言欄內許下你希望在這個學期這門課，

• 學到什麼？
• 自己完成什麼？

記得留下你的資料，例如你的部落格名或學號
如果到學期宋，上兩項都完成，我會給你85-95分

在學校伺服器架網站

一般而言，架網站有二個方式：

• 一是以自己的電腦當伺服器（server）；你要申請網站，要繳年費；
• 二是以別人的電腦當伺服器。你可能要繳費，但很多是免費的。

現在，你要做的是第二種，即以本校提供每人10ＭＢ空間來架設個人網站。它有一些限制，譬如，它無法建構資料庫。雖如此，仍可完出一些有趣的內容，以下介紹以dreamweaver來架設網站的方法，分以七大步驟：
一、建立本地端的資料夾

1. 先到學校網站首頁的Eportal更新你的密碼。
2. 先在電腦D:槽內新增一個資料夾，一律取小寫英數名，不要空格或特殊符號，例如，取名為web123456。若一定要用特殊符號，建議只用下標_，例如，web_1234。
3. 打開web123456資料夾，新增一個資料夾，取名為www。(注意：一定要取名為www，英文要小寫)，取名www的理由是校方伺服器的要求。

二、用Dreameweaver建立本地資訊

1. 啟動Dreamweaver，開啟新檔，選「html」。
2. 從主選單選網站 >管理網站，於對話框點按「新增網站」鈕。
3. 點按浮動視窗上方的「進階」標頭。
4. 在左上角的分類下，選「本地資訊」。
5. 點按「本地資料夾」空白欄右側的資料夾圖示，選擇web123456這個資料夾。(注意紅色框內最右邊不可以有www)。
   

三、設定遠端資訊

1. 接著，在分類欄內選「遠端資訊」，並完成類似下圖之資料設定。
   注意，主機目錄欄要留白。要打V的一定要打鉤。
   不知密碼者，請到http://web2.ntit.edu.tw找尋。
   
2. 換測試鈕。
   當顯示可以連繫成功，可以按「確定」鈕。
   

四、實際連線

1. 在Dreamweaver作業視窗右側，按以「連線至遠端主機」。
2. 選用「本地端」。
3. 滑鼠在www資夾，點按右鍵，按新增檔案，取名為index.html。
   注意，這項命名字不可錯誤。
4. 點按index.html二下以開啟dreamweaver，它會是一個空白頁面。
5. 在頁面內輸入能表達你個人資料的文字內容。
6. 在title欄內鍵入「xxxx的首頁」
7. 檔案>存檔。

五、檔案上傳。

1. 點按上傳圖示。

六、瀏覽成果
依上述步驟，你應已架好自己的個人網站了，你應該記下你自己的網站的網址！它應該像下列文字串：http://web2.ntit.edu.tw/~sxxxxxxxxxxx/ （註：sxxxxxxxxxxx是你的學號）

1. 到瀏覽器的位址欄，鍵入你的網址
   http://web2.ntit.edu.tw/~sxxxxxxxxxxx或
   http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.html或
   http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.htm。
   看看三者有沒不同。
   

七、下載
當你將網站資料下傳到伺服器之後，你可到任何地方將資料下載。下載的步驟如下：

1. 同主步驟一至四。
2. 點按Dreamweaver作業視窗右側的下載。
3. 在本地端，將下傳的檔案加以編輯，儲檔。
4. 上傳。
5. 到瀏覽器看結果。
   

八、刪除網站
當你使用學校的軟體經營你的本地端網站，要離去時，記得執行

1. 網站 > 管理網站 >
2. 對話框內選取你的網站名 > 移除。

如此，可以防此其它人不小心闖入你的網站。

小結
由於學校的網站伺服器內已為每位使用者設好www資料夾供網頁使用，所以你的任何資料務必要存入該資料夾內，否則一定會出問題。因此，本地端的www資料夾與遠端的資料夾是對等的。你將本地端的資料夾上傳，就會蓋過遠端的www資料夾。反之亦然，另外，這兩個資料夾內，一定要有一個檔案，其檔名為 index.html。


有了網站，你的問題是你要表現什麼內容？要如何表現？
說到內容，最好是你最感興趣的，或者你被逼得要做的（例如，你接了case）。
說到表現，答案可不只一種，它就像印刷編雜誌一樣，你要有版式、圖片、色彩計劃、分類。但與印刷雜誌不同的是，它會用到超連結(hyperlink）、多媒體（flash）或視訊及音效等。
本學習中，你的學習目標有二：

1. 模仿網站：觀賞網站，模仿其風格架設自己設想內容的網站。
2. 改版：以前一階段的能力為基礎，設計另一種風格（模仿亦可，自創更佳），強化自己改版的能力，並為業界的網站做更版 。

補充
你可由以下的超連結去建構免費網站

• 免費資源網站社群
• http://www.wopop.com