最近從零開始，報名了台大計中的網頁設計課程，在這們的課中主要是學習jQuery的應用，但因為我們都還沒有任何網頁設計的底子，因此會先學習一些基本的HTML和CSS。
第一堂課中，主要的目標就是要安裝程式開發的基本軟體，另外學習基本的HTML和CSS語法。
完成的成果就像這樣子。
編輯器軟體安裝及介紹---Brackets
首先，先來安裝開發網頁程式的工具，這裡老師叫我們用的是Adobe Brackets，這不是必須也不是唯一的，但似乎是一套相當方便，且免費的開發工具。
一開始打開的畫面就如下圖，點下右方閃電鍵，可以有"即時預覽"的畫面，也就是說，這個編輯器有一個很大的優點，就是你可以馬上看你所編輯的程式碼對應出來有什麼樣畫面上的改變。
另外，點選上方Debug的地方，有一個Switch Language，這個軟體有支援繁體中文，所以也可以在這裡把介面修改為中文。
安裝擴充軟件
接著要來安裝一些之後常用的擴充軟件，分別是「HTML Templates」和「Code Folding」，下載方式是點右方中間那顆按鈕，輸入要下載的套件，然後按安裝即可。（備註：目前Code Folding僅支援舊版Brackets，在新版可安裝Custom Region Code Folding，是由同一個作者製作的）
接著可以透過「開啟資料夾」的功能，把我們之後網頁會儲存的資料夾打開
開啟後，就可以直接在左方欄位新增檔案了，讓我們新增一個檔案叫做「p1.html」
新增好檔案後，可以點選「編輯」當中，最下方的HTML Templates（這就是我們剛剛下載的擴充功能之一）
選擇HTML5的格式
這時候，軟體就會把基本的HTML語法都建立
調整編輯器字體大小及主題
如果你是照著本篇的說明，安裝brackets編輯器，這時候打造一個舒適的工作環境是非常重要的！一個舒適的工作環境，可以讓你在寫程式時，更舒服，寫起來也更愉快。
一開始的時候你可能會覺得編輯區的程式碼字體有點小，不用擔心，進入「檢視」中，你就可以依照你的喜好放大或縮小字體了，或者你也可以透過「Ctrl 加 +」或「Ctrl 加 -」來放大縮小字體。
另外，在「檢視」裡面的「佈景主題」中，你也可以根據需要調整「暗色系」或「亮色系」的佈景主題樣式！用過幾個不同編輯器的我來說，我覺得Brackets或許不是最好用、功能最多的，但就美觀和舒適度來講，它覺得是數一數二舒服的，也是新手很好的選擇！
HTML ＆ CSS基本語法
接下來，我們來練習一些基本的HTML語法。
換行
換段落
換字的顏色與大小
更換字體
在W3Schools這個網站裡面還有其他關於style這個屬性的使用說明
屬性
|
範例
|
Background-color
|
p style=“background-color:blue”
|
Color
|
p style=”color:blue”
|
Font-family
|
p
style="font-family:courier"
|
Font-size
|
p
style="font-size:160%"
p style="font-size:20px"
|
Text-align
|
p
style="text-align:center"
|
認識CSS的四種屬性：行內樣式、id、類別、標籤
如果我們想要在一個網頁當中，某些段落使用紅色，另一些段落使用藍色，那麼可以怎麼做呢？
行內樣式(inline style)
第一種方法是使用行內樣式，行內樣式其實就是上面教的方法，直接安插在< p 這後面。
類別(class)
另一種方式是建立類別，建立類別的方式就和建立變數一樣，在變數前面要加上句號「.」。
首先要在head之間建立style，然後利用「.」建立類別，句點後面可以輸入類別名稱（可以自己取），大括弧裡面則是輸入上面所講的語法就可以了。
在原本的段落中，插入要引用的class
最後，這兩個段落就會成功變色拉！
標籤(tag)
另一種方法是透過標籤，標籤的使用一樣是在head裡面撰寫
這時候，在段落裡面如果你沒有使用類別或行內標籤，則會根據標籤的樣式呈現
這四種方式的階層分別是「行內樣式>ID>類別>標籤」，id的使用方法則是在變項前面加上「#」，這在後面的課程中，會在做介紹。
大家可以看看完成的成果http://s.codepen.io/PJCHENder/debug/xEgraE喔。
程式範例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.myfont{color:blue; font-size:20px}
p{color:purple; font-size:26px}
</style>
</head>
<body>
<p>這是受到標籤的影響</p>
<p class="myfont">這是受到類別的影響</p>
<p class="myfont">這是受到類別的影響</p>
<p
style="color:red; font-size:20px">這是受到行內樣式的影響</p>
<p
style="color:red; font-size:150%; font-family:微軟正黑體">這是受到行內樣式的影響</p>
</body>
</html>
以上內容均為本人在馬老師雲端研究室學習所整理之筆記
0 意見:
張貼留言