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.

This video requires Adobe Flash Player.

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.

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.