网站设计精选教材.pptx

《网站设计精选教材.pptx》由会员分享，可在线阅读，更多相关《网站设计精选教材.pptx（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、ASP.NET程序设计程序设计 第四章第四章网站设计ASP.NET程序设计程序设计 网站设计网站设计母版页和内容页网站地图和导航主题和外观WEB部件ASP.NET程序设计程序设计 母版页和内容页母版页和内容页ASP.NET2.0提供了母版页和内容页功能来帮助帮助开发人员创建页面模板，实现网站一致性要求。这个过程可总结为“两个包含，一个结合”。“两个包含”是指将页面内容分为公共部分和非公共部分，且两者分别包含在两个文件中，公共部分包含在母版页中，非公共部分包含在内容页中。“一个结合”是指通过控件应用和属性设置等行为，将母版页和内容页结合起来最后将结果发给客户端浏览器。ASP.NET程序设计程序设

2、计 母版页母版页母版页为具有扩展名.master的ASP.NET文件，它可以包括静态文本、HTML元素和服务器控件。母版页通常是用于布局，即定义网站中不同网页的相同部分。母版页代码和普通的.aspx文件代码格式很相近，最关键的不同是母版页由特殊的 Master指令识别，该指令替换了用于普通.aspx页的 Page指令，格式如下：ASP.NET程序设计程序设计 母版页代码结构母版页代码结构ASP.NET程序设计程序设计 内容页内容页内容页是以母版页为基础，可以在内容页中添加网站中的每个网页的不同部分。对于页面的非公共部分，在母版页中使用一个或多个ContentPlaceHolder控件来占位，而

3、具体内容则放在内容页中。例如，如上例代码所示，母版页包含两个ContentPlaceHolder控件，Main和Footer，用于占位。在内容页中，创建两个Content控件，一个映射到ContentPlaceHolder控件Main，而另一个映射到ContentPlaceHolder控件Footer，如图 41所示。ASP.NET程序设计程序设计 母版页和内容页的结构母版页和内容页的结构 ASP.NET程序设计程序设计 母版页的运行过程母版页的运行过程在运行时，母版页是按照下面的步骤处理的：1.用户通过键入内容页的URL来请求某页。2.获取该页后，读取 Page指令。如果该指令引用一个母版页

4、，则也读取该母版页。如果这是第一次请求这两个页，则两个页都要进行编译。3.包含更新的内容的母版页合并到内容页的控件树中。4.各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中。5.浏览器中呈现得到的合并页。ASP.NET程序设计程序设计 创建母版页创建母版页 首先使用VWD创建一个普通的Web站点，然后在站点根目录下创建一个母版页，默认的情况下母版页的文件名为：MasterPage.master。母版页的扩展名是.master，以.master为后缀的文件都是母版页。ASP.NET程序设计程序设计【例【例 4 1】这是母版页顶部 这是母版页底部ASP.N

5、ET程序设计程序设计 创建母版页创建母版页简单地说，每个母版页必须包含以下元素：基本的HTML和XML等Web标记代码的第一行是ContentPlaceHolder控件和它的ID属性ASP.NET程序设计程序设计 创建内容页创建内容页创建母版页后，接下来创建内容页。内容页实际上是普通的.aspx文件，包含除母版页外的其他非公共部分。对于内容页有两个概念需要强调：一是内容页中所有内容必须包含在Content控件中；二是内容页必须绑定母版页。ASP.NET程序设计程序设计【例【例 4 2】这是内容页ASP.NET程序设计程序设计 创建内容页创建内容页简单地说，内容页应具有下列三个特点：内容页中没有

6、和标记，也没有、等这些Web元素，这些元素都被放置在母版页。在代码的第一行应声明所绑定的母版页包含控件ASP.NET程序设计程序设计【例【例 4 3】(母版页母版页)ASP学习教程欢迎光临本网站ASP.NET程序设计程序设计【例【例 4 3】(内容内容.aspx)母版页和内容页网站地图和导航主题和外观ASP.NET程序设计程序设计【例例 4 3】(母版页与内容页母版页与内容页.aspx)ASP.NET程序设计程序设计 母版页母版页母版页具有下面的优点：使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母

7、版页上使用控件来创建一个应用于所有页的菜单。通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。ASP.NET程序设计程序设计 嵌套母版页嵌套母版页母版页是可以嵌套的。即在一个大的母版页中再包含一个小的母版页，称之为子母版页。子母版页的文件扩展名也是.master，其中至少包含一个内容页。因为客户端浏览器是无法访问扩展名为.master的文件的。ASP.NET程序设计程序设计 网站地图和导航网站地图和导航对于一个网站，特别是结构复杂，内容丰富的网站，应为用户提供一个好的网站导航。好的网站导航应可以使访问者在任

8、何地方都可以清楚地了解自己的位置，且有好的、方便的途径返回首页或上一级菜单。ASP.NET 2.0提供了一种新的技术来做网站导航，方便且快捷。在ASP.NET 2.0中实现网站导航要涉及两个方面内容：网站地图和网站导航控件。ASP.NET程序设计程序设计 网站地图网站地图为了使用ASP.NET 2.0的导航特点，必须利用一个标准的方法来描述网站中的每个网页，即网站结构。这个标准的方法不仅要描述网站中每个页面的名称，还应描述出网站的逻辑结构。网站地图是一种扩展名.sitemap的XML文件，其中包括了站点结构信息。默认情况下站点地图文件被命名为Web.sitemap，并且存储在应用程序的根目录下

9、。ASP.NET程序设计程序设计【例【例 4 4】ASP.NET程序设计程序设计 导航控件导航控件创建一个反映站点结构的站点地图只完成了ASP.NET站点导航系统的一部分。导航系统的另一部分是在ASP.NET网页中显示导航结构，这样用户就可以在站点内轻松地移动。通过使用下列的ASP.NET站点导航控件，在页面中建立导航信息：SiteMapPath控件Menu控件TreeView控件ASP.NET程序设计程序设计 SiteMapPath控件控件SiteMapPath控件会显示一个导航路径，此路径为用户显示当前页的位置，并显示返回主页的的路径。如在上述示例中将SiteMapPath控件添加到在线书

10、店的“计算机网络”页中，将显示如下内容，以超链接方式显示“主页”和“计算机数据”。主页计算机书籍计算机网络ASP.NET程序设计程序设计【例【例 4 5】ASP.NET程序设计程序设计 Menu控件控件SiteMapPath控件的实际意义在于可以准确定位当前位置以及浏览器路线，但作为导航控件而言，其导航功能还是有限的，因为无法实现用户在不同页面之间快速跳转。Menu控件可以帮助我们构建导航菜单。ASP.NET程序设计程序设计【例【例 4 6】ASP.NET程序设计程序设计【例【例 4 7】ASP.NET程序设计程序设计【例【例 4 7】ASP.NET程序设计程序设计 TreeView控件控件T

11、reeView控件和Menu控件在使用上非常相似，但在表现形式上有很大的不同。该控件在页面中是以树型结构来实现导航功能，主要用来显示分级数据，如目录和文件目录。TreeView控件由一个或多个节点构成。树中的每一项被称为一个节点，由TreeNode对象表示。每个TreeNode还可以包括一个或多个TreeNode对象。包含TreeNode及其子节点的层次结构构成了TreeView控件所呈现的树结构。ASP.NET程序设计程序设计 TreeView节点类型节点类型 节点类型说明根节点（Root）该类型节点处于树形最高层，没有父节点，具有一个或多个子节点。父节点（Parent）该类型节点有一个父节

12、点，有一个或多个子节点。叶节点（Leaf）该类型节点处于树形最底层，没有子节点。ASP.NET程序设计程序设计【例【例 4 9】ASP.NET程序设计程序设计【例【例 4 10】ASP.NET程序设计程序设计 导航控件导航控件以上介绍了三个不同的ASP.NET 站点导航控件，利用任何一个控件都可以轻松地在页面中建立导航信息：SiteMapPath：此控件显示导航路径，向用户显示当前页面的位置，并以链接的形式显示返回主页的路径。Menu：此控件显示一个可展开的菜单，让用户可以遍历访问站点中的不同页面。将光标悬停在菜单上时，将展开包含子节点的节点。TreeView：此控件显示一个树状结构或菜单，让

13、用户可以遍历访问站点中的不同页面。单击包含子节点的节点可将其展开或折叠。ASP.NET程序设计程序设计 主题和外观主题和外观在开发任何Web应用时通常包含两个方面：站点的外观设计和站点的功能。ASP.NET 2.0包含了大量用于定制外观的新特性。其中，服务器端控件提供Style对象模型用于定制字体、边界、背景前景颜色、宽度、高度等信息。控件支持使用CSS定制其外观。同时还可以将所有这些定制在一些Skin文件里，并将Skin文件放置在theme文件夹中，反复使用。ASP.NET程序设计程序设计 CSS 级联样式表级联样式表级联样式表（CSS）是W3C为弥补HTML在显示属性设定上的不足而制定的一

14、套扩展样式标准。CSS标准中重新定义了HTML中原来文字的显示样式，并增加了一些新的概念，如类、层等，可以实现对文字重叠、定位等。CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，这样可以将多个网页链接到该样式表，从而为整个网站提供一个通用的外观。ASP.NET程序设计程序设计 样式表定义样式表定义CSS样式表定义的基本语法如下：Selector property1:value;property2:value2其中：Selector是指要引用样式的对象，可以是一个或多个HTML标记（各个标记之间以逗号分开）。一个或多个样式属性和属性的取值（value），组成样式规则

15、。ASP.NET程序设计程序设计 内联样式表内联样式表内联样式表是写在标记内的，只对所在标记有效。如：这是内联样式，字体大小20pt,红色这段没使用内联样式VWD提供了一个功能丰富的编辑器，用于编辑页面上元素的内联样式。ASP.NET程序设计程序设计 内部级联样式表内部级联样式表利用标记将样式表嵌在HTML文件的头部。标记的属性type用于指明样式的类别，默认值为text/css。内部样式表的作用范围是本HTML文件。ASP.NET程序设计程序设计【例【例 4 11】CSS实例h1text-align:center;color:green;font-family:隶书这段文字居中，绿色，隶书A

16、SP.NET程序设计程序设计 外部级联样式表外部级联样式表外部样式表是一个具有.css文件扩展名的纯文本文件，其中包含样式规则。使用标记可以将样式表链接到网页上。当多个HTML文件要共享样式表时，可以采用这种方法，使整个网站应用一致的样式。将样式与内容分开，方便了样式的定位和编辑。ASP.NET程序设计程序设计【例【例 4 12】p background-color:yellow;color:#000000;.text font-family:宋体;font-size:14pt;color:red;H1 color:#ff8800;font-family:隶书;ASP.NET程序设计程序设计【

17、例【例 4 12】外部级联样式表示例这是一个外部级联样式表这行文字应该是红色的这段的底色应是黄色ASP.NET程序设计程序设计 CSS样式规则的优先级样式规则的优先级CSS是级联样式表，级联是指继承性，即在元素中嵌套的元素可以继承外部元素的样式。级联的优先级顺序是：浏览器缺省（优先级最低）、外部级联样式表、内部级联样式表、内联样式表（优先级最高）。ASP.NET程序设计程序设计 主题和外观主题和外观“主题”是指页面和控件外观属性设置的集合，使用这些设置可以定义页面和控件的外观，然后可以在某个Web应用程序中的所有页、整个Web应用程序或服务器上的所有Web应用程中一致地应用此外观。利用主题功能

18、，开发人员可以方便地为整个网站定义外观。ASP.NET程序设计程序设计 外观文件外观文件主题由一个文件组构成，其中可以包括外观文件、级联样式表文件、图片和其他资源等，主题中至少包含一个外观文件。外观文件的文件扩展名为.skin，其中包括对各种服务器控件的属性设置。下面是一个外观文件的源代码：ASP.NET程序设计程序设计 主题的应用范围主题的应用范围可以定义单个Web应用程序的主题，也可以定义供Web服务器上所有应用程序使用的全局主题。即主题可以分为两种类型：页面主题和全局主题。从组成角度看，这两种主题没有任何区别，只是主题的应用范围不同。外观文件组织方式外观文件组织方式组织依据文件夹截图说明

19、根据SkinID每个外观文件都包含具有相同SkinID的多个控件定义。这种方式适用于站点页面较多，设置内容复杂的情况。根据控件类型每个外观控件都包含特点控件的一组外观定义。这种方式适用于站点页面种包含控件较少的情况。根据文件组成每个外观文件定义一个页面中控件的外观。这种方式适用于站点中包含页面较少的情况。ASP.NET程序设计程序设计【例【例 4 13】(BlueBits.skin)ASP.NET程序设计程序设计【例【例 4 14】(Blue.aspx)无标题页 ASP.NET程序设计程序设计 设置主题设置主题通常，为单个页面设置主题有两种方法：一是在页头中设置Theme属性值为主题名，主题中

20、定义的控件外观将直接应用于网页。二是通过StyleSheetTheme为单个页面指定主题。两者略有不同。使用Theme定义的主题设置页面时，主题中设置的控件外观属性优于页面中设置的控件属性，即当定义的属性冲突时，按控件外观中定义的属性来显示。但使用StyleSheetTheme时，控件外观的设置则可被页面中设置的所替代。ASP.NET程序设计程序设计 Web部件部件Web部件是一组集成服务器控件，用于创建网站使用户可以直接在浏览器定制页面。可以从三个方面定制个性化的网页。1.对页面的内容进行个性化设置2.对页面的布局进行个性化设置3.对控件的行为进行个性化设置ASP.NET程序设计程序设计 W

21、eb部件部件Web部件控件集中包含了大量控件，其中有一些控件是基本控件。基本控件是Web部件正常工作所必须的控件，是Web部件功能实现的核心。基本控件可分为两类：一类是用于管理页面中所有Web部件控件的WebPartManager。另一类是区域控件。区域是容器控件，是一种设计用来包含其他控件的复合控件 ASP.NET程序设计程序设计 区域控件区域控件WebPartZone控件：包含WebPart控件，从而形成Web部件应用程序的主用户界面。EditorZone控件：包含EditorPart控件，通过这些控件可以修改关联的WebPart控件的属性、布局、外观等。CatalogZone控件：包含CatalogPart控件，用户可以在此区域创建Web部件控件目录。ConnectionsZone控件：包含WebPartConnection控件，允许用户在区域中创建一个用户界面，以实现两个不同WebPart控件之间的通信连接。ASP.NET程序设计程序设计 Web部件显示模式部件显示模式BrowseDisplayMode（浏览模式）DesignDisplayMode（设计模式）EditDisplayMode（编辑模式）CatalogDisplayMode（目录模式）ConnectDisplayMode（连接模式）