《ASP.NET软件开发实用教程 教学课件 ppt 作者 华驰任务八》由会员分享，可在线阅读，更多相关《ASP.NET软件开发实用教程 教学课件 ppt 作者 华驰任务八（27页珍藏版）》请在金锄头文库上搜索。
1、ASP.NET软件开发案例教程,任务八 网络在线考试系统界面设计,任务描述,本工作任务讲述网页设计与布局的相关知识并完成网络课程在线考试系统中主要页面的设计工作，网络在线考试系统的主要界面包括：系统首页面、登陆页面、考生考试主页面、管理员管理主页面。 通过对于HTML语言、CSS、页面定位与布局、XML语言及TreeView控件、站点地图、SiteMap、HTML控件、标准服务器控件的学习，结合母版页知识在本任务中主要由项目组中软件设计人员完成登录页面、管理员管理主页面设计。,任务分析,掌握HTML语言、CSS、页面定位与布局、XML语言，TreeView控件、站点地图、SiteMap、HTM
2、L控件、标准服务器控件，母版页的相关知识之后，通过系统首页面及登录页面的实现过程讲解软件开发过程中的界面设计方法及步骤，掌握Web页面设计布局的相关知识和技能。 在完成考生考试主页面的设计后在管理员管理主页面设计中通过使用TreeView控件为管理员管理主页面制作树形目录，使用Menu空间为管理员管理主页面制作动态菜单，使用SiteMapPath控件为在线考试系统制作站点导航并使用ASP.NET基本控件完成网络在线考试系统的母版制作。 通过本任务的实施，掌握HTML语言、CSS、页面定位与布局、XML语言的基本用法及TreeView控件的用法，SiteMapPath控件的用法、HTML控件、标
3、准服务器控件以及使用各种控件来完成母版页的设计。,任务准备,1. HTML,每个HTML的文档都由首部（head）和主体（bady）两个主要部分组成，主体紧接在首部的后边。标记和之间的内容构成文档的首部，head标记符中也可以包含其他标记符，例如标题标记符title、样式标记符style、脚本语言标记符script等。首部用于设置HTML文件的标题、作者等信息，这些信息都不会显示在浏览窗口内，也可以省略此标记。标记和之间的内容构成HTML的主体部分，网页中所有内容，包括文字、图片、连接以及其他页面元素都包含在该标记符内。 从一个网页访问另一个网页或该网页中的某个位置，可以采用超链接实现。定义超
4、链接的标记符是。和之间的内容为显示的信息，href属性后的值为连接的URL。,任务准备,2. CSS,层叠样式表，简称CSS（Cascading Style Sheets）,它可以控制网页中一个或多个元素的外观。由于改变样式表中任何一个元素的显示样式，网页中所有与该样式级联的元素都会自动发生改变，因为使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计和维护带来很大的方便。 样式是指每一个网页元素呈现在浏览器中的风格，比如字体的大小、颜色、页面的背景色、背景图等。 样式文件的扩展名为“.css”，文件中每个样式的一般格式为： 样式定义选择符样式属性1：值1；样式属性2：值2；
5、,任务准备,例如，样式文件MyStyleSheetl.css的内容为： body background-color#33bb66; h1 font-size:30pt color:Blue; h2 font-size:20pt; color:white; ,任务准备,2.页面定位与布局,表格是网页制作中不可或缺的元素，它除了直接在单元格内显示内容以外，还可以将整个页面划分成若干个独立的部分，精确定位文本、图像或其他元素。 表格由行和列组成，行列交叉构成了单元格，如下代码组成一个简单的表格。 第一行带一单元格 第一行带二单元格 这段代码中，表示表格的一行，每一个作为该行的每一列，与该行构成一单元
6、格。,任务准备,当网页制作中，需要在一个页面内的某一部分区域中显示另一页面的内容，可以利用页内框架完成这种布局。 页内框架只能在【源】视图下用直接输入代码的方式创建，所需要的是HTML的IFRAME标记，常用格式为： 不支持页内框架浏览器显示的内容 使用target属性控制超链接的目标文件如何显示的，其取值情况如表所示。,任务准备,当网页制作中，需要在一个页面内的某一部分区域中显示另一页面的内容，可以利用页内框架完成这种布局。 页内框架只能在【源】视图下用直接输入代码的方式创建，所需要的是HTML的IFRAME标记，常用格式为： 不支持页内框架浏览器显示的内容 使用target属性控制超链接的
7、目标文件如何显示的，其取值情况如表所示。,任务准备,在【设计】视图下，选择【布局】菜单的【插入层】选项，单击【确定】按钮后，页面 上即出现一个“容器框”，可以在其中添加所需要的控件或文档内容。切换到【源】视图下，系统自动在HTML文档的标记之间添加了标记，这就是该容器框“层”的对应代码。 ,任务准备,3. XML,XML（Extensible Markup Language）即可扩展标记语言，是Web上的数据通用语言。它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。XML是Internet环境中跨平台的，依赖于内容的
8、技术，是当前处理结构化文档信息的有力工具。它使开发人员能够将结构化数据从许多不同的应用程序传递到桌面，进行本地计算和演示，并且它还支持用户定义自己的一组标签，用来增强数据的自描述。XML 允许为特定应用程序创建唯一的数据格式。它还是在服务器之间传输结构化数据的理想格式。XML文档是基于文本格式的，允许开发人员描述结构化数据并在各种应用之间发送和交换这些数据。 XML实际上是Web中表示结构化信息的一种标准文本格式，它没有复杂的语法和包罗万象的数据定义。XML的特点可以归纳为三点：先进特性、灵活性和自描述性。,任务准备,3. XML,XML（Extensible Markup Language）
9、即可扩展标记语言，是Web上的数据通用语言。它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。XML是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。它使开发人员能够将结构化数据从许多不同的应用程序传递到桌面，进行本地计算和演示，并且它还支持用户定义自己的一组标签，用来增强数据的自描述。XML 允许为特定应用程序创建唯一的数据格式。它还是在服务器之间传输结构化数据的理想格式。XML文档是基于文本格式的，允许开发人员描述结构化数据并在各种应用之间发送和交换这些数据。 XML实际上是W
10、eb中表示结构化信息的一种标准文本格式，它没有复杂的语法和包罗万象的数据定义。XML的特点可以归纳为三点：先进特性、灵活性和自描述性。,任务准备,3. XML,XML（Extensible Markup Language）即可扩展标记语言，是Web上的数据通用语言。它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。XML是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。它使开发人员能够将结构化数据从许多不同的应用程序传递到桌面，进行本地计算和演示，并且它还支持用户定义自己的一组标签
11、，用来增强数据的自描述。XML 允许为特定应用程序创建唯一的数据格式。它还是在服务器之间传输结构化数据的理想格式。XML文档是基于文本格式的，允许开发人员描述结构化数据并在各种应用之间发送和交换这些数据。 XML实际上是Web中表示结构化信息的一种标准文本格式，它没有复杂的语法和包罗万象的数据定义。XML的特点可以归纳为三点：先进特性、灵活性和自描述性。,任务准备,3. TreeView控件,树形导航是网站中广泛采用的一种导航方式，利用树形导航，可以很容易地了解到文件和目录之间的层次结构。,4.站点地图,站点地图是对站点结构的XML描述，它用来描述网站的逻辑结构。文件的后缀是sitemap。T
12、reeView控件、Menu控件和SiteMapPath控件都可以结合站点地图所确定的逻辑关系来给网站导航。,任务准备,5. SiteMapPath控件,站点地图创建好之后，就可以利用SiteMapPath控件来显示浏览者当前的位置。SiteMapPath控件也叫“面包屑”导航控件。该控件必须与站点地图文件相结合，而且最好放在主控页中。使用该控件时，不需要编写任何代码，只要在相应位置有已经写好的站点地图文件，并将SiteMapPath控件直接拖入窗体，它就会自动与站点地图文件相结合，形成导航效果。 SiteMapPath控件只能显示从根节点到当前节点之间的路径，利用它只能返回某个页面，而不能向
13、前选择页面。,任务准备,6. HTML控件,HTML控件是从HTML标记衍生而来的，每个控件对应一个或一组HTML标记，HTML控件如图8-3所示。在默认情况下，HTML控件属于客户端（浏览器）控件，服务器无法对其进行控制。但是几乎所有的HTML标记加上runat=”server”后，就可以变成HTML服务器端控件。 HTML服务器控件派生于System.Web.UI.HtmlControls。HtmlControl类，此基类包含所有常用属性。 在文档窗口，只要把这些HTML控件中的任何一个从工具箱拖放到ASP.NET页面的设计视图或源视图上，就可以生成相应的HTML元素。,任务准备,（1）H
14、tmlInput控件 工具箱的HTML选项卡上提供了多个基于HtmlInput元素的控件，这些控件分别如下。 HtmlInput（Text）控件：input type=”text”元素 HtmlInput（Password）控件：input type=” password”元素 HtmlInput（Button）控件：input type=” button”元素 HtmlInput（Submit）控件：input type=” submit”元素 HtmlInput（Reset）控件：input type=” reset”元素 HtmlInput（CheckBox）控件：input type=
15、” checkbox”元素 HtmlInput（Radio）控件：input type=” radio”元素 HtmlInput（File）控件：input type=” file”元素 HtmlInput（Hidden）控件：input type=” hidden”元素 HtmlInput控件有一个重要的属性，即Type属性，HtmlInput 控件根据Type属性的设定而产生不同种类的输入控件。,任务准备,（1）HtmlInput控件 工具箱的HTML选项卡上提供了多个基于HtmlInput元素的控件，这些控件分别如下。 HtmlInput（Text）控件：input type=”text
16、”元素 HtmlInput（Password）控件：input type=” password”元素 HtmlInput（Button）控件：input type=” button”元素 HtmlInput（Submit）控件：input type=” submit”元素 HtmlInput（Reset）控件：input type=” reset”元素 HtmlInput（CheckBox）控件：input type=” checkbox”元素 HtmlInput（Radio）控件：input type=” radio”元素 HtmlInput（File）控件：input type=” file”元素 HtmlInput（Hidden）控件：input type=” hidden”元素 HtmlInput控件有一个重要的属性，即Type属性，HtmlInput 控件根据Type属性的设定而产生不同种类的输入控件。,任务准备,（2）HtmlTable控件 HtmlTable控件的主要作用就是用来生成表（Table）可以通过拖动控件的方式将其从工具箱
