资源描述

两栏设计ASp.docx

《两栏设计ASp.docx》由会员分享，可在线阅读，更多相关《两栏设计ASp.docx（14页珍藏版）》请在冰豆网上搜索。

两栏设计ASp.docx

两栏设计ASp

常熟理工学院

计算机科学与工程学院

实验报告

2012-2013学年第1学期

课程名称ASP.NET应用程序开发

专业

班级

学号

姓名

实验地点

指导老师

实验名称

实验三

实验目的

1.学会确定网页的逻辑结构，并用div实现之。

2.学会使用浮动布局实现两栏设计的基本方法。

3.学会编写JavaScript程序。

4.掌握访问网页中特定元素的方法。

5.掌握给指定HTML元素动态设定样式的方法。

6.能应用盒子模型正确地布局网页。

实验设备

安装好VisualWebDeveloper的计算机。

实验日期

4.9

一、实验预习

1.确定网页的逻辑结构，并用div实现。

2.掌握访问网页中特定元素的方法。

3.使用浮动布局实现两栏设计。

4.掌握为HTML控件编写事件响应函数的方法。

二、实验内容（原理、方法、框图）

1.两栏页面布局设计

2.在网页上实现猜数字游戏

3.设定动态样式：

三、实验过程（步骤、实现代码）

1.实现页面两栏布局设计

步骤：

1.在VisualWebDeveloper中创建一个网站。

2.向网站中添加一个CSS样式表文件（取名TwoColumn.css）；

3.向网站中添加一个HTML网页，在其元素内添加以下代码以将样式表与网页关联起来。

4.在网页的元素内使用div定义好网页的逻辑块结构。

5.在TwoColumn.css中，依次添加以下样式类，每添加一个，就在浏览器中查看效果。

6.在左右面板中添加新的页面基本构造块，对照图3-5向页面基本构造块中添加HTML元素，实现示例网页的显示效果。

7.（选作）模仿示例实现网页的三栏布局。

实现代码：

页眉区

左面板一

猜数字

我暗地里选中了一个到间的数字，你能猜中吗？

注意：

最多猜次哟！

我猜这个数字是：

"onclick="Guess（）;"/>

„.（代码略）注意两个设定了id的HTML元素“”和“

”，前者用于取出用户输入的数字，后者则用于显示提示信息。

3.请在网页的元素内编写JavaScript函数Guess（），实现游戏功能。

4.设置“对不对”按钮的单击事件响应函数为Guess（）：

"onclick="Guess（）;"/>

实现代码：

GuessaNumber

varnum=Math.floor（Math.random（）*100）+1;

vartries=0;

functionGuess（）{

vartxt=document.getElementById（"guess_value"）;

vara=txt.value;

if（a==num）

{

hint.innerHTML="恭喜你，猜对了!

location.reload（）;

}

elseif（a!

=num）

{

tries++;

if（tries<10）

{

if（a

{

hint.innerHTML="提示：

再猜大一点！

}

elseif（a>num）

{

hint.innerHTML="提示：

再猜小一点！

}

elseif（tries==10）

{

hint.innerHTML="猜的次数过多，您输了！

location.reload（）;

}

猜数字

我暗地里选中了1到100间的数字，你能猜中吗？

注意：

最多猜10次哟！

我猜这个数字是：

"onclick="Guess（）;"/>

三、实验结果（遇到的问题及解决方法）

遇到的问题：

1.在设计猜数字游戏时，提示信息显示不出来。

2.设计div块时，使用getdocumentElement（）函数时，分不清括号中该填什么。

3.设计三栏时，中间的一栏可向左或向右浮动，效果一样。

解决方法：

1.不断修改代码，不断的调试，查看结果。

2.查看书本，了解一些函数的具体功能。

四、心得体会（实验收获）

实验过程中，没遇到多少大的问题，但在设计猜数字游戏时，却耽误了不少时间，分析了下，具体问题还是在于对函数的功能不了解，对函数中改填什么参数比较模糊，分不清他们之间的关系；在一个就是，没有先仔细想清楚就开始盲目的做，浪费了好多时间。

通过这次实验，我明白，在做任何事之前都不能心急，急于求成，要先把问题想清楚了再动手，否则只会浪费时间。

实验预习20%

实验过程20%

实验结果30%

实验报告30%

成绩

展开阅读全文