Creating A Website with Dreamweaver
The Brief
You are going to create a website that will promote the release
of Star Wars on DVD.
You need to create a website that has three pages - a home
page and two pages with information about the DVDs - one called
'Extras'
and
one called 'The Story.' You can see an idea of what the site
could look like by clicking here.
You are going to:
- Set up a site by making a special folder
- Creating a template which will help you make pages quickly
and keep them consistent
- Make the separate pages
- Link them together
Each page should have:
- The logo in the top left
- The title along the top
- The links down the left hand side
- The main text of the page
- A character image
Click on the image to the left to see a plan of your pages'
layout |
|
Using Dreamweaver to create the pages
1 |
Start by setting up the site
- In the Site panel on the right hand side, define
a new site. Start by giving the site a name
such as 'Fred's Star
Wars Site.' If you see an error message when you start
Dreamweaver, follow the second video clip on the right.
- Set the 'local root folder.' This is the folder in
your user area where all the files for your site will
be stored.
Click on the yellow folder icon and find your N drive.
Create a new folder inside by right-clicking. Give
the folder a name, open the folder and choose Select.
- You need to put some images into your folder. You can
get some images from here. Click on the thumbnail (small)
images and then right click to save a copy of the image
into your web folder.
|
 One
Two
Three |
2 |
Make the page template for your site
- Using menus: File...New...HTML
Template
- Insert...Table - The table should be 760 pixels wide
and should have 3 columns and two rows. Cell padding,
spacing
and borders can all be set to 0.
- Click inside the top left
cell (cell 1 on the diagram). In the properties panel
at the bottom of the
screen, set the
cell width to 150 pixels (look for the box labelled
W).
- Set the width of cell 5 to 210 pixels.
- Drag and highlight the top right and top middle cells.
Using the menu, select Modify... Table... Merge Cells to
create cell 2.
- Click inside cell 4 and use menus: Insert...Template
Objects... Editable Region. Name the region 'content.'
- Create an editable region inside cell 5 and call it
'image.'
- Write a title in cell 2.
- Save the template with the name 'Main Structure.'
|
|
3 |
Make the home page
- Right-click in the folder in the site panel on the
right hand side of the screen. Select New File and
name the file index.htm
- Double-click on the file to open it and, using menus,
select Modify... Templates... Apply Template to Page and
double-click on the name of your template.
- Drag one of the images into the image region in the
bottom-right cell
|
One
Two |
4 |
Make the other two pages
- Use the same approach and name them extras.htm and story.htm
- Click here to find some text that you can copy into
the content regions
|
|
5 |
Create the links in your template
- Write your text links: Home, Extras & Story in
the bottom lefthand cell. Press Enter after
each one.
- Next, highlight the Home link.
- In the Properties panel, look for the target symbol
near the word link. Click on the symbol and drag it to
the index.htm
icon in the site panel on the righthand side.
- Now make the other links
- When you change your template, the pages based
on it change as well.
|
One
Two
Three |
Extension Tasks
Modify your template to alter the look of your pages. Consider
the use of fonts and colour schemes. You can see a video here
Find a website that is selling the Star Wars DVDs. See if you
can create a link on your template to that site (hint, you will
need to type in the Link box instead of using the target
symbol)
|
