网站设计基础(学习素材)

 

 

网站设计基础

一 网站基础

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">

&nbsp;列表11<br>

&nbsp;列表12<br>

&nbsp;列表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">

&nbsp;列表21<br>

&nbsp;列表22<br>

&nbsp;列表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>

 

 


 [d1]Top is 64,rest is according to the height of window.

 [d2]If you link a file,that will be shown in ‘main’ window.

 [d3]The file first shown is ‘left.htm’.

转载于:https://www.cnblogs.com/xzcastle/archive/2006/04/13/374425.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值