Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
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.
please wait ...
Watch the Online Video Course 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
Subject:
Web
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

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now Already a member? Log in

* Estimated file size

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

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.