版面美化與設計 建國科技大學資管系 饒瑞佶 2015/9 V1
重點提示 最好可以了解HTML與CSS HTML排版的基礎是Table、div等標籤 美化的基礎是CSS 如何透過BootStrap框架美化與控制畫面 如何透過jQuery Mobile框架設計適合行動裝置用的畫面
What is CSS? 「CSS」（Cascading Style Sheets）層級式樣式表是一種樣式表達語言，可以用來描述標記語言(HTML標籤)的顯示外觀和格式，能夠重新定義HTML標籤的顯示效果，例如：<p>標籤是段落；<ul>為清單，CSS能夠重新定義標籤的顯示樣式，以便符合網頁設計者的需求。 在1996年12月公佈CSS Level 1規格，Internet Explorer 3.0或以上的版本都支援此規格，接著1998年5月推出Level 2規格，Level 3早在1999年就已經開始制訂，直到2011年6月7日才成為W3C的建議規格，在CSS3增加不少新的選擇器、多欄和特效功能。
在HTML網頁使用CSS (I) CSS可以寫在3個地方 每段css的語法 每段css設定使用分號;隔開 定義在<head> </head>區段中 直接寫在標籤上 讀取外部檔案 每段css的語法 名稱:設定值 例如：color:#FF0000 每段css設定使用分號;隔開
在HTML網頁使用CSS (II) 定義在<head> </head>區段中 CSS的目的是重新定義HTML標籤的顯示樣式，例如：HTML標籤<p>是文字段落，預設使用瀏覽器的字體與字型大小，如果使用CSS，我們可以重新定義標籤<p>的顯示樣式，如下所示： <style type="text/css"> p { font-size: 10pt; color: red; } </style> 程式碼定義<p>標籤使用尺寸10pt的文字，色彩為紅色，只要網頁使用<p>標籤的段落，都是套用此字型尺寸和色彩來顯示。
CSS範例－ 定義在<head> </head>區段中 <html> <head> <title>HTML測試網頁+CSS</title> <style type="text/css"> p { font-size: 10pt; color: red; } </style> </head> <body> <h3>HTML網頁+CSS</h3> <hr> <p>第一頁HTML+CSS網頁</p> </body> </html> CSS
有個問題 CSS針對標籤做設定 可是網頁中同樣名稱的標籤很多，可以有些套用，有些不用嗎？ 可以的，只要在標籤上給id屬性就可以
<html> <head> <title>HTML測試網頁+CSS</title> <style type="text/css"> #p1 { font-size: 10pt; color: red; } #p2 { font-size: 20pt; color: blue; } </style> </head> <body> <h3>HTML網頁+CSS</h3> <hr> <p id="p1">第一頁HTML+CSS網頁</p> <p id="p2">aaa</p> </body> </html>
CSS範例－直接寫在標籤上 <!-- HTML網頁：Ch1_3.htm --> <html> <head> <title>HTML測試網頁+CSS</title> </head> <body> <h3>HTML網頁+CSS</h3> <hr> <p style="font-size: 10pt;color: red;">第一頁HTML+CSS網頁</p> </body> </html>
這個用得非常多，因為多數時候我們都是用別人的CSS 將<style></style>區段中的設定全部抽出到一個檔案，副檔名是.css 使用<link>標籤在<head></head>中去引用外部檔案 <link rel="stylesheet" href="abcd.css"> 這個用得非常多，因為多數時候我們都是用別人的CSS 而別人就是用檔案方式給我們的
小練習 重新修飾超連結標籤<a> /* 不要出現底線 */ a { text-decoration: none } /* 未連結時的顏色 */ a:link { color: #000000; /* 已連結過的顏色 */ a:visited color: #FFff00; /* 滑鼠移至連結 */ a:hover { color: #00FF00; }
使用.定義樣式 可以使用.定義樣式 再使用class來套用 定義樣式 可定義在<head> 或 定義在獨立檔案 套用樣式
問題又來了 原理我都懂 問題我就不是美工咖 寫程式還要管美工，太累了 現今世界最難的就是版面設計，因為太多樣化了(有桌機、有手機、有平板，有車載…) 怎麼辦？
CSS for RWD 自適應網站設計RWD(Responsive Web Dseign)－解決版面多樣化問題 http://miumiu33.gitbooks.io/3-12-rwd-/content/chapter1.html BootStrap－解決非美工咖問題 http://getbootstrap.com/2.3.2/ jQuery與jQuery Mobile－解決行動裝置版面多樣化與美工問題
Download Bootstrap Step by step說明 http://getbootstrap.com/2.3.2/getting-started.html#download-bootstrap
Downloaded files
Download compiled version 往下看有更多說明
使用Bootstrap需要jQuery
Bootstrap詳細說明 http://getbootstrap.com/2.3.2/scaffolding.html
實際試試看 jQuery
套進VS 2013 ASP.NET專案 先使用NuGet安裝需要的jQuery與BootStrap
啟動NuGet
搜尋Bootstrap
開始安裝
安裝完成
Istalled packages 連jQuery都一起安裝
看一下專案 css javascript
首先加入CSS
加入JS
先用單純HTML試試看 以button為例 使用宣告式語法 <button class="btn">Action <span class="caret"></span></button> 加入需要的class 使用宣告式語法 <button class="btn">Action <span class="caret"></span></button> <button class="btn btn-primary">Action <span class="caret"></span></button> <button class="btn btn-danger">Danger <span class="caret"></span></button> <button class="btn btn-warning">Warning <span class="caret"></span></button> <button class="btn btn-success">Success <span class="caret"></span></button> <button class="btn btn-info">Info <span class="caret"></span></button> <button class="btn btn-inverse">Inverse <span class="caret"></span></button>
加入HTML Button
與HTML Button一樣都是Button 加入一個ASP.NET的Button 與HTML Button一樣都是Button 有差嗎？ 套上CSS
問題來了 其他物件怎麼套用Bootstrap？ 讀手冊 上網找資料 下面就以DropDownList物件為例 上Google找答案 http://www.w3schools.com/bootstrap/ http://bootswatch.com http://www.lavishbootstrap.com 更改樣板 版面配色
練習 將TextBox物件套上Bootstrap 將圖片套成圓形
12個欄位的Grid 需要有container(class=“container”)，裡面包含row Row裡面包含column，column內包含內容 配合CSS設定其他效果 http://getbootstrap.com/css/
定義一個Grid container row column 內容 Row 內 加 起 來 要 12
Grid設定參數 永遠水平排列 寬度不夠時會做垂直排列
Grid Line
可以搭配不同寬度的使用
直接加入圖與文字看看
其他改進作法 重複3次,因為4*3=12 <div class="row"> <div class="col-sm-4"> <div class="box"> <div class="box-heading"> <img src="images/flower.jpg"> </div> <div class="box-body"> <h3>Bread</h3> <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pro</p>
Result－寬版
Result－窄版
其他更多 http://getbootstrap.com/css/
BootStrap Bootstrap theme Lavish http://bootswatch.com/ http://www.lavishbootstrap.com/ 放入圖片URL 自動產出適合的Bootstrap配色CSS 將CSS貼回VS2013即可
Lavish產生的Bootstrap CSS
Lavish產生的Bootstrap CSS To VS 2015取代Bootstrap.css的內容
result
ASP.NET 版面設計 Master Page
主板頁面MasterPage 解決版面共用部分建立與維護的問題 Master Page + Content Page
主板頁面MasterPage 副檔名.master HTML標籤與控制項可繼續使用 放置ContentPlaceHolder控制項做為未來Content Page顯示位置 實際要求的是Content Page，但IIS會將Master Page + Content Page再丟出
加入Master Page
預設有一個ContentPlaceHolder 設計模式看不出來
使用表格排版 使用3x1表格 將ContentPlaceHolder放在正中間
加入頁首頁尾 頁首 頁尾 ContentPlaceHolder ASP.NET的圖要怎麼放？
建立內容頁面(方法1)
建立內容頁面(方法2)
建立內容頁面(方法2) 選擇要套用的主版頁面
內容頁面 沒有HTML、HEAD、BODY等標籤 主版頁面中的ContentPlaceHolder名稱 自動套上主版頁面
jQuery Mobile
jQuery MObile
開始安裝
專案多出Content(放置CSS)與Scripts(放置jQuery與jQuery Mobile的js)目錄
將js與css加入檔案內 <head>加入 順序有關係 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 順序有關係
加入jQuery Mobile專屬版面設計 加入這兩段
result
使用者控制項 UserControl
UserControl 允許版面部分重用 透過建立使用者控制項(ascx檔案)檔案來達成
建立使用者控制項(ascx檔案)檔案
編輯使用者控制項(ascx檔案)檔案 編輯需要的UI介面
使用ascx檔案 首先建立標準aspx檔案 在aspx介面上需要的地方拖入ascx檔案 拖入