把Wordpress集成到zen-cart裏方法各類修改經典機制

時間 2019-11-30

標籤 wordpress 集成 zen cart 方法各類修改經典機制欄目 Wordpress 简体版

原文原文鏈接

做者: 聞庭牛 | 分類: zen cart插件精解 | 瀏覽: 4 | 評論: 暫時沒有評論

若是你的Zen-cart須要一個Blog來發布一些你的最新動態，能夠試試Wordpress，而且用WOZ這個Zen-cart的Module來把它們關聯起來。WOZ的全名叫Wordpress On Zen-cart。javascript

下面就詳細介紹一下WOZ的安裝方法，固然你能夠在WOZ包裏找到英文的安裝說明。我所使用的版本爲zen-cart1.3.8和wordpress2.6，至於其它版本可否集成，沒有測試過。php

Wordpress on Zen-cart總的來講有兩種安裝模式：css

第一種是把Wordpress的文件所有解壓到Zen-cart的根目錄下，另外一種方法是把Wordpress單獨放到Zen-cart下新建的一個目錄裏。html

兩種方法最後訪問Wordpress的地址都是：java

[Zen-Cart URL]/index.php?main_page=wordpress程序員

第一步，安裝Wordpressweb

把Wordpress解壓到你的Zen-cart目錄下，而後把Wordpress的文件夾名改成blog，呵，看起來感受會爽一些。
這一步的安裝和普通的Wordpress安裝沒啥區別。數據庫

第二步：設置Wordpressexpress

在Wordpress的後臺設置一下，setting -> General -> Blog address(URL)
把Blog address (URL)改成[Zen-Cart URL]，即http://your.zen-cart.com編程

把主題設爲默認主題。

第三步：上傳WOZ的文件

建議用ftp直接覆蓋：

把WOZ解壓後的ZC_ROOT目錄下的文件上傳到服務器Zen-cart的安裝目錄下。
把WOZ解壓後的WP_ROOT目錄下的文件上傳到服務器WordPress的安裝目錄下。

再把/ZC_ROOT/includes/templates/MY_TEMP/裏的CSS文件上傳到你的Zen-cart模板裏的CSS文件夾裏。這個是Wordpress的顯示主題。

第四步：修改Wordpress的文件

在你的Wordpress安裝目錄下，找到[Path of WordPress]/wp-include/template-loader.php，把全部的「exit;」都替換成「return;」。
若是你的Wordpress版本比較新，就不須要作這一步的工做了。

第五步：修改Zen-cart文件

打開Zen-cart安裝目錄下的[Path of Zen-Cart]/includes/extra_configures/wordpress-config.php，把

define ('ABSPATH','/var/www/vhost/example.com/public_html/blog/');

替換爲

define ('ABSPATH','[Path of WordPress]');

好比說，在我本地我是改成這樣的東西：
define ('ABSPATH','E:/mywebs/zen-cart/blog/');

記住，這個路徑得是你服務器上的絕對路徑。

第六步：佈局設置

在Zen-cart後臺管理面板的admin panel › tools › Layout Boxes Controller裏，選擇打開你須要的Wordpress側欄框。全部和Wordpress有關的側欄框都是以WP_XXX格式存在的。

第七步：檢查

如今你能夠經過

http://your.zen-cart.com/index.php?main_page=wordpress

這個網址來訪問你的Wordpress了。

若是你能看到Wordpress，則代表你已經把Wordpress集成到了Zen-cart裏了。

完成了這七步，基本上就把Wordpress的顯示頁面整合到了Zen-cart裏面。

版權修改

若是您想將商店放在Zen Cart網站上展現，您必須在頁腳上保留"Powered by Zen Cart"。保留"Powered by Zen Cart"對您和Zen Cart都有好處，由於相關的互惠連接能提升您在搜索引擎的排名。若是您不想在Zen Cart網站上展現，您能夠去掉"Powered by Zen Cart"，但不能夠修改它。

若是要定製這段文字，在 \includes\languages\schinese.php 文件中第17行。

本文轉自最模板,原文地址：http://www.zuimoban.com/php/zencart/317.html

zen-cart 實現MSN在線聊天

做爲一個外貿網店，怎麼能少一個與客戶溝通的通道，爲網站添加一個MSN在線聊天按鈕能夠方便客戶何樂而不爲。可是，如今網上大部分的MSN聊天代碼已經不能使用，出現信息沒法發送的狀況。

正確的方法以下

1.登錄http://settings.messenger.live.com/applications/websettings.aspx，申請MSN 在線通，同時登入我的的 Windows Live ID。
2.進入申請頁面按提示設置，最後會生成一段Html文本。黏貼到須要顯示的地方便可。

第一修改zen-cart二次開發教程

如下是zen cart 首頁程序的修改。根據各個文件修改不一樣的功能。但願這些能對你有所幫助。

首頁界面：//include/templates/zccn/common/tpl_main_page.php
首頁主樣式表：//include/templates/zccn/css/schinese_stylesheet.css

首頁左邊欄目：
/includes/templates/template_default/common/tpl_box_default_left.php

商品分類內容修改：
/includes/modules/sideboxes/categories.php
/includes/templates/zccn/sideboxes/tpl_categories.php

推薦產品
/includes/modules/sideboxes/featured.php
/includes/templates/template_default/sideboxes/tpl_featured.php

新進產品
/includes/modules/sideboxes/whats_new.php
/includes/templates/template_default/sideboxes/tpl_whats_new.php

特價產品
/includes/modules/sideboxes/specials.php
/includes/templates/template_default/sideboxes/tpl_specials.php

數據庫表
/includes/database_tables.php

首頁中間商品修改：
/includes/templates/template_default/common/main_template_vars.php
/includes/templates/template_default/templates/tpl_index_default.php

內頁中間商品修改：
/includes/templates/template_default/templates/tpl_index_catergories.php

首頁中間 August新進商品
/includes/templates/template_default/templates/tpl_modules_whats_new.php

首頁中間 August特價商品
/includes/templates/template_default/templates/tpl_modules_specials_default.php

首頁中間推薦商品
/includes/templates/template_default/templates/tpl_modules_featured_products.php

首頁右邊欄目：
/includes/templates/template_default/common/tpl_box_default_right.php

商品搜索
/includes/templates/template_default/sideboxes/tpl_search.php

客服中心
/includes/templates/template_default/sideboxes/tpl_ezpages.php

暢銷商品
/includes/templates/template_default/sideboxes/tpl_best_sellers.php

商品評論
/includes/templates/template_default/sideboxes/tpl_reviews_write.php

在線名單
/includes/templates/template_default/sideboxes/tpl_whos_online.php

第二修改

有的程序一看就明白,然而真要進行修改和擴展,還真不容易,ICommerce就是這樣的程序;然而有的程序,看起來很複雜,以致於一時間連某個頁面都找不到在哪兒,這種程序架構比較複雜,初級網站編程人員很難看明白,可是當你真正的掌握到了它的程序結構後,你必定會爲架構師的思惟拍案叫絕,由於你會發現,若要開發一些新功能會變得如此的方便,zen-cart就是如此.

zen-cart是國外比較優秀的開源電子商務網點源碼,zen-cart程序源於os-commerce,借鑑了os-commerce的不少成果,而在擴展性方面,zen-cart顯得又比前輩作得更好.

能夠看到, zen-cart前臺全部的頁面地址是以下格式:

1. http://127.0.0.1/zencart/index.php?main_page=index&cPath=1_4

2. http://127.0.0.1/zencart/index.php?main_page=product_info&cPath=1_4&products_id=1

3. http://127.0.0.1/zencart/index.php?main_page=site_map

也許你會以爲很困惑, 怎麼全部的頁面都是index.php啊?這麼大的一個網店系統, 難道一個index.php頁面就能夠搞定了嗎? 這時, 你可能就須要耐心的去分析一下index.php頁面了.

通過分析, 你就會發現, 其實index.php頁面並不想你所想象的那麼神奇, 那麼深不可測. 相對於其餘文件, Index.php更像是一個管理者, 一個司令員, 當它接到指令後, 並非本身來處理, 而是把任務分配給他的下屬. 至於要完成什麼任務, 那麼就要看接收到的指令main_page的內容了.

在index.php頁面的開頭, 做者介紹了該頁面的處理過程, 如表格 21所示.

* index.php represents the hub of the Zen Cart MVC system

* Overview of flow

* <ul>

* <li>Load application_top.php - see {@tutorial initsystem}</li>

* <li>Set main language directory based on $_SESSION["language"]</li>

* <li>Load all *header_php.php files from includes/modules/pages/PAGE_NAME/</li>

* <li>Load html_header.php (this is a common template file)</li>

* <li>Load main_template_vars.php (this is a common template file)</li>

* <li>Load on_load scripts (page based and site wide)</li>

* <li>Load tpl_main_page.php (this is a common template file)</li>

* <li>Load application_bottom.php</li>

* </ul>

* @package general

* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0

* @version $Id: index.php 2942 2006-02-02 04:41:23Z drbyte $

表格 1. 加載application_top.php文件

Application_top.php文件中將進行許多常量的定義, 加載配置文件等工做

2. 設置語言目錄

這裏定義了一個變量$language_page_directory, 表明當前的語言目錄, 該變量的值和$_SESSION["language"]值息息相關.

3. 加載」 includes/modules/pages/PAGE_NAME/」目錄中的全部header_php.php文件.

能夠看到, 在每一個網頁內容的文件夾中, 都有header_php.php文件, 加載頁面時, 首先會加載該文件.

4. 加載html_header.php文件

html_header.php文件包含了在<head></head>標記中出現的內容, 默認放在includes/templates/common目錄下. 固然在特定的狀況下, 加載的可能不是這個文件, 你能夠再模板級或者頁面級來重寫這個文件, 從而定義特殊的html_header.php文件.

經過金字塔視圖, 能夠看到html_header.php文件的優先級別, 越靠近金字塔頂端, 優先級別越高, 若是優先級別高的文件已經存在, 則不會加載優先級別比它低的文件了.

圖 5. 加載main_template_vars.php文件

main_template_vars.php文件根據$_GET["main_page"]的值實現了頁面的跳轉邏輯. 該文件的加載過程和html_header.php文件的加載過程殊途同歸, html_header.php加載的是網頁頭部<head></head>中的內容, 而文件main_template_vars.php卻決定了要加載的網頁的主體內容.

經過觀察template_default中common下面的main_template_vars.php中的代碼, 能夠知道, 若在存儲頁面文件的」includes/modules/pages/$_GET["main_page"]」中增長一個名爲main_template_vars.php的文件, 則將直接加載這個文件. 不然, 將加載當前模板中的」tpl_$_GET["main_page"]_ default.php」文件. (注意, 這裏實際上沒有真正加載文件, 而只是將要加載的文件的路徑$body_code進行設置)

若是您對這兩個文件的加載過程還不勝瞭解, 那麼請試着作下面的實驗.

在地址欄中訪問」http://127.0.0.1/zencart/index.php?main_page=news_list」, 將會出現網頁未找到的提示信息. 這是能夠理解的, 由於news_list是我本身想象的, zen-cart沒有提供這個頁面, 我本身也沒有安裝相似的插件.

而後在目錄」/includes/modules/pages」中新建一個文件夾, 命名爲news_list, 再訪問該連接, 就不會提示找不到連接了, 至此一個新的頁面就建好了, 接下來的工做就是要豐富該頁面的內容了. 這將在後面的章節中予以描述.

6. 加載on_load腳本

on_load_*.js文件中包含了要在<body>標記的onload屬性中出現的內容, 即在頁面加載完成後要執行的腳本. 能夠在同一個頁面中定義多個on_load_*.js文件, 這些內容將會同時被執行.

on_load_*.js文件多是頁面級和站點級的. 頁面級的on_load_*.js文件只在當前頁面中有效, 而站點級on_load_*.js文件將對站點中的每一個頁面有效. 有關如何定義頁面級和站點級的onload事件, 將在後面的章節予以描述.

在這裏, 頁面級和站點級的on_load_*.js文件內容都將讀入$za_onload_array[]數組中, 而後組合到變量$zv_onload中, 爲後面作好準備. $zv_onload最終將做爲到<body>的onload屬性值.

7. 加載tpl_main_page.php文件

這裏定義將選擇影響頁面佈局的模板, 能夠在具體的頁面中選擇, 或者使用zen-cart默認的模板(一個標準的三列板式), 模板中會對main_template_vars.php中定義的變量$body_code所指文件予以加載.

8. 加載application_bottom.php文件

application_bottom.php文件中將進行一些清理操做.

第三修改

本文介紹了基於Zen Cart搭建外貿網站的流程以及在使用Zen-Cart網站中遇到的一些常見問題，是做者開發經驗的總結，對但願快速瞭解和掌握Zen Cart的PHPer有所幫助。

1、安裝配置PHP+MySQL環境建議安裝PHP集成環境包(方便快捷).網上也有許多此類教程，在此就不贅敘了。若是是虛擬主機的話，須要服務器支持Zen-Cart的安裝運行環境要求。

2、下載Zen-Cart源程序，解壓並上傳到網站空間的對應目錄下，在瀏覽器的地址欄裏面輸入http://domainname/zc_install/index.php，而後按照提示步驟進行安裝...安裝完成以後，轉到前臺會發現有兩條顯眼的紅色背景的Warning，這是要求你刪除或重命名安裝目錄的名字，以及讓你修改配置文件的權限(FTP改不了的話直接修改includesinit_includesinit_header.php文件： define(WARN_CONFIG_WRITEABLE, true); 裏true改成false)，以防被別有用心者利用，按照要求作，而後再刷新你的網頁就OK了。

3、安裝Easy Popular批量商品管理軟件，而後批量導入數據。下載批量商品管理插件，解壓以後，裏面有一個若干個txt文件和一個catalog的目錄，將catalog目錄下的文件所有拷貝到你的程序安裝目錄下。刷新後臺，在Tools欄目下即可以發現多了Easy Popular的菜單；點擊進入，網頁頂部會有相關Configuration提示要你安裝，根據提示點擊here，這樣就成功安裝了EP插件。而後是向數據庫導入數據，這裏要求上傳產品圖片到程序安裝目錄下的images目錄下，可能產品圖片很是多，手工編輯記錄數據很麻煩，本人寫了一個專用的小工具可根據產品圖片直接生成對應的excel報表，若有須要的，可聯繫本人。

4、模版修改，主要是三個大的方面：頂部的Banner和Logo、導航、Flash/JS圖片展現、總體的色調修改導航欄在includes/templates/模版文件目錄/commom/tpl_header.php。在這個文件下id爲topLinks的div裏面require了一個文件，裏面是輸出導航菜單的。能夠將這個require改成咱們須要的東西，也能夠直接去includes/templates/template_default/templates/tpl_ezpages_bar_header.php裏面修改，對應的CSS位於includes/templates/模版文件目錄/css/stylesheet.css裏面的#topLinks裏面對於三欄的模版，左右兩側欄目的寬度均可以在Configuration下的佈局設置裏可直接修改，但對於中間一欄的設置則須要修改CSS代碼了，對應的CSS代碼位於includes/templates/模版文件目錄/css/stylesheet.css文件中的#mainWrapper中，改過這裏以後，你便會發現頂部的LOGO和導航那部分的寬度與總體不協調了，咱們繼續修改本文件中的#logoWrap的寬度就能夠了。默認模版左右側欄的標題背景顏色是不相同的，若要把他們修改成同樣的顏色該怎麼修改呢？有兩種辦法，一種就是繼續在上面的CSS文件裏面直接修改背景圖片，另一種就是將模版文件下images目錄下的帶有Headingbg的圖片換成同樣的圖片。

5、後臺經常使用設置(1)根據須要開啓左右側欄的內容： Tools→Layout Boxes Controller(2)購物支付及免運費模塊設置：Modules→Payment Modules 安裝配置支付模塊Modules→Shipping Modules 免運費模塊設置 (Free Shipping)Modules→Order Total Modules 可設置優惠券,稅款等。(3)國家地區: Locations→Countries (外貿英文網站可移除中國地區Code (2)CHN)(4)匯率設置: Localization→Currencies (使用IPS等支付方式注意保留人民幣CNY)(5)開戶關閉註冊或結帳的條款:在後臺 Configuration-->條款選項裏設置

6、局部細節上的調整：information欄目裏面的內容[在Tool→Define Pages Editor菜單下]填充、sponsors欄目裏面的廣告圖片[在Tool→Banner Manager]更改、底部的版權信息(includeslanguagesEnglish.php)須要作對應的修改等等。

7、產品圖片放大效果：在後臺Tools欄目下點擊Image Handler2下拉菜單→點擊Install Image Handler安裝圖像管理模塊；而後在Configuration中設置圖像參數，IH 放大(中)小圖像設爲yes，在商品信息 - 圖像寬度/圖像高度分別設定要放大的圖片大小。咱們本身開發主要是修改下面兩個文件：includes/templates/dreamugg/templates/tpl_specials_default.phpincludes/functions/html_output.php

8、是否是以爲本身網站瀏覽人數少的讓人尷尬？有辦法includes/modules/sideboxes/whos_online.php裏面本身修改吧，其中$n_guests是遊客人數，$n_members是註冊會員人數，本身能夠據此去修改。另一個就是Powered by信息的修改，修改方法以下：includes/languages/english.php裏面修改第一個define()中對應處爲本身所要信息便可。

9、記得安裝IPS等補丁(先執行SQL語句,再上傳IPS補丁程序)...

10、若是產品的分類比較多的話，點擊父分類的鏈接時，會有子分類的鏈接，可是這個連接平平無奇，有些客戶會認爲他不是連接這樣咱們的產品瀏覽次數以及被購買的機會就下降，因此必須對這種連接作一些修改。/includes/modules/category_row.php裏面修改相關代碼便可.

11、作外貿網站，Google推廣是一個很關鍵的環節，因此這裏就衍生了一個問題：如何將GGAD跟蹤代碼添加到網站中去？添加位置很靈活，這裏的例子僅供參考。全站跟蹤代碼添加到：includes/templates/使用的模版/common/tpl_footer.phpGGAD定義操做跟蹤代碼：includes/languages/english/login.phpincludes/languages/english/create_account.php/includes/templates/template_default/templates/tpl_checkout_success_default.php../includes/templates/template_default/templates/tpl_checkout_confirmation_default.php(183,1)includes/languages/english/shopping_cart.php注意：添加的時候，如代碼是直接加在網站開頭（head以前的時候）會致使整個頁面的錯位.

12、後臺顯示的時區是默認值，這對於咱們來講很不方面，如何修改呢？找到admin/includes/header.php文件，搜索到echo date(r, time()) . GMT位置處，不用明說了，你們都知道這裏就是輸出時間的，在前面加上一句話 date_default_timezone_set(PRC); 存檔，到後臺刷新一下看效果，okay，如今就是北京時間了。(但生成的訂單時間仍是以網站所在服務器時間爲準)

13、因爲Google廣告申請不下來，因此須要更換域名，更換域名的話則須要修改網站裏面的配置信息，如何修改呢？先修改兩個配置文件includes/configure.phpadmin/includes/configure.php把裏面的定義的域名變量改成須要的域名或者使用一種一勞永逸的辦法，使用http:// . $_SERVER[HTTP_HOST]https:// . $_SERVER[HTTP_HOST]替換對應位置處。接着就是修改Logo、Banner，這個沒有什麼值得說的，沒有技巧可言;接着就是Copyright信息和Powered by信息的修改。

14、如何設置搜索引擎優化？在後臺的Configuration－->搜索引擎優化選項下打開SEO功能，SEO模塊須要檢查的就三個地方：(1). 確認網站支持mod_rewrite，且主機容許你使用本身的.htaccess文件;(2). .htaccess 文件名字正確（前面有個點）(3). 將根目錄下的文件htaccess_sample更名爲 .htaccess，並修改其中的/shop/爲您的zen-cart目錄。若是你的域名指向的目錄是zen-cart的根目錄，那麼就設置爲: RewriteBase /若是是 http://www.domain.com/zencart/ 這樣的形式打開網站，那麼 RewriteBase /zencart/

15、如何添加新的頁面？Payment Policy設置：後臺==>Tool==>EZ-Pages==>Payment Policy==>edit: (若是沒有Payment Policy這項,則點選new file按鈕)在Page Title填寫Payment Policy其它單選按鈕不用改動，只需在HTML編輯框內填寫支付條款內容便可，其它都不用填寫。詳見: topic1947.html

16、網關支付接口相關設置ZenCart程序已集成了PayPal等支付網關接口，只要設置好收款支付帳號等相關參數便可。另外要安裝的IPS等網關支付接口,可根據官方提供的支付接口進行整合。

17、商品描述之Attributes Controller擴展(在屬性控制選項內容裏添加設置)在Catalog下拉菜單下的Attributes Controller的標題Option Name下填寫選項名稱和ID並插入；而後在Option Values中分別各個選項的值。另外，若是全部商品屬性都已設置好的話，能夠下載型號/屬性以TAB分割的文本文件

18、設置優惠券: admin->Modules->Order Total->Discount Coupon

19、產品重量的修改: (g改成kg)/includes/languages/english.php/includes/languages/english/modules/shipping/zones.php在這兩個文件裏查找替換.

20、在選擇支付方式中添加支付條款的語句:在/includes/languages/english/checkout_payment.phpdefine(TEXT_SELECT_PAYMENT_METHOD或者：define(TABLE_HEADING_PAYMENT_METHOD相應的地方添加。.ccinfo {display:none; /*隱藏內卡標誌*/}

21、開啓關閉註冊或結帳的條款在後臺 Configuration-->條款選項裏設置22、添加友情連接的方法這裏利用到了Banner Manager廣告代碼顯示友情連接，首先在後檯布局設置中的「廣告顯示組-頁腳位置1」填寫你的廣告組名稱,如Links. 而後在Tools欄目下的Banner Manager菜單新建「New Banner」；在Banner Group填寫框中輸入廣告組名稱Links, 並輸入Banner Title，在HTML Text文本框內輸入你要顯示的友情連接Html代碼，點擊insert便可。

第四修改

去掉產品目錄旁邊的產品總數方法在管理後臺裏，進入」Configuration」 —> 「My Store」 —> 「Show Category Counts」選項，設置爲關便可。目錄後面會有一個煩人的小箭頭->按Zen-cart的默認配置，目錄後面有->(12356)這樣風格的統計數字顯示。如何去掉呢？在管理後臺裏，進入」Configuration」 —> 「Layout Settings」 —> 「Categories Separator between the Category Name and Count」選項，按你的須要設置便可。在Zen-cart裏如何修改」Powered by Zen Cart」的內容?這個能夠在後臺My Store->footer text body裏進行修改，也能夠到FTP裏的/include/template/你的模板/common/tpl_footer.php裏進行修改。頁眉下面有一大堆煩人的Categories tags，怎麼去掉？後臺管理 —> Configuration —> Layout Settings —> Categories-Tabs Menu ON/OFF把這個屬性設爲關閉便可！怎麼修改Contact Us的頁面內容與風格？若是是內容的話，在後臺管理的Tools —> Define Pages Editor裏進行頁面內容的修改。若是是風格的話，在CSS文件裏找到對應的id或是class名進行修改。若是是要修改顯示內容的話，在你的模板目錄下的templates/tpl_contact_us_default.php裏修改，若是你重寫了頁面內容的話，請在common文件夾下找到相應的文件進行修改。打開產品根目錄後，會顯示子目錄的排列圖標，這個東西怎麼修改？在模板目錄下的common/tpl_columnar_display.php文件裏，修改顯示的內容。瀏覽器的擡頭上寫着」Zen Cart!, The Art of …」，怎麼修改？打開文件includes/languages/english/meta_tags.php，在裏面找到下面這段// page title define(’TITLE’, ‘Zen Cart!’);// Site Tagline define(’SITE_TAGLINE’, ‘The Art of E-commerce’);把這些文字替換掉就能夠了。固然，若是你是中文的頁面，就要到相應的文件夾下面去找。我想把左、中、右三欄之間留一點空隙怎麼辦？Zen-cart默認把左側欄、中間產品欄、右側欄排列得很緊密，我想把三間之間的兩個空隙弄小一些，怎麼辦？只要按這個方法，你能夠隨意調節三者之間的空隙大小。在後臺Configuration —> Layout Setting中，仔細調節Column Width – Left BoxesColumn Width – Right Boxes和Column Width -LeftColumn Width – Right的值，上面的這類帶有Boxes的，是設定顯示給咱們看的box的大小，而沒有Boxes的這類值，則是顯示背景的大小。只要你把下面的值設得比上面的值大，就有空隙出來了。剛安裝好的Zen-cart，如何修改首頁的Congratulations! you have successfully installed…If you want to change 「Congratulations! You have successfully installed your Zen Cart; E-Commerce Solution」 with your own text open the includes/languages/ENGLISH/index.php file and find the following code:// This section deals with the 「home」 page at the top level with no options/products selected/*Replace this text with the headline you would like for your shop. For example: ‘Welcome to My SHOP!’*/define(’HEADING_TITLE’, ‘Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.’);} elseif ($category_depth == ‘nested’) {// This section deals with displaying a subcategory/*Replace this line with the headline you would like for your shop. For example: ‘Welcome to My SHOP!’/define(’HEADING_TITLE’, ‘Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.’);}Replace the text starting 「Congratulations」 with your own text. Make sure that the single quote marks are not left out.如何修改左、右邊框的顯示風格？修改文件common/tpl_box_default_left.php或common/tpl_box_default_left.php便可。我獲得了一個空白頁面，怎麼調試呢？最簡單的方法，把如下代碼加入到你的index.php裏：<?php define(’STRICT_ERROR_REPORTING’, true);?>這樣，你訪問頁面產生的錯誤消息就會輸出到頁面了。固然，記得把這個關掉，若是你把錯誤fix掉了的話，省得給用戶看到。我要單獨修改Categories裏的內容，怎麼辦？不單是Categories，全部的sidebox的內容，均可以在/includes/templates/YourTemplate/sideboxes文件夾裏進行修改。tpl_categories文件，就是修改Categories裏面的顯示內容的，固然，你修改了裏面的CSS標籤，就修改了Categories的樣式。你能夠經過common/tpl_box_default_left.php和common/tpl_box_default_right.php這兩個文件來對左欄和右欄的內容進行大的調整。通常來講，你只要修改sideboxes裏面對應的文件就能搞定你所須要的東西了。Posted in Zen-Cart 系列知識, 經常使用知識 | No Comments ?zen-cart全新作一個本身的模板應參考文檔(轉載)星期天, 七月 12th, 2009 Zen Cart的模板設計比較複雜，須要必定的時間來熟悉。一旦你瞭解了它的結構，就會慢慢習慣了。首先要閱讀常見問答部分的：如何添加、製做新模板。 Zen Cart的設計沒有什麼特別，與之前設計HTML頁面是同樣的。只是整個頁面分紅了好幾個部分，並加入了PHP代碼。一般，頁面分爲頁眉(header)，頁腳(footer)，邊框(sideboxes)。因此設計頁面的時候，要記住Zen Cart是如何組織這些頁面的。頁面是經過CSS樣式表來控制的。樣式表控制表格單元的背景圖案、字體的顏色和樣式等等。因此，假如你須要修改邊框標題欄的字體，那麼查看樣式表文件。Zen Cart在頁面添加圖像有兩種方式。可使用圖像目錄的相對路徑，或者在模板中用php變量定義圖像。若是你使用https服務器，而且採用相對圖像路徑，那麼https的圖像目錄下也要有一樣的圖像，不然https服務器極可能會給出警告提示。Zen Cart能夠設置成任意的html/flash的界面，只是比一般的html頁面的設計費時。你能夠從修改缺省的模板開始，先修改CSS文件和三欄格式的界面。開始先採用不一樣的顏色，很快就能夠設計出徹底不一樣的風格。最後，在設計模板前要先計劃好你網頁的內容，事半功倍。下面是zen cart頁面各部分相對應模板文件的一個列表：文件路徑註釋index.php主文件includes/templates/[custom template folder]/common/html_header.php頁面的head部分includes/templates/[custom template folder]/common/tpl_main_page.php頁面的body部分includes/templates/[custom template folder]/common/tpl_header.php全部頁面的頁眉(column left)includes/templates/[custom template folder]/common/main_template_vars.php決定頁面的內容部分，缺省爲 ‘tmp_index_default.php’首頁 – 缺省includes/templates/[custom template folder]/templates/tmp_index_default.php首頁模板文件首頁 – 顯示分類includes/templates/[custom template folder]/templates/tpl_index_categories.php首頁上顯示分類時的模板文件includes/modules/[custom template folder]/pages/index/category_row.php選擇要顯示的分類includes/templates/[custom template folder]/templates/tpl_index_category_row.php顯示分類首頁 – 顯示指定分類includes/templates/[custom template folder]/templates/tpl_index_product_list.php首頁上顯示指定的分類時採用的模板文件includes/modules/[custom template folder]/product_listing.php將商品數據添加到數組includes/templates/[custom template folder]/templates/tpl_modules_product_listing.php顯示商品數量和商品導航菜單includes/templates/[custom template folder]/common/tpl_list_box_content.php顯示商品數組商品信息頁面includes/templates/[custom template folder]/templates/tpl_product_info_display.php顯示單件商品信息購物車頁面includes/templates/[custom template folder]/templates/tpl_shopping_cart_default.php購物車頁面(column right)includes/templates/[custom template folder]/common/tpl_footer.php全部頁面的頁腳

正確地定製您的網站 - 文件替代機制

由 Jack » 2005-07-25 21:14

本文翻譯自NetworkDad的文章「Properly customizing Your Site」，適當修改。
原文地址: http://www.zen-cart.com/forum/showthread.php?t=7263
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

不少用戶對zen cart作了本身的修改，很是好！但同時，一些用戶修改了不少重要的文件，例如：

/includes/filenames.php
/includes/languages/schinese.php
/includes/languages/schinese/*.php

等等...

友情提示：若是你但願之後的升級更容易，不要修改這些文件！

Zen Cart的文件替代機制的功能很是強，你不須要修改上面的這些文件。

若是你修改了這些文件，下次升級的時候，Zen Cart會覆蓋這些文件，你作的修改會丟失。

好了，如何避免這種狀況呢？如何使用文件替代機制？

下面，我一步步說明如何使用文件替代機制，而不是去修改Zen Cart的核心文件！

下面的全部例子，都假設你：
1. 使用簡體中文。其它語言相應修改就好。
2. 例子使用的模板名字是custom

"custom" 目錄名能夠是任何名字.... 只是在全部地方都要一致，這樣文件替代機制才能正常工做。

你能夠命名爲:
- mytemplate
- custom
- billg
- helluvacart
- zenrocks
- thisseemstoolongatemplatename
- supercalifragilisticexpialidocious
- tpl

還有不少 !!!!

附錄及聲明: 若是我漏了什麼, 或者說錯了，請告知，我會盡快修改! 不做任何擔保。一個月後憑收據退款!

-- 注，請先閱讀－如何添加/創建新的模板？

================================

修改缺省語言文件 - /includes/languages/schinese.php

例子: 你想修改標題，將「Zen Cart!」, 改成「個人商店名稱！」

在目錄/includes/languages下，創建一個與你的模板同名的目錄，例如/includes/languages/custom.

將schinese.php文件複製到該目錄。

接着，你就能夠修改文件/includes/languages/custom/schinese.php:

define('TITLE', 'Zen Cart!');

改成:

define('TITLE', '個人商店名稱!');

================================

修改語言文件 - /includes/languages/schinese/*.php (全部該目錄下的文件)

例子: 你想修改account.php中的文字 - 好比你要將 '賬號' 改成 '檔案'

創建一個與你的模板同名的目錄。假設模板名是custom。那麼目錄就是:

/includes/languages/schinese/custom

將原來的文件/includes/languages/schinese/account.php複製到新目錄:

/includes/languages/schinese/custom

接着, 修改該新的custom目錄下的文件。這樣，該修改會 '替代' 原來/includes/languages/schinese目錄中的相應文件, 從而不會影響和修改核心文件。

================================

修改模板文件 - /includes/templates/template_default/templates/tpl_*_default.php

例如: 你想修改tpl_account_default.php文件中的一些HTML

在你的模板目錄中( /includes/templates/custom ) 你應該已經有一個模板目錄了 ( /includes/templates/custom/templates )。

將文件tpl_account_default.php複製到該目錄中。而後你就能夠本身修改了，它會自動 '替代' /includes/templates/template_default/templates目錄中的相應文件。

你只要複製須要修改的文件到本身的模板目錄，若是你未作修改，那麼缺省狀況下，商店會從template_default目錄調用缺省文件。

================================

修改邊框模板

這和修改通用模板是同樣的(見上), 除了邊框的路徑是:

/includes/templates/custom/sideboxes

================================

修改邊框 - /includes/modules/sideboxes/*.php

例子: 你想修改邊框information.php文件，加上另一個連接。

在邊框文件的目錄中(/includes/modules/sideboxes)，創建另外一個和模板custom同名的子目錄，就是/includes/modules/sideboxes/custom

將文件information.php複製到該新目錄中

接着你就能夠修改新的information.php，它會替代/includes/modules/sideboxes目錄中的缺省information.php文件

你能夠覈對該邊框是否被替代，登陸管理頁面 -> 工具 -> 外觀控制。在欄目 '方框文件名' 下, 若是文件名顯示爲紅色, 就說明它被替代了。

================================

調用自定義文件名 - /includes/filenames.php

例子: 你新建了一個頁面about_us，須要調用該文件名。

不要在/includes/filenames.php文件中添加一個新的定義，你應該在已有的目錄/includes/extra_datafiles中定義該文件名。

創建新文件about_us_filenames.php，而後放在目錄/includes/extra_datafiles中。

在該文件中，要有如下代碼:

代碼: 全選

<?php
// About Us Filename Define
##define('FILENAME_ABOUT_US', 'about_us');
?>

該文件將自動被調用, 就象該目錄中的其它文件同樣, 所以系統知道你的定製文件。

儘可能用一樣的辦法新建文件...例如, 調用文件blah，將它命名爲blah_filenames.php

================================

調用自定義數據庫表 - /includes/database_tables.php

例子: 你爲本身的UPS跟蹤系統建了個數據庫ups_track，須要爲代碼定義數據表名。

不要在文件/includes/database_tables.php中定義, 你要在已有的目錄/includes/extra_datafiles中定義數據表。

創建新文件ups_track_database_tables.php，置於目錄/includes/extra_datafiles中。

在該文件中，要有如下代碼:

代碼: 全選

<?php
// UPS Tracking Table
##define('TABLE_UPS_TRACK', 'ups_track');
?>

該文件將自動被調用，就象該目錄中的其它文件同樣, 所以系統知道你的定製數據庫。

================================

額外語言文件

例如: 你新建了一個Resource Center方框，須要一個額外文件來調用額外語言定義。

在目錄/includes/languages/schinese/extra_definitions中, 你能夠創建一個文件resource_center_box_defines.php。在該文件中，你能夠放置新的方框的全部語言定義。

該文件將自動被調用, 保證你的自定義方框或頁面的語言定義被調用。

================================

給已有文件增長額外Javascript

例子: 你想爲你的Bizrate賬號調用一些javascript，這樣，訂單完成後，就會從已有頁面調用checkout_success.php。

在目錄/includes/modules/pages/checkout_success中，建一個新文件jscript_bizrate.js

在該文件中，放置Bizrate給你的javascript代碼，例如:

代碼: 全選

一樣地..若是你使用Google的轉換跟蹤系統。創建另一個文件，例如jscript_google.php

================================

添加和修改CSS文件

例子: 你爲本身的網站新建了一個CSS類

不要添加到已有的CSS文件/includes/templates/custom/css/stylesheet.css中，要在同一目錄下，另建一個文件stylesheet_YOURFILENAME.css，而後將你的CSS數據加在這裏。

================================

最後，談談升級！

如今，你正確使用Zen Cart的替代機制了！恭喜，你能夠放心了。你不用擔憂升級文件會覆蓋你的定製文件，由於全部的定製文件都保存在你本身的目錄裏！

好吧，你升級了Zen Cart。但若是你替代的文件有新的代碼呢？因此你須要比較custom目錄和新的核心文件。

例子：你修改了/includes/languages/custom/schinese.php文件, 升級後, /includes/languages/schinese.php文件中有些新的定義。顯然你要把這些新的定義加入到你的schinese.php文件中。

最容易的方法就是使用文件比較工具！

推薦使用WinMerge, 也是開源免費。

有了文件比較工具，你就能夠比較你的/includes/languages/custom/schinese.php文件，和新的核心文件/includes/languages/schinese.php，而後很容易將新的修改加入到你的替代文件中。

經常使用CSS元素

div ul dl dt ol的簡單解釋及佈局定位

post by waipiu / 2009-4-14 11:43 Tuesday xhtml 發表評論幾個css元素的簡單解釋 div ul dl dt oldiv，這個很常見，塊級元素，div儘可能少用，和table同樣，嵌套越少越好

ol 有序列表。

<ol>

</ol>

表現爲：

1……

2……

3……

ul 無序列表，表現爲li前面是大圓點而不是123

<ul>

</ul>

不少人容易忽略 dl dt dd的用法

dl 內容塊

dt 內容塊的標題

dd 內容

能夠這麼寫：

<dl>

</dl>

dt 和dd中能夠再加入 ol ul li和p

理解這些之後，在使用div佈局的時候，會方便不少，w3c提供了不少元素輔助佈局

因爲項目中編寫文檔結構、編寫CSS的人員較多，並與程序員協同工做，就須要統一class與id的名稱，前天花了一點時間，按照大多人的習慣，制定了下面的經常使用關鍵字：

容器：container/box

頭部：header

主導航：mainNav

子導航：subNav

頂導航：topNav

網站標誌：logo

大廣告：banner

頁面中部：mainBody

底部：footer

菜單：menu

菜單內容：menuContent

子菜單：subMenu

子菜單內容：subMenuContent

搜索：search

搜索關鍵字：keyword

搜索範圍：range

標籤文字：tagTitle

標籤內容：tagContent

當前標籤：tagCurrent/currentTag

標　題：title

內容：content

列表：list

當前位置：currentPath

側邊欄：sidebar

圖標：icon

注釋：note

登錄：login

注冊：register

列定義：column_1of3 (三列中的第一列)

column_2of3 (三列中的第二列)

column_3of3 (三列中的第三列)

代碼精簡

　　使用DIV CSS佈局，頁面代碼精簡，這一點相信對XHTML有所瞭解的都知道。代碼精簡所帶來的直接好處有兩點：一是提升spider爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄質量有必定好處;二是因爲能高效的爬行，就會受到spider喜歡，這樣對收錄數量有必定好處。

　　表格的嵌套問題搜索引擎通常不抓取三層以上的表格嵌套，這一點一直沒有獲得搜索引擎官方的證明。個人幾項實驗結果沒有徹底出來，但根據目前掌握的狀況來看，spider爬行Table佈局的頁面，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。

　　使用Table佈局，爲了達到必定的視覺效果，不得不套用多個表格。若是嵌套的表格中是核心內容，spider爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了類似頁面。網站中過多的類似頁面會影響排名及域名信任度。

　　而DIV CSS佈局基本上不會存在這樣的問題，從技術角度來講，XHTML在控制樣式時也不須要過多的嵌套。搜索引擎優化及營銷都是很是有利的。搜索引擎表示排名規則會傾向於符合W3C標準的網站或頁面，但事實證實使用XTHML架構的網站排名情況通常都不錯。這一點或許會有爭議，但樂思蜀本人保持這樣的觀點，有異議者能夠拿三組以上基本同等質量的網站對比觀察。內容來自中國站長資訊網(www.chinahtml.com)

　　我想，這樣的狀況可能不是排名規則，最大的可能仍是spider爬行網站時，出現以上差別致使收錄質量的不一樣。

　　畢竟廖勝於無，建議建站或改版的朋友們，技術許可的狀況下，仍是選擇DIV CSS佈局爲好。

CSS佈局經常使用的方法：float:none|left|right

取值：

none:　默認值。對象不飄浮

left:　文本流向對象的右邊

right:　文本流向對象的左邊

它是怎樣工做的，看個一行兩列的例子

xhtml:

<div id="column1">這裏是第一列</div>

<div id="column2">這裏是第二列</div>

</div>

CSS:

#wrap{width:100;height:auto;}

#column1{float:left;width:40;}

#column2{float:right;width:60;}

.clear{clear:both;}

position:static|absolute|fixed|relative

取值：

static:　默認值。無特殊定位，對象遵循HTML定位規則

absolute:　將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。若是不存在這樣的父對象，則依據body對象。而其層疊經過z-index屬性定義

fixed:　未支持。對象定位聽從絕對(absolute)方式。可是要遵照一些規範

relative:　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

它來實現一行兩列的例子

xhtml:

<div id="column1">這裏是第一列</div>

<div id="column2">這裏是第二列</div>

</div>

CSS:

#wrap{position:relative;width:770px;}

#column1{position:absolute;top:0;left:0;width:300px;}

#column2{position:absolute;top:0;right:0;width:470px;}

他們的區別在哪?

顯然，float是相對定位的，會隨着瀏覽器的大小和分辨率的變化而改變，而position就不行了，因此通常狀況下仍是float佈局！

CSS經常使用佈局實例

單行一列

body{margin:0px;padding:0px;text-align:center;}

#content{margin-left:auto;margin-right:auto;width:400px;}

兩行一列

body{margin:0px;padding:0px;text-align:center;}

#content-top{margin-left:auto;margin-right:auto;width:400px;}

#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列

body{margin:0px;padding:0px;text-align:center;}

#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

#content-mid{margin-left:auto;margin-right:auto;width:400px;}

#content-end{margin-left:auto;margin-right:auto;width:400px;}

單行兩列

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:420px;}

兩行兩列

#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:420px;}

三行兩列

#header{width:700px;margin-right:auto;margin-left:auto;}

#bodycenter{width:700px;margin-right:auto;margin-left:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:420px;}

#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

單行三列

絕對定位

#left{position:absolute;top:0px;left:0px;width:120px;}

#middle{margin:0px190px0px190px;}

#right{position:absolute;top:0px;right:0px;width:120px;}

float定位

xhtml:

<div id="column1">這裏是第一列</div>

<div id="column2">這裏是第二列</div>

</div>

<divid="column3">這裏是第三列</div>

<divclass="clear"></div>

</div>

CSS:

#wrap{width:100;height:auto;}

#column{float:left;width:60;}

#column1{float:left;width:30;}

#column2{float:right;width:30;}

#column3{float:right;width:40;}

.clear{clear:both;}

float定位二

xhtml

<h1>Thisisthemaincontent.</h1>

</div>

<h2>Thisistheleftsidebar.</h2>

</div>

<h2>Thisistherightsidebar.</h2>

</div>

CSS

body{

margin:0;

padding-left:200px;

padding-right:190px;

min-width:200px;

}

.column{

position:relative;

float:left;

}

#center{

width:100;

}

#left{

width:200px;

right:200px;

margin-left:-100;

}

#right{

width:190px;

margin-right:-100;

}

*html#left{

left:190px;

}

這樣的一個指令：(position)，在DreamWeaver中文版中翻譯爲「定位」，經常使用的屬性有兩個：relative(相對)與 absolute(絕對)。有不少朋友對這條指令的用法仍是不清楚，這裏作一些細緻的講解。

　　position:relative; 表示相對定位，被定位了這個屬性的標籤在所屬的範圍內能夠進行上下左右的移，這裏的移動與padding或是margin所產生的位置變化是不同的。padding與margin是元素自己的一種邊距與填充距離並非真正的移動，而被定義爲relative的元素是真正的移動，這所產生的移動距離是從margin的外圍到父級標籤內側之間這一段。

　　position:absolute; 表示絕對定位，若是定義了這個屬性的元素，其位置將依據瀏覽器左上角的0點開始計算，而且是浮動正常元素之上的。那麼當你須要某個元素定位在瀏覽器內容區的某個地方就能夠用到這個屬性。

　　因而產生了一個問題：如今你們作的網頁大部分是居中的，若是我須要這個元素跟着網頁中的某個元素位置，不論屏幕的分辨率是多少它的位置始終是針對頁內的某個元素的，靠單純的absolute是不行的。

　　正確的解決方法是：在元素的父級元素定義爲position:relative;(這裏能夠是祖父級，也能夠是position:absolute;，多謝謝old9的提出)須要絕對定位的元素設爲position:absolute;

　　這樣再設定top,right,bottom,left的值就能夠了，這樣其定位的參照標準就是父級的左上角padding的左上側。

一.選擇符模式

模式/含義/內容描述

匹配任意元素。(通用選擇器)

匹配任意元素 E (例如一個類型爲 E 的元素)。(類型選擇器)

E F

匹配元素 E 的任意後代元素 F 。(後代選擇器)

E > F

匹配元素 E 的任意子元素 F 。(子選擇器)

E:first-child

當元素 E 是它的父元素中的第一個子元素時，匹配元素 E 。(:first-child 僞類)

E:link E:visited

若是 E 是一個目標尚未訪問過(:link)或者已經訪問過(:visited)的超連接的源錨點時匹配元素 E 。(link 僞類)

E:active E:hover E:focus

在肯定的用戶動做中匹配 E 。(動態僞類)

E:lang(c)

若是類型爲 E 的元素使用了(人類)語言 c (文檔語言肯定語言是如何被肯定的)，則匹配該元素。(:lang() 僞類)

E F

若是一個元素 E 直接在元素 F 以前，則匹配元素 F 。(臨近選擇器)

E[foo]

匹配具備」foo」屬性集(不考慮它的值)的任意元素 E 。(屬性選擇器)

E[foo="warning"]

匹配其「foo」屬性值嚴格等於「warning」的任意元素 E 。(屬性選擇器)

E[foo~="warning"]

匹配其「foo」屬性值爲空格分隔的值列表，而且其中一個嚴格等於「warning」的任意元素 E 。(屬性選擇器)

E[lang|="en"]

匹配其「lang」屬性具備以「en」開頭(從左邊)的值的列表的任意元素 E 。(屬性選擇器)

DIV.warning

僅 HTML。用法同 DIV[class~="warning"]。(類選擇器)

E#myid

匹配 ID 等於「myid」的任意元素 E 。(ID 選擇器)

咱們用下面的例子來解釋「父元素」、「子元素」、「父/子」及「相鄰」這幾個概念。

<p>這是一個段落p的內容！<strong>這裏是strong的內容</strong>這是一個段落p的內容！</p>

</div>

從以上代碼中，咱們能夠找出這樣的關係：

h1 和 p 同爲 div 的「兒子」，二者分別同 div 造成「父/子」關係。

h1,p,strong 都是 div 的「子元素」。（三者都包含在 div 以內）

div 是 h1 和 p 的「父元素」。

strong 和 p 造成「父/子」關係，strong 的「父元素」是 p 。

但 strong 和 div 並不是「父/子」關係，而是「祖孫」關係，但 strong 依然是 div 的「子（孫）元素」。

div 是 h1 p strong 三者的「祖先」，三者是 div 的「子（孫）元素」。

h1 和 p 二者是相鄰的。

繼承上面的實例來具體演示一下E F的關係：假如，咱們須要將 strong 內的內容二字變爲綠色，咱們能夠有哪些方法呢？

div strong {color:green;}

p > strong {color:green;}

div > strong {color:green;}

臨近選擇器和通用選擇器：通用選擇器以星號「*」表示，能夠用於替代任何 tag 。

實例：

h2 * { color:green }

二.選擇符分類介紹

1.通配選擇符

語法：

* { sRules }

說明：

通配選擇符。選定文檔目錄樹(DOM)中的全部類型的單一對象。

假如通配選擇符不是單一選擇符中的惟一組成，「*」能夠省略。

示例：

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2.類型選擇符

語法：

E { sRules }

說明：

類型選擇符。以文檔語言對象(Element)類型做爲選擇符。

示例：

td { font-size:14px; width:120px; }

a { text-decoration:none; }

僞類能夠看作是一種特殊的類選擇符，是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是能夠對連接在不一樣狀態下定義不一樣的樣式效果。

1. 語法

僞類的語法是在原有的語法里加上一個僞類（pseudo-class）：

selector:pseudo-class {property: value}

（選擇符:僞類 {屬性: 值}）

僞類和類不一樣，是CSS已經定義好的，不能象類選擇符同樣隨意用別的名字，根據上面的語法能夠解釋爲對象（選擇符）在某個特殊狀態下（僞類）的樣式。

類選擇符及其餘選擇符也一樣能夠和僞類混用：

selector.class:pseudo-class {property: value}

（選擇符.類:僞類 {屬性: 值}）

2. 錨的僞類

咱們最經常使用的是4種a（錨）元素的僞類，它表示動態連接在4種不一樣的狀態：link、visited、active、hover（未訪問的連接、已訪問的連接、激活連接和鼠標停留在連接上）。咱們把它們分別定義不一樣的效果：

a:link {color: #FF0000; text-decoration: none}

a:visited {color: #00FF00; text-decoration: none}

a:hover {color: #FF00FF; text-decoration: underline}

a:active {color: #0000FF; text-decoration: underline}

（上面這個例子中，這個連接未訪問時的顏色是紅色並沒有下劃線，訪問後是綠色並沒有下劃線，激活連接時爲藍色並有下劃線，鼠標在連接上時爲紫色並有下劃線）

注意：有時這個連接訪問前鼠標指向連接時有效果，而連接訪問後鼠標再次指向連接時卻無效果了。這是由於你把a:hover放在了a:visited的前面，這樣的話因爲後面的優先級高，當訪問連接後就忽略了a:hover的效果。因此根據疊層順序，咱們在定義這些連接樣式時，必定要按照a:link， a:visited， a:hover， a:actived的順序書寫。

3. 僞類和類選擇符

將僞類和類組合起來用，就能夠在同一個頁面中作幾組不一樣的連接效果了，例如，咱們定義一組連接爲紅色，訪問後爲藍色；另外一組爲綠色，訪問後爲黃色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

如今應用在不一樣的連接上：

<a class="red" href="...">這是第一組連接</a>

<a class="blue" href="...">這是第二組連接</a>

4. 其餘僞類

此外CSS2還定義了首字和首行（first-letter和first-line）的僞類，能夠對元素的首字或首行設定不一樣的樣式。

下面看這個例子，咱們在段落標記裏定義文本首字尺寸爲默認大小的3倍：

p:first-letter {font-size: 300%}

</style>

……

<p>

這是一個段落，這個段落的首字被放大了。

</p>

咱們再定義一個首行樣式的例子：

div p:first-line {color: red}

</style>

……

<div>

<p>

這是段落的第一行

這是段落的第二行

這是段落的第三行

</p>

</div>

（上例中段落的第一行爲紅色，第2、三行爲默認顏色）

注意：首字和首行的僞類須要IE5.5以上的版本支持。

1. Block和inline元素對比

全部的HTML元素都屬於block和inline之一。

block元素的特色是：

老是在新行上開始；

高度，行高以及頂和底邊距均可控制；

寬度缺省是它的容器的100%，除非設定一個寬度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。

相反地，inline元素的特色是：

和其餘元素都在一行上；

高，行高及頂和底邊距不可改變；

寬度就是它的文字或圖片的寬度，不可改變。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用display: inline 或display: block命令就能夠改變一個元素的這一特性。何時須要改變這一屬性呢？

讓一個inline元素重新行開始；

讓塊元素和其餘元素保持在一行上；

控制inline元素的寬度（對導航條特別有用）；

控制inline元素的高度；

無須設定寬度便可爲一個塊元素設定與文字同寬的背景色。

2. 再來一個box黑客方法

之因此有這麼多box黑客方法，是由於IE在6以前對box的理解跟別人都不同，它的寬度要包含邊線寬和空白。要想讓IE5等同其餘瀏覽器保持一致，能夠用CSS的方法：

padding: 2em;

border: 1em solid green;

width: 20em;

width: 14em;

第一個寬度全部瀏覽器都認得，但IE5.x不認得第2行的寬度設置，只由於那一行上有空白的註釋符號（多麼蠢的語法分析！），因此IE5.x就用20減掉一些空白，而其餘瀏覽器會用14這個寬度，由於它是第2行，會覆蓋掉第1行。

3. 頁面的最小寬度

min-width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當作最小寬度來使。爲了讓這一命令在IE上也能用，能夠把一個

放到標籤下，而後爲div指定一個類：

<body>

而後CSS這樣設計：

#container

{

min-width: 600px;

width:expression(document.body.clientWidth < 600? "600px": "auto" );

}

第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。

一樣的辦法也能夠爲IE實現最大寬度：

#container

{

min-width: 600px;

max-width: 1200px;

width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? 」1200px「 : 」auto";

}

4. IE與寬度和高度的問題

IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。

好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣：

.box

{

width: 80px;

height: 35px;

}

body .box

{

width: auto;

height: auto;

min-width: 80px;

min-height: 35px;

}

全部的瀏覽器均可以使用第一個box設置，但IE不認得第2段設置，由於其中用到了子選擇器命令。第2個設置更特殊些，因此它會覆蓋掉第1個設置。

在之前的web開發欄目中，我介紹了很多處理HTML表格的方法，儘管如今使用表格來佈局網頁的方法已經再也不時髦了，可是您依然可使用表格來顯示錶列數據。

顯示和樣式化表格的方法有不少種，在這篇文章中，我將介紹使用CSS對錶格邊框進行樣式化的方法。

連接

CSS2表格模型是基於HTML 4.01表格模型的。表格包含了一個可選的錨標記和單元格以及數據行，表格模型包含如下的元素：表格、錨、數據行、數據行組、數據列、數據列組和單元格。這篇文章將集中講解表格中各個元素的邊框處理方法。

邊框

根據不一樣的需求，您能夠對錶格和單元格應用不一樣的邊框。您能夠定義整個表格的邊框也能夠對單獨的單元格分別進行定義。CSS的邊框屬性能夠指定邊框的大小以及顏色和類型。如下的代碼定義了寬度爲5個像素的黑色實線邊框：

TABLE { 5px solid black; }

除此之外，您還可使用相同的語法爲表格中單獨的單元格分別指定邊框屬性。您可使用如下的屬性值來定義邊框類型：

l none: 指定表格沒有邊框，因此邊框寬度爲0。

l dotted: 由點線組成的表格邊框。

l dashed: 由虛線組成的表格邊框。

l solid: 由實線組成的表格邊框。

l Double: 由雙實線組成的表格邊框。

l Groove: 槽線效果邊框。

l ridge: 脊線效果邊框，和槽線效果相反。

l inset: 內凹效果邊框。

l outset: 外凸效果邊框，和內凹效果相反。

每一個邊框類型均可以指定一種顏色，邊框是繪製在背景顏色上的，列表A使用邊框屬性來樣式化整個表格以及錨標記和單獨的單元格。

<html>

<head><title>HTML Table</title></head>

TABLE {

background: blue;

border-collapse: separate;

border-spacing: 10pt;

border: 5px solid red; }

TD, TH {

background: white;

border: inset 5pt;

horizontal-align: right; }

CAPTION { border: ridge 5pt blue; }

</style><body>

<caption>First Quarter Sales</caption>

<thabbr="salesperson" scope="col">Person</th>

<thabbr="sales" scope="col">Sales</th>

</tr></thead>

<td>Mr. Smith</td>

</tr><tr>

<td>Mr. Jones</td>

</tr><tr>

<td>Ms. Williams</td>

</tr></tbody>

</tr></tfoot></table></body></html>

列表A

這個例子展現了不少可供使用的表格邊框的選項，您可使用您熟悉的度量單位（像素、磅，行長單位等）。設定邊框的尺寸，您可使用十六進制數值或顏色名稱來指定邊框顏色。如下的例子演示了定義邊框的方法。

border: 5px solid red;

在這一條語句中融合了寬度、樣式和顏色屬性的定義，可是您也能夠對這些元素進行單獨定義，以下所示：

border-width: 5px;

border-style: solid;

border-color: red;

除了將表格做爲一個總體進行定義，您也能夠將表格邊框的四個部分分別進行定義，包括頂部、底部、左邊和右邊。列表B中的代碼將剛纔的例子中的表格分紅四個部分單獨定義。

CSS佈局經常使用的方法

float:none|left|right

取值：

none: 默認值。對象不飄浮

left: 文本流向對象的右邊

right: 文本流向對象的左邊

它是怎樣工做的，看個一行兩列的例子

xhtml代碼:

Example Source Code

<div id="column1">這裏是第一列</div>

<div id="column2">這裏是第二列</div>

</div>

CSS代碼:

Example Source Code

#wrap{width:100;height:auto;}

#column1{float:left;width:40;}

#column2{float:right;width:60;}

.clear{clear:both;}

position:static|absolute|fixed|relative

取值：

static: 默認值。無特殊定位，對象遵循HTML定位規則

absolute: 將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。若是不存在這樣的父對象，則依據body對象。而其層疊經過z-index屬性定義

fixed: 未支持。對象定位聽從絕對(absolute)方式。可是要遵照一些規範

relative: 對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

它來實現一行兩列的例子

xhtml代碼:

Example Source Code

<div id="column1">這裏是第一列</div>

<div id="column2">這裏是第二列</div>

</div>

CSS代碼:

Example Source Code [www.52css.com]

#wrap{position:relative;width:770px;}

#column1{position:absolute;top:0;left:0;width:300px;}

#column2{position:absolute;top:0;right:0;width:470px;}

他們的區別在哪？

顯然，float是相對定位的，會隨着瀏覽器的大小和分辨率的變化而改變，而position就不行了，因此通常狀況下仍是float佈局！

在之前，爲Web頁面建立一個打印機友好的版本意味着要設計一個佈局和格式都通過修改的單獨頁面，這樣纔可以在打印的時候得到使人滿意的效果。如今，經過使用結構化的XHTML和CSS，你能夠實現一樣的效果而只用花費少得多的精力。

從屏幕顯示到打印效果

大多數的Web頁面都是設計適用於在計算機屏幕上觀看的。然而，有的時候用戶須要將某些頁面打印出來，也許就是爲了保留一個長期的記錄，或者將其用做方便的離線參考資料。

如今的麻煩是，讓Web頁面在計算機彩色屏幕上看起來引人注目和五彩繽紛的不少特性，都沒法在打印版的Web頁面上表現出相同的效果——尤爲當打印機是黑白的時候。在被降級爲灰度打印的時候，彩色的組合會失去（原有的）對比效果；圖形會看起來失真，並且耗費太長的打印時間；在Web頁面上起着重要做用的導航按鈕在打印頁面上也毫無用處。

爲了克服這些問題，Web的建立者經常會爲頁面專門設計一個打印機友好的版本，這樣訪問者就有打印的慾望。打印機友好的版本一般都包括有和主要Web頁面相同的內容，可是會省略掉大多數的圖形、背景和導航元素。頁面還會把彩色轉換成某種形式，以便生成可以讓人接受的灰度圖像。

CSS的解決方案

使用結構化的XHTML標示和CSS格式將內容和表示分離開來的一個優點在於，經過更改CSS樣式，你能夠很輕易就把內容從新格式化。所以，建立一個打印機友好的頁面就是把一個不一樣的CSS文件連接到相同的XHTML頁面上。

你能夠同時把屏幕樣式表和打印樣式表連接到同一個XHTML文件裏，因此就沒有必要單首創建一個打印機友好的頁面，只須要一個打印機友好的樣式表就好了。當你在連接代碼里加入多媒體類型的文件時，這就是在告訴瀏覽器爲了進行屏幕輸出要遵循或者忽略哪些CSS的規則，而爲了打印輸出要使用哪些規則。

下面是連接到一對CSS文件的例子：

若是須要支持老版本的瀏覽器，那你就必須堅持使用CSS1的媒體描述符screen和print。它們是相互排斥的，所以在爲屏幕顯示而生成頁面的時候，瀏覽器會忽略掉打印樣式表，反之亦然。因此，每一個樣式表都須要包含相同的樣式選擇器，可是有不一樣的規則聲明，以便爲不一樣的輸出設備分別生成頁面樣式。