AlphaCamp

[程式語言]AlphaCamp語法學習紀錄 : 第三週結束,網頁切版實作


上週學完html跟CSS,了解了許多網頁的基礎知識,跟網頁的一些基礎語法

之後就是透過html以及CSS來真正的做一個簡單的網頁。

這週主要學習內容如下:

  • 透過所學習的知識,實際製作一個履歷頁面
  • 課程期末考,考驗這三週的學習過程
  • 深入了解CSS語法觀念

切版實作:打造履歷網頁

這週的主要課程內容,一步一步的帶你打造自己的履歷頁面,

一開始會教你網頁切版的觀念之後,之後一步一步教你html的語法,

最後在使用CSS排版,打造出完整的履歷頁面。

Alpha Camp都有影片一步一步解析之外,底下還有文章可以快速複習影片內容,

我覺得Alpha Camp這樣的教學對新手而言非常友善且清楚!!!

接下來我會詳細介紹製作網頁應該要有的步驟

步驟一、從設計稿解析網頁架構

在一個網頁裡面要好好去思考要如何切版,

引此在設計稿裡面要去思考html的語法並思考如何架構。

在分析架構的時候有三個原則:

  • 由上而下
  • 由大到小
  • 由左至右

掌握這些原則之後,就可以畫出自己的網頁應該分為哪一些區塊,

掌握區塊之後就可以到下一個步驟

步驟二、在各個區塊寫出html語法

有了區塊之後接下來就是在適合的地方加上合適的html語法,

從這裡開始些微有一點吃力了,

因為很多種語法要記起來,還有一些區塊語法的用法都不太一樣,

這邊老師會一步一步帶著做,但是不能只是照做,要去思考老師這些用法背後的原因

了解原因之後就可以嘗試改動,讓自己的語法更加符合你的想法

html都寫完之後網頁會長的向下圖這樣

下一步就是去調整排版,讓他更加的視覺化

步驟三、CSS排版,讓網頁更加視覺化

之後就是排版了,也是可以通過CSS去調整文字的位置,

文字的顏色、大小…等等都可以調整,

這裡的重點首先應該是要整設定好自己的邊界,

之後再深入地去挑整成自己想要的排版,

最後排版完成會如下圖所示

結論

最後就是有個期末考,需要結合自己這三週所學去做考試。

同時也可以驗證自己哪一些部分沒有學好,可以加緊去複習。

考完期末考之後可以拿到AlphaCamp給你的證書,

課程中還有許多關於CSS的深入講解也可以讓自己學得更為透徹。

最後,我下一篇文章會再統整這三週所學的心得,

有興趣的朋友記得去看看喔!!!

延伸閱讀:

[程式語言]AlphaCamp 程式語言學習 : 第一週過去了,我學到了什麼?

[程式語言]AlphaCamp學習紀錄 : 第二週結束了html及CSS學習心得!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Secured By miniOrange