ewb bristol website workshop george quilter ewb bristol it admin
TRANSCRIPT
EWB Bristol Website Workshop
George Quilter
EWB Bristol IT Admin
Aims
Uploading Website Content Dos and Don’ts Hints and Tips on Formatting Issues and Specific Questions Section Responsibilities How to get help
Uploading Content
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
Image Galleries
Read How-To First – Second Browser Window?
Follow on-screen instructions
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
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…
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
Example Insert/Edit Image Slide
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>
Using the WYSIWYG Dialog
Select the text you want to display for your link
Press the Insert/edit link button
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
Dos and Donts
Editing
Use WYSIWYG editor as much as possible DON’T use Word, etc. to copy and paste!
– Why? Let me show you…
What happens to Word Formatted Text:
All Word formatting (even some that shows up in the editor view) is lost!
Word html / WYSIWYG html
<p class="MsoNormal">Example Page</p> <p class="MsoNormal"><span> </span></p> <p class="MsoNormal"><span style="font-size: 24pt">New Size Text</span></p> <p class="MsoNormal"> </p> <p class="MsoNormal"><span style="color: red">Coloured Text</span></p> <p class="MsoNormal"> </p> <p class="MsoNormal"><span style="font-family: Tahoma">Different Font Text</span></p><p> </p><p> </p><p> </p>
<p>ExampleText</p><p> </p><p>New Size Text</p><p> </p><p>Coloured Text</p><p> </p><p>Different Font Text </p>
Which one would you prefer to tidy up?! (And remember all the extra tags on the left do nothing…)
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)
Hints and Tips on Formatting
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
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
Issues and Specific Questions
Anything Else?
Section Responsibilities
Updating
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
– [email protected]– Use Contact Page on website