羽茹上課內容

• 維度架站 (免費架站)
• 台中市才藝教學服務人員職業工會 (版面大小固定)
• 教育生活家 (版面隨應螢幕自動調整)
• JQuery (免費的效果程式)
• JQuery-super Cool 3D Image Transitions effect
• html5

期末作業

目標：

1. 以在http://www.webs.com架網站為基礎，為國內某一公司改良網站，使其符合
   使用者友善
   使用者經驗
2. 完成改善後，可與該公司接洽，為自己搭上出名或賺錢的機會。

時程：
11/25 選定公司，組織架構
12/02 放假 版型規畫
12/09 文字處理
12/16 圖像處理
12/23 圖像處理
12/30 動畫處理
01/06 期末報告
01/13 期末報告

可改善的公司例子

• 貝簡易機械股分有限公司
• 富潤股份有限公司
• 如龍木工機械股份有限公司
• 鴻運手工具股份有限公司
• 有可能改善的公司

測試

這是一篇測試文,各位已看到用類似的圖案表示不同的意義

2012同學在webs.com的網站

同學們，請點按此處所設好的webs.com網址，再進入webs.com修改你的網址，使與你的部落格的網域名稱(domain name)的第一個名稱相同。例如：你在
部落格的網址是okfamily.blogspot.com
在webs.com的網址是okfamily.webs.com
若無法直接在webs.com修改，可以新增一個。

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偉

在webs.com及wopop.com建立網站

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

方法

1. 到http://teachweb.webs.com看使用說明
2. 選擇繁體中文
3. 設定網址 (先以學號sxxxxxxxx.webs.com為網址，sxxxxxxxx為你的設定，餘為內定)
4. 挑選樣版
5. 試做修改

一、用webs.com架設的網站例子

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

參考瀏覽

• http://www.skyzone45.com/

二、用wopop.com架設的網站例子

• 33003002
• 33003004
• 33003007
• 33003008
• 33003009
• 33003012
• 33003013
• 33003017
• 33003018
• 33003020
• 33003021
• 33003022
• 33003026
• 
  

延伸瀏覽

• 皮克斯網站
• webby.com免費網站
• evernote網站

期中作業

在你的部落格完成

• 版頭的圖像設計
• 新增一個與你的部落格相關性高的youtube作品
• 11月/4日 13:40 課堂發表

擷取影片碼的符號

• embed
• get code
• share (分享)

蜘蛛捕獵

作業總覽

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

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的圖像)
主要顏色搭配