自行設計主題風格

架構說明

Step by step

1. 首頁

2. 內頁框架

3. 首頁資料區

4. 右邊幅

檔案命名規則

CSS說明

完工檢查表

四、右邊幅

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

(1) 如何選擇右邊幅版型?

  1. [形象型] 首頁沒有右邊幅,[資料型] 首頁才有。如需在首頁中出現 edge , 則必須選擇 [資料型] 首頁, 並在選擇其資料區 (intro) 時, 選擇含有右邊幅 (edge) 的 intro 版型 (其版型編號尾碼有 e 字, 請參考首頁資料區說明)。而內頁的右邊幅只有在某些系統模組頁面才顯示出來!

[形象形] 沒有 edge [資料型] 無 edge [資料型] 有 edge

side

intro

head

head

side

intro

head

side

intro

edge

  1. 右邊幅 (edge) 模組種類包括:自由編輯區 (HTML)商品搜尋會員登錄訂閱電子報公佈欄活動訊息好站相連推薦商品特價商品新商品等。有的版型有 4 個模組, 有的版型有 5 個模組, 有的版型有 6 個模組。其排列組合無法自由挑選或排序, 必須依照右列樣式來選擇。

  2. 到那裡選右邊幅版型?
    您在這裡只是決定您想要那一個右邊幅版型, 但您必須告訴系統您的決定為何? 請到 主題風格/邊幅架構 中選擇, 否則系統不會理會您所上傳的檔案。

-- TOP --

  

(2) 如何設計與上傳?

  1. 點選右列版型圖樣, 可看每一組右邊幅版型的詳細說明。

  2. 系統會依照您所選擇的版型, 到 上傳空間某個資料夾抓取相關檔案

Q: 什麼資料夾?

Aedge資料夾

  這個資料夾需要您自己到 上傳空間 去新增。

Q: 那些檔案?

A: 有圖檔 (各區標題美工圖、背景圖 GIF)

  有HTML (包含這個 HTML 檔, 及其所含的圖檔或 FLASH 檔...)

有 CSS 檔 ( edge.css 其內容用以定義右邊幅 edge 的內容)

這些檔案都在您所點選的版型說明中所示, 另請參考檔案命名規則CSS 說明完工檢查表

  1. 區塊範例:

假設這是您要的右邊幅:

(1) 自由編輯區HTML  (2) 活動訊息   (3) 新商品   (4) 公佈欄

head

side

intro

jgkf;eji;mfk
gf;jks;gfjkd
kfld;jsk;ajfk
ljp[y]6ipeks
jfkd;sa;vj
jkgf;dsjgk;

自動帶出最新公佈欄資料3筆(有效時間) 自動帶出最新活動訊息資料3筆(有效時間) 自動帶出最新好站相連資料3

 

和 intro 一樣, 除了HTML之外, 每一個區塊都分成 3 個部份:

top ←→ 標題圖檔 ←→

模組名_top.gif

mid 背景圖檔

模組名_mid.gif

bottom 底部圖檔

模組名_bot.gif

  

商品搜尋會員登錄訂閱電子報這三個模組則多了一個 button 
(搜尋鍵、登錄鍵、訂閱鍵):

top
mid

button

bottom

 

 

範例一:

top

mid 背景(均勻圖)


會上下左右 repeat

bot

btn

 

範例二:

top

mid 背景(兩端有線)


會上下 repeat

bot


為了與下方區塊有點間隙, 多了些空白。

 

範例三:

top

mid 背景(兩端有線)


會上下 repeat

bot

 

 

-- TOP --

 

 

(3) CSS 調整什麼?

右邊幅需要上傳的檔案除了與版型圖示的 HTML 檔及圖檔之外, 還要上傳一支 CSS 檔, 這個檔案用來設定右邊幅的某些規格, 諸如:

  1. 資料區某些文字的字級、字型、字色、上下左右間隔、置中或靠左或靠右...等, 如:

- 公佈欄、活動訊息、好站相連等區塊的文字內容。

- 推薦商品、特價商品、新商品等區塊的商品名稱、商品價錢文字、商品價錢的阿拉伯數字等。

- 其他

註 1:整個網站主題風格需要 4 個 CSS 檔, 分別是:
首頁 -- theme.css
內頁 -- page.css
首頁資料區 -- intro.css
邊幅 -- edge.css

註 2:更詳細解說請參考 CSS 說明

-- TOP --

 

  點選版型名稱, 看詳細說明

版型 簡                述

自行設計01

推薦商品
公佈欄

HTML

好站相連

推薦商品:4筆
最新公佈欄:3筆
HTML 尺寸:120*自訂
好站相連:3筆

自行設計02

推薦商品
商品搜尋
特價商品
會員登錄
HTML

推薦商品:4筆
商品搜尋 search box
特價商品:3筆
會員登錄 log in
HTML尺寸:120*自訂

自行設計03

公佈欄
好站相連
活動訊息
訂電子報
HTML

最新公佈欄:3筆
好站相連:3筆
最新活動訊息:3筆
訂閱電子報 e-paper
HTML 尺寸:120*自訂

自行設計04

推薦商品
商品搜尋
特價商品
會員登錄
訂電子報
HTML

推薦商品:4筆
商品搜尋 search box
特價商品:3筆
會員登錄 log in
訂閱電子報 e-paper
HTML 尺寸:120*自訂

自行設計05

公佈欄
會員登錄
HTML
好站相連
活動訊息

最新公佈欄:3筆
會員登錄 log in
HTML 尺寸:120*自訂
好站相連:3筆
最新活動訊息:3筆

自行設計06

公佈欄
會員登錄
HTML
好站相連
訂電子報
活動訊息

最新公佈欄:3筆
會員登錄 log in
HTML 尺寸:120*自訂
好站相連:3筆
訂閱電子報 e-paper
最新活動訊息:3筆

自行設計07

HTML
公佈欄
好站相連
商品搜尋
特價商品
會員登錄

HTML 尺寸:120*自訂
最新公佈欄:3筆
好站相連:3筆
商品搜尋 search box
特價商品:3筆
會員登錄 log in

自行設計08

商品搜尋
特價商品
推薦商品
公佈欄
好站相連
HTML

商品搜尋 search box
特價商品:3筆
推薦商品:4筆
最新公佈欄:3筆
好站相連:3筆
HTML 尺寸:120*自訂

自行設計09

HTML
推薦商品
商品搜尋
特價商品
訂電子報

HTML 尺寸:120*自訂
推薦商品:4筆
商品搜尋 search box
特價商品:3筆
訂閱電子報 e-paper

自行設計10

商品搜尋
HTML
活動訊息
特價商品

商品搜尋 search box
HTML 尺寸:120*自訂
最新活動訊息:3筆
特價商品:3筆

自行設計11

顯示區
商品搜尋
訂電子報
會員登錄
特價商品
HTML

顯示區
商品搜尋 search box
訂閱電子報 e-paper
會員登錄 log in
特價商品:3筆
HTML 尺寸:120*自訂

自行設計12

會員登錄
新聞訊息
HTML

會員登錄 log in
新聞訊息
HTML 尺寸:120*自訂

自行設計13

會員登錄
訂電子報
公佈欄
特價商品
HTML

會員登錄 log inH
訂閱電子報 e-paper
最新公佈欄:5筆
特價商品:5筆
TML 尺寸:120*自訂