Saturday, December 25, 2010

期末作業

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

方法
  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沒有整合看起來很雜亂。

Saturday, December 18, 2010

超連結(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。

Saturday, December 11, 2010

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

      Saturday, December 04, 2010

      隨堂作業

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

      方法
      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.

      Sunday, November 21, 2010

      目標
      仿效Dw軟體的設計

      方法
      • 觀看SPA網站
      補充
      隨堂練習的檔案來源
      C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\BuiltIn\StarterPages

      Saturday, November 20, 2010

      2010Web

      22s / 40s
      05s / 10s
      01 / 02 / 03 / 04
      05 / 06 / 07 / 08
      09 / 10 / 11 / 12
      13 / 14 / 15 / 16
      17 / 18 / 19 / 20
      21 / 22 / 23 /
      25 / 26 / 27 / 28
      29 / 30 / / 32
      33 / 32 / / 35
      36 / 37 / 38 / 39
      40 / 41 / 42 / 43
      / 45 / 46

      網站瀏覽

      目標
      比較不同的網站

      方法
      作業
      以上的各個網站你有何種啟示,請在意見欄(comment)留言。

      Saturday, October 02, 2010

      圖像的上傳及位置調整

      這是水晶的價目表



      補充
      1. 連續圖片上傳,須一次傳一張,其排序呈疊碗式,最先上傳的在最底端。
      2. 要調整圖片的上下順序,須進入修改Html模式,選取「圖片所代表的語法」→複製剪下→在欲貼圖的位置貼上
      <這些字是小括弧內>

      Saturday, September 25, 2010

      文字處理

      你在看誰的部落格?:一群打亂長尾、扼殺文化的業餘者


      以下是將網路上的文字經由複製、貼上「記事本」,再複製後的純文字。

      你在看誰的部落格?:一群打亂長尾、扼殺文化的業餘者

      * 作者:安德魯.基恩
      * 原文作者:Lawrence Lessig
      * 譯者:尤傳莉
      * 出版社:早安財經
      * 出版日期:2008年04月03日
      * 語言:繁體中文 ISBN:9789867458988
      * 裝訂:平裝

      補充
      • 用「記事本」軟體執行「剪下」、「貼上」的功能;
      • 用「記事本」軟體執行「取代」功能。
      • 用「Office Word」進行「字串移位」、「複製」等編輯。

      Saturday, September 18, 2010

      2010學生

      22s / 40s
      05s / 10s
      01 / 02 / 03 / 04
      05 / 06 / 07 / 08
      09 / 10 / 11 / 12
      13 / 14 / 15 / 16
      17 / 18 / 19 / 20
      21 / 22 / 23 /
      25 / 26 / 27 / 28
      29 / 30 / / 32
      33 / 32 / / 35
      36 / 37 / 38 / 39
      40 / 41 / 42 / 43
      / 45 / 46

      2010教學進度

      • 上半學期由同學建構一個紀錄學習(或有專門領域)的部落格。
      • 下半學期由同學分組以建構一商業網站為主。
      • 個人在websxxxxxx.blogspot.com落格記錄一學期的學習心得及資訊分享
      1. 09/18 概論,blog架設
      2. 09/25 個人網站架設-http://web2.ntit.edu.tw/~sxxxxxxxxxxx/
      3. 10/02 blog的文字處理
      4. 10/09 圖像處理
      5. 10/16 html
      6. 10/23 多媒體物件的搭配
      7. 10/30 rss
      8. 11/06 發表--
      9. 11/13 發表--
      10. 11/20 網站內容架構
      11. 11/27 文字處理;文字型網頁的架設;表格圖像處理
      12. 12/03 網頁的色彩計劃
      13. 12/10 多媒體物件的搭配。
      14. 12/17 樣版的建立與套用
      15. 12/24 CSS樣式表
      16. 12/31 發表
      17. 01/07 發表
      18. 01/14 期末作業評核﹣﹣商業網站設計或改造

      Friday, May 14, 2010

      在不同的帳戶之間搬移部落格

      目標
      假設你在Blogger有AAA和BBB兩個帳戶:AAA帳戶中有二個部落格,BBB中有一個名為「摘星記」的部落格。要將BBB中的單一部落格搬移至AAA的步驟如下:

      步驟
      1. 登入BBB,然後移至「摘星記」部落格的設定|成員。
      2. 按下網頁上方的[新增小組成員],並在表單中填入你的電子郵件地址。提交表單,登出Blogger。
      3. 先確定已完全登出Blogger,再繼續進行以下的步驟。
      4. 檢查你的電子郵件,在你完成上述步驟之後的數分鐘內,你應該會收到一封邀請你加入「摘星記」部落格的電子郵件。按一下電子郵件中的連結。該連結將帶你到Blogger登入網頁。
      5. 5.用AAA登入,完成登入後,會看到一個要求確認是否要加入此部落格的連結。按一下加入,你就會被新增到此部落格中。完成這個步驟後,登出AAA帳戶。
      6. 用BBB登入。移至「摘星記」部落格的小組網頁。你將看到你的兩個使用者名稱都列在該部落格中。在「管理員」之下,勾選這兩個使用者。將兩個使用者均列為擁有管理員權限的使用者後,請登出BBB帳戶
      7. 以AAA登入。移至「摘星記」部落格的[小組]網頁。同樣地,你可以看到兩個使用者名稱都已成為管理員。在你目前未使用的使用者名稱(BBB)旁邊按一下[移除]圖示。請小心選擇要刪除的使用者名稱,才不會誤刪正在使用的帳戶(若不幸誤刪,就得從頭再來一次了)。
      8. 完成這些步驟之後,你已經將你的部落格搬移到另一個帳戶中了。
      你可用上述的步驟來轉換兩個使用者之間的所有權。

      Wednesday, May 12, 2010

      knowledge

      目標
      介紹新知識資料庫的呈現樣貌

      方法
      點按下圖中的小氣球並移動左側的方大指標。

      Saturday, January 02, 2010

      Firewroks之四--分割

      目標
      明白切割的用途,並理解讓網站資料「以少御多」的要領。

      步驟

      實例

      一、前置作業
      1. 下載work4.zip
      2. 解壓縮後會有個資料夾work4,內有資料夾images及img。
      二、為index.html更名備用
      1. 用Fireworks開啟index.png。
      2. 檔案」>「匯出精靈」,取名index.html。
      3. 進入電腦的images資料夾,複製index_r2_c1.jpg,貼入,將新複製檔更名為left.jpg。
      4. 同上,將index_r2_c8.jpg複製及貼入,更名為right.jpg。
      5. 同上,將index_r3_c2.jpg複製及貼入,更名為main.jpg。
      6. 在Dreamweaver開啟index.html。
      7. 點按作業區左側的切割圖index_r2_c1.jpg,在屬性欄內之原始檔欄位內之index_r2_c1.jpg改為left.jpg;
      8. 點按作業區右側的切割圖index_r2_c8.jpg,在屬性欄內之原始檔欄位內之index_r2_c8.jpg改為right.jpg;
      9. 點按作業區右側的切割圖index_r3_c2.jpg,在屬性欄內之原始檔欄位內之index_r3_c2.jpg改為main.jpg。
      10. 檔案 > 另存新檔,檔名為index1.html,路徑與index.html同。(這是重點)
      三、在Fireworks另建新檔並做分割
      1. 開啟index.png。
      2. 匯入一圖片,例如書本。
      3. 從工具列選用「分割工具」,在作業區加入一個分割,修正其大小及位置,使與上一步驟的圖片相同。
      4. 儲存為book.bng。
      5. 匯出精靈,檔名為index.html。
        這會蓋過之前做個的index_r2_c1.jpg;index_r2_c7.jpg及index_r3_c2.jpg的圖像。
      四、修改index.html中的圖像,並另存新檔
      1. 把名為books.jpg、love.jpg、flower.jpg、moon.jpg、fish.jpg的圖像檔置入images資料夾內。
      2. 在Dreamweaver開啟index.html,另存新檔為02_book.html。
      3. 選擇書本的圖像,在屬性編輯區將該圖像所對應的index_rx_cx.jpg更名為books.jpg。
      4. 儲存檔案。
      5. 另存新檔為03_love.html,選擇書本的圖像,在屬性編輯區將該圖像所對應的books.jpg更名為love.jpg。
      6. 儲存檔案。
      7. 另存新檔為04_flower.html,選擇情侶的圖像,在屬性編輯區將該圖像所對應的love.jpg更名為flower.jpg。
      8. 儲存檔案。
      9. 另存新檔為05_moon.html,選擇花朵的圖像,在屬性編輯區將該圖像所對應的flower.jpg更名為moon.jpg。
      10. 儲存檔案。
      11. 另存新檔為06_fish.html,選擇月亮的圖像,在屬性編輯區將該圖像所對應的moon.jpg更名為fish.jpg。
      12. 儲存檔案。
      13. 檔案>於瀏覽器中預覽>IE。
      五、回復最早先的index.html
      1. 開啟index1.html。
      2. 另存新檔index.html,蓋過。
      討論
      本練習中,我們讓每個html檔共用許多的indx_rx_cx.jpg,可減少瀏覽者耗時下載之苦。

      Firewroks之三--匯出

      目標
      將做好的Fireworks作品匯出以利Dreamweaver編輯

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

      一、匯出成html
      (方法一)
      1. 從主選單選擇「檔案」 > 「匯出」。轉存文件會製作一個HTML檔也為每一分割製作一圖像檔。為了易於之後移除這些檔,將它們轉存到新的資料夾。
      2. 選擇儲存位置,點按「新檔案夾」鈕,並為該資料夾取名,要確定該新資料夾的名稱出現在對話框的上方。「」
      3. 接受內定base name(基底名稱)之設定,Fireworks以該名稱來做HTML檔的名稱,並以該名稱為基底來為因分割所產生的GIF及JPEG檔命名。
      4. 你能夠點按Setup鈕來修改Fireworks為檔案命名的方式,以及設定轉存HTML的其他特性。
        從Slicing的彈現式選單內選擇Use Slice Objects,這會確保所有的按鈕、behavior及最佳化於瀏覽器內展現時會正常運作。
      5. 從Style彈現式選單內選擇Dreamweaver 3,這會產生在Dreamweaver 3使用該檔時的最適佳化HTML碼。
      6. 確定Location彈現式選單被設在Same Directory(同一目錄)。此一選項讓你指定所儲存的HTML檔與轉存的圖像之關係。你也能夠將所有的HTML拷貝到Clipboard(剪貼板)並將之直接貼到Dreameweaver檔內。
      7. 點按Save (Windows) or Export (Macintosh)將該檔轉存。該HTML檔現在能夠在瀏覽器內來觀看或者在Dreamweaver內做進一步的修改。
        若你想一睹為快,可在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並關閉該檔。
      (方法二) 匯出精靈
      1. 從主選單選擇「檔案」 > 「滙出精靈」。
      2. 點按「繼續」。
      3. 圓點圈選「Dreamweaver」。
      4. 點按「繼續」。
      5. 點按「結束」。
      6. 點按「繼續」。
      7. 點按「匯出」。
      8. 設定檔名,如index.html。
      9. 鉤選「包含不含分割的區塊
      10. 鉤選「將影像放入子資料夾
      11. 點按「匯出」。
      二、在Dreaweaver讀取及編輯html
      1. 啟動Dreaweaver
      2. 開啟html檔。