Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

CSS Media Types

  • We are going to take a look at CSS Media Types to set up a separate style sheet for our webpages specifically for printing
  • It is possible to control the output to a specific media device such as a printer, this is a part of the CSS2 spec so it has been available for a long time & is very well supported
  • The idea behind this concept is to make sure that web pages are designed for printing
  • We can create a separate style sheet to use when the document is printed and this is fairly simple, just add another style sheet to the page, adding the media of print to the code
  • When you attach a style sheet you can choose the media option for the device you want
  • Most websites use both a screen and print media type
  • We can even hide or move page content to be sure it fits onto the web page by setting specific CSS properties in the print and screen versions

CSS Media Types

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Preview in Browser 0:15
    • Print Preview
  • CSS Screen Style Sheet 2:58
  • Attach CSS Print Style Sheet 4:34
  • Preview in Browser 7:35
    • Print Preview
  • Delete CSS Print Style Sheet 9:07
  • Summary 9:58

Transcription: CSS Media Types

We are now going to talk about a concept called a media type.0000

Right now, I have my index file from my website files open in Dreamweaver, and I do have Live View turned on.0005

What I want to do is put this into Firefox, only because it is easy to get to the Print Preview area within Firefox.0015

I'll click on the globe and take this page out to Firefox to show you something.0024

Right now, what happened is (and this may happen to you also)--what I have is: I have accidentally opened up the CSS Style sheet; and because I had the style sheet (let me move this over a little bit)--notice, I had Styles Complete showing and highlighted here when I went to click the browser; and I am in Live View right now.0031

So, if you end up seeing a whole bunch of rules when you go to open your browser, don't panic: just double-check--it is probably the CSS file that may have gotten accidentally opened, just like this.0059

I'll just close it up; what I am going to do is move out of Live View; and then, I will go ahead and preview in Firefox.0073

We'll get this set up in Firefox, and I will show you our page.0084

Now, this is the homepage for Wanderlust Travel; it is just about complete--we just don't have the byline right here for our company within this file--at least, not right now.0088

But other than that, this page is in pretty good shape: here is my Travel News with my background gradient; notice, my slideshow is playing very nicely; and I have titles in my slideshow for the various images, if I hover over the image.0102

Otherwise, if I don't, it's just rotating images trying to entice people to book with us, showing us some exciting things that can occur when you travel.0119

If I go out to the Firefox Print command, however, and choose Print Preview, take a look at our page.0132

Now, the idea here is: we have only pulled out the text; the images--all those boxes are not showing...I don't have my black page background that is going to print for the user.0142

So, we have simply pulled out all of the text on this page.0155

Now, it is up to you if you want to determine whether or how you want to create this print version; but let me at least familiarize you with how to do it.0160

I'm going to close up this Print Preview and close up Firefox.0173

What was causing this particular page to look so different when we used the Print command?--well, right now, this particular style sheet (which is called styles-complete)--notice how it says "screen" (let me get off of that so you can see).0178

In parentheses, it says screen; I do have quite a few CSS files within your Files folder for different types of comments or lessons, and so, notice, this one is styles-complete.0197

And I know that because it's right here--Dreamweaver tells me that is the style sheet attached to this page.0215

So, if you need to open up a page and check the style sheet, this is one way to do it.0223

Now, what I have done is told the browser, "Only use this style sheet if this is being viewed on the screen."0229

If I am going to send this to a printer, it won't be viewed on the screen, so this style sheet is being completely ignored; so what you are actually seeing is all of the styles turned off on this page.0236

That basically gives me a white background with black text and blue hyperlinks, just like we looked at.0250

Let me show you how to work and create a separate one for print.0258

What I am going to do is: I have an exact duplicate of this CSS file, and it is named styles-complete-print; and I am going to attach that style sheet to this page.0263

So, I'll click Attach Style Sheet; I am going to browse out to that file in our site files; and where is our Styles?...this is different; let me go out to the correct folder; here we go; and we have styles-complete-print.0279

This is the one I am going to choose: now notice, it is telling me it is outside my root folder.0298

Now, it appears that I am in the wrong website, and this can also happen--that files drop down...if you end up rolling on your mouse, you can change to a different website.0307

When I see this message, what I am going to do is cancel out; I'm going to cancel this; I want to make sure I'm in the correct folder.0321

So now, I am going to go out; and I was in Wanderlust Travel; however, if I look at this page, this page that is open in Dreamweaver is not from Wanderlust Travel--it is from another website I have defined.0331

So, I'll close out of that one: what I am going to do is go to the proper website and re-open.0349

Here is my index file; I'll open this one up and check it out in Design, and you can see, there it is; and I'll open up the CSS Styles panel, close this up...you can see, I have the exact same thing on this file.0356

I'm going to hit the Attach Style Sheet; now, when I go out and browse, it should show it to me, and I shouldn't get that message; and you can see, it is showing right here.0373

I tend to find people do get a little bit confused (I am going to double-click this to pop it in) if you start creating multiple websites, and you get that message in Dreamweaver.0387

That is your indication to just cancel out of what you are doing and make sure you are in the correct website in your Files panel first.0401

Then, double-check your page, and make sure that page is also coming from that website within your Files panel.0411

OK, so here is my styles-complete-print and my media type; so, this media dropdown right here is where I can determine how I want that style sheet to occur.0419

In other words, what device do I want it to work in?0432

I am going to say "Media: print"; what that is going to do is: any time this is being printed, it is going to use that particular style sheet.0436

I'll click OK; now I have one for screen and one for print--these are exact duplicates of one another.0448

Let's put it back into Firefox; I'll save the page; and I'll do that same thing--preview and print mode, so to speak; we will do Print...in Firefox, it's Print, Print Preview.0456

Now, those of you on the Mac: this won't be quite so obvious if you are in your Firefox browser; you actually have to click another button in Firefox or Safari to get out to the Print Preview area, depending upon which Mac OS you are in.0471

But become familiar with where or how to print preview your web pages within your browsers.0488

Click on this one; and you can see, now I just don't have the background images--I have the basic page layout, sort of.0496

Now, this isn't exactly the greatest version, but notice: I do have a bit of a text shadow here, showing up from my screen version.0507

I think the other version was actually a better version, unless I really wanted to modify this one quite a bit.0518

Sometimes, you have to determine what you really want to do, in terms of setting it up for print; but do consider what your pages are going to look like when they are being printed--some people find that a very important piece of designing a website.0526

I'll close this one up; I actually prefer what my print version looked like before, so I can get rid of this print version; I'll select it and hit the trash can; that will get rid of that one, so I only have this one now attached.0544

If it is not on the screen, it is not going to use this one, and you can see, my print version picked up all of my text just fine.0563

That is how you can work with separate media type files for your CSS; you can simply create different ones for the different media types.0573

Screen and print are two of the most common that you can work with.0586

I'll save this page, and I'll do a Save All just to make sure everything is set back up on this homepage.0591

That is how you can work with media types, specifically the screen and print media types, within the CSS Styles panel in Dreamweaver.0598