Adjust space around elements and make images responsive

Introduction

Welcome to part 5 of this tutorial series on creating a simple, responsive website in Dreamweaver 2015. In the previous part, you began styling the home page of the Bayside Beat site, working first in Code View, and then using the CSS Designer. The advantage of using the CSS Designer is that you can see the result instantly in Live View. In this part, the design begins to take shape by adjusting space around elements and adding images that automatically resize depending on the screen resolution.

Control horizontal and vertical space with padding and margins

CSS has two properties that control horizontal and vertical space around an element: padding and margin. Sometimes, it doesn’t matter which you choose. They both add space around an element, but there are important differences. Margin is not included in the overall width or height of an element (see Figure 1). This is always the case, regardless of whether you’re using the default box model or overriding it with the snippet created in part 4.

The following table summarizes how padding and margin affect various features.

Both padding and margin increase the space around an element, but margin operates in a subtly different way.

Figure 2 shows two elements stacked on top of each other. The first one has a bottom margin of 20px, and the second one has a top margin of 30px.

It’s natural to assume the vertical distance between the two elements is the sum of both margins, in other words 50px. That’s not what happens. Adjacent vertical margins collapse or merge. So the vertical distance between the elements is the larger of the two margins, in other words 30px (see Figure 3).

Padding, on the other hand, never collapses. If you replaced the bottom and top margins in this example with the same amount of padding, the content of both elements would be 50px apart.

In the style rules you created in part 4, both the body and the wrapper <div> have a top margin of 0. So why is there a gap at the top of the page? It’s because browsers apply a default margin to some elements, including headings.

The default top margin on the <h1> heading combines with the 0 top margin of the wrapper <div>, pushing the wrapper away from the top of the page. Because the background of the parent element always shows through a margin, you see the pale blue background of the body. Padding, on the other hand, never collapses. What’s more, the element’s background extends into the padding. Problem solved. If you don’t yet understand why, seeing is believing.

Remove the gap at the top of the page and style headings

To solve the problem of the gap at the top of the page, you need to replace the top margin of the main heading with the equivalent amount of padding. At the same time you’ll style the other headings.

1. Select the main <h1> heading in Live View, and make sure that responsive.css is selected in the Sources pane of the CSS Designer. The next selector should go after #wrapper, so make sure that’s selected in the Selectors pane. Then click the plus button to create a new selector.
   
2. Because the heading is selected, Dreamweaver suggests #wrapper header h1 as the selector. This is a very specific descendant selector that looks for <h1> elements nested inside <header> elements that are in turn nested inside an element with the ID wrapper. To make a selector less specific, press the up arrow key once to change the suggestion to header h1. This is still too specific, so press the up arrow key again to change it to just h1. This now targets <h1> elements anywhere in the page. To apply the same rules to <h2> elements as well, click to the right of h1 in the editable field, and type a comma followed by h2. The selector should look like this:
   
   h1, h2

   Pressing the up arrow key to make a selector less specific works only when Dreamweaver first suggests a name for the selector. If necessary, double-click the selector to open the field for editing, and just type the group selector manually.
   
   
3. Click the icon at the top of the Properties pane, and set the following text properties for the new selector:

The headings are now a darker gray than the main text, and they’re no longer bold.

4. With the main heading and the h1, h2 selector still selected, click the plus button in the Selectors pane, and press the up arrow twice to create a selector for h1. Click the icon to skip to the layout section, and set the following properties (see Figure 4):
   

This preserves the vertical space around the heading, but the background comes from the wrapper <div> rather than the body. The unwanted strip of pale blue disappears.

5. In the text section, set the following properties and values:

The text-align and text-transform properties are set using icons (see Figure 5). Hover your mouse pointer over them if you’re not sure what they mean.

The main heading is now larger, centered, and all in uppercase.

6. Select one of the <h2> headings, and create an h2 selector by pressing the up arrow twice to make the suggested selector less specific. Set the following properties and values:
   • margin-top: 0.5em
   • font-size: 2.25em

Using em as the unit of measurement changes the size of the text and top margin in proportion to the text in the main body of the page.

Add horizontal space inside the wrapper

The text inside the wrapper <div> is right up against the edges. One way to add some breathing space on both sides would be to add some horizontal padding. However, that would prevent the image of the Golden Gate Bridge filling the entire width of the hero <div> when you insert it later. Instead, create a group selector for main, aside with the following properties and values (see Figure 6):

After you have made the changes, don’t forget to save your work using File > Save All Related Files.

Insert an image from a CC Library with a caption

Let’s brighten up the page with some images. In this section, you’ll download an image from the CC Library, and insert it in index.html with a caption, using a <figure> element. At the same time, you’ll select the image format, and resize it.

1. Open Split View so you can see what’s happening in the underlying HTML. If necessary, click Source Code in the Related Files toolbar. Then in Live View, select the second paragraph after the heading "Riding the Cable Cars." It begins with the words "The cable cars rely…"
   
   
2. Open the Insert panel, and click Figure in the HTML category (see Figure 7).

3. Select After from the Position Assist Dialog to insert a <figure> element after the selected paragraph. The new element has a <figcaption> nested inside. Both contain placeholder text (see Figure 8).

4. With the <figure> element still selected, right-click the image labeled cable_car1 in the CC Libraries panel. Select Insert Unlinked from the context menu. The Position Assist Dialog asks where you want to insert the image. Click Nest to nest it inside the <figure> element.
   
   
5. A dialog box asks you to specify where the file is to be located in your site, the image format, and the size. The src field automatically suggests saving the image in the images folder because you set that as the default images folder in part 1 of this tutorial series. It bases the suggested name of the image on the name used in the CC Library. Both are fine, but saving the image in PNG 32 format will result in a large file. Open the drop-down menu on the right of the dialog box, and select JPEG (see Figure 9).

This changes the filename extension in the src field to .jpg.

6. At more than 3000px wide, the image is far too big. Change the value in the W field to 400. By default, the link icon between the W (width) and H (height) fields is selected, so the value in the H field automatically changes to 266.
   
   Make sure the values in the dialog box match Figure 10, and then click OK.

7. The image is inserted inside the <figure> element, and Dreamweaver automatically sets the width and height in the underlying HTML. You want this to be a responsive layout, so it’s necessary to remove these values.
   
   With the image still selected, click the hamburger icon on the Element Display to bring up the Quick Property Inspector (see Figure 11), delete the values in the width and height fields, and click away to close the inspector.

8. Double-click the placeholder text for the <figure> element to enter Edit mode, select it, and press Delete to leave just the image and the caption placeholder.
   
   Dreamweaver might also remove alt="" from the <img> tag in the underlying HTML. If this happens, the Output panel will warn you that the alt attribute should have a value. The purpose of the alt attribute is to provide alternative text for non-visual browsers, such as screen readers for the blind. When an image is accompanied by a caption or is purely decorative, the alt attribute is not required, so you can ignore the warning.
   
   
9. Double-click the caption placeholder text, and replace it with The cable car terminus near Union Square.
   
   
10. Save index.html.

The context menu in the CC Libraries panel has Linked and Unlinked options for Insert and Download. Unlinked simply creates a local version of the image in your site. If you select either of the Linked options, the local version is automatically updated whenever the image is modified in the library in the Creative Cloud. Learn more about synchronizing assets in the Creative Cloud.

Drag and drop an image from a CC Library

The other image in index.html needs to be nested inside the <div> with the ID hero. In this section, you’ll learn how to insert it into the page by dragging and dropping directly from the CC Libraries panel. This technique can be difficult to master the first time, so read through the following instructions for an overview before attempting to do it.

1. Close Split View by clicking the Live button at the top-left of the Document window, and make sure that you can see the paragraph beginning "Bayside Beat keeps…" immediately after the list of bullet points.
   
   
2. In the DOM panel, collapse most of the elements that have nested children, but make sure that the div #hero element is expanded, as shown in Figure 12. This makes it easier to position the image accurately.

3. In the CC Libraries panel select the image labeled golden_gate, and start dragging it into Live View. As you move across the page, you should see a horizontal green bar which indicates where the image will be inserted.
   Stop dragging when the green bar is between the list of bullet points and paragraph, but do not release the mouse button. After a couple of seconds you should see a small </> icon at the bottom-right of the mouse pointer (see Figure 13).

4. Without releasing the mouse button, move the mouse pointer over the icon to bring up a floating version of the DOM panel. Keep dragging over the floating panel until the green line is between the div #hero element and the following p (see Figure 14). When it’s in the right position, release the mouse button.

5. A dialog box appears asking you to specify where and how to store the image in your local site (see Figures 9 and 10 in the previous section).
   
   Change the image format to JPEG, and set the width and height to 1000 and 547 respectively. Then click OK.
   
   
6. The image of the Golden Gate Bridge should be inserted between the list of bullet points and the paragraph. Don’t worry if it’s in the wrong position. You can fix that in a moment.
   
   With the image still selected, click the hamburger icon to bring up the Quick Property Inspector.
   
   
7. Type The Golden Gate Bridge in the alt field, and delete the values in the width and height fields. This image won’t have a caption, so the alt attribute is required for non-visual browsers. The image will automatically resize depending on the screen resolution, so the dimensions are not needed.
   
   
8. In the DOM panel, check that the img element is between div #hero and p, and is indented at the same level as p (see Figure 15).

9. If the image is in the wrong position, drag it inside the DOM panel until a horizontal green bar is between div #hero and the following p. Then release the mouse button.
   
   
10. Save index.html.

Dragging and dropping in Live View and the DOM panel are powerful ways of reorganizing HTML elements and assets in a web page. So it’s worthwhile practicing this technique until you feel comfortable with it.

If you prefer not to use the mouse, you can insert the image of the Golden Gate Bridge in the same way as in the previous section. Just select the hero <div> first, and then use Insert Unlinked from the context menu. When prompted by the Position Assist Dialog, select Nest.

Make the images responsive

The image of the Golden Gate Bridge is 1000px wide, and the other images in the site are 400px wide. Even though you removed the width and height attributes from the HTML, browsers display images at their natural dimensions unless you use a little CSS magic to make them responsive to the available screen space.

1. Reduce the width of Live View by dragging the Live View scrubber to the left (see Figure 16). Once Live View is less than 1000px wide, a horizontal scroll bar appears and the right side of the Golden Gate Bridge is obscured.

2. With the image of the Golden Gate Bridge selected in Live View, create a new selector in the CSS Designer. Press the up arrow once to change the suggested selector to #hero img, and press Enter/Return to confirm the change.
   
   This creates a descendant selector, which consists of two or more selectors separated by a space. It targets images inside an element with the ID hero.
   
   
3. Set the following properties and values (they’re both in the Layout section):

Setting the max-width property to 100% ensures that the image is never wider than its parent element, in this case the hero <div>.

4. Drag the Live View scrubber in both directions. The image of the Golden Gate Bridge automatically resizes to fill the available horizontal space (see Figure 17).

5. Select the image of the cable car in Live View, and press the up arrow once. This moves the selection up the HTML hierarchy to select the parent <figure> element.
   
   
6. Create a selector for figure, and set the following properties:

7. If necessary, resize Live View to narrower than 400px. The visual guide for the <figure> element shows that the max-width property of 92% is overriding the width, and the element is centered horizontally, but the image is spilling out on the right (see Figure 18).

8. To style images nested in <figure> elements, you need to create another descendant selector, figure img. Then set the max-width property to 100%.
   
   This prevents the image from spilling out of its parent container. When Live View is wider than 435px, the image is displayed at its natural size 400px, and is centered horizontally.
   
   
9. While you’re still working with the <figure> element, create a selector for figcaption, and set the following properties and values:

Use a CSS filter to style images

Most modern browsers now support CSS filters, even though they’re still officially only experimental. Let’s create some simple styles to convert an image to grayscale and then reveal the color version when you mouse over it.

1. Select the image of the cable car in Live View, and click the plus button in the img Element Display. Type .grayscale (beginning with a dot) in the editable field, and press Tab or Enter/Return to assign the class to the image.
   
   Make sure that responsive.css is selected in the pop-up that appears, and click away to dismiss it.
   
   
2. Select the .grayscale selector that Dreamweaver has created in the Selectors pane of the CSS Designer, and select the Show Set check box at the top of the Properties pane.
   
   
3. Use the add property and add value fields to set the following properties and values:

The image now looks like a black and white photo (see Figure 19).

4. In the Selectors pane, right-click the .grayscale selector, and select Duplicate from the context menu. Dreamweaver creates a copy of the style rule, but leaves the name of the new selector open ready for editing. Append the :hover pseudo-class to the end like this:
   
   .grayscale:hover
   
   You’ll learn more about pseudo-classes in part 6 of this tutorial series.
   
   
5. In the Properties pane, double-click the value of each property, and change it to grayscale(0%).
   
   
6. Hover over the image in Live View. The image is now in color.
   
   
7. Save your work: File > Save All Related Files.

For cross-browser compatibility, you need to use both -webkit-filter and filter. Old browsers that don’t understand either property ignore this style rule, and display the image in color.

Give a paragraph a unique style

In the previous section, you styled the image of the cable car differently from the hero image by assigning it a class. However, it’s not always necessary to use a class to style elements differently. The paragraph between the image of the Golden Gate Bridge and the first <h2> heading is nested inside the hero <div>, so it can be styled differently from all other paragraphs by creating a descendant selector for #hero p.

1. In Live View, select the paragraph immediately under the image of the Golden Gate Bridge.
   
   
2. It’s a good idea to keep related style rules together, so highlight #hero img in the Selectors pane of the CSS designer, and click the plus button. Dreamweaver suggests #wrapper #hero p as the selector. Press the up arrow once to change it to #hero p.
   
   
3. Deselect the Show Set check box at the top-right of the Properties pane, and click the icon to skip to the text section.
   
   
4. Click the pink swatch in the CC Libraries panel to copy the hexadecimal value #F68979 to the clipboard, and paste it as the value of the color property. only the paragraph in the hero <div> turns pink. All the others remain dark gray.
   
   
5. Set font-weight to 600.
   
   
6. Click once to the right of font-size, and select em as the unit of measurement. As you discovered in part 4, Dreamweaver always sets the value to 0, so the text disappears.
   
   The value needs to be set to 1.5em. There are two ways to do this:
   
   
   • Just type 1.5 directly into the editable field, and press Enter/Return to confirm the value.
     
   • Position your mouse pointer just below the value until the cursor turns into a double-headed arrow. Then hold down the Ctrl key (Windows) or Cmd key (Mac) key at the same time as the mouse button, and scrub to the right with the mouse. As you do so, the value increases in steps of 0.1 (see Figure 20), and you can see the effect immediately in Live View. If you overshoot, scrub back to the left. Click away from the value to confirm the edit. This technique is particularly useful if want to judge the result visually in Live View while scrubbing rather than setting a specific value.

Holding down the Shift key while scrubbing changes the value in steps of 10. Scrubbing without a modifier key changes the value in steps of 1.

7. Convert the text to uppercase by clicking the uppercase icon for the text-transform property (see Figure 21).

8. Click the icon at the top of the Properties pane to skip to the border section. The border properties are grouped as a tabbed panel (see Figure 22). Setting the values in the first tab applies the same border to each side of the element. The other tabs set individual borders on the top, right, bottom, and left.

9. Select the tab for the bottom border, and set width to 3px and style to solid. There’s no need to specify a color because the default color for a border is inherited from the text of the current element.
   
   
10. To complete the styles for this paragraph, click the icon at the top of the Properties pane to skip to the layout properties. Locate the padding visual tool, and set the value on the left and right to 4%, and 20px on the bottom (see Figure 23).

11. The gap between the top of the text and the image of the Golden Gate Bridge is too big. Use the margin visual tool to reset the top margin to 10px.

The paragraph now has a unique style (see Figure 24).

Style the footer

You should now have enough experience with creating selectors and style rules to style the footer. Try adding the style definition directly in Code View at the bottom of the style sheet. The code looks like this:

Don’t forget to save your work when you’ve finished. If you view the page in a browser, it should now look like Figure 25. The design is progressing nicely.

You’re now halfway through styling the Bayside Beat site.