🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

How to turn images off in bootstrap mobile view using Dreamweaver

This lesson is exclusive to members

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

Questions

0
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. In this video we're gonna look at how to disable  and enable things depending on your media query. So what I'd like to do is in my Photoshop diagram here,  this image here is great desktop,  but there's no room for it down at mobile. So I'm going to get it to turn off When it gets down to  that size to do, it's quite easy. Um, I am gonna make sure I'm down at my small size now. Okay, this is where I wanna turn it off.

I'm gonna select on it and I gotta collect the  containing container. You can't turn images off specifically. Um, it's better to turn the whole column off. So I got my column, um, that my image is sitting inside  and I got a couple of options. The easy option is right click it  and go to the one that says hide element. And it just means that I'll turn this off  and it will disappear, um, and not come back.

So that's how yours will start off. Okay? It'll just disappear. And if I preview in my browser  here, let's jump back. Okay, so there's my image and desktop view,  but when I get down to my small view, it turns off okay,  it's completely gone Now. Um, that's really easy.

All that's really happened. Just so you understand what's happening is  that if I go into my code view here  and I look at, uh, where is it there old books. He's in this column here, there he is beginning and open. It's added a class called hidden excess. So just means when I get to the, um, the size of excess,  which is our, uh, 700 or so pixels and smaller hide it,  but when it's not, when it's anything else other than that,  make it viewable again. Okay?

So that's just the little class that turns on and off. So if I wanted to turn it back on,  I could manually just delete that  and go back to live view and it will be back. Another easy way to do it is if I wanna turn it off,  remember right clicking and hide elements the easiest  way, but I could add that class. I could say I would like it dot hidden  at excess please. And to find it back on if you wanna stay in design view. Uh, oh, I forgot.

Can you see I left the column on,  I actually just turned the image off  and added it to the image and that's fine. But now I've got this empty container here  or this column that's kind of stretching up the top here  and pushing my text down. So I'm gonna undo that and I don't wanna do it to the image,  I wanna do it to the whole column there and turn that off. So hidden access. Great. He's gone.

And if I wanna turn the back on  or view a page, uh, to see which bits are hidden, um,  you can right click anywhere on the page  and just go to this one that says Manage hidden elements. What it does is it turns it back on  and it's grayed out to show you where it should be. Okay. And you could now maybe turn off that class, um,  and delete it or it's just a good way. So you can right click again  and I'm gonna manage hidden elements to turn it back off. Okay.

So you can turn things on and off. It doesn't have to be images, it could be whole text boxes,  it could be anything you like. You can turn things on that only appear on mobile. So you might have a DIB tag that's turned off for, uh,  SMMD and LG and they only appear at xs. It might be something mobile specific. Okay?

It might be a map that turns on  and makes it really obvious that people are trying  to find you, um, using their mobile device. Um, so you can turn things on  and off easily by right clicking  and make things hidden so you can easily turn things, uh, on  and off using that hidden class. All right, that's it. See you the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025