1. Sports Website Creation

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

3. Lesson 1

4. First we 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. Then, inside the Sports Website folder, you create 2 subfolders called: Contents & images Make sure all the pictures you want to use in this website are saved into this 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. Browse for the IMAGE folder created here so all pictures used will be saved here automatically Click here Click OK Click on ADVANCED Write the name of the site, then browse for the folder just created called Sportswebsite

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

10. Lesson 2

11. Collection of Materials Our folders are ready….. we now need to collect our materials. Images All images to be saved to the images folder we have made

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

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

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 & 4

26. 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. To make a button click on Insert then Media and then Flash Button

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

28. Here is your button. Repeat the process for all your other buttons on all of your pages Don’t forget to save 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 & 5

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. Example text Change the size, colour and style of text here

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

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

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

38. Lesson 5 & 6 We are now going to work with images

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

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

41. 1. Choose the image you want and click ok

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

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 34 to 39 to add pictures to the players page

46. Lesson 7 & 8

47. We will now make a new page to view more information on 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

51. Click on the Andy Deacon page and click ok

52. Now open the Andy Deacon page you made and write “Back to Players Page”. Highlight this text and right click and choose make link

53. Click on the Players Page and then click ok.

54. You can see the text is now blue and this will link back to the players page. Save your work and see that the links work by previewing the page on Internet Explorer. Repeat this process for the other players

55. Lesson 9

56. We are now going to import a text file showing the club history onto this page. To do this you will first need to save the Word document into the root folder.

57. Here is the Word document in the root folder. You will need to ask your teacher for this file

58. 1. The Word file will be here in your Root folder. Now drag it onto the page 2. Click ok and the Dreamweaver will import your text.

59. The text has now been imported

60. Happy Web Designing You now have the skills to add more pages, buttons and images using the instructions already covered in this PowerPoint