Building A Web Site With Kompozer

1. Five Golden Rules about building Web Pages and Web Sites Before you start building a web site, it's worth learning about some key things that apply to web page and web site building. Web sites are made up of a series of 'pages', generally written in a programming language called HTML. When you web browser opens a web page, what it is doing is 'interpeting' the HTML code that makes up that page and tells the browser how to show the text and pictures on the page. Because HTML is not a very sophisticated language and was originally intended for simple text pages, there are limits to what it is able to do. Also, because web pages are accessed remotely across the internet, the way that they are put together as a 'web site' must be done in a specific way, or they will not work properly in a browser. So it is worth studying and remembering the Five Golden Rules below. Rule 1 ALL site pages and resources (images, music files, videos etc.) for a web site must be contained in the 'Site Folder' - a single folder (that can have sub folders inside it). Rule 2 ALL web folders, web pages and resources should be saved in lower case letters (NOT CAPITALS). Rule 3 The 'home page' of a published web site should always be saved with the file name 'index'. Rule 4 ALL web folders, web pages and resources should be saved with no spaces or 'reserved' characters (i.e. the question mark (?), forward or backward slash (/ , \) in the filename. Link separate parts of a name with an underscore ( _ ) if you need to. Rule 5 ALL web page resources should be optimised for the final page - i.e. pictures should be at 72 dots per inch resolution at the size they appear on the web page. Music and videos should be compressed into a 'streaming' format.

Step 2 - set up your site folder To start building a web site you first need to set up your site folder (see Golden Rule 2). This is where all your site pages are going to be saved and where the page images etc. will also be stored. To make and link pages and images, Kompozer needs to record where they are saved relative to each other and that place should be the site folder. Open up Kompozer. On the Macs, it is the icon with KZ on it in the Dock. Then follow the Step by Step below: Step 1 - Open Kompozer

When you open Kompozer, you should see a screen similar to the one on the left, with a Site Manager section on the left hand side. Please note that most of the screen grabs in these Step by Steps are made from Windows. There will be minor differences to the Mac version. Top left of the Site Manager should be an icon (on the Mac a button) to 'Edit' sites. Indicated by the red arrow. Click on that to get the Edit Sites or Site Publishing dialogue box (step 2). Step 2 - Site Publisher

Next you will see the site publishing dialogue. There are three things to do here: At (1) type in a name for your site. Preferably it should be either 'sculpture' or preferably 'yournamesculpture' as one word, with no speech marks. then you have to tell Kompozer where you want the site folder to be at (2). Use the 'Select Directory' button to get the next dialogue box. Step 3 - Make site folder

In this dialogue box, navigate to either your Mac's Desktop or your USB stick. Then click on the Make New Folder button at (1). This should make a new folder, ready to type a name in. Again type either 'sculpture' or preferably 'yournamesculpture' as one word, with no speech marks at (2).

Then OK to complete . You should now see your site folder appear in the Site Manager lest on the left. Everything is now ready to start making pages and building your site.

Step 3 - start downloading page resources

Follow the instructions and download the resources from here that you will need for the Yorkshire Sculpture Park web site exercise in Komposer. You can do it page by page, starting with the YSP logo and then the first three pictures for the 'home' page. For the page texts, just click on the links and copy the text into your page(s) as you make them. Apple Mac note: If drag and drop doesn't work you can get the Windows style right click menu by holding down the CTRL key as you click on a picture. Then choose 'Save image as...' If your Mac won't let you navigate to the site folder, just save the file on the Desktop and than drag and drop it in to your site folder manually. The animated logo

This is the animated 'Yorkshire Sculpture Park' logo. It is a simple animated GIF file. You can make one of these quite easily in Photoshop if you wanted to. Just drag the picture onto your site folder on the Mac to download it

Picture 1

To download any of the pictures, just drag and drop the picture onto your site folder on the Mac. To transfer the text for the page Home page, click on the link below and when the text opens in your browser window, highlight it and use the Safaris Edit > Copy option then return to your web page in Kompozer and paste it into the page Home page text Picture 2

Transfer the text for the About page the same way as above. About page text

Picture 3

Transfer the text for the Find Us page the same way as above. Find Us page text The location map is the last picture at the bottom of this page Picture 4

Picture 5

Picture 6

Location Map

Step 4 - start building the first page If you have successfully downloaded the YSP logo and the first three pictures to your site folder, you are ready to start building the 'home' page. In order to produce a layout where pictures and text are placed alongside each other, this step by step will introduce you to the technique of using a table as a 'layout grid' in which to place your page elements. Just follow the step by step below.

Step 1 -Adding images

Once you have downloaded the logo and the first three pictures, if you return to Kompozer and clik on the 'refresh' icon in Site manager (the yellow 'clockwise arrow') you should see the four files in the site folder. Now you are ready to place the images on the page. All you have to do is drag and drop them onto the page. Start with the YSP logo and then the three pictures. You'll notice that the pictures arrange themselves in a linear way down the web page, just as if you were using MS Word. You can't place the pictures on the right hand side of the page for example by 'dragging' them there. Step 2 - Adding a table

That's one of the disadvantages of basic HTML - unlike desktop publishing, there is no sophisticated control for placing images. This is where a table can be used to provide a 'grid' or 'framework' for page layout. To place a table at the top of your page to put the pictures and text into, just click on the Insert Table icon in the toolbar (arrowed in red) and choose the cell dimensions you want from the pop up. In this case we should start with a table 5 cells wide by 6 cells (or rows) deep.

Click OK to insert the table onto the page. Step 3 - Merging cells

In order to use the table effectively, table cells need to be merged or 'joined' to make areas where elements can placed. To join cells, highlight adjascent cells by clicking, holding and dragging. Try this with all the cells in the top row. (See screen grab left) Then use the menu command: TABLE > JOIN SELECTED CELLS. The top row will then become one large cell. Now cut and paste the YSP logo graphic into the joined cell and type the title: 'Yorkshire Sculpture Park' next to it. See screen grab below.

Step 4 - Adding text

Adding text is easy. Just click and start typing - like Word. To format the text us the 'Word like' formatting tools in the tool bar (outlined in red on the screen grab). Highlight your text, then set the font to Helvetica/Arial in the drop down section headed 'Variable Width', finally use the larger 'A' icon to increase the text size. The text tools in Kompozer (and most web editors) are not very sophisticated, because text on web pages is restricted in various ways in terms of sizing and spacing. Highlight the word 'Sculpture' and use the B icon to embolden it. Last but not least, make sure you use the menu option FILE > SAVE AS to save the page. Give it the file name 'home' (without speech marks).

Step 5 - Adding and formatting elements Now you have made a start, you can go on to add and format further elements, including rules and body text. Using the table as a grid, joining cells and formatting the table itself, you will replicate the example YSP site. Just follow the Step by Step below: Step 1 - Adding Line Rules

Repeat the join cells operation on the seond and fourth rows of the table. Then click in the second row cell and use the menu command INSERT > HORIZONTAL LINE to place a rule in it. Repeat in the fourth row (arrowed) Now you are ready to do more table manipulation to change it to the grid you need .

Step 2 - Completing the table

To fit the rest of the pictures and text, the table needs further modification by joining cells to put the pictures and text in. In the next to last and last rows, join the fourth and fifth (last two) cells in each row. If you wanted to add another row to the bottom of the table just click in the last row and use the menu command: TABLE > INSERT > ROW BELOW. Then join all the cells in the last three rows and first three columns. You should end up with a table like the one on the left. Step 3 - Cut and paste the pictures and text

Now you just need to cut and paste the three pictures you have already placed on the page into the three cells on the right of the table. Then open the page text from the resources page or here. Copy it and paste it into the large cell on the left to give you a layout similar to the screen on the left. Change the text font to Arial. Don't worry about the fit and alignments yet, we'll sort those out in the next step.

Step 4 - Adjusting the table

To make the fit and alignments better, there are several things we can do. First click in any cell, then go to the menu option: TABLE > TABLE PROPERTIES. This will bring up the dialogue box on the left. 1) Change the table at one by retyping the Width value to 770 pixels 2) Retype the Border value to 0 (zero) pixels 3) Change the table alignment to 'Center' on the drop down. Then Apply and OK to return to the page. Note the differences.

Finally, change the alignment of the cell with the body text in by clicking in the cell, then selecting the menu option: TABLE > TABLE PROPERTIES again, but this time change the tab at the top to CELLS and in the 'Content Alignment' section either tick the box next to Vertial or use the drop down list to change it to Top (arrowed in the screen grab).

The last things you should do on this page are add the words: 'Home', 'About' and 'Find Us' (no speech marks) in the three blank cells on the left between the Horizontal Rules, save the page and preview it. This is best done by double clicking on its file name in the site folder, which will open it up in the web browser. Check it against the example version.

Step 6 - Making a new page Now you have the first page for your site, you can go on to quickly create a couple mre pages. As the site pages all use the same basic layout, simplest way to do this is use the first page as a template. Before you go onto create the 'About' page, download the pictures you will need which are 'visitorcentre.jpg. and 'visitorcentre2.jpg', from the resources page here Just follow the Step by Step below to continue: Step 1 - Resaving the page

You should by now have a completed 'home' page that looks similar to the one on the left. To use this page as a templatefor your next page, just use the menu command: FILE > SAVE AS and in the Save As dialogue box, give the page a new name, in this case 'about.html' (without the speech marks). This will preserve your original 'home' page (home.html) and leave you with a copy to work on.

Step 2 - Adding new elements

Now you have a newly save page, delete the pictures and main body from it. Then start to add the new pictures you have downloaded. Don't worry about the layout just yet. Your new page should start to look like the one on the left. Note that your new file 'about.html' should turn up in the file list for your site in Site Manager on the left. Step 3 - Add the text & finish

Once you have added two pictures and the new body text, which should be formatted to Arial font again, save the page. It should look similar to the one on the left.

Step 4 - Making the last page

Now use the menu command FILE > SAVE AS again, this time to save this page with a new name 'findus.html'. This will become the third page on the site. Download the map picture(locationmap.gif) you will need for this new page from the resources page and place it in the table. Then get the new body text and place and format that as before. When you have finished the page, save it. You are ready to move onto Step 7 - creating links.

Step 7 - Making links Now you have all three pages built for your mini site. The thing that makes web pages and sites unique is that they are interactive. That is, on a basic level, different pages on the same site can be linked together to tell a story or impart information, pages from other sites can be linked to your site to take the viewer to further information and visitors to your site can contact you by email if you put an email link on your site. These three types of link are: Relative - i.e. between the pages on the same site, External - i.e. to external web sites and Mailto - which automatically brings up a blank email message in the viewers default mail program with a designated email address recipient already in the 'To' section. Just follow the Step by Step below to make three different kinds of links:

Step 1 - Relative links

Making links between the pages on your site is easy. Open your 'home' page in Kompozer and highlight the word 'About' beneath the logo and between the two rules ('1' on the screen grab). Then use the 'Hyperlink' icon on the toolbar (at 2). This will open the Link dialogue box. Next to the first box on the dialogue is a folder symbol (to the right of 3 on the screen grab). Use that to 'find' your 'about.html' page file and select it. All you do now is OK to complete this Relative link. Save the page and repeat the process using the 'Find Us' text and making a link with it to your 'findus.html' page file.

Step 2 - External links

Now you are going to add an external link to this page, to the real Yorkshire Sculpture Park web site. First, type 'Yorkshire Sculpture Park' in the cell to the right of your Find Us link, and highlight the text.

Then use the hyperlink icon to open the dialogue box. This time type the URL for the site into the link box: http://www.ysp.co.uk (at 1). Then click the tick box below the word Target (at 2). This will make the link open up in a new browser window or Tab. Then OK. Step 3 - A mailto link

Finally make a mailto link. First add the text: 'Email the Webmaster' to the bottom of your page text. Highlight the text you have typed and click on the Hyperlink icon in the toolbar. In the Link Properties dialogue, type an email address in the box at 1 in the screen grab (it can be your own or mine at petegill.net). Then click the tick box next to 'The above is an email address' at 2 in the screen grab. Click OK and you have made an email link. Save your page and test the links by opening the page in your web browser. If they have worked, go and make the Relative links on the other two pages then save and test them.

Step 4 - Using an image as a link

As well as using text as links, images can also be used as links - most commonly you would know them as 'buttons'. Try this as an example: Open the 'findus' page and click on the YSP logo graphic. Now click on the hyperlink icon in the Toolbar to open the Image properties dialogue (left). Make sure the Link tab is showing (at 1 on the screengrab) Then use the Folder icon (at 2) to go and find your site's 'home' page and select it. This will link the page to the logo. Finally, put in some ALT text to tell users that the logo links back to the home page. Do this by selecting the 'Location' tab. Then in the next dialogue, in the middle section called 'Alternate Text' type: 'Go to Home page' (as below):

Now when the user's mouse hovers over the logo, this text will pop up as a guide.

8. Designing and building your own site Now you have learned the basics of building a small site in Kompozer, your next task is to design and build your own site. Before you start designing building your site, it's worth reviewing the Five Golden Rules again here. The brief guide below is intended as just that; some thoughts and ideas to guide you. It is not a definitive list, so you would do well to do a little research of your own, either online, or from printed books on web site design. The web is now an important medium in its own right, with numerous facets and particular rules that have to be followed when making sites. Asking yourself the following questions as you plan your site will help you prepare effectively. What is the purpose of my site? In short, what is it going to do? Is it meant to inform, advertise, promote or just celebrate something? Who is my site for? Who is your audience? Just you, you and your friends, potential customers, or the whole world? How you design it, the colours, graphics and images you use should be what you think your intended viewers expect to see - or more importantly what they want to see. Think about it carefully. Look at other peoples' sites. Are there any whose design you like, or are aimed at the same sort of audience as yours? It may be worth using them as a guide or 'template' for your own design. What sort of 'Map' will it have? The 'map' of a site basically means physically how it will work when users enter and navigate round it. Sites canhave all sorts of layout such as 'linear' i.e. one page links (or follows on) to the next and the next in a strict sequence, or they can be 'circular' once a linked page has been viewed, the user has to go back to the home page to choose the next link and so on. Research 'site maps' on the internet to find out more. . Do I have the material I need? Before you even think about firing up your web page building program (i.e. Kompozer), you should have prepared most of your site material or content in advance - things such as the text for pages, images (including buttons) you want to use on it and maybe any links to other web sites you want to put on there. A web site is a highly 'structured' document, starting just from a blank web page is not necessarily the best or

quickest way to proceed! Sketch out at least one site page This is not a question - this is an instruction! you should always sketch out a 'visual' of one of your site pages - and annotate it. It will be an invaluable reference as you start to build pages. Your sketch should feature: The pixel 'grid' your pages will be based on. All web pages display on computer screens. So generally you should base them on a 'grid' which represents popular sreen resolutions. A good guide is to use a grid of 800 pixels wide - which is what the eMacs display. The page layout style. Remember how you used a table to create 'columns' for the YSP pages? Think about how you want to place pictures and text. Colours and graphics. Will your site have a colour 'theme' or palette? Fonts. Think about the 'safe' web fonts you should use. Want some wierder fonts? Think about creating graphics in which to use them (banners etc.) Annotate your sketch layout(s) with thoughts and ideas. Add to the annotations as you build your page(s) to note colours, fonts and text sizes used etc. Am I ready to build the site? Recap on the YSP site exercise to refresh your memory on the techniques you learned making that site. Remember that you used only a few basic techniques on that site and for the moment you should not try and overreach yourself by trying to do things outside of the knowledge gained in that exercise. If you want to add a few more techniques, be prepared to research a little on the web, such as: Modifying HTML code manually Adding javascript code to your pages manually Making simple animations in Photoshop (the YSP logo is a simple animated GIF file, made in Photoshop using layers) Adding freeware buttons and graphics downloaded from the internet. Step 9 - making and optimising images for the web in Photoshop Images are going to be one of the main things you will want to put on your web pages and it is vital to obey Rule 5 in The Golden Rules! All images should be of the right type and optimised at the size they will appear on your web page. The image file types you can use on web pages are limited generally to jpegs (for photographic images) and GIF files (for buttons and logos - they can be transparent). There are a couple of other types: PNG and SVG, but not all browsers necessarily display them correctly. Fortunately, Photoshop makes it easy to create and optimise images for the web, below is a quick guide to the most common things you will need to do:

Step 1 - Making images the right size

You can create your original images in Photoshop at any size and resolution you want. But you should always save a 'web version' of an image you want to use and save it to your site folder. From your web page sketch, you should determine what pixel width the image needs to be on the web page (again you don't have to be too accurate - make the width slightly oversize if you want). When you are ready to save your web page version, just use the menu command: FILE > SAVE FOR WEB to begin to save it: (See screen grab left) Step 2 - Save for Web

Next you will see the Save for Web dialogue. There are three things to do here: At (1) set the type of file you want (JPEG or GIF). Then at (2). Select the 'Image Size' tab. You can set the pixel width you want the image to be on the web page. Finally at (3) you can set the Quality of the image (how much compression will be used). As a guide, you should strike a balance between quality and file size. Photoshop will tell you the expected file size for your web image to the bottom left of the preview image. You can see multiples of the preview image at different compression levels if you use the '2 - up and 4 up' tabs at the top of the Save for web dialogue. When you are happy, click Save and put the new file in your web folder. Step 1 - Make an animated GIF

Although quite basic, animated GIF's can be useful and a lot simpler to make than Flash files for example. They can be a little tedious to make but easy to understand. Build them up as separate layers in Photoshop, with each layer being a 'frame' in a 'film'. (See screen grab of the YSP logo Photoshop file). Now you are ready to make an animation:

Step 2 - Saving the GIF

When you have all the frames made, open the Animation window from the Window menu (WINDOW >

ANIMATION). Then use the Animation windows' drop down menu (the small arrow at (1) on the screen grab) to choose the 'Make Frames from Layers' option. Your frames will then appear in the 'timeline'. Properties for each frame (timing) can be set using the drop down arrow for each frame. (at 2). Finally just use the 'Save for Web' command to bring up the dialogue box and choose GIF for the file type. You can change the image size here too if you want. .

Step 10 - making sure your site is properly targetted If you refer to the Golden Rules, you will see that Number 1 states that all your site material (pages, images etc. must be in a single folder - the 'site folder'. One thing that is critical when using different computers to edit your site - and using removeable media (USB sticks) is that your site editing software (Kompozer) 'knows' where the site folder is, otherwise any changes, particularly new links and images added So, when starting a new session in Kompozer, you should always 're-target' an existing site by using the 'Edit Site' button as per the Step by Step below: Step 1 - Editing on another PC or Mac

If you are opening your site for the first time on another PC or Mac, you should repeat the first action in the 'Step 2' page: Click on the 'Edit Sites' icon or button (arrowed).

Step 2 - Editing on the same PC or Mac

If your site is save on a USB stick and you are returning to a PC or Mac to edit it again. You may see your site name in the list in Site Manager. Click on it and then click on the 'Edit Sites' button. Step 3 - Navigate to the site folder

You'll get the 'Publish Settings' dialogue box just as you did when you first set up the site. If you are editing for the first time on a new PC, enter a site name at 1 then use the 'Select Directory' button at 2 to go and find your site folder (on the PC/Mac or USB stick). Select it and OK back to this dialogue.

Step 4 - Finishing the targetting

If editing for the first time (i.e. you have put a site name in the entry box at 1 above) you will need to click the 'New Site' button to ensure it is added to the site list in the the 'Publishing sites' box.

If editing again on the same PC/Mac all you have to do is OK to return to Kompozer and start opening and editing your pages.