EWB Bristol Website Workshop

1. EWB Bristol Website Workshop George Quilter EWB Bristol IT Admin

2. Aims • Uploading Website Content • Dos and Don’ts • Hints and Tips on Formatting • Issues and Specific Questions • Section Responsibilities • How to get help

3. Uploading Content

4. Uploading Content • Go To Website: www.ewb-uk.org/bristol • Sign-In • ‘Create Content’ • Different Types of Content: • Image Gallery • News Item • Page • Members  How-To

5. Image Galleries • Read How-To First • Second Browser Window? • Follow on-screen instructions

6. News Item • Displays on bottom of main page • Order controlled by administrator (Me!) • Use to put up information on talks, events etc. that is not needed permanently

7. Pages • For permanent content • How-To • Consider position within existing website stucture • Webpages that aren’t listed on main page can be lost! Be careful…

8. Adding images inline with text • Attach image using dialog at bottom • Submit page (Remember to note down node number) • Re-edit page and use Insert/edit Image dialog

9. Example Insert/Edit Image Slide

10. Linking to Your Pages • Once you’ve created your page, people need to be able to access it! • News items automatically appear on Homepage • This is why you need the node number of the page • On the page you want to link from create a hyperlink using the dialog • Or insert a html hyperlink tag • <a href="node/1972" title=“Title">Text to Display</a>

11. Using the WYSIWYG Dialog • Select the text you want to display for your link • Press the Insert/edit link button

12. Using the WYSIWYG Dialog • Type the link into the ‘Link URL’ box • For external sites, use the full URL • www.bris.ac.uk • For internal, you only need the part after the domain • www.ewb-uk.org/node/1972

13. Dos and Donts

14. Editing • Use WYSIWYG editor as much as possible • DON’T use Word, etc. to copy and paste! • Why? Let me show you…

15. What happens to Word Formatted Text: All Word formatting (even some that shows up in the editor view) is lost!

16. <p class="MsoNormal">Example Page</p> <p class="MsoNormal"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></p> <p class="MsoNormal"><span style="font-size: 24pt">New Size Text</span></p> <p class="MsoNormal">&nbsp;</p> <p class="MsoNormal"><span style="color: red">Coloured Text</span></p> <p class="MsoNormal">&nbsp;</p> <p class="MsoNormal"><span style="font-family: Tahoma">Different Font Text</span></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> <p>ExampleText</p><p>&nbsp;</p><p>New Size Text</p><p>&nbsp;</p><p>Coloured Text</p><p>&nbsp;</p><p>Different Font Text&nbsp;</p> Word html / WYSIWYG html Which one would you prefer to tidy up?! (And remember all the extra tags on the left do nothing…)

17. Good Practice: • Use WYSIWYG editor • Editing html directly is great – but a lot of standard html tags don’t work (e.g. <font>!) • If you want to work offline use notepad to write plain text and format it later • Use the editor headings, etc. to beautify text (More on that next)

18. Hints and Tips on Formatting

19. Use of standard formatting tags • Select text and use drop down • Larger styles are available if you use html editor • You can also use Bold, Format and Underline to emphasise text • Use Bullets and Indents

20. Tables • Tables are great for applying more complicated formatting • Easier to apply in html editor – if you know what you are doing! • Otherwise use dialog

21. Issues and Specific Questions Anything Else?

22. Section Responsibilities Updating

23. How to Get Help • How-Tos • Covers basics • Request new ones if needed • www.google.com • Personalised Home • Sign-In • Username: • Password: • Use for job requests, etc. • Email • georgeq@btconnect.com • Use Contact Page on website