In the Document window, place the insertion point
where you want the div tag to appear.
Last updated on
Sep 25, 2023
- Dreamweaver User Guide
- Introduction
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- CSS
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- Use JavaScript behaviors (general instructions)
- Apply built-in JavaScript behaviors
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
- Troubleshooting
Learn how to use div tags to center blocks of content, create column effects, create different areas of color, and more.
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.
Insert div tags
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.
-
-
Do one of the following:
Select Insert > HTML > Div.
In the HTML category of the Insert panel, click Div.
-
Set any of the following options:
Insert
Lets you select the location of the div tag and the tag name if it is not a new tag.
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.
Note:Dreamweaver alerts you if you enter the same ID as another tag in your document.
New CSS Rule
Opens the New CSS Rule dialog box.
-
Click OK.
The div tag appears as a box in your document with placeholder text. When you move the pointer over the edge of the box, Dreamweaver highlights it.
If the div tag is absolutely positioned, it becomes an AP element. (You can edit div tags that aren’t absolutely positioned.)
Edit div tags
After you insert a div tag, you can manipulate it or add content to it.
Note:
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.
-
Do one of the following to select the div tag:
- Click the border of the div tag.
Note:Look for the highlighting to see the border.
Click inside the div tag, and press Control+A (Windows) or Command+A (Macintosh) twice.
Click inside the div tag, then select the div tag from the tag selector at the bottom of the Document window.
-
Select Window > CSS Designer to open the CSS Designer panel if it is not already open.
Rules applied to the div tag appear in the panel.
-
Make edits as necessary.
Change the highlight color of div tags
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.
-
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
-
Select Highlighting from the category list on the left.
-
Make either of the following changes and click OK:
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.
Note:These options affect all objects, such as tables, that Dreamweaver highlights when you move the pointer over them.
CSS layout blocks
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
Note:
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 Outlines
Displays the outlines of all CSS layout blocks on the page.
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.
CSS Layout Box Model
Displays the box model (that is, padding and margins) of the selected CSS layout block.
View CSS layout blocks
You can enable or disable CSS layout block visual aids as necessary. To view all CSS layout blocks, select View > Design View Options > Visual Aids.
You can enable or disable CSS Layout Backgrounds, CSS Layout Box Model, and CSS Layout Outlines.
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online