Creating Your First Website

David Powers

4/16/2013

Table of Contents
Part 1: Set up your site and project files ................................................................................................................................. 3 Understanding Dreamweaver sites ............................................................................................................................... 3 Set up your project files ................................................................................................................................................. 4 Define the local site folder for the Check Magazine site .............................................................................................. 4 Best practices for naming files and folders in a website .............................................................................................. 6 Part 2: Creating the page structure ........................................................................................................................................ 6 Evaluate the task ahead .................................................................................................................................................. 6 Create and save a new page ........................................................................................................................................... 8 Build the basic page structure ........................................................................................................................................ 9 Create an external style sheet ...................................................................................................................................... 14 Attach the new style sheet ........................................................................................................................................... 16 Add the header content ................................................................................................................................................ 19 Insert the main image as background........................................................................................................................... 22 Position the columns..................................................................................................................................................... 25 Part 3: Styling the header and navigation menu .................................................................................................................. 29 Locate your files and review your task ......................................................................................................................... 29 Style the main heading and tag line.............................................................................................................................. 30 Style the navigation bar ................................................................................................................................................ 41 Use absolute positioning............................................................................................................................................... 46 Position text over the main image ................................................................................................................................ 50 Part 4: Inserting images and styling text ............................................................................................................................... 55 Locate your files and review your task ......................................................................................................................... 56 Insert images ................................................................................................................................................................. 58 Insert text ...................................................................................................................................................................... 63 Format the text ............................................................................................................................................................. 66 Add a translucent background and rounded corners ................................................................................................... 71 Fix the column headings ............................................................................................................................................... 74 Part 5: Adding another page ................................................................................................................................................. 76 Locate your files and review your task ......................................................................................................................... 76 Prepare the inner page ................................................................................................................................................. 80 Style the inner page differently .................................................................................................................................... 82 Resolve a conflict between rules .................................................................................................................................. 89 Add a page heading....................................................................................................................................................... 92 1

Link the two pages ........................................................................................................................................................ 98 Part 6: Publishing your website .......................................................................................................................................... 101 Learn about remote sites ............................................................................................................................................ 101 Define a remote server ............................................................................................................................................... 102 Upload your local files................................................................................................................................................. 107

Part 1: Set up your site and project files

This tutorial introduces you to the concept of an Adobe Dreamweaver CS6 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. In this first part of the series, after a brief introduction to Dreamweaver sites you will complete the following tasks:

Set up your project files Define a local folder

Note: The screen shots for this tutorial series are from the Dreamweaver Creative Cloud 12.1 update. However, the instructions apply equally to the original version of Dreamweaver CS6. You should also be able to follow the instructions on Dreamweaver CS5 or CS5.5.

Understanding 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 is 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, its normal to set up a testing server when developing websites that use a server-side technology, such as Adobe ColdFusion or PHP. Since Dreamweaver CS5, you can define multiple remote and testing servers for each site. However, only one of each can be active at any given time. To get started you simply need to give your site a name, and tell Dreamweaver where you want to store the files on your local computer. Dreamweaver CS6 automatically prompts you for further information about the site setup only when its needed.
3

For more information about Dreamweaver sites in general, see Site management 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 for this article contain assets for the sample website you'll build in this tutorial series. The first step is to copy these assets 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: o On Windows, you can use C:\Sites o On Mac OS X your home folder already includes a folder named 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. Copy the check_cs6 folder into the Sites folder. 3. You will use the check_cs6 folder 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 named public_html, www, or wwwroot on your remote server. For example, if you have a website at www.example.com, and have a file named 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 named foundationphp on my local hard drive.

Define the local site folder for the Check Magazine site
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_cs6 folder you copied into your Sites folder: 1. Start Dreamweaver and choose Site > New Site. The Site Setup dialog box appears. 2. For the Site Name, type Check Magazine as the name of the site. The name is used internally by Dreamweaver to identify the site. It doesnt matter if it contains spaces. 3. Click the folder icon next to Local Site Folder to browse to and select the check_cs6 folder (see 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, enabling 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

5

For more information about how the Files panel works, see Managing files and folders in Dreamweaver Help.

Best practices for naming files and folders in a website

A typical website contains a large number of files and folders. For ease of maintenance, its important to organize them logically. Create separate, appropriately named folders for images, videos, style sheets, and external JavaScript files. Also keep the following points in mind:

File and folder names in websites should never contain spaces or any of the following characters: /\?%*:|<>. Although other special characters are permitted, its generally a good idea to use only alphanumeric characters, hyphens, and underscores. Most file and folder names end up as part of a web pages URL, so keep them short, but meaningful. Long URLs are difficult for users to remember and type into browsers on a mobile device.

The vast majority of websites are hosted on Linux servers, which are case-sensitive. Using all lowercase letters for file and folder names avoids problems with files not being found.

Part 2: Creating the page structure

Welcome to Part 2 of this six-part tutorial series on creating your first website. This tutorial explains how to create a CSS-based page layout in Adobe Dreamweaver CS6. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and other kinds of content. Note: This tutorial series is intended for use with Dreamweaver CS6. If you are using an earlier version of Dreamweaver, some features might differ, particularly in the Document window and dialog boxes. Laying out web pages with CSS (Cascading Style Sheets) has become the standard for modern web design. CSS offers superior flexibility and control over your layout, enabling you to create elements on the page and finetune their positions with pixel precision. However, CSS layouts can be difficult to understand and create, and it helps to have some background knowledge before building your first layout with CSS. You can start by reading CSS page layout basics, which is an overview of how CSS layouts work. But this reading is not required. If you're up for the challenge, you can just dive right into this tutorial to begin creating your first CSS-based layout. Note: Although Dreamweaver CS6 has 18 predefined CSS layouts that you can use as the starting point for your web pages, Im not going to use them in this tutorial series because I think it's important to experience what it's like to build a page layout completely from scratch. For more information on the predefined layouts, which were originally designed for Dreamweaver CS5, refer to Whats 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
6

comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their client's approval.
Examine the comp

A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, "I want to have a logo at the top of the page, a navigation bar that links to these other pages, a section for an online store, and a place where I can insert video clips." Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfill the client's requirements. This tutorial provides you with the completed and approved comp for the home page of Check Magazine, a fictional publication that is in need of a website (see Figure 1). As the web designer, your job is to transform the comp into a working web page (most likely with the help of other graphic designers).

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
7

placeholder text) and that the headings in the bottom columns are not final (two of them are identical). Even though the page content is unknown at this point, you can still use Dreamweaver to lay out this design. You can also open the original comp file if you want to see it in more detail. You can find the comp, check_comp.jpg, in the check_cs6/images folder that you copied to your hard drive in Part 1 of this tutorial series. You might even want to print the comp so that you can have it in front of you as you build your page. More and more people are accessing websites on a wide range of screen resolutions from mobile phones through tablets to laptops and desktops. Creating a website design that adapts to different screen sizes requires considerable CSS knowledge and skills. To keep this tutorial relatively simple and focused on creating your first website, youll work with a fixed-width display designed for a desktop.
What to do if things go wrong

When learning new techniques or working with unfamiliar software, it s easy to make mistakes. The instructions throughout this tutorial series try to anticipate common errors, and each part contains a ZIP file showing how the code should look when you have finished. If your page doesnt look the way you expect, use the Dreamweaver File Compare feature to compare your files with the download versions. To use File Compare, you need a third-party file comparison utility, such as WinMerge for Windows. On a Mac, you can use the file comparison tool in TextWrangler. Both are free. The most common causes of mistakes are accidentally skipping a step in the instructions and mistyping an ID or CSS property. Retrace your steps to see where you might have gone wrong. Sometimes, the best idea is to start again from scratch. It can be frustrating, but you can learn a great deal from your mistakes. Of course, if you do get stuck, ask for help. The best place is in the Dreamweaver General Discussion Forum, where youll find experts and beginners alike helping each other. Above all, enjoy yourself. Web design can sometimes be challenging, but its 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_cs6 local root folder of your website. The page eventually becomes the home page for Check Magazine. Note: If you haven't created the check_cs6 local site folder, you must do so before you proceed. For instructions, see Part 1 of this tutorial series, Setting up your site and project files.
1. In Dreamweaver, make sure the Check Magazine site is selected in the Files panel (see Figure 2).

Figure 2. Before starting work on a site, select it in the Files panel. 2. Choose File > New. 3. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, and <none> from the Layout list (these two options should already be selected by default). 4. Set DocType to HTML5 and click Create.

Note: HTML5 is the new standard of the markup language for web pages. Although the standard hasnt been finalized, the HTML5 DocType is backwards compatible with all web browsers in current use, including Internet Explorer (IE) 6. The only caveat is that you should avoid using the new semantic HTML5 tags, such as <header> and <footer>, because they arent recognized by IE 6 through IE 8. Ill explain more about semantic tags later.
5. Choose File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X). 6. In the Save As dialog box, make sure youre in the check_cs6 folder that you defined as the site's local root folder. Dreamweaver should have selected this automatically, but if a different folder is selected, click the Site Root button at the bottom of the dialog box (its on the right in Windows, and on the left in the Mac version). 7. Type index.html as the File Name and click Save. The file name now appears in the tab of your new document. 8. In the Document Title text box at the top of your new document, type Check Magazine (see Figure 3).

Figure 3. Add the page title.

This is the title of your page (different from the file name). Your site visitor s will see this title in the browsers title bar when they view the page in a web browser.
9. Click the page once to move the insertion point out of the Document Title text box. You'll see that an asterisk (*) appears next to the file name in the document's tab. This asterisk indicates that the contents of the file have changed and that you need to save the file if you want to keep the changes. 10. Choose File > Save to save your page.

Build the basic page structure

9

If you did the background reading recommended at the beginning of this tutorial (CSS page layout basics), then you already know that the <div> tag is the basic building block of a CSS layout. A <div> tag acts as a container for text, images, and other page elements, grouping them together so they can be styled in a consistent way. You use CSS to position them by adding horizontal and vertical space around them (margins) or inside them (padding). Compared to table cells, which exist only within the rows and columns of a table, <div> tags are much more flexible. If you look at the design comp again (see Figure 1), you'll notice that the page is divided into distinct sections: a banner logo at the top of the page, a central graphic area in the center of the page, and then a third bottom section that contains three separate columns within it. These sections all correspond to separate <div> tags that act as containers for the content inside of them. HTML5 adds new tagssuch as <header>, <footer>, and <article>that perform exactly the same function as a <div>. The only difference is that the new tags specify the role of the element in the page. Unfortunately, IE 6 through IE 8 wont style the new tags with CSS unless you use JavaScript. To avoid problems with older browsers, this tutorial uses only <div> tags to group content.
Insert <div> tags

Start by creating the most basic, most important, and most common <div> tag for CSS layoutsthe container. The container <div> contains all the other tags in the layout. If your CSS layout is like a sandbox, and you are going to place a beach ball, a bucket, some shells, and an umbrella in the sandbox, then the container tag is the outer rim of the sandbox. It defines the shape, dimension, and limitations of the sandbox, and holds everything together. In this section, youll work in both Design view and Code view because its important to understand the underlying HTML code that Dreamweaver creates on your behalf.
1. Make sure the Design button is selected at the top left of the Document window, and click once on the page to ensure that the insertion point is in the upper-left corner of the page (see Figure 4).

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 choosing Window > Insert. In the Designer workspace (the default Dreamweaver workspace), the Insert panel is on the right side of the Dreamweaver interface, above the Files panel. 3. The default display for the Insert panel is the Common category. Make sure the Common category is selected, and click Div or Insert Div Tagthe name and position within the panel depends on which version of Dreamweaver youre using (Figure 5 shows how it looks in the Creative Cloud Dreamweaver 12.1 update).

10

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

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

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

Note: If you cant see the dotted line surrounding the <div>, choose View > Visual Aids, and make sure theres a check mark alongside CSS Layout Outlines. Clicking any of the options in the Visual Aids submenu toggles them on and off.
6. Select the placeholder text and delete it, making sure you delete only the text. If the outline of the <div> disappears, repeat step 4. The placeholder text should be automatically selected when the <div> is inserted, so all you need to do is to press Delete. 7. In the Insert panel, click Div or Insert Div Tag again. 8. In the Insert Div Tag dialog box, select After Start Of Tag as the insert point. This activates a new control, which lists the places where Dreamweaver can insert the new <div>. At the moment, the only candidates are the <body> tag and <div id="container">.

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

11

Figure 7. Nesting the new <div> inside the container <div>. 9. Leave the Class blank, type header as the ID, and click OK.

The new <div> appears on your page, and within it you can see the placeholder content for the header <div>. But where did the container <div> go? Well, it's there, you just can't see it in Design view. The best way to see it is to look at the code.
10. Click the Split view button (see Figure 8).

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 header <div> tag, just as planned (see Figure 9).

Figure 9. The container and header <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. Its 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.
12

11. Since youre looking at the raw code, go ahead and continue working there. If youre cramped for space in Split view, click the Code button at the top of the Document window.

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

Figure 10. Press Enter/Return after the closing tag of the header <div>.

Note: Pay careful attention to where you create the new line. You should still be inside the container <div>. The closing tag of the container <div> is on line 12 of Figure 10.
12. With the Insertion point still on the new line, click Div or Insert Div Tag in the Insert panel. 13. In the Insert Div Tag dialog box, leave At Insertion Point selected, leave the Class blank, type main_image as the ID, and click OK.

The new <div> appears on your page, and within it you can see the placeholder text. This new <div> is inside the container <div>, on the same level as the header <div>. Note: When you create new IDs watch out for extra space either before or after the ID. For example, make sure that when you type the main_image ID, there is not an extra space after the "e" in image. If there is, it can lead to CSS problems later.
14. Place the Insertion point after the closing tag of the <div> you have just created and press Enter (Windows) or Return (Mac OS X). 15. In the Insert panel, click Div or Insert Div Tag. 16. In the Insert Div Tag dialog box, leave At Insertion Point selected, leave the Class blank, type left_column as the ID, and click OK. 17. Repeat steps 1416 twice to create two more <div> elements. Give the first one the ID center_column, and the second one the ID right_column.

Your code should now look as shown in Figure 11.

Figure 11. The HTML code has five <div> elements nested inside an outer <div>. 13

18. If youre in Split view, press F5 or click in the Design view half of the Document window to update Design view. Alternatively, click the Design button to return to Design view.

All your <div> elements are stacked one on top of another and stretch the full width of the page. This is the default behavior until you create CSS rules for them.
19. Save the page (File > Save).

Create an external style sheet

Now that you have your <div> tags in place, the next step is formatting and positioning them with CSS a collection of formatting rules that control the appearance of content on a web page. Using CSS to format a page separates content from presentation. The content of your page the HTML coderesides in the HTML file, and the CSS rules defining the presentation of the code reside in another file, the external style sheet. You can also put CSS rules in the head section of a document, or inline with the code itself. However, an external file is the most efficient way of using CSS, because changes made to rules in an external style sheet are automatically applied to every page attached to it.
Using CSS code hints

Dreamweaver has several tools that speed up styling your web pages. In this section, youll type the style rules directly into a style sheet to give you a feel for what CSS looks like. Dont worry if youre not keen on working directly with code. As you type, Dreamweaver displays code hints and auto-completes much of the code for you.
1. Choose File > New. 2. In the New Document dialog box, verify that the Blank Page category is selected, select CSS from the Page Type column (see Figure 12), and click Create.

14

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 filestheir contents are not meant to be viewed in a browser. 4. Choose File > Save. In the Save As dialog box, create a new folder named styles in the site root, select the new folder, and save the file in the styles folder as check_cs6.css. 5. Five <div> elements in index.html are nested inside the container <div>. To center the content on the page, you need to create a style rule for the container <div> by giving it a width and setting its left and right margins to auto. To create a style rule for an HTML element that has an ID, you prefix the ID with a hash sign (#). So the CSS selector for the container <div> is #container.

Note: CSS selectors are case-sensitive. The spelling of the ID must be the same as you used when inserting the <div> tag. So, if you used an initial capital letter, the CSS selector would be #Container. Also, make sure theres no space between the hash sign and the ID.
#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.
15

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 widthis the most obvious. It sets the width of the container div to 968 pixels. You are setting the background color to white (#FFF), and declaring 0 pixels for the top and bottom margins of the container, and auto for the left and right margins of the container. (This effectively centers the container in the middle of the page when the user views it in a browser.) For the padding, you've specified 10 pixels on the right and the left, and you've specified a hidden overflow, which forces large assets like images to stay within the confines of their container tags. Note: For more information about CSS properties, check the O'Reilly reference guide included with Dreamweaver. To display the guide, choose Help > Reference and select O'Reilly CSS Reference in the Reference panel. This contains details of CSS2, plus some non-standard CSS properties.
6. Save the style sheet.

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

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

Even though you created a complex CSS rule for the container <div>, the page still looks the same as before. This is because the CSS style sheet is not yet attached to the page. When you attach the style sheet to the page, the #container rule that you created in the style sheet will format the <div> with the ID "container" on your web page.
2. Open the CSS Styles panel by clicking its tab. In the Designer workspace (the default Dreamweaver workspace), the CSS Styles panel group is located below the Insert panel. If it isn't, you can choose Window > CSS Styles to display it. Make sure the All button is selected at the top-left of the panel.

You'll notice that the CSS Styles panel is empty except for the message, "(no styles defined)" because there are no CSS rules applied to this page.
3. (Optional) Double-click the Insert panel to close it and create more room. 4. In the lower right-hand corner of the CSS Styles panel, click the Attach Style Sheet icon (see Figure 15).

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_cs6.css style sheet that you created in the styles folder, select it, and click OK (Windows) or Choose (Mac OS X). 6. Click OK to close the Attach External Style Sheet dialog box.

Note what happened to the page. You can immediately see that the container <div> now has padding of 10 pixels on the left and right. Depending on the size of your Document window, you might also see that the container <div> looks centered on the page. That's because if you have extra room (in addition to the 968-pixel width you specified), the container will also have an "auto" margin on its left and right sides. This effectively means that the browser will create exactly the same amount of pixel space to the left and right of the container <div>, thus producing a centered effect.
7. Save the page. 8. Run your cursor over the border of the container <div> until you see a red line, and then click to select the container <div>. Figure 16 shows what you should see when the container div is selected.

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 <div> elements you have created, and select <div#container> in the Tag selector at the bottom of the Document window. Here Dreamweaver is giving you a nice visual rendering of how the CSS rule applies to the container element. The light gray shading on the left and right sides of the container <div> indicates the 10-pixel padding, and when you hover your cursor over the area, Dreamweaver displays a tooltip that tells you that. Similarly, the lighter blue areas at the outermost left and right sides of the container indicate the auto margins. Again, the
17

amount of auto margin that displays in Dreamweaver depends on the size of your Document window. If you are working in the default Designer workspace, and you make your Document window smaller by dragging the docked panel area on the right, you should see the auto margin disappear as less space becomes available on the page. Note: If the visual rendering of the padding and margins fails to display, choose View > Visual Aids, and make sure the following options are selected: CSS Layout Box Model and CSS Layout Outlines.
9. Click the Live button at the top of the Document window (see Figure 17).

Figure 17. Click the Live button.

This turns on Live View in the Document window. The dotted outlines of the <div> elements disappear, and you see the page as it would look in a browser. In fact, you are looking at the page in a browser Live View uses the WebKit browser engine that powers Safari and Google Chrome browsers.
10. When Live View is activated in Dreamweaver CS6, two new buttonsLive Code and Inspectappear to the right of the Live button. (In CS5 and CS5.5, theyre in slightly different positions and always visible.) Click the Inspect button to turn on Inspect Mode (see Figure 18).

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

18

Figure 19. Inspect mode highlights the div elements, 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. When you can see the effect of your style rules like this it is much easier to understand how they change your layout.
13. Click the Live button to return to Design view and turn off Inspect Mode. In Dreamweaver CS6, the Live Code and Inspect buttons disappear. 14. Save index.html and close the check_cs6.css style sheet.

Add the header content

Now that you have all your structural elements in place and your style sheet is attached to the page, you are ready to start adding content and styling it. For this project, youll start with the header content, which consists of the name of the magazine (Check), a tag line, and the navigation menu. Until quite recently, it was common to use an image for the main banner heading of a website because browsers rely on the fonts installed on the visitors computer to render text. As a web designer, you might have many fonts installed on your computer, but you cant rely on everyone else having as many. Consequently, you were restricted to a limited range of "web-safe" fonts. The situation has changed thanks to all browsers now supporting fonts that can be embedded in a web page. So, instead of using an image for the header banner, youll use HTML and style it with CSS and a web font.
Create the main heading and tag line

Dreamweaver makes it easy to create headings and paragraphs using the correct HTML markup.
1. In index.html, click anywhere inside the placeholder text for the header <div>. 2. Make sure the HTML button is selected in the Property inspector, and select Heading 1 as the Format (see Figure 20).

19

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

Figure 21. Dreamweaver has added HTML tags for the heading and paragraph.

The word "Check" is wrapped in <h1> tags, which make it a top-level heading. The second line is wrapped in <p> tags, which make it a paragraph. Design view gives both lines some basic styling to indicate what they will look like in a browser. At the moment, theyre nothing like the final design, but youll get to that later.
7. Save index.html. Adding the navigation links

One of the most common ways of creating a navigation menu is to use a bulleted listor unordered list, as its called in HTMLand style it with CSS.
1. In Design view, place your cursor at the end of the "Fashion + Lifestyle" paragraph, and press Enter (Windows) or Return (Mac OS X) to move to a new line. 2. Look in Split view. Dreamweaver has inserted the following code:
<p>&nbsp;</p>

This is a new pair of paragraph tags with whats known as an HTML entity for a nonbreaking space between them. 3. Type Features. As soon as you start typing, Dreamweaver removes the nonbreaking space, which was there simply as a placeholder, and replaces it with the text you typed. 20

4. Make sure the HTML button is selected in the Property inspector, and click the Unordered List icon (see Figure 22).

Figure 22. The Unordered List icon creates a bulleted list. 5. Check in Split view, the paragraph tags around "Features" have been replaced with different HTML tags like this:
<ul> <li>Features</li> </ul> The <ul> tags tell the browser to create an unordered list. The <li> tags are wrapped around each list

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

Figure 23. The unordered list will eventually become the navigation menu. 21

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

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

Insert the main image as background

Images can be added to a web page either directly in the HTML using the <img> tag or as a background image using CSS. By default, browsers turn off background images when a page is printed. If an image is important, you should put it directly in the HTML markup. However, text will be added in front of the main image in this layout, so I think its fine to use CSS to insert it as a background image to the main_image <div>. This time, youll use the New CSS Rule and CSS Rule Definition dialog boxes to create the necessary style rule.
1. Place the insertion point in the main_image <div>, and delete all the placeholder text. After you've deleted the last character, it will look like the <div> has completely disappeared. Don't worry, it's still there. Check in Split view that the insertion point is between these two tags:
<div id="main_image"></div>

Dont click anywhere in the Document window before proceeding to the next step. 2. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule icon (see Figure 24).

Figure 24. Click the New CSS Rule icon.

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

22

Figure 25. 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 the compound selector #container #main_image. The text area below the Selector Name describes the meaning of this selector. Although its correct, everything in the page is nested inside the container <div>, so you dont need to be so specific.
3. Click the Less Specific button once. This changes the Selector Name value to #main_image, which is exactly what you want. 4. Make sure check_cs6.css is selected from the Rule Definition pop-up menu. Then click OK. The CSS Rule Definition dialog box appears, indicating that you are defining properties for the new #main_image rule. 5. Select the Background category in the Category column. 6. In the Background category, click the Browse button next to Background-image. 7. In the Select Image Source dialog box, navigate to the images folder inside the Check Magazine site. 8. Select the main.jpg graphic and click OK (Windows) or Choose (Mac). 9. Select no-repeat as the Background-repeat setting.

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

23

Figure 26. Setting the background image for the main_image <div>. 10. Select the Box category in the Category column. In the Box category, do the following: o Type 968 as the Width and select px from the pop-up menu to the right. o Type 376 as the Height and select px from the pop-up menu to the right. o Click OK. The main.jpg graphic appears in the main_image <div>, and the dimensions of the <div> are set. Normally, its not a good idea to give a <div> a fixed height, because a <div> expands or contracts automatically depending on the amount of text or other content inside it. However, in this case a fixed height is necessary, because you need the <div> to be the same height as the background image. Without the height declared in the CSS, the <div> would collapse to nothing, and the background image would not be displayed. 11. Choose File > Save All Related Files to save the page and the style sheet.

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

24

Figure 27. 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 <div> tags. Text inside a paragraph and images are inline elements. Before moving the columns into position, you need to do a little calculation. The main image is 968 pixels wide. That doesnt divide evenly by 3, but you need a little breathing space between each column, say 10
25

pixels. So, if you divide 948 by 3, you get 316. Thats how wide each co lumn 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 Dreamweavers related files feature. 2. Click check_cs6.css in the Related Files toolbar just below the tab for index.html. This opens the style sheet in Split view, while leaving index.html visible in Design view (see Figure 28).

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

You can now edit the style sheet, and see the changes in Design view. Note: If youre cramped for space, drag the center bar to resize the windows. You can also make extra room by pressing F4 to hide all the panels. Press F4 again to restore them.
3. All columns need to be 316 pixels wide. You can apply the same width to all of them by creating a combined selector for the three <div> elements. Add the following style rule at the bottom of the style sheet:
#left_column, #center_column, #right_column { width: 316px; }

Note: Code hinting in Dreamweaver CS6 is remarkably smart. It recognizes unique character combinations within CSS properties. Instead of typing widt before Dreamweaver selects width, just type dt to jump straight there, and then press Enter (Windows) or Return (Mac) to insert width: in your style sheet. This trick works with all code hints, not just CSS. Separating the ID selectors for the three <div> elements with commas applies the same rule to each of them.
4. Click in Design view (or press F5) to refresh the page. The columns are now much narrower, but theyre still stacked on top of each other. Thats because theyre block-level elements.

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

Figure 29. Code hints speed up the creation of style rules.

Press Enter/Return to insert left, and add a semicolon at the end of the line. The style rule should now look like this:
#left_column, #center_column, #right_column { width: 316px; float: left; }

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. Choose File > Save All Related Files.

27

Note: Depending on where the focus is in the Document window, Save All Related Files might be grayed out. If it is, choose Save All. The difference is that Save All saves all files that are currently open. Save All Related Files saves only those files that are related to the current document. Figure 30 shows what your page should now look like in Design view.

Figure 30. 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.
28

Part 3: Styling the header and navigation menu

Welcome to Part 3 of this six-part tutorial series on creating your first website. This tutorial shows you how to style the main heading using Adobe Edge Web Fonts, a library of hundreds of free fonts that you can use in your website. Youll also learn how to eliminate the gap that often appears at the top of web pages, and how to convert an unordered list of links into a horizontal menu bar. The menu bar and main text will be maneuvered into position using a combination of relative and absolute positioning.

Locate your files and review your task

In Part 1 and Part 2 of this tutorial series, you defined a site for Check Magazine, a fictional publication, and created the basic structure for the home page. If you completed the first two parts, continue working with your existing files. If youre not sure whether your HTML and CSS is correct, you can download the first_website_pt3_begin.zip sample file, and use its contents to replace your existing files. At the end of Part 2, the page was still very bare (see Figure 1).

Figure 1. Design view shows that apart from the main image, the page is still completely unstyled.

In this tutorial, you'll style the header section, and add the main text area. Figure 2 shows what the page will look like in a browser when youre done with Part 3.

29

Figure 2. The page is beginning to look like the original design concept.

Style the main heading and tag line

Youll start by using a web font for the main heading.
Styling the heading with an Edge Web Font

The main heading uses a font called Sarina, which is not available on most computers, but you can add it to your web page using Adobe Edge Web Fonts, a vast library of free web fonts from Adobe, Google, and designers around the world.
1. Open your browser and go to http://html.adobe.com/edge/webfonts/ (see Figure 3).

30

Figure 3. Adobe Edge Web Fonts give you free access to a wide range of attractive fonts.

To access the full range of fonts, you need either a subscription-based or free Creative Cloud membership. However, you can access a limited range even without signing up, so thats what youll do in this tutorial.
2. Scroll down to the Preview Edge Web Fonts section, and select Sarina.

The editable area below shows a preview of the font together with instructions on how to use it (see Figure 4).

31

Figure 4. The Edge Web Fonts site gives simple instructions for embedding the font. 3. Copy the <script> tags from the Edge Web Fonts site, and paste them into the <head> section of index.html in Dreamweaver just above the <link> that attaches the style sheet like this:
<head> <meta charset="utf-8"> <title>Check Magazine</title> <script src="http://use.edgefonts.net/sarina.js"></script> <link href="styles/check_cs6.css" rel="stylesheet" type="text/css"> </head>

4. Also copy the CSS from the Edge Web Fonts page, and paste it into check_cs6.css after the existing styles. The example provided by the Edge Web Fonts site is for a level 1 heading, so it doesnt need changing, but you would need to change the CSS selector if you want to use the font for other text elements. 5. Save both index.html and the style sheet. 6. Unfortunately, the Dreamweaver Design view and Live view dont support Edge Web Fonts. So, press F12 (Windows) or Opt+F12 (Mac OS X) to launch index.html in your default browser. As long as youre connected to the Internet, the heading should now be styled using the web font (see Figure 5).

32

Figure 5. The web font completely changes the look of the heading. 7. The heading is too small, so amend the h1 style rule by setting font-size to 96px like this:
h1 { font-family: sarina, serif; font-size: 96px; }

8. The background color of the header needs to be black, and the color of the text should be white. In Design view, put your insertion point anywhere inside the header <div>, and click the New CSS Rule icon at the bottom-right of the CSS Styles panel. 9. The New CSS Rule dialog box suggests a compound selector depending on where your insertion point is. The styles need to apply to the whole of the header <div>, so change the value of Selector Type from Compound to ID. Dreamweaver CS6 automatically changes the value of Selector Name to header.

Note: If youre using an earlier version of Dreamweaver, changing Selector Type to ID clears the Selector Name field. You need to type header manually.
10. Make sure Rule Definition is set to check_cs6.css, and click OK to open the CSS Rule Definition dialog box. 11. With Type selected in the Category list on the left of the CSS Rule Definition dialog box, click the color box alongside the Color field, and select white (#FFF) from the color picker (see Figure 6). This sets the color of the text.

33

Figure 6. Choosing the text color in the CSS Rule Definition dialog box. 12. Select Background in the Category list on the left of the CSS Rule Definition dialog box, and use the color picker to set Background-color to black (#000). 13. Click OK to close the CSS Rule Definition dialog box. 14. Save the style sheet, and refresh index.html in your browser. The header should now have white text on a black background (see Figure 7).

34

Figure 7. The colors have changed, but theres a big gap at the top of the page.

Although there is nothing above the header, it has been pushed down the page, leaving an ugly white gap at the top. Also, the links in the unordered list havent changed to white like the rest of the text. Both issues need to be fixed. First, youll deal with the gap above the heading.
Fixing the gap above the header

In this section, youll use Inspect Mode to investigate and fix the cause of the gap at the top of the page.
1. With index.html open in the Document window, click the Live button in the Document toolbar. Although Live View doesnt display the Sarina font, theres still a big gap at the top of the page. 2. Click the Inspect button to turn on Inspect Mode, and move your mouse pointer over the Check heading. Inspect Mode highlights margins in yellow. As Figure 8 shows, the heading has large top and bottom margins that browsers add by default.

35

Figure 8. Inspect Mode reveals that the headings top margin causes the gap.

An unusual feature of CSS is that adjacent vertical margins merge to the height of the largest one. As a result, the headings top margin extends beyond the header <div>, pushing it away from the top of the page. Notice also that theres a narrow white strip above the top margin. Thats caused by browsers adding a default eight-pixel margin around the <body> element. You need to fix both issues.
3. Click the heading to freeze Inspect Mode. The Inspect button pops out, but the highlighting remains in Live View. 4. In the CSS Styles panel, make sure that the All button is selected. Then select h1 in the All Rules pane to display the properties for the heading. 5. In the lower pane, click Add Property (see Figure 9).

36

Figure 9. You can add new properties to a style rule through the CSS Styles panel. 6. In the text field that opens, start typing mar. Then click the down arrow to the side of the field to reveal a list of CSS properties, and select margin. 7. Type 0 in the field that opens to the right of the property name (see Figure 10).

37

Figure 10. Setting the margin property to 0. 8. Press Enter (Windows) or Return (Mac OS X) to confirm the value. This removes the margins on all sides of the heading. 9. Check in Live View. The heading is still highlighted in blue, but the yellow margins have gone, and theres only a narrow gap at the top of the page. 10. You now need to create a rule for the <body> element to remove the default margin around the page. Click the New CSS Rule icon at the bottom right of the CSS Styles panel. 11. In the New CSS Rule dialog box, set Selector Type to Tag (Redefines An HTML Element). 12. Click the down arrow on the right of the Selector Name field, and select body. 13. Make sure Rule Definition is set to check_cs6.css, and click OK to open the CSS Rule Definition dialog box. 14. Most rules set on the <body> element are inherited by the rest of the page. So, in addition to removing the default margin, its a good idea to set the default font, text color, and background color. With Type selected in the Category list, click the down arrow to the right of the Font-family field, and select Trebuchet MS, Arial, Helvetica, sans-serif. 15. Accessibility experts recommend against using pure black text on white because the contrast is too strong. So, Im going to use a dark gray for the text. Type #3B3B3B in the Color field. (Dont forget the hash sign at the beginningits part of the hexadecimal code for the color.) 16. Click the Apply button to see the effect of the changes. Notice that the font has changed for all the text except the main heading. Also note that the color of the text in the header <div> is unchanged because you set a different color in the #header style rule earlier (see Figure 11).

38

Figure 11. The color of the header text is not affected by the body rule. 17. Select Background in the Category list on the left of the CSS Rule Definition dialog box, and use the color picker to set Background-color to white (#FFF). 18. Select the Box category. Leave the Same For All check boxes selected, and type 0 in the Top field under Margin. Then click Apply. This removes the default margin on each side of the page, and the gap at the top disappears. 19. Click OK to close the CSS Rule Definition dialog box. 20. Choose File > Save All Related Files to save the changes to the style sheet.

39

Styling the tag line

The Fashion + Lifestyle tag line needs to sit alongside the Check heading. The tag line is in a paragraph, while the heading is in an <h1> tag. CSS treats both as block-level elements that occupy a new line. To move them alongside each other, you need to apply the float property to the heading. This moves it to the side, allowing other elements to move up alongside. Once the tag line moves into the space next to the heading, you can adjust its padding and margins to move it into position.
1. In the CSS Styles panel, select h1 in the All Rules pane. 2. Click Add Property in the lower pane, and type float. 3. Press Tab to move into the field alongside the property name, and click the down arrow on the right of the field to reveal the available values. Select left. Dont worry that the header moves away from the top of the page. Its because the Fashion + Lifestyle tag line has moved up alongside the heading, and its top margin now overlaps the header <div>. 4. Click anywhere inside the Fashion + Lifestyle paragraph. Make sure Live View is turned on. 5. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel. 6. The New CSS Rule dialog box suggests #container #header p as the Selector Name. You dont need #container. So, click Less Specific once to change the selector to #header p. 7. Make sure Rule Definition is set to check_cs6.css, and click OK. 8. In the Type category of the CSS Rule Definition dialog box, set Font-family to Lucida Sans Unicode, Lucida Grande, sans-serif. 9. Set Font-size to 30px. 10. Set Font-variant to small-caps. 11. Select the Box category from the list on the left of the CSS Rule Definition dialog box. 12. Deselect the Same For All check box under Margin, and type 0 in the Top and Bottom fields. 13. Click Apply. Setting the top margin to 0 removes the gap at the top of the page, but the tag line is too high. 14. Deselect the Same For All check box under Padding, and type 15 in the Top field. 15. Click Apply. Your settings and the page should look like Figure 12. Padding is added inside an element, so the tag line moves down, but no longer causes a gap at the top of the page.

40

Figure 12. The tag line is moved into place using padding and margins. 16. Click OK to close the CSS Rule Definition dialog box, and save the style sheet.

Style the navigation bar

The final stage of fixing the header <div> involves converting the unordered list of links into a horizontal navigation bar. Youll start by giving the the links a different color and font styles.
Giving links a unique style

The links in the navigation bar need to have a style that wont be shared by other links in the page. You do this with a selector that targets only links in the header <div>.
41

1. Click anywhere in one of the links in the header <div>, and then click the New CSS Rule icon at the bottom-right of the CSS Styles panel. 2. The New CSS Rule dialog box suggests #container #header ul li a as the Selector Name. Although this does what you want, its more efficient to simplify the selector. Click Less Specific once to change the selector to #header ul li a. Again, this is accurate, but all you need to target links inside the header <div> is #header a. 3. Click inside the Selector Name field, and delete ul li. As you edit the selector, the description below the field changes to show you which elements will be styled (see Figure 13).

Figure 13. The amended selector targets links inside the header <div>. 4. Click OK to open the CSS Rule Definition dialog box. 5. Set the following values in the Type category: o Font-size: 20px o Font-weight: bold o Font-variant: small-caps o Color: #FFF (white) o Text-decoration: none 6. Click OK to close the CSS Rule Definition dialog box and apply the new styles. Setting Text-decoration to none removes the underline from the links, which are now displayed in bold, white, small capitals. 7. Select some of the placeholder text in one of the columns at the foot of the page, and type # in the Link field of the Property inspector. Its styled differently from the links in the header because the #header a style rule that you have just created affects only links in the header <div> (see Figure 14).

42

Figure 14. The links in the header have a unique style of their own. 8. Save index.html and the style sheet. Converting the unordered list into a navigation bar

To convert the links in the unordered list into a horizontal navigation bar, you need to remove the bullets, give the links a width, and turn them into block-level elements so that the full width of the link becomes clickable. Finally, you need to float them to the left.
1. Click anywhere inside one of the links in the header <div>. Then select <ul> in the Tag selector at the bottom of the Document window (see Figure 15). This highlights the whole unordered list.

43

Figure 15. The Tag selector shows where the insertion point lies in the HTML hierarchy, making it easy to select specific tags. 2. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel. Dreamweaver suggests #container #header ul as the Selector Name. 3. Click Less Specific once to change the Selector Name to #header ul. Then click OK to create a style rule for the unordered list in the header <div>. 4. You need to remove all margins and padding from the list, so select Box from the Category list in the CSS Rule Definition dialog box. Leave Same For All selected for both Padding and Margin, and type 0 in both Top fields. 5. Select the List category, and set List-style-type to none. 6. Click OK to close the CSS Rule Definition dialog box and apply the styles. The bullets disappear from the unordered list. 7. You need to add some extra properties to the style rule for the links, so select #header a in the All Rules pane of the CSS Styles panel. Then click the Edit Rule icon at the bottom-right of the panel (see Figure 16) to reopen the CSS Rule Definition dialog box.

Figure 16. Click the Edit Rule icon to reopen the CSS Rule Definition dialog box for the selected rule. 44

8. 9. 10. 11.

In the Block category, set Text-align to center, and Display to block. In the Box category, set Width to 100px. Click OK to close the dialog box and make the changes. The links are now stacked under the main heading. Click inside any of the links in the header <div>, and select <li> in the Tag selector at the bottom of the Document window. This selects the whole list item so you can define a style rule for list items in the header. 12. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel, and click the Less Specific button once to change the Selector Name to #header ul li. Then click OK. 13. The list items need to be floated left. So, select the Box category, and set Float to left. 14. When you click OK, dont panic if the design goes haywire. It should look similar to Figure 17.

Figure 17. Floating the menu items destroys th-e layoutat least temporarily.

The problem is caused by both the main heading and the navigation bar floating. When items float, theyre n o longer constrained by the element theyre nested insidein this case, the header <div>.
15. Select #header in the All Rules pane of the CSS Styles panel, and click the Edit Rule icon. 16. In the Box category, set Height to 100px, and click Apply. The navigation bar should reappear and the main image move further left (see Figure 18).

45

Figure 18. Adding a height to the header <div> brings the menu back into view.

Note: Dont worry that the main image is still off to the right. Design view doesnt always show an a ccurate representation of page layout.
17. Click OK to close the dialog box, and activate Live view. The main image should be centered under the header. 18. Save the style sheet.

Use absolute positioning

The layout design calls for the menu to be at the bottom-right of the header. To move it into position, youre going 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 Elements, as Dreamweaver calls them).
46

Note: Earlier versions of Dreamweaver called absolutely positioned elements Layers or AP Divs. However, any HTML element can be absolutely positioned. It doesnt apply only to <div> elements. 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 screens, and at different resolutions. Absolutely positioned elements behave in a very different way from other elements. They stay where you put them, and dont interact with the rest of the page. This often creates the illusion that the absolutely positioned element moves. In fact, the opposite happens; the rest of the page moves in relation to the absolutely positioned element. Also, an absolutely positioned element might disappear off screen on a mobile device without generating a scrollbar, making vital information inaccessible. Although absolute positioning presents problems for laying out entire pages, it can be very effective when you want to align an element with another. You specify the position as one or two offsets from the elements sides. For example, if you set the left offset to 150px and the top offset to 100px, the left and top sides of the element are positioned exactly that distance away from the elements containing block (see Figure 19).

Figure 19. The offsets of an absolutely positioned element are calculated from its containing block.

Note: The offsets can be positive or negative. As Figure 19 shows, a positive 150px left offset moves the element 150px to the right away from the left of the containing block. A negative offset moves the element in the opposite direction outside its containing block, which is simply the point from which the offsets are calculated. The secret to using absolute positioning successfully is understanding the principle of the containing block. Usually, an elements containing block is the nearest block-level element higher up the HTML structure. In the case of the navigation bar, this is the header <div>. However, absolute positioning is different. The containing block is the nearest element higher up the HTML structure that has its position property set to absolute, fixed, or relative. If no such element exists, the page becomes the containing block. To fix the navigation bar at the bottom-right of the header, the bottom and right offsets need to be set to 0. However, without first defining a containing block, the navigation bar would end up at the bottom-right of the
47

page. To calculate the offsets from the header <div>, you need to set its position property to relative. Relative positioning is similar to absolute positioning, except the offsets are calculate d from the elements normal position in the document. So, if you make an element relatively positioned, but dont set any offsets, it remains in its normal position, but with the crucial difference that it acts as the containing block for any absolute elements nested inside. It sounds complicated, but its very simple to implement.
Moving the navigation bar into place

So much for the theory. Now you can put it into practice to dispel any doubts you might have about the preceding explanation.
1. In the All Rules pane of the CSS Styles panel, select the rule that controls the unordered list, #header ul, and click the Edit Rule icon. 2. In the CSS Rule Definition dialog box, select the Positioning category and set the following values: o Position: absolute o Placement Right: 0px o Placement Bottom: 0px 3. Click OK to make the changes and close the CSS Rule Definition dialog box. 4. If the navigation bar is still visible, click the Live button to activate Live view. The menu disappears. Its actually at the bottom-right of the Document window, but you likely cant see it because the text is white. 5. To verify whats happened to the menu, select the rule that styles the links in the navigation bar, #header a, in the All Rules pane of the CSS Styles panel. 6. Move your mouse pointer to the left of the color property in the lower pane to reveal an icon with a tooltip that reads Disable CSS Property. Then click the icon to temporarily disable the color of the links. You should now see the navigation bar at the bottom-right of the Document window (see Figure 20). The navigation bar doesnt have a positioned containing block, so the offsets are calculated from the bottom and right of the page rather than the header <div>.

48

Figure 20. With the link color disabled, you can see the navigation bar at the bottom-right of the Document window. 7. Click the icon alongside the color property again to re-enable the property. 8. To anchor the navigation bar inside the header <div>, you need to make the <div> relatively positioned. Select the #header rule in the All Rules pane of the CSS Styles panel. 9. Click Add Property in the lower pane, and type position in the field that opens. 10. Press Tab to move into the field where you set the propertys value, click the down arrow to reveal the available options, and select Relative. The navigation bar jumps into place at the bottom right of the header <div> (see Figure 21).

49

Figure 21. In Live view, the menu is now absolutely positioned at the bottom-right of the header. 11. Exit Live view, and save the style sheet.

Note: Design view sometimes gets confused by positioned elements. If the header disappears in Design view, close and reopen index.html.

Position text over the main image

Although the main_image <div> looks as though its filled with a large image, theres actually nothing inside the <div>. The image is simply the background. The design calls for a block of text with a white background to be placed close to the white cross at the bottom-right of the image. Youll use the same technique as for the navigation bar to move the text into position using a combination of relative and absolute positioning.
Adding the text

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>. The most accurate way of inserting a new <div> is to use the options in the Insert Div Tag dialog box. It doesnt matter where the Insertion point is, the options enable you to insert the <div> accurately, as long as your page elements have IDs.
50

1. Open the Insert Div Tag dialog box by clicking Div or Insert Div Tag in the Insert panel.

Alternatively, use the Insert menu. In the Creative Cloud update, choose Insert > Div. In earlier versions of Dreamweaver, choose Insert > Layout Objects > Div Tag.
2. Click the down arrow of the Insert pop-up menu to reveal the options (see Figure 22).

Figure 22. 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 elements opening tag. After start of tag. The new <div> is inserted immediately after the specified elements opening tag. Before end of tag. The new <div> is inserted immediately before the specified elements closing tag. After tag. The new <div> is inserted immediately after the specified elements 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).

3. 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.
4. 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 23).

51

Figure 23. Select the main_image <div> from the list. 5. 6. 7. 8. Select <div id="main_image"> from the list. Type main_text as the ID. Click New CSS Rule at the bottom of the Insert Div Tag dialog box. This opens the New CSS Rule dialog box. 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_cs6.css. If it says This Document Only, select check_cs6.css from the Rule Definition list. Click OK to open the CSS Rule Definition dialog box, and select Background from the Category list on the left. Click the Background-color color box, and select white (#FFF). Select Box from the Category list on the left. Type 300 in the Width text box, and make sure the pop-up menu alongside is set to px. This sets the width of the main_text <div> to 300 pixels. Click OK. This saves the new CSS rule, and brings you back to the Insert Div Tag dialog box. Click OK to close the Insert Div Tag dialog box. This inserts the main_text <div> with some placeholder text. Click anywhere in the Document window away from the new <div> to deselect the placeholder text. The top-left of the main_image <div> should now have a 300-pixel wide, white box containing placeholder text (see Figure 24).

9. 10. 11. 12. 13. 14. 15.

Figure 24. 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.
16. Now, its time to insert the final text. In the Files panel (Window > Files), expand the assets folder, and doubleclick the main.txt file to open it. 17. Select the entirety of the last block of text in the file, everything from "OPERATIVE WORDS" up to and including ". . . hiding in his bathroom." 18. Copy the text by choosing Edit > Copy, by right-clicking and selecting Copy from the context menu, or by pressing Ctrl+C/Cmd+C. 19. Close the main.txt file. 52

20. Select the placeholder text for the main_text <div>, and paste the text from your clipboard by pressing Ctrl+V/Cmd+V or choosing Edit > Paste.

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

Figure 25. The main_text div is now ready to be formatted and positioned. 21. Choose File > Save All Related Files to save index.html and the style sheet. Moving the main text into position

The main_text <div> will be absolutely positioned with the main_image <div> as its containing block. Although the technique is the same as used for the navigation menu, you need to work out the offsets from the bottom and right of the main_image <div>. You could try to judge the distance by eye and keep adjusting the values until you get it right. A more efficient way is to use guides in the Dreamweaver Document window to measure the distance accurately.
1. 2. 3. 4. Make sure the Document window is in Design view. Click the Design button if it isnt. (Optional) Press F4 to hide the panels. You need a good view of the page layout, particularly of the main image. Choose View > Rulers > Show. This adds rulers measured in pixels at the top and left of the Document window. Click inside the top ruler and drag down. As you drag, youll 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 (see Figure 26).

53

Figure 26. 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 485px). 6. Drag another guide from the top ruler until its 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 isnt 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). Dreamweaver displays the distance in pixels between the two guides (see Figure 27).

Figure 27. 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), 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.

Note: 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 425px 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. You need to make the main_image <div> the containing block for the main_text <div>, so select #main_image in the All Rules pane of the CSS Styles panel. 54

13. Click Add Property in the lower pane, type position in the field that opens. Then press Tab, and select Relative from the list of values in the list on the right. 14. Select #main_text and click the Edit Rule icon 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: o Set Position to Absolute. o Type 60 in the Right and Bottom text boxes under Placement, and make sure the pop-up menus alongside are set to px. 16. Click OK to close the CSS Rule Definition dialog box, and choose File > Save All Related Files to save the style sheet. 17. Activate Live view by clicking the Live button. The main_text <div> should move into position. 18. Turn off Live view. The right and bottom edges of the main_text <div> should be aligned precisely with the green guides, as shown in Figure 28.

Figure 28. The main_text <div> has been accurately positioned against the guides

Note: If the main_text area still doesnt move. Try closing index.html and reopening it.
19. You no longer need the guides, so dismiss them by choosing View > Guides > Clear Guides.

Part 4: Inserting images and styling text

Welcome to Part 4 of this six-part tutorial series on creating your first website. The first three parts showed how to define a site in Dreamweaver CS6, create the basic structure using <div> elements, and begin styling the home page with CSS. So far, the only image used was added as a background. In this part, youll learn how to add images in the HTML structure using the <img> tag. Youll also add more text and style it, as well as create a translucent background and rounded corners with CSS.
55

Locate your files and review your task

If you completed the first three parts of this tutorial series, continue working with your existing files. If youre not sure whether your HTML and CSS is correct, you can download the first_website_pt4_begin.zip sample file, and use it to replace your existing files. In this part, you'll add the remaining content to the home page for Check Magazine, a fictional publication, by inserting images using the HTML <img> tag and formatting text. Youll also add a translucent background and rounded corners to the main text area using CSS3 techniques. Figure 1 shows what the page will look like in a modern browser at the end of Part 4.

56

57

Figure 1. The page after you have completed the steps in this part of the tutorial series.

Insert images
You can use any of several methods to add images to a web page in Dreamweaver. In this section, you'll explore three commonly used methods to add images to the Check Magazine page.
Inserting an image using the Insert panel

One of the most common ways to add assets to a page is through the Insert panel or Insert menu.
1. In Dreamweaver, open index.html in the Check Magazine site. 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) 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 &nbsp; inside them (see Figure 3).

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

Note: The &nbsp; is the HTML entity (code that represents a special charact er) for a nonbreaking space. Its 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. Open the Insert panel, select the Common category from the menu at the top-left of the panel, and click Image (or Images, depending on your version of Dreamweaver). The first time you select Image in the Insert panel, 58

Dreamweaver displays a submenu with a number of choices. Choose the first one (Image) as shown in Figure 4. This opens the Select Image Source dialog box.

Figure 4. Inserting an image using the Insert panel.

Note: Figure 4 is from the Creative Cloud 12.1 update. The options are slightly different in earlier versions of Dreamweaver. After the first time, Dreamweaver remembers your most recent choice. To choose a different option, click the small down arrow to the right of the icon in the Insert panel. Alternatively, choose Insert > Image or use the keyboard shortcut Ctrl+Alt+I (Windows) or Cmd+Opt+I (Mac OS X).
6. In the Select Image Source dialog box, navigate to the sites 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 as the Alternate Text 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 5).

59

Figure 5. 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 choosing Window > Properties).

The Property inspector is context-sensitive. Since you have the new image selected, it displays the most important properties for the car.jpg image. You can see that the Property inspector displays the file path (Src) to the image, the alternate text (Alt) that you specified in the Image Tag Accessibility Attributes dialog box, and the width (W) and height (H) of the image (see Figure 6). There are also options for giving the image an ID, converting it into a link or image map, and some simple image editing tools. See Edit images in Dreamweaver in the Help documentation for details of the available tools.

Figure 6. The Property inspector displaying image properties.

Note too 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 youre ready to add the remaining images.
Inserting an image by dragging

To insert an image by dragging:

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

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

Figure 7. 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 as the Alternate Text and click OK. The image appears on your page. You can see all of its properties in the Property inspector. 6. Save the page. Insert an image from the Assets panel

To insert an image from the Assets panel:

1. 2. 3. 4. Delete the placeholder text in the right_column <div>. Make sure the insertion point remains inside the <div>. Press Enter (Windows) or Return (Mac) once to create more space in the <div>. Press the up arrow on your keyboard to move the insertion point back up to the top of the <div>. Click the Assets tab in the Files panel group, or choose 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 icon to view your image assets (see Figure 8).

61

Figure 8. 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: o Drag the helmet.jpg file to the insertion point in the right_column <div>. o Click Insert at the bottom of the Assets panel. 7. In the Image Tag Accessibility Attributes dialog box, type Helmet as the Alternate Text and click OK. 8. Save the page (see Figure 9).

62

Figure 9. The page in Design view 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 columns. 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.
63

1. In the Files panel, locate the main.txt file in the assets folder and double-click the file's icon to open it in Dreamweaver.

You'll notice that this window is in Code view and that the Split, Design, and Live buttons are disabled (see Figure 10) because its not an HTML file.

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

Note: Style sheets and JavaScript files also open only in Code view.
2. In the main.txt Document window, select the first block of text (beginning with "Inside Tesla Motors" up to and including "read more..."). 3. Copy the text by pressing Ctrl+C/Cmd+C, or by choosing Edit > Copy. Alternatively, you can right-click and select Copy from the context menu that appears. 4. Leaving the main.txt file open, click the tab of the index.html document. 5. 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 11).

Figure 11. The insertion point placed below the car image in the left_column <div>. 6. Paste the text by pressing Ctrl+V/Cmd+V, or by choosing Edit > Paste. Alternatively, right-click and choose Paste from the context menu that appears.

64

The text is displayed in the <div> (see Figure 12).

Figure 12. The Inside Tesla Motors text pasted in the <div>.

The text automatically inherits the font style that you set on the <body> element in Part 3 of this tutorial series. It needs some more formatting, but youll come back to that later.
7. Return to the main.txt file by clicking its tab. 8. In the main.txt Document window, select the second block of text (beginning with "Facts and Figures" up to and including "read more..."). 9. Copy the text. 10. Leaving the main.txt file open, click the tab of index.html. 11. Click inside the center_column <div> below the data image, placing the insertion point in the same place where you created space earlier. 12. Paste the text. 13. And one last time, return to the main.txt file by clicking its tab. 14. In the main.txt Document window, select the third block of text (beginning with "Today's Self Improvement" up to and including "read more..."). 15. Copy the text. 16. Close the main.txt file by clicking the X in its tab. (The X is on the left in the Mac version of Dreamweaver, and on the right in the Windows version.) 17. In index.html, click inside the right_column <div> below the helmet image, placing the insertion point in the same place where you created space earlier. 18. Paste the text.

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

65

Figure 13. The text in all three columns. 19. Save index.html.

Format the text

Beginners often create class rules and apply them to each block of text, but thats a very inefficient approach. It can also create problems for search engines, which rely on the HTML markup to understand how the content is structured. In Part 2, Creating the page structure, you used the Format pop-up menu in the Property inspector to format the main Check heading as Heading 1, which Dreamweaver wrapped in <h1> tags. The Format menu offers six levels of headings, which wrap the selected text in <h1> , <h2>, and similarly named tags through to <h6>. Browsers automatically display text in these tags in bold, progressively decreasing the font size for each level, with <h6> being the smallest. Inexperienced designers often use these heading tags to format bold text of a particular size, not realizing that search engines rely on these tags to determine the importance of the text inside them. Broadly speaking, a page should have one <h1> heading at the top, with <h2> tags introducing the next level of content, and <h3> tags used for subheadings. You rarely need to use <h4>, <h5>, or <h6>. As you have already learned, you can use CSS to change the default look of headings and other text. So, theres no reason to misuse heading tags. CSS gives you much greater control over the look of text. Note: The new HTML5 standard proposes using <h1> tags for the main heading in each section of a page, but this currently creates problems for search engines and assistive technology for the blind. For the foreseeable future, its best to stick with the hierarchy of headings Ive just described.

66

Styling the main text area

The text that you copied from the main.txt file contains line breaks, but theres no distinction between the headings and the rest of the text. In the following steps youll fix that, starting with the main_text <div> thats superimposed on the main image.
1. In Design view, click inside the main_text <div> to position the insertion point at the end of the first line (after "OPERATIVE WORDS"). Notice theres a heavy blue border around the <div> with a small rectangle at the top-left corner, as shown in Figure 14.

Figure 14. Absolutely positioned elements are surrounded by a special border when selected in Design view.

This indicates that the element is absolutely positioned. The rectangle at the top-left is a handle that lets you drag the element to a different position, changing the offsets in your style sheet. Although some designers find this useful, theres a danger of accidentally moving an absolutely positioned element when its selected in Design view. Keep clear of the handle when working with absolutely positioned elements.
2. Press Enter (Windows) or Return (Mac). As soon as you do so, a gap appears between the top of the <div> and the phrase "OPERATIVE WORDS." An even larger gap appears beneath it. 3. To understand whats happened, open Split view and examine the underlying HTML (see Figure 15).

Figure 15. The text has been split into paragraphs. 67

When you pasted the text from main.txt, Dreamweaver placed it between the <div> tags. Pressing Enter/Return at the end of the first line split the text into two paragraphs. Browsers automatically add to paragraphs a top and bottom margin equivalent to the height of one line. Thats why the gap appeared at the top of the <div>. The larger gap below the phrase "OPERATIVE WORDS" is caused by the <br> tag before the word "Stumbling." The <br> tag causes a line break in text. Dreamweaver replaced the newline characters in the main.txt file with <br> tags when you pasted the text into Design view.
4. To get rid of the <br> tag, in Design view press the keyboard down arrow once to move the insertion point in front of the "S" of "Stumbling" and press Backspace. The <br> tag disappears, and the distance between the paragraphs is reduced.

Note: Although paragraphs have default top and bottom margins, the vertical space between two paragraphs is the equivalent of only one line because adjacent vertical margins merge to the height of the largest one. (Remember, this is what caused the main heading to push the header <div> away from the top of the page in Part 3.) Some web designers who dont like the space between paragraphs use the keyboard shortcut Shift+Enter/Shift+Return to insert <br> tags all the time, but this is extremely bad practice. The HTML markup should reflect the logical structure of the page content. You can easily adjust the vertical distance between paragraphs by changing the margin properties in CSS.
5. Put the insertion point at the end of the second line (after "Inner Circle"), and press Enter/Return. 6. Repeat the same process as in step 4 to get rid of the <br> tag by pressing the down arrow once to move the insertion point in front of "The" and pressing Backspace. You now have three paragraphs inside the main_text <div>. The first two need to be formatted as Heading 2 and Heading 3 respectively. 7. Click anywhere inside the first paragraph, and with the HTML button selected in the Property inspector, choose Heading 2 as the Format. This changes the <p> tags around "OPERATIVE WORDS" to <h2> tags. 8. Click inside the next paragraph, and set the Format in the Property inspector to Heading 3. The <p> tags around "Stumbling into Mark S.s Inner Circle" change to <h3> tags. Dont worry if the bottom of the main_text <div> moves down below its correct position. Design view gives only an approximate rendering of the page layout. 9. With the insertion point still inside the second heading, click the New CSS Rule icon at the bottom-right of the CSS Styles panel. 10. The New CSS Rule dialog box suggests #container #main_image #main_text h3 as the value for Selector Name. It doesnt need to be so specific, so click Less Specific twice to change it to #main_text h3. Make sure Rule Definition is set to check_cs6.css, and click OK. 11. In the Type category, set Font-size to 16px. 12. In the Box category, leave the Same For All check boxes selected, and type 0 in the Top field under Margin, and click OK. The heading is rendered in a smaller font, and it no longer stretches over two lines. Changing the margin hasnt made any difference at this stage because the margins of the text above and below remain unchanged. 13. Click anywhere inside the "OPERATIVE WORDS" heading, and then select New CSS Rule in the CSS Styles panel. 14. Click Less Specific twice to shorten the value in Selector Name to #main_text h2, and click OK. 15. In the Type category, click the color box next to the Color field, and use the eyedropper tool to select the blue color from the image of the helmet (see Figure 16).

68

Figure 16. You can use the color pickers eyedropper tool to select colors from other parts of the page. 16. In the Box category, deselect Same For All under Margin, and type 0 as the Top margin and 10 as the Bottom. Click OK to close the CSS Rule Definition dialog box. 17. The paragraph at the bottom of the main_text <div> also needs adjusting. Click anywhere inside the paragraph, and click the New CSS Rule icon in the CSS Styles panel. 18. Click Less Specific twice to change Selector Name to #main_text p. Then click OK to open the CSS Rule Definition dialog box. 19. In the Type category, set Font-size to 14px. Then type 1.2 in the Line-height field and select multiple from the pop-up menu alongside (see Figure 17).

69

Figure 17. Using a multiple value for Line-height produces the most consistent results. 20. In the Box category, leave the Same For All check boxes selected, and type 0 in the Top field under Margin. Click OK. The main_text <div> is now formatted, but there is no space around the text (see Figure 18).

Figure 18. The text has been formatted, but theres no breathing space around it.

Note: If the paragraph at the bottom of the main_text <div> looks squashed up, you probably set the value of Line-height to 1.2px. Reopen the CSS Rule Definition dialog box, and select multiple from the menu to the right of the Line-height field. Although you can use pixel values for the line-height property, using a multiple produces more consistent results.
21. To add some breathing space around the text in the main_text <div>, select #main_text in the All Rules pane of the CSS Styles panel, and click Add Property in the lower pane. 70

22. Type padding in the field that opens, press Tab to move into the field on the right, and type 12px as the value. This adds 12px of space on each side inside the <div> (see Figure 19).

Figure 19. The main text area is now nicely formatted. 23. Choose File > Save All Related Files to save the web page and the style sheet. 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. 23. Choose File > Save All Related Files to save the web page and the style sheet.

Add a translucent background and rounded corners

All modern browsers support CSS effects that would have involved complex structures and background images until very recently. Two very simple effects are giving an element a translucent background and rounded
71

corners. The effects wont be seen by anyone using an old browser, such as Internet Explorer 8 or earlier. But thats no reason to avoid giving users of modern browsers an enhanced experience. To create a translucent background, you need to specify the color using whats known as RGBA format. RGB represents the red, green, and blue components of the color. The A represents the colors alpha transparency, expressed as a value between 0 (fully transparent) and 1 (fully opaque). Because older browsers dont understand RGBA format, you need to specify two background colors: the first using hexadecimal or RGB format, which is used by old browsers; the second using RGBA, which overrides the first value in modern browsers. Old browsers dont understand the second value, so they ignore it.
1. To set both values for the background color, its best to work directly in the style sheet. To locate the style rule, select #main_text in the All Rules pane of the CSS Styles panel, right-click, and select Go To Code from the context menu. This opens the style sheet in Split view with the insertion point on the first line of the #main_text style rule (see Figure 20).

Figure 20. Dreamweaver locates the style rule in the style sheet. 2. Create a new line after the background-color declaration (line 74 in Figure 20). 3. If code hints arent displayed, press Ctrl+Space (the keyboard shortcut is the same on Windows and Mac OS X), and select background. (Dont select background-color because of a bug in old versions of Internet Explorer.) 4. In the code hints that appear after the colon following the property name, select Color to bring up the color picker. Then click the right-facing arrow at the top-right of the swatches panel to display the options menu, and select Color Format > rgba(), as shown in Figure 21.

72

Figure 21. Selecting a different color format in the color picker.

Note: The Color Format submenu is not available in Dreamweaver CS5 or earlier. You need to type the RGBA value manually in older versions of Dreamweaver.
5. After selecting the color format, click the white swatch in the color picker. Dreamweaver inserts rgba(255,255,255,1). Add a semicolon after the value.

Note: The semicolon is extremely important. If you forget it, the #main_text rule is invalid and will be ignored by browsers.
6. By default, Dreamweaver sets RGBA values to fully opaque, so you need to change the alpha transparency value manually. Change the final 1 inside the parentheses to 0.8. 7. Turn on Live view to see the effect. The background image is partially visible through the background of the main text area (see Figure 22).

Figure 22. The background of the main text area is now translucent.

Note: Dreamweaver remembers your most recent choice for Color Format. Youll need to remember to switch back to hexadecimal or RGB format when setting other colors. Otherwise, old browsers wont render them.
73

8. Leave Live view on, make sure #main_text is still selected in the All Rules pane of the CSS Styles panel, and click Add Property in the lower pane. 9. Type bo in field that opens, click the down arrow on the right of the field, and select border-radius. This adds a little icon that looks like a plus sign and triangle in the value field on the right. 10. Click the icon to open a small panel where you can set the border radius. Leave the Same For All check box selected, and click the Top Left number spinner several times. As you increase the value, the corners of the main_text <div> become more and more rounded (see Figure 23).

Figure 23. Live view updates the rounded corners in real time, enabling you to adjust them to taste. 11. When the corners look the way you want (about 10px looks good to me), click outside the panel to close it. 12. Choose File > Save All Related Files to save your work.

Fix the column headings

To fix the text in the three columns at the bottom of the page, you need to separate the headings from the rest of the text in the same way as in the main_text <div>.
1. Exit Live view if necessary. 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). 2. Press your down arrow once to move the insertion point before the word "The." 3. Press Backspace to delete the unnecessary line break. 4. Click anywhere in the heading text (Inside Tesla Motors), and select Heading 2 from the Format pop-up menu in the Property inspector. Notice that the heading is styled differently from the <h2> heading in the main_text <div>. The text is black, and it still has a top margin that separates it from the image of the car (see Figure 24).

74

Figure 24. The column headings dont inherit the same color as in the main_text <div>.

This is because the #main_text h2 style rule affects only <h2> headings in the <div> with the ID main_text.
5. Repeat steps 14 with the first line in the center_column <div> and right_column <div> to format the remaining headings (see Figure 25).

Figure 25. In Design view, the column headings are now formatted. 75

Part 5: Adding another page

Welcome to Part 5 of this six-part tutorial series on creating your first website. In the first four parts, you created a site in Dreamweaver CS6 and built the home page for Check Magazine, a fictional publication, using HTML and CSS. However, a single page is rarely sufficient for a website. Previous versions of this tutorial showed how to link to other pages, but used only an image for the content, leaving readers wondering how to build subsequent pages. So, by popular demand, this part has been updated to show how to create a second page and adapt the styles to give it a distinctive look while remaining in harmony with the original page. There are no hard and fast rules about the correct or best way to add extra pages to a website. In this tutorial, youll learn about just one methodcopying an existing page and replacing its content. To style some parts of the page differently from the original, youll add a class to the second pages body tag. Youll also learn how to solve conflicts between style rules. Some of the information in this part might seem advanced for a first website, but it tackles problems that frequently arise. Dont try to rush. Take it slowly.

Locate your files and review your task

If you completed the first four parts of this tutorial series, continue working with your existing files. If youre not sure that your HTML and CSS is correct, you can download the first_website_pt5_begin.zip sample file, and use it to replace your existing files. Figure 1 shows the home page of the Check Magazine site as it looked at the end of Part 4 of this tutorial series.

76

77

Figure 1. The home page of the Check Magazine site after completing the steps in Part 4.

The page is dominated by a large image. This type of image, often called a hero image, is common on the home page of websites, but repeating this layout on inner pages is probably not a good idea. A hero image is good for setting the mood of a landing page, but inner pages normally give greater prominence to text. The three-column layout at the bottom of the page is good for short snippets of information, but a two-column layout is better for longer items. So, the task is to copy this page, and adapt the styles to create the layout shown in Figure 2.

78

79

Figure 2. The design for the inner page is adapted from the existing styles.

Youll also link between the two pages, create a link to an external website, and create a home link.

Prepare the inner page

The first stage in creating the inner page is to copy the home page and remove elements that arent required.
1. 2. 3. 4. In Dreamweaver, open index.html in the Check Magazine site. Choose File > Save As, and save the page as news.html in the Check Magazine site root. Close index.html to avoid editing it by accident. Edit the page title in the Title field of the Document toolbar, and change it to Check Magazine: News (see Figure 3).

Figure 3. Each page should have its own title. 5. Click anywhere inside the main image, and select <div#main_image> in the Tag selector at the bottom of the Document window (see Figure 4).

Figure 4. Selecting the main_image <div> in the Tag selector. 6. 7. 8. 9. Press Delete to remove the main_image <div> and all its contents. Click anywhere in the center column, and select <div#center_column> in the Tag selector. Press Delete to remove the center_column <div> and all its contents. Select all the content in the left_column <div> and delete it (but not the <div> itself). You should be left with an empty paragraph inside the <div>. 10. Repeat the previous step with the right_column <div>. You should be left with a skeleton structure from which the original content has been removed (see Figure 5).

80

Figure 5. The page with the original content stripped out. 11. Save news.html. Add new content

To make it easier to see the effect of changes to the styles, you need to add some content to the empty columns at the bottom of the page.
1. Locate news.txt in the assets folder, and double-click to open it in the Document window. 2. Press Ctrl+A (Windows) or Cmd+A (Mac OS X) to select all the content of news.txt. 3. Copy the selected text to your clipboard by pressing Ctrl+C (Windows) or Cmd+C (Mac). Alternatively, right-click and select Copy from the context menu. 4. Click the news.html tab to return to the HTML page. 5. Position the insertion point inside the empty paragraph in the right_column <div>, and paste the text from your clipboard (Ctrl+V/Cmd+V). Because you pasted into an existing paragraph and each block of text in news.txt is separated by two newline characters, Dreamweaver automatically treats each block as a new paragraph. This avoids the need to remove <br> tags as you needed to do in Part 4. 6. Copy the first paragraph (beginning with "BuzzCycle"), and paste it into the empty paragraph at the top of the left_column <div>. 7. Press Enter (Windows) or Return (Mac) to insert a new paragraph after the one you have just pasted. 8. Scroll down the right_column <div> to find the paragraph that begins with "Sousa revives." 9. Copy the paragraph, and paste it into the left_column <div>. Then press Enter/Return to create a new paragraph. 10. Locate the paragraph that begins with "DJ L-Koo teams" in the right_column <div>. Copy and paste it into the left_column <div> (see Figure 6).

81

Figure 6. The page now has some content ready for styling. 11. Save news.html, and close the text file, news.txt.

Style the inner page differently

Because news.html was copied from index.html, its attached to the same style sheet, check_cs6.css. As a result, the header content and navigation bar are styled the same way. The problem is that the columns also inherit the same styles. A common way to create different styles for specific pages is to give the <body> tag an ID or a class. You can then create different rules using descendant selectors. Use an ID if the page is going to have unique styles of its own. If several pages are going to share the same styles, use a class. Even though you might not realize it, youve been using descendant selectors throughout this tutorial series. A descendant selector consists of two or more selectors with a space between them. For example, #header a is a descendant selector that styles links inside an element with the ID header. To learn more about descendant and other common selectors, see Getting to know your CSS SelectorsPart 1.
82

Adding a class to the <body> tag

The quickest and easiest way to add a class to the <body> tag is in Code view.
1. With news.html the active page in the Document window, click the Split button to reveal Code view. 2. Make sure that Source Code is selected in the Related Files toolbar (see Figure 7).

Figure 7. Selecting Source Code in the Related Files toolbar shows the underlying HTML. 3. Scroll down to locate the <body> tag (it should be around line 10). 4. Put your insertion point just before the closing angle bracket, and press Space to insert a space and bring up code hints. 5. Type cl to select class, and press Enter (Windows) or Return (Mac). Dreamweaver autocompletes the class attribute followed by an equals sign and a pair of quotes. You dont have any classes defined yet, so the code hint informs you there is No CSS Style (see Figure 8).

Figure 8. There are no existing classes for code hints to suggest. 6. Type two_col between the quotes. The <body> tag should now look like this:
<body class="two_col">

7. Click the Design button to switch back to Design view, and save news.html. Styling the columns

You can now use the two_col class to create separate style rules for the columns.
1. Select the left_column <div> by clicking its outline in Design view. Alternatively, click anywhere inside the <div>, and then select <div#left_column> in the Tag selector. 2. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel. 3. The New CSS Rule dialog box suggests .two_col #container #left_column as the value for Selector Name. Click inside the field to amend it to .two_col #left_column.

Note: Class selectors always begin with a period followed by the name of the class.
4. Make sure that check_cs6.css is selected for Rule Definition, and click OK. 83

5. In the Type category of the CSS Rule Definition dialog box, click the color box alongside Color to change the color of the text.

If you havent changed the Color Format setting since creating the translucent background in Part 4, it will still be set to rgba(). Although modern browsers understand this format, older browsers dont, so you need to reset it to Three-digit Hex, by clicking the right-facing arrow at the top of the swatches panel, and selecting the Color Format submenu (see Figure 9).

Figure 9. Resetting the color format.

Note: The Color Format submenu has options for Three-digit Hex and Six-digit Hex. The difference is that Dreamweaver uses a shorthand value, when appropriate, if you select Three-digit Hex. Both formats are recognized by all browsers. Choose the white swatch (#FFF).
6. In the Background category, click the color box alongside Background-color, and select a dark gray swatch (#666). 7. In the Box category, deselect Same For All under Padding, set Top and Bottom to 0px, and set Right and Left to 10px. 8. Click OK to close the CSS Rule Definition dialog box and create the style.

The left column now has white text on a dark gray background (see Figure 10).
84

Figure 10. The left column has been restyled. 9. Open index.html to verify that it hasnt been affected by the change you have just made to the styles. If it has, youve made a mistake, and it would be a good idea to retrace your steps. Use the files in first_website_pt5_begin.zip to start again from the beginning of this part, if necessary. 10. Close index.html. Click Yes when Dreamweaver asks if you want to save the changes to check_cs6.css. You now need to fix the width of the right_column <div> in news.html. The total width available inside the container <div> is 968px. The left_column <div> is 316px wide, but you have just added 10px of padding to the left and right sides. Padding is added to the width, making the overall width of the left_column <div> 336px. That leaves 632px, but the right_column <div> has a left margin of 10px. So, that means the width needs to be 622px. 11. Now youve calculated the width, select the right_column <div>, and click the New CSS Rule icon at the bottom of the CSS Styles panel. 12. The New CSS Rule dialog box suggests .two_col #container #right_column as the value for Selector Name. Edit it to .two_col #right_column, and click OK. 13. In the Box category, set Width to 622px, and click OK. The two columns now fill the full width of the container <div> (see Figure 11).

Figure 11. The original three-column layout now has two columns. 85

14. Save the style sheet.

Note: If you test the page in Live view or a browser, the columns dont sit alongside each other because the Check main heading is floated, preventing the left column from moving to the left side of the container. This problem will be fixed later when a page heading is added between the header and columns.
Improving the look of the right column

The right column contains a series of posts or articles. The first paragraph in each one needs to be converted to a heading and styled together with the date it was posted.
1. Click anywhere inside the first paragraph in the right column. In previous parts, you used the Format menu in the Property inspector to convert a paragraph into a heading. This time, youll use a keyboard shortcut. Press Ctrl+3 (Windows) or Cmd+3 (Mac) to convert the paragraph to an <h3> heading.

Note: Holding down the Ctrl (Windows) or Command (Mac) key and pressing a number between 1 and 6 creates a heading the same level as the number from <h1> through <h6>.
2. Do the same with the paragraphs that begin with "Sousa revives" and "DJ L-Koo." 3. Delete the paragraphs that contain only four hyphens. They were included only to make it easier to identify the headings. 4. Drag to select the first heading and the following paragraph in the right column (see Figure 12). (Its easier to drag from the end of the paragraph.)

Figure 12. The heading and first paragraph have been selected and are ready for styling. 5. In the Common category of the Insert panel, click Div (or Insert Div Tag). Alternatively, choose Insert > Div (or Insert > Layout Objects > Div Tag). 6. In the Insert Div Tag dialog box, make sure that Insert is set to Wrap Around Selection, and type post_header as the Class. Then click New CSS Rule (see Figure 13).

86

Figure 13. Creating a style for the post_header class.

Note: Youre using a class instead of an ID because the same styles are going to be applied several times on the same page. An ID must be unique within a page, but a class can be used multiple times.
7. Dreamweaver should automatically select the correct settings in the New CSS Rule dialog box. Just check that Rule Definition is set to check_cs6.css, and click OK. 8. In the Background category of the CSS Rule Definition dialog box, set Background-color to a medium gray (#999). 9. In the Box category, deselect Same For All under Padding, set Top and Bottom to 2px, and set Right and Left to 10px. 10. Click OK to close the CSS Rule Definition dialog box. This returns you to the Insert Div Tag dialog box. Click OK again to close it. The heading and the paragraph that follows it now have a medium gray background, and the text is inset from the left side by 10px (see Figure 14).

Figure 14. The heading and following paragraph have been styled differently. 11. The heading and following paragraph need a little more tweaking. Click anywhere inside the heading, and click the New CSS Rule icon at the bottom of the CSS Styles panel. 12. Dreamweaver suggests .two_col #container #right_column .post_header h3 as the value for Selector Name. Click Less Specific three times to change it to .post_header h3. Then click OK to open the CSS Rule Definition dialog box. 13. In the Box category, deselect Same For All under Margin, and set Top to 5px and Bottom to 10px. Click OK to make the changes. The heading moves closer to the top of the gray background. 14. Click anywhere in the paragraph that begins "Posted on" and click the New CSS Rule icon in the CSS Styles panel. 15. Dreamweaver suggests .two_col #container #right_column .post_header p. Click Less Specific three times to change it to .post_header p, and click OK. 16. In the Type category, set Font-size to 12px and Color to white (#FFF). 87

17. In the Box category, leave Same For All under Margin selected, type 0 in the Top field, and click OK. The "Posted on" text is now white (see Figure 15).

Figure 15. The heading and date posted have been restyled.

After all that work, styling the next two headings is a piece of cake. All you need to do is to wrap a <div> around each one, and set its class to post_header.
18. Select the next heading (beginning "Sousa revives") and the following paragraph. 19. Use the Insert panel or Insert menu to insert a <div>. 20. In the Insert Div Tag dialog box, click the down arrow to the right of the Class field, and select post_header from the list (see Figure 16). Then click OK.

Figure 16. Dreamweaver lists available classes for you to select.

Note: Although you can apply more than one class to an element, the list in the Insert Div Tag dialog box allows you to select only one. To learn how to apply multiple classes to an element see Adobe TV: Selecting multiple classes in Dreamweaver CS6.
21. Repeat the previous three steps for the final heading (beginning "DJ L-Koo") and the following paragraph. The text in the headings is indented by 10px, putting them out of alignment with the remaining paragraphs in the right column. You need to create another style rule to add the same amount of padding to them. 22. Click anywhere inside the right column except in the three post_header <div> elements that you have just styled. Then click the New CSS Rule icon in the CSS Styles panel. 23. Dreamweaver suggests .two_col #container #right_column p as the value for Selector Name. Change this to .two_col #right_column p, and click OK. 24. In the Box category of the CSS Rule Definition dialog box, deselect Same For All under Padding, and set the Right and Left fields to 10px. Click OK.

The paragraphs in the right column are now in alignment with the headings (see Figure 17).

88

Figure 17. The paragraphs have been moved 10px from the sides of the <div>. 25. Choose File > Save All Related Files to save the web page and style sheet.

Resolve a conflict between rules

If you look carefully, youll notice that the paragraph inside each post_header <div> has also moved in 10px. Thats because the selector .two_col #right_column p affects all paragraphs inside the right_column <div> in a twocolumn layout. The fact that the paragraph is nested inside another <div> makes no difference. To prevent the 10px padding from being applied to the paragraph inside the post_header <div>, you need to edit the .post_header p style rule to set its left padding to zero. However, as youll discover in the following section, eliminating the padding isnt as straightforward as you might think. This introduces you to the precedence accorded to style rules when theres a conflicta principle technically known as specificity.
1. Select the .post_header p style rule in the All Rules pane of the CSS Styles panel. 2. Although you can use the Edit Rule icon to reopen the CSS Rule Definition dialog box, you need to add only one property, so its quicker to click Add Property in the lower pane, and type padding-left in the field that opens. 3. Press Tab, type 0 in the value field on the right, and press Enter/Return to make the change. Even though you have set the left padding on the paragraph to zero, it remains indented. A general principle of CSS is that, when theres a conflict, style rules lower down the style sheet override ones that are higher up. The .post_header p style rule is listed in the All Rules pane above .two_col #right_column p, so youll likely first want to try swapping their positions. You can drag and drop style rules in the All Rules pane of the CSS Styles panel to rearrange them. 4. Select .post_header p in the All Rules pane, drag it down until you see a blue line below .two_col #right_column p (see Figure 18), and then release the mouse button to drop the rule into position.

89

Figure 18. You can rearrange the order of style rules by dragging and dropping in the CSS Styles panel.

It makes no difference. The padding in the post_header <div> remains indented.

5. To make sure that the rule was moved correctly, right-click the .post_header p rule in CSS Styles panel, and select Go To Code from the context menu.

This opens the style sheet in Split view, with the insertion point in the selected rule. Confirm that the rules are in the order shown in Figure 19.

90

Figure 19. The order of the style rules has been changed.

So, why hasnt changing the order of the style rules removed the left padding? The answer lies in the specificity of the selectorsput simply, .two_col #right_column p is a more powerful selector than .post_header p. You work out the specificity of a selector by assigning values to each part of the selector, and adding them up. The higher value wins.

Each ID has a value of 100. Each class has a value of 10. Each tag selector has a value of 1.

Using these values, .two_col #right_column p consists of a class, an ID, and a tag selector, so it has a value of 111. But .post_header p consists of only a class and a tag selector, so its value is 11. Specificity applies only to conflicting properties. Thats why the font-size, color, and margin properties are applied, but padding-left isnt. There are two ways to solve this problem: the lazy way and the better way. Ill show you both.
1. In Code view, put your insertion point just before the semicolon at the end of the padding-left definition in the .post_header p style rule (on line 122 in Figure 19), and press Space. This brings up code hints, as shown in Figure 20.

Figure 20. Editing the padding-left definition in Code view. 2. Select !important from the code hints. The padding-left definition now looks like this:

padding-left: 0px !important;

3. Press F5 or click in Design view to refresh the page. The padding has been removed from the paragraph in the header, and its now correctly aligned with the other text (see Figure 21).

91

Figure 21. The paragraph is now correctly aligned.

Adding !important just before the semicolon at the end of a property definition is a quick and dirty way to resolve a conflict, but it has the disadvantage that it needs to be added to individual properties. You cant apply it to a complete style rule. A more serious problem is that, if you rely on !important to resolve all conflicts, youll quickly discover youre creating conflicts between !important rules and you dont have a way to resolve them. Treat !important as an emergency life vest, but use the rules of specificity to ensure your boat doesnt spring a leak in the first place. The better way to solve this problem is to create a selector with equal or higher specificity.
4. Delete !important from the padding-left definition in the .post_header p style rule (it should look like Figure 19). 5. The post_header <div> is nested inside the right_column <div>, so add #right_column to the beginning of the selector like this:
#right_column .post_header p { font-size: 12px; color: #FFF; margin: 0px; padding-left: 0px; }

The selector now consists of an ID, a class, and a tag selector, which adds up to a specificity of 111, the same as .two_col #right_column p. The amended style rule is also lower down the style sheet. So, although both rules have the same specificity, the second one takes precedence where theres a conflict over the padding-left property.
6. Refresh Design view to confirm that the paragraph inside the header is still correctly aligned, as in Figure 21. 7. Save the style sheet.

Resolving this sort of conflict is probably one of the most challenging aspects of styling websites with CSS. I could have avoided this problem by always accepting the value Dreamweaver suggests for Selector Name in the New CSS Rule dialog box. However, selector names should be kept as simple as possible to reduce the amount of work the browser needs to do to apply the styles. Note: In the preceding section, I simplified the way specificity is calculated. The complete list of values assigned to selectors is as follows: IDs have a value of 100; classes, pseudo-classes, and attribute selectors have a value of 10; tag selectors and pseudo-elements have a value of 1. Inline styles specified using the style attribute in an elements opening tag always take precedence.

Add a page heading

92

The page needs a heading between the header <div> and the two columns. Adding the heading solves the problem of the columns not displaying correctly in Live view or a browser, but it creates a different challenge that requires some creative thinking. The page heading needs to go between the header <div> and the left_column <div>. Although the Insert Div Tag dialog box makes it easy to insert a <div> element precisely, theres no equivalent for <h2> tags. So, the simplest way to make sure the heading is inserted in the right place is to dive into Code view.
1. Select Source Code in the Related Files toolbar to expose the HTML in Split view. 2. The quick way to find the correct place to insert the heading is to select the left_column <div> in Design view. This highlights the <div> in Code view. 3. In Code view, click at the end of the line above the highlighted <div> (as soon as you do so, the <div> is no longer highlighted), and press Enter/Return to insert a new line. 4. On the blank line you have just created type the following line of code:
<h2>Point of View</h2>

5. Click the Live button to turn on Live view, which will show this new heading (see Figure 22).

93

Figure 22. The page heading has been added, but needs to be styled. 6. With Live view still active, click anywhere on the words "Point of View." Then click the New CSS Rule icon at the bottom of the CSS Styles panel. 7. Edit the value of Selector Name to .two_col h2, and click OK. 8. In the Type category of the CSS Rule Definition dialog box, use the following settings: o Font-family: Arial Black, Gadget, sans-serif o Font-size: 72px o Font-variant: small-caps 9. In the Block category, use the following settings: o Word-spacing: 0.3em o Text-align: center 94

Click Apply to see the result (see Figure 23).

Figure 23. The margins on the heading blow the page apart.

You need to fix the margins.

10. In the Box category, leave Same For All under Margin selected, type 0 in the Top field, and click Apply. The margins are removed, but the heading has moved mysteriously to the right, as shown in Figure 24. 95

Figure 24. The heading is no longer centered.

The clue to whats happening is that the heading is centered between the word "Check" in the header <div> and the right side of the container <div>. In Part 3, you floated the Check heading left. Floated elements can extend below their parent elementin this case, the header <div>preventing subsequent elements from moving past the floated element. Although the Check heading has no bottom margin or padding, its text box is invisibly protruding below the header <div>. Removing the top margin from the Point of View heading results in the two elements colliding. One way to solve this problem is to increase the height of the header <div> by about 10px, but that makes it too tall. The other solution is to use the clear property on the Point of View heading.
11. Still in the Box category, set Clear to left, and click Apply. The heading is now centered, but the gap above it has increased (see Figure 25).

96

Figure 25. The clear property forces the heading down the page. 12. The top margin of the heading has already been eliminated, and using a negative value doesnt have any effect because the clear property determines how high the heading can go. But all is not lost.

In Part 4, you learned that relative positioning calculates its offsets from the elements current position in the page. When applying relative positioning in Part 4, you didnt change the offsets of the header <div> or main_image <div> because you simply wanted to establish a containing block for absolutely positioned elements. In this case, you want to move the Point of View heading from its current position.
13. In the Positioning category, use the following settings, and click Apply: o Position: relative o Placement Top: -30px 97

Setting Top to a negative value moves the heading up, but the columns remain in their previous position. This is because relative positioning moves the target element without affecting other elements. Note: Setting the top offset to -30px results in the heading being slightly too high in Internet Explorer 7. I decided to ignore it because IE 7 has such a tiny market share.
14. Select the Box category again, and deselect Same For All under Margin.

Leave the Top, Right, and Left values as they are, but change Bottom to -35px, and click Apply. By setting the bottom margin on the Point of View heading to a negative value, you make room for the columns to move up.
15. Click OK to close the CSS Rule Definition dialog box, and choose File > Save All Related Files to save your work.

Link the two pages

Now that youve got two pages in the Check Magazine site, you can link them together.
Linking to internal files

Dreamweaver offers several ways to create links.

1. Open index.html in the Document window. 2. Click anywhere in the News link in the navigation bar. Because it already has a dummy link, you dont need to select the whole word. 3. With the HTML button selected in the Property inspector, click the Browse for File icon to the right of the Link field to open the Select File dialog box (see Figure 26).

Figure 26. Browsing for the file you want to link to. 4. Make sure youre in the Check Magazine root folder (click the Site Root button if youre not sureits at the top of the dialog box in Windows, and at the bottom in the Mac version).

Select news.html, and click OK (Windows) or Open (Mac). The correct path to news.html is now displayed in the Link field (see Figure 27).

98

Figure 27. The link has been created.

Note: In this case, only the file name is displayed because index.html is in the same folder as news.html. When linking to files in other folders, Dreamweaver makes sure the correct path is used. Getting Dreamweaver to insert the path is more reliable than typing it directly into the Link field.
5. Select the "read more. . ." text at the bottom of the left_column <div>. Because there isnt an existing link, you need to select all the text that you want to convert to a link. 6. Click the Point to File icon next to the Link field (it looks like a crosshair sight), hold down the mouse button, and drag the crosshair to the Files panel. Release the mouse button when the crosshair is over news.html (see Figure 28).

Figure 28. You can create a link by dragging the Point to File icon to the target file.

The correct path to news.html is displayed in the Link field.

7. Select the "read more. . ." text at the bottom of the center_column <div>. Then open the Common category of the Insert panel, and click Hyperlink. Alternatively, choose Insert > Hyperlink.

This opens the Hyperlink dialog box (see Figure 29).

99

Figure 29. The Hyperlink dialog box has more options for links.

When you use this method, you need to click the Browse icon to the right of the Link field to open the Select File dialog box. This adds an extra step, so its rarely worth doing unless you also want to s et values for Access Key and Tab Index at the same time. Browse for news.html, and click OK to close the dialog box.
Creating external links

Creating an external link is very straightforward. You just type or paste the URL into the Link field in the Property inspector or the Hyperlink dialog box. The important thing to remember is that external links must include the http:// or https:// (for secure links) at the beginning of the URL. If you leave the HTTP protocol out of the URL, the link will be treated as internal, resulting in the page not being found. To avoid typing mistakes, its best to copy the link from the address bar of your browser, and paste it into the Link field.
1. Select the "read more. . ." text at the bottom of the right_column <div>, and link to an external site of your choice. 2. Save index.html. Test the links

Load index.html into a browser by pressing F12 (Windows) or Opt+F12 (Mac), and test the links to make sure they open news.html and the external site. Theres no link to return from news. html to the main page, so just use your browsers back button for the time being.
Creating a home link

When drawing up the original comp for the Check Magazine site, the designer didnt include a Home link in the navigation bar. (These things happen!) There is sufficient room to add an extra link at the beginning of the navigation bar, so Ill leave you to handle that by yourself. However, its also common to make the logo or site name link back to the home page.

100

Adding a link to the Check heading sounds easy enough because its just text in a pair of <h1> tags, but doing so affects how its styled.
1. With news.html the active page in the Document window, select the word "Check" in the header <div>. Create a link to index.html using one of the methods described earlier.

As soon as you create the link, the text size shrinks (see Figure 30).

Figure 30. Adding a link to the main heading affects how its styled.

Whats happened is that the text is now affected by the styles used by the navigation menu. You need t o create a new rule for this link, restoring it to its original size, and removing the small capitals and narrower width.
2. With the link you have just created still selected, click the New CSS Rule icon in the CSS Styles panel. 3. Dreamweaver suggests .two_col #container #header h1 a as the value for Selector Name. Click Less Specific twice to change it to #header h1 a, and click OK.

Note: The Check link will be affected by both the #header h1 a and #header a styles. But the former selector has a higher specificity (102 as opposed to 101). As a result, the #header h1 a style rule overrides #header a.
4. In the Type category, use the following settings: o Font-size: 96px o Font-variant: normal 5. In the Box category, set Width to auto. 6. Click OK, and choose File > Save All Related Files. 7. Test the page again. You can now click the Check logo to return to the home page.

Part 6: Publishing your website

Welcome to the final part of this six-part 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

101

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 serversuch 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 they usually insert advertisements into your site. An advertisement-free package can cost as little as a few dollars per 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 process is the same in both CS5 and CS6). The rest of this article is focused 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 Set up a local version of your 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_cs6 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 named check_cs6 where you can upload the Check Magazine files.
1. In Dreamweaver, choose 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 the Edit icon at the bottom left of the Manage Sites dialog box (see Figure 1).

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

102

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

Dreamweaver CS6 lets you 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 3).

103

Figure 3. The panel where you enter the basic server details. 6. For the Server Name, type a descriptive 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 define a different server for the live site. If you have only the one server, type Remote Server. 7. For the Connect Using setting, 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, SFTP, and FTP over SSL/TLS (also known as FTPS). Because the initials of each method are so similar, its easy to confuse them. If you aren't sure which to select, ask your hosting company or the server system administrator. Your choice will be limited by whatever your remote server supports. 8. The following options apply to FTP and SFTP: o Type the server's FTP address (for example, type ftp.yourdomain.com). o Type your user name and password in the appropriate text boxes. o 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, see the (Optional) Troubleshooting the remote server setup section later in this article.

Note: For details of how to set up FTP over SSL/TLS (FTPS), see the FTPS instructions in Connect to a remote server in Dreamweaver Help.
9. The value that you need to specify as the 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.

104

As I noted 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, this is 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 named check_cs6, you need to type the path to that folder. For example, on my server, it would be /home/username/public_html/check_cs6.

10. 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_cs6/ (see Figure 4). 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.

Figure 4. 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 5).

105

Figure 5. Advanced options for a remote server. 12. In most circumstances, you should leave these options at their default settings. o Maintain Synchronization Information is selected by default. This keeps track of when the files on your remote server were last updated, and enables you to use the Site Synchronization feature (see Synchronizing files in Dreamweaver Help). o 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. o 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 6).

106

Figure 6. 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 let you 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. However, you dont need to upload the two text files in the assets folder nor the original comp for the site design. You can exclude them from being uploaded by cloaking them in your Dreamweaver site. Note: To learn more about cloaking, see Cloaking files and folders in your Dreamweaver site in Dreamweaver Help.
1. In the Files panel, right-click the assets folder, and select Cloaking > Cloak from the context menu. Dreamweaver puts a red diagonal line through the folder and file icons to indicate that they wont be uploaded. 2. Expand the images folder, right-click check_comp.jpg, and select Cloaking > Cloak from the context menu. Dreamweaver puts a red diagonal line through the file icon (see Figure 7).

107

Figure 7. The red diagonal line indicates that the files and assets folder have been cloaked. 3. Select the site's local root folder (check_cs6) at the top of the Files panel.

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 pointer over that title, Dreamweaver shows you the full path to the check_cs6 folder.
4. Click the Put Files icon (the up arrow) in the Files panel toolbar (see Figure 8).

Figure 8. Put files on the server. 108

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

Dreamweaver connects to the remote server you just defined, and copies all of the files, except the cloaked ones, to the remote folder. 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.
6. Open your remote site in a browser to make sure all of the files uploaded correctly. Congratulations, you have a site online! (Optional) Troubleshooting 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. 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 specify the remote system's root folder (or the check_cs6 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 characterscolons (:), slashes (/), periods (.), and apostrophes (') are not permitted in file or folder names. Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Mac) 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 choosing Site > Advanced > FTP Log. For more information, see the extensive tech note on FTP troubleshooting on the Adobe website.

109