Sports Website Creation

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

Lesson 1

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

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.

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

Now Open Macromedia Dreamweaver, then click on ‘Dreamweaver site’

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

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

Lesson 2

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

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

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

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

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.

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

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.

Right click choose table and merge cells.

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

Now merge these 4 cells together Now merge these 2 cells together

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

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

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

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.

Lesson 3 & 4

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

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

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

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

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

Lesson 4 & 5

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

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

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

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

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

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

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

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

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

1. Choose the image you want and click ok

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

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

Here is the page with the images in place

Use the procedure on pages 34 to 39 to add pictures to the players page

Lesson 7 & 8

We will now make a new page to view more information on this player

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

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

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

Click on the Andy Deacon page and click ok

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

Click on the Players Page and then click ok.

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

Lesson 9

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.

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

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.

The text has now been imported

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