網站開發技術講師 : 詹博文 HTML HTML5 CSS, CSS3 Less,Sass, Stylus BootStrap, Foundation,,grid System Kendo UI, jquery UI, EasyUI ASP,PHP,JSP,ASP.NET Ja

Size: px

Start display at page:

Download "網站開發技術講師 : 詹博文 HTML HTML5 CSS, CSS3 Less,Sass, Stylus BootStrap, Foundation,,grid System Kendo UI, jquery UI, EasyUI ASP,PHP,JSP,ASP.NET Ja"

句角姜
5 years ago
Views:

1 網站開發技術 HTML HTML5 CSS, CSS3 Less,Sass, Stylus BootStrap, Foundation,,grid System Kendo UI, jquery UI, EasyUI ASP,PHP,JSP,ASP.NET JavaScript Jquery Plugin Node JS JAVA, AJAX JSON, Linq,.NET, 連接資料庫技術 ACCESS, MySQL, Oracle, SQL Server( 資料庫 ) 前端程式後端程式資料庫程式

2 Responsive Web Design 研習

3 研習目標 1. 學習 dreamweaver 基本操作 2. 學習 html 與 css 基本用法 3. 學習 bootstrap 各種元件的設計 4. 學習網站版型設計 5. 學習響應式網頁的設計概念 6. 學習如何在網韻平台上, 建立自製的網站. 7. 學習如何利用網韻平台, 測試響應式網頁.

2014 年網頁設計開發技術的趨勢, 網站使用 CSS3, 以百分比的方式以及彈性的畫面設計,

4 響應式網頁 (Responsive Web Design) 響應式網頁設計 (Responsive Web Design) 簡稱 RWD, 又稱適應性網頁自適應網頁設計回應式網頁設計多螢網頁設計, 這是一項被公認在 2014 年網頁設計開發技術的趨勢, 網站使用 CSS3, 以百分比的方式以及彈性的畫面設計, 在不同解析度下改變網頁頁面的佈局排版, 讓不同的設備都可以正常瀏覽同一網站, 提供最佳的視覺體驗, 是個因移動平台的用戶大量增加而想出的一個對應方法

5 為什麼要做 Responsive Web Design? 因為越來越多人要用手機平板來瀏覽網頁優點 : 1. 開發成本比開發 APP 低 2. 不需要重寫 HTML 3. 可以同時針對許多不同裝置分別調整缺點 : 1. 載入速度的問題 : 手機與 PC 都一樣 2. 在 Mobile 上, 要再花心思做設計

6 響應式網頁對不同行動載具的處理

7 Bootstrap 有何能耐呢? Bootstrap 版型與範本

8 響應式網頁 - 版面設計 (grid system) RWD 介紹與流動式版面設計 Response.gs 960 Grid System Bootstrap grid system Foundation

Test_site Index.html Sample.html 網站 js css images 架構圖 jquery- 1.12.

9 Test_site Index.html Sample.html 網站 js css images 架構圖 jquery min bootstrap.min 2016butterfly bootstrap.min.js bootstraptheme.min.css jpg

10 前置作業 1. 在 D 槽建立一個 test_site 資料夾 2. 在 test_site 內新增 images,css,js 三個資料夾 3. 下載 Bootstrap, 並將 bootstrap.min.js 複製到 js 資料夾內, bootstrap.min.css 與 bootstrap-theme.min.css 複製到 CSS 資料夾內 4. 下載 jquery, 並複製檔案到 js 資料夾內 5. 開啟 dreamweaver, 建立一個網站 1. 右側 [ 檔案 ] 下拉選單 ( 管理網站 ) 2. 新增 -> 輸入網站名稱與本地根目錄位置

11 網韻平台 - 自製網頁樣版 1. 以管理者身份登入學校網站, 進入網站管理 -> 架構管理 -> 新增項目 -> 模版選自製網頁樣版, 並確定儲存. 2. 點選內容快捷 -> 自製網頁的模版名稱 3. 依據 test-site 架構, 新增資料夾與次資料夾, 並上傳檔案到相對位置 4. 儲存完成後, 即可在學校首頁進行測試

12 Bootstrap 安裝與介紹 Bootstrap 官網參考手冊 : 菜鳥教程下載 bootstrap 3 下載 jquery (1.12 版 ) 建立網站, 建立一個網頁範本檔 <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initialscale=1"> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript"> </script>

13 Bootstrap grid system 版面設計 12 個網格設計概念 Div 順序 : container -> row -> col-md-x 可同時定義手機平板與電腦的寬度 xs: phones( 手機 ) sm : tablets( 平板 ) md : desktops( 筆電 ) lg : larger desktops( 大筆電或桌機 )

14 實作基本版面 <div class="container"> <div class="row"> <div class="col-md-12" style="background-color:#ff0000"> 網站標題 <div class="row"> <div class="col-md-3" style="background-color:#0099ff;height:400px"> 選單區 <div class="col-md-9" style="background-color:#009900;height:400px"> 主畫面區 <div class="row"> <div class="col-md-12" style="background-color:#333333;color:#ffff00"> 底部區域

15 瀏覽測試後的畫面

16 表格設計 Class= table 響應式表格 : 將表格包在 <div class= tableresponsive > 表格.table : 只有橫框線.table table-bordered : 有邊框的表格.table table-striped : 加入灰階底色.table table-hover : 滑鼠停留時, 出現顏色各種組合中間以空白隔開

17 按鈕設計 Class= btn 按鈕類型 :Default,Primary,Success 按鈕大小 :btn-lg, btn-sm, btn-xs <a> <input> <button> 設定成 button 型態 <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-star" ariahidden="true"></span> 超連結按鈕 </a> 結果如右 :

18 圖片設計 Class= img-responsive : 響應式圖片 ( 隨設備自動縮放 ): 寬度 100%, 高度自動圖片形狀 : img-rounded : 圓角矩型 img-circle : 圓形 img-thumbnail: 有圖框的圖片

19 輔助類別文字顏色輔助類別 : Class= text-primary, text-success 文字背景輔助類別 : class= bg-primary, bg-success 顯示 div: class= show 隠藏 div: class= hidden

class="btn dropdown-toggle" id="dropdownmenu1" data-toggle="dropdown"> 水果介紹 <span

20 下拉選單設計.dropdown 下建立 <ul><li> </li></ul> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownmenu1" data-toggle="dropdown"> 水果介紹 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#"> 香蕉 </a></li> <li><a href="#"> 櫻桃 </a></li> <li class="divider"></li> <li><a href="#"> 蘋果 </a></li> </ul>

21 按鈕群 <div class= btn-group > <button class="btn btn-default"> 回首頁 </button> <button class="btn btn-default"> 系統管理 </button> <button class="btn btn-default"> 登入 </button> 按鈕工具列 <div class= btn-toolbar > <div class= btn-group > <div class= btn-group >

22 按鈕下拉選單 : data-toggle 觸發下拉事件 <div class= btn-group > <button class= btn btn-default dropdown-toggle data-toggle= dropdown > 處室介紹 <span class= caret ></span></button> <ul class= dropdown-menu > <li><a href= # > 教務處 </a></li> <li><a href= # > 學務處 </a></li> <li><a href= # > 總務處 </a></li> <li><a href= # > 輔導室 </a></li> </ul>

23 頁籤設計 Class= nav nav-tabs 範例 : <ul class="nav nav-tabs"> <li class="active" role="presentation"><a href=" </li> <li role="presentation"><a href=" <li role="presentation"><a href=" </ul>

24 導覽列設計會隨設備寬度自動折疊範例 : <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand"> 網站導覽 </a> <div class="collapse navbar-collapse" id="bs-examplenavbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"> 校長室 </a></li> <li><a href="#"> 人事室 </a></li> <li><a href="#"> 會計室 </a></li> </ul> </nav>

25 大螢幕效果 class="jumbotron 範例 : <div class="jumbotron"> <h2>hello world</h2>

26 頁面標題 Class= page-header 範例 : <div class="page-header"> <h3> 頁面標題 </h3>

27 縮圖設計利用網格與縮圖樣式, 來排列圖片, 呈現縮圖形式. Class= thumbnail 範例 : <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"><img src="images/2016butterfly/ jpg" /></a> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"><img src="images/2016butterfly/ jpg" /></a> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"><img src="images/2016butterfly/ jpg" /></a> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"><img src="images/2016butterfly/ jpg" /></a>

28 媒體物件在內容區 ( 文字段落 ) 的左或右側呈現圖片影片或聲音. Class= media 範例 : <div class="media"> <a class="media-left media-middle" href="#"> <img src="images/2016butterfly/ jpg" alt=" 蝶 " style="width:256px" /></a> <div class="media-body"> <h4 class="media-heading"> 江南樂府 </h4> <label class="label-info"> 江南可採蓮, 蓮葉何田田魚戲蓮葉間, 魚戲蓮葉東, 魚戲蓮葉西, 魚戲蓮葉南, 魚戲蓮葉北 </label> <p><span> 樂府歌謠產生於漢代, 其來源是仿效周代的到各國諸侯國樂習民間詩歌, 以便知道民間的疾苦武帝時設有樂府這一個官方機構, 負責採集民間歌謠, 製成樂章, 在宮中唱誦, 作為宮庭的娛樂後來人們把樂府所整理的歌辭叫樂府詩或簡稱樂府樂府詩因採自民間, 故亦稱為樂府民歌 </span></p>

29 嵌入效果在主網頁中嵌入另一個網頁. 1. 先建立一個要嵌入的網頁, 並設計好內容. 2. 在主網頁中插入 <iframe src= 網址或檔名 > 3. 設定 width heigh 數值 ( 寬度可用百分比 ) 範例 : <div class= well well-sm"> <iframe class="embed-responsive-item" src="movie.html" width="100%" height="600"></iframe>

30 相關資源網站 W3C schools Summer Bootstrap 3 tutorial Bootstrap 3: 基本概念安裝 Grid System Bootstrap 3: 表單菜鳥教程 RWD 資源分享

31 建議與 Q & A 時間設計網頁時, 必須考量載具最小尺寸顯示與操作的便利性. 儘量避免使用表格作為資料的排版如果是以手機或平板為主要瀏覽介面, 則儘可能減少文字輸入的次數, 改以下拉選單,checkbox, 或按鈕等控制項取代. 減少使用像素為單位, 改以 %

CH15.indd

CH15.indd Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap 15-3 15-4 15-5 CSS 15-6 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2 15 15-2 Bootstrap Bootstrap Twitter Blueprint Twitter

網站開發技術 講師 : 詹博文 HTML HTML5 CSS, CSS3 Less,Sass, Stylus BootStrap, Foundation,,grid System Kendo UI, jquery UI, EasyUI ASP,PHP,JSP,ASP.NET Ja

網站開發技術講師 : 詹博文 HTML HTML5 CSS, CSS3 Less,Sass, Stylus BootStrap, Foundation,,grid System Kendo UI, jquery UI, EasyUI ASP,PHP,JSP,ASP.NET Ja