🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Setting up Adobe Dreamweaver to create websites.
Questions
Student Gallery
Be the first to share something.
Course info
Overview
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.
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.
- 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
Founder of Bring Your Own Laptop & Chief 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 there, in this video we're going to set up our Work Space so that we can design amazing websites. Now this particular course is going to focus mainly on the Live view, or the kind of more design visual side of using Dreamweaver. You can totally do this course in the Code side if you prefer, but if you want to follow along exactly, we are going to do this in the Visual view.
To do it, first of all you need to make sure you're not on Developer. Developer is fine, but we're going to be working in 'Standard'. And in Standard, we're going to open up a 'New Document' just temporarily. So 'File', 'New', 'New Document', 'HTML', 'None'. Click 'Create'. We're going to close this down in a second. Really all we want to do is to be able to see this. So you can work in Code view in here or Split, or Live. We're going to work in Split. Which means it's part Live view, and part Code. And the other thing is, I split mine horizontally. Some people prefer vertically, I'm not sure what yours is set to. So go up to 'View', there's 'View Mode', and then there's this one in here, called 'Split'. And you can either split vertically so you can see your website that side, and the code on that side. Either which way you like, but if you're going to follow me, let's work on the 'Split Horizontally'.
The other thing is that we're going to switch to CSS Designer Panel. We're going to spend a lot of time in here. The only trouble with it is, it's quite small by default. So we're going to do two things. See the DOM panel down here, and the Assets panel, and the Snippets panel, they're cool, but they take up a lot of Screen Real Estate. So we're going to double click the word 'DOM' to make it-- it's still down there if you need it but it's nice and small as it expanded out the CSS Designer view.
Another thing we're going to do is, if I grab my mouse, and just kind of hover over it, just there, see these little arrows, I'm going to click, and drag them out. And watch this, it will go from one column to two columns. I find this is the best way to learn, it's got everything nice and open. And even when you're not learning, when I'm doing stuff in Live view, this is the way I prefer to work.
Now if you've got a really small screen, like a 13" laptop, or 11", you might have to have it tucked back in here because it's just not going to work. But I'm going to have mine just out here, I've got a 15" MacBook Pro. And it works just fine like this. So you've kind of made some settings, we got it working perfect. What we're going to do is save this. So that if we mess it up later on we can reset it or if you plug it into different monitors, that type of thing. To do it, up here where it says Standard, drop that down, say I'd like to have a 'New Workspace'. I'm going to call this the 'Dan is awesome' Workspace. Call yours whatever you like. And it just means, if later on, you're like "I drag this, and it joins up over there and it ends up connecting to this," and you accidentally close this, and this bit's all gone weird.
What you can do is, go up to 'Dan is awesome', and click 'Reset Dan is awesome', and it kind of resets it. Everything except this, it turns out, I thought it would. But at least gets everything back to normal. Gets expanded out from the side, the same width.
So that my friends is how to get your Work Space looking super sweet and how to save it. And later on, reset it if you need to. All right, let's go and actually start making a website. Hurry up, Dan.