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.
Slowly but surely, the advantages print designers held over the lowly web designer are being eliminated. The ability to control the transparency of type is one such feature. Now, almost all modern browsers support additional color specification as well as the traditional hexadecimal color values. One such spec is RGBA where the A stands for alpha-transparency. Let's take a look. So I have opened here the file semi_ chateau.htm from Chapter 4 > 04_03 folder, and as you can see here, I have white type right in the center here, and this is an h1 heading in my wrapper.
I'll go ahead and turn on Live View here, so that you can see it represented fully. So now, we can go in to where the color is specified, and actually change that to an RGBA value. So instead of #fff, we'll type-in rgba, open parentheses, and then each of the values for each of the color channels separated by commas. So the equivalent to the hexadecimal f is 255.
So it will be 255,255,255, one more comma and now you put-in the alpha-transparency value that you want. The fully opaque value is 1. So you want to put-in a value between 0 and 1. In this case, let's just try it as half so 0.5, and then I'll close off the parentheses, and hit Return. I'll scroll back down. Now you can see pretty clearly how the alpha-transparency is having its effect.
You can clearly see the shadows of the other trees reflected in the type. That will work for either Dreamweaver CS5, or Dreamweaver CS5.5. If you are a Dreamweaver CS5.5 user, you can actually switch the Color Picker to always work with the RGBA notation. This is how you do it. Open up the Color Picker and then move over to the Options button, and then scroll down past all the palettes to the new entry of color format. And again, this is only in Dreamweaver CS5.5 and up, so you'll see all the various formats available.
The default one is Three-digit Hex. But you can also choose from any of the others listed, including RGBA. So let's select that, and now, if I go over and decide to choose one of the values from the Color Picker, you can see that the alpha-transparency is set to 1. However, I can make another choice here of a different color. Let's sample just the sky up here. Now, you can see that the color has changed to a shade of blue, and Dreamweaver remembers the alpha-transparency value that I entered in before at 0.5.
So I still have my shadows showing up there. Of course, you can vary this. Let's bring it down even lower, and I'll make it 0.25, and we'll scroll down and now you can see it is very faded, but you can really see how the transparency takes place. You'll be happy to hear that browser support for RGBA is pretty robust. It's supported in Firefox and Safari 3 and higher, Opera 10 and up, and IE 9. The capability to control transparency once again extends the range of what's possible with type on the web.
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.