1. HTML標準的延革…
Hyper Text Mark-up Language
Browser從1993年左右的NCSA Mosaic到Netscape的全盛時期、IE的爭奪…W3C制定的規範也逐漸成熟穩定.
2. 架站的基本要件及注意事項
架站軟體：‧Windows光碟中的Personal Web Server (PWS)
‧ NT or Win2000的Internet Information Server (IIS)
‧ Unix 下的Apache
注意事項：‧ IP是否固定？
‧ 預設文件 (index.htm, welcome.htm…..etc)
‧ 預設的資料目錄 (Inetpub\wwwroot\)
‧ 安裝PWS時可能發生錯誤.
3. 工具
純文字編輯：‧HomeSite
‧UltraEdit
編輯器：‧Dreamweaver
‧ Front Page
‧ NetObject Script Builder、Fusion
繪圖、修圖：‧ACDSee
‧Paint Shop Pro
‧Photoshop
‧Ulead Animator Pro
‧Ulead Photo Impact
‧Ulead Cool 3D
4. HTML基本架構及語法
基本架構：
<HTML>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=big5">
<HEAD><TITLE>test page</TITLE></HEAD>
<BODY>
…………………….
…………………….
</BODY>
</HTML>
文字用語法：<H1>、<H2>….<H6>、<B>、<I＞、<U>、<S>、<SUP> or <SUB>…..etc.
字型語法：<FONT>, (SIZE,FACE,COLOR)
NAME：合併於其他的語法中，命名
List語法：<OL> => <LI>、<UL> => <LI>、<DL> => <DT> or <DD>
段落語法：<P>、<BR>、<P><BR>、” “、<!-- -->
ALIGN語法：合併於其他的語法中使用 (ALIGN=RIGHT |LEFT |CENTER |ABSMIDDLE|BOTTOM|TOP)
CENTER語法：<CENTER>及</CENTER>之間的所有敘述都會置中
Pre語法：<PRE>所打即所見
HR語法：<HR>產生一條橫槓 (ALIGN, SIZE, WIDTH, NOSHADE)
鏈結語法I：<A> (HREF=URL|#,onX)
鏈結語法II：VLINK=color, ALINK=color, LINK=color (放在<BODY>內)
圖像語法：<IMG> (SRC, ALIGN, BORDER, HEIGHT, WIDTH, ALT, onX)
表格語法：<TABLE> (BORDER, SIZE, BGCOLOR, BACKGROUND, ALIGN, CELLPADDING, CELLSPACING)
<TR>
<TD> (WIDTH, ROWSPAN, COLSPAN, NOWRAP)
表單語法：<FORM> (METHOD=GET|POST, ACTION=URL|e-mail)
<INPUT> (TYPE=RADIO| CHECKBOX| HIDDEN| RESET |SUBMIT, VALUE)
<TEXTAREA> (ROWS, COLS)
<SELECT> (SIZE, MULTIPLE)
=> <OPTION> (VALUE, CHECKED or SELECTED)
影像地圖：<IMG SRC="test.gif" USEMAP="#test">
<MAP NAME="test">
<AREA SHAPE="RECT" COORDS="52,125,300,249" HREF="test.htm">
<AREA SHAPE="CIRCLE" COORDS="313,290,80" HREF="/~chenym/test/test2.html">
<AREA SHAPE="POLYGON" COORDS="337,112,340,180,421,282,542,291,587,190,504,126,360,154" HREF="test.htm">
</MAP>
5. Cascading Style Sheet (CSS)基本架構及語法
基本架構：
<STYLE>
.addtext
{
position: absolute;
z-index: 1;
left: 43;
top: 180;
font-family: Arial Black;
font-size: 10pt;
}
</STYLE>
<IMG CLASS=addtext SRC=test.jpg>
CLASS可定義在幾乎任何一種HTML語法中,
像是 <P CLASS=…. > , <TABLE CLASS=…>……..etc.
字型語法：color
font-family (字型名稱)
font-style (normal|italic)
font-weight (normal, lighter, bold, bolder, 100, 200, 300….)
font-size (xx-small, x-small, small, medium, large, x-large, xx-large, 12px, 24px….etc)
letter-spcaing (5pt) 設定字與字的間距
text-decoration (none, underline, overline, line-through) 裝飾
vertical-align (sub, super, top, middle, bottom) 垂直對齊
text-align (left, right, center, justify) 水平對齊
lien-height (12pt, 24pt….etc) 行高
background-color (color) 字的背景顏色
鏈結語法：A:link {可接字型語法} 鏈結的一般狀態顏色
A:visited {可接字型語法} 鏈結被瀏覽過的顏色
A:hover {可接字型語法} 滑鼠移到鏈結時的顏色
A:active {color: …..} 滑鼠按下時所顯示的顏色
位置語法：<DIV></DIV>用在HTML 中, 可定義產生效用的範圍
position: (static, relative, absolute)
left: (cm or pixel)
top: (cm or pixel)
z-index: (任何數字, 越大則越上面)
visibility: (hidden, visible) 顯示或不顯示
6. Javascript的應用
Javascript的物件模型：
Screen
Windows Event Link
History Images text input
Document Forms radio input
Location Anchors reset input
Navigator All submit input
checkbox input
selectbox input
window屬性：name, parent, top, self, opener, status…..etc
window方法：open(), close(), focus(), blur(), resizeTo(), resizeBy(), forward(), back(), stop(), home(), print()
事件處理器：(使用在HTML的指令裡面)
onAbout (停止傳送一個網頁時)
onBlur (當此視窗不被作用中時)
onFocus (當此視窗為作用中時)
onChange (當選擇一個表單的元件時)
onError (當javacript 或 HTML錯誤發生時)
onClick (當滑鼠按下時)
onMouseOver (當滑鼠移到一個元件上時)
onMouseOut (當滑鼠離開某個元件時)
onMouseMove (當滑鼠移動時)
onMove (當視窗被移動時)
onLoad (當一個網頁被載入完成時)
onReset (重置一個表單時)
onSubmit (傳送一個表單時)
onResize (調整視窗大小時)
Example：
<HTML>
<SCRIPT LANGUAGE="javascript">
function CreateWindow(file)
{
{
myWindow=window.open(file,"myWindow","fullscreen=no,toolbar=no,height=300,width=300,directories=no,scrollbars=yes,menubar=no,resizable=yes,status=yes");
}
}
function Close()
{
myWindow.close();
}
function Show()
{
document.all.XAxis.value = window.event.clientX;
document.all.YAxis.value = window.event.clientY;
window.status = "X=" + window.event.clientX + ", Y="+ window.event.clientY;
}
function PicOn()
{
document.all.asoka.style.visibility = 'visible'
}
function PicOff()
{
document.all.asoka.style.visibility = 'hidden'
}
function go()
{
document.all.asoka.style.left = window.event.clientX-40;
document.all.asoka.style.top = window.event.clientY-40;
}
</SCRIPT>
<STYLE>
.xx {position: absolute; visibility: visible; left: 10; top: 140;}
</STYLE>
<BODY onMouseMove=Show()>
X： <INPUT NAME=XAxis TYPE=text SIZE=3><BR>
Y： <INPUT NAME=YAxis TYPE=text SIZE=3><P>
<A HREF=# onClick=PicOn()>ON</A>
<A HREF=# onClick=PicOff()>OFF</A>
<A HREF=# onClick=CreateWindow(‘index.htm’)>index.htm</A>
<A HREF=# onClick=Close(‘index.htm’)>index.htm</A>
<P>
<IMG onMouseMove=go() NAME=asoka CLASS=xx SRC=asoka.jpg>
</BODY>
</HTML>
