8.2 Teacher resource 5

Using Dreamweaver
Dreamweaver has 2 screens
that do different things
• The Document window
• where you create your WebPages
• The Site window
• where you manage your website resources,
layout and files
Slide 1
Document toolbar and menus toolbar
Insert bar
Property inspector
Time indicator:
gives an approximation of download
time of the page
Slide 2
The Site
The Site panel view lets you see your entire site and all its resources
It has several ways of looking at your site
1. as a ‘Site Map’ – a hierarchy map.
2. as lists of files,
It allows you to:
• open files, to rename files, to add new folders or files to a site, or
to refresh the view of a site after changes have been made.
• determine which files have been updated since the last time they
were transferred
Slide 3
Create the Files
• Go to the T drive > RS open your tutor
groups folder
• Create a new folder Using your initials and
• In this folder create another folder called
• These are the folders you will save all
website work
Slide 4
Set up the folder for your site – choose the Site window
Select Site and
New Site
Give your
site a name
Select No
Slide 5
Finishing the setting up your website files
Click on the folder and Select
your Form Group’s File on the
T drive.
Select the folder you just
Select None
Slide 6
Start creating a webpage – return to the
untitled document screen
Slide 7
Use the Insert Bar table icon to insert
a base table for the page layout.
Cell padding
adjusts the space
between the edge
of the cell and the
Select the
of Rows
Select the width of the
table: if this is not
entered, the table will
adjust according to the
items in the cells and the
window size of the
Border sets the width of
the boarder – if you
choose “0” then it will not
show in the final
Cell spacing adjusts
the width of the space
between the cells.
Slide 8
This base table is indicated by
dotted lines. This table will not
display in the webpage
This example has 2 rows and 3
Each cell is used to contain an
object: text, image, menu, etc.
This base table indicated by
double lines because a
boarder width of 1 was
selected. This table will
display in the final webpage.
The property inspector bar shows the
properties of a selected item and is used to
bar to change it’s format
Slide 9
1. Enter main title.
2. Use drop down
Format menu to on
the Property
Inspector bar select
Heading 1.
4. Centre the text if
you wish.
Add further text as required in relevant cells. Don’t format the text at this stage.
Slide 10
Putting in Links and Images
Insert an image by
clicking the image button
on the insert bar and find
the file on the T drive in
the resources folder
Enter the text for the hyper
Pressing Return  at the end
of a line produces a new
If the image is outside your
website files you will be
asked to save it - save it in
your image file
Slide 11
Save your new home page – keep the file names in lowercase and
simple using files names that that are short and give some idea what
the page is about. They should all end in h
Your first page is the home page it is a convention to called it the
“index” and you must all do this.
The sub pages should have file names that indicate what they are.
When you save you will save into the file you created in the previous
You will be asked to save images you inserted into your webpage into
this file as well. You should create an images file to store them which
will help organise your site
Create the the other WebPages for your site ready to put the hyper links
in to link up your pages
To create a new page click on File and select New to open a new web
Slide 12
Now you have created the web pages you can link them to your home page
1. Highlight required text.
2. Either:
a) Click in the Link box on
the properties inspector
bar and type the required
URL (if you can remember
it) and it must be exactly
right including the
b) Or easier - click on the folder
and find the file select it and click
Slide 13
Click in the part of the table you
want to change.
Use the Properties inspector to
change what you want
E.g. here the background colour
has been changed
Click on the edge of the table and a
heavy black line appears and the
property inspector changes
Change the table width so it will
display across the whole screen when
in a browser by selecting 100 %
Slide 14
Apply your formatting by using style sheets.
Make sure these are in users’ folders before you start.
1. Use View, HTML
to view the
HTML coding.
2. Add the reference to the style sheet
in the head section.
3. Save and preview.
4. Edit the style sheet as appropriate.
Slide 15
Style sheet one
Slide 16
Style sheet two
Slide 17
Style sheet three
Slide 18
Style sheet four
Slide 19

similar documents