部落洛行銷五大秘訣

部落格行銷已是重要的行銷工具，使用該工具有以下五大秘訣：

• 建立個性：不要讓你的部落格一板一眼，而是發出你的聲音，使你的部落格有個性。
• 貼文要有一致性：至少一周一次，最好是隔天一次。
• 保持簡單：簡單就是力量，貼文不在長，而是要貼有趣的。
• 允許發表意見
• 注意標題名稱：好的標題名稱會引起注意，會增加點閱流量。而且好的標題會是網路搜尋的焦點目標。

相關子題

• 網路搜尋最佳化 (Search Engine Optimization)
  

FTP的作法

目標
以FTP管理你的網站

方法
一、使用

1. 點按電腦桌面上的我的電腦。
2. 於視窗的網址區輸入如下之網址。
3. 輸入使用者名稱及密碼。

接著，遠端站台上的檔案夾及檔案會出現，你可為它編輯，或將本地端電腦上的檔案拖拉放到遠端的資料夾內。

二、利用FileZilla

1. 啟動Filezilla。(免費下載的FileZilla)
2. 將下圖 (可點按放大) 的紅色框由左而右執行。
3. 將左下近端站台的swf檔拖拉放到右下欄遠端站台指定的檔案夾內。

期未作業優選

優選榜單

設三A

• 杜靜宜
• 邱魏蕙
• 蘇郁淳
  
• 張勝智
  
• 陳其達
• 盧翔瑋

設三１

• 黃淑雯
• 鄭嘉惠

夜設三A

• 胡埔璿
• 莊薇瑧
• 曾偉玲
  

突破10MB網站空間的限制

部份同學發現學校給的網站空間10MB不夠容納一學期的作業使用，針對該問題，可進行以下的處置：

1. 完成前一欄【節約與簡單化】所描述的節約作法。
2. 檢查近端的資料夾內，凡副檔名為psd、png、fla、doc者，全數剪下，再貼到不是網站用的資料夾內備存。
3. 將瘦身過的網站上傳，蓋過原先的網站。或者先刪掉遠端的www資料夾，再將近端的www資料夾拖拉放到遠端。
4. 再次檢查遠端的www資料夾內是否仍有副檔名為psd、png、fla、doc者，若有，重復前二步驟。

節約與簡單化

設計網站時，「節約」是一項很重要的習慣。此處的節約是以不改變網站內容品質的前提下，讓檔案最小化。

網頁的節約原則
任何頁面檔案變大，一定會增加上傳及下載時間。若一個網路有50頁，每頁檔案大小多50k，整個網站就增加2.5MB，以一秒傳100k，就要多耗25秒。
一般人很難忍受六秒內看不到頁面，若你的頁面檔案太大而讓瀏覽者跳離，那會是你的損失，可能損失一筆大生意。因此，你必須謹守以下的節約原則：

• 省掉不必要的圖像。
• 可以利用底色處，就不要用同色彩的圖檔。
• 任何圖檔均在Photoshop或Fireworks完成為網路用，能壓縮儘量壓縮。
• 不要在Dreamweaver內對圖檔做縮小或放大。
• 文字要精簡扼要。
• 想想一大圖，若將它的長寬縮小為90%，則它的檔案大小可以變為原來的81%；縮小為80%則變為原來的64%，節約相當可觀。

簡單化
讓網站管理簡單化是另一類的節約，因為它可以節省許多精力。以下是簡單化的方法：

• 圖檔尺寸類型化。例如，整個網站的圖檔大小只有四種大小，第一種是主圖、第二及第三種是次圖、第四種是按鈕。
• 圖像處理可善用Photoshop的批次管理。
  
• 文字的管理CSS化，利用CSS可以有效管理文字字型及色彩等樣型的變化。
• 資料分類系統化，資料夾的命名可以結合流水號及功用名稱。
  

網路行銷之網頁設計10大秘訣

網頁設計的目的之一是行銷，而欲達此目的的秘訣有十，簡列如下：

1. 文字說明要清楚（Clear Writing）
2. 要包含連結（Include Links）
3. 要縮小圖片（Make Graphics Small）
4. 提供免費工具（Free Tools are Available）
5. 內容具說服力（Be Persuasive）
6. 多用文字少用圖（Use Text More Than Images）
7. 內容有組織（Organization）
8. 包含有價值的資訊（Include Valuable Information）
9. 聚焦在預期客戶的需求（Focus on Prospective Client's Needs）
10. 與其他網站交換橫幅廣告（Banner Exchanges）

資料來源http://website-design.themesite.info/

Meta標籤應用

在head標籤內，除了可以設style標籤之外，也可以設meta標籤，而在meta標籤的內容及用途常有下列二種：

• 頁面更換

假設你有三個頁面，檔名分別為index.htm;index1.html;index2.html,要換每格10秒換一次，則在Meta內：
第一個網頁(index.html)之<meta>標籤
<meta http-equiv="refresh" content=10;URL="index1.html">

第二個網頁(index1.html)之<meta>標籤
<meta http-equiv="refresh" content=10;URL="index2.html">

第三個網頁(index2.html)之<meta>標籤
<meta http-equiv="refresh" content=10;URL="index.html">

參考網站：http://web.ntit.edu.tw/~hsieh/meta/

• 增加網站、部落格的知名度

當你設計好網站或部落格之後，就要設法增加它的知名度，方法之一是刊登在在平面軟體如雜誌或名片上。另外，你可以在網站的head標籤內利用meta name="description"及meta name="keywords"來完成。
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="description" content="這是愛書人的雜記">
<meta name="keywords" content="謝寶泰、雜記">
一般要注意

1. <meta name="description" content="xxxxxxxxxxxx">此處的xxxxxxxxxxxx以二十個字描述網站的內容
2. <meta name="keywords" content=" yyyyyyyyyyyyy">此處的yyyyyyyyyyyyy代表總數少於二十字的關鍵字

css入門

CSS概述
CSS是Cascading Style Sheet的縮寫，中譯為樣式表。它是一組樣式的集合，功能是要讓網站頁面的設計能結構化、經濟化及美觀化。
樣式可以是網頁內部的，也可以是外部的。前者適用於單一頁面，後者適用於整個網站﹣﹣先設好一個.css檔，網頁再連結該.css檔。

網站設計的必備能力之一是善用CSS，以下的網站是值得一覽：

• http://www.csszengarden.com/
• http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/
  
• http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm
• http://www.w3schools.com/css/
• http://www.sitepoint.com/books/cssant1/
• http://www.photoshopcafe.com/tutorials.htm
• http://www.greenmaven.com/
• http://www.zafu.com
• http://www.adobe.com/devnet/dreamweaver/
• 用CSS及Photoshop做網頁粗稿http://alistapart.com/articles/quickcssmockupswithphotoshop
• 在xuite修改CSS
• CSS一招半式
  

建議閱讀

• 賴虹燕譯，Web CSS網頁樣式設計學 ，台北：博碩，200x年。
• 黃聰明，CSS版面樣式設計實務，台北：文魁，200x年。
• 碼上就用CSS，台北：上奇，，200x年。
• 胡為君譯，CSS網頁設計手扎，101個您一定會遇到的問題與解答。台北：上奇，200x年。
• 胡為君譯，The Zen of CSS-網頁視覺設計の王道，台北：上奇，200x年。
• 王煦淳譯，WebLayout設計的美學, 台北：旗標，2006。
  

日三A期末作業說明

目標
以本學期所學做以下兩者之一

• 為既有的公司改善其網站
• 為一家中小企業建立網站

同學請於12月24-28日那一周須提出設計對象或方向。

製作程序

1. 找到你認為可以修改的網站甲。
2. 仔細瀏覽並列出其可改善的部份。
3. 找到該網站的同業，找到你認為最好的網站乙。
4. 列出網站乙的優點。
5. 為網站甲規畫出版型A及B，與同學檢討，修改為C。
6. 以C的版型，陸續將網站甲修改完成。
7. 將完成的作品上傳到學校的個人網站的「final」資料夾內。
8. 從你的個人網站首頁加入以下兩項
   「擬改善之網站」六個字，並超連結到該網站。
   「期末作業」四個字，將它超連結到上一程序的首頁。

宣告被修改網站

• 請在本欄右下意見欄內留下你要修改之網站的網址。
• 在你的部落格期末作業欄，完成上述製作程序的詳實紀錄。
  

日三1期末作業說明

目標
以本學期所學做以下兩者之一

• 為既有的公司改善其網站
• 為一家中小企業建立網站

同學請於12月24-28日那一周須提出設計對象或方向。

製作程序

1. 找到你認為可以修改的網站甲。
2. 仔細瀏覽並列出其可改善的部份。
3. 找到該網站的同業，找到你認為最好的網站乙。
4. 列出網站乙的優點。
5. 為網站甲規畫出版型A及B，與同學檢討，修改為C。
6. 以C的版型，陸續將網站甲修改完成。
7. 將完成的作品上傳到學校的個人網站的「final」資料夾內。
8. 從你的個人網站首頁加入以下兩項
   「擬改善網站」六個字，並超連結到該網站。
   「期末作業」四個字，將它超連結到上一程序的首頁。

宣告被修改網站

• 請在本欄右下意見欄內留下你要修改之網站的網址。
• 在你的部落格期末作業欄，完成上述製作程序的詳實紀錄。

夜三A期末作業說明

目標
以本學期所學做以下兩者之一

• 為既有的公司改善其網站
• 為一家中小企業建立網站

同學請於12月24-28日那一周須提出設計對象或方向。

製作程序

1. 找到你認為可以修改的網站甲。
2. 仔細瀏覽並列出其可改善的部份。
3. 找到該網站的同業，找到你認為最好的網站乙。
4. 列出網站乙的優點。
5. 為網站甲規畫出版型A及B，與同學檢討，修改為C。
6. 以C的版型，陸續將網站甲修改完成。
7. 將完成的作品上傳到學校的個人網站的「final」資料夾內。
8. 從你的個人網站首頁加入以下兩項
   「擬改善之網站」六個字，並超連結到該網站。
   「期末作業」四個字，將它超連結到上一程序的首頁。

宣告被修改網站

• 請在本欄右下意見欄內留下你要修改之網站的網址。
• 在你的部落格期末作業欄，完成上述製作程序的詳實紀錄。

行動影音參賽作品上傳

將你參加行動影音的作品以work08.html一併上傳到學校的個人網站，它能由你的首頁之「作業八」超連結而得。

編故事之法--巧合

編故事，有很多種方法，其中之一是「無巧不成書」，此處的巧可做巧妙解，而巧妙又可由巧合來組成。例如：

甲：「何謂『巧合』？」
乙：「我正想問你？」

上述甲乙的問答實在很「巧」，問者揭開主題序幕，答者雖沒有給真正的答案，但卻契合問題的答案，真正的答案竟然是兩人問答的情境本身。這就是巧。這樣的巧，可以由時間、事理的巧合來完成。上述甲乙的問答，兩人同時有相同的問題，是時間的「巧」，而他們的問題本身與脈絡結合就是事理的「巧」。
這樣的巧，雖帶有不可預期性，但不可否認地，它稱得上是一種創意。

根據上述的推論，以下這則「十五貫」的故事，稱得上夠有創意了。
南宋，臨安有位先生名叫劉貴，她的妻子是王氏，妾是陳氏。
有一天，劉貴帶妻子向岳父拜壽。岳父看女婿很窮，給十五貫錢營生去。女兒要留住娘家幾天，劉貴就先回家。途中遇好友，喝醉酒後才返家，妾看他身上有錢，問原由。劉貴開玩笑說：「我因太窮，不能養活全家，所以已經把你賣給人了，這就是賣得的錢，明天就把妳送過去。」說完，就呼呼睡著了。
妾想告知父母這件事，就到鄰居朱三家，說被賣一事，所以請求借宿一夜，隔天早晨才回父母家。但這一晚，劉貴醉睡中，小偷潛入，劉貴驚覺，爬起來追賊，小偷看地下有一把斧頭，就拾起斧頭殺了劉貴，把十五貫錢全偷走。
第二天早晨，鄰居看劉貴很久沒開門，進入探視，看到劉貴死狀。朱三就說出劉貴的妾借宿之事，之後大家一起追尋。
陳氏返父母家途中，在一樹下休息。這時，到城裡賣絲的崔寧，身上帶著十五貫錢，也在樹下休息。
追陳氏的人見狀，將兩人帶到官府，判妾與有崔有奸情因而殺人、盗錢，砍首示眾。
陳貴的妻子王氏為丈夫守喪三年後，她的父親因王家太窮，就派人接她回娘家。返家途中，入樹林避雨，卻被強盗擄獲，成了押寨夫人。
強盗無意間說，數年前曾當小偷，殺了主人偷了十五貫錢。
王氏知殺死丈夫的兇手就是這位強盗，趁機到臨安府告狀，整件凶案才真相大白。強盗被判斬首，家當全抄，一半給王氏。

解析這個故事，可以發現它有以下五巧：

1. 劉貴途中遇好友，喝醉酒後才返家。酒話賣妾，嚇得陳氏要逃走。
2. 陳氏離家之際，小偷上門，要偷錢。
3. 劉貴驚覺，爬起來追賊，小偷看地下有一把斧頭，就拾起斧頭殺了劉貴。
4. 陳氏於返父母家的半途在樹下休息。與城裡賣絲的崔寧，身上帶著十五貫錢，也在樹下休息，因而被誤為兩人有奸
5. 王氏返娘家途中，入樹林避雨，卻被強盗擄獲，而強盗就是當年的殺夫凶手。

從「無巧不成書」的觀點以及「十五貫」的故事之具有五個巧合，我們可以肯定巧合所衍生的創意，你在編故事時，可以適當利用這個方法。

Flsah入門

比賽資訊：
請各位同學努力參加「行動影音創作」比賽，網址是www.vcard.com.tw

Flash的製作，應先把故事想好，再依劇情及條件來完成之。
本練習之劇情設為：雨點散落，入盆漸盈，飛卡忽降，激氣上飄。

範例

• 學生作品

步驟
一、設好影片屬性 (320X240, 24fps)
二、Flash的動畫作法

• 逐格法 (例：雨滴落盆、濺出水花、積成灘水)
  
  1. 在空白影格畫一圖形。
  2. 啟動描圖紙功能。
     
  3. 插入空白關鍵影格，並以前一圖形為底稿，畫另一圖形。
  4. 重復前一步驟，迄任務為止。
     
  
  
• 移動補間法 (例：卡片掉落)
  
  1. 先建元件圖形。
  2. 先置入一空白關鍵影格，置入元件，使成為關鍵影格。
  3. 於不相鄰的影格插入關鍵影格。
  4. 將這兩關鍵影格的登台演員做縮放、移位及旋轉等轉變。
  5. 於上二關鍵影格之間的居間影格設移動補間。
• 形狀補間法 (例：汽泡上升)
  
  1. 在一空白關鍵影格上，畫出一圖形，該影格即成為關鍵影格。
  2. 於與上一關鍵影格不相鄰的影格插入空白關鍵影格，畫出不同的圖形，此一空白關鍵影格亦成為關鍵影格。
  3. 於前二關鍵影格之居間影格設形狀補間。

三、加入音效

可參考網站

• http://www.flashperfection.com/

快捷鍵

• Ctrl+Enter：測試影片
• f5 ：插入影格
• Shift+f5：刪除影格
  

課後作業

• 為行動影音設計參賽作品，完成時間為11月14日，課堂評核成績。
• 在你的網站之www資料夾內新增swf資料夾，在Dreamweaver內新增網頁，將上述的shockwave檔插入，取名為work07.html，存入swf資料夾。
  
• 到你的網站的www資料夾內，於index.html檔內加入文字「作業七」，將「作業七」超連結到上一步驟的work07.html。

期中作業檢討

從同學相互檢討可以得出以下可資學習或借鏡者

一、優良作品

• 之一
  
• 之二
• 之三
• 之四
• 之五
• 之六

二、值得借鏡者

• 按鈕猜謎
  使用者會像無頭蒼蠅，撞得滿頭冒金星。
• 超連結太亂
  瀏覽者會不知身在何處，像在迷宮內。
  
• 各頁五花八門
  瀏覽者很難理解自己是在瀏覽同一個網站。
  
• 首頁與內頁不搭調
  瀏覽者無法從視覺風格的一致性歸納自己是在看同一作者的網站。
  
• 黑底藍字
  瀏覽者因黑與藍的明太接近而難以分辨字與底。

個人網站檢討

為了解你自己製作的網站之優缺點，請你完成以下的工作

1. 新增網路傳播設計的部落格。格址是webxxxxxxxx (xxxxxxxx代表學號)。
2. 做個超連結到你的網站。
   
3. 找兩位同學三人一組共同檢討。
4. 將檢討的結果貼上，並內容包括優點篇、待改善篇、能力續增編等。
5. 看同學的檢討：http://namentit.blogspot.com
   

夜三A網路傳播期中心得與意見

請點按右下的Comments提出迄期中作業止，在學習本課程的心得或意見。

日三A期中作業心得與建議

請點按右下的Comments提出迄期中作業止，在學習本課程的心得或意見。

期中作業續說

你的期中作業須於期中考周內的上課日完成。

• 在www資料夾內，新增一個資料夾，取名為midwork，將你的期中作業存在該資料夾內。
• 你需在www資料夾的index.html檔案加入「作業六」，將「作業六」將超連結到你的期中作業。
• 首頁要能讓瀏覽者知道網站的主題。
  
• 各頁面的標題記得要鍵入，不可出現「無標題文件」。
• 注意圖片，不要在Dreamweaver做任何縮放。換言之，圖片最好在Photoshop或Fireworks完成瀏覽的大小。
• 按鈕不可用Flash製作。
• 頁面的大小寬度以760為主，高度可依需要調大。
• 各頁面間要有同一網站的統一感。
• 要讓瀏覽者知道身在網站的那一個位置。

背景透明的GIF

網頁或部落格中，要讓某一圖像的背景透明的方法是將該圖像之背景去除成透明狀，再存成GIF。
作法：

1. 以Photoshop開啟圖檔，例如開啟鴨子，它的背景是白色的。
2. 在編輯→偏好設定→透明和色域，讓透明設定為灰白交錯的格子。
   
3. 於圖層視窗內複製一圖層。
4. 用放大鏡及選取工具，選取該圖之背景，盡可能將選取範圍接近清淅的界線。
5. 按Delete鍵將選取區去掉，會出現透明狀--有灰白交錯的格子。
6. 將原始圖層隱藏以觀看去背的結果。
7. 滿意之後，檔案→存為網頁用，選用Gif格式，及透明設定如上圖右。
8. 在Dreamweaver內置入圖形。