网页制作基础教案_网站制作流程教学设计-CSDN博客

实用软件开发技术

主编：朱立军

第一讲 软件设计一般步骤

1．1 问题定义

问题定义阶段必须回答的问题是：“要解决的问题是什么？”，包括系统功能、关键技术、所用时间、金钱多少，系统分析员就问题性质、工程目标和规模进行分析，包括系统功能、关键技术、所用时间、金钱多少即相当与产品立项。

1．2 可行性研究

可行性分析阶段必须回答的问题是“对于上一个阶段所确定的问题有行得通的解决方案吗？”一般说来，至少应该从下述四个方面研究每种解法的可行性：

⑴ 经济可行性：进行成本/效益分析。

⑵ 技术可行性：现有的人员、技术、设备能实现该系统吗？。

⑶ 法律可行性：涉及各种黄、赌、毒等非法行为吗？

⑷ 操作可行性：系统的操作方式可行吗？

⑸ 市场可行性：产品销路如何。

1．3 需求分析

需求分析阶段解决的问题是“网站做什么？”。包括问答分析法，建模分析法（数据流图，实体关系图，数据流图，状态变迁图）,双方确认需求

1．4 收集站点素材

收集与所设计网站相关的图片、文字、动画等。

1．5 总体设计

总体设计阶段必须回答的问题是“应如何做？”，即将系统分解为若干个子系统，确定每个子系统的功能及系统子间的关系，该阶段不但包括构思网站的结构、布局及导航等计。

1．6 详细设计及编码

详细设计阶段解决的问题是“应该怎样具体实现这个系统？”，包括数据库的设计，用户界面设计，模块设计，数据结构与算法设计，图形、网页的制作

1．7 测试及上传网站

测试包括单元测试、集成测试、系统测试、验收测试等。测试阶段的主要关键任务是分别使用验收测试（a测试和b测试）对站点内各网页的链接是否正常。所有链接正常后使用相关工具上传网站。

1．8 维护

维护阶段的关键任务是“通过各种必要的维护活动使系统持久地满足用户的需要，通常用四类维护活动：

⑴ 改正性维护

⑵ 适应性维护

⑶ 完善性维护

⑷ 预防性维护

第二讲 网页制作基础

2.1                internet简介

2.1.1    internet的功能

1、          电子函件 E-mail 2、文件传输FTP 3、远程登陆Telnet 4、网上查询 5、网上交流

2.1.2    WWW（全球广域网）简介

1、          web节点 2、主页（home paper）3、超级连接 4、浏览器

2.2 超文本描述语言HTML

2.2.1 什么是HTML（超文本描述语言）

是一种排版语言，不是编程语言。是Web最基本的构成元素。具有跨平台的处理能力。

2.2.2 HTML的作用

1、格式化文本 2、建立超链接 3、创建列表 4、插入图象 5、建立表格 6、加入多媒体 7、交互式表单、计数器

2.2.3 HTML的编辑环境

任何文本编辑器：记事本、写字板、WORD和WPS等编辑程序，一定要用纯文本方式存盘。

2.2.4 HTML文件的结构

一个HTML文件，可以由标记、文字与图形资料和统一资源定位器三部分组成。

2.3 专用的网页编辑器

1、          完全的所见即所得工具（Drumbeat和NetobjectFusion）

2、          纯粹的HTML代码编辑工具（HomeSite、HotDogProfessional、WebEditPro）

3、          混合型工具（FrontPage、CutePage、Dreamweaver、QuickSite）

2．4 网页的创建过程

编辑和保存网页→预览网页→发布网页

2．5 HTML文件结构的格式标记

2．5．1 HTML的基本结构

1、了解HTML的标记

总的来说，HTML文件是由标记和文本组成的。标记（tag）能够产生所需的各种效果。一般成对出现。格式为：

〈标记〉受标记影响的文本〈/标记〉

每个标记有一系列的属性，标记要通过属性来制作出各种效果。格式为：

〈标记属性1=属性值属性2=属性值 …〉受标记影响的文本〈/标记〉

1、          HTML的基本结构

HTML文件以〈html〉开头，以〈/html〉结尾。

HTML文件包括头部（head）和主体(body)。

头部用来说明文件命名和与文件本身的相关信息，以〈head〉开始，以〈/head〉结尾。

主体是定义在浏览器中显示网页的内容，以〈body〉开始，以〈/body〉结束。

例一：

<html>

<head>

<title>网页标题</title>

</head>

<body>

网页内容

</body>

</html>

用记事本编写上述代码并以html为扩展名存盘，并在IE中显示结果如图1所示：

图2.1 在Internet Explore中浏览网页结果

第三讲 HTML语言基础知识

3．1 文字格式与页面格式

（1）设置标题格式：〈hn align=对齐方式〉标题内容〈/hn〉。其中对齐方式为：left,center,right；n取1~6的整数。1最大，6最小。

（2）强制换行标记：文字<br>

（3）强制换段标记<p>，相当与<br>加一行空行。

（4）设置文字格式：<font size=数字 face=字体名 color=颜色>被设置的文字</font> 。数字取1~7的整数，其中1最小，7最大；字体名为黑体、宋体、楷体、仿宋等；颜色为black、blue、brown、gray、green、red、white等。

（5）设置段落格式：文字<p align=对齐方式> 文字</p>。其中对齐方式为：left、center、right。

（6）分区显示标记：<div align=属性>文本</div>，属性取值为left、center、right。

例二：

<html>

<head>

<title>

文字格式与页面格式

</title>

</head>

<body>

<div align=center><h1>沈阳化工学院网站</h1></div>

<font size=5 face=黑体 color=blue>

<div align=center> 化院介绍<br>师资队伍<br>科研状况</div>

<div align=left> 教辅部门<br>后勤部门<br>总务处</div>

<div align=right> 学生情况<br>招生情况<br>毕业生情况</div>

         </font>

<body>

</html>

程序运行结果为：

                    图3.1 例二运行结果

3．2 超链接和列表

（1）创建指向其他页面的链接：<a href=“目标文件的路径/目标文件.html”>热点文本</a>

（2）创建指向本页的链接需要定义两个标记：<a href=“#记号名”>热点文本</a>；<a name=“记号名”>目标文本附近的字符串</a>

（3）创建指向电子函件的链接：<a href=“mailto:E-mail 地址”>热点文本</a>。例如

<a href=mailto:xiaoming@syict.edu.cn>xiaoming@syict.edu.cn</a>

3．3 建立列表

（1）创建无序列表

<ul type=“样式”>

<li type=“样式”>第1个列表项

<li type=“样式”>第2个列表项

…

</ul> 样式为disc、circle、square。

（2）创建有序列表

<ol type=“样式”>

<li type=“样式”> 表项1

<li type=“样式”> 表项2

…

</ol> 样式为1、A、a、I、I。

例三：

<html>

<head> <title>无序列表中套有序列表</tile></head>

<body>

<font color=blue size=3>“无序列表中套有序列表”示例</font>

<ul>

<li>111111111111

<ol type=“a”>

<li>aaaaaaaaaaa

<li>bbbbbbbbbb

</ol>

<li>222222222222

<ol type=“I”>

<li>xxxxxxxxxxxx

<li>yyyyyyyyyyyy

<li>zzzzzzzzzzzzz

</ol>

<li>333333333333

</ul>

</body>

</html>

程序运行结果为：

                               图3.2 例三运行结果

3．4 图像和表格

（1）加入图像

<img src=“图像文件名” alt=“简单说明” width=“图像的宽度” height=“图像的高度” border=“边框宽度” hspace=“水平方向空白”vspace=“垂直方向空白”align=“对齐方式”> 其中src属性为要加入图像的文件名；alt属性是在未读入图像时，在图像位置显示的文字；width属性指图像的宽度（像素数或百分数）；height属性为图像的高度（像素数或百分数）；hspace属性为水平方向空白像素数；vspace属性为垂直方向空白像素数；align属性为对齐方式。

（2）图像与文本间的关系

（ⅰ）文本与图像在垂直方向上的对齐

   文本<img src=“图像文本” align=“对齐方式”>文本。

        其中align的值可取top、middle、bottom。

（ⅱ）文本环绕图像

         <img src=“图像文件名” align=“环绕方式”>文本。

          其中align的值可取left（图像在左、文本在右），right（图像在右、文本在左）。

         清除标记为<br clear=left或right或all>

（3）设置网页的背景

（ⅰ）设置背景色 <body bgcolor=“颜色值”>

（ⅱ）用图像作为背景 <body background=“图像文件名”>

      其中图像文件可为GIF格式或JPEG格式。

（4）用图像作为超链接

<a href=“链接到的文件名”><img src=“图像文件名”></a>

（5）加入表格

<table border=n width=x或x% height=y或y% cellspacing=I celladding=j>

<tr><th>表头1</th><th>表头2</th><th>…</th><th>表头n</th>

<tr><td>表项1</td><td>表项2</td><td>…</td><td>表项n</td>

…

<tr><td>表项1</td><td>表项2</td><td>…</td><td>表项n</td>

</table>

（6）表格的特殊效果

（ⅰ）跨多行、多列的表项

<td colspan=x rowspan=y> 表项</td>

或<th colspan=x rowspan=y> 表项</th>

其中x、y分别为跨越的行、列数。

         （ⅱ）设置表格的图像背景

               在<table>、<th>、<tr>、<td>标记中，使用下面属性

background=“图像文件名” 设置背景图像

bordercolor=“颜色” 设定表格边框的颜色

bordercolorlight=“颜色”设定表格边框亮部的颜色

rules=row,cols或none 设定表内线的显示方法

bgcolor=“颜色” 设置背景颜色

        （ⅲ）设定表格在页面中的位置

               <table align=left 或center或right> 注意当表格位于页面的左侧或右侧时，文本填充在另一侧，当表格居中时，表格两边没有文本。

例四：

<html>

<head><title>表格与图像</title></head>

<body>

<table border=10 bordercolorlight=green cellspacing=20 width=100% height=100%>

<tr><th background="globe.gif" colspan=4>表头1

<tr><td rowspan=4 background="paris.gif">表项11<td>表项12<td>表项13<td>表项14

<tr>                    <td>表项22<td>表项23<td>表项24

<tr>                    <td>表项32<td>表项33<td>表项34

<tr>                    <td>表项42<td>表项43<td>表项44

</table>

</body>

</html>

以上程序运行结果如下：

                图3.3 例四程序运行结果

3．5 框架和多媒体

利用框架结构可以在主页中同时浏览多个页面还可以在一个区域中显示所有页面的总索引，通过单击该区域中的超链接，相关网页会显示在另一个区域中，非常直观。

⑴建立框架

框架的建立使用<frameset>和<frame>两个标记。它与一般的HTML文件并无大的区别，只是将<frameset>标记取代<body>标记，用来声明框架的定义。<frame>标记用来声明其中框架页面的内容。

其基本结构为：

<frameset>

<frame src=”URL”>

…

</frameset>

   ⑵<frameset>标记

<frameset>标记用来定义一个框架组的属性，格式为：

<frameset rows=”像素数或百分比或* ” cols=” 像素数或百分比或* ” border=” 像素数 ” bordercolor=”颜色 ” frameborder=”yes/no” framespacing=”各窗口间的空白像素数 ” >…</frameset>

⑶<frame>标记

<frame src=”源文件名.html” name=”框架名” border=”像素数” bordercolor=”颜色” frameborder=”yes/no” marginwidth=” 空白像素数” marginheight=”空白像素数” scrolling=”yes/no/auto” noresize>

例五：以下文件中用到的a.html,b.html,c.html与本文件处在同一目录下。

<html>

<head><title></title></head>

<frameset cols=20%,*>

    <frame src=”a.html”>

    <frameset rows=40%,*>

        <frame src=”b.html”>

        <frame src=”c.html”>

    </frameset>

</frameset>

<html>

其运行结果如下：

图3.4 例五程序运行结果

⑷框架间的链接

使用<a>的target属性就可以控制目标文件在那个框架内显示。使用格式为<a href=”目标文件名.html” target=”参数值”>热点文本</a>

参数值分别为”_blank”, ”_self”, ”_top”, ”_parent”。

其中_blank为打开新的没有名字的浏览器窗口。

_self为当前的框架

_top为整个浏览器窗口

_parent为父窗口

3．6 表单

通过在网页中加入表单，可以实现在网页输入或选择信息。

创建表单格式如下：

    <form action=mailto:mail地址或网址 method=get/post>

<input type=“表项名” name=“名” size=x maxlength=y>

…

</form>

其中：

action属性：表单处理的方式，往往是函件地址或网址。

method属性：表单数据的传送方向，是获得(get)表单还是送出(post)表单

input 标记主要用来设计表单中提供给用户的输入形式，其中：

type 属性：指定要加入表单项目的类型（text, password, checkbox（复选框）, radio（单选框）, image, hidden, submit（提交）, reset（重置）。

Name属性：该表项的控制名，主要在处理表单时起作用。

Value属性：页面显示的值。

Size 属性：单行文本区域的宽度。

Maxlength属性：允许输入的最大字符数目。

例五：

<html>

<head><title>用户信息</title></head>

<body>

<form action="zhangsan@syict.edu.cn" method=post>

<h2>用户信息表</h2>

姓名：<input type=text name="xm" size=12><br>

性别：<input type=radio name="性别" value="男" checked>男

      <input type=radio name="性别" value="女" >女<br>

出生日期：<input type=text name="year" size=2>年

          <input type=text name="month" size=2>月

          <input type=text name="day" size=2>日<br>

个人爱好：<input type=checkbox name="爱好" value="体育">体育

          <input type=checkbox name="爱好" value="文学">文学

          <input type=checkbox name="爱好" value="艺术">艺术

          <input type=checkbox name="爱好" value="旅游">旅游

          <input type=checkbox name="爱好" value="美食">美食

          <input type=checkbox name="爱好" value="其他">其他<br>

          <input type=submit value="发送"><input type=reset value="重置">

</form></body></html>

程序运行结果：

                    图3.5 例五程序运行结果

            第四讲 Active Server Pages简介

4．1 什么是ASP

Microsoft Active Server Pages 是一套微软开发的服务器端脚本环境。ASP内含于IIS3.0和4.0之间，通过ASP可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的Web服务器应用程序。有了ASP就不必担心客户的浏览器是否能运行所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。

4．2 ASP的功能

⑴制作动态的网页

     ⑵制作网络交互系统

4．3 ASP的运行方式及运行环境

浏览器从Web服务器上请求.asp文件（ASP文件的后缀名为.asp）时，ASP脚本开始运行，然后Web服务器调用ASP。ASP全面读取请求的文件，执行所有的脚本命令，并将Web页传送给浏览器，这就意味着不能简单地在现有的操作系统（如windows 95或98）下，用浏览器中的“打开”命令来浏览.asp文件。目前除了Windows NT下的Microsoft Internet Information Server（IIS3.0/4.0）支持ASP技术外，还有MS Windows95/98和MS windows NT Workstation的Personal Web Server(PWS)的构件，因此无论安装的是NT还是Windows95/98,都必须在原系统上安装ASP 的服务器端环境，才能使机器得以运行.asp文件。

4．4 创建一个简单的ASP页面

例六：

<%@LANGUAGE=”VBScript”%>

<html>

<body>

<%for I=3 to 7%>

<font size =<%=I%>>

congrulation!<br>

</font>

<%next%>

</body>

</html>

将以上程序以.asp为扩展名保存，其运行结果如下：

图4.1 例六程序运行结果

4．5 ASP脚本基础

   脚本语言是介于HTML和Java,C++和Visual BASIC 之类的编程语言之间的语言。HTML通常用于格式化文本和链接网页，编程语言通常用于想计算机发送一系列复杂指令。脚本语言也可以用来向计算机发送指令，但它们的语法和规则没有可编译的编程语言那样严格和复杂。脚本语言主要用于格式化文本和使用以编程语言编写的已编译好的组件。

   目前常用的设计ASP的脚本程序有VBScript和JScript两种。在HTML页面中添加VBScript代码的方法：

<html>

<head>

<title>使用VBScript</title>

<Script language=”VBScript”>



</Script>

</head>

<body>

…

4．6 VBScript语法基础

⑴变量声明方式

dim a,b,c (声明一般变量)

dim a(10) （声明数组变量）

⑵VBScript的基本语句

ⅰ）条件语句

if… then… else语句、select case 语句

ⅱ）循环语句

do… loop 、while… wend 、for… next 、for each …next。

ⅲ）VBScript的过程和函数

sub 过程、function函数

⑶ VBScript的内建函数

sin、cos、tan、atn、abs、exp、log、rnd、cdate、clint、clng……

例七：

<html>

<head><title>元素求和</title>

</head>

<script language="vbscript">



</script>

<body>

<center>

<form name="myform">

第3个数：<input type="text" name="text3"><p>

第4个数：<input type="text" name="text4"><p>

第5个数：<input type="text" name="text5"><p>

<input type="button" name="cmdchange" value="计算累计结果"><p>

累计结果：<input type="text" name="text6"><p>

</form></center></body></html>第1个数：<input type="text" name="text1"><p>

第2个数：<input type="text" name="text2"><p>

以上程序运行结果如下：

                  图4.2 例七程序运行结果

4．7 ASP内建对象

为了使ASP具有多功能的程序设计能力，除了基本的Script的程序设计能力外，还增了许多对象和组件。ASP提供了Response, Request, Server, Application, Session和ObjectContext等6个功能强大的内部对象供用户使用。每个内部对象都有自己的方法和属性，有的还带有基本事件和数据集合。下面对这六个对象的功能进行简要的说明。

⑴Response对象：将信息传送给客户浏览器。

语法:Response.property(属性) 或Response.method（方法）或Response.collection（集合）

属性包括：Buffer,Charset,ContentType,Expires,ExpiresAbsolute.

方法包括：clear,end,flush,redirect,write

集合：Cookies

⑵Request对象：用于从客户端浏览器获取信息。

语法:Request.property(属性) 或Request.method（方法）或Request.collection（集合）

属性包括：TotalBytes,Binaryread

方法包括： Binaryread

集合：Cookies,Form,QueryString,ServerVariabies

例七：

<%nickname=request.form("nick")

response.cookies("nick")=nickname

response.write"欢迎"&request.cookies("nick")&"光临本网站"%>

<html>

<head>

<title>cookie</title>

</head>

<body>

<form method=post action="cookie.asp">

<p>

<input type="text" name="nick" size=20>

<input type=submit value="发送" name="b1">

<input type=reset value="重填" name="b2">

</p>

</form>

</body>

</html>

程序执行结果为：

                图4.3 在文本框中输入信息

                  图4.4 按发送按钮后的结果

⑶Server对象：可在服务器上启动ActiveX对象。

⑷Application对象：用于在一个ASP应用程序下让不同的客户端共享数据。

   例八：

<% dim numvisits

numvisits=0

Application.lock

Application("numvisits")=Application("numvisits")+1

Application.unlock %>

欢迎光临本网页。你是本页的第<%= Application("numvisits") %>位访客！

                  图4.5 Application对象用例

⑸Session对象：用于为每个用户保存数据信息。

⑹ObjectContext对象：可以配合MTS进行分布式事物处理。

第五讲 对数据库的访问

在ASP中使用ADO（ActiveX Data Objects）中的对象就能实现数据库与Web站点的集成以及对数据库的各种操作。步骤如下：

⑴建立数据库文件并保存在虚拟目录中

⑵建立数据源

⑶建立连接（connection对象）

⑷数据访问（recordset和command对象）

5．1 与ACCESS数据库建立连接应用实例

例九：显示数据库db1.mdb中pxd1表的信息

<%@language="vbscript"%>

<%

set pxd=server.createobject("adodb.connection")

p1="provider=microsoft.jet.oledb.4.0;"

path1="data source="&server.mappath("db1.mdb")

pxd.open p1&path1

set pxd2=server.createobject("adodb.recordset")

pxd2.open "pxd1",pxd,2,2

%>

<html>

<br><br><br>

<body>

<center>

<table border=1>

<tr bgcolor=green>

<%

for i=0 to pxd2.fields.count-1

response.write "<td>"&pxd2(i).name&"</td>"

next

%>

</tr>

<%

pxd2.movefirst

while not pxd2.eof

row="<tr bgcolor=blue>"

for i=0 to pxd2.fields.count-1

row=row&"<td>"&pxd2(i)&"</td>"

next

response.write row&"</tr>"

pxd2.movenext

wend

%>

</table></center></body>

</html>

程序运行结果为：

图5.1 例九程序运行结果

或者：

<%@language="vbscript"%>

<%

set pxd=server.createobject("adodb.connection")

p1="driver={microsoft access driver (*.mdb)};" ‘注意“（”前有空格

path1="dbq="&server.mappath("db1.mdb")

pxd.open p1&path1

set pxd2=server.createobject("adodb.recordset")

pxd2.open "pxd1",pxd,2,2

%>

<html>

<br><br><br>

<body>

<center>

<table border=1>

<tr bgcolor=green>

<%

for i=0 to pxd2.fields.count-1

response.write "<td>"&pxd2(i).name&"</td>"

next

%>

</tr>

<%

pxd2.movefirst

while not pxd2.eof

row="<tr bgcolor=blue>"

for i=0 to pxd2.fields.count-1

row=row&"<td>"&pxd2(i)&"</td>"

next

response.write row&"</tr>"

pxd2.movenext

wend

%>

</table>

</center>

</body>

</html>

5．2 与SQL SERVER数据库建立连接应用实例

例十：显示数据库dbase1.mdb中学生情况表的信息

<%@language="vbscript"%>

<%

set pxd=server.createobject("adodb.connection")

dbpath=server.mappath("dbase1.mdb")

pxd.open"driver={sql server};server=success;uid=zlj;pwd=zlj;dbq=

"&dbpath

set pxd2=server.createobject("adodb.recordset")

pxd2.open "学生情况",pxd,2,2

%>

<html>

<br><br><br>

<body>

<center>

<table border=1>

<tr bgcolor=green>

<%

for i=0 to pxd2.fields.count-1

response.write "<td>"&pxd2(i).name&"</td>"

next

%>

</tr>

<%

pxd2.movefirst

while not pxd2.eof

row="<tr bgcolor=blue>"

for i=0 to pxd2.fields.count-1

row=row&"<td>"&pxd2(i)&"</td>"

next

response.write row&"</tr>"

pxd2.movenext

wend

%>

</table></center>

</body>

</html>

或者：

<%@language="vbscript"%>

<%

set pxd=server.createobject("adodb.connection")

pxd.open "driver={sql server};server=success;uid=zlj;pwd=zlj;

database=dbase1"

set pxd2=server.createobject("adodb.recordset")

pxd2.open "学生情况",pxd,2,2

%>

<html>

<br><br><br>

<body>

<center>

<table border=1>

<tr bgcolor=green>

<%

for i=0 to pxd2.fields.count-1

response.write "<td>"&pxd2(i).name&"</td>"

next

%>

</tr>

<%

pxd2.movefirst

while not pxd2.eof

row="<tr bgcolor=blue>"

for i=0 to pxd2.fields.count-1

row=row&"<td>"&pxd2(i)&"</td>"

next

response.write row&"</tr>"

pxd2.movenext

wend

%>

</table>

</center>

</body>

</html>