网站实验报告.docx
《网站实验报告.docx》由会员分享，可在线阅读，更多相关《网站实验报告.docx（24页珍藏版）》请在冰豆网上搜索。
网站实验报告
《网页设计与制作》实验报告
班级：
学号：
姓名：
2011年4月18日
目录
实验一――――――Dreamweaver入门及基本操作
实验二――――――网页编辑和超链接
实验三――――――网页定位技术
实验四――――――行为与时间轴
实验五――――――CSS和模板
实验六――――――数据库配置
实验七――――――配置IIS
实验一Dreamweaver入门及基本操作
1、创建网站。
（1）在计算机硬盘上建立一个名为Mysite的根文件夹，并将制作网页的有关素材复制到此文件夹。
（2）启动Dreamweaver8,在【起始页】中选择创建新的【HTML】项目，此时就创建了一个空白网页。
（3）选择【站点】〡【新建站点】命令。
单击【高级】标签，在这个标签选项卡中设置【本地信息】。
（4）在【站点名称】文本框中输入“Mysite”，单击【本地根文件夹】文本框右边的图标，选择当前硬盘根文件夹下的Mysite文件夹，将其设置为本地战点的根文件夹。
（5）单击【默认图像文件夹】文本框右边的图标，选择文件夹Mysite下的img为默认的图像文件夹。
在【链接相对于】选项中，选择【文档】。
其他参数默认，并单击【确认】按钮完成新站点的创建。
2、制作简单的网页：
（1）启动Dreamweaver8,在【起始页】中选择创建新的【HTML】项目,创建一个空白网页。
（2）在网页编辑窗口为新网页设置页面属性，选择【修改】〡【页面属性】，在【页面属性】对话框中做各项参数的设置。
（3）在【分类】列表中选择【外观】选项，设置【页面字体】为：
仿宋，在【大小】下拉列表中选择文字的大小为：
20像素，设置【文本颜色】为黑色。
（4）单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0067.gif
在【重复】下拉列表中选择【重复】选项。
（5）在【分类】列表中选择【标题/编码】选项，在【标题】文本框中输入：
我的网站，其他参数默认。
如下图所示：
（6）选择【文件】〡【另存为】命令，将网页以AAA.htm保存在本地站点Mysite中。
（7）选择【插入】〡【图像】，选择img下色111.gif图像（此图像先前已在PS软件中制作好的），点击确定完成，然后调整图像位置，直到恰当。
（8）选择【插入】〡【布局对象】〡【层】，在网页文档窗口合适的位置上插入文字定位的层Layer1和Layer2，并在层中输入文字“欢迎访问电子商务网站”。
（9）在【属性】面板中设置文字的属性，字体为“宋体——加粗——斜体”。
（10）按F12预览网页，选择【文件】〡【保存】命令，将网页以AAA.htm为名保存在本地站点Mysite中。
制作实例见下：
实验二网页编辑和超链接
一、实验内容
1、网页文档的编辑。
2、各种网页元素的使用
3、创建超链接。
二、实验步骤
（1）将本实验所需素材复制到文件夹Mysite中，并将其设为本地站点。
（2）新建一个页面，选择【修改】〡【页面属性】，在【页面属性】对话框中设置背景图像为bj0040.gif，将【左边距】【右边距】【上边距】【下边距】分别设置为0。
（3）在【分类】列表中选择【标题/编码】选项，在【标题】文本框中输入：
实验二，其他参数默认，然后单击【确认】按钮确认，并将网页sy2.htm本地站点Mysite中。
（4）选择【插入】〡【布局对象】〡【层】，分别插入Layer1,Layer2,……………,一直到
Layer11，共11个层.分别布局、调整好这些层的位置大小。
（5）在Layer1中输入入标题文字“人生的伴侣，知识的源泉”，并选中这些文字。
在属性面板中设置字体大小为36，格式为“标题一”，作用于文字。
（6）在Layer2中选择【插入】〡【HTML】〡【水平线】，插入水平线。
（7）在Layer3中选择【插入】〡【日期】，插入日期。
（8）在Layer4中选【插入】〡【图像对象】〡【导航条】命令，出现导航条对话框。
（9）在【项目名称】文本框中设置第一个按钮的名称为：
a；单击【浏览】按钮，在4个按钮状态的文本框中分别输入img文件夹中的a1.gif,a2.gif,a3.gif,a4.gif4个文件的路径和名称；在【按下时，前往的URL】,文本框中输入该链接对象的名称和路径，选择【插入】下拉列表中的“水平”放置导航条。
如下
（10）重复步骤（9），设置好其他5个按钮。
（11）在Layer5中选择【插入】〡【表单】〡【跳转菜单】命令，在弹出的【插入跳转菜单】对话框中创建一个菜单选项，可在【文本】框中输入菜单选项的文字“卓越亚马逊”，在【选择时，前往的URL】文本框中，输入选择该菜单选项所链接的网站域名
单击加号继续添加其他的链接菜单，最后点击【确认】完成。
如下
（12）在Layer6到Layer8中选择【插入】〡【图像对象】〡【鼠标经过图像】命令，分别插入原始图像文件tu1_2.gif,tu2_2.gif,tu3_2.gif,鼠标经过图像文件为tu1_1.gif，tu2_1.gif，tu3_1.gif。
（13）在Layer9中插入img文件夹中的图像文件close1.png，选中该图像，在【属性】面板中的【链接】文本框中，输入mailto:
225355556@,建立E-mail链接
（14）在Layer10中选择【插入】〡【媒体】〡【Flash】命令，插入img文件夹中的动画文件shu2.swf.
（15）在Layer11中，插入文字“藏书不难，能看为难；看书不难，能读为难；读书不难，能用为难；能用不难，能记为难。
”
“凡事不宜刻，若读书则不可不刻；凡事不宜贪，若读书则不可不贪；凡事不宜痴，若读书则不可不痴。
”摘自清朝张潮先生《幽梦影》，并选中这段文字进行编辑。
（16）适当调整各层的位置大小，对整个网页布局进行调整，直到达到满意效果。
最后将网页以sy2.htm为名保存在本地站点Mysite中。
结果如下：
实验三网页定位技术
一、实验内容
1、表格的创建和应用
2、层与表格的综合
3、框架的创建和应用
二、实验步骤
1、表格的创建和应用
（1）将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。
（2）在网页文档窗口，选择【修改】〡【页面属性】命令，在【页面属性】对话框中做各项参数的设置。
单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0005.gif,在【重复】下拉列表中选择【重复】选项。
（3）选择【文件】〡【保存】命令，将网页以sy3.htm为名保存在本地站点Mysite中。
（4）选择【插入】〡【表格】命令，在【表格】对话框中设置表格参数。
a.设置【行数】为3，【列数】为8，【宽度】为640像素。
b.设置表格的【边框粗细】为0，【单元格边距】和【单元格间距】为0.其他参数默认。
（5）在表格的【属性】面板中，选择表格的【对齐】方式为“居中对齐”。
分别选中第一行和第二行的单元格，分别将表格个合并为一个单元格。
（6）选择【插入】〡【图像】命令，在第一行单元格中插入img中的文件bj0012.jpg,选中该图像，在【属性】面板中，将设置为【宽】640像素.
（7）在第二行单元格中插入文件welcom,jpj，在【属性】面板中单击【居中】按钮，使图像居中。
（8）选中第三行的全部单元格，在【属性】面板中，设置单元格的【宽】为80像素，【高】为300像素。
（9）在表格中输入相关文字，最后将将网页以sy2.htm为名保存在本地站点Mysite中。
结果如下：
2.层与表格的综合
（1）将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。
（2）在网页文档窗口，选择【修改】〡【页面属性】命令，在【页面属性】对话框中做各项参数的设置。
单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0086.gif.
（3）选择【文件】〡【保存】命令，将网页以sy3-1.htm为名保存在本地站点Mysite中。
（4）选择【插入】〡【表格】命令，插入一个1行4列的表格，在表格内输入内容为现代文学、生活艺术、文化教育、科学技术的文字。
（5）在表格【属性】面板设置表格的【边框】为2，【边框颜色】为＃333333.
（6）【插入】〡【布局对象】〡【层】命令，分别插入4个层：
Layer1，Layer2，Layer3，Layer4,在每个层中插入一个4行1列的表格,在每个表格的【属性】面板设置表格的【边框】为1，【边框颜色】为＃00FFFF.
（7）调整好各个层和表格的位置大小，完成如下图示结果：
（8）按F12预览网页，选择【文件】〡【保存】命令,将网页以sy3-2.htm为名保存在本地站点Mysite中。
3、框架的创建和应用
（1）将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。
（2）选择【插入】〡【HTML】〡【框架】命令，先插入顶部和嵌套的左侧框架，在主框架（mainframe）中插入底部框架，左框架（leftframe）中插入顶部框架，调整左框架与底部框架高度相同。
（3）先插入顶部和嵌套的左侧框架，在主框架（mainframe）中插入底部框架，左框架（leftframe）中插入顶部框架，调整左框架与底部框架高度相同。
（4）在左框架的顶部框架（topframe1）中插入一个4行1列的表格，插入图片完成与文档的链接。
现代文学，链接literature.htm；生活艺术，链接art.htm；文化教育，链接edu.htm；科学技术，链接scie.htm。
（5）按F12预览网页，选择【文件】〡【保存】命令,将网页以sy3-3.htm为名保存在本地站点Mysite中。
如下所示：
实验四行为与时间轴
1、实验内容：
行为的应用。
（1）完成鼠标拖曳层以及在层上单击时播放音乐的功能，
（2）装载页面时设置状态栏文字为：
“欢迎访问！
”，并弹出提示信息：
“可用鼠标拖
曳图片！
”。
（3）创建4幅鼠标经过图像，实现如下功能：
当鼠标指向某幅图时，在中间显示其
对应文字说明的图片。
（4）制作下拉菜单：
以实验3的2题为基础，完成如下功能：
当鼠标指向第一行的列时，显示其其下面的列，鼠标移走时隐藏。
然后完成单击某项时的链接跳转。
（5）制作控制flash播放、停止的页面。
2、实验步骤：
（1）将本例所需素材复制到文件夹Mysite中，并将其设为本地站点。
（2）新建一个页面，选择【修改】〡【页面属性】命令，在【页面属性】对话框中做各项参数的设置。
单击【背景图像】右边的【浏览】按钮，选择本地站点的文件夹img中的文件bg0006.gif.将【左边距】【右边距】【上边距】【下边距】分别设置为0。
（3）选择【文件】〡【保存】命令,将网页以sy4.htm为名保存在本地站点Mysite中。
（4）在网页合适的位置上插入2个层，在Layer1中插入图像文件Camp1.jpg,在Layer2插入图像文件m1.jpg。
（5）按快捷键Shift+F4打开【行为】面板。
无须选中层，单击行为添加按钮
，在动作菜菜中选择【拖动层】命令，弹出一个【拖动层】的对话框并进行设置，点确认。
在事件菜单中选择【onMouseMove】命令。
使得在浏览该页面时，能随意拖动插入图像Camp1.jpg的层Layer1。
（6）选中层Layer1，并单击行为添加按钮
，选择【播放声音】动作，在弹出的【播放声音】对话框中输入文件夹Music中的声音文件李圣杰——关于你的歌.mp3,并单击【确认】
按钮确认，如下图
（7）选中该行为，并单击事件列表中下三角形按钮，在菜单中选择事件【onClick】。
其意思为单击层Layer1，播放声音文件李圣杰——关于你的歌.mp3。
（8）选中层Layer1，并单击行为添加按钮
，在动作菜单中选择【设置文本】〡【设置状态栏文本】命令，在【设置状态栏文本】对话框中输入“欢迎访问！
”，并单击【确认】
按钮确认，如下图
（9）选中该行为，在菜单中选择事件【onLoad】,其意为装载页面时，在状态栏中显示文字“欢迎访问！
”。
（10）选中层Layer1，并单击行为添加按钮
，在动作菜单中选择【弹出信息】，并且在【弹出信息】对话框中输入“可用鼠标拖曳图片！
”，并单击【确认】按钮确认，如下图
（11）选中该行为，在菜单中选择事件【onLoad】,其意为装载页面时自动弹出提示信息：
“可用鼠标拖曳图片！
”。
（12）选择【插入】〡【布局对象】〡【层】命令，插入第一个层Layer1，并在层里插入img下的图像m1.jpg.此层作为垫底层。
（13）再插入2个层Layer2，Layer3，在Layer2中插入图片图像camp1.jpg,在Layer3中插入文字图像m1.png.
（14）打开【层】面板，选中Layer2，单击【层】面板中的
按钮，使其显示闭合的眼睛，表示该层的属性设置为不可见。
（15）打开【行为】面板。
选中Layer2，单击行为添加按钮
，选择【显示-隐藏层】动作，在弹出的【显示-隐藏层】对话框中选中Layer3，并单击【显示】按钮设置显示该层，如下
（16）选中该行为，并单击并单击事件列表中下三角形按钮，在菜单中选择事件【onMouseOver】,意为鼠标指针在层Layer2上时，.显示层Layer3中说明文字的图像m1.png。
（17）仿照步骤15~~16，给层选中Layer2添加【显示-隐藏层】的动作。
在弹出的【显示-隐藏层】对话框中选中层Layer3，并单击【隐藏】按钮设置隐藏该层，如下图：
（18）选择事件【onMouseOut】，意为鼠标指针从层Layer2上移去时，隐藏层Layer3中说明文字的图像m1.png。
（19）再插入6个层Layer4，Layer5，Layer6，Layer7，Layer8，Layer9。
依次在各层中插img下的图像camp2.jpg，m2.jpg,camp3.jpg，m3.jpg,camp4.jpg,m4.jpg.
（20）仿照15~~18的步骤，完成对Layer4，Layer6，Layer8的【显示-隐藏层】系列行为的设置，然后依次序将Layer3，Layer5，Layer7，Layer9叠加到层Layer1上。
围绕叠加好的层，将层Layer2，Layer4，Layer6，Layer8摆好位置，调整好大小，让网页看起来协调恰当，结果如下图所示：
（21）下拉菜单的制作：
以实验3的2题为基础，添加行为【显示-隐藏层】效果即可具体如下：
首先按CTRL键不放点击Layer1中的第一个单元格，现按Shift+F3打开行为窗口，点三角形按钮，在下拉选项中【显示-隐藏层】。
在弹出的【显示-隐藏层】对话框中选中Layer2，在菜单中选择事件【onMouseOver】即可。
（22）给层Layer1中的第一个单元格添加【显示-隐藏层】的动作。
在弹出的【显示-隐藏层】对话框中选中层Layer3，并单击【隐藏】按钮设置隐藏该层，选择事件【onMouseOut】。
（23）另外四个单元格的添加仿照步骤21-22,下拉选单部分，先选中层Layer2，方法是点击层的边缘或在LAYER面板中点击Layer2，用与Layer1部分同样的方法在行为窗口中为它添加显示与隐藏自己的命令。
这样做的效果是当鼠标移出Layer2时，层Layer2就自动隐藏。
（24）按F12预览网页，选择【文件】〡【保存】命令,将网页以sy4.htm为名保存在本地站点Mysite中。
实验五CSS和模板
一、实验内容
1、CSS的应用。
（1）定制文字的CSS样式。
（2）实现虚线、凹槽等8种不同的边框效果。
（2）滤镜的应用。
使用CSS实现图片翻转效果、波浪效果、Alpha遮罩效果以及文字阴影效果。
2、模板的应用。
（1）创建空白文档模板，建立可编辑区域，并利用其创建网页。
（2）利用已有的网页创建模板，并利用其创建网页。
修改模板，观察使用该模板的网页的更新情况。
二、实验步骤
1、CSS的应用
（1）选择【新建】〡【CSS】命令，打开【CSS样式】面板。
（2）在【CSS样式】面板右击，打开快捷菜单，选择【新建】命令。
（3）在【新建CSS规则】对话框中选择【类（可用于任何标签）】单选项，在【名称】文本框中输入：
.charl,并在【定义在】下拉列表选择【新建样式表文件】命令。
单击【确定】按钮确认。
（4）在【保存样式表文件为】对话框中，选择【文件系统】单选项，输入新创建的CSS样式表文件保存路径和文件名。
CSS样式表文件名为docfomat.css,然后确认。
（5）此时在弹出的【.charl的CSS规则定义（在docfomat.css中）】对话框中，设置【类型】各项参数，如下图所示：
（6）然后设置【边框】各项参数，如下图所示：
（7）然后设置【扩展】各项参数，根据需要设置CSS实现图片翻转效果、波浪效果、Alpha遮罩效果以及文字阴影效果。
例如在【滤镜】设置参数为Alpha（Opacity=100,Finishopacity=0,Style=2,StartX=0,StartY=0,FinishX=500,FinishY=400）可实现遮罩效果。
如下图所示：
（8）单击【确定】按钮完成CSS样式的创建。
2、模板的应用。
（1）在网页文档窗口中先选择要创建模版的站点。
选择【站点】〡【编辑站点】命令，然后选择站点名。
选择本地站点为Mysite.
（2）选择【窗口】〡【资源】命令，打开【资源】面板，单击曼便左边的
模版按钮。
（3）单击【资源】面板右边的
按钮，打开下拉菜单，选择【新建模版】命令。
（4）在单击【资源】面板右边的
按钮，在空白的模版中添加内容。
在模版中插入层。
（5）选中该层，单击【插入】栏【常用】选项中的【模版】下拉列表的【可编辑区域】，弹出【新建可编辑区域】对话框，如下图
（6）在【新建可编辑区域】对话框的【名称】文本框中输入可编辑区域的名字。
（7）选择【文件】〡【另存】命令，将新创建的模版文件保存到Templates文件夹中
（8）利用已有的网页创建模板，并利用其创建网页.选择【文件】〡【打开】命令，在网页编辑窗口打开一个名为test.htm的文档，用它来创建一个模版。
（9）选择【文件】〡【另存为模版】命令，系统会弹出【另存为模版】对话框，如下图
（10）单击【保存】按钮保存，此时新建的模版文件会保存在网站根文件下的Templates文件夹中。
然后对模版添加可编辑区域，步骤仿照步骤（5）。
（11）设置完可编辑区域后，【文件】〡【另存为模版】命令，将模版保存在本地站点中。
实验6数据库配置
一、实验步骤
（1）启动Access，选择【文件】〡【新建】命令，在弹出的任务窗口中选择【空数据库】系统弹出【文件新建数据库】对话框，输入文件名后，单击【创建】按钮，新的数据库保存在这个文件中。
（2在新建的数据库建新表，在如下的窗口中，选择【使用设计器创建表】，单击设计按钮。
（3）在如下的【表】设计窗口中，创建student（学生）表，结构如下：
sno：
学号，char
sname：
姓名，char（8）。
major：
专业，char（20）。
ssex：
性别，char
（2）。
sage：
年龄，int。
创建course（课程）表，结构如下：
cno：
课程号，char（10）。
cname：
课程名称，char（20）。
credit：
学分，int。
tno：
教师号，char（10）。
maxnum：
最大选课人数，int。
创建sc（选课）表，结构如下：
cno：
课程号，char（10）。
sno：
学号，char（10）。
grade：
成绩，int。
创建account（登陆）表，结构如下：
uno：
用户编号，char（10）。
uname：
用户名，char（8）。
password：
密码，char（10）。
Authlevel：
用户级别，char（10）。
创建teacher（教师）表，结构如下：
tno：
教师号，char（10）。
tname：
姓名，char（8）。
title：
职称，char（10）。
（4）完成后关闭该窗口，系统会问是否要保存，单击【是】按钮，输入表名后保存。
（5）选择Web服务器上的【开始】〡【设置】命令，打开【控制】面板，双击打开【管理工具】窗口，然后在双击【数据源（ODBC）】图标，打开【ODBC数据源管理器】
（6）【系统DSN】选项卡，单击【添加】按钮，添加后系统会显示【创建新数据库源】对话框，选择参数源为【MicrosoftAccessDriver（*.mdb）】,并单击【完成】按钮。
（7）然后系统会显示【ODBCMicrosoftAccess安装】对话框，在对话框的【数据源名】文本框中输入配置的DSN名称。
（8）系统显示【ODBC数据管理器】的对话框，在对话框中选择正确的目录和数据库文件。
选择数据库完成后，单击【确定】按钮完成。
（10）启动Dreamweaver8,在【起始页】中选择创建新的【VBScirpt】项目，在【应用程序】窗口，点击“
”，选择【数据源名称】。
点【确定】Score出现在【数据源名称（DSN）】文本框中。
如下图
（11）点【确定】按钮退出DSN设置，就可以看到【数据库】选项多了一个代表数据库链接的图标，然后展开，就可看到数据库的组成结构。
实验七配置IIS
一、实验内容
1、在IIS中建立虚拟目录，发布站点。
2、通过文件属性设置完成1。
3、在IIS中完成相关设置，如默认显示文档等。
4、使用IIS浏览站点中的网页
二、实验步骤
（1）打开【控制面板】【管理工具】【设置】【Internet信息服务】，展开【Internet信息服务】右击“默认Web站点”，选择【新建-虚拟目录】，弹出【虚拟目录创建向导】对话框，设置好别名wdwz，目录路径，和除了“写入”以外的权限，点击完成。
（2）网站根目录文件在E:
\Mysite，选中E盘中的文件夹Mysite，单击右键，选择属性，在WEB共享中进行相关设置。
以达到通过文件属性设置完成1。
（3）选择默认网站下的站点文件，单击右键，设置Web的各项属性，即在IIS中完成相关设置，例如可看到刚建立的wdwz，在wdwz上点鼠标右键→属性，选择“文档”，让“启用默认文档”打上勾.。
（4）展开【Internet信息服务】。
打开新建的站点，打开站点下的目录，右键浏览即可查看站点中的网页文件。
升级会员 