JinJin 的視覺設計專區 - 網頁設計與語法（HTML/CSS） http://mepopedia.com/forum/list.php?804 Thu, 30 Apr 2026 18:49:34 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,90222,90222#msg-90222 [講義] Google Fonts 網路中文字型應用 http://mepopedia.com/forum/read.php?804,90222,90222#msg-90222
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音

1. Google Fonts 網路中文字型


Google Fonts 2. cwTeXYen (Chinese Traditional) 圓體字體
3. cwTeXFangSong (Chinese Traditional) 仿宋體字體
4. Noto Sans TC (Chinese Traditional) 黑體字體（思源黑體）
5. cwTeXMing (Chinese Traditional) 明體字體

不過，目前在  Google Fonts 網站上還找不到這 5 個字體 ，因為這 5 個字型目前是被放到 Google Fonts Early Access （測試版）的地方。
下載網址：

Google fonts：Noto Sans TC (Chinese Traditional) 黑體（思源黑體）

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family:"Noto Sans TC", sans-serif;








3. 使用Google fonts圓體字型


Google fonts：cwTeXYen (Chinese Traditional) 圓體字型

@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
font-family: "cwTeXYen", sans-serif;










4. 使用Google fonts仿宋字型


Google fonts：cwTeXFangSong (Chinese Traditional) 仿宋體字型

@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
font-family: "cwTeXFangSong", serif;





5. 上課影音


https://youtu.be/yAWYTy3DJL8
]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 10 Dec 2019 21:15:38 +0800 http://mepopedia.com/forum/read.php?804,90217,90217#msg-90217 [講義] RWD多頁網頁編輯 (四) 相簿設定 / 聯絡我們 http://mepopedia.com/forum/read.php?804,90217,90217#msg-90217
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音

6. 期末範例


上課期末作業範例線上瀏覽--相簿



8. 相簿


選擇其中適合的相簿頁設計型式，作為期末作業相簿頁設計

1. 滿版型相簿（四欄）

html+css語法解析











2. 一般型相簿（四欄）

html+css語法解析



9. RWD-聯絡我們 / 地圖設定


https://www.google.com.tw/maps/@24.9240519,121.0451895,15z?hl=zh-TW




html+css語法解析




10. 上課影音


https://youtu.be/xdzf7w4Qh3c
]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 10 Dec 2019 10:09:49 +0800 http://mepopedia.com/forum/read.php?804,90193,90193#msg-90193 [講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 / http://mepopedia.com/forum/read.php?804,90193,90193#msg-90193
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音

11. 期末範例


上課期末作業範例線上瀏覽



13. 期末作業須製作之頁面


1.首頁，包含導覽列之介紹頁、列表頁、文章頁、相簿列表頁等
2.介紹頁：了解大概的內容
3.列表頁（分為圖片列表頁與文字列表頁）：介紹內容之列表頁面
4.文章頁（分為有圖片與無圖片）：為介紹之內容主頁
5.相簿列表頁（點開放大、幻燈輪播）
6.聯絡我們

14. 內容列表頁


選擇其中適合的列表頁設計型式，至少一種作為期末作業列表頁設計

1. 文字標題列表（圖文）

html語法解析


html+css語法解析


2. 圖文列表（以圖為主）

html+css語法解析


3. 分類式圖文列表

html+css語法解析







15. 文章內容頁


選擇其中適合的文章內容設計型式，作為期末作業文章內容頁設計

1. 圖文並茂編排內容頁

html+css語法解析





2. 單欄式圖文內容頁

3. 單純文字內容頁

4. 圖文左右編排內容頁


16. 麵包屑breadcrumb



麵包屑提供了導航功能，提供網頁間之關係路徑，並增加網頁親和性
在文章內容主頁中，通常會有麵包屑breadcrumb，提供文章路徑，說明所在位置，並方便返回前面位置

如：
列表頁：https://www.gvm.com.tw/category/world_focus


文章頁與麵包屑
https://www.gvm.com.tw/article/69594






17. 上課影音


[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
https://youtu.be/K5Eol6qjXCE
]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 26 Nov 2019 00:13:41 +0800 http://mepopedia.com/forum/read.php?804,90180,90180#msg-90180 [講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video http://mepopedia.com/forum/read.php?804,90180,90180#msg-90180
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音
  27. 18. 本單元範例下載
  28. 18.1 head需修改之項目
  29. 18.2 skins/css/網頁主色設定
  30. 18.3 等待動畫page-loader
  31. 18.4 Toggle navigation行動版導覽列/桌機版logo圖檔
  32. 18.5 導覽列設定/navbar/dropdown
  33. 18.6 首頁video影片設定 / videowrap影音區塊 / script
  34. 19. 上課影音

18. 本單元範例下載



[color=#FF1493]✱[/color] [url=http://mepopedia.com/~jinjin/ex/rwd-video.zip]範例下載[/url]

學長姐參考範例：



2. skins/css/網頁主色設定




skin / [color=#CC0066]mycolor.css[/color] 網頁主色設定


使用搜尋快速鍵Ctrl+F(或搜尋與取代Ctrl+shift+F) 將原來色碼替換成欲取代的色碼





3. 等待動畫page-loader


等待動畫，可自行設計gif動畫後替換

<div class="page-loader"> <img src="assets/img/loader.gif" alt=""> </div>

4. Toggle navigation行動版導覽列/桌機版logo圖檔




行動版導覽列logo文字及圖示設定



5. 導覽列設定/navbar/dropdown





導覽列原始碼位置










6. 首頁video影片設定 / videowrap影音區塊 / script




html /script導覽列原始碼位置





html 影片代碼位置修改

?

19. 上課影音


[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
https://youtu.be/ZfnETBim57c

]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 19 Nov 2019 23:19:36 +0800 http://mepopedia.com/forum/read.php?804,89087,89087#msg-89087 [講義] Figma資源分享 http://mepopedia.com/forum/read.php?804,89087,89087#msg-89087
1.作業二連結範例
https://www.figma.com/file/JPhJ1ZQLQSgPz9J31KyrwyEA/3-elements
（以此元素製作新的版面設計）

2. Keynote講義:
https://www.figma.com/file/gDlzx0U0sUl7tCgdMP2vwCJX/class-2-keynote

3. Icon資源
https://www.figma.com/file/6xFJGdE547OGIpbs5RkNl5/fontAwesome-5-icons-Copy]]> JinJin 網頁設計與語法（HTML/CSS） Fri, 22 Mar 2019 13:49:26 +0800 http://mepopedia.com/forum/read.php?804,16668,88602#msg-88602 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,88602#msg-88602 2.設計概念與製作心得：
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?]]> 1065445010 網頁設計與語法（HTML/CSS） Thu, 08 Nov 2018 11:03:37 +0800 http://mepopedia.com/forum/read.php?804,16668,88468#msg-88468 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,88468#msg-88468 網頁設計]]> didi7777 網頁設計與語法（HTML/CSS） Wed, 26 Sep 2018 13:36:07 +0800 http://mepopedia.com/forum/read.php?804,18062,88465#msg-88465 Re: [CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作 http://mepopedia.com/forum/read.php?804,18062,88465#msg-88465 網頁設計]]> didi7777 網頁設計與語法（HTML/CSS） Wed, 26 Sep 2018 13:31:10 +0800 http://mepopedia.com/forum/read.php?804,87725,88008#msg-88008 Re: [講義] EDM/Newsletter製作 http://mepopedia.com/forum/read.php?804,87725,88008#msg-88008
設計概念：我希望為自己喜歡的遊戲做一個推廣
製作心得:雖然自己電腦版本是cc版，全是英文看不太懂，但我還是做完啦，英文真的是我人生中的一大阻礙]]> 1045445134 網頁設計與語法（HTML/CSS） Wed, 02 May 2018 17:31:09 +0800 http://mepopedia.com/forum/read.php?804,87905,87905#msg-87905 [講義] OnePage網頁實作解析(二）相片分類與燈箱效果、地圖設定 http://mepopedia.com/forum/read.php?804,87905,87905#msg-87905
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音
  27. 18. 本單元範例下載
  28. 18.1 head需修改之項目
  29. 18.2 skins/css/網頁主色設定
  30. 18.3 等待動畫page-loader
  31. 18.4 Toggle navigation行動版導覽列/桌機版logo圖檔
  32. 18.5 導覽列設定/navbar/dropdown
  33. 18.6 首頁video影片設定 / videowrap影音區塊 / script
  34. 19. 上課影音
  35. 20. 相片分類與燈箱效果prettyPhoto
  36. 20.0.1 相簿分類語法說明
  37. 20.0.2 相簿分欄語法說明
  38. 20.0.3 CSS語法說明
  39. 21. 地圖設定
  40. 22. 課程影片

20. 相片分類與燈箱效果prettyPhoto



延續同一OnePage範例
線上範例


html

<ul class="controls"> <li class="filter" data-filter="all">Show All</li> <li class="filter" data-filter="webdesign">We Design</li> <li class="filter" data-filter="printing">Printing</li> <li class="filter" data-filter="development">We Development</li> <li class="filter" data-filter="seo">SEO Optimization</li> </ul>

<li class="mix webdesign col-sm-4"> <a href="images/image_820x620.jpg" data-rel="prettyPhoto">
 <img alt="" src="images/image_550x480.jpg" class="img-responsive"><span>Eligendi optio cumque</span></a> </li>

2. 相簿分欄語法說明


webdesign為分類。
col-sm-4為分欄大小，重複三組，目前為三欄。若要調整成四欄，可修改為四組col-sm-3
準備兩張照片，一為顯示大小550x480，一為燈箱照片大小820x620。
class="img-responsive" 響應式圖片，圖片會隨著螢幕大小縮放。

照片分類HTML圖解（col-sm-4 三欄）


照片分類網頁示意（col-sm-4 三欄）


 


照片分類HTML圖解（col-sm-3 四欄）


照片分類網頁示意（col-sm-3 四欄）


 

3. CSS語法說明


滑鼠移過後，照片區塊呈現透明色塊效果


CSS部分可以按右鍵，選擇『檢查』觀察原始碼位置


或至style.css檔案中 
Ctrl+F 搜尋 Grid 或 workArea 
 

#workArea ul#Grid li a {
 display: block; color: #fff; background: #E67E22; font-weight: 700; text-transform: uppercase; 
} #workArea ul#Grid li a:hover img { opacity: 0.2;
 }
圖片設定連結後之底色設定：background: #E67E22;
圖片設定連結後，滑鼠移過後所顯示之底色透明度設定： opacity: 0.2;


prettyPhoto-jCarousel和lightbox的混合應用套件

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

jCarousel網站圖片展示

https://sorgalla.com/jcarousel/

https://www.tellustek.com/web-design/163-jquery-slide-jcarousel

lightbox燈箱效果




html


 <div style="margin-top:-30px;"> <iframe class="gmap" style="width:100%; height:500px; margin:0px; border:0px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3618.367960538061!2d121.05275031483811!3d24.919531849024906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468303d0cc14615%3A0x63a5462452de09bb!2z5Lit5ZyL56eR5oqA5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1524065033383" width="600" height="450" frameborder="0" style="border:0" allowfullscreen> </iframe>
地圖區域高度設為500px，寬度100%

22. 課程影片


https://youtu.be/aGO1GQxbwTI

]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 19 Apr 2018 00:03:11 +0800 http://mepopedia.com/forum/read.php?804,87859,87859#msg-87859 [講義] OnePage網頁實作解析(一)輪播圖-Grid System格線系統 http://mepopedia.com/forum/read.php?804,87859,87859#msg-87859
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音
  27. 18. 本單元範例下載
  28. 18.1 head需修改之項目
  29. 18.2 skins/css/網頁主色設定
  30. 18.3 等待動畫page-loader
  31. 18.4 Toggle navigation行動版導覽列/桌機版logo圖檔
  32. 18.5 導覽列設定/navbar/dropdown
  33. 18.6 首頁video影片設定 / videowrap影音區塊 / script
  34. 19. 上課影音
  35. 20. 相片分類與燈箱效果prettyPhoto
  36. 20.0.1 相簿分類語法說明
  37. 20.0.2 相簿分欄語法說明
  38. 20.0.3 CSS語法說明
  39. 21. 地圖設定
  40. 22. 課程影片
  41. 23. 期中作業OnePage示範範例下載
  42. 23.1 html lang 語系與字元編碼設定
  43. 23.2 什麼是 meta tag ?
  44. 24. 輪播圖Flexslider / Jumbotron
  45. 24.1 Flexslider－－方便好用的圖片輪播、滑動切換套件
  46. 24.2 OnePage輪播圖範例語法
  47. 25. Grid system 網格系統
  48. 25.1 Grid system 網格系統概述
  49. 25.2 官方網站範例
  50. 25.3 960 網頁格線排版系統
  51. 26. 課程影片

23. 期中作業OnePage示範範例下載


以下說明與練習皆以本範例為主
線上範例
其他語言的標示法：
en 英文
zh-Hans 簡體中文
zh-Hant 繁體中文
zh-Hant-TW 臺灣使用的繁體中文

2. 什麼是 meta tag ?


是網頁中的一個標籤，主要是用在 head 的區段，告訴訪問者的瀏覽器關於這個網頁的一些資訊，常見的有：
charset：定義這個網頁的語言，通常繁體中文的網頁是 big5,簡體是 gb2312,但現在常用 UTF-8
description：對這個網頁的敘述，可以寫一段文字來敘述本頁的一些說明。
keywords：關鍵字，與這個網頁相關的關鍵字有哪些。



 <meta charset=“utf-8"> 
 語言編碼

 

<meta name="viewport" content="width=device-width, initial-scale=1”>
 螢幕解析度寬度



 <meta name="description" content=“">
 網站描述



 <meta name="author" content=“">
 作者


24. 輪播圖Flexslider / Jumbotron


1. Flexslider－－方便好用的圖片輪播、滑動切換套件


大圖輪播已經是許多網站的常見功能了，呈現的圖片也常常代表著網站的風格意象，展現網站的主視覺，除了在剛進入網站的時候能夠立即吸引使用者的目光以外，還可以搭配炫目的動畫達成一定的互動效果。
此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js，可以到Flexslider官網下載資料夾。

一款輕量極的、靈活的元件，可視情況擴張到整個區域以顯示您網站的關鍵行銷資訊。
請依尺寸規格，可以自行增加適當的輪播圖片，修改文字描述等。並可試著修改輪播語法。

2. OnePage輪播圖範例語法


HTML



 <!-- start main area --> <section id="mainArea"> <!-- start main slider --> <div class="flexslider" id="main-slider"> <ul class="slides"> <li> <div class="bg-img" style="background-image: url(images/image_1900x1200.jpg);"> <div class="jumbotron"> <div class="container"> <h1 class="banner_header"><span>Welcome <cite> to</cite> My World</span></h1> <div class="hline"></div> <p class="banner_header">Looking forward to knowing more complete yourself</p> <p><a href="#aboutArea" class="btn btn-outline-inverse btn-lg"><i class="fa fa-chevron-down"></i></a></p> </div> </div> </div> </li> <li> <div class="bg-img" style="background-image: url(images/image_1900x1200.jpg);"> <div class="jumbotron"> <div class="container"> <h1 class="banner_header"><span>Welcome <cite> to</cite> My resume</span></h1> <div class="hline"></div> <p class="banner_header">Looking forward to seeing more of the inner world</p> <p><a href="#aboutArea" class="btn btn-outline-inverse btn-lg"><i class="fa fa-chevron-down"></i></a></p> </div> </div> </div> </li> <li> <div class="bg-img" style="background-image: url(images/image_1900x1200.jpg);"> <div class="jumbotron"> <div class="container"> <h1 class="banner_header"><span>Welcome <cite> to</cite> My Collection</span></h1> <div class="hline"></div> <p class="banner_header">Going forward, tomorrow will be better</p> <p><a href="#aboutArea" class="btn btn-outline-inverse btn-lg"><i class="fa fa-chevron-down"></i></a></p> </div> </div> </div> </li> </ul> </div> <!-- end main slider --> </section> <!-- end main area --> 目前為三個輪播圖，可自行複製新增或刪除輪播圖數量。
單一一組輪播圖html語法
<li> <div class="bg-img" style="background-image: url(images/image_1900x1200.jpg);"> <div class="jumbotron"> <div class="container"> <h1 class="banner_header"><span>Welcome <cite> to</cite> My World</span></h1> <div class="hline"></div> <p class="banner_header">Looking forward to knowing more complete yourself</p> <p><a href="#aboutArea" class="btn btn-outline-inverse btn-lg"><i class="fa fa-chevron-down"></i></a></p> </div> </div> </div> </li>


CSS
與替換整個網站色彩，輪播圖下方色快可至
flexslider.css第61行修改
.flex-control-paging li a.flex-active { background: #48C6CD; cursor: default; }
若欲修改CSS語法，可在瀏覽器下預覽時，滑鼠指載譽檢查的位置，按右鍵，選擇『檢查』或『檢閱元件』，即可觀察要改的檔案與CSS項目





25. Grid system 網格系統


1. Grid system 網格系統概述


Bootstrap 提供了一套響應式、行動裝置優先的網格系統，隨著螢幕（viewport）尺寸的增加，系統會自動分為最多12列。它是一種用於快速創建一致的佈局和有效地使用HTML 和CSS 的方法。

Grid system 其實是一種平面設計方法與風格，它藉由固定的格子切割版面來設計佈局方法。
運用在網頁則是把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙。grid system 主要是由欄（column）與間隙（ gutter ）所組成，另外為視覺舒適度，不會將元素填滿整個頁面，會在兩旁留白（grid padding），最後所有的欄、間隙與留白的寬度加總起來要等於預計設計頁面的總寬。

超小設備（手機，小於768px） */
Mobile – xs ( < 768px )/*
.col-xs-
/* 小型設備（平板電腦，768px 起） */
Tablet – sm ( 768~991px )
.col-sm-
/* 中型設備（筆記型電腦，992px 起） */
Desktop – md ( 992~1200px )
.col-md-
/* 大型設備（大台式電腦，1200px 起） */
Large Desktop - lg ( >= 1200px )
.col-lg-

2. 官方網站範例

網格範例-由小到大的切割([color=#FF0066]加起來總和為12[/color])




網格範例『手機與桌機』-由小到大的切割([color=#FF0066]加起來總和為12[/color])



網格範例『手機、平板、桌機』-由小到大的切割([color=#FF0066]加起來總和為12[/color])




參考說明『利用 Bootstrap Grid System 排版的學習筆記』
]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 12 Apr 2018 01:17:12 +0800 http://mepopedia.com/forum/read.php?804,87786,87786#msg-87786 [講義] 使用圖示字體(icon font) Font Awesome http://mepopedia.com/forum/read.php?804,87786,87786#msg-87786
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音
  27. 18. 本單元範例下載
  28. 18.1 head需修改之項目
  29. 18.2 skins/css/網頁主色設定
  30. 18.3 等待動畫page-loader
  31. 18.4 Toggle navigation行動版導覽列/桌機版logo圖檔
  32. 18.5 導覽列設定/navbar/dropdown
  33. 18.6 首頁video影片設定 / videowrap影音區塊 / script
  34. 19. 上課影音
  35. 20. 相片分類與燈箱效果prettyPhoto
  36. 20.0.1 相簿分類語法說明
  37. 20.0.2 相簿分欄語法說明
  38. 20.0.3 CSS語法說明
  39. 21. 地圖設定
  40. 22. 課程影片
  41. 23. 期中作業OnePage示範範例下載
  42. 23.1 html lang 語系與字元編碼設定
  43. 23.2 什麼是 meta tag ?
  44. 24. 輪播圖Flexslider / Jumbotron
  45. 24.1 Flexslider－－方便好用的圖片輪播、滑動切換套件
  46. 24.2 OnePage輪播圖範例語法
  47. 25. Grid system 網格系統
  48. 25.1 Grid system 網格系統概述
  49. 25.2 官方網站範例
  50. 25.3 960 網頁格線排版系統
  51. 26. 課程影片
  52. 27. 圖示字體(icon font)
  53. 28. 使用圖示字體(icon font) Font Awesome
  54. 29. Font Awesome基本操作
  55. 30. Font Awesome5新增樣式
  56. 31. FontAwesome CDN
  57. 32. 在 Photoshop, illustrator 中使用 Font Awesome 的字型
  58. 33. 舊版Font Awesome練習
  59. 34. 上課影片

27. 圖示字體(icon font)


網頁設計常需要設計小ICON作為辨識內容與增加美觀之用，也為一般所稱之 UI（User Interface - 使用者介面）。
通常網站設計的過程中，由美編人員設計ICON，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：

1.ICON風格都不大一樣，造成美觀上會有落差。
2.製作速度慢，因為所有的ICON都要蒐集或是交由美編人員去製作。
3.所有ICON都是使用圖示的方式，所以網站的流量較大，甚至有可能較慢。
4.因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真。

有鑑於此，目前出現了一些將ICON製作成文字字型，解決上述問題，以 Font Awesome 為例，原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS或javascript的技術將圖示ICON呼叫出來，它擁有以下優點：

1.圖示放大、縮小不失真
2.呼叫使用相當簡單，可變化多種模式
3.一個字型卻擁有超過400個圖示ICON
4.免費使用，不必擔心版權問題
5.語法簡單


28. 使用圖示字體(icon font) Font Awesome


Font Awesome

https://fontawesome.com

如何使用
https://fontawesome.com/how-to-use/svg-with-js

圖示列表
https://fontawesome.com/cheatsheet?from=io

FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。

透過 JS 來載入 SVG 圖示
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。

請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在

<head></head>
內：

<!-- 一次載入所有的圖示 --> <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>

完整語法，接下來請於body內練習

<!doctype html> <html> <head> <meta charset="UTF-8"> <title> Font Awesome </title> <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script> </head> <body> </body> </html>

在 HTML 中透過 <i> 標籤同時給予不同的 class 就會產生不同的圖示

<i class="fas fa-camera-retro"></i>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 
分別代表 Solid, Regular, Light 和 Brands




29. Font Awesome基本操作



如果只是要調整基本的樣式，可以在圖示外面的
給一個樣式
<div style="font-size:4em; color:blue"> <i class="fas fa-camera-retro"></i> </div>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：

<!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x --> <i class="fa fa-camera-retro fa-xs”></i>

<!-- 旋轉動畫： .fa-spin --> <div class="fa-3x"> <i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> </div>

不換行換顏色及旋轉
<span style="color:#E6005C;"> <i class="fas fa-spinner fa-spin"></i>

30. Font Awesome5新增樣式


透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：

<!--- 縮放： grow-# 或 shrink-# --> <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i> <i class="fas fa-magic" data-fa-transform="grow-6" style=“background:MistyRose"></i>
<!-- - 位置：left-#, right-#, up-#, down-#--> <i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i>

<!-- - 旋轉：rotate-# - 翻轉：flip-v, flip-h --> <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：

<!-- - 遮罩： data-fa-mask --> <i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：

<!-- - 圖層：fa-layers - 文字：fa-layers-text - 計數：fa-layers-counter --> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-calendar"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span> </span>

31. FontAwesome CDN



<div class="fa-4x"> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-calendar"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span> </span> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fas fa-certificate"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span> </span> <span class="fa-layers fa-fw" style="background:MistyRose"> <i class="fa fa-envelope"></i> <span class="fa-layers-counter" style="background:Tomato">1,419</span> </span> </div>

32. 在 Photoshop, illustrator 中使用 Font Awesome 的字型


在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了

字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十六進位輸入」

使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font


可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案



33. 舊版Font Awesome練習


舊版Font Awesome，請以下面網站為例

http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html

參考舊版Font Awesome圖示列表：http://mepopedia.com/~jinjin/ex/fontawesome.pdf

修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x

<i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x">
於標題中加入旋轉圖示
<i class="fas fa-spinner fa-spin"></i>

34. 上課影片


https://youtu.be/BrslTed-BB4

]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 29 Mar 2018 02:49:50 +0800 http://mepopedia.com/forum/read.php?804,87785,87785#msg-87785 [講義] RWD-OnePage設計 概念篇 http://mepopedia.com/forum/read.php?804,87785,87785#msg-87785
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音
  27. 18. 本單元範例下載
  28. 18.1 head需修改之項目
  29. 18.2 skins/css/網頁主色設定
  30. 18.3 等待動畫page-loader
  31. 18.4 Toggle navigation行動版導覽列/桌機版logo圖檔
  32. 18.5 導覽列設定/navbar/dropdown
  33. 18.6 首頁video影片設定 / videowrap影音區塊 / script
  34. 19. 上課影音
  35. 20. 相片分類與燈箱效果prettyPhoto
  36. 20.0.1 相簿分類語法說明
  37. 20.0.2 相簿分欄語法說明
  38. 20.0.3 CSS語法說明
  39. 21. 地圖設定
  40. 22. 課程影片
  41. 23. 期中作業OnePage示範範例下載
  42. 23.1 html lang 語系與字元編碼設定
  43. 23.2 什麼是 meta tag ?
  44. 24. 輪播圖Flexslider / Jumbotron
  45. 24.1 Flexslider－－方便好用的圖片輪播、滑動切換套件
  46. 24.2 OnePage輪播圖範例語法
  47. 25. Grid system 網格系統
  48. 25.1 Grid system 網格系統概述
  49. 25.2 官方網站範例
  50. 25.3 960 網頁格線排版系統
  51. 26. 課程影片
  52. 27. 圖示字體(icon font)
  53. 28. 使用圖示字體(icon font) Font Awesome
  54. 29. Font Awesome基本操作
  55. 30. Font Awesome5新增樣式
  56. 31. FontAwesome CDN
  57. 32. 在 Photoshop, illustrator 中使用 Font Awesome 的字型
  58. 33. 舊版Font Awesome練習
  59. 34. 上課影片
  60. 35. OnePage一頁式網頁概述
  61. 36. 免費版型資源
  62. 37. 免費圖庫資源
  63. 38. 應用類型
  64. 38.1 畢業專題網站應用
  65. 38.2 活動網站
  66. 38.3 品牌與導覽網站設計
  67. 39. favicon介紹

35. OnePage一頁式網頁概述


一頁式的設計越來越多變化，一頁式的好處在於瀏覽方式單純而直覺，使用者只需用滑鼠不斷向下捲動，就可以從頭到尾欣賞完整個網站的內容像在翻閱雜誌的感覺，因為捲動的情境，很多設計師開始加入了有趣的創意，無論是動畫、場景變換、翻頁等效果，都讓一頁式網站的瀏覽體驗變得更加豐富。

1.整個網站只有一頁網頁，類似公司或產品的網路電子型錄，設計簡單、平坦化
2.選單的項目只是捲動到(scroll)這一頁網站的某個區塊，一般都是使用HTML中的錨點(anchor)連結
3.會應用許多特效，多半和捲動(scroll)、燈箱(lightbox)相關的Javascript特效。
4.必定會使用"響應式網頁設計(RWD)，這是指網頁可以依照螢幕解析度，自動調整大小或給定觀看的內容


36. 免費版型資源


在經過基礎html及css語法的洗禮後，是否期待能製作更多不同的版型？
以應用在更多不同的設計上，因應更多的需求。
目前網路上有許多免費的版型可供下載製作。
接下來同學們可以瀏覽與尋找自己喜歡與適合的版型，試著做做看接下來的主題。
tooplate

http://www.tooplate.com/free-templates

colorlib
https://colorlib.com/wp/templates/

templatemo

http://www.templatemo.com/page/1

Free CSS Free CSS Templates, CSS Layouts & More! 

http://www.free-css.com/free-css-templates

HTMLl5UP

https://html5up.net

W3.CSS Templates

https://www.w3schools.com/w3css/w3css_templates.asp

Free Responsive HTML5 CSS3 Website Templates 

https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9


OnePage免費版型資源

https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/


37. 免費圖庫資源


https://www.pexels.com
https://pixabay.com
https://visualhunt.com
https://www.pakutaso.com
http://cc0photo.com
https://bossfight.co
https://unsplash.com
http://images.google.com/hosted/life
https://www.flickr.com/photos/britishlibrary/sets/
https://picjumbo.com
http://publicdomainarchive.com
https://mmtstock.com


38. 應用類型


以下是未來可應用的設計型態，期待在畢業專題的設計上能看到大家設計的網頁！

1. 畢業專題網站應用



http://mepopedia.com/~jinjin/buzzwordstar/

http://mepopedia.com/~jinjin/buzzwordstar1/



http://cute.mepopedia.com/~web107a/st/monster/
http://cute.mepopedia.com/~web107a/st/power/


OnePage

http://mepopedia.com/~css105-2a/lion_candy/
http://cute.mepopedia.com/~web107a/st/candy/
http://mepopedia.com/~jinjin/luckysalt/

2. 活動網站



http://www.cute.edu.tw/dvcd/master/

3. 品牌與導覽網站設計



http://ccnt1.cute.edu.tw/cpland/4e/
http://www.cute.edu.tw/dvcd/lieyu/


39. favicon介紹


favicon介紹
Favicon是favorites icon的縮寫，亦被稱為website icon（網頁圖示）、page icon（頁面圖示）或urlicon（URL圖示）。Favicon是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將favicon顯示於瀏覽器的位址列中，也可置於書籤列表的網站名前，還可以放在標籤式瀏覽介面中的頁標題前。

Favicon線上製作轉換工具

favico.js
http://lab.ejci.net/favico.js/
FavIcon Cheat Sheet
https://github.com/audreyr/favicon-cheat-sheet
了解Favicon（2013/1/24新增）
http://www.jonathantneal.com/blog/understand-the-favicon/
Favicon＆App Icon Generator - 可以產生多平台的圖標
https://www.favicon-generator.org
favicon.ico Generator -極力推薦！
http://www.favicon.cc/
Favicon線上製作轉換工具
http://tw.faviconico.org/]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 29 Mar 2018 02:22:38 +0800 http://mepopedia.com/forum/read.php?804,87725,87725#msg-87725 [講義] EDM/Newsletter製作 http://mepopedia.com/forum/read.php?804,87725,87725#msg-87725
  1. 1. Google Fonts 網路中文字型
  2. 2. 使用Google fonts黑體（思源黑體）
  3. 3. 使用Google fonts圓體字型
  4. 4. 使用Google fonts仿宋字型
  5. 5. 上課影音
  6. 6. 期末範例
  7. 7. 網站基本架構--相簿篇
  8. 8. 相簿
  9. 8.1 滿版型相簿（四欄）
  10. 8.2 一般型相簿（四欄）
  11. 9. RWD-聯絡我們 / 地圖設定
  12. 10. 上課影音
  13. 11. 期末範例
  14. 12. 網站基本架構
  15. 13. 期末作業須製作之頁面
  16. 14. 內容列表頁
  17. 14.1 文字標題列表（圖文）
  18. 14.2 圖文列表（以圖為主）
  19. 14.3 分類式圖文列表
  20. 15. 文章內容頁
  21. 15.1 圖文並茂編排內容頁
  22. 15.2 單欄式圖文內容頁
  23. 15.3 單純文字內容頁
  24. 15.4 圖文左右編排內容頁
  25. 16. 麵包屑breadcrumb
  26. 17. 上課影音
  27. 18. 本單元範例下載
  28. 18.1 head需修改之項目
  29. 18.2 skins/css/網頁主色設定
  30. 18.3 等待動畫page-loader
  31. 18.4 Toggle navigation行動版導覽列/桌機版logo圖檔
  32. 18.5 導覽列設定/navbar/dropdown
  33. 18.6 首頁video影片設定 / videowrap影音區塊 / script
  34. 19. 上課影音
  35. 20. 相片分類與燈箱效果prettyPhoto
  36. 20.0.1 相簿分類語法說明
  37. 20.0.2 相簿分欄語法說明
  38. 20.0.3 CSS語法說明
  39. 21. 地圖設定
  40. 22. 課程影片
  41. 23. 期中作業OnePage示範範例下載
  42. 23.1 html lang 語系與字元編碼設定
  43. 23.2 什麼是 meta tag ?
  44. 24. 輪播圖Flexslider / Jumbotron
  45. 24.1 Flexslider－－方便好用的圖片輪播、滑動切換套件
  46. 24.2 OnePage輪播圖範例語法
  47. 25. Grid system 網格系統
  48. 25.1 Grid system 網格系統概述
  49. 25.2 官方網站範例
  50. 25.3 960 網頁格線排版系統
  51. 26. 課程影片
  52. 27. 圖示字體(icon font)
  53. 28. 使用圖示字體(icon font) Font Awesome
  54. 29. Font Awesome基本操作
  55. 30. Font Awesome5新增樣式
  56. 31. FontAwesome CDN
  57. 32. 在 Photoshop, illustrator 中使用 Font Awesome 的字型
  58. 33. 舊版Font Awesome練習
  59. 34. 上課影片
  60. 35. OnePage一頁式網頁概述
  61. 36. 免費版型資源
  62. 37. 免費圖庫資源
  63. 38. 應用類型
  64. 38.1 畢業專題網站應用
  65. 38.2 活動網站
  66. 38.3 品牌與導覽網站設計
  67. 39. favicon介紹
  68. 40. EDM設計原則
  69. 41. HTML與CSS寫在同一個檔案裡
  70. 41.0.1 範例：
  71. 41.1 將css寫在head裡
  72. 41.2 css inline
  73. 41.2.1 範例：
  74. 41.2.2 css inline範例：
  75. 41.2.3 圖片絕對路徑：
  76. 41.3 EDM/Newsletter免費版型
  77. 41.4 課堂範例
  78. 41.5 講義影音

40. EDM設計原則


EDM/Newsletter可將最新的活動訊息或欲發佈的消息，以網頁設計的設計內容，透過email寄送給指定對象。

但因為必須同時考慮各種郵件軟體(如outlook)、及各家線上郵件平台(如Google Gmail, Yahoo! Mail)的呈現, 加上郵件平台及軟體對css 的支援性較差、會強制剝除某些css設定，因此需考慮以下設計原則：

1.只需單一html檔案。
2.將css直接寫入html。

JavaScript、iFrame、Flash 等語言，大部分都是不支援的。
3.圖片使用絕對路徑。圖片需要上傳至網路空間，再將圖片網址貼上。
4.一般的情況下，建議使用單欄設計。


41. HTML與CSS寫在同一個檔案裡


1. 範例：

http://mepopedia.com/~jinjin/webclass/edm-3.html

1. 將css寫在head裡


<head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>[2018年全國校際設計行銷創意競賽活動]</title> <style type=“text/css”> 此部分寫css語法 </style> </head>
<style type="text/css"> body {background: #ffffff; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; color:#444; margin:0; padding:0;} p,li {margin-bottom:14px; margin-top:0; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; color:#999999; line-height:150%;} td, div {font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px; } a {color:#013275; text-decoration: none; font-weight: bold;} a:hover{color: #3695B0;} h1 {margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體", Arial, sans-serif;} h2 {margin-top:0; color:#D70000; font-size:18px; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:normal;} h3 {margin:0; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;} </style>

2. css inline



由於部分 email clients 會無視電子郵件中的 head 和 style 標籤，因此如果你在測試時發現內容設定不符合預期，或是有跑版的情況，可以試著將 css inline。

[url=http://zurb.com/ink/inliner.php]Inline 小工具[/url]



html

<h1>三、競賽辦法</h1>


css

h1 { margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; }
合併

<h1 style=“color:#D70000; font-family:'微軟正黑體','Helvetica Neue’,Helvetica, Arial, sans-serif; font-size:25px; font-weight:400; line-height:34px; margin-top:15px; padding:0">三、競賽辦法</h1>

1. 範例：

http://mepopedia.com/~jinjin/webclass/edm1.html

以表格作為框架
<table width="100%" border="0" cellspacing="0" cellpadding=“0"> …. </table>

2. css inline範例：


<tr> <td align="center" valign="middle" style=“font-family:微軟正黑體; color:#E19D00; font-size:24px;”> <i>第十二屆威尼斯拉古納藝術獎</i></td> </tr>

3. 圖片絕對路徑：


先將圖片上傳至網路空間。
如上傳至hw02資料夾後，貼上圖片絕對路徑。

如：http://mepopedia.com/~web106-2b/hw02/hw02-105/img/001.jpg 



<tr> <td align="center" valign="middle" style="padding-top:15px;"><img src="http://www.cute.edu.tw/dvcd/master/img/mainpic.jpg" width="573" height="243" style="display:block;"></td> </tr> <tr> <td align="center" valign="middle" style="padding-bottom:15px; padding-top:15px;"><img src="http://www.cute.edu.tw/dvcd/master/img/divider.gif" width="573" height="28"></td> </tr>

3. EDM/Newsletter免費版型


可從免費版型中挑選適合的版型修改。
1.Free newsletter templates 
http://templates.cakemail.com
2.Free Newsletter Templates 
https://www.templatesbox.com/newsletters/index.htm


4. 課堂範例


(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html


5. 講義影音


https://youtu.be/y26OtUmRBUM

]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 22 Mar 2018 00:55:49 +0800 http://mepopedia.com/forum/read.php?804,18062,87521#msg-87521 Re: [CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作 http://mepopedia.com/forum/read.php?804,18062,87521#msg-87521
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 沒有太大的問題
3.製作感想 :其實我做錯了我直接跳到06但這是05
4.製作作業的時間 about 2hr]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 17 Jan 2018 15:25:33 +0800 http://mepopedia.com/forum/read.php?804,17032,87520#msg-87520 Re: [講義04] 以CSS製作網頁導覽列 http://mepopedia.com/forum/read.php?804,17032,87520#msg-87520
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 影片沒聲音只能靠自己的眼睛跟腦袋
3.製作感想 :還好不會很難
4.製作作業的時間 20min(?)]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 17 Jan 2018 15:23:31 +0800 http://mepopedia.com/forum/read.php?804,18255,87519#msg-87519 Re: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,87519#msg-87519 (2).請回答以下問題：
1.網頁主題： 配色與風格設定: 簡單的
2.有無遇到的問題?網頁好難但好玩，要冷靜下來才能做的好，頭腦還要清楚
3.製作感想 好像是上面的答案
4.製作作業的時間 從不懂到懂大概2hr吧]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 17 Jan 2018 15:15:43 +0800 http://mepopedia.com/forum/read.php?804,16271,86581#msg-86581 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,86581#msg-86581 蘇雁祺 網頁設計與語法（HTML/CSS） Mon, 27 Nov 2017 14:27:49 +0800 http://mepopedia.com/forum/read.php?804,16271,86580#msg-86580 Re: [講義03] 利用Div標籤與CSS建立基本單欄網頁版型 http://mepopedia.com/forum/read.php?804,16271,86580#msg-86580 (2) 風格設定:簡約 時尚
　(3) 有無遇到的問題 :無
　(4) 製作感想 :不像前面的作業很多只要複製語法 貼上就好那麼簡單
　(5) 製作作業的時間:兩個小時]]> 蘇雁祺 網頁設計與語法（HTML/CSS） Mon, 27 Nov 2017 14:21:35 +0800 http://mepopedia.com/forum/read.php?804,16481,86515#msg-86515 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86515#msg-86515 1055445086 網頁設計與語法（HTML/CSS） Thu, 23 Nov 2017 11:18:57 +0800 http://mepopedia.com/forum/read.php?804,16668,86514#msg-86514 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,86514#msg-86514 1055445086 網頁設計與語法（HTML/CSS） Thu, 23 Nov 2017 11:16:48 +0800 http://mepopedia.com/forum/read.php?804,16668,86487#msg-86487 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,86487#msg-86487 1055445010 網頁設計與語法（HTML/CSS） Wed, 22 Nov 2017 23:32:11 +0800 http://mepopedia.com/forum/read.php?804,16481,86486#msg-86486 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86486#msg-86486 1055445010 網頁設計與語法（HTML/CSS） Wed, 22 Nov 2017 23:31:32 +0800 http://mepopedia.com/forum/read.php?804,16481,86485#msg-86485 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86485#msg-86485 1055445010 網頁設計與語法（HTML/CSS） Wed, 22 Nov 2017 23:31:14 +0800 http://mepopedia.com/forum/read.php?804,16481,86380#msg-86380 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86380#msg-86380
(2).請回答以下問題：
1.製作主題 :田園風
2.欲呈現之配色風格： 暖色
3..有無遇到的問題?: 沒有
4.製作感想 :配色的時候很開心]]> wuyujie 網頁設計與語法（HTML/CSS） Thu, 16 Nov 2017 09:40:19 +0800 http://mepopedia.com/forum/read.php?804,16481,86346#msg-86346 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86346#msg-86346
1.製作主題: Daft Punk
2.配色風格：金屬感
3.有無遇到的問題：無
4.製作感想：我是先做好作業2才回去把作業1搞好的~覺得其實沒有很難就是複雜]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 15 Nov 2017 11:33:11 +0800 http://mepopedia.com/forum/read.php?804,16668,86344#msg-86344 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,86344#msg-86344 謝謝老師~~~~]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 15 Nov 2017 11:28:33 +0800 http://mepopedia.com/forum/read.php?804,16668,86332#msg-86332 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,86332#msg-86332 很有趣
視傳2C]]> stelas0309 網頁設計與語法（HTML/CSS） Wed, 15 Nov 2017 01:17:24 +0800 http://mepopedia.com/forum/read.php?804,16668,86316#msg-86316 Re: [講義01] 以 HTML 與 CSS 完成第一個網頁 http://mepopedia.com/forum/read.php?804,16668,86316#msg-86316 這是我第壹次接觸網頁設計這門課，還挺有趣的，但是學起來也不簡單嗷，我會努力學好的！
視傳2C-1055443126]]> 1055443126 網頁設計與語法（HTML/CSS） Tue, 14 Nov 2017 19:16:45 +0800 http://mepopedia.com/forum/read.php?804,16481,86258#msg-86258 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86258#msg-86258 老師我ㄉ第一個作業找不到回應的地方所以我也交來02ㄌ]]> 1055445010 網頁設計與語法（HTML/CSS） Sat, 11 Nov 2017 03:51:11 +0800