Wheelers clubs Your site will consist of 3 pages: Year 8 Web design Your task is to design a 3 page website for a school club of your choice. It maybe one you attend such as ICT, rugby, table tennis or the science club. It could also be a club that you’d like to start or would like the school to run. Your club will be part of the ‘MyClub’ brand and therefore a certain amount of the layout and styling has been taken care of for you - but the information and final look of the site will be yours. Wheelers clubs Your site will consist of 3 pages: Home Page or (index.html): This is the first page of your website, introducing the user to what the clubs about and what sorts of things will be found on your site. Gallery or (gallery.html): Here you will include pictures about your chosen club, taken by yourself or taken from the internet. Club details or (clubdetails.html):This page will have the times and dates of your club, maybe highlighting any upcoming events.

Examples of buttons to use on your front page. Website file structures You have been provided with the basic structure for your website, the diagram below explains how it works. Everything must be organised in the MyClub website folder. Folder contains ALL your website pictures, each resized correctly. Wheelers clubs My website folder Wheelers clubs This is your Home Page and should always be called index. Wheelers clubs Folder contains your other 2 pages or more. Examples of buttons to use on your front page.

Wheelers clubs Year 8 Web Design - Home page Logos Our ‘Chess Club’ example site Logos Wheelers clubs Links to other pages in the site Introduction about the site This idea has been made to look sensible and not particularly eye-catching - yours will be much better.

Year 8 Web Design - Gallery Our ‘Chess Club’ example site Logos Links to other pages in the site Selection of photos related to your club

Year 8 Web Design - Club Details Our ‘Chess Club’ example site Links to other pages in the site Details about your club and links to other real websites

Dreamweaver – Page Properties Having entered your text, you need to be able to format the text and background of your images. Having selected any text you can change its font, colour and size here. This window will allow you to change the background colour of each page.

This is the at the bottom of every page in Dreamweaver Dreamweaver - Hyperlinks Pages link together in websites using ‘Hyperlinks’. These links can come from a selection of text or an image. Links can be to other pages OR to external websites – just add the FULL web address or where you want to go. Wheelers clubs To create a link, highlight the the text you want to link from and then using the blue folder on the tool bar, select the page you want it to go to.. OR This is the at the bottom of every page in Dreamweaver

Dreamweaver – Resizing Images Images need to be correctly sized to insert into your website, here’s how to do it using Photoshop. Your club images need to have a width of 200 and height of 150 pixels. Download an image from the Internet or from a camera. Make sure the image is saved in the Images folder of your MyClub website folder. Select the part of the image you want and press Enter. Save and close your image Open your image in Photoshop and select the Crop tool shown.

Dreamweaver – Inserting Images Images can now be inserted into your website pages. Remember images must be in your Images folder Click where you would like the image to go. Wheelers clubs Wheelers clubs Select Insert and then Image from the main menu and select the image from your folder. If you have resized it correctly beforehand it should fit neatly onto the page.

Dreamweaver How to preview your website Whilst working on your site, its good to see how it will really look on the Internet - here’s how. If an Internet browser is listed, simply select it. If none are listed, select the ‘Edit Browser List’ and choose an application. Look in the APPLICATIONS folder on a MAC Look in the PROGRAM FILES folder on a PC. Test your website in : Mozilla Firefox Internet explore In Google Chrome Take a print screen of each test and paste it into a new slide Test all your 3 pages and paste the print screens in a PowerPoint