自行設計主題風格

架構說明

Step by step

1. 首頁

2. 內頁框架

3. 首頁資料區

4. 右邊幅

檔案命名規則

CSS說明

完工檢查表

一、

區塊檔案

區 塊 設 計 圖 背 景 圖  [註2] 有 HTML 格式時  [註3] 說 明

head [註1]

head.jpg

headbar_bg.jpg

head.html

區塊名稱為 head 與 side , 而當遇有選單時, 選單區就命名為 headbar 或 sidebar 。

headbar.jpg

headbar.html

side [註1]

sidebar.jpg

sidebar_bg.jpg

side.html

intro

intro_bg.jpg

intro.html

 

edge

edge_bg.jpg

edge.html

 

註:
1. 首頁與內頁框架 head 與 side 的檔案, 其命名方式(檔名)相同,而存放於不同資料夾 (首頁放在 theme 內; 內頁框架放在 page 內)。
2. 設計圖有一定尺寸,符合區塊的寬高;而背景圖則尺寸不限、系統會在區塊內自動 repeat 填滿該區塊的空間。
3. 若同一區塊有兩個以上 html 時,另加 1 或 2 等來區別,如:intro1.html、intro2.html。

二、

選單按鈕的圖檔

  (次) 區 塊 滑 鼠 前 滑 鼠 後
首頁

head

headbar

headbartbtn.gif

headbartbtnmor.gif

sidebar

sidebartbtn.gif

sidebartbtnmor.gif

內頁框架

head

headbar

headbarbtn.gif

headbarbtnmor.gif

sidebar

sidebarbtn.gif

sidebarbtnmor.gif

註:
1. 首頁與內頁框架的選單圖檔, 其命名方式不同,且存放於不同資料夾 (首頁放在 theme 內; 內頁框架放在 page 內)。
2. 首頁的選單檔名多了一個試別碼 t,如:headbartbtn.gif。
3. 滑鼠經過時的圖檔,檔名尾端多了 mor,代表 mouse over 之意。

三、

模組套用區  ( 適用於 intro 及 edge )

位 置 圖 檔 檔 名 圖 檔 尺 寸
上部 模組的英文簡寫_top.gif 寬度為各模組區之寬,高 25
中央 (底圖) 模組的英文簡寫_mid.gif 寬高不限,系統自動 repeat
底部 模組的英文簡寫_bot.gif 寬度為各模組區之寬,高 20
按鈕鍵 模組的英文簡寫_btn.gif 不限寬高、建議 30*25
在 edge 區塊中, 商品搜尋、登錄會員、訂閱電子報的模組有此按鈕圖檔

註:
1. 例:活動訊息模組,上部圖檔則命名為 action_top.gif。
2. 各圖的寬高還可以在 CSS 檔中設定優先權控制。
3. 當同一區塊有兩個以上的相同模組套用時,另加 1 或 2 , 例: sp1_top.gif、sp2_top.gif (css亦同)

模組說明

模 組 檔 名 英 文 簡 寫 內 容
公佈欄 ab

自動帶出最新公佈欄資料 3 筆 (有效時間)

活動訊息 action

自動帶出最新活動訊息資料 3 筆 (有效時間)

好站相連 weblink

自動帶出最新好站相連資料 5 筆

推薦商品 rec

自動帶出推薦商品 5 筆 ,某些資料區版型顯示時, 會顯示商品照片或價錢 (各不同版型會有不同設計)

特價商品 sp

自動帶出特價商品 5 筆, 某些資料區版型顯示時, 會顯示商品照片或價錢 (各不同版型會有不同設計)

新商品 newmd

自動帶出新商品 5 筆, 某些資料區版型顯示時, 會顯示商品照片或價錢 (各不同版型會有不同設計)

商品搜尋 search

關鍵字搜尋全商品

會員登錄 member

提供會員直接輸入帳號密碼登錄, 同時有加入會員和密碼查詢二選項

訂閱電子報 epaper

訂閱電子報

四、

上傳檔案的資料夾 及 CSS檔名

位 置 資 料 夾 名 稱 CSS 檔名

首頁

theme

theme.css

內頁框架

page

page.css

首頁資料區

ct\資料區版型編號

intro.css

右邊幅

edge

edge.css

註:
所有 intro 中的圖檔需上傳到 ct\資料區版型名稱 的資料夾下,如:當選用 ct63802w 時,所有檔案都需放在資料夾 ct\ct63802w 內,這是為了方便用戶可以有多個資料區存檔。