自定模組:一個空白的html框架

Download Report

Transcript 自定模組:一個空白的html框架

基礎篇part.2 :
課程大綱
1.
連結模組:內外部頁面連結、下載選單的製作
2.
連結模組:選單與頁面的串聯
3.
自定模組:一個空白的html框架
4.
頁籤模組:多個不同的模組以頁籤的形式呈現
5.
複合模組:一次多欄的顯示
6.
帳號管理&密碼修改
ePage教育訓練
(基礎篇:part.2-3)
自定模組:
一個空白的html框架
講義編撰者:李嘉宇
(分機:1613)
主題三
主題三
自定模組:一個空白的html框架
簡而言之,就是一個空的框架
在空框架中可以擺出自興要顯示的物件
(在這空框架中插入圖片、籤入影片、自製Jq或是flash動畫…等)
要將此自訂模組(空框架)呼叫至頁面中顯示
若要做出單獨區塊中的內容顯示時使用
(非公告模組:擁有著不同資訊)
主題三
將此自訂模組(空框架)呼叫至頁面中顯示
自定模組的概念圖
插入頁面(ex.首頁)
自定模組
Pic.1
Youtobe
影片
文字
主題三
自定模組操作的位置
在後台主選單中選擇 模組管理 -> 頁籤模組
主題三
顯示樣式 :若設為跑馬燈樣式
就可調整模組高度與移動速度
新增自定模組(1/2)
在自訂模組下
->按下新增自訂模組
->跳出新增自訂模組視窗
模組標題:
自訂模組於頁面中顯示的標題
(可隱藏)
生效日期:日期到時此自訂模組顯示就會生效
失效日期:日期到時此自訂模組顯示就會失效
資料有效否:資料是否於前台顯示
主題三
新增自定模組(2/2)
選擇HTML
說明:
在此編輯的html語法可能與網站前臺顯示有差異
因為爲了網站畫面美觀,已經設定css樣式。
在此編輯的html語法在前臺顯示時可能會被css樣式影響,
造成實際顯示效果與編輯預覽時不同
編輯完成後按下儲存
會跳回新增自訂模組畫面,按下新增並返回
可插入圖片、 flash、表單、文字…等等
按下HTML編輯/預覽
打開HTML編輯器
跳回自訂模組列表畫面,顯示新增成功
主題三
按下完整編輯鈕
修改自定模組
跳出自訂編輯模組視窗
修改完畢後
請記得儲存
主題三
單筆刪除
刪除(刪除多語)自定模組
多筆刪除
可勾選後、
刪除或
也可以單筆刪除
單筆刪除多語
刪除多語
全部勾選
選擇勾選
(複習)
刪除(刪除所在語系,其他語系保留)
刪除多語(刪除所有語系)
因為同樣的模組類型不能有重複的檔名
故若使用刪除而不是刪除多語,
日後若要新增同樣頁籤檔名的模組->會顯示資料已存在(無法新增)
主題三
自定模組使用的顯示(1/2)
EX.呼叫至首頁
頁面樣式 -> 首頁畫面設定
->在首頁畫面設定下按下模組列表
->開啟模組列表->選擇常用模組
->選擇自訂模組
->選擇要插入的自訂模組
->選擇要插入的欄位(左邊欄/中間欄)
(跟一般模組呼叫至頁面的步驟是一樣的)
呼叫自訂模組到指定的頁面
主題三
設定模組外觀,將邊框拿掉
自定模組使用的顯示(2/3)
EX.在頁面樣式中按下自訂模組的模組外觀鈕
模組外觀標籤中
選擇使用系統樣式(無外框)
主題三
設定模組外觀,將邊框拿掉
自定模組使用的顯示(3/3)
EX.在頁面樣式中按下自訂模組的模組外觀鈕
模組樣式標籤中
標題格式 選擇不顯示
儲存後方可
主題三
單純的放入圖片或裝飾版型
很多網站的方式放一張照面或動畫於首頁,
並且把模組外觀移除
寫入css做出自己要的選單或樣板
利用html呼叫css
製作出所要的版型與定位
真理大學總務處
http://ga00.epage.au.edu.tw
主題三
facebook
將相關可嵌入的工具呼叫至模組中使用
將相關工具的嵌入法寫在自訂模組中
(在google套件教學中會介紹如何嵌入)
youtobe
真理大學體育室
http://ga00.epage.au.edu.tw
單單放圖片
picasa
劉覽人數外掛
google calendar
主題三
可利用共享模組的功能將頁面開放至其他網站使用
將要分享的模組設為共享,
(ex.行政單位與教學單位的個別葉面都設為共享)
其他網頁到共享模組中把此二模組加入自己的共享中
就可以使用中心此兩二自訂模組呼叫於自己指定的頁面
詳細操作
ePage教育訓練應用篇:part.2-1(共享模組的使用:子母總網模組共享 )
真理大學電算中心
http://www.cc.au.edu.tw
主題三
1. 頁籤模組的概念與位置
2. 頁籤模組使用方式
3. 頁籤模組使用上的限制