- 單欄式版面設計
由於平板手機的興起，很多時候網站的設計主要是提供給手機用戶瀏覽的時候，都會使用單欄式設計！因為單欄式設計比較不用考慮到欄寬的問題， 可以讓整個版面佔滿。不過，這種設計通常得要考慮到導覽列的位置。一般來說，導覽列會簡單的出現在正上方，有的還會將導覽列固定在螢幕上。 例如底下就是一個新聞網站的行動版網頁示意：
2023年11月8日 星期三
2023年10月30日 星期一
(PS) Photoshop 快捷鍵
Ctrl+A 全選（All）
Ctrl+L 色階(Level)
Ctrl+C 複製（Copy）
Ctrl+Z 復原
Ctrl+P 貼上（Paste）
Ctrl+＋ 放大檢視
Ctrl+I 負面效果（Invert）
Ctrl+－ 縮小檢視
Ctrl+Shift+I 反選（Inverse）
Ctrl+０ 顯示全頁
Ctrl+D 取消選取
Alt+Backspace(或Delete) 填入前景色
Ctrl+Backspace(或Delete) 填入背景色
Ctrl+H 隱藏(顯示)選取
Ctrl+‵ 跳回RGB
Ctrl+點選圖層 載入選框
空白鍵 切換手形工具
Ctrl+L 色階(Level)
Ctrl+C 複製（Copy）
Ctrl+Z 復原
Ctrl+P 貼上（Paste）
Ctrl+＋ 放大檢視
Ctrl+I 負面效果（Invert）
Ctrl+－ 縮小檢視
Ctrl+Shift+I 反選（Inverse）
Ctrl+０ 顯示全頁
Ctrl+D 取消選取
Alt+Backspace(或Delete) 填入前景色
Ctrl+Backspace(或Delete) 填入背景色
Ctrl+H 隱藏(顯示)選取
Ctrl+‵ 跳回RGB
Ctrl+點選圖層 載入選框
空白鍵 切換手形工具
★快捷鍵大全★
2022年6月18日 星期六
(html) 常用標簽
<img src="dog.jpg" alt="dog" height="100" width="150">
<p>下雨吧，別再缺水了，一起來祈雨吧!</p>
src屬性 (source)的值必須有圖片的副檔名，這邊的例子就是.jpg，如果沒有副檔名圖片無法顯示。
alt是alternative text替代文字
<p>下雨吧，別再缺水了，一起來祈雨吧!</p>
src屬性 (source)的值必須有圖片的副檔名，這邊的例子就是.jpg，如果沒有副檔名圖片無法顯示。
alt是alternative text替代文字
2022年6月9日 星期四
(CSS) Id 和 Class選擇器
id 和 class 選擇器
如果你要在HTML元素中設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器。
id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以 id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
實例, 以下的樣式規則應用於元素屬性 id="para1":
#para1 { text-align:center; color:red; }
Remark: ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
class 選擇器
class 選擇器用於描述一組元素的樣式，class 選擇器有別於 id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
實例，所有擁有 center 類的 HTML 元素均為居中。
.center {text-align:center;}
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
實例, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
p.center {text-align:center;}
p.center {text-align:center;}
Remark 類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
2022年6月5日 星期日
(CSS) 創建樣式表
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標籤鏈接到樣式表。 <link> 標籤在（文檔）的頭部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標籤。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");}
Remark 不要在屬性值與單位之間留有空格（如："margin-left: 20 px" ），正確的寫法是 "margin-left: 20px" 。
2022年2月23日 星期三
(html) 關於 favicon
大前提一定要注意，你用做網站圖示的圖片檔案必須是ico型別，檔名統一命名favicon.ico！！！不要改名！
如果沒有ico格式檔案的話，這個網站（Favicon線上製作：http://www.faviconico.org/）裡可以將其他型別檔案轉換為ico檔案。
2022年2月22日 星期二
2021年12月29日 星期三
(CSS) DIV 三欄式網頁排版設計
CSS DIV 三欄式網頁排版設計
本文就以這個範例示意圖的原始碼來介紹如何使用 CSS DIV 設計出三欄式網頁，首先要看的是比較簡單的 HTML 部分，接著就是稍微複雜的 CSS 語法部分，但整體而言還算是 CSS 排版的基礎。
以下範例語法將告訴您如何設計出這樣的網頁版型。
HTML 語法架構
以下範例語法將告訴您如何設計出這樣的網頁版型。
HTML 語法架構
<div id="sitebody">
<div id="header">header</div>
<div id="sidebar_left">sidebar_left</div>
<div id="sidebar_right">sidebar_right</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
在 HTML 的部分相當簡單，最外圍使用區塊 sitebody 將所有的元素都包起來，裡面就依序建立 header、sidebar_left、sidebar_right、content 以及 footer 等 DIV 區塊，有了這樣的架構，就可以使用 CSS 將每個區塊的位置設計好。<div id="header">header</div>
<div id="sidebar_left">sidebar_left</div>
<div id="sidebar_right">sidebar_right</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
CSS 語法
<style type="text/css">
#sitebody{
width:600px;
margin:0 auto;
font-size:13px;
}
#header{
background-color:#FFD4D4;
height:80px;
text-align:center;
line-height:80px;
}
#sidebar_left{
background-color:#FFECC9;
width:120px;
height:400px;
text-align:center;
line-height:400px;
float:left;
}
#sidebar_right{
background-color:#FFECC9;
width:120px;
height:400px;
text-align:center;
line-height:400px;
float:right;
}
#content{
margin-left:120px;
margin-right:120px;
height:400px;
background-color:#F2FFF2;
text-align:center;
line-height:400px;
}
#footer{
clear:both;
background-color:#FFD4D4;
height:80px;
text-align:center;
line-height:80px;
}
</style>
這段 CSS 語法中的幾個重點還是要提一下，首先每個 # 開頭接著的英文就是 DIV 的 id 名，代表的就是要替該 DIV 區塊做樣式設計，由最上方開始，先對整個網頁主體的大區塊 sitebody 做規劃，依序接著對 header、sidebar_left、sidebar_right、content、footer 做設計，要做出三欄式的網頁重點就在於 DIV 的浮動技巧，也就是 float，範例在左邊欄 sidebar_left 使用 float:left 代表向左浮動，右邊欄使用 float:right 代表要向右浮動，兩個邊欄向兩邊浮動，那網頁內文區 content 區塊自然就在中間呈現囉！以下為範例用到的各種語法說明。#sitebody{
width:600px;
margin:0 auto;
font-size:13px;
}
#header{
background-color:#FFD4D4;
height:80px;
text-align:center;
line-height:80px;
}
#sidebar_left{
background-color:#FFECC9;
width:120px;
height:400px;
text-align:center;
line-height:400px;
float:left;
}
#sidebar_right{
background-color:#FFECC9;
width:120px;
height:400px;
text-align:center;
line-height:400px;
float:right;
}
#content{
margin-left:120px;
margin-right:120px;
height:400px;
background-color:#F2FFF2;
text-align:center;
line-height:400px;
}
#footer{
clear:both;
background-color:#FFD4D4;
height:80px;
text-align:center;
line-height:80px;
}
</style>
- float - DIV 區塊浮動
- width - DIV 寬度
- height - DIV 高度
- margin - DIV 區塊的外距
- font-size - 文字大小
- background-color - 背景顏色
- text-align - 文字對齊
- line-height - 文字行高
- clear - 清除浮動
只要開一個空白的文件檔，將 CSS 語法貼進去，然後接著貼上 HTML 語法架構內的內容，順序是先 CSS 然後再 HTML，接存成 test.html 的檔案，用瀏覽器開起來就可以看到本文一開始的那個三欄式網頁範例示意圖，原則上 Chrome、FireFox、IE、Safari、Opera 等主流的瀏覽器都可以順利顯示。這只是透過 CSS DIV 設計出三欄式網頁的一種方法，網頁設計師當然有自己的一套設計方式，但大原則通常都是使用類似的手法，DIV 區塊的配置、DIV 寬度、margin、float、background ... 等，只要掌握這些基本的 CSS 概念，就可以靈活運用的設計出各種三欄式網頁。最後，想知道如何設計出單欄式網頁或兩欄式網頁嗎？還有兩篇詳細的介紹，可以比較與三欄式設計有什麼差異。
2021年7月25日 星期日
(示例) HTML中嵌入PHP的簡單方法
我們以一個提交訂單和顯示訂單資訊的例子為學習PHP的開始。這個例子包含兩個檔案。一個提交訂單的html檔案：orderform.html，一個顯示訂單資訊的php檔案：processorder.php。我將這兩個檔案放在test_1資料夾下，將test_1資料夾放在htdocs目錄下。
檔案的組織形式如下圖所示，使用xampps安裝的整合環境。
提交訂單的html檔案orderform.html如下所示：
<form action="processorder.php" method="post">
<table>
<tr bgcolor="#cccccc">
<td width="150">Item</td>
<td width="15">Quantity</td>
</tr>
<tr>
<td>Tires</td>
<td align="center"><input type="text" name="tireqty" size="3" maxlength="3" /></td>
</tr>
<tr>
<td>Oil</td>
<td align="center"><input type="text" name="oilqty" size="3" maxlength="3" /></td>
</tr>
<tr>
<td>Spark Plugs</td>
<td align="center"><input type="text" name="sparkqty" size="3" maxlength="3" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit Order" /></td>
</tr>
</table>
</form>
顯示訂單資訊的php檔案processorder.php如下所示：
// create short variable names, also can use '$_REQUEST['name']'
$tireqty = $_POST['tireqty'];
$oilqty = $_POST['oilqty'];
$sparkqty = $_POST['sparkqty'];
<html>
<head>
<title>Bob 's Auto Parts - Order Results</title>
</head>
<body>
<h1>Bob 's Auto Parts</h1>
<h2>Order Results</h2>
echo "<p>Order processed at ";
echo date('H:i, jS F Y')."</p>";
echo "<p>Your order is as follows: </p>";
echo "$tireqty tires<br />";
echo $oilqty.' bottles of oil<br />';
echo $sparkqty." spark plugs<br />"
---------------------------------------------------<br />
$testHeredoc = <<< EOF
line 1
line 2
line 3
EOF;
echo "$testHeredoc"."<br />";
---------------------------------------------------<br />
echo "About Comment:";
//Here is a comment.
#Here is a comment too.
/*
Here is multi line comment.
Here is multi line comment.
*/
</body>
</html>
在瀏覽器中叫用 orderform.html
填入數字，然後點選"Submit Order"按鈕提交內容。則頁面將顯示processorder.php經過PHP解析器解析之後生成的html頁面
在這個例子中，我們可以學習到以下幾點內容：
2021年6月17日 星期四
04_HTML 屬性
屬性是 HTML 元素提供的附加信息。
HTML 屬性
HTML 屬性
HTML 元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述於開始標籤
屬性總是以名稱/值對的形式出現，比如：name="value"。
(例)
HTML 鏈接由 <a> 標籤定義。鏈接的地址在 href 屬性中指定：
<a href="https://dyhms.no-ip.oirg">這是一個鏈接</a>
<a href="https://dyhms.no-ip.oirg">這是一個鏈接</a>
屬性值應該始終被包括在引號內。
雙引號是最常用的，不過使用單引號也沒有問題。提示: 在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='John "ShotGun" Nelson'屬性和屬性值對大小寫不敏感。不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。而新版本的 (X)HTML 要求使用小寫屬性。
2021年6月16日 星期三
03_HTML 元素
嵌套的 HTML 元素
大多數 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文檔由相互嵌套的 HTML 元素構成。
大多數 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文檔由相互嵌套的 HTML 元素構成。
HTML 空元素
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。
<br> 就是沒有關閉標籤的空元素( <br> 標籤定義換行)。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標籤中添加斜杠，比如 <br />是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
HTML 提示：使用小寫標籤
HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。
菜鳥教程使用的是小寫標籤，因為萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。
02_HTML基礎
HTML 標題（Heading）是通過<h1> - <h6> 標籤來定義的。
(例)
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
(例)
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
HTML 段落是通過標籤 <p> 來定義的。
(例)
<p>這是一個段落。 </p>
<p>這是另外一個段落。 </p>
(例)
<p>這是一個段落。 </p>
<p>這是另外一個段落。 </p>
HTML 圖像是通過標籤 <img> 來定義的.
(例)
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
(註)圖像的名稱和尺寸是以屬性的形式提供的。
(例)
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
(註)圖像的名稱和尺寸是以屬性的形式提供的。
01_HTML 簡介
<!DOCTYPE> 聲明有助於瀏覽器中正確顯示網頁。
網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
聲明方式:
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(註)
在HTML 4.01 中，<!DOCTYPE> 聲明需引用 DTD （文檔類型聲明），因為 HTML 4.01 是基於 SGML（Standard Generalized Markup Language 標准通用標記語言）。
HTML 4.01 規定了三種不同的 <!DOCTYPE> 聲明，分別是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在<head>裡將字符聲明為 UTF-8 或 Big5。 (建議: UTF-8 ), 例:
<head>
<meta charset="UTF-8">
<title>
頁面標題</title>
</head>
<meta charset="UTF-8">
<title>
頁面標題</title>
</head>
訂閱：
文章 (Atom)