優選榜單
設三A
設三1
夜設三A
Friday, January 18, 2008
Tuesday, January 15, 2008
突破10MB網站空間的限制
部份同學發現學校給的網站空間10MB不夠容納一學期的作業使用,針對該問題,可進行以下的處置:
- 完成前一欄【節約與簡單化】所描述的節約作法。
- 檢查近端的資料夾內,凡副檔名為psd、png、fla、doc者,全數剪下,再貼到不是網站用的資料夾內備存。
- 將瘦身過的網站上傳,蓋過原先的網站。或者先刪掉遠端的www資料夾,再將近端的www資料夾拖拉放到遠端。
- 再次檢查遠端的www資料夾內是否仍有副檔名為psd、png、fla、doc者,若有,重復前二步驟。
Thursday, January 10, 2008
節約與簡單化
設計網站時,「節約」是一項很重要的習慣。此處的節約是以不改變網站內容品質的前提下,讓檔案最小化。
網頁的節約原則
任何頁面檔案變大,一定會增加上傳及下載時間。若一個網路有50頁,每頁檔案大小多50k,整個網站就增加2.5MB,以一秒傳100k,就要多耗25秒。
一般人很難忍受六秒內看不到頁面,若你的頁面檔案太大而讓瀏覽者跳離,那會是你的損失,可能損失一筆大生意。因此,你必須謹守以下的節約原則:
讓網站管理簡單化是另一類的節約,因為它可以節省許多精力。以下是簡單化的方法:
網頁的節約原則
任何頁面檔案變大,一定會增加上傳及下載時間。若一個網路有50頁,每頁檔案大小多50k,整個網站就增加2.5MB,以一秒傳100k,就要多耗25秒。
一般人很難忍受六秒內看不到頁面,若你的頁面檔案太大而讓瀏覽者跳離,那會是你的損失,可能損失一筆大生意。因此,你必須謹守以下的節約原則:
- 省掉不必要的圖像。
- 可以利用底色處,就不要用同色彩的圖檔。
- 任何圖檔均在Photoshop或Fireworks完成為網路用,能壓縮儘量壓縮。
- 不要在Dreamweaver內對圖檔做縮小或放大。
- 文字要精簡扼要。
- 想想一大圖,若將它的長寬縮小為90%,則它的檔案大小可以變為原來的81%;縮小為80%則變為原來的64%,節約相當可觀。
讓網站管理簡單化是另一類的節約,因為它可以節省許多精力。以下是簡單化的方法:
- 圖檔尺寸類型化。例如,整個網站的圖檔大小只有四種大小,第一種是主圖、第二及第三種是次圖、第四種是按鈕。
- 圖像處理可善用Photoshop的批次管理。
- 文字的管理CSS化,利用CSS可以有效管理文字字型及色彩等樣型的變化。
- 資料分類系統化,資料夾的命名可以結合流水號及功用名稱。
Thursday, January 03, 2008
網路行銷之網頁設計10大秘訣
網頁設計的目的之一是行銷,而欲達此目的的秘訣有十,簡列如下:
- 文字說明要清楚(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)
Meta標籤應用
在head標籤內,除了可以設style標籤之外,也可以設meta標籤,而在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/
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="description" content="這是愛書人的雜記">
<meta name="keywords" content="謝寶泰、雜記">
一般要注意
- 頁面更換
第一個網頁(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/
- 增加網站、部落格的知名度
<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入門
CSS概述
CSS是Cascading Style Sheet的縮寫,中譯為樣式表。它是一組樣式的集合,功能是要讓網站頁面的設計能結構化、經濟化及美觀化。
樣式可以是網頁內部的,也可以是外部的。前者適用於單一頁面,後者適用於整個網站﹣﹣先設好一個.css檔,網頁再連結該.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。
Subscribe to:
Posts (Atom)