Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Dreamweaver CS6
Watching:

Adding rich typography


From:

Creating a First Web Site with Dreamweaver CS6

with Paul Trani

Video: Adding rich typography

CSS3 and HTML5 really give you a lot of control over a lot of your content, including type. And that's what I want to do, I want to add even more custom control over--n in fact, this line right here. I've already added a nice drop shadow to it which I like, but really I want to go beyond this, maybe I want to get rid of the red, and really I want to add a custom font right here, okay, for this Intellectually elegant, because quite frankly, you can't say Intellectually elegant and not have a fancy font. Well, in the past that used to have to be an image, but now I can use a web font for those two words. All right! So, the first thing I'm going to do is change the color.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a First Web Site with Dreamweaver CS6
2h 48m Beginner Aug 30, 2012

Viewers: in countries Watching now:

Join author Paul Trani as he shows how to create a web site step by step with Adobe Dreamweaver CS6, one of the industry's leading web authoring tools. But not just any web site. A responsive HTML5 web site that works across multiple browsers and devices, complete with rich imagery and text, a robust portfolio, video content, and even a contact form. This course covers how to use web standards such as HTML5 for structure and Cascading Style Sheets (CSS) to control colors, fonts, navigation, and more. The course also demonstrates how to test across multiple browsers and devices and upload your new site to the web.

Topics include:
  • Understanding basic web principles
  • Adding content to a web page
  • Linking to web sites and email addresses
  • Styling content with CSS
  • Creating a layout that fits multiple browsers and devices
  • Building an HTML5 layout
  • Inserting images and video
  • Adding a menu bar
  • Creating a contact form
  • Integrating a Twitter feed
  • Uploading and testing a web site
Subjects:
Web Web Design
Software:
Dreamweaver
Author:
Paul Trani

Adding rich typography

CSS3 and HTML5 really give you a lot of control over a lot of your content, including type. And that's what I want to do, I want to add even more custom control over--n in fact, this line right here. I've already added a nice drop shadow to it which I like, but really I want to go beyond this, maybe I want to get rid of the red, and really I want to add a custom font right here, okay, for this Intellectually elegant, because quite frankly, you can't say Intellectually elegant and not have a fancy font. Well, in the past that used to have to be an image, but now I can use a web font for those two words. All right! So, the first thing I'm going to do is change the color.

So, it happens to be my h1. I can change that maybe to white. Here we go! And now for these words, I want to create a new style. So, using the CSS Styles panel, I'll go down, clear it on here into the bottom, and I create a new CSS Rule. And if I take the various selector types, notice how there's like an ID. There happens to be an ID called logo, so I've created that earlier.

There happens to be tags as well which include the h1, but really what I want is I want a class, and a class can apply to any HTML element. Just like a lot of people can belong to a class, well, you can have many elements on a page that have this class, can have this fancy font that I'm going to implement. In fact, let's give it a name of fancy. All right! With that added, that name, I can select OK, and now I can create a CSS rule definition for fancy. All right! In fact, I can take a look at that font family, and before I do that, notice that it created that right over here, here's my class.

But let's take a look at the fonts, pretty standard fonts right here. I'm not impressed. As a designer, I'd want more control. Well, right down here, I can edit the font list. That sounds like a good idea. I can add these fonts which are available on my system, but they are not going to be available on other people's systems. So, I'm not going to worry about those. I need to add a web font, okay? Web font is going to be available to everybody. So, I'm selecting web fonts, and here I don't have any added yet, but I'm going to add one now by selecting Add Font.

And here, since there are different web browsers, I actually need different types. So, I need to add a web font. In fact, I need to add multiple web fonts for various different browsers. Well, more often than not, you're going to have a TrueType font on your machine, and there are actually services available that will take your TrueType font and will make these other different versions. You can go to fontsquirrel.com. There happens to be a font-face generator that will make these additional file types, which is what I've done.

Now if you do have access to the files for this course, what you can do is you can go into your Assets folder, into your Fonts folder. You'll notice this Monsieur La Doulaise-- I hope I'm pronouncing that correctly. But there's that font, including the other fonts that I've used Font Squirrel to convert them to these different types. So selecting the EOT font, selecting Open, it recognizes the other fonts, we're good to go. In fact, I just need to make sure I've properly licensed the above font for website use.

Another service is actually Google's web fonts as well. But this is where this font came from. So, selecting OK, selecting Done, selecting OK, yes, we have to go through all those steps, but now I can select that particular font. Right down here is where it's listed, selecting it right there, and I could click Apply, but I don't have this defined as my fancy class. So, I'm going to select OK.

Now, for this text right here, I'll turn off Live View, but with it selected, I can go to my CSS. And for that CSS, I can apply a new class. Right down here is where it's listed. Okay, so for that part, I can select fancy. Oh! It looks like it changed, but it's not quite the right font. Well, it actually is.

I'll just save my page, and I'll click on Live View, and you can see that it is using that particular font. It looks great! Notice how it added this style sheet CSS. I'm not going to worry about that, but right down here, here's my fancy class, and there it is. It looks pretty good but could be larger. So, my next step is just double- clicking on it and then changing the font size. So, changing the font size to let's try 36. It could actually be larger.

Let's go to about 48, clicking Apply, and you can see how that looks. Looks pretty good, now we'll go a touch larger to 52 just like that. So that looks pretty good. The last thing I'm going to do in this case is go back to my Design View, turning off Live View, and then just moving it up. So, the position from the top, well, I can take that to say 120 just to see how that looks, clicking on Live View. Looks pretty good! One last tweak for that item. Let's take that to 100. All right! Clicking on Live View, that looks good! So, that's how you can implement a web font.

If you do want to see all your web fonts, you can go to Modify > Web Fonts, and that's where you can add your various web fonts and make them available. It will appear in that dropdown list. So, that's adding web fonts, customizing your content, especially your Type content, making it much more flexible and honestly a lot more fun as a designer. So, take advantage of using web fonts in your various designs.

Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS6.


Expand all | Collapse all
Please wait...
Q: Where do I learn more about how to make a website?
A: Discover more on this topic by visiting how to make a website on lynda.com.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS6.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.