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!

Creating Media Queries

  • Open create-media-query.html
  • We have a page that we will use to add 3 different style sheets for 3 different screen sizes to give you a taste of using media queries
  • Completely covering everything in this design and the media queries is beyond the scope of this class, but I wanted to have a working example for you so you can get an idea of what a media query is
  • We have 3 different style sheets available for this page
  • Each of these is controlling some of the page layout, the phone & tablet versions only kick in when the screen size is appropriate
  • Go to the Options menu in the CSS styles panel
  • What you can do is use the original stylesheet as the desktop width style sheet for the page
  • Then add styles within the other versions as needed in order to modify content at that screen size
  • The standard rule now is to design for mobile first, then adjust for tablet & desktop sizes but you may find that difficult to do if you are new to this concept
  • The easiest way to start working with media queries is to design for the desktop, and then either create blank stylesheets and add/modify the desktop version for phone or tablet as needed
  • I would suggest you begin to work with this feature by duplicating the desktop version, creating a tablet & phone version exactly like the desktop version, then modify the existing styles as needed
  • That will help familiarize you with this concept, especially if you are not real familiar with CSS
  • In order to fully cover this topic, we need a separate class, but you have example files within this file to use, and can play with these files as you like to become a bit familiar

Creating Media Queries

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
  • Creating Media Queries 0:58
    • Media Queries Dialog Box
    • Default Presets
    • Select CSS File
  • Preview in Browser 7:14
  • Summary 9:47

Transcription: Creating Media Queries

We are now going to take a look at how to work with media queries within Dreamweaver.0000

What I am going to do is: we are going to create a media query for a web page, and I am going to show you the built-in media query feature within Dreamweaver; this is a fairly new feature within the program.0007

I have a page called create-media-query open, and this is a page in your Files panel; it is basically the media-query page, stripped of all of its media query information--so, you can check out that page, as well.0022

But up in our files, I have the create-media-query.html file available for you; in case you don't have these files, you will want to download them from the Exercise Files tab underneath the video.0041

Let's get started creating a media query for this page.0058

As you can see, right now there are no styles defined for this particular page; that is why we are going to do them together.0063

How do we get to the Media Queries area?--there are a couple of different methods for doing so.0072

One of them is by going to the Modify menu: and if you scroll down here, you can see, Media Queries is listed here; but I am going to take you over to the CSS Styles panel.0079

I think it is a little bit easier to remember that, because we go to the CSS Styles panel to create our styles, and a media query is a style feature, so it makes sense.0093

I am going to go to the CSS Styles tab and go straight over from there to click the Options button within that Styles panel; and I'll go ahead and click on that, and right down here is the Media Queries option.0105

Now, both locations take you to the same dialog box; and that is the piece I want to walk you through.0122

First of all, we need to figure out where we are going to put (or I should say, where Dreamweaver is going to put--since we don't need to write it)--where it is going to put the information to tell the browser which CSS file to use, based on the screen size.0130

The idea is: as the page goes to load, the browser is going to check the screen width; based on that screen width, it's going to choose from one of three CSS files.0147

Now, I can certainly create more than three, but we are just going to keep it simple and create three of them: a desktop, a tablet, and a phone.0160

Let's check it out: I need to tell Dreamweaver where to place these rules, and I am going to choose this document; that allows you, on this page, to know that this is all the media query information Dreamweaver created, in case you want to look it over.0170

Down in the next area, I want to make sure that this is checked; you can see, Dreamweaver checked it for us.0189

If this is unchecked, you can have some strange things happen, because browsers don't always understand the full width of a browser window.0197

And what that check box does is try and force the browser to choose the correct option.0207

So, just make sure you always keep that checked.0214

The next section is where we build our information; and I could do it manually (hitting the + sign, adding them, choosing the screen size, and everything else), but let's do it the easy way.0218

I am going to click Default Presets: when I click that button, you can see, a phone, a tablet, and a desktop version pops in here; I didn't have to type out the description.0231

Here is the information with regards to the screen size.0244

The idea is: if it's a phone device (that means if it is up to and including 320 pixels wide--so it's fairly narrow), then what is the CSS file we are going to use for that?0250

And what I am going to do down here--I am not going to set a minimum width; I am going to keep it as it is, so anything under 320 pixels will get this style sheet.0265

And down here, I am going to say, "Use an existing file"; now, if you were on your own and had a single CSS file, what you could do is let Dreamweaver create a new one for you.0278

Make sure you change this if you already have a file set up; and I have one set up for you.0292

I am going to click the folder; now, this is the phone version, so I am going to scroll down to styles-media-phone and choose that one.0298

You can see, my phone version was plugged in for the phone; I am going to do the same thing--I'll click on the tablet version and go down here.0309

I don't want a new file--I want an existing one; I'll click the folder; and we'll go ahead and choose the tablet version.0320

There is the tablet version; I'll click OK; and the last one is my desktop version.0329

I don't want a new file there either, so I am going to go out and choose the desktop version.0337

Now, notice how I have specified in the name desktop, phone, and tablet; it makes it much easier when you go out to do this if you have already created the style sheet.0345

Otherwise, you can let Dreamweaver create that new style sheet for you in this manner, and just plug in the desktop or just plug in the phone.0357

Now, there are two rules of thought to this: the new rule of thumb is: you should design for mobile first--start with the smallest device and work your way out from there.0368

But when you are first getting familiar with this process, I think that is a very difficult way to try and plan your design; so, you are usually best off starting with the desktop.0380

That way, you can get familiar with all of this; you can take your desktop version and change it based on the smaller size.0392

That rule of thumb has kind of shifted a little bit, but use whatever method you can--when you are new to media queries, it is a bit overwhelming, so I think starting at the desktop version and working down from there is much easier.0400

Once you have become familiar with the process, then you can start at the mobile and work your way up.0417

We have these all assigned here; so let's go ahead and click OK.0423

I am just using Dreamweaver's version; and look at the magic that happens.0429

Now, I am going to put this into the browser after I do a Save All; you can see, my three style sheets have been assigned; and also, take a look at the information in the CSS Styles panel for each CSS file.0435

You can see, these are all for screen; so I could add another print version, if I want; and it is all based on that screen size.0450

Let's test it out in the browser, and just make sure it looks OK.0460

I'll put this out into Chrome (just because it's first in the list), and let me start out here: you can see, that looks great on the desktop; I'll move it in--there is my tablet size (you can see it popped): my navigation goes down at the bottom--it might not be exactly where I want it to be.0465

And let me take a look, as I get smaller and smaller--there is my phone version; and you can see, I get this kind of spooky look to my lettering; so there are some interesting things happening on my lettering.0488

I also lost a couple of things here: I just don't have that orange background, for some reason, in my phone version.0503

But the rest of the page looks OK; I do have a little bit of white space down here...but I don't have my content on the page quite yet--this isn't a completed page--so I won't worry too much.0512

But notice, my actual font is default font here; and let me go out...as soon as it pops to the tablet version, it looks fine; so I clearly have something going on on my phone.css file.0524

It is not pulling in my header tags and my paragraph information; and for some reason, this upper area has gotten very strange; so I'll have to take a look at that.0542

Now, if I keep pulling it in...there, I finally pop in from my tablet version into my phone version.0555

So, this needs a few modifications; but you can see, my media queries are working correctly--it is pulling in the proper CSS file; now what I need to do is go out and take this phone version and modify a couple of things within it.0565

We will take a look at that in another lesson.0584

But what we have right now is: we have our media queries all set for our desktop, our tablet, and our phone versions of this page.0587

And that is how you create and work with media queries within Dreamweaver.0597