Na tej strani
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag is a tag that defines logical divisions within the content of a web page. You can use div tags to center blocks of content, create column effects, create different areas of color, and much more.
If you’re unfamiliar using div tags and Cascading Style Sheets (CSS) to create web pages, you can create a CSS layout based on one of the pre-designed layouts that come with Dreamweaver. If you’re uncomfortable working with CSS, but are familiar with using tables, you can also try using tables.
You can use div tags to create CSS layout blocks and position them in your document. This is useful if you have an existing CSS style sheet with positioning styles attached to your document. Dreamweaver enables you to quickly insert a div tag and apply existing styles to it.
-
Class
Displays the class style currently applied to the tag. If you attached a style sheet, classes defined in that style sheet appear in the list. Use this pop‑up menu to select the style you want to apply to the tag.
ID
Lets you change the name used to identify the div tag. If you attached a style sheet, IDs defined in that style sheet appear in the list. IDs for blocks that are already in your document are not listed.
Opomba:
Dreamweaver alerts you if you enter the same ID as another tag in your document.
Opomba:
Div tags that are absolutely positioned become AP elements.
When you assign borders to div tags, or when you have CSS Layout Outlines selected, they have visible borders. (CSS Layout Outlines is selected by default in the View > Visual Aids menu.) When you move the pointer over a div tag, Dreamweaver highlights the tag. You can change the highlight color or disable highlighting.
When you select a div tag, you can view and edit rules for it using the CSS Designer. You can also add content to the div tag by simply placing your insertion point inside the div tag, and then adding content just as you would add content to a page.
-
Opomba:
Look for the highlighting to see the border.
When you move the pointer over the edge of a div tag in Design view, Dreamweaver highlights the borders of the tag. You can enable or disable highlighting as necessary, or change the highlight color in the Preferences dialog box.
-
To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).
To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.
Opomba:
These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.
You can visualize CSS layout blocks while you work in Design view. A CSS layout block is an HTML page element that you can position anywhere on your page. More specifically, a CSS layout block is either a div tag without display:inline, or any other page element that includes the display:block, position:absolute, or position:relative CSS declarations. Following are a few examples of elements that are considered CSS layout blocks in Dreamweaver:
A div tag
An image with an absolute or relative position assigned to it
An a tag with the display:block style assigned to it
A paragraph with an absolute or relative position assigned to it
Opomba:
For purposes of visual rendering, CSS layout blocks do not include inline elements (that is, elements whose code falls within a line of text), or simple block elements like paragraphs.
Dreamweaver provides a number of visual aids for viewing CSS layout blocks. For example, you can enable outlines, backgrounds, and the box model for CSS layout blocks while you design. You can also view tooltips that display properties for a selected CSS layout block when you float the mouse pointer over the layout block.
The following list of CSS layout block visual aids describes what Dreamweaver renders as visible for each:
CSS Layout Backgrounds
Displays temporarily assigned background colors for individual CSS layout blocks, and hides any other background colors or images that normally appear on the page.
Whenever you enable the visual aid to view CSS layout block backgrounds, Dreamweaver automatically assigns each CSS layout block a distinct background color. (Dreamweaver selects the colors using an algorithmic process—there is no way for you to assign the colors yourself.) The assigned colors are visually distinctive, and are designed to help you differentiate between CSS layout blocks.