Using Dreamweaver MX 2004

1
(No Transcript)
2
(No Transcript)
3
UsingDreamweaver MX(2004)

• Michael J. Fimian 2005Providence College

4
Contact Info

• Dr. Michael J. Fimian
• MFimian_at_Providence.edu
• Instructional Technology
• Development Program Feinstein 113Office Hours
  100-300
• 865-1832

Or ITDS
He coordinates the ITDP
Hes the Instructional Technology Design
Specialist
5
Workshop Goals

• Workshop Goals by Week
• Week 1 Intro to Dreamweaver MX
• Week 2 Planning and defining your web site
• Week 3 Working with text and tables
• Week 4 How to get around
• links, navigation, and structure
• Week 5 Using Images in Dreamweaver
• Week 6 How to reuse information
• templates, assets, and libraries (oh my)
• Week 7 Publishing your site to the web
• Have a Bit Of Fun

6
Introduction to Dreamweaver MX

• Welcome to Dreamweaver MX 2004!
• During the course of this presentation, well
  show you how to use Dreamweaver to create the web
  site of your dreams!
• Or somewhat close to that

7
What Well Cover in this Session

• Section Contents Whats In this Section?
• What is Dreamweaver MX?
• How do you get it?
• How do you install it?
• How do you open it?
• Overview of the Interface
• Single screen
• Document Window
• Property Inspector
• Insert Bar
• Toolbar
• Panels and Panel Groups
• Menu Bar

8
What is Dreamweaver MX?

• Dreamweaver is a Macromedia application that
  helps you create your very own web sites!
• Click here for a somewhat advanced overview

9
DreamWeaver MX Showcase

• Examples of sites created with Dreamweaver MX
  The Museum of Modern Art

www.moma.org
10
DreamWeaver MX Showcase

• Entertainment Tonight Online

www.etonline.com
11
DreamWeaver MX Showcase

• The Instructional Technology Development Program
  (ITDP) _at_ PC

http//itdp.providence.edu
12
DreamWeaver MX Showcase

• Phantom of the Opera The Movie (Warner
  Brothers). A media rich site

http//phantomthemovie.warnerbros.com/
13
DreamWeaver MX Showcase?

• FromParis An amazing collection of brilliant
  graphics and panoramas taken by someone who
  really loves his city

http//www.fromparis.com/
14
DreamWeaver MX Showcase?

• BecomingHuman.org an overview of human
  evolution. Clcik on The Documentary to see a
  Flash movie

http//www.becominghuman.org/
15
DreamWeaver MX Showcase?

• The Vatican Viually rich yet simple site good
  use of alternate menu structures

http//www.vatican.va/phome_en.htm
16
DreamWeaver MX Showcase?

• Realizing the Dream Nonviolence or
  Nonexistence. nuff said.

http//www.kingian.net/king_flash.htm
17
What is Dreamweaver MX?

• Example of a site NOT created with Dreamweaver MX

I think you hit the center of the earth before
you come to the bottom of this page. John C.
Dvorak
Winner of the Lousy Design of the Year Award
http//www.rstolley.com/
18
How do you get Dreamweaver?

• Contact Computer Services and Telecommunications

www.providence.edu/StudentLife/ServicesforStude
nts/CST/
19
How do you install Dreamweaver?

• 1.) Insert CD into CD-Rom drive and select
  Dreamweaver MX.

20
How do you install Dreamweaver?

• 2.) Follow the directions given to you by
  Macromedia. You will have to wait for the
  InstallShield Wizard to extract the files needed
  to install Dreamweaver.

21
How do you install Dreamweaver?

• 3.) Click Next to begin installation.

22
How do you install Dreamweaver?

• 4.) Click Yes to agree to the licensing
  statement.

23
How do you open Dreamweaver?

• Click on Start Programs Macromedia
  Macromedia Dreamweaver MX

24
Overview of the Interface

• Heres the Dreamweaver Interface

25
Overview of the Interface

• And Thje default view is called the Design
  View. This is the WYSIWYG prespective. This is
  the window youll use most of the time

• Main work area
• Create and edit files
• There are three views
• Design View
• Code View
• Split Screen

Design View
26
Overview of the Interface

• There are two other views of the Document Window

Code View Shows you all the actual HTML code
you may use this view from time to time after you
get more experienced with Dreanmweaver.
Split Screen View Shows a bit of both the
WYSIWIG and the code windows. Ideal if you
select an object in WYSIWIG, youll see the
corresponding code highlit.
27
Overview of the Interface

• Property Inspector at the bottom. Lets you
  assign and change the properties of any object
  youve selected on the screen.

• Properties of selection
• Size, text, alignment, etc.
• Changes depending on selection
• Object
• Text

28
Overview of the Interface

• Insert Bar Allows you to insert content such as
  buttons, links and graphics

29
Overview of the Interface

• Menu Bar Toolbar

The menu bar contains standard commands similar
to any other application.
The tool bar lets you choose the way you view
your document, insert a title, preview your page
in a browser and access reference information.
30
Overview of the Interface

• The Menu Bar

31
Overview of the Interface

• Panels and Panel Groups

• Can be hidden, expanded or moved to suit your
  preference.
• Displays file and asset information.

32
Online Resources on Angel

• Dreamweaver Users Group on Angel
• As a part of this workshop, weve been collecting
  numerous resources and placing them on Angel. If
  youre a registered attendee for the Dreamweaver
  workshop sequence, weve enrolled you in the
  online users group.
• If not, see Michael Fimian (x1832 or
  MFimian_at_providence.edu) and ask him to enroll
  you!
• Go to
• http//angel.providence.edu
• and look for the Users _at_ PC Dreamweaver group.

33
Planning a Site

• Planning a Site
• During the second session, well be taking a
  look at the ways in which sites are organized
• First, some basic concepts, then a bit of
  procedural info about defining a site in
  Dreamweaver

34
What Well Cover in this Session

• Section Contents Whats In this Section?
• Basic Concepts
• Defining a site in Dreamweaver

35
Planning a Site

• All Web sites are constructed based on a
  hierarchical organization of your content.
• The top-most page is called the Home Page all
  other pages are linked to this page.
• Dreamweaver will ask you for this page when you
  define a site

HomePage
FirstLevel
Top-Most
SecondLevel
ThirdLevel
Bottom-Most
36
Planning a Site

• Site Definition Step 1
• In Dreamwever, click Site New Site.

37
Planning a Site

• Site Definition Step 2
• Choose the Advanced tab.

You can call this anything you want.
This will change depends on your folder on your
harddrive. In the classroom, this folder is
D/yourlastname.
These have to be set as is
38
Planning a Site

• Site Definition Step 2b
• This is an example of the folder structure weve
  established on the server all your files will go
  into your folders this way, you wont over-write
  other peoples folders.

Need a Graphics folder
You will end up overwriting this file.
39
Planning a Site

• Site Definition Step 3
• Remote Info

IF you are using a firewall at home, you may need
to set some of these.
Must be mfimian
See Michael for this
Checking this box, will save you a lot of time!!
40
Planning a Site

• Site Definition Step 4
• Testing Server

yourlastname your last name on another folder
that Michael has set up for you.
Must be Mfimian
See Michael for this
41
Planning a Site

• Site Definition Step 5
• Cloaking

Already checked
42
Planning a Site

• Site Definition Step 6
• Design Notes

Already checked
43
Planning a Site

• Site Definition Step 7
• Site Map Layout

This folder wont exist on your hard drive all
your local work will be done in this folder and
then sent up to the server.
44
Planning a Site

• Site Definition Step 8
• File View Columns

45
Planning a Site -- Using Templates

• Whats Next?
• If you want to skip some of the basics, and go
  right to a duscussion about building nice looking
  and usable sites, we can take a quick look at
  pages made with templates.
• Clcick the Using Templates button to the left
• With a template, you can signiciantly enhance the
  Look and Feel and sophistication of your web
  site from the outset.
• Macromedia offers a number of templates free,
  online at http//www.macromedia.com/software/dre
  amweaver/download/templates/

46
Working with Text

• Working with Text
• A single picture may say a thousand words, but
  youll still need words to convey much or even
  most of your information.

47
What Well Cover in this Session

• Section Contents Whats In this Section?
• The role of text on the web page
• How to enter text
• How to alter text attributes
• Font face Arial, Times New Roman, Courier, etc
• Font style regular, italics, bold, underlined
• Font alignment left, centered, right
• How to list text Bullets, lists
• How to use Tables to place text

48
Text on Web Pages

• Despite the graphic nature of the internet, the
  majority of information that is conveyed is done
  so in terms of text.
• When neatly aligned and placed, text can enhance
  a page.
• You can format text with only a limited number
  of fonts these are generally the most readable.
  Specialized fonts are generally nested in
  graphics.
• Text looks different in different browsers you
  may want to check both MS Explorer and Netscape.
• In Dreamweaver, text can be placed directly onto
  a page, or it can be inserted into a table.
  Structured formatting table.

49
Entering Text on a Page

• First, well look at how to enter plain text
• Open Dreamweaver
• Create a new page
• File New
• In the New File Dialog, choose the General Tab,
  then click on Basic Page HTML.
• Click on the Create button.

50
Entering Text on a Page

• Now that a new page has been created, lets add
  some text
• Click on the surface of the page
• Type anything you want
• Press Enter
• Type another line of text
• Press Enter
• A Space is added between the twolines of text.
  If you dont want asmuch white space, do a
  CTRL-Enter
• instead.
• CTRL-Enter single spacing
• Enter double spacing

51
Changing Text Color

• Now that you have some text, lets change its
  color
• 1. Highlight the text you want to color
• 2. Choose the color picker from the Properties
  Dialog box click on thedesired color.
• 3. Double check the color of yourtext alter,
  if desired.

1
2
3
52
Changing Font Size

• You can also change the relative size of your
  font.
• Hihghlight your text
• From the Properties Dialog box, choose the Font
  Size from the Font size picklist.
• The larger the number, the larger the text
• The smaller the number, the smaller the text.

1
2
3
53
Underline, Bolden, Italicize Text

• Another attribute that can be changed is the font
  style.
• You can see the formatting options that
  Dreamweaver offers by
• Clicking Text Style
• Propert Inspector
• Formatting Styles
• Bold
• Underline
• Italicize
• Strikethrough
• Emphasis
• and more
• Note Be careful when underlining, most visitors
  will think the text is a hyperlink!

54
Underline, Bolden, Italicize Text

• Another attribute that can be changed is that of
  text format.
• As with any word processor, you can bolden,
  italicize, and underline text in Dreamweaver.
  Note use underlining sparingly. The convention
  for hyperlinks on the web is an underlined word
  or phrase if you underline a word that your
  users may click on -- but it brings them nowhere
  -- youll be needlessly confusing them
• Underline some text
• Click on the Bold iconon the Properties Dialog
• Review your text repeat foritalics and
  underlines

55
About Aligning Text

• You can align your text in Dreamweaver the
  following ways
• Choose Text Align from the File Menu
• Property Inspector icons
• There are four types of alignment
• Left (default)
• Right
• Center
• Justify (full)

56
Aligning Text

• Text can be aligned to the left, to the right, or
  centered Note If the text is placed in a cell
  of a table, some of the properties of the cell
  may overrule the alignment of your text. In this
  case, youll need to change the alignment
  property of your cell
• Underline some text.
• Click on the Align Center iconon the Properties
  Dialog
• Review your text repeat for right and center
  alignment

57
Creating Lists

• There are three (3) kinds of lists in
  Dreamweaver
• Bulleted
• Numbered
• Definition
• 1) Bulleted
• To create a bulleted list, click the Bulleted
  List (unordered list) button located in the
  Property Inspector.
• To complete your list, hit enter twice and the
  bullets will no longer appear.
• Example

58
Creating Lists

• 2) Numbered Lists
• If you would like to create a numbered list,
  click the Numbered List (ordered list) button
  located in the Property Inspector.
• To complete your list, hit enter twice and the
  numbers will no longer appear.
• Example

59
Creating Lists

• 3) Definition Lists

• Type the word you wish to define followed by
  Enter.
• On the next line, type its definition.
• Highlight your complete list.
• Select Text List Definition List from the
  Menu bar.
• Your list has now been formatted.
• Example

60
Working with Graphics

• Graphics are a necessary part of any website.
  Fireworks and Dreamweaver work together to help
  you create, edit, change and size images for the
  perfect web design.
• These are some of the basic topics we will be
  covering in todays session
• How to choose the image type?
• What is Fireworks?
• How to insert an image into Dreamweaver?
• How to use the Propert Inspector with images?

61
What Well Cover in this Session

• Section Contents Whats In this Section?
• Working with Graphics
• Learning Objectives What youll learn upon
  completing this section
• How to make your site more asthetically pleasing
  by using graphics

62
How to choose an image type?

• There are many different types of image files.
  You will probably use the first two types JPGs
  and GIFs -- in your webpage
• JPEG
• Developed by the Joint Photographic Expert Group
• Perfect file format to be used on the Internet
• Supports millions of colors
• Should be used for any image needing more than
  256 colors

63
How to choose an image type?

• 2. GIF
• Graphics Interchange Format
• They make up a bulk of Internet graphics
• Support up to 256 colors
• Have the option for transparency
• Perfect for animation, bullets, and buttons

• 3. PNG
• Portable Network Graphic
• Fireworks default image type
• Can support up to 32-bit color
• Allows transparency
• NOT all browsers display PNG files
• Best used within Fireworks

64
How to choose an image type?

• 4. TIFF
• Most common file type for printed media
• They are a cross-platform for people using both
  Windows and Mac systems
• Display as bitmaps when opened in Fireworks
• NOT supported on the Internet
• Must be converted to GIF or JPEG

• 5. BMP and PICT
• Operating system specific BMP on Windows and
  PICT on Mac
• Can be universally read by applications on their
  corresponding systems
• BMP often used as wallpaper on Windows systems

Examples
65
Inserting Images in Dreamweaver

• Dreamweaver makes this process very easy. Before
  you start, however, It is important to make sure
  that the images you want to use are located in
  the folder youre using for your website. If
  they arent, you will get constant reminders to
  copy them there.
• Step 1 Open a blank document or one that you
  would like to place an existing image.
• Step 2 Decide where to put the image place
  the insertion point in your Dreamweaver page
  where you want the image to appear

66
Inserting Images in Dreamweaver

• Step 3 Show the common panel on the insert bar
  by clicking its tab.
• Step 4 Open the Select Image Source Dialog Box
  by clicking the Image icon on the common panel.

67
Inserting Images in Dreamweaver

• Step 5 Browse to the image you want to insert.
  Click OK to continue. If you are working on a
  new page you will prompted to click OK a second
  time.
• Step 6 The image is placed on the page at the
  insertion point. Click the image once, and then
  view the Property Inspector to see the
  information about the image you inserted.

68
Working with Tables

• Tables add visual structure and order to your web
  page.
• Without them, all your text would run on and on,
  pictures would careen into one another, and your
  look and feel would look awful and feel worse.
• Lets take a look at what tables can do for us,
  and the various ways in which we can use tables.

69
Working with Tables

• In this section, we will learn how to use tables.
• What are tables and why should we use them?
• How to insert and setup a table?
• How to edit a table using the GUI?
• How to use the Properties Dialog to work with the
  contents within each cell?

70
What are tables? Why use them?

• Tables are an organizational tool. They allow
  the user to
• Logically organize and display data in columns
  and rows
• Control where objects appear on their page

71
How to insert a table?

• Step 1
• Place your insertion point where you want the
  table to appear.
• Step 2
• Click Insert Table from the Menu toolbar.
• Hit Ctrl Alt T on your keyboard
• Select the Table icon from the Insert Bar

72
How to insert a table?

• Step 3
• The insert table dialog box will appear.
• Enter the number of rows and columns you would
  like to have for your table.
• Insert the width of the table.
• Insert the border size of the table.
• Click OK

Step 4
73
Editing your table using GUI

• Using your GUI (or Graphic User Interface)
• You can also change the width and the height of
  your table by dragging the edge of your table,
  either from right to left, or up and down.
• You will notice that once youve dragged your
  table, the values of your table width and height
  in the Property Inspector have now changed.

74
Adding/Removing Rows Columns

• If after youve inserted your table, you decide
  to add or remove a row or column
• Right-click on a table cell
• A context menu will appear
• Select Table
• Select the option you desire
• Insert row
• Insert column
• Delete row
• Delete column
• Dreamweaver will automatically insert or delete
  the column or row

75
Templates

• Just a reminder
• Check out the templates available on our Angel
  site
• Users _at_ PC -- Dreamweaver 
• Content section
• Template Central folder

76
What Well Cover in this Section

• Reusing Information
• Assets
• What are assets
• Why are they useful
• How to use the Assets Panel
• How to use Assets
• How to reuse Favorite Assets
• How to manage Favorite Assets
• Libraries
• How to use the Library

77
Reusing Information

• Dreamweaver lets you use information more than
  once.
• Designed to make your life easier!
• This is made possible through the use of
• Templates
• Assets
• The Library
• Dreamweaver stores all the element information
  in the Assets Panel.
• This gives you a single resource for locating
  and reusing the elements in your site.

78
The Assets Panel

• The Assets Panel
• Lets you organize and display all the different
  elements in your site.
• Images
• Colors.
• URLs.
• Flash..
• Shockwave
• Movies
• Scripts
• Templates..
• Assets relate to the whole site not just the
  current document.

79
How to Use the Assets Panel

• Show the Assets Panel
• Click the Assets tab in the Files panel group to
  display the Assets panel or hit F11 on your
  keyboard.
• Create a Cache
• The site cache must be enabled or else you will
  be prompted to refresh the local files.

80
How to Use the Assets Panel

• 3. View the Category Types
• Category icons appear on the right side of the
  Assets panel.
• 4. Show Assets in a Category
• Click the appropriate category icon.
• You can reorganize the list of assets
• Alphabetically by name
• Size
• File type
• Value

81
How to Use the Assets Panel

• 5. Preview an Asset
• Select it and look in the Preview pane at the
  top of the Assets panel.
• 6. Find an Asset You Have Used
• DW can display a particular asset in the Site
  Files window, showing you which folder contains
  the asset file.
• Right-click the asset name in the Assets panel to
  display the context menu.
• Choose Locate in Site form the menu to open the
  Site window with the selected asset highlighted.
• Note this feature does not find the HTML files
  containing the asset and does not find colors or
  Web site addresses since they do not exist as
  objects in their own right.

82
How to Use Assets

• Copy an Asset to Another Site
• Select the asset you want to use in another site
  and right-click.
• Choose Copy to Site and the site to which you
  want to copy the asset to from the submenu.
• Note the other site must already be defined.
• Copy Multiple Assets
• Click to select the first asset. Hold down the
  Shift key as you click other contiguous entries.
• For separate entries, hold down the CTRL key.
• Right-click on a selected asset and choose Copy
  to Site the specific site name.

83
How to Use Assets

• 3. To Insert an Asset
• Click to position the insertion point in the
  document window.
• In the Assets panel, select the asset you want to
  insert.
• Click the insert button at the bottom of the
  Assets panel. The selected asset appears in the
  document window at the insertion point.
• 4. Apply a Color to Text
• In the document window, highlight the text for
  which you want to change the color.
• In the Assets panel, click the Colors category
  icon.
• Select the desired color form the list, and click
  Apply.

84
How to Use Assets

• 5. Insert a Link
• In the document window, select the text or image
  you want to use as a link.
• In the Assets panel, click the URL Link category
  icon and then choose the URL to which you want to
  link.
• Click Apply to add this link to the selected text
  or image.

85
How to Reuse Favorite Assets

• You can save some of your favorite assets into a
  special group so that theyre easy to locate and
  use.
• Add to Favorites
• Click the appropriate category icon.
• Select the asset you would like to save as a
  Favorite.
• Click the Add to Favorites icon in the
  bottom-right corner of the panel. The selected
  asset is saved into your Favorites list for
  the current category.
• A message will confirm the entry. Click OK.

86
How to Reuse Favorite Assets

• 2. Look at the Favorites
• The Assets panel has 2 views
• Site view shows all the assets in the selected
  category for the entire site.
• Favorites view shows only the assets that you
  have specifically identified as favorites in the
  selected category.
• Click the radio button for the view you want.
• 3. Give a Favorite Asset a Nickname
• By default DW displays your assets according the
  their filenames.
• In Favorites view, each asset has a nickname
  (filename minus file extension). You can change
  this to anything youd like.
• Click the name of an asset youd like to rename.
  The name bar becomes editable.
• Type the nickname you want to give this asset and
  press Enter.

Note this can be handy if you want colors as
favorites. You can name them blue, red, and so
forth instead of seeing the hexadecimal code.
87
How to Manage Favorite Assets

• Managing your assets makes managing the whole
  site a lot easier and is a good habit to get into
  from the start.
• Group Your Favorites
• You can create subgroups within the Favorites
  view for any category.
• Make sure you are in the Favorites view by
  clicking the Favorites radio button.
• Click the New Favorites Group icon at the bottom
  of the panel. A new folder icon is added.
• Name the new folder and press Enter.
• Add Assets to the Group
• Select the asset(s) you want to add to the new
  group.
• Drag and drop them into the group (folder) you
  created.
• Remember you can select multiple assets by using
  ShiftClick or CTRLClick.

88
How to Manage Favorite Assets

• 3. Remove an Asset from Favorites
• Select the asset you want to remove.
• Click the Remove from Favorites icon at the
  bottom of the panel.
• The asset is removed from your Favorites list,
  but can still be found in the Site list for that
  category.
• Helpful Hint One of the advantages of the
  Favorites view is that you can add certain
  elements to the list that you have not yet used
  in your site. You can do this only in Favorites
  view because site view is created from the cache
  and contains only those elements that DW finds in
  your directories
• If you have decided on certain elements to use
  in your site but havent yet placed them in the
  site structure, youll find it handy later to go
  ahead and add these elements to your Favorites
  now.

89
How to Use the Library

• The Library stores elements, such as text and
  images from your Web pages that you are likely to
  reuse in your site, or that might need to be
  updated frequently.
• If, after you have inserted a library item onto
  several pages in your site, you then edit and
  save the original library item, all the pages
  that contain the library item are automatically
  updated.
• If you just used the Assets panel to insert an
  item onto your pages, youd have to update each
  instance of the item when it changed.
• Adding a Library Item
• In the main document window, select the page
  element that you want to use as a library item.
• Click the Library category icon to open the
  Library.
• Drag and drop the selected element from the
  document window to the Library window.
• Give the element a useful name in the Library by
  typing into the name box.

90
How to Use the Library

• 2. To Insert a Library Item
• Click in the document window to position the
  insertion point where you want the item to
  appear.
• Click the Insert button at the bottom of the
  panel to place the selected item in the current
  document.
• 3. To Edit a Library Item
• Double-click on the item you wish to edit in the
  Library. The item will open on a blank screen.
  (The title bar indicates its a Library item)
• From this screen you can edit the item as you
  normally would.
• When you are done editing, Save the changes you
  have made.
• 4. To Delete a Library Item
• You can delete an item from the Library at any
  time. This doesnt remove the element from any
  page on which you have inserted it.
• In the Library category of the Assets panel,
  choose the item you want to delete.
• Click the Trash Can icon t the bottom of the
  panel,
• DW prompts you to confirm that you want to delete
  this item. Click Yes.

91
What Well Cover in this Section

• Links, Navigation and Structure
• Why use links?
• How to create hyperlinks
• Text
• Image
• Linking within your site (Internal links)
• How to edit or delete hyperlinks
• E-mail hyperlinks
• Anchors
• Jump Menus
• How to follow/check hyperlinks

92
Links, Navigation, and Structure

• Hyperlinks make up the information superhighway!
• Able to move from page to page, site to site
• When do you know you are over a hyperlink?
• No longer a linear media, but Hypermedia
• The user now has control over the sites and pages
  they look at.
• External link absolute link
• Allows you to move from site to site with the use
  of hyperlinks
• Internal link relative link
• Allows you to move from page to page within your
  own website

93
Planning Your Site

• REMEMBER to plan your site ahead of time!
• Use the old pen and paper to map out your site
  before adding links to your pages.
• RULE OF THUMB
• Links to major sites sections on all pages
• Links to subsections on relevant pages in the
  site i.e., The New York Times

94
Text Links

• The simplest way of adding a hyperlink is to cut
  and paste a text link directly into your web
  page.
• Step 1. Identify an Internet link (External
  link) highlight it.
• Step 2. Select Edit Copy from the main menu
• Step 3. Click on the page, or in a cell,
  wherever you want the link to go. Then, select
  Edit Paste. This is only half the process!

95
Text Links

• The simplest way of adding a hyperlink is to cut
  and paste a link directly into your web page.
• Step 4. Highlight the text you want to make
  hyperlinked.
• Step 5. In the Link field in the properties
  dialog, click your cursor in the field. Then,
  select Edit Paste. The link should appear in
  the Link field. Also, the link in your page will
  now be underlined and colored.

96
Text Links

• Another simple way of developing a hyperlink is
  to type some text and then add a link
  underneath it.
• This is particularly the case when you may have
  an extremely long and often very ugly link
  that youd lie to use, but still hide. How would
  you like your site to have one of these?
• http//www.journeyed.com/cgi-bin/sgin0101.exe?UID
  2003110512332389GEN0GEN1GEN2GEN3GEN4GEN
  5GEN6GEN7GEN8GEN9index2.htmlTRAN85YT1
  44581646FNM00UREQA2UREQB1UREQC3UREQD4
• Aside from being pretty ugly, no one could type a
  link like this and get it all correct (except for
  maybe Adam Hauerwas). What to do?

97
Text Links

• What to do?
• Type a phrase or place a picture and then
  place the link underneath the selected object.
  Doing so is very similar to the process we just
  reviewed. In this example, well copy the link
  on the previous page, and place it underneath a
  text phrase. First, we need to copy it from the
  web site
• Then, we highlight a text phrase on a page in
  Dreamweaver then paste the link into the link
  field in the properties box

98
Graphic Links

• Want to use a graphic as a jump point? The
  process is identical to that we just used to lay
  a link underneath a text phrase.
• First, place a graphic on your web page
• In this case, we took and placed a
• graphic at random.
• Next, find a site that you want your user
• to jump to once they click on the graphic
• copy the URL. In this case, were
• going to jump to the Frank Lloyd Wright
• Foundation web site
• Finally, paste the link into the link field
• In the properties box for the graphic

99
Linking within Your Site

• You can also use the same process to link an
  object such as a text phrase or graphic to a file
  within your own site. This process is similar
  to, but slightly different from that which we
  just demonstrated.
• In this example, well link a graphic to an
  internal page.
• First, place a graphic on your web page
• In this case, we took and placed a
• graphic at random.

100
Linking within Your Site

• You can also use the same process to link an
  object such as a text phrase or graphic to a file
  within your own site. This process is similar
  to, but slightly different from that which we
  just demonstrated. In this example, well link a
  graphic to an internal page.
• Next, find the page that you want your user to
  jump to in your site once they click on the
  graphic instead of copying an URL, youll use
  the browse feature to find and link to a file
  that already exists on your site.
• Note The target file can be, but doesnt have
  to be, an HTM file it could be a PPT, and XLS,
  a PDF, or even an XYZ file

Click me
101
How to Edit or Delete a Hyperlink

• At some point in your work creating and
  maintaining Web pages, youll have to change or
  delete hyperlink information.
• For example
• The URL to an external Web site might change
• You decide to link a graphic to another page
  within your site
• Follow the next set of steps which explain how
  you can change the information associated with
  the link, or even delete the link entirely!

102
How to Edit or Delete a Hyperlink

• Step 1 Locate the Link to Change
• Find and select the text or image that contains
  the link you want to change.
• Notice that the current URL appears in the Link
  box of the Property Inspector.
• Step 2 Change the Link Information
• In the link box, type the updated link
  information or select a different file to which
  to link.
• If you want to delete the link, without actually
  deleting the text or image from the page, just
  clear the link box of all address information.
• You have now successfully updated or deleted your
  link.

103
E-mail Hyperlink

• E-mail hyperlinks are one of the mainstays of any
  successful Web site. They are an easy way for
  your visitors to contact you. E-mail
  hyperlinks provide a direct route back to you.
• When a visitor clicks the e-mail link, his/her
  default e-mail application opens to a new mail
  message, and the e-mail address youve specified
  is already completed in the To field.

104
E-mail Hyperlink

• Step 1 Select the Text or Choose a Location
• Decide where on the page you want the e-mail link
  to appear.
• Either select the text you want to use or click
  to position the insertion point n the page.
• You can also use a graphic as an e-mail link.
• Just select the graphic and follow Step 2.

105
E-mail Hyperlink

• Step 2 Use the Menus
• Chose Insert Email Link to open the Email Link
  dialog box.
• In the Text box, type the text that will contain
  the e-mail link (if you selected text in step 1,
  the text fieldis already filled in)
• In the E-mail box, type the e-mail address to
  link to.
• Click OK.

106
E-mail Hyperlink

• Step 3 Use the Property Inspector
• Instead of menus, you can enter the e-mail link
  information in the Property Inspector.
• Select the text or image to be used as the link.
• In the Property Inspectors link field, type
  mailto and then the e-mail address you want to
  link to (be sure there is no space between the
  colon and the e-mail address you type).

107
E-mail Hyperlink

• Step 4 Use the Insert Bar
• An alternative way to create an E-mail link is to
  use the Insert Bar.
• Select the common tab, and click the Insert
  E-mail Link button.

108
Anchors

• An anchor is a hyperlink that lets you jump to
  a certain point on the page. They are often used
  to enable people to jump back to the top of the
  page from somewhere farther down the page. You
  can also jump to anchors on other pages, but
  youll need to know both the name of the anchor
  and the name of the page. i.e.
  http//itdp.providence.edu/Help/Video_Help.htm
• Step 1 Create an anchor.
• Before you can link to a specific point in a
  document, you must create the anchor.
• Click in the document where you want the anchor.
• On the common tab of the Insert bar, click the
  Named Anchor button.

109
Anchors

• Step 2 Name the anchor.
• Type a name for the anchor youre creating and
  click OK.
• For a link back to the top of the page, a good
  name is Top.
• Step 3 Link to the anchor.

110
Anchors

• Step 3 Link to the anchor.
• Select the text you want to use as a link.
• In the Link field in the Property Inspector, type
  anchorname.
• i.e. top

111
Changing the Look

• Dreamweaver formats links, by default, as
  underlined, blue text so that the links stand out
  from the rest of the page. You can make changes
  to the default setting for links follow the
  steps below,
• Step 1 See the Defaults
• Create a simple link to another page in your site
• Notice the link on the page
• The text is blue and underlined
• When you click on the link it will become red
• After you have visited the link it will become
  purple.

112
Changing the Look

• Step 2 Choose your colors
• Modify Page Properties
• Use the color picker to select new colors for
  the
• Links
• Visited Links
• Active Links
• Step 3 Check that the colors work
• You dont want any of your three link colors to
  disappear against the background color of the
  page or image, so preview the page in a browser
  to be sure you can see all of them.

113
Jump Menus

• A Jump Menu is a drop-down menu that contains
  hyperlinks to other pages or sites.
• Ex
• 1.) Start by opening a page to which you want
  to add a jump menu.
• 2.) Click the Forms tab to see all the Form
  elements that Dreamweaver offers.
• 3.) Place your cursor where you want the jump
  menu to appear.

114
Jump Menus

• 4.) Now click on the Jump Menu button on the
  Forms tab to open the Insert Jump Menu dialog
  box.
• 5.) In the Text field, type a prompt for
  visitors so that they know this is a menu.
• i.e. Select an
• area to visit.
• 6.) In the options at the bottom of the dialog
  box, click the Select First Item After URL Change
  box. This will ensure that the prompt is always
  visible when a visitor comes to the page.

115
Jump Menus

• 7.) Next click the button at the top of the
  dialog box to add the first menu item and in the
  text field, type the text to appear as the link,
  and then click the Browse button.

8.) Browse to the file you want to link to,
select it, and click OK. The filename is added
into the dialog box.
116
Jump Menu
Once onscreen, you can still edit the jump menu
by adding, removing items or changing their
order. 1.) Select the menu in the
document. 2.) In the Property Inspector, click
the List Values button to see the jump menu items
in the List Values dialog box.

• 3.) Use the /- buttons to add and remove
  selected items OR select an item and click the up
  or down arrow to change its position in the order
  of menu items.

117
Using Frames

• Using Frames
• Using frames provides some benefits, but also
  some drawbacks youll need to know the pros and
  cons before you commit or do not commit -- to
  the use of frames.

118
What Well Cover in this Session

• Section Contents Whats In this Section?
• Basic concepts related to frames
• Basic procedure for developing and using frames

119
Using Frames

• Using Frames
• Takes some time and effort this advanced
  feature will allow you to piece together
  different web pages in a structured format.
• The frame is actually a bit of code that holds
  two, three, or more web pages together on one
  screen.
• The frame can come in different sizes and
  configurations.
• First introduced in 1997, web developers jumped
  on the bandwagon.

120
Using Frames

• Considering using Frames? Youll need to
  consider
• The frame is actually a bit of code that holds
  two, three, or more web pages together on one
  screen.
• The frame can come in different sizes and
  configurations.
• Usually, youll want to decide the size and
  placement of the frames before you start crafting
  the web pages that will fit into it. If you need
  to change the configuration later, it can cause a
  lot of work for you if you havent clearly
  thought out the process and products in advance.

121
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

Looks like a single page, eh? Guess what? Its
not!
122
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

This page is actually three pages, held
together by a frame.
123
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

One page is the header, an actual html file
called header.htm
124
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

This is a Java Applet, and shows up like this
Another page is the menu, an html file called
Content_Frame.htm
125
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

This page is actually a holder page when you
click a menu object, the page will swap out for
another or hundreds of page(s).
The last page is the content, an html file called
Content.htm
126
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

The content pages fill only this portion of the
frame
127
Using Frames

• Lets take a look at a sample http//ITDP.Provide
  nce.edu

This is a Frame Set
This is a Frame
This is a Frame
This is a Frame
So wheres the Frame? Frame Set?
128
Using Frames

• Step 1 Create the Frameset
• Show Frame Borders View Visual Aids Frame
  Borders.
• Check the built-in options Click the Frames tab
  to see
• Make a selection of Frame types CTRL-Z to undo.
• Add a horizontal split Modify Frameset
  Split Frame Up
• Delete a frame drag the frame border off the
  document window

129
Using Frames

• Step 2 Name and Save Your Frames
• Understand how Frames work
• Name the frames keeping frames straight can be
  confusing type some identifying text in each
  top, left, main
• Save all your frames Select File, Save Frameset
• In this case, the term page actually represents
  a set of pages!

130
Using Frames

• Step 3 Set the Frameset properties
• Access the frame properties dialog Window
  Others Frames
• Select the Frameset
• Set Borders for theframeset

131
Using Frames

• Step 3 Set the Frameset properties
• Set border properties
• Set the column width

132
Using Frames

• Step 3 Set the Frameset properties
• Give it a title
• Select the entire frameset in the Frames panel.
• Choose Modify Page Properties
• Name the frameset and set additional properties

133
Using Frames

• Step 4 Setting Frame Properties
• Remember, a frame is the part thats inside the
  frameset its possible to click on the frame
  and alter the properties of each.

Entire frame set selected
Top frameselected
Left frame selected
Main frameselected
134
Using Frames

• Step 4 Setting Frame Properties
• Naming the frame
• Set scroll properties
• Set border properties
• Set resize options
• Set margins
• Preview the frameset
• To be continued MJF

135
Reusing Information

• Come back in a week or two for more Info about
  this topic!
• text here and here

136
What Well Cover in this Session

• Section Contents Whats In this Section?
• xxxx
• xxxx
• Learning Objectives What youll learn upon
  completing this section
• xxx
• xxx
• xxx

137
Using Templates

• Using Templates
• During the eighth session, well be taking a
  look at the different templates that can be used
  with Dreamweaver
• Where do we find templates?
• Once weve found them, what do we do with them?

138
What Well Cover in this Session

• Section Contents Whats In this Section?
• Basic Template Concepts
• Bringing Templates into Dreamweaver
• Using Templates

139
Using Templates

• Whats a Template?
• Lets take a quick look at pages made with
  templates.
• Even though this topic wont be covered in detail
  for a few more sessions, its worth brief
  orientation now.
• With a template, you can signiciantly enhance the
  Look and Feel and sophistication of your web
  site from the outset.
• Macromedia offers a number of templates free,
  online at http//www.macromedia.com/software/dre
  amweaver/download/templates/

140
Using Templates

• Where do you get Templates?
• Other than the freebies from Macromedia, there
  are other sites that you can access to review and
  purchase templates, including
• The Template Store http//www.templatestore.com
• Templates-2-Go http//templates2go.com/?sourcef
  indwhat
• Basic Templates http//www.basictemplates.com/
• Template Central http//www.templatecentral.com/d
  reamweaver.asp
• Crystal Graphics http//www.crystalgraphics.com/
  web/WebTemplates.store.asp
• Italian Templates http//www.formecolori.it/brow
  se.php/38

141
Using Templates

• Templates!!
• Macromedia offers a number of templates free,
  online at http//www.macromedia.com/software/dre
  amweaver/download/templates/. Some weve
  purchased. Below are links to all
• Macromedias Templates Club Design E-zine
  Dept of History Inn Message Professor 1
  Professor 2 School Teacher Vacation
  Yearbook.
• Purchased Templates Global Force Tabbed
  Colors.
• Marias preliminary PC template

142
Using Templates

• Unzipping a Template File
• The Macromedia templates are in zipped file
  format. When you click on any of the links on
  the prior page, choose OK when you are asked to
  open the ZIP file.
• Then, in Windows XP, choose the Extract Files
  option Windows 98 users, use a zip compression
  program.

143
Using Templates

• Unzipping a Template File
• Finally, choosea target folder to which
  theunzipped fileswill be placed.

144
Using Templates

• Unzipping a Template File
• Subfolders will be created and HTML files placed
  in these subfolders
• Double click on the index.htm file to see what
  the files Look and Feel like.

145
Using Templates

• Unzipping a Template File
• In the prior slides example, the html file looks
  like this
• The entire page can be viewed by clicking here
• The (simple) menu structure is across the top
  other templates place their menus elsewhere.

146
Publishing Your Site

• Come back in a week or two for more Info about
  this Topic!
• text here and here

147
What Well Cover in this Session

• Section Contents Whats In this Section?
• xxxx
• xxxx
• Learning Objectives What youll learn upon
  completing this section
• xxx
• xxx
• xxx

148
Thanks for Your Time
149
Online Resources

• Come back in a week or two for more Info about
  this Topic!
• text here and here

150
Thanks for Your Time

• The capacity to learn is a gift
• The ability to learn is a skill
• The willingness to learn is a choice

Redec of Ginaz -Dune
151
Workshop Evaluation

• Thanks for taking part in our Dreamweaver MX
  workshop!
• Please provide us with constructive feedback that
  would help us improve future offerings!!!
• Our online workshop evaluation form is at
  http//www.instructionaltech.net/Providence/work
  shop_evaluation.htm

Wow! Time flies when youre having fun!
152
Blank

• Text Here
• xxxx
• xxxx
• Text here
• xxx
• xxx
• xxx