ASPNET动态网页设计整套课件幻灯片教学教程电子讲义.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,项目1 创建ASP.NET网站,教学目标,知识教学目标,掌握网站的创建和网页的创建方式,理解网页事件生命周期,学会使用外部样式布局网页,学会应用断点监视并调试程序,掌握网站的发布方式,技能培养目标,网站和网页的创建,网页的运行及调试,网站的发布,目 录,任务1.1 创建和打开网站,1,任务1.2 创建并设计Web页面,2,任务1.3 编辑后台代码,3,任务1.4 断点调试、监视应用程序,4,任务1.5 部署Web应用程序和测试,5,任务1.1 创建和打开网站,任务描述：,在Visual Studio 2010以上版本的开发平台中，可以用文件系统方式、HTTP方式、FTP方式来创建和打开Web项目，还可以在没有安装IIS的计算机上以文件系统方式创建网站。重点掌握文件系统下创建和打开网站的方式方法。,任务1.1 创建和打开网站,关键知识：,网站的创建：创建空网站和创建非空网站,网站创建有如下几种方式：,1、文件系统（File System）方式,2、HTTP方式,3、FTP方式,学习：以文件系统方式创建,企业开发：可以是文件系统、HTTP和FTP方式进行创建,任务1.1 创建和打开网站,关键知识：目录结构,Bin目录：包含要在网站中引用的控件、组件或其他代码的已编译程序集（.dll文件）。,App_Code目录：该目录存放.cs、.vb、.xsd和自定义的文件类型。,App_GlobalResources（R）：创建全局资源文件.resx。,App_LocalResources（C）：本地.resx类型的资源文件。,App_WebReferences（B）：包含所生成的客户代理文件，存放.wsdl类型文件。,App_data：存放网站的本地数据库。,App_Browsers（W）：包含.browser文件，.browser文件描述浏览器的特征和功能。,主题（E）：主题包含在App_Themes文件夹下的一个文件夹，存放.skin、.css、.xsl等类型文件。,任务1.2 创建并设计Web页面,任务描述：,在任务1.1所创建的网站中创建Web窗体页面，并在网站中创建CSS外部样式文件，编写CSS样式代码，并应用到窗体页面进行页面布局。,任务1.2 创建并设计Web页面,关键知识：CSS样式概述,CSS盒子模型,CSS样式的分类,CSS样式基本语法,Visual Studio2010版本下的样式菜单,Visual Studio2015及以上版本对样式支持,任务1.2 创建并设计Web页面,CSS盒子模型,任务1.2 创建并设计Web页面,CSS盒子模型,假设外边距为20px，内边距为15px，边框宽度为10px，width属性值为600px，高度为120px，则这个盒子模型的占位宽度为690px，占位高度为210px，盒子模型如图1-9所示。,任务1.2 创建并设计Web页面,CSS样式分类,类样式,定义类样式时名称前面加“.”前缀符号。可应用于任何HTML元素，可在页面的不同部分不同元素多次引用。,元素ID样式,样式定义时样式名前面加“#”前缀符号，一个页面仅应用于一种类型的HTML元素时使用，一般用于定义布局层样式。,任务1.2 创建并设计Web页面,CSS样式分类,标签样式,重新定义HTML元素，定义标签样式时，在选择器名称中可选择HTML元素，对所选元素样式进行重定义，创建或更改标签样式后，所有用该标签样式的文本都自动更新为新的格式。,h1,h2,h3,h4,h5,h6,p margin:0px;,复合内容样式,如果要定义同时影响两个或多个标签、类或ID的复合规则，应该选择“复合内容”样式，选择器名称之间用空格隔开，如定义.pic img的复合样式，这里包括类样式pic和标签样式img二个选择器，复合样式一般只对前面的选择器名称进行引用，最后面的选择器名称不需要引用，如.pic img的复合样式，只需要引用类样式pic即可。,任务1.2 创建并设计Web页面,CSS基本语法,CSS语言由标志和属性构成，属性值后面加分号，样式的基本语法如下：,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,字体属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,块属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,背景属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,边框属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,方框属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,定位属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,布局属性,任务1.2 创建并设计Web页面,Visual Studio2010版本下的样式菜单,列表属性,任务1.2 创建并设计Web页面,Visual Studio2015及以上版本对样式支持,Visual Studio2015及以上版本偏向有CSS样式基础的学习者使用，不再设置“样式”菜单，用户只能在样式表文件中手动编写CSS样式代码，该版本支持CSS3样式设置。,任务1.3 编辑后台代码,任务描述：,在任务1.2中所创建的前端页面添加按钮控件，统计用户点击按钮的次数，并在网页生命周期的某个事件阶段修改绑定的数据值，使得最后显示结果发生变化。,任务1.3 编辑后台代码,关键知识：,Web页面的生命周期事件,任务1.3 编辑后台代码,关键知识：,Web页面的生命周期事件,任务1.3 编辑后台代码,关键知识：,Web页面的生命周期事件,任务1.4 断点调试、监视应用程序,任务描述：,了解网页的运行方式，了解断点设置的目的，掌握断点的设置和在监视窗口监控变量值的变化方法。对任务1.3中定义的每一个生命周期事件和按钮点击事件、页面加载事件中的语句设置断点，在调试模式下启用调试器并通过设置监视窗口监视变量值的变化。,任务1.4 断点调试、监视应用程序,关键知识：,网页的运行方式,在调试模式下运行网页,进行调试直接运行网页,直接在浏览器中查看网页,断点设置,通过菜单命令设置,通过快捷菜单设置,通过将鼠标移动到需要设置断点所在行的最左侧灰色底纹处，当鼠标指针变成指向左边时点击鼠标左键，可看到灰色底纹处出现红色圆形断点图案。,任务1.5 部署Web应用程序和测试网站,任务描述：,了解网站部署的常用方法，对前面4个任务过程中完成的网站进行部署，掌握在不同操作系统下Web服务器的配置方式，并对网站进行发布和测试。,任务1.4 断点调试、监视应用程序,关键知识：网站的部署发布方式,FTP方式传输,采用FTP传输方式，需要服务器端开通端口并提供登录用户名和密码，通过FTP方式将网站源文件上传到服务器端，由服务器端进行相关的配置完成网站的部署。,发布站点,在本机直接发布站点则需要在本机配置IIS服务器，如果需要以HTTP方式访问，则需要申请相关的域名和空间。,制作MSI安装程序,制作MSI安装程序需要另外下载MSI安装包制作软件，根据提示步骤导航对需要发布的站点文件进行安装制作。,复制站点,项目2 数据的绑定,教学目标,知识教学目标,掌握将属性、方法、变量表达式、数组绑定到控件或直接在前端页面显示的方法,通过数据控件获取并管理数据库信息,绑定值的获取,技能培养目标,掌握数据绑定的方式方法,能够通过数据控件和数据源控件管理数据库,目 录,任务2.1 绑定到属性,1,任务2.2 绑定到方法,2,任务2.3 绑定到变量,3,任务2.4 绑定到数组,4,任务2.5 绑定到数据库数据,5,任务2.6 图表控件的数据绑定,6,任务2.1 绑定到属性,任务描述：,本任务要将后置代码页面中定义的公共属性绑定到窗体页面上直接显示或绑定到服务器控件上，也可将一个控件的属性值绑定到另一个控件上。,任务2.1 绑定到属性,关键知识：,基于属性的数据绑定所涉及的属性必须包含get访问器。,属性绑定书写方式：,。,Page_Load事件中调用Page类的DataBind()方法。,任务2.1 绑定到属性,任务实施：,定义公共属性,任务2.1 绑定到属性,任务实施：,（绑定到公共属性）,源代码视图中进行属性绑定、后置代码页面绑定,运行效果图如下：,任务2.1 绑定到属性,任务实施：,（绑定到控件属性）,将一个控件的值绑定以另一个控件,任务2.2 绑定到方法,任务描述：,本任务将后置代码页面定义的方法绑定到前端页面的控件属性上，或通过直接绑定方法的方式在前端页面显示结果。,任务2.2 绑定到方法,关键知识：,绑定书写方式为：,或。,也可以将方法绑定到服务器控件属性，服务器控件属性=进行绑定。,Page_Load事件中调用Page类的DataBind()方法。,任务2.2 绑定到方法,任务实施：,定义方法,任务2.2 绑定到方法,任务实施：,在源代码视图进行方法绑定,任务2.2 绑定到方法,任务实施：,将方法绑定到服务器控件属性,任务2.3 绑定到变量,任务描述：,在前端页面通过绑定直接显示获得后置代码页面定义的公共变量值；在前端页面通过绑定获得后置代码页面定义的公共变量表达式的值。,任务2.3 绑定到变量,关键知识：,变量绑定的方法：,变量绑定到服务器控件,控件属性=“,或控件属性=,Page_Load事件中调用Page类的DataBind()方法。,任务2.3 绑定到变量,任务实施：,定义字符串变量,任务2.3 绑定到变量,任务实施：,在源代码视图进行变量绑定,任务2.3 绑定到变量,任务实施：,绑定到变量表达式,任务2.4 绑定到数组,任务描述：,在后置代码页面定义数组后，在前端页面将数组绑定到各类列表控件；在后置代码页面定义数组后，在页面第一次加载的同时将数组绑定到各列表控件；读取绑定了数组的列表项控件值。,任务2.4 绑定到数组,关键知识：,数组是一个多值的变量，能与数组进行绑定的主要是多值列表控件。,将后置代码页面定义的数组绑定到多值列表控件，有两种方式：,前端页面绑定到控件的属性：,DataSource=；同时，在后置代码文件的页面加载事件中添加Page.DataBind();语句。,在后置代码页面写如下代码：,注意：每个控件可用于绑定的属性略有不同,任务2.4 绑定到数组,关键知识：常用多值列表控件,CheckBoxList多选列表框控件,RadioButtonList单选列表框控件,DropDownList下拉列表框控件,ListBox列表控件,BulletedList符号列表控件,任务2.4 绑定到数组,关键知识：CheckBoxList控件,DataSourceID、DataMember、DataTextField和DataValueField用于从数据库中获取数据进行数据绑定。,任务2.4 绑定到数组,关键知识：CheckBoxList控件,任务2.4 绑定到数组,关键知识：CheckBoxList控件,CheckBoxList控件选项的主要属性有Text、Selected和Value，分别表示选项文本、选项的选中状态和选项值。,常用的事件。CheckBoxList控件的常用事件是SelectedIndexChanged，如果控件的AutoPostBack属性设为True，当控件选项的状态改变时，将触发该事件。,任务2.4 绑定到数组,关键知识：RadioButtonList控件,基本属性与CheckBoxList控件相同,获得RadioButtonList1控件选中相关信息表达式如下：,任务2.4 绑定到数组,关键知识：ListBox控件,基本属性与CheckBoxList相似。,多选模式。,SelectionMode为Single，表示只允许用户在列表框中选择一个选项。,SelectionMode为为Multiple时，表示允许用户使用Ctrl键或Shift键在列表框中选择多个选项。,常用事件与CheckBoxList和RadioButtonList控件相同。,任务2.4 绑定到数组,关键知识：DropDownList控件,DropDownList控件以下拉列表的方式显示选项，没有多选模式，其他的基本属性、获得选中项相关信息以及绑定相关的属性和常用事件与单选列表框控件相同。,DropDownList控件的DataSourceID、DataTextField和DataValueField可用于从数据库中获取数据进行数据绑定。,任务2.4 绑定到数组,关键知识：BulletedList控件,BulletedList控件可以显示带项目符号的列表，列表项是ListItem对象。,主要属性:,BulletStyle：设置列表项显示的符号。,BulletImageUrl：当BulletStyle属性为CustomImage时，用图片代替列表符号。,DisplayMode,获取选中项相关信息。获取BulletedList1控件第i项被选中项相关信息表达式如下：,BulletedList1.Itemsi.Text,BulletedList1.Itemsi.Value,任务2.4 绑定到数组,任务实施,：,（,前端页面绑定）,定义数组,任务2.4 绑定到数组,任务实施：,（,前端页面绑定）,绑定到各类控件,任务2.4 绑定到数组,任务实施：,（,前端页面绑定）,后台绑定,任务2.4 绑定到数组,任务实施：,（后台,绑定）,定义数组、绑定并赋值,任务2.4 绑定到数组,任务实施：,获取单选按钮控件的值,获取下拉列表框控件的值,任务2.4 绑定到数组,任务实施：,获取复选列表框选中项的值,任务2.4 绑定到数组,任务实施：,获取列表框选中项的值,跳转到符号列表控件链接的页面。,任务2.5 绑定到数据库数据,任务描述：,本任务主要实现数据库信息的读取、插入、编辑和删除，具体包括通过数据源控件连接到数据库的某个表，用列表控件显示数据库字段信息，读取并显示数据库中以二进制方式存储的图片，读取并显示数据库中以路径方式存储的图片，使用不同的数据控件显示数据库信息，并实现对数据库信息的插入、删除和更新操作。,任务2.5 绑定到数据库数据,关键知识：,ADO.NET,ASP.NET默认是通过ADO.NET来访问数据库的。ADO.NET是一种以面向对象的设计方法构建数据访问和操作的类库，通过ADO.NET类库，可方便操作各种各样的数据源，如数据库、文本文件、Excel文件和XML文件等。,任务2.5 绑定到数据库数据,关键知识：,连接数据库的方法,SQLClient方法,命名空间为System.Data.SQLClient，用于访问Microsoft SQL Server 7.0及以上版本的数据库。,OleDB方法,命名空间为System.Data.OleDb，允许.NET程序调用存在于OleDb Data Provider中的数据源。,ODBC方法,命名空间为System.Data.Odbc，允许.NET程序使用所有兼容的ODBC驱动程序。,Oracle方法,命名空间为System.Data.OracleClient，用于访问Oracle数据库。,任务2.5 绑定到数据库数据,关键知识：,常用数据源控件,SqlDataSource控件,AccessData Source控件,ObjectDataSource控件,XmlDataSource控件,SiteMapDataSource控件,EntityDataSource控件,LinqDataSource控件。,任务2.5 绑定到数据库数据,关键知识：数据绑定方法,Eval方法是静态单向（只读）方法。,Bind方法支持读/写功能，所以Bind函数用于双向（可更新）绑定。该方法可以检索数据绑定控件的值并将任何更改提交回数据库。,任务2.5 绑定到数据库数据,关键知识：数据控件主要功能,ASP.NET 4.0提供的数据显示控件主要有GridView、DetailsView、FormView和DataList，这些控件具有以下主要功能。,提供了以下两种用于绑定到数据的选项：,使用DataSourceID属性与数据源控件进行数据绑定,使用DataSource属性进行数据绑定,设置数据显示格式。,编辑、删除、更新和插入数据。,排序功能。,模板功能。,分页功能。,任务2.5 绑定到数据库数据,关键知识：数据控件,GridView,DetailsView,FormView,DataView,ListView,DataPager,任务2.5 绑定到数据库数据,任务实施：使用数据源控件连接数据库,任务2.5 绑定到数据库数据,任务实施：使用下拉列表控件显示数据,任务2.5 绑定到数据库数据,任务实施：显示以路径方式存储的数据库图片,显示雇员表中路径方式存储的雇员头像信息，步骤如下：,一、创建文件,二、配置数据源控件,三、完成数据源控件与数据控件的绑定。,任务2.5 绑定到数据库数据,任务实施：插入、编辑和删除数据,步骤如下：,一、新建网页文件,二、配置数据源控件,三、显示数据库信息,任务2.5 绑定到数据库数据,任务实施：插入数据,任务2.5 绑定到数据库数据,任务实施：编辑数据,任务2.5 绑定到数据库数据,任务实施：删除数据,任务2.6 图表控件的数据绑定,任务描述：,获得Northwind数据库中每个种类的产品总数量，并以图片显示。涉及两张表：种类表和产品表，并对同一种类的产品进行数量统计。,任务2.6 图表控件的数据绑定,关键知识：Chart控件,ASP.NET的Chart控件可以向Web应用程序添加动态的数据绑定的图形，通过Chart控件制作不同类型的图表，如柱形图、面积图、条形图、折线图、饼图等，可以通过修改绘图区以及添加边框、背景和图例定制图表的外观。Chart控件主要有下面三个组件。,系列（Series）：系列是数据点的集合，不同类型的图表呈现系列的方式不同。,图表区（Chararea）：定义绘制系列的绘图区。,数据点：系列内的一个数据点。,编写Chart控件的DataBound事件，在DataBound事件中利用Chart控件的DataManipulator属性的Sort方法可对图表任意轴上的系列进行升序或降序排序。,任务2.6 图表控件的数据绑定,任务实施：,步骤如下：,添加页面,配置数据源控件,将Chart控件绑定到数据源控件,项目3 页面导航与视图切换,教学目标,知识教学目标,使用CSS+DIV设置一级横向导航和竖向导航,使用Menu控件建立一级横向导航和竖向导航,使用Menu控件建立二级横向导航,使用TreeView控件建立树状导航,使用MultiView控件实现视图切换,技能培养目标,根据页面设计需求，使用多种方式制作横向一级和多级导航,根据页面设计需求，使用多种方式制作竖向一级和多级导航,根据页面设计需要，制作多视图切换模块,目 录,任务3.1 使用CSS+DIV创建导航,1,任务3.2 使用Menu控件建立网站导航,2,任务3.3 使用TreeView建立树状导航,3,任务3.4 使用MultiView实现多视图切换,4,任务3.5 站点地图应用,5,6,任务3.1 使用CSS+DIV创建导航,任务描述：,本任务基于CSS+DIV完成横向导航和竖向导航的制作，导航块内容可以是列表项，也可以采用链接文字，通过外部样式使得导航块内容按需要的方式横向或竖向显示。,任务3.1 使用CSS+DIV创建导航,关键知识：导航样式,浮动设置：采用ul-li列表项的形式制作横向导航时，关键点是需要设置每一个li列表项由默认的竖向排列转成横向排列，通过CSS样式控制这种转向，需要设置li样式向左或向右浮动。,复合链接样式的设置：文字链接有默认的链接样式、鼠标经过样式和访问过后的样式，如果需要改变默认的样式，则需要对链接样式进行复合样式定义，两个样式如果一样，可用逗号隔开。,外部样式的应用：本项目所有样式均保存在css文件夹下的样式文件中，需要在网页文件源代码视图的标签内添加对外部样式文件的引用。,任务3.1 使用CSS+DIV创建导航,任务实施：使用ur列表制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：使用ur列表制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：使用超链接制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：使用超链接制作横向导航,任务3.1 使用CSS+DIV创建导航,任务实施：制作竖向导航,任务3.1 使用CSS+DIV创建导航,任务实施：制作竖向导航,任务3.2 使用Menu控件建立网站导航,任务描述：,本任务主要是了解menu控件的基本属性，并能够使用menu控件建立一级横向导航、二级横向导航、一级竖向导航和二级竖向导航。,任务3.2 使用Menu控件建立网站导航,关键知识：Menu控件,Menu控件是一个菜单控件，由一个或多个菜单子项（MenuItem）组成，并且菜单子项之间可以形成一定的层次关系。菜单控件包含两种菜单：静态菜单（StaticMenu）和动态菜单（DynamicMenu）。静态菜单总是一直显示在网页上充当一级菜单的作用，而动态菜单由菜单的父菜单弹出，充当二级菜单作用。,Menu控件的Items属性表示Menu控件的所有菜单项，可以在设计视图中以静态的方式添加Menu控件的菜单。,任务3.2 使用Menu控件建立网站导航,关键知识：Menu常用属性,1）Orientation属性：用于设置控件的呈现方向（Vertical、Horizontal。,2）StaticDisplayLevels属性：用于设置静态菜单显示级别数。默认值是1。,3）MaximumDynamicDisplayLevels属性：指定在静态显示层后应显示的动态显示菜单节点层数。,4）DisappearAfter属性：设置菜单动态显示部分从显示到消失所需的时间长度。默认值为 500 毫秒。,5）CssClass属性：可引用类样式。添加静态菜单项后可通过引用链接类样式实现导航的效果。,6）StaticEnableDefaultPopOutImage属性，该属性默认为True，有多级导航菜单时，菜单项之间会出现的间隔符号。设为False，则不出现间隔符号。,7）StaticMenuStyle样式：可设置一级静态菜单项的样式,8）DynamicMenuStyle样式：可设置除一级静态菜单项外的其它动态菜单的样式。,任务3.2 使用Menu控件建立网站导航,任务实施：建立横向导航,步骤见教材任务,任务3.2 使用Menu控件建立网站导航,任务实施：建立二级横向导航,步骤见教材任务,任务3.2 使用Menu控件建立网站导航,任务实施：建立一级竖向导航,步骤见教材任务,任务3.2 使用Menu控件建立网站导航,任务实施：建立二级竖向导航,步骤见教材任务,任务3.3 使用TreeView建立树状导航,任务描述：,网站的后台管理主页面通常需要设置一个导航，通过该导航，使得管理员可链接到各个页面，从而实现数据库的插入、删除、更新和修改用户信息等任务，本任务使用 TreeView控件建立一个管理员后台主页面的树状导航。,任务3.3 使用TreeView建立树状导航,关键知识：TreeView控件,TreeView控件由一个或多个节点构成，通过树状视图形式展示。可以将控件绑定到SiteMapDataSource控件上、绑定到XMLDataSource控件上和绑定到数据库上，树中的每个项都被称为一个节点，由TreeNode 对象表示。每个节点都具有一个Text属性和一个Value属性。Text属性的值显示在TreeView控件中，而Value属性则用于存储有关该节点的任何附加数据。,任务3.3 使用TreeView建立树状导航,关键知识：TreeView控件,Expanded属性：指定默认情况下节点是否打开。,NavigateUrl属性：菜单被选中是被定位到的页面的Url。,SelectAcion属性：指定节点被选中时执行的操作，例如展开和折叠。,Text属性：节点项显示的文本。,Value属性：节点项的值。,Target属性：设置为_blank，从空白页打开跳转的页面。,CssClass属性：引用CSS类样式。,NodeIndent属性：设置节点的缩进量。,NodeStyle样式：设置节点的样式，包括类样式的引用、水平间距、字体等样式的设置。,HoverNodeStyle样式：鼠标经过节点样式的设置。,ExpandDepth：默认为FullExpand，当有多级菜单时可设置为只显示前面的级数,。,任务3.3 使用TreeView建立树状导航,任务实现：,步骤见教材任务,任务3.4 使用MultiView实现多视图切换,任务描述：,在各类门户网站中通常会设计一个多视图切换层，如在一个布局位置，用户可通过单击切换按钮实现同一位置查看新闻或通知或公告等信息，如图3-14所示效果。本任务使用MultiView和View控件结合，实现多视图的切换。,任务3.4 使用MultiView实现多视图切换,关键知识：MultiView和View,在ASP.NET中，使用MultiView和View控件可以做出选项卡的效果，一个MultiView控件可以包含多个View控件，一个View控件相当于一个选项卡。MultiView控件一次只能显示一个View视图，与按钮、链接按钮或图片按钮控件结合使用，可通过单击按钮，切换到不同的View控件，从而看到不同的内容。,主要属性：,Views和ActiveViewIndex,按钮属性设置：,CommandName属性和CommandArgument属性,任务3.4 使用MultiView实现多视图切换,任务实施：,步骤如下：,添加样式文件和布局文件,定位并设置链接按钮,设置链接样式,添加MultiView和View控件,设计链接标题样式,编写事件代码,效果图如下：,任务3.5 站点地图应用,任务描述：,根据网站的文件结构创建站点地图，并依据站点地图与SiteMapPath控件结合，实现站点路径导航；与Menu控件和TreeView控件结合，实现页面导航。,任务3.5 站点地图应用,关键知识：站点地图控件,站点地图文件按站点的分层形式组织页面，用于描述站点的逻辑结构，根节点是SiteMap。可以为网站中的每个页面添加一个SiteMapNode元素，并通过嵌入SiteMapNode元素来创建层次结构。,任务3.5 站点地图应用,关键知识：站点地图控件,任务3.5 站点地图应用,关键知识：SiteMapPath,SiteMapPath控件自动从站点地图Web.sitemap文件中读取数据，提供了从当前位置沿页层次结构向上的跳转功能。,任务3.5 站点地图应用,任务实施：建立网站地图,任务3.5 站点地图应用,任务实施,：,设置SiteMapPath控件,设置Menu控件,设置TreeView控件,任务3.5 站点地图应用,任务实施：,项目4 网站前端页面设计,科学出版社 主编 ：郭建东,教学目标,知识教学目标,CSS+DIV布局网页,外部样式的应用,母版页的设计与应用,技能培养目标,能够熟练应用CSS+DIV布局前端页面,能够应用母版页设计网站页面,目 录,任务4.1 CSS+DIV布局网站1页面,1,任务4.2 CSS+DIV布局网站2页面,2,任务4.3 母版页布局网站2页面,3,任务4.1 CSS+DIV布局网站1页面,任务描述：,本任务根据所给的图片素材及网页效果图完成一个企业网站的主页面和内容页面的前端页面设计，要求使用CSS+DIV技术进行页面设计。,任务4.1 CSS+DIV布局网站1页面,关键知识：使用CSS+DIV布局页面,公共类样式的设定,页面的导航设计,页面居中设计,设置了层的宽度属性后，可将Div的样式margin属性值设为auto,将层的上下外边距设为0，左右边距设为auto,任务4.1 CSS+DIV布局网站1页面,任务实施：,建立网站1主页面,一、建立网站及相关文件,二、公共样式设计,三、总容器层设计,四、页眉设计,五、内容区容器层设计,六、左侧栏设计,七、右侧栏设计,八、页脚设计,任务4.1 CSS+DIV布局网站1页面,任务实施：,建立网站1主页面,任务4.1 CSS+DIV布局网站1页面,任务实施：,建立网站1内容页面,任务4.2 CSS+DIV布局网站2页面,任务描述：,任务4.1中完成了一个企业网站的主页面和内容页的设计。实际网站的布局多种多样，本任务继续介绍另一个网站的前端页面设计过程。根据所给图片素材及页面效果图，完成如图4-3所示企业网站主页面和如图4-14所示内容页面的前端设计。,任务4.2 CSS+DIV布局网站2页面,关键知识：网站2前端页面设计及导航设计,根据所给图片素材进行网页前端页面设计。本节内容根据静态网页的基础知识完成页面制作，使用CSS+DIV布局网站2主页面和内容页面。,导航设置：导航除了可项目3中的CSS+DIV和通过控件实现方式外，本节介绍通过图片背景+文字形式进行导航功能的实现，以椭圆图为背景，在椭圆背景图上添加文字并设置文字链接的方式设计导航，当鼠标经过背景图时背景图及文字均发生变化，需要编写导航链接样式和鼠标经过样式代码。,任务4.2 CSS+DIV布局网站2页面,任务实施：,建立网站2主页面,一、创建图片文件夹及网页文件,二、总容器层设计,三、页眉设计,四、整体内容区容器层设计,五、左侧栏设计,六、右侧栏设计,七、页脚设计,任务4.2 CSS+DIV布局网站2页面,任务实施：,建立网站2主页面,任务4.2 CSS+DIV布局网站2页面,任务实施：,建立网站2内容页面,任务4.3 母版页布局网站2页面,任务描述：,分析两个网站的主页面和内容页面，会发现网站主页面和内容页之间存在着布局相同、内容相同的部分。为了提高开发效率，可将一个网站中各网页的相同部分设计在母版页中，普通的窗体页面应用母版页，可快速完成网站页面的设计。本任务以网站2为例，创建一个母版页，并应用到Web页面中。,任务4.3 母版页布局网站2页面,关键知识：母版页概念,母版页是一个网页模板，可以将母版页的风格应用到多个网页中。在Web应用程序创建母版页（Master）页面，像普通页面一样设计完母版页，并在母版页中需要添加一个或多个ContentPlaceHolder控件，该控件占位空间是应用了母版页的普通网页中的可编辑区，在编辑区中放置不同的网页内容，可快速完成风格一致的内容页面的制作。,创建并设计完母版页后，在创建Web窗体页面时勾选上母版页，即可创建基于母版页的网页，运行时，ASP.NET会自动地将两个页面进行整合，显示给用户。,任务4.3 母版页布局网站2页面,任务实施：,步骤见教材任务实施,项目5 新闻标题的显示,教学目标,知识教学目标,数据控件模板的设置,查询字符串传递参数,字符串子串的获取,链接样式的设置,日期格式的设置,分页设置,技能培养目标,熟练设置网站的新闻标题格式样式,掌握参数的传递与接收方式,目 录,任务5.1 设计新闻表数据库及读取新闻标题,1,任务5.2 使用查询字符串传递新闻标题参数,2,任务5.3 新闻标题的修改,3,任务5.4 显示前几条标题及分页显示内容,4,任务5.1 设计新闻表数据库及读取新闻标题,任务描述：,本任务以公司网站其中的一个新闻部分作为研究对象，分析内容，建立数据库，并建立关联的数据库表。新闻标题及内容等信息存储在数据库后，需要将内容显示到网页上。可通过数据控件GridView、DataList、ListView等显示所需要的内容，同时对内容的显示形式进行设置。,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据库设计与导出,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据控件模板（非模板控件的模板字段）,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据控件模板（模板控件）,任务5.1 设计新闻表数据库及读取新闻标题,关键知识：数据库设计与数据控件的应用,数据控件的样式,任务5.1 设计新闻表数据库及读取新闻标题,任务实施：创建数据库及表,任务5.1 设计新闻表数据库及读取新闻标题,任务实施：导出脚本,任务5.1 设计新闻表数据库及读取新闻标题,任务实施：读取数据库中文件标题,步骤见教材任务实施,任务5.2使用查询字符串传递新闻标题参数,任务描述：,点击新闻标题后，需要跳转到另一页面查看该新闻标题对应的详细内容信息，在页面跳转同时需要传递与该条新闻相关的参数，如文件标题名称或文件编号等。,新闻标题以链接的形式显示后，往往有默认的链接样式，但默认的链接样式可能不是满意的链接样式。因此，需要对标题链接重新设置链接样式。,任务5.2使用查询字符串传递新闻标题参数,关键知识：查询字符串,查询字符串是在URL的结尾附加的信息，它提供了一种维护状态信息的方法，它包含在对特定URL的HTTP请求中，不需要任何的服务器资源。几乎所有的浏览器和客户端设备均支持使用查询字符串传递值。,任务5.2使用查询字符串传递新闻标题参数,关键知识：,使用HttpRequest获取查询字符串参数值,接收查询字符串参数值的页面要读取传递过来的参数，可使用 HttpRequest对象的Params属性读取查询字符串，也可以用QueryString属性读取查询字符串值。,任务5.2使用查询字符串传递新闻标题参数,关键知识：,标题链接样式设计,任务5.2使用查询字符串传递新闻标题参数,任务实施：,设置新闻标题链接并传递参数,将标题转换成链接后的效果图,任务5.3 新闻标题的修改,任务描述：,一般来说，在网页中都会设定相应宽度的位置存放新闻标题信息，为了不影响网页的布局，当标题长度超过了网页设定的宽度时，需要在将标题从数据库读到网页时截掉后面的一部分字符。,在网页中往往还会在新闻标题的后面添加新闻发布日期，在标题的前面添加前缀图片。本任务除了对新闻标题长度进行控制外，还需要在标题处添加日期和前缀图片。,任务5.3 新闻标题的修改,关键知识：,字符串子串的获取,字符串s的子串的截取可通过s.Substring(s1,s2)方式获得,标题日期格式设置,空模板字段,任务5.3 新闻标题的修改,任务实施：截短太长的标题,任务5.3 新闻标题的修改,任务实施：添加标题日期,任务5.3 新闻标题的修改,任务实施：修改日期格式,任务5.3 新闻标题的修改,任务实施：添加标题前缀图片,任务5.4 显示前几条标题及分页显示内容,任务描述：,网页页面由于版面有限，在显示新闻标题时往往只显示最新的几条信息，其他的内容以分页形式或通过更多链接按钮进入相关链接页面获取。本任务包括：,只显示最新n条记录；,以分页形式显示标题信息。,任务5.4 显示前几条标题及分页显示内容,关键知识：,数据库查询获取前几条标题,分,页显示,任务5.4 显示前几条标题及分页显示内容,任务实施：,显示最新几条新闻,分页显示内容,任务5.4 显示前几条标题及分页显示内容,任务实施：设置分页属性,任务5.4 显示前几条标题及分页显示内容,任务实施：,项目6 读取并搜索新闻,科学出版社 主编 ：郭建东,教学目标,知识教学目标,获取查询字符串值,使用SqlConnection类创建和关闭数据库连接,使用SqlCommand执行对数据库的操作,使用SqlDataReader读取数据库查询结果,使用SqlDataAdapter与DataSet读取数据库查询结果,使用模糊查询获得搜索结果,技能