Build a Club Website 5 - Picture and Words

You have created and put live on the web your new club website. Anyone, anywhere in the world, who knows the address can visit it. So we had better give them something valuable to see.
Right now, we have empty pages.

For this trial run do not spend too much time getting the perfect picture and words. That sort of fine-tuning comes a little later. Whatever you do now can (and probably should) be changed later ...

Editing online

If you are in the browser window showing your lovely, but almost empty new website, close that window and re-open the brower window on the Weebly editing pages.

If the "Congratulations" message is still there, click the X at its top right corner.

Don't worry if you shut down the Weebly window by mistake.

Just type the Weebly address (www.weebly.com) into your web browser. The site will open.

You may be asked to enter your username and password again.

Then you will see your website (or a list of websites if you have been making several!) and three buttons.

Click the Edit Site button and you will see that all your work has been safely saved.

Screen grab of the Weebly screen shown after logging in.

Editing text and pages online sometimes feels like working through a layer of treacle.
It takes a moment for your commands to be sent up to Weebly and then back down
to your computer. Take it slowly.

There are two steps to adding something to the page:

choosing an element (and dragging it onto the page)
editing the element (click on it and you will see options and/or a suitable toolbar.)

Choosing an element

If you are not already on the Home page, click on that in your Weebly menu.

Click the Elements tab. Make sure that on the left the Basic group is chosen. Along the top of the page are various things to choose.

A glance at them shows what each puts on the page. Let's start with "Paragraph with Picture".

Screen shot showing an element being dragged onto the page.

Click on the element and drag it onto an empty space on the page.

As you do this it looks like the illustration on the left - except that we added the red arrow to show how we dragged the element into place.

Screen shot with the element in place ready for editing.

After a moment the page refreshes to show the element in place and ready for editing.

Editing Picture Elements

Click on the blue oblong representing the picture. A dialog box opens asking you to choose a picture from the files on your computer. You can move to any folder and choose any picture you like.

Note that this picture will be publicly visible on the internet, so do not break copyright and do choose an appropriate image. When you revise and improve the site later, you can have a set of specially prepared pictures ready. Weebly will adapt the width of the picture to suit the web page space you have given it, but it is sensible to choose a modestly sized image otherwise it takes a long time to send over the internet.

It takes a few moments for the picture to be collected from your computer and sent to Weebly. Note that Weebly automatically shrinks your picture to the required width. When it appears, click on it and a picture tool bar appears above it - as shown at the top of this illustration:
On the toolbar choose to move the picture from the left of the space to the right.
Here is the result. Click in the "Title" space so that you can type in a suitable heading like "Making movies is fun ... and easy!" You see that the words are highlighted. Just type over them to add a new title.
Editing Text Elements
Click on any text you put on a Weebly page - whether it is a title or paragraph text - and a text toolbar appears above it. Drag the mouse over some words to select them, then click the toolbar buttons to:	B make them bold I make them italic U underline them A choose a colour for them (that's what you see illustrated) + / - make the letters larger or smaller (chain symbol) make the words link to another web page then there are four justify (position) options - line the words up left. centre, right or "full", which means fitting exactly from one side of the space to the other. Undo/redo help people like me who keep changing their mind !

Click on the word paragraph on your page to write some text in that space.		"We love making movies and helping each other to improve our skills. We talk about films, equipment and stories in a friendly way. There is lots going on, so come and see us sometime."
Type a few short sentences giving the essential information about your club.		"We meet on Wednesdays at 7.30pm in the Parish Hall, 25 London Road, Anytown, England. Our meetings usually end about 10pm and there is always a break for tea/coffee and biscuits half way through."
		"Our club is a member of IAC - the Film & Video Institute and is in the XXX region." Where XXX is the name of your IAC Region, like "North West" or "SOCO". Scottish clubs might put "Scottish Association of Moviemakers" if they belong to that.
You can - and almost certainly will - spend time with the club committee revising these words. They are the most important ones on the website. They will either catch a casual visitor's attention or lose them.

We don't need it yet, but notice that if you drag your cursor over both paragraphs new buttons appear on the toolbar. This always happens if you select two or more paragraphs (a paragraph is defined when you press the "Enter" key on your computer).		Clicking the icon on the left will make the selected paragraphs into a list with each item marked by a blob: item one item two item three The right icon will make the selected paragraphs into a list with each item numbered: item one item two item three

Links

Now click and drag the mouse cursor over the words "IAC - the film & video institute" to select them.

Click the "Link" button on the text toolbar.

The Weebly dialog box where you specify links.

This dialog box appears with four choices on the left.

Click the "Website" one.

Leave "http://" selected and in the next field type "www.theiac.org.uk"

Click in the box below to put a tick in it. Usually you want a link to another website to open in a new window, so that people can come back to your website easily.

Then click the Save button.

That has created a link on your website. When your readers click on it, a new window will open in their browser displaying the IAC website.

Now select the words "XXX region" and repeat the process but this time type into the field the web address of the region's website if it has one. (e.g. "www.cemriac.org.uk"). If it does not have its own website then link to the relevant part of the IAC website like: "www.theiac.org.uk/regions/nthames.htm". Click Save.

Often, you will be using links to connect to pages on your own website. For example when you remind people that the "How to find us" page will help them get to meetings.

Click the big Publish button at the top right of the Weebly page.

Go and look at it by clicking the link to http://YYY.weebly.com where YYY is the name you chose for your website.

What to put on the "Home" page?

The home page is the first one most visitors see. What goes there is important and worth spending time on. The articles in Film & Video Maker (reproduced on this website) talk about the principles of what you need to tell people. Visit the first article "What should the content be?.

For now keep it simple, because we are just learning the mechanics of building the website. When your get your committee or brainstorming team together later, they need to think hard about what should go on this first page.

Keep in mind that www = World Wide Web so your website can be seen by people from Australia to Zimbabwe. Try to make it clear quite quickly which country you are in !

I picked a camcorder picture to begin with because of its obvious connection to our hobby ... but it may not be the best choice. After all a successful club needs more than camera people. It is also true that potential members may not have a camera, may use a still camera with video options or may even film on their phones. Besides camera designs change frequently and the picture will become dated very quickly.

If you are curious about what I chose after more thought ... take a look at the website created for this article at http://midlands-movies.weebly.com . While there, check out the other pages on the site. Then come back to out next lesson and find out how to make those pages.

There is more advice on what you should put on a Club Programme page coming up in articles which will appear in Film & Video Maker magazine and on this website soon.

Click here for part 6 - building the 'Coming Soon' page