Introduction to
Dreamweaver
Contents
1. Files
2. Getting started
3. Tables
4. Images
5. Saving
6. Previewing
7. Fonts
8. Style sheets
9. Hyperlinks
10. Frames
11. Opening an existing file
2
Files and Folders
1. The first thing you need to do is create folders for
your website
2. Inside your ICT folder right
click with your mouse and
chose New >> Folder
3. Name your folder website
4. Inside your website folder make 3 new folders.
Images, Information and Webpages.
5. Save any written information, images and the
webpages you are making in the appropriate folders.
3
Getting started
1. Open up Dreamweaver
2. From the Create New menu select HTML
3. Dreamweaver will open on a new blank page.
4. We will work in Design view – but you can also work
in Code view. Click on Code and see what happens.
4
Tables
You should use tables on every page in Dreamweaver.
This will allow you to put text and images next to each
other.
1. There are 2 ways of putting a table on the page. The
first is to use the Table icon on the tool bar.
2. The second is to use the Inset menu and
chose table
3. The table option box will appear.
Fill in the number of rows and
columns you need
Leave the table width at 200
pixels.
Fill in the Border Thickness. If
you do not want to see the table
on your webpage chose 0.
Press OK.
4. The table will appear in the corner of the page.
5
5. Use the black squares to stretch the table to the size
you need.
6. Highlight the cells in the top row and right click with
your mouse. Chose Table >> Merge Cells
7. Write your title in the space available
8. Other options on the table menu include Insert Row,
Insert Column, Delete a Row.
Images
1. Save all your images in to your Website / Images
folder.
6
2. You must save your images as .JPG or .GIF. Other
file formats cannot be viewed in Dreamweaver.
3. If your image is a .BMP, then copy and paste it in to
Paint and saves as .JPG
4. Click on the cell in your table that you would like to
put your image in to.
5. There are 2 ways to insert an image. Use the
Image icon on the tool bar OR
6. Go to Insert Menu >> Image and Browse for your
file
7. Select your file
and press OK.
7
8. Adjust your column width by clicking and dragging
the columns
9. The Properties Box at the bottom of the page
allows you to change the size of the image.
10. Change the position of the image by clicking next to
it, and choosing the horizontal and vertical
positioning in the Properties Box.
8
A Rollover Image is one which changes when you hold
your mouse over it.
11. Click on the cell in your table that you would like to
put your Rollover Image in to.
12. There are 2 ways to insert a Rollover Image. Use
the Rollover Image icon on the tool
bar OR
13. Go to Insert Menu >>
Image Objects >>
Rollover Image
14. Browse for your Original Image. Then Browse
for your Rollover Image. Once the two file paths
appear press OK.
9
Now is a good time to save and preview your work
Saving
1. Chose File >> Save All
10
2. Browse to your Website folder. Rename your file and
save.
Previewing
1. To Preview you website go to the
Preview icon >> Preview in
iexplore
2. You can also press F12 on the keyboard
11
Fonts
1. Chose the desired font from the font list in the
properties box
2. If you would like to use a font that is
not displayed in the font list chose
Edit font List
12
3. Select the font you require from the list. Click on
the two arrows icon to add it to the font list. When
your font appears in the left hand side of your list
press OK.
4. 4. You can now apply the new font as in step 2.
5. Change the size of your font in the properties box.
Don’t forget to chose points – this way it will be a size
you recognise.
6. Change the colour of your font in the properties
box.
13
7. Change the position and weight of your font in the
properties box.
8. Change the horizontal and vertical alignment
of the text in the properties box.
Style
sheets
If you want to use consistent font styles throughout your
website you need to make a style sheet.
1. Right Click on your website
chose CSS Styles >> New
2. Change the Selector Type to Tag
14
2. Change the Tag to H1.
This will set the Style for Heading 1
Press OK
3. Chose a sensible file name for your style sheet (e.g.
stylesheet1) and save it in your webpages folder.
4. Select the
Heading 1 Styles
you require
15
5. Use the block
menu to change
the font
alignment
6. When you are happy with your heading 1 styles
chose OK
7. To create a Heading 2 style.
Right click on your page chose
css styles >> manage styles
8. Select your style sheet and chose edit, then new
16
9. Select the tag you wish to edit (probably H2), and
follow steps 4, 5 and 6.
To apply your style.
9. Click on your text and select the style you require
from the format menu in the properties box.
10. You can apply your style sheet to all your pages.
On a new page. Right click and chose css styles >>
manage styles
17
11. Chose attach >>
browse
12. Browse for your style sheet
13. Press OK then OK then Done.
18
Hyperlinks
1. Making a link to an external webpage. Click on the
image or highlight the text you want to link from.
Paste in the website URL to the Link box.
Remember to include http://
2. If you are using Frames you may also wish to change
the target. This determines where your link will
open:
19
Blank: New Page
Parent: Main page
Self: Current page
20
3. Making a link to a different page on your website.
Click on the image or highlight the text you want to
link from. Right click with your mouse and chose
make link. Chose the page you want to link to and
press OK.
4. Don’t forget to change your Target if you need to.
5. Making a link to a different section on the same
page. Click on the image or highlight the text you
want to link to. Click on the Anchor icon on the
toolbar. Name your Anchor press OK.
21
6. You will see a little anchor appear next to the image.
7. Now click on the image or highlight the text you want
to link from. Right click with your mouse and chose
make link. Next to the file name type #LinkName.
Change the relative to: box to document.
Frames
22
1. Make a new page call it menu. Fill in the menu
options on the page. Save and close
2. Go to File New
3. Select framesets from the left hand menu and select
the layout from the centre menu. Press Create
23
3. Click in the left hand frame. Go to File >> Open in
Frame. Chose the Menu file and click OK.
4. Click in the main frame. Go to File >> Open in
Frame. Chose Page1 and click OK.
24
5. Go to Window and chose Frames. This selects all
your frames at once. You will see a small image of
your frameset appear in the bottom right hand
corner of the screen.
6. Go to File Save Frameset as. Type a sensible name
and click save. This will save all frames as 1 file.
25
7. Highlight your first menu item. Right click and chose
make link. Select the file you want your link to
open and click OK.
8. With the link still highlighted change the target to
MainFrame. This will allow your
chosen page to open on the right
hand side of the page.
26
9. Repeat this process for your other links. Remember
to change the target to MainFrame.
10. When you have created your links chose
file >> save all. If you are prompted
save your frames with the default
names.
11. Preview your website and test that the links work
Opening Existing Files
1. Browse to your folder and right click on your file.
Chose Edit with Dreamweaver MX 2004.
27
28
