網路傳播設計

在webs.com架網

2011-12-18T13:54:00.002+08:00

網站架設

2011-11-27T13:46:00.011+08:00

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

方法

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

參考瀏覽

http://www.skyzone45.com/

測試連結新網站

延伸瀏覽

皮克斯網站

備份blogspot

2011-11-06T10:48:00.004+08:00

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

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

參考

測試標籤

2011-10-30T13:17:00.002+08:00

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

html

2011-10-16T13:51:00.008+08:00

我學網路傳播

連結到奇摩

連結到蕃薯藤

台中精機網站使用意見

2011-10-03T11:06:00.000+08:00

網誌進階編輯

2011-10-02T16:48:00.005+08:00

概念

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

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

實務

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

撰寫 / HTML
Link
插入圖片
插入Video

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

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

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

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

文字練習

2011-09-25T14:13:00.002+08:00

我打了一段文字

我用Word打了這一段文字

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

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

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

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

Nielson調查

2011-09-25T10:34:00.004+08:00

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

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

View more presentations from nextemarketing

Facebook用在教學上

2011-09-19T00:03:00.009+08:00

延伸瀏覽

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

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

2011名單

2011-09-11T14:46:00.009+08:00

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-08-10T09:51:00.004+08:00

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

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

網路傳播頭條新聞2011

2011-03-23T11:22:00.015+08:00

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

12月

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

10月

03 社群媒介廣告收入大增

9月

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

8月

7月

24 2011金牌部落客資訊

3月

期末作業

2010-12-25T18:08:00.014+08:00

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

方法

用Photoshop或Illustrator設計二款版面，版面大小優先考慮為1024(寬)x768(高) 。高可以768以上。
繳期：1月8日/15日，須口頭報告。
考慮商設系的logo配色
完成品上傳到你的部落格及中技的「智慧大師」。
參考網站
明志科大工業設計系
 台科大工商業設計系
 大同大學工業設計系
 銘傳商業設計系
 中原商業設計系
 朝陽工業設計系
 東海大學工業設計系
 維也納藝術大學應用藝術系
 伊斯坦堡科技大學工業產品設計系
 網站設計程序
參考同學們的以下意見。
◎ 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沒有整合看起來很雜亂。

超連結(hyperlink)

2010-12-18T17:29:00.002+08:00

目標
為某一網頁元素(文字或圖片)建立超連結。

方法

用Dreamweaver開啟上周練習www資料夾內的index.html檔。
將左欄的Destinations超連結到01xxx資料夾內的index.html檔。
作法一：直接在屬性對話框內的連結欄鍵入01xxx/index.html
作法二：(1)將右側面板中的本機檔案欄內的01xxx資料夾開啟；(2)將屬性對話框內的連結欄右側的連結圖符拖拉到上一步驟中01xxx資料夾內的index.html
將左欄的Airfare超連結到02yyy資料夾內的index.html檔。
將左欄的Cruises超連結到03xxx資料夾內的index.html檔。
檔案>儲存。
檔案>於瀏覽器中預覽>IE或Firefox。

以dreamweaver內建的樣本來設計

2010-12-11T17:31:00.022+08:00

目標
學習檔案的管理

方法

先在d:磁碟機 (若無d:磁碟機則改在c:磁碟機) 建立一個資料夾，取英數名如「travel1211」，該資料夾內另增一資料夾，取名為「www」。
在「www」資料夾內新建三個資料夾。分別取名為
01xxx
02yyy
03zzz
啟動Dreamweaver軟體，新增文件，程序如下圖 (點按該圖以放大)
點按建立鈕，取名為index，存在「www」資料夾內。
開新檔案，同上圖中，選項為旅遊的「文字」頁，點按建立鈕，取名為index，存放在「01xxx」資料夾內。
開新檔案，同上圖中，選項為旅遊的「產品」頁，點按建立鈕，取名為index，存放在「02yyy」資料夾內。
開新檔案，同上圖中，選項為旅遊的「目錄」頁，點按建立鈕，取名為index，存放在「3zzz」資料夾內。

檔案管理延伸流覽

檔案命名

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

隨堂作業

2010-12-04T18:50:00.004+08:00

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

方法

在以下的意見欄提出你的寶貴意見。
利用Dreamweaver所附的檔案，製作你個人的首頁，並上傳到你的網站。

參考書目

2010-12-04T17:50:00.004+08:00

賴虹燕譯，Web CSS網頁樣式設計學，台北：博碩，2005年。
黃聰明，CSS版面樣式設計實務，台北：文魁，2006年。
碼上就用CSS，台北：上奇，，2006年。
胡為君譯，CSS網頁設計手扎，101個您一定會遇到的問題與解答。台北：上奇，200x年。
胡為君譯，The Zen of CSS-網頁視覺設計の王道，台北：上奇，2005。
胡為君譯，Wogner原著，如何設計好網站，台北：上奇，2006。
王煦淳譯，WebLayout設計的美學, 台北：旗標，2006。
張碧球主編，張惠如著，企業形象網頁設計，臺北市：藝風堂，2004。
許明玉、張達昀譯，Adobe Creative Team著，跟Adobe徹底研究Dreamweaver CS 3，台北：上奇，2007。
張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
鄭巧玉譯，Wogner原著，如何設計好網站之網頁改造術。台北：上奇，2006。
RoseNya, 小包子，Dreamweaver cs3即效見本，台北：上奇，2007。
視覺系研究菀，網頁設計部屋，台北：碁峯，2006。
Jason Beaird, The principles of beautiful web design, Collingwood, Australia: SitePoint Pty. Ltd., 2007.
Janine C. Warner, Teach yourself visually Dreamweaver CS3, Hoboken, NJ: Wiley Publishing, Inc., 2007.
Jesse James Garrett, The Elements of User Experience. New Riders, 2003.

2010-11-21T18:03:00.000+08:00

目標
仿效Dw軟體的設計

方法

觀看SPA網站

補充
隨堂練習的檔案來源
C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\BuiltIn\StarterPages

2010Web

2010-11-20T20:13:00.002+08:00

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-11-20T18:56:00.005+08:00

目標
比較不同的網站

方法

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

圖像的上傳及位置調整

2010-10-02T19:07:00.015+08:00

這是水晶的價目表

補充

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

<這些字是小括弧內>

文字處理

2010-09-25T18:32:00.007+08:00

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

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

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

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

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

補充

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

2010學生

2010-09-18T19:19:00.016+08:00

2010教學進度

2010-09-18T17:56:00.011+08:00

上半學期由同學建構一個紀錄學習(或有專門領域)的部落格。
下半學期由同學分組以建構一商業網站為主。
個人在websxxxxxx.blogspot.com落格記錄一學期的學習心得及資訊分享

09/18 概論，blog架設
09/25 個人網站架設-http://web2.ntit.edu.tw/~sxxxxxxxxxxx/
10/02 blog的文字處理
10/09 圖像處理
10/16 html
10/23 多媒體物件的搭配
10/30 rss
11/06 發表--
11/13 發表--
11/20 網站內容架構
11/27 文字處理；文字型網頁的架設；表格圖像處理
12/03 網頁的色彩計劃
12/10 多媒體物件的搭配。
12/17 樣版的建立與套用
12/24 CSS樣式表
12/31 發表
01/07 發表
01/14 期末作業評核﹣﹣商業網站設計或改造

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

2010-05-14T22:50:00.003+08:00

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

步驟

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

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

knowledge

2010-05-12T16:23:00.003+08:00

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

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

網路傳播頭條新聞2010

2010-01-22T10:33:00.027+08:00

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

21 你掛掉後的虛擬世界

10月

11 台女臉書日記英媒推崇

08月

17 web is dead, long live the internet

07月

16 History of Online Shopping

03月

02月

01月

Firewroks之四--分割

2010-01-02T20:55:00.029+08:00

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

步驟

實例

一、前置作業

下載work4.zip。
解壓縮後會有個資料夾work4，內有資料夾images及img。

二、為index.html更名備用

用Fireworks開啟index.png。
「檔案」>「匯出精靈」，取名index.html。
進入電腦的images資料夾，複製index_r2_c1.jpg，貼入，將新複製檔更名為left.jpg。
同上，將index_r2_c8.jpg複製及貼入，更名為right.jpg。
同上，將index_r3_c2.jpg複製及貼入，更名為main.jpg。
在Dreamweaver開啟index.html。
點按作業區左側的切割圖index_r2_c1.jpg，在屬性欄內之原始檔欄位內之index_r2_c1.jpg改為left.jpg；
點按作業區右側的切割圖index_r2_c8.jpg，在屬性欄內之原始檔欄位內之index_r2_c8.jpg改為right.jpg；
點按作業區右側的切割圖index_r3_c2.jpg，在屬性欄內之原始檔欄位內之index_r3_c2.jpg改為main.jpg。
檔案 > 另存新檔，檔名為index1.html，路徑與index.html同。(這是重點)

三、在Fireworks另建新檔並做分割

開啟index.png。
匯入一圖片，例如書本。
從工具列選用「分割工具」，在作業區加入一個分割，修正其大小及位置，使與上一步驟的圖片相同。
儲存為book.bng。
匯出精靈，檔名為index.html。
這會蓋過之前做個的index_r2_c1.jpg；index_r2_c7.jpg及index_r3_c2.jpg的圖像。

四、修改index.html中的圖像，並另存新檔

把名為books.jpg、love.jpg、flower.jpg、moon.jpg、fish.jpg的圖像檔置入images資料夾內。
在Dreamweaver開啟index.html，另存新檔為02_book.html。
選擇書本的圖像，在屬性編輯區將該圖像所對應的index_rx_cx.jpg更名為books.jpg。
儲存檔案。
另存新檔為03_love.html，選擇書本的圖像，在屬性編輯區將該圖像所對應的books.jpg更名為love.jpg。
儲存檔案。
另存新檔為04_flower.html，選擇情侶的圖像，在屬性編輯區將該圖像所對應的love.jpg更名為flower.jpg。
儲存檔案。
另存新檔為05_moon.html，選擇花朵的圖像，在屬性編輯區將該圖像所對應的flower.jpg更名為moon.jpg。
儲存檔案。
另存新檔為06_fish.html，選擇月亮的圖像，在屬性編輯區將該圖像所對應的moon.jpg更名為fish.jpg。
儲存檔案。
檔案>於瀏覽器中預覽>IE。

五、回復最早先的index.html

開啟index1.html。
另存新檔index.html，蓋過。

討論
本練習中，我們讓每個html檔共用許多的indx_rx_cx.jpg，可減少瀏覽者耗時下載之苦。

Firewroks之三--匯出

2010-01-02T20:35:00.011+08:00

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

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

一、匯出成html
(方法一)

從主選單選擇「檔案」 > 「匯出」。轉存文件會製作一個HTML檔也為每一分割製作一圖像檔。為了易於之後移除這些檔，將它們轉存到新的資料夾。
選擇儲存位置，點按「新檔案夾」鈕，並為該資料夾取名，要確定該新資料夾的名稱出現在對話框的上方。「」
接受內定base name（基底名稱）之設定，Fireworks以該名稱來做HTML檔的名稱，並以該名稱為基底來為因分割所產生的GIF及JPEG檔命名。
你能夠點按Setup鈕來修改Fireworks為檔案命名的方式，以及設定轉存HTML的其他特性。
從Slicing的彈現式選單內選擇Use Slice Objects，這會確保所有的按鈕、behavior及最佳化於瀏覽器內展現時會正常運作。
從Style彈現式選單內選擇Dreamweaver 3，這會產生在Dreamweaver 3使用該檔時的最適佳化HTML碼。
確定Location彈現式選單被設在Same Directory（同一目錄）。此一選項讓你指定所儲存的HTML檔與轉存的圖像之關係。你也能夠將所有的HTML拷貝到Clipboard（剪貼板）並將之直接貼到Dreameweaver檔內。
點按Save (Windows) or Export (Macintosh)將該檔轉存。該HTML檔現在能夠在瀏覽器內來觀看或者在Dreamweaver內做進一步的修改。
若你想一睹為快，可在Web瀏覽器內預看該HTML。
開啟一個網頁瀏覽器，選擇File > Open > Page in Navigator (Netscape Navigator)或File > Open (Microsoft Internet Explorer)，並選擇你所轉存的HTML檔。
你也能夠直接從Firewroks選擇File > Preview in Browser，並選定瀏覽器直接來看。若未見瀏覽器，則選Set Browser加入Primary（第一）及 Second (第二）個瀏覽器的名單內。
試完該轉存的HTML檔，回到Fireworks並關閉該檔。

(方法二) 匯出精靈

從主選單選擇「檔案」 > 「滙出精靈」。
點按「繼續」。
圓點圈選「Dreamweaver」。
點按「繼續」。
點按「結束」。
點按「繼續」。
點按「匯出」。
設定檔名，如index.html。
鉤選「包含不含分割的區塊」
鉤選「將影像放入子資料夾」
點按「匯出」。

二、在Dreaweaver讀取及編輯html

啟動Dreaweaver
開啟html檔。

Firewroks之二--按鈕

2009-12-30T08:20:00.012+08:00

目標
在Fireworks製作按鈕。

步驟
一、做按鈕外形

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

二、疊上文字

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

三、複製按鈕

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

四、修改按鈕

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

五、存檔

「檔案」 > 「另存新檔」，取名英字如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之一--概述

2009-12-14T15:27:00.017+08:00

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

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

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

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

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

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

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

(二)向量工具

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

下一進度
製作按鈕

新舊網站設計語法的差異

2009-12-09T08:56:00.016+08:00

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

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

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

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

2009-12-02T08:26:00.014+08:00

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

學習內容

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

步驟

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

問題

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

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

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

簡易網站設計

2009-11-25T08:12:00.016+08:00

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

學習新功能

超連結
命名
文字編排

步驟

一、參考網站

二、文字

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

三、圖像

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

四、命名

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

五、建立檔案

建議閱讀

期末作業

2009-11-20T18:55:00.010+08:00

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

方法

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

可改善者

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

改善實例

大煒塑膠工業有限公司

繳交

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

期限

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

個人網頁嘗鮮

2009-11-20T18:43:00.002+08:00

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

步驟

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

期中作業自評

2009-11-13T18:27:00.009+08:00

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

方法

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

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

網路傳播頭條新聞2009

2009-11-09T08:56:00.040+08:00

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

12月

11月

10月

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

08月

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語法妙用舉隅

2009-11-08T11:26:00.024+08:00

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

學習項目

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

補充

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

期中作業評核

2009-11-01T11:24:00.004+08:00

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

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

方法

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

繼續閱讀的方法

2009-11-01T10:35:00.008+08:00

目標
當一欄的內容篇幅很長時，用「繼續閱讀...」將之後的內容隱藏。

步驟
方法一

進入修改文章。
一篇很長的文章，用「read more" (閱讀更多)」縮版幅，在「修改Html」模式下加入字串：

方法二

進入修改文章。
「設定」標貼→選取「文章編輯器」新版文章編輯器：立刻一窺最新功能！ →「儲存設定」。
文字編輯區→游標放在欲「read more或繼續閱讀...」之處。
撰寫模式→「插入Jump/break」圖示。

RSS

2009-10-28T07:34:00.015+08:00

目標
理解RSS及其應用

步驟
一、概說
RSS是Really Simple Sydication的簡寫。其定義建議參閱：

二、在你的網誌內加入RSS

新增文章或編輯狀態。
點按「設計」標貼。
新增小工具。
選RSS ，點按+
在欄位內貼入具RSS的網址→繼續。

三、使用經驗分享

將RSS置於部落格版面配置內。
將RSS置於Firefox書籤工具列。

意見調查

2009-10-25T10:09:00.012+08:00

目標
為自己的部落格製作一項或數項調查

步驟

思考自己的部落格可做何種調查，如了解網友的特徵、或為你的部落格做評比等。
進入「修改文章」，點按「版面配置」>右側的「新增小工具」>「意見調查」，點按「+」圖示。
輸入問題名稱，及欲得知的資訊。

範例

補充

評比式調查可以有下列方式：
1. 排序式，如名次、分數或百分比。
2. 語意式，一般以兩極質性加上中性共奇數級為主，最好在七級以內，例如：
  (三級) 好，普通，差；
  (五級) 優，好，普通，差，劣；
  (七級) 極優，優，好，普通，差，劣，極差。

隨堂小評

2009-10-14T08:43:00.002+08:00

目標
評量到本周為止，你經營部落格的進度

方法
每人開啟自己的部落格，以5分鐘為限說明：

宣言
版頭設計與宣言相符情況
各篇內容
自行檢討

範本Minima版頭圖像編輯

2009-10-06T21:58:00.009+08:00

目標
更改範本Minima版頭圖像

步驟

選擇版面範本Minima。
進入「版面配置」。
點按(header)欄位內右上角的「編輯」。
在Photoshop製作一650x130的圖像，存檔為Jpg或gif格式如圖1。
於「圖片」，圓點圈選「從電腦上載」，點按瀏覽，找到步驟4.中的圖檔。
點按儲存。

▲圖1，(650x135)

補充

修改版頭可到http://blogger templates 去下載再編輯，詳細步驟。

範本No.897版頭圖像編輯

2009-10-06T21:46:00.015+08:00

目標
更改範本No.897版頭圖像

步驟

選擇版面範本No.897。
進入版面配置 >修改html。
先到html語言編輯區內找出#header h1 {內找到網址：http://www1.blogblog.com/no897/bg_header.gif。
複製該網址。
將上一網址貼到IE瀏覽器，出現如下圖1。
檢視其內容得到400x90。
在Photoshop製作背景透明的GIF如下圖2。
將圖2上傳，並檢視其網址為http://4.bp.blogspot.com/_iEIW9m8urUs/SsNahTAVAFI/AAAAAAAABGs/MND6CeHuOmM/s400/transparent+-1.gif，複製該網址。
進入「版面配置」>「編輯html>，
蓋過步驟3.的網址。
點按儲存。

▲圖1 (400x90)

▲圖2 (360x142)

範本TicTac版頭圖像編輯

2009-10-06T21:28:00.014+08:00

目標
更改範本TicTac版頭圖像

步驟

選擇版面範本TicTac。
進入版面配置 >修改html。
先到html語言編輯區內找出#header-wrapper {內找到網位：
http://www.blogblog.com/tictac/top_div_$startSide.gif。
複製該圖檔的網址到記事本軟體，將_$startSide刪除成新網址。
將上一修改過的網址貼到IE瀏覽器，出現如下圖1。
檢視其內容得到847x240。
在Photoshop製作一847x240的背景透明gif如下圖2。
將前一透明圖上傳到你的部落格，檢視其網址是http://1.bp.blogspot.com/_iEIW9m8urUs/Ssv0LIs3k2I/AAAAAAAABJM/wz1YwRoCnis/s1600/Tictac02.gif
版面配置 >修改html。
將在步驟3.的圖檔覆蓋。
點按儲存。

▲圖1 (847x240)

▲圖2 (847x240)

範本Rounders4版頭圖像編輯

2009-09-25T19:28:00.016+08:00

目標
更改範本Rounders4版頭圖像

步驟

選擇版面範本Rounders4。
進入版面配置 >修改html。
先到html語言編輯區內找出#header {內找到其網址：http://www1.blogblog.com/rounders4/bg_hdr_bot.jpg檔。
複製該圖檔的網址。
將上一網址貼到IE瀏覽器，出現如下圖1。
檢視其內容得到740x130。
在Photoshop製作一710x130的圖像，存檔為Jpg或gif格式如圖2或圖3。
(之所以用710x130是使該圖不會右側不會外溢，係實驗得到的。)
進入「版面配置」。
點按(header)欄位內右上角的「編輯」。
於圖片，圓點圈選從電腦上載，點按瀏覽，找到步驟7.中的圖檔。
點按儲存。

▲圖1 (740x130)

▲圖2 (710x130)

▲圖3 (740x130)

補充

你的數位圖像若是有經過縮小，則有必要在Photoshop進行濾>銳利化 >遮色片銳利。

設三a 2009

2009-09-23T08:31:00.016+08:00

01周依樺部落格 / 網站
02張珮瀅部落格 / 網站
03莊雅名部落格 / 網站
04莊雅筑部落格 / 網站
05莊蕙瑛部落格 / 網站
06陳盈汝部落格 / 網站
07曾國瑜部落格 / 網站
08廖祐萱部落格 / 網站
09黎旻宜部落格 / 網站
10呂柏元部落格 / 網站
11張家榮部落格 / 網站
12潘育政部落格 / 網站
13戴志龍部落格 / 網站
14簡滄毅部落格 / 網站
15周國元部落格 / 網站
16潘緯祥部落格 / 網站
17謝承翰部落格 / 網站

進1a 2009

2009-09-19T19:28:00.026+08:00

01袁正修部落格 / 網站
02王寵雅部落格 / 網站
03楊舒姍部落格 / 網站
04陳靜怡部落格 / 網站
05曾美惠部落格 / 網站
06張嘉芯部落格 / 網站
07黃瑞琳部落格 / 網站
09吳俊賢部落格 / 網站
10張漢嶢部落格 / 網站
12蔡佳祐部落格 / 網站
13張婉真部落格 / 網站
14許智怡部落格 / 網站
15蔡柏鴻部落格 / 網站
16楊于正部落格 / 網站
17陳幸穗部落格 / 網站
18陳韋利部落格 / 網站
19林至中部落格 / 網站
20鄧尊仁部落格 / 網站
21張德名部落格 / 網站
22王敏倩部落格 / 網站
23張慧蓮部落格 / 網站
24黃靖育部落格 / 網站
25吳心如部落格 / 網站
26謝原鈴部落格 / 網站
27謝佳芳部落格 / 網站
29林嘉萍部落格 / 網站
30張永政部落格 / 網站
31陳瑋玫部落格 / 網站
32黃鈺婷部落格 / 網站
33林弘泰部落格 / 網站
34王俊達部落格 / 網站

夜二1 2009

2009-09-18T18:48:00.020+08:00

01張聖元部落格 / 網站
02鄭宇傑部落格 / 網站
03陳愛主部落格 / 網站
04洪鏑凱部落格 / 網站
06彭舒婷部落格 / 網站
08林艾瑩部落格 / 網站
09張瑜璇部落格 / 網站
10林信宏部落格 / 網站
11陳韋琳部落格 / 網站
12蔡佳諦部落格 / 網站
13陳治瑋部落格 / 網站
14詹奕瑩部落格 / 網站
16曾于真部落格 / 網站
17陳江銘部落格 / 網站
18王姿月部落格 / 網站
19郭文宗部落格 / 網站
20陳寶蓮部落格 / 網站
21賴宜儀部落格 / 網站
22黃如慧部落格 / 網站
23林鈺婷部落格 / 網站
25蔡旻修部落格 / 網站
26侯欣均部落格 / 網站
27周冠任部落格 / 網站
28林品妤部落格 / 網站
29洪頌雅部落格 / 網站
30徐章通部落格 / 網站
31吳曉曼部落格 / 網站
32凌藝芳部落格 / 網站
33羅伊婷部落格 / 網站
34梁瓊丹部落格 / 網站
35陳盈如部落格 / 網站
36彭儀部落格 / 網站
37徐家榮部落格 / 網站

第一堂的願景表白

2009-09-16T09:23:00.007+08:00

目標
此後八周，你要建一個有特色的部落格。

作法

在http://www.blogger.com新建你的部落格。
在你的部落格的第一篇寫下該部落格的成立宣言 (構想)--一個你必須信守的承諾。
在本欄右下留言板留下你的學號姓名，並留下你新建的網址(最好作成超連結)。

範例

開懷集/神乎其技

五分鐘搞定

期末作業

2008-12-19T20:38:00.009+08:00

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

方法

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

可改善者

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

改善實例

大煒塑膠工業有限公司

繳交

在你的www資料夾內新增work_7資料夾，把你修改的網站置入其中。
在你的www資料夾的index.html檔案內，將作業七超連結到上一資料夾的首頁。

期限

11/17(一)~22(六)：主題選定
11/24~29：分析組織架構圖
12/01~06：設計版型
12/08~13：設計版型
12/15~20：初稿
12/22~27：修稿
12/29~03：完稿
01/05~10：檢討

網站外觀

2008-12-17T05:54:00.019+08:00

目標
觀察網站，熟悉使用者經驗元素中的外觀 (surface)層，使頁面內的圖、文、色彩組合是一網站類型。

方法

援用Dreamweaver的範本，更動其圖像及CSS。

隨堂演練

一、

以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
在本地端網站的www資料夾內，新增work_6資料夾。
開啟Dreamweaver，點按右邊的從範本建立中的起始頁面。

二、建立檔案

從樣本頁面欄內選樣本，迄與你擬要改善的網站之頁面編排接近者。點按建立鈕。
在work_6資料夾，儲存為index.html。

三、檢視及編修網頁

點按頁面的圖像元素、文字元素及表格背景色等，變更之，以接近你欲修改的網站。
儲存該index.html。

四、修改CSS

在Dreamweaver右網站資訊區，點按附檔為CSS者。
將.bodyText內的color #FFFF00改為FFFFFF。
關啟CSS
檢視html檔的設計，發現主文區的文字全部由黃色變為白色。
可試著更改其他樣式的屬性，如文字大小等。

隨堂作業

將www資料夾中index.html檔案內的作業六超連結到work_6的index.html。
將www資料夾中的index.html存檔並上傳。

建議閱讀

張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
胡為君譯 (2006)，Wogner原著，如何設計好網站，台北：上奇。
鄭巧玉譯 (2006)，Wogner原著，如何設計好網站之網頁改造術。台北：上奇。
RoseNya, 小包子 (2007)，Dreamweaver cs3即效見本，台北：上奇。
視覺系研究菀 (2006)，網頁設計部屋，台北：碁峯。

頁面編排

2008-12-09T17:38:00.019+08:00

目標
觀察網站，熟悉使用者經驗元素中的編排 (skeleton)層。使網頁元素的排列能讓使用者用起來最有效率。。

方法
瀏覽以下超連結內的網站，評析何者的編排最適合你擬要修改的網站

優良網站

隨堂演練

開啟Dreamweaver，新增html檔。
從主選單 >檢視 > 尺規 > 鉤選顯示。
從主選單 >檢視 > 格線 > 鉤選顯示格線。
從主選單 >檢視 > 格線 > 鉤選格線設定...。於對話框內調整間距的數值為10。
點選版面標貼，選APdiv。
在編輯區內畫一矩形。點選它，編輯它，並觀查及編輯區下方的屬性。並試著進行下列的屬性變動：
1. APdiv的名稱、大小、背景色
2. 文字的對齊
3. 文字的超連結
4. 置入背景圖、插入圖像、圖像的超連結
儲存檔案。
下圖是以上述的方法為frogdesign的首頁所做的版面編排。

將APdiv改為表格
div對較早期的瀏覽器可能不適用，所以若要為這些使用者考量，則可將div的程式碼轉換為表格table語法。其作法如下：

開啟有div的網頁。
從主選單 >修改轉換 > 圖層轉換為表格。
從程式碼觀看程式碼的改變。
簡化表格。

隨堂作業

以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
在本地端網站的www資料夾內，新增work_5資料夾。
在work_5資料夾內新增skeleton.html，其內容係依前述瀏覽優良網站的評析，以APdiv方式排出頁面的間架--像建物的平面圖，每一APdiv插入該區間大小的圖像，並疊上文字。
儲存skeleton.html，並將它上傳到遠端伺服器。
將www資料夾中index.html檔案內的作業五超連結到skeleton.html。
將index.html存檔並上傳。
在瀏覽器測視你的作品。

建議閱讀

張靜怡，葉俊賢，陳國明 (2003)，Dreamweaver MX，台北：文魁。六版。
胡為君譯 (2006)，Wogner原著，如何設計好網站，台北：上奇。
鄭巧玉譯 (2006)，Wogner原著，如何設計好網站之網頁改造術。台北：上奇。
RoseNya, 小包子 (2007)，Dreamweaver cs3即效見本，台北：上奇。
視覺系研究菀 (2006)，網頁設計部屋，台北：碁峯。

網站結構探討

2008-12-01T09:34:00.029+08:00

目標
觀察網站，熟悉使用者經驗元素中的策略 (Strategy)層、眼界 (Scope)層、結構 (Structure)層。培養sitemap的建構及網站結構的命名。

方法
瀏覽以下的網站

隨堂作業

以Dreamweaver連結到你在學校的網站。(假如本地端無內容，你須將遠端內容下載)
在本地端網站的www資料夾內，新增work_3資料夾。
依前二公司的網站瀏覽，在work_3資料夾內建立以下二個檔案
1. sitemap1.html，其內容能一目了然地看到創造力公司或Apple公司的網站
  1. 對象是誰？要提供什麼？
  2. 網站地圖 (另一名稱為網站導覽 )
  3. 網站結構的資料夾命名及各網頁的英文命名。
    註：資料夾的名稱能在瀏覽器的網址欄看到，其原則如下：
    - 在http://右方第一個 / 之後未具.html的英文(和或數字)名為第一層資料夾名稱。
    - 在http://右方第二個 / 之後未具.html的英文(和或數字)名為第二層資料夾名稱，餘再依此類推。
    - 網頁的名稱為有.htm或.html或asp或php副檔名者。
在本地端網站的www資料夾內，新增work_4資料夾。
1. sitemap2.html，內容能一目了然地看到你期未作業欲改善的公司的網站
  1. 對象是誰？要提供什麼？
  2. 網站地圖。
  3. 網站結構的資料夾命名及各網頁的英文命名。
  4. 可改善之處何在？
將前兩個檔案存檔並上傳。
將www資料夾中index.html檔案中的作業三超連結到work_3資料夾內的sitemap1.html。
將www資料夾中index.html檔案中的作業四超連結到work_4資料夾內的sitemap2.html。
將index.html存檔並上傳。
在瀏覽器測視你的作品。

建議瀏覽

下周進度

版面編排設計
Fireworks軟體應用

網站結構

2008-11-25T18:54:00.018+08:00

目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

網站地圖 (site map)
線性結構
層屬結構
超連結

一、前置作業

開啟Dreamweaver，進入網站管理，連結到遠端資訊。
於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
存檔。

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
製作步驟：
1. 在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
2. 在work_1內新增一個檔案，取名為article1.html。
3. 再新增一個檔案，取名為article2.html。
4. 再新增一個檔案，取名為article3.html。
5. 再新增一檔案夾，取名為images。
6. 將三個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
7. 開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
8. 為下一篇設超連結，連到入article2.html。
9. 儲存檔案article1.html。
10. 另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
  1. 為下一篇設超連結，連到入article3.html。
  2. 為上一篇設超連結，連到入article1.html。
11. 儲存檔案article2.html。
12. 另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
  1. 將上一篇的超連結連到article2.html。
  儲存檔案article3.html。
13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
14. 上傳到伺服器。

四、層屬結構

層屬結構：像書本那樣，一書有數章，每章數節等。
實例簡介：利用可任選且具超連結的文字或圖像。
製作步驟：
1. 在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
2. 在work_2資料夾內新增一個檔案，取名為article1.html。
3. 再新增一個檔案，取名為article2.html。
4. 再新增一個檔案，取名為article3.html。
5. 再新增一個檔案，取名為article4.html。
6. 再新增一檔案夾，取名為images。
7. 將四個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
8. article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。
  1. 將第一篇做超連結到article1.html。
  2. 將第二篇做超連結到article2.html。
  3. 將第三篇做超連結到article3.html。
  4. 將第四篇做超連結到article4.html。
9. 儲存檔案。
10. 另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
11. 另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
12. 另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
14. 上傳到伺服器。

五、首頁與內頁超連結

將index.html檔的作業一與work_1內的article1.html連結。
將index.html檔的作業一與work_2內的article2.html連結。
在瀏覽器測試 (IE的快速鍵為F12鍵)。
儲存檔案。
上傳到伺服器。

六、在部落格做超連結

到你的部落格，新增「網站結構」的文章。
於內文寫「我在校方的網站」，將這些字做成超連結，其網址是http://web2.ntit.edu.tw/~sxxxxxxx，此處的xxxxxxx是你的學號。

架網站

2008-11-19T08:04:00.013+08:00

目標
在學校伺服器架個人網站

方法
點按右側標籤的「架設網站」。

觀摩

一、同學優良作品

二、值得借鏡者

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

期末作業

2008-11-14T19:48:00.010+08:00

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

方法

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

可改善者

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

改善實例

大煒塑膠工業有限公司

期限

11/19~22：主題選定
11/26~29：分析組織架構圖
12/03~06：設計版型
12/10~13：設計版型
12/17~20：初稿
12/24~27：修稿
12/31~06：完稿
01/07~10：檢討

網站類型

2008-11-14T19:18:00.006+08:00

目標
了解網路的類型

說明
網路的類型，可以從不同的面向來分類，以下是分類中的二種大分法

類一

入口網站
例：http://www.yahoo.com

搜尋網站
例：http://www.google.com

社群網站
例：http://www.facebook.com

電子商務網站
例：http://www.zakka.com.tw

小冊子網站
例：http://www.thu.edu.tw

類二

資訊網
網址尾端有.edu 或 .gov (education or government)
例： http://www.ntu.edu.tw

倡導網
網址尾端有.org (organization)
例： http://www.greenpeace.org

企業或行銷網
網址尾端有.com (commercial)
例： http://www.adobe.com

新聞網
網址尾端有.com (organization)
例： http://www.cnn.com

個人網
網址尾端於.com、 .edu之後會有~
例： http://web.ntit.edu.tw/~hsieh

使用者經驗元素

2008-11-13T10:02:00.012+08:00

目標
介紹網站設計的使用者經驗元素，並觀看實例以理解其內涵。

說明
依據Jesse James Garrett的看法，網站設計使用者經驗元素有五種，係由表層進入到最深層，依序有以下五層：

外觀 (Surface)層：圖、文元素的組合看起來是某一網站類型。
編排 (Skeleton)層：網頁元素的排列能讓使用者用起來最有效率。
結構 (Structure)層：內容的分類讓讀者知道如何去某目的地。
眼界 (Scope)層：使結構層得以完成的功能，例如，網路書店提供與甲書性質相近的書。
策略 (Strategy)層：網主及網友要能該網站取得什麼。

進行設計時，要由下往上建起。

方法

請到Apple網站瀏覽，描述你對該網站的使用者經驗的各層觀點。

建議閱讀

Jesse James Garrett, The Elements of User Experience. New Riders, 2003.
http://semanticstudios.com/publications/semantics/000029.php

隨堂作業

2008-11-11T21:44:00.016+08:00

目標
檢討部落格製作；比較部落格與一般網站的差異

方法

在你的學習部落格內描述

半學期來製作個人部落格及分組部落格的收穫與待改進之處，參考以下同學的個人與分組部落格。
徐文嫻的部落格
 白意婷的部落格
 蔡妙音的部落格

 虛實之間 (入選無名網站動漫第20名)
阿土伯的有機肥
 雪兒好
 小心眼
以下兩者的差異
阿默的生活
 中國攝影
看以下的網站有何感想
Macannashoe

調查

完成本部落格右上兩項調查。

參賽消息
研究參加下列比賽的可能性

第六屆育秀杯

2008華文部落格決選名單

2008-10-22T14:22:00.008+08:00

2008第四屆全球華文部落格大獎 - 決選入圍名單

最佳生活情報－ Thomas Wine 葡萄酒美食漫談
最佳生活情報－努爾古麗
最佳興趣嗜好－立體書專門店
最佳藝術文化－良牙的純樸記事
最佳藝術文化－海洋之心
最佳藝術文化－ Annie's 攝影筆記本
最佳藝術文化－古蹟與狗

問題

觀覽以上的部落格，將有關寫部落格的啟示有條理地寫入你的學習部落格內。

進專1A發表

2008-10-18T09:17:00.017+08:00

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4304室；
發表時間：

第1組10:15~10:35
第2組10:37~10:57
第3組11:05~11:25
第4組11:27~11:47

發表日期與貼文篇數
10/25：每組貼文篇數=2x組員人數
11/01：每組貼文篇數=3x組員人數
11/08：每組貼文篇數=4x組員人數

分組編目

1 三人成唬
林佩君 33973008 (組長)
周雅鈴 33973003
張英森 33973007
2 虛實之間
陳昭雯 33973006 (組長)
嚴姿涵 33973018
陳逸慈 33973028 (組3)

(興趣嗜好)
3 狗熊一班
林厚志 33973023(組長)
_陳逸慈 33973028
_熊康伶 33973026
4 for nothing
白意婷 33973039 (組長)
楊仕鵬 33973034
曾惠萱 33973031
(藝術文化)
5 嗖咪咪
蘇裕雯 33973041
王郁萍 33973001
熊康伶 33973026 (組3)
(音樂說說說)
6 發現Funny
陳俊利 33973035 (組長)
吳怡君 33973009
李季霏 33973010
陳俊達 33973020
(藝術文化)
7 波本可樂
劉亞倫 33973016 (組長)
吳美瑩 33973014
辛薏如 33973033
8 八分之四等於二分之ㄧ
陳盈攸 33973005
譚昕 33973005
王智廣 33973017
9 毛毛造造
胡浩文 33973025
毛梅蘭 33973030
周建成 33973038
(藝術文化)
10 饕掏不嚼
阮楚蘋 33973012
廖庭馴 33973015
黃圓錞 33973015
邱美秀 33973044
11 人生樂不樂
黃資華 33973043 (組長)
楊郁葶 33973029
陳雪華 33973042
12 阿土伯的有機肥
洪坤照 33973037 (組長)
陳巨峰 33973019
柯豐義 33973022

夜二1發表

2008-10-17T21:52:00.012+08:00

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4405室；
發表時間：

第1組20:35~20:55；
第2組20:58~21:18；
第3組21:21~21:41；
第4組21:44~22:04

發表日期與貼文篇數
10/24：每組貼文篇數=2x組員人數
10/31：每組貼文篇數=3x組員人數
11/07：每組貼文篇數=4x組員人數

分組編目

1 角落
黃俞瑄 24965012(組長)
倪紀萱 24965025
邱義盛24965042
(生活情報組)
2 無名
李宛蒨 24965049(組長)
王滋娸 24965043
陳玟蓉 24965011
(生活情報組)
3 插畫and亂七八糟的創作
吳政億(組長)
劉丞原 24965021
蔡文欽 24965027
4 Tin Pan Alley流行音樂作曲家和發行人集中區
林鈺娟 24965048(組長)
陳思瑩 24951011
劉雅惠 24952085
(藝術文化；音樂)
5 雪兒好死share house
魏德瑀 24965024 (組長)
徐文嫻 24965002
張雅君 24965044
莊宏儀 24965050
(生活情報；興趣嗜好)
6 Our life, our story
楊淋元 24965018 (組長)
賴麗真 24965004
姚瑋 24965033
陳宜欣 24965036
(藝術文化)
7 音樂
24965014 陳洺頤 (組長)
24965009 游雅雯
24965017 許燕婷
8 影音Club
李瑀潔 24965026 (組長)
邱家鳳 24965008
周兆萱 24965028
9 3宅e生
陳克婷 24965029 (組長)
蕭文鳳 24965020
廖英琦 24965037
(生活情報組)
10 垃圾集中營
宋義威 24925026
陳奕縉 24965016
郭芷融 24965030
林奇震 24965003
蔡芳珍 24965001

日三A發表

2008-10-15T09:30:00.022+08:00

目標
檢核同學個人及分組作業的結果及表達能力

說明
每組可用時間為3分x組員數+6分(組作品)+5分鐘提問。各組須挑出最佳三篇作品發表。

發表場序：抽籤決定
發表地點：在4405室；
發表時間：第1組8:20~8:40；第2組8:45~9:05；第3組9:15~9:35；第4組9:40~10:00

發表日期與貼文篇數
10/22：每組貼文篇數=2x組員人數
10/29：每組貼文篇數=3x組員人數
11/05：每組貼文篇數=4x組員人數

分組編目

1 孵，藝文
林語屏13972007 -組長
陳思澐13972015
顏凡 13972039

2 台中眼
余桂棻 13972002 組長
鄂智涵 13972016
張曉慧 13972009

3 設界‧介設
吳季珊 13972003 組長
許心瑜 13972010
郭瀞喧 13972011

4 太陽餅馬戲團
鹿筱薇 13972034 組長
黃佳鈴 13972017
陳佳慧 13972012

5 Subculture
彭冠廸 13972035 組長
黃邦銓 13972037
李念祖 13972029
李崇任 13972030

6 Mix Music
廖姿婷 13972020 組長
林于評 13972006
薛仰玲 13972026

7 夏克-Shock
廖泊宜 13972019 組長
蔡妙音 13972022

8 Mangekyou
蔡宛廷 13972023 組長
余思穎 13972001
周晏婷 13972005

9 憋頭
彭凱盟 13972036 組長
蔡宗儒 13972038
陳宛渝 13972013
鄭詔蓉 13972025
10 MANIA MOVIE MUSIC
郭郭益言 13972033 組長
陳玟如 13972014

意見調查表測試

2008-10-15T08:34:00.005+08:00

目標
模擬做一個意見調查

步驟

登入部落格
點按版面設定
點按右上角「新增小工具」，在「意見調查」欄按「+」鈕
在問題欄內鍵入你的問題
在作答欄內鍵入你的答案選項

作業
為你的部落格設計一個問卷調查。

建立部落格的秘訣

2008-10-14T22:03:00.033+08:00

目標
觀看其他網客的建言。

國內網站

國外網站

寫部落格的策略

2008-10-07T20:41:00.011+08:00

當部落成為網路世界的一個重要媒體時，企業如何應用，成為重要的課題之一，以下是企業使用部落格的十個基本觀念。

熟悉部落格寫法及由消費者所興起的媒體。
決定部落格是否適用於你的公司。
發展內容策略。
找出寫你的部落格的最佳人選。
選擇一個適當的發佈平台。
為搜尋引擎最佳化你的部落格內容。
與網友啟動誠實的對話。
監視部落格氛圍以找到中肯的新聞及點子。
經常寫，保持聚焦，並包含可以增加的中肯連結。
設定寫部落格的政策及寫部落格的指南。

資料來源
http://www.scoutblogging.com/blogs101.html

建議閱讀

部落格的用色

2008-09-30T22:32:00.006+08:00

部落格的用色與網頁設計一樣，其用色目標包括：吸引人、便利閱讀 (分類)、表現該部落格的特質等。

在上述的目標下，顧及瀏覽者在不同的作業系統 (像MAC或PC)瀏覽，不生色偏，以及減低資訊的負荷，所以用到網頁安全色共216色，包含於256色內，讓每一色僅佔一個byte即可。這216色是以RGB各6個色來組合。
RGB每色有256(0到255)可能色值，今從中挑出六個，各色值的十進位及十六進位(有#表示)如下
0 (#0)
51 (#33)
102 (#66)
153 (#99)
204 (#cc)
255 (#ff)
有以上基礎概念，在部落格的範本之幕後程式HTML內，就可以較容易駕御色彩了。
另以下的網站是提供調色的好處所值得一遊。

參考網站

Chritine的部落格色彩範本

日三a 2008

2008-09-24T13:40:00.019+08:00

01余思穎部落格 / 網站
02余桂棻部落格 / 網站
03吳季珊部落格 / 網站
05周晏婷部落格 / 網站
07林語屏部落格 / 網站
09張曉慧部落格 / 網站
10許心瑜部落格 / 網站
11郭靜暄部落格 / 網站
12陳佳慧部落格 / 網站
13陳宛渝部落格 / 網站
14陳玟如部落格 / 網站
15陳思澐部落格 / 網站
16鄂智涵部落格 / 網站
17黃佳鈴部落格 / 網站
19廖泊宜部落格 / 網站
20廖姿婷部落格 / 網站
22蔡妙音部落格 / 網站
23蔡宛廷部落格 / 網站
25鄭詔蓉部落格 / 網站
26薛仰玲部落格 / 網站
33郭郭益言部落格 / 網站
34鹿筱薇部落格 / 網站

個人部落格格式編修

2008-09-24T08:15:00.018+08:00

目標

完成個人部落格的版頭圖像的編修 (參閲講義)
分組部落格的主題及內容初製
1. 設計方向
2. 學習模範--列舉三個部落格
3. 任務分配及執行
4. 初試啼聲--本周先架出第一篇分組內容

看看別人

分組登錄

2008-09-20T11:06:00.020+08:00

請點按右下意見comments

填入組員姓名學號，三人一組，一人當組長；
標明選定參賽主題；初步構想。

建議流覽

好康相報

中技部落格設計競賽
寫部落格月入五萬元

分組作業說明

各組依自訂主題規畫部落格的大方向及執行計畫
分組的部落格要設在哪家伺服器，由各組決定。
各組在留這區內成以<a href="http://xxxxx.xxxx.xxx">該網址標題</a> 的方式做出各組部落格的超連結。
個人的部落格每周須新增文章，記錄本課程的學習記錄、心得。

進專1A學生名單

2008-09-20T10:54:00.021+08:00

01廖庭馴部落格 / 網站
02王郁萍部落格 / 網站
04周雅鈴部落格 / 網站
06陳盈攸部落格 / 網站
07陳昭雯部落格 / 網站
08張英森部落格 / 網站
09林佩君部落格 / 網站
10吳怡君部落格 / 網站
11李季霏部落格 / 網站
13阮楚蘋部落格 / 網站
15吳美瑩部落格 / 網站
16黃圓錞部落格 / 網站
17劉亞倫部落格 / 網站
18王智廣部落格 / 網站
19嚴姿涵部落格 / 網站
20陳巨峰部落格 / 網站
21陳俊達部落格 / 網站
23柯義豐部落格 / 網站
24林厚志部落格 / 網站
26胡浩文部落格 / 網站
27熊康伶部落格 / 網站
29陳逸慈部落格 / 網站
30楊郁葶部落格 / 網站
31毛梅蘭部落格 / 網站
32曾惠萱部落格 / 網站
33譚昕部落格 / 網站
34辛薏如部落格 / 網站
35楊仕鵬部落格 / 網站
36陳俊利部落格 / 網站
38洪坤照部落格 / 網站
40白意婷部落格 / 網站
42蘇裕雯部落格 / 網站
43陳雪華部落格 / 網站
44黃資華部落格 / 網站
45邱美秀部落格 / 網站

夜二1 2008

2008-09-19T20:44:00.020+08:00

01宋義威部落格 / 網站
02陳思瑩部落格 / 網站
04蔡芳珍部落格 / 網站
05徐文嫻部落格 / 網站
06林奇震部落格 / 網站
07賴麗真部落格 / 網站
08邱家鳳部落格 / 網站
09游雅雯部落格 / 網站
10陳玟蓉部落格 / 網站
11黃俞瑄部落格 / 網站
12吳政億部落格 / 網站
13陳洺頤部落格 / 網站
14陳奕縉部落格 / 網站
15許燕婷部落格 / 網站
16楊淋元部落格 / 網站
17蕭文鳳部落格 / 網站
18劉丞原部落格 / 網站
19魏德瑀部落格 / 網站
20倪紀萱部落格 / 網站
21李瑀潔部落格 / 網站
22蔡文欽部落格 / 網站
23周兆萱部落格 / 網站
24陳克婷部落格 / 網站
25郭芷融部落格 / 網站
28姚　瑋部落格 / 網站
29陳宜欣部落格 / 網站
30廖英琦部落格 / 網站
31林禹陵部落格 / 網站
32邱義盛部落格 / 網站
33王滋娸部落格 / 網站
34張雅君部落格 / 網站
35江婕瑜部落格 / 網站
36林鈺娟部落格 / 網站
37李宛蒨部落格 / 網站
38莊宏儀部落格 / 網站

部落格建構

2008-09-19T20:38:00.020+08:00

本部落格分享分為以下三個單元

趨勢簡述
架設實務
管理重點

一、趨勢簡述
行銷的工具之一部落格。為理解部落格的可能應用途，請先瀏覽以下的部落格

以上的部落格是由個別的部落客所經營，其內容可能每日更新，也可能想到才更新，或依需要而更新，這些部落格的共同特點是它允許瀏覽者貼上意見，與格主互動或其覽客互動。
每一部落格會有一個網址，一如您瀏覽其他的網站。這個網址代表一部伺服器，它滿足國際網路協定的要求。

二、架設實務
現在您準備要擁有自己的部落格，您不必花錢，也不必留下重要的人身資料等，一般程序如下：

(一)、找到能架部落格的網站，加入會員。

國內
到指定網址，從點按「加入會員」開始，依指示進行。
Yahoo
無名小站
 中華電信
 痞客邦
國外
方法與國內類似
http://www.blogger.com/
http://edublogs.org/

(二)、在Google轄下的blogger架設部落格。
在該網站架設自己的部落格只要三個重點程序：

建立帳戶
命名您的 blog
選擇範本

(三)、瀏覽部落格並記住其網址
您必須記住自己的部落格網址，一如記自家的電話號碼。例如，您要記的是
http://3dxxxxxx.blogspot.com (xxxxxx是你的學號像是32999999或129333333，見實例 )

(四)、登入部落格
每一次要新增文章或編輯舊文章或新增部落格，您必須進行登入的工作，做法同新建部落格一樣。

http://www.blogger.com
在下圖登入欄左欄鍵入您的電子信箱，右欄鍵入您的密碼，再按「登入」鈕，即可進入您的部落格的主頁。

(五)、新增文章、上傳圖片、影片及超連結

新增文章
從.doc檔拷貝內文，先貼入記事本使成為純文字，再拷貝該純文字，貼入部落格的文字編輯區。
上傳圖片
直接傳手邊的圖片--RGB模式下的GIF、JPG、PNG格式。
直接傳網站上的圖片--
上傳影片--AVI、MOV等
超連結

(六)、變更設定
接下來，您有必要進入「設定」中的「格式」選項中完成下列的細項。完成更改之後，按頁面下方的「儲存設定」，再點按頁面上方「重新發佈」。
其次，您可能需要更改下列的設定：

Blogspot的地址，方法是進入「設定」中的「發佈」選項，於blogspot地址欄更改您的網址。更改之後，按頁面下方的「儲存設定」，再點按頁面上方「重新發佈」。
意見的設定，方法是
1. 進入「設定」中的「意見」選項。
2. 於「誰能發表意見」欄內去選擇，當您選取任何人時，表示您完全開放給瀏覽者。更改之後，按頁面下方的「儲存設定」，再點按頁面上方「重新發佈」。

放大頭照的方法
1. 先在您的文章內張貼一張您的大頭照(70x82pixel)，檔案須小於5k。發佈之後，進入修改，點按編寫欄的右上之「作改Html」，以檢視該圖片的位址。
2. 選取該位址，其html語法類似：
  http://photos1.blogger.com/blogger/7622/3832/200/profile.jpg
  複製之。
3. 進入檢視blog，於右上角 About下方點按「View my Complete profile 」。
4. 點按左上的Edit your profie鈕。
5. 在相片URL右側的文字欄貼，貼上該位址。
6. 點按最下方的「儲存簡介」。
7. 進入修改文章模式，將步驟1中的大頭照刪除。

您也可以試著更改範本。不同的範本會有不同的風格，選一種和您最麻吉的。
要修改已張貼的文件，要先點按「張貼」再點按「修改」。
修改完之後一定要按最下方的「發佈文章」。

三、管理重點
您可能新開一門課，想要增加部落格或有一篇文章要隱藏或刪除，這就需要加以管理，以下僅就下列數項做介紹。

增刪部落格
增刪文章
隱藏文章
進階編輯

四、同學用Blogger架設的部落格

圖像上傳

2008-09-17T07:28:00.009+08:00

上傳到部落格的圖像以GIF、JPG為主。
上傳的圖像來源可以用以下二種：

指定本地端的圖源
指定網路上的圖源

在此介紹第二種，該圖像是以第一種方法上傳之後，再找出它的網址的，以下是一個圖源的網址。
http://3.bp.blogspot.com/_iEIW9m8urUs/SM-62KMtfFI/AAAAAAAAAlA/3DuXSXxVigQ/s1600/header-01.gif

檢驗它是否真實的方法就是將上述的字串複製，再貼入瀏覽器的網址內，按Enter鍵，看是否有一張圖。

部落格的文字處理

2008-09-16T16:55:00.009+08:00

部落格的文字可以進行以下的處理：

直接在編輯區內；
從其他文件複製，再貼入編輯區內。

進行上述的第二項的作法時，最好完成以下的步驟：

選取欲複製的文字，將複製原文字，
螢幕左下角→所有程式→ 附屬應用程式→記事本
再貼到《記事本》軟體的文件內，做適當的編輯。
複製上一步驟的文字。
貼到部落格的編輯區內。

練習

點按以下的網址

http://www.books.com.tw/exep/prod/booksfile.php?item=0010397400利用上述的方法編輯出如下圖的文字，請點按該圖以利瀏覽。

教學進度

2008-09-10T07:40:00.012+08:00

上半學期由同學分組建構一個可參賽全球華文部落格大獎
要設在哪一個伺服器未限定。
下半學期由同學分組以建構一商業網站為主。
個人在websxxxxxx.blogspot.com落格記錄一學期的學習心得及資訊分享

以下的o9/20^21代表9月20是或21日。

09/10^12 概論，blog架設，分組完成
09/17^19 個人網站架設-http://web2.ntit.edu.tw/~sxxxxxxxxxxx/
09/24^26 blog的文字處理
10/01^03 圖像處理
10/08^10 html
10/15^17 多媒體物件的搭配
10/22^24 發表
10/29^31 發表
11/05^07 期中作業--分組參賽部落格
11/12^14 網站內容架構
11/19^21 文字處理；文字型網頁的架設；表格圖像處理
11/26^28 網頁的色彩計劃
12/03^05 多媒體物件的搭配。
12/10^12 樣版的建立與套用
12/17^19 CSS樣式表
12/24^26 發表
12/31^02 發表
01/07^09 期末作業評核﹣﹣商業網站設計或改造
範例
改善前：http://www.asystem.com.tw
改善後：http://web2.ntit.edu.tw/~s23955014/asystem/

網頁的配色

2008-08-26T17:45:00.002+08:00

色彩在網頁設計上與平面設計有雷同之處，以下的網站可供參可：

http //blog.yam.com/ad42/article/15268724

部落格人氣大增法

2008-08-19T10:12:00.004+08:00

想部落格超人氣，且看

部落洛行銷五大秘訣

2008-04-17T07:34:00.005+08:00

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

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

相關子題

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

FTP的作法

2008-04-08T14:16:00.009+08:00

目標
以FTP管理你的網站

方法
一、使用

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

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

二、利用FileZilla

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

期未作業優選

2008-01-18T09:38:00.001+08:00

優選榜單

設三A

設三１

夜設三A

突破10MB網站空間的限制

2008-01-15T19:46:00.001+08:00

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

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

節約與簡單化

2008-01-10T13:44:00.003+08:00

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

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

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

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

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

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

2008-01-03T11:01:00.001+08:00

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

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

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

Meta標籤應用

2008-01-03T10:13:00.002+08:00

在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="謝寶泰、雜記">
一般要注意

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

css入門

2008-01-03T10:08:00.007+08:00

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

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

建議閱讀

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

日三A期末作業說明

2007-12-24T18:33:00.004+08:00

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

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

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

製作程序

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

宣告被修改網站

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

日三1期末作業說明

2007-12-24T18:33:00.003+08:00

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

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

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

製作程序

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

宣告被修改網站

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

夜三A期末作業說明

2007-12-14T15:19:00.001+08:00

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

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

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

製作程序

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

宣告被修改網站

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

行動影音參賽作品上傳

2007-12-13T13:38:00.001+08:00

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

編故事之法--巧合

2007-12-13T13:31:00.001+08:00

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

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

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

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

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

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

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

Flsah入門

2007-11-30T13:52:00.001+08:00

比賽資訊：
請各位同學努力參加「行動影音創作」比賽，網址是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。

期中作業檢討

2007-11-23T20:21:00.001+08:00

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

一、優良作品

二、值得借鏡者

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

個人網站檢討

2007-11-22T13:31:00.001+08:00

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

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

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

2007-11-16T18:39:00.001+08:00

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

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

2007-11-15T13:38:00.001+08:00

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