How to center your website in Dreamweaver using a container.

Course contents

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

38 lessons / 4 hours

Overview

Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.

We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.

I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas 2017. I’m even inside your version of Dreamweaver right now... go on try it... open Dreamweaver > Go to Help > quick tutorial - I’m right there!This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design experience. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well.

In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML, CSS & Javascript. We will make our own navigation. We will make adjustments so that everything looks great on different mobile devices.We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site.
 Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.

Check out this link here www.byolisawesome.com, for the site we build together. Let's get excited about finally being able to build a website like a professional web designer. See you in class.


What are the requirements?

  • You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
  • No previous web design skills are needed.
  • No previous Dreamweaver skills are needed.

What am I going to get from this course?

  • 39 lectures 3+ hours of well-structured content!
  • You'll learn to build a responsive portfolio website from scratch.
  • Learn how to take a design from Illustrator & create a professional website.
  • How to use templates in Dreamweaver.
  • Create mobile, tablet & desktop versions of the website.
  • Build our own custom responsive navigation with burger menu.
  • Introduction to Javascript & jQuery.
  • How to publish your website to the internet.
  • Ways to preview your designs straight to your mobile device.
  • How to get the most from your portfolio Images.
  • How to use beautiful web fonts in your designs.
  • You will get the finished files so you never fall behind.
  • Downloadable exercise files & cheat sheet.
  • Forum support from me and the rest of the BYOL crew.
  • All the techniques used by professional website designers.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.
  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration approx 4 hours + your 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

Hey, in this video we're going to take our website, which currently stretches on to infinity, we are going to do this to it, where it's now all centered in and only has a maximum width of about 1200 pixels. And when I re-size it, it's always in the center. So let's go and do that now using Adobe Dreamweaver.

So currently, if I preview in the browser, this thing, my Header goes on forever. What I'd like it do is kind of stick here in the middle when it gets to a certain width, a max width of about 1200 pixels otherwise, it looks fine on my laptop here, but if you're on a really big screen, like an iMac, one of those 27" guys, you're going to have your Logo on this side, and your navigation is going to be like a kilometer to the right of this side. So we need some sort of maximum boundaries, and we want it to be centered left and right. So we're going to do it in Dreamweaver using a Container.

It's pretty easy, so back to Dreamweaver. So, here in Dreamweaver I need to wrap everything I can see on my page in a Container. This includes my Header at the moment, and that's about it. So the Body is everything I see on the page. So I want the Header down here. So I want all of this to be inside a Container that I can center. Then the Header will come along for a ride. I'll put the whole website inside this Container. To do it, over here, in my Live view, just click on your Header, I want to see this Header here. If you find you're clicking on the image, and you can't really find it, what you can do, see down here, this is called Tag Selector, so I've got my Image selected, there it is there. There's an a-tag around it, and there's a Header around that, and there's a Body around that. So this is good way to select on these things. Click on the Header, or just click over here in the side. And we're going to go to 'Insert' and under 'HTML', we're going to do this thing called a 'Div'.

Divs are super common in Web Design. They are divisions of space. What we're going to do is click on this, and we're going to get these options here. What it's asking me is, do I want this Div to be closed before that thing I've got selected, which is the Header? Do I want it after it? Do I want to wrap it around? So wrap it around the outside, or do I want it nested, which means, do I want it inside the Header? Like our Images. In our case, it's Wrap. I've got the Header selected, I would like this Container to Wrap around the outside so that the Header is inside, just click 'Wrap'. And it's probably best to see down here in Code view. You can see, this Div is wrapped around the Header. Awesome!

Div is a really generic name for a Container. I'm not going to use those div tags throughout this site. So we need to give it a name, so we can tell it to do a specific thing, because if I say, "Div, I want you to be centered," every single Div in this whole website is going to be centered. And that's not going to be what we want. So what we do, is two parts. We define the name over here, and what it does, and then we're going to apply it here in Live view.

So to define the name we do over here, in my CSS Designer panel, we click on 'Styles'. We say I'd like it in 'Global'. And I'm going to give it a name. See this Selector? Click the '+' button. Up until now we've defined things that already exist in our HTML. You can see here, we defined Header, you can see here, it wants to define the Body. Things that already exist. What I'd like to do is give this a brand new name. One that doesn't exist on this page now, a really unique name, because if I started styling the Div remember, it's going to apply to all of them. And the way we make these unique, is we add a name to them. And these are called Classes. A Class Selector is just a name that I'm giving it. And the way you define Classes is you put a full stop '.' to appear at the beginning of your name. That tells the internet this is something specific that I've made up. And they are called Container.

You can call them anything. You can call it banana sandwich, and it will still work. We're just calling ours Container. If you're going to use 'banana sandwich', you can't use spaces. You need to make sure, if you're going to use 'banana sandwich', you have to use a space. And then you'll have to explain to whoever looks at your website why you called your Container 'banana sandwich'. But anyway…

So we're giving it a name, make sure it's got a full stop '.' at the beginning. Give it a name, use the upper case. Most of the time it will work with upper and lowers, but don't. And now over here where it says 'Show Set', we're going to turn that off. We had that around in an earlier tutorial. It showed you everything that's applied to this Container so far, and there's nothing. So we're going to 'untick' it, so we can see them all. The first thing we're going to do to send to our website is we're going to give ours a maximum width. We're going to say, instead of getting as big as you like forever, we're going to say, I'd like a maximum width, and we're going to use—

We're actually going to match what we did here in Illustrator. In Illustrator, we decided, what did we decide? Where's my Layers? Artboards? We decided that our biggest width we've designed for is 1200 pixels. Now this is not an absolute specific size it needs to be. You might be working to 1024 which was a really common size. 1200 is more common now. This keeps changing, it really depends on what you want the bigger size to be. Follow me, do 1200, works fine. Smallest to the biggest size you need to be is probably 1024, don't go any smaller than that. So, jump back into Dreamweaver. What I want to say is, you can get to a max width of pixels, and you can only be 1200 wide.

For some reason, Dreamweaver at the moment double types lots of my letters, you'll see this throughout this course. I can't make it stop. So 1200 pixels is how wide it's going to be. I'm going to preview in a browser. I want to stretch it out, move it over here and stretch it out to be full. It doesn't work. Why? It's because we created it in Dreamweaver but we haven't applied it yet, so let's go into Dreamweaver. What I mean by that is, we've created it down here, we've styled it, and said, be a 'max width', but over here, we haven't actually applied it to my Div, so we need to add it to it. So what you need to do is, select a Div. If you can't select it, and say you've got this clipped, remember, the Tag selected down here is real handy. I'm going to grab the Div. And here, you can add a Class from ID. And we're going to type in our Class.

Now what goes at the beginning of the Class? That's right, a period or a full stop. And you can see there, because, generally this is super helpful it's actually added the word Container for me. I can type it in. But it's pre-selected it for me. Hit 'Return'. And now I'm going to go and preview it in a browser. What I'm first going to do is do the 'Save All'. Cool little shortcut, remember. Otherwise, 'File', 'Save All'. Now we're going to check it in the browser. Hey, so now that Div, called Container says don't be anything bigger than 1200. The reason I said don't be anything bigger is because I actually want it to be smaller, because we're going to get down to Tablet and Mobile stuff.

So instead of just Width, use Max Width. So, go no more than that, but I'm going to add, do what you want. Our next problem is, it's not centered. So it's doing the right width, but it's not centering on my page. And, we've been through our transformation Web Design where everyone want it to the left, nobody want it at right. And then, everyone wants it centered now, so let's go and do that. To do it, it's pretty easy. Make sure, 'styles.css', 'Global', make sure your 'Container' is selected, and all you do, under 'Margin' where it says, these little pixels, switch that to 'Auto', 'pixels'. We'll also make left and right margins 'Auto'. Hit 'Save All', check in the browser. And hey, we have got a centered website.

So as long as everything goes inside that Container Div, it will get centered like this. So, let's jump back in. That's going to be it for centering our website. We are now going to go off and create some Media Queries because at the moment, we have a Max Width for a Desktop view, I would like to do some changes and add some Media Queries for Tablets and Mobiles. This is what we consider Responsive Web Design. Let's go and do that in the next video.

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