Customer Web Site Training

(1)

Customer Web Site Training

T R A I N I N G M A T E R I A L

Prepared by & for:

RS Net

ABN 61 508 214 365 PO Box 325 Kilkenny SA 5009 PH 0408 022 420 or 08 7324 3024

[email protected]

(2)

Commercial-in-Confidence Page

2 INDEX

Viewing Your Site

Page 3

Accessing Your Site Administrator Program (Build)

Page 4

The Page Edit Menu

Page 5

Editing Your Pages

Page 6

A Typical Layout of a Page Page 6

The Vertical Replicator Page 7

Meta Tags & Title – Simple Page 7

Single Section (HTML as WYSIWYG) Page 8

Spacer Page 9

File (With Options) Page 9

Image Gallery (With Popup) Page 10

Email Disguised – Popup Page 11

Plain HTML and Plain HTML (WYSIWYG) Page 11

(3)

3 VIEWING YOUR SITE

Your site name may be something like: http://www.yourname.webbrochure.com.au or

http://www.yourdomain.com.au Type your site name in the URL Bar at the top of your internet browser and hit enter.

After entering your site name in the URL Bar it may open with a screen similar to the following:

We recommend that you open up the site in 2 browsers so you can switch easily between them to check your work, so now, in the second browser, access your site administrator program as discussed below

URL Bar

Search Engine - Search Bar

This is used when you don’t know the site name of other businesses. You might then search for a mechanic in your local area. e.g. “car repairs holden hill”.

(4)

4 ACCESSING YOUR SITE ADMINISTRATOR PROGRAM (BUILD)

Enter /build.php on the end of the address now showing in the URL Bar of your browser. e.g. http://www.yourname.webbrochure.com.au/build.php

This will be password-protected when live but not while in Preview. Enter your username & password in the Username Login if requested to access build.php.

The administration page opens and displays the Page/Build Edit Menu.

The Build area opens up to a number of sections – each with its own purpose

The Site Content is where most of the editing and page changes will be made. A detailed explanation of all words will be made in the following pages. Please note: these same terms apply for all the sections making up the web page.

Top Banner controls the top area of your web site. It may hold a menu if your design required it.

If you need to make changes, we recommend you request advice first.

Always work on a copy.

The Left & Right Blocks allow for more navigation, and may hold menus, search boxes, links to special items or pages, or mention sponsors. Your design will determine which one you use although you can add the other later if it seems useful.

Footer shows on each page, and is a great place to put contact details or a bottom menu

(5)

5 THE PAGE EDIT MENU: Explanation of Menu Controls

Page Names You can edit the name by just typing more in the box – or by highlighting & typing over existing text

Click on the << double arrows –what happens? Click on a < single arrow – what happens? << moves the page to the top of the other pages, thereby reordering the pages.

< moves the page one spot up, thereby reordering the pages.

Click on the >> double arrows –what happens? Click on a > single arrow – what happens?

>> moves the page to the bottom of the other pages, thereby reordering the pages.

> moves the page one spot down, thereby reordering the pages.

Please note: subpages can only be moved inside their current heading. Non-highlighted arrows indicate the limit of movement possible.

Edit Displays the selected page with its Content Managers revealed so the Administrator can change the content as necessary. There will be a large section devoted to this in later pages.

Publish makes newly edited content visible to site visitors. While you are editing a page the original content is still shown to visitors until you finalise your work and select Publish to display the changes to the world. The word publish only becomes highlighted when some change has been made to the page and you have saved it as you left.

Pages can be worked over for several weeks or more without needing to be published.

Remove allows you to remove a page but it is a 2 stage process. If there are subpages please be aware they will be deleted with the main page.

To prevent this, if appropriate, move the subpages to another heading first

Choose delete (final removal) or cancel (return to editing).

Your pages are backed up and can be retrieved by contacting RS Net for the most recently backed up copy.

You may lose some recent changes though depending on the time of the last backup.

Tick a couple of pages, press Sub or Add (to indicate the change) and then look at your live menu. Then untick them & press Sub What did you see happening? Show – when this item is ticked, the page is shown on the web menus, and thus seen on the web. Note: Pages can be unticked for later re-use eg Specials or Theme pages eg Christmas, or so you can work on them unseen.

(6)

6

There are several other controls that space did not allow us to add to the diagram above.

Show sets the page to show on the website. Unless this check box is selected the page will not be visible to the public.

Select Button selects a page to be made into a lower level page or moving lower level pages to another heading.

Click in the button to select the page to be moved, then click Sub where you want to drop it. You can move pages to other headings using these 2 tools. Search, Search Page and the

Search Box

When a client types in a search request, a page called Search Page (see full page diagram above on page 4) will open up with links to pages that match the search. All pages that are ticked are used in Searches

View - when clicked will show you what the page looks like on the web now, before your changes are published.

The controls at the top of the View page offer a chance to go in and edit or just leave the page. Leaving the page does not highlight the word publish

If you have been working on the page, but not yet published your changes, this is what you will see.

Done allows you to check what’s there then close the page

Revert to Previous Version gives you the chance to say that all changes since you last published are cancelled and you want to stay with the published page.

You press the button, go back to your edit page and save it again, then publish it – all the unwanted changes will have been removed.

Copy – a very useful command.

Make a copy of a page to make changes, to try out new ideas.

Create a template where suitable for say product pages. Don’t forget to call it Template or similar for convenience. Copy – this command only copies published pages, so if you are creating a template, publish it first, then copy.

Note: If you are making changes to your home page especially, work out your changes on the copied home page, then make the same changes on the original page – this is to keep your Google ranking intact.

(7)

7

Adding a new page or a sub page

New pages - To add a new top level (pink) page,

type in the page name in the area marked Name, then press Add at the end of the line. All new pages are created at the bottom of the Site Content area – you then need to move them into position.

We have already said that any page can be made into a subpage by clicking on Select and pressing Sub where we want it to sit but we can also go direct from new page to subpage.

Add a new subpage – to add a new subpage (yellow) or a subsubpage (green)

directly from scratch, type in the page name and click on the Add button alongside the page where you want the page to sit under. See below.

Moving a lower level page back to top level (pink) is simple.

Just click on the Select Button next to the page to be moved then, click on the word Top.

The screen will be redrawn and the newly moved now pink page will be shown at the bottom of the list (ready for you to use the < > to move it into position)

(8)

8 EDITING YOUR PAGES

Select Edit from the Page Edit Menu (see page 5). Below is the editing layout of your page:

The Vertical Replicator indicates the type of page you are building as opposed to a grid replicator (divides page into columns). The Vertical Replicator could be compared to an essay on a page, where each module when added is like a paragraph, and they all fit one under the other. It is more

straightforward, timesaving and versatile than the grid.

To Add a new module (or section), use the pull down to select the required module, then press Add New Section. The page will redraw and the option to remove that section then appears next to it. Remove following module does exactly what it says and only that module is removed when the screen redraws.

Save or Save and View any changes made to your page before exiting. If you are happy with the page remember to Publish for public viewing (see page 5 – Page Edit Menu) Save & View allows you to review your work

Cancel allows you to leave a page without saving, and no publishing is needed. These controls are also at the bottom of the page

The word Reference: is very important. In this context, it allows you to tie different blocks, footer content & top banner together.

See FAQ for more details

Site content indicates where you are in the web site as opposed to a block or a banner. New Subpage was the title of the new page on the menu.

(9)

9

Modules available depend on your needs and specifications made with your order. The following are common to most.

Each module can be positioned on the page using Horizontal alignment. Modules can also be added between other modules wherever the Add section here button is found.

Meta Tags & Title – Simple

The Meta Tags are essential to promote your site to the search engines and should be the first component on each page. It’s all about getting found!

There are 3 important Meta Tags set out in the table above:

 Title: You can use up to 65 – 80 characters here (spaces count too). It is recommended that your business name forms part of it, perhaps your location & your activities. What you need to remember is that you should add different titles to each page to reflect what is on the page. Don't use the same words or the same word order.

 Keywords: Select meaningful words or phrases used on your page, that reflect what you want to be found by. Separate each set with commas.

e.g. Renton Solutions, web solutions, websites, e-commerce

 Description: Write 2 or 3 sentences about your business from the text on your page (again about 180-200 characters). This is not the place to say how good you are. This is where you say what your business is about.

e.g. Renton Solutions is a new Adelaide IT business specialising in database programming, and web solutions with technical support for new and existing computers.

Important Note: Every page has its own independent set of Meta Tags. Remember that Google and other search engines are not impressed if the Meta Tags do NOT reflect the page concerned.

(10)

10

Single Section (HTML as WYSIWYG)

WYSIWYG means "What You See Is What You Get". The WYSIWYG allows users to edit text and add a photo like they would in other "word-processor" software like Microsoft Word.

 Horizontal Alignment: Left, centre or right alignment.

 Header: This is the actual text of the header.

 Header Size: 1 is largest 6 is smallest.

 Header Alignment: Position your header horizontally

 Current Image: Displays the current uploaded image.

 Image Upload/Browse: Click browse to search and

select a photo from your computer. Images must by saved as .JPG or .Gif files.

 Image Size: Allows the image to be resized (width x

height) as it is uploaded. Leave blank for full size. Resizing a small image to large generates poor results.

Hint – use say 300 * 300. The longest side will be 300 pixels, the other will be correct proportioned.

 Image Alignment: Horizontal image alignment.

 Left – Text will be on the right of the image.  Right _– Text will be on the left of the image.  Centre _– Text will be under the image.

 WYSIWYG Text Controls: (for this version shown) New document (clears text), Cut, Copy, Paste, Bullet point list,

Number point list, Indent, Outdent, Horizontal Rule, Format Link, Text Font, Text Size, Bold, Italic, Underline, Alignment (Left, Centre, Right), Set Colour.

 Use of the horizontal rule: This allows you to add lines across the entire text perhaps for a heading.

 The Format Link - allows you to add hyperlinks. To send someone to another website type the full address from

www. in the box, then highlight the text you wish to convert into a link, and press the Add button. As you want people then to come back to your web page, here is a little piece of code for you to paste into the text to ensure they do.

--- Click <view HTML>

Paste " target=_"new1" directly after the address.

This is an example of what it should looks BEFORE and AFTER the new code is pasted in. Before: href="http://www.gulfwestern.com.au/"' category.asp?CategoryID='8"'>

After: href="http://www.gulfwestern.com.au/" target='_"new1"' category.asp?CategoryID='8"'> When finished, click the View WYSIWYG to return to your normal editing

---

 A matrix of colours that can be selected to colour text is displayed on the right of the text. Select the text and

click a colour to change the text.

Important Notes:

(11)

11

It is also important to realise that other documents are full of their own code which will confuse the WYSIWYG. Paste the original document into Note Pad before adding it to the site. Tables are the exception provided all formatting is done by the mouse and not by tabs.

To add text to a new line rather than a new paragraph. Press <shift> and <enter> together.

The Single Section (html as WYSIWYG) – Later version

The later version operates well in both Internet Explorer and Firefox (the earlier version worked better in IE).

In this newer version images already on line can be interspersed with text.

There are many controls available, which require text to be highlighted to be acted upon. A single right click will bring up all these controls. Most of them you will find in Word. It is suggested that some time spent experimenting here would be of use.

The arrow shown in the right hand corner allows you to enlarge the editing area of the WYSIWYG text area – very useful for longer entries and can be contracted to save space while editing other modules.

The controls Left Right Centre & Justify allows you to position all the text within the module

Alternate Textallows you to make more of an illustration. Search engines & sight-poor viewers who may use spoken software, can then pick up the gist of the

illustration. Always use AlternateText whenever you have that possibility – it enhances findability as well as making your site more available to the sight challenged.

(12)

12

The following shows some of the new editing controls. While much of it looks very like Word, there are some items that may seem difficult to find. This is because some items only become bright when an area is highlighted. This will let you discover some of those secrets.

Just take the time to explore this feature. It is a very powerful editor that should serve you well. Linking and unlinking - once you

have highlighted the text to be linked, these become bright and you can then add/delete your links. Fill in the http;//webaddress.com Then decide where the window should be opened, write a title for the page you are linking to – good for Search Engines, and Insert it. Your highlighted area is now an instant link.

To unlink, highlight the current link and press the un-link symbol. Inserting a table

Tables can be copied and pasted from Word or they can be created in situ.

Place the mouse where the table is to go and click on the symbol. The following screen comes up. Explore the other features in this table. Create one to try it.

Insert/Edit embedded media Take time to experiment here. This needed an area to be highlighted first

Insert a custom character –accented

letters, symbols, Alphabet symbols

.

Using html – if you

need to use html directly to achieve your effect, just click on the word, no highlighting needed Full Page working area. Click on this symbol-opens up to a full page on your

(13)

13

Spacer

This creates space between other components to assist with the layout of your page. Height: The height of the space, in pixels. 20 Pixels is a Hard Enter.

Width: The width of a column in a grid replicator..

File (With Options)

This creates a File Download Link with variable Description and File Name.

 File Name: Optional File Name for download. (Defaults to uploaded file name if not provided).

 Current File: Name of the file currently used for downloads (already on the site).

 File Upload/Browse: Click browse to search and select documents from your PC.

 Tick Open New Window so that the download information opens and closes in a new window.

Your File Download Link can be an image or just header text. Later versions include html or plain text. Select the required option from the drop down box and click ‘Add manager’.

For the Header Text option  Type Header.

 Header Size: 1 is largest 6 is smallest. (Suggest 3 or 4)  Choose Header Alignment.

Click Here For Prices

The underlined phrase above is how your Header Link will look.

For the Image (margin) option

 Current Image: Displays the current uploaded image.  Browse to search and select your image from the PC.  Tick Resize (Minimize Only) - An essential step!

Resizing a small image to large generates poor results.  Choose the Size in Pixels. Eg (200 width x 200 height)  Add Margin means a little more space around the image.  Later versions of this have extra features including

hover text.

(14)

14

Image Gallery (With Popup)

The Image Gallery with Popup allows you to create a grid of images which can be popped up to a new screen in a larger size.

 Dimensions: This means that the images you add will be set out in rows of 2 across and 2 down, before it starts a new page. You could make them 2x3, 3x3, 4x3 etc.

 Use page numbers. A tick in the box here means that if you go over the page, page numbers will appear to help the public navigate your gallery.

 Max page numbers shown: If you are adventurous enough to want more than 16 pages, then change the numbers.  Spacing: Put a margin of 10 pixels or more around the image. This lifts the image away from the image title which is

placed below the image.

Click ‘Add new section’ to start uploading your photos. The component manager will expand to include the screen below.

 Horizontal & Vertical Alignment: Choose the alignment of your photo based on the dimensions or grid entered above.  Current image: Displays the current uploaded image.  Click Browse to search and select the image from your PC.  Popup Titleappears above the expanded image on a different

page. Annotation: The most valuable piece of text for search engines. Images are not read by search engines or poor sighted people. The words here explain the image.

 Text: This is the wording immediately under the image. If you ticked Add Margin it will allow some space between the text & the image.

 Size: Please note there are 4 size controls, rather than the usual 2. This is because you are controlling the size (In Pixels) of the original image (thumbnail) which appears on your main web page, as well as the enlarged popup image which opens in a new window. You can change these sizes, but it must be the same in every Image Manager you add, so it stays consistent.

Important Note: all three text areas are very valuable as keyword sources. Remember to include these in the Meta Tags component. (See page 7)

There are several other features that use the same Image Gallery setting out. – The Album Replicator, which allows you to add any features and will set it out in columns and rows, as well as various versions of the Image Gallery with Popup.

(15)

15

Email Disguised - Popup

The Email Disguised - Popup component allows you to create an email link for client enquiries. The link can be in text or button form.

 Horizontal Alignment: Left, centre or right alignment

 Subject: Add the subject that will appear on your client’s emails.  Admin Email: Add your email address here. (Recipient Address)  Link Type: Button or Text

 X and Y allows you to decide where on the page you want the email to popup. 0,0 is of course the top left of the screen. Make sure you can see in Save and View both the email button and the resulting email information. If not seen on the same part of the screen , some think it is broken.

Email Disguised - with Anchor

Email disguised with Anchor looks very similar but allows you to anchor it to a certain part of the page.

Email disguised helps prevent your email address being picked up by spammers from your website pages.

Plain HTML or Plain HTML (WYSIWYG)

The Plain HTML and Plain HTML (WYSIWYG) components allow you to work directly with HTML programming code. When using online applications (e.g. Google Sense, Google Maps, etc), you may be given code which can be added to the web brochure by using these managers.

This is the text part of the Single Section and works the same way – plain html invites you to add the

(16)

16

FAQs

1. Why can’t I see the page I finished on the live site? Have you ticked the page under Show? See page 5

2. What does the word Default mean at the top of the Home Page?

The word Default in the Reference box is quite important. As your site is a database of web pages they need to be called up when someone types in your domain name. If you View each of the footer, top banner and block pages (if active), you will see that each of them has the same word. This allows all components to start together, and then the other pages will follow according to the menu. If one doesn’t appear as expected then please check that this word is present on the missing part.

3. I wish I knew when I last updated a page.

There is a module called Date Modified which automatically updates when you leave a page.

4. Can I draw a line across the page?

There are 2 ways to do this. In the text part of the Single Sections there is a small horizontal line which when added to an empty space will rule across the page.

There is also a separate module called the Horizontal Rule which does the same. 5. Is there an online Help

For many of our first introduced modules, there is On-line help and this is now being updated. Details of how most modules work can be found there.

6. I just lost my work – why?

There are several reasons – power surges, someone turned off your PC, you left it open when you walked away and didn’t save it, a phone call interrupted you. As with all computer

programs saving every few minutes is both practical and proactive. If something happens you may lose a few minutes work – an irritation rather than a catastrophe!

7. How can I link 2 of my web site pages? There are 2 ways.

a. On the live site, copy the address of the page to be linked to from www. onwards. Then in the Text WYSIWYG paste it into the format box. Highlight your linking text and press Add. b. Use the Module called Object Link. Instructions for this module can be found on the existing On Line Help. As long as the page to be linked to has been created, then the page can be found on the Pulldown list.

8. How do I link my website to another? 2 ways again – copy the procedure in 7a.

(17)

17

9. STATS – I don’t want my competitor to see how well I am doing

Just ask your account rep to organise for them to be passworded or send an email to [email protected] with the request.

10. I want to do something different on my site – none of the modules seem to do this… Again contact your account rep. There may already be a module which does what you want and you can purchase it, or it may need custom design. All options will be presented for your decision.

(18)

18 WEBSITES & SEARCH ENGINE OPTIMISATION

 Establish consistent branding on your site.

The brand creates and reinforces a user's impression of the site. If your site is strongly branded and consistent with the rest of your business, visitors will remember the site when they go shopping for your product or service.

 Page layout should be consistent. Visitors like to be able to predict the location of important page features soon after they start using the site.

 Text colours and fonts should be consistent. Avoid wide variation of colours.

 A slogan briefly and simply explains why your site, products or services is better than other sites. It should be easy to remember and reinforce your branding.

 The content should be clear and simple.

Your site may have a great design, but after the initial impression, good content keeps them there and encourages them to return. Good and changing content is the best way to keep your site up in search engine ranking.

 Create your pages around your major products, services and/or key benefits to visitors.  Be specific, don’t use general phrases like ‘our products’.

 The most important content should be high on each page so it is seen first. This helps your visitors quickly decide if they are in the right place. Search engines give a higher rank to the first couple of paragraphs as well.

 Content should be formatted so that it's easy to scan. Use a combination of headers, bold type, colour or lists, etc. to emphasise important points, product features and so on. Font size is also important in Search Engine strategy because the font size used affects the importance a search engine spider puts on your text.

 Search Engines use the relationship between the Meta Tags (See Page 7) and page content to determine the relevance and ranking of the page compared to pages on other sites, so it is important that the keywords and phrases are also used in the page content. The more important ones should be repeated several times.

 Provide for visitor feedback.

Visitors generally feel more comfortable with a site that allows several contact methods.

 Displaying complete contact information including your business phone number and street and/or postal address helps to assure them that your business is really legitimate.

 Using your Email Disguised _– Popup component will hide your address from e-mail spiders. (See Page 11)