《《ASPWeb程序设计》教学课件—02ASP与Script语言》由会员分享，可在线阅读，更多相关《《ASPWeb程序设计》教学课件—02ASP与Script语言（52页珍藏版）》请在金锄头文库上搜索。
1、第第2章章 ASP.NET 4.5与与SCRIPT语言语言1本章要点：1.掌握基本的HTML元素；2.掌握CSS样式定义，存放的位置；3.了解Javascript常识，熟悉代码存放的位置；4.熟悉Web.config配置文件的结构。22.1 WEB标准与脚本发展概述标准与脚本发展概述有99%的网站是采用HTML制作的，而HTML并不符合XML格式。因此这些网页信息都很难适应未来新设备和数据共享的要求。针对这一问题W3C已经提出了解决办法，他们在HTML基础上，按照XML格式制定了新的规范XHTML1.0，只要通过简单的改变，就能将HTML转为XHTML，从而实现向XML的过渡。同时，为了使页面
2、信息更加容易被搜索和重用、XHTML的代码需要结构更加更清晰、标签更加有语义，W3C推荐使用CSS来控制表现，以实现内容与表现的相分离。 1结构标准语言（1）HTMLHTML是HyperTextMarkupLanguage(超文本标识语言)的简写。广泛用于现在的网页，HTML目的是为文档增加结构信息，例如表示标题，表示段落；浏览器可以解析这些文档的结构，并用相应的表现形式表现出来。（2）XMLXML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0。和HTML一样，XML同样来源于SGML，但XML是
3、一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。（3）XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage（可扩展标识语言）的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。2.表现标准语言CSS是Ca
4、scadingStyleSheets（层叠样式表）的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。表现标准（CSS）的作用主要有以下几方面:（1）以前必须通过图片转换才能实现的功能，可以用CSS轻松实现，从而使页面的下载速度更快。（2）采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果进行更加精确的控制。利用CSS，只需对相应的代码做一些简单修改，就可以改变同一页面多个部分的格式，或者同时改
5、变多个网页的外观。（3）Web开发人员可以通过CSS统一控制页面的布局。2.2 HTML和和XHTMLHTML（HyperTextMarkupLanguage超文本置标语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。
6、在ASP.NET4.5网站中，.html文件是一种静态页面文件，它不包含任何服务器控件，当用户访问该文件时，IIS不经过任何处理直接送往浏览器，由浏览器解释执行。HTML与XHTML之间的差别，粗略可以分为两大类比较：一个是功能上的差别，另外是书写习惯的差别。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。因为XHTML的语法较为严谨例如：（1）所有标签都必须小写；在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。看一个例子。（2）标签必须成双成对；像是.、.、.标签等，当出现一个标签时，必须要有对应的结束标签，
7、缺一不可，就像在任何程序语言中的括号一样。（3）标签顺序必须正确；标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。2.2.1 HTML文件结构文件结构1.在VSEW2012中建立的.html文件基本结构如下： 2. 3. 4. 5. 6. 7. 8. 9. 10. 2.1.2常用XHTML元素表示文档类型声明。表示这是一个XHTML文档，其它所有的XHTML元素都位于这两个元素之间。表示文档头部信息。表示浏览器标题栏中信息，应包含于中。表示CSS样式信息，应包含于中。102.1.2常用XHTML元素（续）表示文档主体部分。表示一个段落。表示换行。表示水平线
8、。 112.1.2常用XHTML元素（续）表格标题信息表示一个表格，其中表示一行，表示一个单元格。122.1.2常用XHTML元素（续）我的简介表示在浏览器上显示超链接“我的简介”，点击后链接到intro.htm。我的邮箱表示浏览器上显示超链接“我的邮箱”，单击链接后给发邮件。 13常用的实体符号表 字符字符表示方表示方法法字符字符表示方表示方法法字符字符表示方表示方法法空格空格 小于号小于号>"'&©®¥14实例2-1认识常用XHTML元素学习XHTML元素的方法不需死记硬背，可在Internet上找一些.htm或.htm
9、l为扩展名的文件，然后在浏览器中浏览该文件效果。再单击浏览器“查看”“源文件”可看到.htm文件的源代码，将浏览看到的效果与源代码中的XHTML元素对比，从而了解XHTML元素的作用。 源程序：2-1.htm15程序说明 表示XHTML采用的文件类型，可以有Strict、Transitional和Frameset三种类型，其中最常用的是Transitional。中xmlns属性值表示名字空间，在名字空间中包含了所有XHTML元素的定义。表示定义了语言编码的字符集为UTF-8。16程序说明 表示站点的关键词。表示样式规则。 172.2.ASPX文件.aspx文件（Web窗体）在ASP.NET3.
10、5网站中占据主体部分。作为一个完全面向对象的系统，Web窗体页直接或间接地继承自System.Web.UI.Page类。 每个Web窗体的页面代码包括两部分：一部分是处于元素之间的显示界面代码，包括必须的XHTML元素和服务器控件的界面定义信息；另一部分是包含事件处理等的C#代码。C#代码存储时有两种模型：单文件页模型和代码隐藏页模型。 182.2.1单文件页模型显示界面代码和逻辑处理代码（事件、函数处理等）都放在同一个.aspx文件中。逻辑处理代码包含于元素中。元素位于元素之间，且包含runat=server属性。19程序说明 单文件页模型在读代码时可先看元素中内容，主要关注有哪些控件对象、
11、对象的ID属性、对象的事件名。再由对象的事件名到元素中找对应的执行函数。OnClick=Button1_Click表示Click事件，单击ID为Button1的按钮后执行位于元素中的Button1_Click方法。202.2.2代码隐藏页模型适用于多个开发人员共同创建网站的情形。显示界面的代码包含于.aspx文件，而逻辑处理代码包含于对应的.aspx.cs文件。与单文件页模型不同，.aspx文件不再包含元素，但在page指令中需包含引用的外部文件。21实例2-3代码隐藏页模型源程序：2-3.aspx22程序说明 代码隐藏页模型在读代码时可先看“.aspx文件”中内容，主要关注有哪些控件对象、对
12、象的ID属性、对象的事件名。再由对象的事件名到相应的“.aspx.cs文件”中找对应的执行方法。在.aspx文件中增加了Page指令，其中AutoEventWireup=true指定页面事件自动触发；CodeFile=2-3.aspx.cs指定后台编码文件，使得显示界面和后台编码文件相互关联；Inherits=chap2_2_3指定继承的类名，该类的定义存储于相应的后台编码文件中。232.4 CSSXHTML能限定浏览器中网页元素的显示格式，但可控性不强，如统一网站风格需要逐个网页去修改。CSS（CascadingStyleSheet）级联样式表是应用于网页中元素的样式规则，现已为各类浏览器所
13、接受。在XHTML基础上，CSS提供了精确定位和重新定义XHTML元素属性的功能。一个CSS样式文件可以作用到多个XHTML文件，这样，当要同时改变多个XHTML网页风格时，只要修改CSS样式文件即可。 242.4.1 定义定义CSS样式样式每个CSS样式有两个主要部分：选择器（如h1）和声明（如color:blue）。声明由一个属性（color）及其值（blue）组成。根据定义的不同用途，CSS样式包括基于元素的样式、基于类的样式和基于ID的样式。注意：当这三种样式运用于同个XHTML元素时，基于ID的样式优先级最高，其次是基于类的样式，最后是基于元素的样式。25基于元素的样式 基于元素的样
14、式将重新定义指定XHTML元素的属性，其选择器即为XHTML元素名，如对所有段落（p标记中的内容）创建左右均为25象素的边距，其样式规则为：pmargin-left:25px;margin-right:25px;26基于类的样式 同一个基于类的样式可以应用于不同的XHTML元素或某个XHTML元素的子集（如应用于部分段落而不是全部段落）。定义时，要在选择器名前加“.”，如对类名intro定义为红色的样式规则为：.introcolor:#ff0000;在页面中，用class=类名的方法调用，如：27基于ID的样式 基于ID的样式应用于由ID值确定的XHTML元素的属性，且常用于单个XHTML元素
15、的属性设置。定义时，需在选择器（ID名）前加“#”。在网页CSS布局中主要靠层“div”实现，而“div”的样式常采用基于ID的样式。如要对定义的层设置背景色为绿色的样式规则为：#menubarbackground-color:#008000;282.4.2 CSS样式位置样式位置CSS样式规则可以放在不同的位置，包括：与XHTML元素的内联、位于页面的元素中和外部样式表（.css文件）中。注意：不同位置CSS样式规则的优先级是内联样式最高，其次是页面中的CSS样式，最后是外部样式表。29创建内联样式 当要为单个元素定义属性而不想重用该样式时，可以使用内联样式。内联样式规则在XHTML元素的s
16、tyle属性中定义，如：。30创建特定页的CSS样式 当要为特定页中的元素设置样式规则时，可以在元素中的元素内定义。定义时可采用基于元素的样式、基于类的样式或基于ID的样式。31hrcolor:sienna;pmargin-left:20px;bodybackground-image:url(images/back40.gif);323.外部样式外部样式当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：实例实例2-3 页面设计页面设计运用css设计出网页的版式，给网页铺上背景图，控制网页上的字体等。CSS综合运用bodybackground:url(images/bg.jpg)repeat-xtop#cfe1ed;margin:0px;padding:0px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#454241;width:1000px;.divcontwidth:850px;he
