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

网站建设与web设计实验指导书实验一 网站建设规划和网站建设初步实验目的1. 对网站进行目标定位2. 观察适合在网上销售的商品类别3. 提出创建网站的商品目录结构4. 规划网站的框架结构5. 分析建站的步骤与方法6. 熟悉申请域名的流程和管理机构。7. 掌握IIS的使用技巧。8. 练习在IIS中建立站点和对站点进行管理。实验目标1. 提出网站建设过程中系统规划的总体思想和原则。2. 确定企业网站销售商品的分类方法，方便用户快速浏览，找到自己所需要的商品或服务。3. 确定网站提供服务的大框架，使浏览者能够在首页上通过网站的提示迅速进入自己需要的页面。4. 为网站选择适当的方案，满足企业业务量的需要，具有服务稳定、价格适中、沟通便利、易于扩展的特点。5. 能正确安装IIS 6.06. 在IIS中建立和管理站点。实验内容1. 浏览大量成熟网站，参考网站的商品分类方法。（亚马逊、戴尔、首都电子商城、阿里巴巴）2. 参考网站建站的方案，明确建设网站的步骤般经过网站规划、域名注册、服务器配置、网页设计、网站测试与发布、网站管理与维护、网站推广等步骤就可以实现。建站时可以是企业独立建站，可以是托付给相应的公司建站，也可以采取双方合作的方式建站。在分析企业需求时侧重点有所不同，要予以考虑。3. 申请域名（可选做）一个好的域名应该与企业的性质、企业的名称、企业的商标及平时的企业宣传一致。选择与本公司密切相关的域名，但注意不能超过20个字符。访问中国互联网络信息中心，查询域名认证注册服务机构，选择一家机构申请注册自己的域名。4. DNS设置（可选做）5. 设置Internet信息服务管理器（IIS）6. Web站点的建立和管理7. 以小组的方式，规划一个电子商务网站（如网上书店、鲜花礼品商务网站、在线电脑销售网站等）。要求规划网站的栏目、形象设计、导航设计、网页布局设计，画出草图。、实验二 创建一个静态页面网站首页实验目的1熟练掌握静态网页的制作 2掌握简单的表单制作方法 实验要求环境准备 : 计算机中装有IIS、网页制作工具（如Dreamweaver或Frontpage等）软件、网页制作相关的素材和资料。 知识准备：熟练掌握网页制作工具的使用方法。 实验目标 创建如图2-1所示的“静雅书苑的网上书店”网站首页。图2-1问题分析网页设计容易出现下列问题:l 乱：网页内容太庞杂。l 无吸引力：太简单，显得单调。l 打开速度太慢：网页中使用了过多的多媒体元素。l 重要信息不容易找到：原因是缺乏规划，没有对浏览者需 求进行深入分析。解决方法l 乱：网站首页布局要合理，分类清晰。l 无吸引力：网站首页要提供足够的信息。l 打开速度太慢：首页上图片的大小和使用数量要适当。 l 重要信息不容易找到：从网站浏览者的角度分析进行分析，确定内容安排。实验步骤（1） 启动网页制作工具Dreamweaver软件。（2） 建立本地站点。设置本地根文件夹为D:jingya。（3） 新建一个静态网页文件，保存该文件名为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） 在表格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） 在B3表格中填入如图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-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 color: #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的运行环境。在硬件方面，必须在计算机上安装网卡，并接好网线。在软件方面，必须安装TCP/IP、服务器软件及浏览器软件，并指定本机的IP地址。在满足了以上条件后，还要安装5.0以上版本的IIS。（1） 安装IIS单击“开始-设置-控制面板-添加或删除程序”命令，安装Internet信息服务组件。（2） 测试IIS在浏览器的地址栏中输入或http:/localhost或http:/计算机的IP地址或http:/计算机名，如能显示IIS的帮助页面，表示测试成功。（3）配置WEB站点打开IIS管理器，设置“默认web站点” 打开“默认web站点”属性对话框 Web站点设置 主目录设置（网站的根目录设置为主目录） 默认文档设置（设置网站首页为默认文档，上一次实验课的index.html页面添加为默认文档）配置完成后，进行测试，在浏览器中输入http:/localhost即可打开index.html页面。（4）创建虚拟目录虚拟目录就是相对于IIS的根目录来说的，一个站点的根目录只能有一个，为了多个Web应用程序运行于一个IIS服务器上，就为其虚拟一个IIS目录。每个虚拟目录受控于跟目录的管理，有其特定的权限管理，也可以继承根目录的权限设置。要通过URL访问网页，需要输入http:/localhost/虚拟目录名/文件名如果要在网络中的其它计算机上访问上述网页，使用计算机名或IP地址来代替localhost即可。第二步：制作一个网站用户注册的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 为了引用方便，声明变量username=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)zip=Request.Form(zip)phone=Request.Form(phone)Response.Write 用户名： & usernameResponse.Write 密码： & passResponse.Write 确认密码： & comfpassResponse.Write 取回密码问题： & wentiResponse.Write 取回密码答案： & daanResponse.Write 真实姓名： & nameResponse.Write 城市： & cityResponse.Write 详细地址： & addressResponse.Write 邮编： & zipResponse.Write 电话： & phone & %实验四 制作一个聊天室实验目的1.熟练掌握VBScript的语法结构2.熟练掌握ASP内部对象的使用方法实验要求实验目标编写一个简单的聊天室应用程序实验步骤1编写一个聊天室的登录页面，命名为index.asp。在表单的文本框中输入昵称后，单击“进入”按钮，方可进入聊天室页面（chat.asp）。如下图所示：要求昵称不为空才能进入聊天室页面，并且显示在线人数。提示：（1）显示在线人数的代码如下：（2）判断昵称是否为空的check_Null（）函数代码如下：2编写发言内容提交表单页面，命名为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) 返回本次发言的颜色myemote=Request(myemote) 返回本次发言表情If myemote=无 Then myemote=End If下面三句将得到本次发言的字符串Dim sayStrsayStr= & user_name & Time & myemote & 说： sayStr=sayStr & & say & 下面几句将本次发言信息保存到Application中Application.Lock 先锁定Application(show)= sayStr & & Application(show)If Len(Application(show)10000 Then 如果发言总长度超过10000个字符，则截断为10000Application(show)=Mid(Application(show),1,10000)End IfApplication.Unlock 解除锁定End If%3编写聊天内容显示页面，页面保存为main.asp。页面显示如下： 每5秒刷新一次脚本代码如下：4编写聊天室页面，命名为chat.asp。该页面采用框架结构，分成两个部分，上面显示所有用户的发言内容页面（main.asp），下面显示发言的提交表单页面（input.asp）。如图所示：提示：把用户昵称保存到session对象中，来访者信息和在线人数+1保存到application对象中。代码如下：%Session(user_name)=Request(user_name) 将用户昵称保存到session中下面几句返回来访者信息Dim sayStrsayStr=来自 & Request.ServerVariables(Remote_Addr)& 的 来访者IP地址sayStr=sayStr & & Session(user_name) & 来访者昵称 sayStr=sayStr & 于 & Time & 大驾光临 来访时间sayStr= & sayStr & 红色显示下面几句将来访信息保存到Application中Application.Lock 先锁定Application(show)= sayStr & & Application(show) 返回聊天信息Application(user_online)=Application(user_online)+1 在线人数加1Application.Unlock 解除锁定%5编写离开聊天室页面，页面保存为exit.asp。代码如下：%下面几句返回离开者信息Dim sayStrsayStr=来自 & Request.ServerVariables(Remote_Addr)& 的 来访者IP地址sayStr=sayStr & & Session(user_name) & 来访者昵称 sayStr=sayStr & 于 & Time & 高兴而去 离开时间sayStr= & sayStr & 红色显示下面几句将离开者信息保存到application中Application.Lock 先锁定Application(show)= sayStr & & Application(show)Application(user_online)=Application(user_online)-1 在线人数减1Application.Unlock 解除锁定Response.Redirect index.asp 重定向回首页%实验五 创建数据库和数据表实验目的（1）培养规划数据库的能力。(2)掌握如何建立数据库和数据表。(3)掌握数据库的链接方法。实验要求 （1)环境准备：具有相应的数据库管理系统系统安装有Access数据库系统。 (2)知识准备：熟悉Access的开发环境及窗口，了解数据库有关的基本韧识。 数据库4个基本术语；表记录、字段、主键。实验目标 根据网站的实际需求。为便于管理，首先建立一个简单的网上书店数据库，然后规划数据库，主要包括确定数据表，确定每个表的字段，确定数据表之间的关系。实验步骤（1）建立一个名为eshop的Access数据