五南官網-網頁設計手冊(上)：網站開發基礎16堂課

小五南-學習高手
網頁設計手冊(上)：網站開發基礎16堂課

作　　者：高慧君、魏仲良
出版社別：小五南
書　　系：學習高手
出版日期：2020/04/01(1版1刷)
ＩＳＢＮ：978-957-763-840-3
書　　號：ZI22
頁　　數：336
開　　數：20K
定　　價：450元
優惠價格：356元

主題書展　5/15-6/25 療癒書展—股民的靈魂補倉書單／單書79雙書75折起、滿699再9折
滿額優惠折扣　5/5-6/30五南官網週年慶!全館滿699再享9折，滿399即贈一本《什麼？！這才是真的北韓人》

●本書適用對象
1.內容針對學校市場所設計，中學生資訊課程參考用書。
2.一般讀者也可以學習，概念是可類推的自學書。

本書採用的Django框架，是使用Python語言編寫的一個廣受歡迎、免費、開放原始碼、且功能完整的網站後端框架，有助讀者用最快的速度掌握網站開發最基礎的知識。

本書特色--
1.使用最熱門的Python程式語言，搭配Django框架設計出由淺入深的網站範例專案，讓學習者逐步熟悉網站開發技術。
2.提供程式碼，供學習者複製指令或程式碼以便快速獲得執行結果，書中則詳細解說程式碼的意義。
3.網站開發包含有前端與後端的技術，本書補充相關入門知識作為擴充自學基礎。

高慧君
國立臺灣師範大學資訊教育研究所資訊教育組碩士。現任臺北市立南港高級中學資訊科教師。網站開發經驗豐富，早期使用微軟asp+access撰寫網站，2014年開始研究Python後，試著改用Django來撰寫網站，由於Python有強大社群，所以想要寫的功能都可以在網路上Google到答案。因此整理了入門網頁設計基礎課程，希望幫助更多人能夠順利掌握這項技術。

魏仲良
國立臺灣師範大學資訊教育研究所資訊科學組碩士，現任臺北市立大直高級中學資訊科教師。先前長期使用 PHP開發校內應用網站系統，與高慧君老師合作協助開發教學網站才接觸 Python與 Django。在參與彙整本書內容時，以從其他語言轉換過來的初學者的角度，將學習過程中記錄下的理解與心得加入內容中，希望能協助讀者更容易上手。

Lesson1 HTML基礎 

什麼是HTML
HTML 的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的標籤語言，這些標籤可以控制我們的瀏覽器要怎樣把文件顯示出來，它可控制字體的大小，也可以插入圖像或連結。
HTML文件存檔的副檔名為htm或html，編寫的方式有很多種，最原始的方法是用Windows內建的記事本或各種純文字編輯軟體。
若是你想看一個網頁的HTML 檔，只要在瀏覽器內按下滑鼠右鍵，再選擇檢視原始檔（View）即可。
HTML文件的結構
HTML文件有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 </head>
5 <body>
6 </body>
7 </html>

大部分的標籤會成對出現，包含開啟碼與關閉碼，每一個開啟碼是由 <> 兩個符號所框住的，而關閉碼是由 </> 所框住的。

<HTML> 與 </HTML>
表示「文件開始」與「文件結束」
在文件中分為「頭部」與「身體」兩個部分。
頭部元件 <head> ... </head>
頭部元件包含檔案相關資訊，例如：網頁的標題 <title> ... </title> 。
身體元件 <body> ... </body>
身體元件顯示網頁的內容，可以在 <body> 標籤中加入網頁相關的屬性設定，例如：背景顏色（bgcolor）、背景圖（background）、文字顏色（text）、超連結文字顏色（atext）等。
靜態網頁通常使用「.html」或「.htm」做為檔案的副檔名。透過瀏覽器 （例如：
Internet Explorer、Chrome、Firefox） 閱讀 Hyper-Text Markup Language （簡
稱HTML），形成我們所看到的網頁。

文字的排版
HTML 是一種結構性的標籤語言，利用不同的標籤來定義文件的外觀，並完成網頁的排版。
HTML 文件是由元件組合而成，包括容器元件和空元件兩種。容器元件使用「起始標籤」與「結束標籤」，在兩個標籤之間，可以加入敘述。
例如：
<font color="blue"> 歡迎光臨</font>
說明：
<font> 稱為「起始標籤」、 </font> 稱為「結束標籤」，這兩者通常會成對出現。
• font 稱為「標籤名稱」。
• color 稱為「屬性名稱」。
• blue 稱為「屬性值」。
容器元件可以放在另一個容器元件中，就如同把小盒子放在大盒子中。例如：
<font color="blue"> 歡迎<B> 光</B> 臨</font>
歡迎光臨
其中第三個字（光）會以粗體呈現。
空元件是用來執行一個特定的動作，例如： <HR> 標籤會在瀏覽器中顯示一條水平線，不需要 </HR> 來表示結束。

段落的排版
用來分隔不同的段落，即除了換行之外，還會與上一行間多加一行空白。
標籤： <p> ... </p>
段落的排版範例：
1 <p align="left"> 白日依山盡</p>
2 <p align="center"> 黃河入海流</p>
3 <p align="right"> 欲窮千里目</p>
4 <p align="center"> 更上一層樓</p>
瀏覽器會忽略你在HTML 文件中所輸入的空格與換行，文件中若是要換行，在要換行的位置上必須加上 <BR> 標籤﹐如此才能達到換行的效果。

標題的排版
HTML 包含不同重要程度的標題標籤，從最重要的標題 <h1> 開始到最不重要的 <h6> 標題，在瀏覽器預設情況下，h1 的字體最大，h6 的字體最小。
1 <h1> 這裡是標題一</h1>
2 <h2> 這裡是標題二</h2>
3 <h3> 這裡是標題三</h3>
4 <h4> 這裡是標題四</h4>
5 <h5> 這裡是標題五</h5>
6 <h6> 這裡是標題六</h6>

圖片的排版
標籤： <img>
圖片的排版示範：
<img src="https://openclipart.org/image/300px/svg_to_png/
288017/happy_python.png" />
在不指定寬度與高度的情況下，會以圖片的原始尺寸來顯示。
<img src="https://openclipart.org/image/300px/svg_to_png/
288017/happy_python.png" width="100" />

在僅指定寬度或僅指定高度的情況下，會等比例進行縮放。

超連結
超連結的標籤語言。
標籤： <a> ... </a>
語法示範：
以文字做為連結點：
<a href="food.htm"> 美食</a>
以圖片做為連結點：
<a href="food.htm"><img src="food.png"></a>

表格的排版
表格排版的標籤語言。
標籤： <table> <tr> <th> <td>
• 表格 <table> ... </table>
• 列 <tr> ... </tr>
• 儲存格
› 標題儲存格 <th> ... </th>
› 內容儲存格 <td> ... </td>
語法
1 <table border="1">
2 <tr>
3 <th> 地區</th>
4 <th> 溫度</th>
5 </tr>
6 <tr>
7 <td> 臺北</td>
8 <td>18~20</td>
9 </tr>
10 <tr>
11 <td> 彰化</td>
12 <td>20~24</td>
13 </tr>
14 </table>

項目符號
在 HTML 文件中，常用的資料列表有下列二種：
1. 無序列表 <ul>
2. 有序列表 <ol>
無序列表：每一筆資料之前都有個小黑點代表提示符號。
• 香蕉
• 蘋果
• 檸檬
1 <ul>
2 <li> 香蕉</li>
3 <li> 蘋果</li>
4 <li> 檸檬</li>
5 </ul>
type=“disc”（預設值）：代表實心圓點所產生的列表。
type=“circle”：代表空心圓點所產生的列表。
type=“square”：代表實心正方形所產生的列表。
有序列表：使用序號來代表提示符號。

表單
HTML form 表單結構
<form action=" 送出目的地" method=" 資料傳送方式">
<!-- ... 表單內容... -->
</form>
• action 屬性用來指定送出表單的資料要由哪個網址來處理。
• method 屬性用來指定資料傳送的方式，最常見的值有二種：
› GET ：將欄位資料當成網址列的參數來傳遞，較簡單，但僅適合傳送少量資料使用。
› POST ：將欄位資料當成HTTP 請求檔頭的一部分，資料內容不會出現在網址列上，適合用來傳送大量資料，例如：上傳檔案。

法律/政治

財經/商管/觀光

文/史/哲/期刊

理工/醫護

教育/心理/傳播

小五南/中等教育