Microsoft Expression Web For Dummies

Divide and Conquer with <div> Tags

To move content on a Web page into position, take a step back from the minutiae of the individual headings, paragraphs, and pictures and identify the big chunks of content that will become the different parts of the page. After you figure out what the different parts are, you surround each part with special HTML tags known as <div> tags. Using <div> tags to divide page content into sections is like putting a bunch of items into a clear plastic box. In fact, each <div> element (by which we mean the opening and closing <div> tags and the content between them) becomes its own "CSS box" for which you can define properties for the content area, padding, borders, and margins.

A simple example of a nonformatted page with its parts labeled appears in Figure 8-2. It has four sections:

Tip 

Put plenty of time into structuring your page content so that it follows a logical flow and a hierarchical heading structure. You'll find it easier to build your page layout because you can easily identify the purpose of each part and where it should go on the page. See Chapter 14 for more information.

Figure 8-2: A non-formatted Web page with four main parts.

Wrapping <div> tags around existing page content

After you decide what the main parts of your page are, you need to enclose each page part with a set of <div> tags. This process is often called wrapping a <div> because that's essentially what you're doing-wrapping the opening and closing <div> tags around the chunk of content so that you can create styles for formatting and positioning it as a whole element. You can wrap a pair of <div> tags around a single element-such as a paragraph or heading-or a chunk of content, such as multiple headings, paragraphs, or pictures or a table or form (or any combination).

To wrap a <div> around a single element on a page, follow these steps:

  1. In Design view, place the cursor in the element around which you want to wrap the set of <div> tags.

    For instance, place the cursor in a paragraph or heading.

  2. On the Quick Tag Selector bar, click the down arrow next to the selected item's tag and, from the drop-down list, select Wrap Tag, as shown in Figure 8-3.

    Figure 8-3: The Quick Tag Selector bar menu.

    REMEMBER 

    To wrap a <div> around a list, click the <ul> or <ol> tag, not the <li> tag, which selects only that single item in the list.

    The Quick Tag Editor appears, showing an opening and closing angle bracket in the text entry area. The cursor blinks patiently between them.

  3. Type div and then click the check mark to close the Quick Tag Editor and write the <div> tag into the page's code.

Notice that the item you wrapped the <div> around doesn't look any different in Design view and you can't see the <div> tags. However, if you place the cursor in the element and click the <div> tag on the Quick Tag Selector bar, Expression Web selects the <div> in Design view and shows you the <div> element's default margins as pink, diagonal line shading, as shown in Figure 8-4. (The margins are one part of the CSS box, which we explain in more detail later in this chapter.)

Figure 8-4: A selected <div> element in Design view.

GLANCE AT THE CODE 

Take a peek at your page's code after you wrapped the <div> tag around a single element. Here's the first-level heading shown in Figure 8-2:

<div> <h1>Piano Tuners of Portland</h1> </div>

If this happened to be the only content on our Web page, the content tags would be nested in this order:

<body> <div> <h1>Piano Tuners of Portland</h1> </div> </body>

Wrapping a <div> around more than one element on your page-such as some headings and paragraphs-is a little more involved and requires that you roll up your sleeves and edit your page's code slightly. We walk you through the process step by step.

REMEMBER 

All content that belongs together as part of one <div> element must sit together on the page. In other words, you can't wrap a set of <div> tags around a heading at one end of the page and another set of <div> tags around a paragraph at the other (leaving everything between them out in the cold) and expect them to be treated as one <div> element. Think of it as calf roping: If two calves are standing next to each other, you can lasso both of them in one throw (well, maybe). If the two calves you want are on opposite ends of the corral with a bunch of other calves (and maybe the rodeo clown) between them, you're out of luck. (Our apologies if this concept seems obvious; we just want you to fully grasp how to wrap <div> tags because your success with CSS positioning depends on it!) Here's how to wrap a <div> around a chunk of content on the page:

  1. In either Code view or the code portion of Split view (at the bottom of the workspace window, click Code or Split), place the cursor directly to the left of where you want the <div> tag to begin.

    In the Web page shown in Figure 8-2, we want to wrap a set of <div> tags around the page's main content area, so we placed the cursor to the left of the first <h2> tag, as shown in Figure 8-5.

    Figure 8-5: Starting position for the <div> tag.

  2. To make your code easier to read, press the Enter key to insert a blank line and then move the cursor up to the blank line (you place the opening <div> tag on the blank line).

  3. Type an opening angle bracket ( < ).

    A drop-down list of HTML tags appears.

  4. On the drop-down list, double-click the div option (you have to scroll the list), and then close the tag by typing the closing angle bracket ( > ).

    Notice that as soon as you type the closing bracket, the closing </div> tag appears, like this: <div></div>. The <div> tags aren't properly wrapped around the content. In the next step, you move the closing tag to its rightful home.

  5. Highlight the closing </div> tag and press Ctrl+X (or choose Edit Cut).

  6. Scroll down through your page's code until you find the last closing tag of the page content around which you're wrapping the <div> tags.

    Tip 

    To make your code easier to read, insert a blank line to hold the closing </div> tag.

  7. Press Ctrl+V (or choose Edit Paste) to insert the closing </div> tag.

    Make sure the closing </div> tag comes after the last closing tag of the content around which you're wrapping the <div>.

    For example, in the Web page shown in Figure 8-2, the "content" <div> tag would end after the paragraph that ends with the word repair; therefore, the closing </div> tag comes after the last </p> tag, like this: repair.</p></div>.
Tip 

You may notice that various tags in the code turn red and highlighted as you type and that squiggly lines appear under some tags. That's Expression Web's IntelliSense (the "code police") jumping into action, letting you know that something is amiss. In this case, you can ignore it; as soon as you finish adding your <div> tags, all will be well. (See Chapter 14 for more information about IntelliSense.)

Again, note that your content looks the same in Design view. Click the <div> tag on the Quick Tag Selector bar, however, and Expression Web shows you the <div> element with the content it contains and its default margins.

Adding <div> elements and then adding content

Rather than wrap <div> tags around existing page content, you can add a <div> element to a blank part of an existing Web page or to a blank new page. This process works best if you already thought out what content goes into which page part, but haven't yet added the content to the page, or if you plan to copy and paste content from somewhere else into a new <div> element.

To add a set of <div> tags to a page (to which you later add content), follow these steps:

  1. Open the page to which you want to add the <div> element.

  2. In the Toolbox, drag the <div> icon to the page's Design view.

    A light gray, dotted rectangle appears on the page, highlighted with a thin blue line and with div on its tab, as shown in Figure 8-6.

    Figure 8-6: A <div> element without content, in Design and Code views.

To add content to the empty <div> element, click inside the <div> element's dotted rectangle and type or add content just as you add content to a blank part of the page. Text added inside the <div> element doesn't automatically get formatted as a paragraph, like it does when you type directly on a blank part of a Web page. Be sure to select and format each piece of text by choosing from the drop-down list of text styles (such as Paragraph <p>, Heading 1 <h1>, or Heading 2 <h2>) on either the Common or Formatting toolbar.

Tip 

Choose View Formatting Marks Show, and then make sure that Tag Marks is selected on the drop-down list of formatting marks. This action turns on visual markers for opening and closing tags so that they're displayed in Design view. You can see the start and end positions for the <div> tags in addition to the tags for other bits of content. Being able to see the tags helps you drag and drop content from somewhere else on the page into the <div> element or shift things around within the <div>. You probably want to turn off Show Tag Marks when you're done, though; tag marks are a bit clunky and distracting.

You can add pictures and other elements to the <div> element. When you're finished adding content, check to ensure that the <div> tags wrap around everything you want included in the <div> element.

Warning 

Although it's tempting, keep yourself from dragging the sides of the <div> element's dotted rectangle in Design view to change its dimensions. Doing so gives it a fixed width and height. Instead, add the content and let the <div> element resize accordingly. Later in this chapter, we show you how to create style rules that target the <div> element so that you can control its location on the page and its size more precisely.
GLANCE AT THE CODE 

Here's what a chunk of content wrapped in <div> tags looks like in the code:

<div> <h2>A subheading</h2> <para>a paragraph</para> <h3>A sub subheading</h3> <para>another paragraph</para> </div>

Giving a <div> element an identity all its own

To get the full benefit of using <div> elements for positioning, you need to name each <div> element with either a class or an ID. You can then use the class or ID name as the selector for a style rule that controls every aspect of how the <div> element looks and where it's placed on the page.

For the main content sections of a Web page, Web designers use IDs rather than classes because each <div> element identifies a unique part of the Web page, of which there's only one: the one page header, the one navigation area, the one main content area, and the one footer. Think of <div> elements with IDs as labeled, plastic storage boxes in a downstairs closet: You have one box labeled Old Photos ("I'll sort those one of these days"), one box labeled Unfinished Sewing Projects ("I'll finish these when I have more time"), and one box labeled Clothes for Johnny to Grow Into ("The reason that those photos aren't sorted and those sewing projects are unfinished!").

You have a number of ways to add an ID to a <div> tag. Here are a few of the easiest:

If you're ready to create a style for the <div> element, you can create an ID-based style rule and add the ID to the <div> in one fell swoop. We cover creating style rules in detail in Chapter 7, and we talk more about style rules for positioning later in this chapter. Here are the basic steps for creating an ID-based style rule:

  1. Select the <div> element by putting the cursor anywhere inside the <div> and then, on the Quick Tag Selector bar, clicking the <div> tag.

  2. Choose Format New Style; or, in the Apply Styles or Manage Styles task pane, click New Style.

    The New Style dialog box appears.

  3. In the Selector text box, type the # character (press Shift+3), and then type the ID name.

    The # character tells Expression Web (in CSS-ese) that the style rule targets an HTML element with an ID.

    No space should appear between # and the name, like this: # idname.

  4. Select the Apply New Style to Document Selection check box.

  5. Define properties for the style rule and then click OK to save the style rule and apply the ID name to the selected <div> element.

GLANCE AT THE CODE 

Returning to our sample Web page shown in Figure 8-2, here's the code for the page header's opening <div> element after we added the ID to it:

<div > <h1>Piano Tuners of Portland</h1> </div>

Here are all the IDs for our page, in order of each part:

<div > <div > <div > <div >

REMEMBER 

You can give your <div> elements any id value you want, as long as the name is unique. (You can't have two <div id=“content”> elements on the same page.) In general, keep names to one word or two words joined with an underscore (_), like this: main_content.
Tip 

In this section, we describe using <div> elements to define unique content areas on a page that then get unique ID names. But you can wrap <div> tags around any chunk of content on a page that you want to identify as a <div> element and create styles for, regardless of whether it's unique. Here's an example of when you would want to assign a class rather than an ID to a series of <div> elements: You're creating a photo gallery page with a bunch of styled "boxes," each of which contains a different photo and caption but has the same borders, background, and font, for example. You would wrap each photo and caption in a <div> (thereby making each one a separate <div> element) and then create a class -based style (such as .photo) that controls the formatting of all <div class=“photo”> elements on the page. Figure 8-9, later in this chapter, shows a series of <div> elements controlled by a class-based style.

Related

Категории