Creating a Sports Website

1. Creating a Sports Website

2. In this project you will learn how to design and produce your own website.

3. Lesson 1 • Creating and naming a root folder • Creating “Contents” and “Images” sub-folders in the root folder • Introduction to “Dreamweaver” web design software

4. First, you need to make the folders to store your work Create the root folder for your site first. In this example, it is: C:\Documents and Settings\DIce.DICESTAFFLAP\Desktop\Sports Website Your teacher will tell you where to make your root folder

5. Inside the Sports Website folder, create two subfolders called: “Contents" & “Images” Make sure that all the pictures you want to use in this website are saved into the “Images” folder.

6. This shows I have already begun saving images for use in the website.

7. Now Open Macromedia Dreamweaver, then click on “Dreamweaver Site’”

8. Click on ADVANCED Write the name of the site, then browse for the folder just created called Sportswebsite Click here Browse for the IMAGE folder created here so all pictures used will be saved here automatically Click OK

9. Your root folder and subfolders that will contain your site are now here

10. Lesson 2 Using a table to create a simple web page layout

11. Collection of Materials Recap from last lesson: Your folders are ready and you need to use them to collect and store our materials. All images should be saved to the images folder you have made.

12. You are now ready to create your first page. Click on HTML and your first page will appear.

13. Write title of web page here. This will appear at top of page when viewed on web browser Save Homepage page in your Sports Website folder in same way you save any Microsoft document (File\ save as…) Name it Homepage.htm It appears here

14. Follow the same process to create the other WebPages that you need. As you create them they will appear here.

15. You now need to make a table to hold your information. Click on the table icon. In the window type 3 in rows and 3 in columns. Then click ok.

16. Here is your table. Drag the black square to make the table fill your page

17. The table has now filled the page. We are now going to merge the cells. Hold the CTRL key and highlight all the cells in the top row.

18. Right click, choose table and merge cells.

19. As you can see the cells are now merged. We can place a site logo in this space later.

20. Now merge these 4 cells together Now merge these 2 cells together

21. Once the cells are merged you can drag on these lines to create the layout as shown here.

22. You can put a title or logo here Buttons will go here The content of your page will appear here We now need to copy this layout and place it on our other pages so that all pages have the same layout

23. Move your mouse slowly to the top of the table until your mouse icon changes to a grid. Left click to highlight table and then right click and choose copy. You can now go to your other pages click paste and the table will be pasted. The layout is now complete.

24. Click file and click save all to save your WebPages. Remember to do this frequently. We will now make buttons to link the pages together.

25. Lesson 3 Creating hyperlink buttons to link web pages together

26. To make a button click on Insert then Media and then Flash Button Make sure that it says Left in the top box and Top in the bottom box. Use the drop down arrows to adjust if necessary.

27. 4.Click on Browse 1.Choose your button style here 2.Write the name of button here 5.Click on the page to be linked then OK 3.Write the name of button here

28. Here is your button. Repeat the process for all your other buttons on all of your pages. Don’t forget to save them all.

29. To see your page on the Internet click on the Globe and choose either Internet Explorer or Firefox.

30. Here is your page in Internet Explorer. Click on your buttons to make sure they take you to the right pages.

31. Lesson 4 • Setting page properties and creating a welcome page • Designing and incorporating a logo

32. We are now ready to add some welcome text to our homepage. Click on page properties.

33. Choose your word style here Choose your word Size here Choose your word colour here Choose your background colour here Click ok

34. Change the size, colour and style of text here Example text

35. You are now going to make a logo for all the pages • This can be done easily at either www.cooltext.comorwww.flamingtext.com • Choose your wording for the logo and then download the logo to your images folder. • Here is an example of a logo:

36. 3.Click on the logo and click ok 1. Click here 2.Click Insert and then Image

37. Here is your logo. Use the same procedure for the other pages.

38. Lesson 5 Working with images in Dreamweaver

39. Open the Information page 1.Click on the table icon and choose 3 rows and 3 columns 2. Click ok

40. 2.Click on Insert and then Image 1.Make sure you click in this cell

41. Choose the image you want and click ok

42. 1. You can resize the image using the black handles 2. The image distorts the table. Just drag the lines to where you want them

43. You can click under the picture to add text if you want. Click in the other cells to add more pictures

44. Here is the page with the images in place

45. Use the procedure on pages 39 to 44 to add pictures to the players page

46. Lesson 6 • Creating a new page and adding content to it • Your new page will be about an individual player

47. We will now make a new page to view more information about this player

48. I have made a new page and saved it as Andy Deacon

49. I have inserted the picture of Andy Deacon and added some text about him. We now need to link the pages together.

50. Open the Players page and highlight the letters under the picture. Right click on the letters and choose make link