Topic 3 WEB SITE DESIGN Using Dreamweaver - Task 5 - 11
You are going to create pages for a new website for Sha Tin College called “Reviews” Magazine, which will feature the extra curricular activities that many students are involved in within Sha Tin College.
To create these pages, you will be using a web publishing software called Adobe Dreamweaver CS3 (formerly Macromedia)
Before beginning this project students need to download the attached files:
Zipped folder of images to
be down loaded and used
TASK 5
Next you will need to load Adobe Dreamweaver CS3
The first thing you must do is manage your site, so follow the steps below carefully.
(Or on the menu bar at the top, go to Site > New Site ... )
Call the site your name followed by Reviews Magazine (e.g. MsC Reviews Magazine)
Next
No, I do not want to use server technology
Next
Click on the yellow folder button and find where you copied the folder to
Click Open, then Select
Next
Put None in the drop down box
Next
Done
Done
TASK 6
Click on file and select New > Blank Page > click Create,
Save naming the file as “index.html”
What should you create? A 4 page website showing “Reviews” Magazine
The first page “index.html” should have the school logo and a set of buttons that link to all of the other pages (and to itself)
There should be a page for:
CAS Week
The Concert
The OSCARS
As well as the Home Page (index.html)
Inside the images folder (Student Resources Y8 Making a Website, sc_reviews) there are buttons for each page (2 buttons for each so you can make rollover buttons (total 8 images))
There are 3 pictures to go on each page after the Home (index) page.
Every Page must have the buttons to link to the other pages.
You will need to use at least one table on each page to position the buttons and another for the pictures. Next to each picture you should write a sentence to say something about it (you can make this up) eg ... “Here we see Uma Thurman at the OSCAR ceremony”
Follow the instructions carefully to creating your index page
Use tables to arrange the images and text on the page, you can create tables using the table button you can put tables in tables or merge cells together.
You can add colour to cells and change the cell padding (spaces in between) in the Properties box
To create the buttons use the images provided in the images folder e.g. homebtn_1.png and homebtn_2.pgn. You will notice there are two images for each button, one image will be place on your page and when you hover with the mouse over it, it will change to the second image
and then when you click on it, it will navigate you to another page. Select the cell you wish to insert your button in, then select the image rollover button from the top menu bar (COMMON)
Browse and insert the buttons you want and leave the link empty at the moment. Click OK, repeat this for all the other navigation buttons.
To browse to see how your buttons work save your work first then select the Preview button and select preview in browser
The Internet Explorer browser will open and will display your web page, hover your mouse over your buttons and you will see the button change images.
You need to think about the layout and design of your website, here are some examples and on the next page are thumbnails of the pictures in the images folder.
TASK 7
You are going to consider the planning of your website, how each page will look and how the pages will link to each other. You need to create a design on paper for the layout of your website. It is important to think about how people will navigate from one page to the next.
From your website, there will be three links from the home page which go to the following pages:
• CAS
• The Concert
• The Oscars
You may decide that when you visit the Concert page for example, there may be three further links to these pages:
• The Orchestra
• The Choir
• The Music
These can be shown as a diagram known as a ‘Hierarchy Diagram’ (see below)
This diagram clearly shows that I will have three links coming from my home page and so on.
These are the images you have downloaded to make you SC Reviews Website.
Task 8
Now it is time to think about what pages you will need and how you will navigate to them. Design a Hierarchy Diagram for your own website. Choose appropriate software to create your hierarchy diagram. (PowerPoint or Word) Print off a copy remembering to add your name, class, date and Task 8 in the footer.
HOMEWORK TASK 4
Plan your web pages using the grid below, each square represents 40 pixels, mark out your tables and where the images and buttons will go, don’t forget label the sizes of each image and each cell of your table. Download the website planning sheet.pdf
Open up Dreamweaver and return to your home page
To create the other pages with a similar layout and to have the buttons in exactly the same place, it is easier to duplicate the index page, than redo each page from scratch!! To duplicate the page select the index.htm page from the Files menu on the RH of the screen. Then right click on the page and a sub-menu appears, select Edit and then select
Duplicate. Select the newly copied page from the Files menu and select Edit and Rename and give the new page a new name (don’t forget to leave the .html tag on the page)
To link the pages together, on the index page select the second button and the info about the button will appear in the properties menu
Next to the Link field there is a little clock, click and drag the arrow to the page you want to link to in the Files menu.
Save your work and preview in the web browser
Continue to build up your pages for your website, you should complete 4 pages, the homepage, CAS, The Concert and The Oscars. It is important that there is some consistency in the layout and style of the pages.
TASK 10
To make your site more interesting, use some of the additional material in the folder of images
And add some of the following
• Adding a repeating background (Modify menu >Page Properties >Background image >Repeat)
• Additional images - in the additional images folders on the staff drive
• Buttons using text and rollovers
• Adding the date/time to your website
• Links to other sites e.g. STC
• Adding a link to an Email account
TASK 11
Peer evaluation
Using the table below open your website onto the computer, and ask four people to review it using PIM’s
Self evaluation
In the space below complete the simple self evaluation statements, (think about the PIM’s evaluation) add a printout of each of your pages from your website, using printscreen, and show the files and layout of at least one page in Dreamweaver
Have I planned and created pages for my website?
Have I added appropriate text and images to my web pages?
Have I planned and created hyperlinks to navigate through my web pages?
Have I evaluated my pages to make sure they were suitable for a wide audience?
I can describe the steps I have worked through to create my web pages and suggest how they can be improved?
Homework Task 5
Download the word search homework and complete.
Revision, look at your word search for the key words.
Test
Topic 3 WEB SITE DESIGN Using Dreamweaver - Task 5 - 11
You are going to create pages for a new website for Sha Tin College called “Reviews” Magazine, which will feature the extra curricular activities that many students are involved in within Sha Tin College.To create these pages, you will be using a web publishing software called Adobe Dreamweaver CS3 (formerly Macromedia)
Before beginning this project students need to download the attached files:
be down loaded and used
TASK 5
Next you will need to load Adobe Dreamweaver CS3The first thing you must do is manage your site, so follow the steps below carefully.
(Or on the menu bar at the top, go to Site > New Site ... )
Call the site your name followed by Reviews Magazine (e.g. MsC Reviews Magazine)
Next
No, I do not want to use server technology
Next
Click on the yellow folder button and find where you copied the folder to
Click Open, then Select
Next
Put None in the drop down box
Next
Done
Done
TASK 6
Click on file and select New > Blank Page > click Create,Save naming the file as “index.html”
What should you create? A 4 page website showing “Reviews” Magazine
The first page “index.html” should have the school logo and a set of buttons that link to all of the other pages (and to itself)
There should be a page for:
CAS Week
The Concert
The OSCARS
As well as the Home Page (index.html)
Inside the images folder (Student Resources Y8 Making a Website, sc_reviews) there are buttons for each page (2 buttons for each so you can make rollover buttons (total 8 images))
There are 3 pictures to go on each page after the Home (index) page.
Every Page must have the buttons to link to the other pages.
You will need to use at least one table on each page to position the buttons and another for the pictures. Next to each picture you should write a sentence to say something about it (you can make this up) eg ... “Here we see Uma Thurman at the OSCAR ceremony”
Follow the instructions carefully to creating your index page
Use tables to arrange the images and text on the page, you can create tables using the table button you can put tables in tables or merge cells together.
You can add colour to cells and change the cell padding (spaces in between) in the Properties box
To create the buttons use the images provided in the images folder e.g. homebtn_1.png and homebtn_2.pgn. You will notice there are two images for each button, one image will be place on your page and when you hover with the mouse over it, it will change to the second image
and then when you click on it, it will navigate you to another page. Select the cell you wish to insert your button in, then select the image rollover button from the top menu bar (COMMON)
Browse and insert the buttons you want and leave the link empty at the moment. Click OK, repeat this for all the other navigation buttons.
To browse to see how your buttons work save your work first then select the Preview button and select preview in browser
The Internet Explorer browser will open and will display your web page, hover your mouse over your buttons and you will see the button change images.
You need to think about the layout and design of your website, here are some examples and on the next page are thumbnails of the pictures in the images folder.
TASK 7
You are going to consider the planning of your website, how each page will look and how the pages will link to each other. You need to create a design on paper for the layout of your website. It is important to think about how people will navigate from one page to the next.From your website, there will be three links from the home page which go to the following pages:
• CAS
• The Concert
• The Oscars
You may decide that when you visit the Concert page for example, there may be three further links to these pages:
• The Orchestra
• The Choir
• The Music
These can be shown as a diagram known as a ‘Hierarchy Diagram’ (see below)
This diagram clearly shows that I will have three links coming from my home page and so on.
These are the images you have downloaded to make you SC Reviews Website.
Task 8
Now it is time to think about what pages you will need and how you will navigate to them. Design a Hierarchy Diagram for your own website. Choose appropriate software to create your hierarchy diagram. (PowerPoint or Word) Print off a copy remembering to add your name, class, date and Task 8 in the footer.HOMEWORK TASK 4
Plan your web pages using the grid below, each square represents 40 pixels, mark out your tables and where the images and buttons will go, don’t forget label the sizes of each image and each cell of your table. Download the website planning sheet.pdfTASK 9
Open up Dreamweaver and return to your home pageTo create the other pages with a similar layout and to have the buttons in exactly the same place, it is easier to duplicate the index page, than redo each page from scratch!! To duplicate the page select the index.htm page from the Files menu on the RH of the screen. Then right click on the page and a sub-menu appears, select Edit and then select
Duplicate. Select the newly copied page from the Files menu and select Edit and Rename and give the new page a new name (don’t forget to leave the .html tag on the page)
To link the pages together, on the index page select the second button and the info about the button will appear in the properties menu
Next to the Link field there is a little clock, click and drag the arrow to the page you want to link to in the Files menu.
Save your work and preview in the web browser
Continue to build up your pages for your website, you should complete 4 pages, the homepage, CAS, The Concert and The Oscars. It is important that there is some consistency in the layout and style of the pages.
TASK 10
To make your site more interesting, use some of the additional material in the folder of imagesAnd add some of the following
• Adding a repeating background (Modify menu >Page Properties >Background image >Repeat)
• Additional images - in the additional images folders on the staff drive
• Buttons using text and rollovers
• Adding the date/time to your website
• Links to other sites e.g. STC
• Adding a link to an Email account
TASK 11
Peer evaluation
Using the table below open your website onto the computer, and ask four people to review it using PIM’sSelf evaluation
In the space below complete the simple self evaluation statements, (think about the PIM’s evaluation) add a printout of each of your pages from your website, using printscreen, and show the files and layout of at least one page in DreamweaverHave I planned and created pages for my website?
Have I added appropriate text and images to my web pages?
Have I planned and created hyperlinks to navigate through my web pages?
Have I evaluated my pages to make sure they were suitable for a wide audience?
I can describe the steps I have worked through to create my web pages and suggest how they can be improved?
Homework Task 5
Download the word search homework and complete.Revision, look at your word search for the key words.
Test