Easy Dreamweaver Tutorial

Easy
Dreamweaver
Tutorial
Student Workbook

---

Steps to create your webpage(s)
1. Log into your server folder, create a NEW folder and name it your last name.
2. Create a folder INSIDE your last name folder and call it “images.”
Place all your images, photos, graphics into this folder BEFORE you start your
webpage.
3. Launch Dreamweaver with a new document open.
4. SAVE this document into your last name folder and call it “index.”
This will be your starting page. (Make sure you have a .html on your filename.)
5. Now, type any text, import any graphics you’d like to create your page(s.) Be
sure that all your images are saved into your “images” folder BEFORE you
import them into your webpage.
6. Save your page(s) when you are done and let Mr. Gue know that you are ready
to have your page(s) uploaded to the web.
See the next few pages for hints on how to create links, modify
text and import pictures into your webpages.
That’s all there is to it!
2 of 8
Easy Dreamweaver Tutorial – Student Workbook

---

File Structure for Successful Web Design
A. File / Folder Naming Rules –
a. Don’t use spaces in file or folder names
b. Don’t use special characters or periods in file or folder names
c. Try to keep filenames to 8 characters or less
d. Files must have a 3 letter extension to work on the web

i. .htm

ii. .html (exception to rule)

iii. .gif

iv. .jpg

v. .png

vi. .swf
B. File and Folder Structure –
a. K.I.S.S – “Keep It Simple, Silly!”

i. Name your web page folder your last name

ii. Put your graphics in ONE folder named “images”

iii. Don’t “nest” folders too deep

iv. Use example below as a model:
3 of 8
Easy Dreamweaver Tutorial – Student Workbook

---

Dreamweaver Basics –
A. Text Editing –
1. Plan, Plan, PLAN what your content is BEFORE starting
to work in Dreamweaver!
2. Enter your text as you would in a word processor, then go
back and stylize it to your needs.
See diagram below. There are 4 major boxes in which you can stylize your text.
These boxes help to simplify editing your text size, font choice, and text color.
Also note the B, I, and alignment click boxes under the color palate.
4 of 8
Easy Dreamweaver Tutorial – Student Workbook

---

B. Links – Creating links to other pages or sites is easy…
1. Type in text you wish to make a link.
2. Highlight the text you wish to make a link.
3. Find the LINK box at the bottom of the screen (see
diagram below)
4. Type in the address or page name of your link.
5. Hit the Return key. Your text is now a link.
5 of 8
Easy Dreamweaver Tutorial – Student Workbook

---

3. Tables –
1. Place your cursor where you wish to insert table.
2. Click the TABLE icon at the top of the page menu.
3. Define the amount of rows and columns you need.
4. With the table selected, use the menus at the bottom
of the screen to edit the table properties.
Insert table and define rows / columns:
6 of 8
Easy Dreamweaver Tutorial – Student Workbook

---

Tables continued –
Use menus to edit table properties (make sure table is selected!)
7 of 8
Easy Dreamweaver Tutorial – Student Workbook

---

4. Insert Graphics –
1. Place cursor where you wish to insert graphic.
2. Go under INSERT at top menu and click IMAGE.
3. Navigate to and select your graphics file to insert.
4. Images can be inserted into page or into tables.
Insert Image:
8 of 8
Easy Dreamweaver Tutorial – Student Workbook

---