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.
CSS, short for Cascading Style Sheets is your medium for controlling the presentation of your web text as well as other elements. The Property Inspector's CSS tab is one of Dreamweaver's major interfaces for managing CSS and text. The CSS tab is only available when text is selected. So I have opened here the mission.htm file from the Chapter 1 > 01_02 folder, and here we are in Design View, and notice, if you take a look at the Property Inspector, there are two tabs on the left; we have HTML and CSS.
So I'm going to click on CSS now, and here you see a completely different interface from the HTML tab. This tab of the Property Inspector works by identifying Targeted Rules. So notice because I don't have any selection, the Targeted Rule goes to the body. But if I put my cursor in the h1, then the rule for that tag, which in this case is the h1 inside of the mainContent div, is shown. Now if I expand the Targeted Rule list, you'll see the Cascade of all the rules that apply right to that h1.
So you can quickly get a sense of what's impacting that particular selection. If you're just starting out with CSS, the Targeted Rule feature actually is really great for helping you identify what is applying to what is applying to what, and learn more about how CSS and page elements interact. So if I click on the Our goals and how we'll reach them statement, you'll see that the Targeted Rule just lists all of the headings and the paragraph tag. And if I look down to my tag selector here, I can see that it is an h3. This is telling me that there's not something that is specifically targeting the h3 tag, but it is part of a larger group.
So in addition to identifying applied tags, you can also create new rules. Now we'll cover this later in Chapter 1, in the Defining and Changing Type with a CSS Rule Definition dialog. The other feature of the CSS tab is to quickly modify an existing rule. So let's go back to our h1 tag and make some changes. So here we can see that the font family is now Georgia, Times New Roman, et cetera. If I open up the list, I can then go down and let's change that to Trebuchet MS; I'll scroll down just a little bit more, so you can see it more clearly.
So this font family is Trebuchet MS, Arial, Helvetica, sans-serif. So I'll choose that. And notice that even though I didn't have the entire tag selected, all of the type in that tag was changed. Alright, let's change the Size a little bit, bump it up just a little bit, we'll make it 2.75, and I'll press Tab there to increase the size. And let's make another change that we can here; let's change the color. So right now it's just picking up the default color, so there's nothing specifically defined for it.
So I'll open up my Color Picker and I'm going to sample it right off the logo here so it ties into our design, and I'll pick this brown color that we see here behind California. And there you can see a pretty subtle shift from the black to the dark brown, and I think that looks pretty good. Now one last thing that we can do here is we can go ahead and change the alignment. So I'm going to align this Center within the containing div. Now we have something a little bit more distinctive than what we had before. Now you'll notice that we have as on the HTML tab for the Property Inspector: Bold and Italic icons.
However, when you click these icons, however when you click these icons it doesn't add in new tags like strong and em; instead, it writes in changes to the CSS rules. Let me switch over to Current mode here, so you can actually see this happening, and I'll make a little bit more room here. Now I'm going to go ahead and just apply this temporarily; we won't keep this style. But now that I'm back in the h1 tag, I'm going to go ahead and click on Italic, and you'll notice that the font-style italic was added.
And if we look at our tag selector, you'll notice that there is not surrounding tags as there was with the HTML tab. Okay, I'll undo that by deselecting the Italic, and if we take a look at the Property pane of the CSS STYLES, you'll notice that that style is now gone. Now among the other buttons that we find on the CSS panel, is the Edit Rule option; and we'll be covering that in the later video, Defining and Changing Type with a CSS Rule Definition dialog.
While many experienced Dreamweaver designers prefer to make their CSS changes in other ways, through other user interfaces, such as the CSS Definition Dialog box, or the CSS Properties panel, the CSS tab of the Property Inspector gives the savvy Dreamweaver user, direct control over the essential text properties.
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.