樣板手冊

出自 Migulu Information Co., Ltd.
前往: 導覽搜尋

一、 什麼是樣版

  • 樣板為整個網站畫面的大架構與視覺畫面呈現,將每個資訊區塊制定於特定的位置就是樣板。
  • 本手冊為一般DIV與CSS切板製作為主,但目前響應式網站崛起,請參考新的 RWD樣版手冊

二、使用的軟體工具及何時使用

製作樣版時,會用到以下工具:

  1. Adobe Photoshop
  2. Adobe Dreamweaver
  3. (Framework:960 Gride system)
  4. (Adobe Flash)
Adobe PhotoShop (PS)
一個超強功能的影像處理軟體,在影像編修及平面設計上的處理能力算是影像軟體界的個中翹楚,軟體內所包含的濾鏡與圖像物件、樣式與處理動作及其它可外掛程式都再再的加強了它的運用範圍及其功能。在此我們會使用它做為我們設計樣版稿件的應用軟體工具。
Adobe DreamWeaver (DW)
功能強大的網頁編輯軟體。在此我們會用來做為將設計的稿件切完圖,轉存為網頁用圖後的編修工具,進行網頁排版、樣式編輯設定與置入取代字串等等…。(如果不是很懂CSS的英文,DW是很好的輔助工具)。
Framework:960 Gride system
960 Grid System 是一個頗受注視的 css framework,可讓網頁設計人員利用一套設定好的 css,快速製作以 grid 排版的網頁。此framework製作出來的網頁寬度都是 960 pixels。(因 960 很接近 1024,而最多人用 1024 x 768 pixels 來瀏覽網頁,雖然現在很多人都用 16:10 或 16:9 的 LCD,不過用 wide screen 也不一定會用整個螢幕開啟瀏覽器。另一方面,960 這個數字可被多個數字整除,換句話說,如果以 960 pixels 為基礎,可創製出多個不同的 grid size。)
960 Grid System 目前提供了 12欄、16欄、24欄等 三個選擇,無論幾欄,其欄的左右間距皆為10px。如果切版時想用這個系統,在設計的時候,可在官網下載它photoshop的template來輔助。而在dreamweaver裡亦有960的外掛可以安裝。
【使用限制】
  1. 這 css framework 只處理網頁的排版,因此使用者仍需要懂得使用 css ,設置網頁的外觀,而且要懂得何時需要用 clear float
  2. 960 pixels 的寬度不能更改,如果你希望自設網頁的寬度,這 framework 不合用
  3. 960 GS 看似較為工整,限制了設計的變化,不過若不在網頁的每部分都設背景圖,則一格格的外觀不會很明顯,而且本示範也沒有使用界圖的方法製作背景。不過始終使用時有一些規律要遵守,例如邊界和格的寬度就不建議作出太大的調整,否則不如不用。

以上資料節錄於:http://www.jsolutions.biz/blog/web-design/960-grid-system-demo-part-1/

http://www.jsolutions.biz/blog/web-design/960-grid-system-demo-part-2/

Adobe Flash

可用來製作動畫。但因iphone、ipad等裝置並不支援swf,手機業者停止開發FLASH,近年已逐漸被淘汰,以HTML5取而代之。設計完畫面,轉網址給客戶確認時,如果樣版有廣告輪播的功能,會先以FLASH的方式呈現跑圖效果作為示意。
除非業主有特殊需求指定要設計FLASH才使用,否則不建議再製做FLASH動畫。


當然不限於以上的軟體工具來製作樣版,您可以使用您慣用的軟體來製作,只要依照我們一些相關的規定及準則,可以做出符合我們所說的樣版,就可以了。並不硬性規定一定要使用上述的4項軟體。

三、樣版版面配置說明

設計稿件的注意事項

1.構思到執行設計

版面構思-盡可能的畫草稿
進photoshop做畫面雖然很方便很直覺,但到切版時就必須再重排一次,做兩遍工。可以的話,在構思畫面時可先畫出大概的草稿,並標示相關尺寸、位置等,執行設計就可直接用使用CSS排版作畫面,節省更多時間,使工作更有效率。
著手設計-文件寬度960px
開新文件 > 文件寬度大小請設定為960px。設定成960 px是因為如果想用960 Gride這個Framework排版就很方便。如果一開始就確定要使用960 Gride,可安裝他的photoshop action。他便會自動幫您生成一份有輔助線的文件。
Image001.jpg
設計樣版:組件組合概念的方式去設計,並使用參考線輔助編排
樣板手冊002.jpg

基本樣版裡一定要有的區塊有:

  • Logo(#logo )
  • 主選單(#main)
  • 固定按鈕(#topnav)
  • 社群分享(#share)
  • 標題(.title)
  • 內容(#main)
  • 版權宣告(#copyright)
等七大區塊。
在思考樣板設計的時候,可把每個元素都當成是獨立的物件,在利用CSS去組合與堆疊出你想要的畫面。以這樣的方式去思考,在切版時就能更有效率。為了日後排版可以更快更精準,設計時請務必使用參考線輔助,以精算每區塊的大小與位置。

※你可以在photoshop裡先規劃好各區塊的資料夾(如右圖)。這樣除了以後給人接手時,別人比較容易看懂,也方便自己在排版以及做每個物件小圖的時候,可以比較方便,不容易搞混。

2.如何讓樣版可以縱向延伸的注意事項

網頁寬度設計恆為960px,因此僅考慮樣版縱向延伸的問題。一定要考慮延伸的區塊主要有:主選單(#mainNav)、內容區塊(#main)、版權宣告(#copyright)三個。如果你的設計是一個類似框的東西(如下圖左邊區塊),那你在切版時,圖就要做長一點,使其中間可以延展(如下圖右邊區塊)。
樣板手冊003.jpg
注意:圖檔長寬不要超過5000px。不然行動裝置可能會掉圖。
CSS背景延伸方式請參考:http://www.youtube.com/watch?v=G7GvFgFq2FE

四、樣版切割說明

(一)切圖的規則與注意要求事項

1.切圖:以圖層概念去製作所需要的小圖-物件分層
樣板手冊004.jpg
  • 背景延伸
CSS背景延伸方式請參考:http://www.youtube.com/watch?v=G7GvFgFq2FE
注意:最高高度5000左右。注意:圖片太大行動裝置會有掉圖的狀況發生。
  • 小圖合併
為了減少連線數,盡可能的把小圖合併成一張大圖,再用CSS控制背景位置來呈現。例如:
樣板手冊005.png
2.排版
建議可以開啟尺規,並設定網頁範圍左上角為原點,這樣以後在排版設定CSS時,就可很快的設定出大小與位置。
樣板手冊006.jpg
  • 使用對的標籤,避免DIV無意義的層層包覆
不要用表格的概念去使用DIV,這樣的排版一點意義都沒有。對於不同元素應使用相對應之html標籤,以利搜尋引擎判斷資料。例:選單請使用< ul>和< li>。
註:HTML標籤大全:http://www.w3schools.com/cn/tags/ref_byfunc.asp
  • 小心1px
XHTML+CSS排版很重視尺寸大小的準確性,多1px少1px都可能讓版型亂掉。建議在做圖時,善用參考線訂好大小與位置,這樣排版的時候才能更準確、有效率。
  • 主選單(#mainNav)、內容區塊(#main)、版權宣告(#copyright)的overflow
網頁寬度恆為960px,因此延伸僅考慮縱向延伸,但主選單、內容區塊、版權宣告的資料是客戶能修改的。因此,就必須要設定寬度的overflow為hidden來避免客戶塞圖或塞表格把整個版面撐開,造成破版。如果資料是英文,即使overflow設為hidden,還是可能會造成破版,而且內容排版也都無法切齊,不好看。我們必須再設定word-break: break-all; word-wrap: break-word 來強制英文單字遇到邊界就斷行。

(二)樣版CSS命名規則(layout.css)

layout.css主要是在控制整個版面位置的配置。

CSS命名注意事項:
  1. 請使用小寫英文。
  2. 複合式名稱請用底線區隔,但注意不要和現有的名字衝突。例:homenews_title
  3. 盡量不縮寫,除非一看就明白的單詞。
Layout.css
區塊名稱 CSS命名 說                                  明 必要
外套 #wrap 即網頁範圍,負責將所有元件都包起來不亂跑,寬度請設定為960px。
(清除) .clearfix 排版用。用來清除float。數值如下:

.clearfix { clear: both; display: block;  overflow: hidden;  visibility: hidden;  width: 0;  height: 0;}

頁 首 #header 網頁頁首。視設計需要選用。
LOGO #logo 公司LOGO。

圖檔命名:logo_bg.png

網頁banner #banner 網頁的廣告橫幅。
廣告區塊 #ad 廣告輪播區塊。
整個頁面 #content
頁 尾 #footer2 因為footer這個命名已被最下方的導覽列(新雙贏計劃)所使用,如果頁面有頁尾的設計,在命名時要特別注意。</span>

如果有此區塊,通常#copyright會包含在這個DIV裡面。

主導覽列 #mainNav 主要按鈕選單。

【圖檔命名】一般:icon_bg.png 滑入:icon_bg2.png

次導航列 #subnav 若畫面有做產品目錄快速連結,該區塊請用此命名。
頂導覽 #topnav 固定按鈕連結。(回首頁、聯絡方法、客服系統等)
側邊導覽 #sidebar 依各樣板需求選用。
左導覽 #leftsideBar 依各樣板需求選用。
右導覽 #rightsideBar 依各樣板需求選用。
內容區塊 #main 網頁內容區塊。
標題 .title 網頁標題。

圖檔命名:title_bg.png

版權宣告 #copyright 版權宣告區塊。
分享列 #share 分享列的
區塊請將id設為share。以下是各社群class的命名規則:div.share_facebook , div.share_plurk , div.share_twitter , div.share_google
標 籤 #label
側邊導覽圖示 #sidebarIcon
搜尋 #search 站內搜索區塊。

文字方塊和送出按鈕無法對齊的解決方式:將兩個物件的行高為一樣數字。

登入 #login 會員登入列。
入口首頁版面元素
最新消息 #news 最新消息的<ul>區塊請將id設為#news。

每一則消息的html:<li><span>日期</span>消息標題</li>

廣告輪播 #ad 廣告輪播區塊。
推薦商品 #hotProduct 會員登入列。
圖形跑馬燈 #picRun
討論區 #forum 討論區的<ul>區塊請將id設為#forum。

每一則消息的html:<li><span>日期</span>討論標題</li>

影 音 #video 放置影片的區塊,記得要設定overflow: hidden來限制區塊範圍。
Q&A

#qa
站內搜尋 #search 站內搜索區塊。

文字方塊和送出按鈕無法對齊的解決方式:將兩個物件的行高為一樣數字。

簡介區塊 #intro 放置簡介的區塊,記得要設定overflow: hidden來限制區塊範圍。

五、如何置入取代字串

(一)取代字串規則說明

1.樣版取代字串說明

樣版取代字串說明
名稱 取代字串 放置位置 說明 必要
<base href={{$template_dir}}>
</html>前




{{$html_title}}
{{$keyword}}
{{$default_css}}
{{$css}}
{{$js}}
LOGO
{{if $company_logo }}
<img src={{$company_logo}}>{{else}}
{{$company_title}}{{/if}}
#LOGO區塊內 LOGO的取代字串。

圖檔命名:logo_bg.png

標題
{{$main_title}}
.title裡 網頁主標題。

圖檔命名:title_bg.png

功能按鈕

(橫式)

{{section name=link loop=$title}}
<li><a href="{{$url[link]}}" 
{{$ext[link]}} target="{{$target[link]}}">
{{$title[link]}}</a></li>
{{/section}}
#mainnav區塊的

<ul>內

主要的功能按鈕

每個按鈕請用<li>標籤包起來, 然後放在<ul>標籤內。 圖檔命名:一般:icon_bg.png 滑入:icon_bg2.png

功能按鈕

(直式)

{{if $block1 ne ''}}<li>{{$block1}}</li>{{/if}}
       {{section name=link loop=$title}}
<li><a href="{{$url[link]}}"
 {{$ext[link]}} target="{{$target[link]}}">
{{$title[link]}}</a></li>
{{/section}}
{{if $block2 ne ''}}<li>{{$block2}}</li>{{/if}}
內容
{{$main}}
#main區塊內 主要網頁內容。

此區塊的CSS請記得設定超出區域隱藏 (overflow:hidden),以免破版。

版權宣告
{{$copyright}}
#copyright區塊內 版權宣告
頁尾導覽列
{{$js2}}
</body> 的上一行 新雙贏計畫狀態列


2.客製化首頁取代字串說明

首頁取代字串說明
名稱 取代字串 放置位置 字串說明
<!--BASE-->
 <head> 的下一行
一定要加的取代字串,請加在 <head> 下一行
網頁標題
{{TITLE}}
 <title></title>標籤內的下一行
首頁的網頁標題
相關keyword和description
{{MODULE_LINK}}
 <title>的下方
活動按鈕的文字連結
{{KEYWORD}}
<body>內要出現的地方
所有設定為顯示的功能名稱及連結
活動按鈕
{{BUTTON}}
#mainnav區塊內
*跟樣版一樣的按鈕。
  • 到「後台首頁 > 系統資料設定 > 首頁客製化設定 > 首頁功能按鈕設定」設定直式或橫式按鈕,以及按鈕個數。
版權宣告
{{COPYRIGHT}}
#copyright區塊內
版面設定中的「頁尾內容」
頁尾導覽列
{{JS2}}
</body> 的上一行
首頁推薦商品
{{SPECIAL_PRODUCT}}
推薦商品要出現的地方
(#hotProduct區塊內)
先把單筆資料都在DW裡排好,再貼(<li>整串)到「後台首頁 > 系統資料設定 > 首頁客製化設定 > 首頁推薦商品管理」進行設定。設定完成後將產生的字串貼回index.html裡。

{PIC} - 表示產品圖; {URL} - 表示產品的路徑; {TITLE} - 表示產品標題; {INTRO} - 表示產品的簡介; {PRICE} - 表示產品的價錢。如果每筆資料有2個產品,取代字串需要用 {PIC1}、{PIC2},需要加上產品個數

首頁最新消息
{{NEWS1}}
 最新消息要出現的地方
(#news區塊內)
先把單筆資料都在DW裡排好,再貼(<li>整串)到「後台首頁 > 系統資料設定 > 首頁客製化設定 > 最新消息管理」進行設定。設定完成後將產生的字串貼回index.html裡。

{TITLE} - 訊息的標題; {DATE} - 訊息的時間; {LINK} - 訊息的連結路徑

首頁公司簡介
{{INTRO1}}
{{INTRO2}}
......
公司簡介要出現的地方
(#intro區塊內)
到「後台首頁 > 系統資料設定 > 首頁客製化設定 > 首頁簡介」進行設定後,再將產生的
{{INTRO1}}
字串貼回index.html裡。

{TEXT} - 代表簡介的內容

廣告輪播
{ONLINE_AD_數字}
廣告輪播要出現的地方
(#ad區塊內)
到「後台首頁 > 系統資料設定 > 線上廣告輪播 >點擊新增資料後,設定標題、選用畫面(選*960 X 225)之後在相關設定自行輪入自己設定的寬高,並複製css調整廣告輪播則數的點點。
首頁RSS
{RSS1}
......
 RSS要出現的地方
*適用範圍:QA功能、有RSS的站。
  • 到「後台首頁 > 系統資料設定 > 首頁客製化設定 >首頁 rss 管理」進行設定後,再將產生的 {RSS1} 字串貼回index.html裡。(若是用QA的RSS,記得要去QA的設定裡把RSS打開)

{TITLE}:表示標題 ; {LINK}: 表示連結 ;{TEXT} : 表示文字內容

首頁圖形跑馬燈
{{PIC_RUN}}
#picRun區塊內
資料內容設定請到:「後台首頁 > 系統資料設定 > 首頁客製化設定 > 最新消息管理」。

(二)樣版頁面資料建立與必備檔案

樣板手冊007.png樣板壓縮包 樣板手冊007.pngcss style.css - 樣版頁面配色
layout.css - 樣版版面排版
樣板手冊007.png images Member_join.jpg - 加入會員圖(250*300px
樣板手冊007.png zh-TW 樣板手冊007.png css style.css
layout.css
樣板手冊007.png image 和上一層images同
temp.htm
temp.gif -樣板縮圖,寬度430px
temps.gif -樣板縮圖,寬度180px
樣板手冊007.pngen
樣板手冊007.png css style.css
layout.css
image 和上一層images同
temp.htm
temp.gif -樣板縮圖,寬度430px
temps.gif -樣板縮圖,寬度180px

default.htm - 樣版HTML
epaper01.htm - 電子報頁面
newsContentWindow.htm - 開新視窗頁面

(三)小圖示的替換

必備的圖檔(有文字的圖,分中文版與英文版兩組):可以將下列的圖檔置換為您所設計的圖檔,只要檔名不變都可以做置換的動作。

樣板手冊008.jpg


必備的圖檔(小圖示、共用的圖檔):可以將下列的圖檔置換為您所設計的圖檔,只要檔名不變都可以做置換的動作。

樣板手冊009.jpg

(四)CSS版面配色標籤檔說明 (檔名 style.css)

標籤名

需套用的地方

使用說明

body

每頁

 

p

 

img

 

td

一般的文字設定 ( table 排版會用到)

a

超連結顏色

a:hover

超連結時的顏色

#smartweb_main

內容區塊的設定

.smartweb_copyright

版權宣告區塊

版權宣告一般文字設定

.smartweb_copyright a

版權宣告一般連結設定

.smartweb_copyright a:hover

版權宣告連結滑入

.input

 

文字輸入框

.select

 

下拉選單

.button

 

文字按鈕 - 目前主要是會員的註冊表格的按鈕

.list_table

列表式的表格

列表式的表格

.list_table caption

列表式的表格 - 表頭

.list_table th

列表式的表格 - 標題

.list_table td

列表式的表格 - 每一格

.list_table td.left_field

列表式的表格 - 靠右的格子

.list_table .tr1

列表式的表格 - 單數行

.list_table .tr2

列表式的表格 - 偶數行

.list_table_bottom

列表式的表格 - 底下區塊

.category_list

文字式目錄列表

(產品型錄、公司簡介分段、問題解答分段 文字式目錄列表)

 

文字式目錄列表

.category_list a

其他按鈕的顏色

.category_list a:hover

滑鼠移到按鈕的顏色

.category_list a.current

所在按鈕的顏色

聯絡方法

.contact_title

contactShow.htm

標題

.contact_text

內容文字

討論區

.discuss_border

discussCatalog.htm

discussContent.htm

discussPost.htm

discussTitle.htm

外框顏色

.discuss_title_back

標題欄位底色

.discuss_col_1

主題列表底色一

.discuss_col_2

主題列表底色二

.discuss_title

標題文字

.discuss_text

內文文字

.discuss_group

討論群組文字

.discuss_name

發表者稱謂文字

.discuss_ip

發表者來源IP文字

.discuss_repost

回應欄位說明文字

.discuss_reply

討論區版主回覆內容區塊

.discuss_reply .replyer

討論區版主姓名&回覆、時間

.discuss_reply .text

討論區版主回覆內容 - 文字

電子報

.epaper_border

epaper01.htm

epaperList.htm

外框顏色

.epaper_title_back

標題欄位底色

.epaper_col_1

主題列表底色一

.epaper_col_2

主題列表底色二

.epaper_title

標題文字

.epaper_text

內文文字

問答集

.faq_title

faqBlock.htm

faqContent.htm

faqList.htm

標題文字

.faq_text

內文文字

.faq_file

檔案下載文字

.faq_time

發佈時間文字

.faq_list_block

問題解答列表的區塊,可以在這裏加背景圖、訂預設高度等等

各種簡介

.intro_text

introBlock.htm

introContent.htm

內文文字

訪客留言

.guestbook_name

guestbook.htm

guestbookPost.htm

發表者稱謂文字

.guestbook_ip

發表者來源IP文字

.guestbook_text

內文文字

.guestbook_boss

站長稱謂文字

.guestbook_boss_text

站長回應文字

.guestbook_post

欄位標題

相關連結

.link_group

link.htm

類別文字

.link_title

分類主題文字

.link_text

內文文字

最新消息

.news_date

newsContent.htm

newsContentWindow.htm

newsList.htm

發佈日期文字

.news_title

主題文字

.news_text

內文文字

.news_file

檔案下載文字

網路相本

.album_name

photoAlbumList.htm

photoPicList.htm

photoPicShow.htm

相本名稱文字

.album_pic_name

照片名稱文字

.album_info

點閱資訊文字

.album_nav

導覽列文字

.album_number

照片數目文字

.album_text

內文文字

.album_pic_block

網路相本的大張照片外面的框

.album_pic

網路相本的大張照片

產品型錄

.product_title

productBlock.htm

productCatalog.htm

productContent.htm

productList.htm

productShow.htm

列表時的標題文字

.product_text

列表時的簡介文字

.product_price_block

列表放價錢的區塊

.product_price

列表時的價錢標題(建議售價)

.product_normal_price

列表時的本站售價的價錢

.product_member_price

列表時的會員價的價錢

.smartweb_product

列表時的米幣商品價錢區塊

.smartweb_product_price

列表時的米幣商品價錢區塊米幣價的價錢

.smartweb_product_memo

列表時的米幣商品價錢區塊的其他註解文字

.product_more

列表時的[我有興趣]文字

.site_location

產品型錄導覽列

包含沒有連結時的文字設定

.site_location a

一般連結

.site_location a:hover

連結滑入

.product_quick_search

產品快搜

 

.product_quick_search td

 

.product_quick_search td select

 

#product_order_by ul

產品排序

主要區塊

#product_order_by li

每一個選

#product_order_by li a

每一個選項的連結

#product_order_by li a.current_desc

選中的選項,反向排序

#product_order_by li a.current_asc

選中的選項,正向排序

#product_tab ul

產品詳細的分頁

 

#product_tab ul li

 

#product_tab ul li a

每一個分頁區塊的連結

#product_tab ul li a:hover

每一個分頁區塊的連結 - 滑入

#product_tab ul li a.on

每一個分頁區塊的連結

.product_tab_content

放內容的區塊

客服系統

.service_form

service.htm

欄位標題

.service_text

內文文字

#service_main

客服系統區塊的寬度

民意調查

.vote_topic

voteHistory.htm

voteList.htm

voteQuestion.htm

voteResult.htm

主題文字

.vote_text

內文文字

.vote_date

票選期間文字

.vote_border

外框顏色

.vote_bg

背景顏色區塊

.vote_title_bg

票選結果主題背景色

.vote_title

票選結果主題文字

民意調查

.vote_topic

 

主題文字

.vote_text

內文文字

.vote_date

票選期間文字

.vote_border

外框顏色

.vote_bg

背景顏色區塊

.vote_title_bg

票選結果主題背景色

.vote_title

票選結果主題文字

.vote_item

照片票選功能

 

.vote_item td

 

.vote_item .item_title

 

.vote_item .item_desc

 

.vote_item .item_hot

 

.pic_border

 

hr.vote

 

購物車列表

.cart_list

 

購物車列表

.cart_list .head

列表標題

.cart_list .head td

標題的文字

.cart_col_1

列表單數行

.cart_col_2

列表偶數行

.cart_list .cart_col_amount

總價區塊背景

.cart_list .cart_col_amount td

總價區塊的文字

.cart_list .cart_event_bg td

活動區塊

.cart_list #total_price

現金總價的文字

.cart_list .cart_mibi_number_total

購物車列表 - 米幣總價的文字

.cart_list .cart_bottom td

底下的文字說明區塊

.cart_block

購物流程中,會員資料、收件人資料、付款方式…等等區塊的設定

 

.cart_block td

購物流程中,會員資料、收件人資料、付款方式…等等區塊的文字設定

.cart_block caption

購物流程中,會員資料、收件人資料、付款方式…等等區塊的設定

.cart_price

總金額的現金價與米幣

.member_base td

 

.bottom_dash

 

購物流程中,每個付款方式中間的分隔線

.member_select

購物車要結帳時,選擇會員、非會員、註冊會員的區塊

 

.member_select ul

 

.member_select li

 

.member_select li a

 

會員專區的

#orderDetail

訂單詳細資料

 

#orderDetail .subtitle

 

#orderDetail .content

 

#orderDetail .content td

 

#serial_table

會員專區的序號列表

會員專區的序號列表

#serial_table caption

表格上面的說明

#serial_table th

表頭

#serial_table td

每一格

旁邊的標題列表

.title_side

旁邊的標題列表

(目前都沒用到)

 

.title_side .title_title

 

.title_side ul

 

.title_side li

 

.title_side a

 

.title_side .current

 

主選單的下拉選單

.submenu

 

選單外觀

.submenu_item

單一項目

.submenu_item a

連結

.submenu_item a:hover

滑入


六、樣版測試說明

(一)如何上傳樣版

1.樣版管理 > 檢查default.htm

這個動作會幫你檢查樣版一定要放的取代字串是否都有放上去,如果該放的沒有放,樣版就會運作不正常。

2.下載css檔案以及產生的html檔

檢查完default.htm的取代字串之後,如果有頁面要特別抓出來設計,可以勾選上面的頁面名稱,再按「下載」回dreamwaver編輯並進行網站css樣式的設定。

3.新增樣版

完成所有樣版的設計之後,接下來就要到樣版管理來新增一個樣版。 樣版管理 > 新增樣版 > 輸入樣版名稱 > 新增樣版

*注意:若你只是代切版而非樣板設計者,請不要自己新增樣版,要請作者去新增樣版再指定給你。

4.上傳樣版

完成新增的動作之後,再來要上傳樣版的檔案。 上傳前,請先將所有樣版的檔案壓縮成一個zip檔再做上傳的動作。

5.指定樣版及相關設定

設計的檔案上傳好了之後,再來要指定樣版和進行相關設定。 依序設定好「樣版管理者」、「樣版名稱」、「樣版按鈕排列方式」、「按鈕透明」、「樣版是否有計數器的取代字串」、「樣版是否有線上輪播的取代字串」,以及「指定樣版專屬客戶」。

*注意:如果按鈕是透明png,記得要設定,不然在ie6底下顯示會不正常。

6.設定預設值

再來請設定樣版「Logo標題字型」、「主選單的字型」、「每個單元的標題字型」。

(二)如何測試樣版

設定好樣版之後,接下來必定要測試樣版運作是否正常。在這之前,你的站必須先建置一些資料,才有辦法進行測試。其測試步驟如下:

1.套用樣版

測試樣版運作是否正常,css是不是都有設定到,該換的小圖是不是都有換到(尤其是「留言板板主的小圖」、和「加入會員的小圖」很容易被遺忘,記得要檢查)。

2.使用樣版預設值

檢視預設值的字型設定是否OK。

3.檢查破版
(1).檢查「主選單」和「內容區塊」的背景延伸
請測試樣版在以下四種狀況下,有沒有破版或看起來怪怪的:
A.按鈕少、內容少
B.按鈕少、內容多
C.按鈕多、內容少
D.按鈕多、內容多
(2).檢查「內容區塊」寬度的overflow:hidden(超過範圍隱藏)是否運作正常
A.準備一個很寬的表格,看內容區塊會不會被撐開。
B.準備超長連續的字母或數字,檢查版面會不會被撐開。
(如:aaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc123456789251354964112312321321321321321321…..)
如果會被撐開,#main的CSS請加上「強迫斷字」(word-break: break-all; word-wrap: break-word)的設定。

七、附件

(一)常見問題與解決方式

【破版】
Q1:內容區塊設定超出大小消失,裡面的表格還是超過設定的寬度範圍,造成破版。
A1: 超出範圍消失的「範圍」的定義是「實際物件大小」。實際物件大小=border + padding + width。例:寬為500px,左右padding設為10px,那麼實際的範圍大小就是500+10+10=520px。解決該破版問題,該元素又必須使用padding無法拿掉時,可在內容區塊再包一層div來限制內容範圍。
【上傳問題】
Q1:傳錯樣板
A1:不小心將其他樣板傳到目前更新的樣板,傳錯樣板後即使重新上傳正確的壓縮檔仍然會出現暫存與錯誤,此時的解決方式是將所有htm檔案重新存檔更新日期,再次上傳。
Q2:樣板有取代字串錯誤但重新上傳後仍失效
A2:由於先上傳錯誤樣板並且已經設定過樣板設定值,因此重新上傳後不會更新,需要重新上傳並再次設定送出資料後樣板才會有更新。
Q3:畫面空白
A3:可能是取代字串缺字,或是取代字串寫錯。

(二)製作樣板注意事項

1.搜尋

:系統目前只能使用”產品搜尋”,形式與外觀可以變化,語法請見商城搜尋語法;若是需要使用”全站搜尋”,僅能使用[google搜尋語法],注意該css不太好改,設計樣板時需將高度等考慮進去。

2.客製化首頁(index.htm)-需要請程式部開啟此項功能
A.客製化首頁無法判別會員登入登出語法。
B.無法製作會員登入區塊。
C.上傳檔案後要設定”首頁客製化設定”(按鈕、最新消息、簡介….)