Chesapeake College by pengtt

VIEWS: 109 PAGES: 160

									                                   Chesapeake College
                                   Website Development
                                    Instructor’s Notes




Contents
  Introduction to HTML ......................................................................... 2
  Learning Goals .................................................................................. 3
  Preamble: A Web Primer .................................................................. 4
  Unit A: Creating an HTML Document ................................................ 9
  Unit B: Formatting Text with Dreamweaver .................................... 13
  Unit C: Inserting Tables, Graphics, and Image Maps ..................... 21
  Unit D: Using Forms to Control Input .............................................. 29
  Unit E Working with Page Layout Tables ....................................... 40
  Unit F: Working with Behaviors ....................................................... 52
  Unit G: Working with Styles ............................................................. 63
  Unit H: Working with Templates ...................................................... 78
  Unit I: Controlling Page Layout ...................................................... 91
  Unit J: Scripting for Web Pages ..................................................... 99
  Unit K: Working with Media Objects .............................................. 118
  Unit L: Animation and Behaviors .................................................. 126
  Unit M: Putting Your Page on the Web ......................................... 146




Page 1/Instructor Notes/Website Development/Version 3.5/Reynolds
                                     Introduction to HTML
The basic idea is this... A web page is nothing more than a file, an HTML file to be exact. It's called
HTML because web page documents have the file extension .html or .htm. HTML stands for Hyper
Text Mark-up Language. A static website comprises a set of related HTML pages and files hosted on
a computer running a web server. A web server is software that serves web pages in response to
requests from web browsers. A page request is generated when a visitor clicks a link on a web page,
selects a bookmark in a browser, or enters a URL in a browser’s address text box.




The final content of a static web page is determined by the page designer and doesn’t change when the
page is requested. This HTML content can be created in many environments ranging from the simplest
text processors like Notepad and WordPad that came in the Accessories folder bundled free with
your computer’s operating system, to the most sophisticated and expensive such as the
Adobe/Macromedia Suite. Here’s an example of a very simple set of HTML elements typed in
WordPad and then saved as a file with the file extension of .htm. After it is typed and saved, it can be
“presented” by any version of any “browser” such as the display on the left below from Microsoft’s
Internet Explorer 7.0.




Page 2/Instructor Notes/Website Development/Version 3.5/Reynolds
The paired HTML elements <HTML>…</HTML> are “parsed” by the browser and used to determine
that the data between the first and the last define a Hyper Text Mark-up Language document. The
<HEAD>…</HEAD> elements, in turn, tell the browser that anything found between the two
members of the pair is to be considered as the document’s heading area, where information about the
overall document is coded, including its title. The <TITLE>...</TITLE> element pair formats the
document’s title, which appears in the blue bar at the top of the browser window. The
<BODY>...</BODY> element pair identifies the document’s body area, which contains the Web page
contents that appear in the browser window with the sizes determined by the <H1>…</H1> pairs.

Note: Strictly speaking, a "static" page may not be static at all. For example, a rollover image or Flash
content (a SWF file) can make a static page come alive. However, during most of this course we will
be referring to a page as static if it is sent to the browser without modifications.




                                      Learning Goals
       In Unit A we will learn the simple rules of creating a webpage with HTML syntax using the
       Notepad as a native development environment and IE 7.0 or 8.0 to view the results. We will
       also create one relative link to another page in the Local Web Site and two absolute links to
       other sites on the Internet
       In Unit B we will learn to launch the Adobe Dreamweaver application, navigate within the
       Dreamweaver window, and create a Local Web Site. Then, we will reuse the page created by
       Notepad in Unit A to insert and format a heading and date, create an ordered list, create an
       unordered list, format characters, change the text color, change the web page title, check
       spelling, control font selection, customize fonts, and align fonts to create an outline for our
       website to be.
       In Unit C we will use Dreamweaver to create a new “Home” page for our web site, insert a
       table to hold pictures, work with pictures to insert, change, and overlay text, copy hypertext
       enabled text from a Word document, and insert an Image Map with links to other pages.
       In Unit D we will use Dreamweaver to create a Form to control input, add some text entry
       fields, add radio buttons, add checkboxes, create a pull-down menu, validate form field entries,
       and add a push button to place an order.
       In Unit E we will use Dreamweaver to learn how to use images, background color, and
       advanced Table Properties to design fixed width and flexible page layouts for various display
       sizes.
       In Unit F we will enhance the user experience by introducing Dreamweaver Behaviors. We
       will use the Behaviors panel to add actions and events, create rollover images, swap two
       images with one event, use pop-up message, open new windows, and attach a behavior to a
       hotspot on an image map.
       In Unit G we will we will learn how to use styles in Cascading Style Sheets (CSS). We will
       try to get an understanding of CSS, create some styles from scratch, create and apply some
       Class Selector styles, and then create an external style sheet.
       In Unit H we will create a Dreamweaver Template document to maintain consistency in
       adding pages of dogs and their descriptions to our website, to create a cascading style sheet for
       the elements on the template, and to apply this template to some new pages describing an
       English bulldog and other dogs.
Page 3/Instructor Notes/Website Development/Version 3.5/Reynolds
       In Unit I we will describe the advantages and disadvantages of using Frames on a Web page.
       Next we will describe frameset layout and properties, create a frameset and frames, define
       frames and describe how they work, delete a frame, set the properties for a frame and for a
       frameset, apply and modify the properties of a frame. Finally we will add static content to a
       frame using the main content frame, add Flash buttons as navigation elements, and then save
       the frame and frameset.
       In Unit J we will overview JavaScript, create an initial script to say “Hello World”, and then
       develop a script to calculate the number of seconds in a day. Then we will briefly introduce the
       new Spry features for Adobe Dreamweaver CS3 including a look at some of the useful Spry
       Objects. Finally we will insert a Spry Object for the collapsing of DHTML code and create a
       Cascading Menu for the WD Home Page.
        In Unit K we will introduce students to Dreamweaver's Media Objects. We will add a splash
       page with Flash text, a Flash movie, and a link to an audio file. Next we will add a link to the
       index page from the splash page and open a page to embed an audio file with controls. We will
       then add a video to the page and learn about the Results panel group and how to use the Link
       Checker. Finally, we will learn the general procedure for adding Shockwave movies and Java
       applets to web pages.
       In Unit L we will introduce students to Absolutely Positioned (AP) elements and review their
       use as design Layers which are HTML containers that hold text, graphics, tables, forms, media
       objects, and other layers We will learn to use the Layers panel to create and modify layers, we
       will design a CSS-Positioned Page Layout and then add a Show-Hide Layers Behavior and
       add an Animation.
       In Unit M we will look at some of the aspects of Putting Your Page on the Web including a
       description of how web hosting works, acquiring domain names, acquiring web space, and
       transferring files.

Note: Throughout the Instructor’s Notes all of the exercises to be completed by the student are in
shaded boxes with a numerical step sequence.




                                      Preamble: A Web Primer
Think of the web as the illustrated version of the Internet. It began in the late 1980's when physicist Dr.
Tim Berners-Lee wrote a small computer program for his own personal use. This program allowed
pages, within his computer, to be linked together using keywords. It soon became possible to link
documents in different computers, as long as they were connected to the Internet. The method used to
transfer and link such documents is called HTTP (Hypertext Transfer Protocol). The web remained
primarily text based until 1992. Two events occurred that year that would forever change the way the
Web looked. Marc Andreessen developed a new computer program called the NCSA Mosaic (
National Center for Supercomputing Applications at the University of Illinois) and gave it away! The
NCSA Mosaic was the first web browser. The browser made it easier to access the different Web sites
that had started to appear. Soon web sites contained more than just text, they also had sound and video
files.



Page 4/Instructor Notes/Website Development/Version 3.5/Reynolds
Each web site has an address, or Uniform Resource Locator (URL). The URL contains a set of
instructions that are read by the browser.



The beginning of the URL contains the protocol. This is usually "http" (Hypertext Transfer Protocol)
or "ftp" (File Transfer Protocol). The second section of the URL reveals the domain. Directories
follow the domain. Lastly is the name of the document. (If no document is named, the browser will
automatically open any document in the directory named "default" or "index").




            Online Services and ISPs
If you decided to access the Internet with AOL, MSN, or Prodigy, these Online Service Providers
bundled everything that you needed into the software that usually comes on a CD or is pre-loaded on a
computer that you buy. The “techno-dweebs” say that if the Internet were a bicycle, using AOL or
MSN is like having a bike with the training wheels on. That can save you a lot of time and it’s an easy
way for novices to learn. Once you get some Internet experience you may decide to "go it on your
own" and hook up with an Internet Service Provider (ISP). You may find that the service is just as
good or better and the monthly fee may be less. If you decide to use an ISP, you may need to stock up
on some tools. Before you cancel your membership with your online service provider ask the OSP
which software they provide and which software you will need to obtain yourself. This way you will
be able to download whatever you need while you're still connected to an online service.

Internet Related Tools
    Connection Wizard
    Electronic Mail (Outlook Express, Outlook, Eudora, Hotmail, iName, Bigfoot, Lycos Email)
    Internet Relay Chat (IRC, AOL Instant Messenger, MSN Messenger)
    Search Engines (Yahoo!, Excite, AltaVista, Google, Lycos, WebCrawler, Ask Jeeves!, HotBot)
    Media Software (Acrobat Reader, QuickTime, Windows Media Player, Real Player,
      Shockwave, Flash, Macromedia)

The downside of the online service provider experience is that the bundling tangled up our
understanding of the toolset and the various components of the internet experience such as a Point of
Presence (POP). The POP is a place for local users to access the company's network, often through a
local phone number or dedicated line. The amazing thing here is that there is no overall controlling
 network. Instead, there are several high-level networks connecting to each other through Network
Access Points or NAPs.

Page 5/Instructor Notes/Website Development/Version 3.5/Reynolds
Internet Browser
In the introduction to this course, I started talking about browsers without really giving them much of
an introduction. For the basic, no hassle, Internet experience all you really need is a web browser.
Web browsers "read" the HTML text and convert it into pages of text and graphic images. Currently
there are many versions of many web browsers available. The Microsoft Internet Explorer and the
Firefox Mozilla are the most popular. Critics frequently disagree over which browser is superior. Most
people prefer whichever browser they used first. All browsers can be obtained over the Internet. Feel
free to download whichever one you are not currently using and take it for a test drive. There is no
charge for any of them. For the budding website developer, the hugely important thing to remember is
that out there in cyberspace there is a huge legacy of browser interpretations and machines that your
HTML might end up on. Although industry standards for each version of HTML are issued by an
independent organization, the W3C (World Wide Web Consortium), in practice it’s rare for browsers
to fully comply with these standards. As a result, each browser brand and release version supports
different subsets of each version of HTML, and may interpret the features differently. As long as
different browsers and operating systems are available among Web users, Web page design will
continue to require care, experimentation, and extensive testing in order for pages to appear similarly
across platforms. Prepare for different screen sizes and resolutions; Palm Pilots, Cell Phones, Macs,
and PCs with different contrast settings, color interpretations, and font libraries.


Page 6/Instructor Notes/Website Development/Version 3.5/Reynolds
Browser 101
Most of you out there in reader land will be mad at me for this baby stepping, but just in case your
workaday introductions to browsers have missed making you aware of some of their features, I will
beg your pardon and be as brief as I can be.




Probably the most important part of your Web browser is the Address or Web Location box. This is
where you enter the Uniform Resource Locator (URL), the Web address of the Internet site that you
want to visit. Every URL is unique and is used to differentiate one Web page from billions of others.
When the address box is selected with the mouse, the URL in the box should be highlighted. If it is
not highlighted, select all of the text with your mouse and press delete to remove the address in the
box. The URL that was originally in the address box was the address of your home page. Your home
page is the first page that automatically loads when you open your browser or create a new window.

You should be aware that every time you visit a Web site, a cookie can be saved in your hard drive. A
cookie is information created by Web sites enabling them to collect information about you. It provides
a way for the Web server to keep track of your habits and preferences and, with the cooperation of the
Web browser, to store the information on your hard drive.

                                          Saving a Webpage
Click in the Address bar and type:
     http://                        (Protocol)
     antwrp.gsfc.nasa.gov/         (Domain Name)
     apod/                          (Directory)
     astropix.html                  (Document)
    1. After the picture loads, select File, Save As from the Internet Explorer Menu bar
    2. Type astropage.html in the File name text box of the Save As dialog box
    3. Click on the New Folder icon to create a folder in My Documents called My Downloads
    4. Click Save to save this web page in your new My Downloads folder



Page 7/Instructor Notes/Website Development/Version 3.5/Reynolds
                                         Saving a Graphic
    While still at http://antwrp.gsfc.nasa.gov/apod/astropix.html
    Right-click anywhere on the graphic and select the Save Picture As option. You can then save
     the picture to My Downloads or use it as your computer wallpaper




                                 To Snapshot and Save any Screen
Any time that you want to “take a picture” of a single application display or collection of tiled
windows:
1. Press the Print Screen button on your keyboard to capture the screen image on your Windows
   Clipboard so that you can then paste it into another presentation with your regular “paste” function
   or by holding the Ctrl key down while pressing the “V” key on the keyboard.
2. Hold down the ALT key and press the Print Screen button on your keyboard to capture the
   currently active screen window image on your Windows Clipboard.
3. You can then Paste the clipboard screen image into Microsoft Paint or any other application.




                                     Copying Text from the Web
1. Click Start, Programs, Microsoft Word and open it with a double click or a single click plus a click
   of the Open button
2. Click on the minimized Internet Explorer on your Task Bar to re-establish it as your active window
3. Click and drag your mouse across any sentence or paragraph in the Internet Explorer window
4. Select Edit from the Menu bar and click Copy to copy the selected text to the Clipboard
5. Click on the minimized Microsoft Word on your Task Bar to re-establish it as your active window
6. Place the cursor insertion point anywhere in the blank document
7. Right-click the mouse and choose Paste to write the selected text into the document
8. Note: You may also use the keyboard shortcut Ctrl+C to Copy and Ctrl+V to Paste

Page 8/Instructor Notes/Website Development/Version 3.5/Reynolds
                          Unit A: Creating an HTML Document


Learning Objectives for Unit A
    Basic Understanding of HTML
    Plan an HTML document
    Write a simple HTML document
    Preview and edit a web page
    Create links to other web pages
    Print an HTML document


HTML is the standard language used for all pages on the World Wide Web. It allows various
computer systems to interpret the information on the web in the same way. A Web page, also called an
HTML document or an HTML file, is simply a text file made up of text and HTML instructions. Each
of these instructions is commonly referred to as a tag. In general, HTML works by surrounding each
page element—such as a heading, or the text for a table—with a pair of tags. The first tag indicates the
beginning of a specific feature, such as boldface for text. The second tag marks the location in the
document where the feature ends. The first illustration on the next page shows an example of the use
of an <H1>...</H1> tag pair in an HTML document. This tag pair formats text as a heading. HTML
includes hundreds of different tags, which allow you to describe the way that you want each of your
Web page elements to appear in browsers. The second illustration shows the appearance in a
Microsoft Internet Explorer 7.0 browser of the <H1>...</H1> and <strong>…</strong> tag pairs
from the first illustration.




HTML Terminology Tour
   Elements: Things that represent structure (such as a paragraph) or a desired behavior (such as
    a particular font)
   Markup Tags: Consist of a left angle bracket (<), followed by the name of the tag, and then a
    right angle bracket (>). Tags usually come in pairs in order to act as containers of the affected
    text. The second tag in a pair looks just like the first, except that a slash precedes the name.
            <TagName>Your Text</TagName>
   Properties: Provide additional information about elements—such as a name or instructions on
Page 9/Instructor Notes/Website Development/Version 3.5/Reynolds
       how the element should be displayed. Attributes are used to add properties to elements and are
       included in the angle brackets that surround the starting element tag. Attribute values are
       placed in double or single quotation marks:
               <TagName AttributeName=”AttributeValue”>Text</TagName>

Planning an HTML Document
    Sketch Your Web Page
    Enter structuring tags for the file
    Enter each Web page element, along with its formatting tags
    Preview the Web page
    Test hyperlinks

Using a Text Editor versus a Word Processor or HTML Page Generator
Many word processors, such as Microsoft Word, offer a “Save As HTML” command in the File menu.
This feature allows you to create and format a document using word processing features with which
you are familiar, and then automatically create a Web page that contains the same information and
layout. Such a feature makes Web-page authoring possible even for people who don’t know anything
about HTML. However, this automated method has its drawbacks. In some cases, page elements do
not appear in a Web browser exactly as they did in the word processor. Also making any changes to
the Web page requires regenerating the HTML code from the word processor. On the other hand,
creating pages by entering the HTML tags yourself—known as hand-coding—gives you more precise
control over the exact appearance of your Web pages. Additionally, you can fine-tune a page’s
appearance by making direct and specific changes to the HTML code. While it will add to your
difficulties, I have decided to have you learn to use the Notepad plain-text editor to complete the first
unit of this course. In Unit B, we will switch to the Adobe Dreamweaver text editor to simplify the
process of creating the HTML code.


                                  Write a Simple HTML Document
Create a new folder on your desktop and name it WebDev
1. Click Start on the taskbar, point to Programs, point to Accessories, and click Notepad
2. Type the following initial text and click File/Save As to open the Save as dialog box
3. Look in Desktop/WD Student Files and save as WD-Outline.htm
   <HTML>

   <HEAD>
   <TITLE>TWD Outline</TITLE>
   </HEAD>
   <BODY>
   Whatever
   </BODY>
   </HTML>




Page 10/Instructor Notes/Website Development/Version 3.5/Reynolds
                                       Preview and Edit a Web Page
           1.   Click to the left of “Whatever” and type <h1>Travels with Diesel </h1>
           2.   Select “Whatever” and then double-click WD Student Files/documents/WD-
                Outline.doc to launch Microsoft Word where you will click Edit/Select All and then
                use CTRL + C to copy all of the text.
           3.   Close Microsoft Word and then paste the text on the Clipboard as a replacement for
                the word “Whatever” in your Notepad document
           4.   Click to the left of the word ” Introduction” and type <p>
           5.   Save the file and then to double click it to open the file “WD-Outline.htm” using
                Internet Explorer. A web browser can open a web document from any location to
                which it has access including your local hard drive.
           6.   After reviewing “WD-Outline.htm” in Internet Explorer for a moment, go down to the
                task bar at the bottom of the window and reactivate your Notepad text editor.




Creating Absolute and Relative Links
HTML allows you to format target addresses for links in two different ways. An absolute link includes
the page’s full web site location and directory information. Absolute links are most useful to reference
a specific page on a different Web site. Sample absolute link code might read <A
HREF=”http://www.course.com/sl/default.htm”>. This code provides the browser exact instructions
of how to reach the page—including the URL, directory, and the Web document name. A relative
link, on the other hand, includes only information about the target page. A link to another page in the
same directory as the current might read<A HREF=”construction.htm”>. This link doesn’t contain
URL or subdirectory information, just a filename. Relative links make it easy to reference other pages
in your Web site without needing to type the entire path to each page. In addition, relative links ensure
that link information within your site remains valid even if the pages are moved—which is almost
always necessary when the pages are finally published to the Web. Before formatting a link, therefore,
it’s important to think about which link format is more important.




Page 11/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Creating Links to Other Web Pages
           1.    Click to the right of the last word in your body text (students) and type </p> to treat the
                 preceding block of text as a continuous paragraph, then press the [ENTER] key twice
                 to skip a line.
           2.    Type <BR>, press [ENTER], then type
           3.    <A HREF="WD-Resume.htm">about me</a>
           4.    Type <BR>, press [ENTER], then type
                 <A HREF=”http://missingmanuals.com/cds/creatingwstmm”>about websites</A>,
                 then press [ENTER]
           5.    Type <BR>, press [ENTER]
           6.    Type < A HREF=”http://www.travelswithdiesel.com”>about TWD</A>
           7.    Save your work and reactivate the IE browser from the taskbar
           8.    Click the Refresh button
           9.    Click one of the links
           10.   Click the browser’s Back Button
           11.   Again, click the Notepad text editor to reactivate it.




Creating and Linking to a Named Anchor on the Same Page in Dreamweaver
Absolute and Relative Links point to the URL of other pages but the anchor tag has another attribute
called “name” that you can use to create an invisible marker on your page. Then you can provide a
link to that invisible marker, which, Dreamweaver calls a named anchor. In long documents that
require a lot of vertical scrolling, it’s a good idea to provide a link back to the top of the page. First
you click at the top of the page and Insert/Named Anchor. Next, you type an anchor name in the
Named Anchor dialog box. Finally, you select the text or image that you want to use as a link to this

Page 12/Instructor Notes/Website Development/Version 3.5/Reynolds
location and type # followed by the anchor name in the Link text field on the Properties panel.
You can also insert a named anchor on one page and then create a link to the anchor from another
page. You simply insert an anchor, type an anchor name in the Named Anchor dialog box, and then
select the text or graphics on the referring page that you want to use as a link. Click in the Link text
field on the Properties panel and then type the name of he destination file followed by # and the Name
of the Named Anchor..
                                      Printing an HTML Document
    1. In your Notepad text editor, click File, then click Print. The text editor prints a single copy
    2. Click the Internet Explorer button in the taskbar.
    3. Click the Print button on the toolbar, then, if necessary, click OK.
    4. Click the browser window Close button
    5. If necessary, click the text editor program button on the taskbar, then click the text editor
    window Close button.




                      Unit B: Formatting Text with Dreamweaver

Learning Objectives for Unit B
    Brief Introduction to Adobe Dreamweaver
    Inserting and Formatting a Heading and Date
    Create an Ordered List
    Create an Unordered List
    Creating a Local Website
    Formatting Characters
    Adding Names and Dates
    Changing the Text Color
    Changing the Web Page Title
    Checking Spelling
    Controlling Font Selection
    Customizing and Aligning Fonts

As promised, we will bid a fond farewell to the Notepad and begin Unit B with a quick introduction to
the Adobe Dreamweaver text editor. Dreamweaver is a professional HTML editor for designing,
coding, and developing websites, web pages, and web applications. Whether you enjoy the control of
hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you
with helpful tools to enhance your web creation experience. The visual editing features in
Dreamweaver let you quickly create pages without writing a line of code. If you prefer to code by
hand, however, Dreamweaver also includes many coding-related tools and features. And Dreamweaver
helps you to build dynamic database-backed web applications using server languages such as ASP,
ASP.NET, ColdFusion Markup Language (CFML), JSP, and PHP.

    The Dreamweaver Start Page
     The Start page enables you to open a recent document or create a new document. From the
Page 13/Instructor Notes/Website Development/Version 3.5/Reynolds
       Start page you can also learn more about Dreamweaver by taking a product tour or a tutorial.
       To choose a workspace layout you will select one of the layouts on the Dreamweaver
       Workspace Setup. The Designer workspace is an integrated workspace using MDI (Multiple
       Document Interface), in which all Document windows and panels are integrated into one larger
       application window, with the panel groups docked on the right. This layout is recommended for
       most users. The Coder workspace is the same integrated workspace, but the panel groups are
       docked on the left. This layout is recommended for HomeSite or ColdFusion Studio users and
       other hand-coders who want a familiar workspace layout.




The Designer Workspace

The Insert bar contains buttons for inserting various types of "objects," such as images, tables, and
layers, into a document. Each object is a piece of HTML code that allows you to set various attributes
as you insert it. For example, you can insert a table by clicking the Table button in the Insert bar. If
you prefer, you can insert objects using the Insert menu instead of the Insert bar.

The Document toolbar contains buttons and pop-up menus that provide different views of the
Document window (such as Design view and Code view), various viewing options, and some common
operations such as previewing in a browser.

The Document window displays the current document as you create and edit it.

The Property inspector lets you view and change a variety of properties for the selected object or
text. Each kind of object has different properties.

Panel groups are sets of related panels grouped together under one heading. To expand a panel group,
click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at
the left edge of the group’s title bar.


Page 14/Instructor Notes/Website Development/Version 3.5/Reynolds
The Files panel enables you to manage your files and folders, whether they are part of a Dreamweaver
site or on a remote server. The Files panel also enables you to access all the files on your local disk,
much like Windows Explorer (Windows) or the Finder (Macintosh).

Dreamweaver provides a variety of other panels, inspectors, and windows not shown here, such as the
CSS Styles panel and the Tag inspector. To open Dreamweaver panels, inspectors, and windows, use
the Window menu.




As we turn to Dreamweaver for the remainder of the work that we have started in the Notepad we
must first introduce the application to the WD Student Files folder.


                                     Opening Adobe Dreamweaver
   1. Click the Start button on the Windows taskbar, point to Adobe Dreamweaver CS3 on the
   Start menu or point to All Programs on the Start menu, and then point to Adobe Dreamweaver CS3
   on the All Programs menu
   2. Click Adobe Dreamweaver CS3
   3. Click File/Open and navigate to select “WD-Outline.htm” from the Desktop/WD Student
   Files folder where you left it at the end of Unit A. If necessary, maximize the Dreamweaver
   window and the Document window by clicking the Maximize button in the upper-right corner of
   the windows
   4. If the Insert bar does not display, click Window on the menu bar and then click Insert
   5. Click View on the menu bar, point to Toolbars, and then point to Standard on the Toolbars
   submenu
   6. Click Standard
   7. Press the F4 key
   8. Press the F4 key again to redisplay the panels
   9. Click View on the menu bar, point to Rulers, and then point to Show on the Rulers submenu
   10. Click Show
   11. Click Edit on the menu bar and then click Preferences
   12. Click the New Document category, delete .html as the default extension, and then type .htm as
   the default

Page 15/Instructor Notes/Website Development/Version 3.5/Reynolds
Setting General Preferences
Show Welcome Screen displays the Dreamweaver Start page when you start Dreamweaver or when you don't have any
documents open.

Reopen Documents on Startup opens any documents that were open when you closed Dreamweaver. If this option is
not selected, Dreamweaver displays the Start Page or a blank screen when you start (depending on your Show Start Page
setting).

Warn When Opening Read-Only Files alerts you when you open a read-only (locked) file. You are given the option to
unlock/check out the file, view the file, or cancel.

Update Links When Moving Files determines what Dreamweaver does when you move, rename, or delete a document
within your site. You can set this preference to always update links automatically, never update links, or prompt you to
perform an update. (See Managing links.)

Show Dialog When Inserting Objects determines whether Dreamweaver prompts you to enter additional information
when inserting images, tables, Shockwave movies, and certain other objects using the Insert bar or the Insert menu. If
this option is off, the dialog box does not appear and you must use the Property inspector to specify the source file for
images, the number of rows in a table, and so on. For rollover images and Fireworks HTML, a dialog box always appears
when you insert the object, regardless of this option setting. (To temporarily override this setting, Control-click (Windows)
or Command-click (Macintosh) when creating and inserting objects.)

Enable Double-Byte Inline Input enables you to enter double-byte text directly into the Document window if you are
using a development environment or language kit that facilitates double-byte text (such as Japanese characters).When
this option is deselected, a text input window appears for entering and converting double-byte text; the text appears in
the Document window after it is accepted. (See Setting Fonts preferences for Dreamweaver display.)

Switch to Plain Paragraph After Heading specifies that pressing Enter (Windows) or Return (Macintosh) at the end of
a heading paragraph in Design view creates a new paragraph tagged with a p tag. (A heading paragraph is one that's
tagged with a heading tag such as h1 or h2.) When the option is disabled, pressing Enter or Return at the end of a
heading paragraph creates a new paragraph tagged with the same heading tag (allowing you to type multiple headings in
a row and then go back and fill in details).

Allow Multiple Consecutive Spaces specifies that typing two or more spaces in Design view creates non-breaking
spaces that appear in a browser as multiple spaces. (For example, you can type two spaces between sentences, as you
would on a typewriter.) This option is designed mostly for people who are used to typing in word processors. When the
option is disabled, multiple spaces are treated as a single space (because browsers treat multiple spaces as single
spaces).

Use <strong> and <em> in place of <b> and <i> specifies that Dreamweaver should apply the strong tag whenever
you perform an action that would normally apply the b tag, and should apply the em tag whenever you perform an action
that would normally apply the i tag. Such actions include clicking the Bold or Italic buttons in the text Property inspector
in HTML mode and choosing Text > Style > Bold or Text > Style > Italic. To use the b and i tags in your documents,
deselect this option.

NOTE The World Wide Web Consortium discourages use of the b and i tags; the strong and em tags provide more
     semantic information than the b and i tags do.

Warn when placing editable regions within <p> or <h1><h6> tags specifies whether Dreamweaver displays a warning
message whenever you save a Dreamweaver template that has an editable region within a paragraph or heading tag. The message tells
you that users will not be able to create more paragraphs in the region. It is turned on by default.

Maximum Number of History Steps determines the number of steps the History panel retains and shows. (The default value should
be sufficient for most users.) If you exceed the given number of steps in the History panel, the oldest steps are discarded.

Spelling Dictionary lists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling conventions (such as
American English and British English), the dialects are listed separately in the Dictionary pop-up menu.




Page 16/Instructor Notes/Website Development/Version 3.5/Reynolds
Since one of our interests in Dreamweaver for this course is to use its HTML text editing capability,
we will momentarily leave the “Design” view by clicking the Code button at the bottom of the
contents page. The HTML code appears in two or three colors, depending on which features are
included in the Web page. Black text represents the content of your Web page, such as paragraphs and
headings. Blue text represents the HTML tags that format your text, such as <H1> and <BODY>.
Sometimes you’ll also see gray text, which represents a component, such as a hit counter, which counts
the number of visitors to a Web site.


                             Inserting and Formatting a Heading and Date
   1.   Click the Design view, click to the left of Travels with Diesel as the first text line of the
        document and then press ENTER to insert a line break. Click Insert/Date/OK to insert the
        current date as the second line.
   2.   Drag to select the first line of text and then click the Align Center button in the Property
        panel. Apply text color #336633 to the heading. Deselect the text and then press the ENTER
        key.
   3.   Click View on the menu bar, point to Visual Aids, and if necessary, deselect the CSS Layout
        Outlines and AP Element Outlines commands.
   4.   Click the Save button on the Standard toolbar.
   5.   Hide the panel groups and collapse the Property panel, if necessary.




                        Creating Ordered and Unordered Lists in Design View
1. Returning to Design view, click after each page reference in the paragraph and press ENTER to
stack the pages in a left aligned column
2. Make an ordered list of the first three entries and the last four entries using the List Items button in
the Properties inspector to reinitiate the numbers of the last four entries
3. Make an unordered list of the first remaining list entries




Page 17/Instructor Notes/Website Development/Version 3.5/Reynolds
Customizing List Numbering using the List Item Button
When you format an ordered list using the <OL>..</OL> tag pair and <LI> tags, a browser displays
each item numbered sequentially beginning with 1. However, the <OL> tag can be modified by two
attributes that customize the characters that appear. Instead of displaying numbers, you can set the
TYPE attribute to “a” for lowercase letters, “A” for uppercase letters, “i” for lowercase Roman
numerals, or “I” for uppercase Roman numerals. If you want the numbering to start with other than the
first (such as 1 or A), set the START attribute equal to the numerical equivalent of the starting value.
For example, to format a numbered list with lowercase letters starting with “d” (the fourth letter), the
opening tag would read <OL TYPE=”a” START=”4”>.

Other List Types
In addition to ordered and unordered lists, HTML includes code for formatting several other list types.
In practice, however, only one other is commonly used: the definition list. You use the <DL>…</DL>
tag pair to format items as a definition list, which does not add icons such as bullets or numbers to list
items. Instead, each item is divided into parts, a term—marked with <DT>--and a definition –marked
with <DD>.

                          Using Site Definition to Create a Local Web Site
   1. Click Site on the menu bar and then point to New Site
   2. Click New Site
   3. If necessary, click the Advanced tab. Verify that WD Student Files is selected in the
       Category column
   4. Type WebDev as the site name
   5. Click the folder icon to the right of the Local root folder text box If you are creating and saving
       your sites at another location or on other media, navigate to that location and substitute the
       location for Local Disk (D): default path as shown
   6. Click My Computer and then double click the Removable drive where your Chesapeake
       College flash drive is located.
   7. Click the Create New Folder icon
   8. Type WebDev as the name of the new folder and then press the ENTER key
   9. Double-click the WebDev folder to view its contents.
   10. Click the Create New Folder icon, Type images as the name of the new folder and then press
       the ENTER key.
Page 18/Instructor Notes/Website Development/Version 3.5/Reynolds
   11. Create additional folders for documents, pdfs, templates, and thumbnails as illustrated below:




Formatting Characters
Sometimes words or phrases on your Web pages need to stand out. In documents created in a word
processor, this is most often accomplished using three standard formats: bold, italic, and underline.
While you can easily add any of these formats to your web page text, their use in HTML comes with
some caveats. As you have learned, a link’s default format in the browser includes underlining.
Therefore, it’s best not to underline unlinked text in a Web page, then you avoid confusing the users.
Additionally, both bold and italic formatting can each be created by two different tag pairs. The most
obvious choices --<B>..</B> for bold and <I>..</I> for italic—render these formats only visually on a
browser. Because some Web browsers require different interfaces—for example, audio devices that
read Web content to visually impaired people—using the alternative tags <STRONG> for bold and
<EM> for italic is preferable.

Page 19/Instructor Notes/Website Development/Version 3.5/Reynolds
                                       Changing the Text Color
   1. If necessary, scroll up, select the heading, and then click the Text Color box in the Property
      inspector
   2. Position the eyedropper on the shade of green represented by hexadecimal number #336633
      (row 2 and column 10 from the right)
   3. Click the eyedropper to apply the color to the selected text, and then deselect the heading by
      clicking anywhere within it

                                     Changing the Web Page Title
   1. Drag through the text, Untitled Document, in the Title text box on the Document toolbar
   2. Type WebDev Outline in the Title text box and then press the ENTER key
   3. Click the Save button on the Standard toolbar

                                          Checking Spelling
   1.   Click at the beginning of the document
   2.   Click Text on the menu bar and then point to Check Spelling
   3.   Click Check Spelling
   4.   Click the Ignore button
   5.   Continue to check the spelling and, as necessary, correct any misspelled word by accepting the
        suggested replacement, by clicking the Change or Change All buttons, or by typing the correct
        word in the Change to text box
   6.   Click the OK button and then press CTRL+S to save any changes


                                     Controlling Font Selection
   1. Highlight all of the text in TWD-Outline.htm and choose Arial from the list of font styles.

   Customizing Fonts
   The <FONT>..</FONT> tag pair allows you to change text format in several ways. In addition, to
   changing the font itself with the FACE attribute, you can use the COLOR attribute to change the
   text to a color other than black. You also can customize font appearance with the SIZE attribute,
   which changes the size of characters.

   Customizing Linked Text
   While allowing you to customize standard Web page text, HTML also includes special attributes to
   customize a page’s linked text. You can change the color of all links in a Web page using the
   LINK, VLINK, and ALINK attributes of the opening <BODY> tag. Link affects the color of links
   that have not been followed, which is blue by default. VLINK (short for “viewed link”) specifies
   the color for links that were previously followed, which is purple by default. ALINK ((short for
   “active link”) sets the color of links when they are clicked; the default color for these links is red.
   While the default colors work best in most situations, changing one or more link codes is useful for
   certain Web page designs.




Page 20/Instructor Notes/Website Development/Version 3.5/Reynolds
                                            Aligning Text
           1. Highlight the “Website Development Outline” heading and click the “centering” icon
           on the formatting toolbar.
           2. Use File/Save to revise the file named WD-Outline in the WD Student Files folder


Removing Internal CSS Styles
During this exercise you have created a lot of extraneous internal styles that just add bulk to your
document. When this happens, you can wipe the CSS slate clean by removing all or some of the
internal styles.




                Unit C: Inserting Tables, Graphics, and Image Maps
Learning Objectives for Unit C
    Inserting a table
    Insert Graphics
    Specify Graphic Size
    Link Graphics
    Insert an Image Map
    Adding an E-Mail Link


A table is made up of rows and columns of cells into which you can insert text and graphics. There are
different ways you can use tables, and you can customize your tables in a variety of ways to make
them more attractive and easy to read. When you lay out text and graphics on a page, you can use a
table to arrange them. Tables are supported by virtually all Web browsers and are an easy way to lay
out your pages.

Table Element Preview

    The TABLE Element allows you to set up rows and columns of text and is enclosed in the tags
     <TABLE>…</TABLE>. The BORDER attribute establishes default boxes around the table
     cells

    Within the TABLE, the <TR>…</TR> tag pair designates the rows of the table

    Cells are designated with <TH>…</TH> for the header/title cell and <TD>…</TD> for the
     data cells

    Row spanning allows one of the columns of the table to span more than one row and is
     accomplished by the ROWSPAN attribute. In our case study the ROWSPAN attribute is used
     to insert an image that spans two rows in the original table and uses the following syntax:
Page 21/Instructor Notes/Website Development/Version 3.5/Reynolds
 <TD ROWSPAN="2"><IMG SRC=”filename.gif" WIDTH=”nnn" HEIGHT=”nnn"
ALT=”alternative text display">

New Document Preferences

•   Default document type
    While Dreamweaver is used to build Web pages in HTML primarily, if you build
    other types of files, you can set your new document default type to some other
    type, such as PHP or even XML or another template.
•   Default extension
    HTML can use both .html and .htm as the extension, so when you use the
    HTML document type, Dreamweaver gives you the option to decide on the
    extension for these documents.
•   Default Document Type (DTD)
    Once you've chosen the document type, you should decide which DTD to use
    by default. You can always change it later.
•   Default encoding
    If you are writing pages in more than one language, it's a good idea to choose
    a wider encoding set, such as UTF-8.
•   Unicode Normalization Form
    If you select Unicode as your character encoding (UTF-8) you can choose which
    normalization form to use. If you don't know which to choose, leave this blank.
    You can also include a Byte Order Mark, but again, if you don't know that you
    need this, leave it unchecked.
•   Show New Document dialog box on Control-N
    If you write many different types of documents, it can be easier to have the
    dialog box open both when you hit Ctrl-N and when you go to the File menu
    and choose "New". This gives you the option of all the different Dreamweaver
    file types. Otherwise, your default file type will open automatically.




Page 22/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Opening a New Page and Inserting a Table
   1. Use File/New/Blank Page/HTML and click Create to start a new home page.
   2. Click in the Title text box at the top of the page and type WebDev Home Page and then choose
      File/Save As to save the new document as WD-Home.htm in WD-Student Files.
   3. Click the Restore/Maximize button on the Document window to reduce to a floating window in
      the workspace.
   4. Click the Document Size setting in the lower left corner of the floating window and choose the 760
      x 420 size setting.
   5. Click Modify/Page Properties and choose Black (#000000) as the background color for the page.
   5. Click in the top left corner of the page and choose Insert/Table. In the dialog box, create a table
      with 1 row and 2 columns having a width of 750 pixels and click OK.
   6. With the table still selected, click the align box in the Properties panel and select center to center
      the two column table on the page.
   7. Click in the leftmost column, type 130 as its width and 400 as its height, set Horz to left and Vert as
      top, and then type #79A4AB as the column’s background color.
   8. Click in the rightmost column, type 620 as its width and 400 as its height, set Horz to left and Vert
      as top and then type #D2C7B5 as this column’s background color.
   9. Click at the top left of the left column and choose Insert/Image to select the YinYang.gif image
      from your images folder. Adjust its size to a width of 130 and a height of 125
Page 23/Instructor Notes/Website Development/Version 3.5/Reynolds
   10. In the space below the YinYang.gif, Insert/Image HomeBut.gif and adjust its size to a width of
       124, a height of 25, and a black border of 3 pixels.
   11. If the Standard toolbar does not display, click View on the menu bar, point to Toolbars, and then
       click Standard
   12. Position the insertion point at the top of the right column where you will insert a banner table.
   13. Click Insert, and then click Table.
   14. In the Rows box, type 1
   15. In the Columns box, type 4
   16. Specify a width of 600 pixels and a border size of 5
   17. Click OK to accept the remaining defaults
   18. Click File/Save and type banner as the table’s name in the Properties panel




Image Element Preview
    Image Element            <IMG SRC=“filename.jpg”>
    (with ALIGN attribute)   <IMG SRC=“filename.jpg” ALIGN=“left”>
                              <IMG SRC=“filename.jpg” ALIGN=“right”>
                              <IMG SRC=“filename.jpg” ALIGN=“center”>
    (with SIZE attributes)   <IMG SRC=“filename.jpg” HEIGHT=“nnn”>
                              <IMG SRC=“filename.jpg” WIDTH=“nnn”>
    (with ALIGN, SIZE, and ALTernate text attributes)
   <IMG SRC=”filename.jpg" ALIGN="left" HEIGHT=”nn"          WIDTH=”nnn" ALT=”Sorry You
   Can’t See My Graphic”>
    Image element with ALIGN, SIZE, ALTernate text attributes, and Horizontal Space attributes)
   <IMG SRC=”filename.jpg" ALIGN="left" HEIGHT=”nn" WIDTH=”nnn" ALT=”Sorry You
   Can’t See My Graphic” HSPACE =“nn”>

Planning for Graphics Use
In addition to sometimes conveying information better than text, graphics can make a page easier to
read, and play an important part in giving a page a unique style and mood. Recent trends in graphics
for the Web involve supplementing visuals with sound and animation. As with other design tools,
Page 24/Instructor Notes/Website Development/Version 3.5/Reynolds
moderation is the key to effective graphics use. A Web page filled with text but devoid of graphics can
be uninviting and difficult for users to read. On the other hand, a Web page with too much space
devoted to graphics can overwhelm and distract users from the focus of the page.

                              Inserting Graphics in Dreamweaver Design View
   1.   Click in the first cell of the banner table to establish an insertion point for the first graphic.
        Click Insert/Image, and navigate to select “thumbnails/MyCar.jpg” from the WD Student
        Files folder and enter Favorite Car in the Alternative Text
   2.   Click the picture and use the Properties panel to specify a height of 115 pixels and a width of
        150 pixels
   3.   Click in the second cell of the table to establish an insertion point for the second graphic. Click
        Insert/Image, and navigate to select “thumbnails/MyDog.jpg” from the WD Student Files
        folder and enter Favorite Dog in the Alternative Text
   4.   Click this picture and use the Property Inspector to specify a height of 115 pixels and a width of
        150 pixels.
   5.   Click in the third cell of the table to establish an insertion point for the third graphic. Click
        Insert/Image, and navigate to select “thumbnails/MyMountain.jpg” from the WD Student
        Files folder and enter Favorite Mountain in the Alternative Text
   6.   Click this picture and use the Property Inspector to specify a height of 115 pixels and a width of
        150 pixels.
   7.   Click in the fourth cell of the table to establish an insertion point for the fourth graphic. Click
        Insert/Image, and navigate to select “thumbnails/MyOpeningCredit.jpg” from the WD
        Student Files folder and enter Opening Credit in the Alternative Text
   8.   Click this picture and use the Property Inspector to specify a height of 115 pixels and a width of
        150 pixels.
   9.   If necessary, click on the left vertical border and slide it to the right to remove excess space.




Text Images
In addition to adding art and photos, the <IMG> tag also can be used to add text to Web pages.
Because few fonts are common to the majority of computer systems, Web page designers are generally
limited to a small number of fonts for page text. However, a designer can enter text into a graphics
Page 25/Instructor Notes/Website Development/Version 3.5/Reynolds
program, such as Adobe Illustrator, format the text with any font they choose, and create a graphic of
the text. They can then insert the graphic in a Web page, where any user who can view the graphics
can see the text in the font selected by the designer. Such graphics, known as text images, are best for
only small areas of text, such as headings, to keep the page’s download time to a minimum. However,
text images provide an additional tool for creating well-designed, interesting Web pages that can be
viewed by nearly all users.


Linking Graphics
Just as you can format sections of text as links, you can also add link formatting to graphics on a Web
page. In HTML view you simply surround the <IMG> tag with the <A>..</A> tag pair, and add the
HREF attribute. You can use linked images to simplify navigation around your web site by placing an
identical linked image at the same location on each page. A user can click this image on any page to
open the home page.

                                Using Linked Graphics in Design View
       1. Using your Dreamweaver text editor in Design, click the first picture, review the
          Properties Inspector, click inside the Link textbox and type:
          http://www.conceptcarz.com/vehicle/z6875/Buick-Skylark.aspx into the box
       2. Click the second picture, review the Properties Inspector, click Link, and choose a target
          http://www.akc.org/breeds/bulldog/index.cfm
       3. Click the third picture, review the Properties Inspector, click Link, and choose a target
          http://www.youtube.com/watch?v=rLKVx60I5BM
       4. Click the fourth picture, review the Properties Inspector, click Link, and choose a target
          http://missingmanuals.com/cds/creatingwstmm/
       5. We have not yet created the real pages for these links so we will link them to “helpful
          absolute website” locations until we create the real target pages.




Page 26/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Opening Another Document Window
       1. Click File/Open on the menu bar and then open the WD-Template.htm file
       2. Delete all contents of the left table cell
       3. Align Center and then Insert/Image “MyCar.jpg”
       4. Place the insertion point at the left of the next row
       5. Browse to: http://auto.howstuffworks.com/1953-1954-buick-skylark.htm
       6. Select the text and pictures starting with “In the 1950s” thru “neighborhood Buick dealer”
           and copy
       7. Paste in TWD-Template and save as WD-MYCar.htm
       8. Change the hypertext reference for the first image in index.htm, save the file, and preview
           the new link




Image Maps
While the ability to link a graphical image to a Web page is a useful tool in Web page design,
sometimes a single graphic conveys information that‘s appropriate for more than one link. You can
take advantage of such an image by making it into an image map, a graphic that has different areas
which are linked to different Web pages. Each of these areas, known as hot spots, is defined with a
coordinate system that uses the <MAP>, and <AREA> tags. The image map information associated
with a graphic can be located anywhere in a web document; you specify a name for each map, and use
the USEMAP attribute to reference the map name in the <IMG> tag that uses it. Because it’s a
challenging task to specify the exact pixel coordinates of areas within a graphic, most web designers
use software that simplifies image map creation by allowing you to draw the hot spots over the
graphic. In the next step of our Travels with Diesel case study, we have created a graphic that shows
all of the continents of the world as travel destinations linked to map pages marked with the routes of
my adventures on those continents.

                                       Inserting an Image Map
Page 27/Instructor Notes/Website Development/Version 3.5/Reynolds
  Position the insertion point at the line below the last line of text in WD-Home.htm
        • Click Insert, and then click Table.
        • In the Rows box, type 1
        • In the Columns box, type 1
        • Specify a width of 100 pixels and a border size of 5
        • Click OK to accept the remaining defaults
        • Align the new table at the center of the column space
1. Position the insertion point inside the table cell and use Insert/Images and navigate to the
   “images/WorldImage.gif” file in the WD Student Files folder. Click the WorldImage picture
   and use the four hotspot drawing tools at the bottom left of the Properties panel to create
   rectangles or polygon hotspots around the continents.
2. As you complete each hotspot, the Hotspot Properties dialog will allow you to navigate to your
   WD Student Files folder and choose an appropriate hypertext target.
3. For each hotspot, enter descriptive text. .
4. Save all of your changes
5. Click the File/Preview in browser/IE Explorer to view the revised design of the file. You should
   now be able to see the image map of the continents and when the pointer moves over the hot spots
   you should be able to see the text specified in the Screen Tips.




                                       Adding an E-Mail Link
   1.  Adding Your Name and Date
   2.  If necessary, scroll down to display the image map. Click to the right of the image
   3.  Press the ENTER key
   4.  Type your name and then press SHIFT+ENTER
   5. Insert the current date and then press the ENTER key
   6. Drag to select your name.
   7. Click Insert on the menu bar and then point to Email Link
   8. Click Email Link
   9. Click the E-Mail text box and then type your e-mail address
   10. Click the OK button
   11. Click the expander arrow on the vertical bar to hide the panel groups



Page 28/Instructor Notes/Website Development/Version 3.5/Reynolds
                           Unit D: Using Forms to Control Input
Learning Objectives for Unit D
    Plan a form
    Create a text entry field
    Add radio buttons
    Add checkboxes
    Create a pull-down menu
    Inserting a Pop-up Menu
    Add a Jump Menu
    Adding the Validate Form Behavior
    Add a push-button
    Validating a Form
    Connect a form’s back end

A form in a web page is similar to a paper form that you might use to register for a class, apply for a
job, or order a product. A form contains form fields that collect information. A form field is a data-
entry field in a form, such as a text box or an option button. A user enters data by typing directly into a
text box or scrolling text box, by selecting an option button or check box, or by selecting a choice in a
drop-down menu list. After completing the form, the user clicks a button that automatically sends the
form to a specified server, where a server-side form handler processes it. A form handler is a
program that collects and processes the data contained on the form. The collection of data entered into
the form by the user and processed by a server is called the form’s result. A form handler might store
a form’s results in a text file, in an HTML document, or in a database. Some servers can also send a
form’s results to an e-mail address. In addition to processing the form’s results, the server usually
sends a confirmation page to the user via the browser from which the form was submitted. A
confirmation page usually includes a copy of the form results so the user can verify its accuracy; other
times it might only send a message indicating that the server received the form correctly.

Planning a Form
Including a form on a web site is a simple and straightforward way to allow your site’s users to send
you feedback or other information. If you are using the web to sell products or services, forms are
vital. A Web form can allow users to enter information, but it can also provide predefined choices
from which users can select. Most forms include several fields, which are the form elements, such as
text boxes or pull-down menus that allow user input. Each field or group of fields is usually associated
with a label, which is the text that explains what information is required by the adjacent field.

Page 29/Instructor Notes/Website Development/Version 3.5/Reynolds
After placing fields on your form, you can lay them out on the page as you would text, using line
breaks, tables, cascading style sheets, and positioning. There are many different kinds of fields, and
you can even customize them to suit your needs. After a site visitor submits the form, you must collect
the data that was entered — the form results — so you can view them, display them to the visitor, or
work with them as needed. HTML provides several ways of preparing form handlers, which take the
form results and perform various actions. For example, when a site visitor submits a form, the HTML
can be coded so that you can save the contact information to a customer database. Or, you can have the
form results sent to you in an email or saved as a text or HTML file.

                                      Creating a Text Entry Field
           1. Open WD-Checkout.htm
           2. Click an insertion point at the end of the line reading “(Optional fields in italic)” and
           then press ENTER to start a new line.
           3. Hide the panel groups and collapse the Property inspector, if necessary
           4. Click View/Toolbars/Insert to display the Insert Toolbar
           5. Click View on the menu bar, point to Visual Aids, and if necessary, deselect the CSS
           Layout Outlines and AP Element Outlines commands.
           6. Click the Save button on the standard toolbar
           7. Click the arrow to the right of the display category on the Insert bar and then point to
           Forms on the Insert bar pop-up menu
           8. Click Forms and then click the Form button
           9. Double-click the Form Name text box in the Property Inspector. Type WD-Form and
           then press the TAB key
           Type mailto:William_C_Reynolds@msn.com?subject=Order Form (use your own e-
           mail address)
           10. Click the Target box arrow, select _self, and then press the TAB key
           11. Type text/plain and then press the ENTER key
           12. Click Insert/Form/Text Field to insert a 20 position textbox with the label First
           Name: and then type shipfirstname in the ID box
           13. Repeat for Last Name, Address Info, Address Line 2, City, State, Zip Code, Phone, and
           E-mail with the properties listed in the following box: Note: pressing the [Shift] key as you
           press the [Enter] key to go to the next line will reduce the vertical spacing of the lines

           Label = First Name: SIZE=”20”                  ID = ”shipfirstname”
           Label = Last Name: SIZE=”20”                   ID = ”shiplastname”
           Label = Address Info: SIZE=”40”                ID =”shipaddr1”
           Label = Address Line 2: SIZE=”40”              ID =” shipaddr2”
           Label = City: SIZE=”20”                        ID =”shipcity”
           Label = State: SIZE=”2”                        ID =”shipstate”>
           Label = Zip Code: 10”                          ID =”shipzip”
           Label = Phone: SIZE=”3”                       ID =” shipareacode”
           SIZE=”3”                                      ID =” shipphoneprefix”> -
           SIZE=”4”                                      ID =” shipphoneend”>
           Label = E-mail: SIZE=”25”                     ID =”email”>


Page 30/Instructor Notes/Website Development/Version 3.5/Reynolds
Adding Radio Buttons
Text boxes are ideal tools for allowing form users to enter the information unique to each person. But,
in many other situations, you can reduce the potential for user input error by providing a list of choices
from which the user can select. This eliminates the possibility that a user will enter a selection that the
order processing system will not understand. HTML includes several list formats for forms; each
format is appropriate for different situations and types of information. To create a set of options that
the user can see all at once, and from which a user can make only one selection, you create radio
buttons. Radio buttons are small white circles, each appearing next to explanatory text. When the
user clicks a circle, it fills with black to designate it as selected. You will create radio buttons using
the Insert/Form/Option Button.
                                              Using Radio Buttons
    1. Review the file WD-Checkout in the Dreamweaver design view
    2. Click an insertion point at the end of the line reading Shipping Method and then press [Enter]
        to start a new line.
    3. Click Forms and then click the Form button
    4. Double-click the Form Name text box in the Property Inspector.
    5. Type WD-Form to add more elements to the same form and then press Enter
    6. Point to the Radio Group button on the Forms tab
    7. Click the Radio Group button
    8. Type shipvia and then click the first instance of Radio in the Label field
    9. Type standard as the Value
    10. Press the TAB key, type Standard Shipping in the Label field, and then press the TAB key
    11. Type priority as the Value entry, type 2 Day Air Shipping in the Label field, and then press
        the TAB key
    12. Click the Plus button, click Radio, type overnight and then type Overnight Air Shipping in
        the Label field. Press the TAB key
    13. If necessary, click the Lay out using Line breaks (<br> tags) radio button
    14. Click the OK button
    15. Click the Standard Shipping button and set the initial state as “checked”




Page 31/Instructor Notes/Website Development/Version 3.5/Reynolds
Adding Checkboxes
While radio boxes allow users to make a single choice from a set of options, sometimes you want to
allow users to make multiple selections from a list. For situations like this, HTML offers checkboxes,
which display an array of choices that are all visible at once, and from which users may select any, all,
or none. A checkbox appears as a small white box next to its label. When a user clicks an empty
checkbox, a checkmark appears in the box; clicking a checked box removes the check mark. You
create checkboxes using the Insert/Form/Checkbox function of FrontPage. Unlike radio buttons, each
checkbox should have a unique NAME value. Additionally, code for checkboxes does not require a
VALUE attribute, and multiple checkboxes may use the CHECKED attribute to display a check mark
by default.
                                           Using Checkboxes
The checkbox type defines an item where multiple selections can be made from a set of possibilities.
This type must have a different NAME/VALUE pair for each selection.

           1. Review the file WD-Checkout in the Dreamweaver design view
           2. Click an insertion point at the end of the line reading Packaging Options and then press
           [Enter] to start a new line.
           3. Click Forms and then click the Form button
           4. Double-click the Form Name text box in the Property Inspector.
           5. Type WD-Form to add more elements to the same form and then press Enter
           6. Click Insert/Form/Checkbox to insert a checkbox with the Label Gift Wrap ($2.00 per
           item), type wrap in the ID box, and click OK
           7. In the Properties box and type ON in the Checked Value box and Unchecked as he
           Initial State.
           8. Repeat for Remove price tags (free) and Ship multiple items together with the
           properties listed in the following box: Note: pressing the [Shift] key as you press the
           [Enter] key to go to the next line will reduce the vertical spacing of the lines.

           Label = Gift Wrap ($2.00 per item) ID ="wrap"
           Label = Remove price tags (free) ID ="tags"
           Label = Ship multiple items together ID ="together"




Page 32/Instructor Notes/Website Development/Version 3.5/Reynolds
Creating a Pull-Down Menu
Radio Buttons and checkboxes lay out a group of related options so that they are all visible on a Web
page. Sometimes, however, you may want to save space on your web page, or you may have such an
extensive set of options that it would be impractical to include all of them in the web page’s layout.
For this type of situation, HTML allows you to format your options with a more efficient form field
called a pull-down menu. A pull-down menu—or drop-down list—appears on the page like a single-
line text field, but it also contains a button marked with an arrow. When a user clicks the button, a
menu of choices opens. When the user clicks a choice, the list closes, and the user’s selection appears
in the field. The pull-down menu is popular on web page forms because it uses space efficiently, and
because most users are already familiar with it from common operating systems and application
software. To create a pull-down menu, you use the Insert/Form/Drop-down Box

                                      Using a Pull-Down Menu
   1. Review the file TWD-Checkout in the Dreamweaver design view
   2. Click an insertion point at the end of the line reading Payment Information and then press
       [Enter] to start a new line.
   3. Click Forms and then click the Form button
   4. Double-click the Form Name text box in the Property Inspector.
   5. Type WD-Form to add more elements to the same form and then press Enter
   6. Click the List/Menu button on the Forms tab.
   7. Click List in the Type options of the Property Inspector
   8. Type 2 in the Height box
   9. Click the Selections check box to allow multiple selections
   10. Click the List Values button
   11. Type Visa as the first Item Label, press the TAB key, and then type “v” as the Value. Press
       the TAB key
   12. Type MasterCard as the second Item Label
   13. Type “m” as the Value and then press the TAB key
   14. Type American Express as the third Item Label
   15. Type “a” as the Value and then press the TAB key
   16. Type Diners Club as the fourth Item Label
Page 33/Instructor Notes/Website Development/Version 3.5/Reynolds
   17. Type “i” as the Value and then press the TAB key
   18. Type Discover as the fifth Item Label.
   19. Type “D” as the Value and then press the TAB key
   20. Type Peebles as the fourth Item Label
   21. Type “p” as the Value
   22. Click the OK button
   23. Click Visa in the Initially selected box in the Property inspector
   24. Click the Save button on the Standard Toolbar


                                             More Text Boxes
1. Review the file TWD-Checkout in the Dreamweaver design view
2. Click an insertion point at the end of the line reading Credit Card and then press [Shift] + [Enter] to
start a new line.
3. Click Insert/Form/Text Field to insert a Textbox for Card Number with a 10 character width, the
ID of “cardno”, and a MAXLENGTH=”10”
4. Click an insertion point at the end of the Card Number line and then press [Shift] + [Enter] to start
a new line.
5. Click Insert/Form/Textbox to insert a Text Field for Expiration Date with a 7 character width and
the ID of “cardexp”, MAXLENGTH=”7”
6. Click an insertion point at the end of the Expiration Date line and then press [Enter] to start a new
line.
7. Click Insert/Form/Checkbox to insert a checkbox with the Label Billing address same as ship-to
address




                                        Creating a Pop-Up Menu
   1.   If necessary, scroll down to the end of the checkout form and click Enter to start a new line
   2.   Click the List/Menu button on the Forms tab
   3.   Type the ID of orders in the List/Menu text box to name the pop-up menu
   4.   Type Number of previous orders as the Label and then press the TAB key
   5.   Click the List Values button. In the List Values dialog box, type 1 as the Item Label, press the
        TAB key, and then type 1 for the Value




Page 34/Instructor Notes/Website Development/Version 3.5/Reynolds
                                        Inserting a Jump Menu
   1.  If necessary, scroll down to the end of the checkout form and click Enter to start a new line
   2.  Type Links and then press the TAB key
   3.  Click the Jump Menu button
   4.  Type Choose one in the Text text box and then click the Plus (+) button
   5.  Double-click the Text text box
   6. Type Website Introduction as the text for the second menu item and then press the TAB key
   7. Click the browse button, choose index.htm and then point to the Plus button
   8. Click the Plus button, double-click the Text text box, type North America Map as the entry,
       and then press the TAB key
   9. Click the browse button, choose NA-Map.htm and then point to the Plus button
   10. Click the Plus button, double-click the Text text box, type South America Map as the entry,
       and then press the TAB key
   11. Click the browse button, choose SA-Map.htm and then point to the Plus button
   12. Click the Plus button, double-click the Text text box, type Europe Map as the entry, and then
       press the TAB key
   13. Click the browse button, choose Europe-Map.htm and then point to the Plus button
   14. Click the Plus button, double-click the Text text box, type Asia Map as the entry, and then
       press the TAB key
   15. Click the browse button, choose Asia-Map.htm and then point to the Plus button
   16. Double-click the Text text box, type Africa Map as the entry, and then press the TAB key
   17. Click the browse button, choose Africa-Map.htm and then point to the Plus button
   18. Click the Plus button, double-click the Text text box, type Australia Map as the entry, and
       then press the TAB key
   19. Click the browse button, choose Australia-Map.htm and then point to the Plus button
   20. Double-click in the Menu ID text box and type Map Pages
   21. Click the Select first item after URL change check box
   22. Click the OK button
   23. Click Choose one in the Initially selected box in the Property inspector
   24. Click the Save button on the Standard toolbar




Page 35/Instructor Notes/Website Development/Version 3.5/Reynolds
                                         Adding a TextArea Text Field
   1.   If necessary, scroll down to the end of the checkout form and click Enter to start a new line
        Type Comments and then press the TAB key
   2.   Click the Textarea button on the Forms tab
   3.   Type comments as the ID for the TextField and click OK
   4.   Press the TAB key and type 50 for the Char width value.
   5.   Press the TAB key and type 4 for the Num lines value
   6.   Click the Init val box, type Please add your comments as the entry
   7.   Verify that Multi line is selected
   8.   Click the textarea in the form to display the initial value
   9.   Click the Save button on the Standard toolbar




Page 36/Instructor Notes/Website Development/Version 3.5/Reynolds
Validating a Form
To validate individual fields as the user fills out the form, select a text field and choose Window /
Behaviors.

   1. To validate multiple fields when the user submits the form, click the <form> tag in the tag
      selector in the bottom left corner of the Document window and choose Window/ Behaviors.
   2. Choose Validate Form from the Actions pop-up menu.
   3. Do one of the following:

           •   If you are validating individual fields, select the same field that you have selected in the
               Document window from the Named Fields list.
           •   If you are validating multiple fields, select a text field from the Named Fields list.

   4. Select the Required option if the field must contain some data.
   5. Choose from one of the following Accept options:

           •   Use Anything if the field is required but need not contain any particular kind of data.
               (If the Required option is not selected, the Anything option is meaningless—that is, it is
               the same as if the Validate Form action were not attached to the field.)
           •   Use E-mail address to check that the field contains an @ symbol.
           •   Use Number to check that the field contains only numerals.
           •   Use Number From to check that the field contains a number in a specific range.
           •   If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that
               you want to validate.

   6. Click OK.
   7. If you are validating multiple fields when the user submits the form, the onSubmit event
      automatically appears in the Events pop-up menu.

If you are validating individual fields, check that the default event is onBlur or onChange.
If it isn’t, select onBlur or onChange from the pop-up menu. Both of these events trigger the Validate
Form action when the user moves away from the field. The difference between them is that onBlur
occurs whether or not the user has typed in the field, and onChange occurs only if the user changed
the contents of the field. The onBlur event is preferred when you have specified that the field is
required.

                                 Adding the Validate Form Behavior
   1.   Display the panel groups and hide the Property inspector
   2.   If necessary, click the WD-Checkout.htm tab
   3.   Click Window on the menu bar and then point to Behaviors
   4.   Click Behaviors
   5.   If necessary, click anywhere inside the form. Click <form#WD Form> in the tag selector.
   6.   Click the Add behavior button in the Behaviors panel and then point to Validate Form on the
        pop-up menu
   7.   Click Validate Form
   8.   Click the Value Required check box
Page 37/Instructor Notes/Website Development/Version 3.5/Reynolds
   9. Click the text input “shipfirstname” and then click Value Required for the “shipfirstname”
       field
   10. Repeat the above step for the shiplastname, shipaddr1, shipcity, shipstate, shipzip,
       shipareacode, shipphoneprefix, shipphoneend, cardno, and cardexp fields
   11. Click input “email” in the Fields box.
   12. Press the F12 key to display the page in your browser
   13. Click the Email address radio button



Adding a Pushbutton
Occasionally, while completing web page forms, users need the browser to perform an action on the
form. Most users commonly need to indicate that they are finished with the form, and they need to
submit their information to your organization for processing. To allow users to execute tasks, HTML
forms include push buttons, which are labeled objects that a user can click to perform a task. You
create a push button using the Insert/Form/Push Button, and you specify its functions with different
attributes. HTML includes two predefined functions, reset and submit, that you can assign to buttons
by using the TYPE attribute. A reset button clears all the input in the form, allowing a user to start
over. Reset buttons are no longer common on the Web, since forms today are generally easy to edit.
The submit button performs one of the most common form activities: submitting information for
processing.

                                 Adding the Submit and Reset Buttons
   1.   If necessary, scroll down to the end of the checkout form and click Enter to start a new line
   2.   Click the Button button on the Forms tab. If the Input Tag Accessibility Attributes dialog
        box is displayed, click the Cancel button
   3.   Click Tab to start a new location, and then re-click the Button button on the Forms tab
   4.   Type reset in the ID text box and then press OK
   5.   Type Reset in the Value text box and then click Reset form in the Action area
   6.   Click the Save button on the Standard toolbar




Page 38/Instructor Notes/Website Development/Version 3.5/Reynolds
Options for Storing a Form’s Results
After completing a form’s design and content, you need to select options to store the form results in a
text file, as an HTML file, in a database, or using a script that you create. In addition, if the server on
which the web site is stored is configured to send e-mail messages, you can also specify to send the
form results for each form submitted to an e-mail address. When you save the form results to a text
file, the first entry of the results file contains the names of the forms fields. As forms are submitted to
the server, the data entered by each user appears as a new line in the file, with the data for each form
field separated by commas or another character. When you save the form results in an HTML file, the
data for each form is included, with each form field name appearing on a separate line with the data
entered by the user. A line or other separating feature marks the end of each form submitted to the
server. When you save a form’s results to a database, the data is added to the database table that you
specify. Except when using a database, the file containing the form’s results is usually stored in the
private folder of the web site so that it is protected from being accessed by Internet visitors. (Database
files are protected from being accessed in a different hidden folder.)


Using a client-side JavaScript function to process a form
Forms are processed by the script or application specified in the action attribute of the form tag. To see
what action is associated with a form, select it and look in the Property inspector. The Action field
will point to the associated action.

The simplest forms use JavaScript or VBScript to perform form processing on the client side (as
opposed to sending the form data to the server for processing). For example, you might have a small
form at the bottom of a page that contains only two radio buttons labeled Yes and No, plus a Submit
button. The form action might be a JavaScript function defined in the head section of the document
that displays one alert if the user selects Yes and another alert if the user selects No:




function processForm(){
if (document.forms[0].elements[0].checked){
alert('Yes');
}else{
alert('No');
}
}


To use a client-side JavaScript function as the form action:

   1.   Select a Submit button in a form.
   2.   Attach the Call JavaScript behavior to the button (see Call JavaScript).
   3.   In the JavaScript text box that appears while attaching the behavior, enter processForm().
   4.   Add a processForm() JavaScript function (like the one shown above) to the head section of the
        document.
Page 39/Instructor Notes/Website Development/Version 3.5/Reynolds
   5. You can handle many form-processing tasks using client-side scripting, however, you can’t
      save the data entered by the user or send it to someone else. To save the data or transmit it to
      another application for processing, you need to use a server-side script or application. Common
      Gateway Interface (CGI) scripts are the most popular form of server-side scripting mechanisms
      to process form data. There are several sites on the web that offer free CGI scripts that you can
      use. The Internet Service Provider (ISP) hosting your site may provide CGI scripts that perform
      many common tasks such as collecting e-mail addresses, or allowing visitors to send you
      comments through a web form.



                              Adding a Form Link to the WD Home Page
   1. If necessary, click the expand/collapse arrow to display the panel groups
   2. Double-click index.htm in the Files panel
   3. Click the expand/collapse arrow to hide the panel groups
   4. If necessary, scroll down and then position the insertion point at the end of the date as the last
       line of text. Press the ENTER key
   5. Click Insert/Hyperlink
   6. Type Website Development Map Ordering Form as the text entry
   7. Browse to select WD-Checkout.htm as the Target
   8. Save the link to the WD-Checkout.htm web page.
   9. Select the text Website Development Map Ordering Form and then press the F12 key to
       display the page in your browser. Verify that the links work and close the browser.
   10. Close the index.htm web page




                       Unit E: Working with Page Layout Tables


Learning Objectives for Unit E
    Inserting Images in Table Cells
    Aligning Tables
    Aligning Table Cells
    Merging and Splitting Cells
    Coloring Tables, Rows, and Cells
    Using Expanded Tables Mode
    Using Spacer GIFs
    Breaking up Large Tables
    Nesting Tables
    Designing for Different Window Sizes
    Planning a Flexible Width Table

Page 40/Instructor Notes/Website Development/Version 3.5/Reynolds
Now that we know all of the basics for creating a website we have decided to form a little company to
build websites for local businesses and non-profit organizations on the Eastern Shore. Our company,
called “Reynolds Associates” is working on a remake of the Web site for St. James at the Vineyard, an
enchanting restaurant in Trappe, MD. Our glorious leader has created a series of tables, and filled the
cells with exotic graphics and vibrant color that capture the mystique of the restaurant’s interior design.
The first version has a “frozen” design; the page does not change size regardless of the browser
window size.




The second version is a “liquid” design that changes size when a site visitor resizes the browser
window.




Page 41/Instructor Notes/Website Development/Version 3.5/Reynolds
Inserting Images in Table Cells
You have probably noticed that table cells expand or contract based on their content. This is especially
apparent when insert an image in a table cell. For example, the height of a table row is determined by
the tallest element in that row. Similarly, the width of all of the cells in a column is determined by the
widest element in that column. To demonstrate we will begin this unit by adding an image to a table
cell. Understanding how table cells expand and contract will make it easier for you to plan your table
based page layout design.


                                    Add an Image to a Table Cell

   1. Open table_align.htm from the WD-Student Files folder. A 1 x 2 table appears at the top of
      the page. The first table contains a small amount of Lipsum (placeholder text) and the other
      cell is propped by a single non-breaking space.
   2. Place the insertion point inside the blank table cell. The non-breaking space when you insert
      an image in the next step.
   3. Choose Insert/Image from the menu bar. This opens the Select Image Source dialog box
   4. Select swing.jpg from the images folder and click OK or Choose. This inserts the image in the
      table cell. The row height increases to accommodate the image. If you accidently inserted the
      image outside the table cell, you can drag and drop it into the table cell.
   5. Save the file but keep it open.



                    Aligning Tables
                    When you insert a table, it aligns with the left side of the page by default. Other
                    elements on the page will be either above or below it. Three alignment options
                    available on the Properties panel allow you to center the table on the page or wrap
                    text or other web page elements to the left or right. Having selected the table, you
                    will see the options at left. The following four images illustrate how the four
                    alignment options differ.




The Default alignment option is chosen.




Page 42/Instructor Notes/Website Development/Version 3.5/Reynolds
The Left alignment option is chosen.




The right alignment option is chosen.




The center alignment option is chosen

Aligning Table Cells
Table cells have their own properties, separate from the table properties. The properties of rows can be
independently set as well. When you click inside a cell, the Properties panel is partitioned to display
text and cell formatting properties.




By default, any content in the table data cell is horizontally aligned on the left and vertically aligned to
the middle of the cell.


Page 43/Instructor Notes/Website Development/Version 3.5/Reynolds
                            Set Table Row and Cell Alignment Properties
   1. Open the File cell_align.htm from the WD-Student Files folder. There are two tables on the
       page. The first table contains an image and text; the second table contains only text.
   2. Click in the first table cell. Do Not click on the image
   3. Click the <td> tag on the Tag Selector. This selects the first table cell
   4. Observe the default horizontal and vertical alignment settings on the Properties Panel. Do Not
       deselect the table cell. The image is horizontally aligned to the left and vertically aligned to the
       middle of the table cell.
   5. Set the “right” horizontal and “top” vertical alignment settings on the Properties panel.
   6. Practice using other alignment options or set the horizontal and vertical properties back to
       default.
   7. Locate the second table and observe the text in the first cell. This cell determines the row height
   8. Click inside the second table cell.
   9. Click the <td> tag on the Tag Selector. This selects the second table cell.
   10. Observe the default vertical and horizontal alignment settings on the Properties Panel. The text
       is horizontally aligned to the left, and vertically aligned in the middle of the cell.
   11. Set the “default” horizontal and “top” vertical alignment settings on the Properties panel.
   12. Practice using other alignment options or set the horizontal and vertical properties back to
       default.
   13. Save and close the file.

Merging and Splitting Cells
Seldom is a simple table design capable of satisfying your page layout requirements. You will often
need to merge cells to form a single cell that spans multiple columns or rows. You can merge sny
number of adjacent cells—as long as the entire selection is rectangular or square—to produce a single
cell that spans several columns or rows. Merging cells allows you to create complex page layouts. To
merge table cells, select a contiguous range of cells and choose Modify/Table/Merge cells from the
menu bar. You can also split a cell into any number of rows or columns. O split a cell, click in the cell
and choose Modify/Table/Split Cell from the menu bar. You can also use the Merge Cells and Split
Cells button on the Properties panel to merge and/or split cells.


                                            Merge Table Cells
   1. Open the File cell_merge.htm from the WD-Student Files folder. The table contains a 2 x 2
      that is 566 pixels wide.
   2. Click anywhere in the second table cell and click <tr> on the Tag Selector to select the whole
      row.
   3. Choose Modify/Table/Merge Cells to merge the two cells into a single cell.
   4. Insert chain_left.gif into the first table cell in the first row. This image sets the height of the
      first row.
   5. Insert chain_right.gif into the second table cell in the first row. Observe how the image is
      vertically aligned in the table cell.
   6. Insert chain_bottom.gif into the cell in the second row. This image is 566 pixels wide, the
      same size of the table.
   7. Select the first table, and then choose Bottom from the vertical align menu on the Properties
      panel. This switches the default alignment and ensures that the content of both cells align to
Page 44/Instructor Notes/Website Development/Version 3.5/Reynolds
       the bottom of each cell as in the following illustration: .




Coloring Tables, Rows, and Cells
Now it is time to get the crayons out of your Web design toolkit and let your inner child come forward.
Tables don’t have to be boring—especially tables used for page layout. You can apply color to tables,
cells, and rows. Before you start using those crayons, you need to understand the order of color
formatting precedence in HTML.

When you apply a background color to a page, every element on the page inherits the color, including
all default tables, rows, and cells. You can override the page background color by applying a
background color to a table. When you do this, all rows and cells inherit the table background color.
You can then override the table background color by applying color to an entire row or to individual
table cells. The order of color formatting precedence begins with the lowest element and ends with the
highest element.

Choosing a Color
When working with tables, the Properties panel provides three color boxes. The top portion of the
panel contains the Text Color box; the bottom half contains background color and Border Color boxes.
A table must have the border property set to at least 1 pixel for the border color to show. To choose a
color, expand the color box and use the Color Picker. When you choose a color, the hexadecimal
equivalent of the color appears in the Color hex field. If you are a genius and can remember
hexadecimal color values, you can type the value in the color hex field to the right of the color box.



                                     Apply Table Background Color
   1. Open the File color.htm from the WD-Student Files folder. Yikes! The bright aqua
      background color overpowers the content. Te color flows from the page to the table, rows, and
      cells.
   2. Click in the first table cell and then click the <tr> on the Tag Selector. This selects the first row.
      This row spans the two columns below it.
   3. Use the example below to apply background and text color to the first row:




Page 45/Instructor Notes/Website Development/Version 3.5/Reynolds
   4. Click in the first table cell of the second row and click <td> in the Tag Selector
   5. Set the background color to #FFFFFF (white) or use the Color Picker to choose a color.
   6. Click in the second table cell of the second row and click <td> in the Tag Selector

Using Expanded Tables Mode
Sometimes a cell is so tiny that it is awkward to position the insertion point. In such situations you
may need to switch to Expanded Tables mode. When you switch from Standard mode to Expanded
Tables mode, Dreamweaver temporarily adds quite a bit of cell padding and spacing so that you can
easily place the insertion point or see an expanded view of each table cell. You will use Expanded
Tables mode in the next exercise to insert tiny transparent images in table cells. Note: Expandd tables
mode is not meant for editing purposes. Once you make your selection or place the inertion point,
return to the standard mode to make your edits. Some visual operations such as resizing will not give
expected results in Expanded Tables mode.

Using Spacer GIFs
Table cells behave like tiny rubber bands; they expand when you add content and collapse when
they’re empty. To keep cells from collapsing, insert an invisible image. Called a spacer GIF, a 1 x 1
pixel transparent image can be inserted in a cell and resized to reserve whatever cell real estate you
may need. This little trick can give you a lot of control over the actual size of the cell and can be used
for such purposes as setting the actual amount of space between columns, collapsing an empty table
row down to 1 pixel, or increasing the row height to a number of pixels. Spacers can be any size you
need. When you insert a spacer, you set the desired width and height in the Properties panel. Spacers
are generally set to be invisible but they don’t have to be, as you will see in the following exercise.



                                             Insert Spacers
   1. Open the File spacer.htm from the WD-Student Files folder. This page contains a 600 pixel
      wide table. The first, third, and last table rows are merged to span five columns. You will
      insert a spacer inside of these rows.
   2. Choose View/Table Mode/Expanded Tables mode from the menu bar or use the Expanded
      Modes button on the Layout category of the Insert Bar.
   3. Read the message in the Getting Started in Expanded Tables mode and press OK. All of the
Page 46/Instructor Notes/Website Development/Version 3.5/Reynolds
       table cells are temporarily expanded.
   4. Click inside the table cell in the first row.
   5. Choose Insert/Image, navigate to the image folder, and then select spacer_red.gif. This image
       is identical to the regular spacer image, except you can see it. Do NOT click anywhere on the
       page or you will deselect the image which is barely visible.
   6. Type 600 in the Width box on the Properties panel and press Enter or Return. Do NOT click
       anywhere on the page or you will deselect the image.
   7. Select the Alt property on the Properties panel to <empty>. Spacer images wreck havoc on
       blind readers when the property is not set properly.
   8. Using the same technique you used in steps 4-6, insert the same space in the third and last row
       of the table. Set the Width to 600 and the alternative text property to <empty>.
   9. Choose View/Table Mode/Expanded Tables mode from the menu bar or use the Expanded
       Modes button on the Layout category of the Insert Bar.
   10. Save the file.
   11. Preview the file in your browser.
   12. Leave your browser open, and return to the Document window.
   13. Close the file.


Breaking up Large Tables
When planning your page layout, keep in mind that large, complex tables may take a while to display
in a web browser. This is because a browser cannot display anything inside a table until it encounters
the close table </table> tag. For some page layouts, it’s much better to break up large tables to form
multiple small tables.

                                      Combine Multiple Table
   1. Open the File xtreme_ice_busted.htm from the WD-Student Files folder. This page contains
      three separate tables.
   2. Position point in the blank space below the first table, and then press the Backspace key. This
      the paragraph space and the two tables appear as one
   3. Position point in the blank space below the second table, and then press the Backspace key.
      Your page should resemble the following illustration.




   4. Save the file.
Page 47/Instructor Notes/Website Development/Version 3.5/Reynolds
   5. Preview the file in your browser.
   6. Leave your browser open, and return to the Document window.
   7. Leave the file open.

Nesting Tables
The process of inserting a table inside another table is called nesting. In the next exercise we’re going
to create another table and then copy and paste three tables inside the new table. The Xtreme Ice page
would look better if the tables were center aligned. Also it would be pretty cool to have a single thin
border surround all three tables
                                           Insert a New Table
    1. Place the insertion point below the last table on the page.
    2. Choose Insert/Table from the menu bar.




   3. Set the table Properties shown in the following illustration.
   4. Click OK, do not deselect the table. Note how the table “snaps” to the table above. Make sure
       the <table> is highlighted in the Tag Selector.
   5. Open the BG color box on the Properties panel and use the Color Picker to select Black. Do
       not deselect the table.
   6. Set the Align property on the Properties panel to Center
   7. Click to the right of the third table (the one with the text paragraph and 16 pixels of padding)
       and drag the mouse pointer up and to the left of the first table. This selects all three tables.
   8. Choose Edit/Cut from the menu bar.
   9. Click in the new table and click Edit/Paste from the menu bar. This pastes the three tables
       inside the new table.
   10. Click in the table that contains the Xtreme Ice banner (the top table) and notice the <table> tags
       that appear on the Tag Selector. The first <table> tag represents the outer table. The second
       table> tag represents the table that you just clicked inside.
   11. Click the far right <table> tag on the Tag Selector to select the current table.
   12. Use the same technique for each table on the page.. The Tag Selector is an extremely useful
       tool for identifying and selecting tables and table elements, especially when you are working
       with nested tables.
   13. Save the file.
   14. Preview the file in your browser.
   15. Leave your browser open, and return to the Document window.
   16. Close the file.




Page 48/Instructor Notes/Website Development/Version 3.5/Reynolds
Designing for Different Window Sizes
Designing an HTML page to fit different window sizes and screen resolutions—and still control the
placement of content—is one of the biggest challenges you’ll face in web design. Not everyone uses a
high resolution monitor and not everyone works with their window maximized. A surefire way to lose
site visitors is to design pages that look great on your computer without bothering to check how they
may look on someone else’s computer. Use the Window Size pop-up window at the bottom right
corner of the Document window to test your pages and screen resolutions.




The Window Size pop-up menu can be used to determine the optimal size based on various screen
resolutions. A window sized of 760 x 420 is used with a screen resolution of 800 x 600 to cpmpensate
for the “chrome” (menu bar, address bar, toolbars, etc) that each browser uses, If you ensure that all
tables and their contents are less than 760 pixels wide, you can be fairly sure that users viewing your
page at 800 x 600 resolution will not have t scroll horizontally.

Currently approximately 50% of web users have their screen resolution set to 1024 x 768 (or higher)
and 35% use a screen resolution of 800 x 600 pixels. Only a small percentage of users have their
screen resolution set to 640 x 480. To accommodate the widest audience, it makes sense to design
your pages so they look good at 800 x 600 or higher. That’s the middle road.

Once you’ve chosen a window size, you need to decide whether you want the content to fit inside a
fixed pixel width table or whether the entire page should flow from the left to the right margin when
the page is opened in the browser.

Designing Fixed Width Tables
With a fixed width approach, you lay out your entire page in one table. This table is then set o a fixed
width and (optionally) centered. This is the approach we used in the earlier exercises. When the user
resizes the browser window, the table is frozen on the page. The width of the table should be set low
enough to display at the most widely used resolution (800 x 600). Centering the table splits the excess
space around it when viewed at higher resolutions.

Designing Flexible Width Tables
A table set to a percentage will expand and contract along with the width of the user’s screen. A
common technique is to lay out your entire page in one table and set its width to 100%. This means
the table will occupy the entire width of the browser window.


Page 49/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Observe Frozen and Liquid Tables
   1.   Open the Files st_james_liquid.htm and st_james_frozen.htm from the WD-Student Files
        folder.
   2.   Preview st_james_frozen.htm in your browser.
   3.   Resize the browser window by making it narrower and as wide as possible.
   4.   Return to the Document window.
   5.   Preview st_james_liquid.htm in your browser.
   6.   Leave your browser open, and return to the Document window.
   7.   Choose File/Close All from the menu bar.

Planning a Flexible Width Table
The page in the following illustration consists of five tables:
   1. The outer table—This is identical to the outline table that we created for the Xtreme Ice page,
       except that the background color is different and the width is set at 100%
   2. A fixed width table—This contains 12 images. The total width of all the images is 696 pixels.
       The table is set to a fixed width of 696 pixels to keep the images from shifting.
   3. A fixed width table—This table is also 696 pixels wide and contains two cells. Each cell
       contains one image. The first cell is aligned to the left; the second cell is aligned to the right.
   4. The main content table—This is set to 100% so the content flows all the way across the page.
       The second table cell contains a background image. There are several invisible spacer GIFs in
       the last row of this table (which, of course, you can’t see). We’ll look more closely at this row
       in Expanded Tables mode.
   5. A small table of graphic links—This will be cut and pasted into the far right cell of the main
       content table.




Page 50/Instructor Notes/Website Development/Version 3.5/Reynolds
                            Analyze and Reassemble a Liquid Table Design
   1.   Open the File st_james_hack.htm from the WD-Student Files folder.
   2.   Notice the five tables, one after another on the page.
   3.   Choose View/Table Mode/Expanded Tables mode from the menu bar. The extra spacing and
        padding in this mode will help you understand the layout much better.
   4.   Observe that in the second table each of these images appears in an individual table cell.




   5. Scroll down to the bottom row of the main content area shown in the following illustration:




   6. Locate the small table shown in the following partial illustration:
       The spacer image is selected to show you its width and height. Its width is the same width as
       the table; the height is30 pixels, which expands the height of the table cell to provide extra
       white space above the table.
   7. Switch back to Standard mode.
   8. Delete the text that reads, SIDEBAR TABLE GOES HERE
   9. Select the small table at the bottom of the page and cut it to the Clipboard.
   10. Paste the table inside the cell whose text you just deleted.
   11. Place the insertion point below the second table and press Delete or Backspace to remove the
       space.
   12. Place the insertion point below the third table and press Delete or Backspace to remove the
       space.
   13. Click above the second table and carefully drag down to select the tables below. Be careful not
       to below the last table on the page.
   14. Cut and paste the three tables inside the table at the top of the page. If necessary, remove any
       extra space between the tables.
   15. Preview the file in your browser.
   16. Resize the browser window to make it narrow and wide.
   17. Leave the browser window and return to the Document window.
   18. Close all files.



Page 51/Instructor Notes/Website Development/Version 3.5/Reynolds
                              Unit F: Working with Behaviors
Learning Objectives for Unit F
    Understanding Behaviors
    Touring the Behaviors Panel
    Applying Behaviors to an Entire Document
    Applying Behaviors to Text
    Inserting a Rollover Image
    Swapping Two Images with One Event
    Opening a New Window

We have presented our initial design to the James Offord, the owner of St. James at the Vineyard, and
he has provided us with funding for the next stage of the design. He has informed us that he wants to
present his customers with a magical dining experience in an exotic setting. He feels that his web site
must constantly evolve to provide interactivity to engage site visitors. He wants us to use
Dreamweaver Behaviors to insert a series of rollover images in the banner navigation bar. Then
when the mouse pointer rolls off the image, the original image is to be restored. On the Banquet Page,
Mr. Offord wants us to use the Open Browser Window Behavior and the onClick event to open a new
window when a visitor clicks a link in the image map.

Understanding Behaviors
Dreamweaver simplifies the process of adding scripting events to the elements on your Web page.
Dreamweaver writes the JavaScript and the event attribute for you. When you insert a behavior on an
element on your web page, Dreamweaver will place a script in the <head> and place the appropriate
browser event attribute in your HTML tag. Dreamweaver comes with 27 built-in behaviors and you
can install more through Dreamweaver Extensions. To use a behavior, you bring together three
elements: an action, an event, and an HTML tag.
                               The action is whatever the behavior is supposed to do—such as open
                          a new browser window or hide an absolutely positioned div.
                               The event is the trigger that causes the action to happen. It’s usually
                          something your visitor does, like clicking a Submit button on a form, moving
                          the mouse over a link, or even simply loading a Web page into the browser.
                               Finally, you apply the event and the action to an HTML tag to bring
                          interactivity to your Web page.

                         Click Windows/Behaviors to open the Behaviors panel. Click the Add
                         Behaviors button on the Behaviors panel. In the Behaviors panel, you add a
                         Behavior to a page by specifying an action and the event that triggers the
                         action. Behaviors rely on HTML tags and almost any tag can respond to a
                         user event. To get started with the Behaviors panel, you must select an
                         HTML element and choose a target browser by using the “Show Events For”
                         command. Once you have chosen a target browser, use the “Show Events”
                         button to present a list of events that are available for the currently selected
                         HTML tag.


Page 52/Instructor Notes/Website Development/Version 3.5/Reynolds
                                      Touring the Behaviors Panel
   1.   Choose Window/Behaviors to open the Behaviors panel.
   2.   Create a New HTML document and save the file as action_events.htm.
   3.   Observe the Tag Selector where only the <body> tag is visible because no HTML elements
        have been added to the page.
   4.   Click the <body> tag on the Tag Selector.
   5.   Click the Add Behaviors button on the Behaviors panel.
   6.   From the list of actions, choose “Show Events For” and ensure that a checkmark appears next
        to the option 4.0 and Later Browsers
   7.   Click the Show All Events button to display the six events that are available for the <body> tag

Applying Behaviors to an Entire Document
In the previous exercise, you saw the six events associated to the <body> tag. Setting an event on te
<body> tag affects the entire document. The two most commonly used events for the <body> tag are
onLoad and onUnload. The onLoad event is typically used to display a pop-up message, preload a
series of images, or set the text of the status bar. The onUnload event is unfortunately used too often
by unscrupulous spammers to open an unsolicited new window when you use your browser to try to go
somewhere else, or to close the browser window.

                              Using onLoad to Display a Popup Message
   1.   Click the Add Behavior button on the Behaviors panel
   2.   From the list of options, choose Popup Message to open the Popup Message dialog box
   3.   Type SALE! 50% SAVINGS – TODAY ONLY and press OK.
   4.   Save the file and preview it in your browser
   5.   Read the message and then click OK

Editing Behaviors
Once you’ve applied a behavior, you can edit it anytime. Double-click the behavior
in the Behaviors panel to reopen the Settings dialog box. Make any changes you like, and then click
OK. To remove a behavior from your web page, select it in the Behaviors panel and
click the minus sign (–) button or press Delete. (If you accidentally delete a behavior,
just choose Edit/Undo Remove Behavior.)

                                      Editing and Adding Events
   1. Click Windows/Behaviors to open the Behaviors panel
   2. Double-click on Popup Message.
   3. Type SALE! 75% SAVINGS – TODAY ONLY and press OK.
   4. Click the Add Behavior button on the Behaviors panel
   5. From the list of actions, choose Open Browser Window
   6. Click the Browser button then locate and open_win.htm from WD-Student Files and click OK.
   7. Leave the default settings in the Open Browser dialog box and click OK
   8. Click onLoad
   9. From the list of events, choose onUnload.
   10. Click the Show Set Events button
   11. Save the file, and then open then Preview in Browser
   12. Read the revised text in the pop-up window and click OK.
Page 53/Instructor Notes/Website Development/Version 3.5/Reynolds
   13. Close your browser to initiate the onUnload event and open another browser window.
   14. Close the browser and return to the Dreamweaver Document window.
   15. Select the Open Browser Window event and then press the Remove Event button to remove the
       onUnload event.
   16. Save and close the file.

Applying Behaviors to Text
To apply a behavior to text, you must first make the text a link. If you don’t want the text to point to a
URL, simply create a null link. A null link is one that doesn’t actually jump someplace when it is
clicked. Back in Unit B you learned how to use link placeholders (technically called null links) by
typing a number (#) sign in the Link field on the Properties panel to test link states without actually
including a URL. This approach is fine for testing link states while you’re still developing your web
pages, but to create a null link for a finished page, you should type javaScript:; (the link must be
typed exactly as shown) in the Link field of the Properties panel. This also creates a null ink that tells
the browser that the link will be handled by the JavaScript of the attached behavior. If you do not have
a behavior attached to the link, you can sill use the link as a null link to test link states.

                                      Applying Behavior to Text
   1. Open text_link.htm from your WD-Student Files folder.
   2. Type Swap Image at the top of the page
   3. Select the text, choose Insert/Hyperlink and click in the Link field of the Hyperlink dialog
       box, and type JavaScript:;
   4. Position the insertion point below the text, and then insert skater_off.gif from the images
       folder
   5. Select the image and type skater in the ID field on the Properties panel. The ID enables a
       behavior to uniquely identify the object.
   6. While the image is still selected, observe the image tag on the Tag Selector. The image tag
       now reads <img#skater>. The # sign uniquely identifies the image so the script can perform its
       action on the correct object.
   7. Select the text
   8. Click the Show All Events button on the Behaviors panel. Observe the events to which the null
       text line can respond. One of the events is onMouseOver
   9. Click the Add Behavior button and from the list of actions, choose Swap Image
   10. Click the browse button and select skater_over.gif from the images folder.
   11. Click OK to set the image source.
   12. Ensure that a checkmark appears next to Preload Images and Restore Images onMouseOut
       and click OK.
   13. Click the Show Set Events button on the Behaviors panel. The onMouseOver event swaps the
       image when the mouse moves over the original image; the onMouseOut event restores the
       image when the mouse pointer moves off the secondary image.
   14. Save the file, and then preview it in your browser.
   15. Roll the mouse over the text
   16. Roll the mouse off the text
   17. Close the browser and return to the Dreamweaver Document window.
   18. Close the file.

Page 54/Instructor Notes/Website Development/Version 3.5/Reynolds
Inserting a Rollover Image
In the previous exercise, you used a null text link to swap an image with another image using the
onMouseOver event. Now that you have “gotten your feet wet” we can explore more advanced
behaviors. One of the most common forms of user interaction on a web page is the rollover image. A
rollover image is an image that, when viewed in a browser, changes when the mouse pointer moves
over it. Rollover images require two images: the original (primary) and the rollover (secondary)
image. Both images in a rollover should be the same size; otherwise, Dreamweaver resizes the
rollover image to match the proportions of the original image and distortion occurs because the
rollover image must share the same space as the original image. You can use either of two methods to
insert a rollover image. The method you choose depends on whether the original image is already on
the page. If it is, you can use the Common category of the Insert bar to choose Insert/Image
Object/Rollover Image from the menu bar. When you use this method, Dreamweaver opens the
Rollover Image dialog box that walks you through the entire process of creating a rollover image.

Preloading Rollover Images
When you check the Preload Rollover Image box, Dreamweaver adds JavaScript to your code that
enables a browser to preload the rollover image when the page first loads. This ensures that the
rollover effect will occur without hesitation because the rollover image is already stored in the
browser’s memory. Not choosing this option, depending on the size of the rollover image, can result in
a delayed response because the browser has to download the rollover image from the server. If you
have many rollover images on the same page, the intial page may take longer to download but it is
better to have the wait early to avoid any hesitation when the mouse pointer moves over the rollover
image.

                                         Inserting a Rollover Image
     1.  Open st_james.htm from the st_james folder in your WD-Student Files folder.
     2.  Preview the file in your browser.
     3.  Roll the mouse pointer over Reviews and Reservations
     4.  Roll the mouse pointer over Home in the banner navigation bar.
     5.  Click the Home link to reload the page so that the Flash animation plays again.
     6.  Leave your browser open and return to the Dreamweaver document page
     7.  Position the insertion point in the first blank table cell (two rows above Review) where you
         will insert the first rollover image.
     8. Choose Insert/Image Objects/Rollover Image to open the Rollover Image dialog box.
     9. In the Image Name text field, select the default generic name and type events. All rollover
         images must have a unique name. Use short, descriptive names that can be easily identified.
         Don’t use spaces or special characters and do not begin the name with a number.
     10. Click the Browse button next to the Original Image text field and select events_off.gif in the
         rollover_sj folder as the primary image.
     11. Click the Browse button next to the Rollover Image text field and select events_on.gif in the
         rollover_sj folder as the rollover image to replace the primary image..
     12. Ensure that a checkmark appears next to the Preload Rollover image
     13. Type Events in the Alternative text field.
     14. Click the browse button next to the text field When Clicked, Go to URL. Select events.htm
         from your WD-Student Files folder..
Page 55/Instructor Notes/Website Development/Version 3.5/Reynolds
     15. Click OK.
     16. Place the insertion point in the empty row below Events.
     17. Choose Insert/Image Objects/Rollover Image.
     18. Use the following illustration to complete the Insert Rollover Image dialog box:




     19. Save the file and then test the rollover images in your browser.
     20. Leave your browser open and return to the Dreamweaver Document window. Keep the file
         open.

                                  Swapping Two Images with One Event
     1. Make sure that st_james.htm is open in the Dreamweaver Document window.
     2. In the banner navigation bar at the top of the page, randomly click on any of the twelve and
         view the ID that appears in the Properties panel. Each image ID has been created for you to
         save time. Remember, these are not image filenames; they are unique identifiers the
         behaviors need to work with the images
     3. Select the menu text image named menu_off
     4. Click the Add Behavior button on the Behaviors panel and from the list of actions, choose
         Swap Image
     5. Do not close the Swap Image dialog box. This attaches the swap image behavior to the
         selected image and the image name now has an asterisk (*) next to it.
     6. Click the Browse button and select menu_on.gif from the rollover_sj folder.
     7. From the list of images, select the menu_mask_off.gif image. This is the pale mask image
         located to the left of the text menu image in the banner navigation bar.
     8. Click the Browse button and select menu_mask_on.gif from the rollover_sj folder. This
         attaches the swap image behavior to the selected image and the image name now also has an
         asterisk (*) next to it.
     9. Ensure that a checkmark appears next to the Preload Rollover image and press OK
     10. Save the file and then test the rollover images in your browser.
     11. Leave your browser open and return to the Dreamweaver Document window.
     12. If time permits, swap the remaining eight images to complete the top navigation bar.
     13. Close the file


Page 56/Instructor Notes/Website Development/Version 3.5/Reynolds
Open Browser Window
No matter how carefully you design your web page, chances are it won’t look good in every size
window. Depending on the resolution of your visitor’s monitor and the dimensions of his browser
window, your Web page may be forced to squeeze into a window that’s 400 pixels wide, or it could be
dwarfed by one that’s 1200 pixels wide. Designing your web pages so they look good at a variety of
different window sizes is challenging. Enter the Open Browser Window action. Using this behavior,
you can instruct your visitor’s browser to open a new window to whatever height and width you desire.
In fact, you can even dictate what elements the browser window includes. Don’t want the toolbar,
location bar, or status bar visible? No problem; this action lets you include or exclude any such
window chrome. To open a new browser window, you start, as always, by selecting the tag to which
you wish to attach the behavior. You can attach it to any of the tags, but you’ll usually want to add this
action to a link with an onClick event, or to the <body> tag with the onLoad event.

       Tip: Most browsers have pop-up blockers. This nifty feature prevents the browser from
       opening a new browser window unless the visitor initiates the request. In other words, you
       probably won’t be able to open a new browser window when a page loads in the current
       window, but you can open a new browser window based on a visitor’s action—like clicking a
       link. Once you’ve selected this action’s name from the + menu in the Behaviors panel, you’ll
       see the dialog box.

You will have the following choices to make:
    1. URL to display. In this box, type the URL or path of the Web page, or click Browse and find
         the Web page on your computer (the latter option is a more foolproof method of ensuring
         functional links). If you’re loading a web page on somebody else’s site, don’t forget to type
         an absolute URL, beginning with http://
    2. Window width, Window height. Next, type in the width and height of the new window.
         These values are measured in pixels; in most browsers, 100 × 100 pixels is the minimum size.
         Also, strange visual anomalies may result on your visitors’ screens if the width and height
         you specify here are larger than the available space on their monitors.
    3. Window name. Give the new window a name here (letters and numbers only). If you include
         spaces or other symbols, Dreamweaver displays an error message and lets you correct the
         mistake. This name won’t actually appear on your web page, but it’s useful for targeting links
         or actions from the original window.

Once a new window is open, you can load other web pages into it from the original page that opened
the window; simply use the name of the new window as the link’s target. For example, you could add
this behavior to an “Open photo gallery” link that, when clicked, opens a small new window
showcasing a photo. You could add links to the main page that then load additional photos into the
small window. If you use more than one Open Browser Window behavior on a single page, make
sure to give each new window a unique name. If you don’t, you may not get a new
window for each Open Browser Window action. When you click OK, your newly created behavior
appears in the Actions list in the Behaviors panel.




Page 57/Instructor Notes/Website Development/Version 3.5/Reynolds
Adding a Behavior to an Image Map
As we learned in Unit C, an image map is a single image that contains one or more clickable areas
called hotspots. Image Maps have been around since the early days of the web and the original ones
required quite a bit of programming and other wizardry to make them work. Dreamweaver provides
all the tools you need to create an image map. When you use a hotspot tool to draw an area on an
Image Map, Dreamweaver adds the <map>…</map> tags in Code view and assigns the default name
Map. Nested inside the <map> tag is the <area> tag that contains three attributes a browser needs to
identify the shape, coordinates, and hypertext reference. By default, the hypertext reference is a null
link.

When you use Behaviors with an image map the behavior is attached to the <area> tag. The <map>
tag and the <img> tag are tied to the usemap attribute that appears in the <img> tag. The value of the
usemap attribute is equal to the name of the image map. A web browser uses this unique name to find
the image map on the page.

The following illustration shows the image we will use to create an image map and attach a Behavior
to a link that opens the page in a new browser window.




Page 58/Instructor Notes/Website Development/Version 3.5/Reynolds
                                   Add a Behavior to an Image Map
     1.   Open banquet.htm from the st_james folder in your WD-Student Files folder.
     2.   Select the large image in the main constant area.
     3.   Click the Rectangular Hotspot tool in the Properties panel
     4.   Draw a rectangle around the text Banquet Menu. When you release the mouse, the hot spot
          appears as a translucent blue-green overlay.
     5.   Observe the <area> tag on the Tag Selector
     6.   Click the Add Behaviors button on the Behaviors panel. Then, from the list of actions,
          choose Open Browser Window
     7.   Click the Browse button and select banquet_menu.htm from the st_james folder in your
          WD-Student Files folder and press OK.
     8.   Use the following illustration for Window width and Window height.:




     9. Place a checkmark next to the Resize Handles to enable site visitors to manually resize the
         window, if necessary if necessary to view the contents. The Open Browser is added next to
         the onMouseOver event. We want the event to occur with onClick.
     10. In the Behaviors panel, click on onMouseOver. Then from the Popup Menu choose
         onClick.
     11. Save the file and then open it in your browser.
     12. Roll the mouse pointer over the Banquet Menu hotspot.
     13. Click the Banquet Menu link to open the Banquet Menu Page in a new window.
     14. Close the new window.
     15. Leave your browser open and return to the Dreamweaver Document window.
     16. Close the file

Mouse Events
Web designers most often use mouse movement events to trigger actions (like the familiar rollover
image). But mouse clicks—on checkboxes, radio buttons, and other clickable form elements—also
qualify as mouse events. All current Web browsers can respond to many of these events when applied
to most tags—for example, you can trigger a behavior when a visitor moves her mouse over a
paragraph of text. Of course, just because you can doesn’t mean you should. Most Web surfers aren’t
accustomed to having things happen when they click on a paragraph or mouse over a headline.
Page 59/Instructor Notes/Website Development/Version 3.5/Reynolds
onMouseOver
       Gets triggered: When the cursor moves over the tag.
       Commonly used with these tags: <a>, <area>, <img>
onMouseout
       Gets triggered: When the cursor moves off of the tag.
       Commonly used with these tags: <a>, <area>, <img>
onMouseMove
       Gets triggered: When the cursor moves anywhere inside the tag. Works similarly to
       onMouseOver, but onMouseOver is triggered only once—when the mouse first
       moves over the tag. onMouseMove is triggered continually, whenever the mouse
       moves over the tag. The possibilities for an annoying Web page are endless.
       Commonly used with this tag: <body>
onClick
       Gets triggered: When a visitor clicks the tag and releases the mouse button.
       Commonly used with these tags: <a>, <area>, <input type="button | checkbox |
       radio | reset | submit">
onDblClick
       Gets triggered: When a visitor double-clicks the tag.
       Commonly used with these tags: <a>, <area>, <input type="button | checkbox |
       radio | reset | submit">
onMouseDown
       Gets triggered: When a visitor clicks the tag. The mouse button doesn’t need to
       be released for this event to occur (note the contrast with onClick).
       Commonly used with these tags: <a>, <img>, <input type="button | checkbox |
       radio | reset | submit">
onMouseUp
       Gets triggered: When a visitor releases the mouse button while the cursor is over
       the tag. The effect is the same as the onClick event.
       Commonly used with these tags: <a>, <img>, <input type="button | checkbox |
       radio | reset | submit">


Keyboard Events
Keyboard events respond to key presses and releases. Most Web designers use them in association
with form elements that accept text, such as password or text fields.

onKeyPress
      Gets triggered: When a visitor presses and releases a key while the tag is
      highlighted.
      Commonly used with these tags: <textarea>, <input type="file | password |
      text">, <a>
onKeyDown
      Gets triggered: When a visitor presses a key while the tag is highlighted. The key
      doesn’t need to be released for this event to occur.
      Commonly used with these tags: <textarea>, <input type="file | password |
Page 60/Instructor Notes/Website Development/Version 3.5/Reynolds
      text">, <a>
onKeyUp
      Gets triggered: When a visitor releases a key while the tag is highlighted.
      Commonly used with these tags: <textarea>, <input type="file | password |
      text">, <a>

Body and Frameset Events
Several events relate to actions involving an entire Web page or frameset.

onLoad
      Gets triggered: When a Web page and any embedded elements—like images and
      Flash and QuickTime movies—load. Frequently used for triggering actions
      when a visitor first loads the Web page; can also be used with an image tag to
      signal when that particular image has finished loading.
      Commonly used with these tags:<body>, <frameset>, <image>
onUnload
      Gets triggered: When the Web page is about to be replaced by a new Web page—
      for instance, just before the Web browser loads a new Web page after a visitor
      clicks a link.
      Commonly used with these tags: <body>, <frameset>
onResize
      Gets triggered: When a visitor resizes the Web browser window.
      Commonly used with these tags: <body>, <frameset>
onError
      Gets triggered: When an error occurs while a Web page or an image is loading.
      Commonly used with these tags: <body>, <img>

Selection and Highlighting Events
Some events occur when the visitor focuses on different parts of a Web page, selects text, or chooses
from a menu.

onSelect
      Gets triggered: When a visitor selects text in a form field.
      Commonly used with these tags: <textarea>, <input type="text">
onChange
       Gets triggered: When a visitor changes the text in a form field.
       Commonly used with these tags: <textarea>, <input type="file | password |
      text">, <select>

onFocus
      Gets triggered: When an element becomes the focus of the visitor’s attention.
      For instance, clicking in a form text field or tabbing to it gives the text field
      focus. Also applies to a link when a visitor presses the tab key to reach the link
      Commonly used with these tags: <a>, <body>, <frameset>, <textarea>, <input
      type="button | checkbox | file | password | radio | reset | submit | text">,
      <select>

Page 61/Instructor Notes/Website Development/Version 3.5/Reynolds
onBlur
         Gets triggered: When an element loses the focus. For instance, if the visitor is
         typing into a form text field and then clicks outside of that field, the onBlur
         event occurs. The Spry Validation tools can use this event to validate
         text fields. The onBlur event is also triggered when the visitor sends a window
         to the background. Suppose your visitor is reading your Web site in one
         window and has another open in the background. If he clicks the background
         window, the current page loses focus and an onBlur event occurs.
         Commonly used with these tags: <body>, <frameset>, <textarea>, <input
         type="button | checkbox | file | password | radio | reset | submit | text">,
         <select>

Form Events
While each element of a form (radio button, text field, checkbox) can respond to a variety of events,
the whole form—the entire collection of elements—can respond to only two events:

onSubmit
      Gets triggered: When a visitor clicks the Submit button on a form.
      Commonly used with this tag: <form>
onReset
      Gets triggered: When a visitor clicks the Reset button on a form.
      Commonly used with this tag: <form>

Note 1: Traditionally, JavaScript programmers have capitalized the second word in a JavaScript
event—onMouseOver, for instance. Trouble is, XHTML doesn’t allow uppercase letters for tags or
their properties. So if you’re creating XHTML pages, events should always be lowercased, like this:
onmouseover. (Dreamweaver converts such terms to lowercase automatically as you create XHTML
pages.)

Note 2: Dreamweaver includes two different types of behaviors, and it’s important not to get them
confused. Unit F describes JavaScript programs (that is, behaviors) that run in your audience’s web
browsers—these are called “client-side” programs. The server behaviors listed in the Application
panel group, on the other hand, run on the web server to let you access information from a database.


                                  Unit G: Working with Styles


Learning Objectives for Unit G
    Getting started with CSS
    Exploring a Style
    Creating Styles from Scratch
    Creating and Applying Class Selector Styles
    Creating Advanced Selector Styles
    Exploring More CSS Style Categories
    Creating an External Style Sheet
Page 62/Instructor Notes/Website Development/Version 3.5/Reynolds
Getting Started with CSS
Cascading Style Sheets is a universal, text-based language that any browser can read. A style sheet is a
group of styles. Each style in the style sheet has specific formatting instructions, called rules. A rule
to format all of the text on a page in Verdana font would read:

               Body { font-family: Verdana }

A web browser could use this rule to apply the Verdana font to all text elements on the web page.
Styles are most commonly used to format text, but they also include formatting properties for tables,
layers, images, and other page elements. In this exercise we will explore style storage locations, the
three types of styles, and how they are applied in a “cascading” order.

Understanding Style Storage Locations
As you create style for your site, they are stored internally, in the web page itself, or in another fle
called an external style sheet. External style sheets are stored in a style sheet file along with your oter
web page documents. External style sheets are a good choice for multiple pages because you can use
them to maintain design consistency throughout all of the pages in your site. When you want to update
the look of your site, open the external style sheet and make changes. All of the pages are then
updated automatically when opened in a browser.

Internal Styles appear in the head of your page in Code view. They apply to a single document and
do not apply to any other documents. Internal style sheets are a good choice when you have a single
page that you want to format differently from other pages in your site. You have already created many
internal styles in Unit B as we formatted and customized text.

Inline Styles are those that appear inside an HTML tag. This type of style is used to modify a single
occurrence of a tag. This example changes the font of a single paragraph:
                <p style=”font-family: Verdana”> When displayed in a web browser, this
text will appear in the Verdana font. </p>
Inline styles used for formatting purposes, as shown in the previous example, are rarely used because
they must be hand coded and are difficult to maintain. The reason that they are mentioned here is
because one day you may have to reformat a page that contains this type of style.

Understanding Style Types
When you begin to create CSS styles from scratch, you need to determine the type of styles you’re
going to need. Dreamweaver creates three CSS types: class selectors, tag selectors, and advanced
selectors. A selector is merely the type of the tyle that you’re defining.

       A class selector is a custom style that you can attach manually to HTML elements. Such as
       paragraphs text, headings, table cells, list items, etc. For example, if you want your copyright
       text to be displayed in bold and dark green, you can create a class selector style named
       “copyright” with boldface and dark green formatting. You would then select the copyright text
       on the page ad apply the copyright style.

Page 63/Instructor Notes/Website Development/Version 3.5/Reynolds
         A tag selector is a style created to redefine the appearance of all elements of that share the
         same HTML tag. For example, if you want all of your paragraph text to be displayed in the
         same Georgia font and dark gray, you would create a tag selector style using the paragraph tag
         <p> and specify the Georgia font and the dark color. All paragraph text on a page would
         automatically appear in that style because you’ve redefined the style for the paragraph tag.

         Advanced selectors fall into three categories and are discussed later in this unit.

Understanding the Cascading Order
The term “cascading” refers to the order in which styles are applied to the web page. Let’s say that
you’ve specified the following formatting instructions on the same page:
      External style sheet—font family Verdana
      Internal style sheet—font family Arial
      Inline style—font family Helvetica
When the browser loads the page, it has to figure out the order of the styles in order to apply them
correctly. Who wins? The style closest to the element being modified by the style, and that would be
the inline style. Generally speaking, the order of precedence is:
    1. Inline styles
    2. Internal styles
    3. External styles

                                       Set CSS Styles Preferences
    1.   Choose Edit then click Preferences
    2.   Choose the category CSS Styles.
    3.   Use the illustration on the next page to set CSS Styles Preferences:
         When creating CSS rules: Use shorthand for
          When Dreamweaver creates CSS styles, it will use longhand styles unless you check the
          boxes by the styles you want written in shorthand.
         When editing CSS rules: Use shorthand
          Dreamweaver will change externally edited style sheets to use the settings you define in this
          window. But you can set it to use shorthand if the original document used shorthand.
          Uncheck the box if you don't want external style sheets opened in a new file window.
         When double-clicking in CSS panel
          Dreamweaver will automatically edit CSS using the CSS dialog box unless you change this
          preference to either the properties pane or the code view.




Page 64/Instructor Notes/Website Development/Version 3.5/Reynolds
Reading Internal Style Code
Browsers are programmed to translate all web based languages. When you use the Page Properties
dialog box or the Properties panel to create the first CSS style on a new page , Dreamweaver
automatically adds a pair of style tags <style…</style> and a comment tag <!-- --> in Code view.
Modern browsers ignore the comment and process the CSS code that appears inside the comment tags;
older browsers that do not support CSS ignore the styles altogether and continue processing the page.
The following example is an internal style used to format all paragraph text on a web page.
               <style type=”text/css”>
               <!—
               P { font-family: Verdana }
               -->
               </style>
Now let’s look at just the CSS style to make it easier to read. This example is a tag selector style.
P { font-family: Verdana }

The style begins with p, which is a paragraph tag selector. Following the the tag selector is a single
rule, which is enclosed in a pair of curly brackets {}. The rule describes the formatting the browser
should apply to all paragraphs on the page. The rule consists of a style property and its value. The
combination of the property and the value is called a declaration. In the example, the style tells a web
browser that all paragraph text on the page should be formatted in the Verdana font.

Now let’s review te following class selector style example. A class selector begins with a period and is
followed by a name that you supply. The style in the following example has two rules: one that
specifies the font size and anther that specifies the text color. The two rules are separated b a semi-
Page 65/Instructor Notes/Website Development/Version 3.5/Reynolds
  colon. The style tells a web browser that any text that uses this style should be 12 pixels tall and gray
  as designated by the hex code #CCCCCC
                 .copyright { font-size: 12px; color: #CCCCCC }

  Reading External Style Code
  External styles look almost identical to internal styles, but do not contain HTML code. In the
  following example, notice the absence of the style and comment tags.
                 ul { list-style-type: square }

  This tag selector tells a web browser that any list item element that appears in an unordered list
  (bulleted list) should be formatted with a square.

  Creating Styles from Scratch
  The Page Properties dialog box and the Properties panel only offer limited CSS capabilities and, as you
  have seen, all of the styles you create with these tools are stored internally. When you use the CSS
  styles panel to create styles from scratch, you have access to all of the CSS formatting properties. You
  also have an opportunity to store the new styles internally or externally.

  Using the CSS Styles Panel
  The following illustration serves as a refresher on how to use the CSS Style panel. To open the Styles
  panel, choose Window and select CSS Styles

  .
Selectors appear in the left
column; properties and
values in the right column




                                                                                         Buttons are used to
                                                                                         attach external style
                                                                                         sheets and to create, edit,
                                                                                         and delete CSS styles



  Using the New CSS Rule Dialog Box
  When you choose Format/CSS Styles/New or click the New CSS Rule button at the bottom of the
  CSS Styles dialog box, the New CSS Rule dialog box opens. When you create a new style in
  Dreamweaver CS4, you are given the opportunity to define the type of selector being created: class,
  ID, tag (element), or compound (see below).

  Page 66/Instructor Notes/Website Development/Version 3.5/Reynolds
If any element on the page has focus, Dreamweaver will automatically populate the Selector field with
a suggestion of the type of rule to be created. In the event that you have a child element selected, such
as a paragraph of text within a div, Dreamweaver will fill in the full path to the element writing a
descendent selector. A descendent selector more specifically targets an element (for example,
#container #mainContent p would target any p element that is a child of an element with the ID of
mainContent, which is a child of an element with the ID of container). Dreamweaver describes exactly
what is being targeted in the box below the Selector Name.

You will notice that there are two buttons labeled Less Specific and More Specific, which allow you
to change how specifically your descendent selector is written (see below). It's best to write the
simplest selector that still targets the element you want to effect. This gives you room to get more
specific with subsequent selectors if needed. You can also specify whether the rule should be added to
an existing style sheet, created in a new style sheet, or embedded into the current HTML page.




Using the CSS Style Definition Dialog Box


Page 67/Instructor Notes/Website Development/Version 3.5/Reynolds
The CSS Rule Definition dialog box opens when you specify which selector type you’re creating in the
New CSS Rule dialog box. This dialog box provides 8 categories and 67 properties you can use to
style your web pages.




                                Create Tag and Class Selector Styles
    1. Open dixie.htm from the WD Student Files folder.
    2. Choose Window/CSS Styles from the menu bar to open the CSS Styles panel.
    3. Click the Code button on the Document toolbar and locate <title>Dixie Miller
        Presents</title> near the top of the page. This tag identifies the page title. The internal style
        will automatically appear below the title when you set a page property for this document. You
        don’t have to worry about the insertion point.
    4. Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
        options for the New CSS Rule dialog box fields as illustrated below.
    5. Click OK to open the CSS Rule Definition dialog box.
    6. In Code view, note the <style>…</style> tags that appear below the <title>…</title> tags.
        Also note the light grey HTML comment tag
    7. In the CSS Rule Definition dialog box, ensure that the Type category is selected.
    8. From the Font popup menu, choose Arial, Helvetica, Sans-serif and from the Size popup
        menu, choose X-large
    9. Click the color box and type #333333 as the third rule for the h1 tag and click OK.
    10. Choose View/Design, observe the change in the page Heading, and Save the file.

Page 68/Instructor Notes/Website Development/Version 3.5/Reynolds
Creating and Applying Class Selector Styles
What do you do when you need to create a new style but there is no HTML tag for the style? You start
from the beginning to create a class selector style. If you’ve used the Properties panel to format a web
page element, you’ve already created a class style. The first style yo create with the Properties panel is
automatically named .style1 and is added o the <style> tag in the head of your HTML document.
                .style1 { font-size: small; }
When you create a class style from scratch, you must name it and then apply it to one or more elements
on the page. Use short, descriptive names that begin with a period. If you forget to type the period
when you’re defining the style, Dreamweaver adds it for you. Her is an example of the class style
you’ll define in the next exercise.
                .dixie { font-size: x-small; color: #333333; }
When you apply the dixie class style to a paragraph tag, Dreamweaver adds the class property to te
paragraph tag. When the style is applied, the period that precedes the style name is not used.
                <p class=”dixie”>
If you apply the class tag to a selection that doesn’t include an entire paragraph, Dreamweaver wraps
the selection within a <span> tag like this:
                <span class=”dixie”>Dixie Miller</span>
The <span> tag applies a style to a span of text that can’t be identified by an HTML tag.

                                      Create a Class Selector Style
    1.   Ensure that dixie.htm is still open in the Document window of Dreamweaver.
    2.   Click the Code button on the Document toolbar and locate the h1 style that you created in the
         previous exercise.
    3.   Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
         options for the New CSS Rule dialog box fields as illustrated below.
    4.   Click OK to open the CSS Rule Definition dialog box.
    5.   Note the appearance of .dixie in the Title bar of the dialog box
    6.   Click the color box and type #FF0000 as the rule for the class and click OK.
    7.   Choose View/Design, and Save the file.

Page 69/Instructor Notes/Website Development/Version 3.5/Reynolds
Applying a Class Selector Style
To apply a class style, select an element on the page and use the CSS Style button on the Properties
panel. The Properties panel displays the CSS Style menu when the selection is text; it displays the
CSS Class menu when the selection is any object other than text.

                                           Apply a Class Style
    1.  Ensure that dixie.htm is still open in the Document window of Dreamweaver.
    2.  Select the text Dixie Miller in the first paragraph.
    3.  Choose dixie from the CSS Styles popup on the Properties panel.
    4.  Note the tag <span.dixie> on the Tag Selector.
    5.  Click the Code button on the Document toolbar and observe how the <span> tag and the class
        attribute (property) are tied together to form a style.
    6. Switch to View/Design
    7. Select the entire last paragraph on the page
    8. Apply the dixie style to the paragraph. Do not deselect the text.
    9. Note the <p.dixie> tag on the Tag Selector.
    10. Save dixie.htm the file but leave it open.

Detaching Class Styles
As you saw in the previous exercise, when you apply a class style, Dreamweaver adds the class
attribute to an HTML element. To change the class style, either apply another class style to the
selection to override the style or detach it. You will undoubtedly need to detach class styles at some
point, especially when you inherit web pages from clients or co-workers.



Page 70/Instructor Notes/Website Development/Version 3.5/Reynolds
                                          Detaching Class Styles
    1.   Ensure that dixie.htm is still open in the Document window of Dreamweaver.
    2.   Select the last paragraph of text on the page.
    3.   Click the Code button on the Document toolbar.
    4.   Choose None from the CSS Styles popup on the Properties panel.
    5.   Switch to View/Design
    6.   Save dixie.htm and close the file.

    Creating Advanced Selector Styles
    You may recall from the beginning of this lesson that Dreamweaver lumps three selector styls into
    the advanced selector type category: ID, contextual selectors, and pseudo class. The next
    section focuses on two advanced selector types: contextual selectors and pseudo classes. A
    contextual selector (also called a descendent selector) is one that must appear in a specific
    situation for a style to be applied. Say you have multiple paragraphs that appear inside and
    outside of table cells. You’d like to be able to format only the paragraphs that appear inside of
    table cells with a different color and some padding. You could create a contextual selector style
    such as the one shown in the following example:

               td p { color: #FF0000; padding: 20px; }

    This code talks to the browser, saying, “Format only paragraph text that appears inside a table data
    <td> cell red and add 20 pixels of padding to the top, bottom, left, and right.

    Creating Pseudo-Class Selector Styles
    You’ll be relieved to know that pseudo-classes are merely styles for the four link states (a:link,
    a:visited, a:hover, and a:active).

                                     Create Advanced Selectors
    1. Open advanced.selectors.htm from the WD Student Files folder.
    2. Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
        options for the New CSS Rule dialog box fields as illustrated in the first set of boxes below.
    3. Click OK to open the CSS Rule Definition dialog box.
    4. In the CSS Rule Definition dialog box, ensure that the Type category is selected.
    5. Click the color box and type red for the advanced selector rule and click OK.
    6. Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
        options for the New CSS Rule dialog box fields as illustrated in the second set of boxes below.
    7. Click OK to open the CSS Rule Definition dialog box.
    8. In the CSS Rule Definition dialog box, ensure that the Type category is selected.
    9. Click the color box and type #0000FFfor the advanced selector rule and click OK.
    10. Use steps 6-9 to set the remaining links to the color of your choosing.
    11. Save the file and preview in your browser.
    12. Use your mouse pointer to test each link
    13. Leave your browser open and return to the Document window.
    14. Close the file.


Page 71/Instructor Notes/Website Development/Version 3.5/Reynolds
                                               Contextual Selector Example




                                               Pseudo-Class Example

Exploring More CSS Style Categories
You’ve had the opportunity to use the Type category of the CSS Rule Definition dialog box. Next, we
will explore four more categories; Background, Block, Box, and Border. Because you realistically
would probably never use all of the properties in each of these categories on a single page, I have
provided you with an HTML document you can use to explore a variety of these properties in the
exercise on the following page.

Page 72/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Explore Background Properties
    1. Open css_categories.htm from the WD Student Files folder. This page contains an internal
        style that defines the page and Heading 1 font.
    2. Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
        options for the New CSS Rule dialog box fields as illustrated in the first box below.
    3. Click OK to open the CSS Rule Definition dialog box.
    4. In the CSS Rule Definition dialog box, ensure that the Background category is selected.
    5. Make the Background-color and Background-image selections in the illustration and click
        OK.
    6. Select all of the text that appears between the Background and Block headings.
    7. Click Format/CSS Styles/bg from the menu.bar. Click anywhere outside the selected text.
        The image tiles horizontally and vertically, repeating as many times as it can in the text block.
    8. Select the .bg CSS Rule in the CSS panel and then click the Edit Rule button at the bottom
        right of the panel to reopen the CSS Rule Definition dialog box.
    9. Choose the Background Category.
    10. From the Background-repeat popup menu choose Repeat-X and then click Apply.
    11. Use the technique in step 10 to choose Repeat-Y.
    12. Use the technique in step 10 to choose No-Repeat.
    13. From the Background Position (X) popup menu choose Center and then click Apply.
    14. From the Background Position (Y) popup menu choose Bottom and then click Apply.
    15. Find your favorite combination, click OK and save the file but leave it open.




Setting Block Properties
You use the Block category to define spacing and alignment settings. This category controls the
alignment of text and images in a selected element. Word spacing and letter spacing settings allow you
to increase the amount of white space between words or individual letters. Vertical alignment
positions selected text or images in a table or layer. The text align property sets how text is aligned
within an element
Page 73/Instructor Notes/Website Development/Version 3.5/Reynolds
                                        Explore Block Properties
    1.   Insure that css_categories.htm is open in your Document window.
    2.   Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
         options for the New CSS Rule dialog box fields as illustrated in the first box below.
    3.   Click OK to open the CSS Rule Definition dialog box.
    4.   In the CSS Rule Definition dialog box, ensure that the Block category is selected.
    5.   Make the Letter-spacing and Text-indent selections in the illustration and click OK.
    6.   Select all of the text below the Block heading
    7.   Click Format/CSS Styles/block from the menu.bar. Click anywhere outside the selected text.
         The letter spacing is increased by 2 pixels and the first line of text is indented 30 pixels from
         the left margin.
    8.   Save the file but leave it open.




Setting Box Properties
You use the Box category of the CSS Rule Definition dialog box to define settings that control
placement of elements on the page. Padding sets the space between an element and the border or the
margin. Margin sets the space around the outer edge of an element. Float places an element on the left
or right margin so that other elements wrap around it. Clear determines whether text, for example, can
appear to the left, right, or on neither side of a floating element.

Setting Border Properties
You use the border category of the CSS Rule Definition dialog box to define settings—such as with,
color, and style—for the borders around elements.




Page 74/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Explore Box and Border Properties
    1. Ensure that css_categories.htm is open in your Document window.
    2. Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
        options for the New CSS Rule dialog box fields as illustrated in the first box below.
    3. Click OK to open the CSS Rule Definition dialog box.
    4. In the CSS Rule Definition dialog box, ensure that the Box category is selected.
    5. Make the Top selection in the second illustration.
    6. Click the Border category
    7. Ensure that a checkmark appears next to the Same for All.
    8. Set the options for the New CSS Rule dialog box fields as illustrated in the third box below.
    9. Select the text below the Border and Box heading
    10. Click Format/CSS Styles/boxandborder from the menu.bar. Click anywhere outside the
        selected text. A bright blue border appears around the text and the text is surrounded on all
        sides by 60 pixels of padding.
    11. Save and close the file.




Creating an External Style Sheet
All of the styles you have created so far in this lesson have been internal styles. Admittedly, internal
styles are the easiest to manage because they apply to a single page. However, the real power of CSS
is the ability to create an external style sheet ad link multiple pages to it. This way you only have to
modify one page. In the next exercise you will use the Senior Voices page and just the styles you need
to make the page pretty using CSS. Once the page is designed, you will open another Senior Voices
Page and attach your external style sheet.

                                    Create an External Style Sheet
    1.   Open senior_voices.htm from your WD Student Files folder.
    2.   Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
         options for the New CSS Rule dialog box fields as illustrated in the first box below.
    3.   Save the new style sheet as senior_voices.css in the WD Student Files folder.
    4.   Click OK to open the CSS Rule Definition dialog box.
    5.   In the CSS Rule Definition dialog box, ensure that the Type category is selected.
    6.   Select a Font of Arial, Helvetica, Sans-Serif: a Size of Medium and then click OK.
    7.   Click the New CSS Rule button or click Format/CSS Styles/New from the menu.bar. Set the
         options for the New CSS Rule dialog box for an h1 with a Size of Large, and then click
         Apply and select the Box category to remove the checkmarks next to Padding and Margin to
         set the Padding to 5 pixels and the Margin at 0 and click Apply.
Page 75/Instructor Notes/Website Development/Version 3.5/Reynolds
    8. Choose the Border category and remove the checkmarks next to Style, Width, and Color to
        choose Style Top and Left of Solid, Width Top and Left of Thin, and Color Top and Left
        of #F0000.
    9. Click the OK to close the dialog box.
    10. Select the body style in the CSS Rule panel.
    11. Click the Edit Rule button in the Properties panel.
    12. Choose the Background category
    13. Click the Browse button, select bg_branch_l.jpg from the images folder click Apply.
    14. Make the other selections in the second box below and click OK
    15. Save the file and preview it in your browser.
    16. Leave the browser and return to the Document window.
    17. Close the file.




Attaching an External Style Sheet
Once you’ve defined styles in an external style sheet, you can use the CSS Rules panel to attach the
style sheet to an HTML file. The real power of CSS formatting is that you can have the styles for
your entire site stored in one CSS file and link multiple pages to it. Then when you want to update the
styles, you have to only open one file and make modifications. All HTML files attached to the
external style sheet automatically update when loaded into a web browser.

                                     Attach an External Style Sheet
    1.   Open sv_history.htm from your WD Student Files folder.
    2.   Click Format/CSS Styles/Attach Style Sheet from the menu.bar.
    3.   Ensure that the Add as link radio button is chosen.
    4.   Click the Browse button, select senior_voices.css from your WD Student Files folder and
         then click OK to choose
    5.   Click OK to close the Attach External dialog box.
    6.   To delete an external style sheet attachment, select senior_voices.css which appears directly
         below the CSS Rules panel tab.
    7.   Click the Delete CSS Rule button.
    8.   Ave and close all files




Page 76/Instructor Notes/Website Development/Version 3.5/Reynolds
                              Unit H: Working with Templates
Learning Objectives for Unit H
    Describe a template
    Create a template
    Describe the different types of style sheets
    Create a Cascading Style Sheet
    Apply Cascading Style Sheet attributes to a template
    Create a Web page from a template

Understanding Templates
A template is a special type of document that you use to design a “fixed” page layout; you can then
create documents based on the template that inherit its page layout. As you design a template, you
specify as “editable” which content users can edit in a document based on that template. Templates
enable template authors to control which page elements template users—such as writers, graphic
artists, or other web developers—can edit. There are several types of template regions the template
author can include in a document.

Value of template
Items that can be predesigned in a template include default font, font size, logos, and images. The
advantages of using templates include consistency in Web pages as a means of tying a site together.
Careful planning is required when creating a template.
                                        Creating a New Template
    1. Click New on the File menu
    2. Click Blank Template and then click HTML template in the Template Type list
    3. Click the Create button
    4. If the Insert bar is not displayed, click Window on the Insert bar and then click Insert
    5. If the Common category is not selected, click the Common category tab
    6. Click File on the menu bar and then click Save As. If a Dreamweaver Warning box is
        displayed, click OK
    7. Type My-Template in the Save as text box
    8. Click the Save button
    9. Note the file extension of .dwt for Dreamweaver Template
    10. When a Templates folder does not exist in your local site files, Dreamweaver will
        automatically create one to hold the first .dwt file
    11. Click the plus sign to the left of the Templates folder

                    Adding a Background Image and Title to the Template Page
   1.   Click Modify on the menu bar and then click Page Properties
   2.   Click the Browse button to the right of the Background image box
   3.   If necessary, navigate to the images folder. Click sandbg.jpg and then click the OK button in
        the Select Image Source dialog box
   4.   Click the OK button in the Page Properties dialog box.
   5.   Click the Title text box, delete Untitled Document, and type Spotlight on Templates as the
        entry
   6.   Press the ENTER key. If necessary, click the Document window
Page 77/Instructor Notes/Website Development/Version 3.5/Reynolds
                                Adding the Logo Image to the Template
   1.   Click the Assets tab in the panel groups. If necessary, click the Images icon. Scroll down, if
        necessary, and click the YinYang.gif file
   2.   Drag the YinYang.gif image to the top-left corner of the Document window
   3.   Click the Alt text box, type Reynolds Associates logo as the entry, and then press the ENTER
        key
   4.   Click anywhere on the page to deselect the image and then press the ENTER key




    Adding the Dog Name and Dog Description Prompts for the First Two Editable Regions
   1. Collapse the panel groups
   2. Type Spotlight on [name of the dog] as the heading prompt
   3. Click the Format button arrow in the Property inspector and apply Heading 2 to the spotlight
      prompt
   4. Press the ENTER key
   5. Type Add short description of the dog as the prompt for the second editable region.
   6. Bold the text and then press the ENTER key
Page 78/Instructor Notes/Website Development/Version 3.5/Reynolds
                    Adding and Centering a Table as the Third Editable Region
   1. Click Insert on the menu bar and then click Table
   2. Enter the following data in the Table dialog box: 1 for Rows, 2 for Columns, 70 percent for
       Table width, 0 for Border thickness, 5 for Cell padding, and 5 for Cell spacing. Type
       Spotlight on Dogs as the Summary text
   3. Click the OK button
   4. Click the Align box arrow in the Property inspector, and then click Center to center the table
   5. Click the left cell in the table and then drag to select both cells in the table
   6. Click the Horz button arrow in the Property inspector and then click Center.
   7. Click the Vert button arrow and then click Middle
   8. Click the left cell in the table and then type Add additional columns and rows as necessary.
       Add images and short descriptions of image to each cell in the table. as the prompt
   9. Click in the right cell. Click Insert on the menu bar, point to Image Objects, and then point to
       Image Placeholder
   10. Click Image Placeholder.
   11. In the Image Placeholder dialog box, type add_image in the Name text box as the prompt
   12. Type 64 for the Width
   13. Press the TAB key. If necessary, type 32 for the Height
   14. Click the OK button
   15. Click <table> in the tag selector and type spotlight in the Table Id box. Press the ENTER key
   16. Click to the right of the table and then press the ENTER key two times




Page 79/Instructor Notes/Website Development/Version 3.5/Reynolds
                    Adding and Centering a Table as the Fourth Editable Region
   1.   Click Insert on the menu bar and then click Table to display the Table dialog box
   2.   Enter the following data in the Insert Table dialog box: 1 for Rows, 2 for Columns, 50
        percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing.
        Type Web site links as the Summary text. Click the OK button
   3.   Click the Align button arrow in the Property inspector, and then center the table
   4.   Click the left cell and then drag to select both cells in the table
   5.   Click the Horz button arrow in the Property inspector and then click Center. Click the Vert
        button arrow and then click Middle
   6.   Click the left cell and then type Add additional columns as necessary for links as the prompt
   7.   Select the table and name it links. Press the ENTER key
   8.   Press CTRL+S to save the file. If a Dreamweaver warning box is displayed, click the OK
        button




Page 80/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Creating the First Editable Region
   1.   If necessary, click the Common tab
   2.   Click the Property inspector expander arrow to hide the Property inspector
   3.   If necessary, scroll to the top and then click to the left of the heading prompt
   4.   Click the <h2> tag in the Tag selector
   5.   Click the Templates pop-up menu arrow and point to Editable Region
   6.   Click Editable Region
   7.   Type dog_name in the Name text box
   8.   Click the OK button




                                 Creating the Second Editable Region
   1. Click to the left of the prompt, Add short description of dog, in the Document window
   2. Click the <p> tag in the tag selector. Click the Templates pop-up menu arrow and then click
      Editable Region
   3. Type dog_description in the Name text box and then click the OK button




Page 81/Instructor Notes/Website Development/Version 3.5/Reynolds
                              Creating the Third and Fourth Editable Regions
   1.   Click in the right cell of the first table and then click the <table#spotlight> tag in the tag
        selector
   2.   Click the Editable Region command on the Templates pop-up menu
   3.   Type dog_images in the Name text box, and then click the OK button
   4.   If necessary, scroll down to display the second table, click in the left cell of the second table,
        click the <table#links> tag in the tag selector, and then click the Editable Region command
        on the Templates pop-up menu
   5.   Type links in the Name text box and then click the OK button
   6.   If necessary, display the Standard toolbar and then click the Save button




                                    Displaying the Design Panel Group
   1.   Click the expand/ collapse arrow to expand the panel groups
   2.   Move the mouse pointer over the vertical bar until it turns to a two-headed arrow
   3.   Drag the vertical bar about 1⁄2 inch to the left to increase the width of the panel groups
   4.   If necessary, click Window on the menu bar and then click CSS Styles. Otherwise, click the
        CSS panel arrow




Page 82/Instructor Notes/Website Development/Version 3.5/Reynolds
                                      Adding a Style and Saving a Style Sheet
   1. Click the Files panel tab
   2. Click to the left of the text, Spotlight on [name of dog], in the dog_name editable region and
       then click the <h2> tag in the tag selector
   3. Click the New CSS Rule button
   4. If necessary, click the Tag (redefines the look of a specific tag) radio button to select it
   5. Click the Tag box and type h2 as the tag name
   6. If necessary, click the (New Style Sheet File) in the Define in: section
   7. Click the OK button
   8. If necessary, click the Save in box arrow and then click the WD-Student Files folder name.
       Click the File name text box and then type spotlight as the style sheet name
   9. Click the Save button
   10. Click the Font box arrow; click Arial, Helvetica, sans-serif in the Font list; and then press the
       TAB key
   11. Click the Size box arrow, click 24 in the Size list, and then press the TAB key two times
   12. Click the Weight box arrow, click bolder, and then press the TAB key
   13. Click the Style box arrow and then click italic
   14. Click the Color text box, type #420000, and then press the TAB key
   15. Click the OK button and then click anywhere in the dog_name editable region to deselect the
       heading prompt




Page 83/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Creating a Style for the Paragraph Text
   1.   Click to the left of the prompt, Add short description of a dog, and then click the <p> tag in
        the tag selector
   2.   Click the New CSS Rule button in the CSS Styles panel
   3.   Click the OK button
   4.   Click the Font box arrow and then click Arial, Helvetica, sans-serif
   5.   Click the Size box arrow and then click 12
   6.   Click the Weight box arrow and then click bold
   7.   Click the Color text box and then type #420000 for the color. Press the TAB key
   8.   Click the OK button
   9.   Click to the right of the paragraph to deselect it




                     Adding a Background, Border, and Text Color to a Table
   1. Click in the first cell of the dog_images table
   2. Click the <table#spotlight> tag in the tag selector
   3. Click the New CSS Rule button in the CSS Styles panel
   4. If necessary, click the Tag (redefines the look of a specific tag) radio button
   5. If necessary, select and delete the text #spotlight in the Tag box and then type table
   6. Click the OK button
   7. Click the Font box arrow and then click Arial, Helvetica, sans-serif
   8. Click the Color text box, type #FFFFFF, and then press the TAB key
   9. Click Background in the Category list
   10. Click the Background color text box, type #420000 as the color, and then press the TAB key
   11. Click Border in the Category list
   12. Verify that the Same for all check boxes are selected for Style, Width, and Color
   13. Click the Top box arrow and then click groove in the Top pop-up menu
   14. Click the Width box arrow and then click thick in the Width pop-up menu
   15. Click the top text box in the Color area and then type #CC9900 for the border color. Press the
       TAB key
   16. Click the OK button and then, if necessary, scroll down in the Document window to display
       both tables

Page 84/Instructor Notes/Website Development/Version 3.5/Reynolds
                                      Modifying the A:Link Attribute
   1. Select the links table
   2. Click the New CSS Rule button in the CSS Styles panel
   3. If necessary, click the Advanced (IDs, pseudoclass selectors) radio button
   4. If necessary, click the Define in spotlight.css radio button
   5. Click the Selector box arrow, and then point to a:link
   6. Click a:link
   7. Click the OK button
   8. Click the none check box to select the none Decoration attribute
   9. Click the Color text box, type #FFFFFF, and press the TAB key
   10. Click the OK button




Page 85/Instructor Notes/Website Development/Version 3.5/Reynolds
                                     Adding the A:Visited Attribute
   1.   Verify that the links table is selected
   2.   Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog
        box
   3.   If necessary, click the Advanced (IDs, pseudo-class selectors) radio button
   4.   Verify that the Define in spotlight.css radio button is selected
   5.   Click the Selector box arrow and then click a:visited
   6.   Click the OK button to display the CSS Rule Definition dialog box
   7.   Click the none check box to select the none Decoration attribute
   8.   Type #CC9900 in the Color text box and then press the TAB key (Figure 5-68)
   9.   Click the OK button




                                        Adding the A:Hover Attribute
   1. Verify that the links table is selected
   2. Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog
       box
   3. If necessary, click the Advanced (IDs, pseudo-class selectors) radio button
   4. Click the Selector box arrow and then click a:hover
   5. Click the OK button to display the CSS Rule Definition for a:hover in spotlight.css dialog box
   6. Type #FFCC66 in the Color text box and then press the TAB key. Click the none check box to
       select the none Decoration attribute
   7. Click the OK button and then click the Save button on the Standard toolbar
   8. If a Dreamweaver warning dialog box is displayed, click No. At this point, the template is not
       attached to any documents
   9. Close the My-Template template
   10. Click the Save button on the spotlight.css document and then close the style sheet




Page 86/Instructor Notes/Website Development/Version 3.5/Reynolds
                                Creating the English Bulldog Spotlight Web Page
   1. Click the CSS panel expand/collapse arrow to collapse the panel. If necessary, click Files to
      expand the Files panel
   2. Click File on the menu bar and then click New
   3. Click Blank Page in the New Document dialog box, verify that HTML is selected in the Page
      Type column, and then click the Create button
   4. Click the Save button on the Standard toolbar and then save the page in the WD folder. Use
      EngBulldog.htm as the file name
   5. If necessary, collapse the Property inspector


                        Applying a Template to the English Bulldog Web page
   1.   Click the Assets panel tab in the Files group panel
   2.   If necessary, click the Templates icon in the Assets panel
   3.   Click My-Template
   4.   Click the Apply button
   5.   Collapse the panel groups

            Adding the Dog Name and Dog Description to the English Bulldog Web Page
   1.   If necessary, click anywhere on the document. Move the mouse pointer over the page and note
        that in the non-editable sections, the pointer changes to a circle with a line through the middle.
        This icon indicates that this is a non-editable area
   2.   Select the text and brackets, [name of dog], in the dog_name editable region
   3.   Type the English Bulldog as the dog name
   4.   Select the prompt, Add short description of an English Bulldog, in the dog_description
        editable region. Type the following text: Known for their loose-jointed, shuffling gate and
        massive, short-faced head, the Bulldog is known to be equable, resolute and dignified. A
        medium-sized dog, they are not your typical lap dog, but would like to be! They are one of the
        most popular breeds according to AKC® Registration Statistics due to their lovable and gentle
        dispositions and adorable wrinkles. The Bulldog may be brindle, white, red, fawn, fallow or
        piebald.

Page 87/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Adding Rows to the dog_images Table
   1. Click in the left cell of the dog_images table. Click Modify on the menu bar, point to Table,
       and then point to Insert Rows or Columns
   2. Click Insert Rows or Columns
   3. Double-click the Number of Rows text box and then type 2 for the number of rows
   4. Click the OK button
   5. Select the text in row 1, column 1 of the dog_images table and then press the DELETE key
   6. Press the F6 key to switch to Expanded Tables mode
   7. If a Getting Started in Expanded Tables Mode dialog box is displayed, read the information and
       then click the OK button
   8. Display the panel groups
   9. If necessary, click the Assets tab
   10. Click the Images icon in the Assets panel
   11. Drag the perro bueno.jpg file to row 1, column 1 of the dog_images table
   12. Reduce the size of the image to a height of 125 and a width of 175
   13. Click to the right of the image
   14. Hold down the SHIFT key and then press the ENTER key. You may not see the insertion point
       until you begin typing
   15. Make sure the text color is #FFFFFF and type Friendly as the description
   16. Press the TAB key to move the insertion point to row 1, column 2
   17. Press the DELETE key to delete the image placeholder and then drag the MyDog.jpg file to the
       cell
   18. Click to the right of the image
   19. Hold down the SHIFT key and then press the ENTER key
   20. Type Gentle as the description
   21. Add the four other images and descriptions to the dog_images table. Scroll as necessary
   22. Drag each image to the appropriate table cell, click to the right of the image, hold down SHIFT
       and press the ENTER key, and then type the description
   23. Press the TAB key to move from cell to cell
   24. Press the F6 key to exit from Expanded Tables mode
   25. Hide the panel groups
   26. Display the Property inspector
   27. Click each image and add some Alt text.




Page 88/Instructor Notes/Website Development/Version 3.5/Reynolds
                                Adding the Links to the Links Table

   1. If necessary, scroll down to display the links table. Select the text in the left cell of the links
      table and then press the DELETE key
   2. Type Home as the text link in the left cell and then select the text
   3. Click the Link text box in the Property inspector, type index.htm as the link, and then press the
      TAB key
   4. Click the right cell in the links table.
   5. Type TWD Home Page as the text for the link and then select the text
   6. Click the Link text box in the Property inspector and then type
      http://www.travelswithdiesel.com as the entry
   7. Click the Target box arrow and select _blank
   8. Click the Save button on the Standard toolbar




Page 89/Instructor Notes/Website Development/Version 3.5/Reynolds
                              Unit I: Controlling Page Layout


Learning Objectives for Unit I
    Describe the advantages and disadvantages of using frames on a Web page
    Describe frameset layout and properties
    Create a frameset and frames
    Define frames and describe how they work
    Delete a frame
    Set the properties for a frame and for a frameset
    Apply and modify the properties of a frame
    Add static content to a frame using the main content frame
    Add Flash buttons as navigation elements
    Save the frame and frameset




   Note on TWD Button Creation
   In the TWD Image folder you will find a file named TWDBaseBut.jpg. I created this button in
   Adobe Photoshop using a File/New to create a new ”image” with the dimensions of 143 pixels
   wide and 40 pixels high. On this image, I used the Rectangle tool to inscribe a rectangle
   completely covering the image. I then picked out a style from the Style Palette and dragged it
   onto the image. The result was a little too saturated so I used the Image/Adjustment/Hue
   Saturation function to make the button more compatible with the backgrounds that I intended for
   it. Next, I used the horizontal text tool to create a new text layer on the image with a foreground
   color of white in Arial 30 pt. There was not enough definition of the letters on the button so I
   double-clicked the Text layer in the Layer Palette and applied a Drop Shadow and a Bevel and
   Emboss effect with a Pillow Emboss Style and a Chisel Hard Technique.
   I then used the File/Save for Web function to save each of the different buttons that I needed and
   kept the TWDBasebut for any of my future button needs.


Page 90/Instructor Notes/Website Development/Version 3.5/Reynolds
 Understanding Frames
A frames page is a special kind of HTML page that divides the browser window into different areas
called frames, each of which can show a different page. For example, our frames page that we will
create for Travels with Diesel contains two frames: Navigation Bar (1) and Main (2).




In continuing our Travels with Diesel case study we will create a frames page from scratch as a new
page. You can create a frames page by using one of the frames page templates in Dreamweaver. In
each of these templates, the navigation between frames is already set up for you. After you create the
frames page from a template, all you need to do is set the initial page you want shown in each frame.
You can select an existing page or create a new page. Then you can edit the page directly in its frame.

  Creating the Frameset
   1. Click File on the menu bar, click New, and then click Page from Sample. Point to Frameset
      in the Category list
   2. Click Framesets. Point to Split Vertical in the Sample Page column
   3. Click Split Vertical in the Sample Page column.
   4. Click the Create button. If necessary, expand the Property inspector
   5. If the frame borders do not display, click View on the menu bar, point to Visual Aids, and then
      click Frame Borders on the Visual Aids submenu. If the Property inspector is not expanded
      so that both panes are displayed, hide the panel groups, click the Property inspector
      expander arrow, and then redisplay the panel groups
   6. Accept the default names or name the frames as follows:




Page 91/Instructor Notes/Website Development/Version 3.5/Reynolds
                             Saving and Naming the Left and Main Frames
   1.   Click in the left frame, click File on the menu bar, and then click Save Frame As
   2.   In the Save As dialog box, type NavBar_frame.htm in the File name text box and then click
        the Save button
   3.   Click the right frame. Click File on the menu bar and then click Save Frame As
   4.   In the Save As dialog box, type Content_frame.htm in the File name text box and then click
        the Save button


                                    Naming and Saving the Frameset
   1.   Click the outside border of the frameset in the Frames panel. Verify that <frameset> is
        selected in the tag selector. Select Untitled Document in the Title text box on the Document
        toolbar and then type Website Development Frameset as the title
   2.   Click File on the menu bar and then point to Save Frameset As
   3.   Click Save Frameset As
   4.   Type WD_frameset as the frameset name
   5.   Click the Save button. If necessary, scroll in the Files panel


                      Adding a Background Image and a Frame Title to the Frames
   1. Click in the left frame in the Document window
   2. Click Modify on the menu bar and then click Page Properties
   3. Click the Browse button, select the waterbg.jpg image, and then click the OK button in the
       Select Image Source dialog box
   4. Click the OK button
   5. Type Website Development – Navigation Bar as the title in the Title text box
   6. Click in the right frame of the Document window
   7. Click Modify on the menu bar and then click Page Properties
   8. Click the Browse button, select the sandbg.jpg image, and then click the OK button in the
       Select Image Source dialog box
   9. Click the OK button
   10. Type Website Development – General Information as the title in the Title text box
   11. Click the Save button on the Standard toolbar




Page 92/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Inserting a Flash Button into the Left Frame
   1. Click Insert on the menu bar, point to Media, and then point to Flash Button on the Media
       submenu
   2. Click Flash Button
   3. Click Beveled Rect-Bronze. Click the Button text text box and then type Home as the text to
       display on the first button. Double click the Size box and then type 12 as the new value, if
       necessary. Point to the Browse button to the right of the Link box
   4. Click the Browse button. When the Select file dialog box is displayed, click WD-Home.htm in
       the Look in list. If necessary, click the Relative to box arrow and then select Document
   5. Click the OK button in the Select file dialog box. Point to the Target box arrow
   6. Click the Target box arrow and then point to mainFrame
   7. Click mainFrame
   8. Double-click the Save as text box and type home.swf as the file name
   9. Point to the OK button
   10. Click the OK button to insert the Home button into the left frame
   11. Click below the button to deselect it and then press the ENTER key




                                    Inserting the North America Button
   1. Click Insert on the menu bar, point to Media, and then click Flash Button on the Media
       submenu
   2. Click Beveled Rect-Bronze
   3. Click the Button text text box. Type North America as the button text
   4. Change the font size to 12, if necessary
   5. Click the Link Browse button, and then click WD-NA-Map.htm
   6. Click the OK button in the Select file dialog box
   7. Click the Target box arrow and then select mainFrame
   8. Click the Save as text box and type namap.swf as the file name
   9. Click the OK button to insert the North America button into the left frame
   10. Click below the button and then press the ENTER key
Page 93/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Inserting the South America Button
   1. Click Insert on the menu bar, point to Media, and then click Flash Button on the Media
       submenu
   2. Click Beveled Rect-Bronze
   3. Click the Button text text box. Type South America as the button text
   4. Change the font size to 12, if necessary
   5. Click the Link Browse button, and then click WD-SA-Map.htm
   6. Click the OK button in the Select file dialog box
   7. Click the Target box arrow and then select mainFrame
   8. Click the Save as text box and type samap.swf as the file name
   9. Click the OK button to insert the South America button into the left frame
   10. Click below the button and then press the ENTER key

                                        Inserting the Europe Button
   1. Click Insert on the menu bar, point to Media, and then click Flash Button on the Media
       submenu
   2. Click Beveled Rect-Bronze
   3. Click the Button text text box. Type Europe as the button text
   4. Change the font size to 12, if necessary
   5. Click the Link Browse button, and then click WD-Europe-Map.htm
   6. Click the OK button in the Select file dialog box
   7. Click the Target box arrow and then select mainFrame
   8. Click the Save as text box and type eurmap.swf as the file name
   9. Click the OK button to insert the Europe button into the left frame
   10. Click below the button and then press the ENTER key

                                         Inserting the Asia Button
   1. Click Insert on the menu bar, point to Media, and then click Flash Button on the Media
       submenu
   2. Click Beveled Rect-Bronze
   3. Click the Button text text box. Type Asia as the button text
   4. Change the font size to 12, if necessary
   5. Click the Link Browse button, and then click WD-Asia-Map.htm
   6. Click the OK button in the Select file dialog box
   7. Click the Target box arrow and then select mainFrame
   8. Click the Save as text box and type asiamap.swf as the file name
   9. Click the OK button to insert the Asia button into the left frame
   10. Click below the button and then press the ENTER key

                                        Inserting the Africa Button
   1. Click Insert on the menu bar, point to Media, and then click Flash Button on the Media
      submenu
   2. Click Beveled Rect-Bronze
   3. Click the Button text text box. Type Africa as the button text

Page 94/Instructor Notes/Website Development/Version 3.5/Reynolds
   4. Change the font size to 12, if necessary
   5. Click the Link Browse button, and then click WD-Africa-Map.htm
   6. Click the OK button in the Select file dialog box
   7. Click the Target box arrow and then select mainFrame
   8. Click the Save as text box and type afrimap.swf as the file name
   9. Click the OK button to insert the Africa button into the left frame
   10. Click below the button and then press the ENTER key

                                        Inserting the Australia Button
   11. Click Insert on the menu bar, point to Media, and then click Flash Button on the Media
       submenu
   12. Click Beveled Rect-Bronze
   13. Click the Button text text box. Type Australia as the button text
   14. Change the font size to 12, if necessary
   15. Click the Link Browse button, and then click WD-Australia -Map.htm
   16. Click the OK button in the Select file dialog box
   17. Click the Target box arrow and then select mainFrame
   18. Click the Save as text box and type ausmap.swf as the file name
   19. Click the OK button to insert the Australia button into the left frame
   20. Click below the button and then press the ENTER key

                          Adjusting the Column Width of the Navigation Frame
   1. Click the border surrounding the leftFrame and the mainFrame in the Frames panel
   2. If necessary, click the tab on the first column in the Property inspector. Double-click the
      Column Value box, type 120 as the entry, and then press the ENTER key
   3. Click the Save button on the Standard toolbar to save the navigate_frame.htm file and the
      changes to the frameset




Page 95/Instructor Notes/Website Development/Version 3.5/Reynolds
                          Adding a Border and Border Color to the Framesets
   1.   Click the border around the outer frameset in the Frames panel
   2.   Click the Borders box arrow and then point to Yes in the Borders list
   3.   Click Yes. Double-click the Border width box. Type 4 and then press the ENTER key
   4.   Click the Border color hexadecimal box, type #000000 for the border color, and then press the
        ENTER key
   5.   Click the File menu and then click Save All

                              Linking and Targeting the Default Content
   1.   Click the mainFrame in the Frames panel
   2.   Double-click content_frame.htm in the Src box in the Property inspector
   3.   Type WD-Home.htm and then press the ENTER key
   4.   If a Dreamweaver Warning box is displayed, click the Yes button
   5.   Click File on the menu bar and then click Save All




                                    Adding a No-Frames Link
   1. Drag the information.htm file to the Link box in the Property inspector and then press the
      ENTER key
   2. Click the Target box arrow and then select _top.
   3. Click the Save button on the Standard toolbar


                               Viewing the Web Site and Verifying Links
   1.   Press the F12 key to preview the TWD Frames Web site. Allow blocked content if necessary
   2.   Click each of the navigation buttons to verify that they work
   3.   If necessary, click Introduction and then click the No frames version link
   4.   Click the browser Back button to return to the framed version
   5.   Close the browser
Page 96/Instructor Notes/Website Development/Version 3.5/Reynolds
Frames vs. Tables
Besides using frames, you can also lay out a web page in a grid by using a structuring table. This
method reverses the way you are used to working with tables. Rather than including a table as one of a
web page’s elements, you include all the pages elements within one large table. A structuring table
offers positioning benefits similar to frames, yet it simplifies for your users some of the practical
aspects of working with the web page. Frames and tables have both strengths and weaknesses for web
page layout. Frames offer several features that tables can’t match—independently scrolling window
areas and decreased bandwidth demands. Most professional web designers, however, find that the
practical advantages of tables outweigh the benefits of frames. Because all the page contents are
contained in one HTML file, table layouts are easier for users to print, and they provide more accurate
data for search engine indexes. Additionally, while a browser’s address bar always displays the name
and location of the frameset file (regardless of which content pages are open in the frames), the URL
for a page structured with a table always describes the exact location of the current content. This
characteristic is especially important to accurately bookmark pages for later use. While frames are a
valuable tool in your web development toolbox and are appropriate for certain applications, tables are
more often the best choice for creating web page layouts.

                                  Web Page Layout Using a Table

   1. Click File/New/Basic Page to Create a blank document as a basis for our WD Structuring
       Table template
   2. Click Insert/Table and choose a 1 row, 2 column table with no Header (None) and OK the
       remaining defaults..
   3. Make sure that the insertion point is in the left cell of the table and drag the image/waterbg file
       to the Background URL of the cell (bg) located in the Properties Palette after the No Wrap
       checkbox.
   4. Click the insertion point in the right cell of the table and drag the image/sandbg file to the
       Background URL of this cell in the Properties Palette.
   5. Click View/Hide Panels and drag the right bottom corner of the table to make it cover your full
       screen before clicking F4 to reveal the panels again.
   6. For the moment, establish the Properties of the table as 680 pixels in width by 1000 in length
   7. Click an insertion point in the left cell and define the navigation bar area by making it a width
       of 130 in the Properties Palette leaving 550 for the right cell
   8. Set the Vertical Alignment of the cell contents for each of the two table cells as “top”.
   9. Open the TWD-NavBar file and use the copy and paste functions on the Home button to
       recreate this navigation button at the top center of the left cell of the TWD-Template file.
   10. Right-click the inserted image and choose Edit Tag <Img>…from the Shortcut menu
   11. Type “3” in the Border textbox to create a 3 pixel black border on the navigation button.
   12. Click File/Save as and create a template for all future TWD pages as TWD-Template




Page 97/Instructor Notes/Website Development/Version 3.5/Reynolds
                              Unit J: Scripting for Web Pages
Learning Objectives for Unit J
    Creating JavaScript
    Using JavaScript Variables
    Creating a Function
    Assigning a Variable
    Understanding Spry
    Using Spry Objects
    Adding a Collapsing Content Box with Spry
    Creating a Navigation Menu with Spry


Understanding JavaScript
HTML allows you to create basic web pages easily. Using many of the newest features available in
web page design, however, requires the incorporation of scripts, which are programs in a web page
that run on the viewer’s browser. Using scripts can expand the number of features you can add to your
web pages and can simplify some HTML commands.

Preview of Scripts
Scripts are computer programs in a Web page that are interpreted and run in the viewer’s browser to
create simple animations, control certain behaviors, and much more. The most commonly used
scripting languages are Netscape’s JavaScript and Microsoft’s VBScript. In an HTML document the
script is distinguished from the other items in the document by using the tag pair <SCRIPT> and
</SCRIPT>. The LANGUAGE attribute specifies the language used in the script and may be set to:
     JavaScript
     JavaScript 1.1
     JavaScript 1.2
     JavaScript 1.1 Script

                                   Creating Your First JavaScript
   <html>
   <head>
   <title>First JavaScript</title>
   </head>
   <body>
    <script language=”JavaScript”>
   <!–hide this from older browsers

   // say hello world!
   alert(“hello world!”);

   // end hiding comment 
   </script>

   </body>

Page 98/Instructor Notes/Website Development/Version 3.5/Reynolds
   </html>


When the browser reads this web page, the bold statement instructs the browser to put up a little
window with the words hello world! inside it.

                                         Creating Variables
   <html>
   <head>
   <title>Seconds in a Day</title>

   <script language = “JavaScript”>
   <!–hide me from old browsers

   var seconds_per_minute = 60;
   var minutes_per_hour = 60;
   var hours_per_day = 24;

   var seconds_per_day = seconds_per_minute * minutes_per_hour *hours_per_day;

   // end hiding stuff 
   </script>
   </head>
   <body>

   <h1>My calculations show that . . .</h1>

   <script language=”JavaScript”>
   <!–hide me

   window.document.write(“there are “);
   window.document.write(seconds_per_day);
   window.document.write(“ seconds in a day.”);

   // show me 
   </script>

   </body>
   </html>

The three “var” statements say that JavaScript should establish three variables with each of these three
names and initialize them with the values after the equal (=) symbols. Each statement ends in a semi-
colon which serves the same purpose as periods in English sentences. The word var introduces a
variable for the first time and is not used in later references.

The variable “seconds_per_day” is introduced with an initial value established by a mathematical
Page 99/Instructor Notes/Website Development/Version 3.5/Reynolds
relationship between the three previously introduced variables.

The statements within the <body>…</body> tags serve to write the H1 string to the screen followed
by a text string made up of two literals (text within quotes) separated by the current value of the
variable called seconds_per_day.

Understanding Spry
Spry Effects are a relatively new addition to Dreamweaver’s arsenal of behaviors. They first appeared
in Dreamweaver CS3 and are sophisticated visual effects that can do things like highlight elements on
a page, make a photo fade in, or shake an entire sidebar of information like an earthquake. They’re
mostly eye candy and work well when you want to draw attention to an element on the page, or create
a dramatic introduction. It’s easy to abuse these fun effects, however: If every part of your page blinks,
shrinks, shakes, and flashes, then most visitors will quickly grow tired of your page’s nonstop action.
To use a Spry Effect, you first have to apply an ID to the “target” element—the part of the page you
wish to affect. Every effect, except Slide, can target any element (an <img> tag, for instance, for an
image.) (The Slide effect can target only a <div> tag.) You’re probably thinking of IDs as something
you’d use when creating the kinds of CSS layouts discussed in Unit G. True, IDs are often associated
with Cascading Style Sheets as a way of formatting a unique element on a page. However, IDs are
also handy when you want to use JavaScript to add interactivity to a page. In fact, you can add IDs to
HTML without ever creating any associated ID styles using CSS. Recall that the HTML ID attribute
marks a tag with a unique name. You can apply CSS to that tag using an ID style, but you can also
control that tag using Java-Script. How you apply an ID to a tag differs depending on the tag, but here
are the most common techniques:

    Div tags. Assign an ID to a div using the Property inspector. Just select the div tag, and then
     use the ID field in the Property inspector to give it a unique name. In addition, you can wrap
     any collection of HTML tags (or even a single element like an image) inside a <div> tag and
     apply an ID at the same time using the Insert Div Tag tool.
    Images. When you select an image in the document window, you can type an ID for that image
     in the Property inspector’s ID box.
    Forms. Select the form and type an ID in the ID field on the left edge of the Property inspector.
    Form fields. When you insert a form field, you can set the field’s ID in the Input Tag
     Accessibility Options window. You can later set or change a field’s ID by selecting it and then
     using the ID field on the left edge of the Property inspector.
    Other elements. It’s not as straightforward to add an ID to paragraphs, headlines, bulleted lists,
     and other tags. However, it’s not that difficult if you use the Tag selector’s contextual menu.
     After you’ve applied an ID to the target, you then add a Spry Effect behavior to a tag (usually
     some tag other than the target) which then triggers the effect. For example, you might want the
     site’s banner image to emerge on the page after the Web page loads. The target is the banner
     image, but you apply the Spry Effect behavior to the <body> tag using the onLoad event


Appear/Fade
To make an element fade in or out, use the Appear/Fade effect. To add a dramatic introduction to
your site, you can fade in a large photograph on your site’s home page after the page loads. Or you can
have an “Important Announcement” box disappear when it’s clicked. To use this effect:

Page 100/Instructor Notes/Website Development/Version 3.5/Reynolds
1. Select the tag that you want to trigger the fade in or out. For example, you could pick a link that
   triggers the effect, or you could use the <body> tag coupled with the onLoad event.
2. From the Actions list on the Behavior panel, choose Effects then Appear/Fade. The Appear/Fade
   window appears (see Figure 13-4).
3. Select a target element from the first menu. Here’s where you specify which element on the page
   should appear or fade away. This menu lists every tag on the page that has an ID applied to it. In
   addition, you may see <current selection> listed, which refers to the tag you selected in step 1. You
   would choose this option if you wanted to apply the behavior to an absolutely positioned <div> tag
   that contains some kind of message—like “We’ll be closed February 2nd to celebrate Ground
   Hog’s Day!” When a site visitor clicks this <div>, it fades away.
4. Type an amount in the “Effect duration” field. This setting controls how long the fade in or out
   lasts. The duration is measured in milliseconds, so entering 1000 gets you 1 second. If you want the
   target element to appear or disappear immediately, enter 0.
5. Choose the type of effect—Fade or Appear—from the Effect menu. If you want the target
   element to fade into view, it must be hidden to begin with. Otherwise the fade in effect looks really
   weird: first you see the photo, then you don’t, and then it fades in. To make the element invisible,
   add (or edit) a style for the target element, and then use the CSS visibility property Set the visibility
   property to hidden. Alternatively, you can use the CSS display property and set its value to none.
6. Type a percentage amount in the “from” and “to” fields. Depending on which type of effect you
   selected, you’ll see either “Appear from” or “Fade from” and “Appear to” or “Fade to” in the
   Appear/Fade window. These two fields let you define the opacity of the target element. You’ll
   commonly type 100 in the “Fade from” field and 0 in the “Fade to” field. Doing so causes an image
   to fade completely out of view. However, if you like ghostly apparitions, you can fade from 100%
   to 25%—this makes a solid element become transparent.
7. Optionally, turn on the “Toggle effect” checkbox. This option turns the trigger tag into a kind of
   light switch that lets you fade the element in and out. Say you added an absolutely positioned div to
   a page that contained helpful hints on getting the most out of your Web site. You could then add a
   link that said “Show/hide hints.” Add the Appear/Fade effect, target the AP div, and turn on the
   Toggle effect checkbox. Now, when that link is clicked, the div would fade into view (if it were
   hidden) or fade out of view (if it were visible).
8. Click OK to apply the behavior. Once you’ve added the effect to a tag, you can edit or delete it just
   like any other behavior.




Page 101/Instructor Notes/Website Development/Version 3.5/Reynolds
Blind
Don’t worry: The Blind effect won’t hurt your eyes. It’s actually just a way of simulating a window
blind—either being drawn over an element to hide it or opened to reveal an element. The basic concept
and functionality is the same as the Appear/Fade effect: It lets you hide or reveal an element on a
page. Follow the same basic steps as described in the previous section for Appear/Fade.

       Note: Unlike the Appear/Fade effect, which can apply to any HTML tag with an ID, you can
       see the blind effect only to show or hide a <div> tag with an ID. So whatever content you wish
       to show or hide using this effect must be wrapped in a div.

Once you select Blind from the Effects menu in the Behaviors panel, you can control all of the basic
elements of this effect from the Blind dialog box. (Figure 13-5).

Use the Effect pull-down menu to choose which direction the blind moves. If you want to display a
hidden element on the page, choose “Blind down”. To make an element disappear, choose “Blind up.”
This behavior is totally counter-intuitive—you’d think raising a blind upward would actually reveal
something. Fortunately, you can choose either direction for both revealing or hiding an element; the
key is entering the correct percentage values in the “from” and “to” fields (Figure 13-5). If you wish to
hide an already visible element, then type 100 in the “from” field and 0 in the “to” field. To make an
element appear, first you need to set its visibility property to hidden (or its display property to none by
creating a CSS style for the target element. Next, apply the Blind effect to a tag (for example, a link or
the body tag), and then select the direction you wish the blind to move (up or down) from the Effect
menu. Finally, type 0 in the “from” field and 100 in the “to” field. The “Toggle effect” checkbox
reverses the effect when the event is triggered again. For example, a link clicked for the first time
might reveal a photo on the page; when clicked again, the photo disappears.




Grow/Shrink
The Grow/Shrink effect is another “now you see it, now you don’t” type of effect. With it, you can
make a photo, a paragraph, or a div full of content grow from a tiny speck on the screen to its full size,
or you can make an element disappear by shrinking into nothingness. The basic setup is the same as
with the Appear/Fade effect described on page 569. The Grow/Shrink window (Figure 13-6) lets you
target any element with an ID; set a duration for the effect; and then select whether to make the
Page 102/Instructor Notes/Website Development/Version 3.5/Reynolds
element appear (grow) or disappear (shrink). You can also have an element grow or shrink to a
percentage of its full size. However, unless you’re targeting an image, displaying an element at less
than its full size is usually unattractive and unreadable.
.




       Tip: You can combine multiple types of effects for a single target element. For example, you
       could make a photo fade into view when the page loads, shake when the mouse is moved over
       it, and even slide out of view when a link is clicked. However, be careful assigning multiple
       effects to the same event on the same element. If you add a Grow/Shrink effect and a Shake
       effect, both targeting the same element and using the same event, you won’t see the element
       grow and then shake—you’ll see it shake as it grows. In other words, the effects happen
       simultaneously (and usually bizarrely) instead of one after the other.

Highlight
Adding a background color to a paragraph, headline, or div is one way to create visual contrast and
make an important piece of information stand out. A red box with white type will draw the eye quicker
than a sea of black type on a white page. But if you really want to draw someone’s attention, use the
Highlight effect. Highlighting an element lets you add a flash of bright background color to it. For
instance, on a form, you may have an important instruction for a particular form field (“Your password
must be 10 characters long and not have !, # , or $ in it”). You could add the Highlight effect to the
form field so that when a visitor clicks in the field, the instruction’s background color quickly flashes,
ensuring that the visitor sees the important information. As with other Spry Effects, you use the
Behaviors panel to apply the Highlight effect to some triggering element (like a form field you click in,
or a link you mouse over). Then you set options in the Highlight window (see Figure 13-7): a target
element (any tag with an ID), the duration of the effect, and background colors. Colors work like this:
The Start Color is the background color of the target element when the effect begins. The background
subsequently fades from the Start Color to the End Color (the duration of the fade is determined by the
Effect duration setting). Finally, the End Color abruptly disappears and is replaced by the Color After
Effect. The general settings suggested by Dreamweaver when you apply the effect aren’t so good:
white, red, white. Assuming the background color of your page is white, you don’t get so much of a
flash effect as a “fade-to-a-color-that immediately-disappears” effect. The effect looks a lot better if the
Start Color is set to some bright, attention grabbing, highlight color, and the End Color is set to match

Page 103/Instructor Notes/Website Development/Version 3.5/Reynolds
the current background color of the target element. Then the effect looks like a bright flash that
gradually fades away. However, instead of a flash, you may want an element’s background to slowly
fade to a different color and stay that color. In that case, set the Start Color to match the target
element’s current background color, and use the same color for both End Color and Color After Effect.




Shake
The Shake effect is like adding an earthquake to a Web page. The target element shakes violently left
to right on the page for a second or so. And that’s all there is to it. When you apply this behavior, you
have just one option: which element on the page to shake. You can shake any element with an ID—a
div or even just a paragraph. It’s kind of a fun effect...once...and maybe just for kids.

Slide
The Slide effect is just like the Blind effect. But instead of a “blind” moving over an element to hide it,
or moving off an element to reveal it, the element itself moves. Say you have a <div> tag that contains
a gallery of photos. If you target that div with a “slide up” effect, then the images will all move
upwards and disappear at the top edge of that div. Think of the <div> as a kind of window looking out
onto the photos. When the photos move up past the window, you can’t see them any longer. You can
make an element slide up or slide down using the Effect menu in the Slide window (Figure 13-8).
And, as with the Blind effect, to make an element disappear, type 100 in the “from” field and 0 in the
“to” field. To make an element slide either up or down and appear on the page, first create a style for
the element’s ID; then apply the Slide behavior to some other element (a link or the body tag, for
instance). Finally, type 0 in the “from” field and 100 in the “to” field.




Page 104/Instructor Notes/Website Development/Version 3.5/Reynolds
Squish
The Squish effect offers no options other than selecting a target element. The effect only works to first
hide an element (by shrinking it down until it disappears) and then revealing it by making it grow. It’s
exactly like the Grow/Shrink effect with the “Toggle effect” box turned on and the Shrink effect
selected (see Figure 13-6). Since it doesn’t provide any controls for timing the effect, you’re better
off just sticking with the Grow/Shrink effect.

Go to URL
The “Go to URL” action works just like a link, in that it loads a new Web page. However, while links
work only when you click them, this action can load a page based on an event other than clicking. For
instance, you may want to load a web page when your visitor’s cursor merely moves over an image, or
when she turns on a particular radio button. Once you’ve selected a tag and chosen this action’s name
from the + menu in the Behaviors panel, you can make these settings in the resulting dialog box:
       • Open in. If you aren’t using frames, only Main Window is listed here. But if you’re working
       in a frameset file and have named each of your frames, they’re listed in the “Open in” list box.
       Click the name of the frame where you want the new page to appear.
       • URL. Fill in the URL of the page you wish to load. You can use any of the link specifying
       tricks described on “Adding a Link: type in a path or an absolute URL starting with http://, or
       click the Browse button and then select a page from your site.

Check Plugin
The Check Plugin behavior isn’t a navigation tool per se, but it helps you guide visitors to the right
page if their Web browser is missing software it needs to view your latest Flash animation, QuickTime
movie, or Shockwave game. All these multimedia goodies can add a lot of excitement to any web site.
Unfortunately, they don’t work unless your visitors have downloaded and installed the corresponding
browser plug-ins. In reality, this action doesn’t work with Internet Explorer—the most popular Web
browser—except in the case of Flash and Shockwave. That’s because Internet Explorer doesn’t have
an easy way to determine which plug-ins are installed. With Flash and Shockwave, however,
Dreamweaver adds some additional code in VBScript, a language understood by Internet Explorer.
However, Dreamweaver CS4 has added a very useful tool for checking whether a visitor has the Flash
plugin installed...best of all, you don’t need to do anything to automatically add this useful feature.
When you insert a Flash movie, Dreamweaver CS4 adds code that not only checks whether the visitor
has the Flash plugin, but can even verify that he has the correct version of the plugin. If the visitor is
missing the appropriate Flash plug-in, the page will display a message letting him know and provide a
quick and easy way to download and install the plug-in.

Message Actions
Communication is why we build Web sites: to tell a story, sell a product, or provide useful information
that can entertain and inform our visitors. Dreamweaver can enhance this communication process with
actions that provide dynamic feedback. From subtle messages in a browser’s status bar to dialog boxes
that command a visitor’s attention, Dreamweaver offers numerous ways to respond, in words, to the
things your visitors are doing on your Web pages.




Page 105/Instructor Notes/Website Development/Version 3.5/Reynolds
Popup Message
Use the Popup Message behavior to send important messages to your visitors, as shown the following
illustration. Your visitor must click OK to close the dialog box. Because a pop-up message demands
immediate attention, reserve this behavior for important announcements. To create a pop-up message,
select the tag to which you want the behavior attached. For example, adding this action to the <body>
tag with an onLoad event causes a message to appear when a visitor first loads the page; adding the
same behavior to a link with an onClick event makes the message appear when the visitor clicks the
link. From the Add Action menu (+ button) in the Behaviors panel, choose Popup Message. In the
Popup Message dialog box, type the message that you want to appear in the dialog box. (Check the
spelling and punctuation carefully; nothing says “amateur” like poorly written error messages, and
Dreamweaver’s spell-checking feature isn’t smart enough to check the spelling of these messages.)
Then click OK.




       Note to JavaScript Programmers: Your message can also include any valid JavaScript
       expression. To embed JavaScript code in a message, place it inside braces ({ }). If you want to
       include the current time and date in a message, for example, add this: {new Date( )}. If you just
       want to display a brace in the message, add a backslash, like this: \{. The backslash lets
       Dreamweaver know that you really do want a { character—and not just a bunch of
       JavaScript—to appear in the dialog box.

Set Text of Status Bar
Pop-up messages, like those described above, require your visitors to drop everything and read them.
For less urgent messages, consider the “Set Text of Status Bar” behavior. It displays a message in the
status bar of a browser window—the strip at the bottom of the window. You can add a message to a
link, for example, that lets visitors know where the link takes them. Or you could set things up so
that when a visitor moves the cursor over a photograph, copyright information appears in the window’s
status bar. You should skip this action, however. Many browsers, including Opera, Safari, and
Firefox won’t let you change the text in the status bar. In addition, many people hide their status bar,
and the fact that it’s way at the bottom of the browser window means that many visitors wouldn’t ever
notice the status bar message anyway.

Set Text of Text Field
Normally, a text field in a form (see page 439) is blank. It sits on the page and waits for someone to
type in it. The “Set Text of Text Field” behavior, by contrast, can save your visitors time by filling in
form fields automatically with obvious answers. For instance, imagine you’ve created a Web survey
that has a series of questions. The first question might require a yes or no answer, along the lines of
“Do you own a computer?” And you’ve provided radio buttons for Yes or No. The second question
might be “What brand is it?” followed by a text field where your visitors can type in the brand. But if
Page 106/Instructor Notes/Website Development/Version 3.5/Reynolds
someone answers “No” to question 1, there’s no point in her typing a response to the second question.
To help keep things moving along, you can set the second question’s text field so that it says, “Please
skip to Question 3.” To do so, simply add the “Set Text of Text Field” action to the onClick event of
the No radio button of Question 1.

To apply the “Set Text of Text Field” action, make sure your page includes a form and at least one text
field. Because this behavior changes the text in a form text field, you won’t get very far without the
proper HTML on the page. Select the tag to which you want the behavior attached. In the example
above, you’d attach the behavior to the form’s No radio button with an onClick event. However, you
aren’t limited to form elements.

When you choose “Set Text of Text Field” from the + menu in the Behaviors panel, the “Set Text of
Text Field” dialog box opens. Make the following changes:
       • Text field. The menu lists the names of every text field in the form; choose the
       name of the text field whose default text you want to change. (See Chapter 11
       for the full story on building online forms in Dreamweaver.)
       • New text. Type the text you want that field to display. Make sure you don’t make
       the message longer than the space available in the field. If you leave the New Text
       field blank, the contents of the field will be erased.

Set Text of Container
Another way to get your message across is to change the text that appears inside any element with an
ID applied. For example, this might be a <div> tag, an absolutely positioned element, or just a
paragraph with its ID property set. This action also lets you use HTML code to format the message that
appears in the layer. (Actually, the “Set Text” part of this action’s name is a bit misleading, since this
action also lets you include HTML code, images, forms, and other objects in the layer—not just text.)
As always, you start by selecting a tag. In this case, you could select a link, for example, so that
moving the mouse over the link changes the text inside a <div> to read, “Click here to see our
exclusive photos of collectable Chia Pets.” When you choose this action’s name from the + menu in
the Behaviors panel, you get these controls in a dialog box:
        • Container. The menu lists the names of every element on the Web page with an assigned ID;
        choose the name of the container whose text you want to set.
        • New HTML. In this field, type the text you wish to add to the layer. You can type in a plain-
        text message or use HTML source code to control the content’s formatting. For instance, if you
        want a word to appear bold in the layer, place the word inside a pair of strong tags like this:
        <strong>important</strong>. Or if you’d rather not mess around with HTML code, you can
        design the content using Dreamweaver’s Design view—that is, right out there in your
        document window. Copy the HTML source from the Code view, and then paste it into this
        action’s New HTML field.

Show-Hide Elements
Do you ever stare in awe when a magician makes a handkerchief disappear into thin air? Now you, too,
can perform sleight of hand on your own Web pages, making HTML disappear and reappear with ease.
Dreamweaver’s Show-Hide Elements behavior is a piece of JavaScript programming that lets you
make your own magic. Show-Hide Elements takes advantage of the Visibility property. You can use it
for things like adding pop-up tooltips to your web page, so that when a visitor’s mouse moves over a
Page 107/Instructor Notes/Website Development/Version 3.5/Reynolds
link, a paragraph appears offering a detailed explanation of where the link goes. The following steps
show how to create this effect:
        1. Add absolutely positioned divs to your Web page. Use the Visibility setting (page 362) to
        specify how you want each div to look when the page loads. If you want a layer to be visible at
        first and then disappear when your visitor performs a specific action, set the layer to Visible. If
         you want it to appear only after some specific event, set it to Hidden.
        2. In the Tag selector, click the tag to which you want the behavior attached. Web
        designers often attach behaviors to link (<a>) tags. But you can also attach them to images or to
        an image map, which defines hotspots on a single graphic. To create this effect, attach two
        behaviors to each hotspot in the document window (that is, to each <area> tag in HTML): one
        to show the div, using the onMouseOver event, and one to hide the div, using the onMouseOut
        event.
        3. If it isn’t already open, choose Window ➝ Behaviors to open the Behaviors panel. The
         Behaviors panel appears. It lets you add, remove, and modify behaviors.
        4. Click the + button on the panel. Select Show-Hide Elements from the menu. The Show-
         Hide Elements window appears. You’ll use this window to tell Dreamweaver what div you
         intend to work with first.
         5. Click an element in the list of named elements.
        It’s useful to give your elements descriptive ID names so you can easily distinguish
        which is which in a list like this one.
        6. Choose a Visibility setting for the elements by clicking one of the three buttons:
         Show, Hide, or Default. You’re determining what happens to the element when someone
         interacts with the tag you selected in step 2. Show makes the element visible, Hide hides the
         element and Default sets the element’s Visibility property to the browser’s default value.
         The choice you selected appears in parentheses next to the layer’s name.
         7. If you like, select another element and then apply another visibility option.
         A single Show-Hide Elements action can affect several elements at once. A single action can
         even make some visible and others invisible. (If you apply an action to an element by mistake,
         select the same option again to remove it from that element.)
         8. Click OK to apply the behavior.
         The Show-Hide Elements action is now listed in the Behaviors panel, as is the event that
         triggers it.

Change Property
The Change Property behavior can dynamically alter the value of a property or change the style of any
of the following HTML tags: <div>, <span>, <img>, <form>, <textarea>, or <select>. It can also
change properties for radio buttons, checkboxes, text fields, and password fields on forms. As with the
previous behavior, this one requires a working knowledge of HTML, CSS, and JavaScript.
Dreamweaver’s built-in HTML, CSS, and JavaScript references can help you get up to speed.
Select a tag, choose this behavior’s name from the + menu in the Behaviors panel, and then fill in the
following parts of the Change Property dialog box:
        • Type of element. This pop-up menu lists the 13 HTML tags that this behavior can control.
        choose the type of element whose property you wish to change.
        • Element ID. From this pop-up menu, choose the ID of the object you want to modify. You’ll
        only see elements of the type you selected from the first menu (for example, <div> or <p>
        tags). Any tag of the selected type that doesn’t have an ID applied to it will be listed, but will
Page 108/Instructor Notes/Website Development/Version 3.5/Reynolds
        have the label “unidentified” next to it. Dreamweaver will only let you choose an element with
        an ID.
        • Property. Choose the property you want to change (or, if you know enough about JavaScript
        and CSS, just type the property’s name in the Enter field). All of the options in the menu refer
        to various CSS properties. For example, “colors” refers to the color property, which sets the
        color.
        • New Value. Type the new value you wish to set for this property. This value should be
        appropriate to the type of property you’ll be changing. For example, if you’re changing a
        background color, the value should be a color, like #FF0066. The options in the Property menu
        refer to CSS properties, so you’ll find that the different possible values listed for the different
        CSS properties should work. For example, the fontWeight property is the CSS Font Weight
        property, so you could enter a value of bold to change text in an object (inside a <div> tag, for
        instance) to bold.

Adding More Behaviors
Dreamweaver’s behaviors can open a new world of interactivity. Even if you don’t understand the
complexities of JavaScript and cross-browser programming, you can easily add powerful and
interesting effects that add spice to your Web visitors’ experience. Dreamweaver comes with the
preprogrammed behaviors described in this Unit, but you can download many additional behaviors
from Adobe’s Exchange Web site (www.adobe.com/exchange)

                                                       .
                                            Using Spry Objects
   1.   To insert a Spry object simply click Insert /Spry
   2.   Select the object of choice
   3.   Customize the Spry object in the Properties Column
   4.   When you save the page, Dreamweaver will automatically add some JavaScript and css files in
        a folder called “SpryAssets” within your site. These will also need to be uploaded to your
        hosting server when you make the page live.
   5.   To change the colors you will need to edit the relevant css style in the relevant css stylesheet




Page 109/Instructor Notes/Website Development/Version 3.5/Reynolds
Spry Menu Bar




To get the Spry Properties, select the blue highlighted name of the spry (see image above)
and check the Properties Panel, then customize the Spry properties.



Click the + and – signs to add and delete menu items at each level (1st box has main menu
items, 2nd box as submenu items etc.)

Spry Tabbed Panels




Spry Accordion




Page 110/Instructor Notes/Website Development/Version 3.5/Reynolds
Spry Collapsible Panel




                                Adding a Collapsing Content Box

   1. Step One:
      Create a new html file. Then press Command-S (PC: Ctrl-S) to save the file. I have created a
      new folder for this exercise. It helps to keep everything separate.




   2. Step Two:
      I work in CODE view probably 99% of the time so for the purpose of this tutorial I will be
      referring to all edits in this view. It’s also a great way to learn and see how everything is getting
      pieced together. When in CODE view, go in between the BODY tag and simply click on the
      “Spry Collapsible Panel” – the far right icon under the Spry category. This will automatically
      add a couple div tags and also a Javascript and CSS file in the HEAD of your document. Don’t
      worry about the really long addresses that are attached. We will get rid of those in step three.

Page 111/Instructor Notes/Website Development/Version 3.5/Reynolds
   3. Step Three:
      Save your file once again, Command-S (PC: Ctrl-S). A little window will pop-up telling you
      that a new Spry Assets folder will be automatically added to your root folder and those long
      addresses will now slim down. Click OK.




   4. Step Four:
      If you click on the Preview button, or press Alt-F12 (PC: F12), you can see what is happening
      so far. Not all that exciting-looking quite yet. Now we are going to adjust the look and actions
      of this box.



   5. Step Five:
Page 112/Instructor Notes/Website Development/Version 3.5/Reynolds
       Let’s first go in and add some more text to the “Content” area of the panel. Just grab any text,
       maybe a few paragraphs worth. This is just to give us a better idea of how it’s going to look.
       Next, let’s dive into the CSS file (SpryCollapsiblePanel.css – in your SpryAssets folder) and
       slim it down to a reasonable size. Find the “.CollapsiblePanel” class because we’re going to
       add an attribute underneath there.

  Just add the attribute – width: 450px; right above the margin attribute.




   6. Step Six:
      Now the “content” box starts with an opened state. Well, that kind of defeats the purpose if we
      want to condense our content on the page, so we need to tell it to make sure that panel is closed
      when the page is launched. To do that go back to your page file. Where you see the embedded
      script at the bottom you will find “var CollapsiblePanell1″. This is passing the variable through
      the Javascript file, so all we have to do is add another attribute to make the box closed. Inside
      the SCRIPT tags at the bottom, after var Spry.Widget.CollapsiblePanel you will see a variable
      in parenthesis. Just add another attribute inside: {contentIsOpen:false}




   7. Step Seven:
      We can also customize the speed at which the panel opens and closes. In the Javascript file
      (SpryAssets/SpryCollapsiblePanel.js) go down to line 341 – this.duration = 500;
      Depending on if you want to speed up or slow this down, you can make those adjustments here.
      Simply lower the duration to around 300 if you want to speed it up or raise the duration up to
      600 if you want to slow it down.
Page 113/Instructor Notes/Website Development/Version 3.5/Reynolds
                               Creating a Navigation Menu with Spry

Step 1. Create a Page or Open an existing One
I am going to create a New Page for this example. File > New > Blank Page > HTML. Save the file. I
have saved it as spry.html

Step 2. Insert the Spry Navigation Menu
How easy is this, go to the Insert Menu up the top and then Select SPRY.




Then hover over the icon that is 4th from the right and it will say “Spry Menu Bar”, Click it and then
you will be presented with the option of creating a Vertical Menu Bar or a Horizontal Menu Bar.




For this example Select Horizontal. You will then notice that some code is automatically inserted into
the page. File > Save, you will then be asked to Save the Dependant Files. Click OK and then
Dreamweaver CS3 creates a directory called “SpryAssets” in the root of your web directory.

Page 114/Instructor Notes/Website Development/Version 3.5/Reynolds
Let’s take a look at it in its default form. Press F12 to view it in your default browser.




Notice that the Navigation Bar has 3 different levels, a drop down and also a flyout from that drop
down. GOLD!!!

Step 3. Change the Items on the Navigation Bar
To change the values of the items on the menu bar you will need to be in either in Split View or Design
View and not Code View. Then click the blue tab that surrounds the menu bar and you will notice the
menu bar properties box appear at the bottom of the screen.




The 3 columns you see are the different levels of your navigation. The first column is the top level, the
second column is 2nd level, and the third column is the 3rd level. From the Properties box you can
now change the Text, Link, Title, and Target. You can also re arrange the order of the menu items.

Step 4. Open the Cascading Style Sheet (CSS).
When you insert a SPRY Menu Bar there is a directory that was automatically created called
SpryAssets? Good. Well inside that folder you will see a file called SpryMenuBarHorizontal.css,
lets begin by opening that file. From the Files Panel on the right hand side open the CSS File.

Page 115/Instructor Notes/Website Development/Version 3.5/Reynolds
Step 5. Spry Menu Design Information
Ok now that we have the file Open, the first part of the CSS File we will look at is the Design
Information Section. Now this starts on Line 77 and you should see the commenting that describes
this.

Let’s now look at ul.MenuBarHorizontal a on Line 89. If you take a look at the HTML File that you
created in Part 1 you will notice that the Unordered List that was created was given a class
MenuBarHorizontal. Now if we look at line 89 then you will notice that we are about to change
things assocaiated to link elements of that list. Let’s just change the background color for now. You
could just as easily add a background image if you would like using the background css element.

In my example I have changed the background color from the default grey to #2C64B4. And I have
also changed the text color to White.




The next thing I will change is the Hover State of the Menu Items. If you take a look at Line 108 you
will see that you can change the Hover State. All I did was change the background color to #FF9900.

Another really cool CSS trick here is how we can change the position of the Submenu’s. If you take a
look at Line 69 of the CSS File you will notice that the Sub menu’s are given an absolute position and
a negative top margin of -5%. This causes those elements to be a touch higher than their parents. I like
them all in line so I changed this from -5% to 0. But depending on the look you want then you can
change it to whatever you would like. So as you can see you have complete control over the design
and layout of the menu and Dreamweaver handles most of the back end work for you. All you need to
do is style it and make it look as fancy as you want.


Page 116/Instructor Notes/Website Development/Version 3.5/Reynolds
                           Unit K: Working with Media Objects
   Learning Objectives for Unit K
    Describe media objects
    Insert Flash text into a Web page
    Insert a Flash movie into a Web page
    Add a background sound to a Web page
    Embed a sound file in a Web page
    Insert a video into a Web page
    Check for plug-ins
    Describe Shockwave and how to insert a Shockwave movie into a Web page
    Embed a sound file in a Web page
    Insert a video into a Web page


   Understanding Media Objects
   Multimedia arguably can be distinguished from traditional motion pictures or movies both by the
   scale of the production (i.e., media objects are typically smaller and less expensive) and by the
   possibility of audience interactivity or involvement (in which case it usually is called interactive
   multimedia). Interactive elements can include mouse usage, text entry, touch screen, voice
   commands, video capture of the user, or live participation (in live presentations).

   Helper Application
   A helper application is an external viewer program launched to display content retrieved using a
   web browser. Some common examples include Windows Media Player and QuickTime Player for
   playing streaming content. Unlike a plug-in(whose full code is included into browser code), a small
   line is added to the browser code to tell it to open a certain helper application in case it encounters
   a certain file format.

   Plug-ins
   The host application provides services which the plug-in can use, including a way for plug-ins to
   register themselves with the host application and a protocol for the exchange of data with plug-ins.
   Plug-ins depend on the services provided by the host application and do not usually work by
   themselves. Conversely, the host application operates independently of the plug-ins, making it
   possible for end-users to add and update plug-ins dynamically without needing to make changes to
   the host application.




Example Plug-In Framework

Page 117/Instructor Notes/Website Development/Version 3.5/Reynolds
   Splash Page
   An initial Web site page used to capture the user's attention for a short time as a promotion or lead-
   in to the site home page or to tell the user what kind of browser and other software they need to
   view the site. To have the splash page automatically move to the home page after a specified
   delay, include the HTML tag in the splash page as in this example with a 10-second delay:

   < META http-equiv="refresh" content="10; URL=http://www.somesitename.com/home.html" >

   The advantage of a splash page is that you can create effects or provide information that is only
   needed once a visit. For example, a user can keep coming back to the home page without having to
   be bothered with browser requirements. Some sites use "splash page" to mean the home page
   itself, especially where it contains attention-capturing visual or multimedia effects (creating a
   "splash").

   Bitmaps
   A bit map (often spelled "bitmap") defines a display space and the color for each pixel (or "bit") in
   the area displayed. GIFs and JPEGs are examples of graphic image file types that contain bit maps.
   A bit map does not need to contain a bit of color-coded information for each pixel on every row;
   instead, it needs to contain only information indicating a new color as the display scans along a
   row. For this reason, an image with a lot of solid color will tend to require a small bit map. Because
   a bit map uses a fixed or raster graphics method of specifying an image, the image cannot be
   rescaled immediately by a user without losing definition. This contrasts with vector graphics, like
   those created by Flash, which are graphic images designed to be rescaled quickly. Typically, an
   image is created using vector graphics and then, when the artist is satisfied with the image, it is
   converted to (or saved as) a raster graphic file or bit map.

                                    Open the Marketing Web Site
   1. Click the Files panel box arrow on the Files pop-up menu and then click marketing
   2. Open the splash.htm page
   3. If necessary, press CTRL+F2 to display the Insert bar and then select the Common category


                                             Adding Flash Text
   1.   Collapse the panel groups. Click the first cell in table01
   2.   Click the Media pop-up button on the Insert bar and then point to Flash Text
   3.   Click Flash Text
   4.   Click the Font button arrow, scroll down, and then click Comic Sans MS in the Font list. If the
        Comic Sans MS font is not available on your computer, select another font of your own
        choosing or as directed by your Instructor
   5.   If necessary, double-click the Size text box and type 30 as the size
   6.   Click the Bold button
   7.   If necessary, double-click the Color hexadecimal text box, type #000000, and then press the
        TAB key
   8.   In the Rollover color hexadecimal text box, type #996600 and then press the TAB key. Type A
        world of adventure - Website Development in the Text text box
   9.   Click the Bg color hexadecimal text box. Type #7EB8C1 and then press the TAB key.
Page 118/Instructor Notes/Website Development/Version 3.5/Reynolds
   10. Type media/heading01 in the Save as text box
   11. Click the OK button. If a Copy Dependent Files dialog box is displayed, click the OK button
   12. Click the second cell in table01 and then click the Flash Text command on the Media pop-up
       menu
   13. Add the following attributes to the Insert Flash Text dialog box— Font: Comic Sans MS; Size:
       20; Bold text; Color: #000000; Rollover color: #996600; Text: Visit
       www.travelswithdiesel.com for fun and adventure; Bg color: #7EB8C1; and Save as:
       media/heading02
   14. Click the OK button. Press CTRL+S to save the Web page. Display the Property inspector
   15. Press F12 to view the page in the browser. Allow blocked content, if necessary. Move the
       mouse pointer over each line of text to verify that the text changes color
   16. Close the browser




                                         Adding a Flash Movie
   1.   If necessary, scroll down and then click in the movie AP element
   2.   Display the panel groups and then click the Assets tab. Click the Flash icon in the Assets panel
        and then drag globe.swf to the movie AP element
   3.   Hide the panel groups
   4.   Click the Flash text box in the Property inspector and then type globe as the movie name
   5.   Click the Play button in the Property inspector
   6.   Click the Stop button in the Property inspector




Page 119/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Adding a Link to Go to the Index Page
   1.   Scroll up in the Document window and then click in table02
   2.   Type Skip Intro and then select the text. Click the Bold button. Click the Text Color
        hexadecimal text box and type #336633. Press the TAB key
   3.   Display the panel groups and then click the Files tab. If necessary, scroll down in the Files
        panel and then drag WD-Home.htm to the Link box in the Property inspector. Press the
        ENTER key and then click anywhere on the page
   4.   Click the Save button on the Standard toolbar and then press the F12 key to view the page in
        your browser
   5.   Click the link to verify that it works
   6.   Close the browser and return to Dreamweaver




Page 120/Instructor Notes/Website Development/Version 3.5/Reynolds
                           Adding a Background Sound and Setting Parameters
   1. Hide the Property inspector. Click below the movie AP element
   2. Click the Media pop-up button and then point to Plugin on the Media pop-up menu
   3. Click Plugin
   4. Navigate to and select the media folder and then click caliope in the list of files
   5. Click the OK button and scroll down to display the placeholder, if necessary
   6. Verify that the placeholder is selected. Display the Property inspector and then type 2 in the
       W text box
   7. Press the TAB key and then type 2 in the H text box. Press the ENTER key
   8. Click the Parameters button
   9. Type hidden in the Parameter column. Press the TAB key two times
   10. Type true in the Value column and then press the TAB key two times
   11. Type autoplay and then press the TAB key two times. Type true in the Value column
   12. Press the TAB key two times. Type loop in the Parameter column, press the TAB key two
       times, and then type false in the Value column
   13. Click the OK button
   14. Save the file
   15. Press the F12 key to open the browser and verify that the audio works. A speaker or
       headphones must be attached to the computer for you to hear the audio. Close the browser
   16. Close the splash.htm page




                                                Embedding an Audio File
   1.   Open the WD-Home.htm page and then hide the panel groups
   2.   Click to the right of the heading text, Introduction to Website Development, and then press
        the ENTER key
   3.   Click the Media pop-up button and then point to ActiveX
   4.   Click ActiveX
   5.   Click the ActiveX name box in the Property inspector and then type birdsound as the name
        of the ActiveX control
   6.   Change the W value to 200 and the H value to 45. Type CLSID:22d6f312-b0f6-11d0-94ab-
        0080c74c7e95 in the ClassID text box
   7.   Press the ENTER key
   8.   Click the Embed check box and then click the Browse for File icon to the right of the Src text
Page 121/Instructor Notes/Website Development/Version 3.5/Reynolds
       box
   9. If necessary, when Dreamweaver displays the Select Netscape Plug-In File dialog box, click
       the Look in box arrow and then, if necessary, navigate to the media folder
   10. Click the Files of type box arrow and then click All Files. Click the birdsound file. Verify that
       Document is selected in the Relative to box
   11. Click the OK button
   12. Click the Parameters button in the Property inspector
   13. If necessary, click the Plus (+) button to display the insertion point in the Parameter column
   14. Type FileName and then press the TAB key two times. Type media/birdsound.au in the
       Value column
   15. Press the TAB key two times
   16. Click the OK button
   17. Click the Save button on the Standard toolbar. If a Copy Dependent Files dialog box is
       displayed, click the OK button. This file will be stored in the Scripts folder
   18. Press the F12 key to view the Web page in your browser. Click the Play button to listen to the
       audio. A speaker or headphones are necessary to hear the sound. If a Dreamweaver dialog box
       is displayed, read the information and then click the OK button
   19. Close the browser




Page 122/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Adding Video to a Web Page
   1. If necessary, collapse the panel groups. Scroll to the bottom of the page and then click to the
       right of the Checkout Form link and press Enter
   2. Click the ActiveX button on the Common category Insert bar
   3. Click the ActiveX name box in the Property inspector and then type peloponnese as the name
   4. Press the TAB key and then change the W value to 320. Press the TAB key and then change the
       H value to 240. Press the TAB key
   5. Click the ClassID box arrow and then select the value CLSID:22d6f312-b0f6-11d0-94ab-
       0080c74c7e95
   6. Click the Align box arrow and align the ActiveX control to the right. Scroll down to view the
       right-aligned ActiveX control, if necessary
   7. Click the Embed check box in the Property inspector
   8. Click the Browse for File icon to the right of the Src text box
   9. If necessary, navigate to the media folder, click the Files of type box arrow, and then select All
       Files. Click the Peloponnese file
   10. Click the OK button




                             Dreamweaver Photo Album/ Picture Gallery
   1.  Open your Dreamweaver site.
   2.  Create a folder for your photo album (e.g. album)
   3.  Open any page within the site
   4.  Choose Commands/Create Web Photo Album from the toolbar
   5.  Give the album a title (this will show in the thumbnail page only)
   6.  You can enter subheading info if you like (this will show in the pages with the enlarged
       pictures)
   7. Choose the Source images folder by using the folder icon to browse to the relevant folder (this
       will be the folder where you have stored all the images)
   8. Choose the destination folder (from our example 'album')
   9. Choose the thumbnail size from the drop-down menu
   10. You can enter the number of columns you would like to display the thumbnails
   11. The rest can be left as is or changed according to your requirements for optimization
   12. Click on OK
   13. You will see Fireworks creating the thumbnails for all the pictures
   14. Once this is done, you will receive a message saying that the photo album has been created and
Page 123/Instructor Notes/Website Development/Version 3.5/Reynolds
       you can view the album.
   15. The album will now be in its simple unformatted state. You will have a folder called album
       under which there will be 3 folders as follows:
   16. thumbnails - contains the thumbnails
   17. images - contains the images in its original form
   18. pages - contains the pages in which the larger images are inserted along with the navigation to
       navigate between pictures and go back to home
   19. index.htm page which will have all the thumbnails with links to the larger images
   20. You can now go to the index page and apply your template (if you have one) to format the page
       and also use CSS Styles to format the text. The gallery now will look like its part of the site.
       You can do this for all the pages in the pages folder (under the gallery folder).




   Streaming Video
   Streaming video is a sequence of "moving images" that are sent in compressed form over the
   Internet and displayed by the viewer as they arrive. Streaming media is streaming video with
   sound. With streaming video or streaming media, a Web user does not have to wait to download a
   large file before seeing the video or hearing the sound. Instead, the media is sent in a continuous
   stream and is played as it arrives. The user needs a player, which is a special program that
   uncompresses and sends video data to the display and audio data to speakers. A player can be
   either an integral part of a browser or downloaded from the software maker's Web site.
   Major streaming video and streaming media technologies include RealSystem G2 from
   RealNetwork, Microsoft Windows Media Technologies (including its NetShow Services and
   Theater Server), and VDO. Microsoft's approach uses the standard MPEG compression algorithm
   for video. The other approaches use proprietary algorithms. (The program that does the
   compression and decompression is sometimes called the codec.) Microsoft's technology offers
   streaming audio at up to 96 Kbps and streaming video at up to 8 Mbps (for the NetShow Theater
   Server). However, for most Web users, the streaming video will be limited to the data rates of the
   connection (for example, up to 128 Kbps with an ISDN connection). Microsoft's streaming media
   files are in its Advanced Streaming Format (ASF).
   Streaming video is usually sent from prerecorded video files, but can be distributed as part of a live
   broadcast "feed." In a live broadcast, the video signal is converted into a compressed digital signal
   and transmitted from a special Web server that is able to do multicast, sending the same file to
   multiple users at the same time.


Page 124/Instructor Notes/Website Development/Version 3.5/Reynolds
                             Unit L: Animation and Behaviors
   Learning Objectives for Unit L
    Understanding Absolute Positioning
    Measuring in the Document Window
    Using the Layers Panel
    Creating Layers
    Modifying Layer Properties
    Designing a CSS-Positioned Page Layout
    Adding a Show-Hide Layers Behavior
    Understanding the Timelines panel
    Create a non-linear timeline
    Add a behavior to an AP element layer
    Add a play button to a timeline
    Create a linear timeline
    Add an AP element to a timeline
    Play an animation

Understanding Absolute Positioning
Absolute positioning means that you can give an element coordinates to line up with rather than having
it flow with all the elements in the page. The coordinates are anchored to a parent object (which has
relative positioning). The parent to the AP element is generally the page but can also be another object
the AP element is embedded into. All you need is a <div> tag and a few CSS positioning properties.
Positioning properties are available in the Positioning category of the CSS Rule Definition dialog box.
These properties determine, for example, the width and height of an AP element, its exact location on
the page, and how to handle overflow when the AP element content is larger than the AP element.
When you draw or insert an AP element, Dreamweaver does all the work for you by placing the CSS
Positioning properties inside the <div> tag.

Understanding Layers
The term layer is specific to Dreamweaver. There is really nothing magical about layers, in fact, you
can create one with any simple text editor. Layers are named as such because they can be positioned in
three dimensions. For example, you can set an absolute or relative location for a layer along the page’s
X and Y axes. The third dimension, the Z-Index (stacking order), allows layers to overlap one
another. The layer with the highest index number gets top billing; the layer with the lowest number is
on the bottom. You can change the Z- Index number and move a layer to any position you chose.

Measuring in the Document Window
When you need picture perfect precision in your page layout, you can add a ruler and a grid t help you
size and place layers in the Document window. Rulers are especially helpful in resizing and
positioning layers. To view rulers, choose View/Rulers/Show. To change the ruler measurements,
choose View/Rulers and then choose Pixels, Inches, or Centimeters. By default, the ruler’s zero (or
starting) point for measurements is in the top-left corner. You can change the zero point by clicking
and dragging it into the window. When the zero point is where you want it to be, release the mouse
button. To reset the default starting point for the ruler, choose View/Ruler/Reset Origin.
Page 125/Instructor Notes/Website Development/Version 3.5/Reynolds
Using the Grid
The grid is another handy tool to use when placing layers and other objects by dragging and dropping
them on the page. To view the grid, choose View/Grid/Show Grid. The grid has a “snapping” feature
that behaves like a weak magnet. When you use this feature, the border of the layer you’re dragging in
the Document window snaps to the grid. To turn on snapping, choose View/Grid/Snap to Grid. To
change the default grid setting, choose View/Grid/Grid Settings.

Using the AP Elements Panel
The AP Elements panel is the control center for managing layers. You use AP Elements panel to
prevent or enable layer overlap, change the visibility of layers, nest or stack layers, modify the Z-Index
number, and select one or more layers. To open the AP Elements panel, choose Window/ AP
Elements from the menu bar.


                                    • The visibility column shows or hides a layer. An open eye
                                indicates a visible layer; a closed eye indicates an invisible layer.
                                    • The ID column lists the layer names in the order they were
                                created.
                                    • The Z column shows the stacking order.




Inline Layers
An inline layer is one that contains the CSS positioning properties within the <div> tag. This is the
type of layer that you create automatically when you insert or draw a layer. For example, if you draw a
50 x 50 pixel layer 100 pixels from the top of the page and 100 pixels from the left of the page,
Dreamweaver writes the following code.
        <div id=” apDiv1” style=”position: absolute; left=100; top=100; width=50px; height=50px; z-
        index: 1”>Page content goes here. </div>
If you are a hand coder, you can type CSS inside the <div> tag. In the following example, I’ve added
CSS background and font properties.
        <div id=” apDiv1” style=”position: absolute; left=100; top=100; width=50px; height=50px; z-
        index: 1; background-color=”#CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size:
        12pt”>Page content goes here. </div>
While this approach is acceptable in some situations, it should not be used to lay out multiple pages in
your sit because it defeats the purpose of separating HTML structures from CSS formatting. Also, if
you have inline layers scattered throughout multiple pages in your site and you need to modify them, it
is hard to dig out the buried code.

Fully Qualified CSS Layers
A fully qualified CSS layer is a technical term for a layer that does not contain the CSS positioning
properties inside the <div> tag. That information is stored in an embedded or linked style sheet.
Page 126/Instructor Notes/Website Development/Version 3.5/Reynolds
Using the same previous layer example, let’s look at a fully qualified CSS layer.
       <div id=”apDiv1”> Page content goes here. </div>
In the associated style sheet, ou would see this:
       # apDiv1: { position: absolute; left=100; top=100; width=50px; height=50px; z-index: 1 }
If you have multiple pages I your site that use the #Layer1 style, and the style resides in an external
style sheet, you can modify all of the pages at once by modifying the style sheet’s properties in one
location.

Drawing a Layer
To draw a layer, ensure that you are in Standard mode and use the Draw AP Div button on the Layout
category of the Insert panel.

                             To draw a layer, click where you want the top-left corner to begin and drag
                             to here you want the bottom-right corner to end.

                             When you release the mouse button, the layer appears in the document
                             window. A selection handle appears at the top-left corner and the insertion
                             point blinks inside the layer.

                             To draw multiple layers, hold down the control key while drawing.


                                          Drawing a Layer
   1. Choose Edit/Preferences from the menu
   2. In the Invisible Elements category, ensure that a checkmark appears next to Anchor Points
       for AP Elements.
   3. Choose Window/AP Elements from the menu bar.
   4. Create a new HTML document and save it as layer_basics.htm.
   5. Use the Draw AP Element Div button on the Layout category of the Insert panel to draw a
       layer approximately one inch square. Do not deselect the layer. If you do not see the layer
       outline, choose View/Visual Aids/AP Element Outline and ensure there is a checkmark next to
       AP Element Outline
   6. Observe the layer marker in the upper left hand corner of the page. This is the invisible element
       that anchors the layer onto the page and identifies the location of the HTML code for the layer.
   7. Observe the AP Elements panel where the default layer name is apDiv1 and the Z-index is 1.
   8. Click apDiv1 in the AP Elements panel and observe the Tag Selector where the layer is
       identified as #apDiv1.
   9. Click <#apDiv> on the Tag Selector
   10. Choose View/Code and review the code in the <div> tag.
   11. Choose View/Design
   12. Observe the CSS-P Element properties on the Properties panel
   13. Use the technique described in step 5 to draw three more layers. Do not overlap the layers
   14. Observe the AP Elements panel.
   15. Save the file but keep it open.


Page 127/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Selecting and Modifying AP Element Properties
                                    You can view the AP Elements panel by choosing Window > AP
                                    Elements. The panel appears with all existing AP Divs listed

                                    You select an AP Div in the Document window by clicking it in
                                    the AP Elements panel. To rename an AP Div in the AP Elements
                                    panel, double-click the AP Div name and enter a new name. You
                                    can also switch among the three visibility states in the AP Elements
                                    panel by clicking in the visibility column on the left. The closed-
                                    eye icon means the AP Div is hidden. The open-eye icon means the
                                    AP Div is visible. No icon signifies default status, which generally
                                    means the AP Div is visible unless a browser setting conflicts with
                                    it.

                                           Select AP Elements
   1.   Click anywhere in the first layer, and then click the layer’s selection handle. This selects the
        layer, and eight sizing handles surround the layer. The layer name appears highlighted in the
        AP Elements panel.
   2.   In the AP Element panel, click apDiv2 to select this layer in the Document window.
   3.   In the AP Element panel, click apDiv3 to select the layer in the Document window and
        highlight the layer name in the AP Element panel.
   4.   Click any AP Element border to select a layer.
   5.   While holding down the “Shift” key, click anywhere on the four layers.
   6.   Clicks anywhere off the layers to deselect them.
   7.   Keep the file open.

                                   Resize and Move AP Elements
   1. Select the apDiv4 layer and maintain it throughout this exercise.
   2. Drag a corner sizing handle until the layer is about 50% larger.
   3. While holding down the “Control” key, press the left arrow key three times to reduce the
      width of the fourth layer by three pixels.
   4. While holding down the “Shift” and the “Control” key, press the down arrow key two times
      to increase the height of the fourth layer by twenty pixels.
   5. In the Properties panel, type 100px in the W box and 100px in the H box.
   6. Select the apDiv4 layer and then press the “Backspace” or “Delete” key to delete the fourth
      layer.
   7. Resize the remaining three layers and move them around.
   8. Keep the file open.

                                        Align AP Elements
   1.   While holding down the “Shift” key, click anywhere on each of the three layers.
   2.   Choose Modify/Arrange/Align Top.
   3.   Choose Modify/Arrange/Make same height.
   4.   Choose Modify/Arrange/Make same width.
   5.   Save the file but keep it open.
Page 128/Instructor Notes/Website Development/Version 3.5/Reynolds
                        Rename AP Elements and Change the Stacking Order
   1. Select the apDiv1 layer.
   2. Use the Bg Color box on the Properties panel to color the layer red.
   3. Now color apDiv2 blue and color apDiv3 green
   4. In the AP Elements panel, double-click apDiv1.
   5. Type red for the new element ID and press “Enter”.
   6. In the AP Elements panel, double-click apDiv2.
   7. Type blue for the new element ID and press “Enter”.
   8. In the AP Elements panel, double-click apDiv3.
   9. Type green for the new element ID and press “Enter”.
   10. In the AP Elements panel, reverse the Z-Index numbers of the first and third layers so that the
       red layer is on top and green is on the bottom.
   11. Keep the file open.

                                      Change AP Element Visibility
   1.   Click the eye icon at the top of the Visibility column in the AP Element panel to place an open
        eye icon to the left of each element ID
   2.   Use the Bg Color box on the Properties panel to color the layer red.
   3.   Repeat step 1 to make all the elements invisible.
   4.   Click the eye icon next to blue to make the blue layer visible
   5.   Repeat step 4 to make all the elements visible.
   6.   Save and close the file.

                               Control AP Element Content Overflow
   1. Open overflow.htm from your WD Student Files
   2. Open the AP Element panel. Select the banner layer
   3. In the Properties panel, observe the width and height of the layer
   4. Drag and drop the banner graphic, The Zen Garden, in the banner layer.
   5. In the AP Element panel, select the koan layer.
   6. In the Properties panel, observe the width and height of the koan layer
   7. Click the <div#koan> Tag Selector and then click the CSS Styles panel
   8. Notice the embedded style named #koan
   9. Select all of the text on the page and drag and drop it into the koan layer. The layer expands to
       accommodate the content, and the text in the layer is formatted with the #koan style.
   10. Select the koan layer
   11. In the Properties panel, choose Auto from the Overflow menu.
   12. Save the file and then preview it in your browser. The layer’s content exceeds the layer’s size,
       and a vertical scroll bar appears.
   13. Leave your browser open and return to the Dreamweaver Document window.
   14. Select the banner layer and switch to Code view.
   15. Look directly above this layer in Code view and locate the koan layer, which is identified by
       <div id=”koan”>. This is a fully qualified CSS layer. Observe that no formatting properties
       appear in the <div> tag.
   16. Still in Code view, scroll to the top of the page and loate the #koan style.
   17. Switch to Design view and close the file.

Page 129/Instructor Notes/Website Development/Version 3.5/Reynolds
Designing a CSS-Positioned Page Layout
As more and more web browsers support the use of CSS, some designers are abandoning their table-
based layout for CSS Page layout. The most important benefit of CSS is that it allows separation of
your content from its presentation. Because CSS files are stored separate from the web pages
themselves, a consistent look and feel can be applied throughout the site from a common source. For
example, changing the color and size of your headers in a single linked CSS file wil update the look of
all headers throughout the site, instantly and uniformly.

Dividing Your Web Page into Sections
The <div>…</div> tag pair is a generic tag that has no predefined presentational features.
Presentational features are provided by CSS. The tag was introduced in HTML 4.0 as a means to
define logical divisions within a web page. This means that when you use a <div> tag for page layout,
you are indicating that the enclosed content is a specific section of the page.

                                                  A basic web page may have these divisions:

                                                          <div id=”header”> header</div>
                                                          <div id=”nav”> navigation</div>
                                                          <div id=”body”> header</div>
                                                          <div id=”footer”> footer</div>

                                                  For the divisions to work with CSS, each division
                                                  must have a unique ID selector style.

The <div> element, when combined with ID selector styles, allows you to position and format sections
of the page. For example, say you want to position the header section 10 pixels from the top and 10
pixels from th left of the page, and you want the header to be 60 x 50 pixels. You would use the New
CSS Rule dialog box to create an ID selector named #header, and then you would use the Positioning
category of the CSS Rule Definition dialog box to create the following style:
        #header { position:absolute; top:10px; left:10px; width:600px; height:50px }
To create the layer, select the content for the page header and choose Insert/Layout Objects/Div Tag.
Then, from the Insert Div Tag dialog box, choose Header from the ID Menu and Wrap Around
Selection from the Insert menu. The result is a fully qualified CSS layer that snaps into the exact
position specified by the CSS ID selector style.

Defining CSS Positioning Properties
In Unit G, you learned how to redefine HTML tags, create class selector styles, and anchor pseudo-
classes. I this Unit we will explore how to create CSS ID selector styles for layers. Since a layer is
basically a box, you can use all of the categories in the CSS Rule Definition dialog box plus one more
that’s reserved for layers (Positioning). Unless you are using a layer for a timeline animation, each
layer should have a unique style that defines the positioning and placement of the layer. You should
leave any fields that are not important in the style empty. There are only a few properties that you will
use time and again, and they are easy to understand.




Page 130/Instructor Notes/Website Development/Version 3.5/Reynolds
Planning a CSS Page Layout
The approach you use in planning a CSS positioned page layout is ased on the assumption that you are
not a professional graphics artist. When you are planning your layout, you need a blueprint. The
following guide lines are merely suggestions:
    1. Assemble images, text, and any other content on the page
    2. Draw and position each layer on the page.
    3. Record the position and dimensions of each layer.
    4. Record a unique identifier for each layer that represents a section of the page; for example,
        id=”header”, id=”footer”.
    5. Delete the layers that represent your page sections.
    6. Create id selector styles for each deleted layer.
    7. Select the content for the layer, insert a <div> tag, and wrap the <div> tag around the selection
        to create a fully qualified CSS layer.
You may be thinking why would I delete the layers after going to all the trouble drawing and
positioning them? That’s a logical question and the answer is : You may recall at the beginning of this
Unit, when you insert or draw a layer, Dreamweaver inserts the positioning properties inside the <div>
tag, which creates an inline layer.
        <div id=” apDiv1” style=”position: absolute; left=100; top=100; width=50px; height=50px; z-
        index: 1; background-color=”#CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size:
        12pt”>Page content goes here. </div>
You need to keep all formatting properties outside of the <div> tag because when you create styles for
the layer content, the inline styles will override internal and external styles. This makes managing
multiple pages based on a CSS page layout extremely difficult. A better approach is to define the
styles upfront and apply them in a <div> tag. The result is a fully qualified CSS layer that is very easy
to maintain with CSS. That is the approach that I have used in the following exercises.

                            Define ID Selector Styles for AP Elements
   1. Open zen_garden.htm from your WD Student Files
   2. Open the CSS Styles panel.
   3. Click the New CSS Style button at the bottom right of the CSS Styles panel
   4. Set the New CSS Rule options illustrated below
   5. Click OK to open the CSS Rule Definition dialog box
   6. Choose the Positioning category and set the Positioning properties in the CSS Rule Definition
       dialog box appearing below.
   7. Click OK.
   8. Observe the #banner style in the CSS Styles panel.
   9. Use the technique outlined in steps 3-6 but use #content for the style name
   10. Choose the Positioning category and set the Positioning properties in the second CSS Rule
       Definition dialog box appearing below
   11. Use the technique outlined in steps 3-6 but use #pic for the style name
   12. Choose the Positioning category and set the Positioning properties in the third CSS Rule
       Definition dialog box appearing below.
   13. Save the file.




Page 131/Instructor Notes/Website Development/Version 3.5/Reynolds
Applying AP Element Styles
Once you’ve created the ID Selector styles,. You select the content to appear inside the layer. Then
you insert a <div> tag , choose the ID selector name, and wrap the <div> tag around the selection. To
insert a <div> tag:
     • Select the content on the page to which you intend to apply the style.
     • Choose Insert/Layout Objects/Div Tag or use the Insert Div Tag button of the Layout
        category of the Insert bar.
When you insert a <div> tag, the Insert Div Tag dialog box opens. From the ID menu, you choose
Wrap Around Selection. When you click OK, the layer appears on the page with the ID style applied
to it. This is the code generated as a result of applying the ID style and wrapping the <div> tag around
the banner graphic from the previous exercise.
       <div id=”banner”><img src=”images/zen_garden.gif” width=”268 height=”28”
       alt=”Zen Garden”></div>
This creates a fully qualified CSS layer, which is major because the <div> tag contains HTML content
only, not formatting instructions. All of the formatting instructions are embedded in the head of the
page.

Page 132/Instructor Notes/Website Development/Version 3.5/Reynolds
       #banner {
       position: absolute;
       z-index: 1;
       height: 28px;
       width: 268px;
       left: 200px;
       top: 50px;
       }

                                   Applying the ID Selector Styles
   1. Select the Zen Garden banner graphic.
   2. Choose Insert/Layout Objects/Div Tag or use the Insert Div Tag button of the Layout
       category of the Insert bar.
   3. From the ID menu, choose banner and from the Insert menu choose Wrap Around Selection
   4. On the Tag Selector, click <div#banner>
   5. Switch to Code view
   6. While in Code view, scroll to the top of the page and locate the internal CSS ID styles you
       defined in the previous exercise.
   7. Switch to Design view.
   8. Select all the text on the page.
   9. Repeat step 2.
   10. From the ID menu, choose content and from the Insert menu choose Wrap Around Selection
   11. Click OK.
   12. Select the remaining graphic.
   13. Repeat step 2.
   14. From the ID menu, choose pic and from the Insert menu choose Wrap Around Selection
   15. Click OK.

                                    Modifying ID Selector Styles
   1. In the CSS Styles panel, select #content.
   2. Click the Edit Style button on the bottom right of the CSS Styles panel
   3. Choose the Type category and set the Font to Arial, Helvetica, Sans-serif and Size to small.
   4. Click Apply but do not close the dialog box.
   5. Choose the Box category.
   6. In the Padding column, remove the checkmark next to Same for All
   7. Type 10px in the Left menu.
   8. Click Apply but do not close the dialog box.
   9. Choose the Border category.
   10. Remove the checkmark from the Style, Width, and Color columns.
   11. From the Style Left menu, choose Dotted
   12. From the Width Left menu, choose Thin
   13. From the Color Left menu, choose #FFC4CC
   14. Click Apply, and then click OK.
   15. Save the file and preview in your browser.
   16. Leave your browser open, return to the Document window, and close the file

Page 133/Instructor Notes/Website Development/Version 3.5/Reynolds
                                    Tour an Interactive Layers Page
   1. Open zen_garden_behaviors.htm from the WD Student Files folder
   2. Open the AP Elements panel
   3. Observe the elements in the panel
   4. Click the closed eye icon next to dogen
   5. Click the open eye icon next to dogen and then click the blank space.
   6. Save the file and preview in your browser.
   7. Click the Dogen link
   8. Click the remaining links. The Van Gogh link doesn’t do anything. You’ll apply a behavior to
       this link in the next exercise
   9. Click the Welcome link
   10. Leave your browser open, return to the Document window.
   11. In the Document window, select the text Van Gogh
   12. Observe the Targeted Rule field on the Properties panel.
   13. Choose Window/Behaviors from the menu bar.
   14. Click the Add Behaviors button and choose Show-Hide Elements from the list of actions.
   15. Click Hide next to all elements except banner, vangogh, and nav.
   16. Click OK
   17. Save the file, and then preview in your browser.
   18. Click the Van Gogh link.
   19. Leave your browser open and return to the Dreamweaver Document window
   20. Close the file.


                                          Timelines Panel




Page 134/Instructor Notes/Website Development/Version 3.5/Reynolds
                         Adding the Colorado Map Image and AP Element
   6. Press F2 to display the CSS Styles panel. If necessary, click the AP Elements tab
   7. Double-click tour.htm in the Files panel. If necessary, click below the introductory paragraph.
       If necessary, close the Insert bar and display the Property inspector
   8. Click Insert on the menu bar, point to Layout Objects, and then click Ap Div
   9. Click the Ap Div selection handle and type the following properties: CSS-P Element, map; L,
       125px; W, 750px; T, 125px; and H, 450px
   10. Click the Assets panel tab, scroll down if necessary, and then drag the travel_map.gif image
       onto the AP element. If necessary, select the image
   11. Click the Image box in the Property inspector and type travel_map. Then click the Alt box and
       type Colorado Map as the alternate text
   12. Click anywhere on the Web page background to deselect the image and/or AP element
   13. Click Insert on the menu bar, point to Layout Objects, and then click AP Div. If necessary,
       use the Document window horizontal and vertical scroll bars to display the AP element
   14. If necessary, select the AP element
   15. Click the apDiv2 name in the CSS-P Element Property inspector panel. Type motorhome as
       the element name and then press the ENTER key
   16. Click the motorhome AP element selection handle and then drag the element so it is near the
       star on the map
   17. If necessary, scroll in the Assets panel to display the motorhome.jpg image. Click inside the
       motorhome element and then drag the motorhome.jpg image from the Assets panel onto the
       AP element
   18. Type motor_home in the Image box and Motor Home in the Alt text box
   19. Click the expander arrow to collapse the panel groups
   20. Select the motorhome element, click a resize handle, and then resize the element to fit the
       motorhome.jpg image.
   21. If necessary, click the AP element selection handle and adjust the element so that it is in close
       proximity to the star starting point. If necessary, scroll down to display the entire map




Page 135/Instructor Notes/Website Development/Version 3.5/Reynolds
                                     Creating a Nonlinear Animation
   1. Press ALT+F9 to display the Timelines panel. If necessary, expand the Timelines panel
   2. Close the Property inspector
   3. Double-click the Timeline pop-up menu text box, if necessary
   4. Type tour as the timeline name and then press the TAB key
   5. If necessary, adjust the vertical scroll placement to display the map
   6. If necessary, select the motorhome AP element (not the image) or click the motorhome AP
       element selection handle in the Document window and then right-click the selected motorhome
       element or motorhome selection handle
   7. Point to Record Path on the context menu
   8. Click Record Path
   9. If necessary, click the motorhome AP element selection handle and then drag it to circle 1;
       then down to circle 2 and right again to circle 3; left to circle 4 and down and left to circle 5; up
       and to the right to circle 6; left to circle 7; and then up to the starting point star . Do not release
       the mouse button while dragging
   10. If a Dreamweaver dialog box is displayed, read the information and then click the OK button
   11. Click the Autoplay check box in the Timelines panel. If a Dreamweaver dialog box is
       displayed, read the information, and then click the OK button
   12. Drag the horizontal scroll bar to the right to view the rest of the timeline
   13. Click the Save button on the Standard toolbar. If the Internet Explorer warning bar is displayed,
       click Allow Blocked Content and then click OK
   14. Press the F12 key to view the animation in your browser. Close the browser and return to
       Dreamweaver




Page 136/Instructor Notes/Website Development/Version 3.5/Reynolds
                                  Adding the Stop Timeline Behavior
   1. Drag the horizontal scroll bar to the left to display frame 1
   2. If necessary, click the motorhome AP element to display the selection handle
   3. Click a frame in the Animation channel that moves the motorhome AP element close to
       circle 1.
   4. Use the Document window vertical scroll bar as necessary to reposition the image so the
       motorhome AP element is displayed
   5. Press SHIFT+F4 to display the Behaviors panel. If necessary, collapse the Files panel and
       move the mouse pointer over the Tag title bar and drag to increase the height of the Behaviors
       panel
   6. Point to the frame number in the timeline Behaviors channel that is the same number as the
       one in the Animation channel on your screen.
   7. Click your selected frame in the Behaviors channel and then point to the Add behavior (+)
       button in the Behaviors panel
   8. Click the Add behavior (+) button, point to Timeline on the Add behavior popup menu, and
       then point to Stop Timeline on the Timeline submenu
   9. Click Stop Timeline
   10. In the Stop Timeline dialog box, click the Stop Timeline box arrow and then point to tour
   11. Click tour and then click the OK button
   12. If necessary, scroll down in the Document window to display the motorhome AP element and
       the circle 2
   13. Click a frame in the Animation channel that moves the motorhome element so it is close to
       circle 2. Use the vertical and horizontal scroll bars as needed to reposition the image so that the
       motorhome AP element and circle 2 are displayed
   14. If necessary, click other frame numbers until the motorhome AP element is in close proximity
       to the circle 2 on your screen
   15. Click your selected frame in the Behaviors channel.
   16. Click the Add behavior (+) button in the Behaviors panel
   17. Point to Timeline and then click Stop Timeline
   18. Click the Stop Timeline box arrow in the Stop Timeline dialog box, click tour, and then click
       the OK button
   19. Repeat Steps 7 and 8 for the other five circle names and the star and the approximate frame
       numbers to stop the motorhome AP element. Use the horizontal and vertical scroll boxes as
       needed to scroll to display the rest of the animation bar in the Animation channel. Save the
       tour.htm page




Page 137/Instructor Notes/Website Development/Version 3.5/Reynolds
                                       Adding a Forward Button
   1. Click Insert on the menu bar, point to Layout Objects, and then click AP Div
   2. Use the vertical and horizontal scroll bars to scroll as necessary to view the new AP element in
       the Document window
   3. If necessary, select the AP element. Double-click the apDiv name in the AP Elements panel
       and rename the layer forward
   4. Click the forward layer selection handle and then drag the element onto the travel_map.gif
       image. Scroll up or down as needed
   5. Click the Files panel title bar and then, if necessary, click the Assets tab
   6. Drag the forward.gif image and AP element onto the forward element
   7. If necessary, select the forward AP element.
   8. Click a resize handle on the forward AP element and then resize the element around the image
   9. Press CTRL+F3 to display the Property inspector. Set L at 150 px and T at 500 px
   10. Close the Property inspector
   11. Click anywhere in the animation channel (or any empty frame) to deselect the behavior in the
       Behaviors panel
   12. Double-click the Tag Inspector panel title bar in the panel groups to display the Behaviors
       panel
   13. Click the forward image (not the AP element)
   14. Click the Add behavior (+) button in the Behaviors panel, point to Timeline, and then click
       Play Timeline
   15. Click the OK button in the Play Timeline dialog box. If necessary, scroll to the left and click
       column 1 in the playback head
   16. Click the Loop check box. If a warning dialog box is displayed, read the information, and then
       click the OK button
   17. Deselect the Autoplay check box
   18. Press the F12 key to view the animation in your browser. If necessary, click the Allow blocked
       content option. Click the Forward button to move the motorhome image along the animation
       path. Close the browser and return to Dreamweaver
   19. Save and then close the tour Web page




Page 138/Instructor Notes/Website Development/Version 3.5/Reynolds
                               Adding the First AP Element and Image
   1. Close the Timelines panel
   2. Click the Tag Inspector expand/collapse button, and, if necessary, expand the CSS Panel. If
       necessary, display the Files panel.
   3. Open slideshow.htm
   4. Press CTRL+F3 to display the Property inspector. If necessary, click below the heading and
       then click the Align Left button in the Property inspector
   5. Click Insert on the menu bar, point to Layout Objects, and then click AP Div
   6. Click the Assets tab. Drag the photo01.gif image onto the AP element
   7. Click the Image box and name the image bluecolumbine. Click the Alt text box and type Blue
       Columbine as the entry
   8. If necessary, select the element. Click the apDiv1 name in the AP Elements panel
   9. In the Property inspector, add the following attributes: CSS-P Element ID, photo01; L, 200px;
       T, 100px; W, 200px; and H, 400px
   10. Click the Visibility column to the left of the photo01 element in the AP Elements panel until
       the closed-eye icon is displayed
   11. If necessary, click the Document window to hide the element and image




                            Adding the Next Five AP Elements and Images
   1.   Click Insert on the menu bar, point to Layout Objects, and then click AP Div
   2.   Drag the photo02.gif image onto the AP element.
   3.   Click the Image box and name the image globeflower. Click the Alt text box and type Globe
        Flower as the entry
   4.   Select the apDiv2 name in the AP Elements panel. Add the following attributes in the CSS-P
        Element Property inspector: apDiv ID, photo02; L, 200px; T, 100px; W, 200px; and H, 400px
   5.   Click the Visibility column to the left of the photo02 element in the AP Elements panel until
        the closed eye icon is displayed. If necessary, click the Document window to hide the element
        and image
   6.   Four more elements must be added to prepare for the slide show. Repeat Steps 1 through 3 to
        add the next four elements. Table 8-2 on the next page contains the attributes for each image
        and for each element. Apply the closed-eye icon to all of the elements.
   7.   Click the Save button on the Standard toolbar

Page 139/Instructor Notes/Website Development/Version 3.5/Reynolds
                                 Displaying and Naming the Timeline
   1. Close the Property Inspector. Press ALT+F9 to display the Timelines panel
   2. If necessary, move the mouse pointer over the horizontal line below the AP Elements panel
      until the pointer turns into a two-headed arrow. Drag the mouse pointer down until all six
      elements display
   3. Click the Timelines pop-up menu text box. Delete the default text entry, type slideshow, as the
      entry and then press the TAB key


                                  Adding AP Elements to the Timeline
   1.   Move the mouse pointer over the Timelines horizontal bar until the pointer turns into a two-
        headed arrow. Drag the horizontal bar upwards until six Timeline channels are displayed
   2.   Scroll if necessary in the AP Elements panel. Click the photo01 element
   3.   Drag the photo01 AP element code marker to Animation channel 1, frame 1, in the Timelines
        panel. If a Dreamweaver dialog box I displayed, read the information and then click the OK
        button
   4.   Click the photo02 element in the AP Elements panel
   5.   Drag the photo02 AP Element code marker to Animation channel 2, frame 1, in the Timelines
        panel. If a Dreamweaver dialog box is displayed, click the OK button
   6.   Repeat Steps 3 and 4, selecting and dragging the remaining four AP elements to the Timelines
        panel: the photo03 element to Animation channel 3, the photo04 element to Animation channel
        4, the photo05 element to Animation channel 5, and the photo06 element to Animation channel
        6
   7.   If the photos cover the AP element markers, click the open- and closed-eye icons to hide the
        elements


Page 140/Instructor Notes/Website Development/Version 3.5/Reynolds
                                Adjusting the Number of Keyframes
   1. Click the keyframe at frame 15 in the photo01 animation bar in the Timelines panel
   2. Drag the keyframe to frame 13
   3. Repeat the first two for the other five AP elements


                         Adding Keyframes to Show and Hide AP Elements
   1. Click the keyframe in frame 1 in the photo01 timeline in the Timelines panel.
   2. If necessary, click the Visibility column for the photo01 element in the AP Elements panel
       until the open-eye icon is displayed
   3. Drag the playback head to frame 3
   4. Click and then rightclick the photo01 channel at frame 3. Point to Add Keyframe on the
       context menu
   5. Click Add Keyframe
   6. Click the Visibility column for the photo01 element in the AP Elements panel until the closed-
       eye icon is displayed
   7. Click the photo02 channel at frame 3 in the Timelines panel. Right-click to display the context
       menu and then click Add Keyframe
   8. Click the Visibility column for the photo02 element in the AP Elements panel until the open-
       eye icon is displayed
   9. Drag the playback head to frame 5
   10. Click the photo02 channel at frame 5 in the Timelines panel
   11. Click frame 7 in the photo03 channel in the Timelines panel, rightclick, and then click Add
       Keyframe
   12. Click the Visibility column for the photo03 element in the AP Elements panel until the closed-
       eye icon is displayed
   13. Click frame 7 in the photo04 channel in the Timelines panel, rightclick, and then click Add
       Keyframe
Page 141/Instructor Notes/Website Development/Version 3.5/Reynolds
   14. Click the Visibility column in the photo04 element in the AP Elements panel until the open-
       eye icon is displayed
   15. Click the photo04 channel at frame 9 in the Timelines panel, right-click, and then click Add
       Keyframe.
   16. Click the Visibility column in the photo04 element in the AP Elements panel until the closed-
       eye icon is displayed
   17. Click the photo05 channel in the Timelines panel at frame 9, right-click, and then click Add
       Keyframe
   18. Click the Visibility column in the photo05 element in the AP Elements panel until the open-
       eye icon is displayed
   19. Click the photo05 channel at frame 11 in the Timelines panel, right-click, and then click Add
       Keyframe
   20. Click the Visibility column in the photo05 element in the AP Elements panel until the closed-
       eye icon is displayed
   21. Click the photo06 channel at frame 11 in the Timelines panel, right-click, and then click Add
       Keyframe
   22. Click the Visibility column in the photo06 element in the AP Elements panel until the open-
       eye icon is displayed
   23. Click the photo06 channel at frame 13 in the Timelines panel
   24. If necessary, click the Visibility column in the photo06 element in the AP Elements panel until
       the closed eye icon is displayed
   25. Click the keyframe in frame 13 in the photo01 channel in the Timelines panel
   26. Click the Visibility column in the photo01 element in the AP Elements panel until the open-
       eye icon is displayed
   27. Click the Autoplay check box in the Timelines panel. If a Dreamweaver dialog box is
       displayed, read the information and then click the OK button
   28. Click the Save button on the Standard toolbar
   29. Press the F12 key to view the presentation in your browser. If necessary, click to allow blocked
       content
   30. Close the browser window and return to Dreamweaver




Page 142/Instructor Notes/Website Development/Version 3.5/Reynolds
                               Using Behaviors to Pause between Slides
   1.   Press SHIFT+F4 to display the Behaviors panel. If necessary, collapse the Files panel
   2.   Click frame 2 in the Behaviors channel in the Timelines panel
   3.   Click the Add behavior (+) button in the Behaviors panel, point to Timeline, and then point to
        Stop Timeline
   4.   Click Stop Timeline. In the Stop Timeline dialog box, click the Stop Timeline box arrow,
        click slideshow, and then click the OK button
   5.   Click frame 4 in the Behaviors channel. Click the Add behavior (+) button in the Behaviors
        panel, point to Timeline, and then click Stop Timeline
   6.   Click the Stop Timeline box arrow, click slideshow, and then click the OK button
   7.   Repeat Step 4 to add the Stop Timeline behavior to frames 6, 8, 10, and 12 in the Timelines
        panel Behaviors channel


                          Previewing a Timeline in the Timelines Panel
   1. In the Timelines panel, click the Rewind button to move the playback head to the first frame.
      Click the Play/Forward button in the Timelines panel. As you click forward to each frame,
      verify in the AP Elements panel that the eye icon is appropriately closed or opened for each of
      the AP elements and that the minus sign displays for the Stop Timeline action in the correct
      frames

                                         Adding a Start Button
   1. Click the Loop check box in the Timelines panel. If necessary, click the OK button in the
       Dreamweaver dialog box
   2. Click frame 1 on the animation bar. Close the Timelines panel
   3. Click to the right of the photo06 AP element code marker
   4. Click Insert on the menu bar, point to Layout Objects, and then click AP Div
   5. Press CTRL+F3 to display the Property inspector.
   6. If necessary, display the Layers panel. Select the layer. Name the layer start, and set L at 200
       and T at 500
   7. Click the Visibility column for the start layer in the Layers panel until the open-eye icon is
       displayed
   8. Press CTRL+F3 to hide the Property inspector and then scroll down to view the layer and
       image
   9. Resize the layer to fit the image
   10. Expand the Tag inspector group to display the Behaviors panel
   11. Click the image within the start layer, click the Add behavior (+) button in the Behaviors panel,
       point to Timeline, and then click Play Timeline
   12. Click the OK button in the Play Timeline dialog box
   13. Click the Files panel title bar. Drag the start.gif image onto the element
   14. Press CTRL+F3 to display the Property inspector
   15. If necessary, display the AP Elements panel. Select the element. Name the element start and set
       L at 200px and T at 500px. Scroll down if necessary to view the AP element
   16. Click the Visibility column for the start element in the AP Elements panel until the open-eye
       icon is displayed
   17. Press CTRL+F3 to hide the Property inspector and then scroll down to view the element and
Page 143/Instructor Notes/Website Development/Version 3.5/Reynolds
       image
   18. Resize the element to fit the image
   19. Expand the Tag Inspector group to display the
   20. Behaviors panel
   21. Click the image within the start element, click the Add behavior (+) button in the Behaviors
       panel, point to Timeline, and then click Play Timeline
   22. Click the OK button in the Play Timeline
   23. dialog box
   24. Save the file and then press the F12 key to view the slide show
   25. Click the Start button to advance from slide to slide
   26.




Page 144/Instructor Notes/Website Development/Version 3.5/Reynolds
                         Unit M: Putting Your Page on the Web
   Learning Objectives for Unit M
    Website Publication
    Domain Names
    Domain Forwarding
    Acquiring a Hosting Service
    Transferring Files
    Attracting Visitors
    Adding Meta Tags
    Search Engines
    Tracking Visitors
    Blogs


Understanding Publication
After you create a website, the next step is to publish it by uploading the files to a remote folder. A
remote folder is where you store your files for testing, production, collaboration, and publication
(depending on your environment). Dreamweaver refers to this folder as your remote site. Before you
can proceed, you must have access to a remote web server—such as your ISP's server, a server owned
by the client you're working for, an intranet server within your company, or an Internet Information
Services (IIS) server on a Windows computer. If you don't have access to such a server, contact your
ISP, your client, or your system administrator. Alternatively, you can run a web server such as IIS
(Windows) or Apache (Macintosh) on your local computer. If your remote site already contains files,
create an empty folder in your remote site (on the server), and use that empty folder as your remote
root folder.

Domain Names
Short, snappy domain addresses attract attention and are easier to remember. Cheap personalized
domain addresses are within the reach of every Web site creator and enable you to keep a visitor
familiar site name no matter where you choose to have your site hosted.

 Domain Forwarding
If you already have complimentary Web space that you want to use but the name of that space is not
catchy enough for you or you plan to move on to another Web host, you can buy your snappy URL
some other place and then use domain forwarding to reach the URL of your Web host.




Page 145/Instructor Notes/Website Development/Version 3.5/Reynolds
Acquiring a Hosting Service




Establishing a remote folder
Now you'll set up a remote folder so that you can publish your web pages. The remote folder often has
the same name as the local folder because your remote site is usually an exact duplicate of your local
site. That is, the files and subfolders that you post to your remote folder are copies of the files and
subfolders that you create locally.


Page 146/Instructor Notes/Website Development/Version 3.5/Reynolds
                                        Define a Remote Folder

   1. On your remote server, create an empty folder inside the web root folder for the server. Name
      the new empty folder TWD (the same name as your local root folder).

        Note: If Dreamweaver is your only means of access to the remote server, you won't be able to
        create an empty folder on the remote server until you've completed the remote settings in
        Dreamweaver and established a connection. If that's the case, you can define your host
        directory as your remote folder, and create a new remote folder after you've established a
        connection with the server.

        When you establish a connection with a remote server, the Files panel displays all of the files
        on the remote server in Remote view (just as it displays all of the local files on your computer
        in Local view). To display Remote view, select Remote view from the pop-up menu at the top
        of the Files panel, or click Expand/Collapse in the Files panel toolbar. When you click
        Expand/Collapse, the Files panel displays both Local view and Remote view simultaneously.

        To add an empty folder in Remote view, first display Remote view using one of the methods
        described earlier. (If you don't see your connection initially, click the Refresh button in the
        Files panel toolbar.) After you see that you're connected to your web server, right-click
        (Windows) or Control-click (Macintosh) in Remote view and select New Folder (see Figure 1).




   1. In Dreamweaver, select Site > Manage Sites.
   2. In the Manage Sites dialog box, select the TWD site.
   3. Click Edit.
   4. In the Site Definition dialog box, click the Advanced tab if the Advanced settings aren't
      showing.
   5. Select Remote Info from the Category list on the left.
   6. Select an Access option.

        The most common methods for connecting to a server on the Internet are FTP and SFTP; the
        most common method for connecting to a server on your intranet, or to your local computer if
        you're using that as a web server, is Local/Network. For more information, click Help in the
        dialog box.


Page 147/Instructor Notes/Website Development/Version 3.5/Reynolds
   1. If you select FTP, enter the following options:
   2. Enter the host name of the server (for example, ftp.yourdomain.com).
   3. In the Host directory text box, enter the path on the server from the FTP root folder to the
       remote site's root folder (cafe_townsend). If you're not sure of the path, consult your system
       administrator. In many cases, this text box should be left blank.
   4. Enter your user name and password in the appropriate text boxes.
   5. If your server supports SFTP, select the Use Secure FTP (SFTP) option.
   6. Click Test to test your connection.
   7. If the connection is unsuccessful, consult your system administrator.
   8. For more information, click Help in the dialog box.
   9. If you selected Local/Network, click the folder icon next to the text box and browse to the
       remote site's root folder.
   10. For more information, click Help in the dialog box.
   11. Click OK.
   12. Dreamweaver creates a connection to the remote folder.
   13. Click Done to close the Manage Sites dialog box.

Upload your local files
After you have set up your local and remote folders, you can upload your files from your local folder
to the web server. To make your pages publicly accessible, you must upload them even if the web
server is running on your local computer.

   1. In the Files panel (Window > Files), select the site's local root folder (TWD).
   2. Click the blue Put Files arrow icon in the Files panel toolbar
   3. When Dreamweaver asks if you want to put the entire site, click OK. Dreamweaver then
      copies all of the files to the remote folder you defined in the previous section. This operation
      may take some time, as Dreamweaver must upload all of the files in the site.
   4. Open your remote site in a browser to make sure all of the files uploaded correctly




Page 148/Instructor Notes/Website Development/Version 3.5/Reynolds
(Optional) Troubleshoot the remote folder setup
A web server can be configured in many ways. The following list provides information about some
common issues you may encounter in setting up a remote folder and how to resolve them:

   •   The Dreamweaver FTP implementation may not work properly with certain proxy servers,
       multilevel firewalls, and other forms of indirect server access.

       If you encounter problems with FTP access, ask your local system administrator for help.

   •   For the Dreamweaver FTP implementation, you must connect to the remote system's root
       folder. (In many applications, you can connect to any remote directory, and then navigate
       through the remote file system to find the directory you want.)

       Be sure that you indicate the remote system's root folder as the host directory. If you have
       problems connecting, and you've specified the host directory using a single slash (/), you might
       need to specify a relative path from the directory you are connecting to and the remote root
       folder. For example, if the remote root folder is a higher-level directory, you may need to use
       ../../ to specify the host directory.

   •   File and folder names that contain spaces and special characters often cause problems when
       transferred to a remote site.

       Use underscores in place of spaces, and avoid special characters in file and folder names
       wherever possible—colons (:), slashes (/), periods (.), and apostrophes (') in file or folder names
       can cause problems. Special characters in file or folder names sometimes may also prevent
       Dreamweaver from creating a site map.

   •   Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Macintosh) to
       connect a folder on one part of the server's disk with another folder elsewhere.

       For example, the public_html subdirectory of your home directory on the server may really be a
       link to another part of the server entirely. In most cases, such aliases have no effect on your
       ability to connect to the appropriate folder or directory; however, if you can connect to one part
       of the server but not to another, there may be an alias discrepancy.

   •   If you encounter an error message such as "cannot put file," your remote folder may be out of
       space. For more information, look at the FTP log.

Note: In general, when you encounter a problem with an FTP transfer, examine the FTP log by
selecting Site > Advanced > FTP Log.

Attracting Visitors
Too many website developers work on the if-you-build-it-they-will-come model. They won't. Once
you build a website you must give them a reason to come. A website is a passive form of marketing:
providing a signboard which points visitors to your products and services. To be most effective, a web
Page 149/Instructor Notes/Website Development/Version 3.5/Reynolds
site should be used in conjunction with seven active forms of marketing .


First, advertise your Web site to Web search engines that index the Web, such as Yahoo, Lycos,
WebCrawler, and InfoSeek. The actual registration process can be deceptively simple. A service called
SubmitIt! (http://www.submit-it.com) provides a way to submit information to approximately 15 of the
most important indexes. If you do this late at night when Internet traffic is at its lowest, you can
transmit your business's on-line address and description to all of these within three-quarters of an hour.
Done right, a person who is seeking a consulting engineer in Northern California with experience in
large electrical systems will quickly locate your name. Widget customers will be able to pick you out
from the increasing crowd of on-line vendors.

The danger is that the untutored can construct a carelessly-written 25-word or 200-character marketing
description that blows their opportunity to be seen by vast blocks of potential customers. These 25
words must be written to include the chief keywords by which customers would locate you. If you
want to change your description in a month or two, it takes much longer than an hour to contact each
of the services separately, and then convince or nag them into making changes.

You can pay modest amounts to several services to perform this important task for you. For example,
my company, Wilson Internet Services, offers as part of our website packages to carefully register your
Web site with the most important indexes. See also services available for a fee at AAA Internet
Promotions (http://www.websitepromote.com/dls) and WebPromote (http://www.webpromote.com).

2. Second, you must give them a good reason to come. A tried-and-true marketing approach is to
offer something of value for free. A number of well-financed corporate Web sites offer an entertaining
fare which changes constantly. While most small business Web marketers can't afford to compete, you
can afford to offer valuable information. If you take the time to provide up-to-date information about
your industry, for example, you'll find people returning again and again to your site, each time
increasing their chances of doing business with you.

Wilson Internet Services, for example, offers the Web Marketing Info Center
(http://www.wilsonweb.com/webmarket), a constantly-updated source of links to Web marketing
articles. Because it is so valuable, Your Company magazine recently rated it as one of the top small
business Web sites in the country, encouraging even more people to visit that page, and sending an
increasing number of people to consider our modestly-priced Web site packages for small businesses.

3. A third approach is to find industry-wide linking pages and negotiate reciprocal links to and
from their Web pages. Your trade association probably lists members. Several on-line craft centers, for
example, offer free links to other crafters. If you are a hotel, be sure to get a link with "All the Hotels
on the Web" Consultants will seek links with The Expert Marketplace, or try for a listing in the Virtual
Trade Show. The entire list can seem endless, but specific for each industry. Surf the net enough to
find which are the key sites for your field, and then seek links there.

But be judicious in your use of out-going links. You've just got those people in your door; don't
quickly send them away again.

Page 150/Instructor Notes/Website Development/Version 3.5/Reynolds
4. A fourth method is to purchase Web advertising--usually a rectangle ad with a clickable link to
your site on a carefully-selected, high-volume Web site. A certain percentage of their thousands of
visitors will explore you Web site, and hopefully like what they find. A whole industry has sprung up
to act as brokers for such ads. A couple to consider are WPRC (http://www.wprc.com) and
WebConnect (http://www.webconnect.com). Small business people will need to find ways to test the
effect of specific ads on the bottom line, perhaps by sending people from each ad to a different Web
page "front door" so you can monitor traffic from each ad.

5. A fifth important way to let people know about your Web site is to become active in several of the
thousands of Internet news groups and mailing lists. Find the groups that are most likely to be
frequented by your potential customers--groups can be very narrowly targeted--and join in the
discussion. You might find groups that relate to your industry by doing a bit of research with
DejaNews (http://www.dejanews.com), which searches messages about particular topics or companies
voiced in thousands of news groups and mailing lists.

"Lurk" for a few weeks so you understand the particular culture of the group you are targeting. Then
find ways to add constructive comments to the discussion. At the bottom of each message include a
"signature"--a 4- to 8-line mini-advertisement with your product, phone number, and Web address.
Every time you contribute to the discussion, your mini-ad is seen by hundreds. You'll find considerable
fruit this way, but like anything, it comes in response to hard work and persistence. Resist the
temptation to send bulk e-mail messages to dozens of news groups--"spamming" in Internet parlance.
People do it, but while it may bring customers, it doesn't offer the solid reputation and respect which
will build your business in the long run.

6. Sixth, make your Web site part of one or more of the many "malls." Businesses in physical
shopping malls benefit from the traffic flow of multitudes window shopping. The same can be true on-
line.

Some malls only include businesses who subscribe to a particular Internet Service Provider (ISP) or
pay a fee or percentage of their gross revenues. Others take any business that fits their particular
criteria. Dave Taylor, for example, developed The Internet Mall (http://www.internet-mall.com/), a
collection of upwards of 30,000+ businesses that meet under one roof. The mall is illusory, however,
since businesses in the mall are hosted on separate ISP sites all over the world. Perhaps the largest
mall, if you will, is Yahoo (http://www.yahoo.com), which doesn't charge anything, but gets its
revenues through advertising. Make sure you have a good link there.

7. Finally, include your e-mail and Web addresses on all your company's print literature,
stationery, and display advertising. If people believe they can find out more about your products or
services by looking on-line, many will do so.




Page 151/Instructor Notes/Website Development/Version 3.5/Reynolds
Search Engine Strategies
Perhaps the most important -- and inexpensive -- strategy is to rank high for your preferred words on
the main search engines in "organic" or "natural" searches (as opposed to paid ads). Search engines
send robot "spiders" to index the content on your webpage, so let's begin with steps to prepare your
webpages for optimal indexing. The idea here is not to trick the search engines, but to leave them
abundant clues as to what your webpage is about.

1. Write a Page Title Write a descriptive title for each page of 5 to 8 words. Remove as many "filler"
words from the title, such as "the," "and," etc. This page title will appear hyperlinked on the search
engines when your page is found. Entice searchers to click on the title by making it a bit provocative.
Place this at the top of the webpage between the <HEAD></HEAD> tags, in this format:
<TITLE>Travels with Diesel</TITLE>. (It also shows on the blue bar at the top of the web browser)




Use some descriptive keywords along with your business name on your home page. If you specialize
in silver bullets and that's what people will be searching for, don't just use your company name "Acme
Ammunition, Inc." use "Silver and Platinum Bullets -- Acme Ammunition, Inc." The words people are
most likely to search on should appear first in the title (called "keyword prominence"). Remember, this
title is nearly your entire identity on the search engines. The more people see that interests them in the
blue hyperlinked words on the search engine, the more likely they are to click on the link.


2. Write a Description and Keyword META Tag. The description should be a sentence or two
describing the content of the webpage, using the main keywords and key phrases on this page. If you
include keywords that aren't used on the webpage, you could hurt yourself. Place the Description
META Tag at the top of the webpage, between the <HEAD></HEAD> tags, in this format: Some
search engines include this description below your hyperlinked title.

<META NAME="DESCRIPTION" CONTENT="Increase visitor hits, attract traffic through
submitting URLs, META tags, news releases, banner ads, and reciprocal links">.

Your maximum number of characters should be about 255; just be aware that only the first 60 or so are
visible on Google, though more may be indexed. Some people write the article first, then write a
description of the content in that article in a sentence or two, using each of the important keywords and
key phrases included in the article. This goes into the description META tag. Then for the keywords
META tag, strip out the common words, leaving just the meaty words and phrases. The keywords
META tag is no longer used for ranking by Google, but it is currently used by Yahoo, so I'm leaving it
in. Who knows when more search engines will consider it important again? Every webpage in your site
should have a title, and META description tag.

3. Include Your Keywords in Header Tags H1, H2, H3. Search engines consider words that appear
in the page headline and sub heads to be important to the page, so make sure your desired keywords

Page 152/Instructor Notes/Website Development/Version 3.5/Reynolds
and phrases appear in one or two header tags. Don't expect the search engine to parse your Cascading
Style Sheet (CSS) to figure out which are the headlines -- it won't. Instead, use keywords in the H1,
H2, and H3 tags to provide clues to the search engine. (Note: Some designers no longer use the H1, H2
tags. That's a mistake. Make sure your designer defines these tags in the CSS rather than creating
headline tags with other names.)

4.Make Sure Your Keywords Are in the First Paragraph of Your Body Text. Search engines
expect that your first paragraph will contain the important keywords for the document -- where most
people write an introduction to the content of the page. You don't want to just artificially stuff
keywords here, however. More is not better. Google might expect a keyword density in the entire body
text area of maybe 1.5% to 2% for a word that should rank high, so don't overdo it. Other places you
might consider including keywords would be in ALT tags and perhaps COMMENT tags, though few
search engines give these much if any weight.


5. Use Keywords in Hyperlinks. Search engines are looking for clues to the focus of your page. When
they see words hyperlinked in your body text, they consider these potentially important, so hyperlink
your important keywords and keyphrases. To emphasize it even more, the webpage you are linking to
could have a page name with the keyword or keyphrase, such as blue-widget.htm -- another clue for
the search engine.

6. Make Your Navigation System Search Engine Friendly. Some webmasters use frames, but
frames can cause serious problems with search engines. Even if search engines can find your content
pages, they could be missing the key navigation to help visitors get to the rest of your site. JavaScript
and Flash navigation menus that appear when you hover are great for humans, but search engines don't
read JavaScript and Flash. Supplement them with regular HTML links at the bottom of the page,
ensuring that a chain of hyperlinks exists that take a search engine spider from your home page to
every page in your site. A site map with links to all your pages can help, too. If your site isn't getting
indexed fully, make sure you submit a Google Sitemap following directions on Google's site
(www.google.com/webmasters/sitemaps/login). Greg Tarrant's Google Sitemap Generator and Editor
(www.sitemapdoc.com) is a free tool to build these. Be aware that some content management systems
and e-commerce catalogs produce dynamic, made-on-the-fly webpages. You can sometimes recognize
them by question marks in the URLs followed by long strings of numbers or letters. Overworked
search engines sometimes stop at the question mark and refuse to go farther. If you find the search
engines aren't indexing your interior pages, you might consider URL rewriting, a site map, and targeted
content pages (see below). Commercial solutions include Bruce Clay's Dynamic Site Mapping
(www.bruceclay.com/web_dsm.htm) and YourAmigo.com's SpiderLinker (www.youramigo.com)

7. Develop  Several Pages Focused on Particular Keywords. Search Engine Optimization (SEO)
specialists no longer recommend using external doorway or gateway pages, since nearly duplicate
webpages might get you penalized. Rather, develop several webpages on your site, each of which is
focused on a different keyword or keyphrase. For example, instead of listing all your services on a
single webpage, try developing a separate webpage for each. These pages will rank higher for their
keywords since they contain targeted rather than general content. You can't fully optimize all the
webpages in your site, but these focused-content webpages you'll want to spend lots of time tweaking
to improve their rank.

Page 153/Instructor Notes/Website Development/Version 3.5/Reynolds
8. Submit Your Webpage URL        to Search Engines. Next, submit your homepage URL to the
important Web search engines that robotically index the Web. Look for a link on the search engine for
"Add Your URL." In the US, the most used search engines are: Google, Yahoo, MSN, AOL Search,
and Ask.com. Some of these feed search content to the other main search engines and portal sites. For
Europe and other areas you'll want to submit to regional search engines. It's a waste of money to pay
someone to submit your site to hundreds of search engines. Avoid registering with FFA (Free For All
pages) and other link farms. They don't work well, bring you lots of spam e-mails, and could cause you
to be penalized by the search engines. We'll talk about submitting to directories under "Linking
Strategies" below. If your page is already indexed by a search engine, don't re-submit it unless you've
made significant changes; the search engine spider will come back and revisit it soon anyway.

9. Fine-tune with Search Engine Optimization. Now fine-tune your focused-content pages
(described in point 7), and perhaps your home page, by making minor adjustments to help them rank
high. Software such as WebPosition (www.wilsonweb.com/afd/webposition.htm) allows you to check
your current ranking and compare your webpages against your top keyword competitors. I use it
regularly. WebPosition's Page Critic provides analysis of a search engine's preferred statistics for each
part of your webpage. You can do this yourself with WebPosition. The best set of SEO tools by far is
Bruce Clay's SEOToolSet (www.wilsonweb.com/afd/clay_seotoolset.htm). You can find links to
hundreds of articles on search engine strategies in our Research Room
(www.wilsonweb.com/cat/cat.cfm?page=1&subcat=mp_Search). If you want more detail, consider
purchasing my inexpensive book Dr. Wilson's Plain-Spoken Guide to Search Engine Optimization
(http://www.wilsonweb.com/ebooks/seo.htm). Many small and large businesses outsource search
engine positioning because of the considerable time investment it requires. If you outline your needs, I
can point you the right direction to SEO firms I know and trust
(www.wilsonweb.com/recommendations/seo-services.htm).

10. Promote Your Local Business on the Internet. These days many people search for local
businesses on the Internet. To make sure they find you include on every page of your website the street
address, zip code, phone number, and the five or 10 other local community place names your business
serves. If you can, include place names in the title tag, too. When you seek links to your site (see
below), a local business should get links from local businesses with place names in the communities
you serve and complementary businesses in your industry nationwide. For more information, see my
book How to Promote Your Local Business on the Internet (www.wilsonweb.com/ebooks/local.htm).



Linking Strategies
Links to your site from other sites bring additional traffic. But since Google and other major search
engines consider the number of incoming links to your website ("link popularity") as an important
factor in ranking, more links will help you rank higher in the search engines, too. Google has
introduced a 10-point scale called PageRank (10 is the highest rank) to indicate the quantity and
quality of incoming links. All links, however, are not created equal. Links from popular information
hubs will help your site rank higher than those from low traffic sites.



Page 154/Instructor Notes/Website Development/Version 3.5/Reynolds
11. Submit Your Site to Key Directories, since a link from a directory will help your ranking -- and
get you traffic. Be sure to list your site in the free Open Directory Project (www.dmoz.com), overseen
by overworked volunteer human editors. This hierarchical directory provides content feeds to all the
major search engines. Plus it provides a link to your site from an information hub that Google deems
important. But don't be impatient and resubmit or you'll go to the end of the queue.

Yahoo! Directory is another important directory to be listed in, though their search results recently
haven't been featuring their own directory as prominently. Real humans will read (and too often, pare
down) your 200-character sentence, so be very careful and follow their instructions
(http://docs.yahoo.com/info/suggest/). Hint: Use somewhat less than the maximum number of
characters allowable, so you don't have wordy text that will tempt the Yahoo! editor to begin chopping.
Business sites require a $299 annual recurring fee for Yahoo! Express to have your site considered for
inclusion within seven business days (http://docs.yahoo.com/info/suggest/busexpress.html). Other
directories to consider might be About.com and Business.com.

12. Submit Your Site to   Industry Sites and Specialized Directories. You may find some directories
focused on particular industries, such as education or finance. You probably belong to various trade
associations that feature member sites. Ask for a link. Even if you have to pay something for a link, it
may help boost your PageRank. Beware of directories that solicit you for "upgraded listings." Unless a
directory is widely used in your field, your premium ad won't help -- but the link itself will help boost
your PageRank and hence your search engine ranking. Marginal directories come and go very quickly,
making it hard to keep up. Don't try to be exhaustive here.

13. Request Reciprocal Links. Find complementary websites and request a reciprocal link to your site
(especially to your free service, if you offer one). Develop an out-of-the way page where you put links
to other sites -- so you don't send people out the back door as fast as you bring them in the front door.
Your best results will be from sites that get a similar amount of traffic to your site. High-traffic site
webmasters are too busy to answer your requests for a link and don't have anything to gain. Look for
smaller sites that may have linking pages.

14. Write Articles for Others to Use in their Newsletters. You can dramatically increase your
visibility when you write articles in your area of expertise and distribute them to editors as free content
for their e-mail newsletters or their websites. Just ask that a link to your website and a one-line
description of what you offer be included with the article. This is an effective "viral" approach that can
produce hundreds of links to your site over time.

15. Begin a Business Blog. Want links to your site? Begin a business blog on your website, hosted on
your own domain. If you offer excellent content and regular industry comment, people are likely to
link to it, increasing your site's PageRank.

16. Issue News Releases. Find newsworthy events and send news releases to print and Web periodicals
in your industry. The links to your site in online news databases may remain for years and have some
clout with link popularity. However, opening or redesigning a website is seldom newsworthy these
days. You may want to use a Web news release service such as PR Web
(http://wilsonweb.prwebdirect.com). Placing your website URL in online copies of your press release
may increase link popularity some.
Page 155/Instructor Notes/Website Development/Version 3.5/Reynolds
Traditional Strategies
Just because "old media" strategies aren't on the Internet doesn't mean they aren't effective. A mixed
media approach can be very effective.

17. Include Your URL on Stationery, Cards, and Literature. This is a no-brainer that is sometimes
overlooked. Make sure that all reprints of cards, stationery, brochures, and literature contain your
company's URL. And see that your printer gets the URL syntax correct. In print, I recommend leaving
off the http:// part and including only the www.domain.com portion.

18. Promote using traditional media. Don't discontinue print advertising that you've found effective.
But be sure to include your URL in any display or classified ads you purchase in trade journals,
newspapers, yellow pages, etc. View your website as an information adjunct to the ad. Use a two-step
approach: (1) capture readers' attention with the ad, (2) then refer them to a URL where they can obtain
more information and perhaps place an order. Look carefully at small display or classified ads in the
back of narrowly-targeted magazines or trade periodicals. Sometimes these ads are more targeted,
more effective, and less expensive than online advertising. Consider other traditional media to drive
people to your site, such as direct mail, classifieds, post cards, etc. TV can be used to promote
websites, especially in a local market.

19. Develop a Free Service. It's boring to invite people, "Come to our site and learn about our
business." It's quite another to say "Use the free kitchen remodeling calculator available exclusively on
our site." Make no mistake, it's expensive in time and energy to develop free resources, but it is very
rewarding in increased traffic to your site. Make sure that your free service is closely related to what
you are selling so the visitors you attract will be good prospects for your business. Give visitors
multiple opportunities and links to cross over to the sales part of your site.

E-Mail Strategies
Don't neglect e-mail as an important way to bring people to your website. Just don't spam. That is,
don't send bulk unsolicited e-mails without permission to people with whom you have no relationship.

20. Install a "Signature" in your E-Mail Program to help potential customers get in touch with you.
Most e-mail programs such as AOL, Netscape, and Outlook allow you to designate a "signature" to
appear at the end of each message you send. Limit it to 6 to 8 lines: Company name, address, phone
number, URL, e-mail address, and a one-phrase description of your unique business offering. Look for
examples on e-mail messages sent to you.

21. Publish an E-Mail Newsletter. While it's a big commitment in time, publishing a monthly e-mail
newsletter ("ezine") is one of the very best ways to keep in touch with your prospects, generate trust,
develop brand awareness, and build future business. It also helps you collect e-mail addresses from
those who visit your site but aren't yet ready to make a purchase. Ask for an e-mail address and first
name so you can personalize the newsletter. You can distribute your newsletter using listservers such
as:

•   Constant Contact (www.wilsonweb.com/afd/roving.htm)
•   Got Marketing Campaigner (www.wilsonweb.com/afd/gotmarketing.htm)
•   AWeber (www.wilsonweb.com/afd/aweber.htm)
Page 156/Instructor Notes/Website Development/Version 3.5/Reynolds
•   Topica Email Publisher (www.wilsonweb.com/afd/topica.htm)
•   Gammadyne Mailer (www.wilsonweb.com/afd/gammadyne.htm)

Tracking Visitors

A web counter or hit counter is a computer software program that indicates the number of visitors, or
hits, a particular webpage has received. Once set up, these counters will be incremented by one every
time the web page is accessed in a web browser.

The number is usually displayed as an inline digital image or in plain text. Images may be presented in
a variety of fonts, or styles; the classic example is the wheels of an odometer. The counter often is
accompanied by the date it was set up or last reset, otherwise it becomes impossible to estimate within
what time the number of page loads counted occurred.

Some websites have been known to offer prizes to the visitor who makes the web counter roll-over to a
specific number. Such an event is known as a kiriban.

    •   A-Counters - Free counters and web statistics plus webmasters tools.
    •   ActiveMeter.com - Free Invisible Hit Counter and Web analytics. Track Detailed visitor statistics with
        lead generation, click fraud protection and ROI tracking.
    •   AddFreeStats - Lets webmasters consult in real-time all their site's statistics.
    •   Amazing Counters - Offers over 350 styles of free hit counters, free web site statistics, and many other
        options. Simple copy and paste installation.
    •   Basicstat.com - Offers free web counters and detailed traffic reports for your web site.
    •   BLVD Status - Offers free, simple and real-time web analytics.
    •   Boing Dragon's Lair - Animated counters.
    •   Branica Web Statistics - A free counter and website statistics service. Five counter styles to choose
        from.
    •   Christiancounters.com - Free website counters.
    •   ChristiansUnite.com - Free web page hit counter for Christian webmasters. Track statistics, individual
        pages, groups of pages, or track the whole site. Check up to date statistics anytime.
    •   Clicker - Free custom web counter. Easy to add and change.
    •   Count My Page - Free website counter with real-time statistics.
    •   24 Counter - Free widget for tracking visitors' geographical locations.
    •   CounterBot.com - A Java web hit counter
    •   Counter.co.kz - Free web counter service with more then 800 styles. No registration required.
    •   counters.cc - Counter service with very detailed statistics and many options.
    •   Counting4Free.com - Free visitor counter that contains no ads. There are no limits on counters or
        visitors.
    •   CQ Counter - Free web counter and site access tracker that offers many detailed statistics and reports.
    •   Crawler Alert - With Crawler Alert, you get an automatic email notification whenever a search engine
        crawler (spider/agent/robot) visits your web site.
    •   Easy Hit Counters - Free hit counters for your website or weblog. Several designs available.
    •   Estats4all - Provides detailed information on visitors.
    •   eXTReMe Tracking - Non-public statistics and multiple page tracking are also available.
    •   EZ Webstat - Provides free website analytics with hidden or visible counter. Ability to display several
        different counters including currently online users.
    •   FakeCounter - The world's first counter to admit that its data is faked. A free service.
    •   Fast Analytic - Provides easy to install web traffic reporting tool in JavaScript widget form.
    •   Fast Online Users - Counter.

Page 157/Instructor Notes/Website Development/Version 3.5/Reynolds
   •   Fast Web Counter - Easy to use web counter.
   •   FastCounter - A free hit counter allowing webmasters to see the traffic in their sites.
   •   Fish Clix Tracker - free website tracking and statistics for fishing and outdoors sites.
   •   FishTracker - Free web-site statistics service. Provides information on search engines and keywords.
       Contains detailed reports and graphs.
   •   Flash-Counter.com - Free real-time counter service with tracking and web analytic tools.
   •   Free Counter - Robust graphical counters for your Web Page with fun graphics, we even have an
       animated Bart Simpson counter with new designs on the way.
   •   Free counter and web site statistics - Free web counter and site access tracker that offers many detailed
       statistics and reports
   •   Free Hit Counter - Lets you easily ad a free hit counter to a website. One simple line of html code will
       work on unlimited pages, unlimited websites.
   •   Free Stats - Website traffic, marketing, path and visitor profile reporting and tracking.
   •   Free Stats Counter - Free website hit counter. Over 150 styles to choose from.
   •   Free Users Online - Free users online tracking. No registration necessary.
   •   Free Web Counter Stats - Free invisible counters will display detailed statistics on your website's traffic
       patterns.
   •   Free-Counter.com - Free Counter provides a reliable hit counter with real time statistics and
       customizable images.
   •   Freehitcounters.net - Free web counters in over 150 different styles.
   •   Freewebcounter.info - A free and reliable image hit counter with many styles to choose from.
   •   Fuse Stats - A web analytics platform offering free and paid services. Creates heatmaps to visualize
       web traffic, tracks dozens of metrics about your visitors.
   •   Get Free Stat - Free website counter. Provides detailed statistics.
   •   Guests Counter - Allows you create hit counter for your web sites. No registration required.
   •   Hit-Counters.com - Counter service with simple real-time statistics.
   •   Hitslog.com - Free hit counter and web site statistics.
   •   IceRocket Blog Tracker - Free web statistics for blogs. Offers visible and invisible tracking options.
   •   LiveCounter - Web page access counter with an animated real time hits display.
   •   Ljspy Invisible Counter - Invisible counter service for blogs and forums.
   •   Loony Counter - Offering free invisible hit counters with website statistics including referrers and search
       keywords.
   •   Magic Counter - Various services offered.
   •   MR-Hosting Counter Service - Free hit counter and web site statistics service, plenty of styles to choose
       from.
   •   MV Tracker - Provides free realtime website statistics, page tracking, referrer tracking, and button
       exchange codes.
   •   My Web Stats - Free hit counter and statistics component with customizable graphics and an invisible
       counter option.
   •   MySpace & Facebook Tracker - MySpace and Facebook profile tracker which lists profile visitors in real-
       time.
   •   N1busVerticalCounter - Displays counter vertically.
   •   Next Generation Stats - Provides invisible, text-based, and graphical counters and also provides
       detailed visitor statistics.
   •   Online Count - Free service showing how many active visitors are online and the countries from which
       they are browsing.
   •   Online Web Stats - Free real-time web statistics provider.
   •   PageHits.DDnDD.NET - Hit counter.
   •   Professional Statistics - UK based website visitor tracking service. Features detailed logs and pageview
       plus a visitor summary.
   •   pStats - Offers hidden counters, text counters, or small graphic counters.
   •   q-counter.com - A fast web counter that can be used on homepages. Offers instant setup and is free of
       charge.

Page 158/Instructor Notes/Website Development/Version 3.5/Reynolds
   •   Quick Hit Counters - Offers a hit counter and web stats, by placing the code on your site. Automatically
       have access to statistics about your visitors.
   •   RealTracker - Free counter for non-commercial homepages providing instant statistics about the
       visitors.
   •   Red Stat Counter - Offers free tracking all visitor information for analyzing.
   •   Relmax Top - A Free counter that you place on your site, which then appears in our searchable
       directory. Your site is ranked by how much traffic it gets.
   •   ServuStats - Free counter service. Provides detailed graphical analysis of webpage visitors.
   •   Spy Counter - Free website statistics service.
   •   Stat 08 - Free real time invisible and visible web statistic tracker.
   •   Statbrain.com - Free web service that reveals the number of visitors that any website has. Estimates
       traffic based on web statistics from other sites.
   •   StatCounter.com - Detailed visitor statistics and a choice of graphical counters. An invisible counter is
       also available.
   •   Stats For Your Site - Provides a free hit counter for websites with informative information on where
       traffic is coming from, browser type, and IP addresses.
   •   Stats4all.com - A professional system to track and analyze the behavior of website visitors.
   •   SuperCounters - Different style hit counters for webmasters.
   •   td-soft - Link tracking tool and page counter.
   •   TDStats - Multiple site tracking, traffic statistics, referrer statistics by url and domain, search engine
       statistics, keyword tracking and system statistics, browser version, operating system, and screen
       resolution.
   •   TulipStats - Real time web site statistics and tracking service with graphical and text reports.
   •   UltraStats - Invisible and it provides multipage statistics.
   •   UrgentClick.com - Hidden free counter to track visitors and hits on each page.
   •   W3counter - Lists visits, referrals, browser versions, resolution, and operating systems used to view a
       site.
   •   Web Counter - View website statistics, flash, system, explorer, and resolution of visitors for free.
   •   Web Hit Counters - A selection of reliable website hit and traffic counters.
   •   Webcounter.be - Offers free web counter service with many features.
   •   Woopra - Offers free and real-time web tracking services. Compatible with static and dynamic sites.

Understanding Blogs
A blog (a contraction of the term weblog) is a website, usually maintained by an individual with
regular entries of commentary, descriptions of events, or other material such as graphics or video.
Entries are commonly displayed in reverse-chronological order. "Blog" can also be used as a verb,
meaning to maintain or add content to a blog.

Many blogs provide commentary or news on a particular subject; others function as more personal
online diaries. A typical blog combines text, images, and links to other blogs, Web pages, and other
media related to its topic. The ability for readers to leave comments in an interactive format is an
important part of many blogs. Most blogs are primarily textual, although some focus on art (artlog),
photographs (photoblog), sketches (sketchblog), videos (vlog), music (MP3 blog), audio (podcasting),
which are part of a wider network of social media. Micro-blogging is another type of blogging, one
which consists of blogs with very short posts. As of December 2007, blog search engine Technorati
was tracking more than 112 million blogs. With the advent of video blogging, the word blog has taken
on an even looser meaning — that of any bit of media wherein the subject expresses his opinion or
simply talks about something.



Page 159/Instructor Notes/Website Development/Version 3.5/Reynolds
Some representative Blogs
   1. Blogs & Pets - Webring for pet loving bloggers.
      -- http://ringsaround.net/petbloggers/ Computers: Internet: On the Web: Weblogs: Directories: Web
      Rings and Cliques (21)
   2. CTV News - Canadian television network's headline news, reports, videos, and blogs.
      -- http://www.ctv.ca/news News (38)
   3. Blogs that Cook - Ring for blogs that post recipes or cooking tips.
      -- http://ringsaround.net/blogsthatcook/ Computers: Internet: On the Web: Weblogs: Directories: Web
      Rings and Cliques (21)
   4. Red Pepper News - Left, green and radical perspectives on news and current affairs. Comments aims at
      "raising the political temperature".
      -- http://redpepper.blogs.com/ News: Weblogs (14)
   5. The Distant Librarian - Comments on the world of distance librarianship.
      -- http://distlib.blogs.com/ Reference: Libraries: Library and Information Science: Weblogs (18)
   6. Conmergence - Technology and internet news with a partial focus on health care applications.
      -- http://edodds.blogs.com/ Computers: News and Media: Weblogs (9)
   7. Techmeme            - Blog tracking other technology blogs.
      -- http://www.techmeme.com Computers: News and Media: Weblogs (9)

If you have any remaining questions look at www.MissingManuals.com/

   1.   Scroll to the bottom of the page and click the green icon for Missing CD-ROMs
   2.   Scroll through the alphabetical entries to the letter C and click the hot key for Missing CD-
        ROM under Creating Web Sites: The Missing Manual




Page 160/Instructor Notes/Website Development/Version 3.5/Reynolds

								
To top