Gallery: Make a website in minutes

To start creating a free family website with Google Page Creator, launch your web browser, type http://pages.google.com into the Address or Location bar and press Enter. This will open the Google Page Creator site, which requires a Google account to use. Don’t have one? Click the Sign up link and then follow the instructions to create one – it’s completely free. Then come back here, type in the email name and password and click the Sign in button to access the website builder.

This is the Site Manager page. From here it’s possible to create a new website, add pages, edit them, change their design and colour scheme and publish them to the web. At the moment, there’s nothing there so to get started, click the ‘Create a new page...’ link, type in a name for the first page (in this example it’s Home) and then click the Create and Edit button. The result is a new, blank web page (note that Page Creator assigns a specific ‘look’ to each page randomly, so yours may not look exactly like ours.)

The blank page loads with a Microsoft Office-style toolbar along the top that has all the commands we’ll be using to change the way text looks, add pictures, links and so on. For now, Google Pages has created four text boxes, shown by dotted lines, into which we can type original content. In turn, replace Home with a title, then add a subtitle, some text in the main window and put an email address in the footer. Notice that Page Creator is able to recognise when you type an email address and will turn it into a hyperlink.

Next let’s have a peek at what the page will look like when we publish it to the web. Click the Preview link above the toolbar and the web page will open in a new window. The result – given even this minimal level of effort – is rather good. This is a clean, good-looking page that appears to have been designed by someone who knows what they’re doing, which of course is the idea. Click the ‘x’ in the top right-hand corner to close the preview window and return to Page Creator.

Let’s show everyone what we look like by adding a photograph. Move the mouse pointer to the beginning of the first line of the main text box and then click the Image button on the toolbar. When the dialogue box opens, click the Browse button. Use Windows’ file commands to navigate to where a photo is stored on the hard disk and then double-click on it. Page Creator will upload the picture. When it appears, click the Add Image button.

If the photo is the wrong size, open the dropdown list in the little dialogue box underneath and change it, or click the ‘Show more tools’ link to see what else can be done with photos. In this example, though, we’re just going to click once in front of the photo and press Enter, then click once after the photo and press Enter to open up a bit of space around it. When the photo looks right, click the ‘save now’ link in the top right-hand corner of the working window.

Next, we’ll make a few adjustments. Click on the picture to select it, and then increase its size by clicking and dragging one of the bottom two corner ‘handles’ down and out; notice how the rest of the text moves to accommodate the picture and maintain the spaces inserted in the previous step. Now, because the text on this page is a sort of welcome or introduction, make it bigger by clicking on it three times in quick succession to highlight the whole paragraph and then clicking the Heading button and choosing Subheading from the dropdown menu.

Time to add a second page. Click the ‘Back to Site Manager’ at the top-left of the page, and then click Create a new page, and call it ‘Our News’. Add some content as we did in Steps 3 and 5, but be sure to mention a favourite website – the Computeractive home page, for example. Then, click the word Computeractive to highlight it and click the Link button. When the dialogue box appears, click the ‘Web address’ radio button on the left and type in the address in full – www.computeractive.co.uk. Click OK to turn the word into a live, clickable hyperlink.

So, we’ve now got a home page and a news page. Next we want to link them, but before we do we’ll change the layout of the front page so there’s a nice space to put the links that will help visitors find their way around. Click the ‘Back to Site Manager’ link and open the home page. Click the ‘Change Layout’ link at the top right. Choose the third layout by clicking it once. After a moment, Google will rearrange the page to accommodate the new layout, with a separate column on the right of the page.

Resize the picture if necessary (see Step 7) then click once in the new column and then click the Link button. When the dialogue box opens, select the name of the page to link to – in this example it’s the Our News page we just created – and then click the OK button. Highlight the link, then click the Heading button and increase its size to Heading. Click Save now and after that, click Preview. Here’s the page with its new layout and the beginnings of a navigation bar on the right.

Add some more pages using the techniques learned so far. Remember that in order to navigate between the pages, there must be links back and forth between them – don’t rely on visitors using the browser’s Back button. When finished, go to Site Manager and click the ‘Publish all changes’ link. Google automatically assigns a ‘proper’ web address to the site – http://yourname.googlepages.com/home – where ‘yourname’ is the name of your Google account.

As we’ve created new pages, something strange has been happening. Google Page Creator has been randomly assigning them a particular visual style – so now they all look different. To give every page the same style, go to Site Manager and open the first page we created and then click the Change look link at the top right. Scroll through the different styles here and click Preview on any that look appealing. To see how the real page will look with the new style, just click the thumbnail and Google will apply it.

Having explored some of these, we like the one at the very bottom, called ‘Plain Paper White’. So, we’ll click on that and after a moment, Page Creator rearranges our web page so that it’s displayed using the new style. Click the Preview hyperlink to see how it will appear on the web. If it looks OK, return to Site Manager and choose each page in turn, and apply the new style, one by one.

Make sure everything’s saved and click ‘Publish all changes’ again so the re-styled site is stored on the web. These are the basic features included with Page Creator. Readers who know a bit about making web pages should try the ‘edit html’ link at the bottom right, as this allows the code behind the pages to be edited. If you prefer some ready-baked extras, click the ‘add gadget’ link instead: there are hundreds of ready-to-run web gizmos, such as calendars, clocks and weather forecasts, to try out.

Make sure everything’s saved and click ‘Publish all changes’ again so the re-styled site is stored on the web. These are the basic features included with Page Creator. Readers who know a bit about making web pages should try the ‘edit html’ link at the bottom right, as this allows the code behind the pages to be edited. If you prefer some ready-baked extras, click the ‘add gadget’ link instead: there are hundreds of ready-to-run web gizmos, such as calendars, clocks and weather forecasts, to try out.