Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
The interest in using Pixels for Font Size Measurement has increased at exactly the pace as the use of Internet Explorer6 has decreased. The inability to scale pixels with IE6 was a showstopper for many designers who switched to using Ems. Now the relative dearth of IE6 users has prompted web designers to take a second look at Pixels. Most notably for their ease-of-use and faithful reproduction across browsers. Let's do some work with Text and Pixels, starting with the index.html file, from Chapter 2 > 02_02 folder.
I'm here in live view, though we're going to be working primarily with the CSS Styles panel, and I have that set in Current mode. I'm going to go ahead and, first try and set the overall Text size. So to do that, I'm going to go the body tag, and choose that from the tag selector here. So over in the CSS Styles panel, you can see what properties are already defined, and I'll go ahead and choose the pencil icon so I can open up the CSS Rule Definition dialog box, and make some edits.
Let's change the Font-Size here to 14 pixels, and notice that pixels is the first option that we have here on the Measurement Unit list, and as for the Line-height, I'm going to double by 14, 28, and then click OK, and that gave us a more spaced out look for both of the main content on the left and the sidebar on the right. Let's differentiate the sidebar a little bit, by changing its Line-height and keeping the the same size.
So I'll put my cursor into the sidebar, and then over on the CSS Styles panel, choose the right side ID, because I'm just changing the Line-height, I'm going to go ahead and add that in as a property, line-height, and we'll make that 21; now you want to make sure that you press tab, and choose px, because the default for Line-height is to do a multiple.
So now I have a slightly different look for my sidebar. Naturally if you're following a previously designed comp, you'd pick up the pixel measurements right from there, but I find that when Designing on the fly, following a simple multiple for the Line -height value, like twice or one and a half times the font size, yields a clean and highly readable look.
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.