This chapter covers that most basic of tasks creating a new document, setting it up, and turning it into a web page. Unless you're a complete Dreamweaver newbie, you've probably done this before. However, even old-time Dreamweaver users might have some culture shock dealing with the new document-making opportunities in Dreamweaver MX.
Because the whole process of document creation is the foundation of everything else the program does, this is the foundation chapter for much that follows. If you're new to Dreamweaver, you'll find some basic concepts and skills to get your started in this chapter. This chapter also discusses some important foundation tools that more experienced Dreamweaver users might just want to know more about, such as the new Edit Tag command and Tag Inspector, the new options for creating documents, as well as new options for document validation and accessibility.
Dreamweaver isn't just for HTML anymore, although that still might be the main kind of page with which many users will want to work. With Dreamweaver MX, however, just about any kind of text-based web document can be created, edited, and sometimes even graphically rendered in Design view. This includes not only HTML, but also all the various live data document types, such as ASP, CFM, PHP, JSP; support document types, such as CSS and JS; and that's not to mention the alphabet soup of document types such as XML, XHTML, WML, and so on.
Because of these choices, creating a new document might still be one of the most basic things you can do in Dreamweaver but it's no longer the simplest. This section covers the New Document dialog box, which enables you to create documents from scratch as well as perform various techniques to bring documents and data into Dreamweaver from other sources.
You also can create new documents through the Site panel, but the options differ slightly. See Chapter 22, "Local Site Management," for more on this.
When you choose File > New or press Ctrl/Cmd+N to create a new document, by default the New Document dialog box appears (see Figure 3.1). This dialog box presents you with a wealth of options for creating almost any kind of web document.
Most of the dialog box is taken up by the many options for creating different document types. The leftmost column of choices represents the categories of document types: Basic, Dynamic, Template, and so forth. Many of these types are beyond the scope of this chapter and are referenced later in this book. Table 3.1 lists the categories along with some of their entries and a brief description of each. To create a standard, plain-vanilla HTML page, use the Basic > HTML option. Select the Basic category from the left column, and HTML from the next column.
Because you have such an overwhelming number of choices to sift through, the dialog box includes a description area in its lower-right corner to help you out. Select any file type from the second column and read a quick description of what it's for before you choose to create that kind of document. For some choices, you also can see a preview in the upper-right corner.
Note that although Dreamweaver can create any of the document kinds listed here, not all of them display in Design view. Only the file types intended for creating viewable web pages will show a usable preview in Design view. Other file types, such as JS, CSS, TXT, and so on, must be viewed and edited in Dreamweaver Code view.
These file types create web pages that will use server-side scripting to connect with databases and provide live data web sites. The entries in this category represent all the live data technologies Dreamweaver supports: ASP, ASP.NET, ColdFusion, PHP, and JSP. (See Chapter 26, "Introduction to Dynamic Dreamweaver," for more on live data sites.)
The entries in this category enable you to create Dreamweaver templates (predefined documents with special Dreamweaver coding for design team productivity) using a variety of web languages, including good old HTML and various languages related to live data sites.
This catchall category enables you to create just about any kind of text-based document you can imagine including TXT files.
CSS Style Sheets
Cascading Style Sheets (CSS) enable web authors to store page-formatting information outside the web pages themselves, in external CSS documents that can be referenced by many pages in a web site. This category contains a whole selection of predefined CSS documents. (See Chapter 13, "Using Cascading Style Sheets," to learn all about CSS.)
Framesets are collections of individual documents that will be displayed together in one browser window. This category contains a selection of predefined framesets including all documents needed to create a frame-based web page. When you choose from this category, you're creating several new documents at once! (To learn what frames are and how to work with them, see Chapter 12, "Designing Frame-Based Pages.")
Page Designs and Page Designs (Accessible)
These categories contain predefined "stationery" web pages HTML pages with basic layout setup and placeholder elements ready for you to customize. The accessible designs have been specially created to be accessible to visitors with disabilities. (See the section on "Making Your Pages Accessible" at the end of this chapter for more on this.)
As Table 3.1 shows, Dreamweaver ships with a variety of predefined page layouts that are yours for the customizing. They're in the Page Designs and Page Designs (Accessible) categories. Dreamweaver also comes with predefined CSS documents, ready to be applied to your documents to quickly add text and layout formatting.
To create a web page based on one of the stationery HTML pages, select an entry from either of the Page Designs categories and click OK. Dreamweaver will create a new document with the placeholder content and formatting in place (such as the one shown in Figure 3.2). Save this document as part of your web site and customize its content to create your own new web page quickly.
Creating a CSS document based on the choices in this dialog box won't give you a page that can be viewed in a browser CSS files are meant as supporting files for HTML and other viewable documents. To create a CSS style sheet from one of the stationery choices listed here, select an entry from the CSS category and click OK. Dreamweaver will create a CSS file (it won't display in Design view) that contains a list of styles for formatting HTML pages. Save this document in your web site with the .css file extension. To make use of your new CSS document, you must link one or more HTML pages to it. (See Chapter 13 for instructions on doing this.)
It's general usage to refer to files that create documents that browsers can display files that hold web pages, in other words as HTML files. This is true even though many viewable document types, such as ASP, don't have the .html or .htm filename extension. Throughout this book, when you read about creating and working with HTML files, know that this generic term includes documents with .shtm, .shtml, .asp, .cfm, .jsp, .php, and possibly other file extensions. As long as the document uses HTML coding to create a page that the browser can display, it can be generically described as an HTML document.
As long as you're choosing one of the file types that creates a viewable "HTML page," the dialog box offers you the choice of making your new document XHTML compliant or not. XHTML is the newest flavor of HTML, intended to eventually replace HTML. XHTML is based on XML. It has some very slight syntactical differences from HTML and is stricter in its rules than HTML. The browsers of the future will require XHTML to create valid documents. If you tell Dreamweaver to make your new document XHTML compliant, it will create slightly different syntax as it writes code for you. (XHTML is too big a topic to be covered fully here. Read Chapter 32, "Technical Issues," for a discussion of XML, HTML, and XHMTL and how they all relate.)
If you're creating web pages that just need to work properly in the popular browsers Netscape Navigator, Internet Explorer, Opera, and a few others you don't need to worry about XHTML compliance quite yet. All that the standard browsers require is HTML.
By default, when you choose File > New, Dreamweaver presents you with the New Document dialog box, with HTML as the default file type and XHTML compliance turned off. To change these and a few other defaults, click the Preferences button at the bottom of the New Document dialog box. This opens the Preferences > New Document dialog box (see Figure 3.3). Note that this is the standard Dreamweaver Preferences dialog box. You also can access this same dialog box by choosing Edit > Preferences and choosing the New Document category from the list on the left side of the dialog box.
While you're in the Preferences dialog box, note that you also can use the categories list at the left to go to General preferences. In the General preferences screen, the very first option enables you to stop Dreamweaver from automatically opening a new document whenever the program launches. Just enable the Show Site panel Only on Startup option, and those automatically created new documents are a thing of the past.
If you like, you also can change the default file extension that your default file type comes with for HTML files, you can change from .html to .htm, for instance. This is a little bit more involved, however. From the New Document Preferences dialog box, click the link to the document type XML file (shown in Figure 3.3). This opens Dreamweaver Help at the "Document Type Definition File" section that provides instruction on modifying the Dreamweaver document type configuration information. (Of course, you can always override the default file extension when you save your files, just by typing in your own extension.)
You've created your new Dreamweaver document, or you've opened an existing document. You're ready to start working. The more you understand (and agree with) how Dreamweaver expects you to work, the easier time you'll have. This section covers the basic page-building workflow in Dreamweaver. If you're brand new to the program even if you've coded web pages or used other web editors before this will give you a handle on working in this environment.
You like a graphic user interface. You like to see the pages you're building, as you build them. You like to drag and drop things, resize and reposition with a click of the mouse. You're ready to work with Dreamweaver design tools.
The three central windows for the visual designer in Dreamweaver are the Document window (showing Design view), the Insert bar, and the Property inspector (see Figure 3.4). The main working procedure that you're expected to follow is this: Use the Insert bar to insert a page element (table, image, form element, and so on); the element shows up in the Document window; select the element, and its properties will show up and be available for editing in the Property inspector. The items in the Insert bar are also present in the Insert menu, if you would rather choose from a menu than from the panel.
Although exceptions apply, you can insert most Dreamweaver objects in several ways:
In the Document window, click to put the insertion point where you want the object to appear; then click the object in the Insert bar.
In the Document window, click to put the insertion point where you want the object to appear; then choose the object to insert from the Insert menu.
Drag and drop from the Insert bar to the Document window. Dreamweaver will insert the object as close to where you drop as is feasible.
Many objects bring up dialog boxes when you insert them, to establish basic properties. After an object has been inserted, selecting it causes the Property inspector to display the properties that can be set for that object.
If you're new to web design, one feature of properties might be strange to you. Unlike, say, a word processing program, in which every property must have a value (have you ever tried to assign no text size in Microsoft Word?), many properties of HTML objects are optional. If a property isn't assigned, the browser determines what its value will be. To assign browser defaults when formatting a Dreamweaver object, leave the appropriate text input field in the Property inspector or dialog box empty; or choose Default or None from a pop-up menu. Never choose 0 as an alternative for not setting a property. Zero is a value, and it might not be the browser's default value for your property.
One of the properties that can be set for many kinds of objects as well as for the page itself is color. Whenever you have the option to color text, tables, page backgrounds, or other elements, you get to use the Dreamweaver color palette. It's a lovely, compact, and powerful little interface, and you'll use it throughout this book.
In a dialog box, panel, or the Property inspector, the color palette is accessibly by clicking the color box that typically has a text field next to it (see Figure 3.5). If the element currently has no color set for it, the chip will be gray, so you might not recognize it as a color-choosing tool. But it is!
When you see the color box and its associated input field, just type the name or hexadecimal number for the color in the input field. The color box will change to display the color you've chosen.
When you see the color box, click in it. This brings up the default color palette, showing 216 web-safe color swatches (see Figure 3.5). If you pass your cursor over the color swatches, the hexadecimal code for each one will show in the text field at the top of the color palette. (Those six-digit hexadecimal codes are browser-speak for specifying colors.) Click a color swatch to choose its color.
Click the color box to open the color palette. In the palette, click the triangle in the upper-right corner this gives you access to the color picker (see Figure 3.5). Shown here are the five different sets of color swatches you can choose to display in the color palette. They are as follows:
Color cubes (the default palette). It displays the 216 web-safe colors according to their hexadecimal value.
Continuous Tone color palette. This palette displays the 216 web-safe colors according to their hue (color). Many designers find this a more intuitive arrangement for finding the color they want.
Windows OS. This palette displays the 256 standard Windows OS colors.
Mac OS. This palette displays the 256 standard Mac OS colors.
Grayscale. This displays 128 different shades of gray good if you're designing for folks with grayscale monitors.
The final option in the color picker menu, Snap to Web Safe, guarantees that no matter what color you choose, Dreamweaver will substitute the nearest web-safe color.
What are web-safe colors? The short answer is, they're colors that display without dithering on any Windows or Mac computer, even if that computer is set to 8-bit color mode (only displaying 256 colors). For a longer answer, see Chapter 8, "Design Issues."
What if you see a color you love and want to use that color in your web page, but you don't know what the color's hexadecimal code or name is? Are you stuck? No! With the color picker, you can sample any color from anywhere on your computer screen and Dreamweaver will determine its hexadecimal code and use it in your document.
To choose a color by sampling, follow these steps:
Click the color box to access the color palette, as you normally would to choose a color.
The cursor changes to an eyedropper when you do this. Instead of clicking one of the color swatches in the palette, move the cursor away from the palette, over some other area of your screen. Note that back in the color palette, every color you pass the cursor over is registering in the top area (see Figure 3.6).
When you are over a color you want to sample, click. That color is now chosen!
Note that when you choose by sampling, you might be sampling colors that aren't web-safe. If staying web-safe is important to you, use the color picker to enable Snap to Web Safe before sampling. After you've done that, for every color you sample Dreamweaver will choose the nearest web-safe color.
Color swatches are nice. Sampling is great. Sometimes, however, you just want to choose exactly the color you want from the full spectrum. Whether you're on Windows or Mac, you can access your operating system's color-picking tools through the Dreamweaver color palette. To do so, follow these steps:
Click the color box to access the color palette, as you normally would to choose a color.
When the color palette appears, click the tiny color-wheel button (System color picker button) in the upper-right corner.
On Windows, this opens the Windows color picker; on Mac, it opens the Apple color picker.
Choose your color using your system's interface, and click OK to close the Windows or Apple color picker. The color you've chosen is now in your Dreamweaver document. (If you used the Snap to Web Safe option described earlier, Dreamweaver will substitute the nearest web-safe color for whatever you chose.)
If a page element has a color assigned to it (because you picked one or because Dreamweaver gave it one by default), you can remove the color by doing one of the following:
In the text input field that shows your color's hexadecimal number or name, select the text and delete it, leaving the field blank.
Click the color box and, in the color palette, click the square with a red diagonal line through it (in the upper-right corner of the palette, called the default color button).
Either of these restores the element's default color by removing its color attribute.
Some of the most basic properties you can set in a Dreamweaver document are the properties for the page itself. These include page margins, default colors for background, text, links, and the page title. In Dreamweaver, they can all be set using the Page Properties dialog box, which is accessed by choosing Modify > Page Properties (see Figure 3.7). The following sections discuss the page properties you can set.
This isn't the same as your document's filename! The page title appears in the browser window's title bar when visitors are browsing your page. It also appears in the Bookmarks or Favorites menu when a visitor bookmarks your page. In addition, search engines use it when they're searching for and displaying information about your page. By default, every Dreamweaver document has a title of "Untitled Document" not something you want your adoring public to see atop your pages, so always remember to set the page title. In addition to the Page Properties dialog box, you also can set the title in the Document toolbar (see Figure 3.8).
Using the color boxes in the Page Properties dialog box, you can set the page background color as well as the default colors for text and links. When you set these colors here, Dreamweaver adds them as attributes to your document's <body> tag. Note that these are optional attributes for the <body> tag. If you don't assign default colors, the browser determines them. The default text color for browsers is black; the default link color is blue. The default page background color is white except in older versions of Netscape, in which case it's gray.
Link color determines the color of all text links that haven't been visited yet. Visited Link color determines the color of links that have been recently visited. Active Link color determines the color of links while the user is clicking them and waiting for the browser to take him to his destination page.
If you don't trust your ability to choose well-coordinated, web-safe color schemes for your pages, or if you're just in a hurry and still want a nice-looking, colorful page, try Commands > Set Color Scheme. This command opens a dialog box that enables you to choose from dozens of predefined color schemes. Choose a color scheme and click OK; Dreamweaver will assign values to your page background, text, and various link states in one fell swoop. Web notables Lynda Weinmann and Bruce Heavin have created color schemes for you.
Instead of or as well as (and note that it is always best to assign a color if assigning an image in case the user has images disabled in his browser or the image is a bad link) assigning a background color for your page, you can choose any GIF or JPEG image to display behind your page elements. Any image that doesn't fill the entire width and height of the browser window will tile to fill the window. (For more on background images, see Chapter 5, "Working with Images.")
Margin Settings define the margin for the upper-left corner of the browser. By default, most browsers give all pages a margin of several pixels, so no page content smashes up against the left or top edges. To override this default in Internet Explorer, set the Left and Top attributes; to override the default in Netscape, set the Width and Height attributes. (To cover both browsers, set all four.) If all four attributes are set to 0, the page contents will be allowed to touch the left and top edges of the browser window. (Note that not all version-3 browsers understand these attributes.)
Quick Start for Defining Dreamweaver Sites
If you're brand new to Dreamweaver, or even brand new to web authoring, you probably want to get right into creating pages. That's why you're here, right? To make web pages. Throughout the book, however, the exercises will ask you to define a site before proceeding with the fun stuff. A web site is a collection of pages. Dreamweaver likes to know, before it starts working for you, what web site your pages will belong to. Although you can skip defining a site even when working with the exercises here if you do so, you're missing out on a lot of little things Dreamweaver can do for you. And you might end up creating some Dreamweaver errors, because the program expects every web page to have a home.
What Dreamweaver needs to know, before you begin working on a project, is two things: what you would like to call your site, and what folder on your computer will store all the files that belong to that site. After you've defined those two items, all you have to do is continue saving your pages into that folder and all will be well.
To define a site in Dreamweaver, follow these steps:
You can have as many sites as you want in Dreamweaver. From now on, you can use the Site pop-up menu in the Site panel to switch between them.
To learn all about defining sites, see Chapter 22.
Exercise 3.1 Creating a Simple Dreamweaver Document
In this exercise, you use the New Document dialog box to create a new HTML document. Then you use Design view and several objects to start adding content to your page.
For most of the exercises in this book, you are asked to define a Dreamweaver site before proceeding with the exercise. In fact, if you go through the book chapter by chapter, you'll end up with a site for almost every chapter. And this chapter is no different! If you're new to Dreamweaver and want to get up and running as quickly as possible, read the "Quick Start for Defining Dreamweaver Sites" sidebar. Then come back here.
Before you start the exercise, copy the chapter_03 folder from the CD to your hard drive. Define a Dreamweaver site called Chapter 3, with the chapter_03 folder as your local root folder.
To start, create a new document. Choose File > New. When the New Document dialog box appears, choose to create a Basic HTML page. Select the Make Document XHTML Compliant option and click OK. When the new document opens, make sure you're looking at it in Design view. You should see a blank, white Document window. If you check under the View menu, the View > Design command should have a checkmark next to it.
The first thing you'll do is save your new document. Strange as it might seem to be saving empty documents, in Dreamweaver even an empty document is rarely completely empty (there's HTML code back there somewhere); and saving early and often is always a good idea. Choose File > Save, and in the dialog box that appears, name your file basicpage.html and save it in the chapter_03 folder you copied from the CD.
Notice that even though you've saved the document, the title bar of your Document window still says "Untitled Document." That's because you haven't given it a page title. In the Document toolbar, change the page title to A Basic Web Page.
Now change the page's basic colors to something more interesting than black on white. Choose Modify > Page Properties. When the dialog box appears, find the color box that represents background color.
Click the color box to open the color palette. From the swatches in the palette, choose whichever color you want.
Repeat the procedure to assign a different text color than black. Your color boxes should now show the new colors you've chosen, although your document doesn't yet.
To see how your page will look with its new background, click Apply. (Because there's no text on the page, you can't test that color yet.) If you like your background color, click OK. If not, choose another background color and then click OK to close the Page Properties dialog box.
The simplest thing to add to a web page is type. Click in the Document window and type Welcome to My Web Page. It will show up in the text color you specified in Page Properties. Leave the insertion point inside the words you just typed. In the Property inspector, from the Format pop-up menu (in the upper-left corner), choose Heading 1. Your typing is now a big, bold heading.
Now you'll see how Dreamweaver objects work by adding a horizontal rule after your title. Click at the end of your heading, so that the insertion point appears after the last letter. Go to the Insert bar and make sure the Common tab is in front. Look through the objects in the bar until you find the horizontal rule object. (Let the cursor hover over each icon in turn and their tooltips will tell you who they are.) When you find the Horizontal Rule, click its icon.
A horizontal rule appears in your document, right after your heading. The Property inspector now shows you various horizontal rule attributes (see Figure 3.9). If you click outside the rule to deselect it, you can see it better, but its properties disappear from the Property inspector.
To see how default properties work, select the horizontal rule in your document again. Look at the Property inspector, and you'll see that there is a Width and Height field, but both are blank. That means the browser determines how wide and how tall the rule is. Because browsers automatically format rules to be about 2 pixels high and 100% of the window width, Dreamweaver displays the rule that same way in Design view.
In the Property inspector, enter a width of 500 and a height of 6. Deselect the Shading option. To see your rule better, click in the Document window outside the rule to deselect it. Now that looks a lot different!
This exercise showed you the basic procedure for working with objects in Design view. Now you'll start thinking about code.
Whether you think of yourself as a mean, lean coding machine, or whether you love working in the visual design environment and couldn't care less about code, you can't be really efficient as a web designer without at least being aware of the HTML code that sits behind your pages. One of Dreamweaver's strengths is how close it keeps you to the code at all times, whether or not you know it. Dreamweaver even provides a variety of tools for watching your code, and maybe tweaking it or even editing it extensively, without leaving the cuddly world of Design view.
HTML pages are built from a hierarchical series of elements (tags). Each page is surrounded by a pair of <html></html> tags identifying it to the browser as a page in Hypertext Markup Language. Within that main element, the structure of a basic HTML page looks like this:
<html> <head> <title>My Document</title> </head> <body> <h1>This is the visible part of my page.</h1> </body> </html>
The <h1> tag, which displays a big bold headline on the page, is nested within the <body> tags, which hold all the page content that display in the browser. The page also needs its <head> tag, which contains organizational and other nondisplaying information, such as page title and URL encoding. No matter how complex your web pages get, most of them will be built on this simple framework. The more tables and images and paragraphs of text you have, the more full of tags the <body> will be. The more scripts and search engine data and linked style sheets you have happening behind the scenes of your page, the more tags will be nested inside the <head>. Often, with complex pages, half the battle of dealing with the code is ferreting out these structural relationships in the lines and lines of code.
If you like working in Design view, presumably you're a visual sort of person. You might have trouble grasping the code structure of an HTML document just by looking at Code view, because the structure doesn't look clear. You're going to love the Tag Inspector and its tree display (see Figure 3.10). To access the Tag Inspector, go to Window > Tag Inspector or expand the Code panel group. Whenever you have a document open, the top half of this panel shows you your document's code structure represented like an expandable tree or outline structure. The page contents are not shown only the structure of tags. Nested tags are shown nested inside each other, with indentation helping make the nesting clear. Expand/collapse buttons enable you to hide or show as many levels of the outline structure as you want, to make the document structure visually clear.
In addition to the visual aid of the tree view, the Tag Inspector enables you to work on your code without having to actually edit code. After you've selected a tag in the tree view, the bottom half of the Tag Inspector panel enables you to view and edit all of that tag's attributes (see Figure 3.10). If you truly love working this way, you can even add and remove page elements by adding and removing their tags. Just click the triangle in the panel's upper-right corner to access the pop-up options menu (see Figure 3.10), and you can add a New Tag Before, New Tag After, and more.
If HTML pages are built from a hierarchical series of tags, any time you're working in an HTML document, you're tinkering around somewhere within the hierarchy. It's the job of the tag selector, part of the status bar at the bottom of the Document window, to always show you where you are in the hierarchy what tags you're within, and how those tags fit into the structure of the whole document (see Figure 3.11). You can use the tag selector to give yourself a mental picture of "how deep you're buried" in the hierarchy of nested tags. You also can use it to select page elements. If your tag selector looked like the one in Figure 3.11, for instance, you could click the <h1> element shown in the selector and it would immediately select your entire heading the <h1> tags and everything in between them. Although this might seem simple now, when you start working on complex pages with lots of nested elements, the tag selector can be your ticket to sanity. It enables you to select just exactly what you want to select, quickly and easily.
One of the criticisms that are often raised against web editing software especially WYSIWYG web editors is that they actually squelch the web author's creativity by providing only a small set of HTML tags and attributes with which to design. HTML is a wide, rich language, full of little-known goodies and sneaky possibilities for optimizing your pages. There are so many wonderful bits of HTML, in fact, that it's impossible to cram them all into one simple GUI without overwhelming the interface and the user.
The last thing Macromedia wants is for you to feel limited! If the Property inspector gave you the choice of setting every possible option for every page element, however, it would be a huge, unwieldy inspector.
The Macromedia solution is to put the most commonly used page elements in the Insert bar, and the most commonly assigned properties in the Property inspector. And for those times when you might want to go outside the envelope, they've provided the Tag Chooser and the Edit Tag command.
You've got a table in your document and you know there's more to formatting a table than the options that appear in the Property inspector. In the Document window (in Design view), select your table and do one of the following:
Choose Modify > Edit Tag.
Right-click (Ctrl-click) the table and, from the contextual menu, choose Edit Tag.
Any of these will open the Edit Tag dialog box (see Figure 3.12). Within the various parts of this dialog box, you can find all the attributes for this tag that exist in the Dreamweaver database, along with an indication of which browsers support each attribute and even handy pop-up menus, color boxes, and other interface elements to make choosing values for each attribute nice and easy.
To examine and alter the Dreamweaver database of tags and attributes, use the Tag Library editor. See Chapter 33, "Writing Code in Dreamweaver," for detailed instructions on working with this new feature.
Hmm, you want to add a caption to your table, and you think you remember reading about a <caption> tag somewhere. But you don't remember exactly what it was called, or what attributes you could assign it. Follow these steps:
In the Document window, click to put the insertion point where you want the new tag to be added.
From the Common tab of the Insert bar, choose the Tag Chooser object (see Figure 3.13); or choose Insert > Tag. This opens the Tag Chooser dialog box, which contains information about all the tags Dreamweaver has in its database even the most obscure ones.
In the Tag Chooser dialog box, navigate through the categories of tags until you find the one that you want to insert (see Figure 3.14). Select that tag in the dialog box and click Insert.
The Edit Tag dialog box opens, showing you all the possible attributes that can go with this tag. (Read all about it in the preceding section.) Choose whichever attributes you want to assign to your new tag.
When you're done, click OK to close the Edit Tag dialog box. Then click Close to close the Tag Chooser dialog box.
If you click Insert in the Tag Chooser dialog box again after you've finished in the Edit Tag dialog box and closed it, you'll insert your tag twice. Don't do that!
Every Dreamweaver page element (image, table, heading, and so on) is really just a chunk of HTML code. The Quick Tag Editor gives you a way to see and edit the code for a selected page element without having to leave Design view or even look at the rest of the code in your document. If you just want to do a little bit of coding, or if you are in a hurry and don't want to leave Design view just to tweak a little code, the Quick Tag Editor is for you.
To access the Quick Tag Editor, and edit whatever item you currently have selected in the Document window, do one of the following:
In the Property inspector, click the Quick Tag Editor icon (see Figure 3.15).
Choose Modify > Quick Tag Editor.
Press Ctrl+T (Windows) or Cmd+T (Mac).
This opens the Quick Tag Editor, a little pop-up coding window.
Depending on which tag you have selected, and what you want to do with it, the Quick Tag Editor will launch in one of three modes (see Figure 3.16):
Edit Tag mode shows you the code for the tag that represents the selected page element. Use the keyboard to navigate around in here and edit the code. This mode appears if the page element you have selected is created from one main HTML tag (such as an image or a table).
Wrap Tag mode enables you to type in a new tag that will then be inserted as an opening and closing tag pair wrapped around the current selection. This mode appears if your selection consists of text without a text, or multiple tags.
Insert HTML enables you to insert a brand-new bit of code that you type in to the Quick Tag editing window. This mode appears if you don't have anything selected (if the Document window shows only a flashing insertion point instead of a selected chunk of text).
When the Quick Tag Editor is open, and if it opened in the wrong mode, press Ctrl/Cmd+T again and again to make it toggle through its three modes. Keep pressing the shortcut key until the mode you want pops up.
If you're not comfortable working with code, you probably won't feel too much at home in the Quick Tag Editor. If you do like a little bit of HTML with your web designing experience, however, it provides a great, quick access to the coding world.
Chapter 2, "Setting Up the Dreamweaver Workspace," discussed the three ways to view any document: Code view, Design view, and Code and Design view. If you like working with the Dreamweaver visual interface, but still want to keep your eye on your code, Code and Design view can be your best friend (see Figure 3.17). Both views are visible in the Document window, and you're free to edit either code or design just by clicking in the relevant portion of the window.
Working in the Code and Design view, when you select anything in one view it's also selected in the other view. If you're new to HTML coding, this can be a great way to get used to which HTML elements create the different page elements.
When you edit anything in the Design portion of the split window, the HTML in the Code portion of the window automatically updates.
When you edit code in the Code portion of the window, the Design view will not update automatically. That's because Dreamweaver waits for you to finish entering your code before it tries to display it visually. To see your code changes happen in Design view, either click inside the Design portion of the window, click the Refresh button in the Property inspector, or press F5.
If your code editing results in invalid code, you'll see the problematic part of the code highlighted in the Design view portion of the window.
Exercise 3.2 Working with a Simple Document in Code and Design Views
In this exercise, you build on the basic page your created in the preceding exercise, adding a few more elements and checking the document structure in various coding views.
If you haven't done so yet, copy the chapter_03 folder on the CD to your hard drive. Define a site called Chapter 3, with this folder as the local root folder.
Start by opening basicpage.html, if it isn't already open.
Your simple document consists of several HTML tags, including <h1> for the heading you created and <hr> for the horizontal rule. The tag selector can help you see and work with these tags.
Click inside the heading you created and examine the tag selector. It will tell you that your cursor is inside the <body> tag, and within that tag it is inside the <h1> tag. (This is an accurate description of your document's body structure the <h1> tag is nested inside the <body> tag.)
To see how the tag selector can help you select things, click the <h1> button in the tag selector. Your entire heading is selected! Now click the <body> button in the tag selector. Your heading and your horizontal rule are selected! Selecting the <body> tag selects all the visible content on your page.
. Now take a look at your document's structure as it appears in the Tag Inspector. Choose Window > Tag Inspector, or expand the Code panel group from the docked interface so that the Tag Inspector shows. Stretch the Tag Inspector panel out to be as tall as you need so that you can see it decently.
The top half of the panel looks something like a very complex outline, with lots of topics and subtopics. To clean the display up, click the expand/collapse triangles to contract the display until you're only seeing the <html>, <head>, and <body> tags. See how they're nested? Now expand the <body> tag's triangle so that you see your page contents. There's an <h1> tag and, below it, the <hr> tag.
Still in the Tag Inspector, select the <hr> tag. Then take a look at the bottom half of the inspector, and you'll see all the possible attributes for this tag (many more than show in the Property inspector). Width, Height, and Noshade are filled in. You can change these values here, if you like.
Finally, let's see the code itself. From the Document window toolbar, click the Code and Design view button. Your Document window splits into two sections, with code on top and design on bottom. In the Design view portion of the window, drag across your heading text to select it. See how, in the Code view portion, the <h1> code for the heading scrolls into position and is now selected?
Now in the Code portion of the window, deselect the heading and select only a word or two from the heading. See how, in the Design view portion, part of the heading is selected? It's easy to keep track of what code creates what design elements when you work in this split-window view.
In the Design portion of the window, change one or two of the words in your heading. Change it to Welcome to Fred's Web Site, or something like that. Notice how, as you type, the Code view display shows your typing.
Now, in the Code view portion of the window, find the code for your horizontal rule. (Hint: It starts with <hr.) Find the width attribute and change its value to 50. Change the size attribute's value to 50 as well. (This changes the height.) What's happening in Design view? Nothing! That's because Dreamweaver doesn't know whether you have finished typing yet. Click anywhere in Design view, or click the Refresh button in the Property inspector, and your changes will take effect.
Everybody makes mistakes. It's the job of good software to give you a break when you do. In Dreamweaver, if you do something you wish you hadn't done, you can take yourself back and forward in time using the Undo and Redo commands or using the graphic interface of the History panel.
Whatever you did last, you can usually undo it by choosing Edit > Undo. In fact, when you go to the Edit menu, the Undo command even tells you exactly what it's going to undo. It will say Undo Typing, Undo Backspace, Undo Insert Table, or whatever it was you last did. And then, after you've undone yourself, if you decide you really didn't want to undo, you can undo the undo by choosing Edit > Redo Typing, or Redo Backspace, or whatever it is you really wanted to do. Dreamweaver will enable you to undo/redo as many steps as it can remember, limited by how much memory your computer has available and how many steps you want it to remember. (See the following section for more on limiting steps remembered.)
A very drastic way to undo all sorts of actions is to choose File > Revert. This removes all changes you made to the document since the last time you saved it. The command isn't available if you haven't yet saved. After you've reverted, you cannot undo the revert. Reverting is the same as closing the document or quitting Dreamweaver without saving.
If you prefer your undoing and redoing to take place in a more visual interface, you can use the History panel, accessed by choosing Window > Others > History (see Figure 3.18). The History panel represents every step you take in your document-creation process as an entry in its list. If you like, you can use it just as a visual indicator of where you've been and what you've been doing lately. The last line in the list, and the location of the triangular slider button at the left, indicates the very last thing you did.
To undo with the History panel, drag the triangular slider up to a previous step in the list. When you do this, all steps lower than the slider turn gray, indicating that they're undone. In the Document window, the steps have been undone and you're looking at an earlier stage of your document brought back to life.
To redo with the History panel, drag the triangular slider back down the list. The grayed-out steps will turn solid again, and your document reconstructs itself to where it was before you undid. Note that after you've undone any steps by dragging the slider to a previous step, if you perform any other edits in your document you destroy your ability to redo. The grayed-out steps in the panel disappear forever.
The History panel and the Undo command use the same reserve of Dreamweaver memory to recall earlier document stages. Like the Undo command, the History panel will remember as many steps as it can, up to the number of steps specified in your preferences. To see or change the maximum number of actions that will be remembered, choose Edit > Preferences > General, and set the Maximum History Steps. The default is to remember the last 50 steps.
Why would you want to limit the number of steps remembered? The more there is to remember, the more work Dreamweaver has to do. If the program is spending too many of its resources remembering steps, it might become sluggish in dealing with other memory-intensive tasks, such as refreshing the list of files in a site and performing other complex code-crunching activities. If you're ever desperately short of memory and want to speed up Dreamweaver as much as possible, you can clear its entire memory of steps by accessing the History panel's pop-up options menu and choosing Clear History. This frees up some computer memory that you might need for an immediate task.
The History panel isn't just for undoing and redoing. You also can use it to save and replay actions, and even to remember actions as commands. For a full discussion of this aspect of working with History, see Chapter 34, "Customizing Dreamweaver."
Microsoft FrontPage is another WYSIWYG HTML editor. It contains many of the same functions as Dreamweaver, including some automated features specific to Microsoft FrontPage Server Extensions (which are located at your server and are proprietary to FrontPage). However, it still does not write the most efficient code, and many people are converting from FrontPage to Dreamweaver. Although by default Dreamweaver can edit any HTML page, available extensions can help you with the conversion process.
Extensions are additions to Dreamweaver that are written by developers to enhance and extend the inherent functionality of the program. Extensions are discussed in more detail in Chapter 35, "Working with Extensions." These extensions are available at the Macromedia Exchange for Dreamweaver and help you strip out FrontPage-specific code. They also enable you to connect to a FrontPage server.
If you open a page in Dreamweaver that was created in Adobe GoLive, you might see a lot of proprietary code, especially if the pages were created using GoLive's Layout Grid feature for automatic table generation. The Clean Up HTML command in Dreamweaver will go a long way toward getting rid of this extra source code. Choose Commands > Clean Up HTML to access this Dreamweaver function.
You can copy code and text into Dreamweaver from any source. You can copy text from a word processor and paste it into the Design window. Dreamweaver will write the code for it automatically, but you will lose all textual formatting except for paragraphs. You also can paste pure HTML code straight into the Code view.
Dreamweaver MX brings back the Copy as HTML and Paste as HTML features. These enable you to copy and paste from the Design window and bring the HTML along with it. Generally, if you copy text from the Design window and paste it into, for instance, Notepad, only the text will copy over. If you select something in the Design window, choose Edit > Copy as HTML, and then paste into Notepad, you will get all the source code that goes along with it. To learn more about using text, refer to Chapter 4, "Working with Text."
For specific information on using Microsoft Word and Dreamweaver together, see Chapter 4.
Dreamweaver can import tabular data and automatically create a formatted table with this data. For this feature to work, the file must be in a delimited format, meaning that it needs to be saved in a format that retains only the data. Dreamweaver will then parse (sort) this data into a discernable format. Generally, spreadsheet programs have an option to Save As in a variety of formats. These might be tab-delimited text or a comma-separated value (CSV). Dreamweaver can parse delimited files by the following:
Other (When Other is chosen, you are given a field into which you put the delimiting value.)
In a CSV file, for instance, only the cell data is saved. A comma separates the cell data for a row, and a new row is denoted by a carriage return. Any other media or formatting is lost in this conversion. Therefore, when you take this CSV file and bring it into Dreamweaver, it will know to make a cell for each value between a comma; when it gets to a return or new line, it will start a new row in the table.
Exercise 3.3 Importing a CSV File into Dreamweaver
In this exercise, you import a CSV file into Dreamweaver.
If you haven't done so yet, copy the chapter_03 folder on the CD to your hard drive. Define a site called Chapter 03, with this folder as the local root folder.
Open a new HTML file in Dreamweaver (File > New). Save it as element_table.htm.
Choose File > Import > Import Tabular Data. The Import Tabular Data dialog box will display.
For the Data File field, click the Browse button and find the element_table.csv file that is in the site root folder. Select it, and then click Open. Notice that the Delimiter field should have automatically changed from Tab to Comma.
Select the table settings:
Table Width = Fit to data
Cell Padding = 2
Cell Spacing = 2
Format Top Row = No formatting
Border = 2
Choose OK. Dreamweaver will parse the data file and make a table of all the elements. Figure 3.19 shows the completed table.
Save the file as element_table_done.htm, and then close it.
Many spreadsheet programs today have an option to Save As HTML (or as Web Page). This is another way to place data into Dreamweaver. If you use the Import Tabular Data option, Dreamweaver will be able to make the HTML table, and it will almost always be better coded.
If you're designing web pages, the browser is the center of your universe. What browsers are your visitors using? How do your pages display in the different browsers? How can you make sure your target audience is seeing your pages at their best, despite browser differences? Dreamweaver offers a variety of tools to deal with these fickle mistresses of cyberspace.
Design view is for designing; it's meant only as an approximate rendering of what your page will look like when it's online. How do you tell how your page will look in a browser? You look at it in a browser! Unlike other web editors, such as FrontPage or GoLive, Dreamweaver has no internal previewing window. Instead, Dreamweaver has tools for quickly launching your computer's browsers to do your previewing there.
Before you can use Dreamweaver to help you preview in your browser, you need to tell Dreamweaver which browsers are available on your system and where they're stored. You can define as many browsers as you want (as long as they're installed on your system). You also can designate one browser as your primary browser and one as your secondary browser. (The primary and secondary browsers are easier to launch than the others.) For each browser on your system, follow these steps:
Choose Edit > Preferences and go to the Preview in Browser category (see Figure 3.20).
The list in the center of the dialog box will show you whether any browsers have already been specified.
To add a new browser, click the plus (+) button. In the dialog box that appears, navigate to one of your browsers and click OK. (You're on your own finding where the browsers are on your computer; Dreamweaver has no feature for automatically searching your hard drive for browsers.)
Back in the Preferences dialog box, select whether you want the new browser to be your primary or secondary browser.
Repeat steps 2 4 for as many browsers as you want to add to the list here.
After you have added your installed browsers to Dreamweaver's browser list, you can quickly see how any of your documents will look in those browsers by opening the document and doing one of the following:
For your primary browser, press F12.
For your secondary browser, press Ctrl/Cmd+F12.
For any browser in your list, go to File > Preview in Browser and choose your browser from the submenu; or use the Preview/Debug in Browser menu in the Document window toolbar (see Figure 3.21).
As soon as you do this, Dreamweaver launches the specified browser and opens your document in it. It doesn't even matter whether you've saved your document first.
By default, when you Preview in Browser, Dreamweaver doesn't open your HTML file in the browser. Instead, it creates a temporary file (with a name such as TMPdcrhgv23u0.htm), identical in every way to your file, and opens that in the browser. Why does this happen? It's meant to be a good thing, enabling you to Preview in Browser without having saved your document first. If you preview frequently (a good thing), it can be a hassle having to save every time although saving frequently is a good thing, too.
Be aware, however, that these temporary files can generate their own minor problems. For one thing, these temporary files end up on your hard drive. They're not doing any harm, but they're a bit of extra clutter; and if you don't know what they are, you might wonder what gremlins are creating them. Dreamweaver is supposed to delete all temporary files when it shuts down, but it doesn't always do this. You might even end up with some TMPdcrhgv23u0.htm files uploaded to your web server.
A more confusing side effect to using temporary files, however, is how the browser preview and browser refresh works. Imagine this: You're working on a document and you Preview in Browser and see that the document needs some tweaking. So, you minimize or hide the browser window and return to Dreamweaver, where you make your changes. Then you return to the browser window and click the Refresh button to update the view. But your page doesn't change! Are you in the cyber-Bermuda triangle? No! When you modified your document, Dreamweaver didn't modify the temporary file. Dreamweaver expects you to generate a new temporary file by choosing File > Preview in Browser (F12) again. Every time you want to see another preview in the browser, choose the command again. Don't just leave the original temporary file open and press Refresh.
If you don't like working with temporary files, Dreamweaver MX also can Preview in Browser without them, by opening your original HTML file in the browser. To set this up, choose Edit > Preferences > Preview in Browser, and deselect the Preview Using Temporary File option (see Figure 3.22). The upside to this is you don't end up with extra TMPdcrhgv23u0.htm files on your computer, and you can use the browser's Refresh button to update your preview. The potential downside is that you will have to remember to save before every preview, and you won't be able to preview unsaved documents.
If you've worked at all with the Edit Tag command, you've seen how Dreamweaver can tell you which tag attributes are going to work with which browsers (refer back to the discussion about Figure 3.12). The information that shows up in the Edit Tag dialog box is part of the Dreamweaver database of tags and attributes. Any time you want to check the code in a document against the database, use the Check Target Browsers command, as follows:
Open a document that you want to check. (The document must have been saved at least once before you can use this command.)
While the current chapter is focusing on documents, you also can check target browsers across an entire site. Do it by activating the Site panel before choosing the command.
Choose File > Check Page > Check Target Browsers.
A dialog box will appear listing all the browsers represented in the Dreamweaver database. From this list, select the browser you want to check against. Note that you can select only one browser. If you select multiple browsers from the list, the last one in the list is considered the target.
Click Check to close the dialog box and perform the check. After a few moments, the Results window opens with the Target Browser Check tab in front. It shows the results of your check. Any nonsupported tag or attribute shows up in the window as a problem.
Validation is an important concept in the web development world. Validation is the process of checking the code of an HTML, XML, or XHTML document to make sure it is properly coded (correct syntax and no nonstandard tags or attributes) before it has to be displayed in a browser. Part of the reason today's browsers are so large and unwieldy is that they are programmed to deal with all sorts of invalid code, even to guess how a page should be presented if the syntax or elements are incorrect. In an ideal browsing world, each page's code would be checked for validity validated before the browser tried to display it; invalid pages would not display at all. The browsers could be lean and mean because they would be able to predict that only correctly coded pages would ever come their way.
If you're just getting started in web design, or if you're a professional on tight deadlines, you can put off worrying about validation for now. None of the major browsers requires it yet. But eventually, they will.
Dreamweaver MX now offers a validation service for all HTML documents. To check the validity of a document, follow these steps:
Open the document you want to validate.
Choose File > Check Page > Validate Markup; or, if the Results window is open, from the panel option's pop-up menu, choose Validate Current Document.
After a moment or two, the Results window will open, showing the Validation tab, with your document's report card showing.
You also can validate all the documents in a site by going to the Results window's panel options pop-up menu and choosing Validate Entire Site. You can validate some of the documents in a site by selecting those files in the Site panel and choosing Validate Selected Files in Site from the Results window's panel options pop-up menu.
Validation involves checking your document(s) against a standard; and there are all sorts of standards out there, from HTML 2.0 to XHTML strict and beyond. To see what standard Dreamweaver is using to validate your documents, and to change the standards as needed, choose Edit > Preferences > Validator or, in the Results window, access the panel options pop-up menu and choose Settings. Both of these commands open the Preferences > Validator dialog box (see Figure 3.22).
Your pages preview beautifully in the major browsers. They pass the proper validation tests, so you know you're being a good coding citizen. But are they accessible? Accessible web pages are designed to be usable by people with visual, auditory, or motor disabilities. This includes people using screen readers and other special software and hardware to browse the Internet. For the World Wide Web to be truly universal, it needs to be accessible. And if you're designing government-related web sites, accessibility is more than a good idea; it's the law. Section 508 of the Federal Rehabilitation Act states that any web site for use by government employees, or for the purpose of disseminating government information, must comply in some very specific ways with the Americans with Disabilities Act.
You can make your web pages accessible in a variety of ways, including the following:
Add alt labels to all images so that screen readers and other people without access to the images can still understand the intended meaning of the images.
Use logical markup to structure your pages, rather than presentation markup. Use <em> and <strong> rather than <b> and <i>, for instance.
Take advantage of the extra attributes such as D-Links and LongDesc for URLs and images, for instance.
If your page includes form elements or navigation controls that need to be clicked, provide keyboard shortcuts and Tab indexes where possible so that those with motor impairment can still navigate through your content.
To help you create accessible web pages without compromising your efficiency, Dreamweaver MX gives you quick access to each of your page element's accessibility attributes. To enable accessibility attributes, choose Edit > Preferences and, in the dialog box, go to the Accessibility category (see Figure 3.23). The list of options represents different page elements that have special accessibility attributes in HTML. For each item you select, every time you click an object to insert that object, its dialog box will include those special attributes. Figure 3.24 shows the Insert Table dialog box with and without accessibility attributes enabled.
The Accessibility Options for Tables dialog box appears only if accessibility is enabled and displays only after you click OK in the Table dialog box.
This chapter covered a lot of ground. For Dreamweaver newcomers, you got your feet wet in the world of HTML code and in the Dreamweaver coding and designing interface. Other Dreamweaver users, you might have discovered some basic tools you didn't know about or might have been introduced to some of the new features available in Dreamweaver MX. The next several chapters cover the various aspects of working with documents in more detail text, images, links, and head content. After that, basic training is over, and it's off to the world of web design and beyond.