Exit
template=Default.htm redirect=null nonjstitle=Webpages and Master pages nonjs=<div class="pagebackground"></div><div class="thepage"> <div class="thepageinner"> <div class="statictopright" id="StaticTopRightArea"><div class="statictoprightareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="SocialMedia"><table style="margin-left:100px;margin-right:100px;"><tbody><tr><td><iframe src="//www.facebook.com/plugins/like.php?href=login.marloweos.com&send=false&layout=box_count&width=45&show_faces=false&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45px; height:60px;" allowtransparency="true"></iframe></td><td><div id="gplus_button"><g:plusone size="tall" href="login.marloweos.com"></g:plusone></div></td></tr></tbody></table></div></div></div></div> <div class="topnavarea" id="TopNavArea"><div class="panelcontent"><div class="Inherit"></div></div></div> <div class="titlebanner" id="titlebanner"> <table border="0" width="100%"><tbody><tr><td width="100px"> <div class="logoarea" id="LogoArea"><div class="logoareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Image"><img src="../.images/tutorial_logo.gif?req-plain=1" alt=""></div></div></div></div> </td><td> <div class="titlearea"><table border="0"><tbody><tr><td><div id="titlearea"> <div class="sitetitlearea" id="SiteTitleArea"><div class="sitetitleareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Tag"><h1>Marlowe Online Server - WEB Interface</h1></div></div></div></div> <div class="pagetitlearea" id="PageTitleArea"><div class="pagetitleareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Tag"><h2>Webpages and Master pages</h2></div></div></div></div> <div class="sloganarea" id="SloganArea"><div class="sloganareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Text"><p>How to build websites with ease</p></div></div></div></div> </div></td></tr></tbody></table></div> </td><td> <div class="rightlogoarea" id="RightLogoArea"><div class="rightlogoareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Seasonal"></div></div></div></div> </td></tr></tbody></table> </div> <div class="clearcss"></div> <div class="sitenavarea" id="SiteNavArea"><div class="sitenavareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Menu"><ul class="menu"><li onclick="location.href='../Home.mhtm'"><a href="../Home.mhtm">Home</a></li><li onclick="location.href='../Minute_Page.mhtm'"><a href="../Minute_Page.mhtm">Minute Page</a></li><li onclick="location.href='../News.mhtm'"><a href="../News.mhtm">News</a></li><li onclick="location.href='../Site_Map.mhtm'"><a href="../Site_Map.mhtm">Site Map</a></li><li onclick="location.href='../Software_Testing.mhtm'"><a href="../Software_Testing.mhtm">Software Testing</a></li><li><a href="#" style="width:100%">Tests</a><ul class="menusub"><li><a href="#" style="width:100%">NewsArticles</a><ul class="menusub"><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[32].Open('../Tests/NewsArticles/DownTime.news', 'news')">DownTime</a></li><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[32].Open('../Tests/NewsArticles/NewSoftwarev2.news', 'news')">NewSoftwarev2</a></li><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[32].Open('../Tests/NewsArticles/NewSoftwarev3.news', 'news')">NewSoftwarev3</a></li><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[32].Open('../Tests/NewsArticles/NewsBugFix.news', 'news')">NewsBugFix</a></li></ul></li><li><a href="#" style="width:100%">Other</a><ul class="menusub"><li onclick="location.href='../Tests/Other/TestPage.mhtm'"><a href="../Tests/Other/TestPage.mhtm">TestPage</a></li></ul></li><li onclick="location.href='../Tests/Tabs.mhtm'"><a href="../Tests/Tabs.mhtm">Tabs</a></li></ul></li><li><a href="#" style="width:100%">Tutorial</a><ul class="menusub"><li onclick="location.href='../Tutorial/Home.mhtm'"><a href="../Tutorial/Home.mhtm">Home</a></li><li onclick="location.href='../Tutorial/Accounts.mhtm'"><a href="../Tutorial/Accounts.mhtm">Accounts</a></li><li onclick="location.href='../Tutorial/Administration_Page.mhtm'"><a href="../Tutorial/Administration_Page.mhtm">Administration Page</a></li><li onclick="location.href='../Tutorial/Users.mhtm'"><a href="../Tutorial/Users.mhtm">Users</a></li><li onclick="location.href='../Tutorial/Webpage_Edit.mhtm'"><a href="../Tutorial/Webpage_Edit.mhtm">Webpage Edit</a></li><li onclick="location.href='../Tutorial/Webpage_Styling.mhtm'"><a href="../Tutorial/Webpage_Styling.mhtm">Webpage Styling</a></li><li onclick="location.href='../Tutorial/Webpage_Wizard.mhtm'"><a href="../Tutorial/Webpage_Wizard.mhtm">Webpage Wizard</a></li><li onclick="location.href='../Tutorial/Webpages_and_Master_pages.mhtm'"><a href="../Tutorial/Webpages_and_Master_pages.mhtm">Webpages and Master pages</a></li></ul></li><li onclick="location.href='../Updates.mhtm'"><a href="../Updates.mhtm">Updates</a></li></ul><div class="menuframe" id="menuframe0"><div class="panelcontent"><div class="Inherit"></div></div></div></div></div></div></div> <div class="clearcss"></div> <div class="mainarea" id="MainArea"> <div class="sidearea" id="SideArea"><div class="sideareachild" style="display:inline-block;"><div class="foldablepaneltitle" id="foldtitle24053095" onclick="Packages.Library.$.ToggleFold('24053095')"><div class="paneltitle"><h3><a style="" name="vSideArea">Page Contents</a></h3></div><div id="foldhr24053095" style="text-align:center;vertical-align:center;font-weight:bold;font-size:xx-large;overflow:hidden;cursor:pointer;height:20px;width:100%;display:none;">ˇ</div></div><div class="foldablepanelarea" id="foldarea24053095"><div class="panelcontent"><div class="HeadingMenu"><div id="panel_headingmenu_0"><ul class="menu"><li><a href="#pnmenu_0_0_0_0_0">Webpages and Master pages</a></li><li><a href="#pnmenu_0_0_0_0_5">.Master Pages</a></li><li><a href="#pnmenu_0_0_0_0_11">Multiple Master Pages</a></li><li><a href="#pnmenu_0_0_0_0_13">Creating a Master Page</a></li><li><a href="#pnmenu_0_0_0_0_15">Editing a Master Page</a></li><li><a href="#pnmenu_0_0_0_0_17">Using the Master Page in a standard page</a></li></ul></div></div></div><div style="text-align:center;vertical-align:center;font-weight:bold;font-size:xx-large;overflow:hidden;cursor:pointer;height:20px;width:100%;" onclick="Packages.Library.$.ToggleFold('24053095')">ˆ</div></div></div><div class="sideareachild" style="display:inline-block;"><div class="paneltitle"><h3><a style="" name="vSideArea">Other sources of help</a></h3></div><div class="panelcontent"><div class="Menu"><ul class="menu"><li onclick="location.href='Home.mhtm'"><a href="Home.mhtm">Home</a></li><li onclick="location.href='Accounts.mhtm'"><a href="Accounts.mhtm">Accounts</a></li><li onclick="location.href='Administration_Page.mhtm'"><a href="Administration_Page.mhtm">Administration Page</a></li><li onclick="location.href='Users.mhtm'"><a href="Users.mhtm">Users</a></li><li onclick="location.href='Webpage_Edit.mhtm'"><a href="Webpage_Edit.mhtm">Webpage Edit</a></li><li onclick="location.href='Webpage_Styling.mhtm'"><a href="Webpage_Styling.mhtm">Webpage Styling</a></li><li onclick="location.href='Webpage_Wizard.mhtm'"><a href="Webpage_Wizard.mhtm">Webpage Wizard</a></li><li onclick="location.href='Webpages_and_Master_pages.mhtm'"><a href="Webpages_and_Master_pages.mhtm">Webpages and Master pages</a></li></ul><div class="menuframe" id="menuframe0"></div></div></div></div></div> <div class="bodyarea"><table border="0" style="width:100%"><tbody><tr><td><div id="BodyArea"><div class="bodyareachild" style="display:inline-block;"><div class="panelcontent"><div class="RichText"><div class="richtext" id="richtext_editor729903"><h2 class=""><a name="pnmenu_0_0_0_0_0">Webpages and Master pages</a></h2><div>The majority of your webpages will look very similar, and have some shared content (such as titles, logos etc). One way you could build your website is to make one page, and then keep copying it for each additional page you want and change the bits that should be different.</div><div>That's how a large number of existing websites are built, however, if you decide to change something, such as the logo, the titles, or the colour theme, you will find yourself making the same changes to all of the pages.</div><div>You may think that changing the styles and themes is something you'll rarely do, but very often in website construction, things evolve during the construction and the templates needs to change.</div><div>In order to overcome this issue, we use a '.master' page.</div><h3 class=""><a name="pnmenu_0_0_0_0_5">.Master Pages</a></h3><div>Master pages, (which must have the filename of '.master.mhtm') are a special type of page. They are hidden pages (hence the '.' prefix) and are never directly displayed.</div><div>They usually have a blank body, and just contain the panels that will be used on all other pages.</div><div>When an standard page is loaded, it will also load the '.master.mhtm' file from the same folder.</div><div>The standard page will render normally, but will pull in panels from the master page as well. Therefore your webpage only needs to contain the page title, and body that are unique to that page. Everything else comes from the master page.</div><div>This means that if you decide to change something in the master page, it will also take effect on all of the other pages without having to manually make the same changes over and over.</div><h2 class=""><a name="pnmenu_0_0_0_0_11">Multiple Master Pages</a></h2><div>In a nested folder structure of webpages, all of the '.master.mhtm' pages will be loaded from all parent folders. This means that a '.master' page can inherit from other .master pages in parent folders.</div><h2 class=""><a name="pnmenu_0_0_0_0_13">Creating a Master Page</a></h2><div>The easiest way to create a master page is through the 'Create Webpage Wizard' (see separate tutorial) and using the 'master page' option provided.</div><h2 class=""><a name="pnmenu_0_0_0_0_15">Editing a Master Page</a></h2><div>A master page can be edited in the same way as a standard page. See separate tutorials 'Web page content' and 'Webpage styling'.</div><h2 class=""><a name="pnmenu_0_0_0_0_17">Using the Master Page in a standard page</a></h2><div>By default, a standard page inherits everything from a master page. This is done by inserting a special type of panel, 'Inherit' in to each area.</div><div>The 'Inherit' panel can be removed if it is not needed.</div><div>Any styles on the master page are also applied, but are done before the page itself. So the page can potentially override any styles the master page has.</div></div></div></div></div></div></td></tr></tbody></table></div> </div> <div class="footerarea"> <div style="float:left;" id="FooterArea"><div class="footerareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Text"><p></p></div></div></div></div> </div> </div></div><div style="width:100%;text-align:right;background-color:#000000;opacity: 0.5;"><a style="color:#FFFFFF;font-size:small;text-decoration:none;" href="http://web.marloweos.com">Hosted by the Marlowe Online Server WEB Interface</a></div> nonjscss=/*Packages.$i.TextVars[48]*/.pageedit { display:none;}.thepage button { -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;color:#FFFFFF;border:0px solid #000000;background: #0A3755;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0A3755), to(#1EA5FF));background: -webkit-linear-gradient(#0A3755, #1EA5FF);background: -moz-linear-gradient(#0A3755, #1EA5FF);background: -ms-linear-gradient(#0A3755, #1EA5FF);background: -o-linear-gradient(#0A3755, #1EA5FF);background: linear-gradient(#0A3755, #1EA5FF);-pie-background: linear-gradient(#0A3755, #1EA5FF); border:0; padding:5px; cursor:pointer;}.thepage button:hover { color:#FFFFFF;background: #146EAA;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#146EAA), to(#28DCFF));background: -webkit-linear-gradient(#146EAA, #28DCFF);background: -moz-linear-gradient(#146EAA, #28DCFF);background: -ms-linear-gradient(#146EAA, #28DCFF);background: -o-linear-gradient(#146EAA, #28DCFF);background: linear-gradient(#146EAA, #28DCFF);-pie-background: linear-gradient(#146EAA, #28DCFF);}.button100{ margin:2px; width:100px; height:40px;}.tablevisibleborder { -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;color:#FFFFFF;border:0px solid #000000;background: #0A3755;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0A3755), to(#1EA5FF));background: -webkit-linear-gradient(#0A3755, #1EA5FF);background: -moz-linear-gradient(#0A3755, #1EA5FF);background: -ms-linear-gradient(#0A3755, #1EA5FF);background: -o-linear-gradient(#0A3755, #1EA5FF);background: linear-gradient(#0A3755, #1EA5FF);-pie-background: linear-gradient(#0A3755, #1EA5FF); width:100%;}.tablevisibleborder td { -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;-webkit-box-shadow: #666 0px 2px 50px;-moz-box-shadow: #666 0px 2px 50px;box-shadow: #666 0px 2px 50px;color:#000000;border:0px solid #000000;background: #64FFFF;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#64FFFF), to(#FFFFFF));background: -webkit-linear-gradient(#64FFFF, #FFFFFF);background: -moz-linear-gradient(#64FFFF, #FFFFFF);background: -ms-linear-gradient(#64FFFF, #FFFFFF);background: -o-linear-gradient(#64FFFF, #FFFFFF);background: linear-gradient(#64FFFF, #FFFFFF);-pie-background: linear-gradient(#64FFFF, #FFFFFF); -webkit-box-shadow: none; -moz-box-shadow: none;box-shadow: none; border:0; padding-left:5px; padding-right:5px; text-align:center;}a img { border:none;}/************ Text Styles ****************/h1 {color: #0A3755;font-family: sans-serif;}h2 {color: #0A3755;font-family: sans-serif;}h3 {color: #0A3755;font-family: sans-serif;}h4 {color: #0A3755;font-family: sans-serif;}h5 {color: #0A3755;font-family: sans-serif;}h6 {color: #0A3755;font-family: sans-serif;}h7 {color: #0A3755;font-family: sans-serif;text-align: right;;display:block;}h1 a {color: #0A3755;font-family: sans-serif;}h2 a {color: #0A3755;font-family: sans-serif;}h3 a {color: #0A3755;font-family: sans-serif;}h4 a {color: #0A3755;font-family: sans-serif;}h5 a {color: #0A3755;font-family: sans-serif;}h6 a {color: #0A3755;font-family: sans-serif;}h7 a {color: #0A3755;font-family: sans-serif;text-align: right;;display:block;}/* - ********* End of text styles ***********//************* Page areas *******************/.titlearea h1 { margin-top:5px; margin-bottom:5px;}.titlearea h2 { margin-top:5px; margin-bottom:5px;}h3 { font-family: auto; font-weight:normal;}.statictopright { position:fixed; right:0px; height:1px; text-align:right; z-index:1000;}.statictopright table { float:right; -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;-webkit-box-shadow: #666 0px 2px 50px;-moz-box-shadow: #666 0px 2px 50px;box-shadow: #666 0px 2px 50px;color:#000000;border:0px solid #000000;background: #64FFFF;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#64FFFF), to(#FFFFFF));background: -webkit-linear-gradient(#64FFFF, #FFFFFF);background: -moz-linear-gradient(#64FFFF, #FFFFFF);background: -ms-linear-gradient(#64FFFF, #FFFFFF);background: -o-linear-gradient(#64FFFF, #FFFFFF);background: linear-gradient(#64FFFF, #FFFFFF);-pie-background: linear-gradient(#64FFFF, #FFFFFF); border:hidden; opacity:0.9;}.statictopright tr { opacity:1;}.statictoprightareachild { text-align:right; float:right;}.pagebackground { position: fixed; left:0; top:0; z-index: -100000; width: 100%; height: 100%; -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;color:#C8FFFF;border:0px solid #041622;background-image: url('../.images/sm_gallery/IMAG0072.jpg');background-size:cover; border:hidden; margin:0;}body { margin:0;}.thepage { -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;-webkit-box-shadow: #666 0px 2px 50px;-moz-box-shadow: #666 0px 2px 50px;box-shadow: #666 0px 2px 50px;color:#000000;border:0px solid #000000;background: #64FFFF;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#64FFFF), to(#FFFFFF));background: -webkit-linear-gradient(#64FFFF, #FFFFFF);background: -moz-linear-gradient(#64FFFF, #FFFFFF);background: -ms-linear-gradient(#64FFFF, #FFFFFF);background: -o-linear-gradient(#64FFFF, #FFFFFF);background: linear-gradient(#64FFFF, #FFFFFF);-pie-background: linear-gradient(#64FFFF, #FFFFFF); border:hidden; width:1024px; margin-left: auto; margin-right: auto;}.thepageinner { width: 100%; height:100%;}div.mainarea { display:inline; width:100%; height:1%; overflow:hidden;}div.sidearea { width:200px; margin:5px; float:right; border-left:1px solid black;padding:10px;}.sidearea table { width:95%;}div.bodyarea { vertical-align:top; margin-top:10px;margin-bottom:10px; overflow-y:hidden;}div.logoarea { display:inline-block; width:200px; float:left;}div.rightlogoarea { display:inline-block; float:right;}div.titlearea { margin-left: 10px;}div.sloganarea { float:none; clear:both; font-style:italic;}.footerarea { -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;color:#FFFFFF;border:0px solid #000000;background: #0A3755;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0A3755), to(#1EA5FF));background: -webkit-linear-gradient(#0A3755, #1EA5FF);background: -moz-linear-gradient(#0A3755, #1EA5FF);background: -ms-linear-gradient(#0A3755, #1EA5FF);background: -o-linear-gradient(#0A3755, #1EA5FF);background: linear-gradient(#0A3755, #1EA5FF);-pie-background: linear-gradient(#0A3755, #1EA5FF); font-style:italic; padding: 0 0px 0 0px; margin-top: 0px; vertical-align:middle; display:inline-block; width:100%; clear:both;}.footerareachild { float:left; padding: 0 1px 0 5px; margin-top: 0px; line-height:0; white-space:normal;}.sideareachild { -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;color:#0A3755;border:0px solid #041622;background: none;background: -webkit-gradient(linear, 0 0, 0 bottom, from(none), to(none));background: -webkit-linear-gradient(none, none);background: -moz-linear-gradient(none, none);background: -ms-linear-gradient(none, none);background: -o-linear-gradient(none, none);background: linear-gradient(none, none);-pie-background: linear-gradient(none, none); margin-top:10px;margin-bottom:10px; padding:0px; overflow:hidden; width:100%;}.sideareachild .panelcontent { padding:5px;}.sideareachild h3 { text-align: center; margin-top:0;}.sideareachild h4 { text-align: center;}.sideareachild h5 { text-align: center;}.sideareachild h6 { text-align: center;}.sideareachild h7 { text-align: center;}.sidearea .paneltitle a { color:#0A3755;}.sidearea .paneltitle { -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;color:#0A3755;border:1px solid #041622;background: none;background: -webkit-gradient(linear, 0 0, 0 bottom, from(none), to(none));background: -webkit-linear-gradient(none, none);background: -moz-linear-gradient(none, none);background: -ms-linear-gradient(none, none);background: -o-linear-gradient(none, none);background: linear-gradient(none, none);-pie-background: linear-gradient(none, none); width:100%; padding:0px; border: none; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.paneltitle h3 { padding:0px; margin-top:0px; margin-bottom:0px;}img { \ margin-left:auto; margin-right:auto; display:block; width:100%;} .panel_button { -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow: #666 0px 2px 5px;-moz-box-shadow: #666 0px 2px 5px;box-shadow: #666 0px 2px 5px;color:#FFFFFF;border:2px solid #000000;background: #0A3755;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0A3755), to(#1EA5FF));background: -webkit-linear-gradient(#0A3755, #1EA5FF);background: -moz-linear-gradient(#0A3755, #1EA5FF);background: -ms-linear-gradient(#0A3755, #1EA5FF);background: -o-linear-gradient(#0A3755, #1EA5FF);background: linear-gradient(#0A3755, #1EA5FF);-pie-background: linear-gradient(#0A3755, #1EA5FF); cursor: pointer; } .panel_button .button_text { padding:3px; } .panel_button:hover { color:#FFFFFF;background: #146EAA;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#146EAA), to(#28DCFF));background: -webkit-linear-gradient(#146EAA, #28DCFF);background: -moz-linear-gradient(#146EAA, #28DCFF);background: -ms-linear-gradient(#146EAA, #28DCFF);background: -o-linear-gradient(#146EAA, #28DCFF);background: linear-gradient(#146EAA, #28DCFF);-pie-background: linear-gradient(#146EAA, #28DCFF); opacity:0.8; } .panel_button h1, .panel_button h2, .panel_button h3, .panel_button h4, .panel_button h5, .panel_button h6 { margin:0; padding:0; } .sidearea .menu{ white-space:nowrap; list-style:none; margin-left: 0px; text-decoration:none; padding:0; position: relative; left:0px; text-transform:capitalize; } .sidearea .menu li{ padding:0 5px 0 5px; cursor:pointer; position: relative; text-decoration:none; display:block; list-style:none; margin-bottom:2px; } .sidearea .menu li:hover { color:#FFFFFF;background: #146EAA;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#146EAA), to(#28DCFF));background: -webkit-linear-gradient(#146EAA, #28DCFF);background: -moz-linear-gradient(#146EAA, #28DCFF);background: -ms-linear-gradient(#146EAA, #28DCFF);background: -o-linear-gradient(#146EAA, #28DCFF);background: linear-gradient(#146EAA, #28DCFF);-pie-background: linear-gradient(#146EAA, #28DCFF); } .sitenavarea .menu a, .topnavarea .menu a, .statictopright .menu a{ color:#FFFFFF; text-decoration:none; } .sidearea .menu a{ color:#0A3755; text-decoration:none; font-weight:none; text-wrap:normal; white-space:normal; } .menusub a{ color:#FFFFFF; text-decoration:none; } .sitenavarea .menu, .topnavarea .menu, .statictopright .menu{ -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;color:#FFFFFF;border:0px solid #000000;background: #0A3755;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0A3755), to(#1EA5FF));background: -webkit-linear-gradient(#0A3755, #1EA5FF);background: -moz-linear-gradient(#0A3755, #1EA5FF);background: -ms-linear-gradient(#0A3755, #1EA5FF);background: -o-linear-gradient(#0A3755, #1EA5FF);background: linear-gradient(#0A3755, #1EA5FF);-pie-background: linear-gradient(#0A3755, #1EA5FF); text-transform:capitalize; padding:0; margin-top:0; margin-left: 0px; margin-bottom:0; width:100%; list-style:none; display:inline-block; } .sitenavarea .menu li, .topnavarea .menu li, .statictopright .menu li{ margin-left:0px; border:none; cursor:pointer; float:left; padding:3px 0 3px 0; width: 155px; height: 25px; text-align:center; vertical-align: middle; } .sitenavarea .menu li:hover, .topnavarea .menu li:hover, .statictopright .menu li:hover { color:#FFFFFF;background: #146EAA;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#146EAA), to(#28DCFF));background: -webkit-linear-gradient(#146EAA, #28DCFF);background: -moz-linear-gradient(#146EAA, #28DCFF);background: -ms-linear-gradient(#146EAA, #28DCFF);background: -o-linear-gradient(#146EAA, #28DCFF);background: linear-gradient(#146EAA, #28DCFF);-pie-background: linear-gradient(#146EAA, #28DCFF); } .sitenavareachild { width:100%; } .menusub { -webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;color:#FFFFFF;border:0px solid #000000;background: #0A3755;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0A3755), to(#1EA5FF));background: -webkit-linear-gradient(#0A3755, #1EA5FF);background: -moz-linear-gradient(#0A3755, #1EA5FF);background: -ms-linear-gradient(#0A3755, #1EA5FF);background: -o-linear-gradient(#0A3755, #1EA5FF);background: linear-gradient(#0A3755, #1EA5FF);-pie-background: linear-gradient(#0A3755, #1EA5FF); display:none; position:relative; padding-left:0; margin-top:5.5px; left:0px; z-index:100; } .sitenavarea .menu li:hover > ul, .topnavarea .menu li:hover > ul, .statictopright .menu li:hover > ul{ display:table-cell; } .sidearea li:hover > ul{ display:table-cell; position:absolute; margin-top:-20px; margin-left:170px; padding-left:0px; } .menusub li { position:relative; display:list-item; padding-left:5px; list-style:none; left:0px; text-align:left; clear:both; z-index:100; width:150px; margin-left:0px; } .sitenavarea .menusub li > ul, .topnavarea .menusub li > ul, .statictopright .menusub li > ul{ display:none; } .menusub li:hover > ul{ position:absolute; display:table-cell; padding-left:0px; margin-top:-18px; margin-left:155px; } .menuselected { font-weight:bold; text-decoration:underline; } .menuframe { position:fixed; top:0; left:0; padding-top:2%; padding-left:20%; padding-right:20%; width:60%; display:none; z-index:1000; } .menuframe iframe{ position:relative; margin:0; background-color:#FFFFFF; display:block; } nonjsheadhtml= lastedit=1336310414935 lasteditor=Admin var page = {Version: 3,Areas: {vPageTitleArea: [{type: "Tag",data: {tag: "h2",content: "Webpages and Master pages"},cache: {},id: 862909,linebreak: 1}],vBodyArea: [{type: "RichText",data: {richtext: "<h2 class=\\q\\q>Webpages and Master pages<\\lh2><div>The majority of your webpages will look very similar, and have some shared content (such as titles, logos etc). One way you could build your website is to make one page, and then keep copying it for each additional page you want and change the bits that should be different.<\\ldiv><div>That\\ss how a large number of existing websites are built, however, if you decide to change something, such as the logo, the titles, or the colour theme, you will find yourself making the same changes to all of the pages.<\\ldiv><div>You may think that changing the styles and themes is something you\\sll rarely do, but very often in website construction, things evolve during the construction and the templates needs to change.<\\ldiv><div>In order to overcome this issue, we use a \\s.master\\s page.<\\ldiv><h3 class=\\q\\q>.Master Pages<\\lh3><div>Master pages, (which must have the filename of \\s.master.mhtm\\s) are a special type of page. They are hidden pages (hence the \\s.\\s prefix) and are never directly displayed.<\\ldiv><div>They usually have a blank body, and just contain the panels that will be used on all other pages.<\\ldiv><div>When an standard page is loaded, it will also load the \\s.master.mhtm\\s file from the same folder.<\\ldiv><div>The standard page will render normally, but will pull in panels from the master page as well. Therefore your webpage only needs to contain the page title, and body that are unique to that page. Everything else comes from the master page.<\\ldiv><div>This means that if you decide to change something in the master page, it will also take effect on all of the other pages without having to manually make the same changes over and over.<\\ldiv><h2 class=\\q\\q>Multiple Master Pages<\\lh2><div>In a nested folder structure of webpages, all of the \\s.master.mhtm\\s pages will be loaded from all parent folders. This means that a \\s.master\\s page can inherit from other .master pages in parent folders.<\\ldiv><h2 class=\\q\\q>Creating a Master Page<\\lh2><div>The easiest way to create a master page is through the \\sCreate Webpage Wizard\\s (see separate tutorial) and using the \\smaster page\\s option provided.<\\ldiv><h2 class=\\q\\q>Editing a Master Page<\\lh2><div>A master page can be edited in the same way as a standard page. See separate tutorials \\sWeb page content\\s and \\sWebpage styling\\s.<\\ldiv><h2 class=\\q\\q>Using the Master Page in a standard page<\\lh2><div>By default, a standard page inherits everything from a master page. This is done by inserting a special type of panel, \\sInherit\\s in to each area.<\\ldiv><div>The \\sInherit\\s panel can be removed if it is not needed.<\\ldiv><div>Any styles on the master page are also applied, but are done before the page itself. So the page can potentially\\anbsp;override\\anbsp;any styles the master page has.<\\ldiv>"},cache: {},title: "",url: null,linebreak: false,foldable: false,folded: false,id: 729903,margin: ""}],vStaticTopRightArea: [{type: "Inherit",cache: {}}],vTopNavArea: [{type: "Inherit",cache: {}}],vLogoArea: [{type: "Inherit",cache: {}}],vSiteTitleArea: [{type: "Inherit",cache: {}}],vSloganArea: [{type: "Inherit",cache: {}}],vRightLogoArea: [{type: "Inherit",cache: {}}],vSiteNavArea: [{type: "Inherit",cache: {}}],vmenuframe0: [{type: "Inherit",cache: {}}],vSideArea: [{type: "Inherit",cache: {}}],vpanel_headingmenu_0: [{type: "Inherit",cache: {}}],vFooterArea: [{type: "Inherit",cache: {}}],vpageinfo: [{type: "Inherit",cache: {}}],vnonjscontent: [{type: "Inherit"}],vwebmessages: [{type: "Inherit"}]},Attributes: {Title: {type: "Title",data: {title: "Webpages and Master pages"},cache: {}}}}
0