Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Managing media queries

From: Dreamweaver CS5.5 New Features

Video: Managing media queries

Media queries are without a doubt one of the most important CSS developments in recent memory. The media attribute has long allowed us to target specific devices based on device types, such as print screen or projection; media queries allow us to expand this syntax to allow us to target devices based on things like screen resolution and orientation. This gives us a quick and easy way to change the presentation of content based on the device's screen size. Dreamweaver CS5.5 gives us a number of ways to create and manage media queries for our sites.

Managing media queries

Media queries are without a doubt one of the most important CSS developments in recent memory. The media attribute has long allowed us to target specific devices based on device types, such as print screen or projection; media queries allow us to expand this syntax to allow us to target devices based on things like screen resolution and orientation. This gives us a quick and easy way to change the presentation of content based on the device's screen size. Dreamweaver CS5.5 gives us a number of ways to create and manage media queries for our sites.

Let's start by creating a media query in Dreamweaver and then discussing the options available for managing them. So I have the index.htm file from the 03_03 folder open up, and I am going to start by showing you a couple of different places where you can manage your media queries. Now, one of the first places is, if you go up to the menu and you go to Modify, right there you will see media queries. It's also available in the Insert menu. So it's available in Insert and Modify; both of those would do the exact same thing. Now, if I go over to my CSS Styles panel menu, I will find Media Queries right there.

It's also available as a contextual menu within the CSS Styles panel, so if I right-click a rule or do something like that, I usually have that available to me as well right there. Now, probably the easiest place to access them is right up here in the Document toolbar using the Multiscreen Preview panel dropdown menu. So there is a little menu right beside that. If I grab that and go all the way down to the bottom, and there is Media Queries there as well. It really doesn't matter which method you use to get the dialog box; just choosing media queries is going to bring up the same exact dialog box. So whichever way you're most control with or wherever you're currently working at, that's probably the one that you'd want to use.

So this is a much more involved dialog box than anything we've ever had before in Dreamweaver in terms of dealing with media queries. The Multiscreen panel has allowed us to create media queries in Dreamweaver since the HTML5 pack was installed, but this is a much more robust way of working with them. The first thing that we're asked is whether we want a site-wide media query file or whether we want to work in this document. For this example we're going to do this document, but I want to take just a moment to explain what a site-wide media query might be. What this is going to do for you is it's going to allow you to choose an external style sheet.

In this case, it might be your main.css. You might have a style sheet set aside specifically for this. And then it's going to create an @import rule that's going to import your media styles for say tablets or mobile style sheets, those types of things. It uses an @media declaration to filter those styles so that they're only occurring based upon the screen resolution. So it's a nice way of sort of targeting your entire site. A lot of times it comes down to personal choice. Would you rather go ahead and have your media queries defined individually on each page, or would you rather do it externally in an external style sheet site-wide? Basically, it boils down to how you want to implement them.

So in this case, we're just going to test it with this document. Now, just below that we have a little check box that says, "Force devices to report actual width." What this is going to do is it's going to insert a meta tag into our document that is essentially is going to force any device that accesses your content to report its actual width instead of reporting a false width. Now, why would you need to do that? Well, there are a lot of devices out there that actually want to appear like a larger screen. They want to display the entire page. So rather than saying, "Yeah, sure, I am only 480 pixels wide," they are going to say, "Well, my actual resolution is 1280." So you want to prevent that from happening and this particular check box is a nice way of doing that. Okay.

So from here, we can go in and start creating media queries for our pages. One of the things that we can do is we can take a look at the Default Presets. And if you click that button, it's going to go ahead and give you three different presets: one for Phone, one for Tablet, and one for Desktop--and you can see what the actual syntax of the media query would be for each one of these. If you've never used media queries before, this might be a really good place for you to start. You can certainly learn the syntax this way, or get a feel for exactly how this is supposed to work. Now, I want to go ahead and create custom media queries, so I am going to use the Minus symbol to go ahead and get rid of all three of those.

So the first thing I am going to do is just create a brand-new media query by clicking on the little Plus symbol right there. It wants me to name this, so I am going to go ahead and name this 'Tablet' because it's going to be used for any tablets that we might be working with. And then I can specify a minimum width and I can specify a maximum width. You don't have to do both; you can just do one or the other. In this case I want my minimum width to be 481 pixels; I want my maximum width to be 768. As soon as I do that, I can see the syntax being recorded up here, so only screen and min-width 481 pixels, max-width 768.

Now I get to choose a CSS File. Now, if you don't already have an existing tablet style sheet, you could go ahead and create one at this stage as well. Notice that I have a dropdown menu that says use existing file or create a new one. In this case, we already do have an existing style sheet for this, but if you're at the start of a project, this is a nice way of going ahead and creating a media query and then generating a style sheet based off of that. So I am going to tell it to use an existing file. I am going to browse out. I will go in the 03_03 folder, _css, and I am going to find tablet.css. It's right there.

I will go ahead and click OK, and then I will click OK. Now, just to verify what this has done for us, I am going to go ahead and switch over to Code view and make sure I am looking at the Source Code. When I do that, if I scroll up towards the top, one of the first things that I'll see is I'll see the meta tag. You can see right here on line number 8, there is my meta tag. It's "viewport" content="width=device-width". So it's forcing device width from our devices. It wants that reported. Now, if I look a little further down on line 15, I can see the media query that's been created for me.

Once again, it's just a regular link tag, but in this case the media declaration, instead of being something like screen and projection, is passing my actual media query. Let's see if it actually worked. So I am going to go ahead and save this and preview this in my browser. As I do this, I notice that I am just getting my default styles at the browser's full size, but if I start to reduce the screen size, at a certain point I am getting my tablet style, so no menu here and a different layout for the homepage using the tablet media query. Cool! So I am going to close my browser and I want to go back into Dreamweaver.

Now, let's say you were working for a little while, then you realized that you also wanted to create a style sheet for your mobile devices. Well, one of the nice things about this dialog box is that you can go back and access it at any time, make changes to existing media queries, or even create new ones. So I am going to go right back to the pulldown menu, choose Media Queries, and it pulls it up and reports back. And I just want to come in and create a brand-new one. And in this case, I am going to create one for my mobile devices, and my minimum width is going to be 0; I will let it get as small as its wants to.

And for my maximum width, I'll go ahead and go with 480 pixels. That makes sense because my tablet's minimum screen size is 481 pixels. I do want to use an existing CSS file, so in this case I am going to Browse. This time I will go to the mobile style sheet, go ahead and click OK, and I will click OK again. Now, it's okay if you want to manipulate these by hand as well, so if I go into my Source Code, I can now see both of those style sheets. Well, what if I wanted to declare all media instead of just screen? So one of the things that I can do is change this media declaration.

I am going to change 'only screen' to 'all'. I will do the same thing here. I will choose 'only screen' and I will do 'all'. Also, what if I wanted to change this viewport meta tag? Right now, I am forcing it to report device width, which is fine, but what if I also wanted to set an initial scale so that it wouldn't be zoomed up and the page would be scaled to 100%? Well, that's easy enough to do. So I am just going to go ahead and click right after the "width=device=width" but still inside the quotation marks there, and use a comma to separate out this list. And here I want to do initial-scale=1.0, so make sure that that's scaled to 100%.

I am going to go ahead and save that. Now, we've made changes to the media queries directly within the code. Now, are those changes going to be reflected when we open up that dialog box again? Well, if I go back to the dialog box, I can see that in the case of my media queries themselves, the change of syntax is reflected. Now, you're not able to access and change the syntax right here. You will have to actually go in the code. But I do notice one thing: the force devices to report actual width check box is turned off. So by going ahead and making that change to the meta tag, Dreamweaver no longer recognizes that and it's just turned that off.

It doesn't mean that it's not going to work now; it will still work just fine. But that Dreamweaver doesn't actually recognize that particular value being passed. So if you manipulate them by hand, be prepared to have this dialog box sometimes not report things as accurately as if you're letting this dialog box manage it. So I am going to go ahead and save the page, and once again, I am going to preview that in the browser. And now in addition to our tablet styles, if we go a little bit shorter, we start to get our mobile styles. Cool! Now, there is one more thing that I want to show you before we move on, and that is that when you're setting up your site initially, you have a place where you can declare the site-wide style sheet for your media queries.

Let me show you where and how to do that. I am going to go right over to the Files panel. I am going to find the name of the site that we're currently working with, and I am going to double-click that. It's just the fastest and the easiest way to bring up the Site Setup dialog box. Now, this box would come up when you initially create a site, and it's going to come up every single time you edit a site as well. I want to go to the Advanced Settings, and when I go to the Advanced Settings, I see that I have a new dialog box right here that says Site-Wide Media Query file. Really, if you're going to be doing site-wide media queries where the external style sheets like tablet and mobile are brought in using an import and wrapped in a media block, then you should go ahead and establish this now.

If you do that, every time you bring up the Media Query dialog box, it will go ahead and fill that in for you. So I am just going to go ahead and cancel out of that and save the file. Having the ability to create and manage your media queries directly in Dreamweaver using that dialog box gives you a really nice way to take control over the process. Dreamweaver also provides us with a nice way to preview how successful our media queries are with the Multiscreen Preview feature, which we're going to explore in our next movie.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12671 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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 Dreamweaver CS5.5 New Features.

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.