Making Websites with Making Websites with DreamweaverDreamweaver

BTTBTT

What is Dreamweaver?What is Dreamweaver?

““What You See Is What You Get” What You See Is What You Get” (WYSIWYG) web design software(WYSIWYG) web design software

Rather than writing code and trying to Rather than writing code and trying to imagine what it will look like, you create a imagine what it will look like, you create a web page like it will actually appearweb page like it will actually appear

Kind of like putting together a PowerPoint Kind of like putting together a PowerPoint slideslide

What about the HTML code?What about the HTML code?

Your Dreamweaver web page will still be Your Dreamweaver web page will still be an HTML filean HTML file

Dreamweaver writes the code for you as Dreamweaver writes the code for you as you go alongyou go along

You can look at the code any time, and You can look at the code any time, and edit it if you wish, by clicking “view” from edit it if you wish, by clicking “view” from the top menu, and selecting “code”the top menu, and selecting “code”

This is useful for adding JavascriptThis is useful for adding Javascript

Some things to rememberSome things to remember

Remember that each website you create Remember that each website you create should be in its own foldershould be in its own folder

All associated files (html files, jpegs, gifs, All associated files (html files, jpegs, gifs, flash objects, etc.) must be in that folderflash objects, etc.) must be in that folder

The first thing you should do is “Save As”The first thing you should do is “Save As”

Working in Working in DreamweaverDreamweaver

This is your main workspace – it’s what your webpage will actually look like

Right clicking on the workspacebrings up a menu

At the bottom, you candefine Page Properties

The Page Properties window lets you define the The Page Properties window lets you define the background, and choose the colours you want background, and choose the colours you want for text, links, etc.for text, links, etc.

The top toolbarThe top toolbar

The “Common” tab on the toolbar is the one you The “Common” tab on the toolbar is the one you will use most of the timewill use most of the time

The main toolsThe main toolsAdd a hyperlink-To an external page (another website)-To an internal page (another page on your site)-To an anchor on the same page

Named Anchor-Provides a placemarker that you can link to-Allows you to “jump” to a spot further down the page

Table-Insert a table-Much easier than writing the code!

Insert an image-Should be .jpg or .gif-Remember it must be in the same folder!

Rollover Image-An image that changes when you move your cursor over top of it-You will need 2 images to do this

The Most Important One!The Most Important One!

Like drawing a textboxLike drawing a textbox Normally if you insert an object (picture, table, Normally if you insert an object (picture, table,

whatever) it will be fixed wherever you put itwhatever) it will be fixed wherever you put it A Layer allows you to move it wherever you A Layer allows you to move it wherever you

wantwant

Draw Layer

Instead of this…

You can move the layers wherever you wantThe lines won’t show up when you view the page in a web browser

The Properties BarThe Properties Bar

At the bottom of the pageAt the bottom of the page When text is selected, the bar looks like the one When text is selected, the bar looks like the one

aboveabove You can change font, and create a linkYou can change font, and create a link

The Properties BarThe Properties Bar

When an image is selected, the bar looks like the one When an image is selected, the bar looks like the one aboveabove

You can turn the image into a link (very cool when you You can turn the image into a link (very cool when you are using a rollover image)are using a rollover image)

You can change the size/shape of an imageYou can change the size/shape of an image The The hotspothotspot tools let you select a part of the image you tools let you select a part of the image you

want to designate as a linkwant to designate as a link Clicking on different parts of the image will take you to different Clicking on different parts of the image will take you to different

linkslinks Some people design entire pages this way!Some people design entire pages this way!