###### tags: `選修` # HTML & CSS 基礎入門 ## 一、教學網站 1. ### [Codecademy](https://www.codecademy.com/) - [Make a Website](https://www.codecademy.com/learn/make-a-website) ## 二、編輯軟體 1. ### [Adobe Brackets](http://brackets.io/) ## 三、HTML架構 1. ### [The HTML Hierarchy: Thinking Inside the Box](https://www.htmlgoodies.com/beyond/article.php/3681551/The-HTML-Hierarchy-Thinking-Inside-the-Box.htm) ## 四、網頁設計評分表 1. ### 完成一個簡易自我介紹的網站 - 在桌面開新資料夾(資料夾名為班級-座號)，至少2頁(首頁index.html、我的寵物pet.html)，上傳至老師主機。 2. ### 以下每項10分。 - [ ] (1) 以Brackets新增html文件，首頁名為index.html。調整html架構。<body></body>內以 div 分成區塊如下 ![](https://i.imgur.com/q4ns3aj.png =300x) - [ ] (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 區塊內的圖片自動換行，並置中顯示。 ![](https://i.imgur.com/EEmGlvZ.png =250x) - [ ] (10) 讓選單置於左欄。 ![](https://i.imgur.com/TVasnyu.png =300x)