網頁程式撰寫/2017：修訂版本之間的差異
出自六年制學程
（→自修與進階） |
（→七大類物件搭配的CSS） |
||
| 第 1,006 行： | 第 1,006 行： | ||
*#font-size | *#font-size | ||
*#font-weight | *#font-weight | ||
| + | *#font-style | ||
*#text-decoration | *#text-decoration | ||
*#color | *#color | ||
| 第 1,034 行： | 第 1,035 行： | ||
*#position | *#position | ||
*#樣式值 inherit (繼承) | *#樣式值 inherit (繼承) | ||
| + | *#樣式值 url(路徑) | ||
====自修與進階==== | ====自修與進階==== | ||
2017年12月7日 (四) 11:46的修訂版本
概述
一、課程目標
培養會使用網頁與伺服器做事的人，即結合網際網路前後端的技術，達成以下目的：
- 與使用者溝通；
- 管理資料、運用資料。
二、選修說明
- 修課同學：柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
- 地點：新埔國中信義樓 517
- 時間：週四早上 9:15~12:00
- 費用：無
- 選課優先順位：對資訊應用實作有濃厚興趣，願意參與「全民科學平台」營運者優先
- 教師：丁志仁
- 助教：游士賢
- 上課規範：學員須自行攜帶筆電上課，備妥課本。上課注意聽，作業按時交，考試認真準備。
- 成績兼採筆試及實作評量，通過者得 3 學分
三、課程內容組成
(一)牽涉的技術
- 前端(clint)：HTML4
- DOM
- CSS
- javascript
- jQuery
- SVG
- HTML5
- 後端(SERVER)
- PHP
- 物件使用
- MySQL
- PHP
- 溝通前後端
- 叫出新頁
- ajax
(二)使用的課本
使用《PHP,MySQL,AJAX,網頁設計範例教本》為參考書，旗標出版，學員請自備，向圖書館借用也行。
(三)參考講義
各次上課內容
2017.9.7
- 處理何蕙如在跨校選修平台上建立兩個帳號的問題
- 請士賢、智懷儘速為何蕙如、陳建宇、林佳敏、劉恩佑在筆電上建立 filezilla 、 EmEditor 及其關連。
- 說明課程內容
- 建立每位同學的修課資料夾：
- 後台：個人資料夾/www/php，php資料夾的所有者必須是這位同學，php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
- 前台：6years.jendo.org/~○○○/php
- 檢查瀏覽器
- 檢查文字編輯器
- 檢查上下傳工具
- 檢查每個人的筆記頁
- 建立應答程式對
- form.php：負責以表單跟使用者互動；並設 action 為 r.php。
- r.php：負責接收表單的資料，存入資料表。
- form.php的原始碼：
<meta http-equiv='content-type' content='text/html;charset=UTF-8' /> <form action='r.php'> 姓名：<input type='text' name='姓名' value='丁志仁' /><br/> email：<input type='text' name='email' value='alledu2@gmail.com' /><br/> 電話：<input type='text' name='phone' value='0987466665' /><br/> <input type='submit' value='送出' /> </form>
- r.php
<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
mysql_query("insert into web set 姓名='".$_REQUEST['姓名']."',phone='".$_REQUEST['phone']."'");
mysql_close($connect);
?>
2017.9.14
- 第一次到課的同學：
- 檢查筆記頁有沒有建好？
- 檢查 filezilla 有沒有連結到文字編輯器？
- 檢查 filezilla 有沒有這兩個連線：「DS216(共用)」、「DS216(自己)」
- 檢查有沒有在 「home/www」之下建立 php 資料夾，放練習程式。
- 去共用的 home/www 中，下載回來「網頁程式撰寫」程「HTMLeBook」兩個資料夾，放在自己不會忘掉的地方。
- 今天的進度是課本第三章HTML概述
- 宣告HTML版本
- HTML5文件類型宣告：
<!DOCTYPE html>
- HTML4文件類型宣告：
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
- HTML5文件類型宣告：
- 直接看第三章評量。
- 說明範例程式。
2017.9.21
2017.9.28
- 第五章
- 敘述區塊：
- 在某些條件下才執行的敘述集合，結構為「條件{諸敘述}」
- 「}」之後不再加「;」
- 三元算符，可以在同一敘述中完成二選一條件判斷。
- 將 Ch5_2_5.php(三元運算?:)改成用一行表達。
- 比較新寫法的優點。
- 將 Ch5_4.php 九九乘法表改成雙層的 for 迴圈。
2017.10.5
2017.10.12
- 程式 Ch6_6_4.php(驗證密碼格式)
- 做第六章作業
- 第七章
2017.10.19
2017.10.26
- 使用adminer，請認識其連結。
- 去了解 r.php ，今天之後就會修改 wiki 頁。
- 區分資料表與資料庫(放資料表的資料夾)
- 認識 web 和 webMail 兩資料表。
- 建立自己的資料表 web_xxx 和 webMail_xxx 。
- nameList0.php 最素樸的起點，只有編，沒有增人、增mail
- javascript驗證
- 以makeForm類別生成表單
<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
// 前置處理
if($_POST['type']=='確定'){
mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
}
elseif($_GET['type']=='editForm'){
echo editForm($_GET['wid'],$_GET['eid']);
}
else{
#
}
$result=mysql_query("select * from web"); // 取資料
$colName=array('序','','wid','姓名','電話');// 設表格首列名稱
$id='wid'; // 配置識別欄欄名
// 輸入驗證程式
$str="<script language='javascript'>
function chkForm(){
if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function chkNameForm(){
if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
}
function chkMailForm(){
if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function isEmail(theStr){
var atindex=theStr.indexOf('@');
var dotindex=theStr.indexOf('.',atindex);
var flag=true;
thesub=theStr.substring(0,dotindex+1);
if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
else{flag=true;}
return(flag);
}
</script>\n";
echo $str.nicetable($result,$colName,$id);
mysql_close($connect);
function editForm($wid){
$result=mysql_query("select a.姓名,a.phone,b.email,b.eid from web a,webMail b where a.wid=b.wid && a.wid=".$wid);
$row=mysql_fetch_array($result,MYSQL_ASSOC); // 只取第一筆
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
$xx->elements[]=array('email：','text','email',$row['email']); // 第一筆 email
$xx->elements[]=array('電話：','text','phone',$row['phone']);
$xx->elements[]=array('','hidden','wid',$wid);
$xx->elements[]=array('','hidden','eid',$row['eid']);
return $xx->makeFormStr();
}
function nicetable($result,$colName,$id){
$i=1; // 筆計數器
$str="<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>";
$str.="<tr>";
foreach($colName as $colValue){
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
}
$str.="</tr>";
$temp=array();
while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
$temp[$row[$id]]['姓名']=$row['姓名'];
$temp[$row[$id]]['phone']=$row['phone'];
}
foreach($temp as $k=>$v){
$str.="<tr>";
$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'><a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k.">編</a></th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
$str.="</tr>";
$i++;
}
$str.="</table>";
return $str;
}
class makeForm{
var $elements=array(); // 表單內容初值為空陣列
var $submitValue='確定';
var $checkWhich='chkForm()';
function makeFormStr(){
$str="\n<form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'>\n"; // 表單字串
// 加入諸元素
foreach($this->elements as $輸入框){
$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
if($輸入框[1]!='hidden'){$str.="<br/>";}
$str.="\n";
}
$str.="<input type='submit' name='type' value='".$this->submitValue."' onClick=\"return ".$this->checkWhich.";\" />\n";
$str.="</form>\n";
return $str;
}
}
?>
- 工作程式的一般思維流程：
- 載入常數、變數、函式、類別(初始示範程式省略)
- 前置處理
- 流程變數的判讀
- 讀取資料
- 字串好儲存，陣列好處理
- 造共用的 html 碼長字串
- 其中 javascript 是重點
- 將資料生成為適當的 html 碼
- 送出顯示
- 有些是與使用者互動的介面
- 含使用者回應不符期待時的指示
- 歸還資料庫連結的掛號牌
- 專案實作：
- 需求分析
- 關聯式資料設計
- 適當欄位預設值的設置，可以替代 php 程式的設計
- 規畫流程變數
- 分鏡：需要哪些工作程式
- 工作程式是可以適度合併的
- 工作程式減少，程式結構變大，流程變數的動作變複雜
- 這一點是導致相同功能程式，其寫法差異極大的主因
- 使用 framework (框架工具)會使得工作程式的可讀性大增
2017.11.2
- 解說類別的設計與物件的使用
- 為什麼類別與物件內的變數與函式要叫做「屬性」和「方法」
- 實體化
- 解說用 javascrip 驗證使用者輸入資料
2017.11.9
- nameList1.php
- 合併個人諸 mail，使人名跨列
- 加入編mail
<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
// 前置處理
if($_POST['type']=='編畢'){
mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
}
elseif($_POST['type']=='確定'){
mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
}
elseif($_POST['type']=='增一人'){
mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
}
elseif($_POST['type']=='加Mail'){
mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
}
elseif($_GET['type']=='delMail'){
mysql_query("delete from webMail where eid='".$_GET['eid']."'");
}
elseif($_GET['type']=='delPerson'){
mysql_query("delete from webMail where wid='".$_GET['wid']."'");
mysql_query("delete from web where wid='".$_GET['wid']."'");
}
elseif($_GET['type']=='editMailForm'){
echo editMailForm($_GET['eid']);
}
elseif($_GET['type']=='editForm'){
echo editForm($_GET['wid'],$_GET['eid']);
}
elseif($_GET['type']=='insPersonForm'){
echo insPersonForm();
}
elseif($_GET['type']=='insMailForm'){
echo insMailForm($_GET['wid']);
}
else{
#
}
$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
$colName=array('序','','wid','姓名','手機','±M','eid','Email');
$str="<script language='javascript'>
function chkForm(){
if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function chkNameForm(){
if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
}
function chkMailForm(){
if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function isEmail(theStr){
var atindex=theStr.indexOf('@');
var dotindex=theStr.indexOf('.',atindex);
var flag=true;
thesub=theStr.substring(0,dotindex+1);
if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
else{flag=true;}
return(flag);
}
</script>\n";
echo $str.nicetable($result,$colName);
mysql_close($connect);
function insMailForm($wid){
$xx=new makeForm;
$xx->elements[]=array('email：','text','email','');
$xx->elements[]=array('','hidden','wid',$wid);
$xx->submitValue='加Mail';
$xx->checkWhich='chkMailForm()';
return $xx->makeFormStr();
}
function editMailForm($eid){
$result=mysql_query("select email from webMail where eid=".$eid);
$row=mysql_fetch_array($result,MYSQL_ASSOC);
$xx=new makeForm;
$xx->elements[]=array('email：','text','email',$row['email']);
$xx->elements[]=array('','hidden','eid',$eid);
$xx->submitValue='編畢';
$xx->checkWhich='chkMailForm()';
return $xx->makeFormStr();
}
function insPersonForm(){
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名','');
$xx->elements[]=array('電話：','text','phone','');
$xx->submitValue='增一人';
$xx->checkWhich='chkNameForm()';
return $xx->makeFormStr();
}
function editForm($wid){
$result=mysql_query("select 姓名,phone from web where wid=".$wid);
$row=mysql_fetch_array($result,MYSQL_ASSOC);
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
$xx->elements[]=array('電話：','text','phone',$row['phone']);
$xx->elements[]=array('','hidden','wid',$wid);
$xx->submitValue='確定';
return $xx->makeFormStr();
}
function nicetable($result,$colName){
$i=1;
$str="\n<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>\n";
$str.="<tr><td colspan=8 style='border-top:none;border-left:none;border-right:none;'><p style='text-align:right'>《<a href='".$_SERVER['PHP_SELF']."?type=insPersonForm'>增一人</a>》</p></td></tr>\n";
$str.="<tr>";
foreach($colName as $colValue){
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
}
$str.="</tr>\n";
$temp=array();
while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
$temp[$row['wid']]['姓名']=$row['姓名'];
$temp[$row['wid']]['phone']=$row['phone'];
$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
}
foreach($temp as $k=>$v){
$rs=count($v['mail']);$j=0;
foreach($v['mail'] as $kk=>$vv){
$str.="<tr>";
$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
if($j==0){
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'><a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&eid=".$kk.">編</a> <a href=".$_SERVER['PHP_SELF']."?type=delPerson&wid=".$k.">刪</a></th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
}
$str.="<th style='border:1px solid black;border-collapse:collapse'><a href='".$_SERVER['PHP_SELF']."?type=insMailForm&wid=".$k."'>＋</a>";
if($kk){$str.=" <a href='".$_SERVER['PHP_SELF']."?type=editMailForm&eid=".$kk."'>編</a> <a href='".$_SERVER['PHP_SELF']."?type=delMail&eid=".$kk."'>—</a>";}
$str.="</th>";
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$kk."</th>";
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$vv."</th>";
$j++;
if($j==$rs){$j=0;}
$str.="</tr>\n";
$i++;
}
}
$str.="</table>\n";
return $str;
}
class makeForm{
var $elements=array(); // 表單內容初值為空陣列
var $submitValue='確定';
var $checkWhich='chkForm()';
function makeFormStr(){
$str="\n<form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'>\n"; // 表單字串
// 加入諸元素
foreach($this->elements as $輸入框){
$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
if($輸入框[1]!='hidden'){$str.="<br/>";}
$str.="\n";
}
$str.="<input type='submit' name='type' value='".$this->submitValue."' onClick=\"return ".$this->checkWhich.";\" />\n";
$str.="</form>\n";
return $str;
}
}
?>
- 摘要說明：
- 完全不用變動：「makeForm 類別定義」、「javascript輸入驗證程式」
- 擴充前置處理程式，由一種表單擴充到四種表單：「增一人」、「編一人」、「增一mail」、「編一mail」四種表單，和「刪一人」、「刪一mail」等兩種連結，以及相應的六種資料表前置處理。
- 新增「insMailForm($wid)」、「editMailForm($eid)」、「insPersonForm()」三個表單生成函式，並微調「editForm($wid,$eid)」函式。
- 修改撈資料表的 SQL 指令：由「select * from web」改為
「select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''」 - 修改主要顯示函式「nicetable」：
- 把泛用 id 固定成 wid
- 增加《增一人》連結
- 在 while 迴圈中將 email 塞入 $temp[wid]['mail'][eid] 中，然後計數 $temp[wid]['mail'] 有幾個元素來決定 rowspan 幾列。
- 改變表格的 title 列。
- 逐一秀出連結和通訊資料
2017.11.16
AJAX 即“Asynchronous JavaScript and XML”(非同步的JavaScript與XML技術)，是網頁程式技術發展的理程碑之一
- 以 JavaScript 驅動的瀏覽器端網頁開發技術。
- 不需要換頁，即可與伺服端互動，至於和客戶端互動的伺服端語言是什麼，AJAX 網頁不在乎，可以是 PHP 、可以是 JSP 、可以是 ASP ，甚至可以是 note.js 。
- 後來演變出 note.js 等技術，伺服端語言也使用 JavaScript 語法。
- response.php：新增此程式以觀察伺服器要如何回應
<?php echo "catch:e0=".$_POST['e0']; ?>
- nameList2.php
- 新增 div(id='show')，供伺服器端回應輸出
- 新增 form(id='ajaxTest')，走 ajax 通道，送資料給 response.php
- javascript 段落中增加：
- var ahr
- createXMLHttpRequestObject
- postData
- sendFormData
- encode
<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
// 前置處理
if($_POST['type']=='編畢'){
mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
}
elseif($_POST['type']=='確定'){
mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
}
elseif($_POST['type']=='增一人'){
mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
}
elseif($_POST['type']=='加Mail'){
mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
}
elseif($_GET['type']=='delMail'){
mysql_query("delete from webMail where eid='".$_GET['eid']."'");
}
elseif($_GET['type']=='delPerson'){
mysql_query("delete from webMail where wid='".$_GET['wid']."'");
mysql_query("delete from web where wid='".$_GET['wid']."'");
}
elseif($_GET['type']=='editMailForm'){
echo editMailForm($_GET['eid']);
}
elseif($_GET['type']=='editForm'){
echo editForm($_GET['wid'],$_GET['eid']);
}
elseif($_GET['type']=='insPersonForm'){
echo insPersonForm();
}
elseif($_GET['type']=='insMailForm'){
echo insMailForm($_GET['wid']);
}
else{
#
}
$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
$colName=array('序','','wid','姓名','手機','±M','eid','Email');
$str="
<div id='show' style='border:red 2px solid;width:500px;'>
123456
</div>
<br/>
<form id='ajaxTest'>
<input type='text' name='e0' value=''>
<input type='button' name='button' value='後送' onclick=\"sendFormData('ajaxTest','/~丁志仁/php/response.php','show');\" >
</form>
<script language='javascript'>
function chkForm(){
if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function chkNameForm(){
if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
}
function chkMailForm(){
if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function isEmail(theStr){
var atindex=theStr.indexOf('@');
var dotindex=theStr.indexOf('.',atindex);
var flag=true;
thesub=theStr.substring(0,dotindex+1);
if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
else{flag=true;}
return(flag);
}
var ahr=createXMLHttpRequestObject(); // 先建立物件以俾重覆使用
function createXMLHttpRequestObject(){
var ahr=false; // 物件初值設為不存在
if(window.XMLHttpRequest){ahr=new XMLHttpRequest();}// 產生非同步請求物件，本行給Firefox，下行給IE5,6
else if(window.ActiveXObject){ahr=new ActiveXObject('Microsoft.XMLHTTP');}
if(!ahr){alert('Error: failed to create the XMLHttpRequest object.');}
else{return ahr;}
}
function postData(dataSource,parm,divID){ // 對 dataSource 後送POST請求，帶 parm 參數，回應送divID，回應後執行 onAjax(a)
if(ahr){
ahr.open('POST',dataSource); // 初始化請求
ahr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 通知伺服器後送資料是url編碼
ahr.onreadystatechange=function(){if(ahr.readyState==4 && ahr.status==200){document.getElementById(divID).innerHTML=ahr.responseText;}};
parm+='&nowtime='+new Date().getTime(); // 使後送資料不同
ahr.send(parm); // 執行請求並後送資料
}
else{alert('Error: XMLHttpRequest object do not exist.');}
}
function sendFormData(idForm,dataSource,divID){ // 從指定表單擷取資料並後送
if(ahr){
var sendData='';
for(var i=0;i<document.getElementById(idForm).elements.length;i++){
if(document.getElementById(idForm).elements[i].type=='checkbox' || document.getElementById(idForm).elements[i].type=='radio'){
if(document.getElementById(idForm).elements[i].type=='checkbox'){ // 處理核取方塊，checked回傳值，沒checked回傳空無一物
if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
else{sendData += '&'+document.getElementById(idForm).elements[i].name+'=';}
}else{ // 處理按鈕，checked回傳值，否則跳過
if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
}
} // 非核取方塊非按鈕，如為隱藏欄不編碼傳回值，不是隱藏欄則編碼傳回值
else if(document.getElementById(idForm).elements[i].type=='hidden'){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+document.getElementById(idForm).elements[i].value;}
else{sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
}
}
postData(dataSource,sendData,divID);
}
function encode(x){
return x.replace(/%/g,'%25').replace(/&/g,'%26').replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27');
}
</script>\n";
echo $str.nicetable($result,$colName);
mysql_close($connect);
function insMailForm($wid){
$xx=new makeForm;
$xx->elements[]=array('email：','text','email','');
$xx->elements[]=array('','hidden','wid',$wid);
$xx->submitValue='加Mail';
$xx->checkWhich='chkMailForm()';
return $xx->makeFormStr();
}
function editMailForm($eid){
$result=mysql_query("select email from webMail where eid=".$eid);
$row=mysql_fetch_array($result,MYSQL_ASSOC);
$xx=new makeForm;
$xx->elements[]=array('email：','text','email',$row['email']);
$xx->elements[]=array('','hidden','eid',$eid);
$xx->submitValue='編畢';
$xx->checkWhich='chkMailForm()';
return $xx->makeFormStr();
}
function insPersonForm(){
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名','');
$xx->elements[]=array('電話：','text','phone','');
$xx->submitValue='增一人';
$xx->checkWhich='chkNameForm()';
return $xx->makeFormStr();
}
function editForm($wid){
$result=mysql_query("select 姓名,phone from web where wid=".$wid);
$row=mysql_fetch_array($result,MYSQL_ASSOC);
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
$xx->elements[]=array('電話：','text','phone',$row['phone']);
$xx->elements[]=array('','hidden','wid',$wid);
$xx->submitValue='確定';
return $xx->makeFormStr();
}
function nicetable($result,$colName){
$i=1;
$str="\n<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>\n";
$str.="<tr><td colspan=8 style='border-top:none;border-left:none;border-right:none;'><p style='text-align:right'>《<a href='".$_SERVER['PHP_SELF']."?type=insPersonForm'>增一人</a>》</p></td></tr>\n";
$str.="<tr>";
foreach($colName as $colValue){
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
}
$str.="</tr>\n";
$temp=array();
while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
$temp[$row['wid']]['姓名']=$row['姓名'];
$temp[$row['wid']]['phone']=$row['phone'];
$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
}
foreach($temp as $k=>$v){
$rs=count($v['mail']);$j=0;
foreach($v['mail'] as $kk=>$vv){
$str.="<tr>";
$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
if($j==0){
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'><a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&eid=".$kk.">編</a> <a href=".$_SERVER['PHP_SELF']."?type=delPerson&wid=".$k.">刪</a></th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
}
$str.="<th style='border:1px solid black;border-collapse:collapse'><a href='".$_SERVER['PHP_SELF']."?type=insMailForm&wid=".$k."'>＋</a>";
if($kk){$str.=" <a href='".$_SERVER['PHP_SELF']."?type=editMailForm&eid=".$kk."'>編</a> <a href='".$_SERVER['PHP_SELF']."?type=delMail&eid=".$kk."'>—</a>";}
$str.="</th>";
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$kk."</th>";
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$vv."</th>";
$j++;
if($j==$rs){$j=0;}
$str.="</tr>\n";
$i++;
}
}
$str.="</table>\n";
return $str;
}
class makeForm{
var $elements=array(); // 表單內容初值為空陣列
var $submitValue='確定';
var $checkWhich='chkForm()';
function makeFormStr(){
$str="\n<form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'>\n"; // 表單字串
// 加入諸元素
foreach($this->elements as $輸入框){
$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
if($輸入框[1]!='hidden'){$str.="<br/>";}
$str.="\n";
}
$str.="<input type='submit' name='type' value='".$this->submitValue."' onClick=\"return ".$this->checkWhich.";\" />\n";
$str.="</form>\n";
return $str;
}
}
?>
會議資料處理的資料結構示例
- 會議
- conf_id / varchar(3) / 會議id
- date / date / 日期
- location / varchar(255) / 地點
- host / varchar(100) / 主持人
- present / text / 出列席人員
- 案
- matter_id / varchar(4) / 事項id
- conf_id / varchar(3) / 會議id
- discussion / varchar(255) / 案由
- statement / text / 說明
- method / text / 辦法
- desision / text / 決議
- proponent / varchar(255) / 報告人或提案人
- tag / varchar(255) / 事件標籤
- 附件
- attn_id / int(4) 自動遞增 / 附件id
- matter_id / varchar(4) / 事項id
- conf_id / varchar(3) / 會議id
- summary / varchar(255) / 名稱
- link / varchar(255) / 連結
- provider / varchar(255) / 提供者
- date / date / 日期
2017.11.23
- nameList3.php：ajax 的完整程式，所有連結與表單改成 ajax
<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
$colName=array('序','','wid','姓名','手機','±M','eid','Email');
if(isset($_REQUEST['type'])){ // 前置處理
if($_POST['type']=='編畢'){
mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
}
if($_POST['type']=='確定'){
mysql_query("update web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."' where wid=".$_POST['wid']);
}
elseif($_POST['type']=='增一人'){
mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
}
elseif($_POST['type']=='加Mail'){
mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
}
elseif($_POST['type']=='delMail'){
mysql_query("delete from webMail where eid='".$_POST['eid']."'");
}
elseif($_POST['type']=='delPerson'){
mysql_query("delete from webMail where wid='".$_POST['wid']."'");
mysql_query("delete from web where wid='".$_POST['wid']."'");
}
elseif($_POST['type']=='editMailForm'){
echo editMailForm($_POST['eid']);
}
elseif($_POST['type']=='editForm'){
echo editForm($_POST['wid'],$_POST['eid']);
}
elseif($_POST['type']=='insPersonForm'){
echo insPersonForm();
}
elseif($_POST['type']=='insMailForm'){
echo insMailForm($_POST['wid']);
}
$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
echo nicetable($result,$colName);
}
else{ // 第一次載入
$str="<script language='javascript'>
function chkFormList(idForm,dataSource,divID){
if(('姓名' in document.表單) && document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();}
else if(('email' in document.表單) && document.表單.email.value == ''){alert('請填寫Email！');document.表單.email.focus();}
else if(('email' in document.表單) && document.表單.email.value != '' && !isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();}
else{sendFormData(idForm,dataSource,divID);}
}
function isEmail(theStr){
var atindex=theStr.indexOf('@');
var dotindex=theStr.indexOf('.',atindex);
var flag=true;
thesub=theStr.substring(0,dotindex+1);
if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
else{flag=true;}
return(flag);
}
var ahr=createXMLHttpRequestObject(); // 先建立物件以俾重覆使用
function createXMLHttpRequestObject(){
var ahr=false; // 物件初值設為不存在
if(window.XMLHttpRequest){ahr=new XMLHttpRequest();}// 產生非同步請求物件，本行給Firefox，下行給IE5,6
else if(window.ActiveXObject){ahr=new ActiveXObject('Microsoft.XMLHTTP');}
if(!ahr){alert('Error: failed to create the XMLHttpRequest object.');}
else{return ahr;}
}
function postData(dataSource,parm,divID){ // 對 dataSource 後送POST請求，帶 parm 參數，回應送divID，回應後執行 onAjax(a)
if(ahr){
ahr.open('POST',dataSource); // 初始化請求
ahr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 通知伺服器後送資料是url編碼
ahr.onreadystatechange=function(){if(ahr.readyState==4 && ahr.status==200){document.getElementById(divID).innerHTML=ahr.responseText;}};
parm+='&nowtime='+new Date().getTime(); // 使後送資料不同
ahr.send(parm); // 執行請求並後送資料
}
else{alert('Error: XMLHttpRequest object do not exist.');}
}
function sendFormData(idForm,dataSource,divID){ // 從指定表單擷取資料並後送
if(ahr){
var sendData='';
for(var i=0;i<document.getElementById(idForm).elements.length;i++){
if(document.getElementById(idForm).elements[i].type=='checkbox' || document.getElementById(idForm).elements[i].type=='radio'){
if(document.getElementById(idForm).elements[i].type=='checkbox'){ // 處理核取方塊，checked回傳值，沒checked回傳空無一物
if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
else{sendData += '&'+document.getElementById(idForm).elements[i].name+'=';}
}else{ // 處理按鈕，checked回傳值，否則跳過
if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
}
} // 非核取方塊非按鈕，如為隱藏欄不編碼傳回值，不是隱藏欄則編碼傳回值
else if(document.getElementById(idForm).elements[i].type=='hidden'){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+document.getElementById(idForm).elements[i].value;}
else{sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
}
}
postData(dataSource,sendData,divID);
}
function encode(x){
return x.replace(/%/g,'%25').replace(/&/g,'%26').replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27');
}
</script>
<div id='show'>\n";
$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
$str.=nicetable($result,$colName);
$str.="</div>\n";
echo $str;
}
mysql_close($connect);
function insMailForm($wid){
$xx=new makeForm;
$xx->elements[]=array('email：','text','email','');
$xx->elements[]=array('','hidden','wid',$wid);
$xx->submitValue='加Mail';
return $xx->makeFormStr();
}
function editMailForm($eid){
$result=mysql_query("select email from webMail where eid=".$eid);
$row=mysql_fetch_array($result,MYSQL_ASSOC);
$xx=new makeForm;
$xx->elements[]=array('email：','text','email',$row['email']);
$xx->elements[]=array('','hidden','eid',$eid);
$xx->submitValue='編畢';
return $xx->makeFormStr();
}
function insPersonForm(){
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名','');
$xx->elements[]=array('電話：','text','phone','');
$xx->submitValue='增一人';
return $xx->makeFormStr();
}
function editForm($wid){
$result=mysql_query("select 姓名,phone from web where wid=".$wid);
$row=mysql_fetch_array($result,MYSQL_ASSOC);
$xx=new makeForm;
$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
$xx->elements[]=array('電話：','text','phone',$row['phone']);
$xx->elements[]=array('','hidden','wid',$wid);
$xx->submitValue='確定';
return $xx->makeFormStr();
}
function nicetable($result,$colName){
$i=1;
$str="\n<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>\n";
$str.="<tr><td colspan=8 style='border-top:none;border-left:none;border-right:none;'><p style='text-align:right'>《".ajaxLink(array('type'=>'insPersonForm'),'增一人')."》</p></td></tr>\n";
$str.="<tr>";
foreach($colName as $colValue){
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
}
$str.="</tr>\n";
$temp=array();
while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
$temp[$row['wid']]['姓名']=$row['姓名'];
$temp[$row['wid']]['phone']=$row['phone'];
$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
}
foreach($temp as $k=>$v){
$rs=count($v['mail']);$j=0;
foreach($v['mail'] as $kk=>$vv){
$str.="<tr>";
$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
if($j==0){
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".ajaxLink(array('type'=>'editForm','wid'=>$k),'編')." ".ajaxLink(array('type'=>'delPerson','wid'=>$k),'刪')."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
}
$str.="<th style='border:1px solid black;border-collapse:collapse'>".ajaxLink(array('type'=>'insMailForm','wid'=>$k),'＋');
if($kk){$str.=" ".ajaxLink(array('type'=>'editMailForm','eid'=>$kk),'編')." ".ajaxLink(array('type'=>'delMail','eid'=>$kk),'—');}
$str.="</th>";
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$kk."</th>";
$str.="<th style='border:1px solid black;border-collapse:collapse'>".$vv."</th>";
$j++;
if($j==$rs){$j=0;}
$str.="</tr>\n";
$i++;
}
}
$str.="</table>\n";
return $str;
}
function ajaxLink($paras,$prompt){
$str="<a href='' onclick=\"postData('".$_SERVER['PHP_SELF']."','";
foreach($paras as $k=>$v){$str.="&".$k."=".$v;}
$str.="','show');return false;\">".$prompt."</a>";
return $str;
}
class makeForm{
var $elements=array(); // 表單內容初值為空陣列
var $submitValue='確定';
var $checkWhich='chkFormList()';
function makeFormStr(){
$str="\n<form name='表單' id='表單'>\n"; // 表單字串
// 加入諸元素
foreach($this->elements as $輸入框){
$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
if($輸入框[1]!='hidden'){$str.="<br/>";}
$str.="\n";
}
$str.="<input type='button' name='type' value='".$this->submitValue."' onclick=\"chkFormList('表單','".$_SERVER['PHP_SELF']."','show')\">\n";
$str.="</form>\n";
return $str;
}
}
?>
- 摘要說明：
- 將整個程式分的主流程成「前置處理」與「第一次載入」兩大部分
- 主流程之前：連結資料庫、設定表格的標題列
- 主流程之後：繳還資料庫的掛號牌
- 最後放 php 諸類別及諸函式的定義
- 第一次載入：
- 形成 javascript 字串，內含「表單驗證」和「ajax函式群」
- 形成秀出 ajax 回應區域，預設內裝 nicetable 。
- 前置處理：
- 諸「流程變數」條件區塊中，所有回應通道改換成 POST 通道。
- 所有前置處理的最後均回應 nicetable 。
- 輸入驗證將 chkForm(),chkNameForm(),chkMailForm() 三者整合成 chkFormList() ，驗證完走 sendFormData 函式。
- makeForm 類別定義：
- checkWhich 屬性，預設為 chkFormList() 。
- form 標籤取消換頁指示，增加 id 。
- submit 按鈕改 button 按鈕，並送往 chkFormList() 。
- 四個表單製造函式：取消 checkWhich 屬性的指定。
- 新增函式 ajaxLink(參數,按鈕提示) ，處理所有連結。
- 本函式及接手的 javascript postData 函式中都沒有去處理 urlencode ，但 postData 卻對伺服器宣稱後送資料是 urlencoded 。
- 後送變數名與變數值不要出現： %、&、+、"、' 等五個字元。
- 函式 nicetable 修改：增一人，人的編、刪連結，email 的增、編、刪連結，改成 ajaxLink() 。
- 將整個程式分的主流程成「前置處理」與「第一次載入」兩大部分
- 同學產出：
2017.11.30
- 網站的最精簡布局
- 可變化的內容區
- 不大變化的 banner
- 導航列
- 先照抄 6years.jendo.org/~丁志仁/ROC/ 的原始碼，到自己的 www/WWEB 之下的 demoSite.php 。
- 功能展示。注意第三層以下之導妔。
- 另參考 6years.jendo.org/~王秀雲/ESA/ ，用「/~王秀雲/ESA/導航列」來生成導航列。
- 另參考 均優學習論壇 外觀設計。
- 觀察 WebContent 資料表，與內部映射過程。
- 先拆成小部分，分別用 php 來完成
- 找 link 標籤，將兩個 css 下載回來。
- 從 css 中找 url 字串，將導航列背景圖下載回來，並用小畫家觀察。
- 找 src 屬性，將兩個 banner 用圖檔下載回來。
- 分析 javascript 段落。
- Model–view–controller 三者分離
- 基本觀念：
- 一個伺服器上有多個網站(SITE)，彼此共用基本「類別」
- 每個 SITE 有自己的外觀 Theme
- 每個 Theme 簡化為 banner 、 導航列 、 ajax 內容顯示區
- 實作WWEB：
- DB類別，無屬性諸方法
- connect($dsn)：利用DSN連結資料庫
- queryF($sql,$perpage=0,$start=0)：送出查詢，傳回結果
- numRows($result)：傳回查詢結果的筆數
- getResultValue($result,$recordNo,$col)：傳回查詢結果第幾列、第幾欄的值
- siteConstant.php
- Theme 的模組化
- style.css、menu.css
- navbar-bg的搭配與使用
- banner圖照的去背與嵌入
- 畫字
- 工作程式
- Theme的前半
- Theme的後半
- DB類別，無屬性諸方法
SESSION
- @session_start();
- $_SESSION 儲值
- 在另一個 php 中(翻頁後)檢查 $_SESSION 的值
- 一次儲值多次檢查，直到瀏覽器關閉
2017.12.7
CSS基本說明
串接樣式表(Cascading Style Sheets)，用來控制網頁外觀表現。
- 三種使用方式：
- 行內樣式：標籤的 style 屬性，優先級最高。
- 內部樣式表：在本頁內 style 標籤段落中，優先級中等。
- 外部樣式表：載入外部的樣式定義檔，優先級最低。
- 基本選擇器
- 標籤(元素)選擇器（h1，p等）
- 類別選擇器（class）——.類別名
- ID選擇器（ID）——#某ID
- 萬用選擇器——*
- 屬性選擇器——[屬性]
- 虛擬類別選擇器
- 虛擬類別選擇器指的是為不同的狀態、性質的元素。
| 屬性 | 狀態 |
|---|---|
:link |
超連接未被訪問 |
:visited |
超連接被訪問過 |
:hover |
滑鼠（鼠標）在元素上面 |
:active |
滑鼠（鼠標）在元素上按著 |
:focus |
焦點在元素上 |
:target |
元素被URL標記（CSS 3新增的類別） |
:lang |
向帶有指定lang屬性的元素添加樣式。 |
- 兩選擇器之間用 , 與 空白 相連，意思不同
方盒子模型(Box Model)
- padding(內距)：
- 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
- 不可以設定負值，這點與 margin 不同。
- 基本語法範例：
padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
- padding:auto;：讓瀏覽器自己去設定
- padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。
- margin(邊沿)：
- 控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。
- 可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
- 基本語法範例：
margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
- margin:auto;：讓瀏覽器自己去設定。
- margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。
- border(邊框)：
- 邊框粗細：用長度表達
- 邊框顏色：可以使用色標準色碼或顏色的英文名稱表達
- 邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等：border-style:solid;border-style:dotted;border-style:dashed;border-style:double;border-style:outset;border-style:groove;border-style:ridge;border-style:inset;border-style:none;
七大類物件搭配的CSS
- 字,字串，請用 span 練習
- font-family
- font-size
- font-weight
- font-style
- text-decoration
- color
- 段，請用 p 練習
- margin，及其衍生四邊
- text-indent搭配margin-left
- line-height
- letter-spacing
- vertical-align
- text-align
- 頁，請用 div 配合 page 樣式值練習
- size
- margin
- 圖，請用 img 練習(見方盒子模型)
- 表，請用 table,tr,td,th 練習
- border-collapse:collapse;
- height 針對 tr
- width 針對 td th
- 區，請用 div 練習
- float
- display
- 列點，請用 ul,ol,li 練習
- list-style
- list-style-image
- 通用
- background
- background-color
- position
- 樣式值 inherit (繼承)
- 樣式值 url(路徑)
自修與進階
