JinJin 的視覺設計專區 - 網頁設計與語法（HTML/CSS） http://mepopedia.com/forum/list.php?804 Wed, 29 Apr 2026 12:25:36 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,90222,90222#msg-90222 [講義] Google Fonts 網路中文字型應用 (no replies) 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多頁網頁編輯 (四) 相簿設定 / 聯絡我們 (no replies) 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多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 / (no replies) 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 (no replies) 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資源分享 (no replies) 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,87905,87905#msg-87905 [講義] OnePage網頁實作解析(二）相片分類與燈箱效果、地圖設定 (no replies) 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格線系統 (no replies) 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 (no replies) 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設計 概念篇 (no replies) 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製作 (1 reply) 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） Wed, 02 May 2018 17:31:09 +0800 http://mepopedia.com/forum/read.php?804,84881,84881#msg-84881 [講義] Free templates及LongPage版型製作初探 (no replies) http://mepopedia.com/forum/read.php?804,84881,84881#msg-84881
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
在經過基礎html及css語法的洗禮後，是否期待能製作更多不同的版型？
應用在更多不同的設計上，以因應更多的需求。
目前網路上有許多免費的版型可供下載製作。
接下來同學們可以瀏覽與尋找自己喜歡與適合的版型，試著做做看期末的主題。
[hr]

42. Free templates for your websites



tooplate
http://www.tooplate.com/free-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

[hr]

43. 應用類型


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

畢業專題網站應用
http://mepopedia.com/~css105-2a/lion_candy/

品牌與導覽網站設計
http://www.cute.edu.tw/dvcd/lieyu/

[hr]

44. 開放原始碼


1. Bootstrap


https://kkbruce.tw/bs3/

Bootstrap的CSS
https://kkbruce.tw/bs3/CSS]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 10 May 2017 22:17:44 +0800 http://mepopedia.com/forum/read.php?804,81401,81401#msg-81401 [講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies) http://mepopedia.com/forum/read.php?804,81401,81401#msg-81401
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音

45. step5: 地標設定



上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070

46. 學長姊範例


http://mepopedia.com/~css104-2c/hw08/ex/final-1015445215
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445218
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445044
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445055
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445205
http://mepopedia.com/~css104-2c/hw08/ex/0519BPL

重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right

定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位

[img]http://i.imgur.com/kPNRsjk.jpg[/img]


1.於Menber #section3 加入物件跳動元素
<html> <head> <title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> About</a></li> <li><img style="position:absolute; padding:30px 1px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Member</a></li> <li><img style="position:absolute; padding:30px 0px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Concerts</a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Song</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img src="images/2ne1.jpg" width="900" height="475"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <center> <img src="images/2.gif" width="500" height="228"> </center> <div class="text"> <p>2NE1（韓語：투애니원），為韓國YG娛樂旗下的四人女子團體，成員包括Bom、Dara、CL及Minzy。</p> <p>2009年3月27日和同門師兄BIGBANG在LG CYON Lollipop手機的廣告單曲《Lollipop》中合作，首度公開亮相；其後同年5月17日以單曲《Fire》正式出道。</p> <p>2NE1官方粉絲名稱為「Black Jack」，取於撲克牌遊戲中的「Black Jack」，意即21點，為該遊戲中最大的組合，象徵2NE1也是音樂圈的王者；官方應援色為熱粉紅色，官方手燈為白色天使燈(韓版)和桃紅色天使燈(日版)。</p> </div> </div> <li id="section3" class="box"><!--FIRST--> <div class="content"> <a href="#" class="point" id="point1"><img src="images/2ne1-cl.png" width="220" height="403"></a> <a href="#" class="point" id="point2"><img src="images/2ne1-bom.png" width="193" height="403"></a> <a href="#" class="point" id="point3"><img src="images/2ne1-dara.png" width="144" height="403"></a> <a href="#" class="point" id="point4"><img src="images/2ne1-minzy.png" width="178" height="403"></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img src="images/cl-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/cl.png" width="600" height="229"></div> <p class="description"> <p>李彩麟（Lee Chae-Lin，英語：Faith Lee，1991年2月26日－），藝名CL（韓語：씨엘），韓國女歌手、饒舌歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1的隊長。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="54"></div> </div> <div class="display_panel" id="s1panel_2"> <div class="panel_title"> <img src="images/bom-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/bom.png" width="600" height="229"></div> <p class="description"> <p>朴春（英語：Jenny Park，박봄／朴봄 Park Bom，1984年3月24日－），藝名Bom（봄／春），韓國女歌手、舞者。</p> <p>2005年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入該經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="55"></div> </div> <div class="display_panel" id="s1panel_3"> <div class="panel_title"><img src="images/dara-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/dara.png" width="600" height="229"></div> <p class="description"> <p>Dara（英語：Sandara Park，韓語：다라，本名：박산다라，漢字：朴산다라，1984年11月12日－），韓國女歌手、演員、舞者、電視節目主持人。</p> <p>2007年8月1日從菲律賓回到韓國，隔日跟YG Entertainment簽約，正式進入YG Entertainment經紀公司底下當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="55"></div> </div> <div class="display_panel" id="s1panel_4"> <div class="panel_title"><img src="images/minzy-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/minzy.png" width="600" height="229"></div> <p class="description"> <p>Minzy（英語：Gong Min-ji，韓語：민지，本名：공민지，漢字：孔旻智，1994年1月18日－），韓國女歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="55"></div> </div> </div> </li><!--END OF FIRST PAGE--> <li id="section4" class="box"> <!--FIRST--> <div class="content"> <center> <img src="images/3.jpg" width="800" height="533"> </center> </div> <li id="section5" class="box"><!--FIRST--> <div class="content"> <center> <iframe width="560" height="315" src="https://www.youtube.com/embed/vLbfv-AAyvQ" frameborder="0" allowfullscreen></iframe> </center> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); setInterval(function(){ $("#point1").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); setInterval(function(){ $("#point2").animate({top:"+=15px"},1000).animate({top:"-=15px"}, 1000); }, 2000); setInterval(function(){ $("#point3").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); setInterval(function(){ $("#point4").animate({top:"+=15px"},1000).animate({top:"-=15px"}, 1000); }, 2000); // 隱藏燈箱 $('.display_panel').hide(); // 打開燈箱 (fadeIn) $('#point1').click(function (){ $('#s1panel_1').fadeIn(500); return false; }); // 關閉燈箱 $('.x_btn').click(function (){ $('.display_panel').hide(); return false; }); // 打開燈箱 (fadeIn) $('#point2').click(function (){ $('#s1panel_2').fadeIn(500); return false; }); // 打開燈箱 (fadeIn) $('#point3').click(function (){ $('#s1panel_3').fadeIn(500); return false; }); // 打開燈箱 (fadeIn) $('#point4').click(function (){ $('#s1panel_4').fadeIn(500); return false; }); </script> </html>
[hr]
CSS
@charset "UTF-8"; /* CSS Document */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; list-style-type: none; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; list-style-type: none; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 1em; width: 600px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #F0F0F0; font-family: "微軟正黑體"; } /* SETP5: 地標設定 */ /* 絕對定位，每一地標給予一座標值 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:30px; left:100px; } #point2 { top:30px; left:325px; } #point3 { top:30px; left:520px; } #point4 { top:30px; left:670px; } /* 景點設計 */ /* 跳出燈箱設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 600px; height: 500px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; background-color: #FFF; color: #000; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000}
[hr]

47. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0


[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar

參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 17 May 2016 13:06:01 +0800 http://mepopedia.com/forum/read.php?804,81301,81301#msg-81301 [講義] jQuery動態換頁效果 (no replies) http://mepopedia.com/forum/read.php?804,81301,81301#msg-81301
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
[講義] jQuery動態換頁效果

48. jQuery參考網站


http://jquery.com/

介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/

jQuery Mobile Gallery
http://www.jqmgallery.com/

[hr]

49. jQuery動態換頁效果範例


1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/


[hr]

50. 製作步驟



以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果

[hr]

1. 步驟一佈景設計


單欄網頁，單純的header,content區塊

step1.html

<!DOCTYPE html> <html> <head> <title>作業七</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */ <script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */ </head> <body> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> </html>
[hr]
style.css

/* STEP 1: 佈景設計 */ body { width:100%; background-image:url(images/bg.jpg); overflow:hidden; /* 隱藏捲軸 */ } #header{ width:100%; height:100px; background:url(images/head_bg.png); background-color: #FFFFFF; }
[hr]
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例

2. 完整index.html


<html> <head> <title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */ <script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */ <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img src="images/2ne1.jpg" width="900" height="475"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--01--> <div class="content"> <center><img src="images/cl.jpg" width="328" height="475"></center> </div> </li> <!--END OF 01 PAGE--> <li id="section3" class="box"><!--02--> <div class="content"> <center> <img src="images/bom.jpg" width="328" height="475"> </center> </div> </li> <!--END OF 02 PAGE--> <li id="section4" class="box"><!--03--> <div class="content"> <center> <img src="images/dara.jpg" width="328" height="475"> </center> </div> </li> <!--END OF 03 PAGE--> <li id="section5" class="box"><!--04--> <div class="content"> <center> <img src="images/minzy.jpg" width="328" height="475"> </center> </div> </li> <!--END OF 04 PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> </html>
[hr]

3. 完整style.css


@charset "UTF-8"; /* CSS Document */ /* STEP 1: 佈景設計 */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; list-style-type: none; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold; } #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; list-style-type: none; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063

[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 10 May 2016 03:43:28 +0800 http://mepopedia.com/forum/read.php?804,81039,81039#msg-81039 [講義] 常見css設定補充說明（超連結（文字、圖片）） (no replies) http://mepopedia.com/forum/read.php?804,81039,81039#msg-81039
/*將圖片設定靠左浮動，形成繞圖排文*/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /*清除浮動設定，取消靠左浮動*/ .clearboth { clear: both; } /*文字超連結樣式設定*/ a { } /*文字超連結，滑鼠移過狀態樣式設定*/ a:hover { } /*圖片超連結無藍色邊框設定*/ a img { border:none; }]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 20 Apr 2016 21:39:21 +0800 http://mepopedia.com/forum/read.php?804,78747,78747#msg-78747 免費申請網域的好康 (no replies) http://mepopedia.com/forum/read.php?804,78747,78747#msg-78747
1.網域申請：https://rs.twnic.net.tw/student.html
進入後點選：一般學生註冊

2.註冊序號：40115EO （後兩碼是英文大寫）
輸入你想要的個人網域名（英文數字都可）

3.填寫個人資料送出～即成功了

[hr]

請每位同學務必申請]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 08 Dec 2015 15:55:10 +0800 http://mepopedia.com/forum/read.php?804,76336,76336#msg-76336 [講義] 輪播頂圖製作 (no replies) http://mepopedia.com/forum/read.php?804,76336,76336#msg-76336
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
範例
http://ccnt1.cute.edu.tw/hphys/web/hphys/

[hr]

51. 範例HTML原始碼


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>中國科技大學體育室</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"><!--#header開始 --> <ul id="menu"> <li><b><a href="teacher.html">中國科技大學體育室</a></li> <li><a href="index.html">最新消息</a></li> <li><a href="info.html">行政資訊</a></li> <li><a href="events.html">活動成果</a></li> <li><a href="teach.html">體育教學</a></li> <li><a href="space.html">運動設施</a></li> <li><a href="time.html">場地開放時間</a></li> <li><a href="role.html">法規辦法</a></li> <li><a href="form.html">表格下載</a></li> <li><a href="photo.html">體育室相簿</a></li> </ul> </div> <div class="flexslider"> <ul class="slides"> <li style="background:url(image/img1.jpg) 50% 0 no-repeat;"></a></li> <li style="background:url(image/img2.jpg) 50% 0 no-repeat;"></a></li> <li style="background:url(image/img3.jpg) 50% 0 no-repeat;"></a></li> <li style="background:url(image/img4.jpg) 50% 0 no-repeat;"></a></li> <li style="background:url(image/img5.jpg) 50% 0 no-repeat;"></a></li> </ul> </div> </div><!--#header結束 --> <div class="box1"> <h2>中國科技大學體育室</h2> <div class="sec1"> 體育室主任：羅主任旭壯<br> 台北校區電話：02-2931-3416#2149<br> 新竹校區電話：03-699-1111#1318<br> 單位電子郵件：phys@cute.edu.tw　</br> </div> <hr> <h4>簡介</h4> <p>1.設教學活動及場館器材兩組，每組業務由體育教師兼任，以襄室務之推行</p> <p>2.配合教育部體育政策擬定本校中長程體育發展計畫</p> <p>3.統整體育教學大綱與規範：編定體育教學課程內容和體育興趣選組排課作業</p> <p>4.推廣全校師生體適能健康護照和規劃辦理學生與教職員工各項運動競賽與體育活動</p> <p>5.各運動場館與體育器材管理與使用辦法之擬修訂與執行</p> <p>6.襄辦體育評鑑與訪視各項規劃統籌之處理、執行與協調</p> <p>7.其他體育相關業務</p> </div> <footer> 中國科技大學體育室<br> 臺北校區：臺北市文山區興隆路三段56號 電話：(02)2931-3416<br> 新竹校區：新竹縣湖口鄉中山路三段530號 電話：(03)699-1111<br> 本網站之智慧財產權屬「中國科技大學體育室」所有，任何轉載、複製等利用，請預先取得本網站同意<br> Copyright © 2014. China University of Technology All Rights Reserved.<br> 瀏覽器建議使用IE 9.0以上版本 最佳觀看解析度1280x720 </footer> </body> <script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script> $(function(){ $('.flexslider').flexslider({ directionNav: true, pauseOnAction: false }); }); </script> </body> </html>
[hr]

52. 其他參考教學


JQUERY 滾動插件─FLEXSLIDER 筆記教學
http://blog.reve.tw/flexslider/

Flexslider圖片輪播、文字圖片相结合滑動切换效果
http://www.helloweba.com/view-blog-265.html]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 04 Jun 2015 00:07:18 +0800 http://mepopedia.com/forum/read.php?804,76063,76063#msg-76063 [講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies) http://mepopedia.com/forum/read.php?804,76063,76063#msg-76063
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼

53. 整體設計


http://www.funtaipei.tw/

1.單欄網頁，單純的header,content區塊
2.細膩的視覺設計，重視畫面之間細緻的關係，手繪風格，利用不同層次的圖，營造畫面空間關係，搭配javascript小動畫，增添畫面豐富度
3.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果



[hr]

54. 步驟一佈景設計


單欄網頁，單純的header,content區塊



step1.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } </style> </head> <body> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>
[hr]

55. 步驟二頂部選單


1.利用ul li加入上方導覽選單，並利用float設計水平選項
2.方便起見，暫時將ＣＳＳ直接寫在ＨＴＭＬ中



step2.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>
[hr]

56. 步驟三頂部細部設計


於ＣＳＳ中家入細膩的設定，呈現精緻效果，數值可依不同需求設定



step3.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li style=""><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> HOME PAGE </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>
[hr]

57. 步驟四主佈局設計-動態換頁效果


於html裏加入jquery語法



step4.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </html>
[hr]

58. 上課影音


1. FunTaipei HTML 網頁架構 頂部細部設計STEP1-3


http://youtu.be/nit3yBGwNDQ


[hr]

2. FunTaipei HTML 動態效果STEP4


http://youtu.be/3Ik7b1LeIFw


[hr]

59. 學長姐範例


http://mepopedia.com/~web102-c/hw07/hw07-1015445226/1015445226.html
http://mepopedia.com/~web102-c/hw07/hw07-1005445160/
http://mepopedia.com/~web102-c/hw07/hw07-1015445219/
http://mepopedia.com/~web102-c/hw07/hw07-1015445202/
http://mepopedia.com/~web102-c/hw07/hw07-1015445243/

[hr]

60. 圖片範例原始碼




<html> <head> <title>Kiko Mizuhara</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width: 100%; overflow: hidden; background-color: #000000; } #header { width: 100%; height: 80px; background-color: #000000; } /* STEP 2: 頂部選單 */ #header ul { width: 500px; } #header li { float: right; } #header li a{ padding: 25px 5px 0 0px; text-align: center; height: 40px; width: 100px; display: block; font-size: 18px; letter-spacing: 2px; color: #FFFFFF; font-weight: bold; text-decoration: none; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 20x 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background-color: #FDE162; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:; font-family: "微軟正黑體"; } #header ul li a:hover{ color: #FF6600; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section3">Blog</a> <li><a href="#section2">Style</a></li> <li><a href="#section1">Kiko</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div align="center"></div> <div align="center"><img src="images/1.jpg" width="800" height="500"></div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div align="center"><img src="images/2.jpg" width="818" height="516"></div> </div> <li id="section3" class="box"><!--SECEND--> <div class="content"> <div align="center"><img src="images/3.jpg" width="800" height="500"></div> <li id="section4" class="box"><!--SECEND--> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </html>]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 19 May 2015 22:26:48 +0800 http://mepopedia.com/forum/read.php?804,75770,75770#msg-75770 [講義] 網頁美感排版設計 (no replies) http://mepopedia.com/forum/read.php?804,75770,75770#msg-75770
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法

61. 網頁美感排版設計參考講義


請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354

[hr]

62. 設計目的

1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧
[hr]

63. 設計主題

請選擇一需要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
http://www.most.gov.tw
http://www.moc.gov.tw

蒐集優良參考範例，並提出修改方案
以photoshop製作：
(1)首頁http://www.most.gov.tw （http://www.moc.gov.tw）
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)

http://www.most.gov.tw/newwp.aspx?act=Detail&id=29c94e68bc7243b0a9fd2ff5103d37a9&ctunit=31&ctnode=42&mp=1
http://www.moc.gov.tw/information_250_35497.html
http://event2.culture.tw/NCO/portal/Registration/C0103MAction?actId=50005

(4)列表頁(加分)
http://www.most.gov.tw/wlp.aspx?CtUnit=31&mp=1&CtNode=42
http://www.moc.gov.tw/informationlist_250.html

[hr]

64. 製作步驟


1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.存成html，並上傳至ＦＴＰ，於hw05中

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：

作業網址：

(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

學號

[hr]

65. 注意事項


1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。

[hr]

66. Adobe Creative Cloud


請至http://www.adobe.com/tw/
註冊帳號

將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

體驗雲端共享ＰＳＤ的便利。

[hr]

67. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

68. 參考網站


PSD發想
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design
http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3


http://www.psd2html.com
http://www.psd2html.com/blog


https://css-tricks.com

[hr]
熟讀學習網站
W3Schools
http://www.w3schools.com/

若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。

[hr]
CssZenGarden
http://www.csszengarden.com/

同樣的HTML，改變不同的CSS呈現不同的視覺樣貌

[hr]
推薦設計師
Chris Spooner
http://line25.com/
http://blog.spoongraphics.co.uk/

[hr]

69. 博物館相關網站


羅浮宮 http://www.louvre.fr/
大英博物館 http://www.britishmuseum.org/
大都會藝術博物館 http://www.metmuseum.org/
國家美術館 http://www.nationalgallery.org.uk/
梵蒂岡博物館 http://mv.vatican.va/3_EN/pages/MV_Home.html
泰特現代藝術館 http://www.tate.org.uk/
國立故宮博物院 http://www.npm.gov.tw/zh-TW/
國家藝廊 http://www.nga.gov/home.htm
龐畢度中心 http://www.cnac-gp.fr/
奧賽博物館 http://www.musee-orsay.fr/
維多利亞與艾伯特博物館 http://www.vam.ac.uk/
索菲亞王后國家藝術中心博物館 http://www.museoreinasofia.es/
現代藝術博物館 http://www.moma.org/
韓國國立中央博物館 http://www.museum.go.kr/site/main/index001
埃爾米塔日博物館 http://www.hermitagemuseum.org/

http://cloud.culture.tw
http://collections.culture.tw/Default.aspx
http://event.moc.gov.tw/mp.asp?mp=1
http://nrch.cca.gov.tw

http://masonry.desandro.com
http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it

http://www.pixillion.com
http://dynamit.com
http://www.mksdarchitects.com
http://www.websterhall.com/timeline/
http://halcyon-theme.tumblr.com

[hr]

70. 切版練習


檔案下載 http://d.pr/f/iqrv
切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於與客戶提案或較小型及個人網站之用

[hr]
範例

http://mepopedia.com/forum/read.php?1651,42885
http://mepopedia.com/forum/read.php?1650,42884
[hr]

71. 參考範本語法


HTML
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>作業五</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> </div> </body> </html>
[hr]

CSS
@charset "utf-8"; /* CSS Document */ body{ margin: 0px; } #wrapper{ width: px; margin: auto; } ]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 29 Apr 2015 00:58:55 +0800 http://mepopedia.com/forum/read.php?804,68681,68681#msg-68681 [參考] 參考網站 (no replies) http://mepopedia.com/forum/read.php?804,68681,68681#msg-68681
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化

72. 首頁


http://www.eslitecorp.com/index.aspx?a=tw&l=b

http://www.esliteliving.com/

http://tudesignoffice.com/

http://2think.com.tw/

http://www.world-d.tw/index.php

http://www.artie.com.tw/

得獎作品
http://bookmark.dot-sg.com/

http://www.cssdesignawards.com/?id=16542

社群

https://twitter.com/

http://www.bebo.com/


相簿影音類

https://www.flickr.com

http://blog.flickr.net/en


http://www.pinterest.com/

https://www.behance.net/



https://myspace.com/

http://tw.streetvoice.com/



http://www.leewiart.com/WebPage/default.aspx

[hr]

73. 列表



http://www.lesproduitsdelepicerie.org/

http://tw.burberry.com/

http://www.u-style.com.tw/

http://www.7-11.com.tw/muji/index.html

http://www.pinterest.com/jinjinwang/followers/

[hr]

74. 文章


http://www.eslitecorp.com/NewsCenter/NewsCenter_Detail.aspx?a=tw&l=b&t=News&s=13

http://thepapermill.shihlin.com.tw/event_2013the04_review.html

http://www.vivianhsufanclub.com/#

[hr]

75. 個人頁面


https://twitter.com/

http://www.pinterest.com/thomashcl/
http://www.pinterest.com/hoelex/

[hr]

76. 登入


https://tw.linkedin.com/

[hr]

77. EVENT


http://www.freshdelight.com.tw/event/moreca/
http://www.freshdelight.com.tw/event/lottery/
http://www.quaker.com.tw/event/roseTDHB/

[hr]

78. 行動版/響應式


http://bodhicycling.be/home

http://mediaqueri.es/

http://muumilaakso.tampere.fi/

http://www.oh-my-design.com/

https://www.alfredogonzales.com/en

79. 文化


融合

書法>畫

http://masonry.desandro.com
http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it

http://www.pixillion.com
http://dynamit.com
http://www.mksdarchitects.com
http://www.websterhall.com/timeline/
http://halcyon-theme.tumblr.com



http://cloud.culture.tw
http://collections.culture.tw/Default.aspx
http://event.moc.gov.tw/mp.asp?mp=1
http://nrch.cca.gov.tw]]> JinJin 網頁設計與語法（HTML/CSS） Sun, 14 Dec 2014 23:21:39 +0800 http://mepopedia.com/forum/read.php?804,56760,56760#msg-56760 [講義] 網站設計新技術需求 (no replies) http://mepopedia.com/forum/read.php?804,56760,56760#msg-56760
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
網站設計新技術需求

[hr]
1.網站版面需有響應式設計(Responsive Web Design),使不同瀏覽裝置皆可獲得最佳之瀏覽體驗。
http://mediaqueri.es/


[hr]
2.導入新資訊技術及網站設計思維,如長網頁(Long Page Design)、資訊式頁尾(Informative Fat Footer)、巨型導覽選單(Mega Menu)、扁平化介面設計(Flat UI Design)等,提升網站操作便利性及增加視覺美感。

1. 長網頁(Long Page Design)


10 Great Single Long-Page Website Designs
http://aptdesignonline.com/10-great-single-long-page-website-designs

26 Beautiful Landing Page Designs Critiqued with A/B Testing Tips

Creating Long Scrolling Pages
http://www.wix.com/blog/2013/12/long-scrolling-web-design/

[hr]

2. 資訊式頁尾(Informative Fat Footer)


> 讓使用者不需要捲回頁面上方***。
> 作為輔助導航的使用 – 絕對不會當成主要導航來使用。
> 作為網站架構的捷徑。
> 你的網站許多部分可能有較長的名稱時，也適合使用。
> 不管用戶正在訪問哪些頁面，都要顯示的功能。
> 常用的連結，但不屬於主要導航中。
> 視覺上對於整個網站主要內容的理解。

http://ui-patterns.com/explore/collections/fat-footer

http://www.about.com/

[hr]

3. 巨型導覽選單(Mega Menu)


大多數網站的導覽選單是階層式的，需一層一層點入。而Mega Menu在選單的第一層，就以大面積的區域展開了第二甚至第三層的選單。除了減少使用者的點擊數，且可以快速點入想看的內容。

Mega Menu是目前國外許多大型網站採用的選單設計方式，攤開所有架構，讓使用者一目瞭然看到所有子選項。有些使用者除了使用搜尋功能，有時候不見得有耐性點入眾多的分層中尋找需要的內容。

國外網站Mega Menu的設計範例：
https://www.usef.org/_IFrames/sponsors/default.aspx
Amazon.com http://www.amazon.com/
福斯汽車 http://www.vw.com/en.html
Cisco http://www.cisco.com/en/US/hmpgs/index.html
25 Examples of Mega Menus in Web Design
http://designm.ag/inspiration/mega-menus/

http://opinion.udn.com/opinion/story/6085/372353

[hr]

4. 扁平化介面設計(Flat UI Design)


許多新網站以及需要重新設計的網站都紛紛採用了扁平化設計（Flat Design）的方案，這種趨勢無論是在網頁設計或者行動端的設計方面都已經蔓延開了。
隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出，以及其他人氣網站紛紛採用這種扁平化的主題設計
扁平化設計具有著一種讓人心醉的美麗，沒有大量的修飾，它能以一個簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深入人心。

扁平化設計的五大原則
http://blog.wis.com.tw/2014/ian/flat-design-principles/
1.不加特效
2.簡易的元素
3.注重排版：字體的應用需要配合整體設計，可以考慮簡單的無襯線字(Sans-Serif)
4.注重配色：設計上會比其他設計更為明亮，使用豐富的色彩呈現不同類型的元素，凸顯元素間的區隔性
5.簡易的設計：利用簡單的顏色和文字就足夠了，如要增加視覺效果，可以搭配圖像豐富網站的設計。

扁平化設計好燒！5 個 Flat Design 心法，帶你看明白怎麼扁、怎麼平
http://techorange.com/2013/07/19/5-dangers-of-flat-design/

http://designmodo.github.io/Flat-UI/
http://www.pinterest.com/warmarc/flat-ui-design/
http://ten2.tw/blog/20-fantastic-flat-ui-design/

[hr]
3.依使用者社群屬性設計網頁,並可提供多種版面之替換,惟版面之替換,應考量整體網站風格一致性。


[hr]
4.提供將網頁內容分享到社群網站之功能(如提供分享至主要社群網站之按鈕),提升民眾傳播訊息之便利性。]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 16 Sep 2014 22:49:48 +0800 http://mepopedia.com/forum/read.php?804,47019,47019#msg-47019 [講義] 網頁探索-PSD 2 HTML+CSS (no replies) http://mepopedia.com/forum/read.php?804,47019,47019#msg-47019
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義

80. 參考講義


網頁探索-PSD 2 HTML+CSS
JUDE WANG編輯

http://cute.jude.asia/week-3/

[hr]

81. 上課影片及講義


http://cute.jude.asia

http://mepopedia.com/~eros4/cute/recording.mp4

[hr]
jpg圖檔下載
http://goo.gl/6Wjo6Q

程式碼
http://goo.gl/H8zZfM

[hr]
Sublime Text 3編輯器下載
http://www.sublimetext.com/3

PACKAGE CTRL INSTALLATION
https://sublime.wbond.net/installation

Emmet
http://emmet.io/

sidebarEnhancement

[hr]
Tools→Commant Palette]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 03 Jun 2014 14:01:53 +0800 http://mepopedia.com/forum/read.php?804,46854,46854#msg-46854 [講義] 網頁探索-PSD 2 HTML (no replies) http://mepopedia.com/forum/read.php?804,46854,46854#msg-46854
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義

82. 參考講義


網頁探索-PSD 2 HTML
JUDE WANG編輯

http://cute.jude.asia/week-2/

[hr]
PSD練習檔下載
http://goo.gl/TemDGG

[hr]
於PSD中選擇欲輸出的圖檔
1.於圖層中按右鍵→複製圖層→新增
2.於新檔案中→影像→修剪

有不同的圖層可以ctrl連選

[hr]
[hr]
Sublime Text 3編輯器下載
http://www.sublimetext.com/3

PACKAGE CTRL INSTALLATION
https://sublime.wbond.net/installation

Emmet
http://emmet.io/

[hr]
Tools→Commant Palette

[hr]
CSS Selector Reference
http://www.w3schools.com/cssref/css_selectors.asp

Learn CSS Positioning in Ten Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Float
http://www.w3schools.com/css/css_float.asp

CSS IMAGE REPLACEMENT MUSEU
http://css-tricks.com/examples/ImageReplacement/

The difference between a UX Designer and UI Developer
http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 27 May 2014 16:40:45 +0800 http://mepopedia.com/forum/read.php?804,46755,46755#msg-46755 [講義] 網頁探索-切版練習與HTML+CSS設計 (no replies) http://mepopedia.com/forum/read.php?804,46755,46755#msg-46755
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義

83. 參考講義


網頁探索-切版練習與HTML+CSS設計
JUDE WANG編輯

http://cute.jude.asia/week-1/

[hr]
熟讀學習網站
W3Schools
http://www.w3schools.com/

若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。


[hr]
CssZenGarden
http://www.csszengarden.com/

同樣的HTML，改變不同的CSS呈現不同的視覺樣貌

[hr]
推薦設計師
Chris Spooner
http://line25.com/
http://blog.spoongraphics.co.uk/

[hr]
推薦書籍
深入淺出 jQuery
http://www.books.com.tw/products/0010537216

[hr]
響應式設計範例
http://formoz-2013.thewall.tw/
http://www.urock.tw/tickets
http://buyble.com.tw/
http://tripmoment.com/]]> JinJin 網頁設計與語法（HTML/CSS） Fri, 23 May 2014 13:30:33 +0800 http://mepopedia.com/forum/read.php?804,46224,46224#msg-46224 [講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果 (no replies) http://mepopedia.com/forum/read.php?804,46224,46224#msg-46224
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片

84. step5: 地標設定



重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right



1.加入視角及地標元件
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="#" class="point" id="point1"><img src="images/s1_point1.png" /></a> <a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a> <a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a> <a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a> <a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </html>
[hr]
2.加入地標定位設定CSS
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } .content .text { font-size: 3em; text-align: center; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* SETP5: 地標設定 */ /* 絕對定位，每一地標給予一座標值 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:300px; left:650px; } #point2 { top:320px; right:80px; } #point3 { top:320px; left:520px; } #point4 { top:400px; left:670px; } #point5 { top:430px; right:40px; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="#" class="point" id="point1"><img src="images/s1_point1.png" /></a> <a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a> <a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a> <a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a> <a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="js/main.js"></script>--> <script type="text/javascript" src="js/respond.min.js"></script> <script> $(function() { // 頁面捲動 $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); // 防止目前頁面轉到「超連結」所指定的網頁 return false; }); }); </script> </html>
[hr]

85. STEP6 HTML元素跳動效果>


1. 固定間隔執行函式
setInterval(function(){ // 要執行的函式 }, 5000);
[hr]
2. jQuery動畫效果
$("HTML元素").animate({top:"-=15px"},1000); // 向上15px $("HTML元素").animate({top:"+=15px"},1000); // 向下15px
[hr]
3. 綜合效果
setInterval(function(){ $(".point").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000);
[hr]

86. STEP7 燈箱式跳出頁面效果


<html><head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } .content .text { font-size: 3em; text-align: center; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* 地標設定 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:300px; left:650px; } #point2 { top:320px; right:80px; } #point3 { top:320px; left:520px; } #point4 { top:400px; left:670px; } #point5 { top:430px; right:40px; } /* 景點設計 */ /* 跳出燈箱設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 655px; height: 537px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000} </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="#" class="point" id="point1"><img src="images/s1_point1.png" /></a> <a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a> <a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a> <a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a> <a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img src="images/s1_photo1_title.png"></div> <div class="panel_phtoto"><img src="images/s1_photo1.png"></div> <p class="description"> 坐落在熱鬧的公館商圈內，有著一處與藝術結合的住宅區－寶藏巖國際藝術村，走了一小段的斜坡，映入眼簾的是一間廟宇「寶藏巖」，寶藏巖主要祭祀觀音佛祖， 是台北古老佛寺之一又稱為石碧潭寺，這裡目前已規劃成一個國際藝術村。寶藏巖聚落的地景特殊，巷弄蜿蜒，石梯起伏，沿著山坡構築錯落的風貌。放慢腳步隨著蜿蜒的巷弄走，細細的閱讀每間屋子令人動容的故事，有一些民宅已成為藝術家的工作室，轉過一個彎發現前方老舊的牆壁上雖然有著現代感的塗鴉，但不會讓人覺得有違和感。站在高處向遠方望去，看見不遠處高樓大廈林立，有種時空交錯的感覺，有機會來這裡走走，說不定能發現小驚喜。 </p> <div class="x_btn"><img src="images/delete_btn.png"></div> </div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="js/main.js"></script>--> <script type="text/javascript" src="js/respond.min.js"></script> <script> $(function() { // 頁面捲動 $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); // 防止目前頁面轉到「超連結」所指定的網頁 return false; }); // HTML元素跳動效果 setInterval(function(){ $(".point").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000) }, 2000); // 隱藏燈箱 $('.display_panel').hide(); }); // 打開燈箱 (fadeIn) $('#point1').click(function (){ $('#s1panel_1').fadeIn(500); return false; }); // 關閉燈箱 $('.x_btn').click(function (){ $('.display_panel').hide(); return false; }); </script> </html>
[hr]

87. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0


[hr]

88. 上課影片


游標位置設定--CSS絕對定位
http://youtu.be/gRWUhiqFrCw



[hr]
游標動態效果-HTML元素跳動- jQuery動畫效果


[hr]
燈箱效果 jQuery燈箱式跳出頁面效果
http://youtu.be/vyIXMKT2yXc

]]> HP 網頁設計與語法（HTML/CSS） Tue, 13 May 2014 01:55:46 +0800 http://mepopedia.com/forum/read.php?804,45798,45798#msg-45798 FunTaipei HTML 網頁架構分析 (no replies) http://mepopedia.com/forum/read.php?804,45798,45798#msg-45798
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片
  136. 89. 整體設計
  137. 90. 佈景設計
  138. 91. 頂部選單
  139. 92. 頂部細部設計
  140. 93. 主佈局設計
  141. 94. 上課影音

89. 整體設計




90. 佈景設計




step1.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } </style> </head> <body> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>

91. 頂部選單




step2.html
<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px; " src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>

92. 頂部細部設計


<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li style=""><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> HOME PAGE </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/respond.min.js"></script> </html>

93. 主佈局設計


<html> <head> <title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <base href="http://www.funtaipei.tw/" /> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </html>

[hr]

94. 上課影音


FunTaipei HTML 網頁架構 STEP1-2 (2A)
http://youtu.be/SQK9Zu8o4DY



[hr]
FunTaipei HTML 網頁架構 STEP3 (2A)
http://youtu.be/thbUEdjOQJI



[hr]
FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 (2C)
http://youtu.be/nit3yBGwNDQ



[hr]
FunTaipei HTML 動態效果STEP5
http://youtu.be/3Ik7b1LeIFw



[hr]]]> HP 網頁設計與語法（HTML/CSS） Tue, 06 May 2014 02:45:34 +0800 http://mepopedia.com/forum/read.php?804,45304,45304#msg-45304 [講義] HTML5與CSS--網頁版型設定 (no replies) http://mepopedia.com/forum/read.php?804,45304,45304#msg-45304
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片
  136. 89. 整體設計
  137. 90. 佈景設計
  138. 91. 頂部選單
  139. 92. 頂部細部設計
  140. 93. 主佈局設計
  141. 94. 上課影音
  142. 95. 概述
  143. 96. 上課影片
  144. 97. 網頁版型的語法
  145. 97.1 雙欄式網頁版型
  146. 97.2 三欄式網頁版型
  147. 97.2.1 HTML5部分
  148. 97.2.2 CSS部分
  149. 98. 特別注意

95. 概述


HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。

依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。

[hr]

96. 上課影片


2014/4/22 2A
HTML5與CSS--網頁版型--雙欄式版型解說
http://youtu.be/pJ0NniIkkts



[hr]
HTML5與CSS--網頁版型--雙欄式與三欄式版型解說
http://youtu.be/nl4TJ4MsFHI



[hr]

97. 網頁版型的語法


本範例以HTML與CSS於同一檔案撰寫的方式製作

雙欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/

[IMG]http://i.imgur.com/JElFVds.jpg[/IMG]

1. 雙欄式網頁版型


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>雙欄式網頁版型</title> <style type="text/css"> /*將CSS寫在HTML中*/ body{ width: 900px; color: #FFF; margin:0 auto; font-family: sans-serif, "微軟正黑體"; } #header{ bbackground-color: #425660; padding: 20px; } #nav{ background-color: #20292F; padding: 5px; } #aside{ width: 200px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: left; } #section{ width: 640px; height: 300px; background-color: #849DAA; line-height: 1.5em; padding: 20px; float: right; } #footer{ padding:20px; background-color: #425660; clear: both; } h1{ font-family: sans-serif, "微軟正黑體"; font-size: 18px; color: #FFF; text-align: center; } </style> </head> <body> <header id="header"> <h1>HEADER 標題</h1> </header> <nav id="nav"> <h1>NAV 導覽列</h1> </nav> <aside id="aside"> <h1>ASIDE 側邊</h1> </aside> <section id="section"> <h1>SECTION 區塊</h1> </section> <footer id="footer"> <h1>FOOTER 頁尾</h1> </footer> </body> </html>
[hr]

2. 三欄式網頁版型


本範例以HTML與CSS分開檔案撰寫的方式製作

三欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/index-3.html



將以下HTML5語法複製於index-3.html的檔案

1. HTML5部分


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>三欄式網頁版型</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <header id="header"> <h1>HEADER 標題</h1> </header> <nav id="nav"> <h1>NAV 導覽列</h1> </nav> <aside id="aside1"> <h1>ASIDE 左側邊</h1> </aside> <section id="section"> <h1>SECTION 區塊</h1> </section> <aside id="aside2"> <h1>ASIDE 右側邊</h1> </aside> <footer id="footer"> <h1>FOOTER 頁尾</h1> </footer> </body> </html>

2. CSS部分


將以下CSS語法，複製於style.css檔案中，與前述index-3.html放置於同一資料夾中

@charset "utf-8"; body{ width: 900px; color: #FFF; margin:0 auto; font-family: sans-serif, "微軟正黑體"; } #header{ background-color: #425660; padding: 20px; } #nav{ background-color: #20292F; padding: 5px; } #aside1{ width: 150px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: left; } #aside2{ width: 150px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: right; } #section{ width: 520px; height: 300px; background-color: #849DAA; line-height: 1.5em; padding: 20px; float: left; } #footer{ padding:20px; background-color: #425660; clear: both; } h1{ font-family: sans-serif, "微軟正黑體"; font-size: 18px; color: #FFF; text-align: center; }
[hr]

98. 特別注意


1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
[hr]]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 22 Apr 2014 00:08:32 +0800 http://mepopedia.com/forum/read.php?804,44848,44848#msg-44848 [講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探 (no replies) http://mepopedia.com/forum/read.php?804,44848,44848#msg-44848
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片
  136. 89. 整體設計
  137. 90. 佈景設計
  138. 91. 頂部選單
  139. 92. 頂部細部設計
  140. 93. 主佈局設計
  141. 94. 上課影音
  142. 95. 概述
  143. 96. 上課影片
  144. 97. 網頁版型的語法
  145. 97.1 雙欄式網頁版型
  146. 97.2 三欄式網頁版型
  147. 97.2.1 HTML5部分
  148. 97.2.2 CSS部分
  149. 98. 特別注意
  150. 99. 範例說明
  151. 100. 上課影音
  152. 101. 內頁實作篇-連結頁面
  153. 102. CSS3語法初探
  154. 102.1 邊框圓角語法
  155. 102.2 漸層語法
  156. 102.3 邊框陰影語法
  157. 102.4 文字陰影語法
  158. 102.5 透明背景語法
  159. 102.5.1 內部所有物件皆透明opacity
  160. 102.5.2 僅背景透明 rgba 及 hsla

99. 範例說明


http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面，並且嘗試CSS3的設定

請延續上個主題的內容，將之完成，作為期中作業

[hr]

100. 上課影音


4/8上課影音
CSS3圓角做法
http://youtu.be/_Z_QPEDPiRg


[hr]
CSS3漸層與陰影
http://youtu.be/i0NtLm4Ukyg


[hr]
LINKS頁面設定
http://youtu.be/ftl3wyXcB5U


[hr]

101. 內頁實作篇-連結頁面


僅供參考，內容及設定請自行修改
新增之HTML部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

新增之CSS部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt

[hr]

102. CSS3語法初探



參考講義：
[CSS3/IE filter] 漸層背景 Gradient Background
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

1. 邊框圓角語法


可自行調整數值

四邊圓角皆一致
-moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px;
只有下方圓角
border-radius: 0 0 10px 10px;

[hr]

2. 漸層語法


radial為放射式漸層
linear為線性漸層
可自行調整數值，但須注意整體畫面質感
background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))
[hr]

3. 邊框陰影語法


請自行調整數值
請注意，勿誇張
-moz-box-shadow: 1px 0px 7px #333333; -webkit-box-shadow: 1px 0px 7px #333333; box-shadow: 1px 0px 7px #333333;
[hr]

4. 文字陰影語法


請自行調整數值
請注意，勿誇張
text-shadow:1px 2px 1px #000000;
[hr]

5. 透明背景語法


1. 內部所有物件皆透明opacity


不透明度80%
opacity: 0.80; filter:alpha(opacity=80);
或

2. 僅背景透明 rgba 及 hsla


rgba 及 hsla 為 CSS level 3 (CSS 3) 起，新一代表示色彩的單位 (color units)，最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值；顏色的指定，當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值，與一般 位元顏色的十進位值相同，惟這類表示法不接受十六進位值(如ff,8c)；也可以是0%~100%的百分比值。所以例如，rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明。

background: rgba(40%,0%,0%,0.4); border-bottom: 20px solid rgba(50%,20%,30%,0.4); border-left: 60px solid rgba(50%,20%,30%,0.4);
*資料來源：
http://blog.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
http://boohover.pixnet.net/blog/post/20556952-半透明與透明效果設計-css-rgba,-hsla-色彩單位-(]]> JinJin 網頁設計與語法（HTML/CSS） Mon, 07 Apr 2014 23:57:22 +0800 http://mepopedia.com/forum/read.php?804,44612,44612#msg-44612 [講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies) http://mepopedia.com/forum/read.php?804,44612,44612#msg-44612
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片
  136. 89. 整體設計
  137. 90. 佈景設計
  138. 91. 頂部選單
  139. 92. 頂部細部設計
  140. 93. 主佈局設計
  141. 94. 上課影音
  142. 95. 概述
  143. 96. 上課影片
  144. 97. 網頁版型的語法
  145. 97.1 雙欄式網頁版型
  146. 97.2 三欄式網頁版型
  147. 97.2.1 HTML5部分
  148. 97.2.2 CSS部分
  149. 98. 特別注意
  150. 99. 範例說明
  151. 100. 上課影音
  152. 101. 內頁實作篇-連結頁面
  153. 102. CSS3語法初探
  154. 102.1 邊框圓角語法
  155. 102.2 漸層語法
  156. 102.3 邊框陰影語法
  157. 102.4 文字陰影語法
  158. 102.5 透明背景語法
  159. 102.5.1 內部所有物件皆透明opacity
  160. 102.5.2 僅背景透明 rgba 及 hsla
  161. 103. 範例說明
  162. 104. 首頁範例製作步驟
  163. 104.1 HTML語法
  164. 104.2 CSS語法

103. 範例說明


http://mepopedia.com/~jinjin/web/hw04a/works.html

本範例延續上個範例http://mepopedia.com/forum/read.php?804,43670
繼續其他內頁的編輯
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
延續上個主題的內容

修改部分

1.最外層的ID改為wrapper-02
2.contents的部分

[hr]
HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果(2015/4/2)
https://youtu.be/z5Se-TOsN84


[hr]
4/1上課影片

前置作業---2A(從頭)
http://youtu.be/C4ygykRd45U



[hr]
前置作業---2C(延續以及從頭的做法)
http://youtu.be/FmcyhSYAo_Y



[hr]
HTML與CSS練習 內頁實作篇 資料整理 以DIV製作表格效果
http://youtu.be/TPp7jR_NTx8




[hr]

104. 首頁範例製作步驟


可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

1. HTML語法


<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>進階網頁設計課程</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="wrapper-02"> <div id="header"> <h1><a href="index.html">進階網頁設計課程</a></h1> <p class="copy">China University of Technology </p> <ul id="navi"> <!-- 導覽列從此開始 --> <li id="navi_01"><a href="index.html">首頁</a></li> <li id="navi_02"><a href="about.html">課程簡介</a></li> <li id="navi_03"><a href="profile.html">範例介紹</a></li> <li id="navi_04"><a href="works.html">作業分享</a></li> <li id="navi_05"><a href="link.html">外部連結</a></li> <!-- 導覽列到此為止 --> </ul> </div> <!-- ●●●新增內容從此開始●●● --> <div id="contents"> <h2>範例介紹</h2> <div class="detail_box clearfix"> <p class="photo"> <img src="images/works_01.jpg" width="300" height="200" alt="DIV與CSS複習 照片" /> </p> <h3> <a href="http://mepopedia.com/forum/read.php?1650,41761" target="_blank">DIV與CSS複習--以色塊為主的基本單欄網頁版</a> </h3> <p class="text">利用Div標籤與CSS建立基本單欄網頁版型的例子，將單純色塊的網頁設計為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 利用色塊的配色，也可以輕鬆的設計具有質感的網頁，請大家發揮創意，但用單純的配色，完成一個具有不同DIV架構的網頁 </p> </div> <div class="detail_box clearfix"> <p class="photo"> <img src="images/works_02.jpg" width="300" height="200" alt="網頁格線排版練習 照片" /> </p> <h3> <a href="http://mepopedia.com/forum/read.php?1650,42884" target="_blank">網頁格線排版練習</a></h3> <p class="text"> 1.熟悉格線排版的目的與意義 <br> 2.了解網頁實際內容與細節 <br> 3.觀察優良網站的設計原則 <br> 4.增強網頁排版的能力與技巧 <br> </p> </div> <div class="detail_box clearfix"> <p class="photo"> <img src="images/works_03.jpg" width="300" height="200" alt=" HTML與CSS練習--首頁實作篇 照片" /> </p> <h3> <a href="http://mepopedia.com/forum/read.php?804,43670" target="_blank">HTML與CSS練習--首頁實作篇</a> </h3> <p class="text"> 本範例將就一教學網站 說明HTML與CSS之間的關係請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構自行製作一新的網站 </p> </div> </div> <!-- ●●●新增內容就此結束●●● --> <div id="footer"> <!-- 版權聲明 --> <address>&copy; 2014 China University of Technology. All rights reserved.</address> </div> </body> </html>
[hr]

2. CSS語法



CSS之邊框、邊距之屬性定義為：上右下左(順時針)
如padding: 5px 0 10px 15px;


CSS新增之語法

#wrapper-02 h2 { margin-bottom: 20px; padding: 15px 20px; color: #FFFFFF; font-size: 16px; font-weight: bold; line-height: 1em; background-color: #81786B; } .detail_box { clear:both; background-color:#F0F0F0; margin-bottom:20px; padding:20px; } .detail_box h3 { padding: 5px 0 10px 15px; background: url(images/icon_02.png) no-repeat; background-position: 0 10px; font-size: 14px; font-weight: bold; line-height: 1.6em; color: #8C7560; } .detail_box h3 a { color: #000000; } .detail_box h3 a:hover { color: #999999; } .detail_box .photo { float:right; padding:0 0 0 20px; } .detail_box .text { line-height:1.6em; }]]> JinJin 網頁設計與語法（HTML/CSS） Mon, 31 Mar 2014 22:26:36 +0800 http://mepopedia.com/forum/read.php?804,43670,43670#msg-43670 [講義] HTML與CSS練習--首頁實作篇 (no replies) http://mepopedia.com/forum/read.php?804,43670,43670#msg-43670
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片
  136. 89. 整體設計
  137. 90. 佈景設計
  138. 91. 頂部選單
  139. 92. 頂部細部設計
  140. 93. 主佈局設計
  141. 94. 上課影音
  142. 95. 概述
  143. 96. 上課影片
  144. 97. 網頁版型的語法
  145. 97.1 雙欄式網頁版型
  146. 97.2 三欄式網頁版型
  147. 97.2.1 HTML5部分
  148. 97.2.2 CSS部分
  149. 98. 特別注意
  150. 99. 範例說明
  151. 100. 上課影音
  152. 101. 內頁實作篇-連結頁面
  153. 102. CSS3語法初探
  154. 102.1 邊框圓角語法
  155. 102.2 漸層語法
  156. 102.3 邊框陰影語法
  157. 102.4 文字陰影語法
  158. 102.5 透明背景語法
  159. 102.5.1 內部所有物件皆透明opacity
  160. 102.5.2 僅背景透明 rgba 及 hsla
  161. 103. 範例說明
  162. 104. 首頁範例製作步驟
  163. 104.1 HTML語法
  164. 104.2 CSS語法
  165. 105. 範例說明
  166. 106. 首頁範例製作步驟
  167. 106.1 HTML語法
  168. 106.2 CSS語法
  169. 107. Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
  170. 108. Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識
  171. 108.1 編號清單 ul、ol
  172. 108.2 區塊定義 dl、dt、dd

105. 範例說明


http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站

可參考http://www.css3maker.com/
適當加入CSS3效果

[hr]
<<20150326上課影音>>

[HTML與CSS練習]-- 首頁實作篇
https://youtu.be/MSgUbEA1xYY



[hr]

3/25上課影音


http://youtu.be/A8ES02LkPuA



[hr]
HTML與CSS練習 首頁實作篇 步驟1
http://youtu.be/w6Xx2tXBSNw



[hr]
HTML與CSS練習 首頁實作篇 步驟2 body背景圖片設定
http://youtu.be/BiPm7V8Pd5M



[hr]
HTML與CSS練習 首頁實作篇 步驟3 CSS修改設定
http://youtu.be/m7uZAHwLX1g



[hr]

106. 首頁範例製作步驟


可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

1. HTML語法


<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>進階網頁設計課程</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="wrapper"> <div id="header"> <h1><a href="index.html">進階網頁設計課程</a></h1> <p class="copy">China University of Technology </p> <ul id="navi"> <!-- 導覽列從此開始 --> <li id="navi_01"><a href="index.html">首頁</a></li> <li id="navi_02"><a href="about.html">課程簡介</a></li> <li id="navi_03"><a href="profile.html">範例介紹</a></li> <li id="navi_04"><a href="works.html">作業分享</a></li> <li id="navi_05"><a href="link.html">外部連結</a></li> <!-- 導覽列到此為止 --> </ul> </div> <div id="contents"> <div id="main" class="clearfix"> <p class="photo"><img src="images/main.jpg" width="300" height="200" alt="首頁主視覺照片" /></p> <h2>HTML5與CSS3</h2> <p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p> </div> <div class="data_box"> <h3>課程公告</h3> <dl> <dt>2014年2月18日</dt> <dd>第一週，課程介紹與基礎網頁複習。</dd> <dt>2014年3月4日</dt> <dd>網頁架構製作網頁設計的美學原則。</dd> <dt>2014年3月11日</dt> <dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd> <dt>2014年3月25日</dt> <dd>jQuery Mobile：專業的使用者介面。</dd> <dt>2014年4月22日</dt> <dd><a href="link.html">外部連結</a>業師協同教學--HTML5 CSS3。</dd> <dt>2014年5月23日</dt> <dd>業師協同教學--互動式網頁實務技術。</dd> </dl> </div> <ul id="pickup" class="clearfix"> <li class="first"> <h3><a href="about.html">課程簡介</a></h3> <p class="text">講述本門課的注意事項<br /> 及終極目的</p> <li> <h3><a href="profile.html">範例簡介</a></h3> <p class="text">將進階網頁設計<br /> 的講義整理於此。</p> </li> <li class="first"> <h3><a href="works.html">作業分享</a></h3> <p class="text">將同學們的做份<br /> 分享於此。</p> </li> <li> <h3><a href="link.html">外部連結</a></h3> <p class="text">網頁設計相關教學網站、<br /> 與優良範例連結。</p> </li> </ul> </div> <div id="footer"> <!-- 版權聲明 --> <address>&copy; 2014 China University of Technology. All rights reserved.</address> </div> </body> </html>
[hr]

2. CSS語法


請見 http://mepopedia.com/~jinjin/web/hw04a/hw03-css.txt

[hr]

107. Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)


http://mepopedia.com/forum/read.php?844,17480

[hr]

108. Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識


1. 編號清單 ul、ol


ul → 無編號的清單，但有圖形在前面 (ex: 圓圈．方塊■）也可利用屬性設定為無形狀編號 list-style:none;
ol → 有編號的清單 (ex: 1、2、3）
至於li的部份則是為內容細項部份。

範例程式 1 / 有編號的清單

<ol> <li>HTML5</li> <li>CSS3</li> <li>JAVA Script</li> </ol>

  1. HTML5

  2. CSS3

  3. JAVA Script


範例程式 2 / 無編號的清單

<ul> <li>HTML5</li> <li>CSS3</li> <li>JAVA Script</li> </ul>

  • HTML5

  • CSS3

  • JAVA Script

※如果要將編號部份改設為空白則寫入CSS→list-style:none;

[hr]

2. 區塊定義 dl、dt、dd


dl → 先定義一個區塊
dt → 定義列表項目
dd → 裡面的細項

dl 的意義是 Definition List，中文是「定義清單」
而清單是由一或多個 dt （可配多個 dd）與 dd 的搭配組成。
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。
http://josephjiang.com/entry.php?id=340

範例程式 /
<dl> <dt>項目標題一</dt> <dd>這裡是項目敘述一 ...</dd> <dt>項目標題二</dt> <dd>這裡是項目敘述二 ...</dd> </dl>

項目標題一

這裡是項目敘述一 ...

項目標題二

這裡是項目敘述二 ...

]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 18 Mar 2014 07:28:26 +0800 http://mepopedia.com/forum/read.php?804,43354,43354#msg-43354 [講義] 以Photoshop製作網頁版型 (no replies) http://mepopedia.com/forum/read.php?804,43354,43354#msg-43354
  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 講義影音
  79. 42. Free templates for your websites
  80. 43. 應用類型
  81. 44. 開放原始碼
  82. 44.1 Bootstrap
  83. 45. step5: 地標設定
  84. 46. 學長姊範例
  85. 47. 2015/5/28上課影音
  86. 48. jQuery參考網站
  87. 49. jQuery動態換頁效果範例
  88. 50. 製作步驟
  89. 50.1 步驟一佈景設計
  90. 50.2 完整index.html
  91. 50.3 完整style.css
  92. 51. 範例HTML原始碼
  93. 52. 其他參考教學
  94. 53. 整體設計
  95. 54. 步驟一佈景設計
  96. 55. 步驟二頂部選單
  97. 56. 步驟三頂部細部設計
  98. 57. 步驟四主佈局設計-動態換頁效果
  99. 58. 上課影音
  100. 58.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  101. 58.2 FunTaipei HTML 動態效果STEP4
  102. 59. 學長姐範例
  103. 60. 圖片範例原始碼
  104. 61. 網頁美感排版設計參考講義
  105. 62. 設計目的
  106. 63. 設計主題
  107. 64. 製作步驟
  108. 65. 注意事項
  109. 66. Adobe Creative Cloud
  110. 67. 上課影音
  111. 68. 參考網站
  112. 69. 博物館相關網站
  113. 70. 切版練習
  114. 71. 參考範本語法
  115. 72. 首頁
  116. 73. 列表
  117. 74. 文章
  118. 75. 個人頁面
  119. 76. 登入
  120. 77. EVENT
  121. 78. 行動版/響應式
  122. 79. 文化
  123. 79.1 長網頁(Long Page Design)
  124. 79.2 資訊式頁尾(Informative Fat Footer)
  125. 79.3 巨型導覽選單(Mega Menu)
  126. 79.4 扁平化介面設計(Flat UI Design)
  127. 80. 參考講義
  128. 81. 上課影片及講義
  129. 82. 參考講義
  130. 83. 參考講義
  131. 84. step5: 地標設定
  132. 85. STEP6 HTML元素跳動效果>
  133. 86. STEP7 燈箱式跳出頁面效果
  134. 87. 2015/5/28上課影音
  135. 88. 上課影片
  136. 89. 整體設計
  137. 90. 佈景設計
  138. 91. 頂部選單
  139. 92. 頂部細部設計
  140. 93. 主佈局設計
  141. 94. 上課影音
  142. 95. 概述
  143. 96. 上課影片
  144. 97. 網頁版型的語法
  145. 97.1 雙欄式網頁版型
  146. 97.2 三欄式網頁版型
  147. 97.2.1 HTML5部分
  148. 97.2.2 CSS部分
  149. 98. 特別注意
  150. 99. 範例說明
  151. 100. 上課影音
  152. 101. 內頁實作篇-連結頁面
  153. 102. CSS3語法初探
  154. 102.1 邊框圓角語法
  155. 102.2 漸層語法
  156. 102.3 邊框陰影語法
  157. 102.4 文字陰影語法
  158. 102.5 透明背景語法
  159. 102.5.1 內部所有物件皆透明opacity
  160. 102.5.2 僅背景透明 rgba 及 hsla
  161. 103. 範例說明
  162. 104. 首頁範例製作步驟
  163. 104.1 HTML語法
  164. 104.2 CSS語法
  165. 105. 範例說明
  166. 106. 首頁範例製作步驟
  167. 106.1 HTML語法
  168. 106.2 CSS語法
  169. 107. Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)
  170. 108. Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識
  171. 108.1 編號清單 ul、ol
  172. 108.2 區塊定義 dl、dt、dd
  173. 109. 以Photoshop製作網頁版型

109. 以Photoshop製作網頁版型


對應[url=http://mepopedia.com/forum/read.php?1650,42884][作業02] 網頁格線排版練習[/url]
可參考以下範例製作

http://youtu.be/O-Z4GcufNJ0

)]]> JinJin 網頁設計與語法（HTML/CSS） Thu, 13 Mar 2014 18:04:17 +0800