Tutorial 1.1: Adding and deleting web pages
From Online Business Wiki
| Previous topic: Tutorial 1: Editing Your Website | Next topic: Tutorial 1.2: Using content modules |
This tutorial will introduce you to adding web pages to your website. Web pages are your 'basic content container' and most content modules (announcements, FAQs, web forms etc) need to be added to pages to be viewed on your website. Webpages also use a website template to wrap them in a consistent look and feel.
This section is a step-by-step guide to adding webpages to your website and all the different options you can adjust on your pages. It should take about 15 minutes to complete but feel free to work through at it your own pace.
Contents |
Getting Started
- Login to your your sites control panel. You should see the dashboard page with a menu bar at the top.
- Hover your mouse over the "Website" tab at the top then click the 'Web Pages' option on the 2nd level to bring up the Web Page Manager.
Your Site Structure
You will be shown a list of your sites webpages according to how you've structured your site. You're able to click on any of the pages here which will bring up the detailed view allowing you to edit that webpage. You'll also notice that you're able to use directories to categorize your webpages which is useful if you plan on building a large site.
Adding a New Web Page
In this web pages tutorial you will add a simple 'Site Guestbook' webpage that allows visitors to leave comments on our site. This will take you through all the basic concepts to add and edit web pages. To add a new page you need to click on the 'Create New Webpage' button to the right of the web pages listing.
Webpage Details
You will now be shown the webpage details form that you need to fill, the explanations for each of the options are given here:
- Folder - this is a drop down that lets you choose which website folder you want to place your new page in. If you need to create a new folder you can click on the button next to the drop down box. In this tutorial you will leave the folder as the root folder '/'
- Template - a drop down list that enables you to select the template you want to use for this page. Templates contain the heading, navigation and sidebars that surround your webpage. Leave this as 'Use Default Template'
- Page URL - This is the name of the page as it appears in the web address. It does not have to end in .html or .html, you'll have to give the page the name 'Site_Guestbook'
- Page Name - This is the name of the page as it appears in the browser heading, breadcrumbs and sitemap modules. Give the page the name 'Site Guestbook'
- Release Date and Expiry Date - allow you to release a web page in the future and expire the content of the web page when it is no longer valid. Its a set and forget approach that enables you to add your web pages in advance and have them automatically appear and then disappear from your website.
- Enabled - You can uncheck 'Enabled' to make the page temporarily inaccessible, this is useful for
- Start Page - When you nominate a page as a start page, this page will be the first page that's displayed when someone lands on your site. The page can be called anything and it doesn't need to be called index.htm or default.htm. Leave this unticked
Using the WYSIWYG editor
Beneath the web page details, you will see a WYSIWYG web page content editor. To add plain text and images to your web page simply use this editor as if it was a word processor. There are 3 features inside this editor that need to be highlighted:
- Image Manager - use this to upload images onto your webpage
- Table Manager - use this to insert tables onto your webpage to neaten the layout of your content
- Link Manager - this allows you to insert links to any URL. You use it by highlighting the text you want to change into a hyperlink and then click on the Link Manager icon to set the options for that link i.e whether or not you want to open the link in a new window
Saving and Publishing or Deleting
Now that you've added some content to your webpage, you should scroll down to the bottom and click 'Save and Publish' to make this brand new page of yours live. You can view the live page by typing the full URL of your new page into a web browser. If you want to save your changes but you aren't ready to make your changes live then you can click 'Save' which saves a working copy. There's also a 'Delete' button to completely remove the webpage from your system.
Other Webpage Actions
To the right of the editor and the web page options form, you will see the Action Box which contains a list of options for your webpage. Here, you'll be adding your web page to the navigation menu of your site, you'll be adding a simple comments module to your web page and you'll see how the rollback feature works in case you've made a mistake.
Adding webpage to a menu
When you create webpages, you need to ensure that you can navigate to them from your sites homepage or anywhere else on your site. This is achieved usually through adding the webpage to the navigation menu. Click 'Add this web page to a menu' in the action box and this will display a pop-up with the different menus on your Online Business to add the web page to. Click on 'Website Main Menu' to add the page to the website navigation menu. If you refresh your live site now you'll see that your 'Site GuestBook' page is now one of the options for navigating to on your home page. This will only work if you've saved and published your page already.
Adding modules to a webpage
You've already learnt how to add content to your webpages by using the webpage editor, however you can also add content to your webpage by using modules. Modules contain different bits of functionality and can be thought of as the building blocks of your site that fit within your webpage which is a container.
You're going to add a comments module to your new site guestbook page by clicking on 'Add Modules to web page' in your action box on the right hand side which brings up the module manager shown below. In alphabetical order this shows you the different modules you can place on your page such as Ad Rotators, Announcements, Blogs etc. For this tutorial, click on 'Comments' and you'll be shown the three options for the comments module, you'll need to:
- Click on 'Displays user comments on an item' which will insert a module on your page that lists out the comments left on your page
- Click on 'Form for leaving a comment on an item' which will insert a comments form on your page that lets visitors leave comments
You'll see in your WYSIWYG editor now that you have a {module_ratingfeedback} on your page as well as comments form. At this point you should click 'Save and Publish' again.
Archiving and Rolling Back
As you're making changes to your web pages, if at any point you save a change that you need to undo, you can do this by using the 'Archive and Rollback; function in the action box. You'll be able to see all your previously saved versions of your web page for the last 90 days and select any one of those to revert to.
Post a Comment On Your New Page!
After all these changes, lets take a look at our website as our visitors will see it. Open a new browser window and type in the URL of your website and you'll see your new page has been added to the navigation menu. Click on it to navigate to your new page and you can see that you've just added a new webpage in 10 minutes with a comments box on it! You can submit a comment to your own site it will be posted straight away.
If you feel ready to move onto harder tutorials on editing your website you can work through tutorials in the 'Additional Topics' links below. Otherwise you can move onto the next topic which will cover adding content modules to your webpages
Check out these additional topics for some more detailed and advanced information.....
- Meta_data - article on how to use meta data with your webpages
- RSS Channels - to syndicate your web page
- Image manipulation - article explaining how to use the image and hyperlink manager
- HTML - Article explaining HTML Basics, and offering you some external resources
- CSS - Article explaining CSS Basics, and offering you some external resources
| Previous topic: Tutorial 1: Editing Your Website | Next topic: Tutorial 1.2: Using content modules |









