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

Welcome to Part 2 of this six-part tutorial series on creating your first website. This tutorial explains how to create a CSS-based page layout in Adobe Dreamweaver CS6. 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.

Note: This tutorial series is intended for use with Dreamweaver CS6. If you are using an earlier version of Dreamweaver, some features might differ, particularly in the Document window and dialog boxes.

Laying out web pages with CSS (Cascading Style Sheets) has become the standard for modern web design. CSS offers superior flexibility and control over your layout, enabling 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. 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: Although Dreamweaver CS6 has 18 predefined CSS layouts that you can use as the starting point for your web pages, I’m not going to use them in this tutorial series because I think it's important to experience what it's like to build a page layout completely from scratch. For more information on the predefined layouts, which were originally designed for Dreamweaver CS5, 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 bar 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 the home page of Check Magazine, a fictional publication that is in need of a website (see Figure 1). 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).

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 is unknown at this point, you can still use Dreamweaver to lay out this design.

You can also open the original comp file if you want to see it in more detail. You can find the comp, check_comp.jpg, in the check_cs6/images folder that you copied to your hard drive in Part 1 of this tutorial series. You might even want to print the comp so that you can have it in front of you as you build your page.

More and more people are accessing websites on a wide range of screen resolutions from mobile phones through tablets to laptops and desktops. Creating a website design that adapts to different screen sizes requires considerable CSS knowledge and skills. To keep this tutorial relatively simple and focused on creating your first website, you’ll work with a fixed-width display designed for a desktop.

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 and 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 great deal from your mistakes.

Of course, if you do get stuck, ask 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_cs6 local root folder of your website. The page eventually becomes the home page for Check Magazine.
Note: If you haven't created the check_cs6 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. Choose File > New.
3. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, and <none> from the Layout list (these two options should already be selected by default).
4. Set DocType to HTML5 and click Create.

Note: HTML5 is the new standard of the markup language for web pages. Although the standard hasn’t been finalized, the HTML5 DocType is backwards compatible with all web browsers in current use, including Internet Explorer (IE) 6. The only caveat is that you should avoid using the new semantic HTML5 tags, such as <header> and <footer>, because they aren’t recognized by IE 6 through IE 8. I’ll explain more about semantic tags later.

5. Choose File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X).
6. In the Save As dialog box, make sure you’re in the check_cs6 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).
7. Type index.html as the File Name and click Save. The file name now appears in the tab of your new document.
8. 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.

9. 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 the contents of the file have changed and that you need to save the file if you want to keep the changes.
10. Choose File > Save to save your page.

If you did the background reading recommended at the beginning of this tutorial (CSS page layout basics), then you already know that the <div> tag is the basic building block of a CSS layout. A <div> tag acts as a container for text, images, and other page elements, grouping them together so they can be styled in a consistent way. You use CSS to position them by adding horizontal and vertical space around them (margins) or inside them (padding). Compared to table cells, which exist only within the rows and columns of a table, <div> tags are much more flexible.

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.

HTML5 adds new tags—such as <header>, <footer>, and <article>—that perform exactly the same function as a <div>. The only difference is that the new tags specify the role of the element in the page. Unfortunately, IE 6 through IE 8 won’t style the new tags with CSS unless you use JavaScript. To avoid problems with older browsers, this tutorial uses only <div> tags to group content.

Insert <div> tags

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.
In this section, you’ll work in both Design view and Code view because it’s important to understand the underlying HTML code that Dreamweaver creates on your behalf.

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 choosing 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 Div or Insert Div Tag—the name and position within the panel depends on which version of Dreamweaver you’re using (Figure 5 shows how it looks in the Creative Cloud Dreamweaver 12.1 update).

4. In the Insert Div Tag dialog box, leave At Insertion Point selected, leave the Class blank, and type container as the ID. Setting the <div> tag’s ID gives it a unique identity that will be used to apply CSS styles to it later.
5. Click OK.

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

Note: If you can’t see the dotted line surrounding the <div>, choose 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.

6. 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.
7. In the Insert panel, click Div or Insert Div Tag again.
8. In the Insert Div Tag dialog box, select After Start Of Tag as the insert point. This activates a new control, 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).

9. Leave the Class blank, type header as the ID, and click OK.

   The new <div> appears on your page, and within it you can see the placeholder content for the header <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.

10. 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 header <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.

11. Since you’re looking at the raw code, go ahead and 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 closing </div> tag of the header <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 closing tag of the container <div> is on line 12 of Figure 10.

12. With the Insertion point still on the new line, click Div or Insert Div Tag in the Insert panel.
13. In the Insert Div Tag dialog box, leave At Insertion Point selected, leave the Class blank, type main_image as the ID, and click OK.

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

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

14. Place the Insertion point after the closing tag of the <div> you have just created and press Enter (Windows) or Return (Mac OS X).
15. In the Insert panel, click Div or Insert Div Tag.
16. In the Insert Div Tag dialog box, leave At Insertion Point selected, leave the Class blank, type left_column as the ID, and click OK.
17. Repeat steps 14–16 twice to create two more <div> elements. Give the first one the ID center_column, and the second one the ID right_column.

    Your code should now look as shown in Figure 11.

18. 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 <div> elements 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.

19. Save the page (File > Save).

Now that you have your <div> tags in place, the next step is formatting and positioning them with CSS—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.
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.

Using CSS code hints

Dreamweaver has several tools that speed up styling your web pages. In this section, you’ll type the style rules directly into a style sheet to give you a feel for what CSS looks like. Don’t worry if you’re not keen on working directly with code. As you type, Dreamweaver displays code hints and auto-completes much of the code for you.

1. Choose 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. Choose File > Save.
   In the Save As dialog box, create a new folder named styles in the site root, select the new folder, and save the file in the styles folder as check_cs6.css.
5. Five <div> elements 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 width and setting its left and right margins to auto.
   To create a style rule for an HTML element that has an ID, you prefix the ID with a hash sign (#). So the CSS selector for the container <div> is #container.
   

Note: CSS selectors are 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.

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.

Note: For more information about CSS properties, check the O'Reilly reference guide included with Dreamweaver. To display the guide, choose Help > Reference and select O'Reilly CSS Reference 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 choose Window > CSS Styles to display it.
   Make sure the All button is selected at the top-left of the panel.

   You'll notice that the CSS Styles panel is empty except 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 icon (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_cs6.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> now has 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 producing 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 <div> elements 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 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, choose View > Visual Aids, and make sure the following options are selected: CSS Layout Box Model and CSS Layout Outlines.

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

This turns on Live View in the Document window. The dotted outlines of the <div> elements 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 Safari and Google Chrome browsers.

10. When Live View is activated in Dreamweaver CS6, two new buttons—Live Code and Inspect—appear to the right of the Live button. (In CS5 and CS5.5, they’re in slightly different positions and always visible.) Click the Inspect button to turn on Inspect Mode (see Figure 18).

11. Move your cursor over the <div> elements in the center of the page. As you move up or down, each <div> is highlighted in light blue.
12. Move your cursor to the left of the placeholder text (see Figure 19).

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. When you can see the effect of your style rules like this it is much easier to understand how they change your layout.

13. Click the Live button to return to Design view and turn off Inspect Mode. In Dreamweaver CS6, the Live Code and Inspect buttons disappear.
14. Save index.html and close the check_cs6.css style sheet.

Now that you have all your structural elements in place and your style sheet is attached to the page, you are ready to start adding content and styling it. For this project, you’ll start with the header content, which consists of the name of the magazine (Check), a tag line, and the navigation menu.

Until quite recently, it was common to use an image for the main banner heading of a website because browsers rely on the fonts installed on the visitor’s computer to render text. As a web designer, you might have many fonts installed on your computer, but you can’t rely on everyone else having as many. Consequently, you were restricted to a limited range of "web-safe" fonts. The situation has changed thanks to all browsers now supporting fonts that can be embedded in a web page. So, instead of using an image for the header banner, you’ll use HTML and style it with CSS and a web font.

Create the main heading and tag line

Dreamweaver makes it easy to create headings and paragraphs using the correct HTML markup.

1. In index.html, click anywhere inside the placeholder text for the header <div>.
2. Make sure the HTML button is selected in the Property inspector, and select Heading 1 as the Format (see Figure 20).

3. The placeholder text for the header <div> is now displayed in a large, bold font. Select it, and replace it with the single word Check.
4. Make sure the insertion point (your cursor) is at the end of the line after the letter "k" and press Enter (Windows) or Return (Mac OS X).
5. The insertion point is now on a new line. Type Fashion + Lifestyle.
6. Click the Split button to examine the HTML code that Dreamweaver has generated. Your page should look like Figure 21.

The word "Check" is wrapped in <h1> tags, which make it a top-level heading. The second line is wrapped in <p> tags, which make it a paragraph. Design view gives both lines some basic styling to indicate what they will look like in a browser. At the moment, they’re nothing like the final design, but you’ll get to that later.

7. Save index.html.

Adding the navigation links

One of the most common ways of creating a navigation menu is to use a bulleted list—or unordered list, as it’s called in HTML—and style it with CSS.

1.  In Design view, place your cursor at the end of the "Fashion + Lifestyle" paragraph, and press Enter (Windows) or Return (Mac OS X) to move to a new line.
2. Look in Split view. Dreamweaver has inserted the following code:
   <p>&nbsp;</p>
   This is a new pair of paragraph tags with what’s known as an HTML entity for a nonbreaking space between them.
3. Type Features. As soon as you start typing, Dreamweaver removes the nonbreaking space, which was there simply as a placeholder, and replaces it with the text you typed.
4. Make sure the HTML button is selected in the Property inspector, and click the Unordered List icon (see Figure 22).

5. Check in Split view, the paragraph tags around "Features" have been replaced with different HTML tags like this:

   <ul>
<li>Features</li>
</ul>
   The <ul> tags tell the browser to create an unordered list. The <li> tags are wrapped around each list item.

6. With the insertion point at the end of "Features" in Design view, press Enter (Windows) or Return (Mac OS X) to add a new list item. Dreamweaver adds a new pair of <li> tags in the underlying HTML. Type Fashion in Design view.
7. Repeat the process to add three more items to the unordered list: Lifestyle, Calendar, and News. Your page should now look like Figure 23.

8. Normally, when you have finished an unordered list, you press Enter (Windows) or Return (Mac OS X) twice to exit the list and create a new paragraph. However, in this case, you don’t need anything else in the header <div>. If you accidentally created a paragraph at the end of the list, press Ctrl+Z (Windows) or Cmd+Z (Mac OS X) twice to remove it.
9. You now need to convert the list items into links. Select "Features" in Design view. You can either drag to select it, or double-click.
10. At the moment, there are no pages to link to. So, create a dummy link by typing # in the Link field of the Property inspector.
11. Do the same for the other items in the unordered list. Each list item will turn blue and be underlined, indicating it’s a link. In the underlying HTML, the unordered list should now look like this:
    

The text of each list item is wrapped in an <a> tag, which turns it into a link. The href attribute normally contains the address of the page that’s the target of the link, but the hash sign makes it a dummy link.

12. Save the page.

Images can be added to a web page either directly in the HTML using the <img> tag or as a background image using CSS. By default, browsers turn off background images when a page is printed. If an image is important, you should put it directly in the HTML markup. However, text will be added in front of the main image in this layout, so I think it’s fine to use CSS to insert it as a background image to the main_image <div>.

This time, you’ll use the New CSS Rule and CSS Rule Definition dialog boxes to create the necessary style rule.

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. Check in Split view that the insertion point is between these two tags:
   <div id="main_image"></div>
   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 icon (see Figure 24).

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

Dreamweaver detects that the Insertion point is in the main_image <div>, which is nested inside the container <div>, and it suggests using the compound selector #container #main_image. The text area below the Selector Name 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 once. This changes the Selector Name value to #main_image, which is exactly what you want.
4. Make sure check_cs6.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 Background-image.
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).
9. Select no-repeat as the Background-repeat setting.

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

10. Select the Box category in the Category column.
     
    In the Box category, do the following:
    • Type 968 as the Width and select px from the pop-up menu to the right.
    • Type 376 as the Height 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.
11. Choose File > Save All Related Files to save the page and the style sheet.

Figure 27 shows what your page should look like at this point in Design view.

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 <div> tags. 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.
2. Click check_cs6.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 28).

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

Note: 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 <div> elements. Add the following style rule at the bottom of the style sheet:

Note: Code hinting in Dreamweaver CS6 is remarkably 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) to insert width: in your style sheet. This trick works with all code hints, not just CSS.
Separating the ID selectors for the three <div> elements 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. That’s because they’re block-level elements.

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

5. Position the Insertion point after the semicolon at the end of the line that defines the width of each column, and press Enter (Windows) or Return (Mac). Dreamweaver displays code hints for the available properties. Type f and press Enter/Return to insert float:. Then type l (lowercase L) to bring up the code hint for left (see Figure 29).

Press Enter/Return to insert left, and add a semicolon at the end of the line. The style rule should now look like this:

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. Choose 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, choose 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 30 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 basic structure, you're ready to start bringing the page to life in Part 3: Styling the header and navigation menu.