環保節能指示燈＆圓管_設計得獎名單

這比賽其實比了很久，終於比完了成績也揭曉了，
恭喜有得獎的同學，我們班就給人家拿了很多獎，
恭喜大家耶.....

繪本製作_自創影像繪本

◎自創影像繪本
這項作業剛好跟攝影老師出的作業一樣，
所以就小偷懶得只拍了一次，
因為真的沒有時間去拍攝，
主題就是拿我先生跟我小孩為題材，
每個禮拜我去上課，
如同照片，我先生就是要這樣的忙碌帶小孩，
就來欣賞吧。

繪本製作_動畫轉化成繪本

◎期中作業_動畫轉成繪本/動畫角色分析
1.找一個現成的動畫，並用電腦快照把畫面擷取下來，
做成一本故事書，一共要有30張畫面歐。
(我上網找了一個現成的動畫Teh Doll)
2.再把動畫裡面的角色、場景和道具做分析。

分析:
a:角色(主角與配角)的性格、個性
b:角色的關係分析
c:情解分析→狀況預告→出現問題→解決問題。
(每則故事都有分段，所以要做出每段的分析歐)
d:場景→自然/天候/人造物(如:載具_車、服飾、生活用品...)/建築
e:道具→隱喻象徵物

做此作業的的心得:
老師這樣的做法很棒，讓我們先從動畫裡面擷取畫面在製作成故事書，
這樣讓很多對分鏡沒有概念的同學也因此先上了一課，也比較容易理解，
這樣大家可以了解在跨頁的時候會遇到的問題，
不是隨便兩張圖放在一起就可以了，而且畫面的挑選也是很重要的。

以下是我的作品(動畫轉成繪本/動畫角色分析 )
● 動畫轉成繪本


● 動畫角色分析

繪本製作_西北雨角色擬人化

ㄨㄚ.....居然要把魚魚擬人化.....

聽到著作業我的頭都痛了起來，

要畫什麼都可以我就是不太會化Q版的卡通，

但還是要做阿，所以就先上網把要做的7個角色資料找一找，

準備開始先畫人物了，在會草圖的過程中可以畫得很精緻，

但開始捏人物時，因為第一次捏有困難點，

所以有些在草圖畫的細節就都省略了，
也建議大家在捏人物時該有的工具還是要有，

如:夾子、剪刀、電風扇、雕塑工具.........

步驟:
1.先畫草圖

2.捏人物

3.再照捏出來的人物畫出，正面/側面/後面

以下是我的作品來新欣賞吧....

我製作的過程...

網路傳播設計_期末作業

◎網站結構探討_Homework7

以下是我設計的作業網站畫面(Homework6):
●Homework6_01


資料擷取自阿寶老師部落格:
目標
以使用者經驗改善一家企業的網站

方法
● 依上半學期的分組，各組自選一家企業網站，改善之。改善之道如下：

1. 提出其可改善之處。
2. 提出同類型的優良企業網站，供改善參考。
3. 在部落格記錄每週改善記錄。
4. 在部落格做改善結果意見調查。

可改善者
● 台中技術學院日間部、進修部、進專及補校的網站改善實例
大煒塑膠工業有限公司

繳交
1.在你的www資料夾內新增work_7資料夾，把你修改的網站置入其中。
2.在你的www資料夾的index.html檔案內，將作業七超連結到上一資料夾的首頁。

期限
11/17(一)~22(六)：主題選定
11/24~29：分析組織架構圖
12/01~06：設計版型
12/08~13：設計版型
12/15~20：初稿
12/22~27：修稿
12/29~03：完稿
01/05~10：檢討

網路傳播設計_網站外觀

◎網站結構探討_Homework6

以下是我設計的作業網站畫面(Homework6):
●Homework6_01


資料擷取自阿寶老師部落格:
目標
觀察網站，熟悉使用者經驗元素中的外觀 (surface)層，使頁面內的圖、文、色彩組合是一網站類型。

方法
援用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)，網頁設計部屋，台北：碁峯。

網路傳播設計_頁面編排

◎網站結構探討_Homework5

以下是我設計的作業網站畫面(Homework5):
●Homework5_01

資料擷取自阿寶老師部落格:
目標
觀察網站，熟悉使用者經驗元素中的編排 (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)，網頁設計部屋，台北：碁峯。

網路傳播設計_網站結構探討

◎網站結構探討_Homework3 & Homework4

以下是我設計的作業網站畫面(Homework3/Homework4):
●Homework3_01


●Homework3_02


●Homework3_03


●Homework4_01

●Homework4_02

●Homework4_03

資料擷取自阿寶老師部落格:
目標
觀察網站，熟悉使用者經驗元素中的策略 (Strategy)層、眼界 (Scope)層、結構 (Structure)層。培養sitemap的建構及網站結構的命名。

方法
瀏覽以下的網站
● 創造力公司
● Apple
● frogdesign
● zafu

隨堂作業
1.以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
2.在本地端網站的www資料夾內，新增work_3資料夾。
3.依前二公司的網站瀏覽，在work_3資料夾內建立以下二個檔案

一.sitemap1.html，其內容能一目了然地看到創造力公司或Apple公司的網站
1.對象是誰？ 要提供什麼？
2.網站地圖
(另一名稱為網站導覽 )
3.網站結構的資料夾命名及各網頁的英文命名。
註：資料夾的名稱能在瀏覽器的網址欄看到，其原則如下：
●在http://右方第一個 / 之後未具.html的英文(和或數字)名為第一層資料夾名稱。
●在http://右方第二個 /
之後未具.html的英文(和或數字)名為第二層資料夾名稱，餘再依此類推。
●網頁的名稱為有.htm或.html或asp或php副檔名者。

4.在本地端網站的www資料夾內，新增work_4資料夾。

二.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圖片。
同學的作業一
同學的作業二
同學的作業三

下周進度

1.版面編排設計
2.Fireworks軟體應用

攝影表現_火車站環景拍攝

◎期末作業:環景
我的主題是以火車站為主，因為每次去上課我必須搭火車，
也因此剛好利用邊搭車邊拍作業的方式把這項作業拍完成，
一開始做這作業也是沒有很懂，所以也拍了很多失敗的作品，
截至目前我也是已經拍了至少有30組吧，
拍這作業第一個工具就是相機，大家看我的作品一定會覺得色彩有差，
顏色比較漂亮的作品我是用Nikon D80，顏色比較平的則是用Fujifilm F40，
另一個工具一定要用腳架，因為如果我們用手拿會沒有辦法在同一個水平的拍過去，
這樣就會導致畫面接起來的時候會高高低低，在裁切後畫面所剩有限了。

技巧:
站在一個你要拍攝的主題前面(距離就是看自己希望主題呈現出來的大或小了)，
再來就利用腳架做旋轉的動作，如果要拍細一點每張的照片間距就短一點，
如果要畫面大一點建議拍直式的，再利用拍多張一點來拼接就可以了。

利用軟體來拼接:
拍完後就可以把圖放到PHOTOSHOP讓電腦幫你把圖拼好，
建議用CS3版本以上， 因為CS2以下的版本它可以幫你把圖拼好，
但是它沒有辦法幫你把每張畫面顏色校正到都一樣。

以下是我的作品來欣賞吧:
1.銅鑼火車站:


2.新竹火車站:


3.台中火車站:


4.台中火車站:


5.台中火車站:


6.追分火車站:

7.追分火車站:

8.成功火車站:

9.后里火車站:

廣告策略與創意_系展比賽之廣告平面設計

◎系展比賽之廣告平面設計:
以下六項是老師建議大家可以朝這方面去做設計發想
1.【台灣本土中心】深具草根性的意涵、本土的文化、次文化、地方行銷/特產/傳統/活動。
2.【文化族群】原住民、客家人、台客文化。
3.【歷史文化】故宮、文化的傳承、文建會下鄉推動。
4.【設計的根】設計與生活、設計的根源性運用。
5.【環保議題】土壤、森林、水、保育動物、人群、公共議題。
6.【衛生保健】身體保健、健保局、衛生署。
7.【農業文化】農產品、農委會（35歲以下可以去當農夫）。

◎環保與愛滋是我這次設計的主題:
以下是我的設計作品ㄡ...

設計理念:
環保:以冰淇淋融化代表地球，如果大家在不愛護地球，
地球就會發燒生病，並且漸漸的融化(消失)掉了。
愛滋:利用可愛的人物並且坐著各種的姿勢，編排出一個保險套的形狀，
主要是要告訴大家，不管你是什麼姿勢或是幾P為了大家的幸福，
請記得戴保險套。

列印成70x100cm的海報:

網路傳播設計_建立網站

◎建立網站_Homework1 & Homework2
這是我第一次接觸到設計網頁的部分，
在我的工作中會有碰到，但由於寫成是這部分都是有工程師會做，
所以導致我就偷懶沒有去學，
剛好利用這個機會一定要好好給他學一下。
我的網站網址:
http://web2.ntit.edu.tw/~s33973010/

以下是我設計的作業網站畫面(Index/Homework1/Homework2):
●Index


●Homework1_01


●Homework1_02


●Homework1_03

●Homework2_01

●Homework2_02

●Homework2_03

●Homework2_04

資料擷取自阿寶老師部落格:
◎目標
了解網站內容的線性結構、層屬結構與檔案命名學習新功能

●網站地圖 (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，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
13.將上一篇的超連結連到article2.html。儲存檔案article3.html。
14.在瀏覽器測試 (IE的快速鍵為F12鍵)。
上傳到伺服器。

四、層屬結構
層屬結構：像書本那樣，一書有數章，每章數節等。
實例簡介：利用可任選且具超連結的文字或圖像。
製作步驟：
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是你的學號。

廣告策略與創意_系展海報_根

◎系展海報_根
ㄨㄚ....要先恭喜商業設計系已經30歲了耶.....生日快樂，
這次大家也都參加了此活動的海報比賽...
(是被強迫的...ㄨ ㄨ...為了成績只好努力給它設計了)
沒想到我居然得獎了....第二名...O My God....真讓我太驚訝了....居然是我耶....
好久沒得獎了，自從學校畢業後就沒在得過獎了，因為都在努力賺錢ing，
也要謝謝李老師＆胡老師給我的寶貴建議歐.....我都有認真給它聽進去的。

現在就來欣賞我的作品吧...


我設計了兩張，概念都是一樣的，只是畫面的Layout做了變化，
左邊設計圖是以量身高尺的概念，右邊設計圖是以圈圈版的概念，
而裡面的元素是以豆子成長到大樹，商業設計系的成長就像大樹一樣。

海報列印成70x100cm效果:

兩難

最近我也遇到了難抉擇的事，
好不容易鼓起勇氣再回學校讀書，
但又好不死遇到現在景氣最低的時候，
所有的企業都是一樣的遇缺不補，
所以現在一個人都要當兩個人用，
相對要做的工作也增加了很多，
不得不加班把工作消耗掉，
但也相對我的作業就沒時間去做了，
就算有做品質也顧不到了，
這是我非常不想要的，
但是如果兩邊都要兼顧得很好我看我會先掛掉或瘋掉，太累了，
所以我很想放棄我的工作，但放棄了這工作就沒有收入，還要養小孩的我.....
如果放棄了學業，我也不想，畢竟學業也是很重要的，
現在想到最好的辦法，就是我要跟某些老師說對不起了，
因為我真的顧不到那麼多的作業，
不得不捨棄某些作業了，無奈的Fifi.......