The best way to make your site search-engine friendly is to design your site so that it’s easy for search engines to ”read” your pages—doing things like adding alternative text behind your images and using the meta description tag. In this tutorial, you’ll find a few search engine optimization (SEO) tips and discover the features in Dreamweaver that will best serve your SEO efforts.

1 NEVER LEAVE A PAGE UNTITLED
When you create a new page, Dreamweaver automatically adds the word “Untitled” at the top of every page, but don’t ever leave it that way. Although the title text doesn’t appear in the body of your webpage, it’s highly valued by search engines (so be sure to include your best keywords). Title text also appears at the very top of the browser window and that’s the text that’s saved when someone bookmarks your site. It’s easy to change a title in Dreamweaver; just click in the Title field at the top of the workspace and type your own text.

Click here to see the rest of the tutorial

1 NEVER LEAVE A PAGE UNTITLED
When you create a new page, Dreamweaver automatically adds the word “Untitled” at the top of every page, but don’t ever leave it that way. Although the title text doesn’t appear in the body of your webpage, it’s highly valued by search engines (so be sure to include your best keywords). Title text also appears at the very top of the browser window and that’s the text that’s saved when someone bookmarks your site. It’s easy to change a title in Dreamweaver; just click in the Title field at the top of the workspace and type your own text.

2 USE ALTERNATIVE TEXT BEHIND IMAGES
The HTML image attribute for alternative text (alt text) lets you include a text description with your images. The spiders and bots that search engines use to crawl your site’s content can’t see words saved in an image, but they can read alt text in the code. When you insert an image, Dreamweaver prompts you to add Alternate Text in the Image Tag Accessibility Attributes dialog (unless you’ve turned it off in Preferences). You can also add alt text by clicking to select any image and then entering text in the Alt field in the Property inspector.

©ISTOCKPHOTO/EKATERINA MONAKHOVA

3 ADD A META DESCRIPTION
The meta description tag appears in the head area at the very top of your HTML code. Humans never see this text because it’s not displayed in a webpage, but meta descriptions are often used in search engine results and they can make a big difference in whether someone clicks on your site or not. To add this text in Dreamweaver, choose Insert>HTML>Head Tags>Description and then type a description. You can add different descriptions to any or all of the pages in your site. Although search engines vary, most will only display the first 250 characters.

©ISTOCKPHOTO/JOSE ELIAS

4 INCLUDE META KEYWORDS
Many search engines ignore the contents of the meta keyword tag because it’s been so badly abused by Web designers’ trying to trick search engines with unrelated or misleading terms, but adding keywords can’t hurt your pages (as long as they match the content), and it’s good practice to include your most important keywords on every page. While you’re adding the meta description tag, it’s easy to throw in a few keywords with the meta keyword tag. The two dialogs are accessible from the same menu in Dreamweaver, just choose Insert>HTML>Head Tags>Keywords.

5 USE HEADING TAGS TO SHOW HIERARCHY
Heading tags—HTML tags h1 through h6—are designed to format headlines with graduated levels of big, bold text. Although there are many ways to style text so that it stands out in a webpage, heading tags are considered especially valuable because they help identify the importance of information on a page using a clearly defined hierarchy. Format your most important headline with the h1 tag, less important text with the h2 tag, and so on. Although there’s no guarantee this will improve your rankings, it’s widely believed that text formatted in heading tags gets special attention from search engines.

6 STYLE HEADING TAGS
If you’re not happy with the bold, Times Roman style of the heading tags, you can use CSS to change their appearance. By creating CSS Rules using the Tag selector, you can change the font, color, size, and other formatting options of any or all of the h1–h6 heading tags. To do so, create a new style (Format>CSS Styles>New), choose Tag as the Selector Type, and then select any heading tag from the Selector Name drop-down list. Define the style you want and save it into your stylesheet. Once you do, any text formatted with that heading tag will display with the formatting rules defined in that style.

7 USE COMPOUND STYLES FOR HEADING TAGS
You can create different styles for the same heading tags using compound styles. For instance, you can create a style for the h1 tag where the formatting changes when it appears in a sidebar so that it’s different from text formatted with the h1 tag when it appears in the main content area. For example, to create a style for the h1 tag to be used on an area of the page already styled by the ID #sidebar, you’d create a compound style that looks like this: #sidebar h1.

8 ATTRACT THE RIGHT LINKS
Search engines view links to your site as a vote of confidence. But it’s not just the link that counts; it’s also the text in the link tag. If the link to your site includes keywords, it can improve your ranking even more. Say I were to link to the fictional pet site featured in this tutorial, I’d serve them better by including keywords, such as pet grooming and boarding, in the link text with their domain name. Ask your friends to do the same when they link to you.

9 HARNESS THE POWER OF INTERNAL LINKS
Most search engines also put higher value on keywords that appear in internal links on your own website. When you link from one page in your site to another, use words that have relevance to your content and avoid wasted phrases like “click here.” If the pet site puts the words, “Pet Grooming Services” in a link, most search engines will recognize that those words have special value. Although this alone may not make a big difference, the combined effect of many small changes like this can add up to valuable improvements in your search status.

©ISTOCKPHOTO/DIANE DIEDERICH

10 CREATE A NAVIGATION BAR OF KEYWORD LINKS
The more times the same keywords are linked to the same page, the more attractive it becomes to most search engines. As a result, one key to search engine success is to pay special attention to the way you create navigation links—the links to the most important pages of your site. Make sure to include good keywords in the links and use text, not images, for the links. If you must use graphic buttons to achieve the design you want, repeat navigation links by adding a row of text links to the bottom or side of every page.

11 CREATE DESTINATION PAGES FOR POPULAR TOPICS
Many visitors who discover your site through search engines will enter through an internal page in your site because it matches a specific search string better than the front page of your site. With this in mind, many Web designers create “destination” or “landing” pages optimized for popular keywords and designed to attract people searching for those terms. Once they find the content on those pages, you can then lead them into the rest of the website.

JANINE WARNER

12 USE TEMPLATES TO REPEAT KEY ELEMENTS
When creating a website in Dreamweaver—even if the site only has a few pages—using the Web templates in Dreamweaver can make it easier to repeat (and update) key elements, such as navigation bars, and the alt text behind commonly used images, such as banners. You can create templates in Dreamweaver by saving any page as a DWT file and then create and update the rest of the pages in your site using that template. (You can find instructions for creating templates in Dreamweaver at www.layersmagazine.com/category/dreamweaver.)

13 MAKE EXISTING SITES SEO FRIENDLY
Considering the best options for SEO from the start is best, but if you’ve already built your site in Dreamweaver, you can always go back and make adjustments. Most search engines, such as Google, visit websites regularly (it can vary from a daily occurrence to more than a month between visits depending on your site’s popularity and how often you refresh the content). If you’re not familiar with Google Webmaster Tools, the many reports, charts, and graphs on this page make it a great place to learn more about how your site ranks and how to make it better.

1 PREPARE QUICKTIME VIDEO IN A VIDEO EDITOR
Although you can insert many different types of video into your pages in Dreamweaver, you’ll first need to edit and convert the video in a video editor, such as Adobe Premiere Pro (shown here).

2 OPEN THE INSERT PANEL IN DREAMWEAVER
Dreamweaver’s Insert panel (Window>Insert) provides a handy collection of options, including the Insert>Media>Plugin feature you’ll need for adding video in QuickTime, Windows Media, or any format other than Flash. If you’re using Dreamweaver CS4, you have the option to keep the Insert panel at the top of the workspace using the CS3 workspace layout (Window>Workspace Layout>Classic) or integrate it into the panels, as we’ve done here. (Note: In Dreamweaver CS3, this feature is called the Insert Bar and it’s only available at the top of the workspace.)

3 INSERT QUICKTIME FILE
First, place your cursor where you want to add the video in your webpage. Then, with the Insert panel open and the drop-down menu at the top set to Common, click the arrow to open the drop-down menu next to the Media icon and select Plugin (note that the Media icon changes to reflect whatever you last selected). Alternatively, you can choose Insert>Media>Plugin.

4 SELECT THE QUICKTIME FILE
If you’ve used the Insert Flash Video (FLV) options in Dreamweaver, you may be surprised that when you add video in other formats using the Plugin option, you won’t be presented with a dialog that contains settings for size or other video options. Don’t worry; just select the QuickTime file for now (as you would if you were inserting an image into the page—just Control-click [PC: Right-click] on the Plugin icon and select Source File). You’ll get a chance to set the size and other settings in the following steps.

5 SPECIFY SIZE IN THE PROPERTY INSPECTOR
Because Dreamweaver can’t automatically detect the size of a QuickTime file, you’ll need to specify the size after you insert it into the page. To do so, click to select the 32×32 icon that Dreamweaver inserts in place of the video and then enter the actual size of the video in pixels in the W (width) and H (height) fields in the Property inspector. The video file we’re using in this lesson is 720×480 pixels. Once you input the sizes, the icon will expand to the specified size.

6 ADD A PLUGIN PAGE URL
With the video selected, you can also use the Property inspector to add a Plugin Page URL. The Web address you enter in the Plg URL field will be displayed in place of the video if the visitor to your site doesn’t have the QuickTime player installed on his or her system. If you’re using QuickTime video, the Plugin URL is http://www.apple.com/quicktime.

7 ALIGN YOUR VIDEO FILE
Although you can use the Align drop-down menu in the Property inspector to align your video, the better option is to use Cascading Style Sheets (CSS). In this example, we’ve created class styles named .float-right and .float-left using the Float options in the Box category of the CSS Rule Definition dialog. To create a new class style, click on the New CSS Rule icon in the CSS Styles panel, choose Class in the drop-down menu, name your style, and click OK to enter the CSS Rule Definition dialog. (You’ll find lots more information about creating and using class styles on the Layers magazine website in the Dreamweaver tutorials section.)

8 SPECIFY A BORDER, V SPACE, AND H SPACE
To add a border to your video, enter the size you want in pixels in the Border field in the Property inspector. You can also add V Space and H Space (vertical and horizontal space, respectively). When you use H space and V space, you add margins to the top and bottom or left and right. If you define a style in CSS to specify margins and border, you’ll have more options and can choose to add margin space to any or all of the sides of the video, as well as change the color and style of the border.

9 USE PARAMETERS FOR ADVANCED SETTINGS
For more advanced options and settings, you’ll use the Parameters option in Dreamweaver and you’ll need to know the parameter options specific to QuickTime (or whatever video format you’re using). To open the Parameters dialog, click on the Parameters button in the Property inspector (remember, the video must be selected for these options to display in the Property inspector).

10 SET VIDEO TO LOOP WITH PARAMETERS
If you want your video to play in a continuous loop, use the Parameters dialog, enter “loop” as the Parameter and “true” as the Value, and click OK. Most parameters work this way with true being the setting to turn an option on, and false the setting to turn an option off. Thus, if you set the Parameter to “loop” and the Value to “false,” the video won’t loop.

11 TURN OFF AUTOPLAY
To add additional parameters, click the plus (+) sign at the top of the Parameters dialog and then enter each parameter and value on its own line. Another popular QuickTime parameter is Autoplay. To prevent the video from playing when the page loads, enter the Parameter “autoplay” with the Value “false.”

12 MORE PARAMETERS
You’ll find more parameters and Embed settings for QuickTime at www.apple.com/quicktime/tutorials/embed2.html. Another popular option is to include the video controller using the Parameter “controller” and Value “true.” To hide the controller, set the Value to “false.” And here’s an advanced tip: For the controller to display properly, you need to add 16 pixels to the Height of the video in the Property inspector. So the new Height in this example would be 496 pixels.

13 PRESS PLAY TO PREVIEW
Dreamweaver CS4 makes it possible to preview the video in the Dreamweaver workspace. Just select the video and press the Play button in the Property inspector and the video should play much as it would in a Web browser with the QuickTime plug-in. You can also preview your work by using the Browser preview option (File>Preview in Browser). (Note: You must have the QuickTime plug-in installed on your computer for the QuickTime video to play in a Web browser.)

1 [START WITH A SIMPLE BULLETED LIST]
Enter the text you want to use in your list and make sure to separate each item with a paragraph < p > tag, not a break < br /> tag. The Unordered List feature (Format>List>Unordered List) in Dreamweaver only works properly if it’s applied to elements separated by paragraph tags. If you try to format text with the unordered list and the bullets don’t appear before every item, it’s probably because they weren’t separated by paragraph tags. To fix the list, just delete any space between list items and press the Return or Enter key before each item in the list. Next, convert your list items to links (Modify>Make Link).

2 [CREATE NEW STYLE FOR LIST ITEMS]
To create a new style that will alter the look of each list item, you’ll want to create a style for the < li > tag. Choose Format>CSS Styles>New to create a new CSS rule. Under Selector Type, choose Tag and then select li from the drop-down list to the right of the Selector Name field (or type li into the field). Press OK to continue to the CSS Rule Definition dialog.

3 [CHANGE THE BULLET STYLE]
In the CSS Rule Definition dialog, choose the List Category on the left. Here you can change the style of the bullet by selecting any of the options in the List-Style-Type drop-down menu. If you prefer, you can replace the bullet with your own image by clicking on the Browse button next to the List-Style-Image field and selecting the image you want to use in place of the bullets. You can also remove the bullet completely by choosing None (as we did in this example). Click OK.

4 [STYLE LINKS IN AN UNORDERED LIST]
You can alter the way links display in an unordered list in much the same way you’d alter any other links on the page, and you can use compound styles (by choosing Compound for the Selector Type in the New CSS Rule dialog) to create link styles that only affect links within an unordered list. For instance, you can create a style named ul a, which will only affect the link tag when it appears within the unordered list tag. So you could remove the underline from all links that appear within unordered lists by choosing the Type category in the CSS Rule Definition dialog, and under Text-Decoration, click on the None checkbox.

5 [ADD SPACE BETWEEN BULLETED ITEMS]
The default HTML style for unordered lists places list items too close together for most designers, but it’s easy to add a little breathing room. Just create a new style for the li tag (as you did in Step 2), or edit your existing li style by double-clicking on the style name in the CSS Styles panel. In the CSS Rule Definition dialog, choose the Box Category and use the Margin and Padding settings to increase the space around the list items. In our example, we added 10 pixels of space to the Bottom of each list item.

6 [USE COLOR AND PADDING FOR BUTTONS]
You can create colored boxes around your links by defining a CSS rule for the active link, or a:link tag, that combines a Background-Color (such as the light blue shown here) with a Width (ours is set to 100 px) and Padding (5 pixels Top and Bottom and 10 pixels on the Left) in the Box Category. And here’s the trick that makes it work: In the Block Category, you need to set the Display option to Block. In this case, we used a compound style ul a:link so that links will only display this way if they’re contained within an unordered list.

7 [DEFINE DIFFERENT LINK STYLES]
A great way to create a rollover effect is to create a second link style for the hover link state, a:hover. And here’s another trick: Duplicate the a:link style you created in Step 6 by Right-clicking (PC: Option-clicking) on the style name, then choose Duplicate, and name the new style ul a:hover. You want all of the elements of the style to be the same (same Padding, Width, etc.) except, in this case, for the background color (see next step). Starting with a copy of the a:link style means all you need to change are the formatting options you want for the hover style.

8 [DEFINE THE A:HOVER STYLE]
This time, we changed the Background-Color in the a:hover style to yellow so that when a visitor to the site rolls their cursor over a link, the only effect will be that the background color changes from light blue to yellow. For more complex rollover effects, use different background images in the Active link and Hover link styles. You can also change the font color, font face, and other formatting options to alter the text style.

9 [PREVIEW TO TEST ROLLOVER EFFECTS]
In order to test any styles you create that are triggered by a rollover, you’ll need to preview the page in a Web browser (File>Preview in Browser). As you can see here, when a cursor rolls over the light blue links, they turn yellow, because that’s the background color we defined in the a:hover style.

10 [REMOVE INDENTING BY STYLING UL TAG]
You can increase, decrease, or remove the amount of indenting by defining a style rule for the ul tag. Remember, the HTML for an unordered list includes the < ul > and close tag, which surrounds the entire list, and the < li > tag, which sets off each list item. Thus, if you define a style for the ul tag (just as you did for the li tag in Step 2), you can use the Box category to set the Padding to 0 and the default indenting will be removed. Similarly, you can add indenting by adding Padding to the Left.

11 [USE BORDERS TO CREATE DIVIDING LINES]
To add a line between each list item, define or edit the li tag and set only the Bottom options in the Border Category. Similarly, you can use borders only on the Left, Right, or Top to create dividing lines. Make sure that Margins and Padding in the Box Category are set to 0 to remove any space between the list items, and set the Width to 110 px (as shown here).

12 [TURN LIST FROM VERTICAL TO HORIZONTAL]
The trick to making an unordered list display horizontally across a page is to create or edit a style for the list item < li > tag and in the Block Category of the CSS Rule Definition, set Display to Inline. Note: If you’ve set Display to Block in the style for the link tag, you’ll need to remove the block setting (i.e., the Display field should be empty) for the links to appear horizontally. You can alter the space between links, background, etc. by changing the Padding and color settings.

13 [USE COMPOUND STYLES]
If you want to use different formatting options for lists of links on the same page, consider surrounding each list with a div tag that includes an ID style, and then use that ID style as part of the compound list. For example, you could use a div with ID style #navbar around your main navigation links and then a div with an ID style #sidebar around another list you want formatted differently on the page. In this case, you’d create compound styles, such as #navbar ul and #sidebar ul, respectively.

1 [COMBINE BACKGROUND IMAGES TO ADD DEPTH]
Background images are a great way to add decorative elements—such as textured backdrops, gradients, and borders—to your webpages. You can create rich, seemingly layered, designs by combining background images in the body, as well as div and other tags. Keep in mind, these aren’t really layers like you’d find in Photoshop, and I’m not using the Layer tag that was included in earlier versions of Dreamweaver. What you see in this example is a background image positioned in a div tag with an ID style that centers it on the page.

2 [CENTER A BACKGROUND IMAGE ON A PAGE]
You can still add a background image to the entire body of a webpage, but don’t insert it into the HTML body tag where it will just repeat and tile down the screen. Instead, create a new CSS style for the body tag and use the CSS Rule Definition dialog to choose alignment options. Using CSS, you can control whether the image repeats on the x or y axis (across or down the page), or prevent the image from repeating at all. You can also center your background in the middle of the page.

3 [BACKGROUND COLORS WITH BACKGROUND IMAGES]
You can set background colors as well as a background images and combine them to create seemingly layered designs. In this example, the background color of the page was set to a dark gray and then an 1100 pixel-wide image was inserted using a CSS body tag style to center it on the page. On a wide monitor, you can see the color behind the background image, but on a smaller screen the background color may be cut off. Designing a page with backgrounds this way helps create the illusion that the design fills the screen on big monitors.

4 [ADD BACKGROUND IMAGE TO A CONTAINER DIV]
One of the advantages of the CSS Box model, and the practice of building a page with div tags, is that you can add multiple background images to a page by placing them in different divs on the page. Here, adding to the last step, a div tag has been inserted with an ID style #container that’s set to 950 pixels in width. It was centered by setting the Left and Right Margins to Auto, and then a background image was inserted that’s also 950 pixels wide. The height of the #container div is determined by its content.

5 [LONG BACKGROUNDS FOR EXPANDABLE CONTENT]
If you’ve done much CSS development, you’ve probably learned that it’s best not to specify a height on any div or other tag that will contain text. That’s because most browsers make it possible for users to enlarge or reduce text and you want to ensure that the page layout will adjust to the content and not cut off any text. With that in mind, if you’re using a background image, it’s good practice to make sure the background is longer than your content so that as content expands down the page, the background will still cover the full area.

6 [REPEAT BACKGROUND TO FILL PAGE]
Of course you can still have a background that fills an entire page by repeating, or tiling, across and down the page. With CSS, you can use repeating images in sidebars, banners, footers, or any other area of the page, as well. Experiment with the effects of using a small image that repeats. If you smooth or match the edges, you can get rid of the edges you see in this example and create a seamless effect that looks like one big image. Here the repeating image fills the entire page because it’s included in the body tag style.

7 [REPEAT BACKGROUNDS IN TARGETED AREAS]
This design example is a bit busy, but it demonstrates how you can repeat a background in a single div, not just the entire page. In this case, you can see that the sidebar on the right has a repeating red tiled background. A different background that looks like a giant sheet of parchment paper has been inserted into the main #container div, which is centered on the page. For this, the body background has been set to white to make it appear that the parchment paper, which has a white background, is floating on the page when displayed on larger monitors.

8 [USE LARGE BACKGROUNDS IN TARGETED AREAS]
Here you see the same layout used in the last step, but the backgrounds have been changed: a smaller version of the light parchment image in the background of the sidebar and the darker red image in the background of the #container div. Both background image styles have been set so they won’t repeat, and images have been used that were big enough to fill their respective sections of the page. Now text and other images can easily be added inside the divs so that they’ll appear to be layered on top of the background images.

9 [USE BACKGROUNDS IN CSS NAVIGATION BARS]
There are many advantages to using text instead of images for links (including better accessibility and SEO), but that doesn’t mean you can’t make your links look like images. By using CSS to place background images behind your text links, you can create rich effects using gradients, patterns, and anything else you can imagine. In this example, a small image has been repeated with a gradient effect across the x axis of a div to create the background for this site’s main navigation links. For perspective, the same image used in the background has been placed just above the navigation bar.

10 [FRAME YOUR IMAGES WITH BACKGROUNDS]
To put a frame around a photo, consider this trick: Create a div with a style that includes a background image, and then insert the photo into the div. The trick is to use margin and padding settings to align the image where you want it within the frame in the background. In this example, you see the red background in the main #container div, and then a second div inside it with the ID #photo-background. That style contains a background image (it looks like a piece cut from a strip of film), as well as margin and padding settings to position the photo over the background.

11 [USE CSS TO CREATE FRAMES]
This picture frame was created entirely with CSS. A style was defined with a thick, dark brown border and a light background color, and margins and padding were used to control the space between the photo and border. A thin black frame was also included around the photo itself. If you make a frame like this a class style, it can be applied to any div, and can be used multiple times on the same page. Because the frame is created with CSS, it automatically adjusts to any image size and can be applied to as many images as you want.

12 [REPLACE LIST BULLETS WITH IMAGES]
Another great way to use images in CSS is to replace the boring bullets in the list item tag. Although this isn’t a background image, I include this tip because it’s a nice addition to the tool chest of any Web designer who wants to use more design elements. Changing the bullet is as simple as creating an optimized JPEG, GIF, or PNG file in the size you want for the bullets in your design. Then create a new style for the < li > or list item tag and use the CSS Rule Definition dialog to add the image in the List settings.

13 [TESTING YOUR WORK]
To fully test any CSS Layout, you need to preview your page in as many Web browsers as you can. Not all browsers support CSS background, margin, and padding styles equally and the preview features in Dreamweaver can’t replicate all of the ways your page may be displayed. Keep in mind that not all images should be used in the background. Photos, logos, and other graphics that add meaning are best inserted into your pages as inline elements where they can include Alt text. And remember, if you use an image as a background, you can’t turn it into a link.

1 TABLES STILL HAVE THEIR PLACE
Before explaining why you shouldn’t use tables to create page layouts, it’s important to acknowledge the one remaining legitimate use of tables—tabular data. If you’re creating a page with consistent data split into columns and rows (i.e., an Excel spreadsheet or the contents of a database), then you can still use tables; just make sure your tables are accessible by using the table header tag ( ) and including descriptive text and other accessibility features. For more on creating tables, see Laurie Brown’s “Creating Accessible Tables for Data Using Dreamweaver 8” (www.layersmagazine.com/dreamweaver-accessible-tables.html). Although written for Dreamweaver 8, her advice holds true in CS3 and CS4.

CREDIT: JANINE WARNER

2 STUDY CODE IN OLD DESIGN FIRST
Before redesigning an old webpage, use Code or Split views in Dreamweaver to study the code. If the site was built with tables, it’s likely to have other old tags that are no longer recommended, such as the font tag shown here. To ensure your pages meet contemporary Web standards, get rid of font tags (and other deprecated code) while you’re at it. The font tag is best replaced with standard HTML tags and CSS. For example, you could use heading tags and then create a CSS tag style to change the font, color, and size.

3 USE DIV TAGS AND CSS IN PLACE OF TABLES
Think of HTML div tags as the building blocks of good CSS layouts. Use div tags to create boxes for all your content, and then create CSS styles that define the size, alignment, margins, padding, and borders of those boxes. Instead of merging and splitting cells to create designs using tables, you can create styles that align columns to the left or right of a page and precisely define margin and padding space on any or all sides of each div. Note that div tags are all but invisible unless you create borders. Turn on CSS Visual Aids to better see what you’re doing.

4 CREATE DIV TAGS FOR CONTENT
To re-create a design with CSS instead of tables, start by creating a series of div tags. Click on the Insert Div Tag icon in the Common Insert panel, or choose Insert>Layout Objects>Div Tag. Using the border settings, you can create borders on any or all sides of a div tag. Tip: Defining a border on only one side of a div is a great way to create dividing lines between columns or other elements. Use margin and padding settings to define the space between borders.

5 CREATE ID STYLES FOR DIVS
As you insert div tags in Dreamweaver CS3 and CS4, you have the option of defining styles at the same time. I like to create a style for each div tag as I create them, but usually define the styles later. You want to insert a div tag for each of the content areas of your page. For example, I created a div tag and a corresponding ID style named #container to surround all of my content and then created separate div tags for the top section, left and right columns, and the footer inside the #container div. (Note: ID style names always start with #.)

6 COPY-AND-PASTE CONTENT
Before you create styles for all your div tags, it’s often helpful to add a little content so you can better see what you’re doing as you create the page design. Most designers simply copy-and-paste text, images, and other content from the old pages into the new ones, which is fine as long as you’re careful not to bring along any old deprecated code (like the font tags shown in Step 1). Consider using the Edit>Paste Special option to add text without any formatting and then create styles to handle formatting in the new design.

7 CREATING ID STYLES FOR DIV TAGS
With your div tags and some content in place, it’s time to define your ID styles. The ID selector in CSS is limited to use only once on a page, which makes it ideal for the main content areas of a page. Using CSS, you can control the width, alignment, padding, and margins, which all add up to great design control. So you could define the style for the left column to be 300 pixels wide with right and left margins of 50 pixels each (to separate it from the left side of the page and the right column) and set the Float to align left.

8 USE CLASS STYLES FOR RECURRING FEATURES
Class styles are ideal for recurring features, such as the captions under each image. Thus you could create a Class style called .caption that defines the font, size, and color of the text. (Note: Class style names always begin with a period or dot.)

9 USE TAG STYLES TO PRESERVE HTML CODING
Whenever possible, it’s best to use standard HTML tags, but that doesn’t mean you can’t control the formatting options with CSS. For example, there are many advantages to formatting a headline with the h1 tag (search engines put greater value on words in an h1 tag, and heading tags convey the hierarchical importance of content on a page). But you don’t have to settle for all your headlines displaying in Times, 24 pt, bold text. By creating a style using the tag selector, you can change the text formatting option for the h1 tag, and any other tags you use.

10 USE EXTERNAL STYLE SHEETS
When you create styles in Dreamweaver, you have the option of saving them in an internal style sheet (meaning the styles are saved in the same document), or in an external style sheet (a separate file that can be linked to one or more pages in a website). External style sheets offer the advantage that you can use the same styles on many pages and that if you ever want to change a style, you can make the change once in the external style sheet and automatically apply it to all of your pages.

11 SAVE TIME WITH TEMPLATES
Once you’ve redesigned your page using CSS, create a template with your new layout. Templates and CSS play well together and combine to make creating new pages for your site much easier. If you redesign your site, you can simply edit the style sheet to change styles and edit the template to make changes to the HTML tags and the page content. Tip: If you edit a template, you change all of the pages created from it and all need to be uploaded to your server. If you change an external style sheet, you only need to upload the style sheet to the server.

12 COMPARE TABLES AND CSS LAYOUTS
To help you appreciate that you can re-create any tables design using CSS, the layout shown on the left was created with tables, the one on the right was created with CSS. In the CSS version, I used the margin settings to create columns that better align the text with the images so that the text doesn’t extend beyond the width of the photos, as it did in the layout that uses tables. Using CSS, you can create much more complex and precise page designs.

13 TEST YOUR WORK IN DIFFERENT BROWSERS
To fully test a CSS Layout, you’ll need to preview your page in as many Web browsers as possible, including Safari, Internet Explorer, and Firefox. Ideally, you’ll test it in many different versions of each of those programs. Don’t have all those browsers on your own computer? Consider using the BrowserShots site to test you pages. Simple enter any URL into http://BrowserShots.org and you’ll be able to see how the page will look in more than 75 different browsers on Mac, Windows, and Unix operating systems.

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

1 INSERT A DROP-DOWN MENU
To insert a Spry menu, first chose Spry from the drop-down list at the top of the Insert panel (or in the Classic workspace layout, open the Spry Insert bar at the top of the workspace by clicking on the Spry tab). Place your cursor where you want to create the menu in your webpage and then click on the Spry Menu Bar icon.

2 CREATE HORIZONTAL OR VERTICAL MENUS
As you insert a Spry Menu Bar, you have the option to create a menu that displays horizontally across your page with submenu options that drop down below the menu bar, or a vertical menu bar with submenu options that open to the right of the main menu items. You must make this choice during the setup process by clicking on the corresponding button and then clicking OK to insert the menu. Once the menu bar is inserted, you can’t change its orientation.

CREDIT: ©ISTOCKPHOTO.COM

3 FIND THE STYLE YOU WANT TO EDIT
Open the CSS Styles panel (Window>CSS Styles). Click the All button at the top of the panel and twirl open SpryMenuBarHorizontal.css. Click-and-drag the top of the Properties pane in the CSS panel (shown here) until you can see the list of your styles and their defined rules. A good way to start is to click on each of the style names in the All Rules list and review their settings in the Properties pane. Look for color, font, and size settings, which you’re likely to want to change. In the next few steps, we’ll cover several of these styles specifically.

4 ADJUST ALIGNMENT
Like most options for a horizontal menu, the alignment is controlled by a CSS style. By default, the horizontal menu aligns to the left of the page, but you can align it to the right by changing the definition of the style named, “ul.MenuBarHorizontal li.” Click on the name of the style in the CSS Styles panel and then in the Properties pane, click just to the right of the Float field to use the drop-down list, and select Right instead of Left. If you prefer, you can double-click the style name to open the CSS Rule Definition dialog.

5 CHANGE ROLLOVER COLORS
The trick to changing the colors of the drop-down menu items is that in CSS, these colors are assigned to the link styles, which have multiple states. To change the background and text colors of links as they display when a page first loads, you’ll need to edit the style named, “ul.MenuBarHorizontal a.” To change the colors that appear when you roll a cursor over a link, edit the background and text colors in the style, “ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu….” (Note: If you created a vertical menu, these style names will include “Vertical” instead of “Horizontal.”)

6 TEST YOUR WORK EARLY AND OFTEN
Many changes to these styles are only visible when you view the page in a Web browser or in the new Live View option (available in Dreamweaver CS4). If you click on the Live View button at the top of the workspace, you can preview the page and test interactive effects, such as rollovers, without leaving Dreamweaver. This is a handy way to check things, such as whether the rollover color is set the way you want it. Don’t be afraid to experiment; you can always change the style definitions back if you don’t like the way something looks.

7 CHANGE THE FONT FACE AND SIZE
By default, a Spry drop-down menu will display in the font specified in the body style—or in the closest parent style—for the page. You can alter your drop-down menus so that the font is different than other text on the page by adding a font style to the style named, “ul.MenuBarHorizontal.” Double-click on the name of the font to open it in the CSS Rule Definition dialog (shown here) and then enter a font face or choose a font collection from the Font-family drop-down menu.

8 CHANGE THE WIDTH OF MENU ITEMS
You can change width settings in the style named “ul.MenuBarHorizontal li.” By default, the width is set to 8 em. For those not familiar with the em option, it specifies sizes based on the size of the letter M in the font face used in the style. This flexible option is a great way to set the width of these link boxes to best fit their contents. If you have longer names and they wrap, you can increase this size, for example to 10 em, to get all of the text on one line. A little goes a long way with em sizes.

9 CHANGE THE WIDTH OF SUBMENU ITEMS, TOO
If you want the drop-down items to display in the same width as the main menu items, you’ll have to adjust the Width setting for the drop-down list in two other styles. Again, a little goes a long way when adjusting em sizes, and you’ll notice a slight difference with these two. If you change the main link width from 8 em to 10 em, you should change the 8.2-em Width setting to 10.2 in the styles named “ul.MenuBarHorizontal ul” and “ul.MenuBarHorizontal ul li.”

10 EDIT MENU ITEMS IN THE PROPERTY INSPECTOR
When a menu bar is inserted, Dreamweaver includes placeholder text for several menu items and submenu items, such as Item 1, Item 2, etc. To edit menu and submenu items, click the blue Spry Menu Bar tab (at the top-left of the menu in the workspace) to select it and then use the settings in the Property inspector. Simply click on the menu item or submenu item that you want to change and then select the text in the Text field on the right and then type over it to replace it.

11 ADD MENU ITEMS
To add menu or submenu items click the plus (+) sign at the top of the corresponding menu field, or click the minus (-) sign to delete an item. For example, you can add a third-level menu item by selecting a submenu item and then clicking the plus sign above the third menu field. Be sure to change or add text in the Text field in the far right of the Property inspector.

12 CREATE AND EDIT MENU LINKS
To turn any menu item into a link, select the item in the Property inspector and enter the URL in the Link field. You can also use the browse button (hint: it looks like a yellow file folder) to locate and select any file in a website and set the link automatically. If you’re setting a link to a top-level menu item, you can also select the text in the main workspace and set the link in the Property inspector, or use the Hyperlink icon in the Common Insert menu.

13 PREVIEW IN A BROWSER TO TEST
To fully test a drop-down menu, you’ll need to preview your page in a Web browser, such as Safari, Internet Explorer (IE), or Firefox. Ideally, you should test using all three of these browsers (and others) to ensure that the menu works well for all your visitors. Drop-down menus can be especially tricky when it comes to displaying in different Web browsers. If you’re having trouble with IE and you’re viewing the menu on your local computer, make sure you click to Allow Blocked Content at the top of the browser window.

1 NEW LOOK
As soon as you launch the CS4, you’ll notice the new interface, which is now more consistent with other programs in the suite, and is still quite similar on the Mac and PC (shown here). According to Adobe, the gray color is intentional: The idea is to cut down on distractions and let the colors of your beautiful Web designs dominate the screen. And if you miss those cute little colored icons, just run your cursor over any one of them and the color will appear as your cursor hovers over it.

2 MORE WAYS TO CUSTOMIZE WORKSPACE
Dreamweaver has always made it easy to switch between different workspace layouts, including a preset optimized for designers that’s different from the one for developers. In CS4, you’ll find even more options and more ways to customize your workspace, including the ability to compact the panels at the side of the screen, making more room for your document. And you can save your customized workspace layouts to use again anytime, just as you could in CS3.

3 WHERE’S THE INSERT BAR?
If you loved the convenience of the Insert bar at the top of the workspace, you can always click-and-drag it back there, but before you do, try it out in its new location as a panel at the top of the panels section (located on the right in the Designer workspace and on the left in the Developer workspace). Keeping all of your tools in one place has some advantages, and you can now choose to view the icons alone or icons with descriptions (shown here), which provides a handy reference for each tool.

4 PROPERTY INSPECTOR HAS SPLIT PERSONALITY
To cut down on confusion when creating CSS, the Property inspector at the bottom of the workspace now has two modes: CSS and HTML. This division makes it faster and easier to create and use styles as you work, but it takes a little getting used to if you’re the kind of designer who simply adds formatting from the Property inspector without worrying about styles. If you’re that kind of designer, this change can save you from inadvertently creating styles with names like Style1 and Style2 and help make it more intuitive to create styles intentionally as you create your designs.

5 LIVE VIEW
CS4’s new Live View makes it possible to render a page as it would be displayed in a browser so you can see AJAX and other interactive features in action without leaving Dreamweaver. Live View uses the WebKit rendering engine (the same open source option used in Safari). Not only does this save you from having to launch a browser to test these kinds of features, you can also disable JavaScript as you use Live View to do things like freezing a drop-down menu in action so you can more easily edit the CSS that controls its display.

6 CODE NAVIGATOR
The new Code Navigator is a handy way to check your CSS code as you work. You can Control-click (PC: Right-click) anywhere in a webpage and choose Code Navigator to open a small window that details the CSS on the page. Roll your cursor over any of the listed styles and you’ll see a little pop-up with details of the style rule. Double-click on a style name and Dreamweaver takes you to the style in the CSS code, making it quick and easy to edit styles as you work in Design view.

7 RELATED FILES
Just above the workspace, you’ll find the new Related Files bar with a list of associated files and scripts for any open documents, including external CSS files, Server Side Includes, JavaScript files (such as those created with Dreamweaver’s Spry features), and other programming files. Not only is this a handy reference that can help you keep track of all the files in your site, it’s also a shortcut. Click on any filename to automatically open the file, and you can edit and apply the changes automatically to the HTML page you’re working on.

8 SPRY
The Spry menu was added in Dreamweaver CS3, but you’ll find new additions and enhancements in CS4. Spry makes it easier for nonprogrammers to add interactive AJAX features, which combine CSS and JavaScript, to create drop-down menus, collapsible panels, form validation, and many other interactive features.

9 BETTER INTEGRATION WITH SMART OBJECTS
If you’re a former GoLive user, you’ll be pleased to find that Adobe added smart objects to CS4. Smart objects make it possible to drag-and-drop a PSD file into a webpage in Dreamweaver and then use the Image Preview dialog (shown here) to optimize and resize it on the fly. Another great benefit is if you update the original PSD file later, Dreamweaver adds a little red arrow to the optimized version in your webpage. Click the Update from Original button in the Property inspector and the changes are automatically applied.

10 VERTICAL SPLIT VIEW
Normally, if you click on the Split view icon at the top of the workspace (circled), the code and design views will be split horizontally. If you would like to see the Code and Design views side by side, try using the Vertical Split view (View>Split Vertically). If you’re not familiar with the integration between Code and Design views, here’s a tip: Click on any element, such as the thumbnail photo selected here, and Dreamweaver automatically highlights the corresponding HTML code in Code view.

11 SUBVERSION INTEGRATION
Previous versions of Dreamweaver included a Check In/Check Out feature to prevent designers from overwriting each other’s work by requiring that a page be checked out (thus locked to other designers) before it could be worked on. The idea was great in principle, but the system was clunky and slow in practice and many designers simply turned the feature off. Although I haven’t had time to test it fully yet, the integration of Subversion software to handle this kind of file management, as well as versioning and rollbacks, is a promising addition to CS4.

12 MORE TIPS FOR CODERS
If you prefer writing the code yourself, Code Hints are your friends. In the Dreamweaver CS4, you’ll find additions to the Code Hints for AJAX and JavaScript. As you write in Code View, these hints automatically appear, making it easy to complete or verify your work.