Macromedia Dreamweaver 4

1
Macromedia Dreamweaver 4

• Web Page Design software

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, links
• 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 (NN) or Source (IE) 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 ltBgt and closing lt/Bgt
• Attribute is applied between tags
• Some tags can take on more modifications
• ltFONT FACECourier COLORred
  SIZE2gtlt/FONTgt
• Font will be courier, red, 2 sizes larger than
  normal
• OReilly reference (Window, Reference) will tell
  you about any tag you highlight
• DW will highlight bad tags in yellow

6
Tags (cont)

• Dont need to learn these, but its helpful

7
Tags (cont)
8
Browsers

• Preview work in 2 or 3 browsers
• Netscape Navigator 4.x or higher a MUST 4 of
  market
• IE (Internet Explorer) 4.x or higher a MUST 93
  of market
• 6.x version of both now available (keep the old
  one around)
• America Online (need to subscribe first)
• Really old browser (3.x)
• Doesnt have to look good, just make sense
• Macintosh

9
What is a web site?

• Collection of files and folders on a computer
• Computer is attached to the internet
• Files are written in HTML
• Two sites usually involved
• Local site - on your computer
• Remote site - on a Web server
• Your computer talks to Remote server using FTP
  (File Transfer Protocol)

10
Opening Dreamweaver

• Multiple windows upon start-up
• Main window, several floating toolbars
• Not as scary as it looks
• Close what you dont need
• Windows menu will open and close panels
• Arrange it how you like it by clicking and
  dragging (will snap together like Lego)
• Dreamweaver will remember last placement

11
Three main elements

• Document window
• What the page looks like (and/or underlying code)
• Objects panel
• Used to insert objects and properties
• Property inspector
• PI inspects properties of selected objects
• The PI is your best friend!

12
Document window

• Main Control center
• WYSIWYG (What You See Is What You Get)
• Not truly WYSIWYG dependent on users browser
  and users settings
• Window size varies
• Fonts will vary
• Colors will vary
• Graphics may be turned off, plug-ins may be
  missing

13
Document window (cont)

• 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 type stuff
• Status bar - tags, stats, launcher bar

14
Page Toolbar

• 3 important buttons
• Code view
• Split view (code/design)
• Design view
• Page title - lets you name or rename page
• File management - lets you give/take files from
  web
• Preview - lets you see it in browser
• Set primary (F12) and secondary (Ctrl F12)
  browsers here

15
Page Toolbar (cont)

• Refresh - updates page (F5)
• Reference - definitions of a selected tag
• Code navigation - for debugging code
• View options - lets you set Document view options
• Word wrap, line numbers (code view)
• Grids, rulers (design view)

16
Bottom of Document window

• Tag selector - shows which tags are in play
• Can choose elements from here
• Window size
• Download speed
• Launcher bar
• Site map button - use to get to files and folders

17
Objects panel

• Turn on/off in window menu
• Arrow at top will change categories - common is
  most useful
• Character - inserts special characters
• Common - most-used commands
• Forms - for creating forms
• Frames - templates for frame-based pages

18
Object categories (cont)

• Headings - for meta tags, descriptions, and
  keywords (for search engines)
• Invisibles - for anchors, javascript and comments
• Specials - java applets and plug-ins
• You can name icons in Edit, Preferences, General,
  Icons and Text

19
Common elements

• Images - inserts images
• Rollover Images - changes when cursor moves over
  it
• Tables - regular tables and page layout tables
• Tabular data - converts data files to tables
• Layers - layout tool
• Navigation bars - adds nav bar elements

20
Common elements (cont)

• Horizontal rules - lines between sections
• E-mail links - inserts email link
• Date - inserts date
• Flash button - easy and slick button maker
• Flash text - easy and slick text graphics
• Layout and view icons at bottom

21
Property Inspector

• Turn on/off in window menu
• The PI is your best friend!
• Will change, depending on what youre doing
• Default is for text properties
• Select text to format text
• Select an image - it will format image
• Select a link - it will format link
• Select a table - it will format table

22
Setting up a local site

• Set up pages on your computer the same way
  theyll be set up on the web server
• Figure out where to put your files
• All pictures in one place
• All documents in one place
• Each page may need own folder (buttons, docs,
  etc.)
• Logical flow to pages
• Pencil and paper is best way to start

23
Sample site structure
Home page
Excel
PPoint
Word
Access
Publisher
DWeaver
Class notes
Class notes
Class notes
Class notes
Class notes
Class notes
Remember the 3 click rule all info within three
clicks of home page
24
Defining the root folder

• Root folder is the starting place
• Site menu, New site
• Name it - for your use, not the web
• Click on the little folder icon next to Local
  Root Folder
• Either browse to your folder or create new one
• Click select

25
Defining the home page

• Home page will be in root folder
• Always Save As index.htm before starting
• All home pages should be index.htm(l)
• Always name in title bar before starting
• Define sites, Site map layout
• Make sure index.htm is listed as home page

26
The site window

• Window menu, Site files or F8 or site button in
  launcher bar
• One side is remote site
• One side is local site
• Shows folder structure (like My Computer)
• Do file management (adding, moving, renaming,
  deleting) here
• Dreamweaver will track changes
• Write to server from here when site is done
• Define Sites, Remote Info, FTP to set up protocol

27
Creating content
28
Designing for low bandwidth

• Down load speed is 1 concern among internet
  users 
• 60 of internet users use dial-up accounts
• 3 connect at 14.4K bps or less
• 17 connect at 28.8K bps
• 16 connect at 33.6K bps
• 24 connect at 56k bps 
• 8 second rule 8-24 second download on 28.8 modem
  
• Dreamweaver will update download times at bottom
  of page

29
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
• Window size may differ
• 51 of web users use 800 x 600 pixel display
• 8 use 640 x 480
• 27 use 1024 x 768
• Graphics, media may be turned off
• Design with those limitations in mind

30
Text

• Just start typing
• 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

31
Color

• Impossible to control color exactly
• Different operating systems show colors
  differently
• Every CPU, monitor shows color differently
• Browsers show colors differently
• Users see colors differently
• Test on a variety of systems

32
Manipulating color

• Modify, Page properties
• Background color, text color
• For readability, light background, dark text
• Printers wont print background, so light colored
  text wont read well
• Background images - be careful
• Link colors (fresh, active, visited)
• Tracing image - for layout - doesnt show on page

33
Images

• Images are punctuation, not content
• Insert, Image, or
• Insert Image on the objects panel
• Select Image (browse to it)
• Property inspector will change to allow image
  manipulation
• Thumbnail will appear

34
Image size

• Adjust size using width, height boxes in PI
• Avoid stretching image, pixelating
• Type in inches, centimeters, it will convert to
  pixels
• Reset size button if you dont like what you did
• Specifying size will help image load faster
• Name it if you like

35
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

36
Image size and alignment (cont)

• 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 pixels
• Default color is black (must change color in HTML
  with hex code)
• If its a link, border color is link color

37
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

38
Image folder

• Create folder for all site images
• Put all images in same folder
• Much less confusing
• Path names stay consistent
• IMPORTANT Do all file management within
  Dreamweaver site window allows DW to track
  files and links

39
Page loading tips for images

• Keep image files small (GIF when possible)
• Use alt tags
• Not necessary for small details (borders,
  bullets, etc)
• Use low source image as transitional image for
  large images
• Type file name in low src text box (or use
  browse, or drag)
• Reuse images
• Make sure size is specified in PI (should by
  default)

40
Links
41
Hyperlinks

• Links are paths to
• Your own pages
• Pages on other servers
• Different parts of same page
• Email addresses
• Documents for download
• Can be text or images
• Linked text is usually underlined
• Linked images sometimes have blue border

42
Pathnames

• Relative pathnames are for in-site links
• Two 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

43
Pathnames (cont)

• Two more types of paths
• Absolute pathnames
• For pages not within your own site
• Full address of another website
  (http//www.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

44
Creating Text Links

• Highlight text
• Pull up Property Inspector
• In link box, browse, type or paste new link
• Link box will also pull down recently used links
• If Relative link, choose Document or Site
• When in doubt, use Document!
• Hit Enter

45
Creating image links

• Buttons, arrows, logos, or pictures
• Select the image (L-click inside it)
• Pulls up Property Inspector
• In link box, browse, type or paste new link
• Link box will also pull down recently used links
• If Relative link, choose Document or site
• When in doubt, use Document!
• Hit Enter

46
Hotspots within an image

• For creating a link in section of image
• Use drawing tool (rectangle, oval, irregular) to
  draw hotspot
• Type in link
• Best for multiple links from one image
• Good way to design navbar

Word Access Excel PowerPoint Publisher
47
Adding a link border

• Will help imply image is a link
• Select image
• Type number into border box
• Number is number of pixels - choose one and play
• Hit enter
• Color will be same as standard link color

48
Linking to an E-mail address

• Highlight text (or merely pick insertion point)
• Document, Insert, Email link
• Dialog box will appear
• Text - what site will say (highlighted text)
• Email - Actual email address
• Default email program of user computer will be
  used
• Alternate mailbox for these responses only may be
  helpful

49
Linking to spots within same page

• The One long page strategy
• Table of contents or alphabet at top
• Links to rest of document
• FAQs are commonly done this way
• Alphabetical lists
• Top or bottom of document links also helpful
• Two parts
• Place where you want to go (Named anchor)
• Link to get there

50
Linking to spots within same page (cont)

• Highlight or select the place you want to go
• Insert, Invisible tags, Named Anchor
• Name it one word, no spaces, easy to remember
  (guidelines)
• You may get invisible elements on? - turn it on
• If you dont get it, its already turned on
• Anchor icon will appear

51
Linking to spots within same page (cont)

• 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 (guidelines)
• Can also use target
• Highlight linked text
• Find anchor
• Drag target to anchor

52
Linking to sections of a different page

• For page within website
• Page nameanchor name (webguide.htmbandwidth)
• Page in different site
• Addressanchor name (http//www.computer.com/webgu
  ide.htmbandwidth)

53
Linking to documents

• Adobe (.pdf) is good universal format
• Government standard
• Adobe Reader free and easy to download
• Doesnt suggest an endorsement of 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 theyre downloading - Web Account
  Request Form (113 kb .pdf file)

54
Linking to documents (cont)

• Select linking text or image
• Have document in folder
• Like images, all documents should be stored
  together in common folder (documents)
• In link box, browse to document

55
Opening links in new windows

• Why?
• Mostly used for framed pages (explained later)
• 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

56
Link colors

• Nice to know where youve been on a site
• Modify, Page Properties
• Click inside color box of Links, Visited links,
  Active links
• Links - color of unvisited site link
• Visited - color of previously used link
• Active links - color while user is in act of
  clicking
• Be consistent!
• Choose contrasting colors

57
Linking Strategies
58
Example 1

• Use the most meaningful phrase or word in the
  text
• RIGHT Visit my page on Heavy Metal Music
• WRONG Click here for my Heavy Metal Music page

59
Example 2

• When youre linking to something other than an
  html page, let the user know whats coming size
  and type of file)
• RIGHT A song by my band Slug (7.3mb mp3 file)
• WRONG Slug

60
Example 3

• Dont underline spaces or punctuation in links,
  and be clear where one link ends, and another
  begins.
• RIGHT Ive lived in Iowa, New York, and
  Colorado.
• WRONG Ive lived in Iowa, New York, and
  Colorado.

61
More linking tips

• If you use images for links, particularly button
  bars and image maps, be sure to provide text
  equivalents (alt text).
• Come up with rules about links (length, colors,
  size, structures) and stick to them.
• Make sure all link colors differ significantly
  from the background colors and/or images, from
  unlinked text, and from each other.

62
Rollovers, Flash Objects, Navigation Bars
63
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

64
Rollovers (cont)

• Go to objects panel, choose rollover
• Images should be same size
• Second image will conform to first image size
• You can resize with Property Inspector afterward
• Choose Original
• Choose Rollover
• Choose link, if necessary
• Leave preload option checked - downloads when
  page downloads

65
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 media, integrates
  easily with Dreamweaver
• Pre-loaded on vast majority (98) of browsers
• Automatic transparent download for those who
  dont
• You can have your site reroute to a non-Flash
  equivalent if browser is non-equipped

66
Flash objects (cont)

• Slick and easy buttons and text
• Saves bandwidth because files are very small
• Objects have pre-programmed rollover behaviors

67
Inserting Flash text

• Insert, Interactive Images, Flash text, or
• Use Objects panel Insert Flash text button
• Dialog box appears
• Choose font, font size
• Font doesnt have to be loaded onto user computer
  (its a graphic, not text)
• B, I options (affects all text)
• Alignment buttons (Left, center, right)
• Choose text color, rollover color, background
  color (may need to match page color)

68
Flash text (cont)

• Type text into text box (check show font box
  for preview)
• Browse or type address of link
• Browse to folder to place images (images folder
  is good choice)
• Default is current page folder
• Name it something memorable (NOT text1.swf)
• OK, click Play in PI to watch rollover effects
• Be sure and click Stop when done

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
Creating Flash buttons

• Insert, Interactive Images, Flash button, or
• Use objects panel Insert Flash button button
• Dialog box appears
• Browse through, lots to choose from
• Arrows
• Buttons
• Buttons with room for text
• Sample box previews behaviors (rollover, l-click)

71
Flash buttons (cont)

• Get more styles connects to website with more
  stuff
• If text button, 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

72
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

73
Navigation bars

• What is a navigation bar?
• Set of buttons to guide people around site
• You need the buttons first
• Many sites to choose from (search engine - html
  buttons)
• Good for standard buttons (forward, back, home,
  email)
• Adding text can be difficult without special
  software
• Photoshop is fast and easy button-maker, but
  expensive

74
Inserting a navigation bar

• On objects panel, click Insert Nav bar button
• 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)

75
Nav bars (cont)

• 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

76
Nav bars (cont)

• 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

77
Text
78
Importing text from Word

• Cut and paste to bring selected text from word
• Big four text shortcuts
• Copy (Ctrl C)
• Cut (Ctrl X)
• Paste (Ctrl V)
• Select all (Ctrl A)
• R-click is even faster

79
Importing text from Word (cont)

• For entire documents
• Write it in Word
• File, Save As HTML document
• Cut and paste document into site as web page
• Commands, Clean up Word HTML
• Also works in Wordperfect, Excel, PowerPoint
• May need to do a little hand-coding
• Bulleted lists can copy strangely
• Tables dont always copy well

80
Absolute font sizes

• Even absolute font size is relative
• Dependent on user defaults
• 7 graduations of size
• Dependent on browser setting base size (usually
  12 pt.)
• Default 12 point text size 3
• 14-24 point text sizes 4-7
• 9-10 point text sizes 1-2

81
Changing absolute font size

• Text, Size, choose number (1-7), or
• Property inspector size dropdown, or
• Select text, R-click, size
• Choose 3, size will not change (3 is default)
• To change existing text
• Highlight
• Change size in PI

82
Relative font sizes

• Subtracts or adds from browser default size
• Text, Size change
• 1 to 4 to increase size
• -1 to -3 to decrease side
• Property inspector will take relative and
  absolute sizes
• R-click on text, Size menu will show relative and
  absolute

83
Setting base font size

• Again, default is 3
• To change, go into code (change view)
• Look for ltbodygt tag
• Right after it, ltbasefont sizengt
• N is between 1 and 7
• Save file
• Changes WONT show in Dreamweaver window

84
Text styles

• Two kinds
• Physical
• Exact instructions italics, bold
• Logical
• Suggests an attribute, lets browser decide
• e.g. - Strong emphasis, usually bold, but not
  always
• Good for text-to-speech

85
Physical styles

• Bold (Select text, click B icon, or Ctrl b)
• Italics (Select text, click I icon, or Ctrl i)
• Underline (Select text, Style, Underline)
• Be careful - underline implies a text hyperlink
• Strikethrough, subscript , superscript, teletype
  in Text, Style menu

86
Logical styles

• Found in Text, Style
• Emphasis - importance
• Strong emphasis - strong importance
• Others are mostly scientific, from early days of
  the web
• Code, Variable, Sample, Keyboard, Citation,
  Definition

87
Fonts

• Default defined by user browser (usually Times
  New Roman)
• Specify your own, but user has to have it
  installed
• Dreamweaver fonts are pretty universal
• Font combinations are first choice, second
  choice, third choice presets
• e.g. - Veranda, Helvetica, Ariel
• You can create your own (Text, Font, Edit font
  list)
• Add fonts from Available fonts box on right)
• Absolutely have to have a font - use Flash text

88
Text color

• Default color set in Modify, Page Properties
• Specific text Color changes
• Select text
• Select color in color box

89
Special characters

• Choose insertion point
• Insert, Special characters
• Choose character, code will appear
• Also use characters category in objects panel
• , lt, gt require special code because they are
  already coding marks
• Just type them
• Dreamweaver writes code automatically
• Not considered special characters

90
Find and replace

• Similar to other Find and replace functions
• Search current document, folder, entire site
• Match case for upper and lowercase matches
• Whitespace differences top hat vs. tophat
• Search for specific tags and code as well

91
Spellcheck

• Pretty standard tool
• Text, Check spelling

92
Paragraphs, Headings, Block formatting
93
Paragraphs vs. line breaks

• All text will auto wrap
• Paragraphs separated by line break, blank space
  (no indent)
• Hit Enter
• Line break has no blank space
• Hit Shift Enter, or
• Use Characters section of the objects panel, line
  break icon

94
To apply paragraph format to existing text

• Select text
• click Dropdown format box in Property Inspector
• Highlight paragraph format

95
Headings

• Headings are like headlines for paragraphs
• Larger, and in bold
• Six levels, 1 is largest, 6 is smaller than
  default body text
• Click within line you want to format as a heading
• Use format dropdown in Property Inspector

96
Preformatted text

• Pasting text will not retain formatting
• To retain formatting
• Select insertion point
• Choose Preformatted from property inspector
  format dropdown
• Paste the text

97
Formatting lists

• Two common kinds
• Ordered (numbered)
• Unordered (bulleted)
• Select the text list (separated by paragraphs)
• Hit the ordered or unordered button on the
  Property Inspector
• Numbers or bullets appear, indents are added,
  blank spaces disappear
• Enter twice to end list

98
Definition lists

• Definition is third kind of list
• Indent of text following list item (doesnt have
  to be definitions)
• Press enter after every term and definition
• Indents will alternate
• Text, Lists, Definition lists

99
Aligning paragraphs

• Select text block
• Paragraph, heading, list, or page
• Use alignment button on property inspector

100
Indenting text

• No tabs in HTML
• No paragraph indents either
• Non-breaking spaces can be used
• Select text
• Use Indent button in Property Inspector
• Use several times for more indentation

101
Outdenting text

• Yes, outdent is an actual word
• Select text
• Use outdent button

102
Nonbreaking spaces

• Spacebar only works for one space
• Tabs only work for one space
• Nonbreaking spaces (nbsp) are a solution
• Select insertion point
• Insert, Special Characters, Nonbreaking space, or
• Use characters in objects panel, or
• Shift Ctrl spacebar

103
Ruled lines

• Horizontal lines to break sections of the page
• Select insertion point
• Insert, Horizontal Rule
• Will run width of page, centered
• To manipulate size
• Select rule
• Use Property inspector for height, width
• Align with drop down menu
• Remove shading by de-selecting box

104
Tables
105
Tables

• Simple tables used to present information
• Layout tables are way to structure a web page

Logo here
Webpage title here
106
Layout tables

• Tables are complex and repetitive to code
• Layout view builds them automatically
• One of the coolest feature of Dreamweaver

107
Setting up simple tables

• Three steps
• Insert the table
• Modify the properties (change size, color,
  layout)
• Insert content into the cells

108
Layout view vs. standard view

• Bottom of the objects panel has layout grayed
  out
• Below it, under view, standard button is
  pressed in
• Click layout button
• Layout buttons come to life
• Table buttons gray out in main area

109
Layout view vs. standard view (cont)

• Layout/Standard views are mutually exclusive
  tools
• Cant insert tables in layout view
• Cant draw layouts in standard view
• Need to toggle back and forth with view button

110
Inserting a simple table

• Use Standard view
• Click Insert table button in objects panel
• Number of rows and columns
• Width - percentage or pixels
• Border size
• Cell padding - insides of cells
• Cell spacing - borders between cells

111
Drawing a layout table

• Good idea to sketch out your layout first
• Start with empty page
• Use layout view
• Click the cell (left button), or the table (right
  button)
• Click and drag to draw box
• If cell, will be inside table (they dont hang in
  space)
• If table, will have no cells
• Need to add them with cell button
• Important - Cells cannot overlap!
• Tables can be drawn inside tables

112
Selecting elements within a table

• Must select before you can modify
• To select entire table (either view)
• Click within the table, then
• Click lttablegt tag in tag selector
• To select rows or columns (standard view)
• Hold down L-button and drag, or
• Move cursor over border of top or side
• Black arrow appears
• Click to select entire row or column

113
Selecting elements within a table (cont)

• To select cells
• Click inside it (standard view)
• Click border (layout view)
• Click inside cell, then on lttdgt (either view)
• Hold down shift to select multiple cells
• Hold down Ctrl to select non-contiguous cells
• Table borders are green when selected, cell
  borders are blue when selected (layout view)

114
Resizing cells

• Standard mode
• Click and drag lines
• Layout mode
• Select cell
• Type in values

115
Adding content to cells

• Click in cell to select
• Tab to move
• Shift tab to move backward
• Text
• Click in cell and start typing
• Use Property Inspector to manipulate attributes
• Images
• Use Insert Picture button in objects panel
• You can select and drag text and images into
  cells

116
Moving a layout element

• Select layout cell or layout table
• Click the outside edge
• Click and drag

117
Adding columns and rows

• Go to standard view
• Select the entire table
• Property inspector will display table properties
• Type new number of rows or columns, or
• Select adjacent Row or column
• Modify, Table, Insert Rows or Columns
• Choose number and position

118
Deleting rows and columns

• Place insertion point inside row or column
• Modify, Table, Delete Row (or Column), or
• Select table, select entire row or column
• Click the delete button

119
Resizing entire table

• Select table
• Click and drag sizing handles (works best in
  standard view), or
• Use Property Inspector
• Standard - pixel or percentage, type in values
• Layout - Fixed or autostretch

120
Merging and splitting cells

• Standard view only options
• Merge
• Select table
• Click and drag to select cells you want to merge
• Click merge cells button in Property Inspector
• Split
• Select table
• Click split cells button in PI
• Choose Rows or columns
• Choose number

121
Header cells

• Select the cell, row, or column
• Check the Header box
• Text will be centered and bold

122
Aligning tables and content

• Table alignment
• Select table
• Property Inspector align dropdown
• Default, left, center, right
• Content alignment
• Select cell
• Default is left (horz) and middle (vert)
• Use Horz and Vert dropdowns to change it

123
Table spacing

• For separating elements more cleanly
• Cellspace is space between cells
• Cellpad is space between cell wall and content
• Select table
• Use Cellspace and cellpad in Property Inspector

124
Table borders

• Default border is 1 pixel in standard view (none
  in layout)
• Use Standard view
• Define border size and color in Property
  Inspector

125
Coloring tables

• You can color any element within a table
• Select table, cell, column, or row
• Select multiple cells with click and drag
• Use the Bg color box in the Property Inspector
• Can use pre-formatted designs
• Commands, Format table

126
Background images

• Dont recommend them
• If used dont overwhelm the table
• Select table, cell, row, or column
• Browse to file in Bg box
• Will tile smaller images
• Different browsers treat it differently

127
Autostretch width settings

• Standard has pixel and percentage width settings
• Layout has fixed width and autostretch
• Autostretch allows a blank stretchy part
  between elements
• Used to accommodate varying browser sizes

128
Autostretch (cont)

• Autostretch is layout-only option
• Click on layout tab, click column tab, select
  autostretch
• Tab will change to wavy line
• Youll be asked about a spacer gif
• A transparent image to fill in the stretchy part
• Choose your own, or have DW match it
• Store it in images folder

129
Fixed width settings

• Exact widths important for images, navigation
  bars
• Click on layout tab, click column tab, select
  fixed width
• Column will size to size of image
• Tab will change to number of pixels

130
Importing and inserting tabular data

• Save table as HTML (Excel, Word) and copy, or
• Export data as .txt file with delimiters (commas,
  tabs, spaces)
• Insert, tabular data (or use object panel icon)
• Browse to file
• Select delimiters
• Set size or fit to data
• You can change it later
• Cell padding and spacing
• Set column headings, borders

131
Sorting Data

• Select table
• Commands, Sort table
• Select column
• Select alpha or numeric
• Select ascending or descending
• Secondary sort if necessary
• Select Headers, formatting checkboxes

132
Frames
133
Frames

• Divide pages into sections
• Very popular design
• Not supported by all browsers (but most)
• Always need non-frame equivalent
• Allows static element as they navigate within
  site
• Great place for nav bar or button set

134
Frames and Framesets

• Each frame is a separate HTML document
• Page elements (frames) are held together in a
  frameset
• Frameset is your main document

135
Splitting your page into frames

• Four ways to do it
• Start with a blank page
• Modify, Frameset
• Split frame left (most common), right, up, down
• Drag frame onto page
• View, Visual aids, Frame borders
• Go to edge, drag frame onto page

136
Splitting your page into frames (cont)

• Insert, Frames
• Choose one of 8 layouts
• Objects panel, Frames category
• Same 8 layouts
• Drag icon onto page
• Drag icon onto preexisting frame to re-split
  (nested frameset)
• Save it now!

137
Selecting frames, framesets

• Sometimes hard to know where youre working
• Click left or right frame to insert content
• Alt click to select frames themselves
• Youll see Property inspector change to reflect
  this
• Click on border to select entire frameset
• Property inspector will show frameset thumbnail
• Can also click ltframesetgt in lower right

138
Setting Column and Row sizes

• In frameset, not frame, because theyre
  interrelated
• Select frameset
• Select frame in layout thumbnail on right
• Select value/units
• Pixels - to set a exact size (good for nav
  element)
• Percentage - percentage of window/frameset size
• Relative - flexible within frameset, dependent on
  other values
• Best strategies for 2 frame pages
• 2 percentages (25 and 75), or
• 1 fixed (pixel), 1 Relative

139
Setting content pages

• Add content as you would any page
• Select page, insert elements
• You can pull existing page into a frame
• Use SRC box to browse, type or paste location of
  page
• Type in full URL to display other internet page

140
Saving your work

• Multiple documents involved
• Saving individual frame
• Select frame
• Save with meaningful name (left.htm, main.htm,
  top.htm)
• Title in toolbar box is unimportant
• Saving the frameset
• Click on divider, or choose ltframesetgt
• This is the URL for the page (index.htm for main
  page)
• Title in toolbar box is important(will show in
  browsers)

141
Scrollbars

• May not need one on your computer, but will in
  another browser
• Reverse is also true
• Select frame
• Choose yes, no, Auto, default
• Yes and no should be used with discretion
• Auto will put in scrollbar if needed on user end
• Default uses browser settings (usually auto)

142
No Resize option

• General rule allows user to resize frames
• No resize box will not allow user to resize
  frames
• If one frame in no resize, so are adjacent
  frames

143
Frame borders

• Usually a good idea to define page for user
• Select frameset or frames
• Yes - choose width and color (default is 5)
• No - no frames will show
• Default - uses browser settings (usually displays
  borders)
• If adjacent frames have differing border
  settings, off usually overrides on
• You can have no borders, but display a width
  (will create blank stripe)

144
Frame margins

• No frameset margins
• Set margins for each frame
• Width - left and right margins
• Height - top and bottom margins

145
Naming frames

• Individual frame names unimportant in toolbar
  title
• Very important in Property Inspector
• Used to target links
• Select frame, type in meaningful name (mainframe,
  leftframe, topframe)

146
Targeting links

• This is important!
• Generally, when you click a link, new page opens
  in same window
• Not true in framesets
• Set new target
• Names you gave in PI will show
• Pick specific frame for each link
• Link opens in specified frame
• TEST ALL YOUR LINKS!!!

147
Other targets

• _blank - page opens in new window (annoying!)
• _top - replaces content of current page
• _parent - for nested framesets, opens in parent
  frame
• _self - opens in same frame as link

148
No frames content

• You need a no-frames alternative
• Create entirely new no-frame site, or
• Modify, Frameset, Edit No-frame content
• Brings up blank screen
• Start from scratch, or
• Copy code

149
Copying code

• No-frame window
• Use code view
• Delete all between ltnoframesgt and ltnoframesgt
• Frame window
• Use code view
• Copy everything from ltbodygt to lt/bodygt
  (inclusive)
• Add any other elements (like nav buttons)
• Check that
• Only one set of ltbodygt tags
• No lthtmlgt tags within ltnoframesgt tags

150
Frames/no frames alternative

• Index page gives them frame and no frame
  choices
• From there, link to appropriate front page
• Can use similar secondary pages