圖像的上傳及位置調整

這是水晶的價目表

補充

1. 連續圖片上傳，須一次傳一張，其排序呈疊碗式，最先上傳的在最底端。
2. 要調整圖片的上下順序，須進入修改Html模式，選取「圖片所代表的語法」→複製→剪下→在欲貼圖的位置貼上。
   

<這些字是小括弧內>

文字處理

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

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

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

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

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

補充

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

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 期末作業評核﹣﹣商業網站設計或改造
    
    

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

目標
假設你在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. 完成這些步驟之後，你已經將你的部落格搬移到另一個帳戶中了。

你可用上述的步驟來轉換兩個使用者之間的所有權。

knowledge

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

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

網路傳播頭條新聞2010

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

1. 21 你掛掉後的虛擬世界

10月

1. 11 台女臉書日記英媒推崇

08月

1. 17 web is dead, long live the internet

07月

1. 16 History of Online Shopping

03月

1. 22 Youtube成功的五大秘密
2. 15 dot.com二十五周年紀念

02月

1. 27 土豆寫傳奇 網路夯進誠品
   
2. 18 Facebook的profile反映真正的你
   
3. 04 iPad會改善網路嗎？
   
   • html5正在改變網路
4. 03 沉溺網路易沮喪
   
5. 01 2010年亞洲最佳部落格提名
   

01月

1. 30 Google淘汰對IE 6瀏覽器的支援
   
2. 29 談革命(數位時代)
   
3. 22 最受歡迎密碼也最容易被駭

• 全球最夯的100個網站
• 亞馬遜書店剉咧等的scribd網站
• 蘋果剉咧等的spotify音樂網站
• Facebook剉咧等的foursquare人際網站

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檔。
   

Firewroks之二--按鈕

目標
在Fireworks製作按鈕。

步驟
一、做按鈕外形

1. 以向量工具（如圓或矩形）畫一按鈕外形。
2. 按Ctrl +X，剪掉按鈕外形。
   
3. 從主選單選擇「編輯」>「插入」> 「新增按鈕」。
   此時會出現按鈕對話框。
4. 按Ctrl +V。
   將按鈕外形貼入。
   
5. 從主選單選擇「視窗」 > 「對齊」。
6. 在對齊視窗內點按「畫布」，再按「水平置中對齊」，續按「垂直置中對齊」。
7. 在按鈕編輯器內修改按鈕外形的屬性。

二、疊上文字

1. 從工具列選取「文字」工具，在按鈕外形內鍵入文字如Home。用游標選取文字，選用視窗下方的「置中對齊」。
2. 從主選單選擇「視窗 > 「對齊」。
3. 在對齊視窗內點按「畫布」，點按「水平置中對齊」，續按「垂直置中對齊」。
4. 點按「滑過」標頭，點按視窗下方的「拷貝一般圖像」
   如此，會將「一般」標籤內的圖像拷貝到「滑過」關鍵影格內。
5. 點按視窗下方的功能，改變「滑過」標頭內之圖像的外框與內填色彩。
6. 點選「按下」標頭，點按視窗下方的「拷貝滑過圖像」。
   如此，會將「滑過」標籤內的圖像拷貝到「按下」標籤內。
7. 點按視窗下方的功能，改變「按下」標頭內之圖像的外框與內填色彩。
8. 點按「按下後滑過」標頭，點按視窗下方的「拷貝按下圖像」。
   如此，會將按下」標籤內的圖像拷貝到「按下後滑過」標籤內。
9. 點選「作用區域」標頭，點按視窗右下的「完成」。
10. 指定URL：點選「Active Area」標頭，點按視窗下方的「Link Wizard...」，在「Link Wizard...」視窗內點選「Link」標頭，在「URL」內鍵入指定的位址如http://cd.ntit.edu.tw。
11. 關閉Button編輯器。

三、複製按鈕

1. 將作區內的按鈕移到定位，按住「Alt」鍵（Windows）或Option鍵（Machintosh），把按鈕拉移以複製之。
2. 重復上述步驟數次，迄完成所需之按鈕數。
   
3. 點按新複製的按鈕，在作業區下方的屬性欄在之「文字」欄位內更新該按鈕文字如Home改為News。
4. 點按「連結」標頭，更改URL。
5. 為其他按鈕重復上3.及4的動作。

四、修改按鈕

1. 直接點按第一個繪製的按鈕兩下。
2. 修改它的向量外形。
3. 修改它的文字。
   

五、存檔

1. 「檔案」 > 「另存新檔」，取名英字如index，其檔案格式內定為png。
   此png檔可以讀取修改。

補充
URL分絕對URL與相對URL兩種：

• 絕對URL是完整標示出如http://www.cd.ntit.edu.tw/news/01.html。
• 相對URL表示該URL與當下使用的html之間的相對位址關係。
  檔名.htm是指在同一個資料夾內。
  
  • ./../file.htm是在往上二階的資料夾內的檔案。
  • htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。

Fireworks之一--概述

目標
認識Fireworks 的對網頁編排中的圖像處理。

前置作業
在你的www資料夾內新增work4資料夾。你在本練習的內容要放置在該資料夾內。

步驟
一、預想圖
網頁的版面及內容（可以徒手畫概念圖，或直接在畫圖軟體內完成。）

二、開啟新檔，設頁大小。
對於800x600大小的螢幕，扣除瀏覽器的外框及圖示，真正可以置放內容的空間為760x420。

三、匯入圖像
圖像可以是點陣圖和∕或向量圖。在點陣式軟體如Photoshop或向量軟體如Illustrator或Freehand或CorelDraw做好圖片檔案，存成PNG格式或JPG檔。

四、使用繪圖工具
(一) 影像工具

1. 從主選單選擇「檔案」 > 「匯入」，匯入所需的圖像檔案。
2. 以工具列中的「指標工具」做好圖像的編排。
3. 以工具列中的「指標工具」點按影像圖二下即可進入影像編輯模式。
   此時作業視窗下方緣的「結束點陣圖模式」會呈紅色實彩，點按之即可切換到向量工具模式，此時該「結束點陣圖模式」圖示會變成灰色狀。

(二)向量工具

1. 如畫矩形、橢圓及具茲曲線等。
2. 使用上三項工具模式時，可在作業視窗下方用「筆畫」，「填色」及「特效」等功能來增加圖像的特效。例如：利用「填色」及「特效」等功能，一圓形變成一凸起的圓鈕；或一矩形變成有底紋的按鈕。

下一進度
製作按鈕

新舊網站設計語法的差異

目標
比較用table及div設計上的差異

實例觀察
進入下列兩個網站之後，從瀏覽器上的檢視>原始碼 (Firefox:頁面原始碼)，你可以看在memocom網站看到<table>....</table>的語法而在Apple網站看到<div>....</div>的語法。

• 用table語法的網站 Memocom
• 用div語法的網站 Apple

小結
隨著網路軟硬體的進步，編輯網站所用的語法亦隨之進化，其中之一是早期廣為使用的table語法逐漸被div所取代。原因是div的彈性大，且結合CSS，使網站的管理更有效率。

目標
為你在學校的網站新增內容

學習內容

• 網站地圖 Sitemap
• 增設網站內容
• 使用者友善
  

步驟

1. 在www資料夾內新增work1；work2；work3三個資料夾。
2. 將第一次做的index.html複製到work1資料夾內。
3. 將第二次做的內容直接移入work2。
4. 將下列的作業取名為index.html，存入work3資料夾內，其內容包括 (可連結)
   
   • 待修改網站的超連結。
   • 網站地圖 (sitemap)。
     
   • 擷取待修改網站的首頁
   • 新設計頁首的草圖1、2及3 (草圖可在繪圖軟體內製作)

問題

1. 如何在瀏覽器看到work1、work2及work3內的作品？

補充
螢幕擷取圖像的方法可用以下方法之一：

• 按PrintScreen鍵→到Photoshop去剪栽。
• 到http://www.cnet.com去下載ScreenPrint V3，安裝後可以擷取圖。

簡易網站設計

目標
設計一簡易簡站，張貼你在部落格中的五篇文章。

學習新功能

• 超連結
• 命名
• 文字編排
  

步驟

一、參考網站

1. 五愛的首頁。
2. 徐文嫻的作品
   

二、文字

1. 從其它文件將文字拷貝到記事本，加以編輯 (必要時) ，再從記事本拷貝到Dreamwever。

三、圖像

1. 圖像的處理：jpg檔不要再三儲存，會破壞品質，格式一定要RGB，不可用CMYK。
2. 圖像一定要上傳到遠端的檔案夾內。

四、命名

1. 注意各html檔的命名法則--有數字及名字。
2. 放在網路上的有關檔案，不論html、swf、jpg，其命名萬萬不能用中文或特殊的符號像阿花.jpg或:-).html。

五、建立檔案

建議閱讀

期末作業

目標
以使用者經驗改善一家企業的網站

方法

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

可改善者

• 台中技術學院日間部、進修部、進專及補校的網站

改善實例

• 大煒塑膠工業有限公司
  

繳交

1. 在你的www資料夾內新增work5資料夾，把你修改的網站置入其中。
2. 在你的www資料夾的index.html檔案內，加入文字「待修網站」及「作業五」，將前者該文字超連結到你欲修改的網站，後者超連結到work5一資料夾的首頁。
   

期限

1. 11/23(一)~29(日)：主題選定
2. 11/30~12/06：分析組織架構圖
3. 12/07~12/13：設計版型
4. 12/14~12/20：設計版型
5. 12/21~12/27：初稿
6. 12/28~01/03：修稿
7. 01/04~01/10：完稿
8. 01/11~01/17：檢討

個人網頁嘗鮮

目標
在學校的網頁空間內建立一個以文字為主的首頁

步驟

1. 點按右側標籤內的「架設網站」
2. 完成你的index.html之後，檢視無誤之後，在本欄意見欄以超連結方式留言。
   

期中作業自評

目標
為本課程的部落格自評

方法

1. 新增一篇文章
2. 標題為「期中作業自評」
3. 在內容中完成下列諸列：
   
   • 宣言
   • 經營甘苦
   • 最滿意的一篇
   • 後續經營想法
   • 共寫了幾篇
   • 其他 (調查或RSS)或另類心得 (對教學內容之建議)
     

補充
寫完自評，下周(11月28日)後，你可修改文章→儲存為草稿，以保持你部落格內容的一致性。

網路傳播頭條新聞2009

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

12月

1. 21 網站企劃 主導公司作戰
   
2. 13 Facebook的十大故事
   
3. 03 2010年網路十大趨勢觀察
   

11月

1. 23 Youtube效應：經由病毒影片掙錢
2. 22 十年內十大網路事件
   
3. 17 奢華業向網路找商機
   
4. 16 世界最棒旅台灣馬來骨肉茶奪冠
5. 14 李安在英國Strand受訪錄音
6. 12 小企業如何用facebook行銷？
   
7. 09 網路殘酷，Geocities壽終正寢！
8. 09 Buberry到線上找顧客
   
9. 08 為什麼我們會對線上的某些廣告情有獨鍾？
10. 06 你上了Facebook遊戲的當？
11. 06 Facebook是騙徒的天堂？
    
12. 04 蘋果電腦執行長Stever Jobs的十年豐功偉業
    
13. 03 蘋果電腦執行長Steve Jobs傳奇

10月

1. 30 在線上建立你的品牌Me2.0

08月

1. 03 為什麼建部落格對你的生涯有好處？
   

附錄
十大網路事件快覽
2000 • Craigslist expands beyond San Francisco • Google AdWords launches
2001 • Wikipedia launches • Napster shuts down
2004 • Google's IPO
2006 • Online video revolution • Facebook opens up, Twitter takes off
2007 • The iPhone debuts
2008 • U.S. presidential campaign
2009 • Iranian election protests

html語法妙用舉隅

目標
學會一些html語法的使用

學習項目

1. 在留言版內做超連結
   <a href="網址">連結主題名稱</a>
2. 很長的文章，為了要用「read more" (閱讀更多)」來縮版幅，可在「修改Html」模式下加入字串：
   <!-- more -->
3. 以下兩個特殊符號，須在修改Html模式下的輸入
   < 鍵入&lt; > 鍵入&gt;
4. 將一網誌(具圖文)複製成另一網誌的方法：將進入原始網誌的「修改HTML」模式→拷貝所有的html語法→貼到目的地網誌的「修改HTML」→發佈文章。

補充

• html=hypertext makeup language
• 看html的好方法之一是用Dreamweaver軟體
• html5
• html5範例

期中作業評核

目標
發表你九週來經營的部落格。

日期
11月9日-15日之上課日

方法

1. 每人3~5分鐘。
2. 說明以下項目：
   • 宣言
   • 經營甘苦
   • 最滿意的一篇
   • 後續經營想法
   • 共寫了幾篇
     
   • 其他 (調查或RSS)