Home > Articles

Building a Web Page

This chapter is from the book

This chapter is from the book

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.

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:

  • Appearance: This category contains options for adding a page background, changing the background color, modifying text and link colors, and setting margin widths and heights.

  • Title/Encoding: Choose this category to change the title of your document as well as setting the default encoding type.

  • Tracing Image: A rather unique feature to Dreamweaver, a tracing image is more of a development aid than anything else. Setting a tracing image allows a developer to trace around a central prototype using the layout mode.

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:

  • Background image: Sets a background image for the page.

  • Background: Choosing this little square icon pops up the color palette allowing you to select from one of the 216 web safe colors. Try selecting this option, choose a color, and then click the Apply button. You can see that the Document window’s entire background changes to the color you selected. You can change this color back to the default of white by choosing the white square with the red line crossed through.

  • Text: Choose this option to change the default text color of the page. Black is the default.

  • Links: Choose this option to change the default link color with the page. Blue is the default.

  • Visited links: Choose this option to change the visited links color of the page. A visited link is the color that appears when a user clicks your link and then revisits the page. Purple is the default.

  • Active links: The active link color is the color that appears just as a user’s mouse clicks a hyperlink. Black is the default.

  • Left margin: Set a value to change the size of the left margin in the Document window. All browsers, except for Netscape 4, use this property.

  • Top margin: Set a value to change the size of the top margin in the Document window. All browsers, except for Netscape 4, use this property.

  • Margin width: Set a value to change the size of the left margin in the Document window. The margin width feature is specific to Netscape 4 only.

  • Margin height: Set a value to change the size of the top margin in the Document window. The margin height feature is specific to Netscape 4 only.

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.


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:

  • Paste: Pastes the copied text into the page with minimal formatting. Formatting is limited to paragraph breaks.

  • Paste Special: When this option is selected, the Paste Special dialog appears. From this dialog you have the option of pasting the raw, unformatted text only (shows as a giant paragraph with no formatting or line breaks), text with complete structure (includes paragraphs, lists, tables, and so on), text with structure and basic formatting (includes bold, italic, and so on), and text with structure plus full formatting (includes bold, italic, styles, and more). From this dialog you also have the option of deciding to retain any line breaks that are added to the text by the source text editor. If you’re copying directly from Microsoft Word, you have the option of allowing Dreamweaver to automatically clean up Word’s paragraph spacing.

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.

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.

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:

  • Color Cubes: Displays a list of web-safe colors organized within cubes starting with Black cubes on the left, followed by grayscale cubes, RGB cubes, CMYK cubes, and so on.

  • Color Preview: Displays a larger preview of the color when your mouse rolls over a color cube.

  • Hexadecimal Value: Displays the hexidecimal value of the color when your mouse rolls over the color cube. Explaining the concept of hexidecimal values can be a lengthy topic. For this reason, additional resources are provided in Appendix C, "General Resources."

  • Default Color: Selecting this option returns the selection back to its default color. Because this option can also useful for cancelling out of the Color palette, pressing the Esc key on your keyboard is a much better option.

  • System Color Palette: If you’re working in an intranet environment where you know everyone in your orgranization uses the same computer configuration along with the same monitor, you can think about using a wider range of colors for your site. If this is the case, you may want to choose this option to select from the system color palette. The system color palette is a predefined color palette based on the operating system you target.

  • Options Menu: Click this arrow icon for additonal options including displaying Color Cubes (default), Continuous Tone, Windows OS, MAC OS, and Grayscale. Selecting the last option within this list, Snap to Web Safe, gaurantees that a web-safe color is always selected even if you sample a non web-safe color from the development environment.

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.

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.

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   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   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:

  • Word not found in dictionary: As Dreamweaver scans your document, words that are not found within Dreamweaver’s dictionary are listed here one at a time.

  • Suggestions and Change to: Once a word has been located that is not found within Dreamweaver’s dictionary, a list of suggestions are made. You can select a word from this suggestion list and click OK to change to the word highlighted in the Change To text box.

  • Add to Personal: You can add a word to your personal dictionary so that Dreamweaver doesn’t detect it as a mispelled word the next time you run the spell checker.

  • Ignore: Ignores and skips over the selected word.

  • Change: Changes the word in the page to the suggested word.

  • Ignore All: Ignores all instances of a selected word.

  • Change All: Changes all instances of a selected word.

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

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.


Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.


If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.


This site is not directed to children under the age of 13.


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020