第2章创建第一个网站

Web程序设计——ASP.NET实用网站开发1第2章创建第一个ASP.NET3.5网站Web程序设计——ASP.NET实用网站开发2本章要点：了解ASP.NET3.5网站组成熟悉.htm文件及XHTML常用元素理解Web窗体页的两种模型：单文件模型和代码隐藏页模型熟悉CSS样式定义、存放位置了解JavaScript常识，熟悉代码存放位置了解XML常识，熟悉XML文件结构熟悉web.config配置文件结构和配置方法Web程序设计——ASP.NET实用网站开发3目录2.1.htm文件和XHTML2.1.1.htm文件结构2.1.2常用XHTML元素2.2.aspx文件2.2.1单文件页模型2.2.2代码隐藏页模型2.3.CSS文件和CSS常识2.3.1定义CSS样式2.3.2CSS样式位置Web程序设计——ASP.NET实用网站开发4目录2.4.js文件和JavaScript常识2.4.1JavaScript代码位置2.4.2综合实例2.5.XML文件和XML常识2.6web.config2.6.1web.config基本结构2.6.2配置web.config2.7小结Web程序设计——ASP.NET实用网站开发52.1.htm文件和XHTML.htm文件是一种静态网页文件，它不包含任何服务器控件，而是由HTML元素组成。客户端浏览器访问.htm文件时，IIS不经过任何处理就直接送往浏览器，由浏览器解释执行。在VisualStudio2008中建立.htm文件，默认使用XHTML1.0Transitional文件类型。XHTML（eXtensibleHyperTextMarkupLanguage）可扩展超文本标记语言是被国际标准化组织机构W3C认定，用于替代HTML的标记语言。Web程序设计——ASP.NET实用网站开发62.1.1.htm文件结构!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=无标题页/title/headbody……/body/htmlWeb程序设计——ASP.NET实用网站开发72.1.2常用XHTML元素!DOCTYPE…表示文档类型声明。html…/html表示这是一个XHTML文档，其它所有的XHTML元素都位于这两个元素之间。head…/head表示文档头部信息。title…/title表示浏览器标题栏中信息，应包含于head…/head中。style…/style表示CSS样式信息，应包含于head…/head中。Web程序设计——ASP.NET实用网站开发82.1.2常用XHTML元素（续）body…/body表示文档主体部分。p…/p表示一个段落。br/表示换行。hr/表示水平线。Web程序设计——ASP.NET实用网站开发92.1.2常用XHTML元素（续）tablecaption表格标题信息/captiontrtd…/tdtd…/td/trtrtd…/tdtd…/td/trtable表示一个表格，其中tr表示一行，td表示一个单元格。Web程序设计——ASP.NET实用网站开发102.1.2常用XHTML元素（续）ahref=intro.htm我的简介/a表示在浏览器上显示超链接“我的简介”，点击后链接到intro.htm。ahref=mailto:[e-mail]我的邮箱/a表示浏览器上显示超链接“我的邮箱”，单击链接后给[e-mail]发邮件。Web程序设计——ASP.NET实用网站开发11常用的实体符号表字符表示方法字符表示方法字符表示方法空格 小于号<大于号>''"''&&©©®®¥¥Web程序设计——ASP.NET实用网站开发12实例2-1认识常用XHTML元素学习XHTML元素的方法不需死记硬背，可在Internet上找一些.htm或.html为扩展名的文件，然后在浏览器中浏览该文件效果。再单击浏览器“查看”→“源文件”可看到.htm文件的源代码，将浏览看到的效果与源代码中的XHTML元素对比，从而了解XHTML元素的作用。源程序：2-1.htmWeb程序设计——ASP.NET实用网站开发13程序说明!DOCTYPE……表示XHTML采用的文件类型，可以有Strict、Transitional和Frameset三种类型，其中最常用的是Transitional。htmlxmlns=中xmlns属性值表示名字空间，在名字空间中包含了所有XHTML元素的定义。metahttp-equiv=Content-Typecontent=text/html;charset=UTF-8/表示定义了语言编码的字符集为UTF-8。Web程序设计——ASP.NET实用网站开发14程序说明metacontent=allname=robots/表示允许搜索机器人搜索站内所有链接。metaname=authorcontent=kxsg(at)21cn.com,阿毛/表示站点作者信息。metaname=Copyrightcontent=自由版权,任意转载/表示站点版权信息。metaname=descriptioncontent=网页示范/表示站点的简要介绍。Web程序设计——ASP.NET实用网站开发15程序说明metacontent=css布局,xhtmlname=keywords/表示站点的关键词。style………/style表示样式规则。Web程序设计——ASP.NET实用网站开发162.2.aspx文件.aspx文件（Web窗体）在ASP.NET3.5网站中占据主体部分。作为一个完全面向对象的系统，Web窗体页直接或间接地继承自System.Web.UI.Page类。每个Web窗体的页面代码包括两部分：一部分是处于body元素之间的显示界面代码，包括必须的XHTML元素和服务器控件的界面定义信息；另一部分是包含事件处理等的C#代码。C#代码存储时有两种模型：单文件页模型和代码隐藏页模型。Web程序设计——ASP.NET实用网站开发172.2.1单文件页模型显示界面代码和逻辑处理代码（事件、函数处理等）都放在同一个.aspx文件中。逻辑处理代码包含于script元素中。script元素位于head元素之间，且包含runat=server属性。Web程序设计——ASP.NET实用网站开发18实例2-2单文件页模型本实例包含TextBox、Label、Button控件各一个，当在TextBox1中输入内容后再单击Button1，则在Label1中显示“不管您输什么，我都喜欢ASP.NET!”。源程序：2-2.aspxWeb程序设计——ASP.NET实用网站开发19程序说明单文件页模型在读代码时可先看body元素中内容，主要关注有哪些控件对象、对象的ID属性、对象的事件名。再由对象的事件名到script元素中找对应的执行函数。OnClick=Button1_Click表示Click事件，单击ID为Button1的按钮后执行位于script元素中的Button1_Click方法。Web程序设计——ASP.NET实用网站开发202.2.2代码隐藏页模型适用于多个开发人员共同创建网站的情形。显示界面的代码包含于.aspx文件，而逻辑处理代码包含于对应的.aspx.cs文件。与单文件页模型不同，.aspx文件不再包含script元素，但在@page指令中需包含引用的外部文件。Web程序设计——ASP.NET实用网站开发21实例2-3代码隐藏页模型源程序：2-3.aspxWeb程序设计——ASP.NET实用网站开发22程序说明代码隐藏页模型在读代码时可先看“.aspx文件”中内容，主要关注有哪些控件对象、对象的ID属性、对象的事件名。再由对象的事件名到相应的“.aspx.cs文件”中找对应的执行方法。在.aspx文件中增加了@Page指令，其中AutoEventWireup=true指定页面事件自动触发；CodeFile=2-3.aspx.cs指定后台编码文件，使得显示界面和后台编码文件相互关联；Inherits=chap2_2_3指定继承的类名，该类的定义存储于相应的后台编码文件中。Web程序设计——ASP.NET实用网站开发232.3.CSS文件和CSS常识XHTML能限定浏览器中网页元素的显示格式，但可控性不强，如统一网站风格需要逐个网页去修改。CSS（CascadingStyleSheet）级联样式表是应用于网页中元素的样式规则，现已为各类浏览器所接受。在XHTML基础上，CSS提供了精确定位和重新定义XHTML元素属性的功能。一个CSS样式文件可以作用到多个XHTML文件，这样，当要同时改变多个XHTML网页风格时，只要修改CSS样式文件即可。Web程序设计——ASP.NET实用网站开发242.3.1定义CSS样式每个CSS样式有两个主要部分：选择器（如h1）和声明（如color:blue）。声明由一个属性（color）及其值（blue）组成。根据定义的不同用途，CSS样式包括基于元素的样式、基于类的样式和基于ID的样式。注意：当这三种样式运用于同个XHTML元素时，基于ID的样式优先级最高，其次是基于类的样式，最后是基于元素的样式。Web程序设计——ASP.NET实用网站开发25基于元素的样式基于元素的样式将重新定义指定XHTML元素的属性，其选择器即为XHTML元素名，如对所有段落（p标记中的内容）创建左右均为25象素的边距，其样式规则为：p{margin-left:25px;margin-right:25px;}Web程序设计——ASP.NET实用网站开发26基于类的样式同一个基于类的样式可以应用于不同的XHTML元素或某个XHTML元素的子集（如应用于部分段落而不是全部段落）。定义时，要在选择器名前加“.”，如对类名intro定义为红色的样式规则为：.intro{color:#ff0000;}在页面中，用class=类名的方法调用，如：pclass=introWeb程序设计——ASP.NET实用网站开发27基于ID的样式基于ID的样式应用于由ID值确定的XHTML元素的属性，且常用于单个XHTML元素的属性设置。定义时，需在选择器（ID名）前加“#”。在网页CSS布局中主要靠层“div”实现，而“div”的样式常采用基于ID的样式。如要对定义的层divid=menubar…/div设置背景色为绿色的样式规则为：#menubar{background-color:#008000;}Web程序设计——ASP.NET实用网站开发282.3.2CSS样式位置CSS样式规则可以放在不同的位置，包括：与XHTML元素的内联、位于页面的style元素中和外部样式表（.css文件）中。注意：不同位置CSS样式规则的优先级是内联样式最高，其次是页面中的CSS样式，最后是外部样式表。Web程序设计——ASP.NET实用网站开发29创建内联样式当要为单个元素定义属性而不想重用该样式时，可以使用内联样式。内联样式规则在XHTML元素的style属性中定义，如：pstyle=font-weight:bold;font-style:italic。Web程序设计——ASP.NET实用网站开发30创建特定页的CSS样式