蕃茄腦袋: 2007

[+/-] : [線上教學] InDesign 的線上教學影片

張貼者：蕃茄 (Tomato) 3 Comments

[+/-] : 常用的CSS命名規則

張貼者：蕃茄 (Tomato) 0 Comments

常用的CSS命名規則

一、常用的CSS命名規則
頭：header
內容：content/container
底：footer
導覽：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
登入條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導覽：subnav
項目：menu
子項目：submenu
搜尋：search
友情鏈結：friendlink
頁底：footer
版權：copyright
滾動：scroll
內容：content
標籤頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
註冊：regsiter
狀態：status
投票：vote
合作夥伴：partner

內部：inner
區域：area/region

二、註釋的寫法：

/* Footer */
內容區
/* End Footer */

三、id的命名：

(1) 頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導覽：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center

(2) 導覽
導覽：nav
主導覽：mainbav
子導覽：subnav
頂導覽：topnav
邊導覽：sidebar
左導覽：leftsidebar
右導覽：rightsidebar
項目：menu
子項目：submenu
標題: title
摘要: summary

(3) 功能
標誌：logo
廣告：banner
登陸：login
登陸條：loginbar
註冊：regsiter
搜尋：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
註釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：copyright

四、class的命名：

(1) 顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2) 字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) 對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }

(4) 標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }

注意事項：

1.一律小寫；
2.儘量用英文；
3.不加中槓和下劃線；
4.儘量不縮寫，除非一看就明白的單詞。

一些CSS樣式表檔案命名：

主要的 master.css
模塊 module.css
基本共用 base.css
佈局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css

[+/-] : [Firefox Add-ons] 不用到 Google Analytics 就能看到網站流量的各項數據

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : [Firefox Add-ons] 讓 Firefox 也有BossKey哦!

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : ActiveX Office ProgIds

張貼者：蕃茄 (Tomato) 0 Comments

ActiveX Office ProgIds
這個東西是什麼呢?

剛好做個案子需要用到 ActiveX 所以才去查 Office ProgIds。
因為你不管是要在那想要啟動 Office 系列的成員， ActiveX 文件類型或路徑至 Office 範本檔案，你就會需要用到程式設計識別項 (ProgId)。

舉例來說，您可以使用下列 Office ProgIds。


Excel Spreadsheet ======>     "Excel.Sheet"

Excel Chart ======>     "Excel.Chart"

PowerPoint Presentation ======>     "PowerPoint.Show"

Project Database ======>     "MSProject.Project"

Visio Drawing ======>         "Visio.Drawing"

Word Document     ======>     "Word.Document"

[+/-] : 很難保持耶...

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : FLASH 元件命名時的小技巧

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [好用軟體分享] KMPlayer V2.9 超強的多媒體播放軟體

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [Firefox Add-ons] FireBug 開發 AJAX , CSS , HTML , JavaScript 一定要有的套件

張貼者：蕃茄 (Tomato) 2 Comments

[+/-] : 有任何問題，都歡迎在這裡留言，我會盡快且詳細的回答

張貼者：蕃茄 (Tomato) 87 Comments

[+/-] : [好用軟體分享] Video mp3 Extractor 1.8 取出影片內的聲音

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [打造網頁標準化] 在 30 天內打造更具親和力的網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [SEO (Search Engine Optimization)] 影響網站排名的45個因素（轉貼）

張貼者：蕃茄 (Tomato) 0 Comments

以下４５個項目可是說是基本的觀念，但不是絕對因素，因為搜尋引擎都會不斷的改變評分方式及項目，以確保搜尋的結果不會每次都相同，所以如果想要網站一直保持在前面，就需要不斷的改進，所以想要讓自己的網站保持在前面，這是一件很花時間的事哦！

網頁內部因素

　　URL中出現關鍵詞
　　網頁Title中出現關鍵詞
　　常規內容中出現關鍵詞
　　在頁面的第一段中出現關鍵詞
　　在頁面的最後一段中出現關鍵詞
　　Heading 標籤比如h1,h2中出現關鍵詞
　　站內的鏈接中出現關鍵詞
　　導向相關內容的導出鏈接
　　導出鏈接中出現關鍵詞
　　圖片文件名中出現關鍵詞
　　Alt標籤中出現關鍵詞
　　comment中出現關鍵詞
　　合理的頻率更新內容
　　內容對搜索引擎的展示位置
　　網站結構循環PR，而非散發PR

網站外部因素

　　大量的導入鏈接
　　從高PR值得網頁獲得導入鏈接
　　從相關內容網站獲得導入鏈接
　　導入鏈接指向的網頁有具體內容
　　錨文字中有關鍵詞
　　錨文字周圍有相關詞
　　錨文字存在於文章或句子中
　　導入鏈接的時間長度，一般導入鏈接的存在時間有3-6個月
　　單向鏈接的價值高於交換鏈接
　　導入鏈接的頁面的導出鏈接小於100個，流出鏈接越少越好
　　鏈接來自不同IP
　　合理的導入鏈接增長頻率
　　你需要避免的事情
　　關鍵詞堆積
　　所有的錨文字都相同
　　使用CSS或背景色隱藏內容，這是十惡不赦的大惡
　　使用javascript跳轉
　　相同ip之下的網頁直接進行大量交換鏈接
　　橋頁和Cloaking，誘導搜索引擎的爬蟲，這是十惡不赦的大惡
　　成人內容，違禁藥品，賭博相關內容
　　內容重複
　　連向作弊的網站
　　站內的絕大部分網頁有相同的網頁title
　　加入到Link Farm或則Link交換類網站
　　儘量避免的問題
　　地址中存在動態變量
　　單一圖片和Flash的網站
　　用javascript製作的網站導航條或目錄
　　用圖片做網站導航而不加ALT標籤
　　〈head〉〈/head〉之間有太多的代碼
　　存在太多與網站主題無關的內容
　　導入鏈接中購買鏈接佔多數

[+/-] : [Firefox Add-ons] Viamatic foXpose 0.6 用縮圖秀出分頁內容

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [Firefox Add-ons] 新同文堂 - 讓你忘了在逛台灣 OR 對岸的網頁

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [Firefox 小技巧] 讓你的Firfox也有網址自動完成

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 使用 CSS 按比例縮小圖片

張貼者：蕃茄 (Tomato) 0 Comments

要把一張大圖片按比例縮小到某個尺寸，對於現代瀏覽器，直接使用 max-width 和 max-height 兩個 CSS 語法即可。

咦~~什麼叫現代瀏覽器呢？像是 FireFox OR Opera 等都是，至於咱們常看見的 IE 6.0 及以下版本，其實我真的想要說 IE 全系列都很難算得上現代瀏覽器，好啦，回到話題，重點是以上兩個 CSS 屬性都不會被執行，因為 IE 看不懂，也不技援。所以之前處理這種事情，我們一般來說往往都會借助 Javascript，然後幫圖片加上 onload 事件。例如：


<img src="圖片名稱" onload="resizeImg(this)" />
 <script type="text/javascript">
 function resizeImg(obj) {
obj.width = obj.width   > 50 && obj.width > obj.height ? 50 : auto;
obj.height = obj.height   > 50 ? 50 : auto;
 }
 </script>

採用以上的方式是能解決問題，但是對以後網頁的管理會很麻煩，因為需要每張圖都要加上　onload ，麻煩也用了好些年了，但是隨著瀏覽器對 CSS 的支援越來越完善，終有一天你會跟我一樣把圖片上的 onload 事件統統刪掉。

這時就是 Expression 的出場的時候啦，因為 IE 有支援 Expression 在 CSS 的語法中放入一些判斷式，而這些判斷式又只有 IE 6.0 及以下版本才看得懂，所以把標準 CSS 寫入後再加上 Expression 應該就算是最好的決解方案了吧。

以下就是把大圖按比例縮小到 100px * 100px 以內，語法如下：


.thumbImage {
/* 這是標準 CSS 2.0 語法，可以限定最大寬度，即然有 max-width，那當然也就會有 min-width 囉！至於 max-height 使用方法當然也就相同囉 */
   max-width: 100px;
   max-height: 100px;
}
/* 加上 * 星號，這是 IE 專用，至於這個 CSS Hacks 的使用時機，我會另開一篇來說明 */
* html .thumbImage {
   width: expression(this.width > 50 && this.width > this.height ? 50 : auto);
   height: expresion(this.height > 50 ? 50 : auto);
}

[+/-] : Flash CS4 / Flash 10 代號為："Diesel"

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [線上手冊] 線上版 CSS2.0 中文手冊

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [CSS 教學網站] - cssplay

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [CSS 教學網站] - CSS實務排版技巧、秘訣與技術

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : [Firefox Add-ons] Web Developer - 不管那種人都要用

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : [Firefox Add-ons] All-in-One gestures - 用滑鼠手勢搞定一切

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 免安裝版IE 3.0 ~ 6.0

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 你好色嗎? 好色就該讓大家都知道!!

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 安裝 IE7.0 免安裝版

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : 原來大企業也有好服務

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : RJ45網路線的標準接法

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 跑馬燈 (marquee)

張貼者：蕃茄 (Tomato) 1 Comments

什麼意跑馬燈呢？請看看以下的效果吧！
我就是跑馬燈的效果

以下就是上面跑馬燈的語法及屬性囉！


<marquee behavior=scroll direction=left loop=infinite height=20 width=100% bgcolor="#FF9900">我就是跑馬燈的效果</marquee>

marquee 的參數表

behavior = alternate, scroll, slide >>> 捲動方式
direction = left, right, up, down >>> 捲動方向
loop = n, infinite >>> 捲動次數
height = n >>> 高
width = n >>> 寬
scrollAmount = n >>> 移動距離間距(預設為 6)
scrollDelay = n >>> 移動時間間距(預設為 85)
trueSpeed = true/false >>>(預設為 false)
bgcolor= blue >>> 顏色
...
Read more

[+/-] : 什麼是擴充套件呢？？

張貼者：蕃茄 (Tomato) 0 Comments

我想這解釋起來，可以簡單，也可以是非常的複雜

簡單的來說，就是安裝後，可以讓你的 FireFox 多一些好用的功能，如：簡繁自動轉換的”同文堂”、可以讓你用滑鼠右鍵加上手勢就可以自由操作瀏覽器的動作....等

如果要講得比較完整，比較有學術性的話，我轉貼以下的文章，有空可以好好看看吧...

更多的好文章，建議你還是上去論壇多看看

========以下是轉載於 Mozilla Taiwan 論壇裡 [路人甲] 的文章===============

Q0.1:擴充套件是什麼？
A0:擴充套件（Extensions）就是一種輕巧的小程式，能和以 Gecko 繪圖引擎（Layout Engine）運作的瀏覽器緊密結合，以加強或增添瀏覽器的功能。擴充套件之所以存在，最大目的在於將「瀏覽器的核心功用（例如繪製頁面與瀏覽器外觀）」與「其他用戶導向的功能（例如滑鼠手勢等...其需要性因人而異的功能）」分離，使得瀏覽器本身能專注於核心功能的研發進而達到「小而美」的境地，再藉由擴充套件的支援使得每個用戶都能「各取所需」，翦除用不到的功能以充分達到客製化的目的。其終極的目標就是要讓每個使用者都有合乎自己需求而且快速、穩定的網頁瀏覽環境。

相關：MozillaZine KnowledgeBase（Mozilla 每日誌知識庫）
　　　Mozilla Support（Mozilla 官方支援資料）
　　　FireAnything（FireFox 的無相神功）
　　　FireFox 的設計準則

Q0.2:擴充套件（Extensions）與外插模組（Plugins，別稱：插件、插入程式）以及外掛程式（Trainer）有什麼區別？
A0.2:所謂的 Plugins 是九０年代藉由 Netscape 所製定的一套介面標準 (NPAPI)，讓協力廠商能夠藉以製作出加強瀏覽器功能的輔助程式，其目的與出發點其實是和擴充套件相似的，但是有別於 Plugin 的是：所謂的「擴充套件」是特指支援以 Mozilla 瀏覽器所衍生的各種瀏覽器的附加程式，可藉由 Mozilla 瀏覽器所提供的擴充介面 (by XUL、Javascript、DOM、XPCOM、CSS...) 來加強化增添瀏覽器的功能；以下將各位讀者所容易混淆的名詞條列出來做個比較：

　一、Extensions（擴充套件）：使用 Mozilla 擴充介面、用來加強或增加 Mozilla 系列瀏覽器功能的小程式。

　二、Plugins（外插模組、插件、插入程式）：使用 NPAPI（或其改良版）為介面，以提供跨瀏覽器協力支援的程式。

　三、Trainers、Hack-ins（外掛程式、作弊程式）：沒有特定的形式，多半是藉由修改機器碼 (Machine Code) 或網路封包來達到改變原本程式行為的程式。

Q0.3:使用擴充套件有什麼優缺點？
A0.3:使用擴充套件可以讓使用者各取所需，進而打造一個您夢想中的瀏覽器，但是安裝太多的套件卻也可能會提高系統資源的使用或因此而降低了瀏覽器的執行速度，所以在安裝擴充套件之前，建議您根據您設備的等級或使用狀況審慎思考該套件是否確定為必需，以免因為安裝了過多的套件而敗壞了衝浪的興致。除此之外，套件的品質也會因為各個作者的寫作風格而有差異，在您選用套件之前不妨在使用者社群（例如： http://forum.moztw.org 啊！您現在不就正在看嗎!? ^^）中先打聽該套件的評價再決定使用與否。此外，在套件與套件之間也可能有因使用相同的系統資源（例如快捷鍵）而導致不相容的情況，所以在使用前詳閱套件說明書也是必要的。

Q1:要怎樣安裝擴充套件呢？
A1:方法一、到提供套件的網站直接點選安裝或下載連結 (Install/Download)，然後按下 <安裝> 鈕即可。
　　方法二、如果您想要保存該套件的話，可以按滑鼠右鍵選「連結另存新檔(K)」將套件檔案存到硬碟中，然後將已存到硬碟裡的擴充套件 (沒有意外的話，應該是一個 .xpi 檔案) 拖放到 Firefox、Mozilla 視窗中，然後按下 <安裝> 鈕。(安裝完不要忘記重新啟動 Firefox 喔！)。
　　方法三、從瀏覽器的選單列上依次選擇：檔案(F) -> 開啟檔案(O)，然後在檔案瀏覽對話框中選擇您要安裝的.xpi檔案，最後當套件安裝視窗出現時，按下下方的<安裝>按鈕即可。

附加：小編推薦的擴充套件集散網站
　　　Mozilla Update（Mozilla 官方的擴充套件/佈景主題網站）
　　　The Extensions Room（最大的「民營」套件論壇）
　　　The Extensions Room 套件分類 FAQ（英）

Q2:點選擴充套件的連結後，瀏覽器卻不讓我安裝套件，該怎麼辦？
A2:方法一、點選瀏覽頁上方資訊列 (就是寫著「為了保護你的電腦，Firefox 拒絕...」的那行字的地方) 右方的 <編輯選項> 按鈕，然後按 <允許> 鈕將該站加入允許安裝程式網站群，接著再重新按一次下載連結即可。
　　方法二、如果您不想該站設為允許網站，也可以將擴充套件儲存到硬碟中然後安裝，這樣就不會出現警告訊息了。

Q3:我要如何才能移除擴充套件？
A3:依序點選瀏覽器的選單：工具 -> 擴充套件，然後在擴充套件列表中選取您所想找的套件，按下視窗下方的 <移除> 按鈕或滑鼠右鍵選單上的「移除」，在之後出現的提示移除對話框上按下 <確定> 鈕就可以了。

Q4:我重新安裝瀏覽器後，發現那些舊的擴充套件又通通跑回來了！這是怎麼回事啊？
A4:這是因為瀏覽器和使用者設定檔的資料夾是分開的，以 Windows 版的 Firefox 來說：瀏覽器的程式位置預設在「C:\Program Files\Mozilla Firefox\」下，而使用者設定檔則通常位於「C:\Documents and Settings\????\Application Data\Mozilla\Firefox\Profiles\%%%%.****」下面，其中「????」是您的 Windows 登入帳號，而「%%%%」這個字串是 Firefox 隨機產生的，最後「****」則是您的 Firefox 使用者設定檔名稱，它的預設值是「default」；當您要重新安裝瀏覽器時也別忘了要將舊的使用者設定檔目錄刪除，不然瀏覽器有可能會沿用你的舊設定檔跟擴充套件。 (更詳細的資料請參閱 MozillaZine:Profiles)。

Q5:我想要移除某一個擴充套件，但是在套件清單上它顯示「將在重新啟動後移除」卻怎麼樣也移除不掉，這該怎麼辦才好？
A5:這個問題的乃是因為擴充套件的啟動比瀏覽器的移除程序早發生的緣故，在正常使用的情況下是不應該發生這種情況的，但是由於套件的作者形形色色，也有可能發生擴充套件無法移除或是根本沒有附帶移除程序的情況；在這裡提供幾個方法解決問題（依先後順序為推薦順序）：

　1.直接將使用者設定檔刪除（請參閱Q4），重新建立新的使用者設定檔。（注意：刪除前不要忘了備份設定檔目錄中的書籤等重要檔案）。

　2.試試看再一次安裝同一個套件（或是該套件的昇級版），然後「停用」該套件後重新移除它，重新啟動後檢查是不是正常移除了。
...
Read more

[+/-] : 超好用的擴充套件

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 天殺的 , 超好用找 ICON 的好幫手 - ICONFINDER

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 再來一發好用的配色網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 又是一個進化後的配色網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 配色及 CSS 白痴的救星

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : ColorMatch 10K 再來一個配色網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : ColorMatch.dk 又是一個好用的配色網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 使用 Firefox 的理由

張貼者：蕃茄 (Tomato) 0 Comments

使用 Firefox 的理由

阻擋彈出廣告視窗: Firefox 內建阻擋彈出視窗功能，將煩人的彈出視窗阻殺於半途之中。

分頁瀏覽: 使用這個節省時間的功能，您可以在同一視窗內觀看多個網頁。將連結開啟於背景分頁之中，當您準備好要閱讀其他頁面時，它們已經載入完畢，您不需花費時間等待。相關資訊...

隱私及安全: Firefox 留心您的安全及隱私，不讓惡意的間諜程式入侵您的電腦。內建多種隱私保護工具，讓您能掌控自己在線上的一舉一動。

更聰明的搜尋功能: 網址列中內建 Yahoo!奇摩搜尋功能，頗受好評的「搜尋欄」此次伴隨「搜尋建議」等貼心功能，還有眾多搜尋工具如「關鍵字」及「尋找工具列」。

即時書籤: 整合 RSS，方便您訂閱最新頭條及網站更新訊息。相關資訊...

下載檔案無麻煩: 您下載的檔案可自動置於桌面上，容易尋找。減少問東問西的情形，讓下載更流暢快速。

體貼你心: 簡單又直覺的 Firefox 擁有符合您習慣的完整功能：除了書籤、瀏覽記錄、全螢幕等工具之外，還可以自由縮放文字，符合您閱讀上的需求。

放大縮小，隨心所欲: Firefox 是世上最容易自訂的瀏覽器了！您可自訂工具列添加按鈕、可以安裝新的擴充套件來增加新功能、可以安裝符合個人風格的佈景主題、還可以自行挑選上百種搜尋引擎與瀏覽器介面整合，方便使用。Firefox 的功能該多或少、體態該大或小，由您決定。

超容易的裝配方式: Firefox （的 Windows 版）僅僅 4.5 MB，以寬頻下載僅需數分鍾時間。安裝程式讓您迅速安裝 Firefox，而嶄新的移轉系統可將您的「我的最愛」、儲存密碼及其他各種設定資料從 Internet Explorer 或其他瀏覽器中匯入 Firefox，您立刻能在網路上四處遊玩。

開發員最好的朋友: Firefox 擁有一組開發員用的工具，包括強大的 JavaScript/CSS 錯誤訊息警示控制台、選用的文件檢視器（DOM Inspector）等，提供您洞察網頁運作詳情的能力。

[+/-] : 甚麼是 XSLT (eXtensible Style Language Transformation)

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 甚麼是 XSL (eXtensible Style Language)

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : Flash 開發者必去的網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 搶救受性侵孩子缺我不行

張貼者：蕃茄 (Tomato) 1 Comments

別說你不會遇到！

前一陣子在一本書裡讀到這樣一個令人怵目驚心的標題: 「別說你不會遇到」
內容說的是一九六四年發生在紐約的一個駭人的社會事件。這篇故事引起我的注意，主要是因為它提醒了行動的重要性，以下就是事件的發生經過:

珍諾維斯命案

一九六四年三月十三日，黑色星期五。凌晨時分的紐約皇后區，在酒吧擔任經理的珍諾維斯(Catherine Genovese)輪完夜班正要回家。她一人獨居，當晚照例將車開進附近的停車場，停好車，朝向公寓走去。時間是凌晨三點。她一下車就遭人尾隨，隱約可見是名形跡可疑的男子，她便向右轉走向街角的緊急報案電話。

不過，珍諾維斯終究沒能走到緊急電話。名叫莫里斯的男子，拿刀朝珍諾維斯背部猛刺，她轉過身，腹部也中刀。她渾身是血，大聲呼喊:「救命!他拿刀刺我，誰來救救我!」，案發地區住家密集，她一呼喊，燈光紛紛亮起，有人大喊:「放過那個女孩!」莫里斯跑開，身中數刀的珍諾維斯，勉強爬行到路邊，躺臥在一家書店門口。

莫里斯剛走回他的車，發現四周安靜下來，燈光也暗了，於是決定回頭完成他要做的事情。他換了頂帽子，潛行回到街上，找到捲縮在地上、渾身是血的珍諾維斯，繼續朝她猛刺，幾乎把她的脖子和陰道割裂。珍諾維斯再度尖叫求救，幾分鍾後，住家燈光再度亮起，莫里斯再度退卻，珍諾維斯設法爬進所住的公寓大樓裡。街道又陷入死寂，幾分鍾後，莫里斯又回頭找到她，再度逞兇施暴。她大聲呼救，但不久後只能發出微弱呻吟。

這起案件前後超過三十五分鍾，從凌晨三點十五分到三點五十分，歹徒三度施暴，每次珍諾維斯都尖聲呼救，幾分鍾後，附近住戶應該都聽見了，儘管他們開燈查看，甚至目睹事件過程，卻沒有人伸出援手。總共三十八名證人隔著窗戶。眼睜睜看著一名女子身中多刀，飽受凌虐。犯行結束後，終於有人打電話報警，不過受害女子已經身亡，救護車將她載走，當時凌晨四點，那些目睹一切的人又回房繼續睡覺，街上又回覆寂靜。

「這些人不會下樓」!

珍諾維斯遇害的那個夜晚，到底發生了什麼事情?

在驚心動魄的35分鍾裡，目擊者內心如何掙扎取捨，沒有人說得清楚。除了珍諾維斯殘破的屍體、三十八名目擊者的極度驚嚇與社會至今仍然餘盪的譴責之外，歹徒莫里斯受審時說:「這些人不會下樓」。

這三十八名目擊者或許在他往後的人生中，都無法回答那一晚為什麼他們沒有下樓，但是學者的研究提供瞭解答。當時在紐約大學任教的兩位心理學者達利與拉丹設計了一個仿造珍諾維斯命案的實驗，實驗發現目擊者若超過四個人以上就不會有人主動採取行動，但若認為只有自己在場，沒有其他人知道危險的存在，85%的人會在三分鍾內採取行動(三分鍾內沒有採取行動者，也就不會再動作了)。

心理實驗告訴我們「責任分散」的作用加上對舉止得體的要求，讓人對某些生死攸關的情境視而不見。畢竟如果只有我大驚小怪，也許只是一場虛驚，那有多丟臉阿!

缺我不行！

沒有錯!就是因為多數的目擊者認為:「或許是一場虛驚」、「還有很多人都看到了」、「不缺我一人」，所以可以阻止的沒有被阻止，需要伸出援手的時候又遲疑了!
你以為缺你無所謂，但是事實是:你很重要！

當不幸事件發生，目擊者內心會焦躁、無助甚至懷疑並且不斷的交戰，但是請記得，最後讓這些阻力變成援助的就是行動！
心理學家達利與拉丹曾經提出過助人行為的五個階段，唯有完成最後的[行動]的步驟，你的正義感才真實地幫助了他人！

1. 察覺:你注意到有事情發生，而你可能幫得上忙

2. 理解:你認為有人需要幫忙

3. 責任:你自覺需要幫忙

4. 判斷:你決定要怎麼做

5. 行動:你採取行動

每年實際遭受性侵害的人數約有34300人

其中兒童就有19208人

80%以上的加害者都是熟人

每天有52名兒童被性侵害

每27分鍾可能就有一個孩子遭受性侵

我們知道要幫助受性侵的孩子，需要各方面的參與，才能及時發現並且及時幫助，不過要將性侵害的危害降到最低，除了大聲疾呼「缺你不行」之外，唯有你/妳自發地站出來說「缺我不行」才是成功的關鍵！

你願不願意站出來支持搶救受性侵的孩子?
你願不願意在發現孩子有不尋常的困擾時主動關心?
你願不願意呼籲週遭的人一同關心兒童保護的重要?

假如你願意，請加入我們的串連行動！

加入555個部落格同聲疾呼「缺我不行」串連行動

兒童保護訊息「你」很重要瞭解蒲公英飛揚計畫蒲公英諮詢專線捐款方式

[+/-] : 在 WindowsXP 下安裝各種版本的IE

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 不會配色嗎?? 需要靈感嗎?? 快上 Adobe Kuler 網站!!

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 又一個大量又免費的 ICON 網站

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 需要大量又免費的 ICON 嗎??

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 使用超連結跳頁

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 偵測瀏覽器是否支援 Cookie

張貼者：蕃茄 (Tomato) 0 Comments

使用方式非常的簡單，只要將下面的 Script 貼到網頁裡的檔頭（<head> 程式貼到這</head>）就可以使用了，很簡單吧！


<SCRIPT language=JavaScript>
<!--
if(navigator.cookieEnabled == false)
{
alert("對不起  ,  您的瀏覽器並不支援  Cookie 請開啟瀏覽器 Cookie  方能使用本服務 , 謝謝!!");
history.back();//這是返回上一頁
}
//-->
</SCRIPT>

[+/-] : 防止圖片擠破頁面

張貼者：蕃茄 (Tomato) 1 Comments

[+/-] : 用CSS就可以控制列印樣式

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 在 CSS 中使用 JavaScript 控制圖片

張貼者：蕃茄 (Tomato) 0 Comments

若圖片寬度過寬導致版面位置移位問題，可自訂 ID 裡 width 屬性。


預設 #ImgWidth
/*定位框*/
#ImgWidth {
/* width:100%;
behavior:expression( this.style.width = (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px; */
Width: 800 px; ( 視圖檔大小調寬 width，例 : 1600 px )
}

提供三個調整width的方式，請擇一使用，不使用的code部份請用註解 /* . .. ..*/ 將code包起來。

選擇一


/*照原比例顯示，無任何調整*/
width:100%;

選擇二


behavior:expression( this.style.width = (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
/* 如果文件的寬度小於990px，則this.style.width=990px
否則this.style.width=100% ，最小寬度為990px */

選擇三


/* 可視圖檔大小彈性將#container的width寬度自訂為800px */
Width: 800 px;

[+/-] : Flash 透明背景

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 空白鍵的使用

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 世界上最高、最長和最小的網頁

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : Dr.eye 譯典通可以在pdf檔下即時翻譯耶

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 網頁在IE中打不開，其他的瀏覽器都是正常的

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 隱藏 ie6 的圖片工具列

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : FLASH或是其它多媒體在IE裡討人厭的外框

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : FLASH場景限制

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : Action Script 可以寫在那些地方

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : Adobe CS3 Conference

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : FON 到底是啥？

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 開始整理各式問題與回應囉!!!

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 想了很久，終於開始動手做了

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : 關於台灣 Flash 書的感想

張貼者：蕃茄 (Tomato) 0 Comments

[+/-] : CSS可以放在那些地方呢？

張貼者：蕃茄 (Tomato) 0 Comments

一般來說，大至上有三個不同的地方

行內套用 (Inline)
嵌入套用 (Embed)
外部連接套用 (External Link) & 匯入套用 (Import)

行內套用（Inline)
簡單的來說，就是在任何一個 HTML 標籤裡，再外加一個 style 的屬性即可使用CSS的語法，優缺點其實跟網頁內義是一樣的，就不在重覆了，語法如下：


<table style="background-color:blue; color:#FFFFFF ">

嵌入套用 (Embed)
也就是直接輸入在網頁中，一般來說只要放入<head> </head>裡的任何一個地方都行，如：


<head>
<style type="text/css">
<!--
hr {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 2px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-bottom-color: #0066FF;
}
-->
</style>
</head>

將上述的語法貼入檔頭中，就會呈現出如下圖：

使用起來的很直覺，也很好修改，但是將來不好做維護，因為網站裡每個網頁裡都會有這些東西，也會重覆，將來要改 body 的 background-color ，就需要將所有網頁一一開啟修正、儲存、測試，才完成修改，如果這些網頁有幾百頁或千頁，那你這輩子不就為了這些頁面在浪費你的生命嗎？

外部連接套用 (External Link) & 匯入套用 (Import)
這種方式是 CSS 中最好用也最好管理的一種方式，而在這種使用方式下，所有的 CSS 樣式表的語法都是存在另外一個檔案中。
該檔案通常名稱為 .css（其實不用取名為 .css 也行但是大多取名為 .css）。
緊接著在 HTML 文件的 <header> </header> 之中，將用以下的方式將 .css 檔案連結進來：

而在網頁裡的檔頭需要引入使用的時候有二種不同的寫法：

第一種是：LINK (連結樣式表)


<link rel="stylesheet" type="text/css" href="MYCSS.css">

第二種是：IMPORT (匯入樣式表)


<style type="text/css">
<!--
@import url("MyCSS.CSS")
-->
</style>

需要連結進來的 CSS 檔案內容大至如下圖所示：

而 LINK(連結樣式表) 與 IMPROT(匯入樣式表) 這二種連結方式有什麼差異呢？
我想啊！光看字面大概就能猜到八九成了，這二種不同的連結方式，在外觀及功能上是完全相同的，也就是光看結果，你是完全看不出有任何的差異性，這二種只有運作方式不同。如果你是使用 IMPROT(匯入樣式表) 的方式匯入樣式檔案，那瀏覽器在讀取 CSS 時，會將樣式表複製一份到網頁內（這種方式會像是嵌入套用，但是保有統一管理的好處。）；如果使用 LINK(連結樣式表) ，瀏覽器會再需要 CSS 時，才會去向 CSS 檔案裡尋找所需要的樣式。

PS:其實 IMPROT(匯入樣式表) 可以跟 LINK(連結樣式表) 一起使用，但是其實不建議這麼使用，相互連結到最後，人通常都會搞不清楚到底誰比誰的權利大。...
Read more

[+/-] : 視覺描繪模型 (CSS2)

張貼者：蕃茄 (Tomato) 0 Comments

HTML 最主要的缺點（其他任何類似的標記語言亦是如此）在於文件的內容與格式是互相混和在一起的。舉例來說，HTML 的標籤讓瀏覽器將某個元素顯示成一個表格。你可以自行設定表格各項屬性來改變表格的外觀風貌，例如寬度與對齊方式。然而如果你想要修改頁面中所有表格的外觀，那麼你必須逐一修改各個表格。進一步來說，如果妳要修改整個網站中所有表格的外觀，那麼你必須一個一個修改網站中每個頁面的每一個表格！這樣的工作別的不說，光是冗長乏味以及浪費的時間就足夠讓人難以接受了。

不過，結構化的 HTML 原始碼撰寫方式所帶來的彈性不足的問題通常還是最不需要擔心的部分。當你使用了一些進階技巧，例如分割視窗，你便有可能將一些仍在使用舊版本瀏覽器的訪客拒於門外。因此為了彌補這個問題，你必須另外設計一個頁面讓那些不支援分割視窗的瀏覽器使用，這表示你現在必須製作與維護兩個版本的頁面了。

如果你在這個使用了分割視窗的頁面裡頭又加上一些由標籤所組成的圖層，那麼類似的問題又會再度發生。目前為止僅有 Netscape Navegator 4.x 瀏覽器支援這個標籤，因此如果你用了這個標籤，那表示你必須為其他不支援這個標籤的瀏覽器另外設計一個頁面，這麼一來你的同一個頁面現在便有了第三個版本要設計與維護了。

藉由將每個格式化的元素視為一個包含內容的容器（container），CSS-2 的視覺描繪模型（visual rendering model）能夠讓你將頁面的內容與格式完全分離開來。在每個這樣的容器裡面可以包含用來容納次內容的其他容器，就像一個表格里面可以包含標題與內容格子（cells）那樣。要注意的是，這個容器的概念僅適用於結構化的元素，例如段落（paragraphs，P 標籤），區塊（divisions, DIV 標籤）或者表格（ tables,TABLE 標籤），對於其他純粹用來設定樣式的標籤（例如 [b] , [i] 等標籤）而言是不適用的。

將頁面元素視為容器這個觀念為網頁設計開啟了一扇新的大門，並且終於提供了一套能夠將頁面內容與樣式分離開來的機制。你可以藉由改變該容器中的內容編排方式來控制某個容器中所包含內容的版面配置。而藉由控制容器的座標設定，你可以將該容器精確地定位在網頁的適當位置上。此外你更可以製作出各種不同類型的容器，例如表格，分割視窗甚至圖層等等。

當你在樣式表中設定一些進階元素（例如分割視窗或者圖層），你並不需要擔心舊版本瀏覽器會無法顯示這個頁面，而且也不再需要為不同瀏覽器製作並且維護同一頁面的不同版本。你只需要在樣式表裡面定義好各項樣式設定，支援樣式表的瀏覽器會精確地顯示你所設定的樣式，而其他不支援的瀏覽器則會直接忽略他們看不懂的樣式表設定。

更有趣的部分還在後頭。你曾經想像如果能夠在同一個地方控制整個網站的各種進階格式設定的話，網站的維護工作會有怎樣的改變嗎？CSS-2 便提供了這樣的功能。你只需要將網站的樣式定義記錄在一個外部獨立的樣式表檔案裡面即可。當你要修改網站的樣式設定的時候，只需要修改這個外部獨立樣式表檔案，網站中所有連結到這個樣式表的頁面都會同時反應你的修改。而由於這些外部樣式表可以用來設定表格，分割視窗以及圖層等等元素的樣式，你可以很輕鬆地大幅改變整個網站的外觀與感覺！

[+/-] : 聽覺樣式表 (CSS2)

張貼者：蕃茄 (Tomato) 0 Comments

聽覺樣式表（aural style sheets）是用來讓網頁設計者能夠設計出用來「聽」的網頁（不同於傳統用來「看」的頁面）。有了這項功能，我們便可以不需要特殊裝備便可以聽見合成音效「唸」出一個網站的內容。

聽覺樣式表不但讓一些具有障礙的人們易於取得網站內容，也可以讓其他人們在行動途中更容易地瀏覽網站。舉例來說，在你早上開車上班的途中，車上的電腦便可以將網站的內容唸出來給你聽（仍舊覺得車用電腦是個遙不可及的夢想？清醒點吧。很多製造商已經在販賣各式各樣的行動電腦設備了）。

如果你曾經有使用語音合成的經驗，那麼聽覺樣式表對你來說應該很直覺地便可理解。然而如果你從未碰觸過類似的語音技術，你可能需要花些時間來熟悉一下這項科技。從最基本的角度來看，語音樣式表可以看成是音效合成軟體（voice synthesis software）這項既有技術的新玩法。運用在網際網路上，音效合成軟體可以以瀏覽器外掛程式的形式來實作出來。

你可以使用音效合成軟體來設定電腦合成語音的音量，頻率以及速度等參數，藉以模擬出各種不同的聲音。語音樣式表也是建構在相同的基本架構下，可以控制各種語音合成相關參數。舉例來說，你可以在語音播放過程中插入暫停信號，或者加入鈴聲等音效訊號。你還可以在主要語音之外再混入背景音效。

除此以外，你更可以進一步控制語音的重音加強（stress），宏亮程度（richness）以及空間感（spatial properties）等等參數。要改變網頁中某個元素的重音強度，你可以控制該元素的音調曲折變化量（inflection），藉以加強或者降低實際上聽見的語氣。要改變某個元素聽起來的聲音宏亮度，你可以增加聲音的共鳴（resonance）量，藉以讓聲音聽起來較為柔和。此外，藉由調整聲音的空間感參數，你可以創造出具有立體感的聲音，甚至讓聲音聽起來像是來自房間中的不同位置。你能想像一個網頁可以播放許多不同聲音所構成的實際對話過程嗎？

[+/-] : 媒體類型 (CSS2)

張貼者：蕃茄 (Tomato) 0 Comments

HTML 其中一項重要的缺點在於它基本上是針對在電腦螢幕上瀏覽網頁而設計的一種標記語言。如果你曾經試著列印一些網站頁面，相信你一定會發現在螢幕上看起來很棒的頁面，用印表機列印出來卻完全不是那麼一回事。事實上有很多網頁的列印結果很糟糕，甚至根本無法列印。

CSS-2 建議規範定義了一套媒體類型（media types，例如電腦螢幕，印表機，手持設備螢幕等等），並且針對各種不同媒體在不同狀況下的版面處理方式有詳盡的規範。為了兼顧使用上的彈性，CSS- 2 建議規範中定義的媒體類型並非全然不可改變，因此在未來，不同的瀏覽器或者應用程式可以較為容易地支援不同的媒體類型。

HTML 4.0 建立了處理不同媒體類型的基本架構，然而 HTML 4.0 規範本身並沒有進一步地特別定義出一套可以用來處理這些其他媒體類型（不同於電腦螢幕）的延伸規範。有鑑於此，CSS-2 建議規範特別針對不同媒體定義了各自的樣式設定方式，彌補了 HTML 4.0 在這項功能的不足之處。CSS-2 支援的媒體類型有很多種，除了電腦螢幕以及印表機以外，尚包含了電視螢幕，手持式電腦設備以及專為盲人設計的布拉耶點字法（Braille）等等。在這篇文章裡面我們會將重點放在說明兩種主要的媒體：電腦螢幕以及印表機列印媒體上面。在本文稍後也將會討論到聽覺媒體類型（例如將網頁內容「唸」出來的瀏覽器）以及與之搭配的聽覺樣式表。

傳統上針對電腦螢幕而設計的網頁列印效果不佳的主要原因之一在於：電腦螢幕是一種連續性的媒體（Continuous media），而印表機的列印頁面則是一種分頁性媒體（paged media）。在電腦螢幕上，頁面內容是以連續不間斷的方式顯示在畫面上，使用者只需要使用捲軸上下捲動即可觀看畫面以外的內容。在這種環境下，我們不需要擔心分頁位置，頁面邊界以及其他任何可能讓頁面列印結果一團亂的種種版面配置因素。

另一方面，當你將一份文件列印出來的時候，文件內容如何在頁與頁之間適當地流動編排便顯得非常重要。你會希望你的文件能夠在適當的位置換頁，好讓版面配置顯得正常，並且每一頁的內容定位都非常精確。相信你也一定不希望網頁在列印的時候看起來一團亂，特別是當你列印一些僅為一般電腦螢幕而設計的網頁的時候更是容易遇到這種狀況。如果你列印的是那種有大面積圖片的網頁，列印結果出問題的機會可又大大增加了。

有了 CSS-2，你可以精確地設定網頁在列印時候的版面編排方式。設定頁面邊界以及分頁位置只不過是個開端而已，透過樣式表，你可以指示印表機如何列印每個頁面。

很多文件經常會在不同頁面有不同類型的內容，因此你可以指示印表機如何處理這些不同內容類型的頁面。舉例來說，CSS- 2 讓你能夠單獨指定文件裡面第一頁的列印方式，或者在雙面列印的場合下，讓左方頁面與右方頁面各自擁有不同的列印設定。這些功能再結合上其他精確樣式設定，網頁設計者們現在終於能夠真正地控制頁面的呈現方式了。這項改變不可謂不大。

[+/-] : 串接樣式表的下一代 (CSS2)

張貼者：蕃茄 (Tomato) 0 Comments

未來當人們回顧 1998 年的時候，將會將它視為網際網路重要發展的一年，而在眾多將我們帶往下一個階段的相關技術之中，串接樣式表（Cascading Style Sheets, CSS）正是其中重要的一員。有了串接樣式表的輔助，我們可以創造出具有統一色彩配置，精確內容定位以及其他各種樣式設計的網頁。正如同其他網路相關技術一樣，串接樣式表在過去幾個月來也經歷了重大的變化。過去它曾經僅是為網頁加入樣式定義的簡易附加方式，而現在，它已然成為許多不同類型結構化文件的共同解決方案。

更確切地說，新版 CSS 建議規範在設計上的主要目的之一便是定義出一套可以運用在各種不同類型結構化文件的樣式設計工具，而這裡所提及的結構化文件包含了 HTML 以及 XML 在內。HTML 這個用來製作傳統網頁的的標記語言是用來將文字與多媒體內容加以格式化，使其易於在瀏覽器上面觀看，例如微軟公司的 Internet Explorer 以及網景公司的 Navigator 瀏覽器。另一方面，XML 則是用來以結構化的形式描述特定的資料，使其易於在網路上傳播。新版的 CSS 建議規範試圖定義出一套能夠適用於格式化文字以及多媒體內容，同時亦可兼顧到結構化資料文件的樣式設計工具。

串接樣式表建議規範的最初版本（稱為第一級串接樣式表，CSS-1）已經有了好幾種不同的延伸草案。其中一項便是「串接樣式表定位功能（Cascading Style Sheets Positioning, CSS-P）」，這項草案是用來定義頁面上的內容如何精確地定位在特定位置上。Internet Explorer 4.0 以及 Netscape Navigator 4.0 都各自實作了自己的網頁內容定位功能。微軟公司的內容定位方式與 CSS-P 草案中的內容較為接近，然而網景公司卻採用了大不相同的實作方式 -- 最終的結果便是存在好幾種不同的方式來定位網頁上的內容。

這些不同的頁面內容定位方式讓網頁開發者們感到非常困擾。然而幸運的是 CSS-2（第二級串接樣式表，Cascading Style Sheets, level 2）草案將這些內容定位相關延伸功能整合得相當好，可預見的結果是我們很快便可以擁有一套共同的機制來實作網頁內容的精確定位功能。除此以外，CSS-2 草案還帶來了其他令人振奮的新功能。這些新功能整合起來足夠寫出好幾本書了，因此在這篇文章裡面，我們僅針對 CSS-2 的主要新增功能做簡要的介紹。

轉載於:PC Magazine: William Robert Stanek

[+/-] : 什麼是CSS(Cascading Style Sheet)，為什麼要用CSS

張貼者：蕃茄 (Tomato) 0 Comments

到底什麼是CSS(Cascading Style Sheet)，又為什麼會有CSS呢？這個可問題還真是可以從我十多年前前始做網頁說起。

十多年前我剛開始接觸網頁時，語法不過就只有h1 到 h6、p、pre、address、ol、ul、dir、menu、dl、b、i、blockquote、code、em、strong．．．等（大概是這些吧！），後來自從MicroSoft加入瀏覽器的大戰後，突然語法越來越多，MicroSoft與Nescape二家大廠的瀏覽器大戰創造了許多與外觀有關的標籤，如：IE 的marquee(跑馬燈)、Netscape 的 blink(文字閃爍）等。

語法越來越多，當然有好也有壞，好的是外觀的變化多了，設計師可以創作出更多好的網頁，但壞的是，新手設計師就更難進入（因為語法更多更雜了），更討人厭的是，二家大廠各自為自己的瀏覽器開發出專屬的外觀語法，因為產生更多的標籤和屬性，這樣網頁的內容與呈現的標籤全都混雜在一起，造成編寫及修改網頁上的困難，尤其是當網站裡所有的網頁需要外觀風格統一時。

因為上述的這些問題，一直持續將近有五、六年之久，一直到W3C 組織訂定 HTML 4.0 標準時，便將樣式的概念引入了 HTML（我個人的認知，其實就是將排版的觀念，真正的落實到網頁內容裡），以簡化網頁設計的複雜度，讓文章的內容和格式交給 HTML，而讓文章的外觀呈現交給 CSS(Cascading Style Sheets，串接樣式表)，這樣一來使得網站不但易於維護，而且可以讓不同平台與裝置存取網頁更為簡易。

而在HTML 4.01 裡，更要求依據文章的「標題」或「段落」等結構進行標示，視覺性的設計可於最後透過樣式表加以控制，所以許多原來與視覺有關的標籤和屬性都已經不建議使用了，像是 font、strike、center 標籤，以及 align、bgcolor、body 的 text link vlink alink 屬性等，而用 CSS 來取代它們原有的功能（在我上課時，總是跟學生說，只要是與CSS在外觀功能上有重覆的，就要統一使用CSS來取代），W3C更進一步還希望將來以CSS 取代HTML裡的表格與框架等配置版面的語法

W3C更引進 XML （這是XML不但是一般網頁、FLASH、連新版OFFICE2007都是以XML做為交換文件的格式，這個有時間我們再開個專屬來討論）作為創造新標記語言的工具，但不希望放棄目前HTML的知識工具以及技術等架構，因此以HTML為基礎，創造出 XHTML 這個與HTML4.01相當接近的標記語言，成為邁向XML重要的第一步。

其實W3C更是希望，將來內容使用XML，運算方式除了現有的伺服器語法外，將來更可使用XSLT做為運算標準，而外觀當然就交給CSS囉，以達成所謂的MVC（MODEL、VIEW、CONTROL）。

希望以上的說明，能讓你更瞭解，為什麼要使用CSS，更希望你能瞭解網頁標準化的重要性，如果你是一般使用者，理不理解倒是無所謂，但如果你是設計者，又或是電腦講師，不懂，不理解，我個人是覺得，是時候好好學習了。...
Read more

[+/-] : 搜尋引擎最佳化 SEO (Search Engine Optimization)

張貼者：蕃茄 (Tomato) 1 Comments

搜尋引擎最佳化 (search engine optimization，SEO)就是使用者在入口網站搜尋列輸入關鍵字，經搜尋引擎判讀之後，讓網頁在搜尋引擎能夠容易被找到，且使用者可以更容易瀏覽該網頁，進而帶來更大的商機。搜尋引擎最佳化(search engine optimization，SEO)是以適當地修改、調整網頁的方式，讓網頁內容更有可看性且更清楚傳遞給使用者產品服務訊息，在網頁如雨後春筍不斷冒出的年代，搜尋引擎最佳化(search engine optimization，SEO)將是一個不可忽視的新趨勢。

為何要做搜尋引擎最佳化？

相較於電視、報章雜誌等傳統媒體廣告費用，關鍵字廣告的費用的確低廉了不少且效果宏大，這樣的網路行銷方式勢必會吸引愈來愈多的企業加入，隨著競標的費用愈來愈高，在未來幾年中小企業將會無法負擔關鍵字廣告的費用，倘若您的網頁無法在搜尋引擎排名結果頁的前幾頁(根據資料顯示，前兩頁的網站分享了80%以上的目標客源)，那麼您將失去與其他同業競爭的機會。網路使用者通常會利用搜尋引擎來尋找想要的資訊，搜尋引擎最佳化(search engine optimization，SEO)能讓潛在的目標客戶更容易找到您的網站，提高網站流量及成交率，進而達到網路行銷的最終目標─收益大幅提高。

搜尋引擎如何運作？

搜尋引擎會自動執行一種叫做「Spider」的程式，這是一種會在網際網路上自動收集網頁的數據搜集系統，每隔一段時間，他就會去掃描一個固定網域內的網站或網頁，並將有關資訊存入資料庫。若抓回來的網頁上有許多連結，Spider又會自動跟隨這些連結繼續往下抓，並將所有資料一併存入。(假設，我們做了一個網站，但沒有任何其他網站連結到我們的網站來，我們也沒有主動到搜尋引擎去登錄我們的網址，這個網站是永遠無法被搜尋引擎的Spider找到的，因此我們的網站也永遠不會被網友搜尋到。)當使用者輸入關鍵字搜尋的時候，搜尋引擎就自動比對資料庫，把網頁上有出現這個字的頁面通通找出來，經過排序之後顯示在搜尋引擎排名結果頁。

如何決定網站排名？

當搜尋引擎將網頁資料抓回自己的資料庫之後，搜尋引擎如何決定網站排名呢？搜尋引擎的評分標準為何？(以下方式隨著不同時間、不同搜尋引擎與個案不斷在改變，實際狀況與理論會有差異，但以下標題將有助於您對搜尋引擎的初步了解。)

到該搜尋引擎作分類登錄：
搜尋引擎的Spider在找網頁時，會先到自己的分類裡面去找網頁抓資料，當分類裡面的網站或網頁抓完時，再去抓其他未登錄的網站或網頁。因此，有作登錄的網站自然就比未作登錄的網站更有優勢。
該頁面出現那個關鍵字的次數：
文章內容提到愈多關鍵字，得到的分數就愈高。然而，搜尋引擎也擔心網站經營者會對網頁灌水，不斷更改搜尋引擎的邏輯來避免此情形。因此，此方法對於搜尋引擎排名的影響會比較小。
網頁標題（Title Tag）是否有出現該關鍵字：
這裡所指標題並不是網頁上的文章標題，而是指HTML語法中的Title Tag ，不過此種方法的影響也有限。
這個網頁被其他網頁連結的次數與品質：
這是網站排名最決定性的一種方式。假設，某網頁A上面有10個連結，其中一個連結到網頁B，那麼B就得到一分，網頁B也有可能連結到網頁C，因此C也得到一分。由於網路的相連特性，全世界網頁彼此互相打分數，因此每個網頁都有分數。那些被別人連結最多次的網頁，得到最多票，自然就得到最高分。此外，因為每個網站都有分數，一個分數愈高的網頁連到別的網頁，對方的網頁得到的分數會愈高。然而，並非愈多連結對排名愈有利，不相關主題的網頁相連結或是提供 Link Farm讓許多網頁提供連結，都很有可能被搜尋引擎視為作弊而被列入黑名單。
網站的內部連結：
如果網頁的連結架構良好或是網頁有網站地圖都會有利於Spider瀏覽網頁並抓取資料，一旦相關性資料抓的愈多，對搜尋引擎排名提昇幫助愈大。
連結的文字描述：
連結的文字描述若與關鍵字有相關，這會有利於搜尋引擎排名提昇。假設：某瑜珈教室網站裡出現了瑜珈教學、瑜珈服…等相關連結，對網頁就愈有幫助。

如何建立一個最佳化的網站？

不要使用Flash網頁作連結：
Flash雖然美觀，但是對於網站優化一點實質幫助也沒有。當Spider出來搜尋網站時，遇到Flash檔案只會去抓檔案類型及檔案名稱，並無法解讀 Flash的內容。如果您的首頁是Flash，且進去主頁的超連結在Flash裡，儘管您網站的內容很豐富，Spider都無法進入您的網站。而且，動畫會讓使用者分心，無法專注在網頁內容上。
不要使用JSP程式：
和FLASH類似，JSP需要程式的轉換才能被解讀，但是Spider讀不懂未轉換前的資料，因此，應該避免用JSP製作最佳化網站。
關鍵字的使用：
搜尋引擎最佳化網頁應該先從建立搜尋引擎關鍵字開始。搜尋引擎關鍵字應該放置在標題、描述、網頁和超連結文字上。
標　題─儘量將主要的搜尋引擎關鍵字放在標題(Title Tag)最前面。
描　述─將搜尋引擎關鍵字放在描述(Description Tag)裡，但切忌避免塞字。
網　頁─將搜尋引擎關鍵字平均分攤在網頁內容裡，讓內容更有可讀性。
超連結─搜尋引擎很重視連結的部分，若搜尋引擎關鍵字若出現在超連結文字上肯定會有加分的效果。
內部連結：
網站地圖不僅利於Spider爬行，更便於使用者使用，使用者習慣是作網頁時必須考量的一個重要因素，人性化的友善設計會留住使用者，讓他們在網站上待更久時間。
外部連結：
與相關性網頁互聯，不僅可以資訊交流，更會提高彼此的Page Rank。
網域名稱：
與搜尋引擎關鍵字相關的網域名稱(Domain Name)不僅可以幫助使用者記憶，更可以幫助搜尋引擎搜尋。
適當使用粗體或斜體文字：
將搜尋引擎關鍵字設為粗體或斜體文字，有利於搜尋引擎搜尋。

如何挑選關鍵字？

搜尋引擎最佳化(search engine optimization，SEO)及改善搜尋引擎排名的第一步便是挑選正確的關鍵字。先列出所有公司相關的服務與產品的主要關鍵字，站在使用者的角度去想，當使用者在搜尋時，怎樣的關鍵字最容易找到您的網站？

誰需要您的服務：
假設您開了一間瑜珈教室，試著從對瑜珈有興趣的人的角度去想，他們需要哪些服務，列出所有相關的主要關鍵字。例如：一個學瑜珈的人或許想挑件漂亮的瑜珈服，或許有些人想利用在家的時間學一些簡單的瑜珈動作，"瑜珈服"及"瑜珈教學"這些關鍵字就可以列出關鍵字名單。
關鍵字的各種組合：
為了使網站更容易被找到，應該考慮各種關鍵字的組合，例如：有些人在搜尋時可能會打錯字，此時，拼錯的詞句就應該被列出考慮；有些人可能會將關鍵字前後排列組合，例如：有些人想找台北市瑜珈，他們也許會搜尋"台北市瑜珈"或"瑜珈台北市"，這樣的詞句也應該被列出考慮。
避免使用錯誤的關鍵字：
挑選關鍵字時應該能清楚傳達主要產品、相關服務的資訊，而不是模糊不清、模稜兩可的資訊，這樣不僅使用者不易搜尋到您的網站，更會影響到您公司的產品行銷。

[+/-] : 開張囉

張貼者：蕃茄 (Tomato) 0 Comments

訂閱：文章 (Atom)

蕃茄腦袋

[+/-] : [線上教學] InDesign 的線上教學影片

[+/-] : 常用的CSS命名規則

常用的CSS命名規則

[+/-] : [Firefox Add-ons] 不用到 Google Analytics 就能看到網站流量的各項數據

[+/-] : [Firefox Add-ons] 讓 Firefox 也有BossKey哦!

[+/-] : ActiveX Office ProgIds

[+/-] : 很難保持耶...

[+/-] : FLASH 元件命名時的小技巧

[+/-] : [好用軟體分享] KMPlayer V2.9 超強的多媒體播放軟體

[+/-] : [Firefox Add-ons] FireBug 開發 AJAX , CSS , HTML , JavaScript 一定要有的套件

[+/-] : 有任何問題，都歡迎在這裡留言，我會盡快且詳細的回答

[+/-] : [好用軟體分享] Video mp3 Extractor 1.8 取出影片內的聲音

[+/-] : [打造網頁標準化] 在 30 天內打造更具親和力的網站

[+/-] : [SEO (Search Engine Optimization)] 影響網站排名的45個因素（轉貼）

[+/-] : [Firefox Add-ons] Viamatic foXpose 0.6 用縮圖秀出分頁內容

[+/-] : [Firefox Add-ons] 新同文堂 - 讓你忘了在逛台灣 OR 對岸的網頁

[+/-] : [Firefox 小技巧] 讓你的Firfox也有網址自動完成

[+/-] : 使用 CSS 按比例縮小圖片

[+/-] : Flash CS4 / Flash 10 代號為："Diesel"

[+/-] : [線上手冊] 線上版 CSS2.0 中文手冊

[+/-] : [CSS 教學網站] - cssplay

[+/-] : [CSS 教學網站] - CSS實務排版技巧、秘訣與技術

[+/-] : [Firefox Add-ons] Web Developer - 不管那種人都要用

[+/-] : [Firefox Add-ons] All-in-One gestures - 用滑鼠手勢搞定一切

[+/-] : 免安裝版IE 3.0 ~ 6.0

[+/-] : 你好色嗎? 好色就該讓大家都知道!!

[+/-] : 安裝 IE7.0 免安裝版

[+/-] : 原來大企業也有好服務

[+/-] : RJ45網路線的標準接法

[+/-] : 跑馬燈 (marquee)

[+/-] : 什麼是擴充套件呢？？

[+/-] : 超好用的擴充套件

[+/-] : 天殺的 , 超好用找 ICON 的好幫手 - ICONFINDER

[+/-] : 再來一發好用的配色網站

[+/-] : 又是一個進化後的配色網站

[+/-] : 配色及 CSS 白痴的救星

[+/-] : ColorMatch 10K 再來一個配色網站

[+/-] : ColorMatch.dk 又是一個好用的配色網站

[+/-] : 使用 Firefox 的理由

[+/-] : 甚麼是 XSLT (eXtensible Style Language Transformation)

[+/-] : 甚麼是 XSL (eXtensible Style Language)

[+/-] : Flash 開發者必去的網站

[+/-] : 搶救受性侵孩子 缺我不行

[+/-] : 在 WindowsXP 下安裝各種版本的IE

[+/-] : 不會配色嗎?? 需要靈感嗎?? 快上 Adobe Kuler 網站!!

[+/-] : 又一個大量又免費的 ICON 網站

[+/-] : 需要大量又免費的 ICON 嗎??

[+/-] : 使用超連結跳頁

[+/-] : 偵測瀏覽器是否支援 Cookie

[+/-] : 防止圖片擠破頁面

[+/-] : 用CSS就可以控制列印樣式

[+/-] : 在 CSS 中使用 JavaScript 控制圖片

[+/-] : Flash 透明背景

[+/-] : 空白鍵的使用

[+/-] : 世界上最高、最長和最小的網頁

[+/-] : Dr.eye 譯典通可以在pdf檔下即時翻譯耶

[+/-] : 網頁在IE中打不開，其他的瀏覽器都是正常的

[+/-] : 隱藏 ie6 的圖片工具列

[+/-] : FLASH或是其它多媒體在IE裡討人厭的外框

[+/-] : FLASH場景限制

[+/-] : Action Script 可以寫在那些地方

[+/-] : Adobe CS3 Conference

[+/-] : FON 到底是啥？

[+/-] : 開始整理各式問題與回應囉!!!

[+/-] : 想了很久，終於開始動手做了

[+/-] : 關於台灣 Flash 書的感想

[+/-] : CSS可以放在那些地方呢？

[+/-] : 視覺描繪模型 (CSS2)

[+/-] : 聽覺樣式表 (CSS2)

[+/-] : 媒體類型 (CSS2)

[+/-] : 串接樣式表的下一代 (CSS2)

[+/-] : 什麼是CSS(Cascading Style Sheet)，為什麼要用CSS

[+/-] : 搜尋引擎最佳化 SEO (Search Engine Optimization)

為何要做搜尋引擎最佳化？

搜尋引擎如何運作 ？

如何決定網站排名 ？

如何建立一個最佳化的網站 ？

如何挑選關鍵字？

[+/-] : 開張囉

[+/-] : 搶救受性侵孩子缺我不行

搜尋引擎如何運作？

如何決定網站排名？

如何建立一個最佳化的網站？