《ASPNET动态网页设计整套课件幻灯片完整版ppt教学教程最全电子讲义(最新).ppt》由会员分享，可在线阅读，更多相关《ASPNET动态网页设计整套课件幻灯片完整版ppt教学教程最全电子讲义(最新).ppt（373页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、ASP.NET动态网页设计项目教程(第三版)项目项目项目项目1 1 创建创建创建创建ASP.NETASP.NET网站网站网站网站ASP.NET动态网页设计项目教程(第三版)项目项目项目项目2 2 数据的绑定数据的绑定数据的绑定数据的绑定教学目标教学目标v知识教学目标知识教学目标掌握将属性、方法、变量表达式、数组绑定到控件或直接在前端页面显示的方法通过数据控件获取并管理数据库信息绑定值的获取技能培养目标技能培养目标掌握数据绑定的方式方法v能够通过数据控件和数据源控件管理数据库目目 录录任务2.1 绑定到属性1任务2.2 绑定到方法2任务2.3 绑定到变量3任务2.4 绑定到数组4任务2.5 绑定
2、到数据库数据5任务2.6 图表控件的数据绑定6任务任务2.1 绑定到属性绑定到属性任务描述：任务描述：本任务要将后置代码页面中定义的公共属性绑定到窗体页面上直接显示或绑定到服务器控件上，也可将一个控件的属性值绑定到另一个控件上。任务任务2.1 绑定到属性绑定到属性关键知识：关键知识：基于属性的数据绑定所涉及的属性必须包含get访问器。属性绑定书写方式：。vPage_Load事件中调用Page类的DataBind()方法。任务任务2.1 绑定到属性绑定到属性任务实施：任务实施：1.定义公共属性任务任务2.1 绑定到属性绑定到属性任务实施：任务实施：（绑定到公共属性）（绑定到公共属性）源代码视图中
3、进行属性绑定、后置代码页面绑定运行效果图如下：任务任务2.1 绑定到属性绑定到属性任务实施：任务实施：（绑定到控件属性）（绑定到控件属性）将一个控件的值绑定以另一个控件任务任务2.2 绑定到方法绑定到方法任务描述：任务描述：本任务将后置代码页面定义的方法绑定到前端页面的控件属性上，或通过直接绑定方法的方式在前端页面显示结果。任务任务2.2 绑定到方法绑定到方法关键知识：关键知识：v绑定书写方式为：或。也可以将方法绑定到服务器控件属性，服务器控件属性=进行绑定。vPage_Load事件中调用Page类的DataBind()方法。任务任务2.2 绑定到方法绑定到方法任务实施：任务实施：v定义方法任
4、务任务2.2 绑定到方法绑定到方法任务实施：任务实施：在源代码视图进行方法绑定任务任务2.2 绑定到方法绑定到方法任务实施：任务实施：v将方法绑定到服务器控件属性任务任务2.3 绑定到变量绑定到变量任务描述：任务描述：在前端页面通过绑定直接显示获得后置代码页面定义的公共变量值；在前端页面通过绑定获得后置代码页面定义的公共变量表达式的值。任务任务2.3 绑定到变量绑定到变量关键知识：关键知识：v变量绑定的方法：变量绑定到服务器控件控件属性=“或控件属性=vPage_Load事件中调用Page类的DataBind()方法。任务任务2.3 绑定到变量绑定到变量任务实施：任务实施：定义字符串变量任务任
5、务2.3 绑定到变量绑定到变量任务实施：任务实施：在源代码视图进行变量绑定任务任务2.3 绑定到变量绑定到变量任务实施：任务实施：绑定到变量表达式任务任务2.4 绑定到数组绑定到数组任务描述：任务描述：在后置代码页面定义数组后，在前端页面将数组绑定到各类列表控件；在后置代码页面定义数组后，在页面第一次加载的同时将数组绑定到各列表控件；读取绑定了数组的列表项控件值。任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：数组是一个多值的变量，能与数组进行绑定的主要是多值列表控件。v将后置代码页面定义的数组绑定到多值列表控件，有两种方式：v前端页面绑定到控件的属性：DataSource=；同时，在
6、后置代码文件的页面加载事件中添加Page.DataBind();语句。v在后置代码页面写如下代码：注意：每个控件可用于绑定的属性略有不同任务任务2.4 绑定到数组绑定到数组关键知识：常用多值列表控件关键知识：常用多值列表控件CheckBoxList多选列表框控件vRadioButtonList单选列表框控件vDropDownList下拉列表框控件ListBox列表控件vBulletedList符号列表控件任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：CheckBoxList控件控件DataSourceID、DataMember、DataTextField和DataValueField
7、用于从数据库中获取数据进行数据绑定。任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：CheckBoxList控件控件任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：CheckBoxList控件控件vCheckBoxList控件选项的主要属性有Text、Selected和Value，分别表示选项文本、选项的选中状态和选项值。v常用的事件。CheckBoxList控件的常用事件是SelectedIndexChanged，如果控件的AutoPostBack属性设为True，当控件选项的状态改变时，将触发该事件。任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：RadioButt
8、onList控件控件v基本属性与CheckBoxList控件相同v获得RadioButtonList1控件选中相关信息表达式如下：任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：ListBox控件控件v基本属性与CheckBoxList相似。v多选模式。SelectionMode为Single，表示只允许用户在列表框中选择一个选项。SelectionMode为为Multiple时，表示允许用户使用Ctrl键或Shift键在列表框中选择多个选项。v常用事件与CheckBoxList和RadioButtonList控件相同。任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：DropD
9、ownList控件控件DropDownList控件以下拉列表的方式显示选项，没有多选模式，其他的基本属性、获得选中项相关信息以及绑定相关的属性和常用事件与单选列表框控件相同。vDropDownList控件的DataSourceID、DataTextField和DataValueField可用于从数据库中获取数据进行数据绑定。任务任务2.4 绑定到数组绑定到数组关键知识：关键知识：BulletedList控件控件vBulletedList控件可以显示带项目符号的列表，列表项是ListItem对象。主要属性:vBulletStyle：设置列表项显示的符号。lBulletImageUrl：当Bull
10、etStyle属性为CustomImage时，用图片代替列表符号。1.DisplayMode1.获取选中项相关信息。获取BulletedList1控件第i项被选中项相关信息表达式如下：1.BulletedList1.Itemsi.TextlBulletedList1.Itemsi.Value任务任务2.4 绑定到数组绑定到数组任务实施任务实施：（前端页面绑定）前端页面绑定）1.定义数组任务任务2.4 绑定到数组绑定到数组任务实施：任务实施：（前端页面绑定）前端页面绑定）绑定到各类控件任务任务2.4 绑定到数组绑定到数组任务实施：任务实施：（前端页面绑定）前端页面绑定）v后台绑定任务任务2.4
11、绑定到数组绑定到数组任务实施：任务实施：（后台（后台绑定）绑定）v定义数组、绑定并赋值任务任务2.4 绑定到数组绑定到数组任务实施：任务实施：v获取单选按钮控件的值v获取下拉列表框控件的值任务任务2.4 绑定到数组绑定到数组任务实施：任务实施：v获取复选列表框选中项的值任务任务2.4 绑定到数组绑定到数组任务实施：任务实施：v获取列表框选中项的值v跳转到符号列表控件链接的页面。任务任务2.5 绑定到数据库数据绑定到数据库数据任务描述：任务描述：本任务主要实现数据库信息的读取、插入、编辑和删除，具体包括通过数据源控件连接到数据库的某个表，用列表控件显示数据库字段信息，读取并显示数据库中以二进制方
12、式存储的图片，读取并显示数据库中以路径方式存储的图片，使用不同的数据控件显示数据库信息，并实现对数据库信息的插入、删除和更新操作。任务任务2.5 绑定到数据库数据绑定到数据库数据关键知识：关键知识：ADO.NETASP.NET默认是通过ADO.NET来访问数据库的。ADO.NET是一种以面向对象的设计方法构建数据访问和操作的类库，通过ADO.NET类库，可方便操作各种各样的数据源，如数据库、文本文件、Excel文件和XML文件等。任务任务2.5 绑定到数据库数据绑定到数据库数据关键知识：关键知识：连接数据库的方法vSQLClient方法方法命名空间为System.Data.SQLClient，
13、用于访问MicrosoftSQLServer7.0及以上版本的数据库。vOleDB方法方法命名空间为System.Data.OleDb，允许.NET程序调用存在于OleDbDataProvider中的数据源。vODBC方法方法命名空间为System.Data.Odbc，允许.NET程序使用所有兼容的ODBC驱动程序。vOracle方法方法命名空间为System.Data.OracleClient，用于访问Oracle数据库。任务任务2.5 绑定到数据库数据绑定到数据库数据关键知识：关键知识：常用数据源控件vSqlDataSource控件vAccessDataSource控件vObjectDat
14、aSource控件vXmlDataSource控件vSiteMapDataSource控件vEntityDataSource控件vLinqDataSource控件。任务任务2.5 绑定到数据库数据绑定到数据库数据关键知识：数据绑定方法关键知识：数据绑定方法vEval方法是静态单向（只读）方法。vBind方法支持读/写功能，所以Bind函数用于双向（可更新）绑定。该方法可以检索数据绑定控件的值并将任何更改提交回数据库。任务任务2.5 绑定到数据库数据绑定到数据库数据关键知识：数据控件主要功能关键知识：数据控件主要功能ASP.NET4.0提供的数据显示控件主要有GridView、DetailsVi
15、ew、FormView和DataList，这些控件具有以下主要功能。1.提供了以下两种用于绑定到数据的选项：使用DataSourceID属性与数据源控件进行数据绑定使用DataSource属性进行数据绑定2.设置数据显示格式。3.编辑、删除、更新和插入数据。4.排序功能。5.模板功能。6.分页功能。任务任务2.5 绑定到数据库数据绑定到数据库数据关键知识：数据控件关键知识：数据控件vGridViewvDetailsViewvFormViewvDataViewvListViewvDataPager任务任务2.5 绑定到数据库数据绑定到数据库数据任务实施：使用数据源控件连接数据库任务实施：使用数据
16、源控件连接数据库任务任务2.5 绑定到数据库数据绑定到数据库数据任务实施：使用下拉列表控件显示数据任务实施：使用下拉列表控件显示数据任务任务2.5 绑定到数据库数据绑定到数据库数据任务实施：显示以路径方式存储的数据任务实施：显示以路径方式存储的数据库图片库图片显示雇员表中路径方式存储的雇员头像信息，步骤如下：v一、创建文件v二、配置数据源控件v三、完成数据源控件与数据控件的绑定。任务任务2.5 绑定到数据库数据绑定到数据库数据任务实施：插入、编辑和删除数据任务实施：插入、编辑和删除数据步骤如下：一、新建网页文件二、配置数据源控件三、显示数据库信息任务任务2.5 绑定到数据库数据绑定到数据库数据
17、任务实施：插入数据任务实施：插入数据任务任务2.5 绑定到数据库数据绑定到数据库数据任务实施：编辑数据任务实施：编辑数据任务任务2.5 绑定到数据库数据绑定到数据库数据任务实施：删除数据任务实施：删除数据任务任务2.6 图表控件的数据绑定图表控件的数据绑定任务描述：任务描述：获得Northwind数据库中每个种类的产品总数量，并以图片显示。涉及两张表：种类表和产品表，并对同一种类的产品进行数量统计。任务任务2.6 图表控件的数据绑定图表控件的数据绑定关键知识：关键知识：Chart控件控件ASP.NET的Chart控件可以向Web应用程序添加动态的数据绑定的图形，通过Chart控件制作不同类型的
18、图表，如柱形图、面积图、条形图、折线图、饼图等，可以通过修改绘图区以及添加边框、背景和图例定制图表的外观。Chart控件主要有下面三个组件。v系列（Series）：系列是数据点的集合，不同类型的图表呈现系列的方式不同。v图表区（Chararea）：定义绘制系列的绘图区。v数据点：系列内的一个数据点。v编写Chart控件的DataBound事件，在DataBound事件中利用Chart控件的DataManipulator属性的Sort方法可对图表任意轴上的系列进行升序或降序排序。任务任务2.6 图表控件的数据绑定图表控件的数据绑定任务实施：任务实施：步骤如下：v添加页面v配置数据源控件v将Cha
19、rt控件绑定到数据源控件ASP.NET动态网页设计项目教程(第三版)项目项目项目项目3 3 页面导航与视图切换页面导航与视图切换页面导航与视图切换页面导航与视图切换教学目标教学目标v知识教学目标知识教学目标使用CSS+DIV设置一级横向导航和竖向导航使用Menu控件建立一级横向导航和竖向导航使用Menu控件建立二级横向导航使用TreeView控件建立树状导航使用MultiView控件实现视图切换v技能培养目标技能培养目标根据页面设计需求，使用多种方式制作横向一级和多级导航根据页面设计需求，使用多种方式制作竖向一级和多级导航根据页面设计需要，制作多视图切换模块 目目 录录任务3.1 使用CSS+
20、DIV创建导航1任务3.2 使用Menu控件建立网站导航 2任务3.3 使用TreeView建立树状导航3任务3.4 使用MultiView实现多视图切换4任务3.5 站点地图应用56任务任务3.1 使用使用CSS+DIV创建导航创建导航任务描述：任务描述：本任务基于CSS+DIV完成横向导航和竖向导航的制作，导航块内容可以是列表项，也可以采用链接文字，通过外部样式使得导航块内容按需要的方式横向或竖向显示。任务任务3.1 使用使用CSS+DIV创建导航创建导航关键知识：导航样式关键知识：导航样式v浮动设置：采用ul-li列表项的形式制作横向导航时，关键点是需要设置每一个li列表项由默认的竖向排
21、列转成横向排列，通过CSS样式控制这种转向，需要设置li样式向左或向右浮动。v复合链接样式的设置：文字链接有默认的链接样式、鼠标经过样式和访问过后的样式，如果需要改变默认的样式，则需要对链接样式进行复合样式定义，两个样式如果一样，可用逗号隔开。外部样式的应用：本项目所有样式均保存在css文件夹下的样式文件中，需要在网页文件源代码视图的标签内添加对外部样式文件的引用。任务任务3.1 使用使用CSS+DIV创建导航创建导航任务实施：使用任务实施：使用ur列表制作横向导航列表制作横向导航任务任务3.1 使用使用CSS+DIV创建导航创建导航任务实施：使用任务实施：使用ur列表制作横向导航列表制作横向
22、导航任务任务3.1 使用使用CSS+DIV创建导航创建导航任务实施：使用超链接制作横向导航任务实施：使用超链接制作横向导航任务任务3.1 使用使用CSS+DIV创建导航创建导航任务实施：使用超链接制作横向导航任务实施：使用超链接制作横向导航任务任务3.1 使用使用CSS+DIV创建导航创建导航任务实施：制作竖向导航任务实施：制作竖向导航任务任务3.1 使用使用CSS+DIV创建导航创建导航任务实施：制作竖向导航任务实施：制作竖向导航任务任务3.2 使用使用Menu控件建立网站导航控件建立网站导航任务描述：任务描述：本任务主要是了解menu控件的基本属性，并能够使用menu控件建立一级横向导航、
23、二级横向导航、一级竖向导航和二级竖向导航。任务任务3.2 使用使用Menu控件建立网站导航控件建立网站导航关键知识：关键知识：Menu控件控件Menu控件是一个菜单控件，由一个或多个菜单子项（MenuItem）组成，并且菜单子项之间可以形成一定的层次关系。菜单控件包含两种菜单：静态菜单（StaticMenu）和动态菜单（DynamicMenu）。静态菜单总是一直显示在网页上充当一级菜单的作用，而动态菜单由菜单的父菜单弹出，充当二级菜单作用。Menu控件的Items属性表示Menu控件的所有菜单项，可以在设计视图中以静态的方式添加Menu控件的菜单。任务任务3.2 使用使用Menu控件建立网站导
24、航控件建立网站导航关键知识：关键知识：Menu常用属性常用属性1）Orientation属性：用于设置控件的呈现方向（Vertical、Horizontal。2）StaticDisplayLevels属性：用于设置静态菜单显示级别数。默认值是1。3）MaximumDynamicDisplayLevels属性：指定在静态显示层后应显示的动态显示菜单节点层数。4）DisappearAfter属性：设置菜单动态显示部分从显示到消失所需的时间长度。默认值为500毫秒。5）CssClass属性：可引用类样式。添加静态菜单项后可通过引用链接类样式实现导航的效果。6）StaticEnableDefaultP
25、opOutImage属性，该属性默认为True，有多级导航菜单时，菜单项之间会出现的间隔符号。设为False，则不出现间隔符号。7）StaticMenuStyle样式：可设置一级静态菜单项的样式8）DynamicMenuStyle样式：可设置除一级静态菜单项外的其它动态菜单的样式。任务任务3.2 使用使用Menu控件建立网站导航控件建立网站导航任务实施：建立横向导航任务实施：建立横向导航步骤见教材任务任务任务3.2 使用使用Menu控件建立网站导航控件建立网站导航任务实施：建立二级横向导航任务实施：建立二级横向导航步骤见教材任务任务任务3.2 使用使用Menu控件建立网站导航控件建立网站导航任
26、务实施：建立一级竖向导航任务实施：建立一级竖向导航步骤见教材任务任务任务3.2 使用使用Menu控件建立网站导航控件建立网站导航任务实施：建立二级竖向导航任务实施：建立二级竖向导航步骤见教材任务任务任务3.3 使用使用TreeView建立树状导航建立树状导航任务描述：任务描述：网站的后台管理主页面通常需要设置一个导航，通过该导航，使得管理员可链接到各个页面，从而实现数据库的插入、删除、更新和修改用户信息等任务，本任务使用TreeView控件建立一个管理员后台主页面的树状导航。任务任务3.3 使用使用TreeView建立树状导航建立树状导航关键知识：关键知识：TreeView控件控件TreeVi
27、ew控件由一个或多个节点构成，通过树状视图形式展示。可以将控件绑定到SiteMapDataSource控件上、绑定到XMLDataSource控件上和绑定到数据库上，树中的每个项都被称为一个节点，由TreeNode对象表示。每个节点都具有一个Text属性和一个Value属性。Text属性的值显示在TreeView控件中，而Value属性则用于存储有关该节点的任何附加数据。任务任务3.3 使用使用TreeView建立树状导航建立树状导航关键知识：关键知识：TreeView控件控件Expanded属性：指定默认情况下节点是否打开。vNavigateUrl属性：菜单被选中是被定位到的页面的Url。v
28、SelectAcion属性：指定节点被选中时执行的操作，例如展开和折叠。Text属性：节点项显示的文本。vValue属性：节点项的值。vTarget属性：设置为_blank，从空白页打开跳转的页面。CssClass属性：引用CSS类样式。vNodeIndent属性：设置节点的缩进量。vNodeStyle样式：设置节点的样式，包括类样式的引用、水平间距、字体等样式的设置。HoverNodeStyle样式：鼠标经过节点样式的设置。vExpandDepth：默认为FullExpand，当有多级菜单时可设置为只显示前面的级数。任务任务3.3 使用使用TreeView建立树状导航建立树状导航任务实现：任
29、务实现：步骤见教材任务任务任务3.4 使用使用MultiView实现多视图切换实现多视图切换任务描述：任务描述：在各类门户网站中通常会设计一个多视图切换层，如在一个布局位置，用户可通过单击切换按钮实现同一位置查看新闻或通知或公告等信息，如图3-14所示效果。本任务使用MultiView和View控件结合，实现多视图的切换。任务任务3.4 使用使用MultiView实现多视图切换实现多视图切换关键知识：关键知识：MultiView和和View在ASP.NET中，使用MultiView和View控件可以做出选项卡的效果，一个MultiView控件可以包含多个View控件，一个View控件相当于一个
30、选项卡。MultiView控件一次只能显示一个View视图，与按钮、链接按钮或图片按钮控件结合使用，可通过单击按钮，切换到不同的View控件，从而看到不同的内容。主要属性：Views和ActiveViewIndex按钮属性设置：CommandName属性和CommandArgument属性任务任务3.4 使用使用MultiView实现多视图切换实现多视图切换任务实施：任务实施：步骤如下：v添加样式文件和布局文件v定位并设置链接按钮v设置链接样式添加MultiView和View控件v设计链接标题样式v编写事件代码v效果图如下：任务任务3.5 站点地图应用站点地图应用任务描述：任务描述：根据网站的
31、文件结构创建站点地图，并依据站点地图与SiteMapPath控件结合，实现站点路径导航；与Menu控件和TreeView控件结合，实现页面导航。任务任务3.5 站点地图应用站点地图应用关键知识：站点地图控件关键知识：站点地图控件站点地图文件按站点的分层形式组织页面，用于描述站点的逻辑结构，根节点是SiteMap。可以为网站中的每个页面添加一个SiteMapNode元素，并通过嵌入SiteMapNode元素来创建层次结构。任务任务3.5 站点地图应用站点地图应用关键知识：站点地图控件关键知识：站点地图控件任务任务3.5 站点地图应用站点地图应用关键知识：关键知识：SiteMapPathSiteM
32、apPath控件自动从站点地图Web.sitemap文件中读取数据，提供了从当前位置沿页层次结构向上的跳转功能。任务任务3.5 站点地图应用站点地图应用任务实施：建立网站地图任务实施：建立网站地图任务任务3.5 站点地图应用站点地图应用任务实施任务实施：1.设置设置SiteMapPath控件控件2.设置设置Menu控件控件设置设置TreeView控件控件任务任务3.5 站点地图应用站点地图应用任务实施：任务实施：ASP.NET动态网页设计项目教程(第三版)项目项目项目项目4 4 网站前端页面设计网站前端页面设计网站前端页面设计网站前端页面设计科学出版社科学出版社 主编主编 ：郭建东：郭建东教学
33、目标教学目标v知识教学目标知识教学目标CSS+DIV布局网页外部样式的应用母版页的设计与应用v技能培养目标技能培养目标能够熟练应用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页面页面关键知识：使用关键知识：使用C
34、SS+DIV布局页面布局页面v公共类样式的设定v页面的导航设计v页面居中设计设置了层的宽度属性后，可将Div的样式margin属性值设为auto将层的上下外边距设为0，左右边距设为auto任务任务4.1 CSS+DIV布局网站布局网站1页面页面任务实施：任务实施：建立网站建立网站1主页面主页面一、建立网站及相关文件一、建立网站及相关文件二、公共样式设计二、公共样式设计三、总容器层设计三、总容器层设计四、页眉设计四、页眉设计五、内容区容器层设计五、内容区容器层设计六、左侧栏设计六、左侧栏设计七、右侧栏设计七、右侧栏设计八、页脚设计八、页脚设计任务任务4.1 CSS+DIV布局网站布局网站1页面页
35、面任务实施：任务实施：建立网站建立网站1主页面主页面任务任务4.1 CSS+DIV布局网站布局网站1页面页面任务实施：任务实施：建立网站建立网站1内容页面内容页面任务任务4.2 CSS+DIV布局网站布局网站2页面页面任务描述：任务描述：任务4.1中完成了一个企业网站的主页面和内容页的设计。实际网站的布局多种多样，本任务继续介绍另一个网站的前端页面设计过程。根据所给图片素材及页面效果图，完成如图4-3所示企业网站主页面和如图4-14所示内容页面的前端设计。任务任务4.2 CSS+DIV布局网站布局网站2页面页面关键知识：网站关键知识：网站2前端页面设计及导航设计前端页面设计及导航设计v根据所给
36、图片素材进行网页前端页面设计。本节内容根据静态网页的基础知识完成页面制作，使用CSS+DIV布局网站2主页面和内容页面。v导航设置：导航除了可项目3中的CSS+DIV和通过控件实现方式外，本节介绍通过图片背景+文字形式进行导航功能的实现，以椭圆图为背景，在椭圆背景图上添加文字并设置文字链接的方式设计导航，当鼠标经过背景图时背景图及文字均发生变化，需要编写导航链接样式和鼠标经过样式代码。任务任务4.2 CSS+DIV布局网站布局网站2页面页面任务实施：任务实施：建立网站建立网站2主页面主页面一、创建图片文件夹及网页文件一、创建图片文件夹及网页文件二、总容器层设计二、总容器层设计三、页眉设计三、页
37、眉设计四、整体内容区容器层设计四、整体内容区容器层设计五、左侧栏设计五、左侧栏设计六、右侧栏设计六、右侧栏设计七、页脚设计七、页脚设计任务任务4.2 CSS+DIV布局网站布局网站2页面页面任务实施：任务实施：建立网站建立网站2主页面主页面任务任务4.2 CSS+DIV布局网站布局网站2页面页面任务实施：任务实施：建立网站建立网站2内容页面内容页面任务任务4.3 母版页布局网站母版页布局网站2页面页面任务描述：任务描述：分析两个网站的主页面和内容页面，会发现网站主页面和内容页之间存在着布局相同、内容相同的部分。为了提高开发效率，可将一个网站中各网页的相同部分设计在母版页中，普通的窗体页面应用母
38、版页，可快速完成网站页面的设计。本任务以网站2为例，创建一个母版页，并应用到Web页面中。任务任务4.3 母版页布局网站母版页布局网站2页面页面关键知识：母版页概念关键知识：母版页概念v母版页是一个网页模板，可以将母版页的风格应用到多个网页中。在Web应用程序创建母版页（Master）页面，像普通页面一样设计完母版页，并在母版页中需要添加一个或多个ContentPlaceHolder控件，该控件占位空间是应用了母版页的普通网页中的可编辑区，在编辑区中放置不同的网页内容，可快速完成风格一致的内容页面的制作。v创建并设计完母版页后，在创建Web窗体页面时勾选上母版页，即可创建基于母版页的网页，运行
39、时，ASP.NET会自动地将两个页面进行整合，显示给用户。任务任务4.3 母版页布局网站母版页布局网站2页面页面任务实施：任务实施：步骤见教材任务实施步骤见教材任务实施ASP.NET动态网页设计项目教程(第三版)项目项目项目项目5 5 新闻标题的显示新闻标题的显示新闻标题的显示新闻标题的显示教学目标教学目标v知识教学目标知识教学目标数据控件模板的设置查询字符串传递参数字符串子串的获取链接样式的设置日期格式的设置v分页设置技能培养目标技能培养目标熟练设置网站的新闻标题格式样式掌握参数的传递与接收方式 目目 录录任务5.1 设计新闻表数据库及读取新闻标题1任务5.2 使用查询字符串传递新闻标题参数
40、2任务5.3 新闻标题的修改3任务5.4 显示前几条标题及分页显示内容4任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题任务描述：任务描述：本任务以公司网站其中的一个新闻部分作为研究对象，分析内容，建立数据库，并建立关联的数据库表。新闻标题及内容等信息存储在数据库后，需要将内容显示到网页上。可通过数据控件GridView、DataList、ListView等显示所需要的内容，同时对内容的显示形式进行设置。任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题关键知识：数据库设计与数据控件的关键知识：数据库设计与数据控件的应用应用v数据库设计与导
41、出任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题关键知识：数据库设计与数据控件的关键知识：数据库设计与数据控件的应用应用v数据控件模板（非模板控件的模板字段）任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题关键知识：数据库设计与数据控件的关键知识：数据库设计与数据控件的应用应用v数据控件模板（模板控件）任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题关键知识：数据库设计与数据控件的关键知识：数据库设计与数据控件的应用应用数据控件的样式任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题
42、任务实施：创建数据库及表任务实施：创建数据库及表任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题任务实施：导出脚本任务实施：导出脚本任务任务5.1 设计新闻表数据库及读取新闻设计新闻表数据库及读取新闻标题标题任务实施：读取数据库中文件标题任务实施：读取数据库中文件标题步骤见教材任务实施步骤见教材任务实施任务任务5.2使用查询字符串传递新闻标题参数使用查询字符串传递新闻标题参数任务描述：任务描述：1.点击新闻标题后，需要跳转到另一页面查看该新闻标题对应的详细内容信息，在页面跳转同时需要传递与该条新闻相关的参数，如文件标题名称或文件编号等。2.新闻标题以链接的形式显示后
43、，往往有默认的链接样式，但默认的链接样式可能不是满意的链接样式。因此，需要对标题链接重新设置链接样式。任务任务5.2使用查询字符串传递新闻标题参数使用查询字符串传递新闻标题参数关键知识：查询字符串关键知识：查询字符串1.查询字符串是在URL的结尾附加的信息，它提供了一种维护状态信息的方法，它包含在对特定URL的HTTP请求中，不需要任何的服务器资源。几乎所有的浏览器和客户端设备均支持使用查询字符串传递值。任务任务5.2使用查询字符串传递新闻标题参数使用查询字符串传递新闻标题参数关键知识：关键知识：使用HttpRequest获取查询字符串参数值v接收查询字符串参数值的页面要读取传递过来的参数，可
44、使用HttpRequest对象的Params属性读取查询字符串，也可以用QueryString属性读取查询字符串值。任务任务5.2使用查询字符串传递新闻标题参数使用查询字符串传递新闻标题参数关键知识：关键知识：标题链接样式设计任务任务5.2使用查询字符串传递新闻标题参数使用查询字符串传递新闻标题参数任务实施：任务实施：设置新闻标题链接并传递参数将标题转换成链接后的效果图任务任务5.3 新闻标题的修改新闻标题的修改任务描述：任务描述：一般来说，在网页中都会设定相应宽度的位置存放新闻标题信息，为了不影响网页的布局，当标题长度超过了网页设定的宽度时，需要在将标题从数据库读到网页时截掉后面的一部分字符
45、。v在网页中往往还会在新闻标题的后面添加新闻发布日期，在标题的前面添加前缀图片。本任务除了对新闻标题长度进行控制外，还需要在标题处添加日期和前缀图片。任务任务5.3 新闻标题的修改新闻标题的修改关键知识：关键知识：字符串子串的获取字符串子串的获取字符串s的子串的截取可通过s.Substring(s1,s2)方式获得v标题日期格式设置标题日期格式设置空模板字段空模板字段任务任务5.3 新闻标题的修改新闻标题的修改任务实施：截短太长的标题任务实施：截短太长的标题任务任务5.3 新闻标题的修改新闻标题的修改任务实施：添加标题日期任务实施：添加标题日期任务任务5.3 新闻标题的修改新闻标题的修改任务实
46、施：修改日期格式任务实施：修改日期格式任务任务5.3 新闻标题的修改新闻标题的修改任务实施：添加标题前缀图片任务实施：添加标题前缀图片任务任务5.4 显示前几条标题及分页显示内容显示前几条标题及分页显示内容任务描述：任务描述：网页页面由于版面有限，在显示新闻标题时往往只显示最新的几条信息，其他的内容以分页形式或通过更多链接按钮进入相关链接页面获取。本任务包括：v只显示最新n条记录；v以分页形式显示标题信息。任务任务5.4 显示前几条标题及分页显示内容显示前几条标题及分页显示内容关键知识：关键知识：v数据库查询获取前几条标题数据库查询获取前几条标题分分页显示页显示任务任务5.4 显示前几条标题及
47、分页显示内容显示前几条标题及分页显示内容任务实施：任务实施：显示最新几条新闻显示最新几条新闻v分页显示内容分页显示内容任务任务5.4 显示前几条标题及分页显示内容显示前几条标题及分页显示内容任务实施：设置分页属性任务实施：设置分页属性任务任务5.4 显示前几条标题及分页显示内容显示前几条标题及分页显示内容任务实施：任务实施：ASP.NET动态网页设计项目教程(第三版)项目项目项目项目6 6 读取并搜索新闻读取并搜索新闻读取并搜索新闻读取并搜索新闻科学出版社科学出版社 主编主编 ：郭建东：郭建东教学目标教学目标v知识教学目标知识教学目标获取查询字符串值使用SqlConnection类创建和关闭数
48、据库连接使用SqlCommand执行对数据库的操作使用SqlDataReader读取数据库查询结果使用SqlDataAdapter与DataSet读取数据库查询结果使用模糊查询获得搜索结果v技能培养目标技能培养目标能够使用数据控件和编辑方式读取并显示数据库的内容能够编写新闻搜索代码目目 录录任务6.1 获取标题参数1任务6.2 使用数据控件读取新闻内容2任务6.3 使用ADO.NET编程读取新闻内容3任务6.4 网页搜索4任务任务6.1 获取标题参数获取标题参数任务描述：任务描述：一般网站主页显示文章标题链接，点击标题链接后才能进入另一个页面查看文章内容，二个页面的转换需要进行一些参数的传递，
49、本任务讲解如何通过数据源控件方式进行参数接收、如何通过编写代码方式获取不同页面传递的参数。任务任务6.1 获取标题参数获取标题参数关键知识：页面间参数传递关键知识：页面间参数传递使用数据源控件传递参数在where子句对话框中设置参数，进行参数传递任务任务6.1 获取标题参数获取标题参数关键知识：页面间参数传递关键知识：页面间参数传递通过查询字符串传递参数直接传递查询字符串任务任务6.1 获取标题参数获取标题参数关键知识：页面间参数传递关键知识：页面间参数传递通过查询字符串传递参数编码后再传递查询字符串任务任务6.1 获取标题参数获取标题参数任务实施：任务实施：使用数据源控件获取查询字符串使用数
50、据源控件获取查询字符串Where子句对话框设置如下：子句对话框设置如下：任务任务6.1 获取标题参数获取标题参数任务实施：任务实施：使用使用Request获取查询字符串获取查询字符串任务任务6.2 使用数据控件读取新闻内容使用数据控件读取新闻内容任务描述：任务描述：在项目5中，用户可点击文件标题，然后将文件名参数传递到读取内容的页面。在任务6.1中获取了传递过来的fileid参数，本任务通过使用数据控件读取指定fileid标题的新闻内容。任务任务6.2 使用数据控件读取新闻内容使用数据控件读取新闻内容关键知识：关键知识：DataList控件控件编辑DataList控件的模板任务任务6.2 使用