[互联网]ch04 网站设计.ppt

1,第四章,网站设计,2,网站设计,4.1 母版页和内容页4.2 网站地图和导航4.3 主题和外观4.4 WEB部件,3,网站设计概述,站点设计三原则：站点中网页的外观设计和内容应相互独立站点要有统一的风格和布局站点要为用户提供方便的站点导航,4,4.1 母版页和内容页,5,4.1.1 母版页和内容页概述,ASP.NET2.0提供了母版页和内容页功能来帮助帮助开发人员创建页面模板，实现网站一致性要求。这个过程可总结为“两个包含，一个结合”。“两个包含”是指将页面内容分为公共部分和非公共部分，且两者分别包含在两个文件中，公共部分包含在母版页中，非公共部分包含在内容页中。“一个结合”是指通过控件应用和属性设置等行为，将母版页和内容页结合起来最后将结果发给客户端浏览器。,6,母版页,母版页为具有扩展名.master的ASP.NET文件，它可以包括静态文本、HTML元素和服务器控件。母版页通常是用于布局，即定义网站中不同网页的相同部分。母版页代码和普通的.aspx文件代码格式很相近，最关键的不同是母版页由特殊的 Master指令识别，该指令替换了用于普通.aspx页的 Page指令，格式如下：,7,母版页代码结构,Master page title,8,内容页,内容页是以母版页为基础，可以在内容页中添加网站中的每个网页的不同部分。对于页面的非公共部分，在母版页中使用一个或多个ContentPlaceHolder控件来占位，而具体内容则放在内容页中。例如，如上例代码所示，母版页包含两个ContentPlaceHolder控件，Main和Footer，用于占位。在内容页中，创建两个Content控件，一个映射到ContentPlaceHolder控件Main，而另一个映射到ContentPlaceHolder控件Footer，如图 41所示。,9,母版页和内容页的结构,10,母版页的运行过程,在运行时，母版页是按照下面的步骤处理的：用户通过键入内容页的URL来请求某页。获取该页后，读取 Page指令。如果该指令引用一个母版页，则也读取该母版页。如果这是第一次请求这两个页，则两个页都要进行编译。包含更新的内容的母版页合并到内容页的控件树中。各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中。浏览器中呈现得到的合并页。,11,4.1.2 创建母版页,首先使用VWD创建一个普通的Web站点，然后在站点根目录下创建一个母版页，默认的情况下母版页的文件名为：MasterPage.master。母版页的扩展名是.master，以.master为后缀的文件都是母版页。,12,母版页的代码主要分成三个部分,第一部分是基本网页标记第二部分是网页上运行的脚本代码第三部分是ContentPlaceHolder控件,13,【例 41】,这是母版页顶部 这是母版页底部,14,创建母版页,简单地说，每个母版页必须包含以下元素：基本的HTML和XML等Web标记代码的第一行是ContentPlaceHolder控件和它的ID属性,15,创建内容页,创建母版页后，接下来创建内容页。内容页实际上是普通的.aspx文件，包含除母版页外的其他非公共部分。对于内容页有两个概念需要强调：一是内容页中所有内容必须包含在Content控件中；二是内容页必须绑定母版页。,16,【例 42】,这是内容页,17,创建内容页,简单地说，内容页应具有下列三个特点：内容页中没有和标记，也没有、等这些Web元素，这些元素都被放置在母版页。在代码的第一行应声明所绑定的母版页包含控件,18,4.1.4 母版页和内容页的案例,作业：设计一个精品课程网站母版，功能要求如下：（1）有一个固定的标题导航栏（2）要求有一个相同侧栏（3）要求有一个相同的页脚（4）至少包含三个页面以学号+姓名的形式命名后压缩成rar文件并提交到ftp作业中！,19,【例 43】(母版页),ASP学习教程欢迎光临本网站,20,【例 43】(内容.aspx),母版页和内容页网站地图和导航主题和外观,21,【例 43】(母版页与内容页.aspx),22,母版页,母版页具有下面的优点：使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。,23,4.1.5 嵌套母版页,母版页是可以嵌套的。即在一个大的母版页中再包含一个小的母版页，称之为子母版页。子母版页的文件扩展名也是.master，其中至少包含一个内容页。因为客户端浏览器是无法访问扩展名为.master的文件的。,24,4.2 网站地图和导航,对于一个网站，特别是结构复杂，内容丰富的网站，应为用户提供一个好的网站导航。好的网站导航应可以使访问者在任何地方都可以清楚地了解自己的位置，且有好的、方便的途径返回首页或上一级菜单。ASP.NET 2.0提供了一种新的技术来做网站导航，方便且快捷。在ASP.NET 2.0中实现网站导航要涉及两个方面内容：网站地图和网站导航控件。,25,4.2.1 网站地图,为了使用ASP.NET 2.0的导航特点，必须利用一个标准的方法来描述网站中的每个网页，即网站结构。这个标准的方法不仅要描述网站中每个页面的名称，还应描述出网站的逻辑结构。网站地图是一种扩展名.sitemap的XML文件，其中包括了站点结构信息。默认情况下站点地图文件被命名为Web.sitemap，并且存储在应用程序的根目录下。,26,【例 44】,27,4.2.2 导航控件,创建一个反映站点结构的站点地图只完成了ASP.NET站点导航系统的一部分。导航系统的另一部分是在ASP.NET网页中显示导航结构，这样用户就可以在站点内轻松地移动。通过使用下列的ASP.NET站点导航控件，在页面中建立导航信息：SiteMapPath控件Menu控件TreeView控件,28,SiteMapPath控件,SiteMapPath控件会显示一个导航路径，此路径为用户显示当前页的位置，并显示返回主页的的路径。如在上述示例中将SiteMapPath控件添加到在线书店的“计算机网络”页中，将显示如下内容，以超链接方式显示“主页”和“计算机数据”。主页计算机书籍计算机网络,29,【例 45】,30,Menu控件,SiteMapPath控件的实际意义在于可以准确定位当前位置以及浏览器路线，但作为导航控件而言，其导航功能还是有限的，因为无法实现用户在不同页面之间快速跳转。Menu控件可以帮助我们构建导航菜单。,31,【例 46】,32,【例 47】,33,【例 47】,34,TreeView控件,TreeView控件和Menu控件在使用上非常相似，但在表现形式上有很大的不同。该控件在页面中是以树型结构来实现导航功能，主要用来显示分级数据，如目录和文件目录。TreeView控件由一个或多个节点构成。树中的每一项被称为一个节点，由TreeNode对象表示。每个TreeNode还可以包括一个或多个TreeNode对象。包含TreeNode及其子节点的层次结构构成了TreeView控件所呈现的树结构。,35,TreeView节点类型,36,【例 49】,37,【例 410】,38,导航控件,以上介绍了三个不同的ASP.NET 站点导航控件，利用任何一个控件都可以轻松地在页面中建立导航信息：SiteMapPath：此控件显示导航路径，向用户显示当前页面的位置，并以链接的形式显示返回主页的路径。Menu：此控件显示一个可展开的菜单，让用户可以遍历访问站点中的不同页面。将光标悬停在菜单上时，将展开包含子节点的节点。TreeView：此控件显示一个树状结构或菜单，让用户可以遍历访问站点中的不同页面。单击包含子节点的节点可将其展开或折叠。,39,4.3 主题和外观,在开发任何Web应用时通常包含两个方面：站点的外观设计和站点的功能。ASP.NET 2.0包含了大量用于定制外观的新特性。其中，服务器端控件提供Style对象模型用于定制字体、边界、背景前景颜色、宽度、高度等信息。控件支持使用CSS定制其外观。同时还可以将所有这些定制在一些Skin文件里，并将Skin文件放置在theme文件夹中，反复使用。,40,4.3.1 CSS 级联样式表,级联样式表（CSS）是W3C为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来文字的显示样式，并增加了一些新的概念，如类、层等，可以实现对文字重叠、定位等。CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，这样可以将多个网页链接到该样式表，从而为整个网站提供一个通用的外观。,41,样式表定义,CSS样式表定义的基本语法如下：Selector property1:value;property2:value2其中：Selector是指要引用样式的对象，可以是一个或多个HTML标记（各个标记之间以逗号分开）。一个或多个样式属性和属性的取值（value），组成样式规则。,42,内联样式表,内联样式表是写在标记内的，只对所在标记有效。如：这是内联样式，字体大小20pt,红色这段没使用内联样式VWD提供了一个功能丰富的编辑器，用于编辑页面上元素的内联样式。,43,内部级联样式表,利用标记将样式表嵌在HTML文件的头部。标记的属性type用于指明样式的类别，默认值为text/css。内部样式表的作用范围是本HTML文件。,44,【例 411】,CSS实例h1text-align:center;color:green;font-family:隶书这段文字居中，绿色，隶书,45,外部级联样式表,外部样式表是一个具有.css文件扩展名的纯文本文件，其中包含样式规则。使用标记可以将样式表链接到网页上。当多个HTML文件要共享样式表时，可以采用这种方法，使整个网站应用一致的样式。将样式与内容分开，方便了样式的定位和编辑。,46,【例 412】,p background-color:yellow;color:#000000;.text font-family:宋体;font-size:14pt;color:red;H1 color:#ff8800;font-family:隶书;,47,【例 412】,外部级联样式表示例这是一个外部级联样式表这行文字应该是红色的这段的底色应是黄色,48,CSS样式规则的优先级,CSS是级联样式表，级联是指继承性，即在元素中嵌套的元素可以继承外部元素的样式。级联的优先级顺序是：浏览器缺省（优先级最低）、外部级联样式表、内部级联样式表、内联样式表（优先级最高）。,49,4.3.2 主题和外观,“主题”是指页面和控件外观属性设置的集合，使用这些设置可以定义页面和控件的外观，然后可以在某个Web应用程序中的所有页、整个Web应用程序或服务器上的所有Web应用程中一致地应用此外观。利用主题功能，开发人员可以方便地为整个网站定义外观。,50,外观文件,主题由一个文件组构成，其中可以包括外观文件、级联样式表文件、图片和其他资源等，主题中至少包含一个外观文件。外观文件的文件扩展名为.skin，其中包括对各种服务器控件的属性设置。下面是一个外观文件的源代码：,51,主题的应用范围,可以定义单个Web应用程序的主题，也可以定义供Web服务器上所有应用程序使用的全局主题。即主题可以分为两种类型：页面主题和全局主题。从组成角度看，这两种主题没有任何区别，只是主题的应用范围不同。,52,外观文件组织方式,53,【例 413】(BlueBits.skin),54,【例 414】(Blue.aspx),无标题页,55,设置主题,通常，为单个页面设置主题有两种方法：一是在页头中设置Theme属性值为主题名，主题中定义的控件外观将直接应用于网页。二是通过StyleSheetTheme为单个页面指定主题。两者略有不同。使用Theme定义的主题设置页面时，主题中设置的控件外观属性优于页面中设置的控件属性，即当定义的属性冲突时，按控件外观中定义的属性来显示。但使用StyleSheetTheme时，控件外观的设置则可被页面中设置的所替代。,56,页面内容显示的优先级,StyleSheet themeCSS StyleElement StylesTheme,57,4.4 Web部件,Web部件是一组集成服务器控件，用于创建网站使用户可以直接在浏览器定制页面。可以从三个方面定制个性化的网页。对页面的内容进行个性化设置对页面的布局进行个性化设置对控件的行为进行个性化设置,58,Web部件,Web部件控件集中包含了大量控件，其中有一些控件是基本控件。基本控件是Web部件正常工作所必须的控件，是Web部件功能实现的核心。基本控件可分为两类：一类是用于管理页面中所有Web部件控件的WebPartManager。另一类是区域控件。区域是容器控件，是一种设计用来包含其他控件的复合控件,59,区域控件,WebPartZone控件：包含WebPart控件，从而形成Web部件应用程序的主用户界面。EditorZone控件：包含EditorPart控件，通过这些控件可以修改关联的WebPart控件的属性、布局、外观等。CatalogZone控件：包含CatalogPart控件，用户可以在此区域创建Web部件控件目录。ConnectionsZone控件：包含WebPartConnection控件，允许用户在区域中创建一个用户界面，以实现两个不同WebPart控件之间的通信连接。,60,Web部件显示模式,BrowseDisplayMode（浏览模式）DesignDisplayMode（设计模式）EditDisplayMode（编辑模式）CatalogDisplayMode（目录模式）ConnectDisplayMode（连接模式）,61,4.4.2 Web部件的应用,