ASP.NET程序设计教程（C#版）第4版 课件 第1-3章 Web基础知识、Web前端设计基础、主题与母版页

第1章ASP.NET概述本章讲述的主要内容1.1Web基础知识1.2VisualStudio集成开发环境1.3实训设计一个简单的课表查询网站

1.1Web基础知识1.1.1

B/S架构与ASP.NET1.1Web基础知识1.1.2Web标准概述1999年W3C制定了HTML4.01标准，随后公布了CSS2.1和JavaScript标准，这些标准统称为Web1.0标准。

随着W3C对HTML5、CSS3、JavaScript、Canvas、SVG以及移动设备开发规范等一系列新标准的发布，标识着以HTML5+CSS3为核心的Web2.0时代的到来。1.1Web基础知识1.1.3静态和动态网页1.静态网页静态网页具有以下一些特征：①网页的内容（文本、图像、声音、超链接等）和外观对任何一个访问者无论以何种方式访问都是保持不变的。②网页中不包含除了超链接跳转以外的任何与客户端进行交互的功能。2.动态网页客户端动态网页：包含JavaScript、VBScript、ActiveX控件、jQuery、Ajax等，在客户端与用户实现交互。(2)服务器端动态网页：服务器端动态网页与客户端动态网页的主要不同在于所有的数据分析、判断和其它处理工作都在服务器端进行，服务器只将处理好的结果以HTML代码流的形式发送给客户端。1.2VisualStudio集成开发环境VisualStudio（以下简称为VS）是Microsoft推出的用于Windows应用程序和Web应用程序开发的重要平台，目前其最高版本为VS2015，内置.NETFramework版本为4.5.2，同时提供对.NETFramework2.0、3.0的支持。VS开发平台将程序设计中需要的各个环节（界面设计、程序设计、运行和调试程序等）集成在同一个窗口中，极大地方便了开发人员的设计工作。通常将这种集多种功能于一身的开发平台称为集成开发环境（IDE）。1.2VisualStudio集成开发环境1.2.1VS项目管理1.VS中的常用模板VS中关于ASP.NET提供了“Web网站”（WebSite）和“Web应用程序”（WebApplication）项目两种常用的模板。创建Web网站(2)创建Web应用程序项目1.2VisualStudio集成开发环境1.2.1VisualStudio项目管理2.Web网站与Web应用程序的区别(1)Web网站在这种方式下每个Web页面一般由.aspx和.aspx.cs两个文件来表示。前者主要用于表现页面内容、布局等外观属性，后者存放了用于实现程序功能的源代码。网站发布时系统会将.aspx.cs中的源代码编译成独立的二进制.dll文件存放在名为bin的文件夹中。Web网站创建后所在文件夹中没有.csproj项目文件，此时系统将整个目录结构当成一个项目。1.2VisualStudio集成开发环境1.2.1VisualStudio项目管理2.Web网站与Web应用程序的区别(2)Web应用程序Web应用程序可以作为类库被引用，非常适合于项目分模块开发方式。通过创建Web应用程序的方式可以创建ASP.NETMVC。

在Web应用程序项目中，每一个Web页面都由.aspx、.aspx.cs、aspx.design.cs三个文件来表示。其中.aspx.design.cs文件通常存放的是一些页面控件中控件的配置信息，也就是控件注册页面。它是窗体设计器生成的代码文件，作用是对窗体上的控件执行初始化工作，一般不需要程序员进行手工编辑。1.2VisualStudio集成开发环境1.2.2集成开发环境中的主要子窗口

工具箱Web窗体设计器代码编辑窗口解决方案资源管理器属性窗口输出窗口1.2VisualStudio集成开发环境1.2.2ASP.NET常用文件和文件夹1.ASP.NET常用文件类型1.2VisualStudio集成开发环境1.2.2ASP.NET常用文件和文件夹2.ASP.NET常用文件夹1.2VisualStudio集成开发环境1.2.4创建ASP.NET网站的基本步骤1.创建一个ASP.NET网站①根据用户需求进行问题分析，构思出合理的程序设计思路。②创建一个新的ASP.NET网站。③设计网站包含的所有Web页面的外观。④设置页面中所有控件对象的初始属性值⑤编写用于响应系统事件或用户事件的代码。⑥试运行并调试程序，纠正存在的错误，调整程序界面，提高容错能力和操作的便捷性，使程序更符合用户的操作习惯，通常将这一过程称为提高程序的“友好性”。参阅源代码：ex1-11.2VisualStudio集成开发环境1.2.4创建ASP.NET网站的基本步骤2.保存和打开ASP.NET项目保存项目项目及文件重命名(3)打开网站和项目1.3实训

创建一个简单课表查询网站1.3.1实训目的

通过本实训进一步理解创建ASP.NET网站应用程序的6个基本步骤。掌握VisualStudio集成开发环境各子窗口的使用方法，理解它们的作用。掌握在VisualStudio环境中设置和更改控件属性的基本方法。1.3.2实训要求

本例假设某学校现有3个班级，要求设计一个能在网络中通过IE浏览器进行各学生班级课表查询的ASP.NET网站。1.3.3实训步骤参阅源代码：train1第2章Web网站前端设计基础本章讲述的主要内容2.1HTML5标记语言2.2网页的样式控制2.3页面布局2.4实训页面布局综合练习2.1HTML5标记语言2014年W3C在HTML4的基础上推出了HTML5的正式标准，并迅速获得各大浏览器产品的支持（如，IE、Firefox、Chrome等）。HTML5目前已成为网页设计的主流趋势，那些不支持或不完全支持HTML5的浏览器产品正逐步被淘汰。需要说明的是Microsoft的IE浏览器从IE9开始部分支持HTML5，直到IE11才实现了对HTML5的完全支持，但IE11只能运行在Windows7以上版本的操作系统上，不支持早期的WindowsXP。运行本书示例时建议在Windows7以上环境中，使用IE11浏览器。2.1HTML5标记语言2.1.1HTML5的基本结构1.文档结构2.1HTML5标记语言2.1.1HTML5的基本结构2.HTML5与早期版本的不同标记不区分大小写(2)结束标记可以省略(3)boolean类属性的设置(4)属性引号允许省略2.1HTML5标记语言2.1.2在VS中设计网页1.向ASP.NET网站中添加静态网页添加现有静态网页

添加→现有项→添加现有项→.html网页(2)新建静态网页

添加→添加新项→选择“HTML页”模板2.1HTML5标记语言2.1.2在VS中设计网页2..aspx文件和HTML文件VS2015中创建的Web窗体中各元素默认以HTML5规范描述，页面中Web服务器控件以<asp>标记表示。

Web服务器控件与普通HTML元素相比最突出的不同点就是具有runat="server"的属性，表示控件在服务器端运行。2.1HTML5标记语言2.1.2在VS中设计网页3.VS提供的设计环境在VisualStudio中编辑、修改HTML或.aspx文件时，无论是编写HTML标记代码还是编写JavaScript脚本代码，都可以通过系统提供的智能提示功能快速完成编辑工作。2.1HTML5标记语言2.1.3HTML5的常用元素1.文本元素标记2.1HTML5标记语言2.1.3HTML5的常用元素2.层标记<div>层标记以<div>标记开始，以</div>标记结束。该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级<div>等。使用<div>标记可方便的将若干页面元素组成一个集合，进而统一设置该集合的显示位置及所含元素的样式。<div>是HTML5页面布局中使用最多，也是最重要的标记之一。3.超链接标记<a>

<ahref=URL地址target=打开窗口方式>热点文本</a>2.1HTML5标记语言2.1.3HTML5的常用元素4.列表标记

(1)无序列表标记<ul>

(2)有序列表标记<ol>(3)自定义列表标记<dl>2.1HTML5标记语言2.1.2HTML5常用标记5.表格标记表格标记中除了需要包含最基本的<tr>和<td>标记外，其它一些辅助标记见教材表2-22.1HTML5标记语言2.1.2HTML5常用标记6.图像、音频和视频标记图像标记<img>(2)音频标记<audio>(3)视频标记<video>2.2网页的样式控制

所谓样式控制是指对页面中各元素的外观（字体大小、颜色、背景对齐方式等）进行设置的方法。

在HTML中如果页面较为简单，一般可使用各标记的style属性来实现页面样式的控制。但对于结构复杂，内容丰富的页面使用style属性控制样式势必会造成许多重复工作量，页面代码也会显得十分臃肿，此时可使用CSS对网页样式进行统一的控制。2.2网页的样式控制2.2.1标记的Style属性

在HTML5中所有有关样式的设置都可以由标记的style属性来完成。

其一般格式为：

<标记style="参数1:值1;参数2:值2;……;参数n:值n">2.2网页的样式控制2.2.2CSS3的概念CSS（CascadingStyleSheets，级联样式表，也称为层叠样式表，简称为样式表）是一种将页面元素样式设置集中化的方法。

引入CSS的主要目的就是为了实现将页面结构与页面外观表现分离。CSS目前最高版本是CSS3，它较之前的版本有很大的改进。2.2网页的样式控制2.2.2CSS3的概念1.嵌入式CSS2.2网页的样式控制2.2.2CSS的概念2.外部链接式CSS所谓“外部链接式”样式控制，是将样式控制代码单独存放在一个以.css为扩展名的文本文件内，通过<link>标记引用其中对样式的定义。2.2网页的样式控制2.2.2CSS的概念

样式定义的优先级如果网页中既有内联式和嵌入式样式定义，又有外部链接式样式定义，而且这3种定义中还存在针对某特定元素的定义冲突。在这种情况下浏览器将采用“就近使用”的优先原则，即采用与该元素位置最近的样式定义。显然，内联式样式定义在任何情况下都最靠近元素位置，所以其优先级是最高的，也就是说内联式样式定义将覆盖嵌入式和外部链接式样式定义。而对于嵌入式和外部链接式样式定义的优先级，要看<link>标记和<style>标记的书写位置谁更靠近元素的位置。2.2网页的样式控制2.2.3CSS3常用选择器1.类型选择器“类型选择器”也称为“标记选择器”或“标签选择器”，它是以网页中现有标记为名称的选择器，用于统一设置某种标记的样式。2.ID选择器和类选择器为了使相同的网页元素具有不同的外观设置，可以通过指定元素ID名称并以该ID值为选择器设置样式。ID选择器书写时必须以“#”开头。类选择器通过类名称指定一组样式设置，网页中的元素通过引用该类来应用这些样式设置。类选择器书写时必须以“.”开头。2.2网页的样式控制2.2.3CSS3常用选择器3.包含选择器和组群选择器包含选择器用于设置某元素下面子元素的样式。例如，下列代码使用包含选择器设置了<div>标记下所有<a>子标记的字号为36px，字体为黑体。<styletype="text/css">diva{font-size:36px;font-family:黑体}</style>群组选择器可以对若干个不同元素进行统一的样式设置。2.2网页的样式控制2.2.3CSS3常用选择器4.属性选择器2.2网页的样式控制2.2.3CSS3常用选择器5.伪类选择器选择器:伪类名{属性:值}2.2网页的样式控制2.2.4CSS3的盒模型1.盒模型的概念2.2网页的样式控制2.2.4CSS3的盒模型2.内外边距和盒大小外边距（margin）(2)内边距（padding）(3)盒大小（box-sizing）3.盒区域显示特效border-radius属性（圆角）(2)border-image属性（图像边框）(3)box-shadow属性（阴影效果）2.2网页的样式控制2.2.5向网站中添加样式表在解决方案资源管理器中将该样式表文件（.css）拖动到页面源视图的<head>标记和</head>标记之间，也可以将样式表拖动到页面设计视图窗口。

拖动操作完成后，系统将自动在<head>标记和</head>标记之间添如下所示的代码：

<linkhref="xxxx.css"rel="stylesheet"type="text/css"/>2.3页面布局2.3.1使用表格布局页面目前虽然CSS+DIV布局技术占据了主导地位，但在一些小型环境、页面局部设计或页面元素定位中表格布局仍有自己的一席之地。2.3页面布局2.3.2使用DIV和CSS布局页面1.CSS+DIV页面布局示例参阅源代码：ex2-32.3页面布局2.3.2使用DIV和CSS布局页面2.CSS+DIV布局的常用技巧1.2.3.2.3页面布局2.3.3页面元素的定位流布局定位（static）2.坐标绝对定位（absolute）3.坐标相对定位（relative）参阅源代码：ex2-42.4

实训页面布局综合练习2.4.1实训目的进一步理解在VisualStudio环境中创建、编辑和引用CSS样式表文件的基本步骤。理解层元素在页面布局中的重要作用及使用方法。综合运用CSS+DIV布局技术设计出实用的网站主页。2.4.2实训要求新建一个ASP.NET空网站，向网站中添加一个Web窗体页Default.aspx。在Default.aspx中使用CSS+DIV技术设计出图2-24所示的网站主页效果。要求页面中导航栏、销售排行榜中内容使用ASP.NET标准控件HyperLink，商品名称、商品种类、用户名、密码栏使用ASP.NET标准控件TextBox，所有按钮使用ASP.NET标准控件Button，商品种类栏使用ASP.NET标准控件DropDownList。2.4

实训页面布局综合练习第3章主题与母版页本章讲述的主要内容

3.1使用主题与外观文件

3.2母版页与内容页

3.3从内容页访问母版页的内容3.4实训使用母板页和内容页

3.1使用主题与外观文件3.1.1使用主题主题是一组外观文件和CSS文件的集合。在解决方案资源管理器中，主题表现为一个ASP.NET特殊文件夹App_Themes下的一个子文件夹，其中可以存放外观文件（.skin）和级联样式表文件（.css）。

在页面的@Page指令中按如下所示添加页面的Theme属性或StyleSheetTheme属性，即可将主题应用到当前页面中。<%@PageLanguage="C#"…Theme="主题名称"…%>或：<%@PageLanguage="C#"…StyleSheetTheme="主题名称"…%>3.1

使用主题与外观文件3.1.2

使用外观文件

1.创建和使用外观文件在解决方案资源管理器中，右键单击某主题名称，在弹出的快捷菜单中执行“添加新项”命令，在打开的对话框中选择“外观文件”模板，并为外观文件指定名称后单击“添加”按钮，即可将外观文件添加到指定的主题中。外观文件添加到网站后，系统将自动切换到外观文件代码编写窗口。其中，<%……%>之间的内容为注释文本，用于提示用户编写代码时的注意事项。外观文件的内容可在注释信息之外进行编写。3.1

使用主题与外观文件3.1.2

使用外观文件

2..sink文件与.css文件的区别外观文件（.skin）和级联样式表文件（.css）的主要区别有以下几个方面。1)外观文件可以使页面中多个同类ASP.NET控件具有相同的外观样式，而级联样式表只能通过设置“CssClass”属性实现单个ASP.NET控件的外观样式控制。2)外观文件可以实现对所有ASP.NET控件的外观设置，而级联样式表文件并不是对所有ASP.NET控件都有效，其主要应用领域是HTML元素。3)在控制外观属性较多的ASP.NET控件时，需要在样式表文件中定义大量的类名选择符，使文件变得十分臃肿。而且若各CSS类之间的关系处理不好，还可能造成页面布局的混乱。3.1使用主题与外观文件3.1.3利用主题实现页面换肤在ASP.NET程序运行时，可以通过代码实现页面主体的动态变更，即可以根据用户的选择变更主体，从而使页面具有不同的外观。

参阅源代码：ex3-23.2母版页与内容页3.2.1母版页和内容页的概念母版页是指其他网页可以作为模板来引用的特殊网页，其文件扩展名为“.master”。在母版页中，界面被分为公用区域和可编辑区。公用区的设计方法和普通网页的设计方法相同，可编辑区需要使用ContentPlaceHolder控件预留出来。一个母版页中可以有一个或多个可编辑区。

所谓内容页是指引用了母版页的.aspx页面。在内容页中母版页的ContentPlaceHolder控件预留可编辑区域会自动替换为Content控件，设计人员只要在其中填充需要显示的内容即可，在母版页中定义的公共区域元素将自动显示在内容页中。3.2母版页与内容页3.2.2

创建母版页和内容页

1.创建母版页

3.2

母版页与内容页3.2.2

创建母版页和内容页

2.创建内容页在解决方案资源管理器中，右键单击网站名