网站建设与web设计实验指导书

1、. . . . 建设与web设计实验指导书实验一 建设规划和建设初步实验目的1. 对进行目标定位2. 观察适合在网上销售的商品类别3. 提出创建的商品目录结构4. 规划的框架结构5. 分析建站的步骤与方法6. 熟悉申请域名的流程和管理机构。7. 掌握IIS的使用技巧。8. 练习在IIS中建立站点和对站点进行管理。实验目标1. 提出建设过程中系统规划的总体思想和原则。2. 确定企业销售商品的分类方法，方便用户快速浏览，找到自己所需要的商品或服务。3. 确定提供服务的大框架，使浏览者能够在首页上通过的提示迅速进入自己需要的页面。4. 为选择适当的方案，满足企业业务量的需要，具有服务稳定、价格适中、

2、沟通便利、易于扩展的特点。5. 能正确安装IIS 6.06. 在IIS中建立和管理站点。实验容1. 浏览大量成熟，参考的商品分类方法。（亚马逊 amazon.、戴尔 dell.、首都电子商城 、阿里巴巴）2. 参考建站的方案，明确建设的步骤般经过规划、域名注册、服务器配置、网页设计、测试与发布、管理与维护、推广等步骤就可以实现。建站时可以是企业独立建站，可以是托付给相应的公司建站，也可以采取双方合作的方式建站。在分析企业需求时侧重点有所不同，要予以考虑。3. 申请域名（可选做）一个好的域名应该与企业的性质、企业的名称、企业的商标与平时的企业宣传一致。选择与本公司密切相关的域名，但注意不能超过2

3、0个字符。访问中国互联网络信息中心，查询域名认证注册服务机构，选择一家机构申请注册自己的域名。4. DNS设置（可选做）5. 设置Internet信息服务管理器（IIS）6. Web站点的建立和管理7. 以小组的方式，规划一个电子商务（如网上书店、鲜花礼品商务、在线电脑销售等）。要求规划的栏目、形象设计、导航设计、网页布局设计，画出草图。、实验二 创建一个静态页面首页实验目的1熟练掌握静态网页的制作2掌握简单的表单制作方法实验要求环境准备 :计算机中装有IIS、网页制作工具（如Dreamweaver或Frontpage等）软件、网页制作相关的素材和资料。知识准备：熟练掌握网页制作工具的使用方法

4、。实验目标创建如图2-1所示的“静雅书苑的网上书店”首页。图2-1问题分析网页设计容易出现下列问题:l 乱：网页容太庞杂。l 无吸引力：太简单，显得单调。l 打开速度太慢：网页中使用了过多的多媒体元素。l 重要信息不容易找到：原因是缺乏规划，没有对浏览者需求进行深入分析。解决方法l 乱：首页布局要合理，分类清晰。l 无吸引力：首页要提供足够的信息。l 打开速度太慢：首页上图片的大小和使用数量要适当。l 重要信息不容易找到：从浏览者的角度分析进行分析，确定容安排。实验步骤（1） 启动网页制作工具Dreamweaver软件。（2） 建立本地站点。设置本地根文件夹为D:jingya。（3） 新建一个

5、静态网页文件，保存该文件名为index.htm。（4） 设置页面属性，在标题处输入“静雅书苑”，“左边距”和“上边距”都设置为0。（5） 插入一个表格，表格参数设置如图2-2所示。图2-2（6） 选中整个表格，在属性面板中设置表格对齐方式为“居中对齐”，如图2-3所示。该表格将控制首页的整体布局，使网页在不同分辨率的显示器上都能正常显示。图2-3（7） 在表格中插入一个1行3列的表格，在属性面板中的“表格ID”框中命名该表格为B1，设置该表格属性为高60，宽度为100%，单元格对齐方式为垂直方向“顶端对齐”。设置该表格第1、3列列宽为25%，第2列列宽为50%，效果如图2-4所示。图2-4（8

6、） 在表格B1的第1和第2单元格中分别插入的logo和Banner图片（事先用photoshop或Fireworks软件制作好），如图2-5所示。图2-5（9） 在B1的第3列中插入一个3行1列的表格，命名该表格为B11。表B11宽100%，并在B11表格中填入如图2-6所示的容，并设置B1的背景图片。图2-6（10） 在大表格中插入一个如图2-7所示的1行5列的表格，在属性面板中命名为B2。该表格用来制作网页的导航栏。图2-7（11） 插入一个如图2-8所示的2行7列的表格，命名为B3。图2-8（12） 在B2表格中插入准备好的导航栏图片和填入如图2-9所示的其他项目。图2-9（13） 在B

7、3表格中填入如图2-10所示的相关容。图2-10（14） 为分类导航栏设置（在没有准备好其他页面的情况下，可以先用#设置无址），如图2-11所示。图2-11（15） 在分类导航栏下面插入一个如图2-12所示的1行3列的表格，命名该表格为B4。图2-12（16） 在表格B4的第1列中制作一个会员登录表单，如图2-13.所示。图2-13（17） 制作如图2-14所示的“图书商城”、“影视商城”和“音乐商城”分类索引表格。图2-14（18） 为“图书商城”、“影视商城”和“音乐商城”分类索引表格设置背景颜色，如#CCCCCC。在B4表格的第2单元格中制作“持续热销”图书信息，如图2-15所示。图2-

8、15（19） 在B4表格的第3单元格中制作“最近新书”栏目的容，如图2-16所示。图2-16（20） 制作“本月销售排行”栏目，如图2-17所示。图2-17（21） 制作首页下方的信息，单元格背景图片为topback.gif，如图2-18所示。图2-18（22） 给网页添加Style.css样式表。代码如下：tr font-family: "宋体" font-size: 9pta:link color: #000000; text-decoration: nonea:visited color: #000000; text-decoration: nonea:hover c

9、olor: #3333FF; text-decoration: underlineform margin-top: 0px; margin-bottom: 4px（23） 叮当首页的预览效果，如图2-19所示。图2-19实验三 制作一个用户注册的ASP动态页面实验目的1. 了解ASP的特点2. 掌握设置ASP的运行环境3. 学习ASP进行网络程序设计的开发4. 学会调试ASP程序实验要求环境准备：计算机中装有IIS知识准备：会使用Dreamweaver等开发软件，掌握动态网页设计的方法实验目标实验步骤第一步：配置ASP运行环境要使用ASP创建动态网页，首先要从硬件和软件方面配置好ASP的运行环

10、境。在硬件方面，必须在计算机上安装网卡，并接好网线。在软件方面，必须安装TCP/IP、服务器软件与浏览器软件，并指定本机的IP地址。在满足了以上条件后，还要安装5.0以上版本的IIS。（1） 安装IIS单击“开始->设置->控制面板->添加或删除程序”命令，安装Internet信息服务组件。（2） 测试IIS在浏览器的地址栏中输入127.0.0.1或localhost或计算机的IP地址或计算机名，如能显示IIS的帮助页面，表示测试成功。（3）配置WEB站点打开IIS管理器，设置“默认web站点” 打开“默认web站点”属性对话框 Web站点设置 主目录设置（的根目录设置为主目

11、录） 默认文档设置（设置首页为默认文档，上一次实验课的index.html页面添加为默认文档）配置完成后，进行测试，在浏览器中输入localhost即可打开index.html页面。（4）创建虚拟目录虚拟目录就是相对于IIS的根目录来说的，一个站点的根目录只能有一个，为了多个Web应用程序运行于一个IIS服务器上，就为其虚拟一个IIS目录。每个虚拟目录受控于跟目录的管理，有其特定的权限管理，也可以继承根目录的权限设置。要通过URL访问网页，需要输入localhost/虚拟目录名/文件名如果要在网络中的其它计算机上访问上述网页，使用计算机名或IP地址来代替localhost即可。第二步：制作一个

12、用户注册的ASP动态网页1 制作一个用户注册页面，文件名保存为customer_register.htm，效果图如下：（1） 新建header库，如图所示（2） 新建navigation库，如图所示：（3） 新建footer库，如图所示：（4） 建立用户注册页面，如图所示：2 制作一个获取用户注册信息的页面，文件名保存为customer_request.asp，效果图如下：获取注册信息的VBScript的脚本代码如下：<%Dim username,pass,comfpass,wenti,daan,name,city,address,zip,phone '为了引用方便，声明变量us

13、ername=Request.Form("username") pass=Request.Form("pass")comfpass=Request.Form("comfpass")wenti=Request.Form("wenti")daan=Request.Form("daan")name=Request.Form("name")city=Request.Form("city")address=Request.Form("address&quo

14、t;)zip=Request.Form("zip")phone=Request.Form("phone")Response.Write "<br>用户名：" & usernameResponse.Write "<br><br>密码：" & passResponse.Write "<br><br>确认密码：" & comfpassResponse.Write "<br><br>取回

15、密码问题：" & wentiResponse.Write "<br><br>取回密码答案：" & daanResponse.Write "<br><br>真实：" & nameResponse.Write "<br><br>城市：" & cityResponse.Write "<br><br>详细地址：" & addressResponse.Write "<

16、;br><br> ：" & zipResponse.Write "<br><br>：" & phone & "<br>"%>实验四 制作一个聊天室实验目的1.熟练掌握VBScript的语法结构2.熟练掌握ASP部对象的使用方法实验要求实验目标编写一个简单的聊天室应用程序实验步骤1编写一个聊天室的登录页面，命名为index.asp。在表单的文本框中输入昵称后，单击“进入”按钮，方可进入聊天室页面（chat.asp）。如下图所示：要求昵称不为空才能进入聊天室页面，并

17、且显示在线人数。提示：（1）显示在线人数的代码如下：<%=Application(“user_online”)%>（2）判断昵称是否为空的check_Null（）函数代码如下：<Script Language="JavaScript"><!-function check_Null()if (document.form1.user_name.value="")alert("昵称不能为空!");return false;return true;/ -></Script>2编写发言容提交表单页

18、面，命名为input.asp。页面显示如下：<%IF Request("say")<>"" Then'获取发言的有关信息Dim say,mycolor,myemote,user_name '声明变量待用user_name=Session("user_name") '返回用户昵称say=Server.HtmlEncode(Request("say") '返回发言，并用HtmlEncode编码mycolor=Request("mycolor") &#

19、39;返回本次发言的颜色myemote=Request("myemote") '返回本次发言表情If myemote="无" Then myemote=""End If'下面三句将得到本次发言的字符串Dim sayStrsayStr="<small>" & user_name & Time & myemote & "说：</small>" sayStr=sayStr & "<font color=&#

20、39;" & mycolor & "'>" & say & "</font>" '下面几句将本次发言信息保存到Application中Application.Lock '先锁定Application("show")= sayStr & "<br>" & Application("show")If Len(Application("show")>10000 Th

21、en '如果发言总长度超过10000个字符，则截断为10000Application("show")=Mid(Application("show"),1,10000)End IfApplication.Unlock '解除锁定End If%>3编写聊天容显示页面，页面保存为main.asp。页面显示如下：<meta -equiv="refresh" content="5">每5秒刷新一次脚本代码如下：<%Response.Write Application("sho

22、w") '显示聊天容%>4编写聊天室页面，命名为chat.asp。该页面采用框架结构，分成两个部分，上面显示所有用户的发言容页面（main.asp），下面显示发言的提交表单页面（input.asp）。如图所示：提示：把用户昵称保存到session对象中，来访者信息和在线人数+1保存到application对象中。代码如下：<%Session("user_name")=Request("user_name") '将用户昵称保存到session中'下面几句返回来访者信息Dim sayStrsayStr="

23、;来自" & Request.ServerVariables("Remote_Addr")& "的" '来访者IP地址sayStr=sayStr & "<b>" & Session("user_name") & "</b>" '来访者昵称 sayStr=sayStr & "于" & Time & "大驾光临" '来访时间sayStr=&

24、quot;<font color='red'>" & sayStr & "</font>" '红色显示'下面几句将来访信息保存到Application中Application.Lock '先锁定Application("show")= sayStr & "<br>" & Application("show") '返回聊天信息Application("user_online"

25、;)=Application("user_online")+1 '在线人数加1Application.Unlock '解除锁定%>5编写离开聊天室页面，页面保存为exit.asp。代码如下：<%'下面几句返回离开者信息Dim sayStrsayStr="来自" & Request.ServerVariables("Remote_Addr")& "的" '来访者IP地址sayStr=sayStr & "<b>" &am

26、p; Session("user_name") & "</b>" '来访者昵称 sayStr=sayStr & "于" & Time & "高兴而去" '离开时间sayStr="<font color='red'>" & sayStr & "</font>" '红色显示'下面几句将离开者信息保存到application中Application.L

27、ock '先锁定Application("show")= sayStr & "<br>" & Application("show")Application("user_online")=Application("user_online")-1 '在线人数减1Application.Unlock '解除锁定Response.Redirect "index.asp" '重定向回首页%>实验五 创建数据库和数据表实验

28、目的（1）培养规划数据库的能力。(2)掌握如何建立数据库和数据表。(3)掌握数据库的方法。实验要求 （1)环境准备：具有相应的数据库管理系统系统安装有Access数据库系统。 (2)知识准备：熟悉Access的开发环境与窗口，了解数据库有关的基本韧识。 数据库4个基本术语；表记录、字段、主键。实验目标 根据的实际需求。为便于管理，首先建立一个简单的网上书店数据库，然后规划数据库，主要包括确定数据表，确定每个表的字段，确定数据表之间的关系。实验步骤（1）建立一个名为eshop的Access数据库。（2）建立如下数据表：用户表、产品表、大类表、子类表、订单表、订单详细表。（3）建立用户表（user

29、），包括用户ID、真实、用户名、密码、获取密码提问、获取密码答案、所在城市、地址、 、用户级别（3） 建立产品表（products），包括产品ID、产品名称、大类ID、子类ID、作者、描述、价格、优惠价、是否热销、出版日期、添加日期、小图url、大图url、销量、访问量字段（5）建立大类表（categories），包括类ID、类名两个字段。（6）建立子类表（subcategories），包括子类ID、子类名、大类ID字段。（7）建立订单表（orders）（8）建立详细订单表（orderdetails）实验六 ASP访问数据库制作动态页面实验6-1 修改静态页面为动态页面的首页实验步骤：一、动态

30、显示子类名称1. 向数据表中（subcategories）添加数据，如图所示。2. 修改静态网页index.html，修改后保存为index.asp。部分代码提示：（1） 建立到数据库的<%Dim conn,rs,sqlSet conn=Server.CreateObject("ADODB.Connection") conn.Open "Driver=Microsoft Access Driver (*.mdb);Dbq=" & Server.MapPath("database/eshop.mdb")%>（2） 显

31、示商品子类名称的代码（以显示图书商城的子类为例）<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><tr bgcolor="#FFFFFF"><td height="20" colspan="2" align="center" valign="middle"

32、><img src="images/shop_book.gif" alt="图书分类" width="81" height="15" /></td></tr><%sql="select * from subcategories where categoryid=1"set rs=conn.execute(sql)while not rs.eof 循环输出大类为1的所有子类的名称%><tr><td width="26

33、%" height="20" align="center" valign="middle"><img src="images/board_arrow.gif" width="17" height="13" /></td><td width="74%" height="20" align="left" valign="middle"><a h

34、ref="subcategory.asp?SubCategoryID=<%=rs("subcategoryid")%>"><%=rs("subcategoryname")%></a></td></tr><%rs.movenextwendrs.close%></table>（3）显示持续热销的代码<table width="100%" border="0" cellspacing="0&quo

35、t; cellpadding="0"> <tr bgcolor="#0066CC"> <td height="29" colspan="2" align="center"><span class="STYLE4"> 持 续 热 销</span></td> </tr><%sql="select top 5 * from products where hotdeal=true order

36、 by pubdate desc"set rs=conn.execute(sql)while not rs.eof %> <tr> <td width="23%"><img src="images/product/<%=rs("sImgUrl")%>" width="90" height="90" /></td> <td width="77%"><p><span class="STYLE2"><a title="<%=rs("productname")%>" href="#" target="_blank"><%=rs("productname")%></a></span></p>