网站设计基础
一 网站基础
IP地址
有三类内部IP地址:
10.0.0.0~10.255.255.255;
172.16.0.0~172.31.255.255;
192.168.0.0~192.168.255.255;
设置IIS
二 HTML语言
基本格式
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<p>正文</p>
</body>
</html>
注意:从WORD文件中不能把程序直接拷到frontpage中,要从写字板转一下。
文字格式
<h1><font color="#FF0000">红色标题(H1)</font></h1>
<p>正文</p>
<p><b><i><font size="6">6号字(24磅)加粗倾斜</font></i></b></p>
表格
这是一个2行2列的表格。
<table border="1" cellpadding="0" cellspacing="5" width="400" height="100">
<tr>
<td width="50%" height="50%" align="center">qwee</td>
<td width="50%" height="50%" align="center">ertrtrtr</td>
</tr>
<tr>
<td width="50%" height="50%" align="center">fghhghg</td>
<td width="50%" height="50%" align="center">ghjjhjhjhj</td>
</tr>
</table>
插入超链
<p><a href="page1.htm">链接1</a></p>
插入图片
<p><img border="0" src=" images/AN02542_.gif" width="512" height="384"></p>
在frontpage中插入图片后,还可以加上id(图名),为下一步调用带来方便。
<img src="images/AN02542_.gif" id=VID>
框架
在</head>下面的HTML语言如下:
<frameset rows="64[d1] ,*">
<frame name="banner" scrolling="no" noresize target="contents" src="top.htm">
<frameset cols="150,*">
<frame name="contents" target="main[d2] " src="left.htm[d3] ">
<frame name="main" src="right.htm">
</frameset>
<noframes>
<body>
<p>此网页使用了框架,但您的浏览器不支持框架。</p>
</body>
</noframes>
</frameset>
使用CSS定义9磅字
使用CSS样式表可以使字体固定,划分段落,确定链接的颜色和方式等。
使用9磅字是最常用的应用之一。制作方法为:
在Dreamweaver中打开CSS面板,新建样式表,填入NAME(9P)、Make Custon Style、This Document Only,然后按OK,进入下一窗口,选择宋体、9、point。
如果要在文档中统一使用9磅字,可以不用9p样式表,直接如下写入:
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body { font-family: "宋体"; font-size: 9pt}
td { font-family: "宋体"; font-size: 9pt}
-->
</style>
这样,就在正文和表格中所有的缺省的字体均设置成9磅字了。
用DHTML编写点击展开
<body>
<SCRIPT LANGUAGE=VBSCRIPT>
<!--
SUB HEAD1_ONCLICK()
IF NR1.STYLE.DISPLAY="" THEN
NR1.STYLE.DISPLAY="NONE"
ELSE
NR1.STYLE.DISPLAY=""
END IF
END SUB
SUB HEAD1_ONMOUSEOVER
FORM1.T0.VALUE=HEAD1.STYLE.COLOR
HEAD1.STYLE.COLOR="#FF3300"
END SUB
SUB HEAD1_ONMOUSEOUT
HEAD1.STYLE.COLOR=FORM1.T0.VALUE
END SUB
SUB HEAD2_ONCLICK()
IF NR2.STYLE.DISPLAY="" THEN
NR2.STYLE.DISPLAY="NONE"
ELSE
NR2.STYLE.DISPLAY=""
END IF
END SUB
SUB HEAD2_ONMOUSEOVER
FORM1.T0.VALUE=HEAD1.STYLE.COLOR
HEAD2.STYLE.COLOR="#FF3300"
END SUB
SUB HEAD2_ONMOUSEOUT
HEAD2.STYLE.COLOR=FORM1.T0.VALUE
END SUB
-->
</SCRIPT>
<form method="POST" action="" NAME="FORM1">
<input type=HIDDEN name="T0">
</form>
<font color="#00FFFF">
<DIV ID="HEAD1" style="width: 200; height: 18">
<B>标题1</B>
</DIV></font>
<DIV ID="NR1" STYLE="display: NONE; width: 200; height: 48">
列表11<br>
列表12<br>
列表13
</DIV>
<font color="#00FFFF">
<DIV ID="HEAD2" style="width: 200; height: 18">
<B>标题2</B>
</DIV></font>
<DIV ID="NR2" STYLE="display: NONE; width: 200; height: 48">
列表21<br>
列表22<br>
列表23
</DIV>
单击展开标题<BR>
</body>
三 脚本编辑
在Frontpage 2000中使用脚本编辑器
在【HTML】方式下,单击【工具】/【宏】/【Microsoft脚本编辑器】,就可以进入脚本编辑器了。
和VB的界面类似,有工具箱、工程资源管理器、属性窗口等。还有一个常用的脚本大纲窗口,单击【视图】/【其它窗口】/【脚本显示】打开。
调整好布局后,单击【视图】/【定义窗口布局】,或选择工具栏右边的列表框,可以把布局保存下来。
插入脚本块
单击【HTML】/【脚本块】/【客户】,就可以插入客户脚本:
<SCRIPT LANGUAGE=vbscript>
<!--
-->
</SCRIPT>
同样可以插入服务器脚本:
<SCRIPT LANGUAGE=vbscript RUNAT=Server>
</SCRIPT>
插入过程
在脚本大纲窗口中选择对象(如Document),再选择事件(如Onclick),双击就可以产生Script说明和程序头尾。
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>
<!--
Sub document_onclick
msgbox "You have clicked the document!"
End Sub
-->
插入控件
在“源代码”方式下,双击工具箱中的控件,就可以在代码中插入控件的代码。以下是各种控件的插入代码和外形:
<BODY>
Button
<INPUT type="button" value="Button" id=button1 name=button1>
Text
<INPUT type="text" id=text1 name=text1>
Dropdown(复合框)
<SELECT id=select1 name=select1>
<OPTION></OPTION>
</SELECT>
<br> Reset
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
Submit
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
ListBox
<SELECT size=2 id=select2 name=select2>
<OPTION></OPTION>
</SELECT>
Radio (单选框)
<INPUT type="radio" id=radio1 name=radio1>
<br>Checkbox (复选框)
<INPUT type="checkbox" id=checkbox1 name=checkbox1>
Textarea
<TEXTAREA rows=2 cols=20 id=textarea1 name=textarea1>
</TEXTAREA>
<br>FileField
<INPUT type="file" id=file1 name=file1>
<br>Password
<INPUT type="password" id=password1 name=password1>
</BODY>
三 VBScript客户端程序
你好程序
先插入一个Button,名为B1,再插入程序:
<SCRIPT LANGUAGE="VBScript">
<!--
sub B1_Onclick()
msgbox "你好!"
end sub
-->
</SCRIPT>
其中“<!—”为注解符号,加上是为了万一浏览器不支持VBScript,也不会把程序显示出来。如果局域网中浏览器均为IE,可以不加。
这种过程脚本一般放在HEAD中。
读写程序
这是在线脚本,在线脚本一般放在BODY中。
<SCRIPT LANGUAGE=vbscript>
<!--
n=inputbox("请输入姓名:","输入姓名","匿名访问者")
document.write "<FONT FACE=楷体_GB2312 SIZE=6>"
document.write "您好," & n & "!</FONT>"
-->
</SCRIPT>
用选择控件打开其它网页
<script language="vbscript">
<!--
sub d1_onclick
dim dv
dv=form1.d1.value
select case dv
case "a1" msgbox "ok1"
case "a2" window.open "test2.htm"
case "a3" window.open "test3.htm"
case "a4" msgbox "ok4"
end select
end sub
-->
</script>
<form method="POST" action="" name="form1" >
<p><select size="2" name="D1" tabindex="1" width=10>
<option value="a1">a1test</option>
<option value="a2">a2test</option>
<option value="a3">a3</option>
<option value="a4">a4</option>
</select><br>
</p>
</form>
在状态栏写入文字
以下第一段程序在打开浏览器写入缺省文字(window.defaultStatus),第二段是鼠标经过图片时出现文字(window.status)。
<SCRIPT LANGUAGE=vbscript>
Sub Window_onload
window.defaultStatus="欢迎进入本网站!"
End Sub
</SCRIPT>
<body>
<p>状态栏演示</p>
<p><img border="0" src="file:///C:/My%20Documents/My%20Pictures/s1.jpg" width="136" height="344" id=VID></p>
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>
Sub VID_onmouseover
window.status="我的精品图像"
End Sub
</SCRIPT>
</body>
用客户端程序传递数据
先建立一个form1:
<form method="get" action="chaxun2.asp" name="form1">
再建立一个button控件b2,再建立2个Hidden控件t1和t2,然后如下编程:
<script language=vbscript>
<!--
sub b2_onclick()
n=inputbox("请输入书名关键字:","书名输入","水利")
if n=empty then
msgbox "输入不能为空,请重新输入"
else
form1.t1.value=n
form1.t2.value="2"
form1.submit
end if
end sub
-->
</script>
接收程序见下节“接受数据”。
四 VBScript服务器端程序
服务器端程序调试时必须在IIS或PWS虚拟目录下运行。
显示日期
这是一个按照正文格式显示日期的程序:
<SCRIPT LANGUAGE=vbscript RUNAT=Server>
function showdate
showdate=FormatDateTime(date,vblongdate)
end function
</SCRIPT>
今天是:
<% =showdate %>
问好程序
本程序先输出日期,再根据时间向浏览者问好:
<font size=6>
<%
Response.Write "今天是" & FormatDateTime(date,vblongdate)
Response.Write "<br>"
if Hour(now)>6 and Hour(now)<12 then
Response.Write "早上好!"
elseif Hour(now)>=12 and Hour(now)<19 then
Response.Write "下午好!"
else
Response.Write "晚上好!"
end if
%>
</font>
接收数据
从前面的t1控件接收数据,并判断是否为空:
<%
f1=request.querystring("t1")
if f1=empty then
f2="没有数据"
else
f2="接收的数据为:" & f1
end if
%>
<p>数据接收演示</p>
<% =f2 %>
带参数调用其他网页
调用网页
<%
bianhao="QW123"
tabi=15
Response.Write ("<p><a href=" & chr(34) & "接收2.asp?vid=" & bianhao & chr(34) & ">基本信息表</a></p>" & "</tr>")
%>
被调用网页
<%
bianhao=request.querystring("vid")
%>
<p>参数调用接收演示</p>
<p>编号是<% =bianhao %></p>
发送EMAIL
基本发送方法:
Set objMail = CreateObject("CDONTS.NewMail")
objMail.from=”from@na.com”
objMail.to=”to@na.com”
objMail.subject=”subject1”
objMail.body="A new Purchase Order has been submitted that requires your input."
objMail.Send
Set objMail = Nothing
简化发送方法:
Set objMail = CreateObject("CDONTS.NewMail")
objMail.Send ”from@na.com”,”to@na.com”,”subject1”,"A new Purchase Order”
Set objMail = Nothing
以下是在EMAIL中通知到链接的网页上查看信息:
Set objMail = CreateObject("CDONTS.NewMail")
EmailText = "A new Purchase Order has been submitted that requires your input." _
& "Follow this link to take action:" & chr(13) _
& "http://www.netstats2000.com/aspbook/intranetpart2/po/html/" _
& "purchase_order_decision.asp?POID=" & RSPOID("POID")
objMail.Send "na@na.com", RSDepartmentEmail("ContactEmailAddress"), _
"New Purchase Order Request", cstr(EmailText)
Set objMail = Nothing
以上EMAIL发送到MailRoot中的Drop目录中,可以由IIS自动发送,也可以从以下程序中读取。
读取EMAIL
本例从SMTP服务器(Drop目录)中取出特定收件人的信件。
Set objSession = CreateObject("CDONTS.Session")
name="postmaster"
ename="postmaster@wrc.water.com"
objSession.LogonSMTP Name,ename
set objInbox=objSession.GetDefaultFolder(1)
if objInbox is nothing then
set collMessages=nothing
response.write "Can't get folder<br>"
objSession.Logoff
response.end
end if
set collMessages=objInbox.Messages
if collMessages.count=0 then
response.write name & " does not have messages"
response.end
objSession.Logoff
end if
response.write name & " has " & collMessages.count & " messages.<br>"
for i=1 to collMessages.count
set objmessages=collmessages.item(i)
response.write " " & i & ". " & objmessages.subject & " From " & objmessages.sender.name & "<br>"
next
五 数据库基本操作
使用OLE DB连接数据库
这是一个简单的演示的例子。
<h1 align="center">数据库演示 </h1>
<%
set cnn=Server.CreateObject("ADODB.Connection")
cnn.open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source = c:\fxfx\kfa\shukux.mdb;"
mysql="select * from shu0"
set rst=cnn.execute(mysql)
ss="<td height=" & chr(34) & "16" & chr(34) & ">"
Response.Write ("<table border=1 width=100% height=27>" & chr(13))
Response.Write ("<tr>" & chr(13))
for i=0 to rst.Fields.Count-1
Response.Write (ss & "<strong>" & rst(i).name & "</strong></td>")
next
Response.Write ("</tr>" & chr(13))
j=0
do while not rst.eof and j<100 ‘避免文件过长
Response.Write ("<tr>" & chr(13))
for i=0 to rst.Fields.Count-1
if isnull(rst(i)) then
temp="Null"
else
temp=cstr(rst(i))
end if
Response.Write (ss & temp & "</tr>")
next
Response.Write ("</tr>" & chr(13))
rst.MoveNext
j=j+1
loop
Response.Write ("</table>" & chr(13))
rst.close
cnn.close
%>
或者用读入文件地址(如在C:\Inetpub\wwwroot\xue01下的xue01.txt),这样灵活一些:
session("addr")="C:\inetpub\wwwroot\xue01\"
set fs=createobject("scripting.filesystemobject")
a2=session("addr") & "number.txt"
set ts=fs.OpenTextFile(a2)
利用ODBC连接加密数据库
1.先在【控制面板】的【ODBC数据源】中设置一个“系统DSN”,并将它连接到一个数据库(如C:\My Documents\降水量.mdb,用户名为“admin”,密码为“123”)上,起名为”db”。
2.在ASP文件中如下编程:
<%
set cnn = server.createobject ("adodb.connection")
cnn.open "db","admin","123"
set rst = cnn.Execute("Select * from 雨量测站基本表")
i=0
Do While Not rst.EOF
i=i+1
rst.MoveNext
Loop
response.write "数据库已经打开,共有" & i & "条记录。"
rst.close
cnn.close
%>
如果用不到rst,则
conn.Execute sql
数据库查询显示
先把字体变成9磅字。
set cnn = server.createobject ("adodb.connection")
cnn.open "db","admin","123"
set rst = cnn.Execute("Select * from 雨量测站基本表")
ss="<td height=20>"
ss1="<td align=" & chr(34) & "center" & chr(34) & " height=20>"
Response.Write ("<div align=" & chr(34) & "center" & chr(34))
Response.Write ("><table border=1 cellpadding=1 cellspacing=1 width=580 height=47>" & chr(13))
Response.Write ("<tr>" & chr(13))
for i=0 to rst.Fields.Count-1
Response.Write (ss1 & "<strong>" & rst(i).name & "</strong></td>")
next
Response.Write ("</tr>" & chr(13))
j=0
do while not rst.eof and j<100
Response.Write ("<tr>" & chr(13))
for i=0 to rst.Fields.Count-1
if isnull(rst(i)) then
temp="Null"
else
temp=cstr(rst(i))
end if
Response.Write (ss & temp & "</tr>")
next
Response.Write ("</tr>" & chr(13))
rst.MoveNext
j=j+1
loop
Response.Write ("</table></div>" & chr(13))
rst.close
cnn.close %>
调用WORD打印表格
<SCRIPT LANGUAGE=vbscript>
<!--
Private Sub B1_Onclick()
Set objWord = CreateObject("Word.Application")
objWord.Visible = True '取消此行最后加上.Quit在后台运行
objWord.Documents.Add '可以加上路径,打开指定文件
With objWord
.Selection.TypeText "12"
.Selection.TypeParagraph
.ActiveDocument.Tables.Add .Selection.Range, 2, 5
.Selection.TypeText "12"
.Selection.MoveRight
.Selection.TypeText "34"
.Selection.MoveDown
.Selection.TypeText "56"
.Selection.MoveDown
.Selection.TypeParagraph
.Selection.TypeText "end"
.Selection.TypeParagraph
End With
End Sub
-->
</SCRIPT>
调用CHART控件显示图表
先在页面上添加CHART控件。选择菜单【插入】/【高级】/【ActiveX控件】,选择 “Microsoft Office Chart 9.0”,再加入如下程序:
<script language=VBScript>
Sub Window_onLoad()
LoadChartWithLiteral ChartSpace1, Array("1998", "1999"), _
Array("Fred", "John", "Mary"), _
Array(Array(1300,350,40),Array(310,340,420))
SetChartTitle ChartSpace1.Charts(0), "title"
set c = ChartSpace1.Constants
SetAxisTitle ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft), "axis title"
SetAxisTitle ChartSpace1.Charts(0).Axes(c.chAxisPositionBottom),"axis h title"
End Sub
Sub LoadChartWithLiteral(cspace, vSeries, vCategories, avValues)
' Local variables
Dim cht ' Chart object we'll create in the chart space
Dim ser ' Temp series
set c = cspace.Constants
cspace.Clear
set cht = cspace.Charts.Add()
cht.HasLegend = True
'cht.Type = c.chChartTypePie
'cht.Type = 0 '标准BAR(缺省)
'cht.Type = 1 '2系列和一BAR
'cht.Type =2 '2系列和一BAR
'cht.Type =3 'BAR
'cht.Type =4 '纵向2系列合一BAR
'cht.Type =5 '纵向2系列合一BAR
'cht.Type =6 '折线
'cht.Type =7 '带点折线
'cht.Type =8 '双折线
'cht.Type =9 '方点双折线
'cht.Type =10 '比例折线
'cht.Type =11 '方点双折线
'cht.Type =12 '光滑折线
'cht.Type =13 '光滑折线
'cht.Type =14 '光滑折线
'cht.Type =15 '光滑折线
'cht.Type =16 '光滑折线
'cht.Type =17 '光滑折线
'cht.Type =18 'PIE图
'cht.Type =19 '分离PIE图
'cht.Type =20 '双层PIE图
cht.SetData c.chDimSeriesNames, c.chDataLiteral, vSeries
cht.SetData c.chDimCategories, c.chDataLiteral, vCategories
for each ser in cht.SeriesCollection
ser.SetData c.chDimValues, c.chDataLiteral, avValues(ser.Index)
next
End Sub
Sub SetChartTitle(cht, sTitle)
Dim fnt ' Temp font reference
if len(sTitle) > 0 then
' Add a title if necessary
cht.HasTitle = True
cht.Title.Caption = sTitle
set fnt = cht.Title.Font
fnt.Name = "Tahoma"
fnt.Size = 10
fnt.Bold = True
else
cht.HasTitle = False
end if
End Sub
Sub SetAxisTitle(ax, sTitle)
Dim fnt ' Temp font reference
if len(sTitle) > 0 then
' Add a title if necessary
ax.HasTitle = True
ax.Title.Caption = sTitle
set fnt = ax.Title.Font
fnt.Name = "Tahoma"
fnt.Size = 8
fnt.Bold = True
else
ax.HasTitle = False
end if
End Sub
</script>