Production Video - Fonts

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

53 lessons / 5 hours

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.

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

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 my name is Dan and in this video we are going to work through adding the fonts to all the different parts of the website. So a production video, where we kind of slog away and add and adjust as we go. So we understand fonts now and we are going to use Google Fonts. I'm going to start with this top one here; I’m going to start matching it to my Photoshop document. You can see here, its font, we've got that, it’s a different weight, I've used a lighter weight for the font here, so I'm going to use my type tool on Photoshop, and you can see here that I've used Roboto Slab light. Now on a desktop it uses the word light but in web we use the word 300 or the letters sorry the numbers 300 to identify it light. So to do it, I've got my h1, there he is there, I'm going to go to show set, what’ve we got? Roboto Slab, perfect, but the font weight is at 400 which is regular or normal. I'm going to go 300 and it’s going to be a lighter font, great.

 

In terms of the size, in here I've got 48 pixels so I'm going to change this to 48, to make it a bit bigger, great. This part down here, the first paragraph lets have a look, in this case it was 20 and it was Roboto regular. So first paragraph, that’s here, is Roboto regular and it’s 20. Now I don’t need to make this Roboto regular, why? Because remember in the last video we made sure that the body, which is everything on the page, is set to Roboto regular and regular is the default which is the 400 weight so I don’t need to change it. So lets look at the next part, lets have a look at down here. Now you can see down here, everything is kind of collapsed underneath. When we were designing before, it was up on this right hand side here. Now we are going to look at this kind of BootStrap structure later on in the course.

 

But for the moment remember we are looking at our large view, so down here in Dreamweaver, you might be seeing it already if you’ve got a larger screen than me. Mines quite small for using this tutorial, so I'm going to switch to large, and it displays here with our little gap. So, what we are, it’s a p tag at the moment. I'm going to jump to Photoshop, its quite big and it’s not light like this. So its bigger than that size so it’s 53 and its bold which I know is 700 in code. So, what we are, I'm going to create a class for this one, I'm actually going to make it the h2. So we have got a h1 up here, I'm going to make this our h2, so I'm going to change you by clicking that and say you my friend are now my h2.

 

Now I'm going to style the h2 so I'm going to go here to my css rules, I'm going to create I'm going to select him to make things easy. I'm going to click new selector, it’s going to pick far too much. I'm going to use my up arrow to get it down to just the h2 and id like you my friend to be, you can see down here its empty, why? Yep, show set, it’s showing me everything that I've done so far to the h2 and I've done nothing to it. So I'm going to open it up so it shows me everything, click on my text and I'm going to do a couple things. One is, I need to play around with the size. The size here was pixels and it was 53, very big, what was it? It was capitols as well. So we need to change this to our uppercase to match my mock up.

 

What we are. That didn’t change at all, double click it. Okay, you know you're kind of in the text-editing mode, can you see this kind of orange box around the outside? What we are. And there are a couple of things we need to do. I'm going to click out, I'm going to go find my h2 in the css and add my Roboto Slab. So I'm going to go to css, I'm going to go to full code view and I'm going to steal it from h1, there it is there and there’s my h2. Put a return underneath, careful not to lose the last of the closing parenthesis there. And great, so my h2 now is going to be that size, it’s going to be that font family.

 

Lets have a look, anything else? That’s about right, great, lets go back to live view. I'm going to do a file, save all, make sure everything is saved. Now this one done here, its nearly, it’s the right font but its not the right size. All right so we need to create a class, so lets do that. First, over here my selector so my main.css, I'm going to create a selector and I'm going to call this one text and I'm going to call this one, I'm not going to call it what we are in case I decide somewhere else in the website I want to use it. So I'm going to call it text option one, vague but it means I can use it all through the website. If I called it what we are and started using it on the contact us page then it would be a bit weird. So, text, full stop for the class, text hyphen option one, I'm going to go down to text here, I cant remember the font size, I cant remember exactly, it was 29 I think pixels. It was a font weight of 300, which is light. If you're unsure what the weights are, it will tell you in Google. Google fonts, can you see the different weights here, remember light is 300, normal is 400, 500 and 700. Nothing happens because we need to apply that class now, so you create the class first and then apply it over here. This one is called text option one, there he is, and he should get nice and big.

 

Now if your fonts aren’t appearing, it’s a bit of a pain, sometimes in Dreamweaver it wont, it’ll keep, it’ll really want to hold on to Arial. What you can do is preview in a browser, so down the bottom here, click on this, lets preview in Google Chrome or Safari or whichever browser you’ve got installed. Chrome is the best one because it’s the most popular. I'm going to hit save and hit save and its going to preview this in a browser and the font will work in here, as long as you're connected to the net, sometimes Dreamweaver doesn’t want to preview for you. Great, so we are going to jump back. My h2 here, I didn’t change the size of it I just saw, so h2 has been styled here and it’s this but I wanted the font weight of 700, a nice big one, let’s hit save. All right the next font I want to do is these guys in here.

 

Now the problem is, is that they are white now so its very hard to see on the white background. And that’s pretty much why I disabled the colour purple in the background originally, so I could see the text when they were black. Now to re-enable, I need to click, click back here, and you can see here, I've found it in my tag selector, I've got band services. Now I'm going to go here and click current which means it will, whatever I've got selected over here will jump to. Remember current is our really useful one. And band services great, click show set, and these are the things that have been done to band services. You’ll notice here its slightly greyed out, its because I've disabled it. So I'm going to enable it again, come back, great. So now I can work on these fonts. Now in terms of the font size, let me check in Photoshop, I made this one, it was light, Roboto and it was again, 28. So I can reuse my option one. I can reuse that one there so I'm going to click in print and text center, I'm going to add another class that’s already been done called option, what was it called? So full stop for a class, text and I'm going to call this one option one, done. Do the same for here, dot option one, and text option one.

 

Now just for fun, we are going to do it in code view just to say its just as easy doing it in code view. So I'm going to be in source code, I'm going to go to code view and there’s my app, there’s my one for photography and you can see here, this is what I've added. Some there’s already a class wrapped around it called text center, so it looks slightly different in code. You can see here, text center, and I'm just going to paste text option one, make sure its inside the quotation marks. So whatever way you're working or whatever way feels quicker for you. So I've added those both there, hit refresh, jump back into live view. It doesn’t really matter which way you go about it, same, same. Great, we are ignoring these guys at the moment; we are going to do them a little bit later on. And down the bottom here, I'm happy for this to stay as is.

 

All right, so that’s our production video over and we have done some adjustments to the rest of our fonts.

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