ASP中的样式主题和母版页.ppt

第8章ASP NET中的样式 主题和母版页 本章开始讨论ASP NET的页面创作技术 现如今的网页网站 WebBase应用程序越来越注重页面的外观和可操作性 一致的外观能给用户良好的印象 并能充分展示企业的形象和文化内涵 ASP NET提供了多种用于统一页面外观的方法 主要有 样式主题母版页本章内容有 如何在ASP NET中应用CSS样式如何创建和使用主题如何创建和使用母版页 8 1在ASP NET中应用CSS样式 随着Web的越来越盛行 Web设计也越来越趋向于整体与结构化 在早期 比如在1999年以前 Web站点的设计者们使用HTML语法来格式化显示样式 这种方式具有多种限制 比如在不同的浏览器中的显示效果不一致 缺乏标准的支持 HTML代码结构混乱等等 8 1 1创建样式 在ASP NET中 可以创建三种类型的样式 1 内联样式2 内部样式表3 外部样式表 8 1 2应用样式 现在己经创建好了CSS样式表文件 并定义了CSS样式规则 下面来为Web页面应用样式 VS2010中提供了一些非常实用的工具 用来非常精细的控制和修改CSS样式 8 2主题 读者一定非常了解Windows主题 当选择不同的主题设置时 Windows用户界面将会发生很大的变化 ASP NET提供了同样的主题的技术 这让用户可以对Web站点进行统一的控制 很多Blog站点都提供了主题选择功能 当选择不同的主题时会发现页面的很多方面发生了变化 比如控件的显示 页面的布局等等 很多初学者容易混淆主题与CSS的区别 CSS用于控制HTML格式的呈现 而主题则可以控制ASP NET服务器控件的很多属性 一些属性可能会生产生不一样的HTML输出 8 2 1创建主题 为了在ASP NET中创建主题 需要先创建一个名为App Themes的主题文件夹用来存放主题 该文件夹必须位于应用程序的根目录中 在该文件夹中可以存放多个主题设置 每个主题必须用一个单独的子文件夹进行存放 8 2 2创建命名皮肤 在上一节中为TextBox控件创建了一个皮肤 当在页面上应用主题后 会发现所有的TextBox控件的呈现外观都发生了改变 这种皮肤称为默认皮肤 开发人员可能想为某个指定的TextBox控件应用一种不同的皮肤 此时可以考虑使用命名皮肤 8 2 3处理主题冲突 当应用一个主题到页面上时 ASP NET会检查Web页面上的控件以及定义的皮肤文件以查看是否为控件定义了属性 如果在皮肤文件中存在匹配的皮肤定义 将覆盖控件本身的属性定义而使用皮肤定义 也就是说 如果页面上应用了皮肤 那么在皮肤中定义的属性将具有优先权 8 2 4为整个网站应用主题 除了为单个页面使用Theme或者是StyleSheetTheme属性设置主题之外 还可以为应用程序中的所有页面同时应用主题 可以在web config配置文件中配置Web应用程序的所有页面都可用的主题 8 2 5添加CSS样式 也可以在主题中添加样式表文件来控制页面中的HTML元素和ASP NET控件的外观 如果向主题文件夹中添加一个CSS文件 则CSS样式将被应用到应用了主题的任何页面 8 2 6动态应用主题 一些网站提供了让用户选择主题的功能 用户根据主题外观缩略图选择一个主题 将呈现相应的外观效果 在ASP NET中可以编程的方式动态的应用主题 只需要在PreInit事件中动态的指定Theme属性 就可以实现主题的动态切换效果 8 3母版页 母版页类似于Word中的模板 允许在多个页面中共享相同的内容 比如网站的LOGO 可能需要在多个页面中重用 则可以将其放在母版页中 在Dreamweaver中可以使用模板页 ASP NET的母版页与此类似 使用母版页可以简化维护 扩展和修改网站的过程 并能提供一致 统一的外观 8 3 1创建母版页 母版页的使用与普通页面类似 可以在其中放置文件或者图形 任何的HTML控件和Web控件 后置代码等等 母版页的扩展名以 master结尾 不能被浏览器直接查看 母版页必须在被其他页面使用后才能进行显示 8 3 2默认内容 当在母版页中定义了ContentPlaceHolder后 也可以在母版页中包含默认的内容 假如内容页中没有为母版页中的ContentPlaceHolder控件关联相应的Content控件的话 默认内容将进行显示 8 3 3母版页和相对路径 笔者将母版页和相对路径划为一小节来进行讨论 是有来由的 ASP NET中母版页处理相对路径有一些奇怪 不小心可就会让开发人员摸不着北 假如在母版页中只添加一些文本信息 这可能并不是任何问题 但是一个真正的网站或应用程序 通常都需要在母版页中添加很多图片 或者是其他的HTML标签来指向其他的资源 那么将会产生问题 8 3 4在web config中配置母版页 可以在web config配置文件中定义母版页 这样母版将被应用到网站中所有的文件或者是某个指定文件夹的文件 8 3 5修改母版页 使用母版页将会在多个内容页上显示相同的内容 一些页面可能想覆盖某些母模页中定义的显示 来提供自定义的显示 比如如果想修改内容页的标题 可以在Page区中修改Title属性 也可以通过编程的方式改变Title属性 除此之外还可以修改CSS中的样式规格 这是因为母版页中的HTML标签具有runat server 声明 表示己经被设置为服务器端Head标签 因此开发人员可以使用Page Header属性来访问Header中的属性 8 3 6动态加载母版页 可以为内容页动态的指定不同的母版页 在一些场合 这个功能非常实用 比如网站提供了些外观的交互式选择项 类似于现今比较流行的Blog系统 当用户选择不同的外观时 动态的切换母版页 给用户不一样的交互式体验 8 3 7母版页的嵌套 可以创建一个嵌套在其他母版页中的母版页 比如设计一个上下两栏面局的母版页 顶栏显示网站Logo 而底栏可能根据用户不同的需要呈现不同的页面布局 例如左右式布局或三栏式布局等等 这时可以考虑使用嵌套母版页 VS2010对嵌套母版页还提供了设计时的支持 8 4小结 本章介绍了ASP NET中的外观处理技术 首先讨论了CSS 演示了在VS2010中如何创建CSS 如何向ASP NET页面应用CSS 接下来讨论了ASP NET中的主题 主题可以为ASP NET中的服务器控件提供一致的外观 并可以方便的切换主题 本章讨论了创建皮肤文件 使用命名皮肤处理多个皮肤的冲突 在web config配置文件中 为整个网站应用主题以及如何动态的切换主题 母版页类似于Word中的模板 本章讨论了如何创建母版页 定义母版页的默认内容 如何处理母版页的相对路径 动态加载母版页以及母版页的多级嵌套技术 8 5常见面试题分析 8 5 1如何让