Skip to content

Latest commit

 

History

History
425 lines (273 loc) · 8.9 KB

20150924_1_slides.md

File metadata and controls

425 lines (273 loc) · 8.9 KB

title: 中興資訊社 社課 HTML & Bootstrap author: PastLeo & 杜杰

%%%%%%%%%%%%%%%%%%% % Use '%' to comment or directive (ex:css below)

%%%%%%%%%%%%%%%%%%% %% Add some inline style rules...

%css

.slogen_with_pic h2 { margin-top: 10%; }

.bigger_h2 h2 { margin-top: 15%; font-size: 3.5em; }

%end

%%%%%%%%%%%%%%%%%%% %% occupation of scale=1: %% x = 1200 %% y = 700 %% occupation of scale=2: [occupation of scale=1] * 2 %% x = 2400 %% y = 1400 %% occupation of scale=3: [occupation of scale=1] * 3 %% x = 3600 %% y = 2100 %% occupation of scale=4: [occupation of scale=1] * 4 %% ... %% the location of one step (slide) is originated from the center!

%% !SLIDE x=7500 y=-6000 z=-100 rotate=60 rotate-x=90 rotate-y=90 rotate-z=90 scale=2

%%%%%%%%%%%%%%%%%%% %% Here we go...

%%%%%%%%%%%%%%% !SLIDE x=0 y=0 scale=10

中興資訊社 社課 HTML & Bootstrap

給尚未接觸過程式的你/妳

%%%%%%%%%%%%%%% !SLIDE x=0 y=-7000 scale=10

開始學寫程式，為何從 Web (HTML) 開始？

%%%%%%%%%%%%%%% !SLIDE center slogen_with_pic x=-3000 y=-4750 scale=2

簡單 (A piece of cake)

piece_of_cake

%%%%%%%%%%%%%%% !SLIDE center slogen_with_pic x=0 y=-4750 scale=2

有呈現

photos?

%%%%%%%%%%%%%%% !SLIDE center slogen_with_pic x=3000 y=-4750 scale=2

Real Cross platform

cross platform

%%%%%%%%%%%%%%% !SLIDE unclickable x=0 y=-7000 scale=10

%%%%%%%%%%%%%%% !SLIDE center x=-12000 y=-7000 scale=10

HTML5

the Structure -- HTML

%%%%%%%%%%%%%%% !SLIDE center x=-7700 y=-9500 scale=4

首先

sublimetext

啟動我們的編輯器

%%%%%%%%%%%%%%% !SLIDE bigger_h2 x=-7700 y=-7300 scale=4

語法、起承轉合

%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center x=-7700 y=-7300 z=1600 rotate-x=-90 rotate-y=180 scale=4

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title!</title>
    </head>
    <body>
        <!-- Contents here ... I am comment! -->
    </body>
</html>

%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5500 scale=4

啥都沒有？

來加些東西吧

%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=1000 rotate-x=-90 scale=4

Header <h1> - <h6>

%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=700 rotate-x=-90 scale=4

Paragraph <p> ... </p>

%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=400 rotate-x=-90 scale=4

a ... hyber link ? <a href="#"> ... </a>

%%%%%%%%%%%%%%% !SLIDE x=-7700 y=-5100 z=100 rotate-x=-90 scale=4

image <img src="..." alt=""/>

%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-9500 scale=4

當然不會只有這樣

%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8200 scale=4

一些內建的簡單控制

文字的部分

%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8800 z=700 rotate-x=-90 scale=4

<strong> ... </strong>

%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8800 z=400 rotate-x=-90 scale=4

italic <i> ... </i>

%%%%%%%%%%%%%%% !SLIDE x=-16300 y=-8800 z=100 rotate-x=-90 scale=4

換行 <br />

%%%%%%%%%%%%%%% !SLIDE bigger_h2 x=-16300 y=-6500 scale=4

表格

%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center x=-16300 y=-6500 z=1600 rotate-x=-90 scale=4

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
    </tr>
    <tr>
        <td>row 2 col 1</td>
        <td>row 2 col 2</td>
    </tr>
</table>

%%%%%%%%%%%%%%% !SLIDE bigger_h2 x=-16300 y=-4400 scale=4

清單

%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center x=-16300 y=-4400 z=1600 rotate-x=-90 scale=4

<ul> <!-- unsorted list -->
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ol> <!-- ordered list -->
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>

%%%%%%%%%%%%%%% !SLIDE unclickable center x=-12000 y=-7000 scale=10

%%%%%%%%%%%%%%% !SLIDE center x=-12000 y=-7000 z=-12500 scale=10

事實上 ...

HTML5 的 Tag 多到說不完

Treasure

去網路上挖寶吧！

%%%%%%%%%%%%%%% !SLIDE center x=12000 y=-7000 scale=10

CSS

the Decoration - CSS

%%%%%%%%%%%%%%% !SLIDE x=16300 y=-9500 scale=4

我想應該有人覺得前面的東西想是在寫一個不直覺的 Word

還不能條字體大小顏色勒

%%%%%%%%%%%%%%% !SLIDE x=16300 y=-10100 z=1800 rotate-x=-90 scale=4

CSS 就是來幫助你的

用來詳細設定一個 HTML 元件的顯示方式

%%%%%%%%%%%%%%% !SLIDE x=16300 y=-10100 z=1200 rotate-x=-90 scale=4

設定方式

style="font-size: 24px; color: blue;"

%%%%%%%%%%%%%%% !SLIDE x=16300 y=-10100 z=600 rotate-x=-90 scale=4

通常都先用 Developer tool 改好

用 F12 or CMD+OPT+i 打開

改到滿意再貼回去 d(`･∀･)b

%%%%%%%%%%%%%%% !SLIDE unclickable x=16300 y=-9800 z=600 rotate-x=-45 scale=4

%%%%%%%%%%%%%%% !SLIDE x=16300 y=-7700 scale=4

文字用屬性

除了上面的大小顏色之外，還有粗體跟陰影等

font-weight: bolder; text-align: center;

%%%%%%%%%%%%%%% !SLIDE slogen_with_pic x=16300 y=-5900 scale=4

背景

background : [ color ] [ image-url ] [ repeat ] [ attachment ] [ position-x ] [ position-y ];

background : image-url [ repeat ] [ attachment ] [ position-x ] [ position-y ] [, image-url ...];

More info ...

%%%%%%%%%%%%%%% !SLIDE center x=16300 y=-4100 scale=4

關於 <div></div> 這個東西

常常用來裝元件、排版

%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center slide x=16300 y=-4000 z=1600 rotate-x=-90 scale=4

The Box model

box model

margin / border / padding

%%%%%%%%%%%%%%% !SLIDE x=16300 y=-3400 scale=4

定位 / 大小

position / width / height / top / left / right / bottom

%%%%%%%%%%%%%%% !SLIDE showOnlyWhenPresent center slide x=16300 y=-3400 z=1600 rotate-x=-90 scale=4

The Position

  • static (default): 就是原本的樣子，這時候上下左右是沒用的
  • absolute: 由 上下左右 絕對定位 於 上個有設定定位的元件
  • fixed: 由 上下左右 絕對定位 於 viewport
  • relative: 由 上下左右 偏移原本的位置

%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-9500 scale=4

其實還有更多更屌的屬性

Treasure

我絕對不是因為不想找圖所以用同一張的

自己去尋找吧！

%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-7800 scale=4

有東西叫做 class, id

讓你把 CSS 屬性整理在同個地方

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=1300 rotate-x=-90 scale=4

Step 1: 幫 HTML 加上 class / id 屬性

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=1000 rotate-x=-90 scale=4

Step 2: 加上下方 Tag，裡面就是用來寫 CSS

<style> /* css rules */ </style>

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=400 rotate-x=-90 scale=4

Step 3: 使用下方語法建立規則

css-selector { attributes ... } ...

%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-6500 scale=4

CSS selector !?

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=-400 rotate-x=-90 scale=4 rotate-y=180

直接寫 tag 就能選到 tag

body 選到 body ，你說我在講廢話嗎

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=-1000 rotate-x=-90 scale=4 rotate-y=180

. 選 class / # 選 id

不懂？ .my_box 選到 class="my_box"

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-7000 z=-1600 rotate-x=-90 scale=4 rotate-y=180

空白鍵往下選

.my_box p 選到 .my_box 裡面的 p

%%%%%%%%%%%%%%% !SLIDE x=7700 y=-6500 scale=4

 

More selector rules

%%%%%%%%%%%%%%% !SLIDE center x=7700 y=-4700 scale=4

寫成另一個檔案，用引入的方式讓 HTML 更乾淨

使用 <link rel="stylesheet" href="">

%%%%%%%%%%%%%%% !SLIDE unclickable x=12000 y=-7000 scale=10

%%%%%%%%%%%%%%% !SLIDE picture center x=0 y=7000 scale=10

js

<script> /* js code ... */ </script>

<script src="js_file.js" charset="utf-8"></script>

%%%%%%%%%%%%%%% !SLIDE picture center x=0 y=7000 z=-12500 scale=10

web stack

%%%%%%%%%%%% % image or resource source: % photos? http://www.zclub.com.tw/discuz/thread-113245-1-1.html (http://www.zclub.com.tw/discuz/data/attachment/forum/201204/29/135319ssnfgsvvsnsykosi.jpg) % cross platform http://designli.co/blog/its-time-to-go-cross-platform/ % html5 https://commons.wikimedia.org/wiki/File:HTML5_logo_and_wordmark.svg % green cat http://www.dailymail.co.uk/news/article-2871954/So-hiding-field-long-grass-Bulgaria-s-mysterious-green-cat-returns-vanishing-three-days.html % treasure http://bbs.comic.qq.com/thread-123475-1-1.html % CSS3 http://logonoid.com/css3-logo/ % web stack http://blog.teamtreehouse.com/progressive-enhancement-past-present-future