Current location - Recipe Complete Network - Complete cookbook - Dreamweaver uses Div tags
Dreamweaver uses Div tags
I. Overview of Div tags

The Div(division) element defines a region in the document. Div elements include various page contents, such as text, tables, forms, images, plug-ins and so on. Even div elements can be contained in div elements.

If you want a div tag to display a specific effect, or to display HTML content in a certain location, you need to define a CSS style for the div tag.

The method of using div tag is:

HTML content /div

If you use div tags alone without any CSS styles, the effect is the same as using p tags.

Second, insert the div tag.

1. Place the mouse where you want to insert the Div tag, then click the Insert menu, select the Layout Object command, and select the div tag item in the pop-up submenu.

Alternatively, select a layout item in the Insert panel, and then click the Insert Div tag icon, as shown in the following figure:

2. Click the icon to open the Insert Div Tag dialog box, as shown in the following figure:

3. In the Insert Div Tag dialog box, you can do the following:

Insert: at the insertion point-insert the div tag where the cursor is located; After the opening tag-insert a div tag after the body tag; Before the closing tag-Insert a div tag before the closing tag of /body.

Category: Select a category. Please read the CSS stylesheet tutorial: Class Selector.

ID: select an ID. Please read the CSS stylesheet tutorial: id Selector.

New CSS Rule button: Click this button to open the New CSS Rule dialog box. Please read the usage of CSS style sheets in Adobe Dreamweaver CS4.

Tip: Using the "new CSS rule", you can add the class and ID of the div tag.

4. After setting the project in the dialog box, or without setting the project, click OK to insert the div tag into the document. As shown in the figure below:

5. Click the div tag border in the Design view of the document, and then select the div tag, as shown in the following figure:

6. You can open the div tag property panel, as shown in the following figure:

Partition ID: select an ID. Please read the CSS stylesheet tutorial: id Selector.

Category: Select a category. Please read the CSS stylesheet tutorial: Class Selector.

CSS panel buttons: You can create new CSS rules or add additional style sheets in the pop-up window.

Third, enter the content in the div tag.

Click the left mouse button in the border of the label and position the cursor in the border to enter the content.

Fourth, delete the div tag.

Select the div tag in the Settings view (2.5 selective method) and press the Delete key to delete it.

Verb (abbreviation for verb) div tag nesting

Click the left mouse button and place the cursor inside the div tag to continue inserting the div tag.

Sixth, Div+CSS

DIV+CSS is one of the commonly used terms in website standards, in order to distinguish it from table positioning in HTML pages. In XHTML website design standards, DIV+CSS is mainly used to locate the content of web pages, rather than using table positioning.