Server&Client

HTTP method

• GET
• POST
• PUT
• DELETE

老師沒告訴你的事...

你以前聽過 前端工程師 嗎？

以前只有網頁工程師

前端工程師怎麼來的？

網頁應用程式化

Single Page Application

補充

HTTP 2.0

Sublime Text 3 

先下載軟體

• 免費跟付費有什麼不同？

  • 功能完全一模一樣，只是免費版會一直跳出訊息問你要不要購買

Package Control

用來安裝、管理 Sublime 套件的管理員

安裝方法：

        透過快捷鍵 ctrl + ` 開啟主控台命令列中，貼上下列程式碼並直接按下 Enter 執行。

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

使用 Package Control

Windows: Ctrl + shift + P
Mac: Command ⌘ + shift + P

先安裝幾個套件

• Emmet

• AutoFileName

• HTML-CSS-JavaScript Prettify

推薦套件

• Emmet

• Babel

• Babel Snippet

• ES6-Toolkit

• Sass

• Color Picker

• Seti-UI

• JSHint Gutter

• AutoFileName

• HTML-CSS-JavaScript Prettify

• Color Hightlighter

HTML

Tag

DOM Tree

HTML 5 語意化標籤

• <article>
• <aside>
• <footer>
• <header>
• <nav>
• <section>

推薦書籍：
別再說你不懂 HTML5

CSS

Selector

選擇器

• ID (#id)
• Class (.class)
• Type (即HTML標籤,如div)
• 鄰接選擇器 (如: h2+p，僅作用於鄰接h2的p元素)
• Child (如: li>ul)
• Descendant (如:ul a)
• Universal (*)
• 屬性 (如: [type="text"])
• 摸擬類別/元素 (如: a:hover)

CSS Selector 練習

撰寫有效率的 Selector

參考： http://stevesouders.com/

<ul class="menu">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

.menu li {
	
}

.menu .menu__item {
    //一堆屬性
}

有效率的方式

<ul class="menu">
	<li class="mneu__item"></li>
	<li class="mneu__item"></li>
	<li class="mneu__item"></li>
	<li class="mneu__item"></li>
	<li class="mneu__item"></li>
</ul>

CSS 版面配置

水平置中

#main { 
  width: 200px;
  margin: 0 auto;
}

Box Model

.simple {
  width: 300px;
  margin: 20px auto;
}

.fancy {
  width: 300px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Box Model

.simple {
  width: 300px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 300px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}

block? inline?

補充

CSS 權重

Reset CSS

RWD
(Responsive Web Design)

• Bootstrap

• Susy

作業

三角形應用

水平 Menu

擬物 Button