Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

現代化網頁基礎排版技術

4 770 vues

Publié le

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

現代化網頁基礎排版技術

  1. 1. 現代化網頁基礎排版技術 講者:廖洧杰
  2. 2. 社群創立緣起
  3. 3. 現代化網頁 基礎排版技術
  4. 4. 1. CSS 基礎知識 2. CSS 案例分享 • 王志誠-CSS偽元素 3. HTML5排版流程 主題
  5. 5. CSS基礎知識
  6. 6. CSS基礎知識 1. CSS Reset 2. 塊狀與行內 3. 盒模型 4. Float 5. Position
  7. 7. CSS Reset
  8. 8. 怎麼調每個瀏覽器都有幾px的誤差 A瀏覽器正常,但B瀏覽器破版! 如果你常常遇到..
  9. 9. 1. 清除各瀏覽器的預設CSS 2. XHTML 1.0 、HTML5版本皆不同 3. 需放在CSS檔案的最上方(覆蓋觀念) CSS Reset File:01-css-basic
  10. 10. 塊狀與行內
  11. 11. 不知道HTML的各元素的變化性, 於是都設死高度和寬度 網頁套入程式後常常破版 如果你常常遇到..
  12. 12. 1. 塊狀元素:div、p、ul、li、h1~6 2. 行內元素:span、a 3. 行內變塊狀方法→disaply:block 塊狀與行內 File:01-css-basic
  13. 13. 盒模型
  14. 14. 無法實際掌握DIV的寬高 不曉得使用margin與padding的時機 margin-top時常罷工 如果你常常遇到..
  15. 15. 1. 塊狀元素=margin+border+padding 2. 不想算數學可在該元素設定 3. 用padding-top取代margin-top 盒模型 File: 03-box
  16. 16. Float
  17. 17. 用Float排多欄式排版時常無法並排 用Float排版之後的div出現靈異現象 Clear不知道要擺哪個位置 如果你常常遇到..
  18. 18. 1. 需先完全了解盒模型概念 2. Clear放在float同層的後方 (舊) 3. Clear寫在包住float區塊的父元素 (新) Float File: 04-float
  19. 19. Position
  20. 20. 用了Absolute後,元素都亂跑 如果你常常遇到..
  21. 21. 1. 在子元素使用絕對定位(absolute)前, 需在父元素設定相對定位(relative)後, 再利用Top、Bottom、Left、Right進 行座標定位。 Position File: 05-position/
  22. 22. reference:http://ppt.cc/8pU~ =
  23. 23. reference:http://ppt.cc/RKDR
  24. 24. Take a break
  25. 25. CSS案例分享
  26. 26. CSS案例分享 1. Fixed 2. SEO個案分享 3. Text-indent:-9999px
  27. 27. Fixed
  28. 28. 元素會永遠定位在瀏覽器上 特殊的排版需求 當你有需要.. File:codecasefixed
  29. 29. SEO個案分享
  30. 30. 關鍵字:重點產品都在十頁以外 單日流量:500~1000 電子商務網站
  31. 31. Schema MetaData Google站長工具(提交Sitemap) 我們做了..
  32. 32. Schema
  33. 33. Schema
  34. 34. Schema
  35. 35. 提交Sitemap
  36. 36. Text-indent
  37. 37. 圖片取代文字(舊) .Box{ background:url(../logo.png); Text-indent:-9999px; width:50px; height:50px; display:block; }
  38. 38. 圖片取代文字(新) .Box{ … white-space: nowrap; text-indent: 100%; overflow: hidden; }
  39. 39. Live Demo File:codecasetext-indent
  40. 40. 王志誠 - CSS偽元素
  41. 41. Take a break
  42. 42. HTML 5 排版流程
  43. 43. 那些年,曾發生過的 網頁排版辛酸史
  44. 44. N年前的一個網站..
  45. 45. DIV DIV DIV DIV
  46. 46. 幾天後..
  47. 47. 收到客訴電話
  48. 48. H1 H2 p>em ul>li*2
  49. 49. 有人看過這個網站嗎? File:codehtml5
  50. 50. 回歸正題
  51. 51. HTML5網頁排版流程
  52. 52. 語意化
  53. 53. 大綱
  54. 54. 標籤 說明 <div> 沒有語意,純切版用。 大綱元素 <article> 有語意的div (大) <section> 有語意的div (小)。 <nav> 填入在重要選單,例:主選單。 <aside> 定義在不重要的側邊欄區塊。 <header> 表頭元素: 在article、section裡建議設header>h1~6 h1~6 具目錄階層性,h1為階層1,以此類推。 大綱元素 > h1~6 在大綱元素裡面的h1~6不具目錄階層性,且一 定從階層2開始建立階層。 建立 HTML5 大綱
  55. 55. nav
  56. 56. H1 ul>li H2 H3 ul>li
  57. 57. H1 Nav>ul>li H2 H3 ul>li
  58. 58. HTML5+Schema
  59. 59. reference: http://ppt.cc/qD9Q
  60. 60. reference: http://ppt.cc/Xtub
  61. 61. Live Demo
  62. 62. Q&A

×