CSS 網頁設計排版與切版教學課程

CSS 網頁設計切版教學 - 課程大綱

老師會因應職場的需求變化，做課程內容和範例的即時調整與修改，確保本課程的實用性和即時性。

【教學主題一】CSS語法結構&基本指令

• 內部CSS & 外部CSS
• 標籤選取器
• 擬態選取器
• 文字編排樣式
• 標題樣式與 SEO優化
• CSS 的繼承屬性
• HTML5 語意化標籤

• W3C 標準的 HTML5 語意化
• ID選取器 & CLASS選取器
• 後代選取器
• 背景樣式的進階設定
• 超連結 CSS 樣式的進階設定
• 用 CSS 設計網頁 UI 選單
• <div> 網頁結構的規劃分析

【教學主題二】圖形化區塊的應用

• 行內元素 & 區塊元素
• display:block; 應用技巧
• 如何正確適當使用 HTML 標籤語意
• HTML SEO 優化搜尋排名、網頁優化
• position 座標定位技巧
• 各種 CSS 滑鼠變換選單的效果
• <ul> <li> 條列表樣式進階應用

• CSS & HTML 最佳初始化設定
• CSS 影像取代的技巧
• margin & padding 正確使用時機
• float 浮動定位排版技巧
• Flex Box 排版技巧
• 伸縮式 CSS 按鈕選單 UI 的設計
• 如何優化 CSS 語法

【教學主題三】CSS定位&排版

• 如何規劃網頁版型 <div> 區塊
• <div> & <span> 整合應用
• float & padding 排版活用技巧
• 兩欄式、三欄式版面排版技巧

• position 座標相對定位 & 絕對定位
• clear fix 技巧
• <div>活頁式版面定位技巧
• margin 和 padding 留白定位

【教學主題四】CSS UI 排版實例應用

• 各種 CSS 選取器實做應用
• 橫向伸縮式~圖形化<div>區塊
• 伸縮式~兩欄式、三欄式版面設計
• 條列表樣式進階排版應用
• float 排版應用技巧
• float 排版的缺點與破解技巧

• 圖形化<div>區塊
• 垂直伸縮式~圖形化區塊
• 固定式~兩欄式、三欄式版型設計
• clear fix 破解技巧
• display:inline-block 排版應用技巧
• display:inline-block 的缺點與破解技巧

【教學主題五】 CSS 網頁設計其他技巧

• CSS 選取器的權重計算
• 頁首頁尾固定式<div>版面設計
• CSS 語法優化與最佳化
• 常用的 CSS Hack 破解語法
• SEO優化、搜尋引擎最佳化

• 如何精準調整文字的位置
• 精準調整網頁內容排版位置的技巧
• CSS Reset 應用方法
• CSS Sprite 應用技巧
• CSS SEO 網頁優化技巧

【教學主題六】 CSS3 語法的應用

• border-radius 圓角效果
• box-shodow 陰影設計
• text-shadow 文字陰影

• rgba() 透明度色彩的應用
• :first-child 選取器的應用
• :last-child 選取器的應用