网站设计56028

网站设计 母版页 主题和皮肤 网站导航 综合应用 目的 创建设计良好 外观一致 因而容易维护的Web页面 方法 使用母板页和内容页定义Web页面的全局外观 使用集中的基页来定义站点中所有页面的共同行为 创建ASP NET3 5主题来定义站点的外观 让用户可以在运行时选择他们喜欢的主题 创建皮肤 以便快速的在站点范围改变控件布局 用母版页MasterPage创建一致的页面布局 一致的页面布局例如整个网站的不同网页都包括同样的格局 同样的页头 同样的页脚 同样的导航栏 母版页的使用 在一个地方定义站点中所有页面的共同部分 即将共同的控件定义在一个masterpage上 其他网页只需要继承Masterpage即可 Masterpage的使用 母版页的好处减少重复操作 如要修改站点的布局 如将菜单从左边移到右边 只需修改母版页 基于母版页的页面就会自动进行相应修改 母版页与ASPX页面某种程度上母版页象正常的ASPX页面 既包含静态的HTML 也可包含服务器控件 但母版页并非真正的ASPX页面 它只能作为模板 而不能直接在浏览器中请求 母版页使用 Master指令 正常的ASPX页面使用 Page指令 母版页包含一个ContentPlaceHolder 定义可以被其他页面继承的区域 该区域内可以被其他页面用来摆放自己的控件 Masterpage的使用 内容页 最终页面 母版页 例MasterPage 10 master 添加母版页 master母版页可以放在任何地方 但一般将其放在单独的文件夹中 如MasterPages 添加ContentPlaceHolder控件 供不同页面使用的区域添加不同页面均具有的内容 如 adrotator添加Web窗体 选择母版页在content中 设计相应内容母版页中的ContentPlaceHolder控件在新的内容页中显示为Content控件 需深入研究的问题 母版页的属性 事件 方法的使用母版页的嵌套内容页访问母板页上的控件 FindControl 允许用户动态改变母版页以上内容请大家课下查阅相关资料 主题 主题由一组元素组成 外观 级联样式表 CSS 图像和其他资源 主题将至少包含外观 主题是在网站或Web服务器上的特殊目录中定义的 外观文件具有文件扩展名 skin 它包含各个控件的属性设置 控件外观设置类似于控件标记本身 但只包含要作为主题的一部分来设置的属性 有两种类型的控件外观 默认外观和命名外观 主题 skin是外观文件 是一组WebControl的属性设置的集合 提供一种简单的方法设置控件的样式属性 它包含各个控件 例如 Button Label TextBox或Calendar控件 的属性设置 例如 下面是Button控件的控件外观 与页面的控件不同 无ID属性 主题 正常外观与命名外观Skin文件对所有引入主题的页面有效 如果想让位于同一面上的同类控件有不同显示效果的话可以使用命名皮肤 例 Skin文件中对Button有以下定义 命名皮肤在网页文件中使用皮肤 该按钮对应颜色为 CCCCCC 按钮颜色为red 主题 使用skin文件的几点注意 1 一个 skin文件可以包含一个或多个控件类型的一个或多个控件外观 2 由于特殊原因不想向特定控件应用皮肤 可以通过设置控件的EnableTheming属性来禁用皮肤 3 外观文件上设置的WebControl的样式覆盖页面上设置的样式 4 一般来讲 影响外观的属性 BackColor ForeColor BorderColor等 可以应用于皮肤 而影响行为的属性 Enabled EnableviewState等 不能应用皮肤 主题 位于主题文件夹App Themes的CSS文件在主题有效的前提下可以控制整个网站的风格 注 css文件可以与skin文件结合使用 例 在css文件中定义了MyButton类 之后可以在skin文件中调用css文件中的MyButton类 位于主题文件夹App Themes的图像文件一般是为了配合CSS文件中的图像引用而存在 主题应用的几点注意 主题与母版页的区别 主题用于设置外观属性 母板页 MasterPage 既可以设置外观属性也可以设置网页布局 但主要用于设置网页布局 主题的应用 页面级别 在页面的 Page指令中加入Theme 或StyleSheetTheme 站点级别 Web config文件的元素中添加Theme属性 程序设置主题 主要应用于允许用户动态选主题 要在页面中动态设置主题 必须在页面生命周期Page Preinit事件之前 可在页面上设置EnableTheming false 或 true 以控制主题是否有效 操作步骤 添加ASP NET文件夹 App Themes在默认的文件夹中 如Theme2添加外观文件 skin aspx文件中 指定主题 创建简单的Theme FormControls skin 创建简单的Theme Orange aspxOrangePageEnteryourname 注意事项 一旦使用Theme 定义了一个页面的theme 页面中对控件进行的属性设置会失败如果希望页面中属性设置生效 需要在定义Theme的时候使用SytleSheetTheme 来代替直接使用Theme注意其与CSS相反 CSS是就近原则 而主题是大局意识 Themes为某一种控件指定外观不可被重载StyleSheetThemes为某一种控件指定外观可以被重载 总结 1 当创建新的Web站点时 总是先添加母版页 这样可以定义页面的全局外观 直接在其中添加相对静态的项 如页眉和页脚 并用ContentPlaceHolder控件为要填充的内容留下空间 使用母版页可以使以后少做很多工作 2 如果需要给复杂控件 TreeView Menu 或数据识别控件 GridView 添加了样式化的信息 就要考虑为他们创建一个皮肤 以便于从单个位置控制所有相似控件的布局 以使站点的更新更容易 3 创建皮肤或者直接在控件上设置样式属性时 首先考虑用CssClass属性 然后将所有与样式化相关的属性添加到站点或主题的CSS中 这样会减小页面的大小 使得以后更容易改变布局 创建网站导航 网站通常包含很多内容 这些内容被分置在网站的各个部分 为了让用户能够方便快捷的访问到网站的各个部分 需要在网站内部提供一套导航机制 创建网站地图 网站导航结构是记录网站应用的数据库 它被保存在Web SiteMap文件中 并具有相对固定的结构具有一个根元素SiteMap 该根元素表示此XML文件用来描述网络导航信息一个SiteMap至少包含一个SiteMapNode元素作为网络的节点元素 这些节点元素可以嵌套使用 每个节点元素表示网页的一个层次结构 并对应一个网页 SiteMapNode元素 每个SiteMapNode元素都具有以下3个属性Url Description TitleUrl属性 对应文件在虚拟目录中的路径 是网页访问时导航到网页的基础路径信息 Url也可以对应完全不同的网站 Title是导航条上所显示的导航文字信息Description属性可选 如果填写了这个属性 该属性内容会被作为ALT属性或者tooltip属性显示在网页上 导航控件 导航控件MenuTreeViewSiteMapPath基于网页导航数据库的导航控件控件可来源于xml文件 SiteMapPath控件 SiteMapPath控件显示用户当前所在页面的路径 并指出用户返回根目录的路径 Menu控件 Menu控件使用一个或多个MenuItem元素构成 其结构就是使用众多MenuItem元素来显示层次化的结构Menu具有两种结构 静态的Menu和动态的Menu静态的Menu一直显示在网页上动态的Menu平时以缩进的方式保存 单击弹出之后才显示在页面上 TreeView控件 TreeView控件也是分层次结构显示数据的控件 该控件可以非常好的完成数据显示功能 并且支持数据绑定 而且可实现高可定制化 在不回调服务器的情况下 可以实现客户端的诸多操作 2 TreeView Menu结合SiteMapDataSource实现网站导航 添加SiteMapDataSource添加TreeView 选择数据源 显示行当前页 添加SiteMapPath跳转到 添加Menu 选择数据源 视图 动态 静态 3 TreeView Menu自行定制的方式实现网站导航 TreeView 编辑节点 结合Text ShowCheckBox Checked NavigateUrl属性 所选节点成为子节点的同级节点 所选节点成为父节点的同级节点 添加子节点 添加根节点 3 TreeView Menu自行定制的方式实现网站导航 Menu 编辑菜单项 结合Text NavigateUrl属性 所选菜单成为子菜单的同级菜单 所选菜单成为上级菜单的同级菜单 添加子菜单 添加菜单 两种控件的对比 综合应用 例 网站整体布局风格和导航设计 1 功能设计网站有统一的母版 用户可以在两种母版间选择一种 单击鼠标即可切换母版 网站有不同风格的主题和皮肤 用户可以通过单击鼠标 实现网站换肤 网站拥有网站地图和导航 方便用户在不同网页间跳转 从而浏览整个网站 2 站点地图设计新建站点地图文件Webn sitemap 把前面示例中的网页串联进网站地图 其代码 综合应用 3 母版设计 1 新建母版页MyMaster1 master 切换到 设计 视图 按照图5 32所示进行母版页设计 放置一个表格用以布局 网页左侧上部分别放置SiteMapPath控件和Calendar控件 左侧下部放置一个TreeView控件 网页头部设计网站名称并在右侧添加一个Image控件 脚部放置版权信息等 在适当位置放置两个ContenPalceHolder控件 根据喜好放置其他控件 设置控件属性 界面如图所示 综合应用 3 母版设计界面如图所示 MyMaster1界面 综合应用 2 新建母版页MyMaster2 master 切换到 设计 视图 按照图5 33进行母版页设计 在网页头部设计网站名称并在左侧添加一个Image控件 脚部放置版权信息等 网页左侧上部放置一个TreeView控件 右侧上部放置一个Calendar控件 在适当位置放置两个ContenPalceHolder控件 根据喜好放置其他控件 设置控件属性 综合应用 界面如图所示 MyMaster2界面 综合应用 4 导航设计在母版MyMaster1中放置了SiteMapPath控件 该控件可自动利用网站地图文件 显示线性导航 在母版MyMaster1和MyMaster2中分别放置一个SiteMapDataSource控件 设置该控件绑定站点地图Web sitemap 设置MyMaster1中的TreeView控件的数据源为该母版中的SiteMapDataSource控件 设置MyMaster2中的Menu控件的数据源为该母版中的SiteMapDataSource控件 则TreeView Menu会绑定数据源 分别显示树形的 菜单式的导航 综合应用 4 导航设计效果如图所示 运行界面1运行界面2 综合应用 5 主题和皮肤设计 1 新建文件夹App Themes 右键单击App Themes 添加两个主题文件夹Theme1和Theme2 右键单击Theme1 添加新项 创建外观文件SkinFile1 skin 右键单击Theme1 添加新项 创建样式表文件cssfile1 css 同样的方法创建Theme2文件夹中的外观文件SkinFile2 skin和样式表文件cssfile2 css 2 借助一个临时性网页Temp aspx 在窗体上分别拖放TextBox Label Button Calendar AdRotator Image HyperLink等控件各一个 为了便于将来在皮肤文件中改造它 一行放置一个 在属性窗口中设置这些控件的外观属性 运行调试直至色调风格满意为止 综合应用 5 主题和皮肤设计 综合应用 3 打开cssfile1 css 在空白处单击右键 选择 添加样式规则 添加需要设置的样式 在生成的样式内单击右键 选择 生成样式 在弹出的对话框中分别设置 字体 块 等样式风格 重复这两步 直到符合需要的样式添加生成完毕 cssfile1 css文件中部分代码 4 重复上述步骤 2 和 3 设计另一个主题中的Theme2中的SkinFile2 skin和cssfile2 css SkinFile2 skin文件中部分代码如下 综合应用 综合应用 Cssfile2 css文件中部分代码如下 BODY PADDING RIGHT 10px PADDING LEFT 10px FONT SIZE 14px PADDING BOTTOM 0px MARGIN 10px0px10px0px PADDING TOP 0px FONT FAMILY Arial BACKGROUND COLOR 4d8ded WORD WRAP break word BLOCKQUOTE WIDTH 80 DIV RecentComme