數位網頁設計

# 數位網頁設計僑光科技大學資訊科技系 2018/09/17 ~ 2019/01/19 授課老師：高吉隆電子信箱：[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com) --- ## 課程大綱 * 跨平台網頁程式設計原則 * HTML5基本語法與常用元素 * CSS3基本語法與常用屬性 * Bootstrap3網格及元件使用 * Javascript快速入門 * RWD響應式網頁練習與實作 ---- ### 每週上課目標 * 前 9 週上課目標（觀念講解、線上測驗） * 後 9 週上課目標（分組練習、專題報告） ---- |週| 上課日期 | 前 9 週上課目標 | 備註 |:-:|:----------:| --------------- |:--: | 1 | 107/09/20 | 課程設計與簡介 | | 2 | 107/09/27 | HTML 語法與常用元素 | | 3 | 107/10/04 | CSS 基本語法 | | 4 | 107/10/11 | CSS 常用屬性 | | 5 | 107/10/18 | CSS 字型、排版 | 小考一 | 6 | 107/10/25 | Bootstrap 網格系統 | | 7 | 107/11/01 | Bootstrap 元件使用 | | 8 | 107/11/08 | Javascript 快速入門 | 小考二 | 9 | 107/11/15 | 期中考 |30% ---- | 週 | 上課日期 | 後 9 週上課目標 | 備註 |:--:|:----------:| --------------- |:--: | 10 | 107/11/22 | 案例解說與練習一 | | 11 | 107/11/29 | 案例解說與練習二 |小考三 | 12 | 107/12/06 | 案例解說與練習三 | | 13 | 107/12/13 | 期末專題說明 | | 14 | 107/12/20 | 專題實作：上機 |進度報告 | 15 | 107/12/27 | 專題實作：上機 | | 16 | 108/01/03 | 專題實作：上機 | | 17 | 108/01/10 | 期末專題成果展示 |30% | 18 | 108/01/17 | 期末專題成果展示 | ---- ### 課程評分方式 * 平時成績：40% (上課互動+三次小考) * 上課互動：10% * 第一次小考：10% (107/10/18) HTML * 第二次小考：10% (107/11/08) CSS、BS * 第三次小考：10% (107/11/29) JS * 期中成績：30% (期中考試) * 考試範圍：HTML、CSS、BS * 期末成績：30% (期末報告) * 專題製作：上台報告、PPT簡報 ---- #### 日資科二忠 - 第一次小考 ![](https://i.imgur.com/EafTkmC.png) ---- #### 日資科二孝 - 第一次小考 ![](https://i.imgur.com/zkyJvsV.png) ---- #### 日資科二忠 - 第二次小考 * 加分：20、加分後平均：69 ![](https://i.imgur.com/ZZkpLeU.png) ---- #### 日資科二孝 - 第二次小考 * 加分：20、加分後平均：73 ![](https://i.imgur.com/PA7T0K6.png) ---- #### 日資科二忠 - 期中考 * 加分：10、加分後平均：73 ![](https://i.imgur.com/xQkWf3C.png) ---- #### 日資科二孝 - 期中考 * 加分：10、加分後平均：77 ![](https://i.imgur.com/9FgeW71.png) ---- ### 使用教科書 * 書名：一步到位！RWD 網頁程式設計 * 出版社：旗標 * 作者：陳惠貞 ![](https://im2.book.com.tw/image/getImage?i=https://www.books.com.tw/img/001/077/29/0010772966_bc_01.jpg&v=5a2531fd&w=355&h=409) ---- ### 網路資源 * 網站：W3Schools * 網址：[https://www.w3schools.com/](https://www.w3schools.com/) * 主題：HTML、CSS、Bootstrap、Icons、Javascript --- ## 跨平台網頁簡介 * 行動上網對網頁設計的影響 * 手機無法方便瀏覽 * 開發適用於不同裝置的網頁 * 桌上型電腦、平板、手機 * 網站建置流程 * 以RWD工具建置單一版本網頁 * 響應式網頁的設計考量 * 以不同的螢幕寬度顯示不同版面 ---- ### 為什麼要做RWD響應式網頁？ ![](https://www.ibest.com.tw/service/images/responsive/responsive_design_2.jpg) ---- ### 行動上網對網頁設計的影響 * 螢幕較小 * 應維持視覺上字體大小 * 執行速度慢 * 不宜放Flash等動畫 * 上網頻寬較小 * 不宜放大檔案圖片 * 操作方式不同 * 應考慮手機划動操作 * 切換手機版本 * 應自動切換，而不是各自網址 ---- ### 響應式網頁設計 (RWD, Responsive Web Design) * 響應式網頁設計的優點 * 網頁內容只有一個 * 網址只有一個 * 網址應隨螢幕大小自動切換 * 維護成本較低 * 有現成免費工具如BootStrap ---- #### RWD 的版面規劃設計 ![](http://www.iok.com.tw/uploads/5/2/4/5/52456105/web-design-g_orig.png) ---- #### 響應式網頁設計的缺點 * 舊版的瀏覽器不支援 * 客戶需更新瀏覽器版本 * 開發時需同時考量不同螢幕大小之情形 * 依不同螢幕大小規劃顯示方式 * 無法客製化發揮裝置的特點 * 無法針對某裝置重新版面規劃 --- ### 響應式網頁設計的主要技術 * 媒體查詢(media query) * 依螢幕寬度自動切換顯示內容 * 流動圖片(fluid image) * 可將圖片以漂移方式顯示 * 流動網格(fluid grid) * 可使用RWD表格顯示重覆清單 ---- ### 媒體查詢(Media Query) #### RWD網頁設計裝置中斷點 ![](http://image.slidesharecdn.com/responsivewebdesignworkshopantoniodepasquale-140416133209-phpapp02/95/responsive-webdesign-38-638.jpg?cb=1397675450) ---- #### 網頁內容就如同水，裝置就像是容器 ![](https://www.vervesearch.com/wp-content/uploads/2014/10/blog-01-01.jpg) ---- #### 傳統網站設計 vs RWD網站設計 ![](https://www.ibest.tw/images/25/01.jpg =800x600) ---- #### 做網頁前先參考現行代表性網站 * [ASUS](https://www.asus.com/tw/) * [ACER](https://www.acer.com/ac/zh/TW/content/home) * [HP](http://www8.hp.com/tw/zh/home.html) * [EPSON](https://www.epson.com.tw/) * [APPLE](https://www.apple.com/tw/) * [SONY](http://www.sony-xperia.com.tw/) --- ### 網站建置流程 1. 網站架構規劃 * 主機：Windows/Linux * 程式：PHP/ASP/.Net/Node.js 3. 網頁製作與測試 * 設計：含風格、版面、程式、後台等 5. 網站的上線與推廣 * 網域申請：[網路中文](https://www.net-chinese.com.tw/nc/) * 網站行銷：SEO/FB/Line 7. 網頁的更新與維護 * 後台更新：用戶帳密登入 * 程式修改：增加功能 ---- #### 網站架構規劃 1. 分析需求 * 依功能建立清單、流程圖 3. 提供網站規劃書 * 包括系統架構、功能簡述、工作人員 5. 提供功能報價單 * 依功能規模報價、含時程安排 7. 簽訂合約 * 簽約(30%)、交付(30%)、測試驗收(40%) 9. 專案執行 * 專案負責人與客戶窗口共同追蹤 ---- #### 網頁製作與測試 1. 網站視覺設計：選擇風格 2. 版面配置規劃：看板、選單、表頭、內文、表尾 3. 界面版型設計：用色、圖片、效果、字型、尺寸 4. 前端程式設計：樣版規劃、動態資料庫擷取 5. 後端程式設計：後台資料庫自行更新 6. 網頁品質測試：穩定性測試、輸入測試資料 7. 客戶線上驗收：測試版本操作、問題回饋、修改 ---- #### 網站的上線與推廣 1. 申請獨立網址 * 域名申請：需付每年費用約800元 3. 申請網站空間 * 依架構、空間、速度等規格報價 * 參考主機商：[遠振資訊](https://host.com.tw/) 5. 檔案上傳建置 * 透過主機控制台設定：如資訊庫建立 * 透過ftp上傳網頁：所有檔案 7. 登錄與行銷網站 * 申請關鍵字廣告、FB社團或Line群組 ---- #### 網頁的更新與維護 1. 不定期更新網頁內容 * 包括功能修改、錯誤修正 3. 資料庫維護與主機備份 * 刪除多餘資料、定期資料備份 5. 定期處理訂單 * 線上訂單處理、不定期公告訊息 7. 處理客服郵件 * 問題諮詢回覆 ---- #### 網頁編輯工具 1. NotePad++ * 編寫網頁原始碼含HTML、CSS、JS、PHP 3. Google Chrome * 使用開發人員工具測試與除錯 4. XAMPP * 含Apache、MySQL、PHP 5. Pingendo/Mobirise * BootStrap網頁製作工具軟體 --- ### 響應式網頁的設計考量 1. 網站的架構不要太多層：建議是二層 2. 使用者介面以簡明扼要為原測 3. 網頁的檔案愈小愈好：建議以CSS來設定背景 4. 提供設計良好的導覽列：二層選單 5. 必需在行動裝置做測試：改變視窅大小測試 ---- #### 網頁設計要學哪些相關程式語言？ 1. HTML：HyperText Markup Language 2. CSS：Cascading Style Sheets 3. 瀏覽器端Script：JavaScript 4. 伺服器端Script：PHP、ASP/ASP.Net、JSP、CGI ---- #### 開始撰寫HTML網頁 * HTML包含DOCTYPE、HTML、HEAD、BODY ``` HTML= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一個 HTML 網頁</title> </head> <body> <h1>Hello, world!</h1> </body> </html> ``` ---- #### HTML的組成 * 元素(Element) * 標籤(Tag)：Start tag / End tag * 屬性(Attribute) * 值(Value) * 內容(Content) ![](https://i0.wp.com/tutoriallab.net/wp-content/uploads/2016/01/2000px-HTML_element_structure.svg_.png?fit=600%2C300&ssl=1) ---- 1. DOCTYPE：HTML5規定網頁第一行必須是<!DOCTYPE html> 2. html：網頁樹枝狀結構的根元素是<html> 3. head：標示網頁的標頭 4. meta：標示網頁的編碼方式 5. title：瀏覽器的標籤文字 6. body：標示網頁的主體 7. h1：網頁內容的標題格式其中的1種 ---- #### 網頁UI(User Interface)的設計原則 * 頁首：Logo、Sitemap、Menu、Icon Link * 導覽列：Menu * 內容區：網頁主要呈現內容的地方 * 主視覺宣傳區：Carousel(輪流播放) * 內容區：2-4欄式呈現 * 頁尾：SiteName、Contact、Coryright、Sitemap、Icon Link ---- #### 網頁設計的風格 * 長型式風格(One-Page)：[Top-Menu](https://blackrockdigital.github.io/startbootstrap-resume/)、[Left-Menu](https://blackrockdigital.github.io/startbootstrap-resume/) * 色塊式風格：[Blockly Style](https://www.npm.gov.tw/) * 磚牆式風格：[Blockly Style](https://carriecousins.contently.com/) * 全版面風格 --- ## HTML5 語法與常用元素 * 請參考線上教學網站：[W3Schools : www.w3schools.com](https://www.w3schools.com/) * HTML：HTML5 / XML * CSS：CSS3 / W3.CSS * BOOTSTRAP：BS3 / BS4 * Client Side Script：JavaScript / JQuery * Server Side Script：PHP / ASP / SQL / Node.js * SQL：My SQL / MangoDB / SQL Server * GRAPHICS / ICONS ---- ### W3Schools學習重點 * 運用現成的On-Line Bible做全盤瀏覽的學習 * 需要整理好的Reference做隨時查詢的工具 * 使用上面的練習題目來熟練重點概念 * 實作線上的考題來驗證對概念的記憶程度 ---- ### HTML頁面結構 ![](https://i.imgur.com/G2zDD7j.png) ---- ### 第一次小考測驗 10% * 2018/10/11 上課第2節課測驗 * 範圍：HTML --- ## CSS的語法介紹 * 選擇器(Selector)：設定符合以下樣式之條件 * 大括弧({})：包括所有屬性之設定區塊 * 分號(;)：分隔二個屬性之間的分隔符號 * 冒號(:)：同一個屬性分隔屬性名稱和屬性值 * 屬性(Property)：定義該屬性之名稱 * 屬性值(Value)：定義該屬性之值 ![](https://i.imgur.com/zi4KKun.png) ---- ### Content Colors * 使用顏色名稱：如red，HTML支援[140種](https://www.w3schools.com/colors/colors_names.asp) * 使用RGB值：如rgb(255,0,0)，[(紅、綠、藍)](https://www.w3schools.com/colors/colors_rgb.asp) * 使用HEX值：如#ff0000，[(紅、綠、藍)](https://www.w3schools.com/colors/colors_hexadecimal.asp) * 使用HSL值：如hsl(0,1,0.5)[(色調、飽合、亮度)](https://www.w3schools.com/colors/colors_hsl.asp) * 使用RGBA值：如rgba(255,0,0,0.5)，A為透明度 * 使用HSLA值：如hsl(0,100%,50%,50%) * 選定顏色請參考：[W3Schools Color Picker](https://www.w3schools.com/colors/colors_picker.asp) ---- ### Content Borders * border-style：solid, dashed, dotted, double, etc * border-width：5px, 1em, thin, medium, thick, etc * border(Individual Sides)：(順時針) * four values：top, right, bottom, and left * three values：top, left-right and bottom * two values：top-bottom and left-right * one value：all-sides * border-radius：5px(圓角半徑) * 案例請參考：[W3Schools CSS Borders](https://www.w3schools.com/css/css_border.asp) ---- ### Box Model * 內容(Content)：放置文字或圖片的區塊 * 間隔(Padding)：內容外圍與框線之間 * 框線(Border)：環繞在內容之外圍 * 邊界(Margin)：框線之外，與其他元件的間隔 * 範例請參考：[W3Schools Box Model](https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel) ![](https://i.imgur.com/Vp6X6nG.png =500x300) ---- ### Text Styles：文字排版控制 * text-align(對齊)：center, left, right and justify * text-decoration(去除底線)：none, underline, etc * text-transform(大小寫轉換)：uppercase, capitalize * text-indent(縮排大小)：50px, 2em, etc * letter-spacing(字母間隔)：3px and -3px * word-spacing(單字間隔)：50px, 2em, etc * line-height(列高)：1.0 and 1.8 * text-shadow(字陰影)：3px 2px red * 案例請參考：[W3Schools CSS Text](https://www.w3schools.com/css/css_text.asp) ---- ### Text Fonts：文字字型控制 * font-family(字型)："Times New Roman", Times * font-style(樣式)：normal, italic * font-size(字大小)： * px(像素)：8px, 16px, 24px * em(16px的倍率)：0.5em, 1em, 1.5em * %(body字大小的倍率)：50%, 100%, 150% * vw(相對於設備大小)：10vw, 20vw * font-weight(粗細)：normal, bold * font-variant：small-caps(轉換成大寫) * 案例請參考：[W3Schools CSS Fonts](https://www.w3schools.com/css/css_font.asp) ---- ### Font Awesome：請參考 [W3Schools FA](https://www.w3schools.com/icons/fontawesome_icons_intro.asp) ```xml <i class="fa fa-car fa-2x" sytle="color:red"> ``` * fa-種類：fa-car, refresh, fa-spinner, etc * fa-倍率：fa-2x, fa-3x, fa-4x, fa-lg * fa-spin(旋轉)：fa-spinner fa-spin * fa-pulse(8角度轉換)：fa-spinner fa-pulse * fa-rotate-旋轉角度：fa-rotate-90 * fa-flip-翻轉方向：fa-flip-horizontal * fa-stack(多個重疊)：如將二個重疊 ```xml <span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> ``` ![](https://i.imgur.com/2YDPJaQ.png) ---- ### Hyper Links：網址連結設定 * 可依目前狀態，設定不同樣式 * a:link：一般正常，未瀏覽過的連結 * a:visited：已瀏覽過的連結 * a:hover：當滑鼠移至上面的連結 * a:active：當此連結正在被按下的狀態 * 請參考：[W3Schools CSS Link](https://www.w3schools.com/css/tryit.asp?filename=trycss_link) ---- ### List Items：列表項目設定 * list-style-type(符號種類) * 無編號清單ul：circle, square * 有編號清單ol：upper-roman, lower-alpha * list-style-image(自訂圖像)：url('filename.gif') * list-style-position(符號位置)：inside, outside * list-style(簡易合併寫法)：square,inside, url('filename.gif') * 請參考：[W3Schools CSS List](https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style) ---- ### Element Display：元素顯示控制 * display: none(隱藏)：不顯示 * display: inline：在同一行顯示，維持原高度 * display: block：此元素單獨一段落顯示 * display: inline-bock：在同一行顯示，可增加高度 * 請參考：[W3Schools CSS Display](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display) ---- ### Element Position：元素位置控制 * position: static：不受top/bottom/left/right作用 * position: relative：接受top/bottom/left/right作用 * position: fixed：以顯示區為基準設定固定位置 * position: absolute：以上層元件為基準設定固定位置 * 請參考：[http://zh-tw.learnlayout.com/](http://zh-tw.learnlayout.com/position.html) ---- ### Element Float：元素漂浮作用 * 元去漂浮時本身不佔據空間，像是漂在空中浮在其他元素上面 * float: right：靠右漂浮 * float: left：靠左漂浮 * float: none：無漂浮作用 * clear: right：清除靠右之漂浮作用 * clear: left：清除靠左之漂浮作用 * clear: both：清除靠左靠右之漂浮作用 * 解除漂浮後的問題，可用以下程式修正 ```xml .clearfix { overflow: auto; } ``` ---- ### CSS Selectors：CSS選擇器 * 基本型： * 元素(Element)：元素名稱，如 [tag -> <tag>](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element) * 編號(ID)：#編號名稱，如 [#tel -> id="tel"](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id) * 類別(Class)：.類別名稱，如 [.no -> class="no"](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class) * 請參考以下範例 ---- CSS 選擇器：基本型範例 ![](https://i.imgur.com/nysGex2.png) ```html= <head> <style> body {color: red;} #top {color: blue;} .intro {color: green;} </style> </head> <body> <div id="top"> <p>My name is Donald.</p> <p class="intro">I live in Disney Park.</p> <p class="intro">I born in 1934.</p> </div> <p>Nice to meet you.</p> </body> ``` ---- * 綜合型： * 元素.類別：如 tag.no -> [<tag class="no">](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class) * 多個類別：如 [.no1 .no2 -> class="no1 no2"](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class2) * 多個組合：如 [tag, .no -> <tag calss="no">](https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping) ---- CSS 選擇器：綜合型範例 ![](https://i.imgur.com/YeGRU2p.png) ```html= <head> <style> h1, p {color: red;} p.title {color: blue;} .live {color: green;} .born {font-size: 30px;} </style> </head> <body> <h1 class="title">My Family</h1> <div> <p class="title">My name is Donald.</p> <p class="live">I live in Disney Park.</p> <p class="live born">I born in 1934.</p> <p>Nice to meet you.</p> </div> </body> ``` ---- ### CSS Other Selectors：CSS進階型選擇器 * descendant selector(空格) * 該下面多層所有元素皆有作用 * child selector(>) * 該僅下面第一層元素有作用 * Adjacent Sibling Selector(+) * 僅同層後面相鄰有作用 * General Sibling Selector(~) * 同層後面所有元素有作用 ---- CSS 選擇器：進階型範例![](https://i.imgur.com/OBtEHgJ.png) ```html= <head> <style> div p {color: red;} div > p {color: blue;} div ~ p {color: green;} div + p {font-size: 25px;} </style> </head> <body> <div> <span><p class="title">My name is Donald.</p></span> <p>I live in Disney Park.</p> </div> <p>I born in 1934.</p> <p>Nice to meet you.</p> </body> ``` ---- ### Selector Examples：選擇器範例圖示 ![](https://www.csssolid.com/images/css-selectors-cheat-sheet.png =800x600) ---- ### CSS的位置種類 * 外部(External)：另存css檔案放入head->link中 ```css= <link rel="stylesheet" type="text/css" href="mystyle.css"> ``` * 內部(Internal)：直接寫在head->style中 ```css= <style> </style> ``` * 元素(Inline)：直接寫在tag->style中 ```css= <h1 style="color:blue;">This is a heading</h1> ``` * 多重位置優先順序：元素->內部->外部->瀏覽器預設值 --- ## BootStrap的介紹 * 最普遍HTML CSS JavaScript Framework之一 * 免費、前端開發工具、各式元件套版 * Bootstrap CDN ```javascript= <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div> <h1 class="text-center">Hello World!</h1> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> </div> </div> </body> </html> ``` ---- #### Bootstrap 是一個 CSS Framework * 原本用 Class 的寫法如下： ```css <head> <style> .text-center {text-align: center;} </style> </head> <body> <h1 class="text-center">Hello World!</h1> </body> ``` * 使用 Bootstrap 只要寫成如下：載入共約7000行的 CSS ```css <head> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <h1 class="text-center">Hello World!</h1> </body> ``` ---- ### Bootstrap Grid System * 讓使用者藉此開發適應不同裝置的網頁，達到響應式網頁的目的 * 每一列都切割成12個等分，依每份占的比例來分配 ![](http://www.ryanwright.me/sites/default/files/images/cookbooks/bootstrap/a1/12-grid-overlay.jpg) ---- ### Bootstrap Screen Plan * Bootstrap 針對不同的螢幕尺寸提供如下的網格選項 * 如需以768px來區分二種不同版型，可以加上類別：.col-sm.* ![](https://image.slidesharecdn.com/bootstrap-workout-2015-150124110312-conversion-gate02/95/bootstrap-workout-2015-34-638.jpg?cb=1422119092) ---- ### 第二次小考 * 範圍：CSS、Bootstrap * 成績分佈： ![](https://i.imgur.com/6l4heXl.png) --- ## JavaScript 語言 * JS能夠幫我們做什麼？ * JS能夠放在什麼位置？ * JS輸出的方式有哪些？ * JS程式的語法、變數和註解 * JS程式的變數運算子 * JS程式的物件及陣列 * JS程式的判斷、比較和迴圈 * JS程式的函數和事件 * JS程式的型別轉換和預設函數 ---- ### JS能夠幫我們做什麼？ * 可以改變HTML中TAG的內容值和屬性值 * 可以改變CSS中的Style的屬性值 ```htmlembedded <script> // 將ID為demo之元素更改內容 document.getElementById('demo').innerHTML='改變內容'; // 將ID為demo之元素更改圖片 document.getElementById('demo').src='新圖檔.gif'; </script> ``` * 可以用Style中Display屬性隱藏或顯示元素 ```htmlembedded <script> // 將ID為demo之元素隱藏 document.getElementById('demo').style.display='none'; // 將ID為demo之元素顯示 document.getElementById('demo').style.display=''; </script> ``` ---- ### JS能夠放在什麼位置？ ```htmlembedded <html> <head> <script> // 可以放在 HEAD 中 </script> </head> <body> <h2>JavaScript in Head</h2>  <button type="button" onclick="alert('a');">按鈕</button> <script> // 可以放在 BODY 結束前 </script>  <script src="myScript.js"></script> </body> </html> ``` ---- ### JS輸出的方式有哪些？ ```htmlembedded <script> // 顯示在元素內容值中 document.getElementById("demo").innerHTML = 5 + 6; // 顯示在HTML中的內容 document.write(5 + 6); // 顯示在訊息視窗中 window.alert(5 + 6); // 顯示在瀏覽器視窗中的Console紀錄中 console.log(5 + 6); </script> ``` ---- ### JS程式的語法、變數和註解 ```htmlembedded <script> // 這是一行的註解 /* 這是多行的註解 JS是每一行命令列需用分號；隔開 JS是大小寫有區分的語言 JS是執行在瀏覽器端的語言 JS是一行一行按照順序執行 */ var a = 10; // 這是變數的宣告並設定預設值 var b, c; // 這是單行一次宣告多個變數，且無預設值 a = 10 + 20; // 這是數學運算的符號 b = 10; c = a + b; // 允許一行多個命令 window.alert('OK'); // 字串可以單引號 console.log(“OK”); // 字串可以雙引號 </script> ``` ---- ### JS程式的變數運算子 ```htmlembedded <script> var a = 10 + 20; // 這是加法，如 -(減) *(乘) /(除法) %(求餘數) a++; // 這同等於 a = a + 1; a--; // 這同等於 a = a - 1; var b = 10, c = 10; var d = b++; // 即 d = 10, b = 11 var e = ++c; // 即 e = 11, c = 11 a += 10; // 同等於 a = a + 10; 其他 - * / % 亦同 var f = 'hi' + 5; // 字串和數字相加，即 f = 'hi5'; var g = 'hi' + 5 + 5; // 以第一個字串型別來相加，即 g = 'hi55'; var h = 5 + 5 + 'hi'; // 以第一個數字型別來相加，即 h = '10hi'; var i; // 會以 undefined 來儲存 </script> ``` ---- ### JS程式的物件及陣列 ```htmlembedded <script> // 宣告 1 個物件含 4 個屬性 var man = { firstName : "孔", lastName : "夫子", age : 50, eyeColor : "紅色" }; alert(man.eyeColor); // 顯示 man 物件的 eyeColor 屬性值紅色 alert(man["age"]); // 顯示 man 物件的 age 屬性 50 // 宣告一個陣列 var cars = ["學生","老師","教室"]; alert(cars[0]); // 顯示第0個元素，即學生字串 </script> ``` --- ## 案例實作 * 加上HTML的標籤 * 加上CSS的樣式 * 加上版面編排樣式 * 加上表單編排樣式 * 加上響應式網頁樣式 --- ### 案例實作一 - 加上HTML的標籤 | 加入前 | 加入後 | |:----: | :---: | | ![](https://i.imgur.com/oCRV6Ur.png) | ![](https://i.imgur.com/g4DZym5.png) | ---- #### 編輯網頁前之準備 * 網頁編輯器：NotePad++[下載點](https://notepad-plus-plus.org/repository/7.x/7.5.6/npp.7.5.6.Installer.x64.exe) * 下載範例原始檔：[加上HTML的標籤](http://www.ocu.tw/class/rwd/HTMLTag.zip) * 範例檔案內容： * index.html：加入HTML的標籤 * entry.html：欲填寫的表單網頁 * images\*.jpg：加入的圖片 * cats\*.html：連結的網頁 ---- #### 加上HTML的標籤 - 加入以下標籤內容 * TITLE：請輸入網頁標題 * META keywords：請輸入關鍵字 * META description：請輸入網頁說明 * H1~H6：請找出網頁大標題和次標題 * P：請找段落文章 * BR：段落中換行 * UL LI：請找出條列項目 * OL LI：請找出有編號之條列項目 * DL DT DD：請找出有定義之條列項目 * IMG src：請放入圖片 * A href：請加入網頁連結 * DIV, SECTION：請加入區塊 ---- #### 網頁上傳與預覽 * 執行電腦桌面上的FFFTP.exe程式 * 在主機列表中新增主機(第一次使用請先[註冊](https://webmail.ocu.edu.tw/cgi-bin/newpass)) * 站台設定名稱：RS2 * 主機名稱：rs2.ocu.edu.tw * 使用者名稱：s10515001(學號含s) * 密碼：OCU信箱的密碼 ![](https://i.imgur.com/6mUFDvu.png =600x300) --- ### 案例實作二 - 加上CSS的樣式 | 加入前 | 加入後 | |:----: | :---: | | ![](https://i.imgur.com/vfHnQKk.png) | ![](https://i.imgur.com/ejXlTIw.png) | ---- #### 編輯網頁前之準備 * 網頁編輯器：NotePad++[下載點](https://notepad-plus-plus.org/repository/7.x/7.5.6/npp.7.5.6.Installer.x64.exe) * 下載範例原始檔：[加上CSS的樣式](http://www.ocu.tw/class/rwd/CSSStyle.zip) * 範例檔案內容： * index.html：欲修改的網頁 * style.css：加入CSS的樣式 * entry.html：欲填寫的表單網頁 * images\*.jpg：加入的圖片 * cats\*.html：連結的網頁 ---- #### 案例實作二 - 加上CSS的樣式(2) * 標籤內樣式：body、a、h1 ```css= body{background-color: #fbf9cc} /*網頁背景顏色*/ a{color: #df4839} /*連結顏色*/ a:hover{color: #ff705b} /*動態連結顏色*/ h1{ color: #6fbb9a; /*標題字體顏色*/ text-align: center; /*文字對齊方向*/ font-size: 250%; /*字體大小*/ } h1 span{color: #d0e35b} /*星號顏色*/ ``` ---- #### 案例實作二 - 加上CSS的樣式(3) * 標籤內樣式：h2、dt ```css= h2{ color: #6fbb9a; /*字體顏色*/ border: #94c8b1 1px dotted; /*框線屬性*/ border-left: #d0e35b 10px solid; /*左框線屬性*/ padding: 5px 20px; /*框線內邊界屬性*/ margin-bottom: 0; /*框線外下邊界屬性*/ } dt{ font-weight: bold; /*項目標題字體粗細*/ } ``` ---- #### 案例實作二 - 加上CSS的樣式(4) * ID類樣式：id="lead" ```css= #lead{ /*引言區*/ border-top: #6fbb9a 1px dotted; /*上邊線屬性*/ border-bottom: #6fbb9a 1px dotted; /*下邊線屬性*/ padding: 15px; /*間隔屬性*/ text-align: center; /*文字對齊*/ } ``` ---- #### 案例實作二 - 加上CSS的樣式(5) * CSS類樣式：class="more" class="cat-type" ```css= .more{ /*更多介紹*/ text-align: right; } .cat-type{ /*共通資料*/ font-size: 80%; font-weight: normal; } .male{ /*公貓顏色*/ color: #2793a7; } .female{ /*母貓顏色*/ color: #df972f; } ``` --- ### 案例實作三 - 加上版面編排樣式 * 下載範例原始檔：[加上版面編排樣式](http://www.ocu.tw/class/rwd/CSSLayout.zip) | 加入前 | 加入後 | |:----: | :---: | |![](https://i.imgur.com/rFJdLPZ.png)|![](https://i.imgur.com/J3g9Yhm.png)| ---- #### 案例實作三 - 加上版面編排樣式(2) * HTML中加入： ```html= <div id="wrap"> ``` * CSS中加入： ```css= #wrap{ width: 798px; margin: 40px auto; padding: 40px 80px; border: #f6bb9e 1px solid; background-color: #ffffff; } ``` ---- #### 案例實作三 - 加上版面編排樣式(3) * HTML中加入：class="frame" ```html= <section id="subaru" class="frame"> <section id="gureko" class="frame"> <section id="nezuko" class="frame"> ``` * CSS中加入： ```css= .frame{ margin:20px 0; padding:35px 30px 30px 30px; background:url(img/bg-stripe02.png) repeat-x #fbf9cc; } ``` ---- #### 案例實作三 - 加上版面編排樣式(4) * HTML中加入：class="ph" clss="data" ```html= <img src="img/subaru.jpg" width="320" height="100" alt="小昂" class="ph"> <img src="img/gureko.jpg" width="320" height="100" alt="暮子" class="ph"> <img src="img/nezuko.jpg" width="320" height="100" alt="鼠子" class="ph"> <dl class="data"> ``` * CSS中加入： ```css= .ph{ float: left; margin-right: 30px; } .data{ float: left; width: 388px; } ``` ---- #### 案例實作三 - 加上版面編排樣式(5) * HTML中加入：class="more" ```html= <p class="more"><a href="cats/subaru.html">更多介紹→</a></p> <p class="more"><a href="cats/gureko.html">更多介紹→</a></p> <p class="more"><a href="cats/nezuko.html">更多介紹→</a></p> ``` * CSS中加入： ```css= .more{ text-align:right; background:url(img/icon-arw01.png) no-repeat right center; padding-right:15px; clear: left; } ``` --- ### 案例實作四 - 加上表單編排樣式 * 下載範例原始檔：[加上版面編排樣式](http://www.ocu.tw/class/rwd/CSSForm.zip) | 加入前 | 加入後 | |:----: | :---: | |![](https://i.imgur.com/2CjcquG.png)|![](https://i.imgur.com/3Fde8wY.png) | ---- #### 案例實作四 - 加上表單編排樣式(2) * HTML中加入： ```html= <table class="entryForm"> ``` * CSS中加入： ```css= table.entryForm{ width: 100%; border: #f6bb9e 2px solid; border-collapse: collapse; } .entryForm th, .entryForm td{ padding: 5px 10px; border: #f6bb9e 1px solid; } .entryForm th{ width: 10em; background-color: #ffeeee; text-align: left; vertical-align: top; } ``` ---- #### 案例實作四 - 加上表單編排樣式(3) * CSS中加入： ```css= .entryForm textarea{ width: 600px; height: 100px; padding: 5px; border: #ccc 1px solid; } .entryForm input[type="text"], .entryForm input[type="email"]{ width:400px; padding: 5px; border: #ccc 1px solid; } .entryForm input:focus, .entryForm textarea:focus{ background-color: #ffffee; } ``` ---- #### 案例實作四 - 加上表單編排樣式(4) * CSS中加入： ```css= label, input[type="radio"], input[type="checkbox"], input[type="reset"], input[type="submit"]{ cursor: pointer; } ``` ---- #### 案例實作四 - 加上表單編排樣式(4) * HTML中加入： ```html= <div class="btns"> <input type="reset" value="清除重填" class="btn btn-clear"> <input type="submit" value="投稿" class="btn btn-send"> </div> ``` * CSS中加入： ```css= .btns{ margin: 30px; text-align: center; } .btn { width: 100px; margin: 0 10px; padding: 10px; border: none; font-size: 16px; } .btn:hover { opacity: 0.7; } .btn:active { color: #fff; } .btn-clear { background-color: #ccc; } .btn-send { background-color: #f6bb9e; } ``` ---- #### 案例實作四 - 加上表單編排樣式(4) * HTML中加入：id="sex1" ```html= <input type="radio" name="sex" id="sex1" value="男生" checked> <label for="sex1">男生</label> <input type="radio" name="sex" id="sex2" value="女生"> <label for="sex2">女生</label> <input type="checkbox" name="like1" id="like1" value="魚"> <label for="like1">魚</label> <input type="checkbox" name="like2" id="like2" value="肉"> <label for="like2">肉</label> <input type="checkbox" name="like3" id="like3" value="牛奶"> <label for="like3">牛奶</label> <input type="checkbox" name="like4" id="like4" value="乾飼料"> <label for="like4">乾飼料</label> <input type="checkbox" name="like5" id="like5" value="貓罐頭"> <label for="like5">貓罐頭</label> <input type="checkbox" name="like6" id="like6" value="甜食"> <label for="like6">甜食</label> ``` --- ### 案例實作五 - 加上響應式網頁樣式 * 下載範例原始檔：[加上響應式網頁樣式](http://www.ocu.tw/class/rwd/CSSRWD.zip) * 下載範例完成檔：[加上響應式網頁樣式](http://www.ocu.tw/class/rwd/CSSRWD-OK.zip) | 加入前 | 加入後 | |:----: | :---: | |![](https://i.imgur.com/a9isYZw.png)|![](https://i.imgur.com/AZ8EFTy.png)| ---- #### 案例實作五 - 加上響應式網頁樣式(2) * CSS中加入： ```css= /*ALL and Smart Phone*/ .container{ max-width: 940px; padding-left: 10px; padding-right: 10px; margin: 0 auto; } .container:after{ content:""; display: block; clear:both; } .full{ margin-left: -10px; margin-right: -10px; } @media screen and (min-width:640px){ .full{ margin-left: 0; margin-right: 0; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(3) * CSS中加入： ```css= /*header--------------------*/ #header{ padding: 12.5%; background: url(../img/bg_header.jpg) center top no-repeat; background-size: cover; text-align: center; position: relative; } #header:before{ content: ""; display: block; width: 33.75%; height: 55.5555%; max-width: 220px; max-height: 200px; background: url(../img/bg_race.png) no-repeat; background-size: contain; position: absolute; left: 0; top: 0; } @media screen and (min-width: 640px){ #header{ padding: 80px 0; text-align: left; } }``` ---- #### 案例實作五 - 加上響應式網頁樣式(4) * CSS中加入： ```css= /*global navigation--------------------*/ #gnav{ background: #d8c7a0; } #gnav ul{ overflow: hidden; } #gnav li{ float: left; width: 25%; text-align: center; } #gnav a{ display: block; padding: 15px 0; color: #fff; text-decoration: none; font-size: 18px; } #gnav a:hover{ background: #ecdfc2; } @media screen and (min-width: 640px){ #gnav{ margin-bottom: 20px; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(5) * CSS中加入： ```css= /*main--------------------*/ #main{ margin-bottom: 100px; } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(6) * CSS中加入： ```css= /*Google Map--------------------*/ .map{ border: #d8c7a0 1px solid; position: relative; padding-bottom: 50%; } .map iframe{ position: absolute; left:0; top:0; width: 100%; height: 100%; } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(7) * CSS中加入： ```css= /*introduction--------------------*/ #intro{ margin-bottom: 40px; padding: 20px 10px; background: url(../img/bg_check.png); } .intro-text{ margin-bottom: 20px; font-size: 114%; } .intro-map .map{ margin-bottom: 20px; } .intro-map address{ text-align: center; font-style: normal; font-size: 12px; } .intro-map address p+p{ margin-top: 10px; } .btn-tel{ display: inline-block; width: 70%; max-width: 200px; padding: 8px 0; border-radius: 2em; background: #d8c7a0; color: #fff; text-decoration: none; font-size: 18px; } @media screen and (min-width: 640px){ #intro{ padding: 20px; overflow: hidden; } .intro-text{ width: 57.7777%; float: left; line-height: 1.8; } .intro-map{ width: 40%; float: right; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(8) * CSS中加入： ```css= /*Pickup Menu--------------------*/ .menu-text{ padding: 15px; text-align: center; } @media screen and (min-width: 640px){ #menu{ margin-bottom:40px; } .menu-list{ overflow: hidden; } .menu-list li{ float: left; width: 31.9148%; margin-right: 2.12765%; } .menu-list li:nth-child(3n){ margin-right: 0; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(9) * CSS中加入： ```css= /*info--------------------*/ #info{ margin-bottom: 20px; } .info-list dt{ clear: left; float: left; width: 7em; padding: 10px 0; border-top: #d8c7a0 1px dotted; } .info-list dd{ padding: 10px 0; border-top: #d8c7a0 1px dotted; overflow: hidden; } .info-list :first-of-type{ border-top: none; } @media screen and (min-width: 640px){ #info{ float: left; width: 48.9361%; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(10) * CSS中加入： ```css= /*staff--------------------*/ #staff{ margin-bottom: 40px; padding: 20px 10px; background: url(../img/bg_check.png); text-align: center; } .staff-photo{ width: 50%; margin: 0 auto 20px; } .staff-photo img{ border: #d8c7a0 5px solid; } .staff-heading{ display: inline-block; width: 60%; padding: 8px 10px; margin-bottom: 10px; border-radius: 2em; background: #d8c7a0; color: #fff; font-size: 14px; } @media screen and (min-width: 640px){ #staff{ float: right; width: 48.9361%; padding: 20px; box-sizing: border-box; } .staff-photo{ float: left; width: 35.7142%; margin-bottom: 0; } .staff-msg{ float: right; width: 59.5238%; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(11) * CSS中加入： ```css= /*banner--------------------*/ .banner-list{ width: 83.3333%; max-width: 300px; margin: 0 auto; } .banner-list li{ margin-bottom: 20px; box-shadow: 0 0 5px rgba(0,0,0,0.5); } .banner-list li img{ border: #fff 5px solid; box-sizing: border-box; } @media screen and (min-width: 640px){ #banner{ clear: both; } .banner-list{ width: 100%; max-width: none; text-align: left; } .banner-list li{ float: left; width: 31.9148%; margin-right: 2.1276%; } .banner-list li:nth-child(3n){ margin-right: 0; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(12) * CSS中加入： ```css= /*footer--------------------*/ #footer{ padding: 20px 10px; background: #d8c7a0; } .footer-photo{ width: 83.3333%; margin: 0 auto 20px; } .footer-photo img{ border: #fff 5px solid; } .footer-info-title{ width: 33.3333%; min-width: 100px; margin-bottom: 15px; } .footer-info-list{ margin-bottom: 20px; } .footer-info-list dt{ clear: left; float: left; width: 7em; margin-bottom: 10px; } .footer-info-list dd{ margin-bottom: 10px; overflow: hidden; } .sns{ margin-bottom: 15px; } .sns li{ display: inline-block; } .sns a{ display: block; padding: 10px 20px; background: #fff; color: #d8c7a0; border-radius: 5px; text-decoration: none; } .sns a:hover{ opacity: 0.7; } .pagetop{ width: 14.0625%; min-width: 45px; position: fixed; right: 10px; bottom: 10px; } @media screen and (min-width: 640px){ .footer-photo{ float: left; width: 31.9148%; margin-bottom: 20px; } .footer-info{ float: right; width: 65.9574%; margin-bottom: 20px; } .sns{ clear: both; text-align: center; } .copyright{ text-align: center; } } ``` ---- #### 案例實作五 - 加上響應式網頁樣式(13) * CSS中加入： ```css= /*Heading--------------------*/ .heading{ margin-bottom: 15px; border-bottom: #4d941a 1px solid; color: #4d941a; font-size: 20px; font-weight: normal; overflow: hidden; position: relative; } .heading .more{ float: right; display: inline-block; padding: 5px 5px 5px 10px; background: #4d941a; border-radius: 2em; color: #fff; text-decoration: none; font-size: 14px; line-height: 1; } .heading .more:hover{ opacity: 0.7; } ``` --- ## 期末報告執行方式 * 使用 Zuvio 即時互動平台：[連結](https://irs.zuvio.com.tw/) * 亦可使用手機下載APP：Zuvio學生版 * 登入方式：若已註冊過，可以直接登入 * 帳號：s105XXXXXX@ocu.edu.tw(學號有含s) * 密碼：123，登入後請直接修改密碼 * 科系：請填寫資訊科技系 * 年級：請選擇大二 * 更改密碼：為保護課程權益請一定要修改 * 設定->帳號設定->變更密碼 * 請選擇課程：跨平台網頁程式設計 * 回饋討論->討論區->期末分組報告->填寫分組名單 ---- ### 期末報告說明 * 採分組報告：2-4人為一組，請選1人為組長 * 擬定系統名稱：以小型介紹網站為優先 * 網頁系統：HTML/CSS/JavaScript等 * 系統工具：NotePad++/Pingendo/Mobirise等 * 系統功能：至少5個功能，需繪製功能組織圖 * 系統設計：版面設計、元件設計、功能測試 * 書面報告：以DOC及PPT繳交，PPT需以摘要列印 * 上台報告：每組報告5-10分鐘，依組數而定 ---- #### 期末報告說明(2) * 網站架構組織圖 ![](https://i.imgur.com/hKbeV7d.png) ---- #### 期末報告說明(3) * 網站網頁版面設計 ![](https://i.imgur.com/QOsJa2k.png) ---- #### 期末報告說明(4) * 分組人員分工範例 ![](https://i.imgur.com/tX3B8xI.png) ---- #### 期末報告說明(5) * 網頁開發工具介紹： * Pingendo：[https://pingendo.com/](https://pingendo.com/) * Mobirise：[https://mobirise.com/](https://mobirise.com/) ---- #### CC0 1.0 公眾領域貢獻宣告 * CC0特性： * 拋棄該著作依著作權法所享有之權利。 * 宣告將該著作貢獻至公眾領域。 * 你可以複製、修改、發布或展示此作品。 * 可進行商業利用，完全不需要經過許可。 * 不影響任何人的專利權或商標權。 * 不影響他人對該著作可能享有的權利。 * 免費高品質圖片網站： * https://pixabay.com/ * https://librestock.com/ * https://www.pexels.com/ ---- ### 期末報告分組名單 {%pdf https://www.ocu.tw/class/rwd/1062Final.pdf %}

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.