wi website editors course for squiz matrix...22 april 2013 p a g e 12 of 19 wi editors course 2013...

North Yorkshire West Federation WI Editors Course

22 April 2013 P a g e 1 of 19 wi editors course 2013

WI Website Editors Course – For Squiz Matrix

10 October 2013 Course notes updated for Squiz Matrix

Tutor: Hazel Smyth

WI: Marton cum Grafton WI

Email: [email protected]

Home: 01423 330561

SQUIZ only works best with Mozilla Firefox download from mozilla-firefox.todownload.com/ for free

On Line Help via:

TeamViewer - Free Remote Access Software. TeamViewer - Free Remote Access Software.

www.teamviewer.com/

Further Training Available on WI Moodle

http://www.witraining.org.uk

mailto:[email protected]

http://www.google.com/aclk?sa=l&ai=CwFttAo30UIDMLeaX0wXT9oCwBu7MkvsCnqyq_0W4xMOHAQgAEAEgtI2xGigDUICw_I_______wFgu5a2g9AKoAHK2MXpA8gBAcgDG6oEJ0_QQ67oz1bEaXp49A6QU8c8JxDGVsfKn6ZaG-_BFZncRieLGMoD9IAHnqe6Fg&sig=AOD64_2uwr4PY7MunFAcvQxvDYEFmNVmIQ&adurl=http://mozilla-firefox.todownload.com/%3Flp%3Dadwords&nb=1&res_url=http%3A%2F%2Fsearch.conduit.com%2FResultsExt.aspx%3Fctid%3DCT2269050%26SearchSource%3D2%26q%3Dmozilla%2Bfirefox&nm=32&is=600x291

http://uk.mg41.mail.yahoo.com/aclk?sa=l&ai=CIakZmrbTT8etJIzP0AXyhYDNBf6G_JYClvXgnSSWz_XIQQgAEAEg2pTQBlD3tq7R-f____8BYLu-roPQCqABopeq6QPIAQGpAirV3z1J-7Q-qgQZT9BoJ3Rft2ht7p9p_yf-n7U3rECttGMceYAFkE4&sig=AOD64_1Ahkkjy_S1WLSNB4O6LBB8FZKjjQ&ved=0CAoQ0Qw&adurl=http://www.TeamViewer.com/start.aspx?pid=google.tv.s.uk




http://www.teamviewer.com/




http://www.witraining.org.uk/



Contents Course Aims ..................................................................................................................................................... 3

What is a Webpage ........................................................................................................................................... 4

SQUIZ ............................................................................................................................................................... 5

Log in to Your WI Page ..................................................................................................................................... 6

Squiz Toolbar .................................................................................................................................................... 7

Updating Your WI Overview .............................................................................................................................. 8

Creating a New Page ........................................................................................................................................ 9

Editing Text ................................................................................................................................................. 10

Creating a Picture /Inserting into a Page ......................................................................................................... 12

Loading the Picture as an Asset .................................................................................................................. 12

Inserting picture into page ........................................................................................................................... 13

Resizing a Picture on a webpage ................................................................................................................ 13

Reducing Size of Photo/Picture for upload .................................................................................................. 13

Creating a Document for Download ................................................................................................................ 14

Inserting document download into page ...................................................................................................... 14

Inserting a link to another webpage ................................................................................................................. 15

Publishing Content .......................................................................................................................................... 16

Cancelling and going back to a working page version ................................................................................. 16

Tables ............................................................................................................................................................. 17

Jargon Buster ................................................................................................................................................. 18

HTML Samples ............................................................................................................................................... 19



Course Aims

The following topics will be covered:

What is Webpage

What is SQUIZ the WI CMS tool for editing WI website

How to Log in

How to edit your WI Overview Page

How to create a new page and show in the menu

Edit Content of page inserting a picture and link to another website page

Publishing/Putting your content live

Deleting Content

Jargon Buster

HTML Samples



What is a Webpage A web page is what you see when you log on to a website ie when you enter www.thewi.org.uk

It consists of several layers and on NFWI website have

Page Design - consists of fixed bits and editable bits

Content - ie the text

Formatting of text

Links to other pages

Links to pictures/movies to display

Links to documents

http://www.thewi.org.uk/



SQUIZ Matrix Squiz Matrix is the manufacturer/supplier of the Content Management System (CMS) which is used to create,

amend, and delete the “bits” which form the website.

There are 4 main types of “bits” referred to CMS referred to as Assets

Pages

Documents

Images

Movies

All assets are stored in a hierarchical tree structure which works left to right in the Asset Manager and to find

anything North Yorkshire West you go via

Become a member > Structure of the WI> England> Yorkshire North West > Find a WI > “Your WI” noting that

the drop downs are in alphabetical order!

Note

The refresh assets button top right – if something isn’t showing refresh

that it sometimes looses values so you get blank lines move up on down and you can see the missing

bit



Log in to Your WI Page

Ensure you are using Mozilla Firefox as your browser as all others give unpredictable results/don’t work.

The only way to be able to log in to edit your WI pages is to navigate to your WI, do this by going to:-

http://www.thewi.org.uk/become-a-member/structure-of-the-wi/england/yorkshire-north-west/find-a-wi

and selecting your WI then adding to the website address /_edit

or

use the Find a WI from www.thewi.org.uk – search box

You will then be presented with a login box, enter username and password – click login.

Use your previous login name or obtain a new one from the web editor from federation

[email protected]. Previous passwords may not work so use the reset password button to have a

new one sent directly to your email address.

Note Squiz Matrix is much faster to login .

You will be presented with your WI Overview Page.

Your Login and password will only allow you to edit your WI pages

http://www.thewi.org.uk/become-a-member/structure-of-the-wi/england/yorkshire-north-west/find-a-wi

http://www.thewi.org.uk/

mailto:[email protected]



Squiz Toolbar

Working left to right:

New – used for creating new assets ie pages, pictures, files etc

Preview – Check what it looks like

Edit – Change content

- This shows you the green dot to show live /page name/ #number reference

Red and blue dots indicate that you have either not saved, are editing in safe mode or not made that particular

page live.

Allows you to edit your User details

? Help

Asset Finder/Search Facility

Save Button – this goes Green when you have updated content which needs to be saved.

Live versus Safe Editing There are two options to edit any page

Safe Edit – edit a copy of the live page and when all changes complete make live good for large

changes and new pages

Live Edit – quick and easy for minor changes you are confident will not cause problem eg – spelling

mistakes!

To initiate the safe edit mode click the initiate safe edit button which allows you to save changes as you go and

then make the final version live when you have completed the page.

Editing live means that every change you make will go live as soon as you change hit the save button



Updating Your WI Overview

All the information on your overview page is linked to the MCS system and is “scrapped” to provide updates for

other areas of the website eg the map pins. This overview also forms the “parent” for your WI pages

This cannot be updated using Edit need to go to Edit and select Metadata.

This is a long page so scroll down for all information

Ensure information is correct and give postcode for your normal meeting venue – helps those with satnav find

you eg speakers.

For your WI to appear on the map needs Latitude and Longitude – convert postcode use an online converted

eg http://websemantics.co.uk/online_tools/postcode_to_coordinates_conversion_tool/, note that updated

locations are only updated overnight.

Once all information is correct hit Save, preview to check and make live Publishing see page 16

The Design for this page should be “Inheriting – Federation WI Page”

http://websemantics.co.uk/online_tools/postcode_to_coordinates_conversion_tool/



Creating a New Page

Select New (top left) and

And complete the Wizard:

Name page to reflect proposed content _ can be edited later

Select the location – ie normally your WI Page so you can find it again. You can create grandchildren links

from existing child pages

There are 6 tabs available on a WI so show in menu adds the title in the tabs.

If you want to create more than one page use Add More

Finish – to complete creation.

Pages will then be listed with Edit available.



Close the wizard and the page is presented. Pages are created to a standard layout

Editing Text

To edit the page select the content button and then select the area to to enter your page “content”

Click on the “Click here to start editing” and the SQUIZ main toolbar will appear a familiarish toolbar

Bold, Italic

Subscript, Superscript, Strikethrough

- Class

Remove Formatting - if you have pasted some content from another source this button will remove

any formatting that has come with the content. E.g. if you copied some text from a MS Word document and

want to paste it in to the page, paste the text, highlight it all and then click this button to remove the formatting.

Justification (left, centre, right, full) – This cycles through left,centre,right,full justification.

Allows different formats for non-heading text

Format - this allows you to change the text from a paragraph to a heading. There are a number of

headings that are preformatted. You can use any of them as many times as you like on a page, except

‘Heading 1’, which is reserved for the title of the page and should not be used to format the content of the

page.



Also bear in mind that the website search uses headings to rank the importance of text, so heading 2 will

appear before heading 6, which will appear before paragraph text etc.

Avoid using heading formatting for paragraph text, only use it to format headings of paragraphs.

Undo & Redo

Ordered Lists (numbered), Unordered Lists (bullet points)

Indent lists and promote lists

Insert, Edit Table see Inserting Tables

Insert Image and toggle options see Inserting Media

Inserts a line across the page

Insert, Remove Links see Inserting Links

Insert a character or symbol a menu is displayed

Search and replace

Language tools

Tests disability friendliness of page

HTML editor



Creating a Picture /Inserting into a Page

This is a two-step process in SQUIZ in that you need to load your picture in as an asset and then link it in your

page.

It is recommended than you reduce the file size of your picture and save a jpg file with a minimal size – in Kb

rather Mb as this will mean it will load into page quicker.

Loading the Picture as an Asset

Using SQUIZ toolbar > New button

Choose the Files > Create Image > completing the wizard

Select picture is decorative Yes and Show in menu No

In Browse use folder Yorkshire North West > NWYorks Downloads> “Your WI “. Again you can upload multiple

pictures and edit when loaded.



Inserting picture into page

Go to the location in page you want the picture and click the left for single picture, middle for a

gallery of pictures and right for a movie. Find the correct picture using the asset box which is displayed

automatically and select the picture and press “Insert Image”. If the image is not visible and

At this point preview and if your picture is too big need to resize.

Resizing a Picture on a webpage

This is a quick and relatively easy way to do it.

Select the <> HTML editor. Scroll down until you find the picture and find the image bit

<img src="%lookup~url:11089%" title="%attribute~title:11089%" alt="%attribute~alt:11089%" height="183"

width="137" />

Adjust both height and width in proportion (or diet members) around 200 by 150 gives a good size and detail.

Use left, centre and right as required to position picture – see also tables.

Save page and Publish

Reducing Size of Photo/Picture for upload

Edit the picture and save as jpg useful tools are :

Paint

Picassa – a photo editing free software http://en.softonic.com/s/picassa

Powerpoint



Creating a Document for Download Use this for programmes/rotas/directions etc.

This is a two-step process in SQUIZ in that you need to load your document in as an asset and then link it in

your page.

It is recommended than you reduce the file size of your document and save a pdf file as this will mean it will

download quicker.

Store all your downloads in your WI folder.

Again you can load several at once (max 8) and press finish when complete.

Inserting document download into page

Go to the location in page you want the document to be downloaded and click the link and set up a

word or phrase to be the link for the download eg download programme here – select here . Find the correct

document using the asset box which is displayed automatically and select the document, choose whether to

open in a new window (recommended as allows users to easily go back to original page) and press “Update

Changes”.

Save page and Publish.



Inserting a link to another webpage On the page go to where you want the link and enter any text eg Click Here

Highlight the Text and select the link button which will bring up the following box – navigate to the

required Internal page

If linking to an external page – first locate the URL for the page in your browser using another tab and copy

that into the box eg http://www.bbc.co.uk/news/

In both cases choose whether to open a new window or replace your existing page with the link.

Save and Publish.



Publishing Content When you are happy that page is correct and you want to put it live you need to Publish it via the Setting

Button

This will display a list of versions and a snapshot view on left.

You now select the Publishing button and select Yes

You can choose to publish immediately or schedule a later date if you want to get ahead for that page.

If your page contains links to other pages, pictures, documents etc then you will be asked whether you want

those published too.

Once you are happy all Ok hit the Save and the page will go live.

Cancelling and going back to a working page version

On the Publishing menu you can hit Cancel editing and revert to the current published page and start again. It

is therefore a good idea to publish as you get bits working with a “Page Updates in Progress” as your last line.



Tables Tables are a useful way of making certain you keep all the bits aligned both horizontally and vertically and can

be better than using columns – you can hide the lines by making them white eg

Heading 1 Heading 2 Heading 3 Bits of text 1 line Test over two lines

2nd line Third box

.

+ allows insert a column to either left or right

- allows deletion of a row or cell

To amend tables I find it easier to insert HTML text

<table border="1">

<tr>

<td>Row 1 Cell 1</td>


</tr>

<tr>



</tr>

</table>

and replace the Row1 Cell 1 with what I want

<tr> gives a row terminate with </tr>

<td> gives a column terminate with </td>

<table border="1"> gives single lines terminate with </table>

<table border="0"> gives hidden lines terminate with </table>



Jargon Buster Asset Web Page, Document, Picture

HTML HyperText Markup Language (HTML) is the main markup language for displaying

http: Short for HyperText Transfer Protocol, the underlying protocol used by the World Wide Web. HTTP defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. For example, when you enter a URL in your browser, this actually sends an HTTP command to the Web server directing it to fetch and transmit the requested Web page.

https HTTPS (HTTP over SSL or HTTP Secure) is the use of Secure Socket Layer (SSL) or Transport Layer Security (TLS) HTTPS indicates that all webpage content is encrypted and decrypted user page requests as well as the pages that are returned by the Web server. The use of HTTPS protects against eavesdropping and man-in-the-middle attacks ie any personal date eg credit card details are secure .

Password Anything you like that you can remember – can be reset by me if lost

URL Abbreviation of Uniform Resource Locator (URL) it is the global web address

Username Contains your WI Name to make it easier to locate for administrators

Web Browser Firefox, Internet Explorer, Chrome

Website Address In format www.thewi.org.uk

WYSIWYG What you see is what you get

SQUIZ The Content Management Tool used by NFWI website

CMS Content Management System –allows you to edit the webpagesand other assets

http://www.webopedia.com/TERM/P/protocol.html

http://www.webopedia.com/TERM/W/World_Wide_Web.html

http://www.webopedia.com/TERM/W/Web_server.html

http://www.webopedia.com/TERM/B/browser.html

http://www.webopedia.com/TERM/U/URL.html

http://www.webopedia.com/TERM/W/web_page.html



HTML Samples All HTML formatting is held in <> and Switched off with </….>

Paragraph <p> …</p> can be cause of big spaces between text generally 2 to 3 lines

Line Break <br> ..</br> break up text with single line spacing

Spacing

WI Heading Styles in Green

Heading Style 1 <h1>… </h1>




etc

Centred text <h3 style="text-align: center;">

Bold <strong> …</strong>

Red Text <font color=" #FF0000">

Black Text <font color="#000000">

Font Size Changes <font size="5"> change number for different sizes