Mobius 網站設計

很久以前在Smiley Cat看過一篇教學，將整個區塊元素變成可連結，並且在滑鼠移過時變換背景顏色：

要完成這個效果，有兩個重點：

• 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
• 必須讓整個區塊可以連結。

在Smiley Cat的教學中，利用CSS設定將 a 元素改為display:block，因為 a 元素除了可以連結之外，在CSS中，又能使 :hover 這個偽類別（pseudo-classes）產生作用（:hover如果不用在 a 元素，而用在其他區塊元素如 li:hover，IE 6是不支援的）。

而最近Web Designer Wall則有一篇jQuery十大特效的教學（jQuery Tutorials for Designers），裡面的第六項：Entire block clickable，提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS，並做了一點修改，讓區塊變換背景顏色與連結的效果都採用JQuery控制，成果請見demo頁面。

和Smiley Cat一樣，Web Designer Wall也是採用 li 元素來排列這三個區塊，XHTML的原始碼結構如下：

• Web Designer Wall

  A wall of design ideas, web trends, and tutorials

• Best Web Gallery

  Featuring the best CSS and Flash web sites

• N.Design Studio

  Blog and design portfolio of Nick La

而CSS的相關設定則為：

.pane-list {
margin: 0;
padding: 0;
list-style: none;
}
.pane-list li {
background: #ecfad7;
padding: 10px 20px 10px;
border-top: solid 1px #c4df9b;
cursor: pointer; //修改滑鼠游標
}

至於重頭戲jQuery的部份，原始碼如下：

$(document).ready(function(){
$(”.pane-list li”).hover(function(){
$(this).css(”background-color”, “#f6ffe9″);
}, function(){
$(this).css(”background-color”, “#ecfad7″);
});
$(”.pane-list li”).click(function(){
window.location=$(this).find(”a”).attr(”href”);return false;
});
});

上面的動作，要處理的有兩件事情：

• 當滑鼠移過 li 區塊時會變化背景顏色：使用 .hover事件，修改 li 的background-color。
• 點擊整個 li 區塊即可以連結：使用 .click事件，並利用$(this).find("a").attr("href");取得連結網址。

這篇jQuery Tutorials for Designers裡面的十大特效都非常簡單實用，一定能幫助有XHMTL和CSS基礎的網頁設計師做出互動性更強的網頁，快去看看吧。

測試 offsetHeight, scrollHeight, clientHeight:

測試環境示意圖：

測試結果：

結論：

1. firefox 中 scrollHeight 比較接近實際值

2. IE7 中 offsetHeight 比較接近實際值

3. 可以以 window.innerHeight 或 contentDocument 判斷 FireFox 或 window

在頁面被 include 時路徑的相對位置將被改變，利用以下 script 設計可以被 include 的頁面

取得本身 SERVER端絕對路徑：

$nowSrvPath = str_replace('\\', '/', dirname(__FILE__));

取得本身 WEB 絕對路徑：

$nowWebPath = substr_replace($nowSrvPath, '', 0, strpos($nowSrvPath, $_SERVER['DOCUMENT_ROOT'])+ strlen($_SERVER['DOCUMENT_ROOT']));

CMS 內建根目錄常數：
CMS 根目錄 SERVER 絕對路徑

$_SERVER['SRVROOT']

CMS 根目錄 WEB 絕對路徑 (2.05版後內建)

$_SERVER['WEBROOT']

下載 urlNavigation demo

在CMS 中，搭配 urlNavigation class 與 navigation.xml 設計後台的首頁 index.php

1. 一個 plugin 的後台結構範例

2. 唯一的admin 首頁 /admin/index.php

3. 於 navigation.xml 中設定url 參數導覽邏輯

XML 定義規則：

Tag1: 根目錄 <pageTray>

Attribute:

• urlKey: url 參數key 值
• currentClass: 輸出 list 時，正在此頁的 class

Tag2: 頁面 <page>

Attribute:

• urlValue: url 參數的值
• file: 對應的檔案位置
• menuTitle: 於導覽中顯示的標題文字
• hide: 預設隱藏 (hide=”hide”)

相關重點：

class urlNavigation API

urlFunction API

1. 將新增的程式置於一個資料夾，以外掛方式，放在 /cms/plugin/ 資料夾下

2. 於外掛根目錄中置入 config.xml (可由其他外掛複製過來)

3. 設定 config.xml

4. CMS 後台的外掛管理將根據 config.xml 顯示

5. 前端於內容管理區，以 include 或 iframe 方式將前台的首頁引入

相關文章：
利用 class::urlNavigation 製作外掛後台
設計於前台可以被 Include 的網頁 .. coming soon

1. 下載 auth.zip 解壓縮後有兩個檔案:

• .ok_user
• .htaccess

2. 利用 http://www.htaccesstools.com/htpasswd-generator/ 設定帳號密碼，複製原始碼

3. 修改.ok_user : 將上一步驟複製的原始碼貼到 .ok_user

4.. 解壓縮後將檔案上傳到正確位置

1. .ok_user 置於網站根目錄
2. .htaccess 置於加入登入權限的目錄 ( /cms/admin/ )
   

   注意：在 dreamweaver 或其他FTP軟體上需設定顯示隱藏檔
   

5. 下載網站根目錄的 .htaccess 於下個步驟修改

6. 修改 .htaccess 後上傳後即可

1. 加入 原始碼 AuthUserFile 主機路徑/.ok_user
2. 複製原來的主機路徑