Exit
template=Default.htm redirect=null nonjstitle=Editing a Webpage 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"><div id="___plusone_0" style="height: 60px; width: 50px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="width: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 60px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="0" vspace="0" width="100%" id="I1_1336310418932" name="I1_1336310418932" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Flogin.marloweos.com%2FHTML%2FTutorial%2Flogin.marloweos.com&size=tall&count=true&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3D7sV5Q2jEt9s.en.%2Fsv%3D1%2Fam%3D!5VdQ9Ii80V-IH20oNg%2Fd%3D1%2Frs%3DAItRSTP_FZGJFwyPSnSKps7CZ_rOq-oylw#id=I1_1336310418932&parent=http%3A%2F%2Flogin.marloweos.com&rpctoken=396835188&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart" title="+1"></iframe></div></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>Editing a Webpage</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[41].Open('../Tests/NewsArticles/DownTime.news', 'news')">DownTime</a></li><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[41].Open('../Tests/NewsArticles/NewSoftwarev2.news', 'news')">NewSoftwarev2</a></li><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[41].Open('../Tests/NewsArticles/NewSoftwarev3.news', 'news')">NewSoftwarev3</a></li><li onclick="location.href='#'"><a href="#" onclick="Packages.$i.TextVars[41].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="foldtitle35330882" onclick="Packages.Library.$.ToggleFold('35330882')"><div class="paneltitle"><h3><a style="" name="vSideArea">Page Contents</a></h3></div><div id="foldhr35330882" 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="foldarea35330882"><div class="panelcontent"><div class="HeadingMenu"><div id="panel_headingmenu_0"><ul class="menu"><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_0">Editing a Webpage</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_4">Page editing modes</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_10">Editing an existing panel</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_14">General Settings</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_23">Panel Specific Settings</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_25">Deleting a Panel</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_27">Moving a Panel around an Area</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_29">Move Panel to other Area</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_31">Discarding Panel Changes</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_34">Adding a panel</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_40">Saving the Web Page</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_43">Closing the Editor</a></li><li><a href="#pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_45">The 'About' button</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('35330882')">ˆ</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;width:100%;"><div class="panelcontent"><div class="Image"><div style="margin-top:5px;margin-left:1px;margin-right:1px;border:1px solid black;"><img src="../Tutorial/.images/PageEditBar.GIF?req-plain=1" alt="Page Edit bar"></div><div style="font-size:small;margin-bottom:5px;margin-left:1px;margin-right:1px;border:1px solid black;">The edit bar that appears at the top of a webpage when in edit mode.</div></div></div></div><div class="bodyareachild" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Table"><div style="clear:both;"></div><table class="tabletable"><tbody><tr><td valign="top"> <div> <div class="tablecell" id="Splitter_0_0"><div class="splitter_0_0child" style="display:inline-block;"><div class="panelcontent"><div class="RichText"><div class="richtext" id="richtext_editor581772"><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_0">Editing a Webpage</a></h2><div>This applies to both master pages and standard pages.</div><div>To edit a webpage, click on it in the file manager and it will open in its own window.</div><div>In the editor, you see a small bar at the top of the page (this bar is shown at the top of this body area). Everything underneath this bar should look and behave exactly the same as the page will actually appear.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_4">Page editing modes</a></h2><div class="">There are 3 page editing modes:</div><div class="richtextlist">Preview - this is an exact representation of how your page will appear in reality.</div><div class="richtextlist">Edit mode - this is a fairly close representation of the page, except some features will be disabled, and every panel will display an 'edit' icon when hovered over and an 'add' icon at the end.</div><div class="richtextlist">Advanced mode - to give a clearer idea of how your page is laid out, use this mode - it looks nothing like how the page will really appear, but is very useful for editing.</div><div class="">You can only edit panels in edit mode or advanced mode, the edit options are not available in preview mode.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_10">Editing an existing panel</a></h2><div class="">To edit an existing panel, you must be in edit or advanced mode.</div><div class="">You can either double click on the panel, or click the pop up 'edit' button.</div><div class="">The edit pane appears at the very top of the page, and contains 2 sets of options, 'General Settings' and 'Panel Specific Settings'.</div><h3 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_14">General Settings</a></h3><div class="">Every panel (except the Inherit panel which is a very special case - see below) has the same General Settings.</div><div class="">These settings allow you to do the following things to a panel.</div><div class="richtextlist">Place a title above the panel (this is in a 'h3' tag)</div><div class="richtextlist">Make the entire panel a hyperlink to another page or file (internal or external)</div><div class="richtextlist">Arrange the panel horizontally or vertically with other panels</div><div class="richtextlist">Make the panel foldable (so that it shrinks into its own title) and select whether it starts folded or not.</div><div class="">Other settings may get added here.</div><div class="">There is help text alongside each of these options.</div><h3 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_23">Panel Specific Settings</a></h3><div>These depend of the panel being edited, and there is usually help text provided for the form. More detailed information about specific panels may be added to this tutorial.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_25">Deleting a Panel</a></h2><div>To delete a panel, first edit the panel, and then select 'Delete Panel' from the bottom of the edit pane.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_27">Moving a Panel around an Area</a></h2><div>To move a panel in the same area (up or down) first edit the panel, then use the "Move Panel Up" and "Move Panel Down" buttons, each time you click this the panel will move in the area.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_29">Move Panel to other Area</a></h2><div>You can move a panel to a different area by first editing the panel, and then choosing the new area from the list at the bottom of the edit pane. Then click "Move" to move the panel.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_31">Discarding Panel Changes</a></h2><div>If you do not want to save the changes you make to a panel you can click 'Discard Changes'. this will ignore all changes you have made to that panel.</div><div>To discard all changes to a page, do not save the page - simply close and re-open it to see the earlier version.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_34">Adding a panel</a></h2><div>To add a panel you must be in edit or advanced mode.</div><div>In the required area, click the 'Add' icon. This will display a list of every panel type of available.</div><div>Each panel has help text to describe what it does.</div><div>To add a panel, select the panel from the list.</div><div>The edit pane for this panel will now appear, containing the initial default values for this type of panel. You can customise this and press Preview to see your panel.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_40">Saving the Web Page</a></h2><div>The webpage is edited in the browser, once you are happy with the changes you must save your changes back to the server.</div><div>If no changes have been made the 'Save' icon is disabled (greyed out) otherwise clicking this will save the page back to the server and reload it. This is a complete reload - so if everything looks OK, the page save was success.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_43">Closing the Editor</a></h2><div>To close the editor (you may need to save first - see section above) either just close the page, or click the 'Exit' button. The 'Exit' button is safer as it will recommend you save changes if any are outstanding.</div><h2 class=""><a name="pnmenu_1_0_0_1_0_0_0_0_0_0_0_0_0_45">The 'About' button</a></h2><div>This tells you information about the page, when it was last edited, and who by.</div><div>You can also find the current software version here.</div></div></div></div></div></div></div></td><td valign="top"> <div> <div class="tablecell" id="Splitter_1_0"><div class="splitter_1_0child" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Image"><div style="margin-top:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px"><img src="../Tutorial/.images/WebpageEditPanel.GIF?req-plain=1" alt="Panel Edit" width="300px" style="width:300px"></div><div style="font-size:small;margin-bottom:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px">The buttons displayed in edit mode.</div></div></div></div><div class="splitter_1_0child" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Image"><div style="margin-top:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px"><img src="../Tutorial/.images/PanelSettings.GIF?req-plain=1" alt="Panel Settings" width="300px" style="width:300px"></div><div style="font-size:small;margin-bottom:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px">The panel settings pane that contains the general, and panel specific settings.</div></div></div></div><div class="splitter_1_0child" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Image"><div style="margin-top:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px"><img src="../Tutorial/.images/WebpageAdvancedMode.GIF?req-plain=1" alt="Advanced mode" width="300px" style="width:300px"></div><div style="font-size:small;margin-bottom:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px">This is what advanced mode will look like - it is designed to make the page layout clearer.</div></div></div></div><div class="splitter_1_0child" style="display:inline-block;width:100%;"><div class="panelcontent"><div class="Image"><div style="margin-top:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px"><img src="../Tutorial/.images/WebpageAddPanel.GIF?req-plain=1" alt="Add Panels" width="300px" style="width:300px"></div><div style="font-size:small;margin-bottom:5px;margin-left:1px;margin-right:1px;border:1px solid black;width: 300px">This is a cropped image of some of panels that are available.</div></div></div></div></div></div></td></tr></tbody></table></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[57]*/.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; } .tablecell { border:none; vertical-align:top; white-space:normal; text-wrap:normal; } .table { clear:both; } .tabletable { vertical-align:top; height:100%; border-spacing: 0px; } .tabletable td { height:100%; } .tableborderedcells { border: 1px solid black; height:100%; } .tabletabcontainer { float:left; overflow-y: hidden; height:25px; margin-bottom:0; } .tabletab { -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); padding-left:5px; padding-right:5px; float:left; cursor:pointer; height:40px; } .tabletab: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); } .table_tabview { -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); } nonjsheadhtml= lastedit=1336310420159 lasteditor=Admin var page = {Version: 3,Areas: {vPageTitleArea: [{type: "Tag",data: {tag: "h2",content: "Editing a Webpage"},cache: {},linebreak: 1,id: 590733}],vBodyArea: [{title: "",type: "Image",data: {width: "",height: "",img: "Tutorial/.images/PageEditBar.GIF",alt: "Page Edit bar",caption: "The edit bar that appears at the top of a webpage when in edit mode."},cache: {},url: null,foldable: false,folded: false,linebreak: true,id: 229342,margin: ""},{title: "",type: "Table",data: {border: false,autowidth: false,rows: "1",cols: "2",tabs: false,id: "Splitter"},cache: {},url: null,foldable: false,folded: false,id: 705543,linebreak: true}],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: {}}],vSplitter_0_0: [{type: "RichText",data: {richtext: "<h2 class=\\q\\q>Editing a Webpage<\\lh2><div>This applies to both master pages and standard pages.<\\ldiv><div>To edit a webpage, click on it in the file manager and it will open in its own window.<\\ldiv><div>In the editor, you see a small bar at the top of the page (this bar is shown at the top of this body area). Everything underneath this bar should look and behave exactly the same as the page will actually appear.<\\ldiv><h2 class=\\q\\q>Page editing modes<\\lh2><div class=\\q\\q>There are 3 page editing modes:<\\ldiv><div class=\\qrichtextlist\\q>Preview - this is an exact representation of how your page will appear in reality.<\\ldiv><div class=\\qrichtextlist\\q>Edit mode - this is a fairly close representation of the page, except some features will be disabled, and every panel will display an \\sedit\\s icon when hovered over and an \\sadd\\s icon at the end.<\\ldiv><div class=\\qrichtextlist\\q>Advanced mode - to give a clearer idea of how your page is laid out, use this mode - it looks nothing like how the page will really appear, but is very useful for editing.<\\ldiv><div class=\\q\\q>You can only edit panels in edit mode or advanced mode, the edit options are not available in preview mode.<\\ldiv><h2 class=\\q\\q>Editing an existing panel<\\lh2><div class=\\q\\q>To edit an existing panel, you must be in edit or advanced mode.<\\ldiv><div class=\\q\\q>You can either double click on the panel, or click the pop up \\sedit\\s button.<\\ldiv><div class=\\q\\q>The edit pane appears at the very top of the page, and contains 2 sets of options, \\sGeneral Settings\\s and \\sPanel Specific Settings\\s.<\\ldiv><h3 class=\\q\\q>General Settings<\\lh3><div class=\\q\\q>Every panel (except the Inherit panel which is a very special case - see below) has the same General Settings.<\\ldiv><div class=\\q\\q>These settings allow you to do the following things to a panel.<\\ldiv><div class=\\qrichtextlist\\q>Place a title above the panel (this is in a \\sh3\\s tag)<\\ldiv><div class=\\qrichtextlist\\q>Make the entire panel a hyperlink to another page or file (internal or external)<\\ldiv><div class=\\qrichtextlist\\q>Arrange the panel horizontally or vertically with other panels<\\ldiv><div class=\\qrichtextlist\\q>Make the panel foldable (so that it shrinks into its own title) and select whether it starts folded or not.<\\ldiv><div class=\\q\\q>Other settings may get added here.<\\ldiv><div class=\\q\\q>There is help text alongside each of these options.<\\ldiv><h3 class=\\q\\q>Panel Specific Settings<\\lh3><div>These depend of the panel being edited, and there is usually help text provided for the form. More detailed information about specific panels may be added to this tutorial.<\\ldiv><h2 class=\\q\\q>Deleting a Panel<\\lh2><div>To delete a panel, first edit the panel, and then select \\sDelete Panel\\s from the bottom of the edit pane.<\\ldiv><h2 class=\\q\\q>Moving a Panel around an Area<\\lh2><div>To move a panel in the same area (up or down) first edit the panel, then use the \\qMove Panel Up\\q and \\qMove Panel Down\\q buttons, each time you click this the panel will move in the area.<\\ldiv><h2 class=\\q\\q>Move Panel to other Area<\\lh2><div>You can move a panel to a different area by first editing the panel, and then choosing the new area from the list at the bottom of the edit pane. Then click \\qMove\\q to move the panel.<\\ldiv><h2 class=\\q\\q>Discarding Panel Changes<\\lh2><div>If you do not want to save the changes you make to a panel you can click \\sDiscard Changes\\s. this will ignore all changes you have made to that panel.<\\ldiv><div>To discard all changes to a page, do not save the page - simply close and re-open it to see the earlier version.<\\ldiv><h2 class=\\q\\q>Adding a panel<\\lh2><div>To add a panel you must be in edit or advanced mode.<\\ldiv><div>In the required area, click the \\sAdd\\s icon. This will display a list of every panel type of available.<\\ldiv><div>Each panel has help text to describe what it does.<\\ldiv><div>To add a panel, select the panel from the list.<\\ldiv><div>The edit pane for this panel will now appear, containing the initial default values for this type of panel. You can customise this and press Preview to see your panel.<\\ldiv><h2 class=\\q\\q>Saving the Web Page<\\lh2><div>The webpage is edited in the browser, once you are happy with the changes you must save your changes back to the server.<\\ldiv><div>If no changes have been made the \\sSave\\s icon is disabled (greyed out) otherwise clicking this will save the page back to the server and reload it. This is a complete reload - so if everything looks OK, the page save was success.<\\ldiv><h2 class=\\q\\q>Closing the Editor<\\lh2><div>To close the editor (you may need to save first - see section above) either just close the page, or click the \\sExit\\s button. The \\sExit\\s button is safer as it will recommend you save changes if any are outstanding.<\\ldiv><h2 class=\\q\\q>The \\sAbout\\s button<\\lh2><div>This tells you information about the page, when it was last edited, and who by.<\\ldiv><div>You can also find the current software version here.<\\ldiv>"},cache: {},title: "",url: null,linebreak: false,foldable: false,folded: false,id: 581772}],vSplitter_1_0: [{type: "Inherit",cache: {}},{title: "",type: "Image",data: {width: "300",height: "",img: "Tutorial/.images/WebpageEditPanel.GIF",alt: "Panel Edit",caption: "The buttons displayed in edit mode."},cache: {},url: null,foldable: false,folded: false,linebreak: true,id: 950896},{title: "",type: "Image",data: {width: "300",height: "",img: "Tutorial/.images/PanelSettings.GIF",alt: "Panel Settings",caption: "The panel settings pane that contains the general, and panel specific settings."},cache: {},url: null,foldable: false,folded: false,linebreak: true,id: 599417},{title: "",type: "Image",data: {width: "300",height: "",img: "Tutorial/.images/WebpageAdvancedMode.GIF",alt: "Advanced mode",caption: "This is what advanced mode will look like - it is designed to make the page layout clearer."},cache: {},url: null,foldable: false,folded: false,linebreak: true,id: 384322},{title: "",type: "Image",data: {width: "300",height: "",img: "Tutorial/.images/WebpageAddPanel.GIF",alt: "Add Panels",caption: "This is a cropped image of some of panels that are available."},cache: {},url: null,foldable: false,folded: false,linebreak: true,id: 886767}],vnonjscontent: [{type: "Inherit"}],vwebmessages: [{type: "Inherit"}]},Attributes: {Title: {type: "Title",data: {title: "Editing a Webpage"},cache: {}}}}
0