研習講義

(1)

環球科技大學圖書資訊處資訊安全維護組 1

1 Bootstrap 框架

1.1 為什麼選 Bootstrap

網站可以透過 Bootstrap 框架，透過 CSS 媒體查詢（Media Query）來處理手機平板到桌上電腦等各種平台

1.2 那些網站是採用 Bootstrap 框架進行網站建置

1.2.1 數以百萬的網站都是基於 Bootstrap 建置：

Bootstrap Expo http://expo.getbootstrap.com

Bootstrap 優站精選 http://expo.bootcss.com (主要蒐集大陸地區) 1.2.2 環球科技大學行政單位網頁採行 Bootstrap 框架如下：

校長室 http://mail.twu.edu.tw/~president/

校務研究發展室 http://mail.twu.edu.tw/~oird/

招生策進中心 http://mail.twu.edu.tw/~oaaad/

英文網站 http://international.twu.edu.tw/

電子報 http://enews.twu.edu.tw/

圖書資訊處 http://olis.twu.edu.tw/

(2)

1.3 新版網頁範本

下載之後，解壓縮至任意資料夾可看到以下結構，看起來如下：

內包含最基本的 Bootstrap 3 檔案結構，編譯好的 CSS 和 JS (bootstrap.*)和最佳化的 CSS 和 JS (bootstrap.min.*)

目錄 comrcd 校外無法存取目錄名稱(非必要) 目錄 connections 資料夾內包含網頁基本設定

(config_inc.php)

目錄 css 網頁所需的 CSS (請單獨變更 custom.css 其餘 css 不需要處理)

目錄 files 放置網頁讓使用者下載的資料夾(可以依

照需求更改目錄名稱) 目錄 fonts 包括兩組 Fontawesome 及

Glyphicons 圖標字型

目錄 images 放置網頁所需的圖案(除了包在 css ) 目錄 img 放置 css 設定時需要嵌入的圖案 目錄 include 資料夾內包含網頁結構分割檔案

目錄 js 網頁所需的 JS(不需要處理)

php 檔 index.php 首頁 php 檔 profile.php 業務簡介 php 檔 member.php 人員編制 php 檔 downloads.php 下載專區 php 檔 laws.php 相關法規 php 檔 link.php 相關連結 php 檔 faq.php 問與答 Q&A

(3)

版型介紹

由上至下分別為 1.快速導覽列及導覽列 (請看

header_meun.php) 2.首頁幻燈片照片輪播 3.麵包屑(現在位置)及首 頁放置訊息等等(請自行 增加)

4.社群(請看

footer_social.php) 5.頁尾(請看

footer_copyright.php) 2 版型說明

2.1 index.php 首頁

(4)

版型介紹

header_meun.php) 2.內頁圖片及口號(請看 header_img.php) 3.麵包屑(現在位置)及內 容區(請看

about_links.php+othe r_links.php)

4.社群(請看

footer_copyright.php) 2.2 contact.php 聯絡我們

(5)

版型介紹

header_meun.php) 2.內頁圖片及口號(請看 header_img.php) 3.麵包屑(現在位置)及內 容區(請看

about_links.php+othe r_links.php)

4.社群(請看

footer_copyright.php 2.3 sitemap.php 網站導覽

(6)

版型介紹

1.快速導覽列及導覽列 (請看

header_meun.php) 2.內頁圖片及口號(請看 header_img.php) 3.麵包屑(現在位置)及內 容區

4.社群(請看

footer_copyright.php) 2.4 members.php 人員編制

(7)

版型介紹

4.社群(請看

footer_copyright.php)

配置相同

laws.php 相關法規 links.php 相關連結 2.5 downloads.php 下載專區

(8)

版型介紹

4.社群(請看

footer_copyright.php) 2.6 faq.php Q&A

(9)

3 php 程式碼

3.1 目錄 connections

3.1.1 config_inc.php

<?php

//metadata 設定

$ACTIVITYNAME ="環球科技大學+單位名稱";

$WEBNAME ="單位名稱";

$AUTHOR_EN = "Information Security Maintenance";

$COPYRIGHT = "".$now_years." © ";

$KEYWORDS = "環球科技大學,單位名稱";

$DESCRIPTION = "環球科技大學+單位名稱";

$CONTACT_MAIL="test@twu.edu.tw";//單位或管理者電子郵件

$CONTACT_TEL="05-5370988 分機 ABCD ~ ABCD ";//單位連絡電話或專線 $CONTACT_PHONE="05-5370989";//單位傳真或學校傳真

$PROPERTY_SITE_NAME="環球科技大學+單位名稱";

?>

主要設定 metadata 資訊及頁尾資訊 (如粗體字) 3.2 目錄 include

3.2.1 目錄 include 下檔案說明

為了避免每頁均需要修改將常用的框架獨立出來以利維護

header_meun.php 產生快速導覽列及導覽列 header_img.php 內頁圖片及口號

footer_social.php 社群 footer_copyright.php 頁尾

other_links.php 其他(網站導覽聯絡我們) 左邊導覽列

(10)

3.2.2 header_meun.php 產生快速導覽列及導覽列第一部分為無障礙網頁替代文字及回到頁首<div>

第二部分為 17-21 列為無障礙網頁略過選單直接到文章內容， 15-32 列為快速導覽列

第三部分為 33-70 列為導覽列

(11)

第 1 層選單結構說明:每一個選單都是由一組<li>…</li>組成

<li><a href="hotnews.php" title="最新訊息" tabindex="121"><i class="fa fa-eye"

aria-hidden="true" alt=" "></i> 最新訊息 </a>

</li>

…

</ul>

第 2 層選單結構說明:每一個選單都是由一組<li>…</li>組成

<a href="profile.php" title="業務簡介" tabindex="131" class="dropdown-toggle"

data-toggle="dropdown" role="button" aria-haspopup="true" aria-

expanded="false"><i class="fa fa-info-circle" aria-hidden="true" alt="

"></i> 業務簡介 <span class="caret"></span></a>

</ul>

</li>

3.2.3 header_img.php 內頁圖片及口號

<h1>立足台灣放眼國際</h1>

<p>存誠務實五育並重愛在環球</p>

</div>

(12)

</div>

</section>

修改時僅需將<h1><h4><p>標籤內的文字進行調整

圖片如需變更請參閱 CSS (custom.css) 修改 ccs 內的 url 或是置換目錄內的圖片

.container-pageheader{

…

background-image: url(../img/setion_bg.jpg);

}

3.2.4 footer_social.php社群

Facebook twitter Instagram youtube

<h2 class="page-header"><i class="fa fa-link" aria-hidden="true"

alt=" "></i> 社群 / follow us </h2>

</div>

<li><a href="https://www.facebook.com/TWUniversity/" title="follow us Facebook(open new window)" target="_blank" tabindex="901">

<i class="fa fa-3x fa-facebook-square" title="follow us Facebook" aria-

hidden="true" alt=" "></i>

<span class="sr-only">follow us Facebook</span>

</a>

</li>

<li><a href="https://twitter.com/TWUCCIS" title="follow us twitter(open new window)" target="_blank" tabindex="902">

(13)

環球科技大學圖書資訊處資訊安全維護組 13 <i class="fa fa-3x fa-instagram" title="follow us instagram" aria-

hidden="true" alt=" "></i>

<span class="sr-only">follow us instagram</span>

</a>

</li>

<li>

<a href="https://www.youtube.com/results?search_query=致用高中" title="follow us youtube(open new window)" target="_blank" tabindex="903">

<i class="fa fa-3x fa-youtube-square" aria-hidden="true" title="follow us youtube" alt=" "></i>

<span class="sr-only">follow us youtube</span>

</a>

</li>

</ul>

</div>

每一組社群<li>…</li>組成(如follow us Facebook 底色區域)，進行複製或刪除時請留意

3.2.5 footer_copyright.php 頁尾

程式碼分 4 部分 footer 辦學理念(可修改文字)、footer 版權宣告(可修改文字)、第三部分誠正勤樸學以致用、第四部分 jQuery(不要修改)

//第一部分footer辦學理念(實際檔案內沒有這行註解)

<h2>環球新世界教育使命</h2>

<p>以「愛在環球：天生我才必有用」的信念，協助每一位學生開展自我探索的欲望、

培養學生「維生、互動、創造」的三大能力，以利學生與世界接軌、實現自我、服務社會。</p>

</div>

(14)

</section>

</div>

//第二部分footer版權宣告(實際檔案內沒有這行註解)

<div class="accesskey hidden-xs"><a accesskey="G" title="Website Disclaimer"

href="#" tabindex="981">:::</a></div>

</div>

<address><?php echo $COPYRIGHT?> <?php echo $ACTIVITYNAME?> All Rights Reserved.<BR>

<i class="fa fa-map" aria-hidden="true" alt=" "></i>&nbspADD:雲林縣斗六市嘉東里鎮南路1221 號<BR>

<i class="fa fa-envelope" aria-hidden="true" alt=" "></i>&nbspE-mail: <?php echo

$CONTACT_MAIL?> <i class="fa fa-phone" aria-hidden="true" alt=" "></i><abbr title="連絡電話 TEL">連絡電話:</abbr> <?php echo $CONTACT_TEL?> <i class="fa fa- fax" aria-hidden="true" alt=" "></i><abbr title="傳真 FAX">傳真: </abbr><?php echo

$CONTACT_PHONE?>

</address>

<span>

new media_line_me.LineButton({"pc":false,"lang":"zh-hant","type":"d"});

(15)

<!--<a href="http://www.handicap-

free.nat.gov.tw/Applications/Detail?category=20160712002427" target="_blank">

<img title="A+Accessible Logo" alt="Web Priority A Plus Accessibility

Approval(Open New Window)" src="images/aplus.jpg" complete="complete"/></a>-->

</div>

</footer>

//第三部分愛在環球創意樂活(實際檔案內沒有這行註解)

<<section class="section-bottom-height" id="section-note">

<h4 class="font-white">愛在環球創意樂活</h4>

</div></div>

</div>

</section>

//第四部分jQuery (實際檔案內沒有這行註解)

function font() {

…略請勿修改 }

$(function(){

(16)

$("#PageTop").click(function(){

…略請勿修改 });

});

</script>

地址電話等資訊

3.2.6 other_links.php 其他(網站導覽聯絡我們) 左邊導覽列

</div>

<a href="sitemap.php" title="網站導覽" tabindex="302" class="list-group-item<?php echo($path_parts[basename]=="sitemap.php")?" active":""?>"><i class="fa fa-

sitemap" aria-hidden="true" alt=" "></i> 網站導覽</a>

</ul>

</div>