SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
Questions
Student Gallery
Be the first to share something.
Course info
Overview
Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.
Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome.
Who should use this?
Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.
What do you need?
- You'll need a laptop (Mac or PC)
- Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.
Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?
No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.
Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.
If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.
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, and welcome to this Dream Move tutorial. My name is Daniel Walter Scott, and I'm a trainer here at Bring Your Own Laptop. Um, in this course, what we're gonna look at is CSS. What CSS will allow us to do is to style all of our HTML. So currently we've got our vintage camper page and we've got our H ones, our H twos, our paragraph tags, and some links, but we haven't been able to change the color or the size of the font. So this is what this next, next section is about.
So we're gonna create, um, uh, a separate sheet called a CSS sheet, which is short for cascading style sheet. And we're gonna style those fonts. So I've got this file here open for you. This is, um, one of my websites. It's the Bring Your Own Laptop website that I created for the Australian site. Now you can see it's kind of like our, uh, vintage camper.
It's quite simple images, everything's in line. But what I'll show you is I've created a CSS sheet. I've turned it off for the moment just to show you what it looks like without the CSS. So quite similar. There's a lot more, um, text in this version, but quite similar to the vintage Camper one. So what I'll do is I'll turn the CSS back on.
So let's find this view style rendering display style. So this is gonna turn my CSS back on. And can you see it's changed the site quite substantially. Okay. All the CSS styles, um, all the fonts, it styles the layout. And this, um, part of the tutorial, we're gonna look at just styling the fonts to start with.
We'll look at layout and the later one. So, um, let's have a look at split view. So on the right here is my HTML with a CSS applied. And this is what CSS looks like. It's quite similar to HTML, okay? But it's a little simpler, okay?
It's nice and easy to use. So on this right hand side here, um, I've got this bit of text highlighted, and you can see down the bottom here, it's called Blog two. Um, okay, so it's got this thing called blog two that I've added to it, just the name. Um, and over here I've styled blog two and I've told it to be a font size of 1.2 ems, which is the size of the font. I've given it a font family. So Museo Sands rounded, that's what I've decided for this one.
Um, it's got a tech shadow. So drop shadow, um, it's a white one that's over the side there. And these are the colors that make that work. And the line height is the leading or the space between lines and the font weight is how heavy it is. Um, so is it a light, is it medium? Is it a bold, is it a black?
So those are the things. Styling. Um, this, um, blog post two here, text. Okay? So I can make changes in my code in the CSS and watch an update on the right hand side. So I'm gonna change this to a bigger size.
So 1.7 and your watch over here, it updates to 1.7. Great. So that's what we're gonna do. We're gonna, um, create our, um, CSS sheet, okay? And we're gonna do some font styling and try and get our vintage camper site looking a little more trick. All right.
To see you in the next tutorial.
So we're gonna create, um, uh, a separate sheet called a CSS sheet, which is short for cascading style sheet. And we're gonna style those fonts. So I've got this file here open for you. This is, um, one of my websites. It's the Bring Your Own Laptop website that I created for the Australian site. Now you can see it's kind of like our, uh, vintage camper.
It's quite simple images, everything's in line. But what I'll show you is I've created a CSS sheet. I've turned it off for the moment just to show you what it looks like without the CSS. So quite similar. There's a lot more, um, text in this version, but quite similar to the vintage Camper one. So what I'll do is I'll turn the CSS back on.
So let's find this view style rendering display style. So this is gonna turn my CSS back on. And can you see it's changed the site quite substantially. Okay. All the CSS styles, um, all the fonts, it styles the layout. And this, um, part of the tutorial, we're gonna look at just styling the fonts to start with.
We'll look at layout and the later one. So, um, let's have a look at split view. So on the right here is my HTML with a CSS applied. And this is what CSS looks like. It's quite similar to HTML, okay? But it's a little simpler, okay?
It's nice and easy to use. So on this right hand side here, um, I've got this bit of text highlighted, and you can see down the bottom here, it's called Blog two. Um, okay, so it's got this thing called blog two that I've added to it, just the name. Um, and over here I've styled blog two and I've told it to be a font size of 1.2 ems, which is the size of the font. I've given it a font family. So Museo Sands rounded, that's what I've decided for this one.
Um, it's got a tech shadow. So drop shadow, um, it's a white one that's over the side there. And these are the colors that make that work. And the line height is the leading or the space between lines and the font weight is how heavy it is. Um, so is it a light, is it medium? Is it a bold, is it a black?
So those are the things. Styling. Um, this, um, blog post two here, text. Okay? So I can make changes in my code in the CSS and watch an update on the right hand side. So I'm gonna change this to a bigger size.
So 1.7 and your watch over here, it updates to 1.7. Great. So that's what we're gonna do. We're gonna, um, create our, um, CSS sheet, okay? And we're gonna do some font styling and try and get our vintage camper site looking a little more trick. All right.
To see you in the next tutorial.
