EWB Bristol Website Workshop George Quilter EWB Bristol IT Admin

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>&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>

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

– georgeq@btconnect.com– Use Contact Page on website