Using Macromedia Dreamweaver MX/8

Webpage Editing and Design Software

Jeff Wood

Computer Applications Training Specialist

Colorado State University Extension

2

Basic Concepts

3

What is Dreamweaver?

WYSIWYG (What You See Is What You Get) Web page editor

Writes code for web pages

You select images, text, colors

Dreamweaver writes underlying code

Code is called HTML

Dreamweaver is a good way to learn HTML (split view between WYSIWYG and HTML)

4

What is HTML?

Hyper Text Markup Language

Common language understood by all browsers

Translated differently by different browsers

View, Page source (Firefox) or Source (Internet Explorer) to see HTML coding

Dreamweaver has code view as well

5

HTML tags

A tag is an attribute applied to text or an image Generally in pairs, opening <B> and closing </B> Attribute is applied between tags

Some tags can take on more modifications <FONT FACE=”Courier” COLOR=”red”

SIZE=”+2”></FONT> Font will be courier, red, 2 sizes larger than normal

O’Reilly reference (Window, Reference) will tell you about any tag you highlightDW will highlight bad tags in yellow

6

Browsers

DW allows quick preview of 2 browsers with F12 and Ctrl+F12Preview work in 2 or more browsers: IE (Internet Explorer) 7.x a MUST

IE is 71% of market* Mozilla Firefox 2.x a MUST

Built by Netscape Navigator 13% of market*

Other browsers Netscape Navigator (4.7 in particular) Google Desktop Opera, Safari, Keep earlier versions of IE, Firefox

Rename the folder before upgrade *Janco Assc., March 07

7

Browsers (con’t)

8

What is a web site?

Collection of files and folders on a server computer Files are written in HTML Server computer is the one people visit when they go to

your site

Two sites involved in building site: Local site - on your computer Remote site - on a server

Your computer talks to Remote server using FTP (File Transfer Protocol) Local site a mirror image of remote site

9

Opening Dreamweaver

Multiple windows and panels upon start-up Not as scary as it looks Close what you don’t need

Arrange it how you like itDreamweaver will remember last placement

10

Three main elements:

Document window What the page looks like (and/or underlying

code)

Insert panel above Used to insert objects and properties

Property inspector below PI inspects and changes properties of selected

objects The PI is your best friend!

11

Document window

Main Control centerWYSIWYG (What You See Is What You Get) Not truly WYSIWYG – dependent on user’s browser

and user’s settings Window size might not be maximized Monitor resolution varies

640 x 480 (1%) 800 x 600 (29%) 1024 x 768 and higher (68%)

Fonts will vary with user defaults Colors will vary with OS, browser, monitor, user defaults Graphics may be turned off, plug-ins may be missing Different browsers translate HTML differently

12

Document window (con’t)

The Document window: Title bar - file name and web page name

* after filename = doc not saved Menu bar - all commands for the document

window Toolbar - buttons for common tasks Document viewing area - where you add

content (text, images, tables, links) Status bar – tags, magnification, window size,

dial-up speed

13

Document window toolbar

3 important buttons: Code view Split view (code/design) Design view

Page title - lets you name or rename pageTarget browsers “Settings” allows you to check for unsupported tags in

specific browsers ‘Check browser support” shows potential problems

Validate code (DW8 only) “Settings” allows you to choose what type of doc

14

Document window toolbar

File management - lets you give/take files from web (better to do it from site window)Preview - lets you see it in browser Set primary (F12) and secondary (Ctrl + F12) browsers

here Check your work often

Refresh - updates page (F5) View options & visual aids lets you set Document view options Word wrap, line numbers (code view) Grids, rulers (design view)

15

Bottom of Document window

Tag selector - shows which tags are in play Can choose elements from here VERY useful when working with tables

Hand tool, magnification tool (DW8 only)

Magnification pulldown (DW8 only)

Window size

Download speed (25 second rule: under 25 seconds at 28.8 kbps) Click the little pull-down arrow to the right of window

size, then “Edit Size” to change either

16

Objects panel

Turn on/off in window menu

Use pulldown to change categories - common is most useful Common - most-used commands Forms - for creating forms Text - inserts special characters and applies

headings and lists Layout – Standard tables vs. layout tables Html – horizontal rules, headings, frames, etc.

17

Common elements:

Link – adds hyperlink (easier to use PI)

Email link – adds email link Mailto:emailaddress in PI another solution

Named anchor – for links within a page One long page strategy

Tables - easy table layout tool Coding tables by hand is HARD

Images pulldown Pulldown for Placeholders, Rollover images,

Navigation bars, hotspot drawing tools

18

Common elements (con’t)

Media Flash buttons and Flash text easy way to create slick

buttons and text with rollover and click behaviors Downside – requires Flash

Date – Inserts date Option to “automatically update date on save” keeps

you honest about “last updated” info

Server side include (DW8 only) CSUCE Header and Footer good example In MX, SSI is in HTML category of insert panel

Comments Comments in the code that don’t show up on the page

19

Property Inspector

Turn on/off in window menu

The PI is your best friend!

Will change, depending on what you’re doing

Default is for text properties Select text to format text Select an image to format image Select a link to format link Select a table to format table

20

Setting up a local site

Set up pages on your computer the same way they’ll be set up on the web server Remote site = local site

Figure out where to put your files All pictures in one place (images folder) All documents in one place (docs folder)

Divide by year (docs_06) or subject (4h_docs) or both (4h_docs_06)

Most pages needs own folder Logical flow to pages, logical flow to files and folders Pencil and paper is best way to start

21

Sample site structure

Hometown Security

Awareness Community Mobilization Skill Development

Remember the 3 click rule: all info within three clicks of home page

Documents and links

Documents and links

Documents and links

Eval

Eval form

22

Sample directory structure

Hometown Security – root folder – contains index.(s)html (home page) and ALL OTHER FOLDERS

Awareness – contains awa.html

Community – contains com.html

Skill – contains ski.html

Docs – contains all documents

Eval – contains eva.html

Images – contains all .jpgs & .gifs

23

Directory structure

Folders in DWeaver site window

24

Setting local information

Site menu, New Site, Advanced tab, Local info

Site name (for your use only)

Define root folder Root folder is the starting place

EVERYTHING on your site must be inside this folder

Your home page is a file in this folder (NOT in a folder inside this folder)

Browse to it using folder icon (or create one)

25

Setting local information (con’t)

Default images folder Not available in DWeaver 4 DWeaver does image file management for you Either browse to “images” folder or create one All .jpegs and .gifs are automatically copied

into this folder

Link checker useful to check on broken links or “orphaned” links within the site Use complete URL

Enable cache – “yes”

26

Setting remote information

Remote info you will need: Ftp host – (e.g. - yuma.acns.colostate.edu) Host directory (WWW/) Login – your unique login Password – your unique login If you choose “Save” you will forget your

password, so…

When you get email from ACNS – save a paper copy, not just the email!

27

The home page

Prefix: index or default

Extension: htm, html Many exceptions

.shtm or .shtml means interaction w/server needed .xhtml is stricter, cleaner version of html .asp, .cfm for dynamic pages

File, New, Basic, then…

Save As… Index.htm

28

The site window

Site menu, Site files or F8 Files and folders show up on rightUse “Expand” icon to see local and remote simultaneously One side is local site, other side is remote Shows directory structure of both sites

Do file management (adding, moving, renaming, deleting) here Dreamweaver will track most changes Always test to make sure

connect refresh get files put files

Remote site Local site

30

Creating content

31

User defaults

Unlike print media, user sets own defaults Fonts and font sizes you specify may not be used

Times New Roman, 12 point is default Resolution may differ

640 x 480 (1%) 800 x 600 (29%) 1024 x 768 and higher (68%)

Graphics, media may be turned off Colors vary with monitor, operating system, browser

Design with these limitations in mind 800 x 600 56 kbps Common fonts (Verdana, Times New Roman) Web safe colors

32

Title, description, keywords

Add title using doc window toolbar

Add description and keywords using “Head” in Html category of Insert panel Be concise, accurate, inclusive Keep it under 50 words Use commas to separate keywords To add content after the fact, often easier to do

it in the code

33

Text

Just start typing, or cut and pasteEnter = paragraph break (2 lines)Enter + shift = line break (1 line)Property inspector default is text Drop downs to change format, fonts, sizes,

colors Buttons for attributes, alignment, bulleting,

indents

Writing style for the web: short words, short sentences, short paragraphs

34

Setting Page Properties

Modify> Page properties

Appearance: Set base font, size, color Background color or image

For readability, light background, dark text Background images - be careful not to overwhelm text You can use a table with solid color for text on top of mage

Repeat tells DWeaver how to tile background (DW8 only) X is vertical, Y is horizontal

Set margins in pixels

35

Setting Page Properties (con’t)

Links Visited, rollover, active colors

Left blank, they will take on default colors You can sample colors of graphics on page to

choose colors Underline behaviors

Underline best way to imply link to end user

Headings Set size and color of different headings Use the Headings pulldown in PI to apply

36

Images

Images are punctuation, not content Insert, Image, or Insert Image on the objects panel Select image by browsing to it Give all images an alt tag for text-to-speech

browsers or browsers with image loading turned off DWeaver automatically prompts you to do it

Property inspector will change to allow image manipulation

37

Manipulating images

Best done in outside image editor Photoshop is industry standard

Powerful tool, fun to work with Expensive ($170 at CSU Software Cellar) Steep learning curve I have LOTS of tutorials online and via CD

Adobe Elements Basic, cheaper version of Photoshop ($79)

You have some image software with your computer (MS PhotoEditor, Kodak Imaging for Windows)

Digital cameras come with basic imaging software

38

Image size

If you have no image editing software:Adjust size using Width/Height boxes in PI or Click-and-drag sizing boxes Hold “shift” during drag to avoid stretching

image Numbers in Width and Height boxes will bold

to indicate a changed value Use “Reset size” button if you don’t like what

you did

39

Image alignment

Align pulldown menu Baseline is default (aligns bottom of image with

baseline of text or nearest object) Baseline = imaginary line under text or object

Top, Bottom - aligns with top/bottom of nearest object Left, right - aligns with margin (and wraps text!) Middle - aligns with middle of text baseline Text top - aligns with tallest character in nearest text Absolute bottom – aligns bottom of image with lowest

point in text ( j, g) Absolute middle - aligns middle of image with middle

of text

40

Image size and alignment (con’t)

Vspace, Hspace - # of pixels between object and surroundings Alt tags - text in lieu of image - important to add Text-only browsers, image-off options, web phones Screen tip text

Border size - set number in pixelsDefault color is black (must change color in HTML with hex code)If it’s a link, border color is link color

41

Image types

JPEG - supports lots of colors, longer to download, best for

complex imagery good for photos

GIF - 256 colors (any 256, not predetermined) Easier to download, best for large areas of flat color Good for cartoon-ish images

PNG - new, captures complex pictures without large file sizes,

not supported by all browsers

42

Page loading tips for images

Keep image files small Smallest physical size Lowest usable quality

Use alt tags Not necessary for small details (borders, bullets, etc)

Use low source image as transitional image for large file-size images Type file name in “low src” text box (or use browse, or

drag)

Reuse images (only need one logo for all pages)

43

Links

44

Hyperlinks

Links are paths to: Your own pages Pages on other websites Different parts of same page Email addresses Documents for download

Can be text or images Linked text is usually underlined Linked images, or hotspots within images

45

Pathnames

Relative pathnames are for in-site linksTwo types Document-relative pathnames

Address of page or doc within your site Path from current page

Site-root-relative path names Address of page or doc within your site Path from root directory

Document-relative is safest bet

46

Pathnames (con’t)

Two more types of paths: Absolute pathnames

For pages not within your own site Full address of another website

(http://www.ext.colostate.edu/)

Named anchors Links to different spot on same page Can create website of one long page - links to

different spots on same page from top

47

Creating Text Links

Highlight text Pull up Property InspectorIn link box, browse, type or paste new link Copy-and-paste from browser will insure you

don’t misspell it Link box will also pull down recently used

links

Click somewhere outside of link box

48

Creating image links

Buttons, arrows, logos, or pictures

Select the image

Pull up Property Inspector

In link box, browse, type or paste new link

Link box will also pull down recently used links

49

Hotspots within an image

For creating a link in section of image Select image Select drawing tool (rectangle, oval, irregular)

in PI to draw hotspot Type in link

Best for multiple links from one image Good way to design navbar Create hotspots within maps, group photos

50

Linking to an E-mail address

Highlight text Use email icon, or Document, Insert, Email link Dialog box will appear

Text - what site will say (highlighted text) Email - Actual email address If highlighed text is actual email address, just click OK

Default email program of user computer will be usedAlternate mailbox for these responses only may be helpfulmailto:email@address in link box another option

51

Adding CC’s and Subject lines

Needs to be done in the code

Add within quotes, no space

Find “mailto:Nancy.Banman@ColoState.edu”

For CC: Add ?cc=jeffrey.wood@colostate.edu

For subject: Add &Subject=website

Result: mailto:Nancy.Banman@ColoState.edu?

cc=jeffrey.wood@colostate.edu&Subject=website

52

Linking to spots within same page

The “One long page” strategyTable of contents or alphabet at top Links to rest of document FAQ’s are commonly done this way Alphabetical lists

Top or bottom of document links also helpfulTwo parts: Place where you want to go (Named anchor) Link to get there

53

Linking to spots within same page (con’t)

Put cursor in the place on page you want to go Click Anchor icon, or Insert, Named Anchor

Name it one word, no spaces, easy to remember Anchor icon will appear

Highlight or select the linked text or image In the link box, type #, then the name of the anchor No space between # and anchor name (#top)

54

Linking to sections of a different page

For page within website Link to Page name#anchor name

(webguide.htm#bandwidth) Will jump to the page “webguide.htm” and the named

anchor called “bandwidth”

Page in different site Link to Web Address#anchor name (

http://www.computer.com/webguide.htm#bandwidth) Will jump to the page “www.webguide.htm” and the

named anchor called “bandwidth”

55

Linking to documents

Adobe (.pdf) is good universal format In wide use, Government standard Adobe Reader free and easy to download Doesn’t suggest an endorsement of a specific product

(e.g. - Word or Wordperfect)

Always provide link to page to download Adobe Reader (www.adobe.com)Always provide size and type of file in text so they know what they’re downloading - Web Account Request Form (113 kb .pdf file)

56

Linking to documents (con’t)

Select linking text or image

Have document in folder Like images, all documents should be stored

together in common folder (“docs”, “06_docs”, “4h_06_docs”)

In link box, browse to document

57

Opening links in new windows

Why? Useful for framed pages For an external link, you might want your page to stay

up Links to a document that has no return link

Set the link

In Property Inspector, set target to blank Top is default, which replaces the content of current

page

58

Links you need:

Email contact (preferably every page)CSU http://welcome.colostate.edu

CSU CE http://www.ext.colostate.edu

Disclaimer http://welcome.colostate.edu/index.asp?url=info_csu-disclaimer

EOE statement http://welcome.colostate.edu/index.asp?url=info_csu-equalop

Non-discrimination statement http://www.ext.colostate.edu/non-discr.html

59

Rollovers, Flash Objects, Navigation Bars

60

Image rollovers

What is a rollover? Two images stacked on each other When an action (rollover, click) is performed,

image changes

Good for buttons – 2 different states

Different color, same text and size, for each state

Photoshop makes this very easy

Free buttons available on web

61

Rollovers (con’t)

Go to objects panel, choose rollover Images should be same size Second image will conform to first image size

Browse to original image

Browse to rollover image Add alt text Choose link Leave “preload” option checked - downloads

when page downloads

62

Flash objects

Warning: Flash is a plug-in, not all browsers come with it Plug-in = third party add-on software Macromedia Flash is plug-in for Flash media,

integrates easily with Dreamweaver Pre-loaded on vast majority (98%) of browsers

Slick and easy buttons and text Objects have pre-programmed rollover behaviors and

click behaviors Saves bandwidth because files are very small

63

Inserting Flash text

Use Media pulldown in Objects panel, select Flash Text, orInsert, Media, Flash TextDialog box appears Choose font, font size

Font doesn’t have to be loaded onto user computer (it’s a graphic, not text)

B, I options (affects all text)Text alignment buttons (Left, center, right)Choose text color, rollover color, background color (may need to match page color)

64

Flash text (con’t)

Type text into text box (check “show font” box for preview)

Browse or type address of link

Leave object in current folder Exeption to the “images” folder rule Name it something memorable (NOT text1.swf)

OK, click Play in PI to watch rollover effects Be sure and click Stop when done

Or, F12 to Preview

65

Flash Accessibility Attributes (DW8 only)

For screen reader browsers

Alt tag

Access key That key + Ctrl will trigger the link

Tab Index To relay what order the object will be selected

when using the Tab button Needed only if there are several objects on page

to navigate

66

Changes after the fact

Can move or resize graphic

2-click to get dialogue box back

Property inspector allows more: Background color changes Dimensions Alignment Vspace, Hspace changes

67

Creating Flash buttons

Use Media pulldown in Objects panel, select Flash Text, or

Insert, Media, Flash Text

Dialog box appears Browse through, lots to choose from Sample box previews behaviors (rollover, l-

click) “Get more styles” connects to website with

more stuff

68

Flash buttons (con’t)

Type in text in text box

Choose font

Font size often non-negotiable

Background color - eyedropper is good option for page color match

Link - browse to file or type in address

Click Play button to see rollover effects Click Stop before continuing

69

Changes after the fact

Can move or resize graphic

2-click to get text box back

Property inspector allows more: Background color changes Dimensions Alignment Vspace, Hspace changes

70

Navigation bars

What is a navigation bar? Set of buttons stacked horizontally or vertically

inside a table

You need the images for buttons first Many sites to choose from

Search engine - “html buttons” Good for standard buttons (forward, back, home,

email) Photoshop is fast and easy button-maker

71

Inserting a navigation bar

On objects panel, click Insert Nav bar button

Up to four images to assign: Up image: initial image Over image: when mouse moves over it (lit up) Down image: when button is clicked (pushed

in) Over while down: when mouse is over after

clicking (lit up, pushed in)

72

Nav bars (con’t)

Type in element name (home, links, etc.)

When clicked, go to… Type in URL (get spelling right!), or If in-site, browse to it and select

Show “Down image” Initially checkbox For when user is already there, so you want the button

down at outset Select button before checking box Asterisk will appear

73

Nav bars (con’t)

Create horizontally or vertically using pulldown

To insert more buttons on nav bar Click the “+” button Follow same steps

Change order by selecting image, using up and down arrows

74

Inserting MS Office documents (Word, Excel, PowerPoint)

Strip them of transitions, animations, unnecessary graphics, soundsStart in native program, File, Publish to WebChoose “Files of Type” as Web Page (*.html)Publish file and folders directly into website (create “docs” folder to put it in)Another option: allow them to download it by linking to actual file (instead of web version) We did this already with .pdf Same technique with any document

75

Inserting MS Office documents (Word, Excel, PowerPoint) (con’t)

Creates a file and a folder Point links to file; folder will take care of itself

Commands>Clean Up Word HTML Word is very bad at writing code Cleans up redundant and MS-centric code Clean Up HTML another option Simple graphics and text can be added after the

fact

76

Creating tables

Good way to structure a web page

Without tables, content is generally left, center, or right aligned (not a lot of design options

Think of tables as building boxes to put content into

77

Tables (cont)

Insert>Table, or

Use table icon in Objects panel

Set options in dialogue box

# of rows & columns

Table width

Border, padding, spacing

Header