Gallery: Create a professional website for free

Launch your web browser and type www.netobjects.co.uk/html/essentials.html/ into the Address or Location bar at the top before pressing Return. When the website loads, click the blue download button on the right-hand side of the page. This is the free version of the program that we’ll be using in this Workshop.

If Internet Explorer blocks the site, click the flashing top bar and choose Download File, then click Save at the dialogue box, choose a destination and click Save again. Other web browsers may employ similar security procedures. Double-click the downloaded file to install it, and if Windows displays another security warning, click Run. At the next dialogue box, click Setup and then follow the prompts, accepting the defaults. Type in a valid email address, register and then when the confirmation email from Netobjects arrives, copy and paste the serial number into the appropriate box.

Continue the installation, accepting the defaults and then, when the program loads, click the Manage Websites button at the top. There are three choices here – Blank Site creates a site from scratch starting with a single, empty page; Site from Template creates a full site with pictures and dummy text, based on a complete Netobjects design template; and Use Site Wizard creates a simple website with multiple pages and a basic design. It’s the best way to learn how the program works, so choose that option.

When the wizard starts, click the Next button, then choose whether to create a personal or business site by clicking the relevant radio button. In either case, choose the number and type of pages to include by ticking the boxes next to the list on the right. In this example, we’ll choose a personal site and select all four pages. Even though we won’t necessarily use these as the headings for our pages, it’s useful to include them at this stage. Click Next to continue.

At the next screen, choose a design from the list on the left and a colour scheme from the dropdown menu. Then click Next, add basic contact information for the site, click Next, give the site a name and save it. After a moment, Fusion displays a visual map of the website with each page represented by a little yellow box, each with the default name suggested by the wizard in the previous step. To change any of these names to something more relevant, highlight it and type in a replacement.

Type in new names for any of the other pages in the same way, then double-click the Home page. This opens the main editing view for that particular page. It looks rather like a desktop publishing program where text boxes are used to display text, picture boxes for pictures and so on. On the left is the Master Border – anything in this will appear on every page – while on the right are various toolboxes that change, depending on what’s selected in the main window.

Let’s start to replace some of the dummy text here by changing the banner heading from Welcome to something more appropriate. Click once on the green heading box to select it. Notice that the toolbox on the right changes and becomes a Banner Properties box. Look closely and there’s ‘Welcome’ in tiny letters in the top box. Highlight this and then type over it with a new name – as the letters are typed into the Banner Properties box, so the heading on the actual page changes.

Next, change the text in the main window. Double-click anywhere inside the text box on the page and then highlight what’s there with the text cursor – it’s just like highlighting text in a Word document. Then replace what’s there with something more appropriate for the site. Notice that unlike banners, text can be changed directly on the page. We’d like to add a picture next, so first we’ll have to make room for it. Grab the grey rectangle in the left margin with the cursor and drag it down to create some space.

Since we want the picture to appear above the text, we’ll need to move the text box down the page. Just click on it once to highlight it, then drag it down and into position. Next, click the Picture button in the vertical button bar on the left (it’s fourth from top), then draw out a square in the space above the text. When the dialogue box opens, navigate to where a relevant picture is stored, click it and click Open.

Fusion adds the picture. We’ve sized this one already, but if it’s too large or small, simply click and drag any of the ‘handles’ around the edge to change the size. Next, we want to make sure that the text and picture line up centrally so that both are in the middle of the page. Make sure the picture’s still selected and then, holding down the Shift key, click once on the text box. Then use the Multi Object Properties box on the right to align them.

Go to the File menu and choose Save. Now let’s have a look at what this page will look like when it’s published on the web. Click on the Page Preview tab at the top of the main editing window and Fusion will create a temporary view of how the page will appear in a web browser. Notice that the navigation bar on the left is echoed by the links along the bottom of the page. When you have finished, click the Page Design button.

Open another page by clicking on its icon in the list at the bottom right-hand corner of the screen. Here there’s a useful-looking bullet list that we can replace with something else – a club’s membership benefits, for example. At the end, we’ve pressed Return a couple of times, removed the formatting by clicking the Bullet button in the properties box on the right and then added some more text. Now we’re going to turn one of these words into a hyperlink to another website. Just highlight the word and click the Link button.

Behind the scenes we’ve loaded our web browser and gone to the Environment Agency website. We then navigated to the page that covers buying fishing licences, highlighted the address and copied it to the Windows Clipboard. Flipping back to Essentials, we made sure that ‘http’ is selected as the link type and pasted the address into the empty box at the top. We can now click Save to add it to the list in the main window and click Link to create the hyperlink.

Finally, we’ll click the Publish button in the button bar, leave the settings as they are (this will ‘publish’ the site to a folder on the PC’s hard disk) and then click the Publish button. The program stores websites published like this in a folder that can be found by opening the c drive then Program Files, Netobjects, Netobjects Fusion Essentials and User Sites. After a moment, the site loads into the default web browser (typically Internet Explorer) and it’s possible to navigate using the menus as if it was a ‘real’ website. In the next issue, we’ll cover the more advanced features that are available in Fusion Essentials, including the Photo Gallery – so don’t miss it.

Finally, we’ll click the Publish button in the button bar, leave the settings as they are (this will ‘publish’ the site to a folder on the PC’s hard disk) and then click the Publish button. The program stores websites published like this in a folder that can be found by opening the c drive then Program Files, Netobjects, Netobjects Fusion Essentials and User Sites. After a moment, the site loads into the default web browser (typically Internet Explorer) and it’s possible to navigate using the menus as if it was a ‘real’ website. In the next issue, we’ll cover the more advanced features that are available in Fusion Essentials, including the Photo Gallery – so don’t miss it.