作業總覽

一、在你的部落格新增一篇文章，回答

1. 網路是什麼
2. 比較瀏覽器，何者最好？
3. FB改變你什麼？

二、在你的部落格新增第二篇文章，於其中推荐

• 一個部落格
• 二個網站
• 三個Facebook

三、從以下的30個Pinners中選出你最喜歡的三個，並在你的部落格中描述它們給你的啟示

1.  The Top 30 Pinners You Should Follow Now

延伸瀏覽

• http://vincicat.blogspot.tw/2012/03/pinterest.html
• http://www.soft4fun.net/tag/pinterest/
• http://en.wikipedia.org/wiki/Pinterest

四、從以下的50個網站挑三個你最喜歡的，並在你的部落格中描述它們對你的最佳用途

1.  2012年最好的50個網站
2. 遊戲兼捐米，好玩

2012名單

1. 3300xx03,林O玹
2. 3300xx16,王O禾
3. 3301xx01,黃O武
4. 3301xx02,王O姿
5. 3301xx03,許O鈞
6. 3301xx04,曾O瑜
7. 3301xx05,潘O羽
8. 3301xx06,黃O媚
9. 3301xx07,許O茵
10. 3301xx08,沈O柔
11. 3301xx09,潘O璇
12. 3301xx10,梁O誠
13. 3301xx11,謝O穎
14. 3301xx12,陳O哲
15. 3301xx13,李O蓁
16. 3301xx14,余O茹
17. 3301xx15,張雅涵
18. 3301xx16,梁O鈞
19. 3301xx17,劉O桃
20. 3301xx18,李O岑
21. 3301xx19,林O瑩
22. 3301xx20,黃O右
23. 3301xx21,卓O倫
24. 3301xx22,蔡O珊
25. 3301xx23,張O鳳
26. 3301xx24,吳O榕
27. 3301xx25,羅O旻
28. 3301xx26,戴O儀
29. 3301xx27,李欣
30. 3301xx28,陳O幀
31. 3301xx29,白O凱
32. 3301xx30,洪O真
33. 3301xx31,黃O筠
34. 3301xx32,吳O凰
35. 3301xx33,陳O宇
36. 3301xx34,張O鈺
37. 3301xx35,張O瑋
38. 3301xx36,林O聿
39. 3301xx37,林O永
40. 3301xx40,陳O穎
41. 3301xx41,李O穎
42. 3301xx43,林O廷
43. 3301xx44,王O慶
44. 3301xx45,何O德
45. 3398xx08,吳O賢
46. 3399xx06,黃O偉

進度

第1週  概論 blogger facebook使用
第2週  facebook使用
第3週  facebook使用
第4週  部落格(blog) web 1.0 2.0 3.0
第5週  部落格(blog) 之文字與圖像應用
第6週  部落格(blog) 的影片及動畫處埋
第7週  部落格(blog) 語法
第8週  部落格(blog) RSS應用
第9週  期中考週 期中作業
第10週  網站設計實務
第11週  優良網站瀏覽
第12週  網站規畫、網站上傳
第13週  網頁文字與圖像編輯
第14週  超連結的應用
第15週  表格的使用
第16週  css樣式的使用
第17週  網站多媒體的應用
第18週  期末考週 期末作業

網路相關術語

網路傳播相關資訊

• internet
• internet history
• Web browser:  IE; Firefox; Opera; Safari; Chrome
• Search Engines: google;
• email: hotmail; gmail
• social media: facebook; blog; twitter; plunk; Flicker
• Shopping: Amazon
• Pinterest

有趣或有用的網站

• 數位超級美女
• 毛毛蟲奧運表演
• 洛杉磯時報
• 紐約時報
• 時代雜誌
• 新聞週刋

頭條新聞2012

以下的新聞，可能對你的網路傳播觀念有所啟示。
12月

1. 8 internet of thins

9月

1. 27 The Top 30 Pinners You Should Follow Now
2. 2012年美國5o個最佳網站

4月

1. 8 臉書惹禍 男遭亂棒打死 曖昧約人妻 激怒妒夫

2月

1. 24 社群新聞／西班牙科技阿媽 戳破網路假象
2. 24 http://www.behance.net/gallery/Grandmother-Tips-Vol-20/2960437

2012必看的部落格

• 屋子失火，你會帶走哪些家當？
  http://theburninghouse.com
• 藝術獨存
  http://theonlymagicleftisart.com
• 鏡頭當記者
  http://fotojournalismus.tumblr.com/
• 穿戴得像大人
  http://putthison.com/
• 你我的時尚
  fromme-toyou.tumblr.com
• 收拾整齊
  http://thingsorganizedneatly.tumblr.com/
• 衣著的流行與歷史
  http://omgthatdress.tumblr.com/
• 精明是好事
  http://www.itsokaytobesmart.com/
• 老舊的廣告
  http://oldads.tumblr.com/
• 錢不重要,只在不夠時才重要
  http://www.moneyisnotimportant.com/
• 不消費--舊物再用
  http://unconsumption.tumblr.com/
• 芝蔴街--學齡前的影片能給你養分
  http://sesamestreet.tumblr.com/

資料來源
30 Must-See Tumblr Blogs

在webs.com架網

• 33003001
• 33003004
• 33003005
• 33003006
• 33003008
• 33003009
• 33003010
• 33003011
• 33003013
• 33003018
• 33003019
• 33003020
• 33003022
• 33003025
• 33003012 (wopop)
• 33003021 (wopop)

網站架設

目標
活用免網站架設自己的(預設的)公司網站

方法

1. 到http://www.wopop.com網站登錄 (本項自2011/12/18暫不使用)，改用下一項
2. 到http://teachweb.webs.com看使用說明
3. 選擇繁體中文
4. 設定網址 (先以學號sxxxxxxxx.webs.com為網址，sxxxxxxxx為你的設定，餘為內定)
5. 挑選樣版
6. 試做修改

參考瀏覽

• http://www.skyzone45.com/

測試連結新網站

• 33003002
• 33003004
• 33003005
• 33003006
• 33003007
• 33003008
• 33003009
• 33003010
• 33003011
• 33003012
• 33003013
• 33003014
• 33003015
• 33003017
• 33003018
• 33003019
• 33003020
• 33003021
• 33003022
• 33003023
• 33003025
• 33003026
• 33983005

延伸瀏覽

• 皮克斯網站

備份blogspot

以下是你為在Blogger的部落格備份的方法

• 每篇文件自動送到你指定的email
• 整個部落格備份
• 使用第三團體的應用程式

參考

• http://www.quickonlinetips.com/archives/2005/11/back-up-your-blogger-blog/
• http://blogbackupr.com/
• http://www.thesitsgirls.com/2010/03/how-to-back-up-your-blogger-blog/

測試標籤

使用標籤的目的像是一個人的分類

html

我學網路傳播

連結到奇摩

連結到蕃薯藤

台中精機網站使用意見

網誌進階編輯

 概念

以下是成立網誌須具備的觀念：

• 一個帳號可以產生數個網誌。
• 各網誌要有各自的主題方向、網誌標題及網址。
• 在網誌貼文，文章有標題及內文，其內文可以文字、圖像、動畫及影音等組合。
• 文章的排序依時間排定，最新的貼文，擺在最上層。
• 文章利用標籤做分類。
• 網誌的背景不要太搶眼，注意色彩調和性及主題相關性。

實務

一、登入
二、新增文章及編輯文章

1. 撰寫 / HTML
2. Link
3. 插入圖片
4. 插入Video

三、更改版面設計 (點按「版面配置」)
四、更改設定
五、加標籤
六、新增網誌進入網誌清單
七、版面配置→新增小工具

點按「範本」
網誌標題←切換→文章標題
在網頁狀態下，點按右上角的「設計」
點按「網頁即時狀態」下方的「自訂」

範本
背景
調整寬度
版面配置

進階
版頭圖像處理 (置入一張800x108pix的圖像)
主要顏色搭配

文字練習

我打了一段文字

我用Word打了這一段文字

秋後雙颱環伺 尼莎恐轉中颱

預計周二轉雨，而第18號颱風海棠上...

高考新制名額增 律師飯難吃

錄取人數近千人，衝擊本來僧多粥少...

Nielson調查

以下是2011年9月11日的AOl及Nielson的調查，可供網路傳播學習者參酌。

• Content is the fuel of social web : Aol & Nielsen Online 2011

View more presentations from nextemarketing

• https://www.facebook.com/business

Facebook用在教學上

• http://www.edumorphology.com/2008/02/best-practices-for-educators-using-facebook/
• http://mfeldstein.com/teaching-with-facebook/
• http://www.schools.com/visuals/college-professors-on-facebook.html
• http://blog.inigral.com/using-facebook-to-teach-history/
• http://blog.chinatimes.com/tomsun/archive/2010/01/22/466841.html
• http://theedublogger.com/2011/05/11/the-why-and-how-of-using-facebook-for-educators-no-need-to-be-friends-at-all/
• http://www.allfacebook.com/7-best-practices-for-educators-using-facebook-2011-06
• http://www.thisislondon.co.uk/standard/article-23949236-students-need-to-be-taught-how-to-use-facebook-responsibly.do
• http://www.aaeteachers.org/index.php/blog/202-four-ways-to-make-facebook-work-for-teachers
• Top 25 Facebook Apps for Educators
• http://www.youtube.com/watch?v=OQhEk9ZKekA
• http://www.youtube.com/watch?v=1QYOoCG_zbA&feature=related
• Make Your Facebook Account Private
• Delete a Facebook Account
• Does Facebook really care about you?

延伸瀏覽

• How to Stand Out Among 800 Million Facebook Users如何從臉書8億用戶脫穎而出

方法一、請學生把我加入朋友，再下載 “Files”及“Questions” 模組，作業貼入 “Files” 用“Questions” 模組將問題送給學生。
方法二、同上, 但為這班做一個group. 在該group貼上作業及班級注意事項。

2011名單

33003001
33003002
33003004
33003005
33003006
33003007
33003008
33003009
33003010
33003011
33003012
33003013
33003014
33003015
33003017
33003018
33003019
33003020
33003021
33003022
33003023
33003025
33003026
33983005

2011金牌部落客

資策會選出2011年的金牌部落客五人

• 美食 王智昀
• 遊遊 Rinka
• 生活 陳佳欣 快樂。帶著娃娃去旅行
• 文創 黃淑文 
• 時尚 馬同學

商業周刊Alive挖出的精彩部落格

1. 蘇卓英的Eagle部落格
2. 許才力的一位剛接觸水草缸的玩家
3. 管憶華的台灣針孔攝影聯盟

網路傳播頭條新聞2011

以下的新聞，可能對你的網路傳播觀念有所啟示。

12月

1. 30 2011年Time雜誌票選最佳部落格

10月

1. 03 社群媒介廣告收入大增

9月

1. 24 紙媒衰世與網媒盛世
2. 07 阻斷電郵泛濫五招 5 Easy Steps to Stanch the E-Mail Flood

8月

1. 16 2011最佳50個網站
2. 16 Yale Open Course
3. 15 社群網站行銷 犯八錯誤…非死不可

7月

1. 24 2011金牌部落客資訊

3月

1. 24 上網說人很娘 判拘役55天
2. 23 使用社交媒體要有公德

期末作業

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

方法

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