本文件介绍了现代化网页基础排版技术，包括CSS基础知识、盒模型、浮动及定位等重要概念。讲者分享了实际案例和HTML5的排版流程，强调了语义化的重要性及网页布局的最佳实践。文档也提供了如何使用CSS重置和优化跨浏览器兼容性的方法。

1. 現代化網頁基礎排版技術
講者：廖洧杰

2. 社群創立緣起

3. 現代化網頁
基礎排版技術

4. 1. CSS 基礎知識
2. CSS 案例分享
• 王志誠-CSS偽元素
3. HTML5排版流程
主題

5. CSS基礎知識

6. CSS基礎知識
1. CSS Reset
2. 塊狀與行內
3. 盒模型
4. Float
5. Position

7. CSS Reset

8. 怎麼調每個瀏覽器都有幾px的誤差
A瀏覽器正常，但B瀏覽器破版！
如果你常常遇到..

9. 1. 清除各瀏覽器的預設CSS
2. XHTML 1.0 、HTML5版本皆不同
3. 需放在CSS檔案的最上方(覆蓋觀念)
CSS Reset
File：01-css-basic

10. 塊狀與行內

11. 不知道HTML的各元素的變化性，
於是都設死高度和寬度
網頁套入程式後常常破版
如果你常常遇到..

12. 1. 塊狀元素：div、p、ul、li、h1~6
2. 行內元素：span、a
3. 行內變塊狀方法→disaply：block
塊狀與行內
File：01-css-basic

13. 盒模型

14. 無法實際掌握DIV的寬高
不曉得使用margin與padding的時機
margin-top時常罷工
如果你常常遇到..

15. 1. 塊狀元素=margin+border+padding
2. 不想算數學可在該元素設定
3. 用padding-top取代margin-top
盒模型
File： 03-box

16. Float

17. 用Float排多欄式排版時常無法並排
用Float排版之後的div出現靈異現象
Clear不知道要擺哪個位置
如果你常常遇到..

18. 1. 需先完全了解盒模型概念
2. Clear放在float同層的後方 (舊)
3. Clear寫在包住float區塊的父元素 (新)
Float
File： 04-float

19. Position

20. 用了Absolute後，元素都亂跑
如果你常常遇到..

21. 1. 在子元素使用絕對定位(absolute)前，
需在父元素設定相對定位(relative)後，
再利用Top、Bottom、Left、Right進
行座標定位。
Position
File： 05-position/

22. reference：http://ppt.cc/8pU~
=

23. reference：http://ppt.cc/RKDR

24. Take a break

25. CSS案例分享

26. CSS案例分享
1. Fixed
2. SEO個案分享
3. Text-indent：-9999px

27. Fixed

28. 元素會永遠定位在瀏覽器上
特殊的排版需求
當你有需要..
File：codecasefixed

29. SEO個案分享

30. 關鍵字：重點產品都在十頁以外
單日流量：500~1000
電子商務網站

31. Schema
MetaData
Google站長工具(提交Sitemap)
我們做了..

32. Schema

33. Schema

34. Schema

35. 提交Sitemap

36. Text-indent

37. 圖片取代文字(舊)
.Box{
background:url(../logo.png);
Text-indent:-9999px;
width:50px;
height:50px;
display:block;
}

38. 圖片取代文字(新)
.Box{
…
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}

39. Live Demo
File：codecasetext-indent

40. 王志誠 - CSS偽元素

41. Take a break

42. HTML 5 排版流程

43. 那些年，曾發生過的
網頁排版辛酸史

44. N年前的一個網站..

46. DIV
DIV
DIV
DIV

47. 幾天後..

48. 收到客訴電話

49. H1
H2
p>em
ul>li*2

50. 有人看過這個網站嗎?
File：codehtml5

51. 回歸正題

52. HTML5網頁排版流程

53. 語意化

54. 大綱

55. 標籤 說明
<div> 沒有語意，純切版用。
大綱元素 <article> 有語意的div (大)
<section> 有語意的div (小)。
<nav> 填入在重要選單，例：主選單。
<aside> 定義在不重要的側邊欄區塊。
<header> 表頭元素：
在article、section裡建議設header>h1~6
h1~6 具目錄階層性，h1為階層1，以此類推。
大綱元素 > h1~6 在大綱元素裡面的h1~6不具目錄階層性，且一
定從階層2開始建立階層。
建立 HTML5 大綱

56. nav

58. H1
ul>li
H2
H3
ul>li

59. H1
Nav>ul>li
H2
H3
ul>li

60. HTML5+Schema

61. reference： http://ppt.cc/qD9Q

62. reference： http://ppt.cc/Xtub

64. Live Demo

65. Ｑ＆Ａ