实践9_站点导航与母版页

实践 9 站点导航与母版页 准备工作：创建新网站，网站根目录在 E:mcmaspchap9 实践 9.1 创建母版页与内容页 一、创建母版页 1、新建母版页 方法：右击网站名“添加新项” ，输入名字为 BackMaster.aspx 2、母版页规划 2 Div id=logo Div id=sitemap Div id=middle-left- top Div id= middle- left-bottom Div id=friendlink Div id=copyright Div id=content Div id=frame 3、网站文件夹规则如下： 在网站根目录下建立 CSS 和 images 文件夹，在 images 文件夹里放三幅图片，大小分别为 957*6，969*94，181*139 3 4、创建 CSS 文件夹并在其中创建一样式表，名为 StyleSheet.css，然后同时编辑母版页的 DIV 和 CSS 源码如下： 后台管理系统 您当前的位置是： 4 友情链接 曲阜师范大学 日照职业学院 山东体育学院 济宁医学院 山东水利学院 山东外国语学院 日照海事学院 C网上学堂工作室 All Rights Reserved 鲁ICP证888888号 样式表内容如下： #logo width: 970px; height: 93px; background-image: url( /images/logo.bmp ); #frame width: 970px; margin: auto; #sitemap padding-left: 30px; font-size: 13px; line-height: 30px; 5 font-weight: bold; #content padding: 15px 0px 15px 0px; width: 970px; .middlelefttop width: 180px; .middleleftbottom width: 150px; border-left-style: solid; border-left-width: 1px; border-left-color: #7AB271; border-right-style: solid; border-right-width: 1px; border-right-color: #7AB271; padding: 10px 5px 10px 5px; .bottom width: 80px; color: #000000; line-height: 30px; font-size: 12px; text-align: center; text-decoration: none; .bcopyright color: #666666; font-size: 12px; text-align: center; 注：母版页无法运行，必须创建相应的内容页，然后运行内容页才能看到效果 二、创建内容页 方法：右击网站名“添加新项” ，输入名字为 content，并将下方“选择母版页”前方框中打上对勾选中， 如下图所示： 6 选择母版页为刚刚创建的 BackMaster.master 观察内容页的源代码，如下图所示，与普通页面不同，没有等标签 观察内容页的设计状态，只有一条 ContentPlaceHolder1 控件 7 内容页中加入其他控件只能在这个 ContentPlaceHolder1 控件内部，不能出去。 运行内容页，结果如下： 此时观察，内容页与母版页完美合一。 实践 9.2 访问母版页的属性与控件 1、分别在母版页和内容页中添加控件如下： 母版页：在站点地图处右侧添加一文本框，输入用户名用。 内容页：添加一 Label1 控件，显示从母版中输入的用户名；添加一文件框，用来设置母版页中显示的用 户名；添加两个命令按钮 2、编写代码如下： （1）在母版页的.cs 代码文件 BackMaster.master.cs 中添加如下代码设置公共属性 UserName，与文本框的 8 值联系在一起。 （2）在内容页 content.aspx 的源码方式下，在 Page 指令下方填加如下代码，以创建对此母版页的强类 型引用 （3）在内容页 content.aspx.cs 代码文件里编写如下代码：通过页面的 Master 属性来访问母版页中的公有 属性和方法。 3、运行结果如下： （1）在母版页的文本框中输入用户名为 rzskysun，当点击内容页中的 “读取用户名”按钮时，用户名会 显示在后面。 （21）在内容页的“设置用户名”按钮的后面输入用户名为 mcm，当点击“设置用户名”按钮时，上方 9 母版页的文本框中就显示了用户名为 mcm 实践 9.3 站点地图与导航控件 例如：网站的层次结构如下图所示 一、创建站点地图文件 方法：右击网站根目录 “ 添加新项” “站点地图”，文件名字默认为 web.sitmap，不要改 默认的内容如下： 10 根据网站的实际层次结构，添加修改文件内容如下： 注意：间应正确的嵌套，标签下只能有一个标签，其余的都嵌套 在这个里面。 在网站的根目录下创建 web.sitemap 里列出来的内容页（创建时套用母版页 BackMaster.master）： jgxxcx.aspx, jgxxxg.aspx, xsxxcx.aspx, xsxxxg.aspx, bjxxcx.aspx, bjxxxg.aspx 二、利用 SiteMapPath 控件显示页面当前位置 1、在母版页 BackMaster.master 中“您当前位置是：”后面拖放一个 SiteMapPath 控件（在工具箱的“导 航”卡里） 2、运行任意一个内容页即可，结果如下： 三、利用 TreeView 控件和 SiteMapDataSource 控件以树形式格式显示 web.sitemap 中的分层数据 1、Step1:在母版页任意位置添加一个 SiteMapDataSource 控件 2、Step2:在母版页页面显示树形菜单的中间左边添加一个 TreeView 控件，并打开其智能菜单，选择 数据源为 SiteMapDataSource1 11 3、 Step3：通过其智能菜单选择 “自动套用格式”或“显示行”等来设置其外观 4、 运行任意一个内容页即可，结果如下： 12 四、利用 Menu 控件以菜单格式显示 web.sitemap 中的分层数据 1、Step1:在母版页任意位置添加一个 SiteMapDataSource 控件或利用已有 SiteMapDataSource 控件 2、Step2:在母版页页面显示菜单的地方添加一个 Menu 控件，并打开其智能菜单，选择数据源为 SiteMapDataSource1，结果如下图所示，暂时只能看到根目录。 3、 Step3：通过其智能菜单选择 “自动套用格式”来设置其外观 4、 运行任意一个内容页即可，结果如下： 实践 9.4 主题与皮肤 一、创建主题与皮肤 1、右击网站根目录添加新项新建名为 theme_skin 的页面。 2、创建主题：右击网站根目录添加 ASP.NET 文件夹主题，创建主题，名为 fashion 13 3、为主题添加 CSS 文件：右击主题添加新项样式表名为 StyleSheet1.css 为 css 文件添加规则：在 body 后的大括号内右击，选择“生成样式” 14 左边选择“背景” ，右边设置 background-color 为紫色，然后点“确定” 此时 body 里面有了规则，如下： 4、为主题添加皮肤 skin 文件：右击主题名 fashion添加新项外观文件名为 SkinFile1.skin 15 通过以下办法创建皮肤文件： a)在普通页面文件“theme_skip”里拖一个 Label 控件，设置其相关属性如下； b)在源码方式下复制其代码到 skin 文件中，并去掉其 ID 属性和 Text 属性，保存 skin 文件 5、将主题应用到页面 theme_skin：方法是切换到 theme_skin 页面，在属性窗口中找到 DOCUMENT 属性，下面选择 Theme 属性，并选择其属性值为 fashion 6、在 theme_skin.aspx 页面上删除刚才的 Label1 标签，并重新加两个 Label 标签，并设置其 Text 属 性为“用户名：”和“密码” ，运行此页面，结果如下： 可发现背景变成紫色，并且两个 Label 控件均为.skin 文件中设置的样子。即以后只在在此页面添加 Label 控件，都是这样的外观，此为默认外观； 16 如果想要不同的外观，可在.skin 文件中设置 Label1 标签的 SkinID 属性，然后在页面的 Label 控件中 也设置相应的 SkinID 属性，此为命令外观；如下图所示： a)修改.skin 文件 b)theme_skin.aspx 页面源码修改如下： 运行结果如下： 二、动态换肤 1、创建第二个主题 方法：按以上创建 fashion 主题的步骤创建名为 classic 的主题，其中包含名为 StyleSheet2.css 的 C