Creating your first website – Part 2: Creating the page layout

Note: This tutorial series is intended for use with Dreamweaver CS5/CS5.5. If you are using an earlier version of Dreamweaver, some features might differ in the Document window and dialog boxes. The Spry Menu Bar used in Part 5 requires Dreamweaver CS3 or later.

Welcome to the second part of this tutorial series on creating your first website. This tutorial explains how to create a CSS-based page layout in Adobe Dreamweaver CS5. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and other kinds of content.

Laying out web pages with CSS (cascading style sheets) has become the standard for modern web design. CSS offers superior dreamweaveribility and control over your layout, allowing you to create elements on the page and fine-tune their positions with pixel precision. However, CSS layouts can be difficult to understand and create, and it helps to have some background knowledge before building your first layout with CSS. You can start by reading CSS page layout basics, which is an overview of how CSS layouts work. For a more in-depth look at CSS, take a look at the extracts from my book, Getting StartED with CSS. But this reading is not required. If you're up for the challenge, you can just dive right into this tutorial to begin creating your first CSS-based layout.

Note: Dreamweaver CS5 comes with 16 wonderful pre-designed CSS layouts that you can use as the starting point for your web pages. But I didn't want to start you off with any of these layouts because I think it's important to experience what it's like to build a page layout completely from scratch. For more information on these new layouts, refer to What's new in the Dreamweaver CS5 CSS layouts by Stephanie (Sullivan) Rewis.

Typically, you don't begin building a website by opening Dreamweaver and laying out pages. The first steps to creating a website begin on a piece of paper or in a graphics-editing application such as Adobe Fireworks or Adobe Photoshop. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their client's approval.

Examine the comp

A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, "I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips." Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfill the client's requirements.

This tutorial provides you with the completed and approved comp for Check Magazine, a fictional publication that is in need of a website. As the web designer, your job is to transform the comp into a working web page (most likely with the help of other graphic designers). Figure 1 shows a comp of the Check Magazine home page layout.

You'll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. Note also that the text is lorem ipsum text (fake Latin placeholder text) and that the headings in the bottom columns are not final (two of them are identical). Even though the page content remains undecided, you can still use Dreamweaver to lay out this design.

You can also open the original comp file if you want to see it on the computer screen. You can find the comp, check_comp.gif, in the images folder of the check_cs5 folder that you copied to your hard drive in Part 1 of this tutorial series, Setting up your site and project files. You might even want to print the comp so that you can have it in front of you as you build your page.

What to do if things go wrong

When learning new techniques or working with unfamiliar software, it's easy to make mistakes. The instructions throughout this tutorial series try to anticipate common errors, and each part contains a ZIP file showing how the code should look when you have finished. If your page doesn't look the way you expect, use the Dreamweaver File Compare feature to compare your files with the download versions. To use File Compare, you need a third-party file comparison utility, such as WinMerge for Windows. On a Mac, you can use the file comparison tool in TextWrangler. Both are free.

The most common causes of mistakes are accidentally skipping a step in the instructions, or mistyping an ID or CSS property. Retrace your steps to see where you might have gone wrong. Sometimes, the best idea is to start again from scratch. It can be frustrating, but you can learn a lot from your mistakes.

Of course, if you do get stuck, call for help. The best place is in the Dreamweaver General Discussion Forum, where you'll find experts and beginners alike helping each other.

Above all, enjoy yourself. Web design can sometimes be challenging, but it's also a lot of fun.

After you have set up a site and examined your comps (if any), you are ready to begin building web pages. You'll start by creating a new page, and saving it in the check_cs5 local root folder of your website. The page eventually becomes the home page for Check Magazine.

Note: If you haven't created the check_cs5 local site folder, you must do so before you proceed. For instructions, see Part 1 of this tutorial series, Setting up your site and project files.

1. In Dreamweaver, make sure the Check Magazine site is selected in the Files panel (see Figure 2).

2. Select File > New.
3. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, select <none> from the Layout list (these two options should already be selected by default), and click Create.

   Note: In the Page Type list below the <none> option you'll see all of the CSS layouts that come with Dreamweaver. Later you can return to this dialog box to explore the different kinds of CSS layouts available.

4. Select File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X).
5. In the Save As dialog box, make sure you're in the check_cs5 folder that you defined as the site's local root folder. Dreamweaver should have selected this automatically, but if a different folder is selected, click the Site Root button at the bottom of the dialog box (it's on the right in Windows, and on the left in the Mac version).
6. Enter index.html in the File Name text box and click Save. The file name now appears in the tab of your new document.
7. In the Document Title text box at the top of your new document, type Check Magazine (see Figure 3).

This is the title of your page (different from the file name). Your site visitors will see this title in the browser's title bar when they view the page in a web browser.

8. Click the page once to move the insertion point out of the Document Title text box. You'll see that an asterisk (*) appears next to the file name in the document's tab. This asterisk indicates that a file has changed and that you need to save the file if you want to keep the changes.
9. Select File > Save to save your page.

If you did any of the background reading recommended at the beginning of this tutorial (for example, CSS page layout basics), then you already know that the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements—is the basic building block of a CSS layout. You place div tags on the page, add content to them, and use CSS to position them. Unlike table cells, which are restricted to existing within the rows and columns of a table, div tags are much more dreamweaverible.

If you look at the design comp again (see Figure 1), you'll notice that the page is divided into distinct sections: a banner logo at the top of the page, a central graphic area in the center of the page, and then a third bottom section that contains three separate columns within it. These sections all correspond to separate div tags that act as containers for the content inside of them. Actually, it is a little more complicated than that, but don't worry about that right now.

Start by creating the most basic, most important, and most common div tag for CSS layouts—the container. The container div contains all the other tags in the layout. If your CSS layout is like a sandbox, and you are going to place a beach ball, a bucket, some shells, and an umbrella in the sandbox, then the container tag is the outer rim of the sandbox. It defines the shape, dimension, and limitations of the sandbox, and holds everything together.

1. Make sure the Design button is selected at the top left of the Document window, and click once on the page to ensure that the insertion point is in the upper-left corner of the page (see Figure 4).

2. If it isn't already expanded, expand the Insert panel by clicking its tab or by selecting Window > Insert. (In the Designer workspace [the default Dreamweaver workspace], the Insert panel is on the right side of the Dreamweaver interface, above the Files panel.)
3. The default display for the Insert panel is the Common category. Make sure the Common category is selected, and click Insert DIV Tag (see Figure 5).

4. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type container in the ID text box, and click OK.

   The new div appears on your page, surrounded by a dotted line in Design view, and with some placeholder text (see Figure 6).

Note: If you can't see the dotted line surrounding the div, select View > Visual Aids, and make sure there's a check mark alongside CSS Layout Outlines. Clicking any of the options in the Visual Aids submenu toggles them on and off.

5. Select the placeholder text and delete it, making sure you delete only the text. If the outline of the div disappears, repeat step 4. The placeholder text should be automatically selected when the div is inserted, so all you need to do is to press Delete.
6. In the Insert panel, click Insert Div Tag again.
7. In the Insert Div Tag dialog box, select "After start of tag" from the Insert pop-up menu. This activates a new pop-menu alongside, which lists the places where Dreamweaver can insert the new div. At the moment, the only candidates are the <body> tag and <div id="container"> .

   You want to nest the new div inside the container div, so select <div id="container"> (see Figure 7).

8. Leave the Class text box blank, type banner in the ID text box, and click OK.

   The new div appears on your page, and within it you can see the placeholder content for the banner div. But where did the container div go? Well, it's there, you just can't see it in Design view. The best way to see it is to look at the code.

9. Click the Split view button (see Figure 8).

Split view displays the underlying code on the left of the Document window. You can see the container div tag, and inside it is the new banner div tag, just as planned (see Figure 9).

Note: Working in Split view (formally called Code and Design view) is a great way to learn how Dreamweaver generates code. When you insert something in Design view, you see the code that Dreamweaver writes in Code view. It's particularly useful if you have a large monitor, because you can see the web page in Design view and the underlying code both at the same time.

10. Since you're looking at the raw code, let's continue working there. If you're cramped for space in Split view, click the Code button at the top of the Document window.

    Place the Insertion point after the banner div's closing tag— </div> —and press Enter (Windows) or Return (Mac OS X) to create a new line (see Figure 10).

Note: Pay careful attention to where you create the new line. You should still be inside the container div. The container div's closing tag is on line 12 of Figure 10.

11. With the Insertion point still on the new line, click Insert Div Tag in the Insert panel.
12. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type main_image in the ID text box, and click OK.

    The new div tag appears on your page, and within it you can see the placeholder text. This new div tag is inside the container div, on the same level as the banner div.

    Tip: When you create new IDs watch out for extra space either before or after the ID. For example, make sure that when you type the main_image ID, there is not an extra space after the "e" in image. If there is, it can lead to CSS problems later.

13. Place the Insertion point after the new main_image div's closing </div> tag and press Enter (Windows) or Return (Mac OS X).
14. In the Insert panel, click Insert Div Tag.
15. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type left_column in the ID text box, and click OK.
16. Place the Insertion point after the new left_column div's closing </div> tag and press Enter (Windows) or Return (Mac OS X).
17. In the Insert panel, click Insert DIV tag.
18. In the Insert Div tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type center_column in the ID text box, and click OK.
19. Once more—with feeling—place the Insertion point after the new center_column div's closing </div> tag and press Enter (Windows) or Return (Mac OS X).
20. In the Insert panel, click Insert Div tag.
21. In the Insert Div tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type right_column in the ID text box, and click OK.

    Your code should now look as shown in Figure 11.

22. If you're in Split view, press F5 or click in the Design view half of the Document window to update Design view. Alternatively, click the Design button to return to Design view.

    All your divs are stacked one on top of another and stretch the full width of the page. This is the default behavior until you create CSS rules for them.

23. Save the page (File > Save).

Now that you have your div tags in place, the next step is formatting and positioning them with CSS. CSS stands for cascading style sheets—a collection of formatting rules that control the appearance of content on a web page. 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.

Note: 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.

1. Select File > New.
2. In the New Document dialog box, verify that the Blank Page category is selected, select CSS from the Page Type column (see Figure 12), and click Create.

3. A blank style sheet appears in the Document window. The Design view and Split view buttons are disabled. CSS files are text-only files—their contents are not meant to be viewed in a browser.
4. Select File > Save.

   In the Save As dialog box, create a new folder called styles in the site root, select the new folder, and save the file in the styles folder as check_cs5.css.

5. Five divs in index.html are nested inside the container div. To center the content on the page, you need to create a style rule for the container div by giving it a fixed width and setting its left and right margins to auto .

   To create a style rule for a div (or any other tag) that has an ID, you prefix the ID with a hash sign (#). So the CSS selector for the container div is #container .

   Note: CSS is case-sensitive. The spelling of the ID must be the same as you used when inserting the div tag. So, if you used an initial capital letter, the CSS selector would be #Container . Also, make sure there's no space between the hash sign and the ID.

   Type the following code in the style sheet:

As you type, Dreamweaver uses code hints to suggest options for completing your entry. Press Enter (Windows) or Return (Mac OS X) when you see the code you want, and let Dreamweaver finish the typing for you.

When typing the pixel values, do not leave a space between the number and px . For example, it must be 968px , not 968 px .

Don't forget to include a semicolon at the end of each line, after the property values.

When you're finished, the code should look as shown in Figure 13.

Each of the properties in your new rule means something specific for the container div. The first one— width —is the most obvious. It sets the width of the container div to 968 pixels. You are setting the background color to white (#FFF), and declaring 0 pixels for the top and bottom margins of the container, and auto for the left and right margins of the container. (This effectively centers the container in the middle of the page when the user views it in a browser.) For the padding, you've specified 10 pixels on the right and the left, and you've specified a hidden overflow, which forces large assets like images to stay within the confines of their container tags.

Tip: For more information about CSS properties, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel. This contains details of CSS2, plus some non-standard CSS properties.

6. Save the style sheet.

Next you'll attach the new style sheet to the index.html page.

To attach the style sheet, follow these steps:

1. Click the tab for the index.html page and make sure you are looking at the page in Design view. (If you're still in Code view, click the Design view button.) Your page should look exactly like Figure 14.

Even though you created a complex CSS rule for the container div, the page still looks the same as before. This is because the CSS style sheet is not yet attached to the page. When you attach the style sheet to the page, the #container rule that you created in the style sheet will format the div with the id "container" on your web page.

2. Open the CSS Styles panel by clicking its tab. (In the Designer workspace [the default Dreamweaver workspace], the CSS Styles panel group is located below the Insert panel. If it isn't, you can always select Window > CSS Styles to display it.)

   You'll notice that the CSS Styles panel is empty (save for the message, "(no styles defined)") because there are no CSS rules applied to this page.

3. (Optional) Double-click the Insert panel to close it and create more room.
4. In the lower right-hand corner of the CSS Styles panel, click the Attach Style Sheet button (see Figure 15).

5. In the Attach External Style Sheet dialog box, click the Browse button. This launches the Select Style Sheet dialog box. Navigate to the check_cs5.css style sheet that you created in the styles folder, select it, and click OK (Windows) or Choose (Mac OS X).
6. Click OK to close the Attach External Style Sheet dialog box.

   Note what happened to the page. You can immediately see that the container div added padding of 10 pixels on the left and right. Depending on the size of your Document window, you might also see that the container div looks centered on the page. That's because if you have extra room (in addition to the 968-pixel width you specified), the container will also have an "auto" margin on its left and right sides. This effectively means that the browser will create exactly the same amount of pixel space to the left and right of the container div, thus creating a centered effect.

7. Save the page.
8. Run your cursor over the border of the container div until you see a red line, and then click to select the container div. Figure 16 shows what you should see when the container div is selected.

Note: If you have difficulty selecting the border of the container div, click inside any of the divs you have created, and select <div#container> in the Tag selector at the bottom of the Document window.

Here Dreamweaver is giving you a nice visual rendering of how the CSS rule applies to the container element. The light gray shading on the left and right sides of the container div indicates the 10-pixel padding, and when you hover your cursor over the area, Dreamweaver displays a tooltip that tells you that. Similarly, the lighter blue areas at the outermost left and right sides of the container indicate the auto margins. Again, the amount of auto margin that displays in Dreamweaver depends on the size of your Document window. If you are working in the default Dreamweaver Designer workspace, and you make your Document window smaller by dragging the docked panel area on the right, you should see the auto margin disappear as less space becomes available on the page.

Note: If the visual rendering of the padding and margins fails to display, select View > Visual Aids, and make sure the following options have check marks next to them: CSS Layout Box Model and CSS Layout Outlines.

9. Click the Inspect button at the top of the Document window (see Figure 17).

This is a new feature in Dreamweaver CS5. It turns on Live View in CSS Inspect mode. The dotted outlines of the divs disappear, and you see the page as it would look in a browser. In fact, you are looking at the page in a browser—Live View uses the WebKit browser engine that powers the Safari and Google Chrome browsers.

10. Move your cursor over the divs in the center of the page. As you move up or down, each div is highlighted in light blue.
11. Move your cursor to the left of the place holder text (see Figure 18).

This highlights the container div. The div itself is highlighted in blue. The 10-pixel padding on either side is highlighted in purple, and the auto margins are highlighted in yellow. Being able to see the effect of your style rules like this makes it a lot easier to understand the effect they have on your layout.

12. Click Live View to return to Design view and turn off CSS Inspect mode.

Now that you have all your divs in place and your style sheet attached to the page, you are ready to create the remaining CSS layout rules, and apply them to the appropriate elements on the page. But first, you need to think about the two main images: the banner at the top, and the large image of a man standing alongside the reflection of palm trees in a glass wall.

With CSS, you can add a background image to any HTML element, such as a div. However, background images should be used only for decorative purposes. By default, browsers turn off background images when a page is printed. Important images should be inserted directly in the HTML, using the <img> tag. The images in this page play different roles, so they need to be handled differently.

Insert the banner image with the <img> tag

The banner image at the top appears on all pages and identifies the Check Magazine site, so it's not appropriate for a background image.

1. Click inside the banner graphic div and delete all of the placeholder text so that the banner div is empty.
2. In the Insert panel, click Images. If it's the first time you have used Images, a submenu opens, showing the various options. Choose the first one (Image), as shown in Figure 19. This opens the Select Image Source dialog box.

Note: After the first time, Dreamweaver remembers your most recent choice, and makes it the default. To choose a different option, click the tiny down arrow to the right of the icon in the Insert panel.

3. In the Select Image Source dialog box, navigate to the images folder in the Check Magazine site, and select banner.jpg. Click OK (Windows) or Choose (Mac). This opens the Image Tag Accessibility Attributes dialog box.
4. When you insert an image in an HTML page, you need to add alternate text that gives a brief description of the image for the benefit of people with visual disabilities. When they visit your site using a screen reader—assistive technology that reads the content of web pages aloud—the alternate text gives them a verbal indication of what's on the screen. The alternate text is also displayed in place of the image if a visitor has images turned off in the browser, or if your image is missing.

   Type Check Magazine in the "Alternate text" text box (see Figure 20), and click OK.

Note: Purely decorative images should normally be added as background images with CSS, but if you do put them directly in the HTML, select <empty> from the "Alternate text" pop-up menu. This inserts an empty alt="" attribute in the <img> tag. The "Long description" option is intended for complex images, such as graphs or charts, and should contain the URL of a text description of the content. The link to the text description is seen only by screen readers.

5. Your page should now look like Figure 21, with the banner image sitting above the remaining div placeholders.

Insert the main image as background

When the layout is finished, text will be added in front of the main image, which is mainly decorative anyway. So, this time, you'll use CSS to insert it as a background image to the main_image div.

1. Place the insertion point in the main_image div, and delete all the placeholder text.

   After you've deleted the last character, it will look like the div has completely disappeared. Don't worry, it's still there. Don't click anywhere in the Document window before proceeding to the next step.

2. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule button (see Figure 22).

As long as your Insertion point was in the main_image div when you clicked the button, the New CSS Rule dialog box should automatically suggest appropriate settings for the CSS selector (see Figure 23).

Dreamweaver detects that the Insertion point is in the main_image div, which is nested inside the container div, and it suggests using a compound selector #container #main_image . The text area below the Selector Name text box describes the meaning of this selector.

Although it's correct, everything in the page is nested inside the container div, so you don't need to be so specific.

3. Click the Less Specific button. This changes the value in the Selector Name text box to #main_image , which is exactly what you want.

   Technically speaking, the Selector Type pop-up menu should now be set to ID. However, don't do it. If you do, Dreamweaver clears the existing value from the Selector Name text box.

4. Leave the Selector Type pop-up menu set to Compound, and make sure check_cs5.css is selected from the Rule Definition pop-up menu. Then click OK.

   The CSS rule definition dialog box appears, indicating that you are defining properties for the new #main_image rule.

5. Select the Background category in the Category column.
6. In the Background category, click the Browse button next to the Background-image text box.
7. In the Select Image Source dialog box, navigate to the images folder inside the Check Magazine site.
8. Select the main.jpg graphic and click OK (Windows) or Choose (Mac OS X).
9. Select no-repeat from the Background-repeat pop-up menu.

   The main.jpg graphic is now defined as the background image for the main_image div (see Figure 24).

10. Select the Positioning category in the Category column.

    In the Positioning category, do the following:

    • Select relative from the Position pop-up menu.
    • Type 968 in the Width text box and select px from the pop-up menu to the right.
    • Type 376 in the Height text box and select px from the pop-up menu to the right.
    • Click OK.

    The main.jpg graphic appears in the main_image div, and the dimensions of the div are set.

    Normally, it's not a good idea to give a div a fixed height, because a div expands or contracts automatically depending on the amount of text or other content inside it. However, in this case a fixed height is necessary, because you need the div to be the same height as the background image. Without the height declared in the CSS, the div would collapse to nothing, and the background image would not be displayed.

    I'll explain the reason for setting Position to relative in Part 4 of this tutorial series, when you'll add some text to the main_image div.

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

Figure 25 shows what your page should look like at this point.

The last major task for the basic layout of index.html is to marshal into order the columns at the bottom of the page. CSS categorizes most HTML elements as block-level or inline. A block-level element begins on a new line of its own, and forces the following element onto the next line, whereas inline elements snuggle up alongside each other. Typical block-level elements include headings, paragraphs, and divs. Text inside a paragraph and images are inline elements.

Before moving the columns into position, you need to do a little calculation. The main image is 968 pixels wide. That doesn't divide evenly by 3, but you need a little breathing space between each column, say 10 pixels. So, if you divide 948 by 3, you get 316. That's how wide each column needs to be. It also happens to be the width of the images at the top of each column.

1. If your monitor is wide enough, the best way to work is in Split view, using Dreamweaver's related files feature. Close check_cs5.css by clicking the X on its tab, leaving just index.html open.
2. Click check_cs5.css in the Related Files toolbar just below the tab for index.html. This opens the style sheet in Split view, while leaving index.html visible in Design view (see Figure 26).

You can now edit the style sheet, and see the changes in Design view.

Tip: If you're cramped for space, drag the center bar to resize the windows. You can also make extra room by pressing F4 to hide all the panels. Press F4 again to restore them.

3. All columns need to be 316 pixels wide, you can apply the same width to all of them by creating a combined selector for the three divs. Add the following style rule at the bottom of the style sheet:

Tip: Code hinting in Dreamweaver CS5 is super-smart. It recognizes unique character combinations within CSS properties. Instead of typing widt before Dreamweaver selects width , just type dt to jump straight there, and then press Enter (Windows) or Return (Mac OS X) to insert width: in your style sheet. This trick works with all code hints, not just CSS.

Separating the ID selectors for the three divs with commas applies the same rule to each of them.

4. Click in Design view (or press F5) to refresh the page. The columns are now much narrower, but they're still stacked on top of each other (see Figure 27). That's because they're block-level elements.

5. To get them to sit alongside each other, you need to use the float property.

   Position the Insertion point after the semicolon at the end of the line in the style rule you have just created, and press Enter (Windows) or Return (Mac OS X). Dreamweaver displays code hints for the available properties. Type f and press Enter/Return to insert float: . Then type l (lowercase L) and press Enter/Return to insert left . Don't forget to add a semicolon at the end of the line.

6. Refresh Design view by clicking in it or pressing F5. The columns should now be alongside each other across the bottom of the page.
7. Finally, you need to add the margins between the columns. You do this by adding a 10-pixel left margin to the center and right columns. Add the following style rule at the bottom of the style sheet:

Like the previous style rule, the same property is assigned to multiple elements by listing their selectors separated by commas.

8. Select File > Save All Related Files.

   Note: depending on where the focus is in the Document window, Save All Related Files might be grayed out. If it is, select Save All. The difference is that Save All saves all files that are currently open. Save All Related Files saves only those files that are related to the current document.

   Figure 28 shows what your page should now look like in Design view.

Your CSS page layout is now complete. If for some reason your layout does not look the way it's supposed to, double-check the spelling (including capitalization, if appropriate) of all your CSS rules. The most common causes for CSS layout errors are typographical ones, so you must make sure that the IDs in your external CSS file correspond exactly to the IDs in your index.html file. Also, don't forget to watch out for those extra spaces that can creep in before and after IDs when creating new CSS rules

Now that you've finished the layout, you're ready to add some content. You'll add some images and text in Part 3: Adding content to pages.