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.
Another way to differentiate selected text, is through the judicious use of letter and word spacing in CSS. While not as finely tuned as the kerning controls on publishing software like Adobe InDesign, the letter spacing and word spacing properties allow you to manipulate the amount of space between letters in a word and the words in a phrase or sentence. As you'll see, the two options can be combined to give your headings a very nice flair. So here we have the tours.htm file from the Chapter 5 > 05_05 folder and I'm in Live view.
I'm going to scroll down to where my tour descriptions are, so we can modify those headings again, and I put my cursor into the h2 so that we can see that selected over in the CSS Styles panel. Now I'll go into Edit Rule and the first thing I'm going to do is uppercase all the letters in the h2 tag and we'll do that by going to Text-transform > uppercase. I find that letter spacing actually works quite well when you've got a completely uppercased phrase.
So now we switch to the Block category where you'll see Word-spacing and Letter-spacing. Let's go into Letter- spacing and add a 0.5 em value. Now I'm going to go ahead and click OK, and because we're in Live view you can see that instantly take effect. Now one of the issues that you might encounter when you're starting to work with different letter spacing is sometimes if you expand it so much, it can be a little difficult to see the difference between the letters and the words. So in that case you want to bump up the word-spacing just a bit.
This time let's just add that property directly right in the CSS Styles Property pane. So I've clicked Add Property and now I'm going to type in word-spacing and we'll make this 0.5 ems. So I'll type in .5, hit Tab and then type in em and hit Return or Enter. So then you can see the two words; the second word has moved over to the right just a little bit it. You don't want to use too high a value for this, because you want to keep the words close enough together so that they can quickly be read, but adding a little bit of spacing works quite well.
While you can use any measurement unit to set the word or letter-spacing values I've found that ems are the most reliable.
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.