Monday, December 25, 2006

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

網路行銷之網頁設計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/

Thursday, December 21, 2006

網站揚名立萬術

要使你的網站揚名立萬,其他揚名的方法
除了利用meta之外,增加知名度的方式還有
  • 取好的網站名稱及標題
  • 善用搜尋引擎網站
  • 加入好站或酷站推薦

Saturday, December 16, 2006

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">

參看以下的範例的meta可得知。
http://web.ntit.edu.tw/~hsieh/index.html

  • 增加網站、部落格的知名度
當你設計好網站或部落格之後,就要設法增加它的知名度,方法之一是刊登在在平面軟體如雜誌或名片上。另外,你可以在網站的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代表總數少於二十字的關鍵字

Wednesday, December 13, 2006

備妥Web 2.0工作能力

Web 2.0與Web 1.0既有差別,而謀職者的能力自然不同,兩者所需之能力的差別如下:

Web 1.0---------->Web 2.0
情報無國界革命--->集體創造革命
情報收集力-------->知識凝聚力

1. 網路收尋力------>1. 主動奉獻力
2. 網路徵詢力------>2. 社群共鳴力
3. 網路編輯力------>3. 概念提案力

草根媒體革命------>主客融合革命
意見發表力-------->行動創造力

1. 訊息表達力------>1. 自我情緒抑制力
2. 訊息交流力------>2. 遵守網路禮儀力
3. 訊息散播力------>3. 實踐推動力

知識共享革命------>感性共享革命
知識學習力--------->知識感動力

1. 知識習得力------>1. 認同感知力
2. 知識專精力------>2. 想像傳達力
3. 知識說明力------>3. 人格表現力

因應Web 2.0的現實,現代謀職者需將部落格視為自己的第二份履歷表,而好的部落格必須具備以下10種好感度:
  • 風格感:認真寫,凸顯自己的觀點。
  • 速度感:天天做網路文摘。
  • 分享感:心存分享,必有鄰。
  • 編輯感:把事件編輯成可讀性的內容。
  • 親切感:內容能夠簡單可口易消化。
  • 親密感:參加網路社群摶感情。
  • 品牌感:取好名、充實內容、建立唯一品牌。
  • 真心感:以誠與網友交心。
  • 實用感:表現自己的專業和專長,讓網友有收穫。
  • 連結感:與大平台連結,處處留足跡,讓別能連到你。
**摘自《Web 2.0時代,你需要什麼工作力?》30雜誌,2006年12月, p.77。**

分辨Web 1.0與Web 2.0

網路傳播世界的進步可說是一日千里,其整體文化也與時俱變,2000年前後起了巨大的改變,即從Web 1.0進入Web 2.0,例如,最近的Youtube及臺灣的無名小站,即是最好的例子。根據Tim O'Reilly的說法,Web 1.0進入Web 2.0所涉及的技術、觀念、公司形態,差異性如下:
Web 1.0 ------------------------>Web 2.0
DoubleClick(點按二次) ---> Google AdSense
Ofoto -----------------------------> Flickr
Akamai ---------------------------> BitTorrent
mp3.com ------------------------> Napster
Britannica Online --------------> Wikipedia
personal websites --------------> blogging(部落格)
evite -----------------------------> upcoming.org及EVDB
domain name speculation -> search engine optimization (搜尋引擎最佳化)
page views -----------------------> cost per click(每次點按的成本)
screen scraping -----------------> web services(網路服務)
publishing -----------------------> participation(參與)
content management systems > wikis(維基百科)
directories (taxonomy) ---------> tagging ("folksonomy")
stickiness ---------------------------> syndication (集思廣義)

Monday, December 11, 2006

期末作業

繳期:
96年1月10/11日(週三/四)

作業主題:全真公司網站100%更新

  • 將期中作業存到asystem1內,期末作業存在
    http://web2.ntit.edu.tw/~sxxxxxxxxx/asystem/內。
作業項目:
  1. 12月13/14日--新風格設定(需設有連結xxxx.css檔)
  2. 12月20/21日--首頁及內頁1
  3. 12月27/28日--內頁2-4
  4. 01月03/04日--初評
  5. 01月10/11日--修稿 (評核)
參考網站

Saturday, December 02, 2006

必看的CSS網站

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

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

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

例一

Wednesday, November 29, 2006

做動畫參加系展

目標:為參加本系於12月23日的系展,請依參賽規定,以Gif或swf動畫格式(畫面大小468x60)做一作品。該作品除準時依指定方式交給主辦單位外,必須張貼在以下各自的網站:
http://web2.ntit.edu.tw/~sxxxxxxxxx/gif/

網路廣告http://www.egolife.com.tw/advertisement.asp
網路廣告的優點http://value.yam.com/p012.htm
網路廣告新聞http://value.yam.com/p041.htm
網路廣告案例http://value.yam.com/p043.htm
網路廣告聯網http://www.cyberone.com.tw/index2.htm
橫幅廣告細節http://www.iab.net/advertise/adsource.html

網路廣告的版面大小
  • 468 x 60 (Full Banner)
  • 392 x 72 (Full Banner with Vertical Navigation Bar)
  • 234 x 60 (Half Banner)
  • 125 x 125(Square Button)
  • 120 x 90 (Button #1)
  • 120 x (60Button #2)
  • 88 x 31 (Micro Button)
  • 120 x 240 (Vertical Banner)

Thursday, November 23, 2006

改裝自己的部落格

CSS(樣式表)在網頁設計上很重要,在進一步理解它之前,且為自己的部落格改裝,當做學習CSS的暖身。

要領
  1. 登入自己的部落格。
  2. 點按範本。
  3. 點按「挑選新的」,挑選新的範本。
  4. 儲存
  5. 重新發佈
  6. 點按範本
  7. 於Html語言區內將Background Color#xxx中的x項改為0123456789abcdef中的一個。例如將它改為786或ccc。
  8. 在Header內檢視內定的插圖之URL,複製之。
  9. 在新增的瀏覽器之URL區貼上以檢視原始圖。
  10. 複製該原始圖,到Photoshop開啟,以它為底稿,繪製出自己的圖(可以是gif動畫)
  11. 將新製的圖上傳到自己部落格的內容區,並查其URL,複製之。
  12. 到步驟8內,反貼上最新的URL。
  13. 儲存成底稿
  14. 重新發佈。
  15. 檢視blog
  16. 重新整理。
PS blog比賽
http://blogaward.chinatimes.com/


Wednesday, November 15, 2006

不讓瀏覽者傷腦筋的網站

好的網站,要讓使用者不傷腦筋
請詳讀《胡為君譯,如何設計好網站,台北:上奇,2006年6月。》
且檢視你瀏覽過的網站有令人傷腦筋之處,例如:
  • 進入網站很久還看不到任何內容。
  • 無趣多餘的開場白。
  • 喧嘩不停的背景音樂。
  • 耗時良久才找到進入主頁的按鈕。
  • 要猜按鈕圖像的意義。
  • 不知按鈕按過否。
  • 按鈕在不同頁面擺置不一致。
  • 不知現在瀏覽的網站位置。
  • 頁面的版式不一致。
  • 色彩屬性混亂。
請看以下網站所能提供的啟示:

Wednesday, November 01, 2006

期中作業

繳期:
期中考週(11月 13~17 日)之上課日

作業規定:
  • 改善全真網站(http://www.asystem.com.tw)之首頁及一內頁,其按鈕設計須能完成超連結。
  • 僅能以Fireworks或ImageReady及Dreamweaver製作,禁用Flash。
  • 作業須上傳到web2.ntit.edu.tw/~sxxxxxxxxx/asystem/內。(~sxxxxxxxxx係你的學號)
設計方法:
  1. 理解該網站的組織結構(sitemap)及內容。
  2. 探索頁面的基本元素﹣﹣圖形、圖片、色彩計畫、按鈕及編排之屬性。
  3. 上述元素的合理性及一致性及互動的簡易性。
  4. 與其他優良設計網站之互相比照,可以模仿,但不宜抄襲。
瀏覽同學作品

Thursday, October 19, 2006

分割版面的方法

製作網頁時,許多頁面、按鈕及標題是用圖像來呈現的,請思考以下的網頁如何利用Fireworks或ImageReady來分割。
http://www.hothothot.com
Fireworks是為製作網頁編排而結合點陣式軟體與向量式軟體於一身的編輯器。此軟體方便對網頁編排中的圖像做分割以利傳輸,同時具有製作按鈕及動畫的功能。
利用Fireworks製作網頁頁面的步驟:
一、預想圖
網頁的版面及內容(可以徒手畫概念圖,或直接在畫圖軟體內完成。)
二、開啟新檔,設頁面大小。
對於800x600大小的螢幕,扣除瀏覽器的外框及圖示,真正可以置放內容的空間為760x420。
三、匯入圖像
圖像可以是點陣圖和或向量圖。在點陣式軟體如Photoshop或向量軟體如Illustrator或Freehand或CorelDraw做好圖片檔案,存成PNG檔案格式或JPEG檔。
然後在Fireworks選檔案(File) > 匯入(Import),匯入所需的圖像檔案。以箭頭工具做好圖像的編排。
四、使用繪圖工具
  • 影像工具
以箭頭工具點按影像圖二下即可進入影像編輯模式。此時作業視窗下方緣的「Exit Image Edit Mode」會呈紅色實彩,點按之即可切換到向量工具模式,此時該「Exit Image Edit Mode」圖示會變成半實彩狀態。
  • 向量工具
如畫矩形、橢圓及具茲曲線等。
使用上三項模式時,可用到Stroke,Fill及Effect等功能來增加圖像的特效。例如:利用Fill及Effect等功能,一圓形變成一凸起的圓鈕;或一矩形變成有底紋的按鈕。
五、製作按鈕(button)
製作按鈕是網頁設計中很重要的一項,Fireworks所提供的製作按鈕之能力,是值得嘉許的。
  1. 以向量工具(如圓或矩形)畫一按鈕外形。
  2. 點選上一步驟之向量圖形,選擇Insert > Convert to Symbol...,將它轉換成symbol。
  3. 此時會出現Symbol Properties對話框,選擇Button,並在Name文字框內命名。
  4. 選擇Window > Library,於Library視窗內點按該Button二下。
  5. 在Button編輯器內修改symbol,鍵入文字。
  6. 點選「Over」標頭,點按視窗下方的「Copy Up Graphic(拷貝Up標頭內的圖像)」,將Up標籤內的圖像拷貝到Over關鍵影格內。
  7. 改變「Over」標頭內之圖像的外框與內填色彩。
  8. 點選「Over」標頭,點按視窗下方的「Copy Up Graphic」,將Up標籤內的圖像拷貝到「Down」標籤內。
  9. 改變「Down」標頭內之圖像的外框與內填色彩。
  10. 指定URL:點選「Active Area」標頭,點按視窗下方的「Link Wizard...」,在「Link Wizard...」視窗內點選「Link」標頭,在「URL」內鍵入指定的位址如http://cd.ntit.edu.tw。
  11. 關閉Button編輯器。
六、複製按鈕
  1. 按住Alt鍵(Windows)或Option鍵(Machintosh),把前一按鈕下拉複製之。
  2. 在「Object」功能盤之「Button Text」欄位內前一按鈕之文字更新,壓下「Current」鈕。
  3. 點按「Link Wizard」鈕
  4. 點按「Link」標頭,更改URL。
  5. 點按「OK」鈕。
七、加入分割

八、修改分割的名稱

九、加入超連結

URL分絕對URL與相對URL兩種,前者是完完整整標示出如
http://www.cd.ntit.edu.tw/news/01.html。
而相對URL表示該URL與當下使用的html之間的相對位址關係。
只列檔名,表示在同一個資料夾內。
/是在往下一階的資料夾內的檔案。
../是在往上一階的資料夾內的檔案。
htmldocs/file.htm是在下一階名為htmldocs的資料夾內的檔案。
十、匯出精靈

優良設計網站

2007年Time評比的十大網站
  1. http://www.time.com/time/specials/2007/article/0,28804,1633488_1633458,00.html
2006年Time評比的十大網站
  1. http://www.time.com/time/topten/2006/websites/01.html
設計公司
  1. http://www.frogdesign.com/
  2. http://www.fusionary.com/
  3. http://www.id.carleton.ca/index.htm
  4. http://www.trio.to/
  5. http://creatop.com.tw
  6. http://www.nisan.tw/
  7. http://www.cadbury.co.uk/
  8. http://www.smashingmagazine.com/
一般公司

  1. http://www.hothothot.com
  2. http://www.razorfish.com
  3. http://www.hotwired.com
  4. http://www.annasui-cosmetics.com/
  5. http://www.annasuibeauty.com/site/welcome.htm
  6. http://www.rat.com.tw/freeform/ (台灣馬路科技顧客)
藝術家

  1. http://www.donbarnett.com/
  2. http://www.goblindesign.com/
  3. http://www.private-art.com/
學校

  1. http://www.dartmouth.edu/
單頁
  1. http://www.fourmilab.ch/images/Romanesco/
文字居多
  1. http://www.titoma.com.tw/
  2. http://www.coe.missouri.edu/~etp1083/mascot/
  3. http://iconfactory.com/home
圖面分割
  1. http://www.centuryinshoes.com/
  2. http://www.vw.com/
  3. http://www.abc.net.au/children/watch/default.htm
強檔Flash
  1. http://www.mp.com/
  2. http://realworld.on.net/index/flash/
  3. http://www.converse.com/
  4. http://www.the-control-group.com/
  5. http://www.neostream.com/
  6. http://www.e3direktiv.com
  7. http://www.monkey.com/lobby_flash.htm
  8. http://www.hasselblad.se/
  9. http://www.blackstarbeer.com/newsite/welcome.htm
  10. http://www.simpworld.net
  11. http://www.wpdfd.com/
  12. http://www.jetpack.com/
色彩
  1. http://www.wpdfd.com/
  2. http://www.lacountyarts.org/
  3. http://www.subpop.com/
互動按鈕
  1. http://www.lacountyarts.org/
  2. http://www.simpworld.net
網站地圖(Site Map)
  1. http://www.frogdesign.com/
選單或位址命名搭數字
  1. https://relentlessenergy.com/
  2. 魔瓶設計

期盼你推荐
  • 請點按右下的Comments,推荐設計良好的網站,並簡述其優良之理由。鍵網址時,請記拷貝下列紅色的字體
    <a>href="http://xxx.xxxxx.xxx">http://xxx.xxxxx.xxx </a>
    的語法,此處「xxx.xxxx.xxx」代表網址。
  • 為了避免打錯網址,你可從瀏覽器上網址區將優良設計網站的網址拷貝,再覆蓋到「xxx.xxxx.xxx」上。

Friday, October 06, 2006

網頁的圖像

網頁中的圖形格式
  • gif﹣﹣正常的與交錯式gif
    適用於色塊式的圖像,其存成網頁之最佳化作法是從最少量色樣遞增做起。
  • gif動畫
    可以利用Fireworksi或ImageReady製作之。
  • jpeg
    適用於照相或色彩層次高的圖像。壓縮檔會失真,其存成網頁之最佳化作法是在失真與檔案大小間取得平衡。
  • png
    分為8位元及24位元二種格式,後者沒有失真情形,但檔案非常大。
  • flah
gif動畫之參考網http://www.animationer.dk/

文字型的網站

網頁設計所用的語言是html(hypertext makeup language),該語言的編寫可以利用以下的方式進行:
  • 直接在網頁編輯器如Dreamweave、Frontpage編輯。
  • 直接以純字軟體﹣﹣如PC的附屬程式中的記事本來編寫。
  • 從網站上直接拷貝html格式
  • 從Words檔案複製
簡易練習
  • 改變文字大小
  • 改變段落
  • 改變格式
  • 在文章內加錨點(anchor)
  • 在文章內加特殊符號
  • 改變文字的色彩
模擬練習:
請將http://cd.ntit.edu.tw/~hsieh/3ds/01basic.htm的文字拷貝到你的index.html檔,並編輯成類似/http://kids.fmp.com.tw/giftlife/gf01.htm的編輯模式。
本練習希望你可以理解以文字為主要內容的網站之建構,它包括以下的項目:
  • 網站架構初探﹣﹣分類、命名、檔案夾
  • 頁面格式﹣﹣頁面大小、背景色、色彩、字型、表格及圖像
  • 插入橫隔線
  • 表格
  • 文字的超連結
  • 錨點的使用
    http://web.ntit.edu.tw/~hsieh/anchor.html拷貝到Dreamweaver。
範例:

範例製作要點
  • 水平分割線可以在code內之 hr 加入 color=" #ffcc33 "以產生色彩。

延伸討論:網站設計的步驟
依據http://www.1cog.com/web-design-process.html的實務說明,網站設計的步驟可分以下十二個階段。
  1. 初洽(Initial Talks)
  2. 估價(Fixed-price quote)
  3. 簽約(Contract signed)
  4. (Register domains)
  5. 細節討論(Detailed discussions)
  6. 內容提供(Content provision)
  7. 建構(Construction)
  8. 首次草稿(Initial draft)
  9. 最後草稿(Final draft)
  10. 定案(Final version)
  11. 發佈(Web site published)
  12. 搜尋引擎行銷(Search engine marketing)
其他可供參考的網站如下:
http://www.webdesignfromscratch.com/web_design_process.cfm
http://www.netdogz.com/design-process.asp

Wednesday, October 04, 2006

名詞釋義

IP: internet protocal address:以點分隔四個數值的位址,如161.17.143.3
domain name: 易於記住ip的替代名(如稱某人表其電話)
DNS (domain name server):該伺服器會將網域名稱轉換成對應的純數值的IP位址。
TCP/IP:美國開發的Transmission Control Protocal/ Internet Protocal

IP位址的實用功能可分成三種層級服
等級 網路數目 主機數目 使用範圍 申請領域
A 126 16777214 1.x.x.x~126.x.x.x 國家
B 16384 16382 128..x.x.x~191.x.x.x 跨國組織
C 2097152 256 192.x.x.x~223.x.x.x 企業

IP的註冊機器叫Internet NIC( Network Information Cneter),其網址是
http://www.internic.net
台灣的IP註冊機器網址是
http://www.twnic.net.tw

.tw是個網域,包含所有的子網域。
www.ntit.edu.tw是一個網域,cd.ntit.edu.tw是其子網域。
網域的類別
org政府機關
edu教育及學術
mil軍事
com公司 (但在英國及日本則用co)
net網路事業
idv個人

網域與網域之間均有通訊閘(gateway),類比為城門。gateway會有兩個IP,其一是合法申請的,其二是保留的。

ISP:網路服務供應商ISP( internet Service Provider),如台灣的中華電訊,美國的AOL。

Saturday, September 30, 2006

架部落格

本單元要請同學體驗網路傳播趨勢之一,即部落格。請先瀏覽以下的部落格:
現在,你要到http://www.blogger.com架設自己的部落格,你依它所規定的三個大步驟進行,你可以張貼一段文字。
接下來,你有必要進入「設定」中的「格式」選項中完成下列的細項:
  • 「時區」更改為「Taipei」
  • 「編碼」更改為「Chinese Traditional (Big5)」
更改之後,按頁面下方的「儲存設定」,再點按頁面上方「重新發佈」。
其次,你可能需要更改下列的設定:
  • 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中的大頭照刪除。
你也可以試著更改範本。不同的範本會有不同的風格,選一種和你最麻吉的。
恭喜你架好一個新的部落格,接下來的問題是你要張貼什麼內容?內容是king,沒有內容,就像一張空白紙。現在,且看底下的一篇短文,他的內容豐嗎?
http://www.fourmilab.ch/images/Romanesco/

要修改已張貼的文件,要先點按「張貼」再點按「修改」。
修改完之後一定要按最下方的「發佈文章」。
玩過最新的網路傳播趨勢﹣﹣部落格;我們要玩的是另一最普遍的網路傳播媒介﹣﹣網站。如此,我們可以約略地體會網路傳播的歷史片段。對於網路傳播歷史有興趣者,可參瀏覽以下網站:
http://www.walthowe.com/navnet/history.html
http://www.wikipedia.org