个人网站实验报告
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
mhmove.onmouseout=function() {MyMar2=setInterval(Marquee3,speed)}
个人相册的子页：
在个人相册的子页（我的生活、我的家乡、我的学校、我的班级)，每张页面懂使用了同一种效果，即图片浏览，包括上一张、下一张，循环播放，实现了图片的循环播放，其基本效果使用了javascript，其代码如下：
{
<%if session("username")="" then%>
//判断是否已登录
alert('请先登录，登录后才能留言');
window.location.href='login.html';//为登录则跳转到login.html页面
<%end if%>
}
function isNullMessage(obj){
}
if(flag == true)
flag = false;
else flag = true;
function photo_autoplay_change()
{
if(flag == true)
{
if(n==imgs.length-1)
n=0;
frm_photo.autoplay.value = "暂停播放";
由于不同的浏览器的内核不同，导致网页对不同浏览器的兼容性也不一样，该网站测试主要使用了IE（IE6.0、IE7.0、IE8.0、IE9.0）和Firefox（火狐）测试，通过调整，最终还是出现了少许的显示不一样，在IE6.0、IE7.0即Firefox显示正常，而在IE8.0，IE9.0显示有些差别。由于我知识及能力原因，所以暂时未能解决该问题。
{
for(i=0;i<8;i++)
{
imgs[i] = new Image();
imgs[i].src="image/myHome"+i+".jpg";
}
}
function photo_next()//下一张
{
if(loadImage==false)
{
loadImages();
loadImage =true;
4、网页设计概述
3.1网页的内容
该网站主题为个人网站，主要介绍了我的基本信息吗，我的爱好，我平日生活的活动，还有一些供浏览的人提共休闲娱乐，以及快帮助兴趣和我相同的网友快速找到相应兴趣交流站。该网站主要包含了首页，个人介绍，个人相册，给我留言，资料共享，学习情况，和一个其他版块。（其中资料共享和学习情况未实现）
在主页下方，有个图片自动滚动效果，并且当鼠标放到上面是，图片停止滚动效果如图：
使用到了css+DIV和JavaScript来实现。其中JavaScript的主要代码如下：
var speed=40 ;
mhmove2.innerHTML=mhmove1.innerHTML;
function Marquee3(){
3、网站运行说明
该网站是基于ASP平台开发的，所以运行该网站，必须在已经安装好IIS(Internet Information Service网络信息服务)的操作系统中。该网站为了方便测试，使用了asp（Asp Weg Server）服务器软件，该文件在本站的根目录下（Aws.exe），只要双击即可进入网站首页（index.html）。
messsageData有4个字段。LiuYanID（自动编号）,userID（留言用户ID），content(留言内容)，data(留言时间)
为了代码能重用，故将打开和关闭数据库的操作写到未见Conn_Access.asp中，然后再需要与数据库有交互的页面，使用<!--#include file="Conn_Access.asp"-->将该文件包含进来。
mhmove.scrollTop-=mhmove1.offsetHeight;
else{
mhmove.scrollTop++;
}
}
var MyMar2=setInterval(Marquee3,speed);
mhmove.onmouseover=function() {clearInterval(MyMar2)}
建立一个数据库UserInfo.mdb，该数据库中有两张表user表和messsageData表。User表用来存放用户的信息，表中有中10个字段。userID（自动编号），username(用户名)，password（密码），sex（性别），birthDay(生日)，qq(qq号码)，email(邮箱)，tel（电话），registerTime(注册时间)。
资料共享（未实现）：资料共享只要是通过该页面，网友可以上面交流、分享自己的学习作品，上传和下载小工具等等。
学习情况
给我留言：主要针对内容为给我的所有留言，以及给我留言的输入框，对我或对本网站有任何意见均可通过此页面告知我。
其他：其他页面主要做了一些供网友们娱乐、休闲的自带的游戏，音乐，影视以及超链接等等...
YiMu家园（点击下载该网站源文件）
1、前言
从1946年世界上第一台计算机（ENIAC）诞生开始，标志着另一个时代到来——计算机时代。计算机从刚开始的单一的用于科学计算到现在的各行各业，从刚开始的几十吨、占地一百多平方米现在的手持计算机，从刚开始的运算速度几千吃每秒到现在的上百万亿次每秒，计算机已经发展到了人类离不开计算机。
var n = 0;//照片数组下标
var flag = false;//标记是自动播放还是暂停
var time;//计时器
var imgs = new Array();
var loadImage =false;//标记是否已载入图片
function loadImages()//载入图片，使用数组记录图片
计算机走入普通人的家里，更能让人们体验出他的价值。而计算机网络的发展，也是让人惊叹不已，计算机网络的出现，让人们更快、更准、更直接的实现了“秀才不出门，全知天下事”，只要轻轻点击下鼠标，世界上每个角落尽收眼底。也是计算机网络的出现，更多的人在网络上向别人展示自己，博客、论坛、空间、个人网站...都是他们展现自己、推销自己的一个方式，也是和别人分享的方式。制作属于自己的网站，发布到互联网上，和前世界的人一起分享你的收获，分享你的快乐，将是一件有意义有价值的事。
3.4网页的部分代码及效果截图
导航栏：导航栏用css样式表对超链接做了一个鼠标滑过特效，其效果如下：
即使用CSS实现但鼠标滑过时，更改导航栏的的背景。
首页：
欢迎条幅：在网页主内容上方，有个滚动的条幅——“欢迎来到我的家园”，如图：
实现代码如下：<marquee behavior=alternate><font face="方正舒体" size="+3" color="#FF3366">欢迎来到我的家园</font></marquee>其运动方向使用默认的从右向左。
if (!regex.exec(youXiang))//youXiang是邮箱输入框的值{
alert("您输入的邮箱格式有误，检查您是否忘了输入＠符号或是点号！");
obj.email.focus();
return false;//取得焦点
}
3.5数据库（本网站使用的数据库为Microsoft Office Access 2003）：
整个网站中各个网站之间的关系视图：
3.2网页的布局
网页主要使用“T”型布局，头顶部放的是LOGO和导航栏，网页的左边放的是我的其他网站的博客或空间的链接，及联系方式，网页的右边放的是网页的正文，即网页的主要内容。
网站布局如图：
3.3网页制作所用到的工具和技术
工具：网页主要用到了Dreamweaver，photoshop两个工具。Dreamweaver完成了网站的框架的搭建和网站代码的编写，photoshop完成了网站背景、按钮及图片制作和美化。
clearTimeout("time");
}
}
photo_auLeabharlann Baiduoplay_change();
}
给我留言：
在给我留言页面，需要登录才能给我留言，未登录的用户但点击留言输入框时，自动提示需要登录，并自动跳转到登录页面。其使用的是javaScript来实现：
其实现代码如下：
function isLogin()
}
if(n==0)
n=imgs.length-1;
document.frm_photo.tbl_photo.src=imgs[n].src;
n=n-1;
}
function photo_autoplay()//自动播放/暂停
{
if(loadImage==false)
{
loadImages();
loadImage =true;
}
if(n==imgs.length-1)
n=0;
document.frm_photo.tbl_photo.src=imgs[n].src;
n=n+1;
}
function photo_previous()//上一张
{
if(loadImage==false)
{
loadImages();
loadImage =true;
首页：首页列出了我自己对计算机专业的理解，对人生的一感悟以及我喜欢的故事、散文笑话等等，还列出了我部分的照片；
个人介绍：个人介绍列出了我的基本信息；我喜欢的运动，即我对这些运动的认识和理解，并简介的描述我的家乡；
个人相册：个人相册分别列出了我的生活、我的家乡、我的学校以及我的班级照片展示的首页及超链接
其实现使用到了javaScript和正则表达式。其部分实现代码如下：
javaScript：
function isNullNamePass()//判断是否为空
{
if(document.login.userName.value=="" || document.login.password.value == "")
isLogin();
if(obj.content.value=="")
{
alert("请输入您的留言内容");//内容不能为空
obj.content.focus();
return false;
}
else return true;
}
登录和注册：
在登录和注册页面，需要使用合法的用户名等信息才能进行登录或注册，当输入的信息不合法时，自动显示提示信息，并使该输入框获得焦点，让用户重新输入
{
alert("用户名或密码不能为空！");
document.login.passwords.focus();
return false;
}
return true;
}
正则表达式：
var regex=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//构造正则表达式进行检验。格式为：***@**.**
技术：网页只要是运用模板制作完成主框架。框架是由CSS+DIV，表格的嵌套搭建而成，其中用到了javaScript语言对一些网页效果，和输入框的判断。在需要有输入限制的（如登录，注册..）使用到了正则表达式进行判断。其中在登录、注册、留言板块需要连接到数据库，从数据库中读取数据进行相应的存储了读出。
//alert(n);
document.frm_photo.tbl_photo.src=imgs[n].src;
n=n+1;
time=setTimeout(photo_autoplay_change,1000);//一秒播放一张
}
else
{
frm_photo.autoplay.value = "自动播放";
2、制作该网站目的
通过一个学期的web程序设计，我基本掌握了HTNL，JS，和初步的SAP，以及可以通过使用表格，框架，DIV、CSS来对网页的布局，为了检验自己的学习情况，所以使用这些已掌握的知识综合运用制作一个属于自己的一个网站，是自己可以看到自己学习的一个成果。
除了检验自己的能力外，现在网页是信息在网络上展示的最直接的方式，已被几乎所有人说钟爱，对于网页，必将成为向全世界传达信息的一个最有力的工具。网页设计，对我们每个人，特别是我们计算机专业的学生，应该是我们必备的技能，所以这次说是一次课程设计，更应该说是我们的一次实践，通过课程设计，我们可以了解制作网页的步骤、方法、流程，即总结出经验，为将来我们走向社会做好准备。
if(mhmove2.offsetWidth-mhmove.scrollLeft<=0)
mhmove.scrollLeft-=mhmove1.offsetWidth;
else{
mhmove.scrollLeft++;
}
}
function Marquee4(){
if(mhmove2.offsetHeight-mhmove.scrollTop<=0)
个人相册的子页：
在个人相册的子页（我的生活、我的家乡、我的学校、我的班级)，每张页面懂使用了同一种效果，即图片浏览，包括上一张、下一张，循环播放，实现了图片的循环播放，其基本效果使用了javascript，其代码如下：
{
<%if session("username")="" then%>
//判断是否已登录
alert('请先登录，登录后才能留言');
window.location.href='login.html';//为登录则跳转到login.html页面
<%end if%>
}
function isNullMessage(obj){
}
if(flag == true)
flag = false;
else flag = true;
function photo_autoplay_change()
{
if(flag == true)
{
if(n==imgs.length-1)
n=0;
frm_photo.autoplay.value = "暂停播放";
由于不同的浏览器的内核不同，导致网页对不同浏览器的兼容性也不一样，该网站测试主要使用了IE（IE6.0、IE7.0、IE8.0、IE9.0）和Firefox（火狐）测试，通过调整，最终还是出现了少许的显示不一样，在IE6.0、IE7.0即Firefox显示正常，而在IE8.0，IE9.0显示有些差别。由于我知识及能力原因，所以暂时未能解决该问题。
{
for(i=0;i<8;i++)
{
imgs[i] = new Image();
imgs[i].src="image/myHome"+i+".jpg";
}
}
function photo_next()//下一张
{
if(loadImage==false)
{
loadImages();
loadImage =true;
4、网页设计概述
3.1网页的内容
该网站主题为个人网站，主要介绍了我的基本信息吗，我的爱好，我平日生活的活动，还有一些供浏览的人提共休闲娱乐，以及快帮助兴趣和我相同的网友快速找到相应兴趣交流站。该网站主要包含了首页，个人介绍，个人相册，给我留言，资料共享，学习情况，和一个其他版块。（其中资料共享和学习情况未实现）
在主页下方，有个图片自动滚动效果，并且当鼠标放到上面是，图片停止滚动效果如图：
使用到了css+DIV和JavaScript来实现。其中JavaScript的主要代码如下：
var speed=40 ;
mhmove2.innerHTML=mhmove1.innerHTML;
function Marquee3(){
3、网站运行说明
该网站是基于ASP平台开发的，所以运行该网站，必须在已经安装好IIS(Internet Information Service网络信息服务)的操作系统中。该网站为了方便测试，使用了asp（Asp Weg Server）服务器软件，该文件在本站的根目录下（Aws.exe），只要双击即可进入网站首页（index.html）。
messsageData有4个字段。LiuYanID（自动编号）,userID（留言用户ID），content(留言内容)，data(留言时间)
为了代码能重用，故将打开和关闭数据库的操作写到未见Conn_Access.asp中，然后再需要与数据库有交互的页面，使用<!--#include file="Conn_Access.asp"-->将该文件包含进来。
mhmove.scrollTop-=mhmove1.offsetHeight;
else{
mhmove.scrollTop++;
}
}
var MyMar2=setInterval(Marquee3,speed);
mhmove.onmouseover=function() {clearInterval(MyMar2)}
建立一个数据库UserInfo.mdb，该数据库中有两张表user表和messsageData表。User表用来存放用户的信息，表中有中10个字段。userID（自动编号），username(用户名)，password（密码），sex（性别），birthDay(生日)，qq(qq号码)，email(邮箱)，tel（电话），registerTime(注册时间)。
资料共享（未实现）：资料共享只要是通过该页面，网友可以上面交流、分享自己的学习作品，上传和下载小工具等等。
学习情况
给我留言：主要针对内容为给我的所有留言，以及给我留言的输入框，对我或对本网站有任何意见均可通过此页面告知我。
其他：其他页面主要做了一些供网友们娱乐、休闲的自带的游戏，音乐，影视以及超链接等等...
YiMu家园（点击下载该网站源文件）
1、前言
从1946年世界上第一台计算机（ENIAC）诞生开始，标志着另一个时代到来——计算机时代。计算机从刚开始的单一的用于科学计算到现在的各行各业，从刚开始的几十吨、占地一百多平方米现在的手持计算机，从刚开始的运算速度几千吃每秒到现在的上百万亿次每秒，计算机已经发展到了人类离不开计算机。
var n = 0;//照片数组下标
var flag = false;//标记是自动播放还是暂停
var time;//计时器
var imgs = new Array();
var loadImage =false;//标记是否已载入图片
function loadImages()//载入图片，使用数组记录图片
计算机走入普通人的家里，更能让人们体验出他的价值。而计算机网络的发展，也是让人惊叹不已，计算机网络的出现，让人们更快、更准、更直接的实现了“秀才不出门，全知天下事”，只要轻轻点击下鼠标，世界上每个角落尽收眼底。也是计算机网络的出现，更多的人在网络上向别人展示自己，博客、论坛、空间、个人网站...都是他们展现自己、推销自己的一个方式，也是和别人分享的方式。制作属于自己的网站，发布到互联网上，和前世界的人一起分享你的收获，分享你的快乐，将是一件有意义有价值的事。
3.4网页的部分代码及效果截图
导航栏：导航栏用css样式表对超链接做了一个鼠标滑过特效，其效果如下：
即使用CSS实现但鼠标滑过时，更改导航栏的的背景。
首页：
欢迎条幅：在网页主内容上方，有个滚动的条幅——“欢迎来到我的家园”，如图：
实现代码如下：<marquee behavior=alternate><font face="方正舒体" size="+3" color="#FF3366">欢迎来到我的家园</font></marquee>其运动方向使用默认的从右向左。
if (!regex.exec(youXiang))//youXiang是邮箱输入框的值{
alert("您输入的邮箱格式有误，检查您是否忘了输入＠符号或是点号！");
obj.email.focus();
return false;//取得焦点
}
3.5数据库（本网站使用的数据库为Microsoft Office Access 2003）：
整个网站中各个网站之间的关系视图：
3.2网页的布局
网页主要使用“T”型布局，头顶部放的是LOGO和导航栏，网页的左边放的是我的其他网站的博客或空间的链接，及联系方式，网页的右边放的是网页的正文，即网页的主要内容。
网站布局如图：
3.3网页制作所用到的工具和技术
工具：网页主要用到了Dreamweaver，photoshop两个工具。Dreamweaver完成了网站的框架的搭建和网站代码的编写，photoshop完成了网站背景、按钮及图片制作和美化。
clearTimeout("time");
}
}
photo_auLeabharlann Baiduoplay_change();
}
给我留言：
在给我留言页面，需要登录才能给我留言，未登录的用户但点击留言输入框时，自动提示需要登录，并自动跳转到登录页面。其使用的是javaScript来实现：
其实现代码如下：
function isLogin()
}
if(n==0)
n=imgs.length-1;
document.frm_photo.tbl_photo.src=imgs[n].src;
n=n-1;
}
function photo_autoplay()//自动播放/暂停
{
if(loadImage==false)
{
loadImages();
loadImage =true;
}
if(n==imgs.length-1)
n=0;
document.frm_photo.tbl_photo.src=imgs[n].src;
n=n+1;
}
function photo_previous()//上一张
{
if(loadImage==false)
{
loadImages();
loadImage =true;
首页：首页列出了我自己对计算机专业的理解，对人生的一感悟以及我喜欢的故事、散文笑话等等，还列出了我部分的照片；
个人介绍：个人介绍列出了我的基本信息；我喜欢的运动，即我对这些运动的认识和理解，并简介的描述我的家乡；
个人相册：个人相册分别列出了我的生活、我的家乡、我的学校以及我的班级照片展示的首页及超链接
其实现使用到了javaScript和正则表达式。其部分实现代码如下：
javaScript：
function isNullNamePass()//判断是否为空
{
if(document.login.userName.value=="" || document.login.password.value == "")
isLogin();
if(obj.content.value=="")
{
alert("请输入您的留言内容");//内容不能为空
obj.content.focus();
return false;
}
else return true;
}
登录和注册：
在登录和注册页面，需要使用合法的用户名等信息才能进行登录或注册，当输入的信息不合法时，自动显示提示信息，并使该输入框获得焦点，让用户重新输入
{
alert("用户名或密码不能为空！");
document.login.passwords.focus();
return false;
}
return true;
}
正则表达式：
var regex=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;//构造正则表达式进行检验。格式为：***@**.**
技术：网页只要是运用模板制作完成主框架。框架是由CSS+DIV，表格的嵌套搭建而成，其中用到了javaScript语言对一些网页效果，和输入框的判断。在需要有输入限制的（如登录，注册..）使用到了正则表达式进行判断。其中在登录、注册、留言板块需要连接到数据库，从数据库中读取数据进行相应的存储了读出。
//alert(n);
document.frm_photo.tbl_photo.src=imgs[n].src;
n=n+1;
time=setTimeout(photo_autoplay_change,1000);//一秒播放一张
}
else
{
frm_photo.autoplay.value = "自动播放";
2、制作该网站目的
通过一个学期的web程序设计，我基本掌握了HTNL，JS，和初步的SAP，以及可以通过使用表格，框架，DIV、CSS来对网页的布局，为了检验自己的学习情况，所以使用这些已掌握的知识综合运用制作一个属于自己的一个网站，是自己可以看到自己学习的一个成果。
除了检验自己的能力外，现在网页是信息在网络上展示的最直接的方式，已被几乎所有人说钟爱，对于网页，必将成为向全世界传达信息的一个最有力的工具。网页设计，对我们每个人，特别是我们计算机专业的学生，应该是我们必备的技能，所以这次说是一次课程设计，更应该说是我们的一次实践，通过课程设计，我们可以了解制作网页的步骤、方法、流程，即总结出经验，为将来我们走向社会做好准备。
if(mhmove2.offsetWidth-mhmove.scrollLeft<=0)
mhmove.scrollLeft-=mhmove1.offsetWidth;
else{
mhmove.scrollLeft++;
}
}
function Marquee4(){
if(mhmove2.offsetHeight-mhmove.scrollTop<=0)