【asp精品源码栏目提醒】:网学会员为广大网友收集整理了,实践9_站点导航与母版页 - 其它资料,希望对大家有所帮助!
实践 9 站点导航与母版页准备工作:创建新网站,网站根目录在 E:mcmaspchap9实践 9.1 创建母版页与内容页一、创建母版页1、新建母版页方法:右击网站名“添加新项”,输入名字为 BackMaster.aspx2、母版页规划 Div idlogo Div idframe Div idsitemap Div idmiddle-left-top Div idcontent Div id middle-left-bottom Div idfriendlink Div idcopyright3、网站文件夹规则如下: 在在网站根目录下建立 CSS 和 images 文件夹, images 文件夹里放三幅图片,大小分别为 9576,96994,1811394、创建 CSS 文件夹并在其中创建一样式表,名为 StyleSheet.css,然后同时编辑母版页的 DIV 和 CSS源码如下: 您当前的位置是: 友情链接 nbspnbspnbspnbsp 曲阜师范大学nbspnbsp 日照职业学院nbspnbsp 山东体育学院nbspnbsp 济宁医学院nbspnbsp 山东水利学院nbspnbsp 山东外国语学院nbspnbsp 日照海事学院nbspnbsp Copyrightasp.net网上学堂工作室nbsp All Rights Reserved 鲁ICP证888888号样式表内容如下:logo width: 970px height: 93px background-image: url ../images/logo.bmp frame width: 970px margin: autositemap padding-left: 30px font-size: 13px line-height: 30px font-weight: boldcontent 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,并将下方“选择母版页”前方框中打上对勾选中,如下图所示:选择母版页为刚刚创建的 BackMaster.master观察内容页的源代码,如下图所示,与普通页面不同,没有等标签观察内容页的设计状态,只有一条 ContentPlaceHolder1 控件内容页中加入其他控件只能在这个 ContentPlaceHolder1 控件内部,不能出去。
运行内容页,结果如下:此时观察,内容页与母版页完美合一。
实践 9.2 访问母版页的属性与控件1、分别在母版页和内容页中添加控件如下:母版页:在站点地图处右侧添加一文本框,输入用户名用。
内容页:添加一 Label1 控件,显示从母版中输入的用户名;添加一文件框,用来设置母版页中显示的用户名;添加两个命令按钮2、编写代码如下:(1)在母版页的.cs 代码文件 BackMaster.master.cs 中添加如下代码设置公共属性 UserName,与文本框的值联系在一起。
(2)在内容页 content.aspx 的源码方式下,在Page 指令下方填加如下代码,以创建对此母版页的强类型引用(3)在内容页 content.aspx.cs 代码文件里编写如下代码:通过页面的 Master 属性来访问母版页中的公有属性和方法。
3、运行结果如下:(1)在母版页的文本框中输入用户名为 rzskysun,当点击内容页中的“读取用户名”按钮时,用户名会显示在后面。
(21)在内容页的“设置用户名”按钮的后面输入用户名为 mcm,当点击“设置用户名”按钮时,上方母版页的文本框中就显示了用户名为 mcm实践 9.3 站点地图与导航控件例如:网站的层次结构如下图所示一、创建站点地图文件方法:右击网站根目录 “添加新项” “站点地图”,文件名字默认为 web.sitmap,不要改默认的内容如下:根据网站的实际层次结构,添加修改文件内容如下:注意:间应正确的嵌套,标签下只能有一个标签,其余的都嵌套在这个里面。
在网站的根目录下创建 web.sitemap 里列出来的内容页 : (创建时套用母版页 BackMaster.master)jgxxcx.aspxjgxxxg.aspx xsxxcx.aspx xsxxxg.aspx bjxxcx.aspx bjxxxg.aspx二、利用 SiteMapPath 控件显示页面当前位置 ”后面拖放一个 SiteMapPath 控件(在工具箱的“导航”1、在母版页 BackMaster.master 中“您当前位置是:卡里)2、运行任意一个内容页即可,结果如下:三、利用 TreeView 控件和 SiteMapDataSource 控件以树形式格式显示 web.sitemap 中的分层数据 1、Step1:在母版页任意位置添加一个 SiteMapDataSource 控件 2、Step2:在母版页页面显示树形菜单的中间左边添加一个 TreeView 控件,并打开其智能菜单,选择数 据源为 SiteMapDataSource13、 Step3:通过其智能菜单选择“自动套用格式”或“显示行”等来设置其外观4、 运行任意一个内容页即可,结果如下:四、利用 Menu 控件以菜单格式显示 web.sitemap 中的分层数据 1、Step1:在母版页任意位置添加一个 SiteMapDataSource 控件或利用已有 SiteMapDataSource 控件 2、Step2:在母版页页面显示菜单的地方添加一个 Menu 控件,并打开其智能菜单,选择数据源为 SiteMapDataSource1,结果如下图所示,暂时只能看到根目录。
3、 Step3:通过其智能菜单选择“自动套用格式”来设置其外观 4、 运行任意一个内容页即可,结果如下:实践 9.4 主题与皮肤一、创建主题与皮肤 1、右击网站根目录添加新项新建名为 theme_skin 的页面。
2、创建主题:右击网站根目录添加 ASP.NET 文件夹主题,创建主题,名为 fashion3、为主题添加 CSS 文件:右击主题添加新项样式表名为 StyleSheet1.css 为 css 文件添加规则:在 body 后的大括号内右击,选择“生成样式”左边选择“背景”,右边设置 background-color 为紫色,然后点“确定”此时 body 里面有了规则,如下:4、为主题添加皮肤 skin 文件:右击主题名 fashion添加新项外观文件名为 SkinFile1.skin通过以下办法创建皮肤文件:a在普通页面文件“theme_skip”里拖一个 Label 控件,设置其相关属性如下;b在源码方式下复制其代码到 skin 文件中,并去掉其 ID 属性和 Text 属性,保存 skin 文件5、将主题应用到页面 theme_skin:方法是切换到 theme_skin 页面,在属性窗口中找到 DOCUMENT属性,下面选择 Theme 属性,并选择其属性值为 fashion6、在 theme_skin.aspx 页面上删除刚才的 Label1 标签,并重新加两个 Label 标签,并设置其 Text 属性为“用户名:”和“密码”,运行此页面,结果如下:可发现背景变成紫色,并且两个 Label 控件均为.skin 文件中设置的样子。
即以后只在在此页面添加Label 控件,都是这样的外观,此为默认外观; 如果想要不同的外观,可在.skin 文件中设置 Label1 标签的 SkinID 属性,然后在页面的 Label 控件中 也设置相应的 SkinID 属性,此为命令外观;如下图所示: a修改.skin 文件 btheme_skin.aspx 页面源码修改如下: 运行结果如下:二、动态换肤 1、创建第二个主题 方法:按以上创建 fashion 主题的步骤创建名为 classic 的主题,其中包含名为 StyleSheet2.css 的 CSS 文件与名为 SkinFile2.skin 的皮肤文件。
StyleSheet2.css 文件内规则如下: SkinFile2.skin 的皮肤文件内容如下: 创建完后文件结构如下:2、动态应用主题a将 theme_skin.aspx 页面的内容修改如下:添加两个命令按钮, Text 属性分别为“时尚”与“经典”b编写事件代码如下:c运行结果如下:前者为经典样式,后者为时尚样式。
上一篇:
在线考试系统设计
下一篇:
多年来只想说一句,我不怪你