Join Joseph Lowery for an in-depth discussion in this video Working with the Property inspector's HTML tab, part of Typography with CSS in Dreamweaver.
When beginning to work with text on your web site, it's important to understand the difference between HTML and CSS and their respective functionality. In a nutshell, HTML provides the structure, while CSS, the presentation. This difference is clearly reflected in Dreamweaver's Property Inspector through two separate tabs. Let's take a look at the HTML side first. I have opened the mission.htm file from the Chapter 1 > 01_01 folder, and we're in Design View.
Take a look down at the Property Inspector. I now am on the HTML tab, and there are a number of HTML-related things that we can do. So let's start by choosing the h2 tag that is immediately under Our Mission: Who We Are. And you'll notice that the Format picks up that, it's a Heading 2, and we can change that to a Heading 3, just by opening the list and making the selection. Now we might want to also change some of the text. So let's choose passionate here and let's make that Bold.
Now when you click on B for Bold, it actually puts in a strong tag. Now the same thing is also true with the I, or what appears to be the italic tag. So if I go ahead and select unique, and then click Italic, notice that the <em> tag, short for emphasis, is added. The key advantage in using strong and em, rather than Bold and Italic, is that it opens the door to allow CSS designers to decide what an emphasized tag should look like.
It doesn't necessarily have to be italicized. Also note what's not on the Property Inspector. You don't have any way for changing text alignment, text color, the size, or the typeface. All of those properties will be found on the CSS tab. Every option on the HTML tab of the Property Inspector is devoted to page structure. Now that you've see what it can do, you'll be better prepared to apply its features appropriately.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector