How to Edit and produce Pages for the website.
Web “design” in just 5 easy steps.
If you have taken on the job of maintaining a page of the website you start with an invitation from the your Web Manager with a email containing a link to Google document such as this.
Keep the email so that you can use the link over and over again.
Here are the 5 steps to get your document published.
1 Open the email
2 Click the link and it will take you to the page.
3 Start typing, you do not need to save the document as it automatically saves as you type, SEE BELOW FOR EDITING HELP and more fancy bits you can do.
4 Close the page. (Click the “X” top right)
5 Go to the website and admire your handiwork.
Check your work on the site after an edit
Do check everything looks OK before signing off and going to bed.
If the format is strange see troubleshooting.
“Prettying” up your document
Font use Arial 14.
Websites become very untidy if many different fonts and formats are used. We have chosen the default font Arial and set the size as 14 as this is easily read. You can use other fonts if required.Bold/Colours
You will notice on this page the the headings stand out and the body of text is grey and indented. Highlight the text and click the icon of choice.
Inset, images etc.
You can drag and drop most images into your document. Put the cursor where you wish to drop the image. Alternatively select “Insert” from the toolbar and then “image” and follow the prompts. Here is our badge you can copy and paste it to your web page. At the foot of the image you can select “in line” or “wrap” or “break text" while positioning the image use wrap but to avoid format problems switch to “inline" for web presentation, as web pages reformat text depending on device and screen width.
Centred and inline gives least problems with format of images.
Add a border to your image.
Click on the image so that is selected. Go to the toolbar drop down menu “Format”. Select borders and lines you can then select the line thickness (above border is 2) and then change the colour while the image is still selected by selecting the “paint brush” icon and choosing your colour.
Text flow, Break Text and Remove Image.
(see below for PDF files)
Getting text to flow around your image does not work very well as the format is “screwed up” when viewed on screens of different width and mobile phones. *Recommended is “Break Text” or “Wrap” to get your image in the right place. Then set it to “In line” which will allow you to then justify the image position to centre which looks better on most screens.
*Highlight the image and click the option below the image.
Tip if the text or image jump while trying to position, cut the image. Format the text then at the cursor click paste (Right Click).
Centring and indenting text or images.
The icons for this and the other formatting are shown in the table below.
Tricky,. as indicated in the section on imaging the website will adjust your page to fit the computer screen. Thus the format you see in your document when typed may vary.
To help reduce your frustration here are some tips.
1 Use “Inline” for images as described in the images section.
2 DO NOT worry about pagination. The document when it appears on the screen will not be in page format but will be like a scroll, a continuous page.
You may want to create a link to another website or document.
To do this you will need the ADDRESS of the page or as it is known in the “trade”, URL (Uniform Resource Locator).
1 Find the page you wish to link to. Copy the address in the bar at the top of the page
2 Position the cursor where you would like the link.
3 Open drop down “Insert” menu and select “link”.
Paste the address link into the bottom box and the description in the top. Above is the link created for the BBC Sport link here.
The way that this web page editing work currently we have no facility to have the spreadsheet directly available. However that does not stop you including a spreadsheet for the “world” to view on your page. (Our fixtures page is an example).
1 Create your spreadsheet using Google Sheets in Google Drive or on your spreadsheet program.
2 Highlight the area of the spreadsheet you wish to be seen on your web page. Right click “copy”.
3 Open your web page position the cursor and click “paste”.
* The method described here work with Google sheets but if you use Word it may not appear exactly as you would like some of the formatting information may be lost. In which case it will need to be imported into Google sheets and then do the copy paste exercise.
These can be placed in the vault and a link created to the host page you are creating. However if the PDF is converted to a JPG format it will retain all the formatting and can be dropped into the page as “Insert Image”. A good program for this is docs.zone. It costs about £15 per year to subscribe. Our bowling club has access to a copy.
Inserting a table of contents.
(DO NOT USE THIS FEATURE UNTIL BUGS RESOLVED)
The table of contents is really useful. It is semi automatic.
Of course you can make an index but with the automatic index the user can be taken straight to a topic. Just as in this document.
BE WARNED. If you have been using bullet points or other complex formatting commands you may get strange results.
You can clear all formatting prior to inserting a table of contents by “select all” or “select part of your document” then right click and then select “clear formatting”.
To use the table of contents:-
Create a heading for each section.
Select the first heading and then click on the box in the toolbar “Normal text”.
You will get a drop-down menu with an option to select Heading 1. Click “Heading 1”
This will probably be the wrong font or size.
While the heading is highlighted change the font, size etc to suit your document then go back to the menu item “Heading 1 and select the right pointing arrow for a sub drop down menu and select Updating “Heading 1” to match.
What have we done.
By using Heading 1 we have marked that text as a topic for the index.
By selecting and saving the font etc. We have set a “Heading 1” style for the whole of the document.
Now go through and highlight each heading and set it with heading 1.
Now go the top of your document place the cursor, go to the “Insert” menu and select “Table of contents” , and there you have it.
If you make changes or add headings just highlight the table and click the refresh icon that pops up top left.
If the format particularly around images is odd try the following.
1 Make sure the image size is less than the printable page width.
With the image setting of “In Line” (click on image to reveal settings) click justify left right and centre and check the image moves. If it does not; the image is probably too wide. Try resizing. The best setting for most images is centred. If text is “bumping into the image” put in a return to push the text below or above the image.
2 Do not worry about page boundaries the website will display your work like a “scroll” not in pages.
3 To accommodate the wide rage of screen sizes and mobiles the page format, line length etc will be scaled and changed. Just follow the rules and expect your line breaks to change. DO NOT FORMAT USING RETURNS to get your page looking nice. It will change. Format your text based on paragraphs.
1 Do not rename, remove or delete the file.
To delete the contents of the file “select all - under edit” and then delete use the DEL or Backspace Keys.
(If you move the actual file to the bin or move the file to another folder it will unlink the document from the web and the link will have to be re-programmed)
2 Do not use bullet points as they do not format well on the website. Instead use indent.