Click here to Skip to main content
15,893,487 members
Articles / Programming Languages / SQL

A Free Website Management System - Nukedit

Rate me:
Please Sign up or sign in to vote.
3.38/5 (25 votes)
9 Sep 2010CPOL3 min read 173.9K   728   93  
Realtime page editing, simple, "on-the-fly" menu construction, modifiable permissions for users and groups, built-in search engine optimisation
<% response.buffer = true 
pagename = "content/FortheEndUser.asp"%>
<!-- #include file="../includes/inc_main.asp" -->
<!-- #include file="../themes/standard.asp"-->
<% WriteHeader "Free ASP Website Portal and Content Management System","ezedit www.ezedit.com page editing asp web portal easy edit ez edit content management system search engine optimisation free asp portal free content management system"
InitEdit%>
<STRONG><FONT size="5"><IMG alt="ezyEdit Editing" hspace="5" src="images/various/notepad.gif" align="absMiddle" vspace="5" border="0" />User Guide to Editing a Page</FONT><BR /><BR /><A href="FortheEndUser.asp#login" target="">Logging in/out to ezyEdit</A> 
<P></P>
<LI class="linkbold"><A href="FortheEndUser.asp#edit">Edit Mode</A> 
<LI class="linkbold"><A href="FortheEndUser.asp#images" target="">Inserting Images</A> 
<LI class="linkbold"><A href="FortheEndUser.asp#tables" target="">Inserting Tables</A> 
<LI class="linkbold"><A href="FortheEndUser.asp#layout" target="">Managing Page Layout with Tables</A> 
<LI><SPAN class="linkbold"><A href="FortheEndUser.asp#links" target=""><STRONG>Links</STRONG></A><STRONG><U> </U></STRONG></SPAN>
<DD>- <A href="FortheEndUser.asp#linkpage" target="">Creating a link to another page</A> 
<DD>- <A href="FortheEndUser.asp#linkwebsite" target="">Creating a link to another website</A> 
<DD>- <A href="FortheEndUser.asp#linkemail" target="">Creating a link to an email address</A> 
<DD>- <A href="FortheEndUser.asp#linkdoc" target="">Creating a link to a document</A> 
<DD>- <A href="FortheEndUser.asp#linkanchor">Creating a link to a point further down the page</A><BR /><BR />ezyEdit is a great way to have control over your web pages. We install it and then you can add, edit or delete sections of your page which are configured for the ezyEdit facility.</FONT></STRONG></SPAN> 
<P><FONT size="2"><SPAN class="textboldezyEdit"><STRONG>Update your site yourself instantly! ezyEdit can provide you with flexible web pages with no software to buy and is easy to use.<BR /></STRONG><BR />Recommended minimum resolution: 800 x 600</SPAN><BR /></FONT></P>
<P class="textred"><A name=login></A><STRONG><FONT size="4">LOGIN / LOGOUT</FONT></STRONG></P>
<P><FONT size="2">Go to the login page<STRONG><FONT color="#0000ff"> <A href="http://www.siteaddress/utilities/login.asp">http://www.siteaddress/utilities/login.as<B>p</A></B></FONT></STRONG></FONT><BR /><FONT size="2">Enter your username and password.</FONT></P>
<P><FONT size="2">You can also return to this page at any time to <B>LOGOUT</B> by clicking on the <B>LOGIN / LOGOUT</B> button on the ezyEdit navigation bar on the left.</FONT></P>
<BLOCKQUOTE>
<P><EM><FONT size="2"><B><SPAN class="textezyEdititalic">Note:</SPAN></B><SPAN class="textezyEdititalic"> You will stay logged in for the selected number of days unless you logout by clicking this button. This way you don't have to keep logging in over and over when you are making your updates. It is a good idea though to logout after each session if your computer is used by other people - otherwise they will be able to access the edit features.</SPAN></FONT></EM></P></BLOCKQUOTE>
<P class="textred"><A name=edit></A><STRONG><FONT size="4">EDIT MODE</FONT></STRONG></P>
<P class="textred" align="left"><FONT size="2"><STRONG>Rule Number 1:</STRONG> Once you hit &quot;Save&quot; it goes live to the world! Be sure that it is correct!</FONT></P>
<P><FONT size="2">The <B>EDIT</B> &amp; <B>SAVE</B> buttons will appear on every page which has been installed with the ezyEdit facility. Once in edit mode a border will appear around the area which is editable. <BR /><BR /><BR />Choose the page you wish to edit using the navigation buttons and click on <B>EDIT</B>. The ezyEdit toolbar will appear. This toolbar will move with you as you scroll up and down the page. If it is ever in your way - just scroll a notch or two and it will move. </FONT></P>
<P><FONT size="2">You will notice that the <B>ezyEdit Toolbar</B> is very similar to that of Microsoft Word. Below is a diagram of the buttons featured on the toolbar.</FONT></P>
<P align="center"><FONT size="2"></FONT></P>
<P><FONT size="2">You can now go ahead and edit the text within this region just as you would using Microsoft Word (ie, bold text, change the font size and colour, align left, centre or right etc). </FONT></P>
<TABLE cellSpacing="0" cellPadding="0" width="80%" align="center" border="0">
<TBODY>
<TR>
<TD class="tdcolor1">
<DIV align="center"><FONT size="2"><STRONG>TIPS</STRONG></FONT></DIV></TD></TR>
<TR>
<TD class="tdcolor2">
<UL>
<LI><FONT size="2">If you are copying text from another application (ie. Microsoft Word), paste it into a text editing program first such as NotePad (click on your computer's START menu, choose PROGRAMS then ACCESSORIES then NOTEPAD) then recopy the text and paste it into your web page. This will remove any 'extra bits' of the coding you don't see such as font sizes, colours and styles that you had in the original document, otherwise you will have to reset everything back to the default on the ezyEdit toolbar before reapplying your bold, font size, colour etc.<BR /><BR /></FONT>
<LI><FONT size="2">To make a &quot;carriage return&quot; at the end of a line or sentence, or after an image, press ENTER to make a paragraph spacing (2 lines) or SHIFT &amp; ENTER to go down to the very next line - eg: </FONT></LI></UL>
<TABLE cellSpacing="0" cellPadding="0" width="80%" align="center" border="0">
<TBODY>
<TR vAlign="top">
<TD class="tdcolor2"><B><FONT size="2">Pressing ENTER:</FONT></B></TD>
<TD class="tdcolor2"><B><FONT size="2">Pressing SHIFT + ENTER:</FONT></B></TD></TR>
<TR vAlign="top">
<TD class="tdcolor2">
<P><FONT size="2">text here text here text here</FONT></P>
<P><FONT size="2">text here text here text here</FONT></P></TD>
<TD class="tdcolor2"><FONT size="2">text here text here text here<BR />text here text here text here </FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P align="center"></P>
<P><A name=images></A><SPAN class="textred"><STRONG><FONT size="4">INSERTING IMAGES</FONT></STRONG></SPAN></P>
<P><FONT size="2">Place the cursor where you want to insert the image. Choose <B>INSERT IMAGE</B> on the ezyEdit toolbar. The Image Library will appear.</FONT></P>
<P><FONT size="2">You will find any photo's and many of the graphics used on your site within these folders. Search through the folders to find the image you wish to insert. Click on the image name to preview it in the window on the right. </FONT></P>
<P><FONT size="2"><SPAN class="textboldezyEdit"><STRONG>Alternative Text:</STRONG></SPAN> In here you can type a brief phrase or description of the photo that will appear as the user moves their mouse over the image. For example, on a photo of a person you might want to type their name. </FONT></P>
<P><SPAN class="textboldezyEdit"><A name=horiz></A><STRONG><FONT size="2">Horiz Space:</FONT></STRONG></SPAN><FONT size="2"> This is the margin to the left and right of the image. This is handy if you have text beside the image and you want a small space or 'margin' between the two. A horizontal space of around 10 is usually sufficient.</FONT></P>
<P><FONT size="2"><SPAN class="textboldezyEdit"><STRONG>Vert Space:</STRONG></SPAN> This is the margin around the top and bottom of the image. A vertical space of 5 to 10 is usually sufficient. </FONT></P>
<P class="textred"><A name=images2></A><FONT size="2"><STRONG>Inserting an image from your computer:<BR /></STRONG></FONT><FONT size="2">Place the cursor where you want to insert the image. Choose <B>INSERT IMAGE</B> on the ezyEdit toolbar. The Image Library will appear. Click on the folder you want your image to be uploaded into (for example, you might choose the &quot;photos&quot; folder if you are uploading a photo of your office). Click on the <B>BROWSE</B> button. Your computer's Windows Explorer screen will appear. From here you can locate the file you wish to upload. Double click the image file to select it. The file's path and name will appear in the Local File field (near the bottom of the Image Library screen). Click <B>UPLOAD</B> to load the image into the folder. Then select the image by clicking on its name (you can view it in the preview window on the right) and set any other parameters you want on the image (eg, align centre, <FONT color="#800080">Horiz Space</FONT>). Click <B>INSERT.</B></FONT></P>
<P><FONT size="2"><B>IMPORTANT: </B>When naming your images do not use any spaces between the words and keep the name brief. If you want to differentiate between words use hypens, underscores or capitals.</FONT></P>
<TABLE cellSpacing="0" cellPadding="0" width="50%" align="center" border="0">
<TBODY>
<TR>
<TD><B><FONT size="2">INCORRECT</FONT></B></TD>
<TD><B><FONT size="2">CORRECT</FONT></B></TD></TR>
<TR>
<TD vAlign="top"><FONT size="2">Brisbane Office.jpg</FONT></TD>
<TD><FONT size="2">brisbane-office.jpg<BR />brisbane_office.jpg<BR />BrisbaneOffice.jpg</FONT></TD></TR></TBODY></TABLE>
<P><FONT size="2"></FONT></P>
<TABLE cellSpacing="0" cellPadding="0" width="80%" align="center" border="0">
<TBODY>
<TR>
<TD class="tdcolor1">
<DIV align="center"><FONT size="2"><STRONG>TIPS</STRONG></FONT></DIV></TD></TR>
<TR>
<TD class="tdcolor2">
<UL>
<LI><FONT size="2">Try to keep your images below 30kb (under 20kb is ideal). Anything larger than this will take too long to load. People viewing your site will not hang around waiting for images to load on the page. You can find out the file size of an image by viewing its details in Windows Explorer (if you cannot see the &quot;size&quot; column go to VIEW on the Explorer toolbar, and click on DETAILS. The size column should appear.<BR /><BR /></FONT>
<LI><FONT size="2">Get your image to the correct dimension size BEFORE inserting it. Do not resize the image once it is on the web page. Doing so will not reduce the physical size of the image - a 500x500 pixel wide image that is 40kb will still be 40kb when you have sized it down to 100x100 pixels. If you resize it properly first in an image editing program it may only end up being 10kb when it is 100x100 pixels instead of 40kb and take only 2 seconds to load instead of 10 seconds. A big difference to people viewing your site - especially when you have several images on the page.<BR /><BR /></FONT>
<LI><FONT size="2">150 to 200 pixels wide is a good size for images. The picture of the waterlillies a little further down this page is 150 pixels wide.<BR /><BR /></FONT>
<LI><FONT size="2">Save photo's as .jpg format. Save cartoon style images and text images as .gif format. </FONT></LI></UL></TD></TR></TBODY></TABLE>
<P class="textred"><A name=tables></A><STRONG><FONT size="4">TABLES</FONT></STRONG></P>
<P class="textred"><FONT size="2"><STRONG>Inserting Tables</STRONG></FONT></P>
<P><FONT size="2">Place the cursor where you want to insert the table. Choose the <B>INSERT TABLE</B> button on the ezyEdit toolbar. You will be asked &quot;How Many Columns&quot; and &quot;How Many Rows&quot; - type in the number and click <B>OK</B> (or press ENTER).</FONT></P>
<P><FONT size="2">You will notice that the table will have a fine border around it. This is merely a guide while in edit mode and will be invisible once you return to normal mode.</FONT></P>
<P><FONT size="2">You can resize the table by positioning your cursor over the table border until the cursor changes to the 4 way arrow and click once. The corners of the table will appear. Now position the cursor over one of these corners until it changes to a 2 way arrow. You can now click and drag the border of the table to the desired size.</FONT></P>
<P><FONT size="2"><B>Note:</B> The border will no longer be visible once you exit out of edit mode and then return. But it will still be there - just keep moving the cursor around where you think the border will be until the arrows appear.</FONT></P>
<P class="textred"><A name=layout></A><FONT size="2"><STRONG>Managing Your Page Layout with Tables<BR /></STRONG></FONT><FONT size="2">Tables are the best way to manage a page with multiple text and images. If you have an image with text beside it, put it in a table with the image in one column and the text in another. It will keep everything a lot neater and more manageable.</FONT></P>
<TABLE cellSpacing="0" cellPadding="0" width="70%" align="center" border="0">
<TBODY>
<TR vAlign="top">
<TD width="170" height="100"><FONT size="2"><IMG alt="Australian Coat of Arms" hspace="0" src="images/photos/coat-of-arms.jpg" align="vspace="" border="0" 0? ? /></FONT></TD>
<TD>
<P><FONT size="2">Tdjfa gha sgj g gjsg gj sjf dgh oigh ghesrhg ajhg isah gahfgi hailghf giagh oafgoahg oh:</FONT></P>
<UL>
<LI><FONT size="2">More text<BR /></FONT>
<LI><FONT size="2">Some text </FONT>
<LI><FONT size="2">Text here </FONT>
<LI><FONT size="2">More text </FONT>
<LI><FONT size="2">More text </FONT>
<LI><FONT size="2">Some text </FONT>
<LI><FONT size="2">More text </FONT></LI></UL></TD></TR></TBODY></TABLE>
<P></P>
<P class="textred"><A name=links></A><FONT size="4"><STRONG>LINKS</STRONG></FONT></P>
<P class="textred"><A name=linkpage></A><FONT size="2"><STRONG>Creating a Link to Another Page Within Your Site.<BR /></STRONG></FONT><FONT size="2">Highlight the text or image you wish to make a link. (eg - type and highlight &quot;click here to go to the About Us page&quot;). Click on the <B>LINK</B> button on the ezyEdit toolbar. The Links window will appear. The &quot;Link Type&quot; should be set by default to &quot;Website Address&quot;. If not, choose it now. Now type the name of your page including the file extension (eg. about.asp, or contact.htm).</FONT></P>
<BLOCKQUOTE>
<P><FONT size="2"><SPAN class="textezyEdititalic"><EM>You can work out the name of the page by going to that page and noting the address that now appears in the address bar of your browser. For example: </EM></SPAN>http://www<STRONG>.</STRONG>ezyedit.com/content/helpguides.asp<SPAN class="textezyEdititalic"><EM> <BR />- In this address </EM></SPAN>http://www<STRONG>.</STRONG>ezyedit.com<SPAN class="textezyEdititalic"><EM> is the address of the website, the page name is whatever appears after the &quot;/&quot; - ie: </EM></SPAN>content/aboutguides.asp </FONT></P></BLOCKQUOTE>
<P><FONT size="2">Uncheck the box that says &quot;Yes, link opens in new window?&quot; You don't want another browser window opening if you're just going to another page within your site. Click <B>APPLY</B>.</FONT></P>
<P><FONT size="2"><B>Note:</B> If you return to this link later on you will notice that the program has automatically inserted the full link address (ie. http://www.aussieweb.com.au/about.asp). This is why we were able to delete the &quot;http://&quot; bit earlier - it does it automatically for you so there's no need to remember the whole thing. </FONT></P>
<P class="textred"><A name=linkwebsite></A><FONT size="2"><STRONG>Creating a Link to Another Website.<BR /></STRONG>Highlight the text or image you wish to make a link. (eg - type and highlight &quot;click here to visit www.aussieweb.com.au&quot;). Click on the <B>LINK</B> button on the ezyEdit toolbar. The Links window will appear. The &quot;Link Type&quot; should be set by default to &quot;Website Address&quot;. If not, choose it now. In the &quot;Link&quot; field you will see &quot;http://&quot;. Type the address of the web site AFTER this eg. www.aussieweb.com.au (so that the final address will be the full &quot;http://www.aussieweb.com.au&quot;). Leave the &quot;Yes, link opens in new window&quot; box checked - this way the web page will open in a new browser window. Once the viewer has looked at that site and closes it, your site will still be there behind it. Click <B>APPLY</B>. </FONT></P>
<P class="textred"><A name=linkemail></A><FONT size="2"><STRONG>Creating a Link to an Email Address.<BR /></STRONG>Highlight the text or image you wish to make a link. (eg - type and highlight &quot;click here to email us&quot;). Click on the <B>LINK</B> button on the ezyEdit toolbar. The Links window will appear. From &quot;Link Type&quot; choose &quot;Email Address&quot;. Type the email address AFTER the &quot;mailto:&quot; leaving no space (so that the final address will look something like this: &quot;mailto:info@aussieweb.com.au&quot;). Click <B>APPLY</B>. </FONT></P>
<P class="textred"><STRONG><FONT size="2"><A name=linkdoc><STRONG><FONT size="2">Creating a Link to a Document (Insert File)<BR /></FONT></STRONG></A></FONT></STRONG><FONT size="2">Highlight the text or image you wish to make a link. (eg - type and highlight &quot;click here to download our newsletter&quot;). Choose <B>INSERT FILE</B> on the ezyEdit toolbar. The File Library will appear. Any documents already used on the site will be in one of the folders. Click on the folders to view the contents of each. Click on the file name to view the document prior to linking. Click on <B>INSERT</B> to insert the document.</FONT></P>
<P><FONT size="2">If the document is on your local computer, click the <B>BROWSE</B> button. Your computer's Windows Explorer screen will appear. From here you can locate the file you wish to upload. Double click the file to select it. The file's path and name will appear in the Local File field (near the bottom of the File Library screen). Click <B>UPLOAD</B> to load the file into the folder. Click <B>INSERT</B> beside the file name.</FONT></P>
<P><FONT size="2"><B>IMPORTANT: </B>When naming your documents do not use any spaces between the words and keep the name brief. If you want to differentiate between words us hypens, underscores or capitals.</FONT></P>
<TABLE cellSpacing="0" cellPadding="0" width="50%" align="center" border="0">
<TBODY>
<TR>
<TD><B><FONT size="2">INCORRECT</FONT></B></TD>
<TD><B><FONT size="2">CORRECT</FONT></B></TD></TR>
<TR>
<TD vAlign="top"><FONT size="2">Annual Report.pdf</FONT></TD>
<TD><FONT size="2">annual-report.pdf<BR />annual_report.pdf<BR />AnnualReport.pdf</FONT></TD></TR></TBODY></TABLE>
<P><FONT size="2"></FONT></P>
<P class="textred"><A name=linkanchor></A><FONT size="2"><STRONG>Creating a Link to a Point Further Down on a Page Within Your Site (Anchor)<BR /></STRONG></FONT><FONT size="2">Highlight the text or image you wish to make a link. (eg - type and highlight &quot;click here to view locations&quot;). Click on the <B>LINK</B> button on the ezyEdit toolbar. The Links window will appear. The &quot;Link Type&quot; choose &quot;Anchor&quot; In the &quot;Link&quot; field you will see the hash symbol &quot;#&quot;. After the hash type a brief one word description of your link, eg. #locations. </FONT></P><FONT face="Arial, Helvetica, sans-serif"></FONT>
<BLOCKQUOTE>
<P><FONT size="2"><SPAN class="textezyEdititalic"><EM>If the point you want to jump to is on a different page within your site to the one you are currently on, simply add the name of the page before the hash, </EM></SPAN>eg. about.asp#locations.</FONT></P></BLOCKQUOTE>
<P><FONT size="2">Uncheck the box that says &quot;Yes, link opens in new window?&quot; You don't want another browser window opening if you're just going to another page within your site. Click <B>APPLY</B>.</FONT></P>
<P><FONT size="2"><B>Note:</B> If you return to this link later on you will notice that the program has automatically inserted the full link address (ie. http://www.ezyedit.com/content/helpguides.asp#locations). It does this automatically for you so there's no need to remember the whole thing. </FONT></P>
<P><FONT size="2">Now we need to tell it where that &quot;#locations&quot; point is it has to jump to:</FONT></P>
<P><FONT size="2">Go to the spot that you want to anchor down to. Highlight the first word if it's a paragraph or click on the image and choose <B>ANCHOR</B> on the ezyEdit toolbar. You will be asked for the anchor name. Type in whatever you called it earlier eg, &quot;locations&quot; (without the hash this time). </FONT></P>
<P><FONT size="2">Now when you click on your link it will anchor down to this point on the page.</FONT></P>
<P class="textred"><BR /><FONT size="2"><STRONG>OTHER GENERAL TIPS AND TRICKS</STRONG></FONT></P>
<UL>
<LI><FONT size="2">Keep font size relatively small and font colours to a minimum. Large colourful font looks tacky and unprofessional.</FONT> 
<LI><FONT size="2">Arial font is best for reading on computer screens. Times New Roman, which is ideal for print, just doesn't work as well on screen so try to avoid using it.</FONT> 
<LI><FONT size="2">For more assistance, email <A href="mailto:support@ezyedit.com">support@ezyedit.com</A></FONT></LI></UL>
<P align="center"><A class=link3 href="javascript:onClick=window.print()"><FONT color="#0000ff" size="2">Print Page</FONT></A><BR /><BR /></P></FONT></DD></LI>
<%CloseEdit
WriteFooter rsPage("modified") , rsPage("count") %>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Australia Australia
From Brisbane, Australia.

Likes building stuff.

Comments and Discussions