如何使用 2023NCKURWD 版型 (for Rpage)

版型名稱：2023 NCKU RWD
適用對象：本校使用Rpage平臺之網頁，皆可使用。（可於Rpage後臺直接套用)
版型外觀：此版型可自行選擇有無Banner(大圖)

無Banner(大圖)

有Banner(大圖)

操作說明：

請先確定首頁要放置的內容：
- 導覽列: 頁首連結設定
- 主選單: 頁首連結設定(選單只能二層)
- Banner(大圖): 廣告模組
- 最新公告: 頁籤模組或公告模組
- 相關連結: 連結模組
- 其他內容: 須為模組, 任何模組皆可
- 頁尾資訊: 頁面底部
建置主要分類及資訊內容：
- 若原已使用＂資訊管理＂功能建妥所有分類及資訊內容，即可往下進行。
- 若是新建網站，請先利用＂資訊管理＂建置主要分類及資訊內容後，再往下進行。
建立導覽列：
- 頁面管理->頁首頁連結設定->新增鏈接分類: topnav (名稱及代碼固定), 相關設定如下圖示.
- 在這個連結分類中, 新增所需項目. 如: 1.網站導覽, 2.English, 3.成功大學.
建立主選單：
- 此版型使用 "頁首連結" 當主選單, 故先於頁首連結設定中, 建好主選單的項目連結. (所有分類及資訊內容仍於 "資訊管理" 中建置)
- 頁面管理->頁首頁連結設定->新增鏈接分類: mainmenu (名稱及代碼固定), 相關設定如下圖示.
- 在這個連結分類中, 開始建構主選單的大項及子項, 各項目直接連結至資訊管理裡的相關分類或資訊.(注意: 此版型的主選單, 僅能有二層)
Banner(大圖)設定：
- 若要使用Banner(大圖)，則請先建立廣告模組。此模組Banner建議為滿版，圖片寬度至少1920px，若要多張圖片輪播，建議高度相同，或寬／高比相同，才不會忽大忽小。
- 若不使用Banner(大圖)，則請跳過此步驟。
上傳本版型所需圖檔：
- 請下載此壓縮檔(不須解壓縮), 再上傳至您單位網站的文檔管理.(上傳時, 請選擇解壓縮)
- 此壓縮檔內含5個圖檔, 分別是此版型用的校徽logo, 及頁尾資訊的4個小圖示.

建立頭部：

新增一個頭部, 複製下面語法(記得選"HTML")

完整複製下列語法, 再修改以下:
1. 黃底部份, 請改成自己單位名稱.
2. 藍色文字部份, 請改成你所上傳校徽的網址(請用相對網址).
3. 若要放置Banner(大圖), 則須修改紅色文字部份, 找到所使用廣告模組的代碼，若不使用Banner(大圖), 則略過此步驟.

<div class="container head">
<div class="mlogo">
<h1>
<a href="/?Lang=zh-tw" title="國立成功大學計算機與網路中心">
<span class="logoPic"><img alt="成大校徽" src="/var/file/213/1213/img/2227/mlogo.png" /></span>
<span class="sitename">
<span class="mlogoCn">國立成功大學計算機與網路中心</span>
<span class="mlogoEn">Computer and Network Center, NCKU</span>
</span>
</a>
</h1>
</div>

<div class="mainmenu">%CustMenu_mainmenu%</div>
<div class="topnav">%CustMenu_topnav%</div>
</div>
</div>
</div>

$.hajaxOpenUrl("/app/index.php?Action=mobileloadmod&Type=mobileheadsch&Nbr=0", '#headsearch');

});
</script>

內容寬度: 設為"置中".
修改完儲存, 並插旗設為預設頭部.

建立底部：

新增一個底部, 複製下面語法(記得選"HTML")

完整複製下列語法, 再修改以下:
1. 黃底部份, 請改成自己單位名稱或相關資訊.
2. 藍字部份, 請依自己上傳的圖檔網址來修改(請用相對路徑).
3. 綠底部份, 請設自己單位需要的項目及連結, 數量不限.

</style>
<div class="foot">
<div class="mlogo col-md-4">
<a accesskey="B" href="#" title="下方功能區塊">:::</a>
<h1>
<a href="/?Lang=zh-tw" title="國立成功大學計算機與網路中心">
<span class="logoPic"><img alt="成大校徽" src="/var/file/213/1213/img/2227/mlogo.png" /></span>
<span class="sitename">
<span class="mlogoCn">成功大學計算機與網路中心</span>
<span class="mlogoEn">Computer & Network Center, NCKU</span>
</span> </a>
</h1>
</div>
</div>

<div class="address col-md-5">
<img alt="phone" height="15" src="/var/file/213/1213/img/4595/phone.png" width="15" />
 06-2757575 #61000(週一~五 8:00-17:00)<br />
<img alt="fax" height="15" src="/var/file/213/1213/img/4595/fax.png" width="15" />
 06-2368855<br />
<img alt="email" height="11" src="/var/file/213/1213/img/4595/envelope.png" width="15" />
 em61000@email.ncku.edu.tw<br />
<img alt="add" height="20" src="/var/file/213/1213/img/4595/map.png" width="15" />
 701台南市東區大學路1號(成功校區資訊大樓)</div>

<div class="links col-md-3">
<a href="/p/412-1213-29144.php?Lang=zh-tw">資通安全管理政策</a><br />
<a href="/p/404-1213-140791.php?Lang=zh-tw">網站資料開放宣告</a><br />
©2023 國立成功大學計算機及網路中心</div>
<script type="text/javascript">
$(document).ready(function(){

</script>

內容寬度: 設為"置中".
修改完儲存, 並插旗設為預設底部.

套用版型:
- 頁面管理->頁面樣式變更, 選定"2023 NCKU RWD"版型.(系統版型第25項)
- 修改後, 前臺立即可以瀏覽. 若無立即改變, 可能是瀏覽器暫存檔所致, 請用 "Ctrl+F5" 強制更新, 或使用其他瀏覽器瀏覽.
首頁畫面設定：
- 頁面管理->首頁畫面設定->頁面佈局：設為一欄式, 模組寬度設為置中.
- 將頭部／底部設為預設(不要使用系統頭部)，再將首頁想呈現的其他模組內容加入, 並適當地調整模組外觀即可.
- 本版型有7個模組外觀, 其中第6個只適用於頁籤模組. 最後更新日期模組, 適用第7個外觀.
預設頁面設定：
- 頁面管理->預設頁面設定->頁面佈局：各類預設頁面設定, 皆改為一欄式, 模組寬度設為置中.
- 將頭部／底部設為預設(不要使用系統頭部).
- 若有分類或資訊使用個別頁面設定, 則須逐項修改設定, 或套用預設值.

中文版做完後, 將記得修改英文版~~

英文版頭部語法：

<div class="container head">
<div class="mlogo">
<h1>
<a href="/?Lang=en" title="NCKU Cmputer and Network Center">
<span class="logoPic"><img alt="NCKU Logo" src="/var/file/213/1213/img/2227/mlogo.png" /></span>
<span class="sitename">
<span class="mlogoEn">National Cheng Kung University</span>
<span class="mlogoEn"><strong><span style="font-size:130%;">Computer and Network Center</span></strong></span>
</span>
</a>
</h1>
</div>

<div class="mainmenu">%CustMenu_mainmenu%</div>
<div class="topnav">%CustMenu_topnav%</div>
</div>
</div>
</div>

<div id="banner"></div>
<script>
$(document).ready(function () {
$.hajaxOpenUrl("/app/index.php?Action=mobileloadmod&Type=mobile_sz_mstr&Nbr=0", '#banner');
$.hajaxOpenUrl("/app/index.php?Action=mobileloadmod&Type=mobileheadsch&Nbr=0", '#headsearch');

});
</script>

英文版底部語法：

<div class="foot">
<div class="mlogo col-md-4">
<a accesskey="B" href="#" title="下方功能區塊">:::</a>
<h1><a href="/?Lang=en" title="NCKU Computer and Network Center">
<span class="logoPic"><img src="/var/file/213/1213/img/2227/mlogo.png" alt="NCKU Logo" /></span>
<span class="sitename">
<span class="mlogoCn">NCKU</span>
<span class="mlogoEn">Computer and Network Center</span>
</span>
</a></h1>
</div>
</div>

<div class="address col-md-4">
<img alt="phone" height="15" src="/var/file/213/1213/img/4595/phone.png" width="15" />
 06-2757575 #61000(Weekday 8:00-17:00)<br />
<img alt="fax" height="15" src="/var/file/213/1213/img/4595/fax.png" width="15" />
 06-2368855<br />
<img alt="email" height="11" src="/var/file/213/1213/img/4595/envelope.png" width="15" />
 em61000@email.ncku.edu.tw<br />
<img alt="add" height="20" src="/var/file/213/1213/img/4595/map.png" width="15" />
 No.1, University Road, Tainan City 701, Taiwan (R.O.C)</div>

<div class="links col-md-4">
<a href="/p/412-1213-17354.php?Lang=en">Information Security Policy</a><br />
<a href="/p/404-1213-140791.php?Lang=en">Website Open Information Announcement</a><br />
©2023 Computer and Network Center
</div>
<script type="text/javascript">
$(document).ready(function(){

</script>

瀏覽數:

加到我的最愛