Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
When you'd like your heading to really stand out, one nice option is to use a small-caps font like Copperplate. As you can see, with a small-caps font, all the lowercase letters are smaller versions of the uppercase ones. Copperplate and other small-caps fonts are great for print, but are not common enough across computer platforms to be considered web-safe. So unless you use a licensed web font, there is no way to get small-caps on your web site, unless you use the CSS property Font-variant.
Let's put it to work. So back in Dreamweaver, I have the tours.htm file from the Chapter 5 > 05_03 folder open. I'm in Design View. Let's go down to the Tour Descriptions and select the h2 tag that we see here. You'll see it display in the CSS Styles, because I have the Current mode on. Now, let's choose Edit Rule, and make sure that you're in the Type category.
Then take a look at the Font-variant property. If you bring down the list, you'll see that besides normal, the other option is small-caps. So if we choose that, now I just want to show you something. If I go ahead and click Apply, Dreamweaver will uppercase. Now that's not exactly what we're looking for, but remember, we're in Design View. To see the actual result, you'll need to go into Live View or preview it in a browser. So let's go ahead and click OK and then enter into Live View. Now when I scroll down, I can see that my Tour Descriptions all have the small-caps display, even though I'm not using a small-caps font like Copperplate.
I found that the Font-variant property with the small-caps value is a really quick way to add a distinctive touch of class to any heading or string of targeted text.
There are currently no FAQs about Typography with CSS in Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.