Easy Instruction Guide

Transcription

1 Easy Instruction Guide

2 Welcome 1 Activation 2 Opening your account 8 Design tips 10 Creating Web pages OPTION 1: Choose design 14 OPTION 2: How many pages? 15 OPTION 3: Change content 15 OPTION 4: Publish your site 22 OPTION 5: Extras - Add features 22 - Personalise 36 - Admin 51 - Earn money 55 - Add widgets 55 - SiteBoost tools 57 OPTION 6: Log Off 57 Using your 60 Website and address renewal 76 Appendix 78 Technical specifications 122 Frequently asked questions 126 PC CD-ROM contents 136 Index 138 Upgrade to Takeaway Website Pro 144

3 1. Welcome Welcome and Congratulations. You are a few simple steps away from creating your very own website courtesy of Mr Site. Inside your Mr Site box is this easy instruction booklet and an activation card. We are always adding new features to the Takeaway Website so not all of them may be listed in this manual at the time that it went to print. This manual will be regularly updated with any new features and can be downloaded from the help section within your Mr Site account Take a look at your Activation Card. On the back of it you will see your unique password which will look something like this: BLUECAR12335 Please keep this password private and in a safe place as you will need it every time you want to update your website. To begin using your Mr Site website you need to make sure that your computer has the most up to date Internet browser. We recommend using Internet Explorer 8 or Mozilla Firefox 3 for a PC, and Mozilla Firefox 3 or Safari 4 for a Mac. You can download these for free from the following locations: Firefox - PC & Mac Internet Explorer - PC Safari - PC & Mac Please note: DO NOT use AOL or Google Chrome as Mr Site will not work with these browsers. 1

4 2. Activation Activation Once you are up to date, you can activate your Mr Site account by visiting the following address: PLEASE NOTE: You must NOT type this address into your search engine box (e.g. your Google or Yahoo search box). It MUST be typed into the very top of the page where web addresses are usually found, for example where the addresses or are seen. You will then be asked for your password. Please type it in the box provided exactly as it is printed on your activation card. PLEASE NOTE: This password is case sensitive. Click on the GO! button. If you make a mistake, you will be asked to correct it. 2

5 2. Activation You will now be asked for some personal details such as your name, , phone number and home address in order to register the website and website name (domain name) as your own. You will also be asked to answer a private security question that will be used to verify your identity if you lose or need to change your password. PLEASE NOTE: It is vital that Mr Site has your correct contact details so that you can be notified when your website is due for renewal. If you fail to renew your Mr Site package you may lose your domain name, your website and your address. These details will also be used to verify your identity should you lose or need to change your password. You will then be asked to choose the website name (domain name) that you would like. It is important that you choose something memorable and easy to find because this is what people will be typing into their web browser to find your website. For example would not be a good choice. Please remember that some website names have already been 3

6 2. Activation taken by other people. If you think of a name but it has already been taken by someone else, Mr Site will tell you and you will have the option of choosing another name. PLEASE NOTE: A name not available as a.com may be available as a.info or a.net for example. You can try these different combinations by selecting each one from the drop down list provided. You must provide a valid ABN number to register a.com.au or.net.au name. When you have picked your name, Mr Site will ask you if you are happy with your choice and to check that the spelling of this name is correct. PLEASE NOTE: Once you have clicked the Next button to confirm your choice of name, you will NOT be able to change it. Your choice will be final. If, in the future you wish to change your name, there will be a small administration fee. You can buy your new name by clicking on the Buy button inside your Mr Site account. You can also buy extra names here(e.g. you can buy a.co.uk to match your.com). Once you have successfully chosen a web name, you will be given an Account ID to go with your password. Make a note of this as you will need both the password and the Account ID to make changes to your website. PLEASE NOTE: Your Account ID will be your website name without the www. You can write this Account ID on the lower strip of your activation card. We recommend that you do this now! PLEASE NOTE: Make sure that you keep your Account ID and password private, as anyone who knows them will be able to change the contents of your website. Should you lose your password, use the password reminder service when you try to log 4

7 2. Activation into your account. To change your password see page 54 I already own a website name (a domain name). Can I use it with Mr Site? Yes you can. If you already own a domain name and you would like to use it with your Mr Site package, please type this name in the box provided and tick the small Already have tick box as directed. PLEASE NOTE: DO NOT tick this box if you do not already own your domain name. You can get on with designing your website straight away, but at some point you will need to move your name over to Mr Site. This will allow you to connect your website with your domain name. How do I move my existing domain name to Mr. Site? There are two ways to do this: METHOD ONE Use this method if you would like your name moved fully to Mr Site, i.e. your name will be INCLUDED in the cost of your Mr Site 5

8 2. Activation package and your current name company will not continue to charge you for your name on top of your Mr Site package. If your name is a.com/.net/.org/.biz/.info: Please ask your current name company to unlock your name and give you an authorisation code (also known as an EPP Key ). You will then need to and tell us your domain name and this authorisation code. We can then process the name transfer for you. If your name is a.co.uk/.org.uk/me.uk: Ask your current name company to change the IPS tag to: MRSITE. (PLEASE NOTE: This is case sensitive) Once this has been done please tell us your domain name and inform us that you have changed the IPS tag. We can then process the name transfer for you. If your name is a.com.au or a.net.au: Please ask your current name company for a domain name transfer password. You will then need to support@mrsite. co.uk and tell us your domain name and this domain name transfer password. We can then process the name transfer for you. If your name is a.co.za: Please contact your current name company and let them know that you wish to transfer your domain name to Mr Site. Next, support@mrsite.co.uk and tell us your domain name, stating that you want to move your domain name to Mr Site. We will then contact your current name company and you will receive an from them asking you to confirm your wish to transfer. If your name is a.co.in: Please ask your current name company to unlock your name and give you an authorisation code (also known as an EPP Key ). You will then need to support@mrsite.co.uk and tell 6

9 2. Activation us your domain name and this authorisation code. We can then process the name transfer for you. METHOD TWO Use this method if you would like to keep your domain name with your current name company, i.e. they will continue to manage your domain name. Please note, however, that using this method means your current name company will continue to charge you for your name ON TOP of your Mr Site package. Should you decide to use Method One instead (see opposite), your domain name will be INCLUDED in the cost of your Mr Site package. All domain names have two pieces of information attached to them - these are referred to as Name Servers. These tell a domain name what content it should show when someone visits your website. A Name Server can allow a domain name to be held in one place, whilst the website content can be held in another (so your website content can be held by Mr Site, whilst your domain name is looked after by another name company). Using this method you can leave you domain name with its current host but tell it to show your Mr Site website. To do this, log into your Mr Site account, click on Extras, then click on Admin followed by Edit Name Servers. Once there you will see two boxes titled NameServer #1: and NameServer #2:. Contact your current name company and ask them to adjust their Name Server settings to show the same Name Server settings displayed here within your Mr Site account. Now we can begin creating your website 7

10 3. Opening your Account Opening your account To create your website, visit this address in your web browser: Enter your Account ID and password when asked. You will then be taken to Main options. PLEASE NOTE: You cannot use all these Options until you have selected a design for your website. 8

11 3. Opening your Account Dashboard The Dashboard contains buttons that you will regularly use. Here you can find out how much of your web space you are using, use the Mr Site Forum, Buy additional Mr Site extras, get Help, see your website s Statistics and check your . See pages for more information. Quick jump Menu This drop down list allows you to jump to different Options quickly and easily. Options This is where all of your Main Options can be found. These will change depending on which area of your website you are editing. Tips and tricks This box displays handy hints for creating your website. Live help box This box will help guide you through all of the Options in Mr Site. Simply roll over an Option and the Live Help box will show you what it can do. 9

12 4. Design Tips Design tips for your website Before you start creating your website, make sure that you read through the following design tips: Be consistent Make sure that the text on every page of your website is consistent in size and colour. Create your own set of design guidelines and stick to them. For example, you may decide that all headings on your website will be font size 14 in black, and all normal text will be font size 12 in grey. Make sure your font is easily legible. For example, Arial, Verdana and Times New Roman are used almost exclusively on web pages throughout the Internet. These fonts can be guaranteed to appear on all computers. If you were to pick a font that was not on the computer of a visitor to your website, your text would not be visible to them. Choosing hard to read script fonts, such as MS Script should be avoided. To set global fonts across your website click on Main Options, Extras, Personalise and Global Fonts (see page 42) Choose your colours carefully You might think that a technicolour website looks great, but a lot of your visitors won t agree. As you are learning to build your website you may get carried away and use a variety of different colours on each web page, however this is not recommended. Try to use neutral colours and imagery as much as possible. Choosing the right colours is similar to decorating a house. Certain colours that work offscreen often work equally well on- 10

13 4. Design Tips screen. Bear in mind that around 10% of us suffer from colour blindness with varying degrees of severity. Colours with high contrast e.g. black on white are therefore recommended. Red on green would be a bad choice as they both have the same levels of contrast and would be virtually indistinguishable to someone suffering from colour blindness. It is recommended that you choose background colours that are neutral and easy on the eye. Avoid using complicated pictures, photos or artwork as the basis of your web page background as this could make your website look messy. Choose something simple and neutral, which is complimentary to your subject matter. The same applies for your header. Again, avoid using a photo on your header unless it is minimal and/or sparse in nature. Plan ahead Before you get started, it is a good idea to sit down and plan how you want your website to be organised. Instead of creating 50 separate pages with small pieces of content on each one, you could condense this content into 10 or 20 pages. This will give you lots of room to develop your website later on. Break up your pages It is easy to completely fill up a web page with text. As informative as this text may be, visitors to your website may be overwhelmed by it and as a result may skip over this page completely. It is recommended that you break up any heavy pieces of text with some images, headings and paragraphs. This will make your page a lot easier to digest and encourage visitors to your site to read through the information. Remember, web page visitors tend to browse rather than read. Try using tables to lay out your webpage, e.g. put text in one half of the table and an image in the other (see pages ) 11

14 4. Design Tips Don t leave empty pages When you begin creating your website there is no need to select 50 pages straight away. Adding lots of pages in one go will make your site look unfinished and unprofessional. Only add pages when you need them and never leave blank pages showing as Empty. Walk before you run It is easy to get carried away and create an overly ambitious site which may end up looking complicated and confusing. It is recommended that you start creating your website in Simple Mode then later, when you are feeling more confident, move to Creative Mode (see page 20). Too often people start in Creative Mode without properly digesting this manual and then become frustrated. Glancing over this manual is strongly recommended and will save you hours in the long run. Resize your photographs first When you insert photos into your web pages it always pays to resize them first. These days, digital cameras are such high quality that a single photograph would require 3 or 4 computer screens to display it at its natural size. Imagine how big that photo would be if you printed it out! It will take a huge amount of time for visitors to your website to download such a photo and it will eat up a huge amount of your web space, requiring you to upgrade sooner. Resize your photos using your favourite image editing package. A lot of cameras come with a cut down version of the popular paint programme Photoshop, however you may prefer to use another package. One package Mr Site recommends is Google 12

15 4. Design Tips Picasa, available for free from Please bear in mind that Mr Site cannot offer support for these packages. Test, test and test your shop again Test your Shop after making any changes to it, however small. It is easy to accidentally remove some crucial information when editing your Shop. After every change, perform a dry run on your cart by visiting your site and going through the motions of purchasing a product. Of course you don t have to complete the purchase, but testing right up to the Pay Now point is recommended. If you get that far then you can be confident that everything is in order (see pages 22-25). Try to use Outlook, Thunderbird or Windows Live Mail instead of your Webmail Use your Mr Site address instead of your free hotmail, yahoo or gmail account as it looks far more professional and can help you stand out from the crowd. Your Mr Site address comes with Webmail which allows you to check your when you are on the road. At the office, however, it is recommended that you set up your Mr Site account in a mail package such as Windows Live Mail or Mozilla Thunderbird so that you can take advantage of it s many excellent features such as mail sorting, spam filtering, calendars, reminders and much more. You can also store your mail on your computer instead of on your Mr Site Webmail, so you can save some of your allotted web space. See page to learn how to set this up. Now begins the six easy steps to creating your own website. 13

16 5. Creating web pages Creating web pages 1. Choose a design The first thing you must do is select a design for your website. The design is the most important part of your site because it determines what it will look like. So, click on the button that says Choose a design. You will now be taken to another page featuring a large selection of website designs. Click on each design to see a larger version of it. To select your design, simply click on the Select button. You will then be presented with further options. Click on the Website layout tab and you can decide if you want your menu to be horizontal or vertical, if you want it on the left or the right. Click on the Themes tab and you can choose a pre- 14

17 5. Creating web pages defined colour scheme for your selected template (although not all templates have this option). If you scroll down to the bottom of a page you will get a preview of how your website will look. Click on Save and Finish when you have chosen your design. Later you can personalise your design further by adding different headers, logos and changing backgrounds and fonts. To do this, click on Extras in Main options, then click on Personalise (see pages 36-51). 2. How many pages? Clicking on How many pages? will allow you to tell Mr Site how many pages you want to add to your site. Let s pick something sensible, like three to start with. Remember, you can go back and change this amount at any time by returning to this Option, so don t feel like you have to stick to it. Also on this page you will be asked for the title of your website. Normally, this would be your company name or personal name e.g. Best Widgets Ltd. Click Continue when you are done. Now for the next Option. 3. Change content So far we have told Mr Site what your website will look like and how many pages it will have, but as yet, the pages are still blank. From here you can fill the pages up with your own pictures, videos, music and text So, click on Change content in Main options. You will now be presented with a drop down list of all the currently Empty pages on your website. To start filling them up, simply select the desired page from this list. Remember that page 1 is what is known as the Home page. This will be the first page that visitors to your website will see so it should really grab their attention. Click on Page 1. empty. Change content will appear. Let s fill it up. 15

18 5. Creating web pages The Change content as seen in Simple mode 16

19 5. Creating web pages Level Change content can be set to 3 different Experience Levels. You can select the Level to suit you from the drop down list in the top right hand corner of Change content. Beginners can select Simple mode from the drop down list. If you want to get more creative, using different layouts, fonts or inserting tables and links etc, select Creative mode. The third and final Level is Advanced mode. Changing your Level will alter what you see on Change content. To begin with, let s stick with Simple mode. Page title box You can type into this box whatever you wish, but ideally it should have something to do with the page at hand. As we have clicked on page 1, we could type Welcome to my website. Description box This box will provide a short description of the page at hand. So, type: Welcome to my new website. I hope you enjoy your stay and that you will visit again soon. Paint box This represents the main section of your web page. In it you can type your text and insert any pictures or downloads. Add a picture Click on the area of the Paint box where you would like your picture to go, then click on Click here to add a picture. 17

20 5. Creating web pages A Mr Site image sender pop up box will appear. Click on the Browse button to search for the picture of your choice on your computer. A Choose file pop up box will appear. When you have found your picture, click on it so that it is highlighted, then click on Open. The file name has now been inserted into the Mr Site image sender box. Next, click on the Click here to send your picture button. You may have to wait a few minutes while your picture is sent to Mr Site. When it has been sent successfully, a Mr Site image sender pop up box will appear to let you know. You MUST click on Continue to send the image to your web page. When you have done this, you will see that the name of your picture file has been inserted into the Paint box. To see the actual picture itself, you will need to click on Save Your Changes. Next, click on Continue to return to Main options and select Publish your site to visit your website and see it in all its glory. PLEASE NOTE: Mr Site uses automatic sizing and layouts when inserting your images in this Simple mode. To change the size and layout of the pictures on your website, select Creative mode from the Level drop down list in the top right hand corner above the Paint box. This will take you to Creative mode where you will be able to size your pictures to suit you (see page 20). 18

21 5. Creating web pages Add a Download A download is a file that you can put on your website for visitors to click on, download and keep on their computer. Download files may include music files (MP3s) or movies (MPEG or AVIs) etc. Click on the area of the Paint box where you would like your download (e.g. a music track) to go, then click on Click here to add a download. A Mr Site file sender pop up box will appear. Click on the Browse button to search for the file of your choice on your computer. A Choose file pop up box will appear. When you have found your file, click on it so that it is highlighted, then click on Open. The file name has now been inserted into the Mr Site file sender box. Next, click on the Click here to send your file button. You may have to wait a few minutes while your file is sent to Mr Site. When it has been sent successfully, a Mr Site File Sender pop up box will appear to let you know. You MUST click on Continue to insert the file into your web page. When you have done this, you will see that the name of your file has been inserted into your Paint box. To be able to test out your download, you will need to click on Save Your Changes >>>. Next, click on Continue to return to Main options. Select Publish your site to visit your website. Once there, click on Download to download your file. It is essential that you click on the Save your changes >>> button so that you do not lose any new information that you have added to your website. 19

22 5. Creating web pages Creative mode We are sure that you will love the look of your website. However, you may wish to get even more creative, using different layouts, fonts or inserting tables and links etc. If this is the case, select Creative mode from the Level drop down list in the top right hand corner of Change content. On this screen you will find a different looking Paint box. If you have ever used a word processor before, you will find some of the buttons familiar. You can type your text into the Paint box and use these buttons to change colour and styles, create tables, change the layout and insert pictures, links and HTML code etc. Feel free to experiment with this powerful tool. Don t be afraid of all these buttons! We have put an Appendix on pages of this manual which explains them all clearly and simply. They are easy to use. If, however, this seems too much for you, you can always revert back to Simple mode and continue designing. PLEASE NOTE: You can go from Simple mode to Creative 20

23 5. Creating web pages mode without losing any images, text or layouts. However, any images and layouts made in Creative mode will be lost when changing from Creative mode to Simple mode. Only your text will be kept when you change from Creative mode to Simple mode. Advanced mode If you have had experience working with websites and HTML, select Advanced mode from the Level drop down list in the top right hand corner of Change content. You will notice the same buttons found in Creative mode but with a few additions. We have put an Appendix on pages of this manual which explains all these buttons clearly and simply. PLEASE NOTE: You can change from Creative to Advanced mode, and back again without losing any images or layouts. Remember, any changes you make will not be kept unless you click on the Save your changes>>>> button at the bottom of Change content. 21

24 5. Creating web pages 4. Publish your site Time to take a look at your masterpiece! Hit the Preview button or return to Main options and click on the Publish. Voila! Your freshly created website is there in all its glory. There are bound to be a few bits you would like to change if they don t look quite right, so simply follow the Options outlined above and below to your heart s content. There is no limit to the amount of times you can change your website, so get creating! 5. Extras Click on Extras in Main options. You will be presented with some more Options. Let s take a look at the first one. 1. Add Features A) Add/edit a shop To create a shop, you must first create a PayPal account for free at When you have done this, click on Add/edit a shop and enter the address that you signed up to PayPal with in the Your PayPal address box. Next, select how many products you would like to add to your shop and select the page you would like it to appear on. Click on Next. You will be presented with a list of products. Add or update a specific product by clicking on the Click to edit this item button next to it. Now simply enter the product name and description. Above the description box you will find a selection of buttons similar to those found in a word processor. Type your description, then use these buttons to change colour and styles, create tables, add links etc to it. We have put an Appendix on 22

25 5. Creating web pages pages of this manual which explains all these buttons clearly and simply. You can now enter a price and insert a picture of your product. To insert a picture, click on the Browse button. A pop up window will appear with all the files on your computer in it. Select the picture you want from your computer files, click on it once and hit the Open button. You will now see that the name of your picture file has been inserted into the Picture box next to the Browse button. If you want to protect your picture, you can also add a Watermark to it. The View source tickbox allows advanced users to see and edit their shopping cart s HTML. To add more options to your shop, click on the small cross next to Advanced item options. Here you can specify if customers can buy more than one product, the different types of product available, whether this product is available in different colours and if the product is a digital download. You can also specify postage and packing here. PLEASE NOTE: Another way to add postage and packing to your items is to log in to your PayPal account, click the My account tab, then click the Profile sub tab. Next click on Postage calculations. There are two types of shop layouts to choose from, and you can select which one you prefer by scrolling to the bottom of the page and clicking on the Online shop layout tab. Click on the Image arrangement tab and tick the box provided if you want your most recently added items to appear first on your online shop page. PLEASE NOTE: If you have Takeaway Website Pro you will be able to use an even more advanced online 23

26 5. Creating web pages shop, PayPal s Express Checkout and Website Payment Pro. It has additional features such as stock control, order tracking, international shipping charges and a refund tool. Takeaway Website Standard users can find out more by clicking on click here to find out more under the Takeaway Website Pro and Express Checkout option or see pages at the back of this manual. Follow the steps above for each product you add to your cart, then click on Next, followed by Continue. Take a look at your shop in all its glory by clicking on Publish your site in Main options. Customers can click on the product picture on your website and a larger one will pop up, allowing them to have a closer look at it. To buy a product, customers simply click on the Add to basket button which will take them to their shopping cart page. To pay they can click on Proceed to checkout which will take them to a secure PayPal Payment Page where they can safely and securely pay by credit card or by PayPal. To add or remove items from your shop, simply go back to the Add features page and click on Add/edit a shop again. If you wish to add more items, select the amount from the How many items would you like to add to your shop drop-down menu. If you do not wish to add any more items, leave the figure at zero. Again, select the shop page you wish to edit and click on Next. To remove items from the shop simply click on the item you wish to delete and hit the red cross Delete button on left hand side of the page. When you have finished, hit the Next button. You can have as many shop pages as you wish. Just follow the instructions. You can change the title of your shop page by going into Main options and clicking on Change content. This will take you to Change content PLEASE NOTE: You CANNOT change the prices in your shop in 24

27 5. Creating web pages Change content. You MUST ALWAYS use the Add/edit a shop option to update prices, otherwise changes to your shop will not apply. Please bear in mind that if you add extra text to your shop page in Change content, this text will disappear if at a later date you add to or delete items from your shop. You will need to add this text again when updating your shop. PLEASE NOTE: Every time you update your shop, always test it right up to the Pay now point to make sure it is correctly set up. Collecting your payments Log into your PayPal account at click on the Withdraw tab and follow the online instructions to transfer your funds to your bank account. B) Add/edit a gallery If you have a lot of pictures, this is a great way to show them off. Select how many pictures you would like to have on your gallery page, and on which page you would like it to appear. Then click on Next. You will be presented with a list of pictures on the Edit your gallery Tab. Add or update a specific picture 25

28 5. Creating web pages by clicking on the Click to edit this item button next to it. Next, enter the title of your picture and a description of it. Above the description box you will find a selection of buttons similar to those found in a word processor. Type your description, then use these buttons to change colour and styles, create tables, add links etc to it. We have put an Appendix on pages of this manual which explains all these buttons clearly and simply. To insert your picture, click on the Browse button. A pop up window will appear with all the files on your computer in it. Simply select the picture you want from your computer files by clicking on it once and then hitting the Open button. You will now see that the name of your picture file has been inserted in the Picture box next to the Browse button. To delete pictures, click on the red x. Add a Watermark Protect your images by placing a visible watermark on them to prevent them being copied watermarks can be added to pictures as you add them to your gallery by ticking the Add watermark tick box. The watermark will appear when visitors to your site click on the thumbnail images in your gallery. If you want to add 26

29 5. Creating web pages a watermark to a picture that is already in your gallery, simply re-send the picture stored on your computer to that gallery slot and Mr Site will watermark it for you. Repeat the above steps for each photo you wish to add to your gallery. Click on the Photo gallery settings tab to choose your style of gallery. There are three styles to choose from: 1) Default popup gallery When you first create a gallery, this will be the Default Popup Gallery style. It will display your images in a neatly organised grid of thumbnails. Visitors to your website can click on specific thumbnails to change the page to a light box view. The light box view shows the enlarged thumbnail set against a black background, displaying your image title and description below it. In the top right hand corner of the image you will find forward and backward arrows which allow visitors to scroll through your gallery images. With the Default popup gallery you can specify a thumbnail size and customise image borders and text colour. 27

30 5. Creating web pages 2) Flash animated gallery This gallery looks clean with smooth scrolling animation. This gallery displays 8 small thumbnails on the left hand side of the page and a large central image of the currently selected thumbnail to the right. Users can browse through further thumbnails by clicking the forward and back arrows displayed underneath them. Visitors can select a different main image by clicking on the thumbnail of their choice. When hovering over the main image, forward and backward arrows will appear over it on the left and right, meaning visitors can also scroll through pictures this way. With the Flash animated gallery you can specify an image border type and matching text colour. PLEASE NOTE: Picture descriptions of selected images cannot be displayed in the Flash animated gallery, however picture titles of selected images will be displayed underneath the thumbnails. 28

31 5. Creating web pages 3) Slideshow gallery A Slideshow is a moving presentation allowing visitors to your website to view your gallery like a movie. Your images will be displayed as a series of small thumbnails below a large central image of the currently selected thumbnail. When visitors reach this gallery page, the slideshow will automatically play through your images. Visitors will also have the option to cycle through the thumbnails either by using the controls ( pause, play, next, previous and random ) or by clicking on a thumbnail to select it. Once a new thumbnail is selected it will replace the main image and any the description and title of this image will be displayed above it. With this gallery you can specify a thumbnail size and customise your image border and text colour. Click on the Image arrangement tab and tick the box provided if you want your most recently added images to appear in your gallery first. 29

32 5. Creating web pages When you have entered all your photos, hit the Next button at the bottom of the page followed by the Continue button. You can check out your photo gallery by clicking on Publish your site in Main options. If you want to add more pictures, simply go back to the Add features page, click on Add/edit a gallery again and follow the same process. When adding more pictures, select the amount from the how many items would you like to add to your gallery drop-down menu. If you do not wish to add any more items, select zero pages. Select the gallery page you are editing and click on Next. You can have as many gallery pages as you wish. Just follow the instructions! You can change the title of your gallery page by going to Main options and clicking on Change content. This will take you to Change content PLEASE NOTE: If you add extra text to, and change the title of your gallery page in Change content, this text will disappear if at a later date you add or delete items from your gallery. You will need to add this text again when updating your gallery. C) Add/edit a jukebox Liven up your website with some music by adding a jukebox to it. Simply tell Mr Site how many songs you would like on your jukebox and on what page you would like it to appear. Click Next to enter your songs and to choose the look of your jukebox. To insert MP3s onto your jukebox, follow these handy hints: i) Ensure the file name of your MP3 is short and concise. Try to avoid using unusual letters, brackets or spaces. MYSONG01.MP3, for example, is the sort of file name you should be using. ii) The jukebox will only play MP3 s. Make sure that the music 30

33 5. Creating web pages file you are inserting is actually an MP3. Sometimes the Jukebox may not play the file even though you thought it was an MP3 file. To remedy this problem, open up the MP3 in your sound editing package. Then re-save the MP3 with the following recommended settings: 128kbps 44.1 khz stereo If you do not know what these settings mean, your audio software should explain them in more detail. To add more songs to your jukebox, simply follow the steps above again. To remove your jukebox, see page 134. D) Add a contact form Here you can create a customisable Contact Form to add to your website that customers can enter information into and send to you. This is a great way for them to send you s, orders and information directly through your website. Retrieve your Contact Form Messages Information sent through the contact forms will be sent straight to your Mr Site account i.e. info@yourname.com (replace yourname.com with the website name that you have chosen). Please check the section of this manual for details on how to retrieve these messages from your Inbox. (see pages 60-62) Create your own contact form from scratch To create an contact form, simply select which page you would like it to appear on. Click on the New form button. A new default contact form will appear. Next, create a name for 31

34 5. Creating web pages your form. This will not appear on your website and will be for your reference only. You can edit your default contact form as it is by clicking on the descriptions (e.g. click on Name, change the text to suit your form then click the return button on your computer keyboard to save it), or add extra elements to your form by clicking on the green plus icons. PLEASE NOTE: If you add an element to a form, it will always be added under the currently selected element, which will be highlighted in yellow. To select an element, simply click on it. To delete form elements, simply click on the red icons next to each one. 32

35 5. Creating web pages Form Elements Form area This is an area where the elements of your form are contained. All form elements MUST be contained within a form area. You can have multiple form areas on a page. For example, you could have two parts to a form; the first part could be about your customers contact details, and the second part could be about their requirements, and so on. You can change the name of your form area by clicking on it s title, editing the text and hitting the return button on your computer keyboard. Text field A text field is a box that customers can insert information into. For example, you can create a text field called Name: into which customers can then enter their name. You can change the name of that text field (eg. you could change it from Name: to Age: ) and also add a description to that text field. You can add as many text fields as you want to your form. Text area A text area is like a text field but larger. For example, you could create an text area called Message: where customers can write several lines for a message. You can also add a description to that text area. You can add as many text areas as you want to your form. Drop down box A drop down box allows customers to select various options from a drop down list. You can add or remove your own options which can be selected from the list by clicking on Add, or Remove. You can add as many drop down boxes as you want to your form. Check box A check box is a box that customers can tick or leave blank. For example, you could create a check box called Tick this box if 33

36 5. Creating web pages you like fruit:. You can add as many check boxes as you want to your form. When you are happy with your form, click on the Save contact form button. To edit or delete a form, click on the Edit or Delete buttons next to them in the main contact form menu. Once you have saved your form, you will then need to add it to one of your web pages by clicking on the Apply your form tab. PLEASE NOTE: s sent using this contact form will be sent to your Mr Site account e.g. info@yourname.com (replace yourname.com with the website name that you have chosen). Please check the section of this manual for details on how to retrieve these messages from your Inbox. (Pages 60-62) E) Add a guest book This is a great way for friends, family and clients to leave feedback and messages on your site. Simply select which page you want your guest book to appear on and what colour you would like it to be. Then click on Next followed by Continue. Check out your guest book by clicking on Publish your site in Main options F) Edit your guest book Here you can remove any unwanted messages from your Guest Book. Simply tick the box next to the message you wish to delete and click on delete message. G) Add/edit a password You can restrict access to your web pages so that only people with a password can view them. Add, edit or remove passwords for your site here. 34

37 5. Creating web pages PLEASE NOTE: The Add/edit password Option offers basic password protection and should only be used in applications that do not require high levels of security. H) Sub menus The Sub menus option allows you to place pages within a page. For example a main page might be called photographs. The pages within this page (i.e. the sub pages) might be called wedding photos, family photos, portraits etc. To make a page a sub page, select it from the first drop down list. Next, select the main page from the second drop down list (your sub page will appear within this page). I) Create a blog A blog (short for web log ) is an online diary. Your website visitors can be kept up to date with your latest news by reading your blog. They can also leave comments on your website in response to any diary entries you make. To create a blog, select the page on which you would like it to appear on, then click Next. You can now begin adding entries to your blog by clicking option J Update a blog (see below). J) Update a blog Make entries in your blog by clicking on Click here to add a new post. Here you can specify a date for the entry (the default is today s date, but you can change this if you wish), a title and the main text for your blog entry. The features available to you here are the same as those in Creative mode. For a full description of these features, take a look at the Appendix on pages of this user guide. To update an existing blog entry, click the Edit link next to it. If you want to remove a post, click the cross icon next to it. 35

38 5. Creating web pages K) Create a forum This option allows you to create a forum on your website. L) Edit a forum This option allows you to edit posts on your forum. 2. Personalise Click on Extras in Main options, then click on Personalise. A) Change Header Click on this Option to change the header of your website design. Click on the Pick a header category tab to select your category (e.g. hobbies, art e.t.c.) and choose your pre-designed header by clicking on it. Next, click on Continue. Your changes have been made. 36

39 5. Creating web pages If you have created your own header and want to add it to your website, click on the Add your own header tab. Next, click on the browse button, find the header located on your computer, select it by clicking on it once and then hit the Open button. You will now see that the name of your header file has been inserted in to the Header file box. Click on Next. Tips for adding your own header When sending Mr Site your own header, it pays to follow these simple guidelines: i) Ensure that your header is 850 x 150 pixels in size. This can be achieved in your favourite paint package, for example in Adobe Photoshop or Google Picasa (please consult the user guides for these packages for further details on how to do this as Mr Site does not offer support for these programs). Don t worry too much if your header is not this size as Mr Site will resize it for you. This may mean, however, that it does not appear on your website exactly as you would like it to. ii) Remember that the title of your website will appear over your header. This means that using a header that is very colourful and complex may make this text hard to read. We recommend that you use headers that are generally quite plain or predominantly dark or light. B) Change page title Pick the style of the text of your page title from the drop down list and choose what colour and size you would like it to be. If you want to hide the page title and website title tick the boxes accordingly. 37

40 5. Creating web pages At the bottom of this page you will find a preview of your header. You can click on any text in this header and drag it around to position it as you want. Click on Next to continue. Option 1 Option 2 Option 3 C) Change menu PLEASE NOTE: This applies to vertical menus only From here you can change the look and feel of the menu that appears on your website. As you adjust these settings you will be able to see a preview of your changes to the right of the page. Click on the Basic menu styles tab Menu font Select the font that you would like your menu text be. Menu colour Select the colour that you would like your menu text to 38

41 5. Creating web pages be by either cutting and pasting a colour number into the colour box, or by clicking on the Edit button. Slide up and down the colour bar, double click on your colour of choice, then hit the Apply button. Menu hover colour Select the colour that you would like your menu text to become when a visitor to your website hovers over it by either cutting and pasting a colour number into the colour box, or by clicking on the Edit button. Slide up and down the colour bar, double click on your colour of choice, then hit the Apply button. Menu link style Select if you would like your menu links to have no lines, an underline, an overline, or a line-through. Menu hover style When a visitor to your website hovers over your menu you can decide if no line, an underline, an overline or a linethrough appears. Font styles Make your menu font bold or italic. Click on the to change your menu text to upper case letters. button Menu icon Click on the Edit button and choose a menu icon by double-clicking on it. Click on the close button in the top right hand corner of this window to close it down. Sub menu icon Click on the Edit button and choose a sub menu icon by double-clicking on it. Click on the close button in the top right hand corner of this window to close it down. 39

42 5. Creating web pages Click on the Backgrounds & colours tab Background image Select a background image for your menu from the drop down list provided. Background colour Select a background colour for your menu by either cutting and pasting a colour number into the colour box, or by clicking on the edit button. Slide up and down the colour bar, double click on your colour of choice, then hit the apply button. Menu underline style Choose the style of underline for your menu. Menu underline Choose if you want your menu to be underlined. 40

43 5. Creating web pages Underline thickness Choose the thickness of the underline for your menu. Click on the Font style pro tab Font size You can increase or decrease the font size of your menu text by clicking on the button and dragging it up and down the Font Size bar. Word spacing You can increase or decrease the space between your menu words by clicking on the button and dragging it up and down the word space bar. Letter spacing You can increase or decrease the space between the letters of your menu text by clicking on the button and dragging it up and down the letter spacing bar. 41

44 5. Creating web pages Gap between menu page links You can increase or decrease the gap between your menu page links by clicking on the button and dragging it up and down this bar. Link indent You can increase or decrease the indent space of your menu text. Reset your menu To reset your menu to the default menu of your selected template, click on the Reset to default template menu button. Click on Finish to save your changes. D) Global fonts Here you can apply global font styles and colours along with link styles and colours across your entire website. PLEASE NOTE: It is recommended that you apply global formatting to your website as it will make it look more uniform and more professional As you adjust these settings you will be able to see a preview of your changes to the right of the page. Click on the Font family and style tab Large header A large header should be the title for the whole of your web page text. All your large headers will appear in this font style. Web designers refer to these large headers as <h1> tags. Google will pay more attention to text contained within <h> tags so it is good to place some of your key words in this header. 42

45 5. Creating web pages Small header Slightly smaller headers should be used as paragraph headers. All your small headers will appear in this font style. Web designers refer to these small headers as <h2> tags. Google will pay more attention to text contained within <h> tags so it is good to place some of your keywords in this header. Page body Page body text is the general main body of your text, which will appear in this font style. Web designers refer to the page body as the <p> tag. Page links Page links will appear in this font style. A link (or hyperlink ) is a word or sentence your website visitor can click on to visit another web page. Font styles Make your font styles bold or italic. Click on the to change your text to upper case letters. button 43