WP SaaS 網站建設中一些容易被忽視的問題

這篇文章主要想談談在網頁製作 SaaS WordPress 中幾個比較容易被忽視的問題,算不上什麼高深的教程,只是自己平時工作學習中所遇到的問題積累,寫下來一是可以給初學者提個醒,二來也是幫自己做個筆錄。

  1 、讓您想當然,給您點顏色看看  這個問題其實被很多人忽略,小到個人站點,大到入口網站都有可能犯這個錯誤。

不信想想看,如果您所做的 WordPress 網站背景是白色的,那麼您還會記得在 CSS 里寫下 Background-color:#ffffff 這句程序碼嗎?

我敢打賭,大部分人不會!並不是因為大家偷懶,而是這個舉手之勞被徹底忽略了,自助建站 SaaS 為什麼?

因為我們所用的 Windows 作業系統在大多數的情況下,執行在其上的各種軟體的預設背景色是白色,這其中就包括 IE 瀏覽器,所以在網站背景是白色的條件下,許多的網頁製作 SaaS WordPress 者就想當然的忽略了關於背景色的設定,反正大家都是白色,不設的話也看不出來。

但是不要忘記了,Windows 從 XP 開始支援系統主題的更換,有很多第三方的主題會更改系統預設的設定,其中就包括背景色的設定,如果沒有強制設定頁面中的背景色,那麼頁面就會以當前瀏覽器的背景色來顯示內容,其結果就是網站美觀性被大大的降低,拿大家都熟悉的網易來舉例,下面的截圖是在我機子上瀏覽時的樣子,由於前不久換了一套 Vista 的主題風格,所以瀏覽器的背景色變成了淺灰色。

  仔細看看網易的 Logo ,看出來嗎?

對,那個 Logo 的背景是白色的,但旁邊的背景色卻是灰色的,換句話說就是網易整個頁面的背景原定就是白色的,這在瀏覽器背景為白色的前提下是看不出什麼來的,但是像現在這樣就 「漏餡」 了。

不光是網易 ,許多的門戶站都是這樣,具體我就不去舉例了,可見關於 Background-color 設定的重要性。

所以,不論您的 WordPress 網站是什麼樣的 WordPress 背景色,請一點記住把它設定好,哪怕它是白色!  2 、立正!向左~~~看齊  大家都知道 Table 的預設水平對齊方式 (align) 為左對齊,設 align=”left” 和不設其效果是一樣的,於是很多人不去設定這個屬性,我以前也是如此。

但是在某些特殊的情況下,IE 會把預設的左對齊理解為居中對齊,從而導致頁面的排版出現問題,雖然說具體是什麼情況下會出問題連我自己都說不清楚,但是這種情況絕對存在,所以大家在做頁面的時候一定要習慣性的設定表格的 align 屬性,不要偷懶跳過這步,對頁面的表現來說,這所謂的多此一舉絕對有益無害。

  3 、單元格寬度-隱形殺手  不知您有沒有遇見過這種情況,假設當您給一個單元格的 align 設定了左對齊後,卻發現放在單元格中的文字並沒有應用該屬性的效果,反而繼續是居中顯示,檢視文字兩端也並沒有發現任何垃圾程序碼包含其中,可是無論如何都改變不了文字的位置。

鬱悶嗎?

反正當時我是很鬱悶,直到後來,我才發現原來是單元格的 Width 屬性在作怪,將其刪除或重新設定後問題得到解決,所以,當您也遇到同樣的問題時,不妨檢查一下出問題單元格的 Width 設定,相信您會找到解決的方法。

  4 、打死滾動條都不消失  有時為了一些個性化的需要,有些人喜歡將瀏覽器的滾動條隱藏掉,這個效果做起來很容易,但是有時會發現明明程序碼一點問題沒有,而且檢視用的瀏覽器也不是非 IE 核心型的,但可惡的滾動條就是不消失!而且這個問題很多都出現在用 DW 等視覺化編輯軟體製作 SaaS WordPress 出的網頁上。

那原因是什麼呢?

其實原因就在該頁面的頭部程序碼里,檢視該頁面的原始碼,您會發現在最上邊有類似這樣的兩句程序碼:  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”  ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  這兩句程序碼叫做 DOCTYPE 宣告,是 Document Type(文件型別) 的簡寫,用來說明您用的 XHTML 或者 HTML 是什麼版本。

簡單點說這兩句程序碼是製作 SaaS WordPress 標準化頁面所必不可少的關鍵組成部分,瀏覽器就是根據您定義的文件型別來解釋您頁面的標識,並展現出來的。

換句話說,如果您定義了一個錯誤的 DOCTYPE,那麼您的標識和 CSS 都不會生效。

而定義滾動條顯示與否的 overflow 、 overflow-x 、 overflow-y 這三個屬性恰恰沒有被網頁標準所採納,所以如果您的頁面上方定義過 DOCTYPE ,那麼這三個屬性便是無效程序碼了,解決方法就是刪除頭部的 DOCTYPE 宣告,雖然在標準日益普及的今天不推薦這麼做。

  5 、都是注釋惹的禍  為程序碼寫注釋是個好習慣,但是有時也會出現一些問題,例如為 CSS 寫中文注釋。

  如果您為自己定義的 CSS 寫了中文注釋,那麼在一些特殊情況下 (例如伺服器端的支援,頁面所用的程序型別等) 會導致部分程序碼無故失效,這種情況我遇見好幾回了,所以在技術上沒解決這個問題之前,還是不要為 CSS 寫注釋的好,養成良好的 WordPress 命名習慣足以讓其它人看懂自己程序碼的意義,即使一定要寫,也請用英文寫吧… 什麼?

拼音!!!拜託,您用拼音試試看,保證一個星期後連您自己都不明白那寫的是什麼。

  6 、神啊,發光吧~~~  這個問題有些濫竽充數的嫌疑,只是有很多人問起過,所以也一併放上來。

是關於 CSS 的 Glow Filters ,這個濾鏡的效果是對環繞物件內容邊緣製作 SaaS WordPress 發光效果,也有人稱描邊效果,多被用在文字的表現上,但是許多人在運用了該濾鏡後發現並沒有出現想要的效果,究其原因多半是由於把這個濾鏡直接運用到了文字上,要知道該濾鏡對文字是沒有效果的,那自助建站 SaaS 為什麼還能製作 SaaS WordPress 出發光文字呢?

那是因為一定要把它運用在放置文字的容器上,例如 Table 。

所以,如果沒有效果的話,就檢查一下是不是用錯地方了。

  該濾鏡的另外一個問題是,雖然發光效果是有了,但是感覺文字上的那圈光暈好像是被裁了一樣,少了一塊似的。

這是由於所放置文字的容器高度低於該濾鏡的發光範圍所至,解決方法有三種:  1 、縮小 Font-Size  2 、增加 Height 值高度  3 、降低 Strength 值的大小  其實這些問題都不是什麼了不起的大問題,但往往越是小問題才越容易被人忽略,希望上面這些經驗教訓對您能有所幫助,哪怕有一個人從中收益就不枉我啰里啰嗦這麼半天了。