《 回 課程時間表

建立響應式作品集網頁１

目錄

課程目標

  • 使用樣板打造作品網站。
  • 完全使用網路資源。
  • 操作Visual Studio Code來修改網頁內容。
  • 修改樣板時需要知道的網站基礎知識。


備註：

請前往 https://html5up.net/ 下載Forty與Lens兩個樣板。

重點筆記

  • 一個網站的第一個畫面的主檔名都會是index，副檔名則是情況可能為html、php、jsp、asp等等。
  • html檔為網頁內容，css為樣式設定檔案（網頁顏色、文字大小、位置等等）。


Visual Code快速鍵

快速鍵說明
Ctrl+F搜尋文字。
Ctrl+C複製選取的內容。
Ctrl+V貼上內容。
Ctrl+Z恢復上一步。
Ctrl+Shift+Z(或Ctrl+Y)取消恢復上一步。
Ctrl+TAB快速切換到上一個開啟的檔案。
Ctrl+/將選取的文字註解，再按一次復原。
Ctrl+「＋」放大全部文字。
Ctrl+「—」縮小全部文字。

Google Chrome快速鍵

快速鍵說明
Ctrl+R(同F5)重新載入網頁。
Ctrl+Shift+R強制重新載入網頁。
Ctrl+「+」放大畫面。
Ctrl+「-」縮小畫面。

HTML語法規則

  • 規則１：所有的HTML元素都有「開始」標籤和「結束」標籤，而該元素的內容放在兩個標籤內，例如： 
    <開始標籤>元素內容</結束標籤>
    雖然瀏覽器有時很聰明，當你沒有加上結束標籤時仍然可以正常顯示，但仍請保持正確的標籤規則。
  • 規則二：如果該標籤內不需要元素內容，則稱為空標籤，可以將「開始」標籤與「結束」標籤簡寫為： 
    <空標籤 />
  • 規則三：巢狀標籤，HTML元素內可以標含其它元素，但必須將其完整包圍，也就是不可以將被包圍的元素的「結束」標籤放到包圍該元素的「結束」標籤下面，例如：

    正確：

    <article>
   <h1>文章</h1>
</article>

    錯誤：

    <article>
   <h1>文章
</article>
   </h1>
  • 規則四：標籤名稱使用小寫英文，雖然這個規則不是強制的，也就是說HTML元素名稱並不會區分大小寫，<P>和<p>都是一樣的意義，但W3C仍建議HTML內全部使用英文小寫來作為標籤名稱，因為小寫英文字母會比大寫來的容易閱讀。
  • 規則五：標籤內可以有屬性，(格式: 「屬性名稱:"屬性質"」)，屬性為標籤內的一部分。


HTML常用元素

標籤說明
<!-- 註解內容 -->HTML文件註解
/* 註解內容 */CSS文件註解
<h1>~<h6>標題，h1最大，h6最小。
<a>定義超連結標籤，讓網頁可以切換到其他網頁去。
<br>換行。
<ul>定義一個條列式內容的區塊。
<ol>定義一個條列式內容的區塊，每個項目開頭為數字。
<li>定義聊列示項目的每一筆資料。
<p>定義每一個文章段落，讓其換行。
<title>定義出現在瀏覽器標題文字以及書籤的預設文字。