InformIT

Building a Web Page in Dreamweaver 8

Date: Nov 4, 2005

Sample Chapter is provided courtesy of Sams.

Return to the article

Building web pages in Dreamweaver is extremely intuitive and quick to pick up. Flanked by key panels and inspectors, building web pages in Dreamweaver is merely a matter of dragging and dropping objects onto the development environment and formatting attributes using the Properties Inspector, the Tag Inspector, and so on. This chapter covers the most common types of links and how to customize them using Dreamweaver 8.

In This Chapter

In the last chapter, you learned about the many windows, bars, panels, and menus that Dreamweaver includes to aid you in the development of your web pages. You learned that the Document window is the heart of Dreamweaver and where most of your creative energy will be focused. You also learned that the Document window is surrounded by a myriad of panels contained within panel groups that facilitate the addition of functionality for your pages, a feature rich inspector to assist you in the addition of properties for elements within the Document window, and a complete menu bar that structures every Dreamweaver feature into an easy-to-use grouped list of options.

Moving beyond the simplicities of learning the user interface lies creating an actual web page. In this chapter, you'll take the foundation you gained in the last chapter and build on it to create a simple web page. Using the many tools that you explored in the previous chapter, you'll create a new page in Design view, work with text in the Document window, add images to your web page, examine linking using hyperlinks, and finally, learn how to work with your web pages in Code view.

You can work with the examples in this chapter by downloading the files from http://www.dreamweaverunleashed.com. You'll want to save the files for Chapter 3 in an easy-to-find location. I'll place mine in C:\Dorknozzle\Chapter03.

Creating a New Document

In the previous chapter, you learned that the Start Page is a handy window used to open new, existing, or recent documents. While the Start Page will work fine when Dreamweaver has been opened for the first time, it does us little good however, if we need to create a new document when document window instances are already open. In such cases, you’ll want to use the New Document dialog. Accessible by selecting File, New, and shown in Figure 3.1, the New Document dialog allows you to create new documents based on an existing predefined skeleton file, create new documents based on a prebuilt template, and more.

NOTE

You can also create a new document by right-clicking the defined site in the Files panel and selecting the New File option from the context menu, by clicking the Files panel’s Options menu and selecting File, New File, by using the keyboard shortcut Ctrl+N (Windows users) or Option+N (Mac users), or by using the New File object in the Standard toolbar.

Figure 3.1

Figure 3.1 The New Document dialog allows you to open new documents, new preconfigured documents, and ready made templates.

NOTE

All HTML pages require <html>, <head>, <body>, and <!doctype> tags. Because this is the case, Dreamweaver adds these tags to pages, also considered skeleton files, within the New Document dialog to help get you started.

As you can see from the callouts in Figure 3.1, the New Document window exposes the following features:

Of course the focal point of the New Document dialog lies in the categories and page types that are supported from the General tab. The categories and the supported page types are outlined here:

Now that you’ve gotten a thorough tour of the New Document dialog, let’s use it to create a new HTML page that we can use throughout the chapter. To create a new HTML page, simply follow these steps:

  1. Choose the Basic Page option from the Category pane.

  2. Choose the HTML page type and click the Create button.The New Document dialog closes and a new HTML Document window instance appears similar to Figure 3.2.

  3. Save your document (choose File, Save) to the folder that contains the examples for this chapter. I’ll call mine index.htm.

NOTE

Most web hosting providers accept default files named index.htm, home.htm, or default.htm. Naming your starting page index.htm guarantees that you won’t have to type http://www.yourdomain.com/mypage.htm but instead can limit the URL to http://www.yourdomain.com.

Figure 3.2

Figure 3.2 A new document window instance can be created from the Basic Page, HTML category in the New Document dialog.

Working with a New Document in Design View

With a new Document window open, we’re ready to get started building a new web page. Before we begin however, it’s important to note that Dreamweaver supports two development modes: traditional HTML and CSS. Out of the box, Dreamweaver defaults to the more feature-rich and standards-compliant CSS mode. Although it’s certainly advantageous to work in this mode, it’s not beneficial to introduce CSS so early on in the book. To disable CSS formatting temporarily, simply choose Edit, Preferences. In the Preferences dialog, disable the Use CSS Instead of HTML Tags option from the General category (see Figure 3.3).

After you’ve disabled the option, click OK to return to the Document window.

NOTE

Enabling the Use CSS Instead of HTML Tags option doesn’t prevent you from using CSS in your pages. It simply prevents Dreamweaver from forcing style generation every time you format an element in the Document window. We’ll re-enable this option when we get to Chapter 7, "Advanced Page Formatting Using Style Sheets."

Figure 3.3

Figure 3.3 Uncheck the Use CSS Instead of HTML Tags option for temporary formatting using traditional HTML tags.

Modifying the Page Properties

Before you begin building a web page, you might want to think about how you want your page to look. Typically, most developers already have a basic idea of how they want the appearance or the color scheme of the web page to look. I’m sure you’re thinking about these options, right? Because you are, Dreamweaver provides properties you can set for the page. Options such as page background color, link colors, margin sizes, and encoding are all accessible from the Page Properties button located in the Properties Inspector or by selecting the Modify menu and choosing Page Properties (alternatively, press Ctrl+J). Once selected, the Page Properties dialog appears separated into the following three categories:

It’s important to mention that options within the Page Properties category will range depending on which formatting mode you’re in. Because we disabled the Use CSS Instead of HTML Tags option, we get only three categories to choose from (Appearance, Title/Encoding, and Tracing Image). Had we not disabled the box within the Preferences dialog, we’d have five categories to choose from (the previous three plus categories for Links and Headings).

Modifying the Appearance

The Appearance category allows you to perform numerous tasks associated with the overall look of the page including setting a background image, changing the background color, text and link color, and margin width and heights. A detailed list of features is outlined below:

Now that you have an idea as to the properties of the Appearance category, let’s set some of these values for our page. Go ahead and change the properties so that they look similar to Figure 3.4.

Figure 3.4

Figure 3.4 Modify the appearance of the page.

As you can see, we’ve changed the background of the page to use the header_bg.gif image located in the Images directory of our defined site, the default Text, Link and Visited link color of the page, and modified the top margin and margin height properties for the page. If I click OK, the page will be formatted based on the background image I specified. My cursor will be blinking with no room to spare at the top of the browser window, but with about 15 pixels as a margin from the left side of the browser. The text and links will become evident as the chapter unfolds.

NOTE

Looking at the background image in the browser reveals an image that is 1 pixel wide by 1050 pixels high. The color you see near the top of the page is simply the image spanning only 142 pixels of the 1000. The rest of the image is just plain white. This arrangement allows us to fill the Document window with a background image that only consumes the top portion of the page, leaving the rest white for text. You’ll also notice that the entire page is consumed by this 1-pixel-wide background image. By default, background images tile horizontally and vertically. So in our case, the 1-pixel background image tiles across the page even if the user expands and contracts the browser window. The image never gets to tile vertically however because the image, at 1050 pixels, is just too large. Even if a user maximized their browser window, it still wouldn’t tile unless their screen resolution exceeded that 1050 pixel depth. Not likely.

Title/Encoding

The second selectable option within the Category pane is Title/Encoding. While we’ve covered the topic of titles already, you can also use this category to set the document’s encoding type. Encoding, a system for electronically displaying appropriate characters for different languages, allows you to develop a wide range of non-English HTML pages. Basically, by setting the encoding type, HTML code is added to the page that tells both Dreamweaver and the browser which character set should be used to display the page. By default, the encoding type is set to Western European; for the sake of simplicity, we won’t change that. You can, however, change the title of the page here, as we did from the Document bar in the Document window, by simply changing the text that reads Untitled Document to The Dorknozzle Company Intranet as shown in Figure 3.5.

Figure 3.5

Figure 3.5 Change the title of the page.

Additionally, if you find that you want to change the default DTD for the page, you can use the Document Type (DTD) menu to select a different DTD.

You can find links to resources on document encoding in Appendix C, "General Resources."

Tracing Image

The third option available within the Category pane is Tracing Image. As I mentioned earlier, you can use the Tracing Image option to set a temporary background image on the page. By setting the transparency of the background image, you can then use Dreamweaver elements, such as layers, to design around your background image as if you were drawing on tracing paper sitting on top of an original document. We’ll cover this option with much more detail in Chapter 11, "Layers in Dreamweaver."

Working with Text

Now that you’ve successfully set the properties for the page, its time to start adding content to it. This next section is devoted entirely to text formatting within the Document window. Although most features are derived from and may seem similar to popular word processing programs, you’ll definitely find limitations and workarounds a necessity in some cases.

Copying and Pasting Text from External Sources

The first step to working with content in Dreamweaver is actually getting that content into the development environment. Technically, you could just place your cursor in the Document window and begin typing. A more realistic approach, however, is to copy the contents from an external source (such as a text file) and paste it in the Document window. At our fictitious company Dorknozzle.com, Cammy the Content Manager is responsible for creating all corporate content. When the content has been written for a specific page, Cammy the Content Manager emails you the text files for placement on the intranet site. After you have the files, you place the text files in an Assets folder. What next?

Again, you could just print out the content Cammy sent you, tape it to your computer screen, and type in the Document window what appears on the printed page. Not likely right? Fortunately Dreamweaver includes numerous options for easily adding content to your page from external sources. The most obvious option is to simply open the text file in Dreamweaver, select all the text (choose Edit, Select All or press Ctrl+A for Windows or Option+A on a Mac), copy the text (choose Edit, Copy or press Ctrl+C on Windows or Option+C on a Mac), and then paste it into the page (choose Edit, Paste or press Ctrl+P on Windows or Option+P on a Mac). Before we jump ahead however, note that other options for pasting text into your page also exist, these include:

As an example, try opening the file titled welcome.txt from the Assets folder. Copy the text from the file by choosing the Select All option from the Edit menu. Now switch back to your web page and choose Paste from the Edit menu. As Figure 3.6 shows, the text is inserted into the page with minimal formatting.

Figure 3.6

Figure 3.6 The copied text is inserted into the web page with minimal formatting.

Now let’s try the Paste Special option. Before you do however, undo what you’ve just pasted in by choosing the Undo Paste As Text option from the Edit menu (or by pressing Ctrl+Z or Option+Z). To demonstrate the Paste Special option, open the file Welcome.doc located in the Assets folder for your defined site. The file should open directly in Microsoft Word. Notice that the text includes some basic formatting, including font face, size, color, and a heading for the title. Again, choose the Select All option from the Edit menu. Next, choose the Copy option from the Edit menu. Now switch back to Dreamweaver and try pasting the text into the Document window using the Paste option from the Edit menu. You’ll notice that the font face, size, and colors are lost when using this option. Instead you’ll want to use the Paste Special option. Undo the text you’ve just pasted in by choosing the Undo Paste option from the Edit menu. This time, choose Edit, Paste Special. The Paste Special dialog launches (see Figure 3.7).

Figure 3.7

Figure 3.7 The Paste Special dialog allows you to choose from various formatting options to be applied to text that’s being copied from an external source.

Choose the Text with Structure Plus Full Formatting (Bold, Italic, Styles) option and click OK. As you can see from Figure 3.8, the formatting in this case is retained from the Word document.

Figure 3.8

Figure 3.8 Formatting including font face, size, and color are retained from the external source.

In the Paste Special dialog, you probably noticed a button that allowed you to launch the Paste Preferences dialog. Clicking this button launches the Preferences dialog with the Copy/Paste category selected. It’s from this category that you can choose the default option that should be applied when the user chooses the normal Paste option from the Edit menu.

Although copying and pasting text into your web pages seems easy enough, it gets easier. You can add text directly into your page without ever having to open the original file. This can be accomplished by using the Insert Document feature. To do this, simply drag the text file titled welcome.txt into the page. Immediately, the Insert Document dialog appears similar to Figure 3.9.

Figure 3.9

Figure 3.9 Make copying and pasting easier by simply dragging the text file into the page.

The Insert Document dialog allows you to insert the contents of the file directly into the page or to create a link on the page to the document. Choosing the Insert the Contents option and then choosing the Text with Structure option results in the text being added to the page similar to the way it was added when we performed a copy and paste.

Text Formatting

Now that the text is on the page, we’ll want to format it so that it looks presentable. For instance, we may want to create headers to separate the text into two distinct parts: About Us and Company Events. Also, you’ll notice that our text, because of its color, gets lost at the top of the page with the background. To fix this problem we could use paragraph breaks and line breaks to cleanly divide the text into legible sections, at the same time, moving it down from the top of the page. As a start, let’s look at line breaks. Line breaks, inserted onto the page by selecting Insert, HTML, Special Characters, Line Break or by pressing Shift+Enter (Windows users) or Shift+Return (Mac users), allow you to simply break one line into two. In our case, we’ll use the line break to force breaks into our page, cleanly separating the text from the top of the page until the first sentence is clearing the background. To do this, simply place your cursor just before the first line of text and press Shift+Enter (Windows users) or Shift+Return (Mac users) eight times. As you can see from Figure 3.10, the text now clears the background and is much more legible on the white background.

Figure 3.10

Figure 3.10 Use a line break to force text to shift down to the next line.

Alternatively, you could use a paragraph break to divide two or more portions of text into sections that can be easily formatted using various other paragraph-based formatting tools. For instance, alignments, lists, and indenting can only be performed on paragraphs. To give you an idea as to the difference between line breaks and paragraph breaks, try using two more line breaks on your text, randomly placing your cursor in the text and tapping Shift+Enter (Shift+Return on a Mac) twice each time. This effectively divides your text into three sections similar to Figure 3.11.

Figure 3.11

Figure 3.11 Divide your text into three sections using line breaks.

Now highlight the first section of text and click the center align button. As you can see from Figure 3.12, all the text is centered as opposed to just the highlighted section.

To correct this problem, we’ll choose Edit, Undo or press Ctrl+Z (Option+Z on a Mac) until we return to where we started. Now, instead of using line breaks, use paragraph breaks to divide your text into three sections. This can be accomplished by simply placing your cursor at the point of the text block where you want to create a paragraph break and pressing Enter once. Repeat this step until your text block has been formatted into three distinct paragraphs (refer back to figure 11). Now highlight the first section of text and click the same center align button. This time, only the first section of text is center aligned.

Figure 3.12

Figure 3.12 All the text is centered as opposed to just the text that was highlighted.

While line breaks are advantageous in a sense that you can cleanly shift your text down to the next line, paragraph breaks offer much more flexibility in that each section that is defined as a paragraph break can be formatted independently of one another.

Finally, you can create headings within your paragraphs by using the Format drop-down menu within the Properties Inspector. If you look closely at the drop-down menu, you’ll notice that Paragraph is currently selected. The paragraph break is actually considered a formatting option while the line break is considered a special character (which is why the line break appears within the Special Characters submenu). The advantage to this is that we can remove the paragraph formatting from a section of text by highlighting it and then choosing None from the Format drop-down menu. Of course, we don’t want to do that at this point; instead we want to review the remaining options within the Format menu, specifically Heading 1–Heading 6.

You can use the six headings available from the Format menu as a way of adding a preconfigured style to text on your page. The browser renders each of the heading options differently so it’s wise to experiment with all of them to get an understanding of the relative dimensions of each. For our example, however, we’ll use Heading 3. To demonstrate this heading, add the text About Dorknozzle just above the first paragraph by placing the cursor just before the first section of text and pressing Enter to create a new paragraph break. Now add the text About Dorknozzle, highlight it, and choose Heading 3 from the Format menu. Repeat this step by adding the text Company Events under the text that appears for the About Dorknozzle heading. When finished, the formatted text will resemble Figure 3.13.

Figure 3.13

Figure 3.13 Choose one of the six Heading options to add a preformatted style to your text.

The final option in the Format menu is the Preformatted option. You’ll want to use this option in cases where you have text that was formatted in one editor and you want to preserve the formatting when adding the text in Dreamweaver. To demonstrate this option, follow these steps:

  1. Create a new blank HTML document by selecting New from the File menu, choose the HTML page option, and click Create.

  2. Open the text file titled preformatted.txt, choose Edit, Select All, and then choose Edit, Copy.

  3. Place your cursor in the new document and choose Edit, Paste. As you can see from Figure 3.14, the text is broken apart and illegible.

  4. To fix this and preserve the formatting from the previous editor, press Ctrl+Z (Option+Z on a Mac) to undo the paste operation. Choose the Preformatted option from the Format menu.

  5. Immediately choose Paste. This time, the text’s formatting is preserved as you can see from Figure 3.15.

Figure 3.14

Figure 3.14 Pasting text that was formatted in a different editor results in text that is broken up.

Figure 3.15

Figure 3.15 Using the Preformatted option preserves the formatting of text from previous editors.

Choosing Typefaces

By now you’ve probably noticed that up to this point, our text appears as Times New Roman. Without choosing a type face, Dreamweaver defaults to the browser default which is, you guessed it, Times New Roman. Of course you’re not limited to this font face, but you are limited in terms of how many font faces you can use. Unlike print publishing programs that support thousands of different font faces, browsers, by default recognize a select few. These few include Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Georgia, Verdana, and Geneva.

NOTE

To understand why we’re limited in terms of font faces is to understand how browsers identify fonts. Unlike print publishing programs where fonts can be bundled with the file for final production, web pages use references to font faces. Essentially, you are betting that the user viewing your web page also has on their computer the font you are referencing in your page. If they do, the font is loaded and the user can view the page as you intended. If they don’t, the browser defaults to Times New Roman. Browsers use the fonts mentioned above as defaults because 99% of Internet users regardless of platform have these fonts loaded on their computers.

Dreamweaver allows you to choose from these font faces in the Font drop-down menu located just below the Format drop-down menu in the Properties Inspector. To demonstrate the use of font faces, try selecting all the text on the page and choose the Arial, Helvetica, Sans-serif option from the Font menu. As you can see from Figure 3.16, all the text changes from Times New Roman to Arial.

Figure 3.16

Figure 3.16 Change the text from Times New Roman to Arial.

So why three font faces grouped into one option? By default, Dreamweaver organizes sets of font faces into what are known as font families. This is beneficial in a sense that if a user’s browser doesn’t have the first font in the family (Arial), it defaults to the next font in the family (Helvetica). If a user doesn’t have that font either, the browser simply defaults to the next best sans-serif font, the last option within our family.

With all this said, you’re not completely out of luck in terms of font faces. For instance, if you’re working in an Intranet environment where everyone’s computer within your organization is configured exactly the same, go ahead and use your own font faces. Since the font you’ll likely choose will be loaded on the users’ computers within your organization, everything should function smoothly. You can create your own font families by choosing Font, Edit Font List, which opens the Edit Font List dialog similar to Figure 3.17.

Figure 3.17

Figure 3.17 The Edit Font List dialog allows you to create your own font families.

The Edit font List dialog is divided into three panes. The first pane, Font List, simply shows you a list of currently configured font families. The second pane, Available Fonts, shows you a list of all fonts installed on your computer. You can move available fonts into the third pane, Chosen Fonts, to create a font family. To do this, just find fonts that you want to use within the Available Fonts pane and click the twin arrows button to move them over to the Chosen Fonts pane. You’ll see the font family build in the Font List pane as you add them to the Chosen Fonts pane. When you’ve finished configuring your font family, click OK. Now look in the Font menu in the Properties Inspector; the new font family appears in the list.

TIP

Again, unless you’re working in an Intranet environment where you know everyone has the same font installed, you’re better off simply using the default font families referenced in Dreamweaver.

Font Sizes

Working with font sizes is another great challenge in website development. With all the different factors of platforms and web browsers, managing the size of text is no easy task. Remember that the end user ultimately determines how large or how small fonts appear in the browser. To prove this point, open your browser (I’ll open IE) and select View, Text Size. Of course, the browser defaults to medium but you’re entirely free to change the default size of text on the page. For this reason, Dreamweaver provides both absolute and relative text sizes, available from the Size drop-down menu in the Properties Inspector just to the right of the Font drop-down menu.

The options in the Size drop-down menu don’t resemble point or pixel sizes, instead they refer to HTML sizes. The default size of the page is set as an absolute value of 3, but you can select from a list of absolute or relative sizes for your page. The absolute size is a straight number from 1 through 7, with 1 being the smallest and 7 being the largest. With relative sizes, you can either add to or subtract from the default font size of the page. For example, because the default font is 3, you can add to that value by choosing +1, and the type will appear as an equivalent to an absolute size 4. To demonstrate this, try experimenting with the various sizes in a new blank page. As you can see from the matrix shown in Figure 3.18, the default font size is 3. However, choosing the relative value of +1 displays the equivalent of the absolute value 4. The same concept holds true for the relative value –1. In this case, –1 displays similar to the absolute value of 2.

Figure 3.18

Figure 3.18 Use relative font sizes to scale up or down from the default font size.

Sounds confusing right? I wouldn’t worry to much about working with fonts and sizes. Development gets easier and much more flexible once we move into Cascading Style Sheets. For now, let’s modify our example by highlighting the paragraphs of text (not the headings) and choosing an absolute value of 2. As you can see from Figure 3.19, the text changes size.

Text Colors

Yet another frustrating topic in web development is that of choosing the right colors for your website. Unlike print publishing programs or word processing programs where you open a color palette containing millions of colors, browsers choose from a web-safe color palette of 216 colors that are familiar to all computers. Doing this guarantees that the colors we choose are viewed accurately on browsers independent of platform or operating system. Dreamweaver organizes web-safe colors in the Text Color chip available just to the right of the Size menu in the Properties Inspector. Selecting this chip opens the Color palette, shown in Figure 3.20, and turns the pointer into an eyedropper allowing you to sample colors from Dreamweaver’s interface.

Figure 3.19

Figure 3.19 Change the size of text within our fictitious company’s web page to an absolute value of 2.

Figure 3.20

Figure 3.20 The Color palette opens allowing you to sample from a list of web-safe colors or directly from Dreamweaver’s interface.

A complete list of features supported by Dreamweaver’s Color palette are outlined here:

To demonstrate the use of color, let’s highlight the text on the page and modify the color so that it shows as a dark blue. To do this, highlight the text and click the color chip; when the pointer turns into an eyedropper, sample the dark blue color in the header image. The Color palette closes, and your text turns dark blue. Furthermore, once you’ve selected the color, the hexadecimal value appears in the text box just to the right of the color chip in the Properties Inspector.

Text Styles

Just above the Text Color chip in the Properties Inspector lie two options for modifying the weight—Bold(B)—and style—Italic(I)—of text in your pages. Although bold and italic are two options you can use in your web pages, you’re certainly not limited to just these. In fact, you can choose the Styles option from the Text menu to see a complete list of options (see Figure 3.21).

Most of the text styles in this list are deprecated, meaning the World Wide Web Consortium doesn’t recommend their use because they have been replaced in most cases by options in CSS. With that said, experiment at your leisure with the various options because they can help you understand what’s possible in terms of text styles.

Figure 3.21

Figure 3.21 Dreamweaver includes numerous text styles for use in your web pages.

Text Alignment and Indentations

Similar to a word processor, Dreamweaver includes the ability to align your text. Four alignment options are available, including left align, center align, right align, and justify. To see the alignment features in action, open the text file entitled footer.txt, select all the text, copy it, and paste it somewhere near the bottom of the Dorknozzle page. You might have to include more paragraph breaks to force the cursor near the bottom of the page. Of course, you may want to enhance this small footer by implementing features you’ve already learned, such as changing the font face, font size, and color. When you’re done, center-align the text using the Align Center button in the Properties Inspector (see Figure 3.22).

You can also indent your text by using the Text Indent and Text Outdent buttons located just below the Right Align and Justify icons in the Property Inspector. For instance, if I wanted to indent the text that appears below the headings, I could simply select the text and click the Text Indent button. I’ll click the Text Outdent button to return my page back to the way it was when I started.

Working with Lists

You can create lists easily within Dreamweaver. While Dreamweaver supports three types of lists (Ordered, Unordered, and Definition), arguably the more popular, ordered and unordered lists are available directly from the Properties Inspector by selecting the buttons just below the Left Align and Center Align buttons.

Often referred to as bulleted lists, unordered lists by default, create a bullet circle to the left of the selected item while ordered lists apply a number instead of a bullet to the left of the item and follow in sequential order.

Figure 3.22

Figure 3.22 Format the text then center align it on the page.

Creating a list in Dreamweaver is actually a simple process that involves nothing more than highlighting the text items to include in the list and choosing the appropriate option from the Properties Inspector. Alternatively, you can place your cursor on the page and choose the list option from the Property Inspector. Immediately, a bullet or number is created. You can type your items as you go, pressing Enter to move to the next line and creating a new bullet or incrementing number as you go. As an example of using a list, follow these instructions:

  1. We’ll create a bulleted list of company events just below the heading that reads Company Events. To create the list, place your cursor just after the heading and press Enter (press Return on a Mac) to create a new paragraph break if one doesn’t already exist.

  2. Choose the unordered list option from the Properties Inspector to create a new bullet.

  3. After the bullet appears on the page, begin typing a company event. To create a new bullet, simply press Enter (Return on a Mac).

  4. Repeat step 3 a few more times until your list resembles the one in Figure 3.23. You may need to apply formatting to your list (font face, size, and so on) so that it conforms to the rest of the text.

To see what the ordered list looks like, simply highlight the four company events and click the Ordered List icon in the Properties Inspector. The bullets become numbers.

Figure 3.23

Figure 3.23 Create a bulleted list of company events.

Of course, you’re not limited to plain bullets or numbers when working with lists. For instance, you can also format your lists so that the bullets show as squares, numbers show as letters or Roman numerals, or even format a specific list item as opposed to the list as a whole. This can be accomplished by simply placing your cursor on a list item and clicking the List Item button within the Properties Inspector. Choosing this option opens the List Properties dialog shown in Figure 3.24.

Figure 3.24

Figure 3.24 You can modify list item properties by opening the List Properties dialog.

The List Properties dialog is separated into two parts. The top part allows you to modify the properties of the list as a whole. For instance, with Bulleted List selected in the List Type menu, choose Square from the Style menu and click OK. Notice that all the bullets for the list items are changed to squares. The second half of the dialog (List Item) allows you to modify the properties of an individual list item as opposed to the list as a whole. Of course you can choose to work with Roman numerals or letters by selecting Numbered List from the List Type menu and choosing the appropriate option from the Style menu. After you’ve done this, you can even create a starting number by entering that value in the Start Count text box.

NOTE

If you want to use something other than the standard dingbats (circles and squares) for bullet points—such as a jack-o-lantern icon created in Adobe Illustrator—you have to use CSS to accomplish this goal. See Chapter 7, "Advanced Page Formatting Using Style Sheets," for more information.

The third type of list supported by Dreamweaver is the Definition List. Available by selecting Text, List, Definition List, the Definition List allows you to create a list that mocks a dictionary definition—where a definition appears indented below the term. To create your own definition list, simply follow these steps:

  1. Create a new blank page for testing purposes.

  2. Copy the About Dorknozzle text from the previous page and paste it into the new testing page.

  3. Highlight the text and choose Definition List from the List submenu of the Text menu.

  4. Place your cursor just before the second sentence, choose Backspace, and press Enter. This Definition List quirk indents the definition without spacing.

As you can see from Figure 3.25, the "definition" is indented and the list looks very similar to a dictionary definition.

Figure 3.25

Figure 3.25 The definition list creates a term with an indented definition.

Using Special Characters

Dreamweaver includes a library of special characters that you can use within your web pages. Special characters are text elements that must be inserted as special code because a keyboard key doesn’t exist for it. For instance, left and right quotes, dashes, the Euro symbol, the English Pound, the Japanese Yen, copyright symbols, registration marks, and trademarks are all considered special characters and must be inserted using the Text category within the Insert bar (see Figure 3.26).

Figure 3.26

Figure 3.26 The text category of the Insert bar contains a submenu of special characters.

TIP

Of course, special characters are also available from the Insert, HTML, Special Characters submenu.

You’re also not limited to the special characters in this list. Dreamweaver includes a character map that provides numerous other special characters you can insert into your page. To open the character map, choose the Other Characters option from the Special Characters submenu. As you can see from Figure 3.27, the Insert Other Character dialog appears with numerous other special characters.

Figure 3.27

Figure 3.27 Use the Insert Other Character dialog to insert characters other than those listed in the menu.

The last special character that you can insert is the Non-Breaking Space. The Non-Breaking Space, which is similar to the space bar in most word processing programs, simply inserts a space. By default, browsers ignore white space within HTML code. Since this is the case, a Non-Breaking Space, represented by &nbsp; must be inserted to alert the browser that a space should be recognized.

Unfortunately, Dreamweaver doesn’t map the space bar to automatically insert a Non-Breaking Space. You can, however, modify Dreamweaver Preferences to automatically insert a Non-Breaking Space when you press the space bar. To do this, simply choose Preferences from the Edit menu. From the General category, enable the Allow Multiple Consecutive Spaces option and click OK. To test the functionality, place your cursor anywhere on the page and press the space bar repeatedly. As you can see from Figure 3.28 which shows the Split view, the space is added to the designer, and the &nbsp; special character is added to the code.

Figure 3.28

Figure 3.28 The Non-Breaking Space is added to Code view while a normal white space is added to the design view.

Checking Your Spelling

One of the last things that I like to do before calling a web page finished is to check the spelling. Dreamweaver integrates a spell checking engine that functions similar to those found in popular word processing programs. To use the spell checker built into Dreamweaver simply select the Check Spelling option from the Text menu. The Check Spelling dialog appears. The Check Spelling dialog includes the following functionality:

When you finish performing a spell check, you can click Close to return to the Document window.

Inserting the Time and Date

Dreamweaver includes functionality for inserting a time and date stamp. Available from the Insert menu (or the Common category in the Insert bar), the Date option opens the Insert Date dialog shown in Figure 3.29.

Figure 3.29

Figure 3.29 The Insert Date dialog allows you to insert a time and date stamp.

The Insert Date dialog allows you to choose a day format, represented by the Day format menu, a date format represented by the Date format menu, and a time format represented by the Time format menu. You can also allow Dreamweaver to automatically modify the time and/or date stamp when the document is saved. To insert a time and date stamp in our project, follow these steps:

  1. Insert the text Welcome to Dorknozzle: just above the About Dorknozzle heading. You may need to format the text according to the modifications that you’ve made on the page thus far.

  2. Place your cursor to the right of the text you just added and choose Insert, Date. The Insert Date dialog appears (refer back to Figure 3.29).

  3. Pick a date format from the Date format list and choose OK. The date appears next to the Welcome to Dorknozzle text.

  4. Format the text, applying a font face, size, and color so that the date matches the rest of the page.

Inserting a Horizontal Rule

Another simple design element that you can add to your web pages is the horizontal rule. Available from the Insert, HTML menu, the horizontal rule simply adds a straight horizontal line across the page. To demonstrate the horizontal rule, I’ll shift to our Dorknozzle project and place my cursor just before the Company Events heading. Next, I’ll add the horizontal rule by choosing Insert, HTML, Horizontal Rule. Shown in Figure 3.30, the horizontal rule adds a straight line across the page at a width of 100%.

Figure 3.30

Figure 3.30 A horizontal rule is added to the page at a default width of 100%.

Selecting the horizontal rule changes the Properties Inspector to a horizontal rule-based Properties Inspector. As you can see, the horizontal rule-based Properties Inspector allows you to make the following property modifications:

Go ahead and familiarize yourself with the horizontal rule-based Properties Inspector by experimenting with the various properties. For the project, I’ve modified the properties to resemble Figure 3.31.

Figure 3.31

Figure 3.31 Modify the width, height, and shading of the horizontal rule.

Working with Images

One of the more convoluted topics as it relates to the web is that of images. As you are with font faces, colors, and sizes, you’re limited in the types of images you can use. Even worse, because you’re dealing with the web, bandwidth becomes an issue. For this reason, images must usually remain small resulting in degradation of quality and loss of color variation. While print publishers have a wide array of image choices including EPS, TIF, JPEG, BMP, PCX, PICT, and PNG and are not limited by size, web developers are limited to working with GIF, JPEG, and PNG and even worse must use tools to optimize the images before they’re ready for use in websites. Knowing what types of images to use can also become a factor when designing for the web. As a good rule of thumb, GIF, JPG, and PNG files should be used as follows:

As a rule of thumb, if you’re working with flat, solid images, use GIF. If however, you’re working with images with a lot of color gradation like photographs, use JPEG. For more information on links to resources on image formats, please reference Appendix C, "General Resources."

Inserting Images into a Dreamweaver Document

The traditional Dreamweaver method of inserting an image is to use the browse-to-file method in which you select Insert, Image, browse to your file, and click Open to insert the image in the page. However, Dreamweaver also features a unique drag-and-drop method of inserting images directly from the File list. Before we jump ahead of ourselves, however, let’s review the process of inserting an image by browsing to the image file using the Select Image Source dialog. To use this method, follow these steps:

  1. Start by placing your cursor at the top of the page (or where ever you want the image to appear).

  2. Choose the Image option from the Insert menu or select the Image icon from the Images submenu of the Common category in the Insert bar. Either method opens the Select Image Source dialog.

  3. Browse for the file header.gif located in the Images folder of the defined Dorknozzle site. As you can see in Figure 3.32, the filename, an image preview, and dimensions in terms of size and download time based on file size are displayed in the dialog.

    4. Figure 3.32

    Figure 3.32 Browse to header.gif so that you can see the filename and the image preview.

  4. Aside from simple browsing and previewing, the Select Image Source dialog also includes the ability to browse by file type, to enable and disable image previewing, and to set the file path method (document or site root relative) for the file. For our example, simply click OK. The image is inserted at the top of the page and blends in nicely with our background image.

You might have to remove extra line breaks between the image and the date stamp (place your cursor just before the date stamp and press Backspace on your keyboard) to get your design to look like Figure 3.33.

Figure 3.33

Figure 3.33 The inserted header image blends in nicely with our background image.

A second option for inserting images is the drag-and-drop-from-the-File-list-panel method. By far the simplest method, you can add an image to your page by simply selecting the image from the Site Files panel and dragging it into the web page. Try this method on your own by removing the current headings (About Dorknozzle and Company Events) from the page and dragging the two subheader images (subheader_about.gif and subheader_companyevents.gif) onto the page to replace the headings. The result should resemble Figure 3.34.

Figure 3.34

Figure 3.34 Insert the two subheading images by dragging them from the File list panel onto the web page.

Formatting Images within a Document

Of course, like every other element that can be inserted into your web pages, images allow you to format numerous properties directly from the Properties Inspector. As an example, drag and drop a new image (intranetsymbolism.gif) from the File list directly into the The Company Intranet section of text so that it resembles Figure 3.35.

Immediately you’ll notice that the text doesn’t wrap nicely around the image. Setting the text alignment is just one of the many features you can do from the Properties Inspector. The callouts in Figure 3.36 highlight the complete feature set.

Figure 3.35

Figure 3.35 Drag the intranetsymbolism.gif image onto the page.

Figure 3.36

Figure 3.36 Dreamweaver’s image-based Properties Inspector includes numerous property modifications for an image.

A detailed list of each feature, moving from left to right and basic to advanced is outlined here:

Although we’ll end up using every property modification throughout the book, for now, format the properties of the image such that you’ve added the text Intranet Symbolism in the Alt text box and you’ve selected the Left option from the Align menu. The result resembles Figure 3.37.

Figure 3.37

Figure 3.37 Modify the name, alt text, and alignment of the image.

Image Placeholders

Image placeholders are a handy option to use while you’re developing the content of a web page and don’t necessarily have the finished images. Once you’ve inserted an image placeholder, you can easily adjust width and height dimensions to your liking. When you’re content with the dimensions, you can then select the Create option from the Properties Inspector to launch Fireworks and begin creating the image. To see how image placeholders work, follow these instructions:

  1. Place your cursor just before the The Company Intranet text and choose Insert, Image Objects, Image Placeholder.

  2. The Image Placeholder dialog appears, allowing you to give your place holder a name, a width, height, color, and for accessibility reasons, the option to insert alternate text. I’ll format my dialog similar to Figure 3.38.

    3. Figure 3.38

    Figure 3.38 Format the Image Placeholder dialog.

  3. After you click OK, the temporary image placeholder appears on the page as a solid color image similar to Figure 3.39.

Figure 3.39

Figure 3.39 The image placeholder appears on the page as a solid color image.

Notice that the image placeholder includes the name and dimensions of the image. Selecting the image placeholder reveals the image placeholder-based Properties Inspector, which appears similar to the image-based Properties Inspector except for the fact that you can freely modify the width, height, and color. The image placeholder-based Properties Inspector also features the Create button which, when clicked, opens Macromedia Fireworks (assuming that that program is installed) complete with a new document, sized according to the image placeholder dimensions. We’ll be discussing Dreamweaver and Fireworks integration with more detail in Chapter 19, "Integrating with Fireworks."

Rollover Images

Creating images that change appearance when a user’s cursor rolls over the image, otherwise known as rollover images, have traditionally been a tricky task for web developers. In the past, web developers begged, borrowed, and stole JavaScript code that they could "plug into" their websites to perform this operation. Fortunately for you, Dreamweaver includes an intuitive Insert Rollover Image dialog, available from the Image Objects submenu of the Insert menu.

To insert a rollover image within the page, follow these instructions:

  1. Place your cursor just above the horizontal rule on the page.

  2. Select Insert, Image Objects, Image Rollover. The Insert Rollover Image dialog appears.

  3. Format the Insert Rollover Image dialog similar to Figure 3.40.

    4. Figure 3.40

    Figure 3.40 Format the Insert Rollover Image dialog to reference our images.

  4. As you can see from Figure 3.40, the dialog allows you to insert an image name, two image states (typically these two images will have the same size and text but differ in color), alternate text, and a hyperlink. The dialog also allows you to check functionality that forces the browser to preload both images before the original is loaded. When you’ve formatted the properties, click OK.

The rollover image appears on the page. Now try viewing your page in the browser by choosing the Preview In Browser option from the Document bar or by pressing F12 (see Figure 3.41). In the browser, move your cursor over the new image. Notice that the original image (button_rollover1.gif) changes color to its rollover state (button_rollover2.gif).

Figure 3.41

Figure 3.41 The original image appears just above the horizontal rule.

Working with Hyperlinks

One of the basic premises behind working with the web is that we can create pages that link between each other. This concept, known as hyperlinking, is the foundation behind the HyperText Markup Language (HTML). By simply adding some text to the page and then associating a link with that text, we can allow our users to interact with multiple pages within a website as opposed to being confined to a single page. Of course, like other web features, Dreamweaver has excellent support for creating and working with the following types of links:

Before we jump directly into linking however, it’s important to discuss the concept of paths and targets. Creating a hyperlink is merely the process of assigning a path to the hyperlink reference (href) of text, images, hotspots within imagemaps, or anchors. When you assign a path to one of these elements, you are making a link available from your linked element to the endpoint via the path. When it comes to paths, developers have three to work with:

After you’ve assigned a path to an element in your web page to create a link, you may also want to declare a target. A target exists as a way of instructing the browser how to open the path. For instance, the following four targets can be assigned when working with hyperlinks:

NOTE

It’s important to note that the Target drop-down menu is located in the Properties Inspector, always near the Link text box for text and images.

Linking Text

Arguably the easiest form of hyperlinking, creating text links, can be performed in one of three ways. First, we can simply type the text onto the page, highlight it, and then enter a path into the Link text box within the Property Inspector. Second, we can place our cursor where we want the link to appear on the page and select Hyperlink from the Insert menu. This method generates the text and link at the same time. And third, we can highlight existing text on the page, right-click to access the context menu, and choose the Make Link option. Either of the three methods performs the same task.

Although we will not walk through each method, it’s important to note that each functions similar in nature. After you’ve got one method down, the other two are just as simple. For now, we’ll focus on creating text links by typing text onto the page and generating a link within the Properties Inspector. To do this, follow these steps:

  1. Place your cursor below the main Dorknozzle image but above the date and time stamp. Enter the text Visit our Parent Company.

  2. Highlight the text you just entered.

  3. Type the absolute path http://www.modulemedia.com in the Link text box in the Properties Inspector and press Enter. The link is now created for the highlighted text.

  4. With the link now created, preview your page in the browser by selecting Preview In Browser from the Document bar or choose F12.

  5. Clicking the link replaces the Dorknozzle site in the browser window with the Module Media site.

Of course, you can also change the target of the link to _blank thus forcing the Module Media website to open within its own browser window instead of replacing the Dorknozzle site.

Another method for inserting hyperlinks is to choose the Hyperlink option from the Insert menu. Choosing this option launches the Hyperlink dialog similar to Figure 3.42.

Figure 3.42

Figure 3.42 The Hyperlink dialog allows you to create a hyperlink on the page.

The Hyperlink dialog supports the following properties:

As you can see, this technique provides a more complete method for creating a text-based hyperlink.

Email Links

Aside from linking directly to external websites or to files located in the same folder, you can also use the Link text box in the Properties Inspector to provide a link for users to send email. For instance, the footer of our page has a sentence that reads Questions or Comments?. We could turn this sentence into a link that, when clicked, opens the user’s favorite email program complete with an email address, subject, and so on. To do this, follow these instructions:

  1. Highlight the text as if you were creating a hyperlink.

  2. Enter the text mailto: followed by the email address that you want to appear in the To field of the email program in the Link text box in the Properties Inspector. For instance, I’ll type mailto:zak@modulemedia.com.

  3. If you want a subject to appear when the email program is launched, enter the email address, followed by a ?Subject=, and then the subject text you want to appear. For instance, I’ll type mailto:zak@modulemedia.com?Subject=Question about the site.

    4. TIP

    Although we’ve used ?Subject= as the example here, you can also prefill the CC or BCC field in the new email message. To do this, simply append the mailto: link with the appropriate field name. For instance, if we wanted to add CC information, the formatted link would resemble mailto:zak@modulemedia.com?Subject=Question%20about%20the%20site&CC=ideas@modulemedia.com.

  4. To test the results in the browser, select Preview In Browser from the Document Bar or press F12. When the browser appears, select the text to launch the email program complete with the To and Subject fields pre-populated, similar to Figure 3.43.

Figure 3.43

Figure 3.43 Use the mailto: option in the Link text box to create an email link on your web page.

To accomplish the same task, you could also use the Insert, Email Link command. The Email Link dialog allows you to enter the text to appear on the page and the email address to be associated with the text.

Linking Images

Aside from linking text, you can also create links from images. Selecting an image reveals the image-based Properties Inspector which, like the text-based Properties Inspector features a Link text box and a Target menu. To demonstrate how to create a link from an image, follow these instructions:

  1. Select the rollover image that you inserted earlier, with the link that allows the user to view the public website. The Properties Inspector changes to an image-based Properties Inspector.

  2. Type http://www.dorknozzle.info in the Link text box and press Enter. You may also want to set a target.

  3. Select Preview In Browser from the Document bar to test the results in a browser window.

Imagemaps

The third method of linking is to define an imagemap. An imagemap can be defined as a series of clickable hotspots within an image that, when clicked, navigate the user to the specified page. For our imagemap, we’ll use a different header image called header_withnav.gif. Because this is the case, we’ll need to replace the current header.gif image with our new image. To replace the image, we’ll exploit the point-to-file method for replacing an existing image. With the Site Files panel open on the right side of the screen and the header image selected, drag the point-to-file icon located just to the right of the Src text box in the Properties Inspector and drop it onto the header_withnav.gif image in the File panel as shown in Figure 3.44.

As you can see, the new image contains links created in the image editor to simulate text links. We’ll want to define areas in the image so that the linking experience is as seamless as possible. You can define an imagemap in the new image by following these steps:

  1. Select the image so that the Properties Inspector becomes an image-based Properties Inspector.

  2. The bottom-left corner of the Properties Inspector defines options for working with imagemaps and hotspots including the Map Name text box, the Pointer Hotspot tool, the Rectangular Hotspot tool, the Oval Hotspot tool, and the Polygon Hotspot tool. Select the Rectangular Hotspot tool.

  3. The pointer now becomes a cross hair which allows you to draw a square hotspot around an image. Draw a square hotspot around the Home link within the new header image similar to Figure 3.45.

  4. As you’ve probably noticed, the Properties Inspector now becomes a hotspot-based Properties Inspector, which allows you to define the map name, choose a link, a target, and add some Alternate text. For our example, use the point-to-file icon to point to the index.htm file in the Files panel.

Figure 3.44

Figure 3.44 Use the point-to-file icon to select from the File panel a replacement image to use.

Figure 3.45

Figure 3.45 Draw a rectangular hotspot around the Home link in the header image.

If you feel you need practice creating hotspots, try and create new hotspot to fictitious links for the other links in the header image. When you’ve finished, preview the result in the browser by selecting the Preview In Browser option from the Document bar or by pressing F12. When the page opens in the browser, try rolling over the Home link. Only the area around the Home link should be clickable.

Named Anchors

The final type of linking element you can add to your web pages are anchors. Adding named anchors on a page allows you to create hyperlinks that link to specific areas within a page. Although you can also use named anchors to link a user to a specific spot on another page, named anchors are generally reserved for pages that contain an excessive amount of content. In this situation, a small subnavigation menu can be created that links the user to specific spots (the anchors) on the page. Subsequently, you can add a "Back To Top" link at the point on the page where the user was linked to; when the "Back to Top" link is clicked, the user returns back to the top of the page. To work with named anchors, follow these steps:

  1. Open the file companydirectory.htm.

  2. The company directory page contains ten management bios for employees at our fictitious company. Near the top of the page is a menu bar that contains a horizontal list of all the employees listed on the page. Named anchors are the perfect choice in this case for linking each name in the menu bar to its respective employee within the list.

  3. To create the named anchor, place your cursor next to the first name in the list (Ada) and select Named Anchor from the Insert menu. The Named Anchor dialog appears, similar to Figure 3.46.

    4. Figure 3.46

    Figure 3.46 The Named Anchor dialog allows you to create a named anchor within the page.

  4. In the dialog, enter the name of the first employee, Ada, and click OK.

  5. The yellow named anchor icon appears next to Ada’s name. Because this named anchor icon is considered an invisible element, you might not be able to see it. To enable it, make sure that the Invisible Elements option is checked in the Visual Aids submenu in the Document bar.

  6. Create a hyperlink to the named anchor for Ada’s name in the horizontal menu. Begin by highlighting Ada’s name in the menu bar.

  7. Place your cursor in the Link text box in the Properties Inspector and type #Ada. The # symbol represents an anchor name while Ada represents the name itself. When finished, the design should resemble Figure 3.47.

Figure 3.47

Figure 3.47 Create a hyperlink from the horizontal menu to the new named anchor.

Preview your work in the browser by selecting the Preview In Browser option from the Document bar or by pressing F12. When the page opens in the browser, select Ada’s name from the horizontal menu. The browser should advance the page down to Ada’s name.

Our next step is to add the "Back to Top" functionality. You can add this feature by following these steps:

  1. On the company directory page, add the text (Back to Top) next to Ada’s name above her bio.

  2. Highlight the (Back To Top) text and enter the # symbol in the Link text box in the Properties Inspector. The result should resemble Figure 3.48.

    3. TIP

    Adding the # symbol to the Link text box is by far the simplest way of creating a Back to Top link but is not considered a best practice. A more efficient way of achieving this result is to create another named anchor at the top of the page (possibly called top) and point the Back to Top link to that anchor.

  3. Preview your page in the browser by selecting the Preview In Browser option from the Document bar. This time, when the page links down to Ada’s name, try choosing the Back To Top link. The page should move back to the top of the page. For practice, repeat the process for the rest of the links in the horizontal menu bar.

It’s important to note that you can also use the point-to-file icon next to the Link text box to point to a named anchor.

Figure 3.48

Figure 3.48 Add a Back To Top link to your page.

Creating a Navigation Bar

You've already seen how to create a rollover image using the Rollover Image dialog located in the Image Objects subcategory of the Insert menu. Aside from simply creating an image that, when rolled over, changes to a new version of the image, the Image Object subcategory also lists the Navigation Bar option. This feature, like the Rollover Image option, allows you to create a series of rollover images that mocks the look and functionality of a typical website navigation bar. To use the Navigation Bar option from the Image Objects subcategory, assume for a moment that the header image of our website didn't have the imagemap but instead we were relying on the functionality in the Navigation Bar option to build our navigation menu. To build the navigation bar, follow these steps:

  1. Create a new blank HTML page by choosing the New option from the File menu. Choose the HTML option from the Basic Page category and click Create.

  2. Choose Insert, Image Objects, Navigation Bar. The Insert Navigation Bar dialog appears. The Insert Navigation dialog exposes the following functionality:

  3. Enter a name for the first rollover image in the Element Name text box. For the first image, you may want to enter the text Home.

  4. Located inside the Navigation Menu folder in the Images folder, you'll find a series of images labeled with the name of the image followed by up, over, and down. Browse to those files using the appropriate text box's Browse button. For our example, you should use home_up.gif, home_over.gif, and home_down.gif. Leave the Over While Down Image text box blank.

  5. Enter the alternate text Home in the Alternate text box.

  6. Enter or browse to index.htm in the When Clicked, Go to URL text box.

  7. Disable the Use Tables check box.

When you've finished, the dialog should resemble Figure 3.49.

Unlike the Rollover Image dialog (which allows you to create only one rollover image), the Navigation Bar dialog allows you to create multiple rollover images by simply clicking the + icon. When you finish entering the properties for the Home image, click the + icon to set the Home navigation bar element and to clear the values of the text boxes so that you can enter new values for a second navigation bar element. Repeat this process until you’ve added all the navigation elements. When you finish, preview the result in the browser by choosing the Preview In Browser option from the Document bar or by pressing F12. In the browser, the navigation bar should resemble Figure 3.50.

Figure 3.49

Figure 3.49 Enter the appropriate values to create a fully functioning navigation bar.

Figure 3.50

Figure 3.50 The navigation bar within the browser.

Working with a Web Page in Code View

So far you’ve learned how to build web pages in Design view. The Design view, supported by the design window, Properties Inspector, Insert bar, and supporting panels make Dreamweaver an attractive editor for visual developers hoping to create quick web pages without having to know markup or the sometimes confusing coding languages such as CSS and JavaScript. Although working in Design view may certainly be a positive for most developers, it’s important to highlight some of the supported coding features that truly make Dreamweaver one of a kind. The last part of this chapter hopes to unleash the unique coding aspects that some people come to expect from the industry-leading web-page-development environment.

Code Hints

We’ve looked at some of the visual preferences (such as line numbers, word wrap, and syntax coloring) in Code view, we’ve yet to outline and detail some of the powerful features that can aid you in development regardless of view. Arguably one of the most useful features in Code view is that of code hints. Those who made a living developing with HomeSite in the late 1990s certainly remember this feature because it was integral part of the HomeSite development environment and a huge reason HomeSite’s popularity was unmatched. Thanks to the Macromedia/Allaire merger, Dreamweaver gained from the popularity that code hints had in HomeSite. Using code hints in the Code view environment is easy; understanding how it works is to understand the underlying structure behind HTML/XHTML. HTML/XHTML is an authoring language, not a programming language. The developer is entirely responsible for creating the structure that she wants her users to see using a markup language like HTML/XHTML. Organized using a well-formed structure of tags in conjunction with attributes, the browser parses the tags and presents to the user the structure that the developer intended. For future reference, Figure 3.51 outlines the structure of a typical HTML/XHTML tag.

Figure 3.51

Figure 3.51 HTML tags contain attributes, attribute values, and generally wrap literal text or in some cases, other HTML elements such as images.

The more intricate the structure and inclusion of tags and attributes, the more detailed the design can look within the browser. As an HTML/XHTML developer, you’ll quickly realize that there are hundreds of HTML/XHTML tags, with each tag having dozens of attribute combinations. As a developer, it’s extremely difficult to remember them all. Fortunately, Dreamweaver’s code hints automate what we may want to add. Accessing code hints is as simple as switching to Code view in a new HTML page, placing your cursor in the <body> tag, and typing. For instance, if I type the < symbol (this symbol represents the beginning of an HTML tag), the code hints menu appears complete with every supported HTML tag (see Figure 3.52).

I can use the keyboard up and down arrow keys to cycle through the tags in the code hints menu. When I’ve found the tag I want to use, I press Enter to add it to the code. Pressing the spacebar opens the code hints menu again, but this time only the attributes for the selected tag appear (see Figure 3.53). (You could also just continue typing, and Dreamweaver auto searches and updates the code hints menu with the most appropriate tag based the letters you have entered.) When your tag is highlighted, press Enter.

Figure 3.52

Figure 3.52 The code hints menu appears complete with all possible HTML tags.

Figure 3.53

Figure 3.53 All attributes for a selected tag appear in the code hints menu.

Again, pressing Enter adds the selected attribute. Depending on the attribute you add, the code hints becomes more detailed. In my case, I choose the href attribute (creates the reference for the hyperlink) of the <a> (tag used for creating links) tag. The Browse code hint then appeared, allowing me to choose a file. After I add my file, I can use the right-arrow key to move to the next attribute and press the spacebar to repeat the process. When I finish formatting the tag, I need only add the > symbol to close out the opening tag. Finally, I’ll add the < symbol to begin the closing tag followed by the / symbol, in which case the closing tag is added automatically for me by Dreamweaver.

As I mentioned earlier, the more intricate the structure of your HTML/XHTML, the better your designs will look...the possibilities are limited only by your needs.

The Code View Toolbar

For developers used to working with code in HomeSite, the Code View toolbar docked to the left side of the coding environment and shown in Figure 3.54should look relatively familiar.

Figure 3.54

Figure 3.54 The Code View toolbar provides quick access to commonly used commands for the Code view user.

The Code View toolbar provides quick access to commonly used commands for the Code view user, specifically:

Of course, you can also show and hide the Code View toolbar by right-clicking the toolbar and checking/unchecking the Coding option from the context menu.

Code Collapse

Code collapsing provides the developer with the ability to highlight a segment of code and collapse it so that it’s temporarily hidden from view. The obvious benefit to this is increased screen real-estate. To use the code collapse feature, follow these steps:

  1. With the companydirectory.htm page open, switch to Code view if it’s not already selected.

  2. Highlight a section of code. Notice the line segments that appear in the line numbers column similar to Figure 3.56.

    3. Figure 3.56

    Figure 3.56 Line segments appear in the line numbers column, indicating the segment of code that can be collapsed.

  3. Choose one of the segment icons to collapse the code similar to Figure 3.57. Alternatively, you can choose the Collapse Selection button from the Code View toolbar. Notice the small plus (+) icon that appears next to the collapsed code.

  4. You can expand the code by choosing the plus (+) icon that appears next to the collapsed code. Alternatively, choose the Expand All button in the Code View toolbar to expand all collapsed code.

Figure 3.57

Figure 3.57 The code is collapsed and temporarily hidden from view.

The Tag Inspector

After you’ve created the tag structure, you can use the Tag Inspector to format all attributes of a tag through a visual panel. Part of the Tag panel group and available by choosing Tag Inspector from the Window menu, the Tag Inspector visually categorizes and lists all attributes supported by a tag. As you can see in Figure 3.58, the Tag Inspector displays all attributes and attribute values for the selected tag.

Figure 3.58

Figure 3.58 The Tag Inspector visually displays attributes and attribute values for a selected tag.

Depending on the attribute value you select, the Tag Inspector either allows you to manually type a value or allows you to select from a list of values through a menu similar to Figure 3.59.

Figure 3.59

Figure 3.59 Enter attribute values or select from a list of attribute values in some cases.

Although the Tag Inspector works in both Code and Design views, its inclusion and subsequent benefits are immediately obvious.

Using the Tag Chooser

The next major addition to the development interface is the Tag Chooser. The Tag Chooser, available by selecting the Tag option from the Insert menu, is a collection of HTML, CFML, ASP.NET, JSP, JRun, ASP, PHP, WML, and XSLT tags. To use this intuitive window, place your cursor in the <body> tag and choose Tag from the Insert menu. The Tag Chooser dialog appears similar to Figure 3.60.

Figure 3.60

Figure 3.60 The Tag Chooser contains a complete collection of HTML, CFML, ASP.NET, JSP, JRun, ASP, PHP, and WML tags.

Choose the tag collection you’d like to explore; the tags are further organized within structural categories. For instance, the <a> tag is organized in the General option of the Page Elements category. Choosing the <a> tag from the elements pane also reveals the HTML reference for the <a> tag within the More Info pane similar to Figure 3.61.

Figure 3.61

Figure 3.61 HTML tags are organized in categories. Selecting a tag opens the reference for the tag in the More Info pane.

To insert a selected tag, simply choose the tag and click Insert to launch the Tag Editor dialog (see Figure 3.62).

Figure 3.62

Figure 3.62 The Tag Editor dialog allows you to format properties for a specific tag.

After you’ve formatted the attributes of the tag, click OK to insert the tag into the coding environment. You can either continue adding tags using the Tag Chooser or click Close to return to the coding environment.

Working with Snippets

The final development aid you can use in the Code view is snippets. Snippets are a clever way to save small blocks of prewritten code so that they are always available to you (and other developers) for use. Available from the Code panel group, the Snippets panel is structured as a series of folders into which snippets are organized. Each folder covers a particular technology or area of functionality. As you can see from Figure 3.63, Dreamweaver includes numerous code snippets you can use.

Figure 3.63

Figure 3.63 Code snippets are organized into folders specific to the respective technology. Dreamweaver includes prebuilt snippets you can use.

Notice that the Snippets panel is organized into two halves. The top half includes a preview of the code snippet selected from the categorized list of snippets in the bottom half. HTML snippets are usually shown in Design view (showing what the HTML looks like in the browser), whereas JavaScript and other code snippets are shown in Code view (so that you can see the actual code). Inserting a snippet is merely a matter of selecting the appropriate snippet and either dragging it into the code environment or clicking the Insert button located in the bottom left of the Snippets panel.

Creating your own snippet is just as easy but slightly more involved. To create your own snippet, follow these steps:

  1. Create a new folder for your snippet by right-clicking in the Snippets window and choosing New Folder. Give the snippet folder a descriptive name, remembering that other developers might want to use these snippets, too. If the folder is created in the "wrong" place, you can drag it to the level you want. I’ll call my new folder Table Row Rollover.

  2. Right-click the folder and choose New Snippet from the context menu. If you have already written the snippet code in the page, highlight the code you want to use as the snippet, right-click the highlighted code, and choose Create New Snippet from the context menu.

  3. You are presented with the Snippet dialog. Fill in the snippet name and description. If you have highlighted existing code, the code box is already filled in. I’ll add the following HTML code to the Insert Before text box:

    4. <table>
<tr onmouseover="this.style.backgroundColor=’#cccccc’;" 
onmouseout="this.style.backgroundColor=’#ffffff’;">
<td align="center" width="125"><a href="#">Home</a></td>
</tr>
<tr onmouseover="this.style.backgroundColor=’#cccccc’;" 
onmouseout="this.style.backgroundColor=’#ffffff’;">
<td align="center" width="125"><a href="#">HelpDesk</a></td>
</tr>
<tr onmouseover="this.style.backgroundColor=’#cccccc’;" 
onmouseout="this.style.backgroundColor=’#ffffff’;">
<td align="center" width="125"><a href="#">Company Directory</a></td>
</tr>
<tr onmouseover="this.style.backgroundColor=’#cccccc’;" 
onmouseout="this.style.backgroundColor=’#ffffff’;">
<td align="center" width="125"><a href="#">Employee Store</a></td>
</tr>
<tr onmouseover="this.style.backgroundColor=’#cccccc’;" 
onmouseout="this.style.backgroundColor=’#ffffff’;">
<td align="center" width="125"><a href="#">Admin</a></td>
</tr>
</table>

  4. This code effectively creates a new table, complete with rows; when the user’s mouse rolls over the rows, the background color changes to a gray color.

  5. If you want the code to flow around a selected object, such as an image or table cell, select the Wrap Selection option, specifying which part of the code goes before the object and which after the object. If the code is a standalone block, choose the Insert Block option. I’ll choose Insert Block. The completed Snippet dialog should resemble Figure 3.64.

    6. Figure 3.64

    Figure 3.64 Create the new snippet in the Snippet dialog.

  6. When you finish editing the Snippet dialog, click OK. The new snippet appears in its folder and the preview pane will display the HTML.

To use the snippet, simply drag the snippet into the code environment and choose Preview In Browser (or press F12) to test the results.

Editing, moving, and deleting snippets are also a snap. To edit a snippet, right-click the snippet and choose Edit from the context menu. The Snippet dialog appears, and you can edit the code or change the description. To move snippets into other folders, drag them to the folder you want. To delete a snippet or its respective folder, right-click the snippet (or folder) and press the Delete key.

Summary

As you have seen, building web pages in Dreamweaver is extremely intuitive and quick to pick up. Flanked by key panels and inspectors, building web pages in Dreamweaver is merely a matter of dragging and dropping objects onto the development environment and formatting attributes using the Properties Inspector, the Tag Inspector, and so on. This introductory chapter opened a whole new world to some important features within Dreamweaver and should serve as a foundation for future development. In the next few chapters, we’ll step away from development for a bit and discuss arguably one of the most important topics as it relates to Dreamweaver, site management.

© 2024 Pearson Education, Informit. All rights reserved.

800 East 96th Street, Indianapolis, Indiana 46240