Macromedia Dreamweaver
CS4 Tutorial
Example of the website1
folder & images folder inside
Create a folder on your computer called
website1 to hold all of your web pages.
Inside of the website1 folder create a
folder called images to hold your
graphics.
All folders, web pages, and graphic
names must be lowercase, no
spaces, and no special characters for
ease of linking later.
Launch Dreamweaver
Select HTML
Or, File>New to open a new page
Select Blank Page, HTML, Create
Window>Insert, Properties, Files,
Workspace Layout>Classic
Tool Locations
Window>Insert
Window>Files
Window>Properties
Sites>Manage Sites
Select The New Site Button
Set the New Site Definitions
1
2
1. Site name: website1
2. Click on the Folder Icon &
Locate the website1 folder
3
4
3. Click on the Folder Icon &
Locate the images folder
inside of the website1 folder
4. Add HTTP URL Address:
http://studentaccess.emporia.
edu/~yourlastname/website1/
index.html
5. OK, Done Buttons
website1 selected & Done
Window>Files Site Structure
Begin Creating the index.html
main webpage
Modify>Page Properties
Page Properties, Appearance
(CSS), Font, Text, Background
Color, OK
Page Properties, Appearance
(HTML), Background, Text, OK
Insert>Tables or Table Icon to Hold
Contents in the Desired Locations
Table Header Settings, Rows,
Columns, Width, Border 0, OK
Header Table Example
Click the cursor in the third cell
and type in your page title,
highlight it, and in the
Window>Property set the desired
Heading size.
Insert>Table, Horizontal Navigation
Table Settings
Click the cursor
after the first
table cell before
adding the
horizontal
navigation table.
Insert>Table, Vertical Navigation if
desired & Body Contents
Click the cursor
after the second
table cell before
adding the body
contents table.
Insert>Table, to add a nested table
to hold Vertical Navigation if desired
Click the cursor
inside of the left
contents cell to
add vertical
navigation cells if
desired.
Modify>Page Properties, Headings
(CSS), Heading Font Selected, OK
Font Hierarchy Setting Example
Title = Heading 1 size, Tahoma, left align, bold style.
Subtitles = Paragraph size, Ariel font, left align, bold style.
Body = Paragraph size, Ariel font, left align, normal style.
Window>Properties, Vertical
Alignment: Top
Click the cursor in
front of the text to
move up, repeat
for the photo
Drag Adjust Column Widths
Window>Properties,
Column Split/Merge Icons
Drag cursor
over the
desired cells
to select
File>Save As, index.html,
Where: website1, Save
Place the logo and other graphic
images inside of the website1
folder, inside of the images folder
• logo.jpg (Photo type of images)
• logo.gif (Line art, or transparent areas)
Click inside of the top left cell,
Insert>Image, or use the Image
Icon to locate your .jpg or .gif image
Navigate to the website1 folder,
select the images folder,
& Choose button
Provide an Alternate Text name for
viewers using auditory readers, OK
Logo Graphic is added, type in the
site title and adjust cells
Select the vertical nested navigation
table and set Window>Properties to
Align to Center
Add the page image like the
logo, & begin adding your text
Highlight subtitle, Window>Properties, Bold Icon
Select the header cells,
Window>Properties set Bg
Background Color
The logo image
had a transparent
background and
was saved as a
.gif file format.
I used the
Eyedropper Tool to
select colors in the
graphic image.
Select navigation bar cells,
Window>Properties, Bg Color
Select the header table, Window
Properties, CellPad 0, Cellspace 0
Setting the
border to 0
makes in
invisible.
Setting the
cellpad and
cellspace to 0
removes the
color border.
Internal Links: Highlight Text, Type
in Window>Properties link name &
press Return Key to activate
Homepage link is
named index.html
External Links: Highlight Text,
Window>Properties Type the full
URL website address, Press Return
http://www.atomiclearing.com
E-mail Link: Highlight Text,
Window>Properties, Type in
mailto:e-mailaddress & Return Key
mailto:[email protected]
To Replace Navigation Links
with Buttons
Button Generator Websites
http://www.buttongenerator.com/
http://www.aaa-buttons.com
http://www.freebuttons.com/
Download the button image and place it inside of your
website1 folder inside of the images folder. Then, link the
button image to your page. Next, select the image and add a
link from it to the desired page. Next, upload the webpage
and your image to the server and test to be sure it is working
correctly.
Button Generator Tutorial
http://www.buttongenerator.com/
1. Scroll down and select the “Only Free Buttons” from the
pop up menu
2. Select the desired button design or the “Edit Button” text
link
3. Scroll down and type in your desired Text Label
4. Select the Text, Font, Size, & Alignment etc.
5. Scroll down to the bottom of the page to select the “Click
Here To Generate Your Button”
6. To save your button: PC users, right click on the button and
choose 'Save Image As' or “Download Image to Disk” or
similar menu item. Mac users Control click on the button and
select Download Image to Disk.
7. Navigate to your website1 folder to save the button.
Insert Button on the Webpage
1. Go to Insert>Image and click on the Browse button to locate
the new button you have created inside of your website1 folder
inside of the images folder.
2. Example of Window>Properties Link: images/buttonintro.png
3. Add the name of your Alternative Text in the box provided and
select the OK button.
4. Now that you have returned to your webpage select your new
button with the curser and go to the top menu to select
Insert>Link and type in the internal link; such as index.html or
syllabus.html where you want the user to go when clicking on
the link.
5. Be sure to provide credit at the bottom of your web page to
ButtonGenerator.com
6. Next, go to the top menu and select File>Save As and save
your web page again.
7. To test go to File>Browse Page, and click the button.
Optional: Anchors Are Used to
Jump Down on a Long Page of Text
Highlight Word, In the Link
Box Type in #name
#august
Highlight Text to link to,
Insert>Named Anchor
Type in Exact Name Match,
Example: august, OK
Notice the Yellow Anchor,
This Will Not Show When Posted
File>Save As, website1 folder
Can Duplicate Pages
• Once the index.html page is set up as
desired with the logo, header, and
navigation it can serve as a template for
creating other new pages.
• Just be sure to save each new page
with new name.
File>Preview in Browser>
Select the desired browser
Notice How the Browser Opens in
Front To Preview What it Will Look
Like When Uploaded to the Server
When Finished Viewing
Browser Red Button Close
Optional: File>Preview in
Browser>Edit Browser List
For Selecting Primary & Secondary
Browser Choices
Viewing Options: HTML Code
Viewing Options:
Split Code & Design
You Can
Highlight
Areas in
Design
Mode &
See It in
Code
Viewing Options: Design
For Creating & Editing Web Pages
File>Save As, website1 folder
Example
index.html for
the main
webpage
or
instructor.html
etc.
Upload All Files to your ESU Server
Space called iDrive/MyFiles
FTP File Transfer
Protocal Software:
CoreLite (PC)
http://www.coreftp.co
m/download.html
FETCH (Mac)
http://fetchsoftworks.
com/
Username & Password same as BuzzIn
Folder Structure on the
iDrive/MyFiles ESU Server
public_html (folder)
website1 (folder)
index.html
instructor.html
syllabus.html
grading.html
rules.html
images (folder)
logo.gif
globe.jpg
buttonhome.swf
Website Uniform Resource
Locator (URL) Address
Type your URL address in a new
Internet browser window to view your
site and test it to be sure all links and
images are working correctly.
http://studentaccess.emporia.edu/~your
username/website1/index.html
Additional Resources
Adobe Dreamweaver Tutorials:
http://www.adobe.com
Internet Search: http://www.google.com
Great Resource Book:
“Teach Yourself Visually The Fast and Easy
Way to Learn Dreamweaver”