Web Page Editors II Dreamweaver by uxu13127


									Web Page Editors II

     Created by: Jessica Anderson
      Date: September 12, 2000
Web Editors: Dreamweaver   2
                                   Table of Contents

Introduction                            7    Section 5 – Templates & Libraries     41
       Welcome                          7          Creating a Template             41
       What is Dreamweaver              8          Modifying a Template            42
       The Interface                    10         Creating a Library Item         43
                                                   Modifying a Library Item        44

Section 1 – Managing a Site             17   Now You Try It                        45
       Defining a Site                  17
       Files and Folder Management      19   Section 6 – Java Script & DHTML       47
       Creating a Site Map              19         Creating a Rollover             47
                                                   Creating a Pointer Rollover     48
                                                   Creating a Rollover Menu        51
                                                   Opening a New Browser Window    57
Now You Try It                          21         Dragging a Layer                58
                                                   Using Timelines for Animation   60

Section 2 – The Basics                  23   Now You Try It                        62
       Creating and Saving              23
       Inserting Images and Text        24   Appendix – Dreamweaver                63
       Modifying Page Properties        25
       Creating Links                   27
       META Tags                        27
       HTML Code                        28   Homework                              65

Now You Try It                          30

Section 3 – Page Layout                 31
       Adding Layers                    31
       Layers to Tables                 32
       Creating and Modifying Tables    33

Now You Try It                          35

Section 4 – Style Sheets                37
       Redefining HTML Tag Styles       37
       Defining a Custom Class          38
       Linking to a Style Sheet         38
       Converting CSS to HTML           39

Now You Try It                          40

Web Editors: Dreamweaver                                                           3
Web Editors: Dreamweaver   4
                           Web Page Editors II

Instructor: _____________________                Date: ______________________

Phone: ________________________                  E-mail: ____________________

____1.         Preview the manual

____ 2.        Become familiar with Dreamweaver and its interface

____ 3.        Become familiar with Site Management

____ 4.        Define a Site to work in

____ 5.        Learn the basics of Dreamweaver

____ 6.        Begin creating web pages

____ 7.        Learn the Layout functions in Dreamweaver

____ 8.        Learn about Style Sheets

____ 9.        Create a Style Sheet

____ 10.       Become familiar with Templates and Libraries

____ 11.       Create a Library Item

____ 12.       Learn how to create Rollovers and Animation

____ 13.       Create a rollover and a matching game

____ 14.       Fill out the Class Evaluation

____ 15.       Finish the Homework and Turn it in

Web Editors: Dreamweaver                                                        5
Web Editors: Dreamweaver   6
                           Web Page Editors II
Welcome to UEN Staff Development’s Web Page Editors II: Dreamweaver
course. This class will introduce you to the world of creating web pages using
the web page editor program Dreamweaver. You will learn what features
Dreamweaver has to offer you, the web page designer, to save time and add
functionality to your pages.

Throughout the manual various graphics are used to note important information.

          The Power Hand is used to note a new technique or skill that will help
          you accomplish various tasks associated with web page editing.

         The Lightning Bolt is used to denote special pieces of information.
         These will vary from technical notes to helpful hints on how to
         accomplish a particular skill or task.

          Broken Wire icons are used to represent a trouble spot or a potential
          problem area that you will want to avoid. Pay attention to these items
          they may save you grief in the future.

Web Editors: Dreamweaver                                                           7
What is DreamWeaver?
Dreamweaver is a professional web page editor or sometimes called a
WYSIWYG (What You See Is What You Get) HTML editor. Meaning that if you
create a web page using Dreamweaver it will show you the results instantly. In
comparison, if you were hand coding HTML you would have to do so in a text
editor, save it, and open a browser to see the results of the change.
Dreamweaver is similar to a word processor of web pages plus a lot more. Some
of the features of Dreamweaver include:
        • Create web pages easily and quickly
        • RoundTrip HTML
        • Create Dynamic HTML (DHTML) gadgets and pages
        • Supports Cascading Style Sheets (CSS) and templates
        • Incorporate Java Script
        • Manage multiple web sites and all associated web pages.

       HTML stands for HyperText Markup Language. HTML uses a combination
       of tags, attributes, and values to generate what we know as web pages. It
       allows for the formatting of text, use of images and linking documents
       together. Web page editors are the alternatives to writing all of the tags by
       hand. Although these editor programs make it seem that learning HTML is
       unnecessary we strongly recommend that you learn at least the basics of
       HTML so you are not afraid of it. It is also helpful to understand how it
       works and what it can do for you. Basic HTML is covered in the UEN Staff
       Development course Web Page Creation: Basic HTML or there a lots of
       good "how to" HTML books and web sites.

       RoundTrip HTML
       One of the most powerful features of Dreamweaver is roundtrip HTML.
       Roundtrip HTML means you can alter the HTML code that Dreamweaver
       automatically writes within the program. Most other web editors do not let
       you alter their code within the program. This is because to make other
       editors work the code has to be written in a specific way. This makes for a
       lot of “Junk” HTML code making it difficult to edit outside of the editor.
       Dreamweaver creates “Clean” HTML code that can be easily edited.
       Roundtrip HTML is important for more than just editing purposes.
       Because you can alter the code that Dreamweaver writes, it will leave your
       changes alone even if it doesn’t understand them. The program doesn’t
       assume that it knows more than you do, however Dreamweaver will
       highlight in yellow HTML that it feels may be invalid. This helps when
       trying to find errors in code. HTML is constantly changing. Because
       Dreamweaver allows you to change the code, you are not prevented from
       using new tags just because you have an older version of Dreamweaver.

Web Editors: Dreamweaver                                                           8
       Dynamic HTML is a collection of different technologies put together. This
       can include a combination of HTML, JavaScript, Cascading Style Sheets
       (CSS), and Document Object Model (DOM). It also includes animation,
       drag-and-drop, and complicated rollovers (buttons that change
       appearance when you put your mouse over them). The purpose for
       combining these technologies is to allow for more dynamic content than
       what basic HTML provides. Like HTML, if you use DHTML effects in
       Dreamweaver, most of the coding is automatically written for you behind
       the scenes.

               NOTE: There are some cross-platform issues with DHTML between
               Netscape Navigator and Internet Explorer, so make sure you test what
               you have created.

                                   DHTML Terms
         Technology        Definition
        HTML               HyperText Markup Language. The default markup for
                           basic Web pages and the root of DHTML.

        JavaScript         A Scripting language that extends the capabilities of

        CSS                Cascading Style Sheets. A page layout system
                           understood by new web browsers, which allows for
                           better control over the appearance and positioning of
                           elements on a web page.

        DOM                Document Object Model. A hook to outside scripting
                           protocol such as ActiveX or external Plug-ins such as
                           Shockwave or Flash. It allows scripts and programs to
                           address and update documents.

Web Editors: Dreamweaver                                                              9
 Some programs use multiple windows and palettes to reach all of the features of
 the program, soon all those windows and palettes clutter up you screen making it
 almost impossible to see what it is you are actually working on. Instead
 Dreamweaver uses just a few primary windows and palettes that change
 depending on what you are doing. This helps to keep your screen working space
 more organized and makes learning the interface easier. There are five main
 parts to the interface:





          The Object Palette
          The object palette is a one-click stop for many functions. The palette
          contains buttons for inserting various types of objects such as images,
          tables, layers and more. You can modify the appearance of the palette:

             1. Edit > Preferences > General > Object Palette
             2. Change the setting to Icons with Text, Icons Only, Text Only

                  HINT: Items on the object palette are also found under the Insert pull
                  down menu on the top menu bar. The object palette is a shortcut to using
                  the top pull down menus.

 Web Editors: Dreamweaver                                                               10
       Types of Objects
       The Objects Palette is context sensitive. By default the palette shows the
       most “common” objects. You can change the Object Palette to show 5
       other category of objects; Forms, Frames, Head, Invisibles, and

                               Object Palette Types
        Palette            Description
        Common             Contains the most frequently used objects in
                           Dreamweaver such as images, table and layer.

        Forms              Contains buttons for creating forms and the elements
                           associated with forms.

        Frames             Contains buttons for creating a page using frames.
                           Each button gives you a different frame layout.

        Head               Contains objects for adding head elements such as
                           meta tags, and the title.

        Invisibles         Contains buttons for creating objects that are not
                           visible in the document window, such as anchors.

        Characters         Contains nine of the most commonly used characters
                           on a web page.

Web Editors: Dreamweaver                                                          11
       Properties Inspector
       The Properties Inspector is context sensitive depending on what type of
       element is selected. The Properties Inspector window content changes to
       fit the settings of the selected element. The Properties Inspector controls
       the setting for elements such as text, tables, images and more. When a
       blank document is open in Dreamweaver the Properties Inspector defaults
       to displaying settings for text as shown below.

               Hint: The arrow in the bottom right corner allows you to expand and
               contract the Properties Inspector window. The top portion of the window
               displays the most commonly used properties of the object. All others
               appear below the line where they can be hidden if screen space is

       Launcher and Mini-Launcher
       The Launcher is a short cut bar to several of Dreamweaver’s features.
       By clicking on the buttons, you are able to “launch” the Site, Library, HTML
       Styles, CSS Styles, Behaviors, History, and HTML Source palettes and

       The Mini-Launcher at the bottom of the screen works exactly the same
       way as the Launcher, minus the words to remind you which button open
       each area. If you become familiar, with the launcher symbols you can
       close the Launcher and use the Mini-Launcher to save screen space.

Web Editors: Dreamweaver                                                                 12
                    Launcher and Mini-Launcher Features
     Button            Description
     Site              Opens the Site window where you can use the site management
                       features of Dreamweaver such as viewing a site map and
                       publishing your pages onto the web.

     Library           Opens the Library palette. The library is a collection of HTML
                       elements that can be shared from page to page.

     HTML Styles       Opens the HTML Styles palette. HTML Styles applies standard
                       HTML formatting to a selected text of paragraph. You can use
                       default styles or define your own.

     CSS Styles        Opens the Cascading Styles Sheets palette. CSS Styles lets
                       you define and keeps track of any customized Cascading Style
                       Sheets that have been added to the current page.

     Behaviors         Opens the Behavior Inspector window. This window allows you
                       to add predefined JavaScript actions or events to your page.

     History           Opens the History palette. The history palette shows a list of
                       actions that can be undone, reused, or saved.

     HTML Source       Opens the HTML Inspector window. This window is where you
                       can see the actual HTML code for the current page that is being
                       created by Dreamweaver.

       The Document Window
       The document window is where all of the activity takes place. The
       document window displays approximately what you will see in a web
       browser. The document window is where you will be assembling your web
       page. There are several elements of the document window. The elements
       of the window are; Title bar, Rulers, Tag Selector, Window Size,
       Document size and Download Time, and Mini-Launcher.

Web Editors: Dreamweaver                                                                 13
                  Title Bar



       Tag Selector                     Window Size         Mini Launcher

                              Document Window Elements
      Elements                Description
      Title Bar               Contains the name or “title” of your web page and the file

      Rulers                  Show or hide by selecting View > Rulers > Show or Hide.

      Tag Selector            Displays the HTML code for the item that has been
                              selected in the document window.

      Window Size             Shows the current window size in pixels. Also allows you to
                              pick a window size from the pull down menu that
                              corresponds with common monitor sizes. This will help you
                              design a page that looks good at several resolutions.

      Document Size &         Gives you the approximate size and download time for the
      Download Time           current page that you are creating.

      Mini-Launcher           The small version of the Launcher. Gives access to key
                              functions of Dreamweaver.

Web Editors: Dreamweaver                                                                    14
               Hint: There are several different preferences that you can set to change
               the appearance of the Dreamweaver interface. You can get into those
               preferences by going to Edit > Preferences. Go into the preferences and
               see what options you have.

Web Editors: Dreamweaver                                                             15
Web Editors: Dreamweaver   16
                                  Section 1
                                Managing a Site
Managing your site is a big challenge. It becomes difficult to keep track of all of
your files, graphics and their locations especially as you put your site on a web
server. Dreamweaver has a site-management feature that requires that you
create and keep all of your files in one main root folder on your hard-drive so you
can easily duplicate the folder structure on a web server. This helps in keeping
all of you links working and avoiding broken graphics.

Defining a Site
Before you start creating a web site you should create a Local Root Folder on
your hard drive and define that as a site in Dreamweaver. This root folder is
where you will save all .html files and graphics that your web page uses.

       1. Create a folder on your hard drive where you want to store your web
          site files.

       2. Open Dreamweaver and press F5 or click on the Site                button
          in the Launcher to open the Site window.

       3. From the pull-down menu select Define Sites…If you have already
          have sites defined in Dreamweaver click the New Button in the screen
          that appears.

Web Editors: Dreamweaver                                                         17
       4. The Site Definition window will appear. In the Site Name: text box
          give your site a name. Click on the yellow folder icon next to the Local
          Root Folder text box. Browse to the folder you created on your hard
          drive. Highlight the folder name and click Open and then Select.
          Check the Use Cache to Speed Link Updates checkbox.

In order for your site to be seen on the web you need to load it onto a web
server. The most common way of doing this is through FTP (File Transfer
Protocol). You can do this in Dreamweaver by fill in the information needed if you
have it available. You need to get this information from you Network
administrator or your Internet provider. The following step will show you how to
set up FTP.

       5. Select the Web Server Info in the Category list box. The right side of
          the screen will change to Web Server Info. From the Server Access
          pull-down menu select FTP. You screens should look like the one

Web Editors: Dreamweaver                                                         18
       6. Input your FTP information in the appropriate boxes. Get this
          information from you Network administrator, or internet provider.

       7. Click OK when you are finished.

       8. Click the Done button on the Define Sites screen.

File and Folder Management
With in Dreamweaver you can create and manage file structures like you would
inside of Windows Explorer. You can create new folders, or files and move them
around. When you do this inside of Dreamweaver, you actually create those files
and folders on the hard drive.

       1. Make sure the site window is open (F5). Click on the top folder in the
          Local Folder view on the right side of the Site window. This is your
          Local Root Directory.

       2. Create a new folder by going to File > New Folder. This will create a
          new folder on your hard drive in the local folder. Give the folder a name
          i.e. graphics.

       3. If you have files in the local folder that you want moved in to the new
           folder simply select them and drag them into the new folder.
           Dreamweaver will ask if you would like to scan for link to the files just
           moved. If you scan for them it will make a list of all file that refer to the
           moved files. You can choose to update the links.

       4. You can also create HTML files by going to File > New File. A blank
          HTML page will be created. Give the new file a name. This feature lets
          you set up you entire site without putting any content on a page.

Creating a Site Map
The site map is a great way to see the structure of you web site. A site map lets
you see what files link to each other. Dreamweaver also lets you make the site
map into a PICT or BMP file.

       1. Open the Site window by pressing F5 or clicking on the Site button in
          the Launcher.

       2. Click on the Site Map            button in the upper-left corner of the site

Web Editors: Dreamweaver                                                               19
       3. A pull down menu will let you choose between two options, Map Only
          or Map and Files.

       The Map Only view will fill the entire site window with the Site Map. The
       Map and Files view will only fill up the left side of the Site window with the
       map leaving the local Folder view on the right side of the screen. It is up to
       you what view you would like to see. Here is a Map Only view.

       4. To save this view as an image file go to File > Save Site Map As…
          pick a location on to save the site map image.

Dreamweaver has several other Site map feature that we will not cover in this
manual. We encourage you to look further in to the feature that the Site
management function has to offer.

Web Editors: Dreamweaver                                                           20
                                Now You Try It
                                  Activity 1
Define a site, create a folder called school_site somewhere on your computer,
either on the Desktop, hard drive, or a disk. Use the new folder as your Local
Root Folder.

Create a Graphics folder in your site. The graphics folder is where you will put all
graphics that you use in your web site.

Web Editors: Dreamweaver                                                          21
Web Editors: Dreamweaver   22
                                        Section 2
                                       The “Basics”
Lets get started creating Web Pages. In the “Basics” section you will learn how to
create a web page using Dreamweaver. You will learn how to insert and align
text and images, link images and text, setup page properties, insert META
information, and view the HTML code generated by Dreamweaver. Let’s get

Creating and Saving
Let’s learn how to create and save documents. By default when Dreamweaver
opens there is a blank untitled document. You can use this document or you can
create a new document by going to File > New.

When you create a new page it is a good idea to give the page a name or title.
The name or title appears in the top bar of the page in your browser. To add a

       1. Go to Modify > Page Properties…

       2. Type a title in the Title text box.

       3. Click OK

Before you start to build your page, it is important to save it first. All the site
management features that we will talk about depend on Dreamweaver knowing
where your pages are saved. Besides you don’t want to lose any of your work if
the power were to go out or you computer crashes.

       1. Go to File > Save or Save As…

       2. Select the location of your “Local Root Folder” on your computer. If
          this is the first page in your web site, it is a good idea to name it

       TIP: Index.html has special significance in HTML. It almost always means that it is
       the beginning page of a site. Web servers recognize index.html as the default
       home page. When you type www.uen.org you are really seeing
       www.uen.org/index.html even thought you did not type that exact address. The
       server automatically opens the page named index as the first page.

Web Editors: Dreamweaver                                                               23
Inserting Images and Text
Adding images to your page is just a couple clicks away. The hardest part is
finding or creating the right graphic for your page. To add graphics to your page
do the following steps:

       1. Click on the Insert Image object          in the Object Palette.

       2. A Select Image Source window will appear. Browse to the location of
          the graphic you want insert.

       3. Click on the graphic file you wish to insert. A preview of the graphic
          will be displayed on the right side of the window. If this is the right
          graphic click, the Select button. You will see the graphic appear in
          your document window.

               Note: If the image you have selected is located outside of your “Local
               Root Folder” Dreamweaver will ask you if you want to copy the graphic
               into your folder. Make sure that you say yes. Save the image in your
               graphics folder. Make sure that all image that you use on your pages are
                saved inside your “Local Root Folder” or you will end up with broken links
                to your images.

To center images on the screen:

       4. Select the image you would like to center.

       5. Chose Text > Alignment > Center

       6. Save your work.

               Tip: You can also insert images on your page using Insert > Image from
               the top pull down menus.

Adding text in Dreamweaver is very simple. Dreamweaver is like word processor,
you can simply start typing text on your page and it will appear. To add text:

       1. Place your cursor in the document window where you would like the
          text to appear.

       2. Simply start typing and the text will appear on the screen.

       3. Press Shift+Return, to create a line break <BR>. This should put your
          cursor on the next line without adding the two-space paragraph break.

Web Editors: Dreamweaver                                                                24
       4. Press Return, to create a paragraph break <P> between text.

       5. Save your work.

To center text on the screen:

       6. Select the text you would like to center.

       7. Chose Text > Alignment > Center

       8. Or click on the Align Center button in the Property Inspector window.

Modifying Page Properties
To change the background color as well as other attributes of your page use the
Page Properties window. Some of the attributes you can change are
background color, text and link colors.

       1. Select Modify > Page Properties…

       2. Move the Page Properties window around so you can see part of your
          Document Window behind.

       3. Click on the small box to the right of the word Background. A color
          palette will open up.

       4. Click on a color pixel. This will change your background color to be the
          selected color. Click Apply to preview the change. Click OK if you are
          finished making changes in the Page Properties window. You can do
          the same process for Text Color, Links, Visited Links, and Active Links.

       5. Another way to pick a color is to match a color using the eyedropper.
          Instead of picking a color from the palette you can match the color of
          anything on your document window or pallets. Most likely you will be
          trying to match a color within a graphic. When the color palette comes
          up move your mouse over the item that has the color you would like to
          match. Make sure that your cursor is an Eye Dropper. Click on the

Web Editors: Dreamweaver                                                        25
           object with the matching color. The property color box should turn the
           same color as the matching item. Click Apply to see the results.

        6. You can use the hexadecimal value for a color instead of using the
           color palette. Type in the number (#3333FF for bright blue) in the box
           next to the property color you would like to change.

        7. Save your work.

                NOTE: All the colors shown in the Color Palette are web safe colors.
                When you pick a color that is outside the palette you run a risk of having
                the color look different between different browsers.

                                    Page Properties
Properties                 Description
Title                      The title of the web page that will appear in the title bar of the
                           web browser.

Background Image           If you want a background image, specify it here.

Background                 Sets the background color.

Text                       Sets the default text color. It can be overwritten for specific text.

Links                      Sets the color to the links on the page.

Visited Links              Specifies what color the link will be after some one has clicked
                           on it.

Active Links               Specifies what color the link will be as someone is clicking on the
Left and Top Margin        Specifies the default margin settings used by Internet Explorer

Margin Width and           Specifies the default margin settings used by Netscape.

Document Encoding          Specifies the language for the characters and fonts used in the

Tracing Image              Adds a tracing image to your background. A tracing image is
                           used as a guide for layout purposes.

Transparency               Sets the transparency level of your tracing images.

Web Editors: Dreamweaver                                                                    26
Creating Links
The ability to link pages with hyper links is what makes the web such a powerful
tool. You can make text or images a link.

       1. Select the image or text you wish to make a link.

       2. If you want to link to an html file that is within your site, click on the
          small yellow folder next to the Link text box in the Properties
          Inspector window.

       3. The Select HTML File window will pop up. Browse to the html file
          location on your computer. Click on the file name and click the Select
          button. You have just created a relative link or internal link. It is
          relative because it linked to the document within the site and not to an
          external web site

       4. If you want to create a link to an external web site, select the image or
          text you wish to make a link.

       5. Type the web address (http://www.uen.org) into the link option in the
          Properties Inspector window. Notice that if you are creating a text
          link, the text color will change. You have just created an Absolute link
          or external link. It is absolute because it starts with http:// and includes
          the full address.

       6. To preview and test your page in a web browser. Go to File > Preview
          in Browser > select a browser or Press F12. Depending on what
          your default browser is set for you may see your page in Netscape or
          Internet Explorer.

       7. Make an email address link selecting the text and in the Properties
          Inspector type mailto:address@somewhere in the Link field or click
          the email link        button from the common Object Palette. Type in
          the text you want to be a link and the email address.

Once you have built a web page or site you want to have people visit your page.
Most people visit web sites through search engines. One of the ways to get the
search engines attention is to use META tags. META Tags are used by search
engines to categorize or index you pages correctly. You only need to add META
tags to you first or index page. To add META tags to your page do the following

       1. Make sure that you have the index.html page in your document
          window. Go to the Objects Palette and click on the arrow at the top.

Web Editors: Dreamweaver                                                               27
           Select Head from the pop-up menu. The Head menu contains the
           META elements.

       2. Click on the Insert Keyword               button. A dialog box will appear
          were you can enter your keywords.

       3. Type all words that you think someone looking for you page would type
          into a search string in a search engine. Separate each new key word
          with a comma.

       4. Click OK

       5. Click on the Insert Description          button in the Head Objects
          Palette. A dialog box will appear where you can enter a description of
          your page.

       6. Type a description of your page. You want to give a detailed
          description of what your page has to offer but don’t get too lengthy.

       7. Click OK.

               HINT: If you have created a web site (multiple pages) you only need to
               put the META information on the home page. If you put it on every page
               the search engine will list every page you have created when really you
               just want your site listed once.

You can view the HTML code that Dreamweaver creates. Looking at the code is
a great way to teach yourself HTML or to see how specific elements were added
in the code. Dreamweaver also color codes the HTML to make it easier to
distinguish between text, images and tags. Being able to see and edit the HTML
code is one of the great features of Dreamweaver.

       1. You can view the HTML code by clicking the HTML                      button
          in the Launcher or by pressing F10.

       2. Make sure that there is a check in the Wrap checkbox. This will make
          it easier to see all of the code without having to scroll horizontally.

       3. Look at the top of the code in the <HEAD> tag and you will see any
          <META> information that you have added.

       4. Close the HTML code window by clicking the X in the top left corner or
          press the HTML button once again.

Web Editors: Dreamweaver                                                             28
       5. Select an image and open the HTML code window. Notice that the
          code associated with that logo image is highlighted. This is extremely
          helpful when you want to look at specific HTML code in you page.

Web Editors: Dreamweaver                                                       29
                                  Now You Try It
                                    Activity 2

Start to create the pages for your web site. Build 3 web pages, an index page
and 2 others you can link to the index page. The following are ideas for page
topics to build:

       • School Homepage
       • Faculty and Staff
       • Student Resources
       • Parent Resources
There are graphics you can use in the Dreamweaver > example_graphics folder.

       NOTE: Copy any graphic you use on your pages into the graphic folder located
       inside of you school_site folder. It is important to keep all graphics used in you
       web site with in the Local Root Folder. This will prevent broken or missing
       graphic problems.

Link each page the index page. Test your pages in a browser by pressing F12 or
File > Preview in Browser.

Don’t worry about making your pages perfect the purpose of this activity is to get
you using the features we learned about. Once you get some practice you can go
back and make then look exactly the way you want them to.

Web Editors: Dreamweaver                                                                    30
                                     Section 3
                                    Page Layout

Page layout with standard HTML is very difficult. There are no HTML tags that
allow you to move blocks of text anywhere on the page. You really only have
three options: center, right or left align. This can be very frustrating for someone
who has a great layout in mind but can not make it work with HTML. Tables help
with this frustration but tables are not very intuitive and it can be difficult to write
the HTML code. Dreamweaver has come to the rescue. With the advent of
layers, you can now move objects anywhere on the screen. In this section, we
will talk about layers, tables and converting layers to tables.

Adding Layers
Let’s learn how to add a layer and insert images and text in to them. Once they
are there you can move them around to any location on the screen.

       1. To add a layer to your page go to Insert > Layer. An empty layer will
          appear on your screen in the form of a rectangle. Alternatively, click
          the Layer     button in the object palette and draw a layer by clicking
          and dragging the cursor in the document window.

       2. You can click and drag the layer around anywhere on the screen.
          Click on the layer and drag your mouse to the location on the screen
          that you want the layer then let up on your mouse button.

       3. You can add an image or text inside of a layer. Click inside the layer.
          You should see a blinking cursor inside the layer.

       4. Go to Insert > Image or start typing the text you want inside your layer.

       5. The image or text are now inside the layer. You can position the layer
          anywhere you would like to on the screen.

               HINT: When you create a layer in Dreamweaver, a small yellow icon
               appears at the top of your page. This is an invisible element. By selecting
               these markers you can easily select the layer associated with it.

       6. You can create as many layers as needed to make a great layout.

       7. Save your work.

Web Editors: Dreamweaver                                                                31
Layers to Tables
However, there is a drawback to layers. They will only display in browsers
version 4.0 and higher. Any browser older than that will see layers all jumbled up
on the left side of your page. There is hope. Dreamweaver has made it so you
can convert your layers into tables, which can be view by older browsers. Let’s
learn how:

       1. Select Modify > Layout Mode > Convert Layers to Table… a dialog
          window will appear.

       2. Click the Table Layout: Most Accurate. Click the Prevent Layer
          Overlaps checkbox. Click OK. The prevent layer overlap setting is
          required since table cells cannot overlap even though layers can.

       3. Save your work.

       NOTE: Layers work best if every element on the page is in a layer. If your layout
       doesn’t look right after converting to tables got to Modify > Layout Mode >
       Convert Tables to Layers. All of your element will be in a layer then convert to
       tables again. It is very easy to go back and forth between layers and tables.

                               Convert Layers to Table
 Elements                  Description
 Most Accurate             Creates a table cell for each layer and creates all the cells
                           necessary to maintain the structure.

 Smallest:                 Sets the edges of the layer to align if they are within a certain
 Collapse Empty            pixel range. This results in fewer cells and rows, which equal
 Cells                     faster download. This option could possibly mess up your
                           layout. Experiment with it to see what happens with each page.

 Use Transparent           Put a transparent image in each empty cell. This can help
 Gif                       maintain the layout in certain browsers that collapse empty

 Center on page            Centers the table on the page.

 Prevent Layer             This option warns you if you have any overlapping layers since
 Overlap                   table cells can not overlap.

 Show Layer                Opens the Layer Palette, which allows you to rename or
 Palette                   reorder your layers.

 Show Grid                 Turns on the grid of the page if it is not already on.

 Snap to Grid              Snaps the layers to the nearest snapping point of the grid. This
                           can help you align objects.

Web Editors: Dreamweaver                                                                       32
Creating and Modifying Tables
There are times when you would want to use a table instead of a layer, like when
you are doing a calendar or a table showing teachers names and email address.
Let’s learn how to create a table:

       1. Click on the Insert       Table button in the Object Palette or
          choose Insert > Table from the top pull down menu.

       2. The Insert Table dialog box will appear. Fill in the appropriate
          information to create your table.

       3. A table should appear on your page with the amount of rows and
          columns you specified in the dialog box.

       4. You can merge cells to create one larger cell. To do this, select cells
          you would like to merge by clicking inside the cell and dragging it
          through all of the cells you would like to merge.

       5. Choose Modify > Table > Merge Cells or click on the Merge Cell
          button in the Property Inspector. This will result in all of the selected
          cells becoming one cell.

       6. Add another row by clicking in a cell and going to Modify > Table >
          Insert Row a new row will be inserted above the cell you put where
          your cursor.

       7. You can delete a column or row just as easily. Select the row you want
          to delete. Go to Modify > Table > Delete Row.

       8. To add text in your table. Click in the cell you want to add text and
          begin typing. You can format the text the same way you would outside
          of a table.

       9. To add an image to your table click in the cell where you want to insert
          the image and go to Insert > Image.

       10. You can adjust the column and row widths by moving your cursor to
           the boarder of the column or row you want to adjust. Wait for your

Web Editors: Dreamweaver                                                              33
           cursor to change to a double arrow and them click and drag the line to
           the width or height that you want.

       11. You have just created a table. There are several other table options
           we have just covered the basics. The best thing to do is get in and
           experiment with them to see what you can do.

               TIP: There are two types of tables, Percentage-based tables and Pixel-
               based tables. A Percentage-based table will stretch with the width of the
               browser. This means that the size of the table depends on the size of the
               browser. The table will change sizes to fill up the specified % of the
               screen. A Pixel-based table is a fixed size no matter how small or large
               the browser becomes. What type of table to use is solely dependent on
               what you want your page layout to look like.

Web Editors: Dreamweaver                                                               34
                                 Now You Try It
                                   Activity 3
Create a Calendar using a table. You can create a new web page to add the
calendar in or you can use an existing page. Put a few events in the days of the
calendar. Play around with some of the table options. See what you can do with

Hint: A calendar has 7 columns and 5 rows. In your graphic folder I have put a
clipart of Santa feel free to put him in one of your cells if you are doing the month
of December.

Here is an example calendar:

Sunday       Monday        Tuesday   Wednesday Thursday     Friday      Saturday
                                     1         2            3           4

5            6             7         8          9           10          11

12           13            14        15         16          17          18

19           20            21        22         23          24          25

26           27            28        29         30          31

Web Editors: Dreamweaver                                                           35
Web Editors: Dreamweaver   36
                                    Section 4
                                   Style Sheets
Cascading Style Sheet (CSS) offer a way to define the appearance/formatting of
the text in your document to ensure consistent formatting and design in your web
site as well as saving you time. With a CSS Style you can make all of your
headings blue and all of your text green. With CSS style, you can set such
attributes as, which font the text should appear in, how much space should
surround it, and what color and size it should be. You can do this with just a few
simple instructions. We will be learning how to set up Styles and Style Sheets (a
collection of rules that define a page style) as well as redefine styles for HTML
tags and link pages to external style sheets.

       NOTE: CSS Styles became available with Microsoft Internet Explorer 3.0 and
       Netscape Navigator 4.0 older browsers do not support CSS Styles.
       Dreamweaver will convert styles to HTML tags so that older browsers will not
       have a problem. You get the best of both worlds.

Redefining HTML Tag Styles
There are many ways to implement styles in Dreamweaver. One of those is to
assign font attributes such as color and size to HTML tags.

       1. Click the CSS Styles          button in the Launcher or got to
          Window > Styles in the top pull down menu. The Styles Window will

       2. Click on the Open Style Sheet           button at the bottom of the Style

       3. Click on the New… button in the Edit Style Sheet Window.

       4. Select the Redefine HTML Tag. Click on the arrow next to the text
          box and select the tag you want to redefine. Click OK. A Style
          definition window will appear.

Web Editors: Dreamweaver                                                              37
       5. Chose the attributes you would like to set such as font, size, color,
          weight, case etc.

       6. When you have finished setting up the tags attributes click OK then
          Done in the Edit Style Sheet dialog box. You will be able to see the
          formatting changes every time that tag is used in your page.

       7. Look at the HTML code by pressing the HTML button in the Launcher.
          Notice that all of the style sheet information was added to the <HEAD>
          of the document.

       8. If you would like a change to the style of a tag, click on the CSS Style
          button in the Launcher. Click the Open Style Sheet button and
          choose the tag that you want to change and click Edit.

Defining a Custom Class
You just learned how to define the attributes for tags, but what if you want to be
able to change the attributes of any text on the screen regardless of what type of
tag it is using? You can do this by creating a Custom Class. A Style Sheet Class
is a set of attributes that can be applied to any text on the page.

       1. Click on Open Style Sheet button in the CSS Style palette. Click New
          in the Edit Style Sheet menu. Check Make Custom Style (Class) and
          give your class a name in the Name: text box (e.g. .green). It is
          important that you put the . in font of name you choose. Click OK.

       2. In the Style Definition window set the attribute you would like for this
          class. Click OK and Done. You will not see any changes to your
          screen yet because you have not applied the class yet.

       3. Notice that your Style Palette now contains the class you just created.
          Select the text that you would like to apply the class to and click on the
          class in your Style Palette. The text that you selected should take on
          the attributes you set up for that class.

       4. Try setting up a couple different class styles and experiment with the

Linking to a CSS Style Sheet
Up to this point you have only created an internal CSS style sheet. You can also
create an external CSS Style Sheet so that different pages at your web site can
have the same set of style sheet information. CSS Style sheets are powerful
because if you change your mind about a style you can edit the style sheet and
all documents using that sheet will be updated.

Web Editors: Dreamweaver                                                           38
       1. To make a style sheet accessible to other pages we need to export it.
          Go to File > Export >Export CSS Style. Name the file styles.css
          (you can name it anything you want as long as it is in all lowercase
          letters, no spaces and ends with the extension .css). Pick a location to
          save the Style Sheet. It is a good idea to save it somewhere in the
          same folder as the web pages that will be using the style sheet.

       2. Open or create a web page that you want to link the style sheet you
          just created to.

       3. Open the CSS Style Palette if it is not already open and click on the
          Open Style Sheet button.

       4. When the Edit Style Sheet window comes up click on Link. Browse to
          the location that you saved your external Style Sheet. Select OK.

       5. You now have access to the style sheet that you created before.
           Experiment with the Class style and redefined tags.

Converting CSS to HTML
Remember that older browser do not support CSS so to get around this problem
you can convert CSS to HTML tags.

       1. To convert your CSS information to HTML go to File > Convert > 3.0
          Browser Compatible…

       2. Click on CSS Style to HTML Markup in the dialog box that appears.
          Click OK. This will create a separate Untitled Document.

       3. Compare the HTML for the two different documents.

               HINT: Dreamweaver creates another document for you when converting
               in case you want to save the two different versions to have on hand.

Web Editors: Dreamweaver                                                          39
                             Now You Try It
                               Activity 4

Now that you know how to use CSS style and style sheet in Dreamweaver create
one of your own.

Create a new page or use one that you’ve already created. Create a style sheet
for that page include:

        • At least three redefined HTML tags one of the tags should be the body
        • Create at least two custom classes.
 Export your style sheet and link it to at least one other page. Play around with
some of the attributes and see what result you get.

Web Editors: Dreamweaver                                                            40
                                 Section 5
                           Templates and Libraries
One of the most challenging parts of web site design is making pages look
consistent and updating changes throughout a site. Dreamweaver created
templates and libraries as a way to create consistent page designs that can be
automatically updated across the site simply with a change to the template or

Creating a Template
Templates exist so that you can use the same basic design over and over again
without recreating it each time. With a templates you can use the same basic
layout design to create a page and then change the specific content for that
particular page. With a template, you can “lock” parts of a document like the
background, tables, or logo images while leaving other parts of the page editable.
Let’s learn how to create a template.

       1. Open a new document and create a basic layout. You may want to set
          the background color, add any images that you want to be on each
          page. In layer or tables set up areas where you would put text or
          images. (Don’t actually put the text or images in just reserve a spot for

       2. Once the basic layout is finished save the document as a template by
          go to File > Save As Template…

       3. The Save As Template dialog box will appear give the template a
          name in the Save As: text box. Click Save.

               HINT: You will know that the document that you are working on is a
               template because the title bar will show <<Template>> and the file name
               with a .dwt extension.

       4. Now decide which areas of your template you will make editable.
          Select or create the table cell, layer, text or image that you want
          editable. Go to Modify > Templates > New Editable Region…

       5. When the New Editable Region dialog box appears type in a name for
          the region. It should give some indication as to what will be going
          there. Click OK.

Web Editors: Dreamweaver                                                            41
       6. Notice that the name you used for the Editable Region appears on the
          template in curly brackets showing the area as editable.

       7. Repeat the following steps until you have made all of the areas you
          want editable. When finished close the template document make sure
          that you have saved your changes.

       Let’s create a web page using the template.

       8. Go to File > New From Template…

       9. Select the template name that you want to use and click the Select
          button. A new document should appear that looks just like the template
          that you created.

       10. The areas on your page that are not highlighted let you know that
          these are the editable regions. Select editable areas and add text or

       11. Notice that you can not edit any other areas outside of the editable
           regions of the page.

               TIP: If it ever becomes necessary to edit the page you can detach
               the template from the page by going to Modify > Templates >
               Detach from Template…

Modifying a Template
Once a template has been created you can modify or update the template and
have the changes you make automatically update all pages using the template.

       1. Open the template palette by going to Window > Templates… The
          Template palette will open and show a list of possible templates.
          Double click on the template you want to modify.

       2. The template file will open up for you to edit. Make the changes you
          want. You can change colors, layout, formatting etc.

Web Editors: Dreamweaver                                                           42
       3. Close the file when you are finished making changes. When prompted
          make sure you save your changes. A dialog box will appear asking if
          you want to update the pages using this template. Click Yes.

       4. View the pages using the template you just modified. They should
          have all change.

Creating a Library Item
Library items are great for page design elements such as navigation bars, or
copyright notices. They are items that can be added anywhere within a page. A
Library item when edited and saved updates the changes on all pages that use
the item. This makes it very easy to update multiple pages at one time. Let's
create a library item.

       1. Create the element you would like to add to the library in a document
          window or find one on an existing page. Elements that you may want
          to make a library item are navigation bars, copyright statements or
          footer information.

       2. Open the Library window by clicking the Library              button in the
          launcher or by going to Window > Library.

       3. Select the element that you would like to put in the library. Click on the
          New Library Item button in the Library Window.

       4. Your new item will appear in the window. Give your item a name.
          Your Library item will maintain links and text formatting.

Web Editors: Dreamweaver                                                          43
       5. Once the item has been created in the library you can add it to other
          pages. Open the page you want to add the library item to or create a
          new page.

       6. In the Library window, select the item and click the Insert button.

       7. The item will be added to the page. The library item added to the page
          will be highlighted indicating that it is a Library item.

               HINT: The library items do not keep alignments and can be added
               anywhere on a page. You may want to insert the Library items in a
               layer to make it easier to move around on your page to a specific

Modifying a Library Item
Once you have created the Library item you are able to modify or update the item
and every page that uses that Library item will be instantly modified or updated
as well. Let's see how it works.

       1. Open the Library window and highlight the Library item that you wish to
          modify. Click the Open button in the Library window. This will open the
          Library Item for editing. You will know that you are in the library editing
          mode because the title bar of your page will say <<Library Item>>

       2. Make the changes to the item.

       3. Close the file and when prompted, save the changes and update the
          pages using the Library item. If you get to the Update pages dialog
          box, click Update. Close the Update pages dialog box when you are
          done review it.

       4. Look at a page the uses the Library item and make sure that the
          changes were updated.

Web Editors: Dreamweaver                                                           44
                               Now You Try It
                                 Activity 5
Now that you know how to create a template and library items go a head and try
it. Create a template have the template include the following:

       !   Background Color or image
       !   An editable region for text.
       !   An editable region for an image
       !   One locked region containing an image or text

Apply the template to a couple of pages. Try modifying the template and see that
the pages using the template were updated. Create at least one Library item.
Apply the library item to a couple of pages. Some ideas for Library items are:

       !   Copy right statement
       !   Text navigation for your site
       !   Web Master contact information
       !   Page update information
       !   Logo

Web Editors: Dreamweaver                                                      45
Web Editors: Dreamweaver   46
                                Section 6
                           JavaScript & DHTML
Dreamweaver will writes JavaScript Rollovers for you without you ever having to
write the script. This can save you some times days of programming.

Creating a Rollover
A Rollover is a graphic that changes when you put your mouse over it. Rollovers
are great visual clues to show that a graphic has a special purpose such as a
link. Let’s learn how to create a “swap” image rollover. This type of rollover
requires two images that have the same dimensions. Let’s make one.

       1. Create a new page by going to File > New Window. Save your page.

       2. Go to Insert > Rollover in the pull down menus or click on the Insert
          Rollover        button on the Objects Palette.

       3. The Insert Rollover dialog box will appear.

       4. Use the Browse… button to locate your original image (the one that
          will be initially shown on your page) and your Rollover Image (the one
          that will replace the original image on the mouse over).

       5. In the When Clicked, Go To URL box Browse… to the location of the
          file you want to link to or type in the URL of an outside web page.
          Click OK when finished.

Web Editors: Dreamweaver                                                          47
               NOTE: If you do not what to add the link yet just leave the box alone. The
               # symbol makes the rollover a link to nothing but it is it creates a link
               which is necessary to make the rollover work.

       6. Your original image will appear on your page.

       7. Open the Behaviors window by clicking on the Behavior
          button in the Launcher or go to Windows > Behaviors in the pull down

       8. Make sure that your image is selected. Notice the event and action in
          the behavior window. This will tell you what is happening with your

       9. Open the HTML window and look at all of the code that has been
          added. This is the JavaScript that Dreamweaver has created for you.

       10. You will not be able to see the rollover in Dreamweaver you must
          preview it in a Browser. Press F12 or go to File > Preview in
          Browser… from the top pull down menu. Try your rollover.

Creating Pointer Rollovers
Pointer Rollovers re-use one image that follows mouse around. With this type of
rollover you will need a table to hold the images in place.

       1. Create a table to hold your images. Here is an example table.

Web Editors: Dreamweaver                                                               48
       2. Add the images that you would like to make links in the appropriate

       3. The Pointer Rollover requires three images. The link image (we just
          added), the image that will show up when you move your mouse over
          the link and a blank image. In the cells where you would like the image
          to show up place a blank image. Go to Insert > Image and find the
          blank image to insert.

       4. Once you have inserted the blank image in all the appropriate cells
          select one of the images.

       5.    In the Property Inspector window, in the box below the image size,
            give the image a unique name (blank1).

Web Editors: Dreamweaver                                                          49
       6. Repeat the above step for all cells containing the blank image. Make
          sure that you give each a unique name, if you don’t your rollover will
          not work. (Numbering them works well i.e. blank2, blank3, and blank4.
          Don’t use spaces)

       7. Now that you know how to name an image repeat the above steps for
          each of the link images as well. Give each image a unique name.

       8. Open the Behavior window by going to Windows > Behaviors or
          clicking the Behavior button on the Launcher.

       9. Select one of your link images. In the Behavior window click on the
          plus sign button. Select Swap Image from the from the popup menu.

       10. Select the corresponding blank image name from the Image: list. Click
           the Browse… button and select the image that you want to appear on
           the mouse over. Click OK when finished.

Web Editors: Dreamweaver                                                      50
       11. Repeat the above process for all of the link graphics. Preview your
           results in a browser. They should look something like this:

Rollover Menus using Show/Hide Layer
Rollover menus are a very popular way to provide quick navigation for your
users. To create a rollover menu you will be using the show/hide layer behavior.

       12. Create a layer or table to hold each initial rollover graphic or text. Here
           is an example.

Web Editors: Dreamweaver                                                            51
       13. Add the images that you would like to make links in the appropriate

       14. Create a layer and content for each menu item that will appear when
           you rollover the initial images that we just added. For instance in the
           above example, we will want to make four layers.

       15. Give each layer a name. Select a layer, In the Property Inspector
          window, in the box below the LayerID, give the image a unique name

Web Editors: Dreamweaver                                                             52
       16. Repeat the above step for all layers containing a menu. Make sure
           that you give each a unique name. (Only use letters and/or numbers
           with no spaces)

       17. Open the Behavior window by going to Windows > Behaviors or
           clicking the Behavior button on the Launcher.

       18. Select one of your rollover images. In the Behavior window click on
           the plus sign button. Select Show/Hide Layers from the from the
           popup menu.

       19. Select the corresponding menu layer name from the Named Layers:
           list. Click the Show button. Select the other menu layers that you
           want to be hidden, and click the Hide button. Click OK when finished.

Web Editors: Dreamweaver                                                         53
       20. The behavior should show up in the Behaviors window.

       21. Make sure that the Events column has (onMouseOver). If it does
          not select the behavior and click on the arrow. Select (onMouseOver)
          from the pull down menu.

                  Note: If your list does not have that option change the Events
                  For: to 4.0 and Later Browsers.

       22. Repeat the above process for all of the rollover graphics.

Web Editors: Dreamweaver                                                           54
       We want to create on additional layer that will cover the entire menu area.
       The purpose of this layer is to hide any menu that is open once the user
       has moved the mouse off the menu area.

       23. Create a large layer extending slightly past the menu area. Give this
           layer a name (i.e. hide)

       24. Insert a blank image into the hide layer. To add a behavior to the
          layer you must have a something to attach it. The graphics also
          provides surface area for the mouse to rollover and trigger the

       25. Select blank image. In the Behavior window click on the plus sign
           button. Select Show/Hide Layers from the from the popup menu.

       26. Select ALL menu layers from the Named Layers: list. Click the Hide
           button. Click OK when finished.

       27. Once all behavior have been added open the Layers window by going
           to Windows > Layers.

Web Editors: Dreamweaver                                                           55
       The layers window allows you to change the order of your layers as well
       as the initial visibility of the layer when the page is loaded.

       28. Move the hide layer to the bottom of the list by selecting the layer
           name. Click and dragging the layer to the bottom of the list. This puts
           the hide layer under all of the other layers.

       29. Hide all of the menu layers by clicking in the first column (under the
          eye) until a closed eye icon appears.

       30. The menu layers will disappear from your document window.

       31. Save your work. Preview your results in a browser. They should look
           something like this:

Web Editors: Dreamweaver                                                            56
Opening a New Browser Window
Sometimes there just isn’t enough room to put all the information on one page
but the additional information you need to add won’t fill up a full browser window.
What to do? Well you can put your information in a customized browser window.
For example you may have a page that shows students how to do a science
experiment. You would like to give them a list of items they need to gather but
you do not have enough room on your screen to give the list. You could make the
text “gather items” a link that opens the list is a smaller browser window.
Providing the students with the information without taking them away from the
main page. Let’s learn how to do this.

       1. Select the text or image that you would like to make the link.

       2. In the Properties Inspector make sure that in the Link text box there
          is a #.

       3. Open the Behavior window by going to Windows > Behaviors in the
          top pull down menu.

       4. Click the Plus button in the Behavior window and from the pop-up
          menu select Open Browser Window. The Open Browser Window
          dialog box will appear.

       5. Click the Browse… button next to the URL to Display text box and
          browse to the .html file you want to display in the new browser window.

       6. Set the browser window size by filling in the Window Width and
          Height amount is pixels. Try a width of 310 and a height of 350. You
          may want to experiment with sizes depending on the content you want
          to display in the window.

       7. Put a check mark next to the attribute items you want displayed in the
          new browser window.

       8. In the Window Name: text box give the new browser window a name.
          This is necessary for the JavaScript to work.

       9. Preview your page in a browser by pressing F12.

Web Editors: Dreamweaver                                                         57
       10. If you need to edit the window properties just go to the Behaviors
           window and double click on the Open browser window behavior.

DTML stands for Dynamic Hypertext Markup Language. DHTML is a combination
of HTML, JavaScript, Style Sheets, Absolute Positioning, Plug-Ins, and DOM.
DHTML is use to add animation and interactivity to your web site.

               NOTE: Before you decide to use DHML in your web site you should
               know that DHTML is not supported on browsers older than the 4.0
               versions. Consider you audience before using it.
Dragging Layers
With DHTML you can create animation and interactive pages let’s learn how to
create an interactive site. DHTML will allow you to drag items on a page and
place them in a designated location.

           1. Create a new page by going to File > New Window.

           2. Use the Insert Draw Layer object to drag a layer on the page. You
              must use layer to make this interaction work correctly.

           3. Put your cursor inside the layer and an image. You can only drag
              layers with an image.

           4. Select the layer by clicking on the top handle. In the Property
              Inspector window, type the name of your layer under the layer ID.
              The Name should be somewhat related to the layer content.

           5. Create another layer using the Insert Draw Layer object from the
              object palette.

           6. Insert another image in the new layer. Select the layer and give it a
              name in the Property Inspector.

Web Editors: Dreamweaver                                                         58
           7. Move the layer to the “final” position on the screen. In this case we
              want our end users to move the second layer, the crown, on top of
              the monkey’s head.

           8. Select the image or text inside of the second layer. You must
              select the image because the behavior we are going to add need to
              be connected to the image not the layer.

           9. Open the Behaviors window (Window > Behaviors) and make
              sure that 3.0 + 4.0 Browsers is selected in the Events for: text
              box. Click on the Plus sign button and select Drag Layer.

           10. The Drag Layer dialog box will appear. In the Layer drop down
              box select your second layer. Make Movement: Unconstrained
              and click on the Get Current Position button. In the Snap If
              Within: text box type 50. Click OK. Your box should look something
              like this:

           11. Move the 2nd layer to a location on your page were you want it to
              be initially when you first come to the page.

Web Editors: Dreamweaver                                                           59
           12. Preview your result in a browser by pressing F12. As you test the
               page notice that as you get the layer with in 50 pixels of your “final”
               position it snaps to the exact location.

           13. That is all there is to it. You can add as many layers as you would

Using Timelines for Animation
We can take the last example and make it animated. For example we can have
the crown automatically move to the monkey’s head. Let’s do that:

           1. Use the last examples page setup. On your page you should have
              two layers with images inserted in both.

           2. Have the layer you want animated in the location where it is to
              begin in the animation.

           3. Open the Timeline window by go to Window > Timelines.

           4. Drag the layer you would like to animate by its handle. Drag it to the
              time line window into Channel 1.

           5. The two dots in the timeline are key frames. The first key frame
              indicates the beginning of the animation and the end key frame
              indicates the end of the animation. Select the last key frame by
              clicking it.

           6. Drag the animation layer by the handle to the ending point of the
              animation. Make sure that you take the entire layer not just the
              image. You should see a gray line on our screen. This line
              represents the path the layer will take in the animation.

           7. Make sure that the AutoPlay check box is checked. This tells the
              browser to start playing the animation as soon as the page is

Web Editors: Dreamweaver                                                             60
           8. Preview your work in a browser by pressing F12.

           9. You can add other layers of animation by adding more layer and a
              dragging them to the timeline.

Web Editors: Dreamweaver                                                     61
                           Now You Try It
                             Activity 6
Create a Rollover
In your example_graphics folder there is a rollover folder. Take the graphics
inside the folder and create a rollover button. Put the button on a new page or
one that you have already created. Make the button a link to a page already in
your site or to an external web page.

Create a Drag Layer Page
In your example_graphics folder there is a Layer folder. Take the graphics inside
the folder and create a matching game using the Drag Layer behavior.

Web Editors: Dreamweaver                                                          62
                      Dreamweaver Resources

Recommended Books
1. Weinman, Lynda, Dreamweaver 3 Hands-On Training. Peachpit Press 2000.

2. Towers, J. Tarin, Dreamweaver For Windows and Macintosh. Peachpit Press

3. Macromedia Dreamweaver2, Using Dreamweaver. Macromedia Inc. 1998.

4. Lowery, Joseph, Dreamweaver 3, Bible IDG Books Worldwide, Inc. 2000.

Dreamweaver Extensions and Extras
1. Dreamweaver Depot: http://people.netscape.com/andreww/dreamweaver/
   One of the largest repositories of Dreamwaver actions, objects and
   commands on the internet.

2. Dreamweaver Extentions Database: http://www.idest.com/cgi-
   bin/database.cgi Search an extensive database which includes all of the
   Dreamweaver extensions.

3. Yaromat: http://www.yaromat.com/dw/index.html
   Contains several useful Dreamweaver extensions, including on for importing
   fireworks created Rollovers.

4. Dreamweaver’s Fan Page: http://www.massimocorner.com/
   A great resource for Dreamweaver extensions, behaviors, commands, and

Web Editors: Dreamweaver                                                     63
Web Editors: Dreamweaver   64
                                   Now You Try It
Credit is available in two forms: university credit from Southern Utah University for
recertification or inservice credit from the State Office of Education. To receive credit,
return the following assignment with in one month of final class date to:

       UEN Staff Development
       201 Milton Bennion Hall
       1705 Campus Central Drive
       University of Utah
       Salt Lake City, UT 84112-9250

or via fax at (801)585-9040. If you request State credit, your request will be forwarded to
the State Office of Education for final approval. If you request university credit, an
application form will be returned to you which you can fill out and send back with the fee
to SUU. Forms must be returned by the following deadlines: November 1st (fall
semester), March 10th (spring semester), August 1st (summer semester).

Name______________________                            SS#_______________________

Address____________________                           Class Title__________________

         ____________________                         School_____________________

Date Attended_______________                          District_____________________

Instructor ___________________

Type of Credit:                University (SUU)                       State Office
                               500 Level – Graded                     No Charge
                               $15.00/per credit
Create a web site using Dreamweaver. You can download a free 30-day trial by going to
Include in your web site:
    • At least 5 pages.
    • Use at least one template and library item
    • Use at least one rollover
    • At least one of your pages needs to use layers.
Save your Local Root Folder and all of it’s content on a disk. Send the disk and this
paper to the above address.

Web Editors: Dreamweaver                                                                     65
Web Editors: Dreamweaver   66
                           Course Evaluation
Course Title
Date of Class

Please give both a numerical rating and an explanation. On numerical items, 1
means poor, 2 means fair, 3 means average, 4 means good, and 5 means very

Overall, how would you rate your course experience as compared to other
inservice you have received?     1     2      3     4    5

Compared to other UtahLINK Training you’ve taken, how would you rate this
course?   1      2     3     4     5

What was the best part of this class?

List three ways this class could be improved.

What should the course spend more time on or cover that it doesn’t?

In terms of curriculum, what should the course spend less time on?

Web Editors: Dreamweaver                                                        67
How would you rate the clarity of the curriculum? 1 2 3 4  5

How would you rate the delivery of instruction? 1 2 3  4    5

How would you rate the knowledge of your instructor/s? 1 2 3 4 5

How would you rate the accessibility of instructors and level of personal
attention? 1       2     3     4       5

How would you rate the manual quality? 1  2      3    4    5

How would you rate the pace of instruction? Too Fast Good Too Slow

What will be your biggest obstacles to implementation of what you learned?

Please rate your past experience with each of the following aspects of UEN
(leave an item blank if you have not experienced it)

Overall _____              Help Desk _____           Web Design ______
Training _____             Web Content_____          Installation Team ______

                           Please clarify!

Web Editors: Dreamweaver                                                     68

To top