Adobe Dreamweaver CS3 Unleashed- P3 potx

[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, sta

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 ofselecting from a list of absolute or relative sizes for your page The absolute size is a straight number from 1through 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 anabsolute size 4 To demonstrate this, try experimenting with the various sizes within a new blank page Asyou can see from my page (FontSizes.htm contained within the Assets folder), shown in Figure 2.21, thedefault font size (base font) is 3 However, choosing the relative value of +1 displays the equivalent of theabsolute value 4 The same concept holds true for the relative value –1 In this case –1 displays similar tothe 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 getseasier and much more flexible after we move into Cascading Style Sheets For now, let's modify ourexample by highlighting the paragraphs of text (not the headings) and choosing an absolute value of 2 Asyou 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 thebackground 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 palettecontaining 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 videocard 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 aspossible Today, these systems are rare, and the need to rely on the web-safe color spectrum hasdiminished greatly Realistically, the only time you'd need to rely on the 216 web-safe colors is whendevelopment 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 Sizemenu Selecting this chip opens the Color palette, also shown in Figure 2.23, and turns the pointer into aneyedropper, allowing you to not only sample colors from within Dreamweaver's interface but also from anyother 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 foryour site If this is the case, you may want to choose this option to select from your system's colorpalette 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 asblue 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 theright 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 yourweb pages, but you're certainly not limited only to these In fact, you can expand the Styles menu bychoosing 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 demonstratehow 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 optionsare available, including left align, center align, right align, and justify These options are represented by thefour 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 thissmall 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 theRight Align and Justify icons within the Property inspector For instance, if I wanted to indent the text thatappears below the headings, I would select the text and choose Text Indent The result will appear similar toFigure 2.26

Figure 2.26 Choose the Text Indent option to indent your text.

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 AlignCenter 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 sequentialorder

Creating a list in Dreamweaver is a simple process that involves nothing more than highlighting the textitems 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 arelocated just below the heading that reads Our Solutions To format the list, begin by placing yourcursor just to the right of the text that reads vProspect 2.0 and press Shift+Enter (Shift+Return on aMac) to create a line break

Now highlight all three solutions and click the Unordered List button within the Property inspector Thethree 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 iconwithin 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 yourlists so that the bullets show as squares, numbers show as letters or Roman numerals, or even format aspecific list item rather than the list as a whole This can be accomplished by placing your cursor on a listitem and clicking the List Item button within the Property inspector Choosing this option opens the ListProperties 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 modifythe properties of the list as a whole For instance, with Bulleted List selected in the List type menu, chooseSquare from the Style menu and click OK You'll notice that all the bullets for the list items are changed tosquares The second half of the dialog (List Item) enables you to modify the properties of an individual listitem rather than the list as a whole You can choose to work with Roman numerals or letters by selectingNumbered List from the List type menu and choosing the appropriate option from the Style menu Afteryou've done this, you can even create a starting number by entering that value within the Start Count textbox.

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 adefinition 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 dictionarydefinition

Figure 2.29 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 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 JapaneseYen symbol, copyright symbols, registration marks, and trademarks are all considered special charactersand 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]

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 Toopen the character map, choose the Other Characters option from the Special Characters submenu As youcan see from Figure 2.31, the Insert Other Character dialog appears with numerous other special characters

Figure 2.31 Use the Insert Other Character dialog to insert characters other than those listed

within the submenu.

The last special character that you can insert is the Non-Breaking Space The Non-Breaking Space, which issimilar to pressing 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 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 automaticallyinsert a Non-Breaking Space when you press the spacebar To do this, choose Edit, Preferences From theGeneral 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 spacebar repeatedly As you can seefrom Figure 2.32, which shows the split view, the space is added to the design view, and the   specialcharacter is added to the code

Figure 2.32 The Non-Breaking Space is added to Code view and 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 wordprocessing programs To use the spell checker built in to Dreamweaver, select the Check Spelling optionfrom the Text menu or press Shift+F7 The Check Spelling dialog box appears The Check Spelling dialogincludes 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 suggestionlist and click Change to replace your word with the word highlighted within 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 misspelled word the next time you run the spell checker

Ignore— Ignores and skips over the selected word.

Change— Changes the word within 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've finished performing a spell check, you can click Close to return to the Document window

Inserting the Time and Date

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

Figure 2.33 The Insert Date dialog box enables you to insert a time and date stamp.

As you can see from Figure 2.33, the Insert Date dialog enables you to choose a day format, represented bythe Day Format menu, a date format represented within the Date Format menu, and a time format

represented by the Time Format menu You can also allow Dreamweaver to automatically modify the timeand/or date stamp when the document is saved To insert a time and date stamp within our project, followthese steps:

1 Insert the text Welcome to Vecta Corp just above the existing Welcome heading You may need to

format the text according to the modifications that you've made on the page thus far

2. Place your cursor to the right of the text you just added and choose Insert, Date The Insert Datedialog box will appear similar to Figure 2.33

3. Pick a date format from the Date format list and choose OK The date will appear next to the Welcome

to Vecta Corp text

4. Format the text, applying a font, size, and color so that it appears similar to Figure 2.34

Figure 2.34 Insert a date and/or time stamp within your page.

Inserting a Horizontal Rule

Another simple design element that you can add to your web pages is the horizontal rule Available from theInsert, HTML menu, the horizontal rule adds a straight horizontal line across the page To demonstrate thehorizontal rule, I'll place my cursor just before the footer that we inserted at the bottom of the page Next,I'll add the horizontal rule by choosing Insert, HTML, Horizontal Rule Shown in Figure 2.35, the horizontalrule adds a straight line across the page at a width of 100%

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

[View full size image]

Select the horizontal rule and, in the Horizontal Rule Property inspector, you can now make the followingproperty modifications:

ID— Uniquely identifies your horizontal rule.

Width— Changes the width in either pixels or percent for the horizontal rule.

Height— Sets the height in pixels for the horizontal rule.

Align— Aligns the horizontal rule left, center, or right on the page Default is center.

Shading— Enables or disables shading on the horizontal rule Disabling this box causes the horizontal

rule to be a solid, flat line.

Class— Assigns a CSS class to your horizontal rule.

Go ahead and familiarize yourself with the Horizontal Rule Property inspector by experimenting with thevarious settings For our example, I've modified the properties to resemble Figure 2.36

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

[View full size image]

Working with Images

One of the more convoluted topics as it relates to the web is that of images As with fonts, colors, and filesizes, you're limited in the types of images you can use In addition, because you're dealing with the Web,bandwidth becomes an issue For this reason, images must usually remain small, resulting in degradation ofquality and loss of color variation Although print publishers have a wide array of image choices, includingEPS, TIF, JPEG, BMP, PCX, PICT, and PNG, and are not limited by file size, web developers are limited toworking with GIF, JPEG, and PNG—and must use tools to optimize the images before they're ready for usewithin websites Knowing what types of images to use can also become an important factor as you designfor the Web As a general rule, GIF, JPG, and PNG files should be used as follows:

GIF— Graphical Interchange Format (GIF) is used for images or graphics with smaller amounts of

color and graphics without much tonal range Because GIFs read color in a horizontal line, the morecolor the format encounters when reading, the larger the file size Also, because GIFs read color in a

horizontal line, too much color gradation can result in banding—the process of gradients being broken

up into bands representing a lower dimension of color variation GIFs also have a color table attached

to them that dictates to the graphic how many colors and which colors can be used in the artwork.More colors in the color table yield larger file sizes GIFs can also store transparencies and animationsbut are ideal when used for flat, lower-colored graphics

JPEG— Joint Photographic Experts Group (JPEG) is a lossy compression standard used on graphics

with high tonal ranges, such as photographs This compression standard removes pixels from animage to reduce the file size Too much compression can result in artifacts, which causes the image tolook blurry and unclear As a general rule, use the JPEG file format when adding pictures that contain alot of gradation, such as family photos, to your websites

PNG— Portable 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 ofthe PNG format, Adobe Fireworks adopted this format as its native file type PNG holds a number ofadvantages over GIF files on the Web First, color features are greater in that PNG supports

photorealistic color depths, like JPEG, as well as alpha transparencies, which means you can have 256levels of transparency instead of just on and off as in GIF, cross-platform control of image brightness,and two-dimensional interlacing (a method of progressive display that is similar to JPG) Also PNGcompresses 5%–25% better than GIF, making this an attractive format for web developers The onlything holding back widespread use of PNG files on the Web was the poor level of support in Microsoft'sInternet Explorer As of the 2006 release of IE7, the main issues with displaying PNG files have beenaddressed, making the use of this format much more viable

As a general rule, if you're working with flat, solid images, use GIF However, if you're working with imageswith 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 youselect 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 the File list.Before we jump ahead of ourselves, however, let's review the process of inserting an image by browsing tothe image file using the Select Image Source dialog box To use this method, follow these steps:

1. Start by placing your cursor at the top of the page.

2. Choose the Image option from the Insert menu or select the Image icon from the Images submenu ofthe Common category within the Insert bar Either method will open the Select Image Source dialogbox

3. Now browse for the file header.gif located within the Images folder of the project files that you copiedover (located within C:\VectaCorp\Chapter02\Images) As you can see from Figure 2.37, the

filename, an image preview, and dimensions in terms of size and download time based on file size aredisplayed within the dialog

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

preview.

[View full size image]

4. Aside from simple browsing and previewing, the Select Image Source dialog also includes the capability

to browse by file type, enable and disable image previewing, and allows you to set the file path method(document or site root relative) for the file For our example, simply click OK

Note

After you click OK, the Image Tag Accessibility Attributes dialog box appears Because Accessibility is

a topic that we will devote Appendix A to, for now, click the Change the Accessibility Preferences linklocated at the bottom of the dialog The Preferences dialog will appear with the Accessibility categoryselected Uncheck all four check boxes (Form Objects, Frames, Media, and Images) and click OK

Click Cancel to close the Image Tag Accessibility Attributes dialog

The image is inserted at the top of the page and blends in nicely to our background image You may need toremove extra line breaks between the image and the date stamp (place your cursor just before the datestamp and press Backspace on your keyboard) to get your design to look like Figure 2.38.

Figure 2.38 The inserted header image blends in nicely to our background image.

[View full size image]

A second option for inserting images is to drag-and-drop the images directly from the Files panel

Unfortunately, this method works only when you have a defined site Because we won't be working withdefined sites until the next chapter, we'll defer discussion of this method until later

Formatting Images Within a Document

Like every other element that can be inserted into your web pages, images allow you to format numerousproperties directly from the Property inspector As an example, highlight the three solution elements andthen uncheck the unordered list button to remove the bulleted listing Now place your cursor to the

immediate left of the first item (vProspect 2.0) and choose Insert, Image When the Insert Image dialogappears, browse to the logo_vprospect.gif image and click OK The image will be inserted next to itsassociated text blurb Repeat this process for the other two solution elements Your page should currentlyresemble Figure 2.39

Figure 2.39 Remove the list formatting for the three solutions and then add each solution's

representative image.

Immediately, you'll notice that the text doesn't wrap nicely around the images Setting the text alignment isjust one of the many features outlined within the Property inspector A detailed list of each feature, movingfrom left to right and from basic to advanced is outlined next:

Image Thumbnail— Shows a small thumbnail of the selected image.

Image Size— Displays the selected image's size in kilobytes.

Image Name— 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 itdegrades the quality of the image substantially Instead, resample an image using an image editor likePhotoshop or Fireworks to resize it

Src— Short for source, this is the file path to the image on your computer This value can also be an

external web address, in which case the image shows broken until viewed within the browser

Link— Add a hyperlink to your image here Hyperlinks are outlined with more detail later in this

chapter

Alt— For accessibility reasons, you'll want to enter alternate text here Entering alternate text is

beneficial for a variety of reasons First, it allows text-to-speech readers to present the alternate text

to visually impaired users Second, in Internet Explorer, a yellow ToolTip appears with the alternatetext when a user hovers over the image Finally, on slower connections, the alternate text appears

first while the image is loading See 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 canalso crop, sharpen, or change the brightness or contrast of the image directly in Dreamweaver Thisintegration is covered with more detail in Chapter 18, "Integrating with Fireworks and Photoshop." It'simportant to point out that changing image properties through these options is permanent I wouldhighly recommend that you have a backup of your image before using these features

Class— Allows you to apply a CSS class to your image.

Image Map— Dicussed with more detail later in this chapter, an image map is a method for creating

multiple hyperlinked hotspots within a selected image

V Space and H Space— Enter values here to create vertical and horizontal spacing in pixels around

your image

Target— When a value is added to the Link text box, this menu becomes enabled Targets, as you will

see, provide a method for targeting browser windows when a user is linked from one web page to thenext

Low Src— Although you're certainly free to generate high-quality images with large sizes (not

recommended), always create a low-resolution image that you can reference here This way, thebrowser loads the low-resolution image first, while it's loading the high-resolution version

Border— Use the Border text box to add a border around your image in pixels The color of the border

depends on the default text color within the page and cannot be independently changed

Align Left, Center, and Right— Choose from these options to align the image left, center, or right

on the page Default is Left Align

Align— Provides options for aligning the text around an image Options include Baseline, Top, Middle,

Bottom, Text Top, Absolute Middle, Absolute Bottom, Left, and Right Default is Bottom

Although we'll eventually use most of these features throughout the book, for now, format the properties ofthe image so that you've uniquely named each image and selected the Left option from the Align menu foreach image The result will resemble Figure 2.40

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

Image Placeholders

Image Placeholders are a handy option to use while you're developing the content of a web page and don'tnecessarily have the finished images After you've inserted an Image Placeholder, you can easily adjustwidth and height dimensions to your liking When you're content with the dimensions, you can then selectthe Create option from the Property inspector to launch Fireworks or Photoshop and begin creating theimage To see how Image Placeholders work, follow these instructions:

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

2. The Image Placeholder dialog box appears, enabling you to give your placeholder a name, a width,height, color, and for accessibility reasons, the option to insert alternate text For our purposes, name

the placeholder SamplePlaceholder, assign the dimensions of 300 for width and 50 for height.

Change the color to the blue color within the background header bar, and click OK

3. The temporary Image Placeholder appears on the page as a solid color image similar to Figure 2.41

Figure 2.41 The Image Placeholder appears on the page as a solid color image.

[View full size image]

You'll notice that the Image Placeholder includes the name and dimensions Selecting the Image Placeholderreveals the Image Placeholder Property inspector, which allows you to freely modify the width, height, andcolor The Image Placeholder Property inspector also features the Create button, which, when clicked, opensAdobe Fireworks (assuming it is installed), complete with a new document that is sized according to theImage 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 allows you to begin the layout of thepage without having all the images at hand You can use Image Placeholders and then replace the

placeholders with the final images when they become ready

Rollover Images

Creating images that change appearance when a user's cursor rolls over the image, otherwise known as

rollover images, have traditionally been a tricky task for web developers In the past, web developers

begged, borrowed, and stole JavaScript code that they could "plug into" their websites to perform thisoperation Fortunately for you, Dreamweaver includes an intuitive Insert Rollover Image dialog, available bychoosing Insert, Image Objects, Rollover Image To insert a rollover image within the page, follow thesesteps: