Completing our website

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

9 lessons / 1 hours

Overview

Hi, I'm Dan and in this short-course we'll quickly go through all the basics to creating a simple responsive website using Dreamweaver CC 2018. We'll look at responsive web design techniques, as well as making sure you understand exactly what you're doing. We'll make the most of the most up to date web techniques, using HTML5 and CSS3 to present the best site possible. We'll use Media queries to manipulate the sites styling at different widths to give our site responsiveness. 

I built this course for the super-newbies. I've even got fail-safe exercise files so you can never fall behind. This would be the perfect starting point for anyone that wants to dip their toes into building responsive websites. We'll make 3 different responsive points, desktop, tablet and mobile. 

We'll start with defining the site in Dreamweaver. I'll give you a basic starting point of the site to get the ball rolling, then we'll preview our site and improve the responsiveness.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2017 or above. A free 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?

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Basic understanding of responsive web design.

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. People with knowledge of previous versions of Dreamweaver 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 40 mins

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

So the next thing I'd like to do is, I want to-- what's really annoying me, is there's no gaps in between here, whereas in my design, there's those white gaps in between everything. So, let's go and add it, it's something called a Margin.

So in Dreamweaver here, we're going to go to our 'styles.css'. And what we want to do is add it around the column. We've got three columns, now there's this top one, which is my Desktop version, the top one. It's also referred to as the Global, the top version. Then in here, in Tablet, there's another col, and another col. So what I'm going to do is to this top one here. And what I'm going to say is, in this Column I'd like you to have a Margin - in lower case - margin of 1%. It's going to put 1% right around the outside of every column. Now this is going to cause us a little initial problem. So, 'Save' it, make sure there's a semi colon ' ; 'at the end. You're getting sick of me saying that, aren't you? And let's jump into the browser. And, it kind of works.

So there's a border around the outside of 1%, but because there's 1% there, 33.3% here, plus 1%, plus another 1%, plus… there's just not enough room. It all equals up to more than 100%, which we can't do. So whenever you add a margin of 1% you need to minus it off the width. And there's 1% on either side. You can see, there's 1% there, and 1% there. So, we want to minus 2. So it's 31.3%. Let's hit 'Save', check it out. And now it has enough room to fit. We need to do the same for all of them, when we get down to Tablet, does the same thing, not enough room, so what we need to do is minus 2 off our Tablet. So let's get down to 48%. Check it. Looking fine, all fixed.

Now let's get down to Mobile. Mobile still kind of works, not sure why, it shouldn't. We're going to get down to 98%. So all fits, and we can see the borders around the edges. Nice work! Now if yours is like mine, and you can see 90 up there, I think it's just because I've got a Beta version of Dreamweaver. Hit 'reset', and it's gone. Happens to me a little bit at the moment, but I'm sure it's just a bug on my machine.

One of the things you might be looking at, and bugs me as well, because we put a margin around this it doesn't kind of line up with that anymore, and it gets a little bigger from the top, so we just need to add 1% border to this Div Tag at the top here. Remember, what we called it? It's called Hero Box. So let's find Hero Box in here, here he is. And you my friend, get a margin as well. So Margin of 1%, semi colon ' ; ', 'Save'. Now it's all looking a little bit nicer, because there's a margin in as well. Because we didn't give him a width he doesn't need to be minused of everything. You can see, he doesn't have a width anywhere. So if he did, you'll have to minus off like we did these other ones. But we don't, so he's fine.

Last but not least, what I want to do is, let's look at the Navigation. You can see here, on my mock-up, it stacks side-by-side, here on Desktop, but in Tablet and Mobile, they're on top of each other. At the moment though, they are all stacking on top of each other. So, what I'd like to do, is I'd like to say, in Desktop view, my Navigation-- I've already made a Class, a Compound Class here to style my Navigation just to save time at the beginning. What I'd like to do to it is-- you're looking for the one that says 'nav ul li'. That is my list for my navigation. What I'd like to say is, I'd like you to display, and I'd like you to do this one called 'inline-block'. That means they're going to stack next to each other. Don't forget the semi colon ' ; '. Hit 'Save', check it out. Awesome!

The only trouble is, when it gets down to Tablet it also stays that inline block and it gets all a bit messy, and there's no room for the logo so it stacks underneath, so we need to switch it back when it gets to Tablet, to this stacked on top each other method that we had. And all we need to do is find 'nav ul li' down here in Tablet which doesn't exist. So what we're going to do is, underneath 'column' I'm going to put this one called 'nav ul li' curly braces. And I'd like to say, when it gets to here though I'd like you to now display 'block'. And that means they'll stack on top of each other. Let's hit 'Save', preview in a browser. Awesome! So, Desktop, stacked in line. And here, stack block, same with Mobile.

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