Building a Web Page - Pearson Education · Dreamweaver adds these tags to pages, also considered skeleton files, within the New Document dialog to help get you started. 04_0672327600_ch03.qxd

IN THIS CHAPTER

• Working with Documentsin Design View

• Modifying Page Properties

• Working with Text

• Working with Images

• Working with Hyperlinks

• Working with a Web Page inCode View

CHAPTER 3

Building a Web Page

In the last chapter, you learned about the many windows,bars, panels, and menus that Dreamweaver includes to aidyou in the development of your web pages. You learnedthat the Document window is the heart of Dreamweaverand where most of your creative energy will be focused.You also learned that the Document window is surroundedby a myriad of panels contained within panel groups thatfacilitate the addition of functionality for your pages, afeature rich inspector to assist you in the addition of prop-erties for elements within the Document window, and acomplete menu bar that structures every Dreamweaverfeature into an easy-to-use grouped list of options.

Moving beyond the simplicities of learning the user inter-face lies creating an actual web page. In this chapter, you’lltake the foundation you gained in the last chapter andbuild on it to create a simple web page. Using the manytools that you explored in the previous chapter, you’llcreate a new page in Design view, work with text in theDocument window, add images to your web page, examinelinking using hyperlinks, and finally, learn how to workwith your web pages in Code view.

You can work with the examples in this chapter by down-loading the files from www.dreamweaverunleashed.com.You’ll want to save the files for Chapter 3 in an easy-to-findlocation. I’ll place mine in C:\Dorknozzle\Chapter03.

Creating a New DocumentIn the previous chapter, you learned that the Start Page is ahandy window used to open new, existing, or recent docu-ments. While the Start Page will work fine whenDreamweaver has been opened for the first time, it does uslittle good however, if we need to create a new document

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 67

when document window instances are already open. In such cases, you’ll want to use theNew Document dialog. Accessible by selecting File, New, and shown in Figure 3.1, theNew Document dialog allows you to create new documents based on an existing prede-fined skeleton file, create new documents based on a prebuilt template, and more.

NOTE

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

CHAPTER 3 Building a Web Page68

Templates tab

Generaltab

Categorylist

Page type list Preview pane

Get more content

Preferences Create Document/Template

Document TypeDefinition (DTD)

Help

Description pane

FIGURE 3.1 The New Document dialog allows you to open new documents, new preconfig-ured documents, and ready made templates.

NOTE

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 68

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

• General tab: The default option when the New Document dialog is opened, theGeneral tab includes options for selecting and opening various types of files.

• Templates tab: Choose this option when templates have been created. Any definedtemplates within Dreamweaver will appear within this tab. Templates are coveredwith more detail in Chapter 15, “Working with Templates.”

• Category list: Includes all selectable page categories.

• Page type list: Once a category has been selected from the Category list, the Pagetype list will display all skeleton files within the selected category.

• Preview pane: When a preview is available, the preview pane displays a smallthumbnail of the selected page type.

• Description pane: When necessary, the Description pane outlines the features andbenefits of the selected page type.

• Document Type (DTD): The Document Type Definition menu allows you to pickfrom a pre-defined list of DTDs for your document. A DTD states what tags andattributes are used to describe content within an XML or HTML document, whereeach tag is allowed, and which tags can appear within other tags. Generally, theserules are outlined by the World Wide Web consortium (W3C). When you run thepage validator available from the Check Page submenu in the File menu, the page isvalidated against the DTD you select here. Options within this list include None,HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0Strict, XHTML 1.1, and XHTML Mobile 1.0.

• Create Document/Template: Accessible when the Page Designs page type isselected, this option allows you to insert the page as either a single document or asa site-wide template.

• Help: Launches Dreamweaver’s Help window with the New Document dialog as theindexed selection.

• Preferences: Launches the Preferences dialog with the New Document categoryselected. Use this option to change preferences for creating new documents. Theseoptions will be covered in Chapter 5, “Defining Preferences.”

• Get More Content: Launches the Macromedia Dreamweaver Exchange. Use thisfeature to search for more pre-built skeleton, page design, and template pages.

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

• Basic Page: Includes skeleton files for creating new HTML, HTML Template, LibraryItem, XSLT, ActionScript, CSS, JavaScript, and XML pages.

Creating a New Document 69

3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 69

• Dynamic Page: Includes skeleton files for creating new dynamic pages such as ASPJavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, ColdFusionComponent, JSP, and PHP pages.

• Template Page: Includes skeleton files for creating new dynamic template pages forASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, ColdFusion, HTML SSItemplate (Server-Side Include), HTML, JSP, and PHP.

• Other: Includes skeleton files for creating new ActionScript Communications,ActionScript Remote, C#, EDML, Java, Text, TLD, VB, VBScript, and WML pages.

• CSS Style Sheets: Includes a myriad of pre-built style sheets that you can use to addstyle and flare to your web pages. We’ll cover this topic with more depth in Chapter7, “Advanced Page Formatting Using Style Sheets.”

• Framesets: Includes a number of prebuilt frameset pages you can use. We’ll coverthis topic with more depth in Chapter 8, “Working with Frames and Framesets.”

• Page Designs (CSS): Have you lost that creative inspiration? Luckily for you,Dreamweaver includes a set of prebuilt, table-less page designs formatted entirely inCSS. Again, we’ll cover this topic with more depth in Chapter 7, “Advanced PageFormatting Using Style Sheets.”

• Starter Pages: Tastefully designed, the Starter Pages category includes various webpages you can use to start an entertainment, health & nutrition, lodging, personaltraining, restaurant, spa, or travel site.

• Page Designs: Similar to the CSS Page Designs category, this category features somebasic commerce, data, text, image, and UI page designs. As you’ll see in Chapter 15.“Working with Templates,” all selectable page types can be inserted as either asimple page or a template by selecting the Template radio button just below thedescription window.

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

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

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

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

NOTE

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


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 70

FIGURE 3.2 A new document window instance can be created from the Basic Page, HTMLcategory in the New Document dialog.

Working with a New Document in Design ViewWith 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 develop-ment modes: traditional HTML and CSS. Out of the box, Dreamweaver defaults to themore feature-rich and standards-compliant CSS mode. Although it’s certainly advanta-geous 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 Preferencesdialog, disable the Use CSS Instead of HTML Tags option from the General category (seeFigure 3.3).

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

NOTE

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

Working with a New Document in Design View 71

3

New Document window

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 71

FIGURE 3.3 Uncheck the Use CSS Instead of HTML Tags option for temporary formattingusing traditional HTML tags.

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

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

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

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

It’s important to mention that options within the Page Properties category will rangedepending on which formatting mode you’re in. Because we disabled the Use CSS Insteadof HTML Tags option, we get only three categories to choose from (Appearance,


Disable this option to use HTML development mode

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 72

Title/Encoding, and Tracing Image). Had we not disabled the box within the Preferencesdialog, we’d have five categories to choose from (the previous three plus categories forLinks and Headings).

Modifying the AppearanceThe Appearance category allows you to perform numerous tasks associated with theoverall look of the page including setting a background image, changing the backgroundcolor, text and link color, and margin width and heights. A detailed list of features isoutlined below:

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

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

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

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

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

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

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

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

• Margin width: Set a value to change the size of the left margin in the Documentwindow. 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 Documentwindow. 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 someof these values for our page. Go ahead and change the properties so that they look similarto Figure 3.4.


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 73

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.gifimage located in the Images directory of our defined site, the default Text, Link andVisited link color of the page, and modified the top margin and margin height propertiesfor the page. If I click OK, the page will be formatted based on the background image Ispecified. My cursor will be blinking with no room to spare at the top of the browserwindow, but with about 15 pixels as a margin from the left side of the browser. The textand links will become evident as the chapter unfolds.

NOTE

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

Title/EncodingThe second selectable option within the Category pane is Title/Encoding. While we’vecovered the topic of titles already, you can also use this category to set the document’sencoding type. Encoding, a system for electronically displaying appropriate characters fordifferent 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 bothDreamweaver and the browser which character set should be used to display the page. Bydefault, the encoding type is set to Western European; for the sake of simplicity, we won’tchange that. You can, however, change the title of the page here, as we did from the


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 74

Document bar in the Document window, by simply changing the text that reads UntitledDocument to The Dorknozzle Company Intranet as shown in Figure 3.5.


3

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 canuse the Document Type (DTD) menu to select a different DTD.

You can find links to resources on document encoding in Appendix C, “GeneralResources.”

Tracing ImageThe third option available within the Category pane is Tracing Image. As I mentionedearlier, you can use the Tracing Image option to set a temporary background image on thepage. By setting the transparency of the background image, you can then useDreamweaver elements, such as layers, to design around your background image as if youwere drawing on tracing paper sitting on top of an original document. We’ll cover thisoption with much more detail in Chapter 11, “Layers in Dreamweaver.”

Working with TextNow that you’ve successfully set the properties for the page, its time to start addingcontent to it. This next section is devoted entirely to text formatting within theDocument window. Although most features are derived from and may seem similar topopular word processing programs, you’ll definitely find limitations and workarounds anecessity in some cases.

Copying and Pasting Text from External SourcesThe first step to working with content in Dreamweaver is actually getting that contentinto the development environment. Technically, you could just place your cursor in theDocument window and begin typing. A more realistic approach, however, is to copy thecontents from an external source (such as a text file) and paste it in the Documentwindow. At our fictitious company Dorknozzle.com, Cammy the Content Manager is

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 75

responsible for creating all corporate content. When the content has been written for aspecific page, Cammy the Content Manager emails you the text files for placement on theintranet site. After you have the files, you place the text files in an Assets folder. Whatnext?

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

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

• Paste Special: When this option is selected, the Paste Special dialog appears. Fromthis dialog you have the option of pasting the raw, unformatted text only (shows asa giant paragraph with no formatting or line breaks), text with complete structure(includes paragraphs, lists, tables, and so on), text with structure and basic format-ting (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 ofdeciding to retain any line breaks that are added to the text by the source texteditor. If you’re copying directly from Microsoft Word, you have the option ofallowing Dreamweaver to automatically clean up Word’s paragraph spacing.

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


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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 76

Now let’s try the Paste Special option. Before you do however, undo what you’ve justpasted in by choosing the Undo Paste As Text option from the Edit menu (or by pressingCtrl+Z or Option+Z). To demonstrate the Paste Special option, open the file Welcome.doclocated in the Assets folder for your defined site. The file should open directly inMicrosoft 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 Editmenu. Next, choose the Copy option from the Edit menu. Now switch back toDreamweaver and try pasting the text into the Document window using the Paste optionfrom the Edit menu. You’ll notice that the font face, size, and colors are lost when usingthis option. Instead you’ll want to use the Paste Special option. Undo the text you’ve justpasted 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).


3

FIGURE 3.7 The Paste Special dialog allows you to choose from various formatting optionsto 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 clickOK. As you can see from Figure 3.8, the formatting in this case is retained from the Worddocument.

FIGURE 3.8 Formatting including font face, size, and color are retained from the externalsource.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 77

In the Paste Special dialog, you probably noticed a button that allowed you to launch thePaste Preferences dialog. Clicking this button launches the Preferences dialog with theCopy/Paste category selected. It’s from this category that you can choose the defaultoption that should be applied when the user chooses the normal Paste option from theEdit 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 dragthe text file titled welcome.txt into the page. Immediately, the Insert Document dialogappears 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 thepage or to create a link on the page to the document. Choosing the Insert the Contentsoption and then choosing the Text with Structure option results in the text being addedto the page similar to the way it was added when we performed a copy and paste.

Text FormattingNow that the text is on the page, we’ll want to format it so that it looks presentable. Forinstance, 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, getslost at the top of the page with the background. To fix this problem we could use para-graph breaks and line breaks to cleanly divide the text into legible sections, at the sametime, moving it down from the top of the page. As a start, let’s look at line breaks. Linebreaks, inserted onto the page by selecting Insert, HTML, Special Characters, Line Break orby pressing Shift+Enter (Windows users) or Shift+Return (Mac users), allow you to simplybreak 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 thebackground. To do this, simply place your cursor just before the first line of text and pressShift+Enter (Windows users) or Shift+Return (Mac users) eight times. As you can see fromFigure 3.10, the text now clears the background and is much more legible on the whitebackground.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 78

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 intosections that can be easily formatted using various other paragraph-based formattingtools. 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, tryusing two more line breaks on your text, randomly placing your cursor in the text andtapping Shift+Enter (Shift+Return on a Mac) twice each time. This effectively divides yourtext into three sections similar to Figure 3.11.


3

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 seefrom 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 paragraphbreaks to divide your text into three sections. This can be accomplished by simply placingyour cursor at the point of the text block where you want to create a paragraph break and

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 79

pressing Enter once. Repeat this step until your text block has been formatted into threedistinct paragraphs (refer back to figure 11). Now highlight the first section of text andclick the same center align button. This time, only the first section of text is centeraligned.


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 downto the next line, paragraph breaks offer much more flexibility in that each section that isdefined as a paragraph break can be formatted independently of one another.

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

You can use the six headings available from the Format menu as a way of adding apreconfigured style to text on your page. The browser renders each of the heading optionsdifferently so it’s wise to experiment with all of them to get an understanding of the rela-tive dimensions of each. For our example, however, we’ll use Heading 3. To demonstratethis heading, add the text About Dorknozzle just above the first paragraph by placing thecursor just before the first section of text and pressing Enter to create a new paragraphbreak. Now add the text About Dorknozzle, highlight it, and choose Heading 3 from theFormat menu. Repeat this step by adding the text Company Events under the text thatappears for the About Dorknozzle heading. When finished, the formatted text will resembleFigure 3.13.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 80

FIGURE 3.13 Choose one of the six Heading options to add a preformatted style to yourtext.

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

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

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

3. Place your cursor in the new document and choose Edit, Paste. As you can see fromFigure 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 optionfrom the Format menu.

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


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 81

FIGURE 3.14 Pasting text that was formatted in a different editor results in text that isbroken up.


FIGURE 3.15 Using the Preformatted option preserves the formatting of text from previouseditors.

Choosing TypefacesBy now you’ve probably noticed that up to this point, our text appears as Times NewRoman. Without choosing a type face, Dreamweaver defaults to the browser defaultwhich is, you guessed it, Times New Roman. Of course you’re not limited to this font

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 82

face, but you are limited in terms of how many font faces you can use. Unlike printpublishing programs that support thousands of different font faces, browsers, by defaultrecognize a select few. These few include Arial, Helvetica, Times New Roman, Times,Courier New, Courier, Georgia, Verdana, and Geneva.

NOTE

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

Dreamweaver allows you to choose from these font faces in the Font drop-down menulocated just below the Format drop-down menu in the Properties Inspector. To demon-strate 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 thetext changes from Times New Roman to Arial.


3

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 setsof font faces into what are known as font families. This is beneficial in a sense that if auser’s browser doesn’t have the first font in the family (Arial), it defaults to the next fontin the family (Helvetica). If a user doesn’t have that font either, the browser simplydefaults to the next best sans-serif font, the last option within our family.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 83

With all this said, you’re not completely out of luck in terms of font faces. For instance, ifyou’re working in an Intranet environment where everyone’s computer within your orga-nization is configured exactly the same, go ahead and use your own font faces. Since thefont 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 choosingFont, 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, simplyshows 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 fontsinto the third pane, Chosen Fonts, to create a font family. To do this, just find fonts thatyou want to use within the Available Fonts pane and click the twin arrows button tomove them over to the Chosen Fonts pane. You’ll see the font family build in the FontList pane as you add them to the Chosen Fonts pane. When you’ve finished configuringyour font family, click OK. Now look in the Font menu in the Properties Inspector; thenew font family appears in the list.

TIP

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

Font SizesWorking with font sizes is another great challenge in website development. With all thedifferent 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 appearin the browser. To prove this point, open your browser (I’ll open IE) and select View, TextSize. Of course, the browser defaults to medium but you’re entirely free to change thedefault size of text on the page. For this reason, Dreamweaver provides both absolute andrelative text sizes, available from the Size drop-down menu in the Properties Inspector justto the right of the Font drop-down menu.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 84

The options in the Size drop-down menu don’t resemble point or pixel sizes, instead theyrefer to HTML sizes. The default size of the page is set as an absolute value of 3, but youcan select from a list of absolute or relative sizes for your page. The absolute size is astraight 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 thepage. 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 thematrix shown in Figure 3.18, the default font size is 3. However, choosing the relativevalue of +1 displays the equivalent of the absolute value 4. The same concept holds truefor the relative value –1. In this case, –1 displays similar to the absolute value of 2.


3

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 StyleSheets. For now, let’s modify our example by highlighting the paragraphs of text (not theheadings) and choosing an absolute value of 2. As you can see from Figure 3.19, the textchanges size.

Text ColorsYet another frustrating topic in web development is that of choosing the right colors foryour website. Unlike print publishing programs or word processing programs where youopen a color palette containing millions of colors, browsers choose from a web-safe colorpalette of 216 colors that are familiar to all computers. Doing this guarantees that thecolors we choose are viewed accurately on browsers independent of platform or operatingsystem. Dreamweaver organizes web-safe colors in the Text Color chip available just to

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 85

FIGURE 3.19 Change the size of text within our fictitious company’s web page to anabsolute value of 2.


the right of the Size menu in the Properties Inspector. Selecting this chip opens the Colorpalette, shown in Figure 3.20, and turns the pointer into an eyedropper allowing you tosample colors from Dreamweaver’s interface.

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 86

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 withBlack cubes on the left, followed by grayscale cubes, RGB cubes, CMYK cubes, andso on.

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

• Hexadecimal Value: Displays the hexidecimal value of the color when your mouserolls over the color cube. Explaining the concept of hexidecimal values can be alengthy 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, pressingthe Esc key on your keyboard is a much better option.

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

• Options Menu: Click this arrow icon for additonal options including displayingColor 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 devel-opment environment.

To demonstrate the use of color, let’s highlight the text on the page and modify the colorso 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 headerimage. The Color palette closes, and your text turns dark blue. Furthermore, once you’veselected the color, the hexadecimal value appears in the text box just to the right of thecolor chip in the Properties Inspector.

Text StylesJust above the Text Color chip in the Properties Inspector lie two options for modifyingthe weight—Bold(B)—and style—Italic(I)—of text in your pages. Although bold and italicare 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 ofoptions (see Figure 3.21).

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


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 87

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

Text Alignment and IndentationsSimilar to a word processor, Dreamweaver includes the ability to align your text. Fouralignment 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 allthe text, copy it, and paste it somewhere near the bottom of the Dorknozzle page. Youmight have to include more paragraph breaks to force the cursor near the bottom of thepage. Of course, you may want to enhance this small footer by implementing featuresyou’ve already learned, such as changing the font face, font size, and color. When you’redone, center-align the text using the Align Center button in the Properties Inspector (seeFigure 3.22).

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

Working with ListsYou can create lists easily within Dreamweaver. While Dreamweaver supports three typesof lists (Ordered, Unordered, and Definition), arguably the more popular, ordered andunordered lists are available directly from the Properties Inspector by selecting thebuttons 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 leftof the selected item while ordered lists apply a number instead of a bullet to the left ofthe item and follow in sequential order.


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 88

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 morethan highlighting the text items to include in the list and choosing the appropriateoption from the Properties Inspector. Alternatively, you can place your cursor on the pageand choose the list option from the Property Inspector. Immediately, a bullet or numberis created. You can type your items as you go, pressing Enter to move to the next line andcreating 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 readsCompany Events. To create the list, place your cursor just after the heading and pressEnter (press Return on a Mac) to create a new paragraph break if one doesn’talready exist.

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

3. After the bullet appears on the page, begin typing a company event. To create a newbullet, 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. Youmay need to apply formatting to your list (font face, size, and so on) so that itconforms to the rest of the text.

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


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 89

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. Forinstance, you can also format your lists so that the bullets show as squares, numbers showas letters or Roman numerals, or even format a specific list item as opposed to the list as awhole. This can be accomplished by simply placing your cursor on a list item and clickingthe List Item button within the Properties Inspector. Choosing this option opens the ListProperties 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 modifythe properties of the list as a whole. For instance, with Bulleted List selected in the ListType menu, choose Square from the Style menu and click OK. Notice that all the bulletsfor the list items are changed to squares. The second half of the dialog (List Item) allowsyou 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 NumberedList 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 inthe Start Count text box.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 90

NOTE

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

The third type of list supported by Dreamweaver is the Definition List. Available by select-ing Text, List, Definition List, the Definition List allows you to create a list that mocks adictionary definition—where a definition appears indented below the term. To create yourown 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 newtesting page.

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

4. Place your cursor just before the second sentence, choose Backspace, and pressEnter. 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 verysimilar to a dictionary definition.


3

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

Using Special CharactersDreamweaver includes a library of special characters that you can use within your webpages. Special characters are text elements that must be inserted as special code because akeyboard key doesn’t exist for it. For instance, left and right quotes, dashes, the Eurosymbol, the English Pound, the Japanese Yen, copyright symbols, registration marks, and

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 91

trademarks are all considered special characters and must be inserted using the Text cate-gory within the Insert bar (see Figure 3.26).


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

TIP

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

You’re also not limited to the special characters in this list. Dreamweaver includes a char-acter 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 SpecialCharacters submenu. As you can see from Figure 3.27, the Insert Other Character dialogappears with numerous other special characters.

FIGURE 3.27 Use the Insert Other Character dialog to insert characters other than thoselisted in the menu.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 92

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. Sincethis is the case, a Non-Breaking Space, represented by must be inserted to alert thebrowser 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 automaticallyinsert a Non-Breaking Space when you press the space bar. To do this, simply choosePreferences from the Edit menu. From the General category, enable the Allow MultipleConsecutive Spaces option and click OK. To test the functionality, place your cursoranywhere on the page and press the space bar repeatedly. As you can see from Figure 3.28which shows the Split view, the space is added to the designer, and the specialcharacter is added to the code.


3

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

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

• Word not found in dictionary: As Dreamweaver scans your document, words thatare 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 withinDreamweaver’s dictionary, a list of suggestions are made. You can select a word fromthis suggestion list and click OK to change to the word highlighted in the ChangeTo text box.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 93

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

• 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 Documentwindow.

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


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

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

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

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 94

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

Inserting a Horizontal Rule 95

3

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

Selecting the horizontal rule changes the Properties Inspector to a horizontal rule-basedProperties Inspector. As you can see, the horizontal rule-based Properties Inspector allowsyou to make the following property 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 boxcauses the horizontal rule to be a solid, flat line.

• Class: Assign a CSS class to your horizontal rule.

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 95

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

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

• GIF: GIF, which stands for Graphical Interchange Format is used for images orgraphics with smaller amounts of color and graphics without much tonal range.Because GIFs read color in a horizontal line, the more color it encounters whenreading, 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 beingbroken up into bands representing a lower dimension of color variation. GIFs alsohave a color table attached to them which dictates to the graphic how many colorsand which color can be used in the artwork. More colors in the color table yieldhigher file sizes. GIFs can also store transparencies and animations but are idealwhen used for flat, lower-colored graphics.


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 96

• JPEG: JPEG, which stands for Joint Photographic Experts Group, is a lossy compres-sion standard used on graphics with high tonal ranges such as photographs. Thiscompression standard removes pixels from an image to reduce the file size. Toomuch compression can result in artifacts which causes the image to look blurry andunclear. As a good rule of thumb, use the JPEG file format when adding pictures toyour websites that contain a lot of gradation such as family photos.

• PNG: PNG, which stands for Portable Network Graphics, was introduced as a relace-ment to GIF a few years ago. Although Macromedia has certainly adopted the fileformat as standard within its Fireworks program, for the web, PNG holds a fewadvantages over GIF. First, color features are greater in that PNG supports alphatransparencies, which means you can have 256 levels of transparency instead of juston and off as is true for the GIF format, cross-platform control of image brightness,and two-dimensional interlacing (a method of progressive display that is similar toJPG). In addition, PNG compresses 5%–25% percent better than GIF, making this anattractive format for web developers. Of course the downside to using PNG on theweb is that browser support—or more specifically down-level browser support—forPNG is simply not up to par. Even the newer versions of Internet Explorer forWindows don’t support the transparency features in PNG.

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

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

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

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

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

Working with Images 97

3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 97

FIGURE 3.32 Browse to header.gif so that you can see the filename and the imagepreview.

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

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


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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 98

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


3

FIGURE 3.34 Insert the two subheading images by dragging them from the File list panelonto the web page.

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 99

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


Image thumbnail

Image size

Image name

Width and height

Source Link Alternate text

Edit options

Vertical and horizontal space

Target

Low-resolution source

Border

Class

Text alignment options

AlignImage map

FIGURE 3.36 Dreamweaver’s image-based Properties Inspector includes numerous propertymodifications for an image.

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

• 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: The width and height of the image are shown here. Dreamweaver allowsyou to stretch an image, in which case the values in these boxes will be bolded.

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 100

Bolded values mean that the width and height of the stretched image do not corre-spond to the embedded values of the image. In fact, it is recommended that animage editor such as Fireworks be used to properly resize images.

• Src: Short for source, this is the file path to the image on your computer. This valuecan also be an external web address, in which case the image shows broken but willdisplay within the browser.

• Link: Add a hyperlink to your image here. Hyperlinks are outlined with more detaillater in this chapter.

• Alt: For accessibility reasons, you’ll want to enter alternate text here. Entering alter-nate text is beneficial for a variety of reasons. First, it allows text-to-speech readersto present the alternate text to the disabled user since the reader can’t make out theimage. Second, in Internet Explorer, a yellow tooltip appears with the alternate textwhen a user hovers over the image. Finally, on slower connections, the alternatetext appears first while the image is loading. See Appendix A, “Accessibility,” formore about alternate text.

• Edit: Dreamweaver incorporates minimal editing functionality in this group oficons. For instance, you can open the selected image directly in Fireworks forediting or optimizing. You can also crop, sharpen, or change the brightness orcontrast of the image directly in Dreamweaver. This integration is covered withmore detail in Chapter 19, “Integrating with Fireworks.” It’s important to point outthat changing image properties through these options is permanent. I highly recom-mend 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: Discussed with more detail later in this chapter, an imagemap is amethod for creating multiple hyperlinked hotspots within a selected image.

• V Space and H Space: Enter values here to create vertical and horizontal spacing inpixels 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 auser is linked from one web page to the next.

• Low Src: Although you’re certainly free to generate high-quality images with largesizes (not recommended), always create a low-resolution image that you can refer-ence here. This way, the browser loads the low-resolution image first, which the usercan see as the browser finishes loading the high-resolution image.

• Border: Use the border text box to add a border around your image in pixels. Thecolor of the border depends on the default text color in the page and cannot beindependently changed.

• Align: Choose from these options to align the image left, center, or right on thepage. Default is Left Align.


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 101

• Text Align: Provides options for aligning the text around an image. Options includeBaseline, Top, Middle, Bottom, Text Top, Absolute Middle, Absolute Bottom, Left,and Right. Default is Bottom.

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


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

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 102

FIGURE 3.38 Format the Image Placeholder dialog.

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


3

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 103

Rollover ImagesCreating images that change appearance when a user’s cursor rolls over the image, other-wise known as rollover images, have traditionally been a tricky task for web developers. Inthe past, web developers begged, borrowed, and stole JavaScript code that they could“plug into” their websites to perform this operation. Fortunately for you, Dreamweaverincludes an intuitive Insert Rollover Image dialog, available from the Image Objectssubmenu of the Insert menu.

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

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

2. Select Insert, Image Objects, Image Rollover. The Insert Rollover Image dialogappears.

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


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

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 104

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

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

• Text links

• Image links

• Imagemaps

• Named anchors

• Navigation bars

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

Working with Hyperlinks 105

3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 105

• Document Relative: Possibly the easiest type of path to work with, document rela-tive paths require little more than the path from the current file to the target file.For instance, if I were working with a file located in the folder Dorknozzle\Departments\Marketing\Press Releases\ and I needed to link to a file calledmarketing.htm within the Marketing folder, I would simply use../../marketing.htm as my path. The ../ essentially forces the browser to back outof the current folder. The same holds true if I were working with a file within thesame Press Releases folder and I needed to reference an image within the Imagesfolder located within the Press Releases folder. In that case, my path would resembleImages/file.gif. Simple enough right? The downside to working with documentrelative paths is that you can only back out of two folders before this methodbecomes impractical. If you work with a lengthy folder structure, the site root rela-tive path might be your answer.

• Site Root Relative: Site root relative paths are possibly one of the more confusingtypes of paths to work with and arguably the least flexible in terms of manageabilitywithin Dreamweaver. The upside to site root relative paths is that they have no limitto folder depth. For instance, the example in the Document Relative path descrip-tion references the path Dorknozzle\Departments\Marketing\Press Releases. If Iwere working with a file within the Press Releases folder and needed to link to thefile index.htm within the Dorknozzle folder root, I could use a site root relative pathto simply reference the path /index.htm. The / instructs the browser to find the siteroot and then retrieve index.htm.

NOTE

By default, Dreamweaver works with document relative paths. If you want to work with site rootrelative paths, you’ll have to configure it when you define a site. Paths are covered in moredetail in the next chapter.

• Absolute: You can use absolute paths when referencing files located in paths thatdon’t change. For instance, the domain name http://www.modulemedia.com orhttp://www.dorknozzle.info will never change…they are said to be absolute.Because this is the case, I could assign these domain names as my absolute paths.Furthermore, I could also refer to a specifc folder within that domain. For instance,if I wanted to reference an image in the Images folder of the www.modulemedia.comsite, I could reference its absolute path ashttp://www.modulemedia.com/Images/image.gif.

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

• _self: Opens the path within the same browser window as the original page. Thistarget is the default.


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 106

• _blank: Forces the browser to open the path in a new browser window instance.This keeps the original page in the background.

• _parent: When working with frames, choose this option to load the linked docu-ment in the parent frame or parent window of the frame that contains the link. Ifthe frame containing the link is not nested, then the linked document loads in thefull browser window.

• _top: When working with framesets, choose this option when you want to load alinked document in a full browser window, thereby removing all frames.

NOTE

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

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

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

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

2. Highlight the text you just entered.

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

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

4. Clicking the link replaces the Dorknozzle site in the browser window with theModule Media site.

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


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 107

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


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

The Hyperlink dialog supports the following properties:

• Text: Enter the text that should be linked here.

• Link: Enter the path of the link here.

• Target: Choose a target (_blank, _parent, _self, or _top) from this menu.

• Title: While setting the Alt attribute displays a yellow tooltip in Internet Explorerwhen the user’s mouse rolls over the hyperlink, the Title attribute displays theyellow tooltip in all browsers.

• Access key: Use this attribute to set a shortcut key for the hyperlink. For instance,entering the letter M here allows me to press Alt+M to highlight and ultimatelytrigger the hyperlink within the browser.

• Tab index: Set this text box to a numeric value when the current hyperlink appearsin a long list of hyperlinks. Doing this will set the numeric order when a user tabsthrough links.

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

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

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

2. Enter the text mailto: followed by the email address that you want to appear in theTo field of the email program in the Link text box in the Properties Inspector. Forinstance, I’ll type mailto:[email protected].

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 108

3. If you want a subject to appear when the email program is launched, enter theemail address, followed by a ?Subject=, and then the subject text you want to appear.For instance, I’ll type mailto:[email protected]?Subject=Question about thesite.

TIP

Although we’ve used ?Subject= as the example here, you can also prefill the CC or BCC field inthe new email message. To do this, simply append the mailto: link with the appropriate fieldname. For instance, if we wanted to add CC information, the formatted link would resemblemailto:[email protected]?Subject=Question%20about%20the %20site&CC=ideas@module-

media.com.

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


3

FIGURE 3.43 Use the mailto: option in the Link text box to create an email link on your webpage.

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 109

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

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

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

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

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

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

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

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

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

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


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 110

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


3

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

If you feel you need practice creating hotspots, try and create new hotspot to fictitiouslinks for the other links in the header image. When you’ve finished, preview the result inthe browser by selecting the Preview In Browser option from the Document bar or by

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 111

pressing F12. When the page opens in the browser, try rolling over the Home link. Onlythe area around the Home link should be clickable.

Named AnchorsThe final type of linking element you can add to your web pages are anchors. Addingnamed anchors on a page allows you to create hyperlinks that link to specific areas withina page. Although you can also use named anchors to link a user to a specific spot onanother page, named anchors are generally reserved for pages that contain an excessiveamount of content. In this situation, a small subnavigation menu can be created thatlinks the user to specific spots (the anchors) on the page. Subsequently, you can add a“Back To Top” link at the point on the page where the user was linked to; when the “Backto Top” link is clicked, the user returns back to the top of the page. To work with namedanchors, follow these steps:

1. Open the file companydirectory.htm.

2. The company directory page contains ten management bios for employees at ourfictitious company. Near the top of the page is a menu bar that contains a horizon-tal list of all the employees listed on the page. Named anchors are the perfect choicein this case for linking each name in the menu bar to its respective employee withinthe list.

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


FIGURE 3.46 The Named Anchor dialog allows you to create a named anchor within thepage.

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

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 112


3

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

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

Our next step is to add the “Back to Top” functionality. You can add this feature byfollowing these steps:

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

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

TIP

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 113

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

Creating a Navigation BarYou’ve already seen how to create a rollover image using the Rollover Image dialoglocated in the Image Objects subcategory of the Insert menu. Aside from simply creatingan image that, when rolled over, changes to a new version of the image, the Image Objectsubcategory also lists the Navigation Bar option. This feature, like the Rollover Imageoption, allows you to create a series of rollover images that mocks the look and function-ality of a typical website navigation bar. To use the Navigation Bar option from the ImageObjects subcategory, assume for a moment that the header image of our website didn’thave the imagemap but instead we were relying on the functionality in the NavigationBar option to build our navigation menu. To build the navigation bar, follow these steps:

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

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

• Nav bar elements: Lists the navigation bar elements. Select the + icon tocreate a new navigation bar element, the – icon to remove one, and the upand down icons to position navigation elements within the list.

• Element name: Uniquely name the navigation bar element. This option isrequired.

• Up image: Enter or browse for the image to use for the up state.

• Over image: Enter or browse for the image to use for the rollover state.


04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 114

• Down image: Enter or browse for the image to use for the down state. Thisimage appears when the user actually clicks the navigation bar element.

• Over while down image: Enter or browse for the image to use when the userrolls over the image when it is in its down state.

• Alternate text: Enter the Alternate (Alt) text here.

• When clicked, Go to URL: Enter the path that the image link will go to onceclicked.

• In menu: Choose the target to be associated with the link. Normal targetsdo not appear here. However, frame names do appear here as targets whenapplicable.

• Options: Choose the Preload Images option to force the browser to preload allimages before the page loads. Optionally, you can force the browser to displaya specific image’s down state when the page loads. This great usabality featurealerts the user as to which page they’re currently on.

• Insert: Choose an option from this menu to display the navigation bar hori-zontally or vertically.

• Use tables: Enable this check box to position the navigation bar using tables.Using tables provides more flexible positioning and spacing options. Becausewe haven’t covered tables yet, disable this option.

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

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

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

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

7. Disable the Use Tables check box.

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

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


3

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 115

FIGURE 3.50 The navigation bar within the browser.

Working with a Web Page in Code ViewSo far you’ve learned how to build web pages in Design view. The Design view, supportedby the design window, Properties Inspector, Insert bar, and supporting panels makeDreamweaver an attractive editor for visual developers hoping to create quick web pageswithout having to know markup or the sometimes confusing coding languages such asCSS and JavaScript. Although working in Design view may certainly be a positive for mostdevelopers, it’s important to highlight some of the supported coding features that trulymake Dreamweaver one of a kind. The last part of this chapter hopes to unleash the


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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 116

unique coding aspects that some people come to expect from the industry-leading web-page-development environment.

Code HintsWe’ve looked at some of the visual preferences (such as line numbers, word wrap, andsyntax coloring) in Code view, we’ve yet to outline and detail some of the powerfulfeatures that can aid you in development regardless of view. Arguably one of the mostuseful features in Code view is that of code hints. Those who made a living developingwith HomeSite in the late 1990s certainly remember this feature because it was integralpart of the HomeSite development environment and a huge reason HomeSite’s popularitywas unmatched. Thanks to the Macromedia/Allaire merger, Dreamweaver gained from thepopularity that code hints had in HomeSite. Using code hints in the Code view environ-ment is easy; understanding how it works is to understand the underlying structurebehind HTML/XHTML. HTML/XHTML is an authoring language, not a programminglanguage. The developer is entirely responsible for creating the structure that she wantsher users to see using a markup language like HTML/XHTML. Organized using a well-formed structure of tags in conjunction with attributes, the browser parses the tags andpresents to the user the structure that the developer intended. For future reference, Figure3.51 outlines the structure of a typical HTML/XHTML tag.

Working with a Web Page in Code View 117

3

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 117

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

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

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

The Code View ToolbarFor developers used to working with code in HomeSite, the Code View toolbar docked tothe left side of the coding environment and shown in Figure 3.54 should look relativelyfamiliar.


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

04_0672327600_ch03.qxd 9/13/05 12:31 PM Page 118

FIGURE 3.54 The Code View toolbar provides quick access to commonly used commandsfor the Code view user.

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

• Open Documents: Click and hold this icon in the toolbar to display all currentlyopen documents. Then choose a document from the list to focus the document inCode view.

• Collapse Full Tag: You can place your cursor onto an opening tag and then clickthis button to collapse the tag and everything within it. This button is discussed inmore detail in the next section.

• Collapse Selection: You can highlight a section of code and then click this buttonto collapse the selection. This button is discussed in more detail in the next section.

• Expand All: Expands all collapsed code.

• Select Parent Tag: Selects the parent tag within the hierarchy based on your cursorposition in the code. For example, if you’re within the <td> tag of a table, selectingthis option selects the <table> tag because the <table> tag is the parent for boththe <tr> and <td> tags.

• Balance Braces: When working with client-side scripting languages such asJavaScript, click this button to highlight all code within the braces of a function.

• Line Numbers: Displays or hides line numbers.


3

Code view toolbar

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 119

• Highlight Invalid Code: Similar to the Highlight Invalid Code option (located inthe View options menu in the Document bar), choose this option to enable ordisable the highlighting of code that is considered invalid to a browser.

• Apply/Remove Comment: Choose the Apply Comment button to open thecomment selection menu similar to Figure 3.55. It’s from this menu that you havethe option of inserting a HTML, CSS, JavaScript, or VB.NET, comment. Alternatively,you can click the Remove Comment button to delete an existing comment from thecode view.


FIGURE 3.55 Choose a comment type from the comment selection menu.

• Wrap Tag: Highlighting an element in code and selecting this button opens theWrap Tag dialog. It from this dialog that you can enter an element that should wrapthe selection. You’ll notice that code hints also work within the Wrap Tag dialog.

• Recent Snippets: Selecting this button opens the recent snippets menu. From thismenu, you can pick from a list of recently added snippets or even launch theSnippets panel to choose from Dreamweaver’s library of snippets.

• Indent/Outdent Code: Choose from these two buttons to indent or outdent code.

• Format Source Code: Also available from the Commands menu, you can click andhold this option to apply the default Dreamweaver code formatting to either theentire page of code or to selected blocks of code. Alternatively, you can choose theCode Format Settings option to launch the Preferences dialog with the Code Formatoption preselected. More information about Preferences is provided in Chapter 5,“Defining Preferences.”

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 120

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

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

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

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


3

FIGURE 3.56 Line segments appear in the line numbers column, indicating the segment ofcode that can be collapsed.

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

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

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 121


FIGURE 3.58 The Tag Inspector visually displays attributes and attribute values for a selectedtag.

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 122


3

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

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

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 123


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

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

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

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

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

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 124


3

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

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

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

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

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

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

<table>

<tr onmouseover=”this.style.backgroundColor=’#cccccc’;”

onmouseout=”this.style.backgroundColor=’#ffffff’;”>

<td align=”center” width=”125”><a href=”#”>Home</a></td>

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 125

</tr>



<td align=”center” width=”125”><a href=”#”>HelpDesk</a></td>

</tr>



<td align=”center” width=”125”><a href=”#”>Company Directory</a></td>

</tr>



<td align=”center” width=”125”><a href=”#”>Employee Store</a></td>

</tr>



<td align=”center” width=”125”><a href=”#”>Admin</a></td>

</tr>

</table>

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

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


Mask out this dot

FIGURE 3.64 Create the new snippet in the Snippet dialog.

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 126

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

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

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

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

Summary 127

3

04_0672327600_ch03.qxd 9/13/05 12:32 PM Page 127