[互联网]ch04 网站设计

1、ahnu1第四章第四章网站设计网站设计2网站设计网站设计v4.1 母版页和内容页母版页和内容页v4.2 网站地图和导航网站地图和导航v4.3 主题和外观主题和外观v4.4 web部件部件3网站设计概述网站设计概述v站点设计三原则：站点设计三原则： 站点中网页的外观设计和内容应相互独立 站点要有统一的风格和布局 站点要为用户提供方便的站点导航44.1 母版页和内容页母版页和内容页54.1.1 母版页和内容页概述母版页和内容页概述vasp.net2.0提供了母版页和内容页功能来帮助提供了母版页和内容页功能来帮助帮助开发人员创建页面模板，实现网站一致性要帮助开发人员创建页面模板，实现网站一致性要求。

2、这个过程可总结为求。这个过程可总结为“两个包含，一个结合两个包含，一个结合”。v“两个包含两个包含”是指将页面内容分为公共部分和非是指将页面内容分为公共部分和非公共部分，且两者分别包含在两个文件中，公共公共部分，且两者分别包含在两个文件中，公共部分包含在母版页中，非公共部分包含在内容页部分包含在母版页中，非公共部分包含在内容页中。中。v“一个结合一个结合”是指通过控件应用和属性设置等行是指通过控件应用和属性设置等行为，将母版页和内容页结合起来最后将结果发给为，将母版页和内容页结合起来最后将结果发给客户端浏览器。客户端浏览器。6母版页母版页v母版页为具有扩展名母版页为具有扩展名.master的的

3、asp.net文件，文件，它可以包括静态文本、它可以包括静态文本、html元素和服务器控件。元素和服务器控件。母版页通常是用于布局，即定义网站中不同网页母版页通常是用于布局，即定义网站中不同网页的相同部分。的相同部分。v母版页代码和普通的母版页代码和普通的.aspx文件代码格式很相近，文件代码格式很相近，最关键的不同是母版页由特殊的最关键的不同是母版页由特殊的 master指令指令识别，该指令替换了用于普通识别，该指令替换了用于普通.aspx页的页的 page指令，格式如下：指令，格式如下： 7母版页代码结构母版页代码结构master page title8内容页内容页v内容页是以母版页为基础

4、，可以在内容页中添加内容页是以母版页为基础，可以在内容页中添加网站中的每个网页的不同部分。对于页面的非公网站中的每个网页的不同部分。对于页面的非公共部分，在母版页中使用一个或多个共部分，在母版页中使用一个或多个contentplaceholder控件来占位，而具体内控件来占位，而具体内容则放在内容页中。容则放在内容页中。v例如，如上例代码所示，母版页包含两个例如，如上例代码所示，母版页包含两个contentplaceholder控件，控件，main和和footer，用于占位。在内容页中，创建两个用于占位。在内容页中，创建两个content控件，控件，一个映射到一个映射到contentplace

5、holder控件控件main，而另一个映射到而另一个映射到contentplaceholder控件控件footer，如图，如图 4 1所示。所示。9母版页和内容页的结构母版页和内容页的结构 10母版页的运行过程母版页的运行过程v 在运行时，母版页是按照下面的步骤处理的：在运行时，母版页是按照下面的步骤处理的：1. 用户通过键入内容页的url来请求某页。2. 获取该页后，读取 page指令。如果该指令引用一个母版页，则也读取该母版页。如果这是第一次请求这两个页，则两个页都要进行编译。3. 包含更新的内容的母版页合并到内容页的控件树中。4. 各个content控件的内容合并到母版页中相应的cont

6、entplaceholder控件中。5. 浏览器中呈现得到的合并页。114.1.2 创建母版页创建母版页 v首先使用首先使用vwd创建一个普通的创建一个普通的web站点，然后站点，然后在站点根目录下创建一个母版页，默认的情况下在站点根目录下创建一个母版页，默认的情况下母版页的文件名为：母版页的文件名为：masterpage.master。母版页的扩展名是母版页的扩展名是.master，以，以.master为后缀为后缀的文件都是母版页。的文件都是母版页。12母版页的代码主要分成三个部分母版页的代码主要分成三个部分v第一部分是基本网页标记第一部分是基本网页标记v第二部分是网页上运行的脚本代码第二部

7、分是网页上运行的脚本代码v第三部分是第三部分是contentplaceholder控件控件13【例例 4 1】 这是母版页顶部这是母版页顶部 这是母版页底部这是母版页底部14创建母版页创建母版页v简单地说，每个母版页必须包含以下元素：简单地说，每个母版页必须包含以下元素： 基本的html和xml等web标记 代码的第一行是 contentplaceholder控件和它的id属性15创建内容页创建内容页v创建母版页后，接下来创建内容页。内容页实际创建母版页后，接下来创建内容页。内容页实际上是普通的上是普通的.aspx文件，包含除母版页外的其他文件，包含除母版页外的其他非公共部分。非公共部分。v对

8、于内容页有两个概念需要强调：一是内容页中对于内容页有两个概念需要强调：一是内容页中所有内容必须包含在所有内容必须包含在content控件中；二是内容控件中；二是内容页必须绑定母版页。页必须绑定母版页。16【例例 4 2】 这是内容页这是内容页17创建内容页创建内容页v简单地说，内容页应具有下列三个特点：简单地说，内容页应具有下列三个特点： 内容页中没有和标记，也没有、等这些web元素，这些元素都被放置在母版页。 在代码的第一行应声明所绑定的母版页 包含控件184.1.4 母版页和内容页的案例母版页和内容页的案例v作业：设计一个精品课程网站母版，功能要求如作业：设计一个精品课程网站母版，功能要求

9、如下：下：v（1）有一个固定的标题导航栏）有一个固定的标题导航栏v（2）要求有一个相同侧栏）要求有一个相同侧栏v（3）要求有一个相同的页脚）要求有一个相同的页脚v（4）至少包含三个页面）至少包含三个页面v以学号以学号+姓名的形式命名后压缩成姓名的形式命名后压缩成rar文件并提交文件并提交到到ftp作业中！作业中！19【例例 4 3】(母版页母版页) asp学习教程学习教程欢迎光临本网站欢迎光临本网站20【例例 4 3】(内容内容.aspx)母版页和内容页母版页和内容页网站网站地图和导航地图和导航主题主题和外观和外观21【例例 4 3】(母版页与内容页母版页与内容页.aspx)22母版页母版页v

10、母版页具有下面的优点：母版页具有下面的优点： 使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。234.1.5 嵌套母版页嵌套母版页v母版页是可以嵌套的。即在一个大的母版页中再母版页是可以嵌套的。即在一个大的母版页中再包含一个小的母版页，称之为子母版页。子母版包含一个小的母版页，称之为子母版页。子母版页的文件扩展名也

11、是页的文件扩展名也是.master，其中至少包含一，其中至少包含一个内容页。因为客户端浏览器是无法访问扩展名个内容页。因为客户端浏览器是无法访问扩展名为为.master的文件的。的文件的。244.2 网站地图和导航网站地图和导航v对于一个网站，特别是结构复杂，内容丰富的网对于一个网站，特别是结构复杂，内容丰富的网站，应为用户提供一个好的网站导航。好的网站站，应为用户提供一个好的网站导航。好的网站导航应可以使访问者在任何地方都可以清楚地了导航应可以使访问者在任何地方都可以清楚地了解自己的位置，且有好的、方便的途径返回首页解自己的位置，且有好的、方便的途径返回首页或上一级菜单。或上一级菜单。vas

12、p.net 2.0提供了一种新的技术来做网站导提供了一种新的技术来做网站导航，方便且快捷。在航，方便且快捷。在asp.net 2.0中实现网站中实现网站导航要涉及两个方面内容：网站地图和网站导航导航要涉及两个方面内容：网站地图和网站导航控件。控件。254.2.1 网站地图网站地图v为了使用为了使用asp.net 2.0的导航特点，必须利用的导航特点，必须利用一个标准的方法来描述网站中的每个网页，即网一个标准的方法来描述网站中的每个网页，即网站结构。这个标准的方法不仅要描述网站中每个站结构。这个标准的方法不仅要描述网站中每个页面的名称，还应描述出网站的逻辑结构。页面的名称，还应描述出网站的逻辑结

13、构。v网站地图是一种扩展名网站地图是一种扩展名.sitemap的的xml文件，文件，其中包括了站点结构信息。默认情况下站点地图其中包括了站点结构信息。默认情况下站点地图文件被命名为文件被命名为web.sitemap，并且存储在应用，并且存储在应用程序的根目录下。程序的根目录下。26【例例 4 4】 274.2.2 导航控件导航控件v创建一个反映站点结构的站点地图只完成了创建一个反映站点结构的站点地图只完成了asp.net站点导航系统的一部分。导航系统的站点导航系统的一部分。导航系统的另一部分是在另一部分是在asp.net网页中显示导航结构，网页中显示导航结构，这样用户就可以在站点内轻松地移动。

14、通过使用这样用户就可以在站点内轻松地移动。通过使用下列的下列的asp.net站点导航控件，在页面中建立站点导航控件，在页面中建立导航信息：导航信息： sitemappath控件 menu控件 treeview控件28sitemappath控件控件vsitemappath控件会显示一个导航路径，此路控件会显示一个导航路径，此路径为用户显示当前页的位置，并显示返回主页的径为用户显示当前页的位置，并显示返回主页的的路径。如在上述示例中将的路径。如在上述示例中将sitemappath控件控件添加到在线书店的添加到在线书店的“计算机网络计算机网络”页中，将显示页中，将显示如下内容，以超链接方式显示如下内

15、容，以超链接方式显示“主页主页”和和“计算计算机数据机数据”。 主页计算机书籍计算机网络29【例例 4 5】 30menu控件控件vsitemappath控件的实际意义在于可以准确定控件的实际意义在于可以准确定位当前位置以及浏览器路线，但作为导航控件而位当前位置以及浏览器路线，但作为导航控件而言，其导航功能还是有限的，因为无法实现用户言，其导航功能还是有限的，因为无法实现用户在不同页面之间快速跳转。在不同页面之间快速跳转。menu控件可以帮助控件可以帮助我们构建导航菜单。我们构建导航菜单。31【例例 4 6】 32【例例 4 7】33【例例 4 7】 34treeview控件控件vtreevi

16、ew控件和控件和menu控件在使用上非常相似，控件在使用上非常相似，但在表现形式上有很大的不同。该控件在页面中但在表现形式上有很大的不同。该控件在页面中是以树型结构来实现导航功能，主要用来显示分是以树型结构来实现导航功能，主要用来显示分级数据，如目录和文件目录。级数据，如目录和文件目录。vtreeview控件由一个或多个节点构成。树中的控件由一个或多个节点构成。树中的每一项被称为一个节点，由每一项被称为一个节点，由treenode对象表示。对象表示。每个每个treenode还可以包括一个或多个还可以包括一个或多个treenode对象。包含对象。包含treenode及其子节点及其子节点的层次结构

17、构成了的层次结构构成了treeview控件所呈现的树结控件所呈现的树结构。构。 35treeview节点类型节点类型 节点类型节点类型说明说明根节点根节点（root）该类型节点处于树形最高层，没有父该类型节点处于树形最高层，没有父节点，具有一个或多个子节点。节点，具有一个或多个子节点。父节点父节点（parent）该类型节点有一个父节点，有一个或该类型节点有一个父节点，有一个或多个子节点。多个子节点。叶节点叶节点（leaf）该类型节点处于树形最底层，没有子该类型节点处于树形最底层，没有子节点。节点。36【例例 4 9】 37【例例 4 10】 38导航控件导航控件v以上介绍了三个不同的以上介绍了

18、三个不同的asp.net 站点导航控件，站点导航控件，利用任何一个控件都可以轻松地在页面中建立导利用任何一个控件都可以轻松地在页面中建立导航信息：航信息： sitemappath：此控件显示导航路径，向用户显示当前页面的位置，并以链接的形式显示返回主页的路径。 menu：此控件显示一个可展开的菜单，让用户可以遍历访问站点中的不同页面。将光标悬停在菜单上时，将展开包含子节点的节点。 treeview：此控件显示一个树状结构或菜单，让用户可以遍历访问站点中的不同页面。单击包含子节点的节点可将其展开或折叠。394.3 主题和外观主题和外观v在开发任何在开发任何web应用时通常包含两个方面：站点应用时

19、通常包含两个方面：站点的外观设计和站点的功能。的外观设计和站点的功能。vasp.net 2.0包含了大量用于定制外观的新特包含了大量用于定制外观的新特性。其中，服务器端控件提供性。其中，服务器端控件提供style对象模型用对象模型用于定制字体、边界、背景前景颜色、宽度、高度于定制字体、边界、背景前景颜色、宽度、高度等信息。控件支持使用等信息。控件支持使用css定制其外观。同时还定制其外观。同时还可以将所有这些定制在一些可以将所有这些定制在一些skin文件里，并将文件里，并将skin文件放置在文件放置在theme文件夹中，反复使用。文件夹中，反复使用。404.3.1 css 级联样式表级联样式表

20、v级联样式表（级联样式表（css）是）是w3c为弥补为弥补html在显在显示属性设定上的不足而制定的一套扩展样式标准。示属性设定上的不足而制定的一套扩展样式标准。css标准中重新定义了标准中重新定义了html中原来文字的显示中原来文字的显示样式，并增加了一些新的概念，如类、层等，可样式，并增加了一些新的概念，如类、层等，可以实现对文字重叠、定位等。以实现对文字重叠、定位等。css还允许将样式还允许将样式定义单独存储在样式文件中，将显示的内容和显定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，这样可以将多个网页链接到示的样式定义分离，这样可以将多个网页链接到该样式表，从而为整个网站提

21、供一个通用的外观。该样式表，从而为整个网站提供一个通用的外观。41样式表定义样式表定义vcss样式表定义的基本语法如下：样式表定义的基本语法如下： selector property1 : value ; property2 : value2v其中：其中： selector是指要引用样式的对象，可以是一个或多个html标记（各个标记之间以逗号分开）。 一个或多个样式属性和属性的取值（value），组成样式规则。42内联样式表内联样式表v内联样式表是写在标记内的，只对所在标记有效。内联样式表是写在标记内的，只对所在标记有效。如：如： 这是内联样式，字体大小20pt,红色 这段没使用内联样式vvw

22、d提供了一个功能丰富的编辑器，用于编辑提供了一个功能丰富的编辑器，用于编辑页面上元素的内联样式。页面上元素的内联样式。43内部级联样式表内部级联样式表v利用利用标记将样式表嵌在标记将样式表嵌在html文件的头文件的头部。部。标记的属性标记的属性type用于指明样式的用于指明样式的类别，默认值为类别，默认值为text/css。内部样式表的作用。内部样式表的作用范围是本范围是本html文件。文件。44【例例 4 11】 css实例实例h1text-align:center; color:green;font-family:隶书隶书这段文字居中，绿色，隶书这段文字居中，绿色，隶书45外部级联样式表外

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

24、;font-size: 14pt; color: red;h1 color: #ff8800;font-family: 隶书隶书; 47【例例 4 12】 外部级联样式表示例外部级联样式表示例这是一个外部级联样式表这是一个外部级联样式表这行文字应该是红色的这行文字应该是红色的这段的底色应是黄色这段的底色应是黄色48css样式规则的优先级样式规则的优先级vcss是级联样式表，级联是指继承性，即在元素是级联样式表，级联是指继承性，即在元素中嵌套的元素可以继承外部元素的样式。级联的中嵌套的元素可以继承外部元素的样式。级联的优先级顺序是：浏览器缺省（优先级最低）、外优先级顺序是：浏览器缺省（优先级最低

25、）、外部级联样式表、内部级联样式表、内联样式表部级联样式表、内部级联样式表、内联样式表（优先级最高）。（优先级最高）。 494.3.2 主题和外观主题和外观v“主题主题”是指页面和控件外观属性设置的集合，是指页面和控件外观属性设置的集合，使用这些设置可以定义页面和控件的外观，然后使用这些设置可以定义页面和控件的外观，然后可以在某个可以在某个web应用程序中的所有页、整个应用程序中的所有页、整个web应用程序或服务器上的所有应用程序或服务器上的所有web应用程中应用程中一致地应用此外观。利用主题功能，开发人员可一致地应用此外观。利用主题功能，开发人员可以方便地为整个网站定义外观。以方便地为整个网

26、站定义外观。50外观文件外观文件v主题由一个文件组构成，其中可以包括外观文件、主题由一个文件组构成，其中可以包括外观文件、级联样式表文件、图片和其他资源等，主题中至级联样式表文件、图片和其他资源等，主题中至少包含一个外观文件。少包含一个外观文件。v外观文件的文件扩展名为外观文件的文件扩展名为.skin，其中包括对各，其中包括对各种服务器控件的属性设置。下面是一个外观文件种服务器控件的属性设置。下面是一个外观文件的源代码：的源代码：51主题的应用范围主题的应用范围v 可以定义单个可以定义单个web应用程序的主题，也可以定应用程序的主题，也可以定义供义供web服务器上所有应用程序使用的全局主服务器

27、上所有应用程序使用的全局主题。即主题可以分为两种类型：题。即主题可以分为两种类型：页面主题页面主题和和全局全局主题主题。从组成角度看，这两种主题没有任何区别，。从组成角度看，这两种主题没有任何区别，只是主题的应用范围不同。只是主题的应用范围不同。52外观文件组织方式外观文件组织方式组织依据组织依据文件夹截图文件夹截图说明说明根据根据skinid每个外观文件都包含具有每个外观文件都包含具有相同相同skinid的多个控件定的多个控件定义。这种方式适用于站点义。这种方式适用于站点页面较多，设置内容复杂页面较多，设置内容复杂的情况。的情况。根据控件根据控件类型类型每个外观控件都包含特点每个外观控件都包

28、含特点控件的一组外观定义。这控件的一组外观定义。这种方式适用于站点页面种种方式适用于站点页面种包含控件较少的情况。包含控件较少的情况。根据文件根据文件组成组成每个外观文件定义一个页每个外观文件定义一个页面中控件的外观。这种方面中控件的外观。这种方式适用于站点中包含页面式适用于站点中包含页面较少的情况。较少的情况。53【例例 4 13】(bluebits.skin)54【例例 4 14】(blue.aspx)无标题页无标题页 55设置主题设置主题v通常，为单个页面设置主题有两种方法：通常，为单个页面设置主题有两种方法： 一是在页头中设置theme属性值为主题名，主题中定义的控件外观将直接应用于网

29、页。 二是通过stylesheettheme为单个页面指定主题。v两者略有不同。使用两者略有不同。使用theme定义的主题设置页定义的主题设置页面时，主题中设置的控件外观属性优于页面中设面时，主题中设置的控件外观属性优于页面中设置的控件属性，即当定义的属性冲突时，按控件置的控件属性，即当定义的属性冲突时，按控件外观中定义的属性来显示。但使用外观中定义的属性来显示。但使用stylesheettheme时，控件外观的设置则可时，控件外观的设置则可被页面中设置的所替代。被页面中设置的所替代。56页面内容显示的优先级页面内容显示的优先级vstylesheet themevcss stylevelement sty