Try   HackMD
tags: 選修

HTML & CSS 基礎入門

一、教學網站

  1. Codecademy

二、編輯軟體

  1. Adobe Brackets

三、HTML架構

  1. The HTML Hierarchy: Thinking Inside the Box

四、網頁設計評分表

  1. 完成一個簡易自我介紹的網站

    • 在桌面開新資料夾(資料夾名為班級-座號)，至少2頁(首頁index.html、我的寵物pet.html)，上傳至老師主機。

  2. 以下每項10分。

    • (1) 以Brackets新增html文件，首頁名為index.html。調整html架構。<body></body>內以 div 分成區塊如下

      Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

    • (2) 首頁內的主區塊( main )有標題「 h1 」、自己的生活照「 img 」和自我介紹「 p 」。

    • (3) 首頁內的選單區塊( nav )，至少有「回首頁」、「我的寵物」兩個超連結。

      • 以「 ul、li 」 呈現超連結的文字，以「 a 」加上超連結。

    • (4) 新增CSS文件，命名為 main.css。首頁連結css檔。

    • (5) h1 標題 CSS 屬性設定。

      • color 屬性，將顏色設為紅色。
      • font-size 屬性，將大小設為50px。

    • (6) 以 background-image 屬性，讓 main 區塊有背景。

    • (7) 新增 pet.html，從 index.html 複製全部程式碼，將 main 區塊 class 改為 gallery，裏面至少放四張寵物照。

      • 以「 figure 」標出圖片區塊，內有圖片「 img 」和圖片說明「 figcaption 」。

    • (8) 讓寵物圖片大小一致且有圓角，自己的生活照變圓形大頭貼。

      • 「 width 」、「 height 」屬性讓寵物圖片大小一致。
      • 「 border-radius 」屬性，讓寵物圖片有圓角。
      • 屬性若設定在「 img 」會套用到全部圖片。
      • 寵物圖「 img 」以 class 取名「 thumbnail 」，屬性設定在此。或設定在「 .gallery img 」。
      • 自己的照片以 class 取名為「me」，border-radius 超過寬/2

    • (9) 讓 gallery 區塊內的圖片自動換行，並置中顯示。

      Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

    • (10) 讓選單置於左欄。

      Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

Last changed by 
 
cube lin
0
410
Published on HackMD