台中 Workshop 計畫:HTML 場

中興大學資訊科技研習社

finished launch

吃飽囉~

下午我們要來讓 Git 有實際的功用囉!

下午的主題

HTML5

http://semantic-ui.com

這邊強者雲集嗎?

請打開各位愛用的編輯器

Word 或是記事本(!? 拜偷別)

vim / atom / sublime text

第一步:HTML5 基本版型

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

放些元素在 body 裡頭吧

再加入些容器吧

CSS 簡單說明

很醜吧?

guly html

Semantic UI

來用別人寫好的 CSS 檔案!

俗話說萬丈高樓平地起,但是我們可以直接搭電梯!

引入別人寫好的 CSS 檔案!

semantic-ui 的網站裡遊走

The quickest http server

  1. 下載並安裝 NodeJS
  2. 打開 CMD ,輸入 npm install -g http-server
  3. 在 windows 上,按著 shift 按右鍵選 在此處開啟命令提示視窗 (或 cd 你的目錄) 然後輸入 http-server

Semantic UI 提供的一些比 HTML 原始好用元件

Semantic UI 提供的一些比 HTML 原始好用容器

Semantic UI 提供的一些原本 HTML 沒有的東西

Semantic UI 的排版用容器

在這之前,有個很重要的概念:

RWD

Semantic UI 的排版用容器

開始動手!

由助教們提供樣本讓大家開始做囉

有問題都可以問助教

教學資源:http://ppt.cc/rIbyS

來跟早上的 Git 結合囉,這樣才能把自己的網站弄上去!

DEMO 時間!

都弄好了嗎?

有沒有自願?

謝謝大家今天的參與!

presents

台中 Workshop 計畫:HTML 場

中興大學資訊科技研習社