基礎篇 part.3 ：課程大綱

1. 頁面樣式變更：更換不同的版型

2. 首頁連結設定：橫幅下拉式選單

3. 廣告模組：網頁頭部的變化

4. 選單模組：除了主選單的選單製作

5. 文檔系統：檔案總管的概念

頁面樣式變更：更換不同的版型

ePage 教育訓練

( 基礎篇： part.3-1)

講義編撰者：李嘉宇( 分機： 1613)

主題一

頁面樣式變更：更換不同的版型

更換不同的版型

頁面樣式變更操作

內建樣式款式與使用注意事項

主題一

頁面樣式變更：更換不同的版型更換不同的版型

頁面樣式的變更中的版型為系統內定

版型的樣式與組數為系統內定，故若要做出自我風格的版型，就須自行撰寫

每個版型的寬度和間距都內設值

故選擇不同的版型其頁面中模組顯示定位點、文字、模組外觀都會一選擇版型不同而不同

• 照範本的 css標籤做整個版型• 利用頁首、頁尾、自訂模組與自訂模組外觀做出局部的版型設定

主題一

頁面樣式變更：更換不同的版型更換不同的版型

頁面樣式的變更的位置在後台選擇『頁面樣式』 -> 『頁面樣式變更』開啟系統版型選單 (勾選選擇 )

主題一

頁面樣式變更：更換不同的版型頁面樣式變更操作

頁面樣式的操作：修改版型 (1/2)

前台顯示

後台版型選項會停留在前台所顯示的版型上

後台顯示

主題一

頁面樣式變更：更換不同的版型頁面樣式變更操作

頁面樣式的操作：修改版型 (2/2)

前台顯示

更改選擇的版型併案下儲存，後台頁面就會出現『操作成功』提示後台顯示

在後台的右上按下『網站首頁』前台的版型就會變成後臺所選擇的版型

主題一

頁面樣式變更：更換不同的版型頁面樣式變更操作

新增自訂版型選擇新增自訂版型選項，跳出 新增自訂版型設定視窗

1.請下載自定樣式幫助手冊,根據幫助說明 ,制作屬於您自己的版型     (可以參考此樣式範例)

2.版型的外層目錄爲  style ,      必須包含  style.css , small.png, large.png     style.css 爲樣式設定檔案     small.png 爲版型縮略小圖     large.png 爲版型大圖

3.完成後 ,將  style 目錄壓縮成一個  zip 檔 . 

4.上傳製作好的  zip 檔 . P.S. 新增自訂版型為進階功能，日後章節補充( 需要會寫 CSS 語法與美工版型製

作 )

主題一

頁面樣式變更：更換不同的版型頁面樣式變更操作

樣式設定

後台顯示

選擇 樣式設定 後，跳出 樣式設定 視窗

此功能需要與 頁面樣式 中

P.S. 新增自訂版型為進階功能，日後章節補充( 需要會寫 CSS 語法與美工版型製

作 )

主題一

頁面樣式變更：更換不同的版型內建樣式款式與使用注意事項

內建樣式款式 part.1. 系列款式

有些模板的款式為相同，只有配色相異

相同款

相同款

p.s. 相同系列款式，以同樣外框顏色標示

相同款

相同款 相同款

相同款

有些則為單獨款式(內定 )版型寬度不同、文字顏色不同、模組外觀不同、模組與模組、頁首 logo、廣告…等定位點不同頁尾不同、背景不同…等

主題一

頁面樣式變更：更換不同的版型內建樣式款式與使用注意事項

內建樣式款式 part.2. 獨立款式

有些模板的款式為相同，只有配色相異

有些則為單獨款式(內定 )版型寬度不同、文字顏色不同、模組與模組、頁首 logo、廣告…等定位點不同頁尾不同、背景不同…等

p.s. 框選的版型為獨立款

主題一

頁面樣式變更：更換不同的版型內建樣式款式與使用注意事項

內建樣式款式 part.3. 校內單位風格款式

有些模板的款式為相同，只有配色相異

有些則為單獨款式(內定 )版型寬度不同、文字顏色不同、模組外觀不同、模組與模組、頁首 logo、廣告…等定位點不同頁尾不同、背景不同…等

p.s. 此四種版行為廠商自製的版型

主題一

頁面樣式變更：更換不同的版型內建樣式款式與使用注意事項

頁面樣式變更使用注意事項

請注意更換版型內設的寬度、定位點、模組外觀的不同

會影響資料與物件擺放的位置、與圖片的寬度若相關物件或圖片超過所在內定的寬度，都會呈現暴版的狀況

模組外觀的設定儘量以搭為主題來選擇

模組外觀的內定有三、請一版型整體搭配來選擇若要自製或上傳圖片也請顧慮到所在的欄位寬度 (超過預設，就會呈現超過版面 (暴版 )的 狀況 )

單元複習

1. 更換不同的版型

2. 頁面樣式變更操作

3. 內建樣式款式與使用注意事項

主題一

頁面樣式變更：更換不同的版型