Adobe Dreamweaver CC

Style the header and navigation menu

In the third part of this series, learn how to style the page with CSS, change fonts and colors, and create a two-column layout. (Try it, 60 min)

FromDavid Powers

Part 3: Style the header and navigation menu–Style the page with CSS, change fonts and colors, and create a two-column layout.

What do I need?

Get files Sample files to practice with (ZIP, 335 KB)

Get files Resulting files (ZIP, 336 KB)

Get PDF Dreamweaver cheat sheet

What will I learn?

Welcome to part three of this tutorial series showing how to build a simple, standards-compliant website in Dreamweaver CC. In the first two parts, you defined a Dreamweaver site, built the HTML structure, and added the text, images, and links for the home page of Bayside Beat, a fictitious guide to San Francisco. In this part, you'll style the page with Cascading Style Sheets (CSS), change fonts and colors, and create a two-column layout. Dreamweaver's CSS Designer, used in conjunction with Live view, offers a visual way of styling web pages. To use it effectively, it helps if you have a basic knowledge of CSS properties. However, don't worry if you're completely new to CSS. Everything will be described as you go along.

Continue working with the Bayside Beat website you created in Parts 1 and 2 of this tutorial series. If need to start with a fresh set of files, download first_website_pt3_begin.zip from the link at the top of this page, and use the bayside_beat folder as your site root.

Note: This tutorial is written specifically for Dreamweaver CC. The CSS Designer is not available in earlier versions of Dreamweaver.

Introducing the CSS Designer

Now that you have all your content in place, the next step is styling the web page with CSS. CSS stands for cascading style sheets—a collection of formatting rules that control the appearance of content on a web page. The CSS Designer consolidates most style management functions that were spread over different dialog boxes and panels in previous versions of Dreamweaver. As Figure 1 shows, the panel consists of four panes.

Figure 1. The CSS Designer consolidates CSS management in four panes.
Figure 1. The CSS Designer consolidates CSS management in four panes.

The role of each pane is as follows:

  • Sources Lists all sources of styles that apply to the current page, including external style sheets, embedded <style> blocks, and inline styles (using the style attribute in an opening HTML tag).
  • @Media Use this pane to manage media queries that apply styles selectively depending on such factors as browser width, orientation, and resolution. This is an advanced subject beyond the scope of this tutorial series.
  • Selectors Use this pane to manage the style rules for the current page. The list of selectors can be filtered by searching for any part of a selector name.
  • Properties Use this pane to set the properties for individual style rules, using visual tools where appropriate. All CSS properties supported by modern browsers are listed, organized in five sections: Layout, Text, Border, Background, and Others.

The best way to understand the CSS Designer it is to use it in practice. However, it helps if you have a basic knowledge of CSS selectors. The instructions in this tutorial describe the role of each selector used to style the Bayside Beat web page, but for more details, see my two-part tutorial series, Getting to know your CSS selectors.

Attach an external style sheet

Using CSS to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file, the external style sheet.

You can also put CSS rules in the head section of a document, or inline with the code itself. However, an external file is the most efficient way of using CSS, because changes made to rules in an external style sheet are automatically applied to every page attached to it. Initially, only index.html will be attached to the style sheet; but when you create the content for sightseeing.html in Part 5 of this tutorial series, it will share the same style rules.

  1. The CSS Designer is easier to use in the Expanded workspace because the Properties pane occupies a column of its own. Open the Workspace switcher at the top-right of the Dreamweaver interface, and select Expanded, as shown in Figure 2.
Figure 2. Switching to the Expanded workspace.
Figure 2. Switching to the Expanded workspace.

Note: The Workspace switcher is in the same location in the Mac version of Dreamweaver CC when the Application Frame is turned on. If you have turned off the Application Frame on a Mac, you can switch workspace by selecting Window > Workspace Layout > Expanded.

  1. If necessary, double-click the Tab of the Files or Insert panel to close it. For maximum efficiency, the CSS Designer needs to be expanded to its full height.

  2. Click the plus button at the top-right of the Sources pane, and select Create A New CSS File from the menu that opens (see Figure 3).
Figure 3. The CSS Designer has options for creating a new style sheet, attaching an existing one, or defining styles inside the current page.
Figure 3. The CSS Designer has options for creating a new style sheet, attaching an existing one, or defining styles inside the current page.
  1. In the Create a New CSS File dialog box, click the Browse button to open the Save Style Sheet As dialog box.

  2. Create a new folder called styles in the bayside_beat folder, and navigate inside the folder you have just created.

  3. Enter main.css in the "File name" text field (Windows) or the Save As text field (Mac), and click Save. This returns you to the previous dialog box, which should now look like Figure 4.
Figure 4. The new style sheet will be saved as main.css in the styles folder.
Figure 4. The new style sheet will be saved as main.css in the styles folder.
  1. Leave the other options in the Create a New CSS File dialog box at their default values, and click OK.

  2. The new style sheet should be listed in the Sources pane, as shown in Figure 5.
Figure 5. The style sheet is now listed in the Sources pane.
Figure 5. The style sheet is now listed in the Sources pane.
  1. In Code view, the style sheet should be attached using the <link> tag, as shown on line 6 of Figure 6.
Figure 6. Dreamweaver has generated the code to attach the style sheet to the page.
Figure 6. Dreamweaver has generated the code to attach the style sheet to the page.
  1. You don't need Split view open while styling the web page, so click the Design button at the top-left of the Document window to maximize the display (see Figure 7).
Figure 7. Close Split view by clicking the Design button in the Document toolbar.
Figure 7. Close Split view by clicking the Design button in the Document toolbar.

Create basic styles

Let's begin by setting the background colors of the page and wrapper <div>, changing the basic font, and centering the page content.

  1. Make sure main.css is selected in the Sources pane of the CSS Designer.

  2. Click the plus button at the top-right of the Selectors pane to create a new selector. Dreamweaver opens an editable text field at the top of the Selectors pane with a suggested selector, as shown in Figure 8.
Figure 8. Adding a new selector in the CSS Designer.
Figure 8. Adding a new selector in the CSS Designer.

Note: The value of the suggested selector depends on the current selection in the Document window. Although this can be useful when styling a particular part of a page, it's usually quicker to delete the suggested value and use code hints to build the selector yourself.

  1. Overtype the suggested value with bo. Code hints display the names of HTML elements that contain that combination of characters. The first one, body, is highlighted with a white background (see Figure 9).
Figure 9. The CSS Designer offers code hints for selectors.
Figure 9. The CSS Designer offers code hints for selectors.
  1. Press Enter or Return twice to create a selector for the <body> element.

    Note: Pressing Enter (Return) once selects the highlighted value and inserts it in the editable text box. You need to press Enter (Return) again for the CSS Designer to create the selector. Although this might seem redundant, many selectors are created from multiple values, so you often need to continue typing after inserting a value from code hints.

  2. With the new body rule selected in the Selectors pane, the Properties pane displays the CSS properties that you can apply to it. As Figure 10 shows, there are five icons at the top of the pane, one for each of the sections. The property names are displayed in black. Alongside each property, its default value is displayed in light gray italic text, indicating that the property hasn't been set in the current style rule.
Figure 10. The icons at the top of the Properties pane make it easy to find related properties.
Figure 10. The icons at the top of the Properties pane make it easy to find related properties.

It's important to realize that browsers often override these values with defaults of their own. For example, all browsers add an eight-pixel margin around the <body> element. For most designs, it's common to reset this to zero.

Click the chain icon in the center of the margin visual tool (it's in the Layout section at the top of the Properties pane) to set the margin on all sides to the same value. Then click one of the zeros, and click away from it to set the value to 0px on all sides. The property name turns bold, and the values in the margin visual tool turn black to indicate that the property and its values have been set (see Figure 11).

Figure 11. The margin on all four sides has been set to zero.
Figure 11. The margin on all four sides has been set to zero.
  1. Click the Text icon at the top of the Properties pane to scroll the text properties into view.

  2. Click "undefined" next to the color property, enter #151515 in the text field that opens, and press Enter (Return) to apply the value. The color box turns a very dark shade of gray. It's almost black, and will be used for the color of the main text. Most designers agree that pure black text on white is less easy on the eye than very dark gray.

  3. Click "default font" next to the font-family property (it's immediately below color) to open a menu of font stacks. These are lists of commonly available fonts on Windows, Mac OS X, and Linux. By default, browsers rely on the fonts installed on the user's computer. The browser tries each one in the font stack in turn until it finds the first one available.

    Select the font stack that begins with Gill Sans (see Figure 12).

Figure 12. The font stacks are combinations of the most widely available computer fonts.
Figure 12. The font stacks are combinations of the most widely available computer fonts.

As soon as you set the font-family property, the text in Design view updates to reflect the change.

  1. Click the Background icon to bring the background properties into view.

  2. Set the background-color property to #EFF5F8 by clicking "undefined," and typing the value in the text field that opens. The background turns pale blue.

  3. Create a new selector for the wrapper <div> by clicking the plus button at the top-right of the Selectors pane, and typing a hash to replace the suggested value. All ID selectors begin with a hash followed by the name of the ID. Code hints display a list of all the IDs used in the web page (see Figure 13).
Figure 13. The CSS Designer's code hints list all the IDs in the page.
Figure 13. The CSS Designer's code hints list all the IDs in the page.
  1. Select #wrapper by typing w, or by using the arrow keys or mouse. Press Enter (Return) twice to create the selector (once if you use the mouse to select the value).

  2. The wrapper <div> will have a white background, so click the color box next to background-color, and use the eyedropper tool to select white from the color swatches.

    At the moment, the wrapper <div> covers the full width of the page, so the pale blue background disappears temporarily.

  3. Click the Layout icon to move back to the top of the Properties pane.

  4. Click "auto" next to the width property, and select the percentage sign from the menu that opens (see Figure 14).
Figure 14. The menu lists all valid CSS units of measurement.
Figure 14. The menu lists all valid CSS units of measurement.
  1. When you change the unit of measurement, the CSS Designer automatically sets the value to zero, and highlights the number ready for editing. You can type the value directly. Alternatively, you can click the number and drag to the left or right to set its value. This is a technique known as scrubbing, and is common in other Creative Cloud programs. Scrubbing to the right increases the value. Scrubbing to the left decreases it.

    Choose whichever method suits you best to set the value to 100%.

  2. Use the same technique to set the values of min-width and max-width to 740px and 1000px respectively.

    Note: In CSS, there must be no space between the number and the unit of measurement. The CSS Designer displays the unit of measurement separately for ease of reading. If you add a space when entering a value manually in the Properties pane, Dreamweaver deletes the space, and uses the correct syntax in the style sheet. As a reminder of the correct syntax, these instructions omit the space between the number and unit of measurement.

  3. As long as the Document window is more than 1000 pixels wide, the pale blue background should reappear on the right. To center the wrapper <div>, click "px" on the left and right of the margin visual tool, and select auto from the menu (see Figure 15).
Figure 15. Setting the horizontal margins to auto centers an element that has a width.
Figure 15. Setting the horizontal margins to auto centers an element that has a width.
  1. You need to create a style rule for the image of the Golden Gate Bridge in the hero <div>, so click the plus button at the top-right of the Selectors pane.

  2. Type # to replace the suggested value, and select #hero from the code hints. Enter a space, type im, and select img from the code hints. Press Enter (Return) to create the #hero img selector. This is a descendant selector that styles images inside an element with the ID hero.

  3. Set the max-width property to 100%. Because you deleted the width and height of the image of the Golden Gate Bridge in part 2, the image will now automatically scale when the browser is less than 1000 pixels wide.

  4. Click the middle viewport icon in the status bar at the bottom of the Document window, as shown in Figure 16, to resize the viewport to tablet size (768px wide).
Figure 16. Use the viewport icons to change the size of the Document window.
Figure 16. Use the viewport icons to change the size of the Document window.
  1. Click the third viewport icon to resize the width of the Document window to 1000px. The image of the Golden Gate Bridge should scale in proportion to the different widths.

  2. Select File > Save All Related Files to save both the HTML page and the style sheet.

Use an Adobe Edge Web Font 

As explained earlier, browsers normally rely on the fonts installed on the user's computer. For many years, this restricted the range of fonts available to web designers. To use a non-standard font, it was necessary to embed the text in an image, which not only increased the download size, but made the text inaccessible to search engines and assistive technology for the blind.

Fortunately, this situation has changed recently thanks to the availability of a wide range of downloadable fonts. Dreamweaver CC incorporates Adobe Edge Web Fonts,  a collection of more than 500 free fonts hosted on Adobe servers that can be used in your websites. All you need to do is to select the fonts you want to use, and Dreamweaver does the rest, generating a link to a remote JavaScript file that downloads the fonts to the browser when your page is viewed.

In this section, you'll select Source Sans Pro—an open source font designed by Adobe to be legible both in short labels and in longer passages of text—and apply it to the headings in the Bayside Beat home page.

  1. Select Modify > Manage Fonts. This opens the dialog box shown in Figure 17.
Figure 17. The Manage Fonts dialog box gives you access to a wide range of fonts.
Figure 17. The Manage Fonts dialog box gives you access to a wide range of fonts.
  1. The icons down the left side of the dialog box let you filter the available fonts according to their style or suitability for headings or longer passages of text.

    You can also search for fonts by name. Start typing source in the search field at the top of the dialog box.

  2. Select Source Sans Pro. A blue check mark indicates it has been added to your fonts, and will be available in all Dreamweaver sites (see Figure 18).
Figure 18. Selecting an Edge Web Font from the search results.
Figure 18. Selecting an Edge Web Font from the search results.
  1. Click Done to close the Manage Fonts dialog box.

  2. In the CSS Designer, make sure that main.css is selected in the Sources pane, and click the plus button at the top-right of the Selectors pane.

  3. You need to create a group selector for <h1> and <h2> headings. Separating individual selectors by a comma applies the same styles to each one.

    Enter h1, h2 in the editable text field, and press Enter (Return) twice.

  4. Click the Text icon in the Properties pane to access the text properties, and set the color property to #3399CC (sky blue).

  5. Click "default font" next to the font-family property, and select source-sans-pro (it should have been added to the bottom of the list of font stacks). Dreamweaver automatically sets font-style to normal, and font-weight to 200.

  6. Edge Web Fonts use multiples of 100 to specify the font-weight property. The default for Source Sans Pro is 200, which is the equivalent of Ultra Light. Click the value to display the other available weights, and select 600 (Semi Bold) from the menu (see Figure 19).
Figure 19. Edge Web Fonts specify font-weight in multiples of 100.
Figure 19. Edge Web Fonts specify font-weight in multiples of 100.

Note: Not all Edge Web Fonts are available in multiple weights. Many are available only in font-weight 400 (Normal).

  1. Although the font has changed in Design view, it's not Source Sans Pro. To view Edge Web Fonts, you need to turn on Live view by clicking the Live button in the Document toolbar (it's immediately to the right of the Design button). This renders the page in Dreamweaver's version of Webkit, the same browser engine as in Safari, Google Chrome, and most mobile browsers.

  2. With Live view active, an external JavaScript file is added to the Related Files toolbar, as shown in Figure 20.
Figure 20. The Edge Web Font is controlled by an external JavaScript file.
Figure 20. The Edge Web Font is controlled by an external JavaScript file.
  1. The JavaScript filename contains n2 and n6, indicating that both the 200 and 600 font weights are being downloaded. The 200 font weight is no longer needed, so select Commands > Clean Up Web Fonts Script Tag (Current Page) to remove it.

  2. Toggle Live view off and back on again to refresh the display and Related Files toolbar.

Running the Clean Up Web Fonts Script Tag command checks which web fonts and weights are being used on the current page, and removes unnecessary values. This ensures that only fonts that will actually be used are downloaded. Running the command also clears a known bug that prevents some web fonts from displaying correctly in Live view on Windows when multiple font weights are specified. The latest versions of browsers display multiple font weights correctly.

Remove the top gap 

When you turned on Live view in the preceding section, you probably noticed a strip of pale blue background appeared above the wrapper <div>, as Figure 21 shows.

Figure 21. A gap has appeared at the top of the page.
Figure 21. A gap has appeared at the top of the page.

What has happened is that the browser in Live view has added a top margin to the <h1> heading (it's also added one to the bottom, but that doesn't affect the current problem). When elements have adjacent vertical margins, the margins are combined to the height of the largest one. For example, if an element has a bottom margin of 30px, and the next element has a top margin of 15px, the combined margin is 30px, not 45px. In most cases, this is useful because it prevents large gaps. However, in this case, three adjacent margins have been combined. The top margin of the heading has been combined with the zero top margins of both the <header> and the wrapper <div>, pushing the <div> away from the top of the page.

In this section, you'll fix that problem, and add some text styles to the main heading. But first, you need to understand the difference between the margin and padding properties.

Understanding margin and padding

The margin and padding properties control the horizontal and vertical space around elements. In many situations, they can be used interchangeably, but there are important differences between them.

  • Adjacent vertical margins are combined, but padding is never combined.
  • If the element has a border, padding goes inside, and margins go outside.
  • The element's background stretches into padding, but margins are transparent.

This last point explains why you see a pale blue strip at the top of the page. The heading's margin has combined with those of the <header> and wrapper <div>, and the background of the <body> element is showing through the transparent margin.

Style the main heading 

To get rid of the gap at the top of the page, you need to set the top margin of the heading to zero. You'll also increase the font size, center the text, and convert it to uppercase.

  1. To style the heading, you need to create a new selector. Make sure Live view is active, and select main.css in the Sources pane of the CSS Designer. You should also see a single letter below main.css. This is added by the Edge Web Font. You can ignore it.

  2. Click the plus button at the top-right of the Selectors pane, and create a selector for h1.

  3. Before resetting the margin property, let's change the text properties because it should help you understand the effect of default margins better.

    Click the Text icon at the top of the Properties pane to scroll the text properties into view.

  4. Click "medium" next to the font-size property, and select px from the menu. Don't worry that the heading disappears. It's because the value is initially set to zero. Change it to 72px.

    Although you can type in the value manually, try scrubbing to see what happens to the gap at the top of the page. As the text increases in size, the gap gets bigger. The distance between the heading and the unordered list of links also increases because the top and bottom margins applied by the browser are proportionate to the size of the text.

  5. Center the heading by setting text-align to center (click the second icon).

  6. Convert the heading to uppercase by setting text-transform to uppercase (see Figure 22).
Figure 22. Setting the text properties for the main heading.
Figure 22. Setting the text properties for the main heading.
  1. Click the Layout icon at the top of the Properties pane, and set the top and bottom margins to 0px. The gap at the top of the page disappears.

  2. In the padding visual tool, scrub the top value to see how it moves the heading from the top of the page without reintroducing the gap. Padding doesn't combine with other properties, so it doesn't affect the margin of the wrapper <div>.

  3. In this case, you don't need the padding, so position your mouse pointer to the right of the value to reveal two icons: a circle with a diagonal line, and a trash can. The first icon temporarily disables a property, and toggles it back on, which can be useful when testing the effect of certain properties. The trash-can icon removes the property and its value from the style sheet.

  4. Click the trash-can icon to remove the padding, as shown in Figure 23.
Figure 23. Click here and insert your figure caption.
Figure 23. Click here and insert your figure caption.

Note: These icons appear alongside all set properties when you hover over them. Visual tools that set multiple values, such as margin and padding, have an extra pair of icons on the right to control all values of that property.

Creating two columns with CSS floats 

Grouping elements, such as <div>, <article>, and <aside>, occupy all available horizontal space, and are stacked on top of each other. Currently, the only cross-browser way to display them alongside each other is to give them a width and use the CSS float property. This moves the element to the left or right, allowing following elements to move up alongside them in the available space. The latest browsers offer alternative techniques, but floating is likely to remain the most reliable until older browsers disappear.

Note: From now on, I'll assume you know how to create a new selector and how to use the icons to move to different parts of the Properties pane.

  1. Make sure that main.css is selected in the Sources pane, and create a new selector called #main (this is the ID used by the <article> with the "Riding the Cable Cars" heading).

  2. In the Layout section, set the following properties:
    • width: 58%
    • margin-left: 2%
    • float: left (click the first icon)

    • The <aside> element with the ID sidebar automatically moves up into the space alongside the main <article>. Because the sidebar is shorter than the main <article>, the <footer> also moves up, and the background color of the wrapper <div> is cut off. You'll fix this shortly.

  3. Create a new selector called #sidebar.

  4. In the Layout section, set the following properties:
    • width: 34%
    • margin-left: 4%
    • float: left
    • Don't worry if the sidebar drops out of view when you start applying these properties. It comes back when you set the float property.

  5. The copyright symbol in the <footer> moves up alongside the "Cable Car Tips" heading. To fix this problem, create a new selector for footer.

  6. In the Layout section, set the clear property to left. The <footer> moves to the bottom of the page.

  7. Scroll down the Document window as far as possible. You should see a strip of light blue background below the <footer>. This is the same problem as caused by the top margin on the main heading. Browsers apply default top and bottom margins to paragraphs, and the paragraph's bottom margin has combined with the zero bottom margins of the <footer> and wrapper <div>, pushing the wrapper <div> away from the bottom of the page.

    In the Layout section, set top and bottom padding to 2px. The gap disappears (you'll need to scroll down the Document window again to confirm this).

  8. To align the text in the <footer> with the main <article>, set the left padding to 2%.

  9. In the Background section, set background-color to #43A6CB.

  10. In the Text section, set color to white (#FFFFFF).

  11. Select File > Save All Related Files to save the web page and style sheet.

The main layout rules are now complete. You just need to sort out the styles for the <figure> and <figcaption> elements.

Style the images with captions

To keep the image and caption together and center them, you need to give the <figure> element a width. You'll also add a CSS drop shadow effect to the image to make it look more like a photograph.

Style the <figure> and <figcaption> elements

The small images in the home page and sightseeing.html are all 400 pixels wide. To create the photo effect, you need to add another 20 pixels to the width of the <figure> element.

  1. Make sure main.css is selected in the Sources pane, and create a new selector called figure.

  2. In the Layout section, set width to 420px.

  3. Create a selector for figcaption.

  4. Before you can center the caption, you need to set its display property (in the Layout section) to block.

  5. In the Text section, set the following properties:
    • font-weight: bold
    • font-size: 14px
    • text-align: center

Create classes to position the <figure> element

There's only one <figure> element in the Bayside Beat home page, but there will be two in sightseeing.html. To apply the same style to multiple elements in a page, you need to create a CSS class. A class is similar to an ID, except it can be used more than once on a page (IDs must be unique within a page). To distinguish a class from an ID, the selector begins with a dot (period) instead of a hash. You'll create three classes: one to center an element, the other two to float elements to either side.

  1. Make sure main.css is selected in the Sources pane, and add a new selector called .centered. It's a class, so it must begin with a dot.

  2. In the Layout section, set the left and right margins to auto by clicking "px" and selecting it from the menu that appears.

    Note: Setting the horizontal margins to auto centers most elements that have a defined width. However, with some elements you also need to set the display property to block or inline-block.

  3. Create a new class selector called .floatleft.

  4. In the Layout section, set the right margin to 10px. This will create a space between the floated element and anything that moves up alongside.

  5. Set the float property to left.

  6. Create a new class selector called .floatright.

  7. In the Layout section, set the left margin to 10px, and the float property to right.

You'll apply one of the classes to <figure> element shortly, but first let's add the drop shadow effect to the image.

Use CSS to create a photo effect

The image of the two cable cars looks rather flat. You can make it appear to pop out of the page by giving it a background color, padding, and a drop shadow—all done with CSS.

  1. Make sure main.css is selected in the Sources pane. Also, turn on Live view if it's not already on.

  2. It's a good idea to keep related style rules together for ease of maintenance, so select "figure" in the Selectors pane, and click the plus button to create a new selector. Use code hints to create a new descendant selector for figure img (see Figure 24). This will affect only images that are nested inside a <figure> element.
Figure 24. The new selector is inserted immediately below the previously selected one.
Figure 24. The new selector is inserted immediately below the previously selected one.
  1. In the Layout section, click the chain icon in the middle of the padding visual tool, and set the padding property on all sides to 10px.

  2. In the Background section, set background-color to white (#FFFFFF). This doesn't make any visible difference yet because it's the same as the background of the wrapper <div>.

  3. Locate the box-shadow property lower down in the Background section, and set color to a medium gray (#999999).

  4. Then set both h-shadow and v-shadow to 1px. This creates what looks like a thin border on the right and bottom, but is actually a one-pixel drop shadow (positive values are displayed to the right and down, negative values to the left and up).

  5. Finally, set blur to 15px (see Figure 25).
Figure 25. The values for the box-shadow property.
Figure 25. The values for the box-shadow property.

Setting the blur to such a high amount results in the shadow extending not only to the right and down, but around all four sides, making the image pop out of the page, as shown in Figure 26.

Figure 26. The photo effect is complete.
Figure 26. The photo effect is complete.

Moving the image and caption into position

All that remains is to apply one of the classes to the <figure> element to move the image and caption into position. You add a class to an element in its opening HTML tag.

  1. You can't edit the HTML with Live view turned on, so turn it off by clicking the Live button.

  2. The easy way to apply a class to an element is through the Tag selector. Click anywhere in the caption under the image of the cable cars, and right-click <figure> in the Tag selector. Then use the context menu to select Set Class > centered, as shown in Figure 27.
Figure 27. Applying a class through the Tag selector.
Figure 27. Applying a class through the Tag selector.
  1. Turn on Live view. The image and caption are now centered in the main <article>, as shown in Figure 28.
Figure 28. The image and caption have been moved into position.
Figure 28. The image and caption have been moved into position.
  1. The floatleft and floatright classes will be used in sightseeing.html, but feel free to experiment with them here. They move the image and caption to one side, and flow the text around the other side.

    Note: Although class selectors begin with a dot, the equivalent class name doesn't. Prefixing a class name with a dot, and an ID with a hash, tells the browser whether to look for a class or an ID in the HTML markup.

  2. Select File > Save All Related Files to save your work.

Where to go from here

The design is beginning to take shape nicely. If you need to check your code, the design up to this stage is in first_website_pt3_end.zip, which you can download from the link at the top of this page. Most of the new code is in main.css in the styles folder, which consists of a series of style definitions created by the CSS Designer. Each style rule consists of a selector, followed by one or more property/value pairs between a pair of curly braces. For example, the styles for the wrapper div look like this:

#wrapper {
  background-color: #FFFFFF;
  width: 100%;
  min-width: 740px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

Even if you've never handled CSS before, the meaning should be fairly clear. Each property is followed by its value, separated by a colon (:). The value is followed by a semicolon (;).

Reading and writing CSS is simple. The difficulty lies in knowing which properties to use and how to combine them, but that comes with practice.

In part 4 of this tutorial series, Insert images and style text, you'll style the links, convert the unordered list of links into a navigation bar, and use absolute positioning to place a block of text with rounded corners over the image of the Golden Gate Bridge.

Create your first website, a series by David Powers

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

 

david-powers_83x83

David Powers

David is the author of seven bestselling books on web design, concentrating mainly on PHP, CSS, and Dreamweaver, including The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP. David can be found frequently offering advice in the Adobe Dreamweaver forums, and is also a moderator for Adobe Community Help. He's an Adobe Community Professional for Dreamweaver, a title shared by only 40 people worldwide.


Purchase by phone: 800-585-0774