版型修改教學三：用預設版型修改出你的「果妞妞生活坊」（2）
這是ecshoptalk的第三篇版型修改教學，目的在於讓您使用預設版型修改出乍看之下也很專業的版型。
對了，本文著作權所有，請勿任意轉載，本文只授權予ecshop.com, ecshoptalk.com 這兩個網域出現喔！
昨天改完了導覽列跟會員登入畫面，整個網站看起來就有精神多了（粉色系的比較有精神嘛），讓我們接著看果妞妞生活坊，眼尖的您一定會發現：他的「最新文章」是放在主畫面的左邊，而不是預設樣板的右上方，相對來說這也讓我們發現，預設樣板的flash好像太小了一點（跟果妞妞比較之後），請見下圖：
那麼應該怎麼做呢？首先我們要在管理介面當中，把最新文章從「標語區右側」移動到「主畫面左側」。
過程是：
(社群版)管理介面 -> 樣板管理 -> 樣板項目管理
(2.1.5社群版) 管理介面 -> 版型管理 -> 版型子項目管理
接著選擇版型：首頁版型，並且按下確定
然後往下找到「最新文章」，他旁邊會有一個下拉式方塊：
原先是設定在「標語區右側」，請選擇「主區域左側」，再按下確定即可。
這樣下來的結果是：
如果看預設的這張「最新文章」圖片不順眼的話，也可以順手換掉，
該圖片的路徑是 /themes/default/images/new_article.gif
用這張替換吧！
不過這樣子下來，我們會發現在flash動畫的右邊多了一大格空格：
這一次我們不只要修改css，還要修改版型的原始碼...
我們先從版型原始碼下手，首先請用網頁編輯軟體或純文字編輯軟體，
(我個人推薦DreamWeaver，因為ecshop的版型可以用dreameaver非常順利的編輯）
開啟 /themes/default/index.dwt
然後找到以下的部份：
其實我們只需要改一個數字：找到中間的377了嗎？（共出現三次）
請把這三個377 修改為 609 即可..
修改結果如下：
除了版型，我們也需要更改CSS，請打開 /themes/default/style.css，
並且找到以下的部份：
.cell-news {
background: url(images/news_bg.gif) repeat-x;
float: left;
width: 242px;
height: 165px;
}
把裡面的 242px 修改為 10px （因為我們剛剛把 flash 拉長了..呵呵）
請見示意圖：
原本
<------377-----><----242--->
改為
<--------609----------><-10->
所以這是結果：
.cell-news {
background: url(images/news_bg.gif) repeat-x;
float: left;
width: 10px;
height: 165px;
}
接著把 index.dwt 以及 style.css 存檔後上傳，我們就可以看到 flash部份的修改結果了。
這是今天的部份，明天將要說明大家應該是最需要的寬版頁面製作...
我想各位應該都被商品詳情頁面寬度不夠所困擾著吧？
明天就為各位說明這個部份囉！
感恩...
萬分感謝.
"把裡面的 242px 修改為 10px （因為我們剛剛把 flash 拉長了..呵呵）"
上面這點不太懂,拉長不是要把242加大嗎???
其實是縮小沒錯...
其實是縮小
我畫個示意圖：
原本
<------377-----><----242--->
改為
<--------609----------><-10->
這邊就只是比例在變動而已:)
再請問
了解,原來style.css是改剩餘尺寸而不是flash圖尺寸 ^_^
另問若導導覽列和登入已改為粉紅色且flash圖已拉大,但flash圖背景還是看的到藍底,請問要去那裡改呢??
這個要去把
這個要去把 themes/default 目錄下載回電腦，
接著開啟 index.dwt，
然後找到:
中間那串?????? 就是需要改的顏色...
請找出粉紅色的色碼，然後填入，
接著把 index.dwt 存檔後上傳到伺服器就行了。