Web design

web design WEI, HUANG e-Mail: [email protected]

Contents • Basic HTML TAGS、HTML5 • Attributes • Tools •
CSS • CSS3 • Bootstrap

如果你看到剛剛的目錄就開始想睡的話… • 那麼抱歉，我會盡量講得不讓你那麼想睡… • 接下來我會用造一部汽車流程的方式，比喻該怎麼寫 web… •
Ps.若各位比較喜歡我直接講解技術，而非用比喻的方式，可以於課堂上或私下告訴我。

其實我今天要交怎麼造車子… • 了解車子的零件… • 了解怎麼改車子的零件… • 了解該用什麼工具幫忙你造車… • 了解怎麼做出很漂亮的車…
• 了解怎麼做出比很漂亮還漂亮的車… • 請專家來幫我們造車…

What’s HTML ? (造車子) • HTML is a markup language
for describing web documents (web pages). • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content

A small HTML document: (一部車子) <!DOCTYPE html> 聲明這份文件格式為 html <html>
<head> <title>什麼也沒有的車</title> <link rel=“stylesheet” type=“text/css” href=“樣式檔路徑"> </head> <body> <h1>我是一台車</h1> <p>雖然你現在看不出來…</p> <script src=“腳本檔路徑”></script> PHP、ASP、JavaScript… </body> </html>

TAG 車子的零件…

TAG cont. Tag Description <b> 寬體 <del> 刪除線 <i> 斜體
<pre> 保留區塊內的空格、換行 <small> 小字體 <strong> 粗體 <u> 底線

TAG cont.

TAG cont. 繁多不及備載，請自行上 w3cSchool 查閱 jsfiddle

Symbols Symbol Html © © < ⁢ > > “
" & & 半形空白 more w3cSchool

Attributes 客製化的零件 • 想必前面大家已經學會了如何建立標籤，假設那麼今天必須設計一些客製化的區塊該如何做呢? 更改一張圖片的大小，並指定路徑指定區塊的位置、大小、邊界…

Attributes cont. 同樣的… 繁多不及備載，請自行上 w3cSchool 查閱

Style 一種裝上去會害你翻車的零件… • 這是一個標籤，同時也是一個屬性… • 你可以這麼用它 <style> css… </style> •
也可以這樣 <h1 style=“css…”>內容</h1>

(七傷拳)內功心法一練七傷，七者皆傷 • 第一式: 使用 css 對指定的區塊進行屬性設定。傷人七分,損己三分！ •
第二式: 在 html 標籤內增加屬性。 <input id=“name” type=“text”> <img src=“圖片路徑” width=“60” height=“80”>

但是呢，我建議這兩種都不要使用 • 還記得第一張投影片如何引入 css 檔案嗎 ? 請在撰寫 css 一律使用
link 引入外部檔案，在寫 js 時同樣請使用 script 去引入外部檔案，原因是… • W3C (world wide web) 老大說的

我知道這樣很沒說服力，但是… • 很多人喜歡在一份檔案裏面寫一大堆東西，把很簡單的功能寫成 2、3千行，把 html、php、js、css 全都寫在一頁… •
而且 script 還分好幾塊，css 跟屬性混合用… • 並且在 php 控制 BOM、DOM … • Ex: <h1 width=“50%” style=“width: 50px;”>…</h1>

如果你堅持使用混再一起… • 我只能跟你說 • 好吧! 如果你不怕翻車 • 一開始會不太習慣，當網頁功能與特效越寫越多時，你會慢慢發現這樣做真的比較好… 不論是
debug or 搞懂邏輯 • 如果我騙你，你可以去找我的組員，因為他們沒來…………….

HTML 與事件相關的元素 • 在 HTML 內對於每個標籤都有提供了一些相對應的事件提供使用，例如； – Body 中的
onload，即表示 body 區塊載入完成後需要處理的事件。 • 其他則還有: – onunload、onclick、ondblclick、onmousedown、 onmouseup、onmouseover、onmousemove、onkeypress、 onkeydown、onkeyup…

常見混淆的元素 • 許多初學者會將兩個元素給混淆； – div，這是一個用於制定一塊區塊的標籤，而在標籤內的內容將會自動換行。 – span，與 div 大致相同，而區別則在於其預
設為不換行。

絕對路徑與相對路徑 • 時常我們需要在 a、link、script…下指定路徑，而路徑分為絕對與相對兩種； • 絕對路徑，即字面意思，指哪向哪: – D://files//image//sun.png •
相對路徑則指稱目前檔案的位置，與欲指定檔案位置: – 目前我的 index.html 置於 D://files//html//index.html – 而相對與需要指定 sun.png 的位置，則為 ../image//sun.png D files html index.html Image sun.png

為什麼要發展 HTML5? • 在早期多數撰寫 HTML 的人都不遵守，W3C所制定的標準，因此出現許多雜亂無章、不符規格的網頁。 • 常見不符合的規格如下； –
元素的標籤名稱大小寫混雜。 – 元素沒有合理的被結束標籤給包覆。 – 元素中使用了屬性，卻沒有指定。 – 指定元素屬性時，而未使用引號。

為什麼要發展 HTML5? • 鑒於上述問題，因此 W3C 決定放寬政策，制定一套寬鬆標準，即 HTML5。 • HTML5
的標準十分寬鬆，不再提供文件定義。 • 以往於 HTML4 時必須撰寫: – <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> • 在支援 HTML 5 的瀏覽器下僅需撰寫: – <meta charset="UTF-8">

HTML5 中省略的屬性值 • HTML4: – <input type=“text” readonly=“readonly”> • HTML5:
– <input type=“text” readonly> • 諸如此類可省去的標籤還有； – readonly、disabled、selected、defer、ismap、nohref、 noshade、nowrap、multiple、noresize

XML 與 HTML 區分 • XML 是一種資料格式，常用於資料傳送。 • XML 下若非包裹性元素，則會在角括號
內以斜線結尾。 Ex: <我的家版本=“1.0“ /> • 而 HTML 5 下建議不要使用 XML 才需要的斜線 – <img alt=“沒有圖片”>

HTML5 特有的編輯模式 • 在 HTML5，為大多數的元素新增了一個屬性: contentEditable，若將該屬性的值設為 true，則表示該區塊為可編輯區塊。 • designMode，該屬性設定後，整個網頁所有
區塊都會變為可編輯，如同將所有元素加上 contentEditable 並設為 true。

HTML5 隱藏元素 • 若你有一個元素不想顯示，你可以在其屬性加上 hidden，並設為 true，則該屬性將隱匿，並且瀏覽器亦不會保留其所佔用的空間。 • spellcheck，是一項針對 textarea
的屬性，其作用為檢查使用者輸入的單字是否拼錯。

Web 2.0 語意化網頁 • <div id=“header”></div> • Vs • <header></header>
• 下者將具有較好的 SEO 效能

語意化的元素標籤 • Article – 表示一篇完整的文章，如 blog 文章、短文、回覆… • 使用
header 定義標題。 • 使用 footer 定義註腳。 • 使用 section 分割段落。 • 使用 article 作為附屬文章。

語意化的元素標籤 cont. • section 亦可由多個 article 組成一篇文章。 • section 中通常會包含至少一個由
h* 所定義的標題。 • section 內亦可嵌套多個 section，表示子區塊。 * section 與 article 的差異； – section 應用於區分不同的區塊。 – 而 article 則應側重於制定一塊獨立、完整的內容。

語意化的元素標籤 cont. • 其他語意區塊 – – nav，用於定義導覽列、側邊導覽列、底部導覽… – aside，頁面的附屬資訊，一般用於側邊欄。 –
header，頁面標題資訊，可包含多個 h*。 – footer，標註版權、資訊、作者等。 – figure，用於表示一塊獨立的「圖片區域」。

更方便的工具… • <time>、<date>、<calendar> • 早期以前的人很苦，想要一個小日曆唯一的做法就是自己寫 js … • 在後來有
jQuery 可以使用 jQuery ，但是還得寫一幾行… • 而現在你只需要用這個標籤即可使用

HTML 5 只有這樣? • 當然不只如此，除了新增標籤同時擴充了以下 API:

Elements Removed in HTML 5 會翻車不要用

我還是很想用那些被刪掉的可以嗎…? 部分瀏覽器已不支援。投資一定有風險，基金投資有賺有賠，申購前應詳閱公開說明書

meta • 在許多 html 格式中我們時常會見到 meta，其作用為指定一些 name-value 所對應的資訊，例如指定作者； – <meta
name=“author” content=“Frank”> • 這麼做將有助益搜尋引擎識別。 • 而 meta 還可以指定一項屬性 http-equiv，該項屬性的作用為向瀏覽器傳送一些有意義的資訊，幫助瀏覽器正確處理網頁的內容。

http-equiv • 指定網頁過期時間，若超過則從 server 從新下載。 – <meta http-equiv=“Expires” content=“Sat 27
16:12:36 CTS 2008> • 指定禁止瀏覽器存取離線內容。 – <meta http-eqiv=“Pragma” content=“no-cache”> • 過長時間自動更新，(超過兩秒)。 – <meta http-eqiv=“Refresh” content=“2;URL=http://www.google.com”> • 設定 Cookie • 設定字元

History

隨堂演練 (自己做一輛車) 請利用你所學會的標籤，設計一個介紹商品的頁面。條件: 必須包含十項不同的標籤，( html、head、link、 script、body 不算 ) 請使用
https://jsfiddle.net/ 製作。

常見的開發工具 • Editor – Notepad++ – vi / Emacs –
Atom – Visual Studio Code – Brackets • IDE – Aptana / eclipse – Dreamweaver – Frontpage • Online Editor – Jsfiddle – JS Bin – CodePen – codepad • Online IDE – Cloud 9 – Koding – Codinggroud – runnalbe

Sublime Text

客製化的 ST • 第一步輸入密技… • 第二步擇你所愛… • 第三步
改到喜歡為止…

Popular ST plugins • AutoFileName • Bootstrap Snippets • BracketHighLighter
• ConvertToUTF8 • CSScomb • DocBlockr • GitGutter • Handlebars • Hooks • Iconfont snippets • JavaScript Beautify • jQuery • JSHint Gutter • Libraries form CDN • MarkdownEditing • Material Theme • Nodejs • SFTP • SideBarEnhancements • Package Control

輔助工具 • Cmder • Lorem Ipsum • Chocolatey • Adobe
Kuler • Coolors

Browser • Chrome stable / beta / dev / canary
• Firefox • IE 8 / 9 / 10 / 11 / Edge • Safari • Opera

CSS 漂亮的車 • Css 是什麼? 基本上資管導論應該有交… 沒辦法我還是說一下廢話了 • CSS is
a stylesheet language that describes the presentation of an HTML (or XML) document.

CSS cont. • 寫 CSS 請先開一個 .css 副檔名的檔案 • 然後在裡面開始撰寫你要寫的
CSS 內容 • CSS 中有一項屬性 @import url(“位置”); – 該屬性作用為引入一個外部 css 檔，作用同 link，建議使用 link。

CSS cont.

CSS cont. body { background-color: lightblue; } h1 { color:
navy; margin-left: 20px; }

CSS cont. – Basic Selectors • Type 元素名稱 • Class
.class 名稱 • ID #ID 名稱 • Universal *所有的元素 • Attribute 所有符合[屬性=值]的元素 – Combinators • Adjacent sibling (A + B) A 接在 B 之後的元素 • General sibling (A ~ B) 前面有 A 的所有 B 元素 • Child (A > B) 父元素為 A 的所有 B 元素 • Descendant (A B) A元素中所有的 B 元素

CSS cont. – Pseudo-elements • ::after 元素後面插入新的內容 • ::before 元素前面插入新的內容
• ::first-letter、::first-line 該元素的第一個字、首行 – Standard pseudo-classes • :default 元素一開始的預設 • :focus、:visited 游標點下到下次點時、點過的 • :hover、:active 游標指到的連結、游標點下時 • :first-child、:last-child 首個&最後一個子元素 • :nth-last-child(an+-n) an:元素數量，-n 欲選取數量

CSS cont. properties selector – [attr=value] 屬性中符合value的元素。 – [attr~=value] 屬性中包含value的元素，必須有空格隔開。
– [attr^=value] 屬性中以value開頭的元素，可為連字。 – [attr|=value] 屬性中包含首個value的元素，可為連字。 – [attr$=value] 屬性中以value結尾的元素，可為連字。 – [attr*=value] 屬性中以包含value的元素，可為連字。

CSS cont. Color System • 色彩學上有許多種配色系統 – – RGB (三原色)
– CMYK (印刷四色) – HSL (色相、飽和度、亮度) – HSB、HSV (色相、飽和度、明度)

CSS cont. Color System • RGB (rgba) #000000 -> black
-> 0, 0, 0 #c0c0c0 -> silver -> 192, 192, 192 #ff0000 -> red -> 255, 0, 0 • HSL (hsla) 色相 hue、飽和度 saturation、亮度 lightness – H ∈ [0, 360） – s, l ∈ [0,1] mozilla

CSS cont. Color System RGB to HSL Ex: • #00
00 00 Max = min hsl(0, 0%, 0%) • #c0 c0 c0 • Max = min • L = ½ (192 / 255 + 192 / 255) • hsl(0, 0, 75) • #fc 80 3a -> 252, 128, 58 • 0.99, 0.50, 0.23 • Max = 0.99 min = 0.23 max = r, & g >= b, h = 21 l = 0.61 s = 0.76 / (2-1.22) = 0.97

CSS cont. Backgrounds

CSS cont. Backgrounds body { background: #00ff00 url("smiley.gif") no-repeat fixed
center; } The background-origin property specifies where the background image is positioned. The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

CSS cont. Borders p { border: 5px solid red; }

CSS cont. Margins p { margin: 2cm 4cm 3cm 4cm;
}

CSS cont. Margins

CSS cont. Paddings p { padding: 50px 30px 50px 80px;
}

CSS cont. Units (absolute)

CSS cont. Units (relative)

CSS cont. Box Model

CSS cont. Text

CSS cont. Font

CSS cont. @font-face

CSS cont. Links

CSS cont. Lists

CSS cont. Display • Block 每個元素會佔據一行 • Inline 不會佔據一行 •
Inline-block 不會佔行，但同時可指定width 與 height • None 隱藏元素，其不佔據空間 • Initial 使用預設 • inherit

CSS cont. Position

CSS cont. Position • There are four different position values:
– static – relative – fixed – absolute

CSS cont. Layouts • 兩欄式、三欄式 • 常見區塊 – header、container、main(content)、 footer、nav、sidemenu

CSS cont. float & clear • float 定義區塊如何浮動。 – left、right
• clear 是否允許該區塊旁有浮動區塊。 – none – left – right – both

CSS cont. media • @media 主用於制定設備類型獨有特性 • Syntax – @media
not | noly 設備類型 [ and 特性 ] • 當瀏覽器寬度超過 1000px 時 – @media screen and (min-width:1000px) • 當瀏覽器寬度小於 1000px 時 – @media screen and (max-width:480px)

CSS cont. Layouts index.html about.html product.html member.html news.html 在設計 CSS
時，會先設置一塊共用的版型，接著使全部子頁面套用，再各別為不同的子頁進行設計。

CSS cont. Third party & tools • Google Fonts •
Font awesome • Font library • CSScomb • W3C CSS Validation Service • W3C Markup Validation Service • Music open • 甘茶の音楽工房

CSS cont. Third party & tools • Spritepad • More…

CSS3 瀏覽器專用屬性 • CSS3 中因為部分屬性僅為預覽，而非正式，而部分瀏覽器則已支援，因此必須在這些屬性前加上特有的字首。 • -ms-，Microsoft •
-moz-，Mozilla • -o-，Opera • -webkit-，Webkit引擎(chrome、Safari)

CSS 中支援的角度表示法 • deg (degrees) • grad (gradian) • rad
(radians) • turn

CSS 中支援的角度表示法

CSS3 • 旋轉、位移、縮放、陰影、圓角 jsfiddle

CSS3 translate matrix • matrix(a,b,c,d,e,f) • X 平移 30，Y 平移
30，X、Y 縮放 1倍 – transform: matrix(1, 0, 0, 1, 30, 30); 參考資料參考資料二

如果我不懂 matrix 怎麼辦? • 可以問我嗎? • 不行!，因為我也不太懂! • 但是你可以問我朋友 google
大神...

CSS3 Transition 動畫 • transition-property (要變換的屬性) • transition-duration (平滑漸變持續的時間，要花多久完成)
• transition-timing-function (速度效果) – ease 一開始變慢，之後加速，再減速 – linear 線性，開始到結束維持不變 – ease-in 開始較慢，之後加快 – ease-out 開始速度快，之後變慢 – ease-in-out 開始較慢，之後變快，再減慢 • transition-delay (延遲後執行) 參考資料參考資料二

CSS3 Transition 動畫 • -moz-transition: background-color 4s linear; • -webkit-transition:
background-color 4s linear; • -o-transition: background-color 4s linear; • 多屬性同時變化 – -moz-transition: left 5s linear, top 5s linear; – -webkit-transition: left 5s linear, top 5s linear; – -o-transition: left 5s linear, top 5s linear;

CSS3 Transition 動畫

CSS3 利用貝茲曲線控制時間 • 剛剛所看到的幾種模式其實都是用貝茲曲線所代換出來的時間，因此你可以透過 cubic-bezier(cx1,cy1,cx2,cy2) 進行設定； –
等同於設定 ease – transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); • 線上產生貝茲曲線的工具

隨堂練習二 • 利用 translate 做一顆熱氣球往上飛或是火箭發射。 • 使用 jsfiddle

CSS3 Animation • animation-name • animation-duration • animation-time-function • animation-delay
• animation-iteration-count 執行次數 • animation • animation-direction 播放結束時使否以反方向撥放

CSS3 Animation @keyframes example { from {background-color: red;} to {background-color:
yellow;} } @keyframes { from | to | % { 起始 | 結束 | 進度 } }

CSS 3 Translate vs Animation • Translate – 用於指定對那些 CSS
採用動畫 • Animation – 適用於製作關鍵影格

CSS 學習 • 學習 CSS 版面配置 • Mozilla developer network
• w3cSchool • HTML5 rocks • 網頁藝術思考

隨堂練習三 • 做一個三排或雙排的網頁。並加入一些 css3 的特效。請參考 http://www.d10studio.com.mx/

bootstrap • 這一個第三方的網頁版型框架 • 為什麼我該用? 因為我相信就算是神人，也沒辦法，徒手煉鋼，乃至於造出車子，因此站在巨人的肩膀上開發我相信可以更快讓自己看得更遠… • 該如何使用? 引入
bootstrap 提供的 css link

引入 bootstrap • 透過 cdn 提供的內容 • 放入 link 內的
href • 或是去boostrap 下載回來 • 建議各位先用 cdn 的方式，未來將會教授如何用後端工具下指令統一下載第三方套件。

Min 版本跟一般版本有什麼不同? • 一般第三方 js 或是 css 套件，都會提供
min 與一般兩種版本 • 而 min 顧名思義就是輕量級的文件，因為 web 上的文件本身並非編譯過後的執行檔，而是在執行時透過瀏覽器解析，因此 min 是去除空白、換行，減少執行時間與傳送檔案的大小。 • 一般版則是未壓縮過的原始碼，一般這時下一句都會接有興趣的人可以進去研究…

一個標準的 bootstrap 網頁 RWD 的一些初始設定引入 bootstrap css 引入
bootstrap js，亦必須引入 jquery

Bootstrap 格線系統

Bootstrap 格線系統 cont.

Bootstrap components basic • Images • Jumbotron • Well •
Alert • Buttons • Forms • Tables • Label other • Progress bars • Pagination • Navbar • Dropdowns • Collapse • Carousel • Modal • Tooltip • Popover • Scrollspy

Bootstrap bootlint • Bootlint 是一個檢測工具，檢查該頁面是否符合 bs3 的設計，是否有語法不正確的問題。 Chrome
plugin

最後多參考別人的作品… • 但請注意不是抄作業…. • 很多人會說…，如果你剛開始不會寫，就去參考別人的，或抄一抄。 • 之前我有被抄作業的經驗，因此有人告訴我…

當然我們不能那麼庸俗… • 所以就要找幾個大師跟大神來幫忙我們從來不覺得偷別人的點子有什麼好可恥的。 -Steve Jobs 傑出的藝術家模仿，偉大的藝術家盜竊。(Good artists
copy, great artists steal.) - Pablo Picasso

上完課後我該幹嘛? • 做作業… 廢話 • 參考別人的作品，多練習自己做版型。 • ✘上靠北版靠北

作業 • 請將隨堂三加上 bootstrap 並自行發揮製作一個漂亮的網頁。注意事項 * 要使用 bootstrap
的網格系統切版型。 * css 與 html 要分開，名稱請勿隨便取。

作業二 • 自行發揮創意做一個線上記事本，本作業將於後幾周繼續使用。注意事項 *使用 contentEditable 進行設定。

Web design

Web design

More Decks by Frank

Other Decks in Programming

Featured

Transcript