Web 前端開發-零基礎入門:第一堂

第一天的課程,我們從最簡單的版型實作開始,逐一介紹各種必要的基本標籤用途,以及入門CSS樣式的使用技巧。



從最簡單的上中下垂直區塊切割,逐步實現側邊欄與主體內容的設計。


接下來考慮固定尺寸版型的設計不符跨尺寸裝置的需求,改以百分比設計元素寬度。


最後的成果可以讓網頁內容動態符合任何螢幕尺寸呈現需求。

經過第一堂課程,學員可以瞭解幾個於排版有重要關聯的HTML標籤以及CSS樣式。

HTML標籤
CSS樣式
div:區塊切割
p :文字段落
span:區段
ul/li:清單
width:寬度
height:高度
float:浮動
overflow:溢出控制
color:顏色

除了表列標籤與CSS的實際運用,另外就是為了方便維護,選擇器的導入與CSS樣式的進一步歸納整理設計。

CSS 選擇器
Tag 標籤名稱選擇器 :將指定的樣式內容套用於特定的標籤。
Class選擇器:將指定的樣式內容套用於對應的 class
Id 識別選擇器:將指定的樣式內容套用於對應的id 標籤。

後續的課程將在這些基本的版型基礎上,全面擴充更重要的技術內容,包含更結構化的CSS設計,響應式網頁開發等等重要的現代網頁開發議題。

Web 前端開發-零基礎入門:假日班


沒有留言: