Customer Web Site Training

Transcription

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 PO Box 325 Kilkenny SA 5009 PH or margaret@rsnet.net.au Training Material written, 19 June 2013.

2 Customer Training - Website 2013.doc Copyright RS Net 2013 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 Disguised Popup Page 11 Plain HTML and Plain HTML (WYSIWYG) Page 11 Web Brochure & Search Engine Optimisation Page 12 Commercial-in-Confidence Page 2

3 Customer Training - Website 2013.doc Copyright RS Net 2013 VIEWING YOUR SITE Your site name may be something like: or Type your site name in the URL Bar at the top of your internet browser and hit enter. 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. 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 Commercial-in-Confidence Page 3

4 Customer Training - Website 2013.doc Copyright RS Net 2013 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. 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 Build area opens up to a number of sections each with its own purpose The administration page opens and displays the Page/Build Edit Menu. 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 Commercial-in-Confidence Page 4

5 Customer Training - Website 2013.doc Copyright RS Net 2013 THE PAGE EDIT MENU: Explanation of Menu Controls Click on the << double arrows what happens? Click on a < single arrow what happens? Page Names You can edit the name by just typing more in the box or by highlighting & typing over existing text << 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. 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. 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. 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). Pages can be worked over for several weeks or more without needing to be published. 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. Commercial-in-Confidence Page 5

6 Customer Training - Website 2013.doc Copyright RS Net 2013 There are several other controls that space did not allow us to add to the diagram above. 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 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. 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. 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. 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. Commercial-in-Confidence Page 6

7 Customer Training - Website 2013.doc Copyright RS Net 2013 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) If it had subpages, they would also be moved see below Commercial-in-Confidence Page 7

8 Customer Training - Website 2013.doc Copyright RS Net 2013 EDITING YOUR PAGES Select Edit from the Page Edit Menu (see page 5). Below is the editing layout of your 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. Selected content the number is generated 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 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. Commercial-in-Confidence Page 8

9 Customer Training - Website 2013.doc Copyright RS Net 2013 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 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 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. Commercial-in-Confidence Page 9

10 Customer Training - Website 2013.doc Copyright RS Net 2013 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=" category.asp?categoryid='8"'> After: href=" 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: Do NOT save your page while in HTML mode otherwise the public will see code instead of text. Commercial-in-Confidence Page 10

11 Customer Training - Website 2013.doc Copyright RS Net 2013 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 Text allows you to make more of an illustration. Search engines & sightpoor 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. Commercial-in-Confidence Page 11

12 Customer Training - Website 2013.doc Copyright RS Net 2013 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. 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. 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. 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 Insert a custom character accented letters, symbols, Alphabet symbols. Insert/Edit embedded media Take time to experiment here. This needed an area to be highlighted first Just take the time to explore this feature. It is a very powerful editor that should serve you well. Commercial-in-Confidence Page 12

13 Customer Training - Website 2013.doc Copyright RS Net 2013 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. The image upload function is used in pdf uploads, object links & hyperlinks. Commercial-in-Confidence Page 13

14 Customer Training - Website 2013.doc Copyright RS Net 2013 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 Title appears 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. Commercial-in-Confidence Page 14

15 Customer Training - Website 2013.doc Copyright RS Net Disguised - Popup The Disguised - Popup component allows you to create an 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 s. Admin Add your address here. (Recipient Address) Link Type: Button or Text X and Y allows you to decide where on the page you want the to popup. 0,0 is of course the top left of the screen. Make sure you can see in Save and View both the button and the resulting information. If not seen on the same part of the screen, some think it is broken. Disguised - with Anchor disguised with Anchor looks very similar but allows you to anchor it to a certain part of the page. disguised helps prevent your 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 html code, while you have choice to use the WYSIWYG or html in the second. Commercial-in-Confidence Page 15

16 Customer Training - Website 2013.doc Copyright RS Net 2013 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. Use the Hyperlink module. (again see the Online help) Commercial-in-Confidence Page 16

17 Customer Training - Website 2013.doc Copyright RS Net 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 to merv@rentonsolutions.com.au 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. Commercial-in-Confidence Page 17

18 Customer Training - Website 2013.doc Copyright RS Net 2013 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 Disguised Popup component will hide your address from spiders. (See Page 11) Commercial-in-Confidence Page 18