Web Programming 網際網路程式設計

Presentation on theme: "Web Programming 網際網路程式設計"— Presentation transcript:

1 Web Programming 網際網路程式設計
Darby Chang 張天豪 Web Programming 網際網路程式設計

2 Web Programming 網際網路程式設計
HTML+CSS Web Programming 網際網路程式設計

3 Web Programming 網際網路程式設計
HTML HyperText Markup Language 超文件標示語言 超文件？ 裡頭有圖、聲音、連結到別的文件 標示語言？ 定義怎麼去標示東西 什麼是標示？ Web Programming 網際網路程式設計

4 Web Programming 網際網路程式設計

5 Web Programming 網際網路程式設計
HTML是文字檔 內容分成兩種 標籤(tag)，用來標示 文字，真的會在網頁中看到的內容 <b>在標籤 b 中的文字通常顯示為粗體</b> 標籤可以包含別的標籤，但是不能交叉 <b><i>粗體又斜體</i></b> <b><i>什麼鬼</b></i> 就這樣，沒了 Web Programming 網際網路程式設計

6 Web Programming 網際網路程式設計
那 HTML 倒底要學什麼 學有哪些標籤可以用 假設有個 BOOKML 的話，直覺要有<書>, <章>, <節>, <標題>, <段落>, <圖>, <表> 等等標籤 網頁有哪些元素其實大家都很了解 連結、圖片、表格、清單、表單… Web Programming 網際網路程式設計

7 Web Programming 網際網路程式設計
光是標籤夠用嗎 同樣是連結，怎麼連到不同的地方 <a href=“ <a href=“ 屬性(例如上面的 href 就是 <a> 的屬性) 請把標籤想像成物品的種類，例如手機跟相機是不同的物品；屬性就是物品的規格，例如同樣是相機，畫數就不一樣 是的，不同標籤當然可以有相同的屬性 各式各樣的屬性(因為不是看的到的文字) <a href=“ target=“_blank” title=“游標上來了”> 標籤搭配屬性有非常多種組合 Web Programming 網際網路程式設計

8 Web Programming 網際網路程式設計
這門課都會教嗎？ Web Programming 網際網路程式設計

9 Web Programming 網際網路程式設計
要教好久，而且教完還不是得靠工具網站 Web Programming 網際網路程式設計

10 Web Programming 網際網路程式設計
那這門課的 HTML 還要教什麼 首先，你應該已經知道 HTML 是什麼，大概有哪些元素可以呈現，要用的時候去哪裡查 你在寫 HTML 時，不是在寫程式，而是在決定怎麼樣標示你的文件，標示時要注意幾點 正確：除了速查網站外，還有一種測試網站可以幫助寫出正確的 HTML 合理：既然是你的文件，也就沒有標準答案，但至少要合理。很多常見的網頁設施(見下頁的例子) ，其實都有約定成俗的做法 配合 CSS：現在 HTML 只是用來組織架構 以一本書為例，HTML 只負責哪裡是第一章，哪裡是第二章，至於第一章的背景顏色、標題的字體等等，都是由 CSS 決定 Web Programming 網際網路程式設計

11 Web Programming 網際網路程式設計

12 Web Programming 網際網路程式設計
怎麼配合 CSS 通用標籤 沒有邏輯意義，只有物理意義 <div> 區模(block)通用標籤 <div class=“footer”> <span> 行內(lnline)通用標籤 <span class=“date”> Web Programming 網際網路程式設計

13 Web Programming 網際網路程式設計

14 Web Programming 網際網路程式設計
CSS Cascading Style Sheets 層疊樣式表 樣式表？ 就是一堆標籤該怎麼呈現 層疊？ 有名的 CSS 選取器 (CSS selector) 搞懂這個，網頁設計就解決一大半了 Web Programming 網際網路程式設計

15 Web Programming 網際網路程式設計
CSS 選取器 選取器 說明 範例 a 選取標籤 <a> .date 選取類別 <a class=“date”>, <span class=“date”>, … a.date 可以混用 <a class=“date”> #footer 選取身分(速度較快) <div id=“footer”> div#footer 可以混用(但多此一舉) #footer a.date 這就叫層疊啦 <a class=“date”>只有選取這裡</a> <a>沒有選取這裡</a> </div> <a class=“date”>也沒有選取這裡</a> Web Programming 網際網路程式設計

16 Web Programming 網際網路程式設計
選了，然後呢 你幾乎可以設定任何東西 背景顏色、邊框、文字顏色、字體、文字大小、文字顏色、外邊界、內邊界… 甚至標籤是否為區塊或是行內都能改(display) 所以其實 HTML 設不設都沒關係，但是一般還是會在 HTML 採用正確的標籤，除非有特殊需求才會用 CSS 改這個 display 樣式 HTML 沒有的定位方式 浮動(float)跟位置(position) 這種進階的排版只能靠 CSS 中達成，現在已經隨處可見 Web Programming 網際網路程式設計

17 Web Programming 網際網路程式設計

18 Today’s (second) assignment 今天的(第二個)任務
Web Programming 網際網路程式設計

19 Web Programming 網際網路程式設計
設計你們網站需要的頁面 先討論每個畫面需要哪些區塊(記得要包含前一個任務的 about us 頁) ，用 HTML 架構出來，再用 CSS 填上基本的色塊，裡頭可以加 些 文 字，會更貼近真實的感覺 草稿  設計  程式 至少要有個清單連到所有頁面 參考資料 Ultimate Guide to Website Wireframing 30 Fresh Web UI, Mobile UI and Wireframe Kits Google 文件範本 老師會在 10/16星期日 23:59 之後到各組的首頁去看，可以寄個報告(例如工作分配或是設計重點等等)給老師，以防老師眼殘沒注意到你們的特色 Web Programming 網際網路程式設計

20 Web Programming 網際網路程式設計

21 Web Programming 網際網路程式設計

22 Web Programming 網際網路程式設計

23 注意縮排，讓你們的原始碼更好讀 gg=G in vi
Web Programming 網際網路程式設計

24 Web Programming 網際網路程式設計
Appendix 附錄 Web Programming 網際網路程式設計

25 Web Programming 網際網路程式設計
HTML5 非常新的技術：2012 前之前都不會成為標準 多媒體：<audio>, <canvas>, <video>… 互動性表單(不需要 Javascript) 儲存機制 擁抱過去：相容於之前的 HTML 版本甚至 XHTML 語意：<header>, <footer>, <nav>, <aside>… 今天就用 HTML5 的新語意標籤 另外一方面，CSS3 其實只是更花俏而已 Web Programming 網際網路程式設計

26 CSS 優先順序 (specificity)
Web Programming 網際網路程式設計

27 Web Programming 網際網路程式設計
CSS 盒子模型 (box model) Web Programming 網際網路程式設計

28 CSS 定位 (float and position)
浮動既不是區塊也不是行內排版 #sidebar { float: left; width: 100px; } 一般來說，非浮動元素相對於它的父元素有一定的流動(flow)方式(依據區塊/行內等觀念) #element_id { position: relative; left: 100px; top 100px; } 想要精確定位某個元素 #element_id { position: absolute; left: 100px; top 100px; } 第三種定位可以把元素釘在螢幕上 #element_id { position: fixed; left: 100px; top 100px; } 以上這些觀念一定要實際操作才能體會 Web Programming 網際網路程式設計