Beginning Dreamweaver

1
Beginning Dreamweaver

• By
• Valarie Pozen
• Summer 2002

2
This tutorial is created for basic webpage
design. These pages could then be inserted into
an active website. This tutorial is not
intended to teach website development.
3
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images
• Links
• Sources of help

4
Basic Webpage Design

• Keep it simple
• Uncluttered
• Appropriate animation

5
Basic Webpage Design

• Keep it simple
• Easy to read
• Fonts
• Color/background
• Avoid green/red combinations.
• Avoid text over images.
• Left justified

6
Basic Webpage Design

• Keep it simple
• Easy to read
• Patience
• Mistakes are learning tools.
• Help is readily available.

7
Basic Webpage Design

• Keep it simple
• Easy to read
• Patience

8
Table of Contents

• Basic webpage design
• Organizing your page

9
Organizing Your Page

• Visit other websites
• What did you like?
• Was it easy to follow?
• Was it well organized?
• What didnt you like?

10
Organizing Your Page

• Visit other websites
• Map out a rough design
• Save time
• Prevent mistakes
• Assist with links

11
Organizing Your Page

• Visit other websites
• Map out a rough design
• Create one folder
• All webpages for your site
• All pics, powerpoints, etc.

12
Organizing Your Page

• Visit other websites
• Map out a rough design
• Create one folder

13
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page

14
Designing Your Page

• Create a folder for your page(s).
• Open Dreamweaver.
• Click on Modify and then page properties.

15
(No Transcript)
16

• Title your page
• Add background image
• Change background color
• Change text color
• 5. Click on ok

17
In this example, the title of the webpage is
Homework. The background is black. The text
is white.
18
The changes in the page are made. You cannot
see the white text, because we have yet to add
layers.
19
SAVE SAVE SAVE

• Modifying your page properties is NOT saving your
  work.
• Click on File and the Save to save your
  work!!!

20
Be sure to save your page in your website folder.
21
Designing Your Page

• Understanding layers
• Dreamweaver puts everything in layers. Layers
  are like boxes. You must insert a layer and then
  add text, pictures, graphics, etc. into that
  layer.

22
(No Transcript)
23

• There are 4 layers on this webpage.
• I added the white text inside each layer.
• The four yellow boxes in the top left corner
  represent each layer. They will NOT show on when
  your page is uploaded.

24
More on Layers

• Add/delete as needed
• Reposition
• Resize
• Format

25
More on Layers

• Add/delete as needed

26
More on Layers

• Add/delete as needed

• To delete a layer, you may
• Click on the yellow box for that layer, and then
  delete.

• Click the border of the layer and then delete.

27
More on Layers

• Add/delete as needed
• Reposition

• Click the border of the layer and drag to new
  position.

28
More on Layers

• Add/delete as needed
• Reposition

• Layer 3 has been moved above layer 4

29
More on Layers

• Add/delete as needed
• Reposition
• Resize

To resize a layer, click and drag at any of the
squares located around the border.
30
More on Layers

• Add/delete as needed
• Reposition
• Resize
• Format

• Open the properties toolbox.
• Click on Window.
• Click on Properties.

31
(No Transcript)
32

• The properties are for the selected layer.
  (Layer 4)
• You may change background image, color, size and
  location.
• NOTE Size and location are in pixels. This is
  convenient for aligning layers.

33
Only the layer color was changed.
34
To choose a different layer, do one of the
following

• Click on the yellow box for that layer.

• Click the border of the layer.

35
Layer 2 has now been chosen for a color change.

• Click on the yellow box for that layer.

• Click the border of the layer.

36
(No Transcript)
37
To format the text within a layer, highlight it
and make the changes in the properties box.
38
The font is now Lucida Sans.
39
To change text size, highlight text and change
within properties box.
40
The text is now enlarged.
41
Previewing Your Page

• To view your page as it will appear online,
  choose one of the following
• Press F12
• Click on File and Preview in Browser and
  iexplore

42
When you preview in a browser, a separate window
will open. Just close the new window to return
to Dreamweaver.
43
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images

44
Images

• Use jpeg format for faster transfer.
• MUST be saved in folder and inserted from folder.
• Edit image size to fit layer. Image size does
  not change to fit in layer as a background.

45
The image is smaller than the layer, so it
repeats itself when added as a background.
46
Now, the image is so large, the people in the
background of layer 3 cannot be seen at all.
47
Images

• Use jpeg format for faster transfer.
• MUST be saved in folder and inserted from folder.
• Edit image size to fit layer. Image size does
  not change to fill a layer as a background.

48
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images
• Links

49
Links

• Links may be to files, other web pages,
  powerpoints, images, etc.
• All files, presentations, images, etc must be
  saved in your folder before inserting link.

50
To link text to another website, highlight it and
choose Modify and then Make Link.
51
Type in the url, and then click on Select.
52
Your text is now a link. To check the link, you
must preview in a browser window. Links do NOT
work in the edit/design mode.
53
To link text to another file, highlight the text
and choose Modify and then Make Link.
54
Choose the file and then click on
Select. Remember that the file needs to be
webpage folder.
55
Your text is now a link as shown in layer 2.
Remember you must preview in a browser window to
check the link.
56
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images
• Links
• Sources of help

57
Sources of Help

• Dreamweaver help files
• Dreamweaver books
• Technology team at work

58
Sources of Help

• Dreamweaver help files

59
The help file links to the online Dreamweaver
help site.
60
Sources of Help

• Dreamweaver help files
• Dreamweaver books
• Dreamweaver Manual
• Dreamweaver Bible

61
Sources of Help

• Dreamweaver help files
• Dreamweaver books
• Technology team at work
• Co-workers
• Technology teachers
• Dreamweaver seminars

62
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images
• Links
• Sources of help

63
Apply what we learned.
64
First things first

• Open Dreamweaver
• Make a folder
• Modify the page

65

• Open My Documents
• Right click in the window
• Select New
• Select Folder

66
I have named my folder Dreamweaver
67
Now we set our page properties
68
In this example, the title of the webpage is
dreamweaver help sites. The background is
black. The text is white.
69
We need to add some layers.
70
Add layers by clicking on Insert and then
layer I have inserted 4 layers.
71
Resize and reposition the layers on your page.
72
This is the layout of the page.
73
Add text, images, or links to your layers.
74
Dreamweaver Help Sites will be my title.
75

• Set your font by clicking on Text, Font, and
  then selecting a font style.
• Enlarge your text by clicking on Text, Size
  Increase, and then selecting a size.

76
(No Transcript)
77
To add an image to the middle layer, click on
Insert and then Image. Choose your image.
78
(No Transcript)
79
There is text added to the first box,
80
And there is text added to the second box.
81

• To link the sites to their respective urls,
• Highlight the text
• Click on Modify and then Make Link

82

• Type in the url

83
The text is now blue and underlined to
distinguish it as a link.
Link the rest of the help sites.
84
All of the sites are linked. The last site has
been changed from CNET to Dreamweaver FAQ.
85
To view your finished page in a web browser, push
F12 on the top row of the keyboard.
86
Closing

• Patience
• Each page will get easier and better
• Keep learning