Tuesday, January 15, 2008

突破10MB網站空間的限制

部份同學發現學校給的網站空間10MB不夠容納一學期的作業使用,針對該問題,可進行以下的處置:
  1. 完成前一欄【節約與簡單化】所描述的節約作法。
  2. 檢查近端的資料夾內,凡副檔名為psd、png、fla、doc者,全數剪下,再貼到不是網站用的資料夾內備存。
  3. 將瘦身過的網站上傳,蓋過原先的網站。或者先刪掉遠端的www資料夾,再將近端的www資料夾拖拉放到遠端。
  4. 再次檢查遠端的www資料夾內是否仍有副檔名為psd、png、fla、doc者,若有,重復前二步驟。

Thursday, January 10, 2008

節約與簡單化

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

網頁的節約原則
任何頁面檔案變大,一定會增加上傳及下載時間。若一個網路有50頁,每頁檔案大小多50k,整個網站就增加2.5MB,以一秒傳100k,就要多耗25秒。
一般人很難忍受六秒內看不到頁面,若你的頁面檔案太大而讓瀏覽者跳離,那會是你的損失,可能損失一筆大生意。因此,你必須謹守以下的節約原則:
  • 省掉不必要的圖像。
  • 可以利用底色處,就不要用同色彩的圖檔。
  • 任何圖檔均在Photoshop或Fireworks完成為網路用,能壓縮儘量壓縮。
  • 不要在Dreamweaver內對圖檔做縮小或放大。
  • 文字要精簡扼要。
  • 想想一大圖,若將它的長寬縮小為90%,則它的檔案大小可以變為原來的81%;縮小為80%則變為原來的64%,節約相當可觀。
簡單化
讓網站管理簡單化是另一類的節約,因為它可以節省許多精力。以下是簡單化的方法:
  • 圖檔尺寸類型化。例如,整個網站的圖檔大小只有四種大小,第一種是主圖、第二及第三種是次圖、第四種是按鈕。
  • 圖像處理可善用Photoshop的批次管理。
  • 文字的管理CSS化,利用CSS可以有效管理文字字型及色彩等樣型的變化。
  • 資料分類系統化,資料夾的命名可以結合流水號及功用名稱。

Thursday, January 03, 2008

網路行銷之網頁設計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,以下的網站是值得一覽:

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