Hour 1. A World Wide Web of Dreamweaver Possibilities

The World Wide Web is a network of documents that are available to anyone who has an Internet connection. This network is an enormous source of information and serves people all over the world. As I write this paragraph, I’m using sources on the Web to give me ideas and help me understand the topics I’m presenting to you. For instance, I just looked at Wikipedia (www.wikipedia.org), the free encyclopedia, to see its definition of World Wide Web. Prior to the creation of the Web, I would have had to go to the library to use an encyclopedia, but it took me only seconds to access this one on the Web.

Maybe you dream of sharing information over the Web. For instance, you can share your wedding pictures, creative writing, postcard designs, genealogical research, or a list of your CD collection with friends, family, or the entire world! Or maybe you want to sell T-shirts, cookie mixes, books, or note cards online. Perhaps you have to create a website for your small company or the large company or public agency that employs you. These are all excellent applications for Adobe Dreamweaver.

I’ve received hundreds of emails from readers around the world who, like yourself, purchased this book to learn Dreamweaver. Some of these readers send me links to the websites they created using this book and I’m thrilled to view them. Other readers are students who use this book in a course on HTML and web development. Please keep those links coming!

What Can You Do with Dreamweaver?

Dreamweaver is the most popular professional web creation tool and you are in excellent company as a user of this exceptional software. Many large corporations standardize on Dreamweaver as their web development tool of choice. Dreamweaver is also a popular tool for independent web developers who work on websites for their clients. Dreamweaver appeals to a broad variety of users, including experienced and inexperienced website developers. Dreamweaver works similarly on Macintosh and Windows-based computers and is popular on both platforms.

Personally, I create a variety of websites in Dreamweaver: my consulting business website, websites for clients, e-learning courses, and a small e-commerce website. Dreamweaver maintains a unique definition for each website so that I can quickly view and edit any of the web pages it contains. In a few hours, you will be able to do this, too.

Defining the Technology

The foundation of Dreamweaver is Hypertext Markup Language (HTML), a language used to format content to view over the World Wide Web via software called a web browser. In this book, we’ll use a more modern version of HTML called XHTML (Extensible Hypertext Markup Language). Dreamweaver writes the XHTML for you, so you don’t need to know how to write XHTML to get started using Dreamweaver. I suggest to all of my students and to you, the reader of this book, that learning some XHTML will help you become a more professional and flexible web page author. Hour 7, “Looking Under the Hood: Exploring XHTML,” introduces you to viewing and editing XHTML in Dreamweaver.

If you are new to web development, you might not know some of the possibilities available to you in Dreamweaver. This hour explores examples of the types of elements you can add to your web pages no matter what its topic or purpose. Most people who are interested in creating web pages have spent some time looking at websites. Many of you are experts at navigating around and getting information on the Web! Now that you are learning Dreamweaver and XHTML, you’ll begin to look at web pages differently: Instead of reading a column of text, you’ll now think, “How can I create a column of text in Dreamweaver?”

One of the best ways to learn is by examining examples of web pages you find while browsing the Web. Most browser software has a Source or Page Source command (usually under the View menu) that enables you to view the HTML code of a web page. Even better, you can actually save a web page to your hard drive by selecting the Save Page As or the Save As command under the browser’s File menu. After you save the web page, you can open the files in Dreamweaver and examine the page’s structure. This is a great way to figure out how a web page author created an effect. If you are a beginner, you probably won’t understand everything in the web page, but this is still a great way to learn by emulating others.

In this hour I’ll begin exposing you to some of the web terms and technologies that this book explores in depth. You might want to check out the Glossary for a definition. If you don’t understand perfectly everything in this hour, don’t worry; later hours cover all the concepts with step-by-step instructions so that you can follow along. This hour gives you an overview of the types of web pages you can create with Dreamweaver.

Dissecting Website Examples

My friends at Rick Steves’ Europe Through the Back Door, www.ricksteves.com, an international travel company located in Edmonds, Washington, have been kind enough to let me show you examples from their exceptional website. You might have seen one of Rick Steves’ travel shows on your local PBS television station. Rick Steves’ Europe recently revamped its website using Cascading Style Sheets (CSS) and modern page layout techniques enabling staff to update the entire site quickly while offering a clean, easy-to-navigate website for users.

Basic Web Page Elements: Text, Images, and Hyperlinks

Most web pages have at least these three minimal elements:

• Text

• Images

• Hyperlinks

Figure 1.1 shows that the Rick Steves’ Europe home page, the web page that is the entry point for the website, contains only those elements, plus a search box in the upper-right corner of the page. Those three elements are the foundation of most websites, providing information (text) along with graphical support (images), plus a method to navigate to other pages (hyperlinks).

Figure 1.1. The Rick Steves’ Europe Through the Back Door home page contains text, images, hyperlinks, and a search box.

Notice that there are several styles of text in Figure 1.1. The two columns in the middle of the page present text in a standard, highly readable font style and size. The caption text under the picture of Rick on the left is a slightly smaller font size, as is the text in the far right column under the What’s New heading. The Welcome to Rick Steves’ Europe text at the top of the page isn’t text at all; it’s an image made up of text.

There are also several images displayed in Figure 1.1. In web pages, images are always external image files. The XHTML tells the browser where the image should appear in the web page. The logo in the upper-left corner of the page appears to be a single image, but is actually two images to facilitate the design with the lighter-colored line at the bottom of the logo (it’s a red line when you look at the actual web page in color). Dividing an image into smaller pieces is called slicing and is discussed in Hour 8, “Displaying Images.” The two images butt up against one another so that they appear to be a single image on the web page.

There are numerous hyperlinks in Figure 1.1. Clicking these hyperlinks in the live website enables you to jump to different parts of the Rick Steves’ Europe site. By default, hyperlinks appear in blue text and are underlined but you can change this using CSS. Rick Steves’ Europe standardized on hyperlinks that are initially blue and underlined, but the underline disappears when you roll your cursor over the link. All the hyperlinks in the website have this same behavior because the CSS rule controlling this is in an external style sheet linked to every web page in the site. You’ll learn about creating hyperlinks in Hour 5, “Adding Links: Hyperlinks, Anchors, and Mailto Links,” and formatting them using CSS is in Hour 6, “Formatting Web Pages Using Cascading Style Sheets.”

In the lower-left corner of Figure 1.1 there is an image with the text Check Out Our 2007 Tours. This image is also a hyperlink. Dreamweaver can add a hyperlink to an image as well as text. You can even define just a small section of an image as a hyperlink by creating an imagemap. Hour 8 introduces you to image properties and the different types of images you can display in a web page, and shows you how to add imagemaps to web pages.

Page Layout

When creating web pages, you need to keep in mind that people will be viewing your design at different screen resolutions (for example, 800×600, 1024×768, 1280×1024) and might not have the browser window maximized to take up the whole screen. Page layout, the design and positioning of text and images on the web page, often requires a lot of thought, time, and experimentation.

The Rick Steves’ Europe website has a clean page style that makes it easy to view in browser windows of various sizes. The page layout for this website uses a combination of tables and CSS, covered in Hours 6 and 13, “Using CSS for Positioning.” Figure 1.2 shows the Rick Steves’ Europe home page open in Dreamweaver. The CSS Styles panel is open on the right side of the screen, displaying a list of the CSS rules applied to this website. The Dreamweaver interface and other items visible in Figure 1.2 will be covered in depth throughout this book.

Figure 1.2. The Rick Steves’ Europe Through the Back Door home page uses tables and CSS to create the page layout.

CSS enables you to format the way text appears, how various XHTML tags appear, along with the positioning of various layout elements on the web page. Figure 1.2 displays the CSS Styles panel on the right side. All the CSS definitions are listed under the external style sheet name nav.css. An external style sheet enables all the pages in the site to share the same styles. And, best of all, the external style sheet enables the website developers to make a change to a single file to update the entire website.

CSS is the most recent language used to design page layouts for web pages and it is still an evolving technology. The positioning and page layouts subset of the CSS language is sometimes called CSS-P. This subset defines page design essentials such as the widths and heights of elements, whether they float beside adjoining elements or break to a new line, and whether the elements stack on top of other elements.

As devices large and small incorporate web browsers, people might be viewing your web pages on a mobile phone or even in a flat-panel screen embedded in the refrigerator door! Figure 1.3 shows Adobe Device Central CS3, which installs with Dreamweaver CS3. You launch this application to emulate how different devices will display a web page. It’s important to test your page layout so that viewers using different devices have a pleasant viewing experience on your website. You’ll further explore the emulator and mobile devices in Hour 14, “Creating CSS for Mobile Devices and Printing.”

Figure 1.3. The Adobe Device Central CS3 emulator enables you to test your websites on various mobile and small-screen devices.

Forms: Collecting Data for E-Commerce, Newsletters, or Anything Else

Some websites have a business purpose for exchanging information with visitors, whether it be selling automobiles (www.acura.com), auctioning a ticket to a Barbra Streisand concert (www.ebay.com), planning a healthier diet (www.mypyramid.gov), or selling a design on a T-shirt, coffee mug, or mouse pad (www.cafepress.com). All these websites offer visitors the option of entering information into forms in order to purchase goods or receive information. Forms enable websites to become a two-way conduit as a visitor not only views information on the website but can also send information back.

The Rick Steves’ Europe website has several web pages that use forms. The search box on the home page was already discussed. The Search button triggers a script that exists on the web server, the computer where the finished website files are stored. This script searches for the words entered into the search box on all the web pages in the site and returns search results for the user to view. The search form shown in Figure 1.4 consists of a text field and a submit button, two of the form elements that will be discussed in Hour 20, “Creating a Form and Collecting Data.”

Figure 1.4. A search form enables the viewer to enter text and then submit it to a script that returns results.

Creating scripts is an advanced topic that is beyond the scope of this book on Dreamweaver, but examples of scripting languages and locations to download scripts will be discussed in Hour 21, “Introduction to Scripts: Sending and Reacting to Form Data.” Rick Steves’ Europe uses ColdFusion, Adobe’s scripting and application development software. You can tell that the script is written for ColdFusion because the file extension is .cfm. Creating a script to search a website is the tiny tip of the iceberg of what ColdFusion can do.

Rick Steves’ Europe also uses ColdFusion to dynamically display items in its travel store (travelstore.ricksteves.com). This dynamic web page, where items’ descriptions and images are displayed based on records in a database, can also be created in Dreamweaver. After you master the 24 hours in this book, you might decide to advance to learning a server application language such as ColdFusion. It’s perfectly realistic, however, to continue creating static web pages (the opposite of dynamic web pages), such as the ones described in this book, and be a successful web page author.

At the end of a shopping experience, such as in the Rick Steves’ Europe travel store, an HTML form collects information about the purchaser. Figure 1.5 displays a form that includes text fields and drop-down menus to collect the state and country information. An asterisk (*) is a common way to signify that a text field must be filled out in order to submit the form. Dreamweaver has a Validate Form behavior, scripted in JavaScript, to make sure that the visitor enters the correct type of information (see Hour 21).

Figure 1.5. This form collects information about the purchaser, and a script validates the form, making sure that all required information is entered before the form is processed.

Multimedia

Many websites include movies, audio, music, animations, 3D renderings, and other multimedia elements. These elements require that you download and install a player application, such as the Flash, QuickTime, or Real player, to see or hear the multimedia files. Web pages created in Dreamweaver can automatically trigger the download of the appropriate player, making it easy for the website visitor. As more and more people have access to higher-bandwidth connections, a greater number of websites include multimedia files that require more transfer capacity.

The Rick Steves’ Europe site provides clips from Rick’s travel television shows on the site, shown in Figure 1.6. These clips require that free software, either RealPlayer (www.real.com) or Windows Media Player (www.microsoft.com/windows/windowsmedia), be installed on your computer. When a viewer clicks the link to the multimedia file, a software player opens on top of the browser and begins playing the multimedia file.

Figure 1.6. A web page can link to multimedia files, often offering the viewer a choice of software to view the files.

Some web pages, such as the Adobe home page (www.adobe.com) shown in Figure 1.7, embed multimedia files into the web page. In this case, an Adobe Flash movie containing video, audio, and animation effects plays when you initially load the web page...if you have the Flash player installed, that is! But the large majority of computers have the ever-present Flash player, so most viewers are capable of seeing Flash movies. Although Adobe Flash software is required to create Flash movies from scratch, Dreamweaver is capable of inserting, configuring, and previewing Flash movies. Hour 10, “Adding Flash and Other Multimedia to a Web Page,” explains how to add Flash and other types of multimedia to a web page.

Figure 1.7. Flash movies and other types of multimedia files can be inserted into a web page.

Interactivity

Dreamweaver can add JavaScript to a web page even if you don’t know how to write JavaScript. Dreamweaver Behaviors add JavaScript to the page, enabling it to capture the user clicking on an image, rolling the cursor over an element, or many other events that the browser can detect. I specialize in creating e-learning with Dreamweaver, and I use Dreamweaver Behaviors to walk the learner through the steps required for a specific software task. For instance, Figure 1.8 isn’t Dreamweaver but is a tutorial on Dreamweaver. The tutorial requires the learner to click a certain part of the screen. When users click the correct area, they are automatically taken to the next page in the tutorial; if they click an incorrect area, they receive an error message.

Figure 1.8. This tutorial captures the user clicking the correct spot (the hot spot) and then it automatically loads the next web page.

In the tutorial example in Figure 1.8, I used the Go to URL behavior triggered by the learner clicking on a transparent image (a GIF image that is transparent); this is a common technique for capturing a user’s click on a certain region of the screen. Hour 18, “Adding Interactivity with Behaviors,” will discuss and demonstrate this behavior and several others. You might not have a need for some of the interactive capabilities of Dreamweaver, but you’ll probably at least want to use the Swap Image behavior to create a rollover effect on an image, where the image changes when the user rolls the cursor over it.

The Rick Steves’ Europe makes use of Dreamweaver’s Open Browser Window behavior, shown in Figure 1.9, to open a custom-sized browser window. The new browser window pops up displaying a map and a hyperlink that triggers printing the map; the custom window opens without the usual browser navigation and menu toolbars. A number of other web pages in the Rick Steves’ Europe site use this behavior to pop up a new browser window with additional information so that the viewer can have both windows open at the same time, examining the additional information available in the new browser window. Using Dreamweaver enables you to add this advanced functionality without writing the JavaScript code yourself.

Figure 1.9. A hyperlink on this web page uses Dreamweaver’s Open Browser Window behavior to open a new browser window in a set size.

Upload a Website to the Web

You can create web pages for days, weeks, months, or even years, but eventually you’ll either want or need to put them on a web server somewhere and share them with other people. You don’t need another piece of software to accomplish this: Dreamweaver has fully functional file transfer protocol (FTP) software built in, enabling you to connect to a remote web server and upload your files from Dreamweaver. Figure 1.10 shows Dreamweaver’s expanded Files panel connected to a remote web server. The remote site files on the server are visible on the left and the local files are visible on the right side of the screen.

Figure 1.10. Dreamweaver has built-in FTP software that enables the transfer of web pages to a web server.

Reusable Code and Files

Dreamweaver is an industrial strength web development tool that enables you to work on individual web pages and on very large websites. Many websites, such as the Rick Steves’ Europe website, have thousands of web pages. Managing all those pages, especially when a change is required, can be a daunting task. Dreamweaver has reusable and updatable pages, called templates, which you can use as the basis for a web page. Web pages created from a template maintain a link to the original template, so when the original is updated, the changes can be propagated to all the web pages based on the template. Dreamweaver templates are covered in Hour 15, “Creating Library Items and Templates.”

Dreamweaver also offers another type of reusable element, called a library item, which inserts only a portion of a web page. Like templates, library items maintain a link to the parent library item and can be updated throughout an entire website. In the Rick Steves’ Europe website, the footer at the bottom of each page is a library item (shown in Figure 1.11). This enables the web developers to add additional information to the footer in the future, save the library item, and automatically update every page in the website without opening each web page. The Property inspector, at the bottom of the Dreamweaver window, displays the properties of a library item.

Figure 1.11. You can insert Dreamweaver library items into web pages and update them later without opening each web page.

Summary

In this hour, you saw examples of both basic and advanced functionalities of Dreamweaver. You examined a travel site home page, identifying blocks of text, images, text in images, and hyperlinks. You saw examples of forms and were introduced to how scripts work in the background to process what users enter into forms. You saw examples of multimedia either launched from a hyperlink on a web page or embedded directly into the web page. Examples of interactivity, in an e-learning tutorial and on the travel site, demonstrated what you can accomplish with Dreamweaver behaviors. And you were introduced to Dreamweaver file transfer capabilities and using reusable elements to help manage large websites.

Q&A

Q. Do I have to understand how to accomplish everything that Dreamweaver can do before I start working on a website?

A. You have to understand only the basics of Dreamweaver; that is, its interface and how to work with text, images, and hyperlinks. You’ll also want to understand how to design a page layout for your web pages. Then you can learn some of the specialized functions that are necessary for the website you want to create. For instance, if you are creating an e-commerce website, you’ll want to learn about forms (Hours 20 and 21). If you are interested in creating an interactive website, you’ll want to understand Dreamweaver behaviors (Hour 18).

The best way to learn is by doing, so don’t be afraid to dig in and create web pages in Dreamweaver. You can always improve or edit the pages later.

Q. I work with several programmers who say that Dreamweaver is a waste of money, and that I should just learn HTML and create web pages by typing HTML tags into a text editor. Is that really a better way to create web pages?

A. That might be the ideal way to create web pages for your programmer friends, but it takes a long time to learn HTML and even longer to learn how to program and write the JavaScript that Dreamweaver behaviors contain. I think that I can create robust and solid web pages in Dreamweaver much faster, with fewer errors, than anyone who hand-codes. To each their own, of course, but I think that beginners and experts alike benefit from the built-in capabilities of Dreamweaver.

Workshop

Quiz

1. What is the name of the web page element that a user clicks to navigate to another web page?

2. What is the name of the language used to style text and create web page layouts in Dreamweaver?

3. What is the Dreamweaver feature that enables you to add JavaScript and interactivity to your web pages?

Quiz Answers

1. A hyperlink is the web page element that navigates the user to another web page.

2. Cascading Style Sheets is an important style sheet language used to define both the structure and the presentation of web pages.

3. Dreamweaver behaviors enable you to add JavaScript and interactivity to your web pages.

Exercises

1. Go to the Adobe website (www.adobe.com) and search for the words showcase and Dreamweaver; a search box is in the upper-right corner of the home page. Select the result Adobe - Showcase : Showcase Finder : Dreamweaver to display a list of case studies, interactive content, and sites of the day that are excellent examples of using Dreamweaver. Read the case studies and examine the screenshots of the websites, trying to identify different web page elements and how the pages were designed.

Adobe occasionally redesigns its website, but these showcases should be available somewhere on the site.

2. Go to Web Pages That Suck (www.webpagesthatsuck.com) and read some of the articles and critiques of other web pages so that you know what to avoid!

3. Go to CSS Zen Garden (www.csszengarden.com) and click some of the design links on the right side of the home page. Do you notice that the content in each design’s web page is the same? Only the CSS changes for each design. Pretty interesting!