使用ASP.NET从零开始制作设计网站之八

使用ASP .NET 从零开始制作设计网站之八

（蒋惠全　楚东明）

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ 

　　第七个任务：使用Javascript完成当前日期和广告滚动窗口并填充首页面内容

　　小问号：蒋老师，在美工老师的指导下，我已经完成了网站首页面的设计、切割、布局等操作，还建立的Dreamweaver站点，制作好了静态的Index.html页面！
　　蒋老师：好，不错，刘燕经理多次向我反映说你学习的很快！
　　小问号：这多亏了老师们的指导，我从来没有接触过美工方面的工作，要不是你们的帮忙，我做出来的首页不知道会难看成什么样呢，拿来辟邪估计效果很好。
　　蒋老师：这和你自己的努力也是分不开的，继续努力。　　
　　小问号：知道了蒋老师，这几天我一直在做美工方面的东西，好几天没有做代码了。
　　蒋老师：从今天开始，你就要做回你的“老本行”了。
　　小问号：哦也!……好的，蒋老师！

 ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ 

1、使用Javascript完成当前日期显示

　　从现在开始，我们就开始做“动态”的东西了！先做一个动态的日期显示。
　　用Dreamweaver打开index.html页面，找到放置日期的这一行，设置这一行水平对齐为“左对齐”，垂直对齐为“居中”，然后切换到代码视图，在这一行的<td></td>中间插入下面的代码：
<div id="Layer1">
<script type="text/javascript">setInterval("Layer1.innerHTML='[&nbsp;'+new Date().toLocaleString()+'&nbsp;&nbsp;星期'+'日一二三四五六'.charAt(new Date().getDay())+'&nbsp;]'",500)
</script>
</div>
　　如下图：

　　好的，完成了！
　　对，就这么简单！
 

我要看效果　　 我要下载

 

2、使用Javascript完成自动切换图片

　　如果上一个功能你形容为惊人的话，那么这个功能你可以形容为神奇！这项功能只有大型门户网站中才会拥有，而你现在就要学到。
　　在开始做之前我们有一项准备工作，这项功能需要用到图片和一个“高手”写好的js文件，需要把这两项拷贝到你网站中的images文件夹中，先点击这里下载：下载图片和js文件。下载后先解压，将里面的三张图片和lunhuan.js文件拷贝到网站的images文件夹中。
　　好，下面开始制作这项惊人的功能，我们先找到存放轮换动画的区域，将“index_blank_13.gif”这张图片删除掉，然后切换到代码视图，在<td></td>中间输入如下代码：
<form id="frmIndex">
<DIV id=flashmov align=center>
<SCRIPT>
var imgWidth=332; //图片宽度
var imgHeight=280; //图片高度
var textFromHeight=22; var textStyle="texttitle";var textLinkStyle="texttitle";
var buttonLineOn="#f60"; var buttonLineOff="#000";var textbgcolor="#f5f5f5";
var TimeOut=3000;
var imgUrl=new Array(); var imgLink=new Array();var imgtext=new Array();var imgAlt=new Array();
var adNum=0;
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden; background-color:' + textbgcolor + ';}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
imgUrl[1]='images/1.JPG';
imgtext[1]='中原市严把第二次土地调查外业质量关';
imgLink[1]='#';//本张图片的链接
imgtext[1]='中原市严把第二次土地调查外业质量关';
imgUrl[2]='images/2.jpg';
imgtext[2]='二次调查闹正月';
imgLink[2]='#';
imgtext[2]='二次调查闹正月';
imgUrl[3]='images/3.jpg';
imgtext[3]='中原市召开全市耕地占补平衡工作现场会';
imgLink[3]='#';
imgtext[3]='中原市召开全市耕地占补平衡工作现场会';
</SCRIPT>
<script src="images/lunxian.js" ></script>
</DIV>
</form>

如下图：

　　接下来保存一下，现在你运行一下页面试试看吧！
　　哈哈，是不是感觉特别惊人？对，就这么简单就做好了！
　　提示：如果你需要更换显示的图片、文本、链接只需要在“imgUrl[1]='images/1.JPG'; imgtext[1]='中原市严把第二次土地调查外业质量关'; imgLink[1]='#';”处更换就行了。
　　好了，到此轮换动画就做好了，是不是非常有成就感呢？

 

我要看效果　　 我要下载

3、填充主页面所有内容
　　OK，到现在我们的主页面所有的准备工作都已完成了，接下来我们将首页面中的内容手工加入，最终形成一个带“真实”内容的静态首页，以便我们稍后根据页面内容的布局来加入程序。这一步在这里就不详细介绍了，由大家参照我们的例子自己完成。在填充内容时有几项需要交代的，如下：

1、下载3张必要图片（箭头和细线）：

下载图片

这三张图片是做首页内容时用到的箭头和细线，下载后先解压，然后将里面的三张图片拷贝到网站根目录的images文件夹中即可。
　　2、首页中间“中原美景”不间断滚动图片的制作：将images/index_blank_26.gif图片删除掉，切换到代码视图插入如下代码即可：
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 745px">
<TABLE cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<img src="images/index_blank_26.gif" /></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo2.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
　　3、“网址导航”、“网站调查”这两部分先用dreamweaver做成静态的就行了，可以直接拷贝例子，方便稍后填充代码。
　　到此首页面内容已经填充完毕了，大家可以完全按照例子来做也可以根据实际情况自由设置内容的文字大小、样式、行高等。
 

 

我要看效果　　 我要下载

 

上一篇：使用ASP.NET从零开始制作设计网站之七 　　下一篇：使用ASP.NET从零开始制作设计网站之九