How to insert using Dreamweaver’s Before, After, Wrap, or Nest options

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

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

All right, as we are going through and adding the other fluid containers, we are going to have to look at how we add these div tags. So, watch this, I'm going to go to live view and I'm going to delete this text by selecting it all and deleting it, and click out. And I've got my band –hero selected. Now if I go and add another container fluid, we get this guy, the before, after, wrap and nest. Now, what do they mean? I’m going to add this extra fluid container and I want it to be underneath, so what I've got selected, I've got band-hero I say I want it after the thing I've got selected. If I want it in front of it, I’d say before the tag I've got selected. Now these two here are the interesting ones, wrap means I'm going to make a wrapper around the outside, so I'm going to put this initial hero-band, inside the one I'm making. So the one I'm making is wrapping around the outside.

 

Nesting means I would like to put one inside of it, so I'm going to put this container fluid inside this original container fluid, now this is not what I want to do. There is sometimes where you do want to rest and you do want to wrap. But at the moment I just want them just after please. You’ll see down here, I've got this new fluid container and he’s kind of ended up underneath. Now if you’ve picked the wrong option, no problem, you can either undo, edit undo. Or you could go into code view, you will see here, there’s my div tag for my container for my band-hero and there’s this extra one. Now if he was nested, I would go cut, you can see in here, he’s inside this div. He ended up in the wrong place, hiding inside. So here’s the beginning and there is, if I click on it once actually, Dreamweaver is really good at highlighting, there’s the opening of that band-hero and the close, so he is nested, he is inside this one here. Its not what I want, so what I could do, is if I got that wrong, I could select them all; grab the beginning and end of this guy.

 

Now if you're unsure of where the beginning and end is, click the beginning and Dreamweaver is quite good at highlighting the whole tag, beginning to end. So I'm going to grab you, and go to edit, cut, and I'm going to use my backspace key just to bring that back up. And underneath, ill put him underneath, so he is now after. If you want him before, I’ll cut him, and put a return in, just in front, and you can see here, I can paste him and now he’s before. So that container, lets go to live view, you will see he’s just above my hero band. But, I want to go back again, back to code view and I want to put him back where I got him. You my friend, go under here. Now you will see I put returns in all the time in code view. It doesn’t matter, returns you can put in as much, I like to keep everything nice and clean and tidy, so returns don’t make any real difference to the code.

 

So now we are going to go through hand add all the different fluid containers and we will do that in the production video next.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024