上週學完html跟CSS,了解了許多網頁的基礎知識,跟網頁的一些基礎語法
之後就是透過html以及CSS來真正的做一個簡單的網頁。
這週主要學習內容如下:
- 透過所學習的知識,實際製作一個履歷頁面
- 課程期末考,考驗這三週的學習過程
- 深入了解CSS語法觀念
內容目錄
切版實作:打造履歷網頁
這週的主要課程內容,一步一步的帶你打造自己的履歷頁面,
一開始會教你網頁切版的觀念之後,之後一步一步教你html的語法,
最後在使用CSS排版,打造出完整的履歷頁面。
Alpha Camp都有影片一步一步解析之外,底下還有文章可以快速複習影片內容,
我覺得Alpha Camp這樣的教學對新手而言非常友善且清楚!!!
接下來我會詳細介紹製作網頁應該要有的步驟
步驟一、從設計稿解析網頁架構
在一個網頁裡面要好好去思考要如何切版,
引此在設計稿裡面要去思考html的語法並思考如何架構。
在分析架構的時候有三個原則:
- 由上而下
- 由大到小
- 由左至右
掌握這些原則之後,就可以畫出自己的網頁應該分為哪一些區塊,
掌握區塊之後就可以到下一個步驟
步驟二、在各個區塊寫出html語法
有了區塊之後接下來就是在適合的地方加上合適的html語法,
從這裡開始些微有一點吃力了,
因為很多種語法要記起來,還有一些區塊語法的用法都不太一樣,
這邊老師會一步一步帶著做,但是不能只是照做,要去思考老師這些用法背後的原因
了解原因之後就可以嘗試改動,讓自己的語法更加符合你的想法
html都寫完之後網頁會長的向下圖這樣

下一步就是去調整排版,讓他更加的視覺化
步驟三、CSS排版,讓網頁更加視覺化
之後就是排版了,也是可以通過CSS去調整文字的位置,
文字的顏色、大小…等等都可以調整,
這裡的重點首先應該是要整設定好自己的邊界,
之後再深入地去挑整成自己想要的排版,
最後排版完成會如下圖所示

結論
最後就是有個期末考,需要結合自己這三週所學去做考試。
同時也可以驗證自己哪一些部分沒有學好,可以加緊去複習。
考完期末考之後可以拿到AlphaCamp給你的證書,
課程中還有許多關於CSS的深入講解也可以讓自己學得更為透徹。
最後,我下一篇文章會再統整這三週所學的心得,
有興趣的朋友記得去看看喔!!!
延伸閱讀: