第1 篇 Web开发从零开始 - 博文视点资讯有限公司――IT

第1章学习Web开发必备知识本章适用于完全没有Web开发基础的读者，从什么是网页开始讲起，学习Web开发基础环境的搭建和配置。本书所涉及的Web开发技术都是使用C#语言完成，本章就C#语言的基本概念和基础语法，进行了详细的讲解。在开发工具方面，本书采用了微软最新推出的VisualStudio2010开发套件，在Internet信息配置方面，使用的是最新版本的IIS7，浏览器使用的是IE7。本章从网页搭建、编程规范等非常基础的知识点入手，介绍了C#语言的基本语法，C#语言开发的编码结构，以及在编程中遇到的一些基本知识点，希望读者能有一个良好的学习起点。1.1基础概念基础概念是学习一门技术的必修课，在学习Web开发前，首先要明白Web开发的一些基本概念，如什么是网页，什么是Web开发，用什么技术可以制作完成一个网页，或者说，用什么技术能完成一个Web程序。针对这些概念本节都会进行详细的说明和解答。1.1.1什么是网页网页是读者上网浏览时看到的页面，它通过浏览器呈现在电脑上。用户只需在浏览器的地址栏中输入一个网站地址，如“”，则下面出现的这个页面就是我们常说的“网页”。网站是一个具有多个网页的站点，如“”就是一个网站的地址，用户通过这个地址来访问网站，网站可以包含多个相关的网页。图1.1是百度网站的一个网页，也是百度网站的主页。图1.1百度网站的主页1.1.2网页开发技术网页分为动态网页和静态网页。如果要制作简单的静态网页，只需要学习HTML语言，第1篇Web开发从零开始由浅入深学ASP.NET——基础、进阶与必做300题2这是一门非常简单的语言，主要通过标签来完成网页的基本设置。下面的代码是一个比较完整的HMTL结构。htmlhead!--网页的标题等标头内容--/headbody!--网页的主要内容--/body/html其中，标签都是成对出现，如“html/html”。html是HTML语言开始的地方，代表这是一段HTML代码。“head/head”是一个页面的“头”，一般包括这个页面的主题和一些需要调用的页面样式等。“body/body”是页面的“身体”，主要在此处写页面的内容。下面通过一个完整的页面实例，看看一个简单的静态页面是什么样子，此页面的运行效果如图1.2所示，其中title表示当前页面的主题，显示在浏览器的顶端。htmlheadtitle第一个静态页面/title/headbody这是页面的主要内容/body/html静态网页可以算是第一代网页，它只显示基本内容，但是却无法与用户交互，因此就有了动态网页这个概念。动态网页包括静态部分和动态部分，静态部分依然由HTML语言组成，而动态部分则由JavaScript和VBScript组成。因为VBScript只能用在IE浏览器上，JavaScript却更为通用，可以在任意浏览器上使用。下面是添加了JavaScript代码的动态网页代码，若要在网页中添加JavaScript代码，则必须添加“script”标记，而且需要使用“language”属性指明脚本使用的语言。1．html2．head3．title第一个静态页面/title4．scriptlanguage=javascript!--指明脚本的语言--5．functionjiaohu()!--按钮调用的方法--6．{7．alert(您单击了提交按钮);!--单击按钮后弹出一个提示框--8．}9．/script10．/head11．body12．inputtype=textname=txt1/图1.2一个简单的静态网页第1章学习Web开发必备知识313．inputtype=buttonname=btn1value=提交onclick=jiaohu()/14．/body15．/html说明：具体的JavaScript语法可参考专业的JavaScript书籍。上述代码生成的页面如图1.3所示，用户可以输入内容，单击“提交”按钮，浏览器会根据JavaScript的设计给出交互，效果如图1.4所示。图1.3一个动态网页图1.4动态网页的交互虽然JavaScript可以完成一些交互，但它不能访问数据库，不能完成大容量数据的一些提交和获取工作，所以一般都把JavaScript和VBScript称为脚本语言。除了脚本语言可以完成动态网页的制作外，还有很多种服务器端开发语言，如ASP、JSP、ASP.NET等。这些服务器端语言，可以实现与数据库的交互，可以反馈数据给浏览器，还可以实现用户与服务器的完整交互。本书介绍的对象就是ASP.NET，确切地说，它不是一门语言，而是一门网页开发技术。ASP.NST的底层语言是C#语言，这个内容会在后面章节中详细介绍。1.1.3Web开发相关技术前面已经介绍了网页的发展，但网页和Web开发是什么关系呢？这里给大家做个简单的描述。网页属于Web开发的一种，或者说是Web开发的一部分，凡是使用浏览器来查看的程序，我们统称为Web应用程序，凡是涉及Web应用程序的开发的，本书统称为Web开发技术。Web应用程序一般分为两部分：前台开发和后台开发。前台开发：主要包括页面设计、样式布局、特效等。页面设计由基本的HTML和JavaScript制作完成，而样式布局和特效一般由CSS（样式表）完成。后台开发：可以与数据库交互的各种开发语言，如ASP.NET、Java、PHP等。一般由一些类库和包组成。使用ASP.NET的用户，微软给其提供了一个.NET框架，里面包含了Web开发需要的所有类库，开发人员可以轻松调用，完成非常复杂的功能制作。1.2搭建开发环境在学习一门开发语言前，首先需要搭建好这门开发语言的开发环境。本书所介绍的ASP.NET开发技术，需要安装VisualStudio2010开发工具，因为此工具会自动安装类库需要的.NET4.0框架。本节主要介绍VisualStudio2010的安装过程。由浅入深学ASP.NET——基础、进阶与必做300题41.2.1安装VisualStudio2010VisualStudio.NET是微软公司推出的集成化互联网开发平台，利用它可以设计、开发，以及调试部署Web应用程序。下面简要介绍VisualStudio2010的安装过程。插入VisualStudio2010（以下简称VS2010）的安装光盘，屏幕上会弹出VisualStudio的安装起始界面，如图1.5所示。图1.5安装起始界面提示：如果已经安装VS2010，则可以选择安装第二项，MSDN的帮助文档。如果不安装此文档，也可以到MSDN的网站，在线查看相关文档。单击第一项“安装MicrosoftVisualStudio2010”，进入“VisualStudio2010旗舰版安装”对话框，如图1.6所示。第1章学习Web开发必备知识5图1.6VisualStudio2010旗舰版安装初始界面单击“下一步”按钮，进入许可协议界面，如图1.7所示。图1.7VS2010的许可协议选择接受许可条款单选按钮，然后在产品密钥中输入产品ID号和名称。单击“下一步”按钮，弹出“MicrosoftVisualStudio2010旗舰版安装程序—选项页”对话框，选择所安装的功能和产品安装路径，如图1.8所示。图1.8VS2010的安装地址单击“下一步”按钮，在新的界面中选择要安装的功能，如图1.9所示。这里为了减少VS2010占用的系统空间，我们只选择自己需要的工具。单击“安装”按钮，开始安装VS2010，如图1.10所示。中间会重新启动一次电脑，安装过程中没有其他问题。安装完成后，单击“完成”按钮，结束安装过程。由浅入深学ASP.NET——基础、进阶与必做300题6图1.9VS2010的功能选择图1.10VS2010的安装过程1.2.2VisualStudio2010IDE简介选择“开始”|“所有程序”|“MicrosoftVisualStudio2010”|“MicrosoftVisualStudio2010”可执行文件命令，打开VS2010的开始界面，如图1.11所示。图中标注出了需要注意的各个区域。其中，开始学习文档，提供了一些入门者案例和文档，读者除了看书之外，也可以经常阅读这些文档，有助于了解一些更深入的知识点。在VS开发新闻区域，如果连接了网络，则会显示一些最新的VS开发文档和注意事项。选择“文件”|“新建”|“项目”命令，打开VS2010提供的模板窗口，如图1.12所示。其中一定要注意“选择框架版本”下拉列表框，这里默认是ASP.NETFramework4框架，但其支持ASP.NET3.5、ASP.NET3.0和ASP.NET2.0框架版本。如果要开发旧版本的程序，可通过此列表选择。第1章学习Web开发必备知识7图1.11VS2010的开始界面图1.12新建项目模板1.2.3实现第一个ASP.NET程序选择“开始”|“所有程序”|“MicrosoftVisualStudio2010”|“MicrosoftVisualStudio2010”命令，启动VS2010，如图1.13所示。VS2010提供了两种新建项目的方式：一种是在VisualStudio.NET的起始页“最近使用的项目”选项卡中单击“新建”|“项目”命令，弹出如图1.14所示的“新建网站”对话框；另一种是单击VisualStudio.NET的“文件”|“新建”|“网站”命令。由浅入深学ASP.NET——基础、进阶与必做300题8图1.13VisualStudio.NET起始页面图1.14“新建网站”对话框VisualStudio.NET已经预定义了不同类型的网站模板，用户可以根据不同的开发任务选择其中一种。本书主要讲的是运用VisualC#开发ASP.NET网站。因此首先应在“新建网站”对话框中，将“语言”选项设定为VisualC#，将模板选项设定为“ASP.NET网站”，选择项目要保存的位置。然后，单击“确定”按钮，就新建了一个VisualC#项目中的ASP.NET网站应用程序，如图1.15所示。此时应用程序会生成两个文件，一个扩展名为“aspx”的文件和一个名字相同但扩展名为“cs”的文件。其中，“aspx”文件是ASP.NET程序的界面，“cs”是C#源代码文件的扩展名，是实现ASP.NET程序的功能。最后，在新的应用程序建立后，会生成一个带默认内容的窗体，也就是扩展名为“aspx”的文件，名为“Default.aspx”。“Default.aspx”文件的代码如下：第1章学习Web开发必备知识9%@PageTitle=主页Language=C#MasterPageFile=~/Site.masterAutoEventWireup=trueCodeFile=Default.aspx.csInherits=_Default%asp:ContentID=HeaderContentrunat=serverContentPlaceHolderID=HeadContent/asp:Contentasp:ContentID=BodyContentrunat=serverContentPlaceHolderID=MainContenth2欢迎使用ASP.NET!/h2p若要了解关于ASP.NET的详细信息，请访问ahref==ASP.NET网站。/pp您还可以找到ahref==152368title=MSDNASP.NET文档MSDN上有关ASP.NET的文档/a。/p/asp:Content运行这个例子，效果如图1.16所示。图1.1