自行設計主題風格

架構說明

Step by step

1. 首頁

2. 內頁框架

3. 首頁資料區

4. 右邊幅

檔案命名規則

CSS說明

完工檢查表

三、首頁資料區

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

(1) 如何選擇首頁資料區版型?

  1. 形象型或資料型首頁都有資料區 (intro)

形象形範例 資料型首頁, 無邊幅 資料型首頁, 有邊幅

side

資料區 1

資料區 2

head

head

side

資料區 1

資料區 2

資料區 3

資料區 4

head

side

資料區 1

資料區 2

資料區 3

資料區 4

edge

  1. 資料區 (intro) 模組種類包括:自由編輯區 (HTML)公佈欄活動訊息好站相連推薦商品特價商品新商品等。有的版型有 4 個模組, 有的版型有 5 個模組。其排列組合無法自由挑選或排序, 必須依照右列樣式來選擇。

  2. 與首頁(theme)、內頁框架(page)、邊幅(edge) 不同的是, intro 的檔案並非存放在命名為 intro 的資料夾, 而是隨版型編號存放於不同的資料夾 (資料夾名稱及上傳檔說明見下段) , 所以您也可以多做幾個 intro , 各放在不同的資料夾內, 這樣您就可以隨時切換首頁資料區的內容, 不錯吧 !

  3. 到那裡選資料區版型?
    您在這裡只是決定您想要那一個首頁資料區版型, 但您必須告訴系統您的決定為何? 請到 主題風格/首頁版型配置 中選擇, 否則系統不會理會您所上傳的檔案。如果您多做了幾個 intro , 也是在這個地方作切換。

-- TOP --

 

 

(2) 如何設計與上傳?

  1. 點選右列版型圖樣, 可看每一組首頁資料區版型的詳細說明。

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

Q: 什麼資料夾?

A: 首頁資料區的檔案放到 ct\資料區編號 的資料夾內。

您必須到 上傳空間 去新增 1 個命名為 ct 的資料夾, 然後進入 ct 內, 並在此目錄下新增 1 個例如命名為 ct63801we(資料區編號) 的資料夾;所以您所製作的檔案就是放在這個 ct\ct63801we 資料夾內。

形象形首頁的資料區編號可能是 ct57802w , 資料型無 edge 的資料區編號可能是 ct63802w , 資料型有 edge 的資料區編號可能是 ct63802we;資料區編號的命名方式如下表說明:

ct 638 02 w e

前二碼 三至五碼 六七碼 第八碼 尾碼
ct 為識別代號 該資料區的寬度 638 px 代表第 02 號版型 版本適用識別碼
分三種:w、m、a
w -- 網站用
m -- 商城版專用
  -- ASP專用
e 表示有edge
e 則沒有edge

 

Q: 那些檔案?

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

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

有 CSS 檔 ( intro.css 其內容用以定義首頁資料區 intro 的內容)

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

  1. 區塊範例:

假設這是您要的首頁資料區:

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

head

side


活然正氣,原為天授,惟常人不善養,反以性伐氣。鳴天鼓...

v 新書推薦 ---水彩台灣近代建築----賞古蹟‧畫建築
v 凡每筆實付金額滿800元以上,即可獲贈
v 區塊與區塊之間沒有設行距,如果需要些微間隔。

古坑咖啡方塊酥餅(可素食) ~文化美食、世代相傳~由古坑鄉農會出品的古坑咖啡方塊酥餅,有方塊酥的酥脆口感以及咖啡的香醇,香脆可口 礁溪溫泉蕃茄3盒入 交易條件: 1、限網上刷卡、ATM轉帳、郵政劃撥付費。 2、訂購此產品之訂單請獨立分開!

- 黑木耳粉膠囊特價最後二日...敬請把握機會...<詳全文>
- 自即日(3/15)起,本週1元商品更正為「嘉義老楊方塊酥-海苔千層酥」...<詳全文>

edge

 

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

top ←→ 標題圖檔 ←→

模組名_top.gif

mid 背景圖檔

模組名_mid.gif

bottom 底部圖檔

模組名_bot.gif

 

 

範例一:

top

mid 背景(兩端有線)


會上下 repeat

bot


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

 

範例二:

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 --

 

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

版型 簡                述

ct57801w 

HTML


尺寸:578*自訂

ct57802w

HTML

活動
訊息
推薦
商品

HTML尺寸:578*自訂
活動訊息:5筆
推薦商品:1筆

ct63801w 

HTML


尺寸:638*自訂

ct63801we 

HTML

e
d
g
e

有edge

尺寸:518*自訂

ct63802w

HTML

活動訊息
新商品
推薦商品

HTML

HTML尺寸:638*自訂
活動訊息:5筆
新商品:4筆
推薦商品:4筆
HTML 尺寸:638*自訂

ct63802we

HTML

活動訊息
新商品
推薦商品

HTML

e
d
g
e

有edge
HTML尺寸:518*自訂
活動訊息:5筆
新商品:4筆
推薦商品:4筆
HTML 尺寸:518*自訂

ct63803w

公佈欄

HTML

推薦商品
新商品

公佈欄:6筆
特價商品:1筆
HTML 尺寸:638*自訂
推薦商品:4筆
新商品:2筆

ct63803we

公佈欄

HTML

推薦商品
新商品

e
d
g
e

有edge
公佈欄:6筆
特價商品:1筆
HTML 尺寸:518*自訂
推薦商品:4筆
新商品:2筆

ct63801a

HTML

新商品
推薦商品
特價商品

HTML

HTML尺寸:638*自訂
帶出各網站新商品:12筆
本站推薦商品:12筆
本站特價商品:4筆
HTML 尺寸:638*自訂

ct63801ae

HTML

新商品
推薦商品
特價商品

HTML

e
d
g
e

有edge
HTML 尺寸:518*自訂
帶出各網站新商品:12筆
本站推薦商品:12筆
本站特價商品:4筆
HTML 尺寸:518*自訂

ct63805we

HTML

特價商品
推薦商品

HTML

e
d
g
e

有edge
HTML 尺寸:518*自訂
 本站特價商品:8筆
本站推薦商品:1筆
HTML 尺寸:518*自訂

ct63806w

HTML

特價商品
推薦商品
新商品

HTML

H
T
M
L

HTML 尺寸:638*自訂
本站特價商品:3筆
本站推薦商品:1筆
本站新商品:3筆
HTML 尺寸:518*自訂
活動訊息:6筆
HTML 尺寸:120*自訂

ct63807we

歡迎詞

活動訊息
新商品
推薦商品

HTML

e
d
g
e

有edge
歡迎詞
活動訊息:5筆
新商品:4筆
推薦商品:4筆
HTML 尺寸:518*自訂

ct63808w

HTML

新聞
活動訊息
HTML

HTML尺寸:638*自訂
新聞:
活動訊息:
HTML 尺寸:638*自訂

ct63809w

HTML

H

新聞
活動訊息

HTML

H
B

HTML尺寸:448*自訂
新聞:
活動訊息:
HTML 尺寸:190*自訂
HTML 尺寸:190*自訂
報導:
HTML 尺寸:448*自訂
Banner:

ct63810we

HTML

H

新聞
活動訊息

公告

HTML

faq

H
B

HTML尺寸:518*自訂
新聞:
活動訊息:
公告:
HTML 尺寸:518*自訂
HTML 尺寸:120*自訂
FAQ:
HTML 尺寸:120*自訂
Banner:

ct63810w

HTML

新聞
活動訊息
公告

HTML

HTML尺寸:638*自訂
帶出網站新聞
本站活動訊息
本站公告
HTML 尺寸:638*自訂