SECTION: 1
Overview
7:24
SECTION: 2
Understanding Dreamweaver & Bootstrap
17:03
SECTION: 3
Creating our first page
9:17
SECTION: 4
CSS & Bootstrap
46:16
SECTION: 5
Testing your website
6:16
SECTION: 6
Bootstrap Containers
18:40
SECTION: 7
Text in Dreamweaver
34:31
SECTION: 8
Creating and styling links
10:09
SECTION: 9
How to backup
4:44
SECTION: 10
Navigation bar
21:24
SECTION: 11
Advanced CSS
19:30
SECTION: 12
Mobile website
41:41
SECTION: 13
Uploading your website
17:00
SECTION: 14
New pages & general tidy up.
39:51
SECTION: 15
Embedding is awesome.
13:02
SECTION: 16
Extras
19:50
SECTION: 17
Finished
1:58
🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How to edit CSS using Dreamweaver 2015?
SECTION: 1
Overview
7:24
SECTION: 2
Understanding Dreamweaver & Bootstrap
17:03
SECTION: 3
Creating our first page
9:17
SECTION: 4
CSS & Bootstrap
46:16
SECTION: 5
Testing your website
6:16
SECTION: 6
Bootstrap Containers
18:40
SECTION: 7
Text in Dreamweaver
34:31
SECTION: 8
Creating and styling links
10:09
SECTION: 9
How to backup
4:44
SECTION: 10
Navigation bar
21:24
SECTION: 11
Advanced CSS
19:30
SECTION: 12
Mobile website
41:41
SECTION: 13
Uploading your website
17:00
SECTION: 14
New pages & general tidy up.
39:51
SECTION: 15
Embedding is awesome.
13:02
SECTION: 16
Extras
19:50
SECTION: 17
Finished
1:58
Questions
Tayla C
8 years ago
BYOL EXPERT
0
You are not following this thread
Tayla C
9 years ago
BYOL EXPERT
0
You are not following this thread
Student Gallery
Be the first to share something.
Course info
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.
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
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
Hey, my name is Dan and in this video we're gonna look at editing CSS rules. Now, we've kind of done it as we're going along, but I wanna make it official the way you go and edit CSS rules once they've been made. Say that you want to edit this H one. There's a couple of things you can do. One is you can click inside of it, it might grab it by default, which is quite good. Otherwise you might just have to select it in this row down here.
This is called your tag selector. I can click on H one and it doesn't really do much unless we switch to current current's. Really helpful once you start getting a bit used to Dreamweaver is that, watch this, if I click in now and find the P tag, can you see it jumped to the class? Okay. Or if I jumped this p tag here, you can see it jump to the class that I selected, which is first text, which is great. Okay?
It also means that say if I wanna jump along here to the band hero, you see it jump to band Hero. Okay? So it's quite helpful in the undercurrent, um, to kind of click around and it will adjust over this side. But if you're new, it's better to stay at all. Okay? And you can just see them all in a nice big, long list and you can shovel through them and find them.
It's up to you how you wanna work. And so let's click on, I wanna adjust this H one. I've got two ways of doing it. I can click on each one here and go and adjust it. Make member, we've got the show set okay. To show everything that can be done to it or just the bits that have been done to it already and we can adjust them.
Um, another way you can do it is go into your Cs S's our main css. I'm gonna go to full code view and you can find it in here and change it. Okay? You need to know a little bit of syntax. CSS is pretty easy though. Um, the main bits are say that I want a hwi.
You can see the semicolon here. I'm gonna put a return in afterwards. And let's say I want to put some, uh, I don't know, some padding on the left hand side so I could put padding and you see dream move tries to help out. Okay? You can see I can scroll down to left head, enter, there's a semicolon, uh, there's a full colon there. And then we're gonna put in, it doesn't need a space, but I like to put them in.
And let's put in say a pixel ratio. Pixel method of 20 pixels. And then don't forget to put the closing semicolon. Let's hit save. So file, save. Let's do save all.
Okay, jump back to live view. And you'll notice that our H one now has 20 pixels padding on the side there. I'm gonna turn it off by doing it the other way. Click on my H one here. Show set. There's my pixels and I'm gonna bin it.
Okay? And that 20 pixels is gone. Alright? That's how you adjust classes and it's not just for fonts. You could do that for any of the classes that you've done in this course so far.
This is called your tag selector. I can click on H one and it doesn't really do much unless we switch to current current's. Really helpful once you start getting a bit used to Dreamweaver is that, watch this, if I click in now and find the P tag, can you see it jumped to the class? Okay. Or if I jumped this p tag here, you can see it jump to the class that I selected, which is first text, which is great. Okay?
It also means that say if I wanna jump along here to the band hero, you see it jump to band Hero. Okay? So it's quite helpful in the undercurrent, um, to kind of click around and it will adjust over this side. But if you're new, it's better to stay at all. Okay? And you can just see them all in a nice big, long list and you can shovel through them and find them.
It's up to you how you wanna work. And so let's click on, I wanna adjust this H one. I've got two ways of doing it. I can click on each one here and go and adjust it. Make member, we've got the show set okay. To show everything that can be done to it or just the bits that have been done to it already and we can adjust them.
Um, another way you can do it is go into your Cs S's our main css. I'm gonna go to full code view and you can find it in here and change it. Okay? You need to know a little bit of syntax. CSS is pretty easy though. Um, the main bits are say that I want a hwi.
You can see the semicolon here. I'm gonna put a return in afterwards. And let's say I want to put some, uh, I don't know, some padding on the left hand side so I could put padding and you see dream move tries to help out. Okay? You can see I can scroll down to left head, enter, there's a semicolon, uh, there's a full colon there. And then we're gonna put in, it doesn't need a space, but I like to put them in.
And let's put in say a pixel ratio. Pixel method of 20 pixels. And then don't forget to put the closing semicolon. Let's hit save. So file, save. Let's do save all.
Okay, jump back to live view. And you'll notice that our H one now has 20 pixels padding on the side there. I'm gonna turn it off by doing it the other way. Click on my H one here. Show set. There's my pixels and I'm gonna bin it.
Okay? And that 20 pixels is gone. Alright? That's how you adjust classes and it's not just for fonts. You could do that for any of the classes that you've done in this course so far.
