dreamweaver 8 tutorialmweaver 8

8/12/2019 Dreamweaver 8 tutorialmweaver 8

1/59

Macromedia Dreamweaver

8 Tutorial


2/59

Create a folder on your computer called website1 to hold all web pages and

graphics.

(example of what your link will look like when you set it up later: map.jpg)

Optional: inside of the website1 folder create a folder called images to holdyour graphics.

(example of what your link will look like when you set it up later:

images/map.jpg)

Notice how the forward slash in the link represents the location of a file in a

new folder.

website1 images

All folders, webpages, and graphic names must be lowercase, no

spaces, and no special characters for ease of linking later.


3/59

Launch Dreamweaver

Select HTML


4/59

New Page Appears


5/59

Or Select File>New


6/59

Select HTML, Create


7/59

Window>Insert, Properties, Files

Have a Check Mark When Active


8/59

Setting Up a New Website

Window>Files Checked

You Will See The Files

Palette on the Right


9/59

From the Pop Up Files Palette

Window: Select Manage Sites


10/59

Select The New Button>Site


11/59

Set the New Site Definitions1. Name Your

Webpage

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.e

mporia.edu/~yourlastn

ame/website1/index.ht

1

2

3

4
http://studentaccess.emporia.edu/~yourlastname/website1/index.htmlhttp://studentaccess.emporia.edu/~yourlastname/website1/index.htmlhttp://studentaccess.emporia.edu/~yourlastname/website1/index.htmlhttp://studentaccess.emporia.edu/~yourlastname/website1/index.htmlhttp://studentaccess.emporia.edu/~yourlastname/website1/index.htmlhttp://studentaccess.emporia.edu/~yourlastname/website1/index.htmlhttp://studentaccess.emporia.edu/~yourlastname/website1/index.html


12/59

The File Structure You Created


13/59

Begin Creating the index.html

main webpage


14/59

Modify>Page Properties


15/59

Appearance, Set

Font, Text, Background Color

S


16/59

Links, Set Link, Visited Link

Colors

Cli k h C h P


17/59

Click the Curser on the Page,

Select Alignment, Type in Text

Window>

Properties

Center

Alignment

Button


18/59

Highlight Text, Select Ariel Font

Window>

Properties

Font Pop-up

Menu

Hi hli ht T t & S l t th Titl


19/59

Highlight Text, & Select the Title

Format Size

Window>

Properties

Pop-up

Format for

TitleHeading

Size:

Example 2

O t C t Titl With G hi


20/59

Or to Create a Title With a Graphic:

Insert>Table or Select Table Icon

Tables control

object placement

S t R C l T bl Width


21/59

Set Row, Column, Table Width,

Border, OK

Title

Example:

1 Row

2 Columns


22/59

Adjust Column Widths

Drag Table

Column

Line Left orRight to

Adjust the

Width


23/59

Before Adding Graphic Images go

to File>Save As>name your file

Remember to

use all

lowercase

letters, no

spaces orspecial

characters


24/59

Click in the Left Cell, Insert>Image,

or use the Image Icon, Locate

.gif or .jpg File

Window>Insert

Menu

To Insert Logo or Graphic in a

Header


25/59

Click in the Right Cell & Type

to Add the Title

S l h T bl S l BG


26/59

Select the Table, Select BG to

Add a Background Cell Color

Window>Properties

Menu

T M k B d I i ibl


27/59

To Make Border Invisible,

Select Table, Set Border to 0

Window>Properties

Menu

Select Edge of Table

T Add N i ti T bl


28/59

To Add Navigation Table,

Insert>Table or Table Icon

1 Row

7 ColumnsMaximum


29/59

Click Inside of the First Cell to

Add a Flash Navigation Button


30/59

Insert>Media>Flash Button


31/59


32/59

Repeat to Add All Buttons

If you need to edit the button after has been created or to

check the links just double click on the button again,

change the features, Apply, OK.


33/59

Example of Completed Title &

Navigation Buttons

You May Have Different Titles For

Your Navigation Buttons

E t l Li k T T t &


34/59

External Links: Type Text &

Highlight, Type in Link URL & Press

Return Key

http://www.google.com

I t l Li k T T t &


35/59

Internal Links: Type Text &

Highlight, Type in Link URL &

Press Return Key

index.html

E M il Li k T T t &


36/59

E-Mail Links: Type Text &

Highlight, Type in Link URL &

Press Return Key

mailto:[email protected]

mailto:[email protected]

T Add G hi Add T bl &


37/59

To Add a Graphic, Add a Table, &

Adjust the Column Width

Example:

1 Row

2 Columns

Click in the Left Cell Select


38/59

Click in the Left Cell, Select

Insert>Image or Image Icon

Locate

Graphic

Image:

.gif

.jpg

Choose

Click in the Right Cell & Add


39/59

Click in the Right Cell & Add

Your Text

May

Need to

Adjust

ColumnWidth

Adjust

Font to

Ariel

Anchors Are Used to Jump


40/59

Anchors Are Used to Jump

Down on a Long Page of Text

Highlight Word In the Link


41/59

Highlight Word, In the Link

Box Type in #name

#august

Highlight Text to Link To


42/59

Highlight Text to Link To,

Insert>Named Anchor

Type in Exact Name Match


43/59

Type in Exact Name Match,

Example: august, OK

Notice the Yellow Anchor


44/59

Notice the Yellow Anchor,

This Will Not Show When Posted

File>Save As Provide Name


45/59

File>Save As, Provide Name

& Location

Example

index.html

or

standards.html


46/59

Can Duplicate Pages

Once the index.html page is set up as

desired with the logo, header, and

navigation buttons it can serve as atemplate for creating new pages.

Just be sure to save each new pagewith new name.

File>Preview in Browser>


47/59

File>Preview in Browser>

Select the desired browser

Notice How the Browser Opens in


48/59

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


49/59

Optional: File>Preview in

Browser>Edit Browser List

For Selecting Primary & Secondary


50/59

For Selecting Primary & Secondary

Browser Choices


51/59

Viewing Options: HTML Code

Viewing Options:


52/59

Viewing Options:

Split Code & Design

You Can

Highlight

Areas in

Design

Mode &

See It in

Code

Viewing Options: Design


53/59

Viewing Options: Design

For Creating & Editing Web Pages

File>Save As Provide Name


54/59

File>Save As, Provide Name

& Location

Example

index.html

or

standards.html

New Folder: website1 (save


55/59

New Folder: website1 (save

webpage files inside of the folder)

website1

website2

website3

website4

website5

Reminder:

Lowercase,No Spaces,

No Special

Characters

Example of Files in Your


56/59

Example of Files in Your

website1 folder

Must Have aMain Page

Named

index.html

Your page names

may be different from

this example & will bean exact name match

to your navigation

buttons

Upload All Files to iDrive Web


57/59

Upload All Files to iDrive Web

Server Space

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

graphic1.jpg

graphic2.gif

public_htmlwebsite2

index.html

task.html

process.html

resources.html

evaluation.html

standards.html

conclusion.html

graphic1.jpg

graphic2.gif

Fil N i C ti E l


58/59

File Naming Conventions Example

All Lowercase Letters

Short Descriptive Names

No Spaces

No Special Characters

Names Exact Match toNavigation Buttons

Correct File Extensions

website1 (Folder Name)

index.html

website1

index.html

goals.html

instructor.htmlsyllabus.html

grading.html

rules.html

sitemap.html

graphic1.jpg

graphic2.gif

Additi l R


59/59

Additional Resources

Dreamweaver Tutorials:http://www.macromedia.com/

Internet Search:http://www.google.com

Great Resource Book:

Teach Yourself Visually The Fast and Easy

Way to Learn Dreamweaver 8
http://www.macromedia.com/http://www.google.com/http://www.google.com/http://www.macromedia.com/

dreamweaver 8 tutorialmweaver 8

Documents