樣板(Bootstrap框架)使用說明

Size: px

Start display at page:

Download "樣板(Bootstrap框架)使用說明"

冯岑
5 years ago
Views:

1 Bootstrap 框架 1.1 為什麼選 Bootstrap 網站可以透過 Bootstrap 框架, 透過 CSS 媒體查詢 (Media Query) 來處理手機平板到桌上電腦等各種平台 1.2 那些網站是採用 Bootstrap 框架進行網站建置 1.2.1 數以百萬的網站都是基於 Bootstrap 建置 : Bootstrap Expo http://expo.

1 1 Bootstrap 框架 1.1 為什麼選 Bootstrap 網站可以透過 Bootstrap 框架, 透過 CSS 媒體查詢 (Media Query) 來處理手機平板到桌上電腦等各種平台 1.2 那些網站是採用 Bootstrap 框架進行網站建置數以百萬的網站都是基於 Bootstrap 建置 : Bootstrap Expo Bootstrap 優站精選 ( 主要蒐集大陸地區 ) 環球科技大學行政單位網頁採行 Bootstrap 框架如下 : 校長室校務研究發展室招生策進中心英文網站電子報圖書資訊處環球科技大學圖書資訊處資訊安全維護組 1

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 php 檔 contact.php 聯絡我們 php 檔 sitemap.php 網站導覽環球科技大學圖書資訊處資訊安全維護組 2

3 2 版型說明 2.1 index.php 首頁版型介紹由上至下分別為 1. 快速導覽列及導覽列 ( 請看 header_meun.php) 2. 首頁幻燈片照片輪播 3. 麵包屑 ( 現在位置 ) 及首頁放置訊息等等 ( 請自行增加 ) 4. 社群 ( 請看 footer_social.php) 5. 頁尾 ( 請看 footer_copyright.php) 環球科技大學圖書資訊處資訊安全維護組 3

4 2.2 contact.php 聯絡我們版型介紹由上至下分別為 1. 快速導覽列及導覽列 ( 請看 header_meun.php) 2. 內頁圖片及口號 ( 請看 header_img.php) 3. 麵包屑 ( 現在位置 ) 及內容區 ( 請看 about_links.php+othe r_links.php) 4. 社群 ( 請看 footer_social.php) 5. 頁尾 ( 請看 footer_copyright.php) 環球科技大學圖書資訊處資訊安全維護組 4

5 2.3 sitemap.php 網站導覽版型介紹由上至下分別為 1. 快速導覽列及導覽列 ( 請看 header_meun.php) 2. 內頁圖片及口號 ( 請看 header_img.php) 3. 麵包屑 ( 現在位置 ) 及內容區 ( 請看 about_links.php+othe r_links.php) 4. 社群 ( 請看 footer_social.php) 5. 頁尾 ( 請看 footer_copyright.php 環球科技大學圖書資訊處資訊安全維護組 5

6 2.4 members.php 人員編制版型介紹 1. 快速導覽列及導覽列 ( 請看 header_meun.php) 2. 內頁圖片及口號 ( 請看 header_img.php) 3. 麵包屑 ( 現在位置 ) 及內容區 4. 社群 ( 請看 footer_social.php) 5. 頁尾 ( 請看 footer_copyright.php) 環球科技大學圖書資訊處資訊安全維護組 6

7 2.5 downloads.php 下載專區版型介紹 1. 快速導覽列及導覽列 ( 請看 header_meun.php) 2. 內頁圖片及口號 ( 請看 header_img.php) 3. 麵包屑 ( 現在位置 ) 及內容區 4. 社群 ( 請看 footer_social.php) 5. 頁尾 ( 請看 footer_copyright.php) 配置相同 laws.php 相關法規 links.php 相關連結環球科技大學圖書資訊處資訊安全維護組 7

8 2.6 faq.php Q&A 版型介紹 1. 快速導覽列及導覽列 ( 請看 header_meun.php) 2. 內頁圖片及口號 ( 請看 header_img.php) 3. 麵包屑 ( 現在位置 ) 及內容區 4. 社群 ( 請看 footer_social.php) 5. 頁尾 ( 請看 footer_copyright.php) 環球科技大學圖書資訊處資訊安全維護組 8

3 php 程式碼 3.1 目錄 connections 3.1.1 config_inc.php <?php //metadata 設定 $ACTIVITYNAME =" 環球科技大學 + 單位名稱 "; $WEBNAME =" 單位名稱 "; $AUTHOR_EN = "Information Security Maintenance"; $COPYRIGHT = "".$now_years.

9 3 php 程式碼 3.1 目錄 connections 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=" 分機 ABCD ~ ABCD ";// 單位連絡電話或專線 $CONTACT_PHONE=" ";// 單位傳真或學校傳真 $PROPERTY_SITE_NAME=" 環球科技大學 + 單位名稱 ";?> 主要設定 metadata 資訊及頁尾資訊 ( 如粗體字 ) 3.2 目錄 include 目錄 include 下檔案說明為了避免每頁均需要修改將常用的框架獨立出來以利維護 header_meun.php 產生快速導覽列及導覽列 header_img.php 內頁圖片及口號 footer_social.php 社群 footer_copyright.php 頁尾 other_links.php 其他 ( 網站導覽聯絡我們 ) 左邊導覽列環球科技大學圖書資訊處資訊安全維護組 9

10 3.2.2 header_meun.php 產生快速導覽列及導覽列第一部分為無障礙網頁替代文字及回到頁首 <div> 第二部分為列為無障礙網頁略過選單直接到文章內容, 列為快速導覽列第三部分為列為導覽列列為設置學校 logo 列為第 2 層選單環球科技大學圖書資訊處資訊安全維護組 10

11 第 1 層選單結構說明 : 每一個選單都是由一組 <li> </li> 組成 <ul class="nav navbar-nav navbar-right"> <li><a href="hotnews.php" title=" 最新訊息 " tabindex="121"><i class="fa fa-eye" aria-hidden="true" alt=" "></i> 最新訊息 </a> </li> </ul> 第 2 層選單結構說明 : 每一個選單都是由一組 <li> </li> 組成  <li class="dropdown"> <a href="profile.php" title=" 業務簡介 " tabindex="131" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" ariaexpanded="false"><i class="fa fa-info-circle" aria-hidden="true" alt=" "></i> 業務簡介 <span class="caret"></span></a> </li> <ul class="dropdown-menu"> <li><a href="profile.php" title=" 業務簡介 1"> 業務簡介 1</a></li> <li><a href="profile.php" title=" 業務簡介 1"> 業務簡介 2</a></li> </ul>  header_img.php 內頁圖片及口號 <section class="patched-section" id="section-header"> <div class="container-fluid container-pageheader"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1> 立足台灣放眼國際 </h1> <h4> 歡迎光臨 <?php echo $ACTIVITYNAME?></h4> <p> 存誠務實五育並重愛在環球 </p> 環球科技大學圖書資訊處資訊安全維護組 11

12 </section> 修改時僅需將 <h1><h4><p> 標籤內的文字進行調整圖片如需變更請參閱 CSS (custom.css) 修改 ccs 內的 url 或是置換目錄內的圖片.container-pageheader{ background-image: url(../img/setion_bg.jpg); } footer_social.php 社群 Facebook twitter Instagram youtube <div class="container-fluid container-bg"> <div class="container bg-white" id="section-share"> <div class="row"> <div class="col-lg-12"> <h2 class="page-header"><i class="fa fa-link" aria-hidden="true" alt=" "></i> 社群 / follow us </h2> <ul class="list-inline text-center">  <li><a href=" title="follow us Facebook(open new window)" target="_blank" tabindex="901"> <i class="fa fa-3x fa-facebook-square" title="follow us Facebook" ariahidden="true" alt=" "></i> <span class="sr-only">follow us Facebook</span> </a> </li>  <li><a href=" title="follow us twitter(open new window)" target="_blank" tabindex="902"> <i class="fa fa-3x fa-twitter-square" title="follow us twitter" ariahidden="true" alt=" "></i> <span class="sr-only">follow us twitter</span> </a> </li>  <li><a href=" title="follow us instagram(open new window)" target="_blank" tabindex="902"> 環球科技大學圖書資訊處資訊安全維護組 12

13 <i class="fa fa-3x fa-instagram" title="follow us instagram" ariahidden="true" alt=" "></i> <span class="sr-only">follow us instagram</span> </a> </li>  <li> <a href=" 致用高中 " 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> 每一組社群 <li> </li> 組成 ( 如 follow us Facebook 底色區域 ), 進行複製或刪除時請留意 footer_copyright.php 頁尾程式碼分 4 部分 footer 辦學理念 ( 可修改文字 ) footer 版權宣告 ( 可修改文字 ) 第三部分誠正勤樸學以致用第四部分 jquery( 不要修改 ) // 第一部分 footer 辦學理念 ( 實際檔案內沒有這行註解 ) <section class="patched-section" id="section-footer"> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2> 環球新世界教育使命 </h2> <p> 以愛在環球 : 天生我才必有用的信念, 協助每一位學生開展自我探索的欲望培養學生維生互動創造的三大能力, 以利學生與世界接軌實現自我服務社會 </p> 環球科技大學圖書資訊處資訊安全維護組 13

14 </section> // 第二部分 footer 版權宣告 ( 實際檔案內沒有這行註解 ) <div class="container-fluid footer_address" id="section-end"> <div class="container"> <div class="row"> <div class="col-md-4">  <div class="accesskey hidden-xs"><a accesskey="g" title="website Disclaimer" href="#" tabindex="981">:::</a> <h3><?php echo $WEBNAME?></h3>  <div class="col-md-7">  <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>&nbsp <?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 fafax" aria-hidden="true" alt=" "></i><abbr title=" 傳真 FAX"> 傳真 : </abbr><?php echo $CONTACT_PHONE?> </address> <span> <script type="text/javascript" src="//media.line.me/js/linebutton.js?v= " ></script> <script type="text/javascript"> new media_line_me.linebutton({"pc":false,"lang":"zh-hant","type":"d"}); </script> </span>  <div class="col-md-1">  環球科技大學圖書資訊處資訊安全維護組 14

15   </footer>  // 第三部分愛在環球創意樂活 ( 實際檔案內沒有這行註解 ) < <section class="section-bottom-height" id="section-note"> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h4 class="font-white"> 愛在環球創意樂活 </h4> </section> // 第四部分 jquery ( 實際檔案內沒有這行註解 )  <script src="js/jquery.js"></script>  <script src="js/bootstrap.min.js"></script>  <script src="js/bootstrap-dropdownhover.min.js"></script> <script>  function font() { 略請勿修改 }   $(function(){ 環球科技大學圖書資訊處資訊安全維護組 15

16 $("#PageTop").click(function(){ 略請勿修改 }); }); </script>  地址電話等資訊 other_links.php 其他 ( 網站導覽聯絡我們 ) 左邊導覽列 <div class="panel panel-default"> <div class="panel-heading panel-heading-custom"> <h3 class="panel-title"><i class="fa fa-bars" ariahidden="true" alt=" "></i> MENU <i class="fa fa-bars" ariahidden="true" alt=" "></i></h3> <ul class="list-group"> <a href="contact.php" title=" 聯絡我們 " tabindex="301" class="list-groupitem<?php echo($path_parts[basename]=="contact.php")?" active":""?>"><i class="fa fa-envelope" aria-hidden="true" alt=" "></i> 聯絡我們 </a> <a href="sitemap.php" title=" 網站導覽 " tabindex="302" class="list-group-item<?php echo($path_parts[basename]=="sitemap.php")?" active":""?>"><i class="fa fasitemap" aria-hidden="true" alt=" "></i> 網站導覽 </a> </ul> <div class="panel-footer panel-footer-custom"> 環球科技大學圖書資訊處資訊安全維護組 16

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05