实验1在VWD中创建网页课件.docx
《实验1在VWD中创建网页课件.docx》由会员分享，可在线阅读，更多相关《实验1在VWD中创建网页课件.docx（14页珍藏版）》请在冰点文库上搜索。
实验1在VWD中创建网页课件
实验一在VisualWebDeveloper中创建基本网页（2学时）
[实验目的]
基本要求：
熟悉VWD开发环境，了解ASP.NET网页基本构成，掌握创建新页、添加控件以及编写代码的基本技术。
重点：
熟悉ASP.NET页的创建方法。
难点：
理解ASP.NET代码分离的编程原理。
[实验内容]
一、理论复习
1.静态网页与动态网页的区别是什么？
2.ASP.NET引擎的目的是什么？
3.请观察ASP.NET网页，说明@Page指令的作用是什么？
它是否会在浏览器中显示？
在@Page中提供了哪些网页信息？
4.请用500字左右比较一下目前最流行的动态网页技术。
二、综合演练
在VisualWebDeveloper中创建基本网页。
[综合演练实验步骤]——在VWD中创建基本网页
（一）创建网站和网页
在本练习中，将创建一个网站并为其添加新页。
还将添加HTML文本并在Web浏览器中运行该页。
本练习创建一个不需要使用MicrosoftInternet信息服务（IIS）的文件系统网站，将在本地文件系统中创建和运行页。
创建文件系统网站
1.打开VisualWebDeveloper。
2.在“文件”菜单上指向“新建”，然后单击“网站”。
出现“新建网站”对话框，如下面的屏幕快照所示。
“新建网站”对话框
3.在“VisualStudio已安装的模板”之下单击“ASP.NET网站”。
创建网站时需要指定一个模板。
每个模板创建包含不同文件和文件夹的Web应用程序。
在本练习中，您将基于“ASP.NET网站”模板创建网站，该模板创建一些文件夹和几个默认文件。
4.在“位置”框中选择“文件系统”框，然后输入要保存网站网页的文件夹的名称。
例如，键入文件夹名“C:
\BasicWebSite”。
5.在“语言”列表中单击“VisualC#”。
您选择的编程语言将是网站的默认语言。
但是，可以通过使用不同的编程语言创建页和组件而在同一个Web应用程序中使用多种语言。
6.单击“确定”。
VisualWebDeveloper创建该文件夹和一个名为Default.aspx的新页。
新页创建后，VisualWebDeveloper默认以“源”视图显示该页，在该视图下您可以查看页面的HTML元素。
下面的屏幕快照显示了一个默认网页的“源”视图。
默认页的“源”视图
补充：
VisualWebDeveloper教程
在继续使用页之前，先熟悉一下VisualWebDeveloper开发环境是很有用的。
下面的插图显示了在VisualWebDeveloper中可用的窗口和工具。
VisualWebDeveloper环境的关系图
熟悉VisualWebDeveloper中的Web设计器
∙检查上面的插图并将插图中的文本与下面的列表相互对应起来，该列表描述了最常用的窗口和工具。
（并不是您看到的所有窗口和工具都列在这里，列出的只是上图中标记的那些窗口和工具。
）
∙工具栏。
提供用于格式化文本、查找文本等的命令。
一些工具栏只有在“设计”视图中工作时才可用。
∙解决方案资源管理器。
显示网站中的文件和文件夹。
∙文档窗口。
显示您正在选项卡式窗口中处理的文档。
单击选项卡可以实现在文档间切换。
∙属性窗口。
允许您更改页、HTML元素、控件及其他对象的设置。
∙视图选项卡。
向您展示同一文档的不同视图。
“设计”视图是近似WYSIWYG的编辑图面。
“源”视图是页的HTML编辑器。
您将在本练习的后面部分中使用这些视图。
如果希望以“设计”视图打开网页，可在“工具”菜单上单击“选项”，选择“HTML设计器”节点，并更改“起始页位置”选项。
∙工具箱。
提供可以拖到页上的控件和HTML元素。
工具箱元素按常用功能分组。
∙服务器资源管理器。
显示数据库连接。
如果服务器资源管理器在VisualWebDeveloper中不可见，请在“视图”菜单上单击“其他窗口”，然后单击“服务器资源管理器”。
创建一个新的Web窗体页
当创建新的网站时，VisualWebDeveloper将添加一个名为Default.aspx的ASP.NET页（Web窗体页）。
可以使用Default.aspx页作为网站的主页。
但是在本练习中，将创建并使用一个新页。
将页添加到网站
1.关闭Default.aspx页。
为此，右击包含文件名的选项卡并选择“关闭”。
2.在解决方案资源管理器中，右击网站（例如，“C:
\BasicWebSite”），然后单击“添加新项”。
3.在“VisualStudio已安装的模板”之下单击“Web窗体”。
4.在“名称”框中键入“FirstWebPage”。
5.在“语言”列表中，选择您希望使用的编程语言（“C#”）。
创建网站时您已指定了一种默认语言。
但是，每次为网站创建新页或组件时，可以更改默认语言。
可以在同一网站中使用不同的编程语言。
6.清除“将代码放在单独的文件中”复选框。
下面的屏幕快照显示了“添加新项”对话框。
“添加新项”对话框
注：
在本练习中，将创建一个代码和HTML在同一页的单文件页。
ASP.NET页的代码可以在页或单独的类文件中找到。
7.单击“添加”。
VisualWebDeveloper创建新页并以“源”视图打开。
将HTML添加到页
在本练习的这一部分中，将向页中添加一些静态文本。
（一）向页中添加文本
1.在文档窗口的底部，单击“设计”选项卡以切换到“设计”视图。
“设计”视图以类似WYSIWYG的方式显示您正在使用的页。
此时，页上没有任何文本或控件，因此页是空白的。
2.在页上键入“欢迎使用VisualWebDeveloper”。
下面的屏幕快照显示了您在“设计”视图中键入的文本。
在“设计”视图中看到的欢迎文本
3.切换到“源”视图。
可以看到通过在“设计”视图中键入而创建的HTML，如下面的屏幕快照所示。
在“源”视图中看到的欢迎文本
运行该页
1.按Ctrl+F5运行该页。
VisualWebDeveloper启动ASP.NETDevelopmentServer。
工具栏右侧出现一个图标，指示VisualWebDeveloperWeb服务器正在运行。
该页显示在浏览器中。
虽然创建的页的扩展名为.aspx，但是它当前像任何HTML页一样运行。
2.关闭浏览器。
（二）添加控件和对控件编程
在本练习的这一部分中，将向页中添加一个Button、一个TextBox和一个Label控件，并编写处理Button控件的Click事件的代码。
现在将向页中添加服务器控件。
服务器控件（包括按钮、标签、文本框和其他常见控件）为ASP.NET网页提供了典型的窗体处理功能。
但是，可以使用运行在服务器而不是客户端上的代码对控件编程。
向页中添加控件
1.单击“设计”选项卡切换到“设计”视图。
2.按几次Shift+Enter以留出一些空间。
3.从“工具箱”的“标准”组中将下列三个控件拖到页上：
TextBox控件、Button控件和Label控件。
4.将插入点放在TextBox控件之上，然后键入“输入您的名字：
”。
此静态HTML文本是TextBox控件的标题。
可以在同一页上混合放置静态HTML和服务器控件。
下面的屏幕快照显示了这三个控件在“设计”视图中如何放置。
“设计”视图中的控件
设置控件属性
VisualWebDeveloper提供了各种方式来设置页上控件的属性。
在本练习的这一部分中，您将在“设计”视图和“源”视图中设置属性。
1.选择Button控件，然后在“属性”窗口中，将“文本”设置为“显示名称”，如下面的屏幕快照所示。
更改的按钮控件文本
2.切换到“源”视图。
“源”视图显示该页的HTML，包括VisualWebDeveloper为服务器控件创建的元素。
控件使用类似HTML的语法声明，不同的是标记使用前缀asp:
并包括属性runat="server"。
控件属性（Property）声明为属性（Attribute）。
例如，当您在第1步中设置Button控件的Text属性（Property）时，实际是在设置该控件标记中的Text属性（Attribute）。
注意，所有控件都在一个