五南官網

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

分享Facebook

作　　者╱

高慧君、魏仲良

出版社別╱

小五南

書　　系╱

學習高手

出版日期╱

2020/04/01 (1版 1刷)

I S B N ╱

978-957-763-840-3

書　　號╱

ZI22

頁　　數╱

336

開　　數╱

20K

定　　價╱

450 (特價 356)

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

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

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

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

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

Lesson1　HTML基礎
Lesson2　Python基礎
Lesson3　Django安裝與架站
Lesson4　專案與應用程式
Lesson5　範例：投票主題
Lesson6　範例：投票選項
Lesson7　實戰：留言板
Lesson8　實戰：日誌
Lesson9　實戰：記帳
Lesson10　CSS基礎
Lesson11　JavaScript基礎
Lesson12　案例：線上投票
Lesson13　案例：留言板
Lesson14　案例：數位助理
Lesson15　Git版本控制系統
Lesson16　將專案發布到pythonanywhere


大學申請入學準備指南：教授幫你畫重點	國中數學一點都不難─資優班老師，這樣教數學！	自主學習 226;寫出教授想看的學習歷程檔案

申請入學贏在書審與面試─附：百字簡述、課程學習成果、高中自主學習計畫、多元表現綜整心得、高中學習歷程反思、就讀動機、未來學習計畫與生涯規劃、自傳、自我介紹、面試等實用範例，適用學測、統測	國中數學基本素養１：數與代數的運算	國中數學基本素養２：幾何概念與性質

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=蔴" />

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

超連結
超連結的標籤語言。
標籤： <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=ŕ">
2 <tr>
3 <th> 地區</th>
4 <th> 溫度</th>
5 </tr>
6 <tr>
7 <td> 臺北</td>
8 <tdᡊ~20</td>
9 </tr>
10 <tr>
11 <td> 彰化</td>
12 <tdᡌ~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 請求檔頭的一部分，資料內容不會出現在網址列上，適合用來傳送大量資料，例如：上傳檔案。