- Creating a New Document
- Working with a New Document in Design View
- Inserting the Time and Date
- Inserting a Horizontal Rule
- Working with Images
- Working with Hyperlinks
- Working with a Web Page in Code View
- Summary
This chapter is from the book
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 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 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.
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 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 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 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 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 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 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 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 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 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:
Create a new blank HTML document by selecting New from the File menu, choose the HTML page option, and click Create.
Open the text file titled preformatted.txt, choose Edit, Select All, and then choose Edit, Copy.
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.
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.
Immediately choose Paste. This time, the text’s formatting is preserved as you can see from Figure 3.15.
)
Figure 3.14 Pasting text that was formatted in a different editor results in text that is broken up.
)
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 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 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 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 Change the size of text within our fictitious company’s web page to an absolute value of 2.
)
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 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 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:
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.
Choose the unordered list option from the Properties Inspector to create a new bullet.
After the bullet appears on the page, begin typing a company event. To create a new bullet, simply press Enter (Return on a Mac).
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 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 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:
Create a new blank page for testing purposes.
Copy the About Dorknozzle text from the previous page and paste it into the new testing page.
Highlight the text and choose Definition List from the List submenu of the Text menu.
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 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 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 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 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.