Wednesday, December 30, 2009

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的資料夾內的檔案。

Monday, December 14, 2009

Fireworks之一--概述

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

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

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

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

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

四、使用繪圖工具
(一) 影像工具
  1. 從主選單選擇「檔案 > 匯入」,匯入所需的圖像檔案。
  2. 以工具列中的「指標工具」做好圖像的編排。
  3. 以工具列中的「指標工具」點按影像圖二下即可進入影像編輯模式。
    此時作業視窗下方緣的「結束點陣圖模式」會呈紅色實彩,點按之即可切換到向量工具模式,此時該「結束點陣圖模式」圖示會變成灰色狀。
(二)向量工具
  1. 如畫矩形、橢圓及具茲曲線等。
  2. 使用上三項工具模式時,可在作業視窗下方用「筆畫」,「填色」及「特效」等功能來增加圖像的特效。例如:利用「填色」及「特效」等功能,一圓形變成一凸起的圓鈕;或一矩形變成有底紋的按鈕。

下一進度
製作按鈕

Wednesday, December 09, 2009

新舊網站設計語法的差異

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

實例觀察
進入下列兩個網站之後,從瀏覽器上的檢視>原始碼 (Firefox:頁面原始碼),你可以看在memocom網站看到<table>....</table>的語法而在Apple網站看到<div>....</div>的語法。
小結
隨著網路軟硬體的進步,編輯網站所用的語法亦隨之進化,其中之一是早期廣為使用的table語法逐漸被div所取代。原因是div的彈性大,且結合CSS,使網站的管理更有效率。

Wednesday, December 02, 2009

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

學習內容
  • 網站地圖 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,安裝後可以擷取圖。

Wednesday, November 25, 2009

簡易網站設計

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

學習新功能
  • 超連結
  • 命名
  • 文字編排
步驟

一、參考網站
  1. 五愛的首頁
  2. 徐文嫻的作品
二、文字
  1. 從其它文件將文字拷貝到記事本,加以編輯 (必要時) ,再從記事本拷貝到Dreamwever。
三、圖像
  1. 圖像的處理:jpg檔不要再三儲存,會破壞品質,格式一定要RGB,不可用CMYK。
  2. 圖像一定要上傳到遠端的檔案夾內。
四、命名
  1. 注意各html檔的命名法則--有數字及名字。
  2. 放在網路上的有關檔案,不論html、swf、jpg,其命名萬萬不能用中文或特殊的符號像阿花.jpg:-).html
五、建立檔案

建議閱讀

Friday, November 20, 2009

期末作業

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

方法
  • 自選一家企業網站,改善之。改善之道如下:
    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之後,檢視無誤之後,在本欄意見欄以超連結方式留言。

Friday, November 13, 2009

期中作業自評

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

方法
  1. 新增一篇文章
  2. 標題為「期中作業自評」
  3. 在內容中完成下列諸列:
    • 宣言
    • 經營甘苦
    • 最滿意的一篇
    • 後續經營想法
    • 共寫了幾篇
    • 其他 (調查或RSS)或另類心得 (對教學內容之建議)
補充
寫完自評,下周(11月28日)後,你可修改文章→儲存為草稿,以保持你部落格內容的一致性。

Monday, November 09, 2009

網路傳播頭條新聞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

Sunday, November 08, 2009

html語法妙用舉隅

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

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

    Sunday, November 01, 2009

    期中作業評核

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

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

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

    繼續閱讀的方法

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

    步驟
    方法一
    1. 進入修改文章。
    2. 一篇很長的文章,用「read more" (閱讀更多)」縮版幅,在「修改Html」模式下加入字串:
      <!-- more -->
    方法二
    1. 進入修改文章。
    2. 「設定」標貼→選取「文章編輯器」 →「儲存設定」。
    3. 文字編輯區→游標放在欲「read more或繼續閱讀...」之處。
    4. 撰寫模式→「插入Jump/break」圖示。

    Wednesday, October 28, 2009

    RSS

    目標
    理解RSS及其應用

    步驟
    一、概說
    RSS是Really Simple Sydication的簡寫。其定義建議參閱:
    二、在你的網誌內加入RSS
    1. 新增文章或編輯狀態。
    2. 點按「設計」標貼。
    3. 新增小工具。 
    4. 選RSS ,點按+
    5. 在欄位內貼入具RSS的網址→繼續。
    三、使用經驗分享
    1. 將RSS置於部落格版面配置內。
    2. 將RSS置於Firefox書籤工具列。
    練習
    1. 為你的部落格加入一個RSS以聯結與你的主題最相關的網站
    2. 為你的部落格加入一個RSS以聯結謝寶泰的一部落格

    Sunday, October 25, 2009

    意見調查

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

    步驟
    1. 思考自己的部落格可做何種調查,如了解網友的特徵、或為你的部落格做評比等。
    2. 進入「修改文章」,點按「版面配置」>右側的「新增小工具」>「 意見調查」,點按「+」圖示。
    3. 輸入問題名稱,及欲得知的資訊。
    範例
    1. 評比式
    2. 屬性式
    補充
    • 評比式調查可以有下列方式:
      1. 排序式,如名次、分數或百分比。
      2. 語意式,一般以兩極質性加上中性共奇數級為主,最好在七級以內,例如:
        (三級) 好,普通,差;
        (五級) 優,好,普通,差,劣;
        (七級) 極優,優,好,普通,差,劣,極差。

    Wednesday, October 14, 2009

    隨堂小評

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

    方法
    每人開啟自己的部落格,以5分鐘為限說明:
    • 宣言
    • 版頭設計與宣言相符情況
    • 各篇內容
    • 自行檢討

    Tuesday, October 06, 2009

    範本Minima版頭圖像編輯

    目標
    更改範本Minima版頭圖像

    範本No.897版頭圖像編輯

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

    範本TicTac版頭圖像編輯

    目標
    更改範本TicTac版頭圖像

    Friday, September 25, 2009

    範本Rounders4版頭圖像編輯

    目標
    更改範本Rounders4版頭圖像

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

    ▲圖2 (710x130)

    ▲圖3 (740x130)
    補充
    • 你的數位圖像若是有經過縮小,則有必要在Photoshop進行濾>銳利化 >遮色片銳利。

    Wednesday, September 23, 2009

    設三a 2009

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

    Saturday, September 19, 2009

    進1a 2009

    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王俊達 部落格 / 網站

    Friday, September 18, 2009

    夜二1 2009

    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徐家榮 部落格 / 網站

    Wednesday, September 16, 2009

    第一堂的願景表白

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

    作法
    1. http://www.blogger.com新建你的部落格。
    2. 在你的部落格的第一篇寫下該部落格的成立宣言 (構想)--一個你必須信守的承諾。
    3. 在本欄右下留言板留下你的學號姓名,並留下你新建的網址(最好作成超連結)。
    範例
    開懷集/神乎其技