How to center images in Dreamweaver using Bootstrap (.center-blox)

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

Questions

1
0
0
0
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 and in this video  we're gonna look at centering. We'll look at centering both, uh, images and uh, text. Um, we're gonna do this, uh, horizontally. So, uh, let's put on our image. So I'm gonna click inside our column. Okay.

And that's our nested column. Okay? Um, and we're gonna go to insert image. I'll gonna nest it inside of it  and I'm gonna go back to my desktop,  find my Dreamweaver exercise files, go to images,  and I'm gonna use icon one Print. Click open. Okay.

It puts in my image. Great. So there's two things I need to do  before I worry about entering. Okay? We looked at it a little earlier. Um, if you remember it was alt text.

Okay? So we need this for Google  and for people that are using screen readers  that are visually impaired. And this one's gonna be called, um, what was this one? This one's gonna be Printing Services  Print Design Icon. Okay. And then other thing was remember that responsive one?

We can either click it by adding a class  or we can hit this little um, menu here  and click Make Responsive and great. It means it will adjust its size to fit  with the different browser sizes. So, um, next thing we're gonna do is center it to do it. There's a special class, okay, bootstrap have made for us. So whenever you're thinking of creating your own class,  especially at the beginning, you're gonna have to go back  to Bootstrap quite regularly  to see whether they've got a pre-made one for you. Okay?

Now, so if I switch out to Google  and I go to get bootstrap.com, this's the homepage, remember  for um, bootstrap I can go to CSS  and I can have a little look um, down here  to see whether say images. Okay. Have any, um, helpful little classes that I can use. There's some helper classes. Um, what I like to do is do a search for the page so  I can command F and do center. Okay, there's some texts centered.

Okay, if I go down responsive images,  there's a centered image  and you can see that there's this one called center block. Now I know that because I've had a search for it before  and used it and when you're new you'll have  to keep going back to Bootstrap. Just to get yourself a little bit more aware of  what classes are out there. You can do it in CSS, there's no problem with that. You could kind of find the elements,  do it in regular odd CSS,  but there's all these like lovely little helper classes  that Bootstrap have already made. And the nice thing about them is often say like this  responsive one, there's lots of protective code for  say It potentially wouldn't work in a really old  version of Internet Explorer.

And I've got workarounds to fix it. So I want this one called Center Block. Now if I go back to Dreamweaver  and I add a class called.center block, okay. And it's gonna center my image within its column. Lovely. Now for the text down the bottom here,  I'm gonna click down the bottom In this column I'm gonna go  to insert paragraph.

Okay, I'm gonna nest it inside there. And there's my PP tag, okay, which is my paragraph tag,  Which is just body text. And this one here is gonna be Capital Print. Great. Then click out. Now we saw a second ago in Bootstrap,  there is a centering class for that one as well.

So I'm gonna apply it to it called Center. I know it was called Text Center. Lovely. Great. So we've applied a couple of bootstrap classes  that are pre-made for us without  having to create our own one. And what that just means is  that we're relying on Bootstrap a Great  that they've already done it worked out all the bugs,  but also my main do CSS is staying pretty damn tidy.

Okay? There's not too much on here, it's nothing crazy  with all these different classes you've had to make. So I've been getting you to add the classes manually. So you can see here we added text, uh, TechCenter, just so  that you get used to using Bootstrap  and kind of figuring out what the classes are called. There are some helpers though in Dreamweaver  and I guess as Dreamweaver matures in its relationship  with Bootstrap, it'll get a little bit  better working with it. Now there are some awesome easy ones.

If I undo, uh, my tech center one here,  so there's a little attributes menu,  this little three slider thing you can see here. I've got some bits in here. You can see on a bootstrap. It's got that one, it's got that particular one,  it's got a line center. Okay. And if I click on the image  and I use that little dropdown one, there is a bootstrap  and there is no, uh, bootstraps centered for the image yet.

But I imagine as the vision grows up  and gets more features,  it'll have those types of things in there. Great. So that's  how you center an image using the center block  and to do it with text using text center. Great, see you in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025