Macromedia DreamweaverCS4 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 DreamweaverSelect 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. Site name: website1

2. Click on the Folder Icon & Locate the website1 folder

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

12

3

4

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:jholland@emporia.edu

To Replace Navigation Links with Buttons

Button Generator Websites http://www.buttongenerator.com/http://www.aaa-buttons.comhttp://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 Tutorialhttp://www.buttongenerator.com/1. Scroll down and select the “Only Free Buttons” from the pop up menu2. Select the desired button design or the “Edit Button” text link3. Scroll down and type in your desired Text Label4. 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 Webpage1. 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.png3. 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.com6. 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: DesignFor 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.com/download.html

FETCH (Mac)http://fetchsoftworks.com/

Username & Password same as BuzzIn

Folder Structure on the iDrive/MyFiles ESU Server

website1 (folder)

index.html

instructor.html

syllabus.html

grading.html

rules.html

public_html (folder)

images (folder)logo.gifglobe.jpgbuttonhome.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/~yourusername/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”