Paint Box Tools. Professional Tools

Transcription

1 Paint Box Tools Professional Tools 1

2 1 Welcome and Appendix Welcome Whether you re a newby Mr Site user or a seasoned veteran you may well have noticed we ve updated our Paint Box editor to something a little more professional. With a host of new features, we re sure that you ll be making your website pages look incredible. Appendix The uses of each button displayed in Creative and Advanced Mode are listed here.

3 2 Description Box Description Box All buttons here are the same as those featured in the Paintbox below, except the following Insert Link button If you would like visitors to your website to be able to click on some text or on an image to see another web page that is relevant to yours, you can use the Insert HyperLink button. In your Description Box highlight the text or image that you would like to convert into a link. Next, click on the Insert Link button. URL: Type the address of the website you would like to link to e.g. Text: This shows the text that you want to add your link to. Target: This determines how the link behaves. Mr Site recommends that you select Blank. This means that the link will open in a new window and your website will still be open behind it. If you choose Self the link open and you will no longer be able to see your web page. Insert Table button Play with the settings here to get your table as you would like it to be. 3

4 3 Paint Box Tools Paint Box Tools Font Tools These drop down lists allow you to select a font and font size for the text on your page. To change specific areas of text, highlight it first before selecting from the list. HANDY HINT: It is a good idea from a design perspective to keep the colour and font size as constant as possible throughout all your web pages. Text Formatting Tools Click on these buttons to write in bold, italic or underlined text. Text Alignment Tools Click on these buttons to push your text to the left, right or centre of your page. The fourth button allows you to Justify your text. This simply means that you can stretch your text so that it spreads evenly across your web page. The last button will remove all justification on text. Remove Formatting Highlight text which may be written in bold or underlined for example, and press this button to make them ordinary again. Font Colour Highlight text and click on this button to change the colour of it. Click on the little arrow next to this button to bring up a collection of colours that you can choose from, then click on the square colour of your choice. 4

5 Highlight Changes the foreground colour of the text. Insert Numbered List Creates a numbered list. Insert Unordered List Creates a bullet point list. Indent Text Indent text with this tool. Allows you to add a left margin to any selected text. Outdent Text The reverse of the Indent Text tool. Superscript Converts any selected text to superscript. Like the 2 in O 2. Subscript Converts any selected text to subscript. Like the 2 in H 2 O. Strikethrough Places a line through text, as if it has been crossed out. Upper Case Converts all selected text to UPPER case. Lower Case Converts all selected text to lower case. Insert Horizontal Line Inserts a horizontal line into your web page. Insert a Special Character This button allows you to insert special characters into your web page, such as foreign language characters or symbols &, % etc). Insert Emotion Click on this button to insert the smiley face of your choice. 5

6 International Keyboard Click on this button and a virtual keyboard will pop up which will allow you to insert letters from different languages. Insert Today s Date This button inserts today s date into your web page. Insert the Current Time This button inserts the current time into your web page. Direction Left -> Right -> Left Changes the alignment of the text from left to right reading (Western) to right to left reading (Asian). Print Page Press this button to print the web page that you are currently editing. Page Preview Press this button to get a preview of your web page in a separate window. Change the size of this window using the size buttons in the lower right hand corner. This will simulate the size of various computer screens allowing you to make sure your web page looks great on all different sizes of computer screens. The lower the number, the smaller the size of the screen. Find and Replace This button allows you to find and/or replace text in your web page. 6

7 Clean Up HTML Word can sometimes add hidden code to it s documents which can cause formatting problems when cut, pasted and displayed on web pages. This button will remove any problematic code. When you click on this button, a pop up box will appear with other options: This turns your web page into plain text and removes any formatting that you may have added to your page such as colour, bold text, pictures and tables. Only click on this button if you want to go back to basics. Only click on this button when you have copied and pasted a Word file into your webpage. This removes any hidden problematic code as outlined above. Nerd Alert! This button is for advanced users only. Cascading Style Sheets are used to unify fonts, margins, colours etc with these styles cascading throughout your web page or your entire website. If you want to learn more visit and type in Cascading Style Sheets. Advanced users can click on this button to remove any styling that has been specified in your in-line styles. Use this option to remove any fonts in your web page. If one part of your web page uses Comic Sans and the other uses Courier New, this button will remove these fonts. Nerd Alert! This advanced option removes outdated code from your web page that may restrict the accessibility of your website for people with disabilities. You may have this problem if you have copied and pasted content from other websites. 7

8 Spell Checker Click this button to spell check your web page. Cut Drag your mouse over text or pictures until they are highlighted, then press this button to cut them out. Copy Drag your mouse over text or pictures until they are highlighted, then press this button to copy them. Paste If you would like to paste text that you have just cut or copied, click on the area of your Paint Box where you would like it to go and press this button. HANDY HINT: You can create your text in a word processor (e.g. Microsoft Word) and simply Copy and Paste your creation into the Paint Box. If you do this, make sure you paste using the Paste From Word button below. Paste Plain Text This button does the same as the standard Paste Button (above), but removes any formatting. For example, if you copied a document then pasted it into your web page using the Paste Plain Text button, it would paste as you would expect but without any formatting from the original document e.g. all bold, italic, typeface and picture information will be removed. Paste From Word This button does the same as the standard Paste Button (above), but removes any hidden problematic Microsoft Word code. Word can sometimes add this problematic code to it s documents which can cause formatting problems when cut, pasted and displayed on web pages. Pasting with this button, however, will remove this code. Paste As HTML This button does the same as the standard Paste Button (above), but allows you to paste actual HTML code into your Paint Box. 8

9 Delete Highlight any text or images on your web page, then click on this button to remove them. Undo To undo the last action you took, click on this button. Redo If you pressed undo and have changed your mind again, press the redo button. Select All This button allows you to highlight everything on your page. Deselect All This button allows you to deselect everything your page. Break This button starts a new line (same function as pressing Enter on your keyboard). Paragraph Click on this button to start a new paragraph. Insert Print Page Break This will insert an invisible Print Page Break, at which point a new page will start printing when your print your web page. Insert Groupbox A Groupbox is a frame with a title into which you can insert anything you like. It is a way of putting a border around a paragraph of text or web page content. To insert text or images or change the title, double click inside the Groupbox. Box Formatting Click here to insert a box into which you can put text or images etc. Play with the settings here to change the look of your box. All features for this button are covered under Insert a Table (below). 9

10 Image Gallery Click on this button and a list of all the images you have uploaded onto your Mr Site web space will appear. If you want to insert an image into your web page, you must first upload it onto your Mr Site web space. To upload images stored on your computer onto your web space, click on the Browse button, select the image from the files stored on your computer and click on Upload. Once it has been uploaded, the image will appear in your Image Gallery. To insert it into your web page, click on the Insert Image button below. PLEASE NOTE: Only JPEG, GIF, PNG and BMP image files can be used. Also you cannot upload files with spaces in their name. You will need to rename such files with no spaces in them in order to send them. Insert Image This button allows you to insert images into your web page. To insert an image into your web page you must first upload it onto your Mr Site web space. To upload an image, click on the Insert Image button, then click on Browse and find the image stored on your computer (these can normally under My Pictures ). PLEASE NOTE: Only JPEG, GIF, PNG and BMP image files can be used. Also you cannot upload files with spaces in their name. You will need to rename such files with no spaces in them in order to send them. Next, click on OK. The name of the file will appear in the Upload box. Click on the Upload button next to it. Be prepared to wait while the picture is sent to your web space. Once it has been sent, you will find the new picture in the list in the top left hand side of the Insert Image box. This list contains all the images that you have uploaded into your web space, ready to be inserted into your website. To insert an image into your web page simply click on the image you want to insert, then click on the Insert button. You can change the size and look of your image by changing the settings in the Insert Image box. 10

11 Alignment: This allows you to specify whether you would you like your image in the centre or aligned to the left or right. Border size: Give your image a border. Type in a number to specify the thickness of this border from 0 (no border) to 99 (very thick border). Border colour: Choose the colour of your border. Width & Height: These are the width & height measurements of the image that you are about to insert into your web page. By default the image width is the width of the actual image that was stored on your computer. If the width of your image is a number higher than 500, then Mr Site recommends that you change this figure to no more than 500 otherwise it will be too big for your website. You will notice that the height figure will also change when you adjust the width. 11

12 This is because the Constrain Proportions tick box is ticked. This means that any resizing will keep the image in proportion to it s original dimensions. If you un-tick this box the width and height can be adjusted independently of each other, but this may distort your image. Url: This tells Mr Site where your picture is located on the internet. Please do not edit the information inside this box. Alternative text: Here you can specify a short description of the image that you have selected. It is recommended that you do this as it will make your web page more visible on search engines as well as making your site more accessible to those with disabilities. ID: Nerd Alert! Advanced users only. If you are using CSS then you can create a style and give it an ID. If you create a CSS style called bigblue, for example, which has blue text and a border, type bigblue into this ID box and the styling of bigblue will be applied to this object (in this case, an image). Long description: Nerd Alert! Advanced users only. Here you can specify a short description of the image that you have selected, like you did in your Alternative text box except here you can add slightly more information. This is optional and is not as crucial as supplying some Alternative text. Upload: Send an image to your web space here. Click the Browse button, find the image on your computer and then click OK. The name of the file will then appear in the Upload box. Insert: To insert your image into your website, make sure you have uploaded it to your Mr Site web space (see above) then click on it in the top left hand side of your Insert Image box and click the Insert button. Once an image has been inserted, you can resize it manually in the Paint Box. Click on the image until you see small square white boxes appear around the edge of it. Hover your mouse over the white boxes until the cursor turns into. Click down and pull the mouse across the page. This will manually resize your images. 12

13 Insert Flash This button allows you to insert a flash movie into your website if you have created or downloaded one. You can follow the same procedure as you did with Insert Image (as above), however you must select a.swf file from your computer and not an image file. Change the settings of your Flash movie by changing the settings in the Insert Flash box. Width & Height: Here you can specify the width and height of your Flash movie. You can get this information from the creator of the Flash movie or from your Macromedia Flash application. Background colour: This is the colour of the background behind your Flash movie. This colour will show through any transparent parts of your Flash movie. Quality: Set this to High. Only set to Low or Medium if you think visitors to your website will have very slow computers. 13

14 Scale: This tells the Flash movie to resize itself if the visitor s computer screen is too small to fit the full movie. We recommend leaving this setting as Default, however selecting No border will set the movie to a fixed size no matter what the size of the visitor s computer screen. Selecting Exact fit will fit the movie to the visitor s screen (same as the Default option). Url: This tells Mr Site where your Flash movie is located on the internet. Do not edit the information inside this box. Loop: Tick this box to make your movie loop or repeat. If you only want your movie to play once, untick this box. Autoplay: Tick this box if you want your movie to begin playing as soon as someone arrives at your web page. Assuming that you do, always leave this box ticked. Transparency: If your movie has a fixed background colour, tick this box to make it transparent. This will only work if you use the same background colour in your movie as you have specified in the Background colour box (as detailed above). Upload: Send a new Flash movie to your web space here. Click the Browse button, find the movie on your computer and then click OK. PLEASE NOTE: You cannot upload files with spaces in their name. You will need to rename such files with no spaces in them in order to send them. The name of the file will then appear in the Upload box. Click on the Upload button next to it. Be prepared to wait while the movie is sent to your Mr Site web space. Once it has been sent, you will find the movie in the list on the top left corner of the Insert Flash box. To insert it into your website, click on it, then click the Insert button. Insert: To insert your Flash movie into your web page, make sure that you have uploaded it onto your Mr Site web space (see above). Once you have, it will be displayed in the top left hand side of your Insert Flash box. To insert in into your web page, click on it, then click the Insert button. 14

15 Insert Media With this button you can insert a movie directly into your web page. You can only insert AVI (Windows), MPG (MPEG), WMV (Media Player) or MOV (Quicktime) files. Change the settings to get your movie looking how you would like it to. Width & Height: Here you can specify the width and height of your movie. You can get this information from the creator of the movie. Autostart: Ticking this box means that your movie will begin to play as soon as a visitor arrives at your web page. 15

16 ShowControls: Ticking this box means that the web browser will display controls for the movie on your web page, such as play, pause, fast forward or rewind. ShowStatusBar: Ticking this box means that viewers will be able to see how much of the movie has played and how much is remaining. Url: This tells Mr Site where your movie is located on the internet. Please do not edit the information inside this box. Upload: Send a new movie to your Mr Site web space here. Click the Browse button, find the movie on your computer and then click on OK. PLEASE NOTE: You cannot upload files with spaces in their name. You will need to rename such files with no spaces in them in order to send them. The name of the file will appear in the Upload box. Click on the Upload button next to it. Be prepared to wait while the movie is sent to your Mr Site web space. Once it has been sent, you will find the movie in the list in the top left hand side of your Insert Movie box. Insert: To insert your movie into your web page, make sure that you have uploaded it onto your Mr Site web space (see above). Once you have, it will be displayed in the top left hand side of your Insert Movie box. To insert in into your web page, click on it, then click the Insert button. Insert a Downloadable File This button allows you to insert files into your web page that are not pictures, flash movies or media files. These could be, for example, a Word, Powerpoint, WinZip or PDF file. Type the text you would like visitors to your website to click on to download your file (e.g. type download here ) into the Paint Box, highlight it and click on the Insert a Downloadable File button. Follow the same basic procedure as Insert Image (as above). 16

17 Target: When a customer views your file, ideally a new window should open up to display it. To do this, make sure you select blank from the Target drop down list. Color: Here you can pick the colour of the text that visitors to your website will click on to view your file. CSS Class: Nert Alert! Advanced users only. If you have created style sheets for your website you can type a class into this box. ID: Nerd Alert! Advanced users only. Use these boxes if you use Cascading Style Sheets. 17

18 Tab Index: Every element on a web page is selectable by clicking on the Tab key on your keyboard. The Tab Index is the number of times that a person has to click on the Tab key to get to this link and download your file. This can be used by people with disabilities (or for those without a mouse.) Access Key: Type a letter here and it will allow visitors to your web page to access your link by pressing this letter on their keyboard, taking their cursor directly to it. This can be used by people with disabilities (or for those without a mouse.) Url: This tells Mr Site where your file is located on the internet. Please do not edit the information inside this box. Title: Here you can give a title to your file. Although this will not be visible, it will help people with disabilities view your file. Upload: Send a new file to your Mr Site web space here. Click the Browse button, find the file on your computer and then click on OK. PLEASE NOTE: You cannot upload files with spaces in their name. You will need to rename such files with no spaces in them in order to send them. The name of the file will appear in the Upload box. Click on the Upload button next to it. Be prepared to wait while the file is sent to your Mr Site web space. Once it has been sent, you will find the movie in the list in the top left hand side of your Downloadable File box. Insert: To insert your file into your web page, make sure that you have uploaded it onto your Mr Site web space (see above). Once you have, it will be displayed in the top left hand side of your Insert Downloadable File box. To insert in into your web page, click on it, then click the Insert button. 18

19 Insert Hyperlink If you would like visitors to your website to be able to click on some text or on an image to see another web page that is relevant to yours, you can use the Insert HyperLink button. In your Paint Box highlight the text or image that you would like to convert into a link. Next, click on the Insert Hyperlink button. Url: Hit the Browse button to find the webpage/ file/ image stored in your Mr Site web space that you want to link to. If you want to link to a different website or to an address simply type it into this box. Type: This is the type of address you are linking to. To link to another website select to link to an address select mailto. 19

20 Target: This determines how the link behaves. Mr Site recommends that you select New Window. This means that the link will open in a new window so your website will still be open behind it. ID: Nerd Alert! Advanced users only. If you use CSS in your web pages, you can give this box an ID. CSS Class: Nert Alert! Advanced users only. If you have created style sheets for your website you can type a class into this box. Access Key: Type a letter here and it will allow visitors to your web page to access your box by pressing this letter on their keyboard. This will take their cursor directly to it. This can be used by people with disabilities (or for those without a mouse!) Tab Index: Every element on a web page can be selectable by clicking on the Tab key on your keyboard. The Tab Index is the number of times that a person has to click on the Tab key to get to this box. This can be used by people with disabilities (or for those without a mouse!) Colour: This allows you to specify the colour of the link. Title: You can type in a description of your link. This can help people with disabilities see your link. Select a named anchor in the current page: This allows you to link to an Anchor to the web page. See Add an Anchor below for more information. HANDY HINT: The Common Tab allows you to create default settings for links that you insert into your web page. These will apply every time you insert a link. 20

21 Remove a link Click on the link you wish to remove then click on this button to remove it. Add an Anchor An Anchor is a place on your web page that you can link to. It is good to insert Anchors into very long web pages. If you want to quickly skip to a different section of a long web page, you could create a link which, when clicked on, would take you straight to this different section of your page (i.e. to your Anchor). Click on the area of your Paint Box where you want your Anchor to go, click on the Add an Anchor button and type in a name for the Anchor you want to create. PLEASE NOTE: There must not be any spaces in this name. When you have done this, click on the Insert Hyperlink button (see above), tick the Select a named anchor in the current page box and select your named Anchor from the list. Add an Image Map This tool allows you to create clickable hot spots on areas of pictures on your web page. These can then be turned into links so that when you click on a hot spot, you can be taken to another web page or image or Anchor. First, click on any picture that you have inserted into your Paint Box and click the Add an Image Map button. Next, click. You will see a small black rectangle appear. Drag and resize this as necessary. This will become your hot spot. Then, click the link to add a hyperlink. Follow the same instructions as Add Hyperlink above. When done, click the Update button. Repeat process as necessary. 21

22 Insert a Table To insert a table into your page, click this button and, with your mouse, select how may rows and columns you want in your table. Once a table has been inserted, you can resize it manually in the Paint Box. Click on the table until you see small square white boxes appear around the edge of it. Hover your mouse over the white boxes until the cursor turns into. Click down and pull the mouse across the page. This will manually resize your table to taste. To edit and change your table in more detail you can also double click on the table border to bring up the Table properties pop up box. Table Wizard Tab Using the Table Wizard tool you can add rows and columns by clicking the Columns +/- and Rows +/- buttons. The ColSpan +/- buttons allow you to merge two columns together and the Span +/- buttons allow you to join two rows together. 22

23 Table Tab Here there are a variety of options to customise the way the table looks and behaves. Cell padding: This is the space inside a table cell. Cell spacing: This is the gaps between each cell in the table. Borders: Specify your border thickness here up to 100, 0 being no border at all. 23

24 Background Colour: Click in the box to specify the background colour of the table. Border colour: Click in the box to specify the border colour of the table. Collapse table border: This removes all padding and spacing. Summary: Here you can describe the contents of the table. Although this will not be visible, it will help people with disabilities view the table contents. Caption: This allows you to add a caption to the top of the table. Thead: This is the table header and runs along the top of the table as the first row. Tfoot: This is the table footer and runs along the bottom of the table as the last row. CSS Class: Nert Alert! This is for advanced users only. If you have created style sheets for your website you can type a class into this box. Width and Height: Specify the width and height of your table. Alignment: Specify the alignment of your table (i.e. to the left, right or middle). Text-align: Specify the alignment of the text inside the table (i.e. to the left, right or middle). Float: This will give your table a floating effect. Title: Here you can give a title for your table. Although this will not be visible, it will help people with disabilities view your table. HANDY HINT: The Common Tab allows you to create default settings for tables that you insert into your web page. These will apply every time you add a table. 24

25 Common Tab HANDY HINT: The Common Tab allows you to create default settings for tables that you insert into your web page. These will apply every time you add a table. 25

26 Insert Row Above Click on a row in your newly created table, then click on the Insert Row Above button to create another row above it. Insert Row Below Click on a row in your newly created table, then click on the Insert Row Below button to create another row below it. Delete Rows Click on rows in your newly created table, then click on the Delete Row button to delete them. Insert Column to the Left Click on a column in your newly created table, then click on this button to insert another column on the left next to it. Insert Column to the Right Click on a column in your newly created table, then click on this button to insert another column on the right next to it. Delete Columns Click on a column in your newly created table, then click on this button to delete it. Insert Cells Click on a table cell, then click on this button to add a single table cell next it. Delete Cells Click on a table cell, then click on this button to delete it. 26

27 Row Properties Click inside a row, then click on this button to bring up the row properties: HANDY HINT: The Common Tab allows you to create default settings for rows that you insert into your web page. These will apply every time you add a row. Width and Height: These allow you to specify measurements for the row in question. Alignment: This allows you to specify if you want text set to the left, right or centre of the row. 27

28 Vertical Alignment: This allows you to specify if you want text set to the top, bottom or middle of the row. Background Colour: This allows you to set the background colour of the row. Highlight: This allows you to cast a virtual shadow on the bottom right of the row. Border Color Light: Here you can set the colour of the light corner of your row to add shading. This will be the bottom right hand corner (same as Highlight above). Border Color Dark: Here you can set the colour of the dark corner of your row to add shading. This will be the top left corner of the row. CSS and ID: Nerd Alert! Advanced users only. Use these boxes if you use Cascading Style Sheets. Title: Here you can give a title for your table. Although this will not be visible, it will help people with disabilities view your table. Cell Properties See Row Properties above. Merge Cells Right Click on a table cell then click on this button to merge it with the cell next to it on the right. Merge Cells Down Click on a table cell then click on this button to merge it with the cell below it. Split Cells Right Click on a table cell then click on this button to do the opposite of Merge Cells Right (above). Split Cells Down Click on a table cell then click on this button to do the opposite of Merge Cells Down (above). Visible Borders Click this button to show or hide borders on items in your web page that may otherwise be invisible. 28

29 4 Advanced Paint Box Tools Advanced Paint Box Tools To access advanced features, select Advanced from the drop down list in the top right hand corner of the Creative and Simple mode page. Insert a Form Nerd Alert! Advanced users only. Please do not confuse inserting a form with your Mr Site contact form. These are two totally separate things. This button allows advanced users to insert an HTML form which will allow you to send information from, for example, a job application form to another web page. This can only be achieved if you have the consent of a third party to whom you can submit the contents of the form. Please consult the documentation of the third party for further advice. Form Elements Nerd Alert! Advanced users only. The default Mr Site contact form (which you can add by clicking on Click here for Extras in the main Options page, and then on Add a contact form ) allows visitors to your website to type in their name, address and comments into a form on your website. This information will be ed to you when they click the send button. These extra Form Element buttons will let you add more features to your Mr Site contact form. HANDY HINT: The Common Tab in all Properties windows for all form elements allows you to create default settings. These will apply every time you add the same element. 29

30 Text area: This is a box that people can type text into. Let s look at this in more detail: Name: This is the name of the text box. When information in this box is ed to you, this Name will appear next to it so that you can identify which box the text was typed into. 30

31 E.g: Name: Joe Bloggs textbox1: Can you send me more information on your products. Thanks! Columns: This is how wide (in letters) the box will be. 48 is the default and is a sensible size. Rows: This is how tall (in letters) the box will be. 4 is the default and is a sensible size. Value: This is what is written inside the text box when people first see your contact form. You may want to leave this blank, but you could type something like: Please leave your comments here. Wrap: This means that any text written in this box will stay inside it instead of spilling out of it. It is best left switched on. ID: Nerd Alert! Advanced users only. If you use CSS in your web pages, you can give this box an ID. Access Key: Type a letter here and it will allow visitors to your web page to access your box by pressing this letter on their keyboard, taking their cursor directly to it. This can be used by people with disabilities (or for those without a mouse.) Tab Index: Every element on a web page is selectable by clicking on the Tab key on your keyboard. The Tab Index is the number of times that a person has to click on the Tab key to get to this box. This can be used by people with disabilities (or for those without a mouse. Disabled: This will grey out the box making it inactive i.e. you will not be able to write anything in this box. Readonly: This means that people can read what is inside the box, but not change it. 31

32 Text box: This is a exactly the same as the Text Area (above) and is a box that people can type text into. It is, however smaller, than the Text Area box and can only be made up of one row. All the settings here are exactly the same as those in Text Area (see above) except two. Size: This is the width of the text box in letters. If you leave this blank, the web browser will default to 20 letters wide. Max Length: This is the maximum number of letters that someone can type into this box. If left blank, the visitor will be able to type unlimited amounts of text into it. 32

33 Password Field The same as a Text box except any letters typed into it cannot be read i.e. these letters will be replaced with asterisks. This can be used for typing in passwords or private information. Everything in this option is identical to the Text box and Text Area descriptions above. Hidden field A Hidden information area that will be ed to you but will not be seen by those using your form. A typical use for this might be if you have more than one contact form on your website and you want to know which contact form the visitor used. You might, for example, create a hidden field called formname and call it contact1, contact2, contact3 and so on. Everything in this option is identical to the Text box and Text Area descriptions above. 33

34 List box: A list of selectable items can be created using this button. It will allow you to create a list of options which visitors to your site can choose from. They can select one or more options from the list by holding the CTRL key (or Apple key on Mac) and clicking several items. Lets look at this button in more detail: Name: This is the name of the list box. When information in this box is ed to you, this Name will appear next to it so that you can identify which box it came from. E.g: Name: Joe Bloggs joe@bloggs.com textbox1: Can you send me more information on your products. Thanks! 34

35 ID: Nerd Alert! Advanced users only. If you use CSS in your web pages, you can give this box an ID. Access Key: Type a letter here and it will allow visitors to your web page to access this box by pressing this letter on their keyboard, taking their cursor directly to it. This can be used by people with disabilities (or for those without a mouse.) Tab Index: Every element on a web page is selectable by clicking on the Tab key on your keyboard. The Tab Index is the number of times that a person has to click on the Tab key to get to this box. This can be used by people with disabilities (or for those without a mouse.) Allow Multiple Selections: This allows visitors to your site to select several items from the list. Disabled: This will grey out the box making it inactive i.e. you will not be able to write anything in this box. Items: Here you can specify items that customers can select from. The Text part is the text the customer will see in the list. The Value is the information which will be ed to you. For example, details will be ed to you as follows: Name: Joe Bloggs joe@bloggs.com listbox1: red Dropdown list - a dropdown list of items This is exactly the same as the list box above except that customers can select a single item from a Dropdown list. Radio button This is like a tick box and is similar to the checkbox (see below), ideal for yes/ no questions. 35

36 Checkbox This is an on/off tick box, ideal for yes/no questions. This can be renamed by editing the web page directly where you see reference to checkbox1. If the person ticks the box, it will be ed to you as true, if not it will be ed to you as false. E.g.: Submit button This inserts a Submit button to your form. Please refer to the Text Box section (above) for information on how to use these settings. You will not need to use this feature if you are using the Mr Site Contact form as the basis for your form as it already has a Submit button. Reset button This inserts a Reset button which allows visitors to clear any information that they may have entered into your form. Please refer to the Text Box section (above) for information on how to use these settings. Normal Clicking on this button allows you to edit your Paint Box in normal editing mode HTML Click on this button to insert HTML code into your website. Preview Click on this button to see what your web page will look like. Plus and Minus Click on these buttons to expand or contract your Paint Box. 36

37 Mr Site Ltd. All rights reserved. All other trademarks and copyrights are the properties of their respective owners. Mr Site and the Mr Site logo are registered trademarks of Mr Site Ltd.