How to create the responsive mobile view using media queries in Dreamweaver

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, my name is Dan and in this tutorial we're gonna look  at creating the mobile version of our website. To do that, we need to understand a couple things. One is what responsive is  and one, uh, another one is what a media query is. 'cause up until now, we're  build building the desktop version. But if you look at my Photoshop mockup,  I've got this one on the right here. I've designed my desktop,  but I've also got what it looks like when  it falls down to mobile.

You can see it's a little bit different. Some images turn off these stack differently. These stack differently. Okay, so I need to do  that in Dreamweaver. Let's have a look at what our current site does. Alright, so let's see a working version of it.

Now, this site here, uh,  start Bootstrap sells themes for, uh, bootstrap. We are creating our own at the moment,  but if you wanted to cheat  and make, uh, buy one, you can start here. Now, uh, one of their themes here is just nice  and clear to see what it does when it breaks  down in terms of responsive. So what happens is it clicks and we are dragging it down. And as it gets smaller, you can see it desktop view, it's  set to these, uh, featured boxes to be four across. But when it gets smaller down to say tablet,  you can see it breaks down to two and two.

And when it get down even further, it breaks down  to mobile view, um, which is, um,  all stacked on top of each other. And two things are happening. The term responsive is the  kind of broad term for say that the website, uh,  responds depending on the browser size, the thing  that activates the browser, okay? Or activates these changes from tablet to mobile  is something called a media query. And it's a bit of code that says the screen width happens  to be 700 pixels here. So it's activating the tablet version,  but when it gets below 700, it activates the mobile version.

Okay? And there's just a bit of code  that just looks at the screen size  and the, uh, browser width  and activates different bits of code depending on  how wide the browser is. So if you're done on a mobile, it's gonna  activate the mobile size. Now there are two distinct uses for these media queries. One is to activate the columns, okay,  which we just looked at before. You can see, remember we did earlier.

We're playing around with our columns. This thing here is 12 columns across,  and this one here is occupying  1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4,  waiting up to 12. Okay? So these guys are spaced out this, um,  but when I get down to tablet, that's actually different now  where it was, uh,  these little boxes were being told to span four. Now they're getting told to span six. Okay, so six and six equal 12.

Then I get down here, these boxes now are being told  to span 12. So that's one part where bootstrap  and media queries are playing around with the structure  or playing around with the column  widths, depending on the size. Another distinct part is when the CSS gets activated, okay? And changes the style. So instead of staying, uh, changing the structure,  it changes the style of, say some of these CSS classes. You can see here there's an H one and it's nice  and big when it's a desktop,  but when it gets down to say, uh,  mobile, you see it's a lot smaller.

And it's a way of telling the CSS use the  exact same media queries. But instead of changing things like the column width,  we are changing the size of the font. So we're gonna separate those in two separate videos just  to make sure that they're clearly different  and uh, we'll work on them separately not  to get them muddled up.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025