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 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 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.
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.