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>
