使用 HTML、CSS 開發一個網站

網頁排版技巧 Part 1

Float 浮動定位技巧

<div class="wrap">
  <div class="box"></div>
  <div class="box2"></div>
</div>

.wrap{
  margin: 0 auto;
  width: 1000px;
}
.box{
  width: 200px;
  background: black;
  height: 50px;
  float: left;
}
.box2{
  width: 800px;
  background: pink;
  height: 50px;
  float: left;
}

使用時機: 元素和元素之間並排在一起的時候

使用 clear 清除浮動

<div class="wrap">
  <div class="header"></div>
  <div class="menu"></div>
  <div class="content"></div>
  <div class="clearfix"></div>
  <div class="footer"></div>
</div>

.wrap{
  margin: 0 auto;
  width: 1000px;
}
.header{
  height: 50px;
  background: red;
}
.menu{
  width: 200px;
  background: black;
  height: 50px;
  float: left;
}
.content{
  width: 800px;
  background: pink;
  height: 50px;
  float: right;
}
.clearfix{
  clear: both;
}
.footer{
  height: 50px;
  background: gray;
}

兩欄式、三欄式版面定位技巧

<div class="wrap">
  <div class="header"></div>
  <div class="main">
    <div class="menu">
    lorem*30
    </div>
    <div class="content"></div>
    <div class="clearfix"></div>
  </div>
  <div class="footer"></div>
</div>

.wrap{
  margin: 0 auto;
  width: 1000px;
}
.header{
  height: 50px;
  background: red;
  margin-bottom: 20px;
}
.main{
  margin-bottom: 20px;
}
.menu{
  width: 180px;
  background: black;
  color: #fff;
  float: left;
  padding: 10px 10px 10px 10px;
  margin-right: 10px;
}
.content{
  width: 790px;
  background: pink;
  height: 50px;
  float: left;
}
.clearfix{
  clear: both;
}
.footer{
  height: 50px;
  background: gray;
}

設計並排式選單

<div class="wrap">
        <div class="header"></div>
        <div class="topmenu">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於</a></li>
                <li><a href="#">旅遊</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">聯絡</a></li>
            </ul>
        </div>
        <div class="main">
            <div class="menu">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum modi quae, dignissimos fugit aut enim, amet repudiandae incidunt quidem iure provident minima magni minus deleniti autem! Asperiores delectus incidunt sequi?
            </div>
            <div class="content"></div>
            <div class="clearfix"></div>
        </div>
        <div class="footer"></div>
    </div>

/* CSS RESET */

.wrap{
    margin: 0 auto;
    width: 1000px;
}
.header{
    height: 50px;
    background: red;
    margin-bottom: 20px;
}
.topmenu{
    height: 50px;
    margin-bottom: 10px;
}
.topmenu li{
    float: left;
}
.topmenu li a{
    display: block;
    width: 200px;
    background: blue;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}
.topmenu li a:hover{
    background: orange;
}
.main{
    margin-bottom: 20px;
}
.menu{
    width: 180px;
    background: black;
    color: #fff;
    float: left;
    padding: 10px 10px 10px 10px;
    margin-right: 10px;
}
.content{
    width: 790px;
    background: pink;
    height: 50px;
    float: left;
}
.clearfix{
    clear: both;
}
.footer{
    height: 50px;
    background: gray;
}

LOGO 與選單並排設計技巧

<div class="wrap">
        <div class="header">
            <a href="#" class="logo">
                <img src="https://picsum.photos/id/248/150/100" alt="">
            </a>
            <ul class="topmenu">
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於</a></li>
                <li><a href="#">旅遊</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">聯絡</a></li>
            </ul>
        </div>
        <div class="main">
            <div class="menu">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum modi quae, dignissimos fugit aut enim, amet repudiandae incidunt quidem iure provident minima magni minus deleniti autem! Asperiores delectus incidunt sequi?
            </div>
            <div class="content"></div>
            <div class="clearfix"></div>
        </div>
        <div class="footer"></div>
    </div>

/* CSS RESET */

.wrap{
    margin: 0 auto;
    width: 1000px;
}
.header{
    height: 150px;
    background: red;
    margin-bottom: 20px;
}
.logo{
    float: left;
}
.topmenu{
    float: right;
    margin-top: 50px;
    margin-right: 20px;
}
.topmenu li{
    float: left;
    margin-right: 20px;
}
.topmenu a{
    color: #fff;
    text-decoration: none;
}
.main{
    margin-bottom: 20px;
}
.menu{
    width: 180px;
    background: black;
    color: #fff;
    float: left;
    padding: 10px 10px 10px 10px;
    margin-right: 10px;
}
.content{
    width: 790px;
    background: pink;
    height: 50px;
    float: left;
}
.clearfix{
    clear: both;
}
.footer{
    height: 50px;
    background: gray;
}

其他常見 clear 清除浮動效果

使用父元素增加清除浮動的語法，要清除浮動的內容就在父元素加上 clearfix 的 class，清除浮動的用法視情況來使用。

<div class="content clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

.content{
  background: orange;
  marin: 0 auto;
  padding: 30px;
  width: 500px;
}

.left{
  background: blue;
  height: 300px;
  width: 100px;
  float: left;
}
.right{
  background: red;
  height: 300px;
  width: 100px;
  float: right;
}
.clearfix:after{
  content:"";
  display: table;
  clear: both;
}

網頁排版技巧 Part 2

使用絕對定位 / 相對定位設計版型

使用時機：div 跟 div 區塊必需重疊在一起的時候。

程式碼

<div class="header">
  <div class="box"></div>
</div>

/* CSS Reset */
.header{
  width: 300px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.box{
  width: 100px;
  height: 100px;
  background: #000;
  position: absolute;
  right: 0;
  bottom: 0;
}

位置可以設定負值。

相對定位、絕對定位元素技巧: z-index -relative 、 absolute

z-index 是一種類似圖層概念。

使用方式：把 z-index 寫在絕對定位的地方。

<div class="header">
  <div class="box"></div>
  <div class="box2"></div>
</div>

/* CSS RESET */

/* CSS STYLES */
.header{
  width: 300px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.box{
  width: 100px;
  height: 100px;
  background: #000;
  position: absolute;
  right: 0;
  bottom: -10px;
  z-index: 10;
}
.box2{
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  right: -40px;
  bottom: -10px;
  z-index: 9;
}
.box3{
  width: 100px;
  height: 100px;
  background: pink;
  position: absolute;
  right: -20px;
  bottom: -50px;
  z-index: 30;

z-index 建議是1~30就好

簡報呈現相對定位跟絕對定位的技巧

.inner {
  position: relative;
}
.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
}

使用 ul li 設計產品列表

<div class="productList">
  <ul>
    <li>
      <img src="img/logo.png">
      <h2>A產品</h2>
      <span>$200</span>
    </li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
  </ul>
</div>

/* CSS RESET */

/* CSS STYLES */
.productList{
  width: 600px;
}
.productList img{
  width: 100%;
}
.productList li{
  float: left;
  width: 128px;
  height: 200px;
  border: 1px solid #000;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  padding-right: 5px;
  padding-left: 5px;
}
.productList li h2{
  font-weight: bold;
  color: blue;
  margin-bottom: 20px;
}
.productList li span{
  color: red;
  font-size: 20px;
}

絕對定位設計優惠價

<div class="productList">
  <ul>
    <li>
      <div class="sale">
        限時
      </div>
      <img src="img/logo.png">
      <h2>A產品</h2>
      <span>$200</span>
    </li>
    <li>
      <div class="sale">
        折扣城
      </div>
      <img src="img/logo.png">
      <h2>B產品</h2>
      <span>$150</span>
    </li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
    <li>1234</li>
  </ul>
</div>

/* CSS RESET */

/* CSS STYLES */
.productList{
  width: 600px;
}
.productList .sale{
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  color: #fff;
  padding: 8px;
}
.productList img{
  width: 100%;
}
.productList li{
  position: relative;
  float: left;
  width: 128px;
  height: 200px;
  border: 1px solid #000;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  padding-right: 5px;
  padding-left: 5px;
}
.productList li h2{
  font-weight: bold;
  color: blue;
  margin-bottom: 20px;
}
.productList li span{
  color: red;
  font-size: 20px;
}

position: fixed 技巧

<div class="box"></div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

.box{
  height: 150px;
  width: 150px;
  background: #000;
  position: fixed;
  right: 0;
  bottom: 0;
}

名片練習

LOGO 圖片檔、六角形。

名片練習

這邊提供一點建議：

.container 作為容器元素不要寫死高度，目的在於說日後裡面內容變多時，也可自適應延伸。同理 .card 也是。

切圖技巧

Photoshop 繪圖軟體下載流程。

備註

Photoshop 切圖流程

如何切出自己想要的圖片？

• 介面介紹: 工具列、圖層
• 切片工具→檔案→儲存為網頁用→PNG24→儲存→全部使用者切片→儲存
• 切片選取工具:可以做範圍修改、名稱更改

background 在 html 元素上載入背景圖片，設計寬高

<div class="box"></div>

/* CSS RESET */
/* CSS STYLES */
.box{
  width: 174px;
  height: 36px;
  background-image: url(../img/logo.png);
}

background-repeat: 將圖片重複顯示，repeat-x

<div class="box">
  <h2>對我們的課程有興趣嗎？<h2>
</div>

/* CSS RESET */
/* CSS STYLES */
.box{
  width: 1002px;
  height: 405px;
  background-image: url(../img/bg.png);
  background-repeat: repeat-x;
}
.box h2{
  color: #fff;
  font-size: 36px;
  text-align: center;
  padding-top: 20px;
}

background-repeat

切片圖片可以用較小的長寬。

• no-repeat
• repeat-x
• repeat-y

background-color: 與背景圖片的混用

程式碼一

<div class="box">
  <h2>對我們的課程有興趣嗎？</h2>
  <p>lorem1000</p>
</div>

/* CSS RESET */
/* CSS STYLES */
.box{
  width: 1002px;
  background-image: url(../img/bg.png);
  background-repeat: repeat-x;
  background-color: #009872;
}
.box h2{
  color: #fff;
  font-size: 36px;
  text-align: center;
  padding-top: 20px;
}

程式碼二

<div class="logo"></div>

.logo{
  width: 300px;
  height: 300px;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-color: red;
}

background-position: 移動 background 的位置

<div class="logo"></div>

.logo{
  width: 300px;
  height: 300px;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-color: red;
  background-position: right bottom;
}

background-position 設定

• right bottom
• 30px 30px
• 90% 90%

background 縮寫教學

<div class="logo"></div>

.logo{
  width: 300px;
  height: 300px;
  background: url(../img/logo.png) no-repeat red 90% 90%;
}

圖片取代文字技巧 – 以 logo 為例

<div class="header">
  <h1>
    <a href="#">Hex School</a>
  </h1>
</div>

/* CSS RESET */
/* CSS STYLES */
.header h1{
  float: left;
}
.header h1 a{
  background-image: url(../img/logo.png);
  width: 174px;
  height: 36px;
  display: block;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}

圖片種類介紹 ( gif、jpg、png )

• gif – 有透明效果，有動畫效果，只有256色
• jpg – 沒有透明效果
• png8 – 有透明效果，但只有256色
• png24 – 有透明效果

圖片並排範例

<div class="wrap">
  <div class="bar">
    <ul>
      <li class="facebook">
        <a href="#">
          <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/16/Facebook-icon.png" alt="fb">
          <span>粉絲團</span>
        </a>
      </li>
      <li class="twitter">
        <a href="#">
          <img src="https://philogb.github.io/assets/img/twitter.png" alt="twitter">
          <span>聯絡我們</span>
        </a>
      </li>
    </ul>
  </div>
</div>

/* CSS RESET */
/* CSS STYLES */
.wrap{
  margin: 0 auto;
  width: 500px;
}

.bar{
  height: 30px;
  background-color: #f6f6f6;
}
.bar ul{
  float: right;
}
.bar ul li{
  float: left;
  margin: 5px;
}
.bar li a{
  text-decoration: none;
  font-size: 16px;
}
.bar li img{
  margin-right: 5px;
  float: left;
}
.bar li span{
  float: left;
}
.facebook{
  border-right: 2px solid #cccccc;
  padding-right: 8px;
}
.facebook span{
  color: #4460a0;
}

圖片會多額外留白的處理方式

CSS

/* 方法一 */
img{
  display: block;
}
/* 方法二 */
img{
  vertical-align: text-bottom;
}
/* 方法三 */
img{
  vertical-align: bottom;
}

表格與表單設計技巧

認識 HTML 表格 (Table) 標籤

<table>
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
  </tr>
  <tr>
    <td>內容一</td>
    <td>內容二</td>
    <td>內容三</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

設計表格 (Table) 上的 CSS 樣式

比較常見的方式是在<table>標籤下class。

<table class="price">
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
  </tr>
  <tr>
    <td>內容一</td>
    <td>內容二</td>
    <td>內容三</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

程式碼一

/* CSS RESET */
/* CSS STYLES */
.price th, .price td{
 border: 1px solid #000;
}

.price th{
  padding: 10px;
  background: green;
  color: #fff;
}
.price td{
  padding: 10px;
}

程式碼二

/* CSS RESET */
/* CSS STYLES */
.price th, .price td{
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.price th{
  padding: 10px;
  background: green;
  color: #fff;
}
.price td{
  padding: 10px;
}

表格屬性設定

CSS

table{
  border-collapse: collapse;
  border-spacing: 0;
}

表單 (Form) 簡介

註冊服務、信箱，填寫資料。

如何寄送表單

表單的資料是透過程式語言 PHP、asp.net、ruby 來去把資料儲存到資料庫裡面去。

表單三劍客: Form、輸入欄位、 Submit

<form action="儲存的資料庫位置">
  <input type="text" name="mail">
  <input type="text" name="person">
  <input type="submit" value="下一步">
</form>

Form、Text、Submit 範例程式碼

<form action="index.html">
  <input type="text" name="Name">
  <input type="text" name="tel">
  <input type="submit" value="送出">
</form>

使用 label、placeholder 提升表單使用者體驗

<form action="儲存的資料庫位置">
  <label for="mail">電子郵件：</label>
  <input id="mail" type="text" placeholder="請輸入電子郵件" name="mail">
  <label for="person">姓名：</label>
  <input id="person" type="text" placeholder="請輸入姓名"  name="person">
  <input type="submit" value="下一步">
</form>

• label 的 for ，對應到 input 的 id
• input 的 name 是資料庫做傳遞溝通的動作

label、placeholder 範例程式碼

<form action="index.html">
  <label for="mail">電子郵件：</label>
  <input id="mail" type="text" placeholder="請輸入電子郵件" name="mail">
  <label for="person">姓名：</label>
  <input id="person" type="text" placeholder="請輸入姓名" name="person">

  <input type="submit" value="下一步">
</form>

表單元素: radio、 checkbox

<form action="index.html">
  <h2>性別</h2>
  <input type="radio" name="sex" value="male"> 男生
  <input type="radio" name="sex" value="women"> 女生
  <h2>興趣</h2>
  <input type="checkbox" value="movie" name="hobby"> 看電影
  <input type="checkbox" value="music" name="hobby"> 聽音樂
  <input type="checkbox" value="comic" name="hobby"> 看漫畫
  <br>
  <input type="submit" value="送出">
</form>

表單元素: select、textarea

<form action="index.html">
  <label for="birth">生日：</label>
  <select id="birth" name="birth">
    <option value="1900">1900</option>
    <option value="1901">1901</option>
  </select>
  <h2>內容：</h2>
  <textarea name="content" cols="30" row="10"></textarea>
  <br>
  <input type="submit" value="送出">
</form>

• option 的值是根據 value 傳到後端的程式碼或資料庫。
• select 是一個下拉式選單
• textarea 是多行文字欄位

使用 CSS 修改表單 (Form) 樣式

<form action="index.html">
  <input type="text">
</form>

input[type="text"]{
  border: 3px solid blue;
  color: red;
  border-radius: 10px;
  background-color: #000;
  padding: 5px 10px;
  font-size: 16px;
  width: 150px;
  height: 30px;
}

單欄 height 比較不會去設定。

<form action="index.html">
  <input type="button" class="btn" value="點選">
</form>

.btn{
  background: green;
  color: #fff;
  border: 1px solid red;
  border-radius: 5px;
  padding: 10px 30px;
  cursor: pointer;
}
.btn:hover{
  background: #000;
}

推薦框架 Pure.css

自行補充 – placeholder、focus樣式

HTML

<form action="index.html">
  <input class="form" type="text" placeholder="請輸入信箱" name="mail">
</form>

CSS

/* placeholder樣式 */
.form::placeholder{
  color: #006d77;
}
/* focus樣式 */
.form:focus{
  outline: 2px solid #012a4a;
}

css3 技巧

CSS3 圓弧效果

<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4">
  hello
</div>

.box-1{
  height: 150px;
  width: 150px;
  background: #000;
  border-radius: 30px;
}
.box-2{
  height: 150px;
  width: 150px;
  background: #000;
  border-radius: 50%;
}
.box-3{
  height: 150px;
  width: 150px;
  background: #000;
  /* 左上 右上 右下 左下 */
  border-radius: 30px 0 0 0;
}
.box-4{
  height: 150px;
  width: 150px;
  /* 一行文字 */
  line-height: 150px;
  background: #000;
  border-radius: 50%;
  border: 10px solid blue;
  text-align: center;
  color: #fff;
  font-size: 30px;
}

CSS3 漸層效果

<div class="box-1">
  <h2>對我們的課程有興趣嗎？
</div>
<div class="box-2"></div>
<div class="box-3"></div>

/* CSS RESET */
/* CSS STYLES */
.box-1{
  width: 1002px;
  height: 405px;
  background-image: url(../img/logo.png);
}
.box-1 h2{
  color: #fff;
  font-size: 36px;
  text-align: center;
  padding-top: 20px;
}
.box-2{
  width: 1002px;
  height: 405px;
  background: linear-gradient(#00644b, #009771);
}
.box-3{
  width: 1002px;
  height: 405px;
  background: red;
  background: -webkit-linear-gradient(left, red, yellow);
  background: -o-linear-gradient(right, red, yellow);
  background: -moz-linear-gradient(right, red, yellow); 
  background: linear-gradient(to right, red, yellow);
}

自行補充

linear-gradient – MDN Web Docs

CSS3 陰影效果

<div class="box"></div>

/* CSS RESET */
/* CSS STYLES */
.box{
  height: 200px;
  width: 200px;
  background: green;
  /* box-shadow: X軸 Y軸 柔焦效果 顏色
  box-shadow: 10px 10px 10px pink;
}

使用 can I use 查詢 HTML、CSS 瀏覽器兼容度

can I use

使用 Statcounter 瀏覽各國瀏覽器趨勢

Statcounter

讓你的網頁更專業

CSS 權重觀念

權重相同的時候，後面會覆蓋到前面的設定。

id 在網頁上原則上只會有一個，class 可以出現在很多的地方。

• HTML 標籤：1分
• class：10分
• id：100分
• 在 HTML 標籤直接寫上 style=””：1000分
• 在 CSS 設定寫上 !important ：10000分

如何規畫你的網頁結構

規劃網頁結構簡報

PSDtoHTML 流程介紹

Ps → HTML、CSS、JavaScript

• PS 切圖
• 版型規劃
• 網頁化

切圖細節

1. 使用切片工具切圖
2. 256色透明圖使用 png8 格式
   漸層陰影透明圖使用 png24 格式
   無透明圖片使用 jpg 格式
3. 了解 css background repeat 特性

記憶體管理

1. 減輕記憶體負擔
   
   ex：將時常需要修改與新增的元素另存在新檔案裡面，這樣便不用每次改東西還要等很久 psd 檔案才會開起來。

取名需具有語意化，可結合 css class 命名原則

1. logo.png
2. product-content.jpg
3. dot-home.gif

盡量使用 css 來設計頁面，降低圖片請求數量

1. CSS3 陰影、圓弧、背景漸層
2. 偽元素：:before、:after

圖片壓縮工具

TinyPNG

版型規劃

例如：下拉式選單美術好像沒提供、背景要切透明、不是系統預設字體，需與美術討論替代字型。

• h1
• .topbar
• .search
• .menu

• h1>a
• .topbar>.pull-left+.pull-right
• .search>input
• .menu>ul>li*5>a

可將psd列印下來用手寫的。

網頁化

開發工具

1. 語言：HTML+SASS
2. 編輯器：Sublime text 3
3. 小工具：FSCapture、CaputreColor
4. 偵錯工具：瀏覽器tools、PageSpeed
5. 載具：雙螢幕+Livereload

開發時間

1. 切圖：1小時
2. HTML+CSS：8小時(不連續)
3. JS：1小時

使用技巧

1. SASS CSS3
2. SASS Grid
3. Fixed layout
4. Table-cell layout
5. Border-radius
6. Js計算金額與數量

head 進階資訊設定

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>網站名稱</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  
  <meta name="description" content="網站描述文字" />
  <meta name="keywords" content="關鍵字一,關鍵字二,關鍵字三" />

  <meta property="og:title" content="FB的標題" />
  <meta property="og:description" content="FB的描述" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="FB上的網址" />
  <meta property="og:image" content="FB的圖片" />

  <link rel="stylesheet" href="css/all.css">

  <script type="text/javascript" src="js/all.js"></script>
</head>

head 常用語法

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>網站名稱</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

  <meta name="description" content="網站描述文字">
  <meta name="keywords" content="關鍵字一、關鍵字二、關鍵字三">

  <meta property="og:title" content="FB的標題">
  <meta property="og:description" content="FB的描述">
  <meta property="og:type" content="website">
  <meta property="og:url" content="FB上的網址">
  <meta property="og:image" content="FB的圖片">

  <link rel="apple-touch-icon" href="圖片路徑">

  <link rel="stylesheet" href="css/all.css">
  <script type="text/javascript" src="js/all.js"></script>
</head>

十種初學者常犯的錯誤

1. 第一名：class 語意命名過於怪異 class 命名可以非常自由，只要保持語意的正確性就 ok
2. 第二名：瘋狂包標籤買保險 網頁結構越乾淨越好， 初學者容易加太多標籤導致閱讀困難
3. 第三名：習慣寫死高度，導致網頁靈活度低 在區塊元素會自適應延伸的特定，有些時候你是可以只用 padding 留白搞定，不用都一定要寫死高度，日後新增內容還必須再調整高度一次
4. 第四名：不了解區塊元素特性，習慣寫死寬度 div 是區塊元素，會隨著自適應延伸寬度， 所以要大區塊上面不用全部都寫死寬度
5. 第五名：在跑迴圈的網頁元素上設定不同的 class 名稱 跟後端配合時，會從資料庫撈數筆資料並顯示在畫面時，不要每個標籤都客製化 class 名稱
6. 第六名：文字字型、大小在每個 class 都設定過一次 如果每個元素的字型都一樣時，可以直接在 body 設定就好
7. 第七名：網頁權重設計不佳 (h1、h2、div) 每段內容都要視權重標示清楚正確的網頁標籤， 優良的語意化網頁結構才有辦法讓搜尋引擎友善的收錄
8. 第八名：缺少使用者操作回饋 (hover、focus) 網頁是會被使用者玩弄的， 所以要設計一些回饋樣式提供給客戶
9. 第九名 Float、position、display 摻在一起做成撒尿牛丸，將元素並排好困難？ 亂 try 語法雖是一招，好好理解每個語法的特性才是王道！
10. 第十名：是世界奇觀！ 全部都用絕對定位、寫死高寬來排版 發揮創造力設計網頁非常棒！但使用絕對定位就必須將元素「釘」在版面上，要靈活推擠難上加難！

PSD練習

HTML 最終作業線上圖檔連結

網頁排版練習作業 – 個人履歷網頁設計

此版型是個人履歷網頁版型，
方便讓你回顧目前所會技能，每當你學會一個技術後，便可更新此網頁履歷，讓它與你一塊成長 🙂

圖片下載網址
線上檢視文件

Iconfinder: 免費下載 ICON 服務平台

Iconfinder

unsplash、Flickr: 免費高解析圖庫下載資源

先了解圖片的授權和可以的使用用途。

Unsplash
Flickr

開發多頁式網站實戰講解

前言介紹

環境架設

首頁 – index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多頁式環境架設</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <div class="wrap">
    <div class="header">
      <a href="index.html">首頁</a>
      <a href="course.html">課程</a>
      <a href="faq.html">問答</a>
    </div>
    <div class="content">
      首頁內容
    </div>
    <div class="footer"></div>
  </div>
</body>
</html

課程 – course.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多頁式環境架設</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <div class="wrap">
    <div class="header">
      <a href="index.html">首頁</a>
      <a href="course.html">課程</a>
      <a href="faq.html">問答</a>
    </div>
    <div class="content">
      課程內容
    </div>
    <div class="footer"></div>
  </div>
</body>
</html

問答 – faq.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多頁式環境架設</title>
  <link rel="stylesheet" href="css/all.css">
</head>
<body>
  <div class="wrap">
    <div class="header">
      <a href="index.html">首頁</a>
      <a href="course.html">課程</a>
      <a href="faq.html">問答</a>
    </div>
    <div class="content">
      問答內容
    </div>
    <div class="footer"></div>
  </div>
</body>
</html

/* CSS RESET */
/* CSS STYLES */
.wrap{
  width: 500px;
  margin: 0 auto;
}

.header{
  height: 50px;
  background: orange;
}

.content{
  padding: 30px;
}

.footer{
  height: 50px;
  background: pink;
}

Layout (佈局)

所謂的佈局，指的是網頁上的共通版型元素。

保持網頁靈活彈性的技巧

高度讓網頁自適應，不要寫高度，使用padding加留白首頁內容。

CSS 管理方法

建議用同一個 css 去做管理。

/* CSS RESET */
/* CSS STYLES */
/* Layout 共通佈局 */
/* Index CSS */
/* Course CSS */
/* FAQ CSS */

• 使用其他框架 CSS 時，初學階段可另外載入。
• 進階管理 CSS 時，將會以單一一個 CSS 做載入。

總結

1. 設計網頁、切圖
2. 規畫你的佈局 (Layout)
3. CSS 寫在一起，共同管理 (CSS reset、佈局 CSS、index、course、faq)

2020 新版

2020更新改版

學習 VS Code 編輯器操作、 Flex 教學，許多的「實作機會」、「 Flex 前端修練精神時光屋」。

2020 VS Code 網頁編輯器、HTML 基礎教學

安裝Chrome 瀏覽器

安裝 VS Code 編輯器

安裝 VS Code 套件 – 讓介面變成中文化

Extension – 擴充套件
Search: Chinese (繁體)

開始撰寫 HTML

撰寫 h1 標籤、 p 段落

CodePen 教學 – 將你的程式碼分享給別人

建立 HTML 環境

HTML 環境語法

插入圖片，了解圖片路徑規則

載入外部圖片方式

在網頁上加上 a 連結標籤

a 連結標籤屬性補充： rel 設定增加安全性

<a href="https://www.google.com.tw" target="_blank" rel="noopener noreferrer">a 連結 rel 設定</a>

段落 p 與連結 a 的混合應用

認識 ul li 列表標籤

HTML 標籤教學 – 小節作業

2020 CSS 常用語法

HTML 與 CSS 的差異

HTML	CSS
結構	樣式

插入 CSS 檔案，先寫一個 h1 讓文字變色

載入 CSS 檔案: link:css – 熱鍵

<h1>使用 HTML、CSS 開發一個網站</h1>

h1{
    color: blue;
    font-size: 36px;
}

CSS 寫法詳解介紹

選擇器{
屬性: 設定值;
屬性: 設定值;
}

新手常見 CSS 錯誤解析

• 單字拼錯
• 檔案載入錯誤，路徑錯誤
• 格式錯誤

錯誤可以使用Google Chrome 檢查除錯

HTML 標籤選擇器

• h1~h6
• p
• a

假字產生: lorem+tab、lorem+enter

擬態選擇器:hover

• HTML標籤:hover – 滑鼠滑過去有效果
• HTML標籤:active – 滑鼠按住不放有效果

類別選擇器

自訂、客製化樣式

<p class="style1">段落一</p>

.style1{
  color: red;
}

使用 CSS 優化文字排版

• 文字段落的設定
• 參考: 新聞網站

<h1>使用 HTML、CSS 開發一個網站</h1>
<p>Welcome to my new website.</p>

p{
    font-family: verdana;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    text-indent: 32px;
    letter-spacing: 2px;
    text-decoration: underline;
}

在 HTML 標籤上加上線條

• 線條 border
• 線條粗細 / 線條樣式 / 顏色
• 實心線條 solid
• 虛線線條 dashed
• 圓點線條 dotted

<h1>使用 HTML、CSS 開發一個網站</h1>
<p>Welcome to my new website.</p>

h1{
    border: 1px solid blue;
}

h1{
    border-bottom: 10px solid blue;
    border-right: 10px solid red;
    border-top: 10px solid yellow;
    border-left: 10px solid pink;
}

2020 使用 CSS 變更 HTML 標籤特性

網頁容器介紹

想學好網頁設計、網頁排版，要先了解容器。

網頁的排版都是有關於容器的設計。

CSS Reset – 清空瀏覽器預設樣式

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

display: block 區塊元素介紹

HTML 標籤的容器特性。

區塊元素: h1、p、ul、li

區塊元素:
盡可能占滿整個版面。
會另起一行來進行呈現。

display: inline 行內元素介紹

行內元素: a、span
span 本身不代表任何意思，點綴樣式、排版用的行內標籤

行內元素:
比較常用在段落裡面。
預設沒辦法設定寬高。

display 容器特性 – 區塊跟行內

div 與後代選擇器運用

div 沒有語意，單純拿來排版的標籤

後代選擇器運用如下:

<div class="style1">
        <a href="#">red</a>
        <a href="#">red</a>
        <a href="#">red</a>
    </div>
    <div class="style2">
        <a href="#">pink</a>
        <a href="#">pink</a>
        <a href="#">pink</a>
    </div>

.style1 a{
  color: red;
}
.style2 a{
  color: pink;
}

margin 產生外邊界距離

<div class="box">
  <h2>蓬萊間</h2>
  <p>該劇講述了身份成謎的男主白起、都市女孩林夏，以及光怪陸離的奇幻世界中，各種悲歡離合、愛恨情仇故事。</p>
  <p>該劇講述了身份成謎的男主白起、都市女孩林夏，以及光怪陸離的奇幻世界中，各種悲歡離合、愛恨情仇故事。</p>
  <p>該劇講述了身份成謎的男主白起、都市女孩林夏，以及光怪陸離的奇幻世界中，各種悲歡離合、愛恨情仇故事。</p>
</div>

.box{
	margin-left: 20px;
	border: 5px solid blue;
	width: 300px;	
}
.box p{
	margin-bottom: 30px;
}

區塊元素
盡可能佔滿整個空間，會依照父元素的寬度自適應延伸佔滿。

padding 產生留白距離

<div class="box">
  <h2>蓬萊間</h2>
  <p>該劇講述了身份成謎的男主白起、都市女孩林夏，以及光怪陸離的奇幻世界中，各種悲歡離合、愛恨情仇故事。</p>
  <p>該劇講述了身份成謎的男主白起、都市女孩林夏，以及光怪陸離的奇幻世界中，各種悲歡離合、愛恨情仇故事。</p>
  <p>該劇講述了身份成謎的男主白起、都市女孩林夏，以及光怪陸離的奇幻世界中，各種悲歡離合、愛恨情仇故事。</p>
</div>

.box{
	margin-left: 20px;
	border: 5px solid blue;
	width: 300px;
	padding: 10px;	
}
.box p{
	margin-bottom: 30px;
}

margin 、 padding 投影片介紹

• margin 向外推
• padding 向內推

Box Model (盒模型) 詳細介紹 ★★★

padding、border 有實際的長度和寬度。
margin 沒有實際的長度和寬度，在網頁上還是會呈現向外推的距離。

margin 0 auto 區塊水平置中

程式碼一

<div class="wrap"></div>

.wrap{
	width: 100px;
	height: 100px;
	background: #000;
	margin-left: auto;
	margin-right: auto;
}

程式碼二

<div class="wrap">
        <div class="header"></div>
</div>

.wrap{
	width: 100px;
	height: 100px;
	background: #000;
	margin-left: auto;
	margin-right: auto;
}
.header{
	width: 50px;
	height: 50px;
	background: red;
	margin-left: auto;
	margin-right: auto;
}

觀念: 高度要讓裡面內容自適應延伸，可以的話不要寫死高度。

text-algin 文字水平調整

<div class="footer">
  <p>文字水平置中</p>
</div>

.footer{
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  background: pink;
}

2020補充教材: 不想算盒模型的推擠?
試試 CSS3 box-sizing 吧!

預設: box-sizing: content-box;
使用: box-sizing: border-box;

* 全部的 HTML 標籤都可以擁有這個樣式。

*,*:before,*:after{
  box-sizing: border-box;
}

Flex 網頁排版技巧

Flex 排版技巧介紹

CSS3 彈性排版屬性 FLEX

FLEX 需要了解的

• 軸線的觀念
• 相關屬性
• 對齊方法

Flexbox Playground

CodePen 講解 Flex 技巧

CodePen

Flex 外層屬性 (container) 介紹上集

外層屬性

• display: 必備屬性
• flex-flow
  • flex-direction: 決定 flex 軸線
  • flex-wrap: 決定換行的屬性
• justify-content: 主要軸線的對齊
• align-items: 交錯軸線的對齊

內層屬性

• flex
  • flex-grow: 伸展比
  • flex-shrink: 收縮比
  • flex-basis: 絕對比
• order: 排序
• align-self: 單一個物件的交錯軸對齊

<div class="container">
  <div class="item">1</div>
  <div class="item item2">
    2
  </div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

/* CSS RESET */
.container{
  display: flex;
  background: #004466;
  width: 500px;
  margin: 0 auto;
  padding: 10px;
}
.item{
  width: 100px;
  background: #00ffa2;
  color: #004466;
  font-size: 36px;
  text-align: center;
  margin: 10px;
}
.item2{
  height: 300px;
}

Flex 外層屬性 (container) 介紹下集

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus ducimus nam delectus impedit incidunt voluptatum sed quisquam enim quos praesentium, ratione itaque sequi reprehenderit eaque nulla modi cumque beatae dolores!</div>
</div>

/* CSS RESET */
.container{
	display: flex;
	width: 500px;
	background: #004466;
	margin: 0 auto;
}
.item{
	background: #00ffa2;
	color: #004466;
	text-align: center;
	font-size: 36px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
}
.item1{
	width: 150px;
}
.item2{
	
}
.item3{
	width: 400px;
}

Flex 的特性

• 預設會並排
• 依照父元素的寬度自適應寬的比例
• 預設是等高，可以針對其中設定高度

主軸介紹 – 要熟練 Flex，必修軸線技巧

軸線的觀念

• 主軸 – 主軸起點→主軸終點
• 交錯軸

對齊方法

• flex-direction: row (default) : →
• flex-direction: row-reverse : ←
• flex-direction: column : ↓
• flex-direction: column-reverse : ↑

flex-direction – 決定 flex 軸線

<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>

/* CSS RESET */
.container{
	width: 500px;
	height: 400px;
	margin: 0 auto;
	background: #004466;
	padding: 20px;
	display: flex;
	flex-direction: row-reverse;
}
.item{
	width: 100px;
	background: #00ffa2;
	color: #004466;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 36px;
	text-align: center;
}

justify-content – 決定主軸對齊方式

對齊方法: 以 flex-direction: row (default) 為例

• justify-content: flex-start
• justify-content: center
• justify-content: space-around
• justify-content: flex-end
• justify-content: space-between
• justify-content: space-evenly

justify-content 是針對主軸對齊，不能說是水平置中。

Flex 六角線上模擬器

設計一個 Flex 並排選單吧!

排版練習: display: inline、block、flex

<ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關於</a></li>
  <li><a href="#">產品</a></li>
  <li><a href="#">服務</a></li>
  <li><a href="#">旅遊</a></li>
  <li><a href="#">美食</a></li>
  <li><a href="#">聯絡</a></li>
</ul>

/* CSS Reset */
.menu{
  width: 700px;
  margin: 0 auto;
  display: flex;
}
.menu li{
  width: 100px;
  text-align: center;
  border: 1px solid #000;
}
.menu li a{
  display: block;
  background: #00ffa2;
  color: #004466;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
}
.menu li a:hover{
  background: #004466;
  color: #00ffa2;
}

flex-wrap – 決定換行屬性

<ul class="menu">
        <li><a href="#">首頁</a></li>
        <li><a href="#">關於</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">服務</a></li>
        <li><a href="#">旅遊</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">聯絡</a></li>
</ul>

/* CSS Reset */
.menu{
	width: 600px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.menu li{
	width: 100px;
	text-align: center;
	margin-bottom: 20px;
}
.menu li a{
	display: block;
	background: #00ffa2;
	color: #004466;
	padding-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
}
.menu li a:hover{
	background: #004466;
	color: #00ffa2;
}

align-items – 交錯軸對齊方式

• align-items: flex-start
• align-items: center
• align-items: stretch
• align-items: flex-end
• align-items: baseline

透過 VS Code 插件，開啟一個即時預覽的 Web Server

安裝套件
Extenstions: Preview on Web Server

Flex 練習前置作業

主要是建立環境

<div class="wrap">
        <div class="header">
            <img src="img/logo.png" alt="">
        </div>
        <div class="content">
            
        </div>
        <div class="footer">
            <p>2020 Flex 網頁排版</p>
        </div>
</div>

/* CSS Reset */
.wrap{
	margin: 0 auto;
	width: 800px;
}

.header{
	margin-bottom: 30px;
}

.footer{
	background: gray;
	color: #fff;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

Flex 小節作業

Flex 精神時光屋

Flex 裡頭還可以包 Flex – 圖解教學

Flex 需了解的相關屬性

圖解說明

Flex 裡頭還可以包 Flex – 程式碼開發

使用 outline 方式標示寬度和高度

*{
	outline: 1px solid #ff4d6d;
}

Flex column 運用

Markman 軟體教學

Markman

Markman 章節補充

解決安裝 Adobe Air 發生 Adobe AIR.framework is damaged and can’t be opened ( 已損壞無法開啟 )

macOS安裝第三方軟體出現文件已損毀該如何解決？

這邊也提供另一款標註軟體給同學參考：PxCook

Flex 修練時光屋提交與自我檢核

Flex 關卡檢核要點

關卡共同注意點：

1. CSS 命名語意化
2. 外層 .wrap 可以設定 width, margin: 0 auto 讓版面水平置中
3. 連接都要記得加上 hover 效果，以提升使用者體驗哦
4. 區塊盡量不要寫死高度，如需留白可以使用 padding
5. 不要直接在 HTML 標籤上設定 CSS 樣式，因為一個網頁上有很多 h2, p，若寫死的話之後會需要互相覆蓋比較麻煩且不好管理。
6. 元素本身就是由上到下排列，所以內層 (標題、內文) 的區塊就不需要設定 flex。例如：第一關的三個區塊、第五關的中間區塊

部分關卡重點：

關卡五：

1. 第三個區塊建議使用 row-reverse，這樣就不需要調整 HTML 結構順序

關卡十：

1. 甜點類別非列表內容，請不要包在 ul li 中

以上提供各關卡檢核要點以及共同需要注意的細節

同學繳交作業前，可以先自我檢核看看哦

繳交時也請提出三個想給助教檢核的關卡，助教就會以這三關來做審核哩

Flex 修練時光屋提交作業注意事項

六角學院提供的線上圖片網址

• 關卡二 :
  • logo: https://hexschool.github.io/flexImgUrl/2/logo.png
• 關卡三 :
  • logo : https://hexschool.github.io/flexImgUrl/3/logo.png
  • pic : https://hexschool.github.io/flexImgUrl/3/pic.png
• 關卡四 :
  • logo : https://hexschool.github.io/flexImgUrl/4/logo.png
  • pic : https://hexschool.github.io/flexImgUrl/4/pic.png
• 關卡五 :
  • logo-big : https://hexschool.github.io/flexImgUrl/5/logo-big.png
  • logo-medium : https://hexschool.github.io/flexImgUrl/5/logo-medium.png
  • logo-small : https://hexschool.github.io/flexImgUrl/5/logo-small.png
• 關卡六 :
  • logo : https://hexschool.github.io/flexImgUrl/6/logo.png
  • pic : https://hexschool.github.io/flexImgUrl/6/pic.png
• 關卡七 :
  • headerLogo : https://hexschool.github.io/flexImgUrl/7/headerLogo.png
  • footerLogo : https://hexschool.github.io/flexImgUrl/7/footerLogo.png
• 關卡八 :
  • pic : https://hexschool.github.io/flexImgUrl/8/pic.png
• 關卡九 :
  • pic : https://hexschool.github.io/flexImgUrl/9/pic.png
• 關卡十 :
  • pic1 : https://hexschool.github.io/flexImgUrl/10/pic1.png
  • pic2 : https://hexschool.github.io/flexImgUrl/10/pic2.png
  • pic3 : https://hexschool.github.io/flexImgUrl/10/pic3.png

Flex 修練時光屋

1.並排卡片

2.雙欄排版

3.雙欄選單設計

4.表頭表尾設計

5.常見三種排版

6.圖文並排

7.首頁橫幅排版

8.圖文並排設計

9.訂單明細

10.產品列表