網頁設計與雲端應用

6. 綜合練習

一、建立網頁檔案，上傳至github

檔案管理：這裡有二個部份，分為「本地端」「伺服端」
git bash：幫我們將網頁檔案傳至「伺服端」
git add .
git commit -m '1'
git push origin master
sublime text3：用它來建立網頁檔案，

常用標籤：

<h1>~<h6>標題
<p>段落</p>
<div>區域</div>
<pre>程式碼</pre>
<ol>有序清單</ol><ul>無序清單</ul>
<table></table>
--------------------------------------------------
<a>連結</a>
<br />換行
<img />圖片
<span>區域</span>

5-1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-1</title>
</head>
<body>
	<h1>練習5-1</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>	
</body>
</html>

5-2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-2</title>
</head>
<body>
	<h1>練習5-2</h1>
	<h2>練習5-2</h2>
	<h3>練習5-2</h3>
	<h4>練習5-2</h4>
	<h5>練習5-2</h5>
	<h6>練習5-2</h6>
	練習5-2
	<p>練習5-2</p>
	<div>練習5-2</div><div>練習5-2</div>	
	<span>練習5-2</span><span>練習5-2</span>
</body>
</html>

5-3.html ：請自行至 tw.yahoo.com 複制一段標題與段落

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-3</title>
</head>
<body>
	<h1>MLB／為了這一分 他受盡了苦難</h1>
	<p>紅雀隊今天以1比2輸給小熊隊，不過紅雀隊攻下的唯一1分，可是Stephen Piscotty歷經各種苦難之後拿下來的。</p>
	<p>紅雀隊今天遭到小熊隊強投Jake Arrieta的全力封鎖，打擊無法發揮。5局下Piscotty被Arrieta投出的球擊中右手肘上一壘，接著Arrieta暴投，Piscotty衝上二壘時，又被捕手Willson Contreras的傳球打到另一隻手的手肘。</p>	
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首頁</title>
</head>
<body>
	<h1>首頁</h1>
	<ul>
		<li><a href="5-1.html">練習5-1</a></li>
		<li><a href="5-2.html">練習5-2</a></li>
		<li><a href="5-3.html" target="_blank">練習5-3</a></li>
	</ul>
</body>
</html>

5-4.html ：練習插入圖片，請先將上面圖片下載至專案 img/ex5.png
這裡需了解「圖片放置位置」「網頁檔案位置」之間的關係

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-4</title>
</head>
<body>
	<h1>插入圖片</h1>
	<div><img src="img/ex5.png"></div>
</body>
</html>

三、CSS盒子模式

內容 content
內邊距 padding
padding、padding-top、padding-right、padding-bottom、padding-left
框線 border
border樣式
外邊距 margin

5-5.html
「檢視/佈局/列:2」左邊->html 右邊->css
引入css檔
ctrl + / ：註解
p100
m50
ctrl+shift+c

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>練習5-5</title>
</head>
<body>
	<h1>padding</h1>
	<table border=1>
		<tr>
			<td>內邊距</td>
		</tr>
	</table>
</body>
</html>

5-2 成果驗證

6-1 程式碼

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

6. 綜合練習