Dreamweaver

Learning to be a web design master!

By: Mr. Brunton

Introduction to Dreamweaver

To do list … 1. Open Dreamweaver2. Define a site3. Design a page on paper4. Design a layout using layout

view1. Think of screen size

(1024x768 is a pretty standard size)

5. Setting some basic properties

6. Adding images to the page7. Saving the page as a

template so that all other pages in the site look the same

8. Adding text to the page9. Adding links to the page

8. Practice site

Introduction to Dreamweaver

Open Dreamweaver

Start MenuProgramsAdobe Web Standard CS4Choose Dreamweaver shortcut

Create a folder

Open your H-drive through My computer and create website folder

Introduction to Dreamweaver

Introduction to Dreamweaver

Getting Started …

On the top bar, choose:Site … New Site This screen will pop upName your siteNo to serverEdit local copies and choose where to save it by clicking on the folder

Define a site

Introduction to Dreamweaver

Define a site (continued)Choose “None” for how to connect to serverChoose DoneYou now have a list of files in your site’s folder (might be nothing at this point). You will see this on the right hand side of the screen

Introduction to Dreamweaver

Designing a web pageTake a moment or two to design what you page will look like on paper …

(demonstration on board)

What you are left with is a design layout that you will use in the next steps

Introduction to Dreamweaver

Create your table

Add a table (InsertTable) with the number of rows and columns needed.Merge cells and re-align as needed.

Follow demonstration on board.

Introduction to Dreamweaver

Setting some properties

Page properties – right click (at bottom) Title, page margins, colour, fonts, etc.

Table properties – click on <table> at bottom Colours, etc.

Cell properties – click on desired cell, right-click, ‘Edit tag <td>’ Colours, alignment, etc.

Introduction to Dreamweaver

Adding images

Create an images folder Right-click on the site folder, choose New

Folder. Call it ‘images’

Create / steal images and save them to this new folderClick and drag the image where you want to insert it (let’s start with a top banner)

Introduction to Dreamweaver

Saving the document

Save as an html file Go to File, Save Save the document

as index

Save as a Dreamweaver template file

Go to File, Save as … Save the document as

template

Introduction to Dreamweaver

Adding text

Make sure you are working in the index.htm file, not the template file.Click where you want and type awayAt the bottom of the page, you will notice many of the same features that you would see in Word or WordPerfect Ie: bold, italics, centre, indent, bullets,

numbering, font face

Introduction to Dreamweaver

Adding linksCreate a second file (use your template to do this)Save the file as about.htm (be sure to choose html fileOn the left hand side, create a link back to the home page

Type ‘Home’ in the appropriate spot Highlight ‘Home’ Use the point to file function to link to index.htm

You can also type in an address in the Link box

Practice SiteCreate a website for one of the following: SJSH Restaurant Sports team

The site should have 4 pages; each page should look the same and should have links to all other pages in the siteBe sure to organize files into a folder

Introduction to Dreamweaver