WebDev Party 現代化網站前端基礎 CSS3 (下）
網頁版面流程： 網頁規劃：一開始規劃網站草稿，決定網站大小、導覽列、網頁流程、網頁地圖。 ※ 但不包含顏色、字型 視覺與程式：決定共用名詞（變數）以及目錄與檔名規則 產品與視覺：決定ID與CLASS，並且找出固定區塊以及可延伸區塊（高度會改變） javascript規範：視覺與程式討論，要做什麼特效 與客戶溝通，確定之後，網頁風格設計： 每一個網頁要有一致的網站風格（色系） 特效延伸 決定每一個區塊尺寸、大小、位置、顏色(並列出一張表格，以利CSS切版) 使用英文字體可以用 [Google Font API] (若是使用Google Font，建議在少數某些區塊，例如：導覽列，因為它會造成網頁字體延遲載入的跡象)可下載至本地端，若是使用中文字，盡量使用安全字體 [就是字（中文字型）] 盡量不要用太複雜的背景（不好切版） 製作網頁內容，避免無法延伸區塊（內容，例：留言板） 手持裝置： 只放最重要的內容 手機網頁要怎麼呈現 Responsive 也支援iframe [App] 與 [網頁] 的差別 ※ 若對手持裝置有興趣，可找 [kuro] 助教 [Flash] 不支援ios ※ 若對Flash有興趣，可找 高見龍 助教 切版 把列出網頁區塊、內容、位置、顏色的那一張表格拿出來，並且利用photoshop或firework切版，並且將切出版面的尺寸、內距、間距、x軸與y軸，列在表格上，若有單純的色塊或css就可達到的效果，請用css實做（以後換位置，調整顏色，較好維護） CSS 3 -o- :Opera瀏覽器 -ms- :IE瀏覽器 -moz- :Mozilla Firefox瀏覽器 -webkit-:Safari/Chrome瀏覽器 圓角的圓弧：boder-radius:20px 30px 40px 50px; 20px 指 左上角 30px 指 右上角 40px 指 右下角 50px 指 左下角 [The Shapes of CSS] [CSS3 Shapes] 建議使用較新的瀏覽器觀看，內容～css3 圓角在左上角，2層圖層重疊 文字陰影：text-shadow:1px 2px 3px red; 1px 指 正數指右邊陰影，負數指左邊陰影