Adobe Dreamweaver CS3 Unleashed- P3 potx

As you can see, the options in the drop-down menu don't resemble point or pixel sizes; instead, they refer to HTML sizes. Although the default size of the page is set as an absolute value of 3, you have the option of selecting 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, otherwise known as the base font. 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 within a new blank page. As you can see from my page (FontSizes.htm contained within the Assets folder), shown in Figure 2.21, the default font size (base font) 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 2.21. Use relative font sizes to scale up or down from the base font size. [View full size image] Sounds confusing, right? I wouldn't worry too much about working with fonts and sizes. Development gets easier and much more flexible after 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 2.22, the text is changed. Figure 2.22. Change the size of text within our fictitious company's web page to an absolute value of 2. [View full size image] You may need to add additional line breaks before your text to prevent the text from overlapping the background image. Text Colors Yet another frustrating topic in web development is that of choosing the right colors for your website. Unlike in print publishing programs or word processing programs, where you can choose from a color palette containing millions of colors, browsers choose from a web-safe color palette of 216 colors that are common to all computers. This guarantees that the colors we choose will be accurately viewed on browsers, independent of platform or operating system. Tip Web safe refers to the spectrum of 216 colors that are guaranteed to work on a 256-color (8-bit) computer. When colors were introduced to the Web in the early to mid 1990s, the majority of developers were designing their web pages on antiquated systems that, at best, had an 8-bit video card installed. Because the hardware couldn't support a range beyond 256 colors, a web-safe spectrum of 216 colors was introduced to make web page colors as compatible across the board as possible. Today, these systems are rare, and the need to rely on the web-safe color spectrum has diminished greatly. Realistically, the only time you'd need to rely on the 216 web-safe colors is when development is targeted to small form factor devices such as a PDA or a cell phone. Dreamweaver organizes web-safe colors within the Text Color palette available just to the right of the Size menu. Selecting this chip opens the Color palette, also shown in Figure 2.23, and turns the pointer into an eyedropper, allowing you to not only sample colors from within Dreamweaver's interface but also from any other application or image that is visible on your screen. Figure 2.23. The Color palette opens, allowing you to sample from a list of colors directly from Dreamweaver's interface—or anything else on your screen. [View full size image] A complete list of features supported by Dreamweaver's Color palette are outlined next: 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 hexadecimal value of the color when your mouse rolls over the color cube. Explaining the concept of hexadecimal values can be a lengthy topic. For this reason, additional information can be found at the following page: en.wikipedia.org/wiki/Hexadecimal_color. Default Color— Choosing this option returns the selection back to its default color. System Color Palette— If you have a good idea that the majortity of your users will be browsing to your site using better-than-average video cards, 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 your system's color palette. The system color palette is a predefined color palette that allows you to choose from millions of colors, rather than only 256. Options Menu— Click this arrow icon for additonal options, including displaying Color Cubes (default), Continuous Tone, Windows OS, MAC OS, and Grayscale. Esc— Press the Esc key on your keyboard to cancel out of the color palette. To demonstrate the use of color, let's highlight the text on the page and modify the color so that it shows as blue. To do this, highlight the text and click the color chip; when the pointer turns into an eyedropper, sample the dark blue color within the header image. The Color palette will close and your text will turn blue. Furthermore, after you've selected the color, the hexadecimal value will appear in the text box just to the right of the color chip within the Property inspector (#2477AA). Text Styles Just above the Text Color chip within the Property inspector lie two options for modifying the weight (Bold(B)) and style (Italic(I)) of text in your pages. Bold and italic are two options that you can use in your web pages, but you're certainly not limited only to these. In fact, you can expand the Styles menu by choosing Text, Styles to see a complete list of options. Most of the text styles within 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 within CSS. Bold and italic however, are still common options. To demonstrate how italic can be used, for instance, create a few line breaks for each of the two client testimonials. Next, select each testimonial and then click the Italic (I) button within the Property inspector. The text will become italicized similar to Figure 2.24. Figure 2.24. Client testimonials become italicized when you highlight them and then click the Italic button within the Property inspector. [View full size image] Text Alignment and Indentations Similar to a word processor, Dreamweaver includes the capability to align your text. Four alignment options are available, including left align, center align, right align, and justify. These options are represented by the four buttons just to the right of the Italic button within the Property inspector. To see the alignment features in action, open the text file titled footer.txt located in the Assets folder, select all the text, copy it, and paste it somewhere near the bottom of the web page within Dreamweaver. You may have to include more paragraph breaks to force the cursor near the bottom of the page. You may want to enhance this small footer by implementing features that you've already learned, such as changing the font face, font size, and color. When you're done, center the text using the Align Center button within the Property inspector, also shown in Figure 2.25. Figure 2.25. Format the text, and then center align it on the page. [View full size image] You can also indent your text by using the Text Indent and Text Outdent buttons located just below the Right Align and Justify icons within the Property inspector. For instance, if I wanted to indent the text that appears below the headings, I would select the text and choose Text Indent. The result will appear similar to Figure 2.26. Figure 2.26. Choose the Text Indent option to indent your text. [View full size image] I'll choose the Text Outdent option next to return my page back to the way it was when I started. Working with Lists You can create lists easily within Dreamweaver. Although Dreamweaver supports three types of lists (Ordered, Unordered, and Definition), arguably the more popular—ordered and unordered lists—are available directly from the Property inspector by selecting the icons just below the Align Left and Align Center icons. Often referred to as bulleted lists, unordered lists, by default, create a bullet circle to the left of the selected item, whereas ordered lists apply a number instead of a bullet to the left of the item and follow in sequential order. Creating a list in Dreamweaver is a simple process that involves nothing more than highlighting the text items to include in the list and choosing the appropriate option from the Property 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, creating a new bullet or incrementing number as you go. To use a list, for example, follow these instructions: We'll format our list of solutions as a bulleted list. I'm sure you've noticed by now, these solutions are located just below the heading that reads Our Solutions. To format the list, begin by placing your cursor just to the right of the text that reads vProspect 2.0 and press Shift+Enter (Shift+Return on a Mac) to create a line break. 1. Now place your cursor just before the text that reads vConvert 2.0 and click Enter to create a new paragraph break. 2. Repeat steps 1 and 2 for the rest of the solutions.3. 4. 3. Now highlight all three solutions and click the Unordered List button within the Property inspector. The three Vecta Corp solutions will now be bulleted similar to Figure 2.27. 4. Figure 2.27. Create a bulleted list for the company solutions. [View full size image] To see what the ordered list looks like, highlight the three solutions again and click the Ordered List icon within the Property inspector. As you'll see, the bullets become numbers. You're not limited to plain bullets or numbers when working with lists. For instance, you can format your lists so that the bullets show as squares, numbers show as letters or Roman numerals, or even format a specific list item rather than the list as a whole. This can be accomplished by placing your cursor on a list item and clicking the List Item button within the Property inspector. Choosing this option opens the List Properties dialog box shown in Figure 2.28. Figure 2.28. You can modify list item properties by opening the List Properties dialog. As you can see from Figure 2.28, the dialog is separated into two parts. The top part enables 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. You'll notice that all the bullets for the list items are changed to squares. The second half of the dialog (List Item) enables you to modify the properties of an individual list item rather than the list as a whole. 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 within 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 enables you to create a list that resembles a dictionary definition—where a definition appears indented below the term. To create your own Definition list, follow these steps: 1. Create a new blank page for testing purposes. 2. Copy the welcome 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. As you can see from Figure 2.29, the "definition" is indented and the list looks very similar to a dictionary definition. Figure 2.29. The definition list creates a term with an indented definition. [View full size image] 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 using special code because a keyboard key doesn't exist for it. For instance, left and right quotes, dashes, the Euro symbol, the English Pound symbol, the Japanese Yen symbol, 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 2.30). Figure 2.30. The text category of the Insert bar contains a submenu of special characters. [View full size image] [...]... 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 in to Dreamweaver, select the Check Spelling option from the Text menu or press Shift+F7 The Check Spelling dialog box appears The Check Spelling dialog includes the following functionality: Word not found in dictionary— As Dreamweaver scans... a lot of color gradation, such as photographs, use JPEG 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 Image from the Insert menu, browse to your file, and click Open to insert the image within the page However, Dreamweaver also features a drag-and-drop method of inserting images directly from... 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— When the spell checker has located a word that is not in Dreamweaver' s dictionary, it makes a list of suggestions You can select a word from this suggestion list and click Change to replace... inserted to alert the browser that a space should be recognized Unfortunately, Dreamweaver doesn't map the spacebar to automatically insert a Non-Breaking Space Instead, you have to press Ctrl+Shift+Space/ +Shift+Space to insert this special character If you want to make inserting a Non-Breaking Space easier, you can modify Dreamweaver Preferences to automatically insert a Non-Breaking Space when you... Appendix A, "Accessibility," for more about alternate text Edit— Dreamweaver incorporates minimal editing functionality within this group of icons For instance, you can open the selected image directly in Photoshop or Fireworks for editing or optimizing You can also crop, sharpen, or change the brightness or contrast of the image directly in Dreamweaver This integration is covered with more detail in Chapter... width, height, and color The Image Placeholder Property inspector also features the Create button, which, when clicked, opens Adobe Fireworks (assuming it is installed), complete with a new document that is sized according to the Image Placeholder dimensions We'll be discussing Dreamweaver and Fireworks integration with more detail in Chapter 18 Again, the idea behind the Image Placeholder is that it... index.htm Note By default, Dreamweaver works with Document Relative paths If you want to work with Site Root Relative paths, you'll have to configure it when you define a site This is covered with more detail in the next chapter Absolute— You can use Absolute paths when referencing files located in paths that don't change For instance, the domain name www.vectacorp.com or www.dreamweaverunleashed.com... Network Graphics (PNG) was introduced as a replacement to GIF in the mid 1990s and was supported by the W3C as a proposed web standard in late 1996 As an example of the flexibility of the PNG format, Adobe Fireworks adopted this format as its native file type PNG holds a number of advantages over GIF files on the Web First, color features are greater in that PNG supports photorealistic color depths,...Tip Special characters are also available from the Insert, HTML, Special Characters submenu You're also not limited to the special characters outlined within this list For instance, Dreamweaver includes a character map that provides numerous other special characters that you can insert into your page To open the character map, choose the Other Characters option from the Special Characters... Provides a method for uniquely identifying the selected image W and H— Shows the width and height of the image, as defined by the binary makeup of the image You may change these values, in which case Dreamweaver will stretch the dimensions of the image (values will be shown in boldface) However, I don't recommend stretching an image, because it degrades the quality of the image substantially Instead, . from a list of colors directly from Dreamweaver& apos;s interface—or anything else on your screen. [View full size image] A complete list of features supported by Dreamweaver& apos;s Color palette. the way it was when I started. Working with Lists You can create lists easily within Dreamweaver. Although Dreamweaver supports three types of lists (Ordered, Unordered, and Definition), arguably. 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 in to Dreamweaver, select