期末作業

目標
從使用者經驗或使用者友善，改善商業設計系網站的首頁。

方法

1. 用Photoshop或Illustrator設計二款版面，版面大小優先考慮為1024(寬)x768(高) 。高可以768以上。
2. 繳期：1月8日/15日，須口頭報告。
3. 考慮商設系的logo配色
4. 完成品上傳到你的部落格及中技的「智慧大師」。
5. 參考網站
   明志科大 工業設計系
   台科大 工商業設計系
   大同大學 工業設計系
   銘傳 商業設計系
   中原 商業設計系
   朝陽 工業設計系
   東海大學 工業設計系
   維也納藝術大學 應用藝術系
   伊斯坦堡科技大學 工業產品設計系
   網站設計程序
   
   
6. 參考同學們的以下意見。
   ◎ samantha said...
   沒有色塊區分，或可精簡標題，排序有重複
   
   ◎ abingo888 said...
   色彩太豐富，讓我一時之間花了眼，找不到我要找的目標。建議主畫面應該做整齊統一。
   
   ◎ 設一A 33993036 洪 美環 said...
   1.顏色色調太冷，沒設計系該有的活力
   2.排版雜亂
   
   ◎ 33993029 said...
   整體排列感覺太亂
   且以學校網頁來講
   不應該將性器官的字眼PO上~"屌"字
   
   ◎ Tiny garden said...
   此網站剛進入時，在Title 以比賽，期刊在最醒目的位置，反而和系所相關在最底下.
   但資料內容豐富，如有檢索更佳.
   
   ◎ 小小的、卑微的工程師 said...
   內容可以改變編排順序，顏色可以在跳ㄧ點
   
   ◎ Cindy Chen said...
   太多點選區塊，強調的重點太多，讓人不容易找到要看的資訊，應作較簡潔的編排。
   
   ◎ snow said...
   整體感覺很舒適而且也很美，易讀性也高，我覺得唯一能夠挑剔出來，沒有符合使用者友善的部份，就是左上角的語言和系所簡介專區，設置的地方稍嫌"偏僻"，通常有這語言區的網站會把這個部分放在主選單附近，讓閱讀者不會太難找，網站其他部分也就沒有太大的問題
   
   ◎ Donna Lee 33993001 said...
   頁面顯示的資訊太多，或許可以統合的再簡潔一點‧
   
   ◎ TINA said...
   外觀:顏色非常的舒服.
   編排:細項很明確
   
   ◎ Tiny garden said...
   此網站剛進入時，在Title 以比賽，期刊在最醒目的位置，反而和系所相關在最底下.
   但資料內容豐富，如有檢索更佳.
   
   ◎ 邱小君 said...
   內容項目與賽事內容資訊多，感覺複雜不夠清晰明瞭，甚至有些重複，所以在使用上容易混淆，不容易馬上找到要搜尋的關鍵字!
   部分文字與背景顏色相近，使標題不夠分明~
   
   ◎ J.Tang said...
   部份標題文字閱讀吃力，不友善.
   
   ◎ 王筱涵 said...
   網頁內容豐富，有變化性的主頁資訊更吸引參觀者的目光，淺色系的搭配讓視覺清晰舒服，畫面分佈整齊，淺顯易懂的操作頁面!!
   
   ◎ tank said...
   商業設計學院網站改進意見
   1.提升視覺辨識.以免於色彩混亂.
   2.主題橋段分梯排列.便於瀏覽.
   3.美術編排增進動畫.以增加活潑生動效果.
   
   ◎ 安可陳 said...
   網頁色塊可精簡的排列，能讓使用者用起來有效率。
   
   ◎ 阿飄 said...
   1.外觀 淡色調我喜歡
   2.編排 感覺資訊太多沒分類
   3.結構 感覺沒有主題
   4.眼界 有點亂
   5.策略 亂中有序?
   
   ◎ 33993035網路傳播設計 said...
   覺的版面太過於複雜，可以再精簡一點
   看起來才不會很亂
   
   ◎ 鼎欽 said...
   頁面顯示野及色塊太多複雜，主題不夠明顯
   
   ◎ 楊舒捷 33993011 said...
   設計感不夠重~!!
   
   ◎ 鄭麗真 said...
   優點:1.項次分明，容易點選閱讀。
   2.配色很好
   缺點1.網頁內容文字太多，字體太小。
   2.可放入師生學習成果的圖片，讓版面看起來比較生動。
   
   ◎ 3D32973024 said...
   外觀~
   優點 是背景能與中技的網站 產生統一性 都是白色系為主 背景不複雜 比較重要的文案 容易看見與閱讀
   缺點 是顏色的應用上 比較不足夠
   而且缺少現代感
   編排~
   優點 是蠻整齊的 但好像是因為東西沒有很多 讓人覺得比較清淡 文字方便閱讀 但稍感無力
   缺點 把重點都放在頁面上方
   總結~欠缺現代感 連結區太多
   顏色可以豐富一點
   
   ◎ 家萱 said...
   學校網站給人有種很輕柔又有時尚感，之前有看過某某技術學院網站，跟學校的水平真的差很多，很雜亂又很俗氣
   
   ◎ 33993042 said...
   覺得網頁太擠、複雜可再編排，讓視覺看起來清楚有設計感覺。
   
   ◎ may said...
   色調太亂
   圖片太小
   應該要清楚化
   讓頁面看起來乾淨清楚
   ◎ 壞x人 said...
   排板有些亂 需要改善
   
   ◎ Juliana Chu said...
   1.內容豐富，但是重複按鈕。
   2.動畫很有活力，過多會眼花撩亂。
   
   ◎ 方淑慧 said...
   點選的選單多有重複
   看的眼花花
   下方的連結區塊也很多，要點選的地方還要花點時間找尋，不方便
   假使能清楚劃分區塊，更能方便閱讀。
   
   ◎ chaosaoi said...
   整體感覺很清爽
   只可惜文字過多
   畢竟現在是講求圖片證明一切的世界
   
   ◎ shuhui said...
   1.基本色調灰色太平淡，沒有商業設計系的設
   計感，像是藥商的網頁，應加強視覺的設計
   元素。
   2.比賽訊息及學術展覽的編排太密集，不易分
   辨各個項目。
   
   ◎ chaosaoi said...
   整體感覺很舒適而且也很美，易讀性也高
   
   ◎ Rong said...
   顏色算清晰，但可惜字體過凌亂~以致讓人感覺是一堆亂碼，好像電腦程式有問題，覺得畫面不是很好，乾淨ㄧ點會叫好。
   
   ◎ Miracle said...
   雖然畫面看起來很有設計感，
   但是太過於凌亂，配色太複雜沒有一致性
   排版的話上半部還可以，只是依些LOGO沒有整合看起來很雜亂。
   

超連結(hyperlink)

目標
為某一網頁元素(文字或圖片)建立超連結。

方法

1. 用Dreamweaver開啟上周練習www資料夾內的index.html檔。
2. 將左欄的Destinations超連結到01xxx資料夾內的index.html檔。
   作法一：直接在屬性對話框內的連結欄鍵入01xxx/index.html
   作法二：(1)將右側面板中的本機檔案欄內的01xxx資料夾開啟；(2)將屬性對話框內的連結欄右側的連結圖符拖拉到上一步驟中01xxx資料夾內的index.html
   
3. 將左欄的Airfare超連結到02yyy資料夾內的index.html檔。
4. 將左欄的Cruises超連結到03xxx資料夾內的index.html檔。
5. 檔案>儲存。
6. 檔案>於瀏覽器中預覽>IE或Firefox。
   

以dreamweaver內建的樣本來設計

目標
學習檔案的管理

方法

1. 先在d:磁碟機 (若無d:磁碟機則改在c:磁碟機) 建立一個資料夾， 取英數名如「travel1211」，該資料夾內另增一資料夾，取名為「www」。
2. 在「www」資料夾內新建三個資料夾。分別取名為
   01xxx
   02yyy
   03zzz
3. 啟動Dreamweaver軟體，新增文件，程序如下圖 (點按該圖以放大)
    
4. 點按建立鈕，取名為index，存在「www」資料夾內。
5. 開新檔案，同上圖中，選項為旅遊的「文字」頁，點按建立鈕，取名為index，存放在「01xxx」資料夾內。
6. 開新檔案，同上圖中，選項為旅遊的「產品」頁，點按建立鈕，取名為index，存放在「02yyy」資料夾內。
7. 開新檔案，同上圖中，選項為旅遊的「目錄」頁，點按建立鈕，取名為index，存放在「3zzz」資料夾內。 

檔案管理延伸流覽

• 磨瓶設計
• CNN

檔案命名

• 一個網站會由許多網頁組成，一如書由很多章節組成。每一網頁須命名，命名要用英文及或數字、合法的符號。注意：網頁包括網頁中的圖片、音效檔、flash動畫，取中文名是不行的。
• 瀏覽時，只要進入一個資料夾，若未指定要看哪一個網頁時，會自動顯示名為index的網頁。其他網頁則一定要指名，注意：名字的大小寫字母是不能通用的，例如：lov是不等於Lov的，所以，最好的方法是一律用小寫。

隨堂作業

目標
從使用者經驗或使用者友善，檢討商業設計系的網站。

方法

1. 在以下的意見欄提出你的寶貴意見。
2. 利用Dreamweaver所附的檔案，製作你個人的首頁，並上傳到你的網站。

參考書目

1. 賴虹燕譯，Web CSS網頁樣式設計學 ，台北：博碩，2005年。
2. 黃聰明，CSS版面樣式設計實務，台北：文魁，2006年。
3. 碼上就用CSS，台北：上奇，，2006年。
4. 胡為君譯，CSS網頁設計手扎，101個您一定會遇到的問題與解答。台北：上奇，200x年。
5. 胡為君譯，The Zen of CSS-網頁視覺設計の王道，台北：上奇，2005。
6. 胡為君譯，Wogner原著，如何設計好網站，台北：上奇，2006。
7. 王煦淳譯，WebLayout設計的美學, 台北：旗標，2006。
8. 張碧球主編，張惠如著，企業形象網頁設計，臺北市：藝風堂，2004。
9. 許明玉、張達昀譯，Adobe Creative Team著，跟Adobe徹底研究Dreamweaver CS 3，台北：上奇，2007。
10. 張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
11. 鄭巧玉譯，Wogner原著，如何設計好網站之網頁改造術。台北：上奇，2006。
12. RoseNya, 小包子，Dreamweaver cs3即效見本，台北：上奇，2007。
13. 視覺系研究菀，網頁設計部屋，台北：碁峯，2006。
14. Jason Beaird, The principles of beautiful web design, Collingwood, Australia: SitePoint Pty. Ltd., 2007.
15. Janine C. Warner, Teach yourself visually Dreamweaver CS3, Hoboken, NJ: Wiley Publishing, Inc., 2007.
16. Jesse James Garrett, The Elements of User Experience. New Riders, 2003.