Web Design知識

網頁設計起手式

參考網站:Wibibi | W3Schools | MDN Web Docs |

註解

宣告為HTML5(寫在第1行)

<!DOCTYPE html>

網頁基本架構

<html>
<head>
<title>ooo</title>
</head>
<style></style> //這是CSS
範例：
<style type="text/css">

</style>
<span id="test">這裡是紅色</span>
<script></script> //這是Javascript
<body>
</body>
</html>

網頁編碼（建議設定utf-8）

通常建議寫在<head>之下一行
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML 5 新增的 meta 功能
<meta charset="UTF-8"> 註：UTF-8 是萬國碼

<meta>描述的功用

meta的內容一般使用者畫面不會顯示，它記錄了頁面的訊息給其他軟體利用
<meta name="description" content="這裡是網頁的簡短描述">
<meta name="keywords" content="關鍵字 1,關鍵字 2">
<meta name="author" content="作者姓名">
<meta name="generator" content="編輯器名稱">
<meta name="copyright" content="網頁版權">
<meta name="distribution" content="網頁發佈地區">
<meta http-equiv="Content-Language" content="zh-TW">
<meta http-equiv="Refresh" content="time"> 註：自動更新網頁的時間
<meta http-equiv="Pragma" content="no-cache"> 註：禁止瀏覽器用快取開啟網頁
<meta http-equiv="windows-Target" content="_top"> 註：強制在單一視窗中顯示網頁

<head>的功能

放置網頁的其他重要元素，如 title、meta、link、script、style、base 等，用來標示網頁的許多基本資訊
註：
link：用來控制網頁內與外部資源的關連
script：用來使用網頁 script 或是嵌入外部 script，如 JavaScript 或 VBScript
style：用來定義網頁所使用的 style，如 css 樣式
base：用來制定網頁內 URL 的目標

<body>元素

網頁的主體部份，也就是用戶可以看到的內容
預設情況，body與瀏覽器的邊框有一定的距離，可以自訂邊界值：
topmargin、leftmargin、rightmargin、bottommargin，值用px當單位。
對齊：ALIGN=LEFT(預設)、ALIGN=CENTER、ALIGN=RIGHT(html5不再支援)
寬度：WIDTH=像素/百分比
高度：HEIGHT=像素/百分比
色彩：COLOR=#RRGGBB，前景色、BGCOLOR=#RRGGBB，背景色
html5通常改以CSS3語法控制為佳(如：background-color: blue)

基本結構標籤：
<a href="aaa.htm" target="blank"></a>
<img src="aaa.jpg">
<img src="images.gif"align=top> 圖像對齊方法
<img src="images.gif"align=bottom>
<img src="images.gif"align=left>
<img src="images.gif"align=middle>
<img src="images.gif"align=right>
<br>
<span>標籤可以用來標示一個行元素，與DIV區塊的用法有點類似，但瀏覽器會將span標籤包起來的元素視為一行。但是不會主動換行。
font-family: 順位第一的字型,順位第二的字型,順位第三的字型, ... 以此類推(屬於CSS)；
<span style="font-family:serif; border:1px orange solid; margin-right:5px;">這是 serif 字型的文字</span> 註：顯示完右邊留5px空白
<span style="font-family:sans-serif; border:1px orange solid; margin-right:5px;">這是 sans-serif 字型的文字</span>
<span style="font-family:DFKai-sb; border:1px orange solid; margin-right:5px;">這是標楷體字型的文字</span>
註：上面3個span會在同一行。
CSS 中常見的通用字體如：serif、sans-serif、cursive、fantasy、monospace。
solid(實線)
double(雙線條)
dashed(虛線)
dotted(點線)
註：上面結合border-width、boder-color、border-style為簡化border一次給3個參數
<div>段落(容器)
<div style="border:2px #ccc solid;border-radius:10px;width:360px;height:60px;background-color:#eee;">CSS3 border-radius 圓角範例</div>
若要進一步設定：
border-top-left-radius - 設定左上角
border-top-right-radius - 設定右上角
border-bottom-right-radius - 設定右下角
border-bottom-left-radius - 設定左下角
#ccc深灰(邊界色)、#eee淺灰(內文背景)
若為border-width:3px 6px 9px 12px 必須依序寫上、右、下、左的寬度，這是 CSS 規定的標準順序
border-width:3px 6px 上下邊寬的寬度相同以及左右邊框寬度相同

<div align="center">這是一些文本</div>
<div align="justify">這是一些文本</div>

彈性盒子：(說明網址)
塊狀佈局（Block layout）以垂直方向為準、行內佈局（Inline layout）以水平方向為準、而彈性佈局（Flexbox layout）則同時允許這兩種。

<p></p>分段tag
<font></font>字體樣式
CSS的font控制：
font-family(字型)、font-size(字型大小)、font-weight(字體粗細)
font-size：px、em、cm、xx-small、x-small、small、smaller、medium、large、x-large、xx-large、larger、%、inherit(這個建議少用)
font-weight：normal、lighter、bold、900
<b></b>粗體字
<l></l>斜體字
<hr>水平線
<table></table>表格
<table cellpadding=10> 註：為內容與表格之內距(px)
<table cellSpacing="15"> 註：為表格框線寬(px)
範例：
<script type="text/javascript">
function spacing()
{
document.getElementById('myTable').cellSpacing="15"
}
</script>
<table id="myTable" border="1">
...
</table>
<input type="button" onclick="spacing()" value="Change Cellspacing">

<tr></tr>表格的行
<th></th>表格之單元格(標題格，預設粗體字、置中)，用於<tr>內
<td></td>表格之單元格，用於<tr>內
<table border="1">
<tr> 註：第1行只有2個單元格，且為標題格
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr> 註：第2行有4個單元格
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
<td>james</td>
<td>kobe</td>
</tr>
<tr> 註：第3行有2個各跨2欄單元之格
<td colspan="2">yao</td>
<td colspan="2">ming</td>
</tr>
</table>

<form action="送出目的地" method="資料傳送方式">
... 表單內容...
</form>
<form action="PHP_Form.php" method="post">
文字輸入欄位: <input type="test" name="YourName">
<input type="submit" value="送出表單">
</form>
<form action="接收資料的 PHP 程式" method="get"></form>
<?php
$YourName=$_POST[YourName];
echo '接收到的內容為: '.$YourName;
?>

<form>
請輸入文字：<input type="text" name="欄位名稱">
</form>

<textarea cols="50" rows="5">
輸入你想要寫的內容...
</textarea>

<textarea style="width:300px;height:100px;">
輸入你想要寫的內容...
</textarea>

<form>
請選擇居住區域<br>
<input type="radio" name="location" value="Taipei"> 台北<br>
<input type="radio" name="location" value="Taoyuan"> 桃園<br>
...
</form>

<form>
請勾選你的興趣<br>
<input type="checkbox" value="Travel" name="Interest"> 旅遊<br>
<input type="checkbox" value="Movie" name="Interest"> 電影<br>
<input type="checkbox" value="Food" name="Interest"> 美食
</form>

--------

CSS式樣

border: 邊框粗細邊框顏色邊框樣式 ;

border
border-width
border-color
border-stype
border-collapse
border-spacing
border-radius
border-image

十六進位色碼表

a:link { //設定還沒瀏覽過的連結樣式 }
a:visited { //設定已經瀏覽過的連結樣式 }
a:hover { //設定滑鼠移到連結上的樣式 }
a:active { //設定正在被點選的連結樣式 }

至於樣式的部份常用的設定有顏色（color）、字型（font-family）、大小（font-size）、文字特效（text-decoration）... 等

text-decoration: 文字特效參數：
none 預設值，不顯示任何文字特效
overline 替文字增加上線
underline 替文字增加底線
line-through 替文字增加刪除線
blink 替文字增加閃爍效果，已取消。
inherit 繼承自父層的文字效果

color: 顏色的英文或色碼 ;

自己最常用的範例：
<style type="text/css">

</style>

CSS作三角形

HTML button 按鈕語法
<input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式">
<button type="button">我是按鈕</button>
<input type="button" value="我是按鈕">
<input type="button" value="連結名稱" onclick="location.href='要前往的網頁連結'">
<input type="button" value="我是按鈕" style="width:120px;height:40px;font-size:20px;">
<input type="button" disabled="disabled" value="這個按鈕已經禁用">
<form>
<input type="text">
<input type="reset" value="清除表單">
</form>

用 CSS 設計 HTML button 按鈕大小範例
<input type="button" value="按鈕值" name="按鈕名稱" style="width:100px;height:30px;">
<input type="button" value="按鈕值" name="按鈕名稱" style="width:120px;height:40px;">
<input type="button" value="按鈕值" name="按鈕名稱" style="width:140px;height:50px;">

紅色滑動左側邊選單範例：

<html>
<head>
<title></title>
<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none; /* 不顯示專案符號*/
margin:0px;
padding:0px;
text-decoration:none;
}
#navigation li
{
border-bottom:1px solid #ED9F9F; /* 新增標籤<li>的下劃線*/
}
#navigation li a
{
display:block; /* 區塊顯示*/
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊*/
border-right:1px solid #711515; /* 右側陰影*/
}
#navigation li a:link,#navigation li a:visited /* 超連結正常狀態、被訪問過的狀態*/
{
background-color:#c11136; /* 設定背景色*/
color:#FFFFFF; /* 設定文字顏色*/
}
#navigation li a:hover /*滑鼠經過時*/
{
background-color:#990020; /* 改變背景色*/
color:#ffff00; /* 改變文字顏色*/
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>

橫向標籤選單

<div id="A">
<b>預設風格</b>
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
</div>
<div id="B">
<b>橫向水平呈現</b>
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
</ul>
</div>

範例中 #B 目的，只是要控制下方第二個 DIV 區塊（<div id="B"></div>）中的 ul li 標籤，如果不寫 #B 的話，則整個網頁中的所有 ul li 標籤都會依照 CSS 所下的 display inline 語法指令，呈現橫向水平的排列效果

span.b {
display: inline-block; //水平式排列，大小可呈現
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.c {
display: block; //直列式排列，大小可呈現
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

--------

Singulai