dreamweaver - creating your first website – part 2_ creating the page layout _ adobe devel

Creating your first website Part 2: Creating the page layout | Adobe Developer Connection

Products

Solutions

Learning

Help

Downloads

Company

Store

SearchSign in My Adobe My orders My cart

Adobe Developer Connection / Dreamweaver Developer Center /

Creating your first website Part 2: Creating the page layoutby David Powers Requirements Prerequisite knowledge Part 1: Setting up your site and project files User level Beginning Required products Dreamweaver (Download trial) Sample files first_website_pt2_completed.zip

http://foundationphp.com/ Content Evaluate the task ahead Create and save a new page Insert DIV tags Create a new style sheet Attach the new style sheet Add the main images Position the columns Created 10 May 2010 Page tools Share on Facebook Share on Twitter Share on LinkedIn Bookmark Print Comments (190) (8 Ratings) CSS design HTML

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

Welcome to the second part of this tutorial series on creating your first website. This tutorial explains how to create a CSS-based page layout in Adobe Dreamweaver CS5. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and other kinds of content. Laying out web pages with CSS (cascading style sheets) has become the standard for modern web design. CSS offers superior dreamweaveribility and control over your layout, allowing you to create elements on the page and fine-tune their positions with pixel precision. However, CSS layouts can be difficult to understand and create, and it helps to have some background knowledge before building your first layout with CSS. You can start by reading CSS page layout basics, which is an overview of how CSS layouts work. For a more indepth look at CSS, take a look at the extracts from my book, Getting StartED with CSS. But this reading is not required. If you're up for the challenge, you can just dive right into this tutorial to begin creating your first CSS-based layout. Note: Dreamweaver CS5 comes with 16 wonderful pre-designed CSS layouts that you can use as the starting point for your web pages. But I didn't want to start you off with any of these layouts because I think it's important to experience what it's like to build a page layout completely from scratch. For more information on these new layouts, refer to What's new in the Dreamweaver CS5 CSS layouts by Stephanie (Sullivan) Rewis.

Dreamweaver CS5 website

Evaluate the task ahead

Typically, you don't begin building a website by opening Dreamweaver and laying out pages. The first steps to creating a website begin on a piece of paper or in a graphics-editing application such as Adobe Fireworks or Adobe Photoshop. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their client's approval. Examine the comp A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, "I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips." Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfill the client's requirements.

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt2.html[9/7/2011 3:50:25 PM]


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

Figure 1. A comp of the Check Magazine home page layout

You'll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. Note also that the text is lorem ipsum text (fake Latin placeholder text) and that the headings in the bottom columns are not final (two of them are identical). Even though the page content remains undecided, you can still use Dreamweaver to lay out this design. You can also open the original comp file if you want to see it on the computer screen. You can find the comp, check_comp.gif, in the images folder of the check_cs5 folder that you copied to your hard drive in Part 1 of this tutorial series, Setting up your site and project files. You might even want to print the comp so that you can have it in front of you as you build your page. What to do if things go wrong When learning new techniques or working with unfamiliar software, it's easy to make mistakes. The instructions throughout this tutorial series try to anticipate common errors, and each part contains a ZIP file showing how the code should look when you have finished. If your page doesn't look the way you expect, use the Dreamweaver File Compare feature to compare your files with the download versions. To use File Compare, you need a third-party file comparison utility, such as WinMerge for Windows. On a Mac, you can use the file comparison tool in TextWrangler. Both are free. The most common causes of mistakes are accidentally skipping a step in the instructions, or mistyping an ID or CSS property. Retrace your steps to see where you might have gone wrong. Sometimes, the best idea is to start again from scratch. It can be frustrating, but you can learn a lot from your mistakes.



Of course, if you do get stuck, call for help. The best place is in the Dreamweaver General Discussion Forum, where you'll find experts and beginners alike helping each other. Above all, enjoy yourself. Web design can sometimes be challenging, but it's also a lot of fun.

Create and save a new page

After you have set up a site and examined your comps (if any), you are ready to begin building web pages. You'll start by creating a new page, and saving it in the check_cs5 local root folder of your website. The page eventually becomes the home page for Check Magazine. Note: If you haven't created the check_cs5 local site folder, you must do so before you proceed. For instructions, see Part 1 of this tutorial series, Setting up your site and project files. 1. In Dreamweaver, make sure the Check Magazine site is selected in the Files panel (see Figure 2).

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

2. Select File > New. 3. In the Blank Page category of the New Document dialog box, select HTML from the Page Type list, select from the Layout list (these two options should already be selected by default), and click Create. Note: In the Page Type list below the option you'll see all of the CSS layouts that come with Dreamweaver. Later you can return to this dialog box to explore the different kinds of CSS layouts available. 4. Select File > Save, or press Ctrl+S (Windows) or Cmd+S (Mac OS X). 5. In the Save As dialog box, make sure you're in the check_cs5 folder that you defined as the site's local root folder. Dreamweaver should have selected this automatically, but if a different folder is selected, click the Site Root button at the bottom of the dialog box (it's on the right in Windows, and on the left in the Mac version). 6. Enter index.html in the File Name text box and click Save. The file name now appears in the tab of your new document. 7. In the Document Title text box at the top of your new document, type Check Magazine (see Figure 3).

Figure 3. Add the page title.



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

Insert DIV tags

If you did any of the background reading recommended at the beginning of this tutorial (for example, CSS page layout basics), then you already know that the div tagan HTML tag that in most cases acts as a container for text, images, and other page elementsis the basic building block of a CSS layout. You place div tags on the page, add content to them, and use CSS to position them. Unlike table cells, which are restricted to existing within the rows and columns of a table, div tags are much more dreamweaverible. If you look at the design comp again (see Figure 1), you'll notice that the page is divided into distinct sections: a banner logo at the top of the page, a central graphic area in the center of the page, and then a third bottom section that contains three separate columns within it. These sections all correspond to separate div tags that act as containers for the content inside of them. Actually, it is a little more complicated than that, but don't worry about that right now. Start by creating the most basic, most important, and most common div tag for CSS 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. 1. Make sure the Design button is selected at the top left of the Document window, and click once on the page to ensure that the insertion point is in the upper-left corner of the page (see Figure 4).

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

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



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

4. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type container in the ID text box, and click OK. The new div appears on your page, surrounded by a dotted line in Design view, and with some placeholder text (see Figure 6).

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

Note: If you can't see the dotted line surrounding the div, select View > Visual Aids, and make sure there's a check mark alongside CSS Layout Outlines. Clicking any of the options in the Visual Aids submenu toggles them on and off. 5. Select the placeholder text and delete it, making sure you delete only the text. If the outline of the div disappears, repeat step 4. The placeholder text should be automatically selected when the div is inserted, so all you need to do is to press Delete. 6. In the Insert panel, click Insert Div Tag again. 7. In the Insert Div Tag dialog box, select "After start of tag" from the Insert pop-up menu. This activates a new pop-menu alongside, which lists the places where Dreamweaver can insert the new div. At the moment, the only candidates are the tag and . You want to nest the new div inside the container div, so select (see Figure 7).



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

8. Leave the Class text box blank, type banner in the ID text box, and click OK. The new div appears on your page, and within it you can see the placeholder content for the banner div. But where did the container div go? Well, it's there, you just can't see it in Design view. The best way to see it is to look at the code. 9. Click the Split view button (see Figure 8).

Figure 8. Click the Split view button.

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

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

Note: Working in Split view (formally called Code and Design view) is a great way to learn how Dreamweaver generates code. When you insert something in Design view, you see the code that Dreamweaver writes in Code view. It's particularly useful if you have a large monitor, because you can see the web page in Design view and the underlying code both at the same time. 10. Since you're looking at the raw code, let's continue working there. If you're cramped for space in Split



view, click the Code button at the top of the Document window. Place the Insertion point after the banner div's closing tag and press Enter (Windows) or Return (Mac OS X) to create a new line (see Figure 10).

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

Note: Pay careful attention to where you create the new line. You should still be inside the container div. The container div's closing tag is on line 12 of Figure 10. 11. With the Insertion point still on the new line, click Insert Div Tag in the Insert panel. 12. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type main_image in the ID text box, and click OK. The new div tag appears on your page, and within it you can see the placeholder text. This new div tag is inside the container div, on the same level as the banner div. Tip: When you create new IDs watch out for extra space either before or after the ID. For example, make sure that when you type the main_image ID, there is not an extra space after the "e" in image. If there is, it can lead to CSS problems later. 13. Place the Insertion point after the new main_image div's closing tag and press Enter (Windows) or Return (Mac OS X). 14. In the Insert panel, click Insert Div Tag. 15. In the Insert Div Tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type left_column in the ID text box, and click OK. 16. Place the Insertion point after the new left_column div's closing tag and press Enter (Windows) or Return (Mac OS X). 17. In the Insert panel, click Insert DIV tag. 18. In the Insert Div tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type center_column in the ID text box, and click OK. 19. Once morewith feelingplace the Insertion point after the new center_column div's closing tag and press Enter (Windows) or Return (Mac OS X). 20. In the Insert panel, click Insert Div tag. 21. In the Insert Div tag dialog box, leave At Insertion Point selected in the Insert pop-up menu, leave the Class text box blank, type right_column in the ID text box, and click OK. Your code should now look as shown in Figure 11.

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



22. If you're in Split view, press F5 or click in the Design view half of the Document window to update Design view. Alternatively, click the Design button to return to Design view. All your divs are stacked one on top of another and stretch the full width of the page. This is the default behavior until you create CSS rules for them. 23. Save the page (File > Save).

Create a new style sheet

Now that you have your div tags in place, the next step is formatting and positioning them with CSS. CSS stands for cascading style sheetsa 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. Note: You can also put CSS rules in the head section of a document, or inline with the code itself. However, an external file is the most efficient way of using CSS, because changes made to rules in an external style sheet are automatically applied to every page attached to it. 1. Select File > New. 2. In the New Document dialog box, verify that the Blank Page category is selected, select CSS from the Page Type column (see Figure 12), and click Create.

Figure 12. The New Document dialog box.

3. A blank style sheet appears in the Document window. The Design view and Split view buttons are disabled. CSS files are text-only filestheir contents are not meant to be viewed in a browser. 4. Select File > Save. In the Save As dialog box, create a new folder called styles in the site root, select the new folder, and save the file in the styles folder as check_cs5.css. 5. Five divs in index.html are nested inside the container div. To center the content on the page, you need



to create a style rule for the container div by giving it a fixed width and setting its left and right margins to auto . To create a style rule for a div (or any other tag) that has an ID, you prefix the ID with a hash sign (#). So the CSS selector for the container div is #container . Note: CSS is case-sensitive. The spelling of the ID must be the same as you used when inserting the div tag. So, if you used an initial capital letter, the CSS selector would be #Container . Also, make sure there's no space between the hash sign and the ID. Type the following code in the style sheet:

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

As you type, Dreamweaver uses code hints to suggest options for completing your entry. Press Enter (Windows) or Return (Mac OS X) when you see the code you want, and let Dreamweaver finish the typing for you. When typing the pixel values, do not leave a space between the number and px . For example, it must be 968px , not 968 px . Don't forget to include a semicolon at the end of each line, after the property values. When you're finished, the code should look as shown in Figure 13.

Figure 13. The style rule for the container div.

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



Tip: For more information about CSS properties, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel. This contains details of CSS2, plus some non-standard CSS properties. 6. Save the style sheet. Next you'll attach the new style sheet to the index.html page.

Attach the new style sheet

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

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

Even though you created a complex CSS rule for the container div, the page still looks the same as before. This is because the CSS style sheet is not yet attached to the page. When you attach the style sheet to the page, the #container rule that you created in the style sheet will format the div with the id "container" on your web page. 2. Open the CSS Styles panel by clicking its tab. (In the Designer workspace [the default Dreamweaver workspace], the CSS Styles panel group is located below the Insert panel. If it isn't, you can always select Window > CSS Styles to display it.) You'll notice that the CSS Styles panel is empty (save for the message, "(no styles defined)") because there are no CSS rules applied to this page. 3. (Optional) Double-click the Insert panel to close it and create more room. 4. In the lower right-hand corner of the CSS Styles panel, click the Attach Style Sheet button (see Figure 15).

Figure 15. Click the Attach Style Sheet button.

5. In the Attach External Style Sheet dialog box, click the Browse button. This launches the Select Style Sheet dialog box. Navigate to the check_cs5.css style sheet that you created in the styles folder, select it,



and click OK (Windows) or Choose (Mac OS X). 6. Click OK to close the Attach External Style Sheet dialog box. Note what happened to the page. You can immediately see that the container div added padding of 10 pixels on the left and right. Depending on the size of your Document window, you might also see that the container div looks centered on the page. That's because if you have extra room (in addition to the 968pixel width you specified), the container will also have an "auto" margin on its left and right sides. This effectively means that the browser will create exactly the same amount of pixel space to the left and right of the container div, thus creating a centered effect. 7. Save the page. 8. Run your cursor over the border of the container div until you see a red line, and then click to select the container div. Figure 16 shows what you should see when the container div is selected.

Figure 16. The container div selected in Design view.

Note: If you have difficulty selecting the border of the container div, click inside any of the divs you have created, and select in the Tag selector at the bottom of the Document window. Here Dreamweaver is giving you a nice visual rendering of how the CSS rule applies to the container element. The light gray shading on the left and right sides of the container div indicates the 10-pixel padding, and when you hover your cursor over the area, Dreamweaver displays a tooltip that tells you that. Similarly, the lighter blue areas at the outermost left and right sides of the container indicate the auto margins. Again, the amount of auto margin that displays in Dreamweaver depends on the size of your Document window. If you are working in the default Dreamweaver Designer workspace, and you make your Document window smaller by dragging the docked panel area on the right, you should see the auto margin disappear as less space becomes available on the page. Note: If the visual rendering of the padding and margins fails to display, select View > Visual Aids, and make sure the following options have check marks next to them: CSS Layout Box Model and CSS Layout Outlines. 9. Click the Inspect button at the top of the Document window (see Figure 17).

Figure 17. Click the Inspect button.

This is a new feature in Dreamweaver CS5. It turns on Live View in CSS Inspect mode. The dotted outlines of the divs disappear, and you see the page as it would look in a browser. In fact, you are looking at the page in a browserLive View uses the WebKit browser engine that powers the Safari and Google Chrome browsers. 10. Move your cursor over the divs in the center of the page. As you move up or down, each div is highlighted in light blue. 11. Move your cursor to the left of the place holder text (see Figure 18).



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

This highlights the container div. The div itself is highlighted in blue. The 10-pixel padding on either side is highlighted in purple, and the auto margins are highlighted in yellow. Being able to see the effect of your style rules like this makes it a lot easier to understand the effect they have on your layout. 12. Click Live View to return to Design view and turn off CSS Inspect mode.

Add the main images

Now that you have all your divs in place and your style sheet attached to the page, you are ready to create the remaining CSS layout rules, and apply them to the appropriate elements on the page. But first, you need to think about the two main images: the banner at the top, and the large image of a man standing alongside the reflection of palm trees in a glass wall. With CSS, you can add a background image to any HTML element, such as a div. However, background images should be used only for decorative purposes. By default, browsers turn off background images when a page is printed. Important images should be inserted directly in the HTML, using the tag. The images in this page play different roles, so they need to be handled differently. Insert the banner image with the tag The banner image at the top appears on all pages and identifies the Check Magazine site, so it's not appropriate for a background image. 1. Click inside the banner graphic div and delete all of the placeholder text so that the banner div is empty. 2. In the Insert panel, click Images. If it's the first time you have used Images, a submenu opens, showing the various options. Choose the first one (Image), as shown in Figure 19. This opens the Select Image Source dialog box.



Figure 19. Selecting Image in the Images submenu.

Note: After the first time, Dreamweaver remembers your most recent choice, and makes it the default. To choose a different option, click the tiny down arrow to the right of the icon in the Insert panel. 3. In the Select Image Source dialog box, navigate to the images folder in the Check Magazine site, and select banner.jpg. Click OK (Windows) or Choose (Mac). This opens the Image Tag Accessibility Attributes dialog box. 4. When you insert an image in an HTML page, you need to add alternate text that gives a brief description of the image for the benefit of people with visual disabilities. When they visit your site using a screen readerassistive technology that reads the content of web pages aloudthe alternate text gives them a verbal indication of what's on the screen. The alternate text is also displayed in place of the image if a visitor has images turned off in the browser, or if your image is missing. Type Check Magazine in the "Alternate text" text box (see Figure 20), and click OK.

Figure 20. Adding the alternate text for the image.

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



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

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

Insert the main image as background When the layout is finished, text will be added in front of the main image, which is mainly decorative anyway. So, this time, you'll use CSS to insert it as a background image to the main_image div. 1. Place the insertion point in the main_image div, and delete all the placeholder text. After you've deleted the last character, it will look like the div has completely disappeared. Don't worry, it's still there. Don't click anywhere in the Document window before proceeding to the next step. 2. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule button (see Figure 22).

Figure 22. Click the New CSS Rule button.

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



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

Dreamweaver detects that the Insertion point is in the main_image div, which is nested inside the container div, and it suggests using a compound selector #container #main_image . The text area below the Selector Name text box describes the meaning of this selector. Although it's correct, everything in the page is nested inside the container div, so you don't need to be so specific. 3. Click the Less Specific button. This changes the value in the Selector Name text box to #main_image , which is exactly what you want. Technically speaking, the Selector Type pop-up menu should now be set to ID. However, don't do it. If you do, Dreamweaver clears the existing value from the Selector Name text box. 4. Leave the Selector Type pop-up menu set to Compound, and make sure check_cs5.css is selected from the Rule Definition pop-up menu. Then click OK. The CSS rule definition dialog box appears, indicating that you are defining properties for the new #main_image rule. 5. Select the Background category in the Category column. 6. In the Background category, click the Browse button next to the Background-image text box. 7. In the Select Image Source dialog box, navigate to the images folder inside the Check Magazine site. 8. Select the main.jpg graphic and click OK (Windows) or Choose (Mac OS X). 9. Select no-repeat from the Background-repeat pop-up menu. The main.jpg graphic is now defined as the background image for the main_image div (see Figure 24).



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

10. Select the Positioning category in the Category column. In the Positioning category, do the following: Select relative from the Position pop-up menu. Type 968 in the Width text box and select px from the pop-up menu to the right. Type 376 in the Height text box and select px from the pop-up menu to the right. Click OK. The main.jpg graphic appears in the main_image div, and the dimensions of the div are set. Normally, it's not a good idea to give a div a fixed height, because a div expands or contracts automatically depending on the amount of text or other content inside it. However, in this case a fixed height is necessary, because you need the div to be the same height as the background image. Without the height declared in the CSS, the div would collapse to nothing, and the background image would not be displayed. I'll explain the reason for setting Position to relative in Part 4 of this tutorial series, when you'll add some text to the main_image div. 11. Select File > Save All Related Files to save the page and the style sheet. Figure 25 shows what your page should look like at this point.



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

Position the columns

The last major task for the basic layout of index.html is to marshal into order the columns at the bottom of the page. CSS categorizes most HTML elements as block-level or inline. A block-level element begins on a new line of its own, and forces the following element onto the next line, whereas inline elements snuggle up alongside each other. Typical block-level elements include headings, paragraphs, and divs. Text inside a paragraph and images are inline elements. Before moving the columns into position, you need to do a little calculation. The main image is 968 pixels wide. That doesn't divide evenly by 3, but you need a little breathing space between each column, say 10 pixels. So, if you divide 948 by 3, you get 316. That's how wide each column needs to be. It also happens to be the width of the images at the top of each column. 1. If your monitor is wide enough, the best way to work is in Split view, using Dreamweaver's related files feature. Close check_cs5.css by clicking the X on its tab, leaving just index.html open. 2. Click check_cs5.css in the Related Files toolbar just below the tab for index.html. This opens the style sheet in Split view, while leaving index.html visible in Design view (see Figure 26).



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

You can now edit the style sheet, and see the changes in Design view. Tip: If you're cramped for space, drag the center bar to resize the windows. You can also make extra room by pressing F4 to hide all the panels. Press F4 again to restore them. 3. All columns need to be 316 pixels wide, you can apply the same width to all of them by creating a combined selector for the three divs. Add the following style rule at the bottom of the style sheet:

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

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



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

5. To get them to sit alongside each other, you need to use the float property. Position the Insertion point after the semicolon at the end of the line in the style rule you have just created, and press Enter (Windows) or Return (Mac OS X). Dreamweaver displays code hints for the available properties. Type f and press Enter/Return to insert float: . Then type l (lowercase L) and press Enter/Return to insert left . Don't forget to add a semicolon at the end of the line. 6. Refresh Design view by clicking in it or pressing F5. The columns should now be alongside each other across the bottom of the page. 7. Finally, you need to add the margins between the columns. You do this by adding a 10-pixel left margin to the center and right columns. Add the following style rule at the bottom of the style sheet:

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

Like the previous style rule, the same property is assigned to multiple elements by listing their selectors separated by commas. 8. Select File > Save All Related Files. Note: depending on where the focus is in the Document window, Save All Related Files might be grayed out. If it is, select Save All. The difference is that Save All saves all files that are currently open. Save All Related Files saves only those files that are related to the current document. Figure 28 shows what your page should now look like in Design view.



Figure 28. The columns are now in place.

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

Tutorials and samples Tutorials Using Modernizr to detect HTML5 and CSS3 browser support Understanding HTML5 intelligent forms Part 2 Understanding HTML5 intelligent forms Part 1 Introduction to media queries Part 2 Samples Customizable starter design for multiscreen development Dreamweaver starter designs for web designers Applying design to Spry widgets Dreamweaver starter designs for beginners Comments (190)

Dreamweaver user forum

More

Dreamweaver Cookbook

More

09/01/2011 Comments about using non-websafe fonts 08/30/2011 HTML hovering over thumbnail to bring up larger image on top of it. How? 09/01/2011 Make downloadable file, without zip 08/30/2011 Template changes will not propogate out to the child web pages in the defined site.

08/21/2011 Spry Accordion Vertical Text - Auto Start on Page Load Mouse Over Pause 08/17/2011 Using cfdump anywhere you like 08/11/2011 How do I create administrative user levels in Dreamweaver? 02/18/2011 Rounded Corners / Border Radius, css3 and IE versions below IE9

Comments

williamross7


Creating your first website Part 2: Creating the page layout | Adobe Developer Connection November 19, 2008 Easy to follow, my first webpage is looking to shape up pretty quickly. Great job.

SupagraphNovember 27, 2008 As a beginner with dreamweaver and CS4 I find this tutorial very helpful and clear.

Nancy BakerDecember 1, 2008 Yes, this very easy to follow. I was confused by the color #F7EEDF though because it didn't work like the #993300 did. The cells are white.

StephenlaneDecember 23, 2008 Hey Jon! Nice work! Im a Student at James Cook University in Australia and I am doing Photography as a Major but just added Media Design as my second Major which means I will be "learning about Dreamweaver" in class. I thought I would take advantage of my extra bonus from being an Adobe purchaser and complete some of the tutorials provided so that I can be a BIG step ahead in a class designed for people who know nothing about the subject. Thanks so much for making this an easy experience and I inparticular make special note to your great explainations. Regards, Stephen Lane www.stephenlanephotography.com

Jon Michael Varese (Administrator)December 23, 2008 Stephen -- glad you are finding these tutorials useful. We are in the process of updating them for CS4, but these are not likely to be published until the spring. Keep checking back for new content, and thanks again. Jon

WynnesomDecember 26, 2008 Learning this quickly. I agree on the F7EEDF color, though I couldn't make the properties accept it because I am using CS4 and the cell properties layout box has only one bg color dialog box and not two as the graphic in this tutorial shows. I figured it out though. Also, I realized that when going back and forth between the tutorial and the sample page in DW I lost the tag selection and when I tried to enter the color code I received the error that the color didn't exist and I had to enter it in a different form. I figured that out too. lol. good tutorial. trial and error is the best way to learn.

WynnesomDecember 26, 2008 ah ha. I ran into a problem way down the line in that when I set the background color it black, I chose the "appearance (html)" choice is CS4 vs. the "appearance (css)" choice and had to come back here to figure out why I didn't have the css rule in the css styles "all" menu. I "reset" the background using the "appearance css" menu item and I now have the rule to proceed as directed in the section on css.

Gail JordanJanuary 3, 2009 This tutorial excellently examples how to eat an elephant... one well chewed bite at a time. From one page to the next I am excited about the upcoming lesson because each lesson is so well laid out and so easily understandable. This is my first look at a web page application. Job well done.

ZooKeeper03January 14, 2009 If you decide later that you need another row or column within a table, is it a big deal to just add it. Is there an insert row or column option, or do you have to stick to the original layout?

ZooKeeper03


Creating your first website Part 2: Creating the page layout | Adobe Developer Connection January 14, 2009 I am further along and came back to ask this question. Why did we set the sizes of some of these cells when the stuff we put into them increased the size of them. I mean we did not make it large enough when we set the size. Was it really necessary, or did we just do it to learn how if we wanted to put in an image place holder? Question 2: Is their a standard pixel width that a web page should be. We used 700 pixels wide on this one.

David Powers (Moderator)January 15, 2009 Shelly, Adding (or removing) table rows and columns is easy. The following Dreamweaver Help page shows you how: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7d81a.html.

David Powers (Moderator)January 15, 2009 Shelly, Jon, who wrote this tutorial, is on extended leave, so I can't ask why he did things in a particular way. However, you have already learned two important things: how to set the height and width of table cells, plus the fact that table cells expand to accommodate the content you insert into them. It's this second feature of table cells that's the most important to understand: attempting to control height and width of table cells is often an exercise in frustration. In fact, using tables for page layout is now considered to be the less optimal way of structuring a web page. The CS4 version of this tutorial, which is currently in preparation, will not use tables. Instead, the whole layout will be controlled by CSS. In answer to your second question, there is no standard width for a web page, basically because there is no such thing as a standard way of viewing web pages. People have different size monitors; they don't always display their browsers full screen, especially if they have a large monitor; and many people now access the web on mobile devices, which have much smaller screens. When designing a website, it's important to test it in a variety of browsers and devices. It's also important to remember that lines of text shouldn't spread right across the screen, as it's uncomfortable to read when lines are too long to scan. Using 700 pixels was a good choice when this tutorial was written. Now, many people have larger monitors, so 960-980 pixels has become a common choice. But rather than stick rigidly to specific figures, test your page to see what it looks like, and how easy the text is to read.

adrian buckmasterJanuary 19, 2009 an absolute beginner, but advanced in photoshop. In part two, I am required to click once on the page to ensure insertion point. The screen shot shows no type, but on my screen I see ten rows of type, beginning with Table, or click the Table button in the Common category of the Insert bar/panel, or press Ctrl+Alt+T (Opt+Cmd+T). If no dialog box appears, open the Preferences panel from the Edit menu on Windows or the Dreamweaver menu on a Mac. In the General category, make sure that the option to show dialog when inserting objects is selected.

Latoya GayleJune 17, 2009 thankyou but i still seem to not have the access to insert a box, i understand how to it just not letting me. i guess i've gone wrong some time before this stage. i applied a layout box manually but dont know how apply rows. maybe that will work better?sorry

David Powers (Moderator)June 18, 2009 It sounds as though you are in Table Layout mode. This is a huge mistake, not only for this tutorial, but for web design in general. Table Layout mode creates complex code that is unstable and difficult to maintain. It causes so many problems that it has been removed completely from Dreamweaver CS4. If you're using Table Layout mode, scrap the page and start again from scratch. If that's not the problem, it sounds as though you have a corrupt installation of Dreamweaver. It might be necessary for you to reinstall Dreamweaver or contact Adobe technical support.

PaterpatriaeJune 23, 2009 In Step 3 you're supposed to color the image placeholder red. Why is it necessary to color in the box if it's just a placeholder?

Jon Michael Varese (Administrator)June 23, 2009


Creating your first website Part 2: Creating the page layout | Adobe Developer Connection It's not really necessary -- I think Dreamweaver defaults it to gray if you don't select a color. The color is just to make the block stand out on your page.

DennisAlanJune 24, 2009 My place holder did not turn color. I followed the instructions EXACTLY several times.

DennisAlanJune 24, 2009 Correction: My place holder box 700 X 90 turned medium gray.

DennisAlanJune 24, 2009 Instruction #4 says "Click OK." I do not see OK anywhere. (Mac system, OS 10.5)

DennisAlanJune 24, 2009 Color changes did not work for me in any of the table cells. I believe I followed the instructions EXACTLY.

David Powers (Moderator)June 25, 2009 If you followed the instructions exactly, it should have worked as described. As Jon Varese points out, the colour isn't necessary; the placeholder is displayed a light grey if no colour is chosen. The OK button is at the top right of the Image Placeholder dialog box. If it's missing, it sounds as though you have a corrupted installation of Dreamweaver. This can often be rectified by deleting your personal Configuration folder and letting Dreamweaver generate a new one the next time you launch the program. Instructions for how to find your personal Configuration folder can be found in the Dreamweaver FAQ in the Dreamweaver forum at the following location: http://forums.adobe.com/thread/417116?tstart=0#cache.

PaterpatriaeJune 28, 2009 Why are you supposed to click the tag to color the individual cells? I found that I could color the cells without clicking it.

David Powers (Moderator)June 29, 2009 Using the Tag selector is frequently the quickest and most accurate way to select elements in Dreamweaver. However, most things in Dreamweaver can be done two or three different ways. There's no problem if you achieved the same result by a different method. The aim of this tutorial is to teach tried and tested methods without confusing readers by enumerating all the different ways to do a particular thing.

stevebransonJune 30, 2009 An excellent tutorial. A good explanation of what tables are really for. Thanks.

David Powers (Moderator)July 1, 2009 This tutorial was written a few years ago, when tables were still widely used for layout because of inconsistency in browser support of CSS. Adobe no longer recommends using tables for layout. Take at look at Sheri German's tutorial on moving from table-based layout to CSS: http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html.

WindalisaJuly 28, 2009 Thank you so much John for taking the time to do this...I am creating my first web page and everything worked just as you said it would. I cannot wait to see the finish product.

WindalisaJuly 28, 2009


Creating your first website Part 2: Creating the page layout | Adobe Developer Connection I have trying to learn DW for months. I have used the DW for Dummies and many other tutorials that I have found online, this is hands down the best tutorial out there. I will also check out Sheri German's tutorial. Thanks!

Thilina MadhusankaAugust 1, 2009 This is a nice guidance to the beginners like me. Thanx a lot.

CeleganceAugust 12, 2009 another excellent tutorial, however I don't have the align caption with default option in my dialog box, I'm sure it's not important in this case so I'm ploughing on regardless :)

CeleganceAugust 12, 2009 Helpful tutorial and comments :) Page: 1 2 3 4

Please sign in to improve or rate the content.

Choose your region

Ad Choices Careers Permissions and trademarks EULAs Report piracy Contact Adobe Security

Copyright 2011 Adobe Systems Incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).


dreamweaver - creating your first website – part 2_ creating the page layout _ adobe devel

Documents