Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Inserting Div Tags

Now you're ready for div tags. Div tags are very similar to Dreamweaver layers. Both act like containers on your page, both can be used to control your page layout, and both can be controlled via CSS. However, div tags offer much more flexibility in terms of where and how they can be used.

Div tags offer a wide range of flexibility. They can be used for pop-up messages, boxes containing information, and much more. Here, they're being used to help control a simple layout, just like a Dreamweaver layer.

[View full size image]

Noteworthy

The big diff between div tags and layers: if you're working with div tags, you won't be able to drag and drop them in the same way that you could drag layers. Div tags are controlled entirely by CSS, so you'll have to go back and edit your style sheet if you want to change your div tag's position in the layout.

For example, earlier in this chapter, you saw how X- and Y-axis coordinates can be used to determine the position of a layer in relation to the top-left corner of the page. X- and Y-axis coordinates can also be used to determine the position of div tags, but instead of the top-left corner of the page, the coordinates are based on the location of another object on the page, like text or a graphic. This feature makes div tags suitable for elements such as pop-up messages and floating information boxes. For more on the differences between div tags and Dreamweaver layers, check out the sidebar "The Truth About Dreamweaver Layers" later in this chapter.

Div tags are very similar to Dreamweaver layers.

Before you insert a div tag, you'll create a CSS style to help control it. You don't have to work this way, but you might find this approach helpful while you're getting started with div tags because you'll be asked what CSS style you want to use to control your div tag when you insert it.

Here's how to insert and manipulate div tags:

At the bottom of the CSS Styles panel, click the New CSS Rule button.

In the New CSS Rule dialog box that appears, set Selector Type to Class; then enter a name for your new style.

Choose Class because, in a moment, you'll be telling your div tag which CSS style to useand that style has to be a Class style.

Use the Define In settings to indicate whether your new style sheet will be stored in an embedded or an external style sheet; then click OK.

The CSS Rule Definition dialog box opens; however, you may find it tricky (especially if this is your first time out with div tags) to set properties for an object that hasn't yet been inserted onto your page. So before you set any options for your div tag, you'll insert it on your page.

Click OK to close the CSS Rule Definition dialog box.

Click your page where you want to insert the div tag.

Choose Insert > Layout Objects > Div Tag.

In the Insert Div Tag dialog box that appears, use the Insert pull-down menu to specify where you want the div tag inserted:

At Insertion Point: Places your div tag exactly where you've positioned your cursor in the code.

Wrap Around Selection: Places any selected content inside your div tag. This option is available only if you've made a selection before inserting the div tag.

After Start of Tag: Allows you to position the div tag directly after your page's opening <body> tag, ensuring that the div tag appears at the very top of your page. If other tags in your document are being controlled by ID selectors, you can position the div tag in relation to their location by selecting them from the adjacent pull-down menu. For example, if you've already inserted a few layers or div tags on your page, you may see <div id="Layer1"> in the pull-down menu. The div tag will be inserted directly after the selected tag's opening code, meaning that the div tag will be placed inside the tag that you selected, before any content that the tag holds.

[View full size image]

Before End of Tag: Inserts the div tag just before your page's closing <body> tag, placing the div tag at the very bottom of your page. Again, if other tags in your page have ID selectors, you can place your new div tag within them, after any content that they may contain.

Before Tag: Places the div tag before the tag that you specify. This option is available only if other tags on your page have ID selectors applied to them.

After Tag: Inserts your div tag after the tag that you specify. This option is available only if other tags on your page have ID selectors applied to them.

Noteworthy

The Insert options in the Insert Div Tag dialog box may seem overly complicated at first, especially if you're still getting used to handling your page's backgroun88 code. You may want to stick with At Insertion Point until you're feeling more comfortable.

What's Up with ID Selectors?

Dreamweaver offers two types of CSS styles to help control your layouts: Class styles, which we discuss in Chapter 8, and a new type of style, called an ID Selector. Both offer unique advantages.

With Class styles, you can control multiple layers or div tags in your layout. So if you want all layers and div tags on your page to take on certain characteristicsmaybe you want to control their Visibility or Overflow settings, for examplethen controlling them with Class styles would be the way to go. Think of Class styles as having global control over your layout.

ID Selectors are a means of assigning unique identifiers to layers and div tags, allowing you to control them individually, independent of other layers or div tags in your layout. When you name a layer (creating what Dreamweaver calls a layer ID), you're actually using an ID Selector. . Each layer or div tag, then, has its own ID Selector (which always begins with a # sign), which cannot be assigned to any other layer or div tag on your page. How are ID Selectors useful? Well, each layer or div tag in your layout can have a unique position or size, which can then be controlled through its ID Selector.

If you want maximum control over your layout, you can apply both a Class style and an ID Selector to a single layer or div tag. For example, the Class style could control the layer's or div tag's global properties, while the ID Selector controls its local properties. Best of all, both Class styles and ID Selectors can be used in an embedded or external style sheet, giving you total control over your site.

From the Class pull-down menu, select the CSS style that you just created; then click OK.

You can also specify a layer ID for your div tag from the ID pull-down menu, if the Layer ID is not already being used by another layer. If you specify both an ID and a CSS style, then your div tag will be controlled by both. You can also click the New CSS Style button to create a new style or layer ID.

When you click OK, Dreamweaver inserts a div tag on your page, which appears as a dotted frame with some sample text in it.

Don't forget that you can click Apply in the CSS Rule Definition dialog box to preview the effects of your settings.

Now you're ready to begin manipulating your div tag.

In the CSS Styles panel, double-click the new CSS style that you created for your div tag.

10.

In the CSS Rule Definition dialog box, open the Positioning category.

11.

In the Positioning category, choose an option from the Type pull-down menu.

The Type pull-down menu determines the behavior of your div tag onscreen.

Absolute: Converts your div tag to a Dreamweaver layer. This means that the position is then determined by the values in the Placement fields in relation to the top-left corner of your page, as described earlier in this chapter.

Fixed: Locks the div tag on the page, so that when the visitor scrolls on the page, the div tag remains in its current position. Fixed positioning is helpful when you want an objectfor instance, a logoto appear in the same position on every page, even if the page is scrolled.

[View full size image]

Relative: Positions the div tag in relation to where it was inserted on your page, rather than in relation to the top-left corner of your page (as with Dreamweaver's layers). For example, you might use Relative if you want a div tag to appear within a table or within a paragraph of text. Using Dreamweaver's behaviors, you can then control the appearance of the div tag so that it appears as a pop-up message on your page.

Static: Places the div tag on your page where you inserted it, just like Relative, but tells Dreamweaver to ignore any values inserted in the Placement fields in the Positioning category. This means that your div tag will appear exactly where it was first inserted.

12.

Set any other options in the Positioning categoryor in any other categories in the dialog box. When you're done, click OK.

Now that your div tag is placed on your page, you can begin inserting content into it, just as you did with layers.

The Truth About Dreamweaver Layers

There's layers, and then there's div tagswhat the heck is going on? You've been working with layers long enoughyou're ready for the truth. What Dreamweaver calls "layers" are actually div tags. You've been working with div tags for the entire chapter, whether you were aware of it or not. It may be hard to accept, but it's the truth. Should we hug now?

So why does Dreamweaver provide two separate commands if they're the same thing? That's a good question. Personally, I think they could be combined into one. The term layer harkens back to an obsolet89 tag that Netscape created, which allowed content to float over other objects. Back in the day, Netscape went ahead with a lot of tags without waiting for consent from the web community. Netscape's <layer> tag never really hit the big timeit was replaced with the then up-and-comer CSS. Yet Dreamweaver adopted the name to describe floating page elements. Really though, this just confuses the subject of div tags. Many new designers aren't sure of the differences among div tags, layers, layout blocks, and content blocks. The fact is, they're all the sameand all can be controlled by CSS, either by a Class style or an ID selector, or both.

Other than how they're inserted onto your page, the only difference between div tags and layers is their positioning. Dreamweaver layers are div tags with position set to Absolute, whereas the Insert > Layout Objects > Div Tag command uses Fixed, Relative, or Static positioning. This is why in "Formatting Layers with CSS Styles" I said not to change your layer's positioning type: Doing so would convert your layer to a div tag.

So that's what's really going on in Dreamweaver with layers and div tags. Now that you've received this sensitive information, this book will self-destruct in five seconds.

Just the Gist

Getting Started with Layers

Layers are containers that you can place on your page to hold content.

Dreamweaver's CSS layers make maintaining and updating a web site very easy.

To insert a layer, use the Draw Layer button in the Layout category of Dreamweaver's Insert bar.

Select a layer by clicking its selection handle; then use the Property Inspector to set any options you want.

Formatting Layers with CSS Styles

When you draw layers in Dreamweaver, the CSS Styles panel keeps track of the layer IDs. Double-click a layer ID in the panel to set properties for that layer.

Exporting all your embedded styles to an external style sheet allows you to control the layout of your entire site from a single file.

To attach an external style sheet to a page, click the Attach Style Sheet button at the bottom of the CSS Styles panel.

Inserting Content into Layers

Add content to your layer just as you add content directly on your page.

Use the CSS Rule Definition dialog box to set options to control the behavior of content that resides in a layer.

Inserting Div Tags

Div tags are identical to layers except for their positioning type.

Before inserting a div tag, you may want to create a CSS style that will control it.

To insert a div tag, click in your page's background code; then choose Insert > Layout Objects > Div Tag.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی