第一篇：2009-2010-1网页与Web程序设计实验报告
武汉大学计算中心2007年5月
《网页与Web程序设计》实验报告
年级：2008级（必修）
学号：20080307703117姓名：郝嫚专业：金融管理与实务3班
一、实验题目
分析或参考给定的“网站设计实例”，设计一个自选题材的网站。
说明：
1．自行设计的网站可以只包含静态网页（.htm），也可以包含动态网页(.asp)。
2．站点至少要有三层结构，页面数5页左右；网页要有落款、版权说明。网站大小不要超过10MB。
3．在网站制作过程中或完成后，填写下面“
五、实验步骤”里的省略号部分。
二、实验目的和要求
通过以前各章的学习和实验，同学们已经了解和初步掌握一系列的网页与Web程序设计技术。本实验能使大家对网站设计的全过程，有一个更加完整的概念，熟练掌握网站设计工具“网页设计三剑客”。具体要求如下：
1．自选题材，主题内容要合法、健康、实用。网站主题突出、内容丰富。
2．自己动手独立完成网站设计。可以借鉴和模仿某个网站进行设计与制作，但不可以从网上下载网页直接上交。
3．站点应当设计合理，结构分明，管理有序，无多余文件和文件夹，大小合适。文件和文件夹存放位置要正确，首页文件名应该使用index.htm、index.asp、default.htm或default.asp。其他文件或文件名命名也要规范，不宜使用汉字或带有空格的名称。
4．网站风格统一，设计适合于主题的LOGO（徽标），或者标题图片及动画。各页面设计合理、美观，有创意。不要太花哨或太孩子气，不要只是各种元素的随意拼凑。图片和动画选用要适合主题，不要在网页中插入不相干的图片，图片保存格式和图片大小要合适。要适用于各种显示器的分辨率，不要太宽，否则在显示器分辨率较小时会出现水平滚动条。
5．各个页面之间的链接要合理有效，路径要正确（使用相对路径）。要合理使用css样式，不要在各个页面中重复定义相同的css样式；应该将css样式存放到css文件中，然后附加即链接到各页中。代码结构清晰，无垃圾代码。
三、实验方法
网站设计的一般过程或方法如下：
1．确定主题和收集资料
自行选定所要设计的网站主题和栏目，收集有关图文、数据等资料，经过分析，初步确定网站的基本功能、结构或三级目录。
2．规划网站和新建站点
在需求分析的基础上，画出网站的树型目录结构图，从网站根文件夹，子文件夹到文件名。首页文件名如index.htm，应该放在网站根文件夹里。根据Windows的“管理工具”中是否已安装IIS，用Dreamweaver 8，在C:Inetpubwwroot或者D:里，新建站点，即根文件夹，子文件夹或文件名。随时在U盘上做好备份。
3．制作素材和单个网页
用“网页设计三剑客”自行制作或者收集网站要使用的小图片、动画、音频或视频，制作单个网页文件及其链接，以及按需要建立数据库。按照规划，一一放在网站的相应子文件夹里。
4．制作首页和建立链接
制作首页，并且建立与下一级网页的链接（若受网站大小限制且超过5页，则可建立必要的空连接）。
5．调试运行
可以边设计边调试，也可以边调试边修改前面的设计。然后，正式运行和提交网站。
四、实验环境
微机 + Windows操作系统(含IIS)+ Fireworks 8 + Flash 8 + Dreamweaver 8 + Access。
五、实验步骤
请填写网站分析与设计的实验步骤。
（一）分析给定的“网站设计实例”
1．该网站的树型目录或站点结构图（如图1）：
……
图1 实例网站的树型目录或站点结构
2．在该网站首页上“插入”大标题图片和动画文件的操作步骤：
……
3．在该网站设计中，运用了哪些样式设计技术如CSS等？举例说明：
……
4．在该网站设计中，下一级网页显示的目标（位置）一般设置为：……；数据库（.mdb）文件为：……。
5．在该网站设计中，较好地运用了如下网页与Web程序设计技术：
……
（二）设计自选题材网站的具体步骤
1．确定主题和收集资料
本网站的主题：我的美丽家乡——广水
栏目或三级目录：首页，魅力广水，广水高中，广水风光，今日广水和广水人
家。
2．规划网站和新建站点
网站的树型目录或站点结构图如图2：
首页
魅力广水 广水风光 广水高中 今日广水和广水人家
创建本地站点：
·启动Dreamweaver 8，选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框。
选择“新建”按钮，然后选择“站点”命令，打开“站点定义”对话框，将站点名称设为“Mysite”，单击下一步。
·根据提示填完有关步骤，最后单击“完成”按钮。
·单击“管理站点”对话框中的“完成”按钮，在打开“文件”面板上显示本地站点的目录结构。
·在站点根文件夹上单击右键，从弹出的快捷菜单中选择“新建文件夹”命令，将新建文件夹名称设置为“image”。
·采用同样的方法再建一个“vidao”文件夹。
3．制作素材和单个网页（举例说明典型的操作步骤）
（1）素材制作
1.图片：在网上收集一些网页背景图片，与主题有关的一些图片；将一些不是很合心意的图片在“fireworks”中进行修改，制作。
2.flash动画：在有关网页制作的网站中下载了一些有关的flash动画。由于网页设计容量的限制此处没有插入动画，实际步骤已知。
3.下载歌曲轻音乐红河谷作为其中风景网页的背景音乐。
4.下载有关的资料，图片„„
…
（2）网页制作
以魅力广水为例
打开Fireworks 8，在Fireworks 8中制做好背景图片并保存为JPG格式，关闭Fireworks 8。
打开Dreamweaver 8，单击“插入”—“图片”命令，选择此图片插入
（3）建立数据库
4．制作首页和建立链接（举例说明典型的操作步骤）
制作首页：
……1）新建页面，选择菜单命令“修改”—“页面属性”，在弹出的对话框中将网页的标题设置为“魅力广水”……
2)如果没有显示标尺，则选择菜单命令“查看”/“标尺”/“显示”，显示标尺。
3）选择菜单命令“查看”/“网格”/“显示网格”来显示网格，以便于
定位。
4）在插入工具栏中选择“布局”子工具栏，单击布局按钮，此时会打开
一个“从布局模式开始”，单击“确定”按钮进入布局模式。
5）单击“布局”插入工具栏上的“布局表格”按钮，然后将光标放在要绘制表格的区域，按住鼠标左键绘制一个布局表格。
6）在“布局”插入工具栏上的“布局表格”按钮，然后移动光标到第一
行网格的位置，绘制一个顶部单元格并选中该单元格，在打开的“属性”面板中设置“背景颜色”为白色，并以此方法绘制剩余的单元格。
7）选择“插入”/“图像”命令，插入图片，调整图片大小使得图片大
小恰好充满单元格。
8）在左侧单元格内输入文字，然后加上项目符号，并插入图片，然后
在属性面板中设置字体为黑体，背景设为绿色。
9)选定整个布局表格，将布局表格背景设为黑色。完成首页制作。
建立连接:
将所有的网页都做完了之后再建立链接。（下面以“魅力广水”为例）①选中“魅力广水”图片，打开“属性”面板，选择“链接”文本框右边的文件夹，选择文件夹中的“主页”网页，单击“确定”。
②在“目标”的下拉框中选择“鸣人的身世”
5．调试运行
调试和运行情况：
在运行的过程中，有某些图片，音乐无法正常显示和播放，有些是因为电脑的原因，而有些则是因为操作过程中出现的问题，经过不断修正，网页运行正常。
……
第二篇：Web网页实验报告
网页设计实验报告
学院：计算机
专业：网络工程
班级：0430801
学号：08490121
姓名：姚树秘
2011年5月10日Web
实验一
实验题目：编程环境的熟悉 实验目的：
1、学会使用Macromedia Dreamweaver 软件，了解并掌握该软件的各种功能，为以后的网页设计打下基础。
2、重点学习使用“页面创建”和“设置服务器信息”功能
实验环境：
操作系统为Windows2000或者Windows XP，应用软件为Macromedia Dreamweaver。
实验步骤：
1、启动
单击“开始”，依次指向“程序”、“Macromedia ”，然后单击“Macromedia Dreamweaver MX”。
2、熟悉和了解Macromedia Dreamweaver MX界面
实验过程截图：
心得体会：
通过这次试验，基本熟悉和掌握了Dreamweaver软件的功能和用法，能够用该软件设计简单的网页。
实验二
实验题目：熟悉ASP技术及它的内置对象 试验目的：
1． 了解并掌握ASP初步知识 2． 熟悉ASP内置对象
试验步骤：
1、打开软件设计页面
2、输入下列代码
3、建立一个自动监测浏览时间并根据不同时段动态显示不同页面内容的 ASP 程序，请将以下代码输入到Macromedia Dreamweaver的代码编辑区 , 命名为test1.asp
4、运行结果
实验过程截图：
5、建立一个学生情况调查表，并将学生填写的内容写入数据文件student.txt中。
6、设计编译结果
心得体会：
通过本次试验我学会了很多，软件的掌握和使用也更加熟练，能够成功的打开ASP文件，更加熟悉了ASP的运用和使用技巧，以及学会怎么打开IIS服务器，设置站点信息。
实验三
试验题目：
实现与后台数据库的连接
试验目的：
学会在ASP页面访问数据库的方法，包括对后台数据库进行各项操作； 试验环境：
Windows2000/Windows XP（已安装有IIS系统）,Microsoft Access数据库 实验步骤：
1、利用 ASP 的 Database Access 组件通过 ADO 连接并操作 WEB 数据库
2、单击“开始”，选设置控制面板。
3、双击图标“32 位 ODBC” , 将弹出一个对话框，选标签“System DSN”
4、单击“Add”添加一个 DSN 入口 , 选择如“Microsoft Access Drive”并确认。
5、在“Data Source Name”栏里输入你希望指定的 DSN, 然后单击“Select”选择数据库存放位置，你可以按“Browse”来选取。
6、以上步骤完成后在 ASP 程序中指定 DSN
7、现有两个数据库表：students表记录学生的一般数据，其中字段studID为学号，studName记录学生姓名，score表记录学生成绩，其中computer字段和english字段分别记录studID所表示的学生的计算机和英语课程成绩。实验相关代码：
<% @ language=javascript %>