現代化網頁基礎排版技術

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

現代化網頁
基礎排版技術

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

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

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

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

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

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

無法實際掌握DIV的寬高
不曉得使用margin與padding的時機
margin-top時常罷工

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

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

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

用了Absolute後，元素都亂跑

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

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

reference：http://ppt.cc/RKDR

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

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

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

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

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

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

Live Demo
File：codecasetext-indent

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

現代化網頁基礎排版技術

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

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

reference： http://ppt.cc/qD9Q

reference： http://ppt.cc/Xtub

現代化網頁基礎排版技術

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to 現代化網頁基礎排版技術 (20)

現代化網頁基礎排版技術