Creating your first website – Part 1 to the End parts: Set up your site and project files

Note: This tutorial series was originally written for Dreamweaver CS4 by Jon Michael Varese. It has been updated for Dreamweaver CS5 by David Powers. The content is still valid for Dreamweaver CS5.5.

This tutorial introduces you to the concept of an Adobe Dreamweaver CS5 site and shows you how to set up the project files for the Check Magazine sample website. In Dreamweaver, a site generally consists of two parts: a collection of files on a local computer (the local site) and a location on a remote web server to which you upload files when you're ready to make them publicly available (the remote site). You use the Dreamweaver Files panel to manage the files for your site.
The most common approach to creating a website with Dreamweaver is to create and edit pages on your local drive, and then upload copies of those pages to a remote web server for viewing on the web. In this tutorial, you'll learn how to set up only the local site so you can begin building web pages right away. Later, after you've completed the website, you'll learn how to create a remote site so that you can upload your files to a web server.
A follow-up tutorial series will show you how to adapt the website to use a server-side technology to create a simple content management system for a news page that draws its content dynamically from a database.
In this first part of the series, you will complete the following tasks:

• Learn about Dreamweaver sites
• Set up your project files
• Define a local folder

Learn about Dreamweaver sites

In Dreamweaver, a site organizes on your local computer all the documents associated with your website and lets you track and maintain links, manage files, share files, and transfer your site files to a web server. Think of your Dreamweaver site as the "bucket" that contains all of the files and assets for your website.
A typical Dreamweaver site has at least two parts:

• Local folder: This is your working directory. Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard drive.
• Remote folder: This is where you store your files on the computer that's running your web server. The computer running the web server is often but not always the computer that makes your site publicly available on the web.

In some circumstances, you might have more than one remote folder. For example, if you work in a team environment, all members of the team might upload their files to a common testing server before they are deployed on the live website. Also, it's normal to set up a testing server when developing websites that use a server-side technology, such as Adobe ColdFusion or PHP. The site setup process in Dreamweaver CS5 has been changed to enable you to define multiple remote and testing servers.
Another reason for the changes is to simplify the process of defining a site in Dreamweaver CS5. All you need to do to start working is to give your site a name, and tell Dreamweaver where you want to store the files on your local computer. Dreamweaver CS5 automatically prompts you for further information about the site setup only when it's needed.
For more information about Dreamweaver sites in general, see Setting up a Dreamweaver site in Dreamweaver Help.

Set up your project files

When you create a local site, you can place any existing assets images or other pieces of content in the local site's root folder the main folder for the site . That way when you add content to your pages, the assets are there and ready for you to use.
The sample files included in the download ZIP file contain assets for the sample website you'll build in this tutorial series. The first step is to copy the sample files to an appropriate folder on your hard drive:

1. Decide where you want to store your website files on your hard drive. The folder can be anywhere on your computer, but the less buried it is the easier it is to find later. For example:
• Windows C:\Sites
• Mac OS X Your home folder already includes a folder called Sites.
2. Download and unzip the first_website_pt1.zip sample files from the link at the top of this page if you haven't done so already.
3. Copy the check_cs5 folder into the Sites folder.

The check_cs5 folder is the folder you will use as the root folder main folder for your Dreamweaver site.

Note: The local root folder of your Dreamweaver site is normally the main or top-level folder for your website. It usually corresponds to a folder called public_html, www, or wwwroot on your remote server. For example, if you have a website at www.example.com, and have a file called news.html in the root folder, its URL is http://www.example.com/news.html. The normal practice is to give your local root folder the same name as the website without the top-level domain such as .com or .org . For example, I store the files for my website at http://foundationphp.com in a folder called foundationphp on my local hard drive.

Define a local site folder

You must define a Dreamweaver local site folder for each new website you create. Dreamweaver needs to know where your site files are to create all the internal links correctly, and to update them when you move files to a different location within your site.
Next, set up the site for this tutorial series and define as your local site folder the check_cs5 folder you copied into your Sites folder:

1. Start Dreamweaver and select Site > New Site. The Site Setup dialog box appears.
2. In the Site Name text box, enter Check Magazine as the name of the site. The name is used internally by Dreamweaver to identify the site. It doesn't matter if it contains spaces.
3. Click the folder icon next to the Local Site Folder text box to browse to and select the check_cs5 folder.

The Site Setup dialog box should now look like Figure 1.

Figure 1. Defining the local site folder for the Check Magazine site.

Note: The file paths might differ, depending on where you created the Sites folder on your hard drive.

4. Click Save. That's it!

The Files panel in Dreamweaver now shows the new local root folder for your current site (see Figure 2). The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a desktop.

Figure 2. List of files in the Files panel

For more information about how the Files panel works, see Work with files in the Files panel in Dreamweaver Help.
You've now defined a local site folder for the Check Magazine site. This is where you keep the working copies of web pages on your local computer. Later, if you want to publish your pages and make them publicly available, you'll need to define a remote folder—a place on a remote computer, running a web server that will hold published copies of your local files. You'll learn how to do that in part 6 of this tutorial series.

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

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.

Evaluate the task ahead

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.

Figure 1. 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.

Create and save a new page

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).

Figure 2. Before starting work on a site, select it in the Files panel.

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).

Figure 3. Add the page title.

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.

Insert DIV tags

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).

Figure 4. Place the insertion point in the upper-left corner of the page.

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).

Figure 5. Click Insert Div Tag in the Common category of the Insert panel.

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).

Figure 6. The placeholder text identifies the div by its ID.

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).

Figure 7. Nesting the new div inside the container div.

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).

Figure 8. Click the Split view button.

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).

Figure 9. The container and banner div tags in Split view.

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).

Figure 10. Press Enter/Return after the banner div's closing tag.

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.

Figure 11. The HTML code after adding all six divs.

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).

Create a new style sheet

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.

Figure 12. The New Document dialog box.

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:

#container { width: 968px; background: #FFF; margin: 0 auto; padding-left: 10px; padding-right: 10px; overflow: hidden; }

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.

Figure 13. The style rule for the container div.

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.

Attach the new style sheet

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.

Figure 14. The index.html page in Design view before attaching the style sheet.

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).

Figure 15. Click the Attach Style Sheet button.

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.

Figure 16. The container div selected in Design view.

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).

Figure 17. Click the Inspect button.

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).

Figure 18. CSS Inspect mode highlights the divs, padding, and margins.

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.

Add the main images

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.

Figure 19. Selecting Image in the Images submenu.

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.

Figure 20. Adding the alternate text for the image.

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.

Figure 21. The banner image is in the top div.

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).

Figure 22. Click the New CSS Rule button.

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).

Figure 23. The New CSS Rule dialog box suggests the selector type and name.

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).

Figure 24. Setting the background image for the main_image div.

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.

Figure 25. The index.html page after setting properties for the main_image div.

Position the columns

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).

Figure 26. Using related files, you can work in the style sheet and see your page at the same time.

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:

#left_column, #center_column, #right_column { width: 316px; }

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.

Figure 27. The column divs are still stacked on top of each other.

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:

#center_column, #right_column { margin-left: 10px; }

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.

Figure 28. The columns are now in place.

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

Creating your first website – Part 3: Adding content to pages

Welcome to the third part of this tutorial series on creating your first website. This tutorial shows you how to add content to web pages in Adobe Dreamweaver CS5/CS5.5. You can add many different kinds of content to web pages, including graphics, text, links, and Spry widgets—to name just a few. After you've added content to your pages, you can preview your work in Dreamweaver so that you can see what it will look like on the web.

Note: You won't be adding a Spry widget to the page until Part 5 of this tutorial series, Adding the Spry menu.

Locate your files and review your task

In this tutorial, you'll begin with the CSS layout (index.html) you created in Part 2, Creating the page layout. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt2_completed.zip (475 KB) and begin with those. All the required assets for this tutorial are in the check_cs5 local site folder that you set up in Part 1. If you are using the completed files from Part 2, follow the instructions in Part 1 for setting up the Check Magazine site on your local computer.
Your task is to add assets to the home page for Check Magazine, a fictional publication. You'll learn how to add images, text, and links. You'll also learn how to format text using CSS. Figure 1 shows what the finished page will look like at the end of Part 3.

Figure 1. The page after you have entered content into it.

Insert images

After you create your page layout, you are ready to add assets to the page, starting with images. You can use several methods to add images to a web page in Dreamweaver. In this section, you'll add three images to the Check Magazine page using various methods.

Insert an image by using the Insert menu

In Part 2, you used the Insert panel to insert an image. This time, you'll use the Insert menu.

1. In Dreamweaver, open the index.html file that you created in Part 2, Creating the page layout.
2. Delete the placeholder text in the left_column div. Make sure the Insertion point remains inside the div (see Figure 2). (In other words, make sure you don't click anywhere outside the div after you've deleted the placeholder text.)

Figure 2. The left_column div with the placeholder text deleted.

3. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
4. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div, and click the Split button to see what has happened in the underlying code. Dreamweaver has inserted two paragraphs ( <p> tags), each with   inside them (see Figure 3).

Figure 3. Dreamweaver has inserted two empty paragraphs in the div.

Note: The   is the HTML entity (code that represents a special character) for a nonbreaking space. It's there to make the paragraph easier to select in Design view. Dreamweaver normally deletes it automatically as soon as you start typing or insert anything into the paragraph.

5. Select Insert > Image.
6. In the Select Image Source dialog box, navigate to the site's images folder, select the car.jpg file, and click OK (Windows) or Choose (Mac OS X).
7. Dreamweaver displays the Image Tag Accessibility Attributes dialog box (unless you've changed the default preferences).

Type Car in the Alternate Text text box and click OK.

The image appears in Design view, and Dreamweaver inserts the necessary HTML in the underlying code, removing the nonbreaking space in the process (see Figure 4).

Figure 4. The inserted car image and the underlying code.

8. Leave the image selected (in other words, don't click anywhere else on the page), and look at the Property inspector at the bottom of the Dreamweaver application window. (If the Property inspector is hidden, you can display it by selecting Window > Properties).

The Property inspector displays all of the properties for whatever asset you have selected in the Document window. Since we have our new image selected, the Property inspector is displaying the properties for the car.jpg image. You can see that the Property inspector displays the width and height of the image, the file path to the image, and the alternate text that you specified before inserting the image (see Figure 5).

Figure 5. The Property inspector displaying image properties.

The Property inspector is one of the most powerful tools in Dreamweaver. You can use it to change properties for any selected asset on your page at any time.
Note also that the <img> tag is selected in the Tag selector (at the bottom of the Document window)—yet another way that Dreamweaver communicates the precise selection of page assets.
Now let's add the remaining images.

Insert an image by dragging

To insert an image by dragging:

1. Delete the placeholder text in the center_column div. Make sure the Insertion point remains inside the div.
2. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
3. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.
4. In the Files panel (Window > Files), locate the data_addict.jpg file (it's inside the images folder) and drag it to the insertion point in the center_column div (see Figure 6).

Important: Make sure you drag the data_addict.jpg to the Insertion point at the top of the center_column div. It's easy to mistakenly drop the image in the lower half of the div when dragging.

Figure 6. Drag the data_addict.jpg file to the insertion point in the center_column div.

5. In the Image Tag Accessibility Attributes dialog box, type Data in the Alternate Text text box and click OK.

The image appears on your page. You can see all of its properties in the Property inspector.

6. Save the page. It's important to save often!

Insert an image from the Assets panel

To insert an image from the Assets panel:

1. Delete the placeholder text in the right_column div. Make sure the Insertion point remains inside the div.
2. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div tag.
3. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.
4. Click the Assets tab in the Files panel group, or select Window > Assets to make your site assets appear.

The images category in the Assets panel is selected by default. If it isn't selected, click the Images button to view your image assets (see Figure 7).

Figure 7. The Images category of the Assets panel.

The Assets panel displays assets for the site associated with the active document in the Document window. In the screen shot, you can see that the Assets panel displays the selected image asset in the preview area.

5. In the Assets panel, select the helmet.jpg file.
6. Do one of the following to insert the helmet.jpg file in the page:
• Drag the helmet.jpg file to the insertion point in the right_column div.
• Click Insert at the bottom of the Assets panel.
7. In the Image Tag Accessibility Attributes dialog box, type Helmet in the Alternate Text text box and click OK.
8. Save the page, which should now look as shown in Figure 8.

Figure 8. The page after inserting images in the columns.

For more information on working with the Assets panel, see Working with Assets in Dreamweaver Help.

Insert text

Now you'll add text to the page. You can type text directly in the Document window or you can copy and paste text from other sources (such as Microsoft Word or plain text files). Later, you'll use CSS to format the text.

1. Return to the Files panel by clicking its tab.
2. In the Files panel, locate the text.txt file (in the check_cs5 root folder) and double-click the file's icon to open it in Dreamweaver.

You'll notice that this window is in Code view (see Figure 9) and cannot be switched to Design view because it's not an HTML file.

Figure 9. The text file opens in Code view only.

3. In the text.txt Document window, select the first block of text (beginning with "Inside Tesla Motors®" up to and including "read more...").
4. Copy the text by pressing Ctrl+C/Cmd+C, or by selecting Edit > Copy. Alternatively, you can right-click and select Copy from the context menu that appears.
5. Leaving the text.txt file open, click the tab of the index.html document.
6. Click inside the left_column div below the car image, placing the Insertion point in the same place where you created space earlier (see Figure 10).

Figure 10. The Insertion point placed below the car image in the left_column div.

7. Paste the text by pressing Ctrl+V/Cmd+V, or by selecting Edit > Paste. Alternatively, right-click and choose Paste from the context menu that appears.

The text is displayed in the div (see Figure 11).

Figure 11. The Inside Tesla Motors® text pasted in the div.

Don't worry about the look of the text. You'll format it with CSS so that it looks more like the text in our design comp.

8. Return to the text.txt file by clicking its tab.
9. In the text.txt Document window, select the second block of text (beginning with "Facts and Figures" up to and including "read more...").
10. Copy the text.
11. Leaving the text.txt file open, click the tab of index.html.
12. Click inside the center_column div below the data image, placing the Insertion point in the same place where you created space earlier.
13. Paste the text.
14. And one last time, return to the text.txt file by clicking its tab.
15. In the text.txt Document window, select the third block of text (beginning with "Today's Self Improvement" up to and including "read more...").
16. Copy the text.
17. Close the text.txt file by clicking the X in the upper-right corner of its tab. (You won't need the remaining text until later.)
18. On the index.html page, click inside the right_column div below the helmet image, placing the Insertion point in the same place where you created space earlier.
19. Paste the text.

Your three columns are now filled with text (see Figure 12).

Figure 12. The text in all three columns.

20. Save the index.html page.

Now all you need to do is format the text so that it looks more like what the designer intended.

Format text with CSS

In Part 2, Creating the page layout, you learned how to insert div tags and then position those tags on the page to create the layout. You separated content (the HTML div tags) from presentation (the CSS that controls the layout) by creating new CSS rules, placing them in an external style sheet, and then applying them to the div tags on your page. In a nutshell, you learned that you can insert elements on a page and create styling rules in a linked CSS page, and that when you apply those styling rules to particular elements on a page, those elements are directly affected by the rules.
Well, the same holds for text on a page. CSS is used to format text as much as it is to position div tags. You type or paste your text on the page, create a CSS rule, and then apply the rule to the text, just as you would apply it to a div. In fact, all text is contained within some sort of tag—it might be a div, but it could also be a paragraph tag ( <p> ), a heading tag ( <h1> , <h2> , etc) or any other kind of tag. Normally what you do when you format text with CSS is apply the CSS rule to the particular tag that you want to format.
Before going on, I recommend that you read Understanding Cascading Style Sheets, a basic overview of how CSS works to format text. Having a little background information about the ins and outs of CSS will make the rest of this tutorial a lot easier to comprehend.
Now let's format some text.

1. Open the CSS Styles panel (Window > CSS) by clicking its tab.
2. (Optional) If it's not already closed, double-click the Insert panel to close it and create more room.
3. In the CSS Styles panel, click the All button to make sure you are viewing All mode.

Earlier, when you first used the CSS Styles panel to create a new rule, the panel displayed no rules because you hadn't created any yet. Now that you have a bunch of rules applied to elements on the page, the CSS panel is displaying all of the pertinent rules (see Figure 13).

Figure 13. Layout rules in the CSS panel.

In addition to creating and attaching new rules, the CSS Styles panel lets you track the CSS rules and properties that affect the elements on the page. All mode lets you see all of the page's rules at once, while Current mode lets you see the rules that apply to the current selection on the page. The CSS Styles panel also lets you modify CSS properties without opening an external style sheet.
There are a number of ways we could go about formatting your text. Beginners often create class rules and apply them to each paragraph, but that's a very inefficient approach. It's better to use CSS to apply an overall style first, and use classes and other CSS selectors only for those elements that you want to style differently.
For now, all you need is a nice font format and size, and since you want your format to be uniform across all three columns, you can simply define the font format in a rule for the body tag ( <body> ). The body tag is the topmost tag of the HTML page, which means that all other tags on the page (including all of our div tags) inherit the properties defined for the body tag. By defining your text properties in the body tag, you will effectively be defining text properties for all text that appears on the page.

4. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule button.
5. In the New CSS Rule dialog box, do the following:
• Select Tag from the Selector Type pop-up menu.
• Type or select body in the Selector Name text box.

Note the description in the text box below the selector name. Dreamweaver is telling you that the rule you're creating will apply to all <body> elements. That's exactly what you want.

6. Make sure check_cs5.css is selected from the Rule Definition pop-up menu.
7. Click OK.

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

8. Select the Type category in the Category column. (It should be selected by default.)
9. In the Type category, do the following:
• From the Font-family pop-up menu, select Trebuchet MS, Arial, Helvetica, sans-serif
• Click the Color box and use the eyedropper tool to select black (#000).
• Click Apply.

As soon as you click Apply, all the text in Design view should be formatted with the new style (see Figure 14).

Figure 14. You can check the effect of your styles by clicking the Apply button.

Tip: If you want to experiment with different styles, you can change the values in the CSS Rule Definition dialog box, and click Apply to see the effect immediately reflected in Design view.

10. While you've got the CSS Rule Definition dialog open, you should set a background color for the <body> tag. Although current browsers set the background color to white, it's generally recommended to set the color explicitly in your own style rules—and, of course, you can choose any color you like.

Select Background from the Category list on the left.

11. Click the Background-color color box, and select white (#FFF).
12. Click OK to close the CSS Rule Definition dialog box.

You'll notice two things. One is that Dreamweaver has added the new body tag rule to the CSS Styles panel (see Figure 15).

Figure 15. The new body rule in the CSS Styles panel.

The other thing you might notice is the asterisk (*) that appeared next to the check_cs5.css file name in the upper left-hand corner of your document (see Figure 16).

Figure 16. The asterisk in the Related Files toolbar reminds you to save the changes to the style sheet.

What Dreamweaver is showing you here is that you have an unsaved related file.

13. Select File > Save All Related Files to save the changes you made to the style sheet.

Format headings and create links

Now you just need to do a couple more things to finish formatting the text in your columns.

Format headings

To format headings:

1. In the left_column div, place the Insertion point after the ® symbol at the end of the first line, and press Enter (Windows) or Return (Mac OS X).

Note that the Insertion point is now on a line above the following text. Open Split view to understand what has happened. There's a line break ( <br /> ) tag immediately after the opening <p> tag (see Figure 17).

Figure 17. The text you pasted into the columns contains <br /> tags.

When you pasted the text from text.txt, the newline characters were converted to <br /> tags. This gives the impression of paragraphs, but causes problems for formatting the text correctly. Pressing Enter/Return created a closing </p> tag at the end of the first line, and an opening <p> tag at the beginning of the next line, but the <br /> tag wasn't removed, leaving too big a space between the paragraphs.

2. Make sure the Insertion point is still in the same place, and press your down arrow once to move the Insertion point before the word The.
3. Press Backspace to delete the unnecessary line break (see Figure 18).

Figure 18. The line break has gone, leaving two paragraphs.

This is a very important step. The main paragraph text must be completely separated from the heading before we apply a format to the heading.

4. Click anywhere in the heading text. For example, click in the word Tesla. You do not need to select any text—you only need to make sure that the Insertion point is somewhere in the heading text.
5. In the Property inspector (Window > Properties), make sure the HTML button on the left is selected.
6. Select Heading 2 from the Format pop-up menu (see Figure 19).

Figure 19. Select Heading 2 from the Format pop-up menu in the HTML Property inspector.

The Inside Tesla Motors® heading changes to a Heading 2. The size and weight of the text you see here is the default size and weight for a Heading 2. In other words, you did not really need to apply any CSS to achieve this effect (though you could have!)
Now you'll do the same thing with the remaining headings.

7. In the center_column div, place the Insertion point after the word Figures at the end of the first line of text and press Enter (Windows) or Return (Mac).
8. Press the down arrow once, to move the Insertion point before the word How at the beginning of the next line, and press Backspace to remove the line break.
9. Click anywhere in the heading text. For example, click in the word Figures.
10. In the Property inspector, select Heading 2 from the Format pop-up menu.

The Facts and Figures heading changes to a Heading 2.

11. Lastly, in the right_column div, place the Insertion point after the word Improvement at the end of the first line of text and press Enter (Windows) or Return (Mac OS X).
12. Press the down arrow once to move the Insertion before the word Whether at the beginning of the next line, and press Backspace to remove the line break.
13. Click anywhere in the heading text. For example, click in the word Improvement.
14. In the Property inspector, select Heading 2 from the Format pop-up menu.

The Today's Self Improvement heading changes to a Heading 2.

15. Save the page.

Create links

A link is a reference, inserted in a web page, that points to another document. You can turn almost any kind of asset into a link, but the most common kind of link is a text link. In this section, you'll turn the "read more..." text in each of our three columns into links.
The check_cs5 site root folder contains a finished HTML page that you can link to (a news page for the magazine). You'll use this page for all of the links in the columns, even though you would have distinct pages for each of these links if you were building a real site.

Note: The news.html page is a dummy page made up of images, and is not intended for practical use. A follow-up tutorial will later show you how to create a functioning version of the page using a database and PHP server-side technology.

1. In the left_column div, select the "read more..." text at the end of the paragraph, including the periods (see Figure 20).

Tip: Because there's no gap between the text and the left side of the div, you might find it difficult to select the text from left to right. Click and drag from the right—it's much easier.

Figure 20. Selecting text in the left_column div.

2. In the HTML Property inspector, click the folder icon next to the Link text box (see Figure 21).

Figure 21. Clicking the Folder icon in the Property inspector.

3. In the Select File dialog box, select the news.html file (which is in the same folder as index.html) and click OK (Windows) or Choose (Mac OS X).
4. Click next to the "read more..." text to deselect the link. You'll see that the text has transformed into a link, underlined and blue.
5. Repeat the previous steps and link the "read more..." text in the remaining two columns to the news.html page. When you're finished, your page should look as shown in Figure 22.

Figure 22. The three columns with linked text.

6. Save the page.

You just created three links to a page that's internal to our site. But you can also use the Link text box in the Property inspector to create links to external websites. To do so, simply select the text or element you want to link, and then type the website's full URL in the Link text box of the Property inspector. For example, if you wanted to link the third "read more..." text in our example to adobe.com, you would select the text, type in the Link text box, and press Enter/Return.

Note: When linking to an external site, you must include the http:// at the beginning of the URL. If you omit it, the browser treats it as an internal link.

Preview the page

Design view gives you a reasonably good idea of what your page will look like on the web, but you must preview the page in Dreamweaver or in a browser to see the definitive end result. With Dreamweaver CS5, you can preview your page directly in the Document window using Live View. You can also compare how your site looks in leading browsers by launching BrowserLab.

Preview your page in Live View

To preview the page, ensure that the index.html page is open in the Document window, and click the Live View button (see Figure 23).

Figure 23. Click Live View to preview the page inside Dreamweaver.

Dreamweaver displays a preview of your page, just as it would appear in a browser. The page does not look all that different, as Dreamweaver does a pretty good job of displaying pages in Design view as they would look in a browser; but you'll notice that small changes occur when you enter Live view—the outlines for all of the div tags disappear, for example.
Dreamweaver Live View uses WebKit as its rendering engine—the same engine that powers the Apple Safari browser, and a host of other applications such as Google Chrome and Adobe AIR.

Check links in Live View

In Dreamweaver CS5, Live View works just like a real browser, allowing you to follow links. Hold down the Ctrl key (Windows) or Cmd key (Mac OS X) when you click a link, and Dreamweaver takes you to the target page within the Document window—even if the link points to an external page on a different site (assuming you're connected to the internet at the time).

1. Click the Live View button to view index.html as it looks in a standards-compliant browser.
2. Hold down Ctrl/Cmd and click one of the "read more" links.

The news.html page appears in the Document window (see Figure 24).

Figure 24. You can follow links to other pages in Live View in Dreamweaver CS5.

Notice that there's a Browser Navigation bar at the top of the Document window. It works in the same way as you would expect in a browser with Backward and Forward buttons. The Home button takes you back to the page you started from. You can even type a completely different URL in the Address text box, and Dreamweaver loads it into Live View (as long as the site is accessible).
If you don't want to hold down Ctrl/Cmd each time you click a link, select Follow Links Continuously from the Live View Options menu (see Figure 25).

Figure 25. Select the option to follow links continuously.

However, this works only during the current Live View session. If you turn off Live View, you need to select this option again the next time you launch Live View.

3. Click the Home icon in the Browser Navigation bar to return to index.html, and click Live View to turn it off.

Preview your page in BrowserLab

BrowserLab is an online Adobe service integrated directly into Dreamweaver CS5 that lets you see what your pages look like in a wide range of popular browsers on both Windows and Mac OS X, saving you the need to install multiple browsers and operating systems locally.
To use BrowserLab, you need an Adobe ID. If you registered your Adobe ID during the installation of Dreamweaver CS5 (or Creative Suite CS5), you're ready to go. Otherwise, select Help > Register, and follow the instructions onscreen to register for CS Live Services.

1. With index.html open in the Document window, open the BrowserLab panel by clicking its tab, or by selecting Window > BrowserLab. Make sure you're connected to the internet, and that the menu option alongside the Preview button in the BrowserLab panel is set to Local, and click Preview.

Alternatively, press Ctrl+Shift+F12 (Windows) or Shift+Cmd+F12 (Mac OS X).

2. Dreamweaver opens BrowserLab in your default browser, and prompts you to sign in with your Adobe ID. It then uploads your page and all related files and assets to the BrowserLab server.

After a short while (the time depends on the speed of your Internet connection), BrowserLab displays your page as it looks in a range of different browsers and operating systems. You can create your own subsets of browsers and operating systems to test in, view different ones side by side, or superimpose them in "onion skin" mode.

Figure 26 shows index.html as it currently looks in Safari 4.0 on Mac OS X and Internet Explorer 6 on Windows XP.

Figure 26. Comparing the Check Magazine page in different browsers in BrowserLab.

If you look closely at the image on the right of Figure 26, you can see that Internet Explorer 6 leaves no gap between the main image and the image in the columns (Internet Explorer 7 does the same).

Note: When checking the page in BrowserLab, you'll notice that the main image is not rendered in Firefox 2.0 on either Windows or Mac, because it's a background image. The market share of Firefox 2.0 is estimated at about 0.6 percent and falling, so it can be ignored, particularly since the image is purely decorative.

3. Switch back to Dreamweaver, and add the following style rule at the bottom of the check_cs5.css style sheet:

p { margin-top: 1em; }

This adds a margin of one em to the top of each paragraph. An em is a measurement borrowed from typography. In CSS, one em is equivalent to the height of the current font. When typing the rule, make sure there is no gap between the number and the unit. Type 1em, not 1 em.

4. Save check_cs5.css, and click the Preview button in the BrowserLab panel to refresh the version on BrowserLab.
5. Select Internet Explorer 6 in BrowserLab. The images at the top of the columns are now correctly positioned (see Figure 27).

Figure 27. BrowserLab confirms that the paragraph style has fixed the problem.

6. Select Internet Explorer 7. The images are correctly positioned.
7. Check the other browsers. The images are now in the same position in all of them. By default, most browsers add a top margin equal to the height of one line at the top of every paragraph. It's just Internet Explorer 6 and 7 that weren't playing ball. The style rule brought them back into line without affecting the look in other, more standards-compliant browsers.
8. Close your browser window or tab to exit BrowserLab.

Preview your page in a browser

Using BrowserLab to compare how your pages look in different browsers on different operating systems is important before you publish them on the Internet. But sometimes, you just want to take a quick look in a browser or two on your local computer. That's where Preview in Browser comes in useful.
To preview the current page in your default browser, just press the F12 key (Windows) or Option+F12 (Mac OS X). You can also edit Dreamweaver Preferences to register other browsers.

1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS X) to open the Preferences panel.
2. Select Preview in Browser from the Category list on the left.
3. Dreamweaver might already have detected other browsers on your computer. To add other browsers, click the plus button alongside Browsers to open the Add Browser dialog box.
4. Type the name of the browser in the Name text box, and click the Browse button to navigate to the browser's application file.
• On Windows, this is normally the .exe file in the browser's subfolder of C:\Program Files or C:\Program Files (x86).
• On Mac OS X, select the browser's name in the Applications folder.

Tip: On Windows, Google Chrome is installed in a folder associated with your user account. To locate it, you need to enable the display of hidden files and folders. Right-click the application name in the Windows Start menu and select Properties to find the exact location.

5. Select one of the browsers listed in the Browsers text area, and select the Secondary browser check box. To launch the current page in the Document window in your secondary browser, press Ctrl+F12 (Windows) or Shift+Opt+F12 (Mac OS X).
6. To launch your page in a particular browser, select File > Preview in Browser, and choose the browser from the list. Alternatively, click the Preview/Debug in Browser button on the Document toolbar, and select a browser from the list (see Figure 28).

Figure 28. Select a browser from the list to preview your page locally.

Creating your first website – Part 4: Adding the main image text

Welcome to Part 4 of this tutorial series on creating your first website. This tutorial shows you how to add text to the main image area of the index page for Check Magazine, a fictional publication, using a combination of relative and absolute positioning. The tutorial also shows you how to use CSS to format the text.

Locate your files and review your task

In this tutorial, you'll begin with the CSS layout (index.html) you added content to in Part 3, Adding content to pages. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt3_completed.zip (474 KB). If you haven't completed Part 1, Setting up your site and project files, you will need to complete that tutorial as well.
Your task in this tutorial is to add a block of text to the main image area of the Check Magazine home page. You'll also learn how to format the text using CSS. Figure 1 shows what the main image area will look like in a browser after you've added the text.

Figure 1. The main image area of the Check Magazine home page with added text.

Basically what you'll do to accomplish this task is add a div with text to the main image area, format the text, and lastly, position the div.

Add the div tag and text

Although the main_image div looks as though it's filled with a large image, there's actually nothing inside the div. The image is simply the background. If you look at the original design comp again, you'll see that to finish the page, you need to add a block of text at the bottom right of the div. You also need to add a menu bar, but you'll tackle that in Part 5. First, let's deal with the text in the main_image div.
The text consists of two headings and a paragraph, so you need to create a div to hold them all together, and nest it inside the main_image div.

1. In Dreamweaver, open the index.html file that you created in Part 3, Adding content to pages.
2. The most accurate way of inserting a new div is to use the options in the Insert Div Tag dialog box. It doesn't matter where the Insertion point is, the options enable you to insert the div accurately, as long as your page elements have IDs. All the divs in index.html have been given IDs, so it's just a question of choosing the correct options in the dialog box.

Click Insert Div Tag in the Insert panel, or select Insert >Layout Objects > Div Tag to open the Insert Div Tag dialog box.

3. Click the down arrow of the Insert pop-up menu to reveal the options (see Figure 2).

Figure 2. View the options for where to insert the new div tag.

The options available are:

• At insertion point. The new div is inserted wherever the Insertion point currently is.
• Before tag. The new div is inserted immediately before the specified element's opening tag.
• After start of tag. The new div is inserted immediately after the specified element's opening tag.
• Before end of tag. The new div is inserted immediately before the specified element's closing tag.
• After tag. The new div is inserted immediately after the specified element's closing tag.
• Wrap around selection. This option is displayed only when something is selected in the document window. The new div is wrapped around the selected element(s).

4. The new div needs to be nested inside the main_image div, so it needs to go after the starting tag of main_image. Set the Insert pop-up menu to "After start of tag." (Because the main_image div is empty, you could also use "Before end of tag" in this case.)

This activates a new pop-up menu to the right of the Insert pop-up menu.

5. Click the down arrow of the new pop-up menu to reveal its contents. It lists the <body> tag, along with all other page elements that have an ID (see Figure 3).

Figure 3. Select the main_image div from the list.

6. Select <div id="main_image"> from the list.
7. Type main_text in the ID text box.
8. Click the New CSS Rule button at the bottom of the Insert Div Tag dialog box. This opens the New CSS Rule dialog box.
9. Dreamweaver automatically selects the correct values for Selector Type (ID) and Selector Name (#main_text).

However, you need to check that Rule Definition is set to check_cs5.css. If it says "This document only," select check_cs5.css from the Rule Definition list.

10. Click OK to open the CSS Rule Definition dialog box, and select Background from the Category list on the left.
11. Click the Background-color color box, and select white (#FFF), as shown in Figure 4.

Figure 4. Set the CSS background-color property for main_text to white.

12. Select Box from the Category list on the left.
13. Type 300 in the Width text box, and make sure the pop-up menu alongside is set to px (see Figure 5). This sets the width of the main_text div to 300 pixels.

Figure 5. Set the width of the main_text div to 300 pixels.

14. Click OK. This saves the new CSS rule, and brings you back to the Insert Div Tag dialog box.
15. Click OK to close the Insert Div Tag dialog box. This inserts the main_text div with some placeholder text.
16. Click anywhere in the Document window away from the new div to deselect the placeholder text. The main_image div should now look like Figure 6, with a 300-pixel wide, white box containing placeholder text at the top left.

Figure 6. The main_text div has been nested inside the main_image div.

The white background of the main_text div covers the background image, so the text can be clearly read.

17. Now, it's time to insert the final text. In the Files panel (Window > Files), double-click the text.txt file to open it.
18. Select the entirety of the last block of text in the file, everything from "OPERATIVE WORDS" up to and including ". . . hiding in his bathroom."
19. Copy the text by selecting Edit > Copy, by right-clicking and selecting Copy from the context menu, or pressing Ctrl+C/Cmd+C.
20. Close the text.txt file.
21. Select the placeholder text for the main_text div, and paste the text from your clipboard by pressing Ctrl+V/Cmd+V, or selecting Edit > Paste.

The text you copied from text.txt replaces the placeholder text, and the main_text div automatically expands vertically to accommodate it (see Figure 7).

Figure 7. The main_text div is now ready to be formatted and positioned.

22. Select File > Save All Related Files to save index.html and the style sheet.

Rearrange CSS

Before showing you how to format your text, I'd like you to take a look at the CSS. As you've been creating rules, Dreamweaver has been adding the CSS to the external style sheet for you. However, because you've created the rules at different points in the page's development, they are not necessarily in the most logical order. I like to have my CSS ordered logically so that if I want to edit the style sheet later on, I'll have an easier time scanning and finding the rule I'm interested in.

1. Click check_cs5.css in the Related Files toolbar to open the style sheet in Split view (see Figure 8).

Figure 8. The styles you have created so far.

2. Scroll down to the bottom of the CSS file, and note that the #main_text rule is the last rule on the page. That's because you just added it in the previous section. Also note that the body rule is third from the bottom.

Because the body rule affects the entire page (corresponding to the <body> tag of the HTML document), it's usually the first rule in the CSS file. But since you created it after you created some of the other rules, Dreamweaver placed it farther down in the file.

Similarly, the #main_text rule goes hand-in-hand with the #main_image rule, and doesn't belong at the bottom of the CSS file. In other words, if you were looking for all of the rules that affect that central section of the page, you'd want to see these two rules grouped together in the CSS file.

Another problem is that the body and #main_text selectors (on lines 25 and 31 in Figure 8) are on the same line as the closing brace of the previous rule. This happens if you don't leave a blank line at the bottom of the style sheet when creating a new rule manually. It doesn't affect the way the browser handles the style rules, but untidy code is difficult to read, and could lead to mistakes. It's better to reformat it.

You could work directly in the CSS file, cutting and pasting until you get the file to look the way you want. However, I'm going to show you another way.

3. Select Commands > Apply Source Formatting. Dreamweaver sweeps through the style sheet, putting rules on lines of their own, and tidying up any indenting problems.
4. If the CSS Styles panel isn't already open, click its tab to open it.
5. Click the All button to make sure All mode is selected.

You'll see all of your rules listed. The order of the rules in the CSS Styles panel follows the same order as the style sheet (that is, #main_text is last, body is third from the bottom).

6. Select the body rule and drag it to the top of the rules list, above the #container rule (see Figure 9).

Figure 9. Drag the body rule to the top of the rules list in the CSS Styles panel.

7. Look at the style sheet in Split view. The body rule has been moved above the #container rule (see Figure 10).

Figure 10. The body rule has been moved in the style sheet as well.

Note: Don't worry if you see the comment text /* CSS Document */ in between the body rule and the #container rule (see line 7 in Figure 10), you can go ahead and delete it. This is just descriptive comment text that Dreamweaver adds to the file by default.

8. Next, select the #main_text rule and drag it up the list, dropping it just below the #main_image rule, as shown in Figure 11.

Figure 11. Drag the #main_text rule.

Your rules now follow a more logical order: first comes the body rule, which governs the entire page, then the #container rule, which also governs the other rules, since all of the elements associated with those rules exist within the container div. Then come the rules associated with each element on the page, ordered as those elements appear on the page: the main image, the main text, and the columns at the bottom.

9. Save the style sheet.

Format the text

Next you'll format the text inside the main_text div.

1. The index.html file should still be open in the Document window. If it isn't, double-click its icon in the Files panel to open it.
2. Click the Design view button so that you are no longer in Split view.
3. Place the Insertion point after WORDS at the end of the first line in the main_text div, and press Enter (Windows) or Return (Mac OS X) to divide the text into separate paragraphs.
4. Press the down arrow key once so that the Insertion point is before the word Stumbling, and press the Backspace key once to delete line break. This is the same technique as you used when breaking up the text you pasted in Part 3 of this tutorial series.
5. Place the Insertion point after the word Circle at the end of the second line in the main_text div, and press Enter (Windows) or Return (Mac OS X) to create a new paragraph.
6. Press the down arrow once to place the Insertion point before the capital letter T in the word The, and press the Backspace key once to delete the line break. There should now be three separate paragraphs in the main_text div (see Figure 12).

Figure 12. The text has been split into three paragraphs.

7. Make sure the Property inspector is open (Window > Properties) and that the HTML button on the left of the Property inspector is selected.
8. In the main_text div, place the Insertion point in the OPERATIVE WORDS line (anywhere in the line will do), and note that the Format is set to Paragraph in the Property inspector. This is the format Dreamweaver automatically created when you pressed Enter/Return to separate the lines of text.
9. Select Heading 2 from the Format pop-up menu of the Property inspector.

Note that you do not need to select the entire line of text before applying a format. This is because Dreamweaver is formatting the text by changing the text's entire tag (from a paragraph tag to an h2 tag).

10. Place the insertion point in the second line, the Stumbling line.
11. Select Heading 3 from the Format pop-up menu of the Property inspector.
12. Click the Split view button so that you can see the new tags (see Figure 13).

Note: If the style sheet is still visible when you open Split view, select Source Code in the Related Files toolbar just below the page's tab.

Figure 13. The h2, h3, and paragraph tags in Code view.

These tags are important. You'll use them in the CSS to define the rules that will format the text.

13. Click the check_cs5.css button in the Related Files toolbar to display the contents of the style sheet.
14. In the CSS file, place the Insertion point after the closing brace of the #main_text rule and press Enter/Return a bunch of times to create some space (see Figure 14).

Figure 14. Creating space in the CSS file.

15. Move the Insertion point back up until it's just below the closing brace of the #main_text rule (you can use the up arrow key on your keyboard, or the mouse), and type the following empty rules into the file:

#main_text h2 { } #main_text h3 { } #main_text p{ }

The selectors for these rules (that is, the names outside the braces that define the rules) are called descendant selectors because they target HTML elements that are descendants of another element (in other words, nested inside it). The first of these selectors targets <h2> tags inside the #main_text div. What this means is that any styles defined in this rule will have no effect on the <h2> tags in the columns at the bottom of the page.
The second rule affects <h3> tags only if they're inside the #main_text div. And the last one formats paragraphs ( <p> tags) only if they're inside the #main_text div.

Note: When using the New CSS Rule dialog box to create descendant selectors, you need to set the Selector Type pop-up menu to Compound. This is Dreamweaver's way of describing CSS selectors that are created using multiple elements.

16. The CSS file should now look as shown in Figure 15.

Figure 15. The CSS file with the new empty rules.

17. Now, add the following properties and values to the empty rules so that they look like this:

#main_text h2 { color: #00b4e1; } #main_text h3 { font-size:16px; } #main_text p { font-size: 14px; }

18. Once you've added properties to all three rules, press F5 or click once in Design view to refresh the display.

Look what happened to the text. The h2 heading has turned blue; the h3 heading has been resized, and now fits on one line; and the paragraph text has been reduced in size (see Figure 16).

Figure 16. The main_text div text after applying new rules.

Note: For many years, it was recommended not to use pixels for the font-size property because the world's most popular browser at the time, Internet Explorer 6, made it difficult for people with poor eyesight to resize the text. However, Internet Explorer 7 introduced a zoom feature, and issue is becoming less of a problem as Internet Explorer 6 gradually dies away.

You're not quite there yet. The three sections of text are still a bit too spread out, and the paragraph text is bumping right up against the walls of the main_text div. You need to add a few more properties and values to fix that.

19. Add three more properties and values to the #main_text rule, so that it looks as follows:

#main_text { background-color: #FFF; width: 300px; line-height: 1.2; font-family: "Myriad Pro", Helvetica, Arial, sans-serif; padding: 12px;}

The line-height property will increase the vertical space between all lines in the main_text div. (Yes, you do actually want to increase the general line height in the div—you'll see why in a moment.) The font-family property will change the font of all the text in the div, and the padding property will add a 12-pixel padding inside the div.

Note: When you have a single value for padding, it acts as a shorthand value for top, bottom, left, and right. It is the equivalent of saying:

padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px;

20. Refresh Design view by clicking inside it or pressing F5 to see how the new properties have affected the text.

Lastly, get rid of some of the vertical space between the blocks of text, and condense the div.

21. Add a margin property to the #main_text h2 rule, the #main_text h3 rule, and the #main_text p rule, so that the rules look as follows:

#main_text h2 { color: #00b4e1; margin: 0 auto; } #main_text h3 { font-size:16px; margin: 0 auto; } #main_text p { font-size: 14px; margin: 0 auto; }

The syntax for the margin property above is another short-hand notation, much like the one for padding in the previous step. When you declare only two values for the margin property, the first value declares the top and bottom values, and the second value declares the left and right values. By declaring a top and bottom margin of 0 for all three of these rules, you are effectively saying that there should be no extra space (other than the 1.2 line height) between the h2, the h3, and the paragraph text. The auto value in this case simply specifies the default value for the right and left of the h2, h3, and paragraph elements.

Tip: For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the Book pop-up menu in the Reference panel.

22. Refresh Design view to see how the margin properties have affected the text (see Figure 17).

Figure 17. The main_text div after you have added margin properties and applied the rules.

The text is looking pretty good, but before you go ahead and position the div, let's check to see what the text formatting looks like in Live view.

23. Click the Live view button.

Design view displays the page in Live view (see Figure 18).

Figure 18. The formatted main_text div as it appears in Live view.

Hmm . . . that's not exactly what I wanted. Monitors might differ, but on my screen the OPERATIVE WORDS h2 text still seems a little too close to the h3 text in Live view. Let's fix that by adjusting the margin of the h2 heading one last time.

24. Leaving Live View active, go back to the CSS file, and change the #main_text h2 rule to this:

#main_text h2 { color: #00b4e1; margin-top: 0; margin-bottom: 10px; }

25. Refresh Live View by clicking back inside or pressing F5, and note the change (see Figure 19).

Figure 19. The main_text div after adjusting the margin properties for the h2.

That's much better!

26. Click the Live View button to exit Live View.
27. Select File > Save All Related Files to save the CSS file.

Position the main_text div

Now that you have the main_text div looking exactly the way you want, the final task is to position it on the page. There are several ways of doing this.
The approach taken in the original version of this tutorial series was to add padding to the top and left of the main_image div. This achieved the desired result, but many readers found it difficult to follow, because of the way CSS treats width and height when padding is added to an element. The CSS box model adds padding outside the width and height, not inside. As a result, to move the main_text div to the bottom right of the main image, you needed to subtract from the width and height of the main_image div the same amount as you added in padding. In other words, to add 100 pixels of padding to the top of the div, you needed to subtract 100 pixels from its height, so that the total of padding plus height still came to the same amount. Moreover, positioning the main_text div like this was possible only because the main_image div was empty. If you wanted to put more than one block of text inside the main_image div, the calculations became even more complex.
The approach I have decided to adopt this time is to use absolute positioning. Before showing you how to do it, I must sound a word of warning. Many beginners fall into the trap of trying to lay out their entire design with absolute positioning (or AP Divs, as Dreamweaver calls them). The attraction of absolute positioning is that you can place an element precisely on a page, making web design feel almost like desktop publishing. However, the web is a fluid medium. People view pages on different size monitors, and at different resolutions. Absolutely positioned elements behave in a very different way from other elements. They stay where you put them, and don't interact with the rest of the page. So, it the user resizes the browser, an absolutely positioned element might disappear off screen. The browser doesn't generate a scrollbar when this happens, so vital information might become inaccessible.
However, if used carefully, absolute positioning can be very effective, particularly when you want to align an element with a background image. In this case, the plan is to position the bottom right corner of the main_text div slightly above and to the left of the white cross at the bottom of the main image (see Figure 1).

1. Click the Design button to view index.html in Design view.
2. (Optional) Press F4 to hide the panels. You need to get a good view of the page layout, particularly of the main image.
3. Select View > Rulers > Show. This adds rulers measured in pixels at the top and left of the Document window.
4. Click inside the top ruler and drag down. As you drag, you should see a thin, green, horizontal line move down the page, with a yellow tooltip indicating how many pixels it is from the top of the page (circled in Figure 20).

Figure 20. Dragging a horizontal guide from the ruler at the top of the page.

5. Continue dragging until the green line is flush with the bottom of the main image (around 491 px).
6. Drag another guide from the top ruler until it's in line with the position above the white cross where you would like the bottom of the main_text div to be. The exact position isn't important. Use your eye to judge what looks good.
7. Make sure your cursor pointer is between the green guides you have just positioned on the page, and hold down the Ctrl key (Windows) or the Cmd key (Mac OS X). Dreamweaver displays the distance in pixels between the two guides (see Figure 21).

Figure 21. Measuring the distance between the guides.

8. Make a note of the value.
9. Drag two guides from the left ruler, and position them in line with the right edge of the main image and where you would like the right edge of the main_text div to be.
10. Position your cursor pointer between the vertical guides and hold down the Ctrl key (Windows) or the Cmd key (Mac OS X), and make a note of the distance.
11. The white cross is equidistant from the bottom and right edges of the main image, so the horizontal and vertical distances should be the same. I find that 60 pixels is about right.

If you have difficulty positioning the guides, double-click one of the guides to open the Move Guide dialog box, and set the position by typing a value in the Location text box. Use 431 px for the horizontal guide. The value for the vertical guide will depend on the size of the Document window. Double-click the guide on the right edge of the main image to find its position, subtract 60, and use that value for the main_text vertical guide.

12. Open the CSS Styles panel by clicking its tab, or by selecting Window > CSS Styles.
13. Make sure the All button is selected to view the panel in All mode.
14. Double-click #main_text to reopen the CSS Rule Definition dialog box for the #main_text style rule.
15. Select Positioning from the Category list on the left, and add the following settings:
• Set the value of the Position pop-up menu to absolute.
• Type 60 in the Right and Bottom text boxes, and make sure the pop-up menus alongside are set to px.
• Click Apply.

Figure 22. Using absolute positioning for the main_text div.

16. Don't worry if the main_text div remains stubbornly at the top-left of the main image div. Click OK to close the CSS Rule Definition dialog box, and select File > Save All Related Files to save the style sheet. The main_text div should move into position with its right and bottom edges aligned precisely with the green guides.

Note: If the main_text area still doesn't move. Try closing index.html and reopening it.

17. Click the Live View button to verify the text is in the correct position (see Figure 23).

Figure 23. Live View confirms that the text is correctly positioned.

18. With Live View still active, select #main_image in the CSS Styles panel, and move your cursor pointer over the left side of the Properties pane until you see the Disable CSS Property symbol next to the position property (see Figure 24).

Figure 24. Temporarily disabling a property in the CSS Styles panel

19. Click once to disable the position property. A red symbol appears alongside the property to indicate that it has been disabled.

Note: The ability to disable style rules temporarily is new to Dreamweaver CS5. If you are using an older version of Dreamweaver, you will need to open the style sheet and manually comment out the position: relative; declaration.

Look what has happened to the main_text div. It has moved from its previous position(see Figure 25).

Figure 25. The position of the main_text div is no longer relative to the main_image div.

The actual position of the main_text div depends on the size of your Document window. Instead of being positioned relative to the bottom and right of the main_image div, it's now 60 pixels from the bottom and right edge of the Document window.

20. Click the Disable CSS Property icon alongside the position property to re-enable it. The main_text div jumps back into place.

What's important to understand here is that the main_text div is nested inside the main_image div. In CSS terms, #main_text is the child of #main_image , and #main_image is the parent of #main_text . By setting the position property of the parent to relative , the child is absolutely positioned relative to its parent. When you disabled the position property in #main_image , the absolute position of #main_text was calculated relative to the bottom and right edges of the browser window (in this case, Live View).

21. Select File > Save All Related Files to save the page and the style sheet.
22. Open the BrowserLab panel by clicking its tab, or by selecting Window > BrowserLab, and click Preview. Verify that the page looks as expected in all major browsers. Even Internet Explorer 6 plays ball.
23. Select View > Guides > Clear Guides to remove the green guide lines from Design view.

Used in moderation, absolute positioning can be very helpful in situations like this. By using the bottom and right offsets, the bottom-right corner of the main_text div will remain in the same position, but it will grow taller if you add more text. A common mistake with using absolute positioning is the failure to realize that web pages are designed to be flexible. If you use absolute positioning for text elements, adding extra text is likely to result in one element overlapping another. It's also important to understand the principle of anchoring an absolutely positioned element inside its parent by setting the parent's position property to relative .
You have one more task to accomplish before the page is complete. In Part 5: Adding the Spry menu you'll add a Spry Menu Bar widget to the top of the page so that users can navigate the website.
Welcome to Part 5 of this tutorial series on creating your first website. This tutorial shows you how to add a Spry Menu Bar widget to the index page for Check Magazine, a fictional publication. A Spry Menu Bar widget is a set of navigational menu buttons that link to other pages of your website. In many cases, the menu displays submenus when a site visitor hovers over one of the buttons (though you won't be using submenus in this tutorial). You may have heard of a navigation bar for a website—that's essentially what I'm talking about here. Adobe calls its navigation bar a Spry Menu Bar widget, because the widget is a built-in part of the Adobe Spry framework for Ajax and comes installed with Dreamweaver CS3 and later.
The tutorial also shows you how to customize the widget by editing its CSS rules.

Note: For more information about the Spry Menu Bar widget in general, see Working with the Menu Bar widget in Dreamweaver Help. For more information about the Spry framework for Ajax, see About the Spry framework in Dreamweaver Help.

Locate your files and review your task

In this tutorial, you'll begin with the index page you added text to in Part 4, Adding the main image text. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt4_completed.zip and begin with those files. If you haven't completed Part 1: Setting up your site and project files, you will need to complete that tutorial as well.
Your task in this tutorial is to add a Spry Menu Bar widget to the banner area of the Check Magazine home page. You'll also learn how to customize the menu bar by editing its CSS rules. Figure 1 shows what the banner area will look like in a browser after you've added the menu bar.

Figure 1. The banner area of the Check Magazine home page with a Spry Menu Bar widget included.

Basically what you'll do to accomplish this task is very similar to what you did in Part 4, Adding the main image text, of this tutorial series. You'll add another content element to an already specified div (in this case, the new content element is a Spry Menu Bar widget, and the already specified div is the banner div), and use a combination of relative and absolute positioning to move the new element into place.

Insert and position the Spry Menu Bar widget

Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. In this tutorial, you'll insert a horizontal Menu Bar widget, as pictured in the previous section.

1. In Dreamweaver, open the index.html file that you created in Part 4: Adding the main image text.
2. Click in the banner div to select the banner image. Then press your right arrow key once to place the Insertion point to the right of the image, but still inside the div. You should see a large blinking Insertion point in the banner div (the top div.
3. Click the Split view button to make sure the Insertion point is in the banner div between the <img> tag and the closing </div> tag. (This is very important; see Figure 2).

Figure 2. The Insertion point inside the banner div.

4. Select Insert > Spry > Spry Menu Bar.

Tip: You can also insert a Spry Menu Bar widget from the Spry category of the Insert panel. The Spry category of the Insert panel shows you all of the Spry widgets available in Dreamweaver.

5. In the Spry Menu Bar dialog box, leave Horizontal selected and click OK.

The Menu Bar widget, with its default color scheme of black text and gray background, is inserted in the page, but pushes the main image to the right (see Figure 3).

Figure 3. The Spry Menu Bar widget drops below the banner image, and displaces the main image.

6. You'll fix the layout in a moment, but take a look at the code for the Menu Bar widget in Code view. The Menu Bar widget is actually a set of unordered lists nested inside a container <ul> (unordered list) tag. Each menu item is in <li> (list item) tags, and everything is styled with CSS. The container <ul> tag is assigned the CSS class attribute MenuBarHorizontal , the main attribute referenced in the many CSS rules responsible for the widget's formatting.

Note: I have not talked about CSS class rules in this series, and I'm not going to go into an in-depth explanation of them here; but essentially a class rule is a type of CSS rule that lets you format any HTML element on the page. Class rules do not restrict you to formatting specific tags or elements with IDs. For more information on class rules, see Understanding Class Rules in Dreamweaver

7. The first thing you should do after inserting a Spry widget is to save the page.

The Copy Dependent Files dialog box appears, stating that Dreamweaver is copying a number of supporting files to your local site. These files are all related to the display and functionality of the Spry Menu Bar widget. In particular, the SpryMenuBar.js file contains all of the information that drives the widget's functionality, whereas the SpryMenuBarHorizontal.css file contains all of the CSS rules that dictate the widget's formatting.

8. Click OK to close the Copy Dependent Files dialog box and install the dependent files.

Dreamweaver adds a SpryAssets folder to the root folder of your site. (You might need to click the Refresh button in the Files panel to see the new SpryAssets folder.) This folder contains all of the files necessary for the Spry Menu Bar widget to function. Later, you'll need to make sure you upload these files to the web server when you publish your page on the Web.

You'll also notice that the Related Files toolbar now lists the Spry files associated with the index page. That's because when you saved the page after creating the widget, Dreamweaver automatically attached the required files to the page for you.

9. Now, let's fix the layout.

To position the Spry Menu Bar correctly, you need to create a rule for the banner div. It's generally a good idea to keep your style sheet in logical order, so the new rule should come after the body rule. Dreamweaver always inserts a new CSS rule immediately after the rule that's currently selected in the CSS Styles panel.

Open the CSS Styles panel, and make sure it's in All mode. Select the #container rule, and click the New CSS Rule button (see Figure 4).

Figure 4. Select the #container rule and click the New CSS Rule button.

10. Use the following settings in the New CSS Rule dialog box:
• Set the Selector Type pop-up menu to ID.
• Type #banner in the Selector Name text box.
• Make sure the Rule Definition pop-up menu is set to check_cs5.css.
11. Click OK to open the CSS Rule Definition dialog box, and select Positioning from the Category list on the left.
12. Select relative from the Position pop-up menu, and click OK to close the dialog box.
13. The main image snaps back into position, with the menu bar occupying a block of its own between the banner and main images (see Figure 5).

Figure 5. The menu now occupies a block of its own between the two images.

14. Move your cursor pointer over the menu bar. This triggers the display of a turquoise tab at the top left. Click this tab to select the menu bar (see Figure 6).

Figure 6. Click the turquoise tab to select the menu bar.

15. In the Property inspector, change the menu's ID (in the text box just below Menu Bar) from the default MenuBar1 to check_menu, and press Tab to make the change. The new ID is displayed in the Property inspector and in the Tag selector at the bottom of the Document window (see Figure 7).

Figure 7. Change the menu bar's ID in the Property inspector.

16. You can now create a new CSS rule to position the menu bar.

With the menu bar still selected in Design view, open the CSS Styles panel, select #banner , and click the New CSS Rule button.

17. In the New CSS Rule dialog box, the Selector Name text box should be automatically populated with #container #banner #check_menu .

Click the Less Specific button twice to leave just #check_menu .

Make sure that Rule Definition is set to check_cs5.css, and click OK.

Note: If the correct values weren't automatically selected in the New CSS Rule dialog box, just set them manually. When setting the values manually, select ID from the Selector Type pop-up menu.

18. In the CSS Rule Definition dialog box, select Positioning from the Category list on the left.
19. In the Positioning category, use the following settings:
• Position: absolute
• Top: 50 px
• Right: 0 px
• Bottom: 0px

Click OK to close the dialog box.

20. Check the position of the menu bar in Design view. It's not quite right. It's aligned with the right edge of the banner image, but isn't aligned correctly at the bottom (see Figure 8).

Figure 8. The menu bar isn't in the right position in Design view.

The reason for this is because there are conflicting top and bottom offsets for the #check_menu style rule. The ultimate aim is to align the bottom and right of the menu bar with the bottom and right edges of the banner image, in the same way as you aligned the main_text div against the guides in part 4 of this tutorial series.
Unfortunately, the menu's own style rules prevent Design view from displaying the menu in the correct position. So, the top offset of 50 pixels has been added as a temporary measure to make life easier while working in Design view.

21. Select #check_menu in the CSS Styles panel, and move your cursor pointer to the left of the top property in the Properties pane until the Disable CSS Property icon appears (see Figure 9).

Figure 9. Temporarily disable the top property for #check_menu.

Click once to disable the top property temporarily. If you're lucky, the menu should snap into its correct position, but it's more likely to jump to the top of the banner div and remain inaccessible in Design view.

Note: If you're using an older version of Dreamweaver, you'll need to comment out the top property manually in the style sheet.

22. Click the Live View button. The menu is displayed where you want it—aligned with the right and bottom edges of the banner image (see Figure 10).

Figure 10. The menu bar is in the right position in Live View.

23. Click the Live View button to exit Live View, and re-enable the top property by clicking the disabled symbol to the left of its name in the CSS Styles panel.
24. Select File > Save All Related Files to save all your changes.

Change the width of the Menu Bar widget

The appearance of the Spry Menu Bar widget is controlled by the CSS in the SpryMenuBarHorizontal.css file that Dreamweaver just added to your site. The SpryMenuBarHorizontal.css file resides in the SpryAssets folder (see Figure 11).

Figure 11. The SpryMenuBarHorizontal.css file in the SpryAssets folder of your site.

You can (and now do) have multiple CSS files attached to a single page. For example, if you add more Spry widgets to the page, Dreamweaver creates and attaches a new style sheet for each of the new widgets you add.

1. Double-click SpryMenuBarHorizontal.css in the Files panel to open it in the Document window. You'll see that the CSS rules that format the Menu Bar widget are long and—if you're not familiar with CSS—confusing. Unfortunately, of all the Spry widgets that come with Dreamweaver, the Menu Bar widget is the most complicated animal, and in order to avoid confusing you any more than you need to be, I'm going to avoid talking in depth about these rules.

Note: There's an in-depth tutorial about customizing a Spry menu bar on my website at http://foundationphp.com/tutorials/sprymenu/customize1.php.

Luckily, Dreamweaver makes it somewhat easier to customize the Menu Bar widget by giving you the ability to edit the widget's CSS rules in the CSS Styles panel.

2. Any changes made to SpryMenuBarHorizontal.css automatically affect every Spry menu bar in the same site. So, before editing the style sheet, it's a good idea to make a copy, and make the changes to the copy. That way, if you make a mess of the menu, you can always revert to the original file.

With SpryMenuBarHorizontal.css the active document, select File > Save As. In the Save As dialog box, navigate to the styles folder in the Check Magazine site, and save the file as check_menu.css. When Dreamweaver asks if you want to update the links, click Yes.

3. Close both SpryMenuBarHorizontal.css and check_menu.css.
4. You need to detach SpryMenuBarHorizontal.css from index.html and attach check_menu.css in its place.

In the CSS Styles panel, select SpryMenuBarHorizontal.css, and click the trash can button at the bottom of the panel to unlink the style sheet (see Figure 12).

Figure 12. Unlink SpryMenuBarHorizontal.css.

5. Click the button that looks like a chain link at the bottom of the CSS Styles panel to attach a new style sheet (see Figure 13).

Figure 13. Attach a new style sheet.

6. In the Attach External Style Sheet dialog box, click the Browse button to navigate to check_menu.css in the styles folder, and click OK (Windows) or Choose (Mac OS X) to select it. Then click OK to close the Attach External Style Sheet dialog box.

You should now have two style sheets listed in the CSS Styles panel: check_cs5.css and check_menu.css (see Figure 14).

Figure 14. The copy of the menu's style sheet has been attached to the page.

7. Save index.html. The two style sheets should be listed in the Related Files toolbar, together with SpryMenuBar.js, the external JavaScript file that controls the menu (see Figure 15).

Figure 15. The two style sheets and the JavaScript file are listed in the Related Files toolbar.

8. Click the Current button in the CSS Styles panel. (You've been working in All mode up until now.)
9. In the Document window, select the Menu Bar widget by clicking its turquoise tab. (Hover over any part of the widget to make the tab appear.)

Tip: You can always tell which page element is selected by looking at the Property inspector (Window > Properties). In this case, you'll be able to tell if the Spry Menu Bar widget is selected if you see its properties displayed in the Property inspector.

You'll notice a few things happening in the CSS Styles panel after you've selected the widget. One is that the #check_menu rule appears in the Properties pane of the CSS panel. That's because the #check_menu rule governs the <ul> container for the widget (the tag you've selected). The other thing you'll notice is the appearance of properties for the #check_menu rule in the Properties pane. Even with a large monitor, you'll probably need to resize the CSS Styles panel to see everything I'm talking about. You can resize the panel by dragging the bottom boundary of it downwards. This will reduce the height of the Files panel, but that's OK. Alternatively, double-click the Files panel tab to close it. For now, you need as much real estate in the CSS Styles panel as possible (see Figure 16).

Figure 16. The CSS Styles panel in Current mode.

Tip: You can also resize any of the three separate panes in the CSS Styles panel by dragging their top or bottom borders.

OK, now that you can see everything you need to see in the CSS Styles panel, you can begin editing the widget. But before you proceed, ensure that the Rules pane in the CSS Styles panel looks like Figure 16. THIS IS VERY IMPORTANT. If it doesn't, chances are you have About view showing in the Rules pane, rather than the cascade of rules. If you have About view showing in the Rules pane, click the Cascade button in the upper right corner of the Rules pane. (There are only two buttons there; it's the one on the right.)

10. Click the ul.MenuBarHorizontal rule in the Rules pane to select it. When the ul.MenuBarHorizontal rule is selected, the full name of the rule appears below in the title bar of the Properties pane.
11. Click the Add Property link in the Properties pane. This opens a pop-up menu.
12. Click the pop-up menu arrow to reveal the menu, scroll down to find the text-transform property, and select it.
13. From the value pop-up menu to the right, select uppercase.

The text in your Menu Bar widget changes to uppercase.

14. Now click inside the text ITEM 2 in the Menu Bar widget. (Do not select the text, simply click somewhere inside of it.)

Three more rules appear in the Rules pane of the CSS Styles panel, with the last rule selected. There are now a total of eight rules listed, five of them related to the Menu Bar. (You might need to expand the Rules pane to see them all.)

15. In the Rules pane, click the third Menu Bar rule in the list, the ul.MenuBarHorizontal li rule.
16. In the Properties pane, edit the last property listed ( width ). Click the 8 em value of the width property to make it editable, and then change the width to 7 em (see Figure 17), and then press Enter/Return.

Figure 17. Change the width property for the ul.MenuBarHorizontal li rule.

The width of the menu items in the menu bar is reduced to 7 em. Don't worry that the menu is no longer aligned with the right edge of the banner image. You'll fix that in a moment.

Note: When you see strikethrough lines in the CSS Styles panel (for example, the width property is struck through in Figure 17) it means the property doesn't directly affect what's currently selected in Design or Code view. Your cursor is inside the text, but the width property here governs the surrounding <li> tags, not the text itself. Of course, changing the width property of the <li> element has an indirect effect on the text inside.

If you want to see what I mean, hover over the edge of the ITEM 2 menu item in Design view until you see its border outlined in red, then click to select the item. When you select the item, all strikethroughs in the CSS panel should disappear. That's because all of the rules you're now viewing directly affect that selection (the <li> tag). And if you're still not convinced, just look down at the Tag Selector at the bottom of the Document window. The <li> tag should be selected down there as well.

If you do all of this, be sure to click back inside the ITEM 2 text when you're finished. You need to have the <li> tag deselected for the rest of the following tasks.

17. In the Rules pane, click the fourth Menu Bar rule in the list, the ul.MenuBarHorizontal a rule.
18. In the Properties pane, select the padding property and click the Delete CSS Property button, the trash can icon (see Figure 18).

Figure 18. Delete the padding property from the ul.MenuBarHorizontal a rule.

After you delete this rule, the Menu Bar should be much shorter in Design view. It also springs back in alignment with the right edge of the banner image.

Edit the Menu Bar widget's text and links

Now that you've reduced the default size of the menu bar, you'll edit the menu bar items themselves. But before you do that, I want to show you how the default submenus of the Menu Bar widget work.

1. Click the Live View button to enter Live View.
2. Run the cursor over the menu bar and observe the interaction. Items 1 and 3 have submenus. If you hover over Item 3, you'll see that the Item 3.1 submenu has a submenu (see Figure 19).

Figure 19. The Menu Bar widget and its submenus.

Menu Bar widgets can have as many submenus as you want. However, the Dreamweaver Property inspector only supports two levels of submenus. To add more submenus, you need to work directly in the code.
You don't need to worry about submenus right now though. You're actually going to get rid of all of them for this website.

3. Click the Live View button again to exit Live View.
4. Select the Menu Bar widget in the Document window by clicking its turquoise tab.
5. In the Property inspector, make sure Item 1 is selected in the first column.
6. Select the submenu item, Item 1.1, in the second column, and click the minus (Remove menu item) button (see Figure 20).

Figure 20. Delete the first submenu item from Item 1.

7. Delete Item 1.2 and Item 1.3 as well.
8. Select Item 3 in the first column.
9. Select the submenu item, Item 3.1, in the second column, and click the minus (Remove menu item) button.

When you try to delete this submenu, Dreamweaver alerts you that you are also deleting the submenu's submenu (referred to as its children). Click OK.

10. Delete Item 3.2 and Item 3.3 as well.

Now that you've deleted all of the submenus, you are ready to edit the menu bar text.

11. Select Item 1 in the first column again and then do the following:
• In the Text text box, type Features.
• In the Link text box, type news.html (see Figure 21).

Figure 21. Text and Link values added for Item 1 of the Menu Bar widget.

Note that the Menu Bar widget is changing before your very eyes. You don't need to type capital letters in the Property inspector because you already defined a CSS rule that makes all letters in the Menu Bar widget capital no matter what.
Additionally, as in an earlier tutorial, you're going to use the news.html page as your sample page for all links. But if you were building the website for real, you would be linking to separate pages.

12. Select Item 2 in the first column of the Property inspector and then do the following:
• In the Text text box, type Fashion.
• In the Link text box, type news.html.
13. Select Item 3 in the first column of the Property inspector and then do the following:
• In the Text text box, type Lifestyle.
• In the Link text box, type news.html.
14. Select Item 4 in the first column of the Property inspector and then do the following:
• In the Text text box, type Calendar.
• In the Link text box, type news.html.

Your Menu Bar widget now looks like Figure 22.

Figure 22. The Menu Bar widget after the text for all menu items has been changed.

You're almost there. You just need to add one more menu item to the widget.

15. With the Menu Bar widget still selected, click the plus button above the first column in the Property inspector (see Figure 23).

Figure 23. Add another menu item.

Dreamweaver adds an Untitled Item to the menu bar.

16. With the Untitled Item selected in the first column of the Property inspector, do the following:
• In the Text text box, type News.
• In the Link text box, type news.html.
17. Click anywhere on the page to deselect the menu bar. Don't worry if the new item in the menu bar has dropped down below the other items.
18. Select File > Save All Related Files.
19. Click the Live View button to turn on Live View. Then click it again to exit Live View. The menu items should all line up in a single row.

Change the Menu Bar widget's colors

Only a few more edits and the menu bar will be final.

1. Click anywhere inside the Menu Bar widget. For example, click inside the word Fashion.

The five Menu Bar–related rules appear in the Rules pane of the CSS Styles panel.

2. Click the fourth Menu Bar–related rule, the ul.MenuBarHorizontal a rule.
3. In the Properties pane, click the black box in the color value field and use the eyedropper to select white ( #FFF ), as shown in Figure 24.

Figure 24. Change the default text color.

You'll notice that the text of the Menu Bar widget has changed to white. The ul.MenuBarHorizontal a rule is the rule that controls the text color of the menu items in their default state (that is, when you're not hovering over them).

4. Click the gray box in the background-color value field and use the eyedropper to select black ( #000 ).

The background color of the menu items changes to black.

5. Click the Live View button and run your cursor over the menu items.

Yikes! You're getting blue backgrounds upon hovering. That's another default property of the Spry Menu Bar widget, so let's change it.

6. Click the Live View button again to exit Live View.
7. Click anywhere inside the Menu Bar widget. For example, click inside the word Fashion.
8. The five Menu Bar–related rules appear in the Rules pane again.

Click the last Menu Bar–related rule, the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.

Note: I know that it's impossible to see the full name of this rule in the Properties pane. You just have to trust me that it's the final rule listed in the Rules pane.

9. In the Properties pane, click the blue box in the background-color value field and use the eyedropper to select black ( #000 ).
10. Click the #FFF default color in the color value field, change it to #00ADEF (that's zero, zero, A, ...) and press Enter/Return (see Figure 25).

Figure 25. Change the background and text properties for the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.

The #00ADEF color is blue, as you can see. It's the color the menu bar's text will change to when you hover over the links in the menu bar.

Note: Don't forget the hash sign at the beginning of the hexadecimal number for the color.

11. There's one more rule you need to edit before you're finished; it's a tricky one, hidden deep within the CSS file. You'll switch to All mode in the CSS Styles panel in order to make it easier to find and edit the rule.

In the CSS Styles panel, click the All button to view All mode.

As you know from previous tutorials, All mode shows you all of the rules that affect the page you're working on, not just the rules that affect the current selection.

12. Click the plus sign next to check_menu.css to expand the list of rules if it isn't already expanded. (Macintosh users need to click the arrow to expand the list.)

The check_menu.css file name is at the bottom of the All Rules pane, so you might need to scroll or resize the pane to see it.

13. Scroll down and locate the rule that begins ul.MenuBarHorizontal a.MenuBarItemHover . . . (The rule is so long I don't even want to spell the whole thing out.) It's immediately below the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule that you were just editing in Current mode (see Figure 26).

Figure 26. Select the world's longest CSS rule.

Once you've located the rule, click it to select it.
You now need to do exactly the same thing that you did for the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule. Sorry, but it's just the way the CSS for the Menu Bar widget is written, and if you don't change this rule, too, the hover states will not work as you intend them to work.

14. In the Properties pane, click the blue box in the background-color value field and use the eyedropper to select black ( #000 ).
15. Click the #FFF default color in the color value field, change it to #00ADEF (that's zero, zero, A, ...), and press Enter/Return.

Note that nothing has happened in Design view for awhile. Why? Because you've only been editing properties that affect the hover and focus states of the menu bar. To see those states, you need to enter Live View and test the widget again.

But first, you need to save the CSS file so that the changes can take effect.

16. Select File > Save All Related Files.
17. Click the Live View button, and hover over the items in your menu bar.
18. The menu is still in the wrong place, so select the #check_menu style rule in the CSS Styles panel (it's in check_cs5.css), and click to the left of the top property to disable it. The menu drops into place. The hover background color is now black, and the hover text color is the blue you defined (see Figure 1).
19. Hold down the Ctrl key (Windows) or the Cmd key (Mac OS X), and click one of the links. The news.html page loads into Live View.

Figure 27. The menu loads news.html into Live View.

20. The menu in news.html is only an image, so click the Home or Back button on the Browser Navigation bar to return to index.html.

Note: Live View navigation works only in Dreamweaver CS5. If you are using an older version of Dreamweaver, you need to test the links by previewing the index page in an ordinary browser.

21. Click the Live View button to exit Live View. The menu moves back to the top of the banner image. If you want to do any further work on it, re-enable the top property for the #check_menu style rule. However, the top property should remain commented out when the page is uploaded to a remote server.

It's unfortunate that Design view can't handle the position of the menu accurately, but that's what Live View is for—to test the way the page will look in a standards-compliant browser. Design view should only ever be taken as an approximation, although most of the time, it's a very close one.

Add a top-level heading to the page

There's just one final tweak that you need to make to index.html before it's complete. The page doesn't have a top-level heading ( <h1> ). The design uses the banner image instead. This looks fine in a browser, but search engines and screen readers expect pages to be organized with a proper hierarchy of headings: <h1> at the top of the page, <h2> for sideheads, and <h3> for subsections. You rarely need to use deeper levels of headings, and you should never choose a particular level just because of its default size. As you have seen throughout this tutorial series, you can use CSS to change the default look of a tag.
The problem with adding an <h1> tag to this page is that it will destroy the design. Well, it would if it weren't for the magic of CSS. You can use absolute positioning to move the heading out of view. People visiting the site in a visual browser see the banner as normal, but search engines, text browsers, and screen readers see the <h1> at the start of the page.
Here's how you do it.

1. You need to add the <h1> tag between the opening <div> tags of the container and banner divs. The obvious way of doing this is to switch to Code view, and add it manually. However, I'd like to show you a neat trick to get the insertion point in the right place.

Click anywhere inside the banner at the top of the page. Then select <div#banner> in the Tag selector at the bottom of the Document window. This selects the whole div.

2. Press the left arrow key once. If you check in Split view, you'll see that the insertion point is to the left of the opening tag of the banner div.
3. In the Property inspector, make sure the HTML button is selected, and choose Heading 1 from the Format pop-up menu. This inserts a pair of <h1> tags between the two <div> tags, and opens up a large blank space above the banner image.
4. In Design view, click in the space that has just opened up, and type Check Magazine: Fashion and Lifestyle (see Figure 28).

Figure 28. Adding a top-level heading to the page.

5. Open the CSS Styles panel, which should still be in All mode, and scroll up to the #container rule in check_cs5.css. Select it, and click the New CSS Rule button at the bottom right of the CSS Styles panel.
6. If your insertion point is still inside the heading, the New CSS Rule dialog box should already have the correct settings. Check that they look like Figure 29, and amend them if necessary.

Figure 29. Creating a new CSS rule for the top-level heading.

Note: The value in the Selector Name text box is #container h1 . This is a descendant selector that affects <h1> tags in the container div. Normally, a page should have only one <h1> tag, so you could use h1 on its own. However, the selection made by Dreamweaver is fine.

7. Click OK to open the CSS Rule Definition dialog box, and select the Positioning category.
8. Select absolute from the Position pop-up menu.
9. In the Top text box, type -500 (minus 500), and set the pop-up menu alongside to px.
10. Click OK to close the CSS Rule Definition dialog box, and select File > Save All Related Files.
11. Test the page in Live View, and BrowserLab. The top-level heading is tucked out of sight, 500 pixels above the container div. You can't see it, but search engines, text browsers, and screen readers can.

Congratulations! You've finished the index.html page for Check Magazine, and the client is very pleased. If you want to compare your work against the completed files for the series, download the first_website_pt5_completed ZIP file.
Welcome to the sixth and final part of this article series on creating your first website. This tutorial shows you how to set up a remote site in Dreamweaver. A remote site is usually a web server on a remote computer that holds copies of your local files. Users access the remote site when they view your pages in a browser.
This tutorial presents a very broad example of connecting to a remote server. It contains troubleshooting hints, but much depends on how your remote server is configured. When in doubt, consult your hosting company's help desk or your system administrator.

Learn about remote sites

After you create a website, the next step is to publish it by uploading the files to a remote server. This is where you store your files for testing, production, collaboration, and publication (depending on your environment).
Before you can proceed, you must have access to a remote web server—such as a hosting company's server, a server owned by the client you're working for, or an intranet server within your company. Also, some Internet Service Providers (ISPs) provide access to free web space as part of your contract for internet connection. If you don't have access to such a server, contact your ISP, your client, your system administrator, or one of the many hosting companies that provide web hosting packages. Some hosting packages are free, but usually insert advertisements into your site. An advertisement-free package can cost as little as a few dollars a month.
Alternatively, you can run a testing server on your local computer or network. For more information, see Setting up a local testing server in Dreamweaver CS5. The rest of this article concentrates on connecting to a remote server using FTP (file transfer protocol) or SFTP (secure file transfer protocol).
You also need to have a local site defined before you proceed. For more information, see Part 1 of this tutorial series, Setting up your site and project files.

Note: For more information about Dreamweaver sites, see Setting up a Dreamweaver site in Dreamweaver Help.

Define a remote server

Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the internet. So, index.html in your check_cs5 folder becomes the front page of your remote site. If you already have a live website that you don't want to overwrite, use your site's control panel to create a folder called check_cs5 where you can upload the Check Magazine files.

1. In Dreamweaver, select Site > Manage Sites.
2. In the Manage Sites dialog box, select the Check Magazine site.

If you did not define the Check Magazine site, create a local folder for the site before you proceed. For more information, see Part 1 of this tutorial series, Setting up your site and project files.

3. Click Edit.
4. In the Site Setup dialog box, click Servers to open the panel where you add your server definitions (see Figure 1).

Figure 1. The Servers panel in the Site Setup dialog box.

Dreamweaver CS5 allows you to set up multiple server definitions for both remote and testing servers. However, only one of each type can be active at any given time.

5. Click the plus button at the bottom left of the panel to add the remote server definition. This opens a new panel for you to enter the server details (see Figure 2).

Figure 2. The panel where you enter the basic server details.

6. In the Server Name text box, type a name for the server. This is used internally by Dreamweaver to identify the server, so you can choose any name you like. For example, you might want to create a definition for a server where you upload files for a client's approval, and a different server for the live site. If you have only the one server, call it Remote Server.

7. From the pop-up menu Connect using, select the method you want to use to connect to the server.

The most common methods for connecting to a server on the Internet are FTP and SFTP. If you aren't sure which to select, ask your hosting company or the server system administrator.

8. The following options apply to both FTP and SFTP:
• Enter the server's FTP address (for example, ftp.yourdomain.com).
• Enter your user name and password in the appropriate text boxes.
• Click Test to test your connection.

If the connection is unsuccessful, verify that you have the correct username and password. Passwords are usually case-sensitive, so make sure that Caps Lock is not turned on. If you selected SFTP, try FTP instead. If that doesn't solve the problem, consult the troubleshooting section further down this page.

9. The value that you need to enter in Root Directory is where many people go wrong, and it's difficult to give precise instructions because hosting companies and server administrators have different policies.

As I said earlier, Dreamweaver site management is based on the principle that your local files are an exact duplicate of your live site on the Internet. The value of Root Directory should be the path you need to enter after logging into your server to get to the folder where you want to install index.html.

• If you want the Check Magazine home page to be the front page of your website, then this needs to be the path to the remote server's site root. On some servers, it's public_html. Others might use www, wwwroot, or even nothing at all. On my remote server, it needs to be /home/username/public_html. If in doubt, ask your hosting company or server administrator.
• If you want the Check Magazine home page to be in a subfolder called check_cs5, you need to enter the path to that folder. For example, on my server, it would be /home/username/public_html/check_cs5.
9. The Web URL text box should contain the URL for the folder that you defined as the Root Directory. For example, http://www.example.com/ or http://www.example.com/check_cs5/. Dreamweaver might have tried to guess the correct value, but it's only a guess. Do not accept the default value without checking it carefully.

Your settings should look similar to Figure 3.

Figure 3. Settings for connecting to a remote server by SFTP.

11. Click the Advanced button at the top of the panel to display the advanced options (see Figure 4).

Figure 4. Advanced options for a remote server.

12. In most circumstances, you should leave these options at their default settings.
• Maintain synchronization information is selected by default. This keeps track of when the files on your remote server were last updated, and allows you to use the Site Synchronization feature (see Synchronize the files on your local and remote sites in Dreamweaver Help).
• Automatically upload files to the server on Save should rarely, if ever, be used because it overwrites your live files. If you make a mistake, it's immediately displayed on your remote site for all the world to see.
• Enable file check-out is for use in a team environment. It allows only one person at a time to edit a page (see Checking in and checking out files in Dreamweaver Help).
13. Click Save to register your server definition. This returns you to the Servers panel of the Site Setup dialog box, where your server definition is now listed (see Figure 5).

Figure 5. The remote server is now registered in the Site Setup dialog box.

Dreamweaver selects the Remote checkbox automatically.
The icons at the bottom of the Servers panel allow you to add another server, or to delete, edit, or make a copy of the selected server definition. Making a copy is useful if you need to change only a few details to connect to a different server.

14. Click Save to close the Site Setup dialog box, and then click Done to close the Manage Sites dialog box.

Upload your local files

You can now upload your files from your local folder to the remote web server to make your pages publicly accessible.

1. In the Files panel (Window > Files), select the site's local root folder (check_cs5).

Note: In the Files panel, the local root folder actually begins with "Site – Check Magazine" because that's the name of the site. If you hover the cursor over that title, Dreamweaver shows you the full path to the check_cs5 folder.

2. Click the Put Files (up arrow) icon in the Files panel toolbar (see Figure 6).

Figure 6. Put files on the server.

3. When Dreamweaver asks if you want to put the entire site, click OK.

Dreamweaver copies all of the files to the remote folder you defined in the previous section. This operation may take some time, as Dreamweaver must connect to the remote server and then upload all the files.

Note: Normally, you select the local root folder and upload the entire site only the first time you upload. Afterwards, you can upload only the files you've changed.

4. Open your remote site in a browser to make sure all of the files uploaded correctly. Congratulations, you have a site online!

(Optional) Troubleshoot the remote server setup

A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote server and how to resolve them:

• The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.
• In the panel where you set the basic options for the remote server, set the "Connect using" pop-up menu to FTP, and click the triangle at the bottom of the panel to reveal the More Options section (see Figure 7).

Figure 7. The More Options section can help solve FTP connection problems.

• Use Passive FTP often solves connection problems caused by a software firewall.
• Use IPV6 Transfer Mode should be used only if your remote server supports the newer IPv6 protocol (check with your hosting company or server administrator).
• If you need to connect through a proxy server, select the Use Proxy check box, and click the Preferences link to set up the proxy details.
• The other two options are self-explanatory.
• If you still have problems with FTP access, contact your hosting company or system administrator for help.
• For the Dreamweaver FTP implementation, you must connect to the remote system's root folder. (In many applications, you can connect to any remote directory, and then navigate through the remote file system to find the directory you want.) Be sure that you indicate the remote system's root folder (or the check_cs5 subfolder) as the Root Directory. If you have problems connecting, and you've specified the host directory using a single slash (/), you might need to specify a relative path from the directory you are connecting to and the remote root folder. For example, if the remote root folder is a higher-level directory, you may need to use ../../ to specify the host directory.
• File and folder names that contain spaces and special characters often cause problems when transferred to a remote site. Use underscores in place of spaces, and avoid special characters—colons (:), slashes (/), periods (.), and apostrophes (') are not permitted in file or folder names.
• Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server's disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory; however, if you can connect to one part of the server but not to another, there may be an alias discrepancy.
• If you encounter an error message such as "cannot put file," your remote folder may be out of space. For more information, look at the FTP log.

Note: In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Site > Advanced > FTP Log. For more information, see the extensive tech note on FTP troubleshooting on the Adobe website.