Adobe Dreamweaver CC Web Design from Adobe Illustrator Mockups | Daniel Scott | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Adobe Dreamweaver CC Web Design from Adobe Illustrator Mockups

teacher avatar Daniel Scott, Adobe Certified Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

37 Lessons (3h 51m)
    • 1. Introduction

    • 2. Exercise files

    • 3. Setting up Websites

    • 4. How to create a new website in Dreamweaver

    • 5. How to create a new HTML page in Dreamweaver

    • 6. How best to preview your website in Adobe Dreamweaver

    • 7. Moving tags around in Dreamweaver

    • 8. How to create edit style your first CSS style sheet in using Dreamweaver

    • 9. How to change or adjust the CSS styles in your Dreamweaver website

    • 10. How to center your website in Dreamweaver using a container

    • 11. How to a website that changes for mobile cell phones tablets using Dreamweaver

    • 12. How to test your Dreamweaver website on a mobile phone or tablet

    • 13. How to create a hamburger mobile drop down menu in Dreamweaver Part1

    • 14. Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver

    • 15. Styling our hamburger menu getting our ul menu to stack side by side

    • 16. How to add different fonts to a website in Dreamweaver

    • 17. Fixing the style of the mobile burger drop down menu in Dreamweaver

    • 18. Planning for our Dreamweaver template

    • 19. Add a background image that is outside our main container in Dreamweaver

    • 20. How to use the HTML5 main tag in Dreamweaver

    • 21. How to add the HTML5 footer tag to a website using Adobe Dreamweaver

    • 22. How do I make a template in Adobe Dreamweaver

    • 23. How to create new pages based on a Dreamweaver template

    • 24. How to create a responsive hero box for our website in Dreameaver

    • 25. Fix problems with div tags when you float left in Dreamweaver aka clearing the float

    • 26. How to add and change the styling of a horizontal rule HR in Dreamweaver

    • 27. How to create a button in Adobe Dreamweaver CC

    • 28. Change fonts spacing of a website for Tablet Mobile sizes using Dreamweaver

    • 29. How to turn off parts of a website in different views like mobile or desktop

    • 30. How to create a responsive image grid in Dreamweaver

    • 31. How to make your images responsive in Dreamweaver to match the page size

    • 32. How to make different columns for desktop tablet mobile websites in Dreamweaver

    • 33. How to create a clearfix pseudo after class in Adobe Dreamweaver

    • 34. How to create & link new pages in Dreamweaver using templates

    • 35. How to upload your website to the internet hosting via Dreamweaver

    • 36. How to adding Google Analytics to your Dreamweaver website

    • 37. Dreamweaver class exercise

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.

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.


I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas 2017. I’m even inside your version of Dreamweaver right now... go on try it... open Dreamweaver > Go to Help > quick tutorial - I’m right there!


This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design experience. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well. 

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.

Check out this link here, for the site we build together. Let's get excited about finally being able to build a website like a professional web designer. See you in class.

Download the exercise files here.

Download the completed files here.


What are the requirements?

  • 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.


Looking for more inspiration? Head here to discover more classes on Adobe Illustrator.

Meet Your Teacher

Teacher Profile Image

Daniel Scott

Adobe Certified Trainer

Top Teacher

I'm a Digital Designer & teacher at BYOL international. Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.

I have a wife (a lovely Irish girl) and kids. I have lived and worked in many places (as Kiwis tend to do) - but most of my 14+ years of creating and teaching has had one overriding theme: bringing others along for the ride as we all try to change the world with our stories, our labours of love and our art.See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hey there, my name is Dan and in this video series, we're going to make this responsive portfolio website using Dreamweaver Now we're going to go through this course step-by-step learning everything we need to know to make a website. We'll also use some of Dreamweaver templating tools so that we can make site-wide changes to our large websites super quick and easy. We'll also make this responsive drop-down menu here from scratch. We'll have to let a little bit of JavaScript and jQuery. Now I am an Adobe Certified Instructor, I also get to help Adobe make a lot of their Dreamweaver tutorials for their website. I'm also a Dreamweaver speaker at the Adobe MAX Conference in Las Vegas and even better still, I'm inside your copy of Dreamweaver right now. Go and open it. Open up Dreamweaver, go to help, go to quick tutorial, and there I am inside the machine. This course is for beginners, you don't need any previous knowledge of Dreamweaver or web design experience. We will use Dreamweaver split view so that you can use all the good visual tools as well as doing some simple amines down here in the code as well. In this series will take this static design here that we'll start with from Illustrator and together, step-by-step build everything in HTML, CSS, and JavaScript. We'll make our own navigation using jQuery. We will make adjustments to the site so that everything looks good on all the different devices. We'll work with beautiful fonts and colors and even add Google Analytics to our site so we can get some amazing information on who visits our site. Now web design can be pretty tricky, if you ever get lost, I am around to help, just use any of the comments on any of the pages. Also, you get exercise files so you can play along with me in the video series, I also save something called the completed files. At the end of every video, I save one or about two, that you can compare yours with mine just in case yours get a little lost. Check out the link here for the website that we're going to build together and I want you to get super excited about building a website like a professional. See you in class.[ MUSIC ] Thank you, guys. [inaudible] [ MUSIC ] 2. Exercise files: Hi, what are we going to be making in this course and what are the resources? We're going to be taking a design that we've made in a previous completely different class. It was full Web and UI design using Illustrator. You don't have to have done that course. It's quite handy if you do want to do the design process as well as the build so can go do that. But we'll be taking that design and turning it into a fully responsive website using Dreamweaver. We're going to be using live view a lot in this course. At our previous tutorials, I've used code view. That's fine using code view. We're going to use, the more live tactile [inaudible] version of Dreamweaver. I guess that's what makes string. We have a quite unique from other code editors is it's kind of drag and dropping, click and play type stuff. We're going to focus on that in this course, a little bit of code. The other thing is exercise files and resources, that type of thing. There's exercise files you can download. They'll be a link on the screen that makes a little pop noise here. Go download those and you can play along. There's also something called completed files. The end of every single video, I save the website to where I'm up to. Just so that if you're getting lost or how to work it out, you can download my version and just check the code and just see where you might have gone wrong. Also for this video, we're going to talk about reviews and comments. They'll be a comment section on every page. If you are having problems and it's just not working for you, drop me an email or better yet there's the on-page comments, so do that. If you get to a point in this course, where you are like, there's a pretty good leave me a review. Those sorts of reviews are the things that really help my courses do well and helps me be a full-time online trainer type person. If you like the course, leave a review. Yes I think that's it. Let's go off and start the course proper. 3. Setting up Websites: Hi there. In this video we're going to set up our workspace so that we can design amazing websites. Now this particular course is going to focus mainly on the live view or that 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. In standard, we're going to open up a new document just temporarily. Okay, 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. 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. 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 is view mode and then there's this one in here called split. 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, is that we're gonna switch to CSS Designer panel. We're going to spend a lot of time in here. The only trouble with it, it's quite small by default, so we're going to do two things. So the DOM panel down here, the assets panel, and the snippets panel there [inaudible] but they take up a lot of screen real estate. We're going to double-click the word DOM. It's still down there if you need it. But it's nice and small as it has expanded out the CSS designer view. Another thing we're going to do is, if I grab my mouse and just hover it, just there. See these layers, I'm going to click and drag them out and watch this. It'll go from one column to two columns. I find this is the best way to learn. Its got everything nice and open. Even when you're not learning and 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-inch laptop or 11, and you might have to have it tuck back in here because it's just not going to work. But I'm going to have my just start here, I've got 15-inch MacBook Pro and it works just fine like this. You've kind of made some settings. We've 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. It just means if later on you drag this and it joins up over there and it ends up connecting to this and you accidentally close this and this, it's gone all weird, what you can do is come to Dan is Awesome and click "Reset Dan is Awesome" and it resets it, everything except this, it turns out. I thought it would. At least it gets everything back to normal, gets expanded out from the side the same width. So that my friend is how to get your workspace 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. 4. How to create a new website in Dreamweaver: Hey, there. In this video, we are going to create our site definition. We need to do this for every single brand new site that we're going to make in Dreamweaver, it's super easy, you can see it over here, I've got a folder and inside of it, it's got an images folder, that's all we need to do. Let's go and do that now. If you're following on from the last tutorial, we're just going to close down that thing we made, we're going to set up our site. You need to do this at the beginning of every new site. If you're a web designer, and you've got 10 different clients, you're going to have to do this 10 different times. If you are working on your own website, and you've only got one of them, you'll just have to do this once. Let's go up to Site, New Site, give your site a name, I'm going to call ours Dan's Awesome Portfolio. Where we are going to put it? The site name doesn't actually have any repercussions other than what you use in Dreamweaver to find all your files. That's what I thought forever. I thought there's no repercussions for this, you can call it anything you like. Now, I'm coming back from the future. I'm Dan from Video 22. Your Video 4, and I've come back to tell you, don't put the apostrophe in because web find the whole life putting anything in here, I thought. But I didn't think if ever put an apostrophe in this little site name. I'm not sure if it's a site name that has the problem, or is the folder name, one of them is the problem. Now, instead of going back and re-recording the two days with a video in which I have got with the apostrophe in here, I've just come back in time to say, "Don't do it, don't put it in." Then for the next 22 videos, you're going to see that apostrophe and look at it again. Don't put apostrophes in there. Stick away from any foreign keys like extrinsic, enthuses, just have regular uppers and lowers, and that will not cause any problems when we get later on when we make a template. Carry on and do everything except put apostrophes in the local site folder and the site name. Back into your regular videos, and I hope I don't run into my past self. Everybody's seen Back to the Future? Hopefully, you are not that young. Surely everybody seen Back to the Future. Enough. Back into it. Local site folder, this is just where on your laptop this is going to be kept, I'm going to put mine on my Desktop, I'm going to put mine in a new folder here, and I'm going to call it Dan's Awesome Portfolio. Cool. Also, that physical name for the folder doesn't have any repercussions. Some things do obviously, but that doesn't. Click "Choose." The last thing we want to do in here is go to advanced settings, and let's go to default images folder. Click on the little browse, you can see it's put inside that new folder I just made, let's make a new folder in here, and call it lowercase images. This is something specific. Call it images with a lowercase or no spaces, let's click "Create," click "Choose." What that does is just helps us out later on when we're dragging in images from all over our computer, Dreamweaver knows where to put them. That's it. Click "Save," and that my friend is all we need to do. If you can't see it, let switch the files along the top here. If you can't see files, go to Window files, you'll see there's my little folder. Also on my desktop, there is a Dan's Awesome Portfolio. There's nothing in here except that there's one folder that has images, and there's nothing in it. But just so you know, you design your site locally on your own computer first, and when you're finished, you push it up to your host, somebody like GoDaddy or Bluehost, and they will serve it to Window world. So that is it for setting up our site. You need to do that for every single site. You'll see all mine on here, I've got lots of sites that I work on. If you've done it wrong, you can go to site, go to Manage Sites, and you'll see them in here, there's Dan's Awesome Portfolio, double-click it, and you can get back to that same screen. Let's get into the next tutorial. 5. How to create a new HTML page in Dreamweaver: All right, in this tutorial we're going to create a brand new page, we're going to call it index, we're going to bring in a logo, we're going to link it to our home page, we're going to add some alt text, all the good stuff to start any good website. Let's get on and do that now, so five videos in and we still don't have anything so let's actually make a page. If you go to File New, or I'll use this one here. Now the essential part like any website is an HTML document case, I've got a new document, we're going to use HTML and when it comes to Bootstrap or None, we're going to use None. If you are keen on Bootstrap, I've got another full course on how to use Bootstrap but this one here we're going to create our own responsiveness rather than using the Bootstrap template. So None, make sure it's HTML5, we're going to give our document title. Title is really important, you can use any text you like so I'm going to use Daniel Walter Scott web design portfolio. Why am I putting all that takes in there? It's because whatever you put in this title here appears in here in Google. If I do a search for my hence himself, you'll see that seal the stuff in blue here this is actually pulled from the page title so here in dream leaver, see this here? That is where the blue writing comes from so it's really important, don't leave it as untitled because you'll never ever rank on any sort of search so you can see here, that's where it appears. It also appears if I click on bringing a can see at the top here, okay, that's where it appears also. It's this little name in here. You can see here I've done a lots of good keywords, Adobe materials but anyone who's got to bring her and ended. So that is also where it appears so both the blue and Google end on the little tab at the top there. So don't forget, it needs to be unique for every single page you make so if you've got a 100 pages on your website, you need a 100 separate titles which is not fun to go and try and create but has to be done. Once you've done that, let's click "Create" and you'll have your first page. Now we're going to save this first page so we're going to go to "File Save", we're going to give this one a name and this is one of the few pages where we got to give it a really specific name, we've got to call it index.html. If anybody goes to your website, they go to a Daniel is, it will come up website not found, it needs at least this one page. This is considered your homepage and it has to be spouted exactly like this or lowercase index.html. Other pages we have a little bit more freedom with, but this one definitely index.html. So you'll see over here in my files panel there it is, I got my first bit of HTML sitting there and this gets generated for us, you can see the tag, the title so you can update this he now, in code view and don't break anything else by deleting it, leave it all there. First thing we'll do before we go is we'll actually add something to our page so we're going to click up here in the live view at the top here and we're going to go to "Insert" and up the top here we're going to pick HTML and we're going to click on this one called the image and we're going to bring in now logo. Now if you haven't yet, go to the link on the screen and download the exercise files, they are free to download. Already downloaded mine, they're on my desktop and I'm going to open up my images folder and in here I want the one called logo, I'm going to use the PNG so logo hyphen Daniel hyphen, Walter, hyphen Scott. Let's click "Open" and then my friends is our logo on our page, it's slightly off white but we're going to put that on a dark background later on and that's nearly it. Whenever you put in an image, you can see down here this is what it looks like in code view, what we need to do is we need to add something called alt text or alternative text for every single image. It's used by Google to help reference the site and a website that has lots of good alt texts will help with its rankings, our website that has no alt text as likely to do pretty poorly in the search results. To update the alt text, click on the logo here, click on the little bigger menu new and press "Alt" text here, give it a good keyword name, so I'm going to put in my name. This can have spaces and it doesn't need any real special syntax, but just good keywords so I call it web design, portfolio, logo. I could just call it logo but the only trouble with that is that it's not good keywords and I'd be competing with every other person who had a website with the keyword logo, I want to compete with a very specific niche, My name, web, designed logo. What we'll also do before we leave here as well and this is specific just for the homepage logo and it's very common to click the logo to go back to the homepage, people will listen lists have a button in the navigation this is home, I'll just assume you can click on the logo and it will take you back to the home. Now this is already a home, which is weird but we're going to use this page as our template to make other pages. So what we're going to do and where it says link here, we're going to click on browse to file. We're going to say this when clicked it goes back to index.html which means something weird at the moment because it just goes back to itself, but later on when we copy and paste his page and it becomes the About Us page, it'll become more useful. You can see up here, see little star it means this pages is not saved, "File", "Save", to make sure it's all nice and clean. All right, so we've made a page, we've stuck a logo on it with edit small ticks with edit a link to it and we're getting started. All right, let's get into the next tutorial. 6. How best to preview your website in Adobe Dreamweaver: Hey there, we are at super extreme close-up version so I can show you how to best preview your website using Dreamweaver and real-time browser preview. Let's go check it out. So while you're working, you've got on split view, we can see the code and we can see the live view of the top here, and this is total fine to preview your website. The only trouble is there's blue lines everywhere. You can drag this edge here to resize it. To see what it looks like in different views. My only trouble is, double-click to make it fit back out again, is that it doesn't always update perfectly here and it's better than it's ever been, but I always like to preview in the browser. First thing you need to do is make sure you've got Google Chrome installed. If you're working on a Mac and you've got Safari but not Google Chrome, you need to go and download that and install it. Why? Because everybody uses Google Chrome and if it works in Google Chrome, it's more than likely going to work in lots of the other browsers. So test in that one. It's amazing the percentage of people that actually use Chrome versus any other browser, including Internet Explorer or Safari or Firefox or whatever you use. You can also test in there, but make sure you got Google Chrome installed. Once you've installed it, it should just appear in, under File, Real-time Browser Preview. It should just appear in here like mine does. If it doesn't, you can go to Edit Browser List and go and find it. So once it is installed, you go back up to exactly where we just were, or more easily, there's a little icon down the bottom here, and you can see here Preview in Chrome. The browser appears and you can see it here. There's my logo and I can click it and it's all good. The cool thing about the new version of Dreamweaver is this is what's called a Real-time Browser Preview. All that really means is that when I update the code here in, I'm going to move this so you can see both of it. When I update this and say actually I want my logo to be a 131 pixels wide, you can see it just updated perfectly without me having to go off and reset it or save it. It's dynamic. It just means that I'm not sure I want that size. When I delete it, it just updates while I'm working. Now during this course, we are limited to the screen that you can see, but I've actually got two monitors here on my computer. So I have this one up on another screen. Which you can't see now. Then I have this at full noise here, and it just means that when I update this on this monitor over here that you can't see, it's updating visually so I can see it. So if I am hiding away in Code view doing some stuff, I can see the adjustments happen in case I make a mistake or just to preview it as it's going. We're headed over to real life talking Dan to show you. So while I'm working, I've got two screens up. I've got Dreamweaver on this one, and I've got my big screen showing Google Chrome with a real-time browser preview. So I click on this and then click "Show In Real-time Browser Preview", watching it over there. Let me just make a big change so you can see easily on the camera. So I will grab here image, I just turn you off. Watch this. Good, gone. So I make a change here and it instantly shows over here. It's really just handy if I am working in here and it looks all fine, them I'm like oh, something's changed over here. So yeah, it's a really common way of working as a web designer. Two screens, they look awesome. So thank you real Dan. That is how you preview on your browser. You can check in here, but make sure you double-check it in the actual browser. We'll look at checking on mobiles and tablets later on when we actually have something to check on them. So that's it. Let's go into the next tutorial. See you there. 7. Moving tags around in Dreamweaver: In this video, we're going to put tags and set up the tags and introduce you to this DOM panel. Let's go and do that now. The first thing we need to do is we're going to put in a header tag. Now, over here, under Insert an HTML, your website's going to have three major chunks to it. It's going to have a header. It's going to have a main section. It's going to have a footer. That is top, middle, and bottom. The header and footer are generally going to be the same on every page and we'll turn it into a template later on. The main is where everything's going to change for your actual page. We put the logo in first, which is a little bit weird. You probably put your header in first and then the logo inside of it. I've done it because I wanted to be able to show you how to reorder tags if you get them in the wrong place. What we're going to do, it doesn't really matter where you've got clicked over here in the live view. Click on the Insert HTML click on Header, and it will appear somewhere. It doesn't really matter if it's below or above the logo here. Now what Dreamweaver does as well is that it adds some pre-existing ticks to it. Just place holder ticks because if this tick does not appear here, you can't see it because it has no height, no width, no dimensions. The header goes in and you can't see it, so it's a bit dumb. They add some ticks in here to be helpful. This ticks gets deleted pretty much straight away once you've started using it. First thing we want to do is I want to put my logo inside of my header. You see down here in my code view, there's my header. Beginning and ending, here is the logo with hyperlinks and you can see the old ticks and the size of it. This thing I would like to go inside header. There's two main ways of doing it. There's actually a few, it's up to you whether you prefer sticking to the tools k or you like working in code view, it's totally up to you. Let's use the official way that Adobe recommends. I've opened up my DOM panel here, if you can't see it's under Window DOM, and here is the head of my site. That's all the stuff that the computer sees. You can see as my title in here tells me what keyboard am using. But the user doesn't see any of that head. It sees the stuff that's ended up the body. The body contains my header, contains my image, and that's about it at the moment. Over here on my DOM panel, you can see there's my body, I've to hold this down. There's my header separate from my a tag, which is this link with my image in it. You can just click and drag the a inside the header and they goes inside and they become one happy family. Then I can go through and delete this placeholder text. You can do it from up here, because it will stick to doing it here in the live view. Cut-off, and now that's it. We've got a header that has my image inside of it with my a tag that is how to get things in the wrong place. You're going to either have to drag them in the DOM. Just drag them into the right tag or I'm going to delete all that, is that here's my header text and then delete the text here. Grab all of that, so from a tag to a tag, cut it. Put my curser in there and paste it. It doesn't really matter how you like doing it, dragging it via the DOM, or just copying and pasting it down here. There's just lots of times where it's easier to do one and the other. I'm giving you both techniques so you can work through this course. Let's hit Save, File Save. Let's move on to start styling our header. 8. How to create edit style your first CSS style sheet in using Dreamweaver: Hi there. In this tutorial we're going to create our very first CSS sheet you can see him there. We're actually going to style our header. Don't worry, it's not going to always stay this awful green. We're going to add some padding and some awesome CSS. Get ready to make your very first CSS sheet. So far we've created an HTML page. It's index.html. Got rid of HTML going not much. Now, we need to go, and style its header. We style it using CSS or Cascading Style Sheets. To create a Style Sheet, we go to our CSS designer panel. I'm going to close down the DOM from the last tutorial and in here, if you can't see your CSS Designer, there it is there. If yours doesn't look like mine, you've got to drag it out to roughly about there, and what we want to do is under Sources, we're going to click the "Plus" button, And we're going to go to Create A New CSS File. You can give it any name you like, but everyone calls it styles.css, and we're going to click "Okay". A couple of things happen. First of all, on my desktop, in my Dan's Awesome Portfolio that I got created, it's just a separate style sheet, there is the index HTML file we made, and there's this other guy. There's nothing in there. It's just where we put all our styles. We keep them separated. So back into Dreamweaver. The other thing you'll notice is that my HTML updated a little bit. Can you see Dreamweaver has linked the two? So that's how that Index file knows that styles.css exists because at the moment they are separate files, and in here in the head, Dreamweaver says linked to the style sheet please, and that's what it does. Also handy thing for Dreamweaver is this thing called the related documents button you can see at the top here. It links to it because it's a separate sheet which says I can click on it, and there it is there. There is that styles.css listed on the bottom. It's showing you at the top my index, but down the bottom it is showing you that separate sheet. That's what source coders, they should just call that HTML. So think when you see source code, think HTML, and this here is another document. Back to the HTML. That is how you create and link a style sheet to be easy. Now we're going to go, and style are header. To do it, we've got to make sure that you might be set to Current. Current is awesome when you know what you're doing, and we'll do it a little bit later in the course, but stick to old. Old makes life easier. What we're going to do is we're going to click in here. It doesn't really matter where you click actually, but we're going to create our very first style. We work through these procedures here. We worked through all of these boxes. First of all, we say, I want the style to go inside styles.css. It's really uncommon to have more than one style sheet. Occasionally you can have two if you're using like a template, like Bootstrap, but we're just going to have one CSS for this whole document. Media queries, we're going to get into later on when we look at mobile and tablet. We're going to skip that at the moment. We're going to stick it in something called Global, and we're going to create this thing called a Selector. We're going to be doing lots of selectors, and this selects the thing we want to style. I'm going to hit "Plus". In here, it's default to whatever I have selected. But I don't want the image that's inside the add tag, that's inside the hit. I just want to style my header. You can just type it in. It's up to you whether you get it by default or whether you just have to type in header. I'm starting this thing here called header. What do I want to do to this header? I'm going to click on "Header" over here, and what I would like to do is first of all, let's just change the background color, nice simple one. Got this really big long line of things that we can style with CSS. What Dreamweaver does is along with top here, it puts it into little groups. This one here is Layout, you can see it there, and this Type, types that. What I do is I just click on these to jump through that list. You can slide up and down, totally up to you. I'm going to jump to this one called Background, because it's background color, we're going to pick up big enough green. To pick colors using this slide this thing up and down until you get the hue right, click, hold, and drag the little circle around until you find a color you like. There is the dark and light version or just move it around in here, and that's how transparent it is. We're going to pick a big enough green for the moment. I'm going to change it in a minute. I'm going to click "Return" to my keyboard. Now, we have a header that has some CSS, and that my friends is all CSS is. It's a separate sheet that you add some styles to, and you just make sure you use the right naming. We've matched the word header here, my HTML with the style here and my selectors, and you just colored it. Now, let's have a look at our CSS sheet. Let's go to styles.css, there it is. That's what a CSS sheet looks like. In terms of coding for the internet, CSS sheets are the most simple to look at. There's the word header. It matches completely in the word and the syntax here in my HTML, and it says background-color: hash equals, and that's the color. If you hover above it, there is the color there, and it always ends in a semicolon. It's also wrapped up in these curly braces. Those are the syntax things. You can type CSS perfectly fine. A lot of web designers do. What we're doing in Dreamweaver is we're using the CSS designing panel to do the heavy lifting. This character set at the top here just says that I'm using an English keyboard. Let's jump back to source code. What I want to do is I want to put a little space at the top and left of this logos so that it's not just jammed up against the side. I make sure working on my styles.css on the Global version of my header. You can see here we've got padding and margin. Padding and margin is a good one to explain now. Padding is the inside of the box. Watch this, if I click hold and drag that to the right, it gives me padding, so it moves the logo down the moment 36 pixels. If I undo that, margin does a similar thing. It pushes down from the top, but it pushes from the outside of the box. If I didn't have a colored box in here, if it wasn't green, you wouldn't notice the difference. The logo still moves down that certain amount of pixels. Sometimes it doesn't really matter whether using margins or padding. Sometimes obviously in our case, it does because I want the padding inside the green box. Now, where do I get my measurements from? Now, if you're working with a designer, they should've sent you some specs. How detailed are these specs? It's probably not going to have how far the logo is from the top, but you will get a visual, and we can measure it. Now, if you are the designer of both visual and doing the coding side, it's going to be even easier because you're going to be able to just jump out to your file. Now, it doesn't really matter whether you've designed this in Photoshop or Adobe Illustrator. They both have very good web design tools. I've got courses on both of those. If you want to do the design stage, go check out those. In this case, we're designing something we designed in another video tutorial series in Illustrator. We're going to open up the finished design from that. Now, it's in your exercise files. Open up Illustrator layout, and open up this one called Portfolio I've opened it up. Here it is. This is my design. Now, I want to start pulling measurements from it. I'm going to zoom in, have a little look at this guy. I want the height and the sides here. Now, the official way is there is a ruler tool, so I drop a tool, measurement tool, and you click once there, you click once there, and it gives you the width. It's 19 from the side. You can click once here, you click once there, and you can see it's 10 from the height. About 20 and 10, it's never exact. Just stick to whole pixels, the tiny measurements anyway, so just stick the whole pixels. That's the official way. What I tend to do is grab the rectangle tool, and use this. Why? Because it snaps, which is really cool, you can see, it just like joins up, and really wants to snap to the age of things. If yours doesn't go to View, and make sure smart guide is turned on. That one there, that will stick to the edges. The other nice thing is watch this if I can click here, and it snips right to the corner, and you can see there is my height, and you can see there's intersecting. So I know my height and width in one go. You can see it's 19 from the side, and it's a height of 10 pixels. That's what I'm going to use to translate into Dreamweaver. When I'm building a site, and I've got my design here in either Photoshop or Illustrator, it doesn't really matter. I pulled my measurements from, I'm going back and forth between these two programs. Dreamweaver and illustrator in our case. What I want to do is I'd like to have a height of 10, and I would like this left-hand side of 19. You can see, pushed it 10 down, 19 across. I'll do on the right-hand side as well because we'll have some navigation on that side eventually. The same for the bottom. I want 10 at the bottom just so that there's a gap that matches the top. My friends, that is how to create a CSS sheet. Our styles.css, and we've done some basic styling using our CSS Designer panel. If you're using a version of Dreamweaver like CYST or earlier, you're not going to have the Designer panel. That sucks because this course is all based around the CSS Designer panel, and it's awesome. You might have to look at upgrading. Can you get on in this course without it, probably not. You might want to check out my coding version of Dreamweaver course. Go check that one out. Let's get into the next tutorial where we look at editing CSS rules. 9. How to change or adjust the CSS styles in your Dreamweaver website: Hey, awesome people. In this video we're going to transform this ugly green box and edit our CSS into this lovely gray box. So now we're going to go and adjust our CSS sheet. Let's say we've got nothing selected. Let's click on some random stuff. One kind of make this not work Cool. So there's going be lots of times in this course we are going to make a style and then you're, "I need to change that stock." So what we're going to do is to go and adjust it. The easiest way is doesn't matter what you've got selected over here and just click on CSS styles are gone global. Then click on the style you want. Later on in this course is going to get longer of the styles at the moment it's super easy because we've only got one selector, and hit enter. Now we're going to go and to make an adjustment. Now there is lots of adjustments in here. What you can do to make life a little easier to see this option, this is show it, I love it. Can also be a real pain when you're brand new to this, that it's only showing you the things that you have set and you're, "What was the other things?" Was the font sizes and stuff. You going to remember you can toggle this on and off during this course. All it does is certainly the only things that shows you is the things that you've actually done. We've done the padding and the background color. So what I want to do is change the background color to black. In our case, we're going to use by default most of the time we're going to use hexadecimal numbers is hash numbering. Can you move it around? You can see these numbers correspond with the color. Now what we want to do is I want to lower the capacity of this background, So we have to use this RGBA. It's the newer format. There's no real right or wrong hexes that slightly older version. RGBA is the newer version. The reason it's cool is because it has a at the end, which means alpha, transparency, which means this. those hex numbers don't have it. You can see I can make a slightly transparent read. I'm going to drag it to black. You can see now it's kind of looking gray. But later on when we get some images behind it, it's going to be slightly transparent. It's up to you whether you want to do this now or but later, how dark? It's going to be hard to know until we get our images behind it and we can adjust it later. Another thing you can do is say that this panel here is just driving you mad, you can't just jump to CSS styles. You can see there is my styles. You can see say the petty needs to change. I can just change this to 12 at the top and the bottom. It doesn't really matter whether you want to use code view or you want to use the CSS Designer panel. But in this course we're going to be sticking mainly to the CSS Designer. So back to source code. One last thing before we go is the Save all. So whenever I make an adjustment to my CSS, changes round enter, You'll notice that the styles.css gets us little astricks in here. I want to get saved. But because I'm kind of in my source code viewing my HTML go "File", "Save". Nothing happens on like, so I need to go and do the something called File Save all. The only problem with the save all is that it's a long way and yours won't have a shortcut. I've made a shortcut for mine because it's something you should do before you preview anything in your real time browser preview or over in Chrome case, you go save all, and it means it saves this plus the CSS sheet or maybe some JavaScript you've got open. So save all to do the shortcut on a Mac, you go to Dreamweaver or keyboard shortcuts on PC. I think it's under a minute and write down the bottom. There is one in here somewhere. This is keyboard shortcuts, you might find it. The first thing is we're going to do it to menu commands. We're going find file, save all came in here. We're going to add a plus the shortcut. It's going say you cannot modify the default sit took. We're going create our own one. You can call this anything you like. Dan's Dream Weaver Shortcuts. High any half. Understand. So go to file and let's click Save all now, hit plus and we can pick anything we like. I'm using Command Shift a. From a PC at control ship A. You can use anything you like. It doesn't matter. What do you think you'll remember ots and yeah, that's how we're going to do it. Could change great. Click "Ok". Now whenever I go, I can just hit Command Shift a and it saves all. So when ever you go and preview and your browser do command shift A first all got file save all the long way, just so that everything is up to date because you can sometimes be previewing something in Chrome and go, it's not working. I thought I'd just changed that and it's just because you haven't saved the documents. Alright, that is how to edit CSS and how to create a little shortcut disable onto the next tutorial. 10. How to center your website in Dreamweaver using a container: Hey, in this video we're going to take our website, which currently stretches on to infinity. We are going to do this to it; where it's now all centered and only has a maximum width of about 1200 pixels. When I resize it, and it's always in the center. Let's go and do that now using Adobe Dreamweaver. Currently if I preview in a browser this thing my header goes on for ever. What I'd like you to do is stick here in the middle when it gets to a certain width, max width of about 1200 pixels. Otherwise, it looks fine on my laptop here. But if you aren't, on a really big screen, like an iMac. I'm one of the big 27 inch guys, you're going to have your logo on the side and your navigation is going to be like a kilometer to the right, however, this side. We need some sort of like maximum boundaries and we want it to be centered, left or right. We're going to do it in Dreamweaver using a container. It's pretty easy. Back to Dreamweaver. Here in Dreamweaver, I need to wrap everything that I can see on my page in a container. This includes, my header at the moment and that's about it. So the body is everything I see on the page, so I want the header down here. I want all of these to be inside a container that I can center. Then the header will come along for the ride, up with the whole website inside this container. To do it over here in my live view you can just click on your "Header". Want to see this header here. If you find you clicking on the image and you can't really find it, what you can do, you see down here, this is called your tag selector. I've got my image selected there, it is there. There's an, A tag around it and then there's a hider around that and there is a body around that. This is a good way to select on these things. Click on the "Header" or just click over here on the side. We're going to go to Insert. Under HTML we're going to do this thing called a div. Divs are super common in web design;they are divisions of space. What we're going to do is we're going to click on this and we're going to get these options here. What it's asking me is, do I want this div to be placed before the thing I've got selected, which is a header. Do I want to after it? Do I want to wrap it around? Wrap it around the outside or do I want to nist it? Which means do I want a jam it inside the header? Like our images. In our case it's rep, okay, I've got the header selected. I would like this container to wrap around the outside so that the header is inside. Let's click "Rep". It's probably best to see down here in code view, you can see this div is wrapped around the header. Awesome. Now div is a real generic name for container. We're going to use lots div tags throughout the site. We need to give it a name as so that we can tell it to do a specific thing. Because if I say div, I want you to be centered. Every single div in this whole website is going to be centered and that's not going to be what we want. What we do is to pods, we defined the name over here and what it does, and then we're going to apply it here in live view. To define the name, we do over here in my CSS design a panel, we click on "Styles". We said like getting global and we're going to give it a name, to the selector click the "Plus" button. Now, up until now we've defined things that already exist in our HTML. You can see here we defined header. You can see here wants to define the body. Things that already exist. What I'd like to do is give this a brand new name; one that doesn't exist on the page now, a really unique name, because if I start the styling the div, remember it's going to apply to all of them. The way we make these unique is we add a name to them and these are called classes. Think a class selector is just a name that I'm giving it and the way you define classes is you put a full stop or a period at the beginning of your name. That tells the Internet this is something specific that I've made up and I'm going to call mine container. You'd call anything. You could call it banana sandwich and it would still work. We're just calling ours container. If you're going to use banana sandwich, you can use spaces. You need to make sure if you're going to do banana sandwich, you have to use a space sandwich. Then you'd have to explain to whoever works on your website and explain why you called your container a banana sandwich. But anyway, so we're giving it a name make sure it's got a full stop at the beginning. Give it a name, use lower case. Most of the time it'll work with uppers and lowers, but don't. Now over here you see where it say show SIT. We're going to turn that off. We had that in an earlier tutorial. It shows you everything that's applied to this container so far and there's nothing. We are going to earn ticket so we can see them all. The first thing we're going to do to center our website is we're going to give out a maximum width. We're going to say, instead of getting as big as you like forever, we're going to say I'd like a maximum width and we're going to use, we're actually going to match what we did here in Illustrator. In Illustrator, we decided that our biggest width we've designed for is 1200 pixels. Now this is not an absolute specific size that needs to be, you might be waking to 1024, which was a really common size. Twelve hundred is more common now; this keeps changing. It really depends on what you want the biggest size to be. Follow me. Do 1200, works fine. Smallest to the biggest size you need to be is probably tin. Tin 24 or 1,024. Don't go any smaller than that. Jump back into Dreamweaver. I want to say is you can get to a max width of pixels and you can only be 1200 wide. For some reason Dreamweaver at the moment, double types lots of my letters. You'll see this throughout this course. I can't make it stop. Anyway, so 1200 pixels is how wide is going to be. I'm going to preview in a browser. When I stretch it , I'm going to move it over here and stretch it out per piece. It doesn't work. Why? Is because we've created it in Dreamweaver, but we haven't applied it yet. Let's go into Dreamweaver. What I mean by that is we've created it down here and we've installed it and we've said it's max width. But over here we haven't actually applied it to my div, so we need to add it to it. What you need to do is select the div. If you can't select it and say you've got this clicked, remember the Tag selected down here is really handy and it grabbed the div. Here you can add a class or an ID, and we're going to type in our class. Now what goes at the beginning of a class? That's right, a period or a full stop. You can see it there because Dreamweaver is super helpful, it's actually added the word container there for me. I could type it in, but it pre-selected it for me, there were 10. Now I'm going to get a preview in a browser. But I'm first going to do is to disable cool little shortcut, remember. Otherwise file save all. Now we're going to check it in a browser. Now that div called container says don't be anything bigger than 1200. The reason I say don't be anything bigger is because I actually want it to be smaller; because we're going to get down to the tablet and mobile stuff. Instead of just using width use max-width, so go no more than that, but underneath that, do what you want. Our next problem is it's not centered. It's doing the right width, but it's not centering on my page. It's I don't know, we went through a transformation in web design; where everyone wanted it to the left, nobody wanted it to right, and then everyone wants that centered now. Let's go and do that. To do it. It's pretty easy. Make sure styles.css global, make sure you container selected and all you do on the margin is where it says this little pixels, switch that to auto, pixels auto to make left and right margins auto. Hit "Save All" ticks in the browser. We have got a centered website. As long as everything goes inside that container div, it will all get centered like this. Let's jump back in. That's going to be it for centering our website. We are now going to go off and create a media queries because at the moment we have a max width for like desktop view. I would like to do some changes and add some media queries for tablet and mobile. This is what we consider responsive web design. Let's go and do it in the next video. 11. How to a website that changes for mobile cell phones tablets using Dreamweaver: Hey, there. In this tutorial, we're going to look at adjusting our site for the different tablet sizes and mobile phone sizes and the called media creating and see them up the top here. I'll wait besides a desktops, the hit in here is gray. If I get down to a tablet size, really faster. It's red and I get down again to mobile and it's green. I know there's ugly colors that just there as placeholders to test our media queries. Let's go and do that now in Dreamweaver. So it's time to get over responsive and mobile-friendly, and it's actually really easy. So what we need to do is we need to look at something called a media query. First thing we need to do is look at this media queries bar. If you can't see yours is a little icon here. You can turn on and off. If you don't have that bar, or that icon, it might mean that you are using an earlier version of Dreamweaver, maybe see a sets that doesn't have this option. Unfortunately, you can't follow this particular tutorial. You can still do media queries, but you have to hand code them. You can't use this nice that all and directive thing at the top here. So we're going to use this thing, and it tells you what to do is click on this icon to add immediate query. That icon is over here and then some there. So we're going to click on it. We're going to say our first one's going to be tablet, because we've already done desktop. Desktop is considered global in our case, some people design their websites around mobile first. They turned mobile-first means I'm going to design it for the mobile. Then I'm going to make immediate query that overwrites the mobile with tablet. Then over the top of that and desktop, I designed my websites the other way around. I always find that my students find this easier. We designed the desktop version mostly because often there's more than that side and it's how most people view our website depends on your kind of website, but definitely my stuff, 80 percent of views are from desktop. So I'm using a desktop first approach. We're going to click this little plus button again, and we're going to work on tablet first. So we're going to say a tablet is going to be between these two. It's going to have a minimum of a certain size and a maximum of another size and that's going to be considered tablet. Now it's a little hard to get the exact measurements because this are many tablets out there and so many different sizes. So what we say it's a minimum of about 401 is the smallest, anything smaller than that we'll consider a mobile phone and we'll do a media query separate for that. How big should it get? Is 768 is the width of an iPad, with some portraits. So we use that size. There's no reason why you couldn't use 770 or say this is in the distant future when there's lots of different sizes, you might decide that, that's too small or different size. It's just a gym relies sizing for now, but it would be a really typical size to use. Where's it going to go? It's going to go inside my "Styles.css". I'm going to click "OK". You can see here, there's my little blue bar, that's "min-max". It's got a minimum and a maximum and we're going to have things trigger when it gets to that size there. Let's have a little look at our "Styles.css". Click on related documents by here. You can see that is what immediate query looks like. That's the syntax. Now again, if you're using a version of Dreamweaver that doesn't have this nice little handy bow. You can just type it in here. So that is considered my tablet. What we'll do is we'll prove fewer tens and just above it. We'll add some comments just so that later on we know what we're talking about and what doing to add comments in Dreamweaver is as option here, Css apply comment. Css apply comments look like this. It's a slash and then an extract and it needs to go between here. We can say, this might be my tablet. Now this is ignored by the browser and it's just here for humans. So you don't need to write this as just means that later on, I can say got a tablet view and you know where to go. So next thing we're going to do is we're going to put in our mobile view. We're going to click on this little plus again. We're going to use a max, so a "max-width" of 400, it's going to go into styles.css. Let's click "OK" and see up here. So anywhere up until a maximum of 400 will be my mobile view. Then they tend to view takes over and that's just one pixel more than my mobile view. If things were above 400, I have no idea what will happen that probably just fight it out in the blood and Css everywhere, but so just make sure 400 and then 401 is when the next one starts. Now in this tutorial, we'll just doing; a mobile, tablet, and desktop. You will find lots of other sites that have five views or four views or seven views. We're just going to do three and professionally that's normally all I attack is small for of mobile, medium-sized tablets and a big size and the old desktops. You can see down here my Css, I'm going to add that comment again, so I'm actually just going to copy this one and paste it here on top. This is going to be my mobile view. What I'll also do to make things a little easier is we'll put in up the top here, underneath that. We'll put in, this is going to be my global view and global /desktop view. You just say that when you're working you can know things. Now nothing much happens other than the we've got color boxes up here. Now we need to do some slight adjustments. So what we're going to do is we'll go back to "Source Code", and we'll go to "CSS Designer" and we'll say my styles menu, we've got these guys before we just kept on clicking on "GLOBAL" and these two didn't exist. Now we can say I like a global I say "GLOBAL" got my two styles that we've got the "header" and the "container". So what I'd like to do is I want to adjust the background color of this header. I wanted to do it for tablet fifths, which is this min-max one, which is 4012-768 and you can see there's no selectors here. So nothing specific for template and I'm going to say there is always going to be now, header. We've got one for header. You'll notice that we've got more of a "GLOBAL", "header" now and one for tablet. Now this one here and tablet does nothing yet. I'm just going to go to background color, pick a big obvious color like red and retain. I'm going to drag this in. What you'll notice is nothing happens and then hit save all still doesn't change. That's why I don't like using this live view at the top here. This is just a few little things that don't update. But if I check it in my browser, here it is, and I drag it down and I get to my 768 somewhere in here. Hey, and then my friends is all media queries are, you're just saying between these two pixels, do something different and we're saying override the hitting and make it red instead of gray. We can do the same for mobile jumping here. I'm going to say styles.css in my maximum of 400 remember that's my mobile view. I'm going to say you header, typing it in and return again. I'm going to say background color of green. We're not going to keep this as more of an example, gray save on, and i check it on my browser. So big tablet, mobile. Awesome thing and that's all media queries are. So we're going to go through and do things like I'd like the font to be bigger. I'd like this box to stack differently. That's how we're going to achieve all these different things. You can see the font would become centered when it's mobile or it's left aligned but it's in tablet. It's smaller when it's a mobile and that's what we're going to do. We're going to say I want this heading to be smaller, please, just to within this media query. That's all responsive web design is. As shown back into Dreamweaver. You can see here that one's updated. Now in quiet, hasn't yet. Save all you can if you want to keep using this, you can get a "View " and go to "Refresh View", or a "F5". That should get it going. Cool. So I'm going to double-click this gray area to go fully back out. We're going to look at the next video. We're going to look at previewing it through your phone or tablet. There's a really cool feature using live preview, let's do that in the next tutorial. 12. How to test your Dreamweaver website on a mobile phone or tablet: Hi there. In this tutorial, we're going to look at previewing our website from Dreamweaver directly onto our mobile phone and it's going to appear here, see the green background and then watch this. It's red background. The nice thing about it is that we don't have to host it on a website and we can just make adjustments on Dreamweaver directly and automatically updates on a mobile phone. It's really cool. Why am I holding it close to my face? It's because my camera won't zoom when I get it close to the camera like that. Say, I hold it here. All right, let's get into the tutorial. The first thing we need to do if we are going to test on a mobile phone is we need an actual website that has some differences when it's on mobile. The desktop view, it's gray, if I get down to tablet, it goes red and down to cell phone it's green. We did this in a previous tutorial. Now what I want to do is down the bottom here with real-time browser preview. Clicked on this and before we use Chrome, now we're going to use this one. I'm going to have to twirl it up because for some reason my screen drops off the bottom. You need to be able to see this. You're going to do two things we'll do in real life. You can either use a QR code reader to scan that or you can type in that URL, e-mail that to yourself. I'll switch to real life human Dan, and he will show you the rest. Demonstration time. What you do is you download a QR code reader. There's loads of free ones online, all through the App Store. Got one on an Android here. Pretty much you just point it at the little QR code that we generated and hopefully get close enough. Makes a little beep noise and it takes you to the website. Now you'll going to put in your password for your Adobe ID and eventually, hopefully I'm going to load. There it is, it's the green version. Will the camera focus on it, maybe, and watch this horizontal. It's the red version for tablet, green version for mobile. It's because it does screen width rather than the actual devices too hard to try and pick devices, they change too much, so you end up just doing screen widths. Yeah, the nice thing about this though is that you get to then, stick this up next to your computer and plug it into the power and just be developing on Dreamweaver and instantly updates all the time on your mobile device, you can have a tablet there and press the heck at people walking past, you look like a pro. Let's jump back into the screen capture version of myself. Before we go, what we want do is we added these crazy colors to approve that media queries work. Is not what we want for the long-term website. We're going to go and just remove those. Styles we're going to put for tablet first header. Actually, we're just going to delete the whole selector. You could just remove the background color, but actually I don't think I need the header for anything else. Famous last words but I'm going header minus goodbye there, the one that's in the mobile phone header minus, goodbye. Now the responsiveness doesn't really do anything, but at least our media queries is still here for our future work, tablet and mobile view, onward and upwards. 13. How to create a hamburger mobile drop down menu in Dreamweaver Part1: In this video, we're going to create our ugly-looking desktop menu, which we'll style in the next video. But when it gets down to tablet and mobile, it turns into a [inaudible]. Let's go and do that now in dreamweaver. First thing we're going to do is we're going to in this video put in like the core components and turn them on and off for the different views. After that, in the next video, we'll look at doing the JavaScript that makes the click action happens when you click at the menu drops down. In the last video, or at least the third of this little chunk here will be the styling it and just to make it look pretty. The first thing we need to do is add our navigation and it's this navigation tag here. I want it to be just after this image and I click on this image and remember there's an image, but the image is inside this a tag, that is the link that we put around it. Click it up here, click the image, and we're going to click down he and say the a tag that's actually around the outside of this image, we want to just talk to you please and say navigation. Click on him. I would like it after the thing that I have selected and there it is. The first thing I want to do with navigation is at a style to it, to get it to flip to the right because I don't want to underneath here, I want it on the top right here. Go to CSS designer and styles.css. I would like it in Global. I would like selector called nav and I'm going to use the up arrow. Remember specificity. Just means that I'm saying the nav tag which is inside the head [inaudible] inside the container. I don't need to worry about that because I've only got one nav tag for this whole document and so I don't need to be specific. I'm not going to say specificity anymore in this course because it's really hard to say. I want the nav tag please, to float to the right, float as this one here. I'm going say flew to the right and he just jumps over to that right-hand side of the page. Awesome! Now next thing I want to do is I want to put two div tags inside of this navigation. One div tag is going to be for my mobile menu, which is going to be my bigger menu that stripy line thing. The desktop view is going to be those colored buttons it say about us and contact us. Basically what happens is you have to separate div tags, one with the mobile menu and one with the desktop menu and you just say turn one off mobile view and then the other one on, and switch around your desktop. Let's go and sit those div tags over nav selected. I'm going go to Insert and I click on div on this to inside please. We've got a new div tag. You can see it. There's my nav, and there's the guy that's inside. Do we need this tics anymore? We don't. I like to delete the text here in code view. Deleting it in live view works most of the time, but I find it's a little bit easier to do in code view. You can see there's my nav tag opening and closing and there's the div tag inside of it. I need two of these. What I can do is over here I can slipped on the div tag. I can say another one, please. Just after him. I have two. Let's put in the different components and this first one here I'd like to insert an image which is going to nest inside. I'd like it to be my burger menu, which is under exercise files, images, and we're going to use the SVG version burger menu. You can use PNG. SVG is the newer scalable vector graphics version. Let's click open. It's going to say you've selected something outside, would you like to put it in there for you? You say yes, please put it in with my images. There please, because I've practiced this one already, to make it super slick for this video. I've already got mine, [inaudible] , you won't have to click replace. You'll notice it's very big. With that selected, I can say at the [inaudible] you hands actually has wanted to be twenty pixels. You decide how big you want yours to be. Awesome. Next thing I want to do is get rid of that text and like I say it, I like to delete the text here in code view. I don't need that takes anymore. I've got a div tag and it has my image inside. Let's put in the desktop version. Inside this guy, can I click on them there is that div tag. I'm going to put in something called an unordered list. This is how we describe lists, and navigation is just a list of options you can go to in a page, to select on this div, and I'm going to say HTML, I'm going to find this one called unordered list. an ordered list is a numbered list and an unordered list is a bullet-pointed list. You can see bullet points. We're going to remove those from the styling a little bit later on. What I want to do is I want to change this text. I want to say this one's going to be the about us. I'll use capitals. You don't have to return, and contact us. Might be me, contact me about me because it's just my portfolio anyway. Click out and you can see I've got two bullet points. Let's have a look at the how these are constructed. There's a div tag. Inside of it is my honor list. You can see the beginning and ending and inside this unordered list or the list items, these are the different bullet points. That's just how it's constructed and it's going to be important for when we later on and go and start styling them. What I'd like to do while we hit is to give them hyperlink. I'm going to double-click about us, about me, and click on this one he has, he goes orange, click on the hyperlink. Where's it's going to go? It's going to go to hash. Hash is just, I don't know yet. That's what that icon means, or the pound sign, you could put about-us.html and lowercase, but I don't really know what it's going to be called. If you don't know, just put in hash and that allows it to be a link, but it doesn't cause an error. You can change this later on, saying we contact me, both of them are going to hash at the moment, don't know. Next thing I'd like to do is turn them on and off at the different views because the moment you can see them all the way through mobile tablet desktop. What I'm going to do is do the mobile one first, trying to double-click this. There we go. I want you to turn off, when you're a desktop view. What I'd like to do is go to my CSS design a panel and my styles.css and my desktop view, which is global. I want to say, and I create a new selector and this one's going to be dot mobile. This is going to be a class mobile view. What I'd like to do is when it's a mobile view. This is the thing that's going to control this, mobile view and I would like you to display none. None just means yes, I can't see you. Nothing happens because of what I need to do is find the div tag that's wrapping around the outside of this image and apply it. What do I do it? I can do it down here, image selected. Now I've got my div tag selected and there's div means that dot mobile going that, he's gone. Cool. This div tag now is now called mobile view div tag. What we're saying is, when it's a global which is desktop, I would like you to display none. The problem is that it displays none all the time. That's why they call it global and not just specifically desktop. Because what it means is it means everything. It means global, means everything. Unless tab of UC is do something different. But the moment I go to my CSS and I look at my table view, my table view doesn't say anything. It doesn't override mobile view. It's a cascading style sheet, so it flows down and flows over all of these, unless they say something different and they don't, they say mobile view. We didn't say anything. That's what we're going to do. We're going to say on styles, CSS, when I get to table view, select a named dot mobile view. Again, it's going to, instead of saying none now, we're going to say you apply block, as a weighed one. It sounds like none. I think block of wood, block of concrete, something solid. I can see it now. Works for me anyway. Let's go and check it in a browser. Live views is not great. Remember, save all check a browser. My mobile menu and desktop view can be seen. It's none. Now when it gets down to [inaudible] table view, its block. blogger wood, and when it gets down to mobile view, it disappears again. What we need to say is styles, CSS when it's at the mobile view, which is my maximum of 400 pixels. Like I make another selector called dot my mobile view. I'd like to say you're display block as well. I can see you at both of them. Say, well, test there. Yes. He's not lined up. That's okay. We'll do styling later on the mechanics here at the moment so can see him, awesome. What I want to do now is create a new class called desktop view and I want to apply it to these buttons here, and I want to turn it on and off depending on the view. Let's create a new styles, and I don't want to make it in Global. I could, and I could say, I'd like you to be blocked, but it already is block. You can always see it that dam at desktop view. I don't need to restate that. What I need to say is tablet turned off. I'm going to go to my table view and click my select, and I call this one, desktop view. I did not call it desktop view at all and a couple of times, it's wicking. Desktop view and I'm going to say display, none going. Now I need to apply it to it. I select on it. Let's click on that div tag that's wrapped around the outside and it click here, click full stop to desktop has not apply it and it's not appearing. This happens a bit if you need to hit disable, and then go back and undo this and hopefully it's there. Save a [inaudible] desktop, still not doing it. I'm going to leave this in the video just because everybody, I'm going to just type it in physically, hit return. It's going to say, would you like to create something new? Just keep hitting return on your keyboard until it goes away, and it is applied. If I click on this guy, you can see there's my div tag and it's got that class applied. That happens to me a bit in dreamweaver. Just it is. Say, well, let's preview and a browser. You can see desktop view. I can see him, but when it gets down to tablet, goodbye, he is none. But it is back in he's immobile. Let's do the same thing, styles.css and mobile view. I'd like to create a selector called dot desktop. Awesome. I'd like to say I'd like you to display none. Please go away, save old, prevent a browser. Gone. They're nice. That's all we doing. What two div tags, one's called mobile ones called Desktop, and we'll just turning them on using display at the different media queries. The problem now is this doesn't work yet. We're going to go through now and use in JavaScript to make this a little drop-down button and make that work. You ready for your first bit of JavaScript. Let's go and do that in the next video. 14. Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver: Hi there. In this video, we're going to look at adding some JavaScript to take this ugly-looking desktop menu. When it switches to mobile and then when you click the mobile, it shows you the ugly desktop version. This little toggle click on and off. I realize the styling is not great and there's a few little problems with layout, we'll do that in the video after this one. What you really need to do is pay attention to the magic clicking showing thing we're going to do in JavaScript. Let's go and do that now. First thing before we get on and start making it, is what is JavaScript? There's three components to a website, there's HTML, CSS, and JavaScript. HTML is an easy one, think of it as the noun. It is the things that appear on the page, it's the objects, it's this button here, it's this image, it's this text. Those are all in my HTML, and those are things. Then you've got your CSS, and this CSS just describes the styling of things. This is my background color, this is how much padding it's got, it's the pretty stuff, it's the adjective. I consider them, HTML as nouns, CSS as adjectives, the describing words, and then you've got the verb, which is JavaScript. What happens when the user clicks this? It's the doing of things. It might be that the user clicks a button, like in our case here, this menu drops down, or maybe when a user clicks the "Play" button on the video, or drags a slider, or realigns things on a page, so it's generally the user interacting somehow with your website, JavaScript happens. When I say we're going to be learning JavaScript, we're actually going to be using something called jQuery. JavaScript is a lot more complicated. What some clever people did is they created this thing called jQuery, and what it does is it's a library build on top of JavaScript to make it easy for people like us. Instead of having to write lots and lots of syntax out, we can use lots of simple language that makes things better for humans, and it does pretty much everything we need to do in terms of front-end web design. We're not learning essential JavaScript, we're learning something called jQuery, which is just easier language used on top of JavaScript. Let's go and do that now. This little snippet here is going to help explain what we're doing. I wasn't sure if I should leave it in the tutorial series or not. I'm going to leave it and probably just to hopefully explain instead of just following me blindly. We're going to figure out what we're doing here. Basically, what we're doing is I'm previewing this in Chrome, and I've just got some nerdy stuff over here to help show you. Basically, what I would like to do is this little navigation here, when the user clicks it on their cell phone, I would like to use JavaScript. When the user does something, I'd like the JavaScript to add a class to this little stripe menu called Expand, and that'll expand the menu out. Because at the moment, there it is there desktop menu, got one class I'll probably call desktop menu, no other classes. What I'd like to say is when it's clicked to magically use JavaScript to inject a class into here to make it expand. Watch this. Keep an eye on this thing here. When I click it, I'm a user, using my mobile phone, I click it, and magically, this extra class, there get away that gets added. Then that little class there we're going to define in our CSS to say, make it nice and big and show us the menu there. That's what we need the JavaScript do. Let's go learn how to do that using JavaScript and jQuery. The first thing we're going to do is we're going to create that Expand class. We're going to put it in our styles.css. We're going to put it in Global, and we're going to say, and I'll select this, we're going to create it. It's going to look all dot. Remember, it's a class we're making up. It's going to be called Expand. What we would like this thing to do is display, and we're going to say display block. Your little job as a class is when you're applied to anything is to show things up. But what we're going to do is get that to apply with JavaScript, not hard-coded like we have for everything else. The next thing we need to do is create our JavaScript file and connect it to our index page. Now when we did it with, remember, our styles.css it happened automatically because we've got this cool little CSS designer panel. To do it with JavaScript, we do it a little bit the long way. Let's go to File, New, and let's go to New Document, let's click "JavaScript", and let's click "Create". It's called untitled. Let's save it. Where are we going to save it? We'll put it inside of our Desktop, inside my files here called Dan's Awesome Portfolio. I could save it in with the rest of the files, but it's really common to create a folder called js. Inside of that folder, I'm going to put in this file called, it's really common to call it Scripts. You can call anything you'd like, but most people call it script.js. Let's click "Save". Now let's go and close it down. We just made it. We closed it down because now we need to link it to this index.html file. You can set up here my index and Source Code. You can see here, remember the styles.css, this was done automatically for us. We need to do this manually, so we need to put a return in, and we need to go to Insert and we need to go down to Scripts. Call it Scripts again. It knows it's going to the js file. Find Scripts, click "Open" and there you go. Those are linked together. Hit "Save", and you can see there's my styles.css and now my new little scripts file. This burger menu up here is because it's an SVG. If you use the PNG version of our little menu before, this won't appear there. Just ignore them for the rest of the course. Go to script.js, and now we get to add the JavaScript, or in our case, jQuery that controls that turning on and off. I totally lied. We're not ready to write JavaScript yet. What happens is your computer, or at least the browser that people watch your website on, will understand JavaScript just fine, but it'll get to the jQuery, which is basically shorthand for JavaScript and go, "The hang are you talking about? This is not JavaScript." What we need to do in our source code is we need to up the top here tell it where to look for, for the definitions of jQuery, and you do it using something called a CDN or a content delivery network. There's a few of them online. We're going to go to Google, and I'm going to type in jQuery CDN. There's a bunch of places you can link to. You can go to I use the Google one. Where is it? Down here. Where's Google? Here it says this is that little link for jQuery. I'm going to grab it all snippet. Actually, starts up there, grab all of that chunk. What I've done for you is I've put it in your exercise files and that code is something called jQuery CDN. You don't have to come here. You can just copy and paste my one. I'm going to copy it, and all we do is dump it in here. Hi everyone. My name's Taylor and I work for Daniel. I just want to jump in here and let you guys know that Daniel made a little bit of a mistake when he imported the jQuery library into this file. It's actually going to be around the other way from what Daniel has it. Currently, he calls the scripts file first and then the jQuery. The scripts file actually relies on the jQuery for it to run correctly. If you don't have this around the right way, your navigation may not work. It's important that you just switch it around. You grab the jQuery and you put it in above the scripts. This should eliminate most of the problems that you might have with your nav bar, with it maybe not working. Also the completed files of this tutorial will contain the correct file order for this code. That just tells us where the library is. Why do we just not have it locally like we've got script.js and our CSS on my machine? The reason is because this is a really big library, and the benefit of using, say, the one hosted by Google, it means that, say, a user is surfing the net and they go to 10 sites that all use jQuery because loads of sites use it. When they get to your site and the browser goes, "We're going to have to load jQuery," and goes, "Don't worry about it. I won't load it because I've already loaded it from this other website that I was at last." That's why we use a CDN and a link to a website rather than having it actually on your machine. It just means that Google is going to have it online all the time. Loads of people use it and that you don't have to download it like a millionth time when they get to your site because it's just that same old one that's been linking to there again, so the browser of the user doesn't bother going and learning all this new language again. It's already there. It already knows it. Long story short, just copy and paste that, stick it in the top, and it will help. Let's go to script.js. In here, we're going to learn a little bit of jQuery. Just so you know, when you are designing websites, nine times out of 10 you're going to be using jQuery rather than pure JavaScript. The first thing we need to do is tell it we're using jQuery. You can see the little coding hint helping there. What we're going to say is we're going to put in lots of brackets and lots of curly braces. Let's get ready for them. First bit is we're going to put it in our brackets. Inside this bracket we are going to write the word document. Thank you code helping. After the brackets we're going to type in ready. All this just means is that jQuery and don't load until the document is ready. Because what can happen is jQuery can start doing its thing before the document is even loaded or the whole page is loaded, and it just causes lots of errors. What we did say is wait for the document to load and then do your thing, and you'll find you don't get any errors. The next thing we need to do is tell it to do something. In brackets we say, "Do something please." But we don't call it, do something please. We call it a function. Just think, I would like you to do something, but code language it's called a function. Now we put in a set of brackets, set of curly braces, and at the end we put in a semicolon. These things here, I never really do anything with these first set of brackets. These are attributes that normally are just left empty. These curly braces are the really important parts. We're going to put all the things we want to do inside of this. This last little semicolon just means finished here. I'm done. I've finished writing my jQuery. Don't go on any further. All of the good stuff goes inside these curly braces. I could type them out here, but it's going to look a little messy. I'm going to undo, and what we'll do is put a return in between, and we'll just type them in here. Now I want to say again, I'd like to say I'm using jQuery. But instead of saying that jQuery is a long word and what the shorthand is $. So $ just think is the shorthand for the word jQuery. We're going to replace this one up here, because you'd be weird if you are using the word jQuery if one uses $. We're saying, "jQuery, I would like to do something." In this case, we're going to use brackets again. Inside of these brackets, I would like to add apostrophes. Not quotes, apostrophes. Because what I'd like to do is I'd like you to do something with the class, remember period for class, something with the mobile view. What would we like to do with them? I'd like to look out for a click. When you're clicked, I'd like you to brackets, do something. Remember, we don't use the word do something, we use the word function. Same but a crazy syntax. Brackets with nothing in it, semi-colons where the good stuff goes and at the end, we put in a semi-colon to say don't go on and post please. In with the good stuff goes put a return. Same as above, $ for jQuery. Same thing with the class. We're going to put an apostrophe, a dot, desktop view. What would we like to do to this desktop view? I'd like to add this thing. Instead of a click, this one's going to have a toggle class. That toggle class is going to toggle this thing called apostrophe expand. Remember that class we made earlier. Weirdly, we don't write in the full stop for this particular one. Just leave it off. Otherwise, it doesn't work. Get to the end here and say don't read anymore. That is going to hopefully make our menu work. Let's backdate it. We're going to say there's an expand class that I have. I'd like to toggle it on and off, desktop view when mobile view is clicked. If that was a mind bender and there's commas and apostrophes flying all over the place, I've created a code. You can copy and paste in your exercise files. You can go download those they're free. That is writing some jQuery. Let's go see if it works is the main thing. Remember, save all, jump into our browser shrink it down, click the button, and it doesn't work. I have to pause this and figure out why it's not working. I'll be right back. I'm back and I figured it out. Happens to the best of us. I really want to re-record the video and make me look super awesome, but I also want to let you know that it always happens. It happens to everybody. What I did was under the styles.css, it's actually working, I tested it, and the expand class is getting added. There's nothing wrong with the jQuery, it's the styles.css. What's happening, I put this in, I wanted to expand in desktop, but I didn't actually need this thing because it's in Global. I need this to be in tablet and in mobile view. I'm going to grab this, you're in the wrong place, cut them. I want you to be in. You can see my media query here. This is for my maxmin for tablet. So just before the ending of the close bracket see there's the opening, and there's the closing there. I'm going to put them in. I need a copy in there and down to mobile view. I needed a copy in there. Now, let's go and test. Now, click on it. It's still not working, hit refresh. Now, it's working. Click our jQuery works. It's still looks ugly, I know, and there's some layout to be done, but we'll turn that into another video because this one, dang, could be the longest video I've made in my video career history. Yeah. That is our jQuery, clicky, mobile and desktop drop-down menu thing. Now let's make this menu look nice. 15. Styling our hamburger menu getting our ul menu to stack side by side: [MUSIC] Hello, lovely Dream weaver people. In this tutorial, we're going to transform these ugly bullet point navigation buttons into these good-looking red and green ones. Ignore the font, the font is still ugly. But we'll do that in the following video. But let's do the buttons now. First thing that we're going to do is get rid of these ugly bullet points. We do that by styling this thing here. What thing we styling? We're going to style the Li, which is in the ul, which is in my desktop view. Let's go and do that. Now CSS Designer panel, do it my style.css, I'd like this to appear globally. Let's click on selectors. Because I had this thing selected, it's kind of pre-filled but it's fit in and it's kind of what I want. But if I go up and down, makes it more specific, I said it wouldn't say specificity anymore, but the there you go, so down means you get more specific up gets less specific. What I'd like to do because if I left it there and said I just want to style the li's inside ul's that would apply across the whole website anytime there's an unordered list. I might have bullet points just in the normal bullet copies. What I want to say is in the down arrow on my keyboard and to say I want the li's that appear inside ul's that appear inside this class called desktop view. Do I need this A tag here? I do not. Why? Because I'm just playing around with the li's, not worrying about the A tag. It's the li that gives it the bullet point. Click return. It is my first style and I'd like to say and text. I'd like to go down and try and find text decoration. I'd like to find list -style -type: undefined. I want to set it to none. You see the dots disappeared. Great. We're just going to slowly work through selling different, what's called compound selectors. Remember selectors we've dealt with classes before have the dots in front of them. These ones are called compound because they are bits. There's a bit of class there, and there's bits of these regular tags here. So the compound put's everything kind of compounded together. You don't need to remember the word compounded anyway. At the moment, these are stacked on top of each other. This is their default state for li's, and that stack on top of each other is called block. The default these are in a display called block, which means they stack on top of each other. We want to change that. We would like to go up the top here, to layout. We'd like to find display. And instead of block, we're going to pick inline-block and that stacks them side-by-side. Easy. If we were styling these all the same color, I could go into my background color and change the background color. My problem is that I want them to be different. Let's check out my illustrative file. You can see an illustrator, I wanted it to be two different colors. If I stall the li, it means that both going to become red or green. That's not what I want, I want them to be different colors. Let's jump back into Dream weaver. Let's create two classes. We'll create one called red button and green button and apply them to them. The reason we're doing that is that we can re -use that green button or red button because there are going to be other buttons on our site that we're going to use this for. Down here, it doesn't matter what you've got selected, but it's going to go into styles.css, global and then select this then okay plus, forget what's in there. We're going to create our own class and call it btn- and we're going to call the first one red. Why do we call it btn-red and not red btn? It just means that they're going to be stuck next to each other in the CSS here button green, button red. We could have a button blue it and it's just easier to find them that way. Click on button red and I'm going to get a back ground, and I'm going to pick a color. If you've done my illustrator course, you would've known how to export the CSS. We're going to quickly look at this now. In illustrator here, I'm going to click on this background here. I'm going to go to Window, we're going to go to CSS where I use CSS properties. It's going to tell me what the background colors. That's the thing here I want. I'm going to double-click it, right click it, click Copy. If you did do the illustrated course, you might have exported this as a text document. But because we are both the designer and the front end web developer, we are going to just copy and paste straight from the Illustrator file. I've copied it. Go back into Dream weaver then here I'm going to click on background color. We're going to go back to our hexadecimal numbers. You can see in illustrator, there was actually both options. I just find these easier just because they're simpler codes to copy and paste. In background color here, we're going to go back to hex and we're going to make sure that we've got the hash in front of it. I didn't copy that from Illustrator. In return, that's my little background-color. I'm going to apply it. What do we apply it to? Do we apply it to the a tag? I don't think it matters. We probably run into problems later on. Let's hope we don't. We're going to go into here and go btn and there it is there red, lovely. Let's go back in the color red, not the padding we need, but we'll do that in a second. We'll do this guy next. We'll create a new selector, everything's selected correctly. We'll call this one dot btn. We'll call this one green. Same thing. I'm going to jump into Illustrator. Here in illustrating I click on this guy grabbed that guy. Copy, for some reason I can't do command c for copy will control c on a PC. I don't know why. You might be able to, but in here I'm going to go this one. I'm going to go to my hexadecimal numbers, leave hash in there. That's my green and apply it to this one. Here we go.btn. That's the other reason we call it btn because they were all grouped there when we type in b. Lovely. We want to add some padding to the top and bottom of these buttons. This is where it's a bit of trial and error, I promise you, I didn't know off by heart, I just kind of tried both options of styling both this one here because you're like I can just still style it li and add some padding to this. I did it knowing that didn't work so we had to go for a different method. Let's go for the broken method. Always a great one to start with. I've got these li's that are inside of my ul's, which are specifically inside my desktop view, which is great. They're really specific. I'm going to say I'd like some padding. I'm going to drag it up. You can see it's not really adding padding, it's just pushing it from the top. That's when I went, not bad. See this trashcan here turn that off. What I decided was is I clicked on this guy and I went new style and I'm going to make it more specific. I press my Down arrow. It needs to be the desktop view li's and what I needed to do is this a tag. Down the bottom here you can see there's an a tag inside an li, inside a ul. I leave this in here as well because I'd love to just tell you the answer, but trust me, this things we think definitely I'm a 100% sure that it's going to work then it doesn't in the end. You have to kind of look at the tags and go, Okay, what else could I try? In our case, the active link, the hyperlink, which is inside the li, which is inside the ul, which is inside desktop view. This one's going to work. I hope it's going to work. I'm going to go to the top one layout. I'm going to add some padding to this and just drag it up. There you go. That one's working. What is it? It is 13 at the top and bottom 13 and it is 43 at the left and right. 43, again, my keyboard seems to be typing in double Fours, 13 to the bottom, and 43 on that side. You can see those on my little buttons working. Awesome. Next thing I want to do is, I need kind of move that up a little bit and you can use minuses. So just depending on this one, we just use minus margins and it doesn't work. Hit the trash can. It's a bit weird sometimes like work out is at the a tag inside the li which is inside the ul. If you get frustrated, don't worry. It's a general frustration all industry around. Maybe I can do it to this one. The li ul and I go minus in here. That doesn't work either and so I work out that I need to go to the actual desktop view. Let's go selector, there's one I've already got it's called desktop view. If I do it to this one, you can see it starts working. I'm going to click and drag because I wasn't sure about how that worked, cool when I close for that one, minus five pixels that goes up. Sometimes you like, is it this one, is it this one, why is it not? You end up having to create a lot of classes and delete them just to figure out which ones controlling it. We're going to do is a single. Next thing I want do is remove the underlines. The underlines are controlled by, you can play around with all of these, but it's actually the, a tag because that's specific for hyperlinks. We're going to go to that one, we're going to get a type, and we're going to go down here to take text decoration and pick none. Okay, by default it's on underlying. Cool. Let's go to the font color before we go into the same one, hopefully and the font color comes from illustrator. I click on this text here and there it is. There's the font and the color, and I right click it, click copy, back into Dream weaver and we're going to go to font color. Hash leave it there. It's kind of like it just an off-white. The next thing I want to do, and to make these buttons work, is want to apply it to the font. At the moment there's Times New Roman, which is not going to work for me. I wanted to look at using fonts, something a bit different from Arial and Times New Roman and the built-in fonts. We're going to look at that in a separate tutorial, which is right after this one. 16. How to add different fonts to a website in Dreamweaver: Hi there. In this video we're going to change this ugly Times New Roman font to this lovely Open Sans Condensed font. We're also going to have to change the spelling of this. I've just noticed that. You've probably been in this whole course going, "Uh, change it?" I'll change it before the end of this course, I promise. Let's go and add fonts using Dreamweaver. So what I want to do now is to change the font that's in here. Now, I could find, say my desktop view and you can see ul li and the a tag. That's the thing I want to change. How do I know it's that one I want to change? I got to type here and I say font-family and I just pick another one. I know it does change. I don't want any of these fonts that are in the defaults, okay, so I'm going to delete them, but that's how I figured out which one needs to be changed. But I could change this one and that would work. I could install my new font, which is going to be Open Sans Condensed. But the problem with doing it that is that'll have to do it for this. Everybody that takes to my whole document, is going to have to go through and I have to find the font-family for them. What designers do, especially at the beginning, is they'll define the font globally. We'll say everything in this document, everything be Open Sans Condensed. So you pick whatever your body copy font is. I'm going to look at my Illustrator file. That is a special use case, it's there for the top, but I use the condensed font here for the type and down the bottom here, and I use it on preceding pages here. That's the Open Sans Condensed. I've decided that that's my main font. I'm now going to go through and set that as my default. You do it in Dreamweaver. So in Dreamweaver what we need to do is we need to style the body tag. The body tag is, remember if I click inside anyway here, the nav, I'm inside the header, which is inside the container, which is all inside the body. The body is everything that I see on my page. Remember the header is everything that the computer sees and the body is everything the user sees. If I stall this, everything in here is going to be Open Sans. To do it, I'm going to be on all sources- no, I'm not going to be an all sources. I'm going to be in styles.CSS. I'm going to do it globally and I'm going to click- we don't have a body tag yet. We've got to select this and we pick a body. Body is one of those tags that already exists and doesn't need a full stop in front of it. Just the ones we create, there are classes that need it. Body, we're going to go to type or text and we're going to go to font-family and we could pick one of these. The only trouble with using, say you do like Gill Sans you're like, "Yes, Gill Sans is good." You can see he comes along for the ride because everything is being changed to Gill Sans. But what's actually happening is it saying, "Hey, you person that's visiting my website, do you have Gill Sans on you machine?" "No." "Well, do you have Gill Sans MT?" "No." We'll then do have Myriad Pro? " It works this way down the list until it finds one and normally it ends up at Arial. You don't want that. You want more control. You want to actually say, "Use the font I mean, not just guess at a few of things." It's very uncommon to use these now. So what we're going to do is we're going to bin Gill Sans, goodbye. Okay, and we're going to put in a new font. Let's go up to font-family and we're going to go to this one called Manage Fonts. Now, this loads something called Adobe Edge Web Fonts. All these, is that a fonts from Adobe that they've given away for us to use commercially for free. It's got some helpful little search options at the top there. We're going to use stuff that we've designed out of illustrator. You can see in here in illustrator. I've made sure I picked web fonts when I'm designing. If you're on illustrator, don't go off and pick a random font from your machine, make sure you're using web fonts. I've done that. Both of these fonts are available as web fonts. But if I haven't, I can go through here and say, "I want to look at some heading fonts." It gives me more heading fonts. Say you want some body copy fonts, that's this one here. It's more like standardized fonts. I'm going to turn them both off. You can pick a script font, you can pick serifs. You can decide just to help you pick a style. I'm going to turn those off. I'm going to search for a font. We're using Open Sans and we're using the condensed version. Why? Just because it's really good for headings, especially because as a body copy font, because it's skinny, you can fit a lot of characters on, so really long headings are more likely to finish on one line rather than breaking into two. But that's totally a style design choice as well. What I'm going to do is I've picked this, hit the little tick in the corner, and you click Done and nothing happens. You activate it, then go to font-family and it will appear down here. "Hello?" Now, click it on, and then it will appear, cool. A little warning will appear probably, mine's been disactivated. Disactivated is not a word, deactivated. It just says we've added a couple of things as well as a warning, It just says, we've had to activate the normal and the font weight is 300. It's just said- like normally those wouldn't come on by default, but it's just done that for you to make this font work. The other thing that's happened is, and like, that's it, like we've got a font going. You don't have to worry about anymore. But just to let you know you've got this thing up here, so in my index and my source code, and at the top here. Remember we put it in the link to JavaScript and the link to the CVN and our style sheet. This thing is just been injected by Dreamweaver for us to make it work. Basically, what it's doing is it's going off to download the font. You can see edge fonts, Open Sans Condensed is being loaded for us, so we don't need to do anything with it. We just have to leave it there. Let's do a save all, it's just tick. It works in our browser. Awesome, there he is. "Hello?" Get on the bottom here. That's not quite right. Well, that's totally not, right, but don't worry if yours is still broken like this, we're going to fix that in the next video as well. There's a few little things we need to do to make it work. All right, let's get on to that next video. 17. Fixing the style of the mobile burger drop down menu in Dreamweaver: The first thing we're going to do is a desktop looks fine, a tablet that need some work, that it has some real problems down here [inaudible]. The biggest one is that you can see there's not enough physical room to fit. It's okay at the folder, but you can see when it gets close to here, it ended up just trying to occupy the same space. What I'm going to do is I'm going to try and shrink this logo. To do it, I'm going to click on the Logo. I'm going to go to my sources. Now, you will notice that these things just appeared, it either went in there before. That is from the font that we added from the Adobe whip edge fonts. We just ignore these for the rest of the class. Fun. What I want is in styles dot css, and we're going to put it in our mobile. We're going to create a selector it's guessed exactly what I want. I want to style this image that is inside an a tag. The a tag gives it its link to, back to the homepage and inside the header, which is specifically here. If you've got more than one image in this data, it's not going to work. You might have to add a class to it, really specific one, maybe the logo class and install that, but because I've only got one image inside the header. This is going to work okay written. What I'm going to say is width, getting associated to percentage. I said to maybe 80. Keep putting double digits for me, and I complained about that the whole course. Eight three percent. Why did was it going to be 83 double digits. Because i noticed that already. What that means is that whatever the entire width is isn't a guarantee 80 percent of its original size. The cool thing about that, as you can see when it gets down here, it's going to keep scaling. Now, most mobile phones, are going to be smaller than about 320. If you do have mobile phones that are smaller than that, it's going to get really small. Am I going to develop a special workaround for them? I'm not. I'm just going to say that 300 and above that works and that's most of the cell phones in the world. Next thing to do is we'll do it a tablet first. Is that when I click this, the null sticking on top of each other side-by-side. You could leave it if you like them side-by-side, but I want to stick mine on top of each other. What we do is under styles dot css and now tablet, we say probably this item here, this top view UL, LI. We can say I'd like you to display. Remember we said B inline-block, which got it, side-by-side block. We'll just put it on top of each other. We'll add but a petting just so that they don't sit straight on top of each other. Nice, that's a dumb for tablet. What we'll do is we'll, you can see we don't have that class here in the mobile view, so we'll just duplicate it. You can duplicate it, go duplicate, do media query and we'll put it in the mobile one as well. It's, and both of them. Nuts. Next thing is the bigamy and you ends up pushing to the left here. I played around with floating rides and lining rides and it just didn't work. What I worked out is that these two are inside this nav mobile view and desktop view classes inside this nav. They can't be inside the same nav, that is going to occupy the same space. What we need to do is grab the mobile, we're doing encode view here was going to grab the mobile div, all this whole line, cut it.. Above, I'm never going to paste it. There is, they are going to delete a few empty spaces so it lines up. Course it's lost a bit of it starting, it's lost its flight. What we're going to do is we'll go to styles dot css and we'll say, under the view, will make one, there's mobile view and we'll say flipped to the right please. Give me a second. That metalwork. Buttons pop out what I might do and a mobile view here, I might get all the text, to align to the right as well. But I also might do is, I don't know, it's annoying me that these guys aren't aligned on the right. I want that disc top view. In tablet and desktop view, I would like you to align to the right. It looks a bit better. I've done table-view. Now we've got to do it for mobile view. Down here. All those things don't work anymore. Let's do the same things in mobile. I'd like the mobile view to align right, or actually float to the right and the desktop view, I'd like you to get the text to align to the right. Nice. We're getting there. One of the last things I might do is that the padding at the top of this is driving me a little mad. What is it? This thing he hands the image that's inside my mobile view on the tablet. Do I have something a little work, may I involve you? That'll probably work. Let's give it a go. It just adds a margin to the top drag mount and it does line up. Now I'm dragging back and forth a pixels co, so down at mobile and probably have to do the same thing. Occasionally the styles flow through that tablet onto the mobile. I'm going to save all proven the browser to make sure that it's actually true. It looks good there. Awesome. I'd say we are there and that is a win. That is how we create our j-query drop-down menu, all by our lessons. In the next video, we'll show you how to copy and paste it and do a little bit of cheating. But and you proud of yourself, did you make it work? If you didn't remember that at the end of every video, I save a version of where I'm at. Depending on where you got stuck, you can look on the screen here somewhere either in the bottom left or in the comments. They'll be a link to the completed file for that video. You can compare yours with this one, just see what might've gone wrong. But if you have done it and you have fixed it and you have got a winking. I am very impressed, because it is very hot, but great thing is next time you do it, you can copy and paste the code you've made yourself. My friends, let's move on to the next tutorial where we just copy and paste it for the people that have cheating. 18. Planning for our Dreamweaver template: Hi there. In this video we are going to talk about templates. We are not going to actually design the template in this particular video. We are going to do it a little bit later on, but it is about this time that we really need to consider what is going to be part of the template and what is not. Let's look at our design in Illustrator. Looking at the design, there are some bits that are going to be part of the template. Generally, it is always going to be the header and the footer and that is true of our case. This is going to be the same on every page and it is the center part here that is going to be unique for every page. This is my homepage. You can see down here, same header, same footer, but it is this middle part that is different. I am going to make sure that it is part of the template, make sure the footer is part of the template. I'll design those now in Dreamweaver first and then turn it into a template and not until then before I start designing these inside parts. We designed these inside parts. First, we are going to have to pull them out, make a template and try and put them back in and just makes an extra work for us. The other things that will be part of the template is this little green box here. I don't want this image to change. It is going to be like this on all pages. I am going to make that part of the template. If you did want that to change on every page, you are going to have to make that a part of what is called the editable area, like these guys. Just identify from your design what is part of the template, design that first, and then later on we will make editable areas. The other thing to consider is do I actually need a template? Templates add a level of complexity to a site. The bonuses is that when I make a change to my template, say I add an extra menu item, it goes through every single page and updates it automatically. Super good if you have got a site that say 50 pages or more. But if you have got like a 10-page website, I might think twice about adding a template. Why? Because at adds that complexity for a tiny bit more speed. More complexity, a little bit faster, maybe not worth it for a really small website. But we are going to do it for this one because we want to be all efficient and official. Let's have a little look at what is going to be created in this template. This is the one we're doing. We're going to be working towards this. Let's go to full live view, that is what it is going to look like. It is going to have our header that we have done, it's going to have this big background image and there is going to be nothing, nothing, nothing and then a footer at the bottom. Let's go and create that before turning it into a template. 19. Add a background image that is outside our main container in Dreamweaver: All right. In this video, we're going to edit this background image and it gets all stretchy and has a specific height and then gets a bit smaller and gets turned to mobile. Let's go and do that in this video. First thing, let's change the background color. It's currently white. In Illustrator it should be with the selected, go to CSS properties, and it's going to be yay, yay, yay. Back into Dreamweaver and what we'll do is we need to change everything, okay? Remember the "everything" tag is the body tag. Body is everything that we see. So we go and change that, we can change all the background color. Cool. In styles under GLOBAL, we actually have a body that we made earlier, we did it with the font for everything. Now we can do the background for everything. Jump to background, background color, leave the hash there, put in a color, return, and now everything is kind of gray color. Next thing I want to do is, I want to do this big image in the background here. Okay, so how high is it? It is this high here. You can see my CSS has given me the height of the actual image, but it's actually clipped inside of there. That's the actual height that I want, so I'm going to grab that. Where does this go? In the design here, you can see it's actually wrapping around my header, so technically, I should have done this first right at the beginning of the course and then put my navigation in there. I find that if we start with the real background stuff for the course, we'll get into too much complexities, it is too early, so we're going to do it later on. It's going to show us how to retrofit a div tag that we should have done earlier. It's pretty easy, we just need to wrap it around this guy. Let's go and have a look. It goes to the edges and I want this thing to kind of go on for the entire background depending on how big the size of the screen is. Let's do that in Dreamweaver. Let's click on my "Header", make sure you have the header selected, and actually if I wrap it around the header, it's still going to be inside this container. This container size be, I think, 1200 pixels wide. I don't want it to be contained in there either because that's pretty much what holds the header in place. What I want to do is, I want to put it just outside this container, so we need to collect the container. The container's selected so click here, click in the container, and I want to go to insert a div, and I want to wrap it around the container. Cool. Now you can see down in here is div, it's got no name yet, so let's go and create a CSS class, and then we'll add it to it afterwards. CSS Designer, Styles, we'll make it in GLOBAL, we'll create a selector. We'll call this one hero-image. Cool. Let's give it some basic styling so we can see it. First of all, it needs a height because the moment this wraps around the outside of this header because there's nothing much going on here. Just give it a height so we can see it. The height we got from Illustrator was that, 653. We'll add a background image. Down at images here, this is where we just do background color. Just underneath, there is a path. Click on "Browse for the image." Go to our exercise files, find images, this is one here called hero-background. Now, nothing's happening over here because remember we just created the style and we haven't applied it. There it is, there. Click the "div", if you've clicked out of it, you need to click back on this "div" that's right at the beginning here and apply that class to it so you hero-image. Awesome. Let's preview in browser. Maybe save all first, check in the browser. It kind of works. It's wrapping around the outside and it's the right height. It's just repeating. If you had a smaller screen, you might not see the repeat, but if you have a really big screen eventually it will repeat over and over again. That's what background images do by default. Let's go and turn that off first and check it. It's back into Dreamweaver and let's find our background image. Here, image background, there's this option here that says repeat. Background-repeat, click on "None". No repeat and save all. Test in the browser. Awesome. It says not repeating. The other thing I'd like you to do is to stretch to cover the edges here. I want to keep it the same height. I want to stretch it out and there's a cool feature in here called cover that will help you when it adjusts. It will stretch to whatever size the screen is. Let's go and look at that in Dreamweaver. In here, it's an option that says background size, click on the word "Auto", and pick cover. If I disable and jump back into my browser, awesome. What it's going to do now, as you can see, it kind of stretches to fit and when it gets to its height, maximum height, it stays there. It's always going to be nice proportionately in the background. The trouble with this is that you can see some of it gets cropped off when it gets to the biggest, at the top there. Cool. That's our cover. What I'd also like to do is, you can see, I'd like the image to be centered. At the moment, it's kind of just using that left as a default and I'd like to get rid of the padding at the top. First of all, let's get it to center. Return to Dreamweaver, into the one we call background position, Click on the percentage sign and click "Center". Save all. Check. Now it should be. You see? That actually works from the center now rather than sticking to that left. Let's get rid of that. Consider the border on the outside, that's true of every website that gets created by default because the body tag, remember, we've stalled the background color and added a font to it. By default, it comes with some padding. Actually, some margin that goes around the outside. That's just there by default. We just need to override that in Dreamweaver. Find our body tag. Here it is there. Pick "GLOBAL body" and just say up here, under "Layout", say "margins". It has that all the way around. We're going to link this together and just say, just manually type in zero pixels. You can see it all disappeared. You think because it says zero there, you'd think it's set to zero, but it's not. It just means you haven't done anything. I'm just starting it somewhere and then starting at zero. You have to actually type in zero and hit "Enter". Now it will be part of the CSS. Save all. Check in the browser. You can see now it [inaudible] next to edges. One last thing I'll do is I wanted that to be a little bit off the top. What we're going to do is, there's a couple to take, we get the header to have padding at the top, or because we've got this hero-image already selected, we can put some padding on that. Let's do that one. Let's go to hero-image and let's have a load of padding. I'm just striking it up. How much? I'm not sure. Save. Check it. Yeah, it's okay. My only problem is that background image is a bit dark. I might go and lighten that up later on, but it's working. It looks good. One last thing I need to do is if I look at my example file, you can see here, this one was actually just my tablet version, same height. But my mobile, I've actually shortened it down a little bit because the fonts got smaller and the last is a little bit different. This one is this height, 526. Let's go and put that in. Our hero-image is in GLOBAL. What I want to do is I want to make another one in the mobile. Max height is 400, select as hero-image, you might have to type it in and the height for this one, it's going to override what we've currently got and put it in. Nice. Save all. Check in the browser. Browser even, then down, down, down and then gets bit smaller. Nice. You don't have to adjust these. You design it in Illustrator and in best intentions that's going to be awesome. Then you might have to do some height adjustments, but ours is working all right at the moment. The next thing we need to do is add our main content box. We're going to do that in the next video. 20. How to use the HTML5 main tag in Dreamweaver: [MUSIC] Hi there. In this tutorial, we're going to add this main HTML5 tag here. That's where the most of the copy goes for the website. We're going to make it nice and big, we're going to give it a minimum height, and we're going to it make it green just so that you can see it. I don't like that green. It's not going to stay around. Let's get on and make it. There are three main chunks to our website. There's a header, which we've done, then there is a main tag that goes in the middle, and that's all about main content, and there's a footer. We've done header. We need to put in main now, and we're just going to put an empty main box because we're going to make that box the editable thing on our website so it can generate new pages and put unique content inside that main box, but we need the container first. We're going to put it after header. I'm going to click on my header, make sure it slips to down there and we're going to go to Insert. You can see here, these are my main structure to my website. Header, navigation, we've done. We're going to do main and footer in a second. Let's put in main. It's going to be after my header, and there is my main box. We're going to leave that text in there. It's going to help me identify where that box actually is. Now I should go through and add my foot because it's meant to be directly underneath. The only trouble is if I look at my design here and illustrator, my footer is right on the bottom here and it's designed against a white background. It's going to be a little bit hard for me in Dreamweaver to design this thing against this green background. What I could do is add some height to the main box. I can say you can be a 100 pixels high just so that it pushes down and allows me to design at the bottom here. The only trouble with height, is that it's an absolute figure. If I say it'd be 800 pixels high, and my design later on tries to go big, say 800 incorporates this just fine, but then on another page that I'm designing, 800 when it comes to about here, but there's image wants to go heaps bigger and that causes loads of problems. That goes, "Well, I want to be 800." and the image goes, "Well, I want o be bigger. " and there's a big fight and things start spilling out all over the place. The way to get around that, is to use something called minimum height. What you say is, I want you to be a minimum of 800 but you can be a bit bigger if you liked. Be as big as you like, actually. It's going to set a minimum of 800 by maximum of infinity. That's a really good way of sitting heights when you are designing templates. You're not too sure how big a box needs to be, but it definitely doesn't need to be this small. It needs to be a bit bigger than this. We're going to do that under the CSS Designer panel and then click styles and GLOBAL and nothing is actually clicking. Why is that happening? It's because in between making these videos, I was doing some other work and I switched mine to Current. I like Current. It means All is how we've been working in this course. Current means that if I switch it to Current and I click on say that, it switches to the style that I have currently selected. But we're going to slip back to All. Current is great when you've actually got a site and it's finished and you're actually getting pretty good at this, but we're going to click back to All for the moment. style.css, we're going to put it in GLOBAL. We're going to create a style for main. It didn't pre-fill it in. Remember, we've got full stops in the front of the stuff that we make. The stuff that already exists, like this tag main, we didn't name it. It just existed already. We added it. You don't put the period at the front there, just straight old main. We're going to say main, I'd like you to have a height, not that one, we went to minimum height of 800 pixels. That just means it's going to be nice and big all the way down to the bottom here so my footer afterwards is going to have space to go in there. What I might do just to make it obvious for you in this tutorial, is give it a background color of enough green. Just why I'm going to use, actually, the RGBA so I can use a bit of transparency. Why am I doing this? It's just so that you can see it when I preview in a browser and you can see with the main goes. Let's preview a new browser. You can see this is my main box and it goes all the way down to here. We'll remove that in a second. I said I do this for you, but, often, I do this when I'm constructing a website. It's really had to know what tags start and finish. If you add a background color, sometimes you like, that's where that guy goes. We'll remove them in a sec. Next thing we want to do is add the footer, and we'll do that in the very next video. 21. How to add the HTML5 footer tag to a website using Adobe Dreamweaver: Hi there. In this tutorial, we're going to add our footer. This is our top, this is our nice little footer. It's going to have two little divs inside of it to float our social icons to the side. We're going to get our copyright to go to the right-hand side. We're also going to add links to all of these, and this one's going to be cool, when you click it, it's going to open up your e-mail account. Seeing this on e-mail. Let's go do that now in Dreamweaver. First thing is, is where am I going to put my photo. I'll put it just, I've clicked "My Main Tag", and I'll put it just after that. Let's click on "Insert", and under here there's one called footer, and I'll put it after, and there it is at the bottom here. You can see, there's my main tag, and then there's the footer there as well. Let's give it a height and remove this text. Let's go to "CSS Designer" panel, "Styles.css", "Global", let's create a "Selector", and just for the footer, please. I'm going to get you to have a height. Now, when I say don't put heights, because we want the content to stretch bigger and smaller, that does not exactly, it's not the same for the footer. You can see here it's this height. It's always this height. I could put a minimum height, but I'm actually just, won't matter, because I'm going to put it in a regular height. Force it to be. I've already checked it is, 120 pixels. Cool. That's him, I'm going to grab this text, select it all delete it, save all. One of the trouble, when you are deleting it from this option, is often it'll leave this non-breaking space in here. Basically that's like a space bar. That's fine. They leave it there because otherwise, you can see the tag closes, and you can't really click on it. They leave that in there. I'm going to delete it from my co-view. I don't need it. My footer is made up of two parts. There's a, let's have a look, there is a social icons pot, and there's a pot on the right here with this copyright. I'm going to make two div tags, get one to float to the left, and one to float to the right. Let's go and do that. Let's chuck them in. In footer we're going to go "Insert", we'll insert a div tag, and we'll stick it, got my footer selected, so we going to nest it. Now with this one selected, we going to put in another div tag and it will be just after the one I've selected. I've got two of them. You going to see, they're inside the footer. I have two div tags. Let's create two classes. I'm going to float one to the left, and one to the right. CSS Designer panel, Styles. CSS, Global, Selector. I'm going to name these ones, okay? So I'm going to call this one, the social icons. I'm going to get it to float to the left, and I'm going to make another one called, and by period to the front, I'm going to call this one copyright. Copyright, even. I'm going to give them a slant, a float to the right. Now, nothing's happening because I need to apply them. This first div tag selected. I am going to make you the social icons. This one here, it's weird. This one floats to the left, social icon, and this guy slipped up behind them. The text gets squeezed out to the side. That's why when I click in here, I've got the div selected but it selects everything. Floating does some weird things to div tag, so. We got this one. We going to put in copyright, and there we go. Awesome. Floats left, floats right. Now we're going to put in some of our content. Let's do this one first. I'm going to have this div tag selected. I'm going to go to Insert. I'm going to insert an image. I'm going to insert a nested inside, and I'm going to go out to my exercise files, images, and I got social icons. I've got all of these to add. Add them in the order which you prefer. I'm just going to put them in alphabetically. Cool. Let's add stuff to our image. Click the "Hamburger Menu". Alt-text is what you put around every image, and it's a way of describing the image, and Google loves it when you describe it using good keywords. Bring your own laptop. Facebook. Every image needs an old text. It tells search engines what your page is all about and where the link goes to. What we're going to do is, I've got a page built in already for all my social stuff. Go sign-up, follow me in all these things. If you're a Facebook person, LinkedIn person, Twitter person, go check me out. I'm going to grab this one, into the link and this bit up here, set its target. We're going to say blank. What this means is, by default if I click this image, let's save it actually [inaudible] browser. By default, if I lift that, the target is none. By default, if I lifted the target itself and it just means when I click it, it replaces this page with Facebook. But because I've changed it to blank, if I click it and you can see it changes it out to our actual Facebook page. We're going to go put in the rest of these. What we might do to save going to, Insert and Image, every time, just right-click it and go to duplicate. When it's selected, drop that down. Let's pick a new source. Which is just our image. Back to our exercise files. Where are you? Images, social icon. I will do LinkedIn next. Switch this out. All these, alt text, needs to be unique. Linkedin, go check us out there as well. It's going to, remain doing blank, but I want to change the URL, to this one, "Bring your laptop". Cool. I'm going to get the editor table rotation to flip ahead a little bit. Till we get to the last one. Hang about for that one because the e-mail one's a little bit interesting. You're back. The reason the e-mail one's a little different is that it's not a link. There's not a website you can go to for e-mail. What you do in the link here is switch this out to, mail to, and then a colon, it needs to be spelled that way. Lowercase and then put in your e-mail address. Mine is Daniel at B-Y-O-L dot IE. If you want to send me an e-mail send it there. it's going to [inaudible] in blank. What will happen now is I'm going to click "Off" and I'm going to go click in Browser, save all. Look, when I click on this, what happens, is it loads your default e-mail browser. Mine is using Mac mail. Just make sure you got the, mail to, in front of that and that will work. Back into Dreamweaver. There's a little bit of housekeeping. You get rid of this text here. Goodbye text, don't need you anymore. Next thing we'll do is this one over here. It's pretty easy. This is mainly just text. I'm going to steal it from Illustrator. Dense portfolio, keep clicking on the wrong thing. There it is there. Grab you, and you. Do I want to style this? I'm actually happy with the default text. What you could do, you could create a class special for this. Style it the font that you want and the size that you want. I'm happy with the way it is. The next thing I'd like to do is that it needs a bit of pushing away from the edges here. The height, and the sides. To do it, I'm going to go to CSS Designer, Styles.css, Global, Footer. I can use margin or padding in this case because there's no colored box to footer. It's just empty. What I need to do is, I'm going to push it down about that much. The only trouble with that is, that the box actually got higher, by that much. It started at 120, now it's 120 plus 33. When you add margins to things that have heights, they actually just combine. Now it's like a 153. What I need to do is minus that of this height. My maths is terrible. Can I do it? Is it 97. Oh, I'm going to guess it's 97. That's how bad my math is. I would have pulled out the calculator, but I don't know. I felt stunned and I felt like I should do it. The margins from the left and the right. Because we haven't set our width from that, we haven't set a width, so we don't need to minus it. We can just add them to it. What's it going to be? It's going to be about 20 pixels that side, 20 pixels that side. Awesome. Now you might be like, whoa, can I get it to center horizontally? No, you can't. Centering horizontally is surprisingly really hard. What you need to do is just fake it. This guy here. Say you want the height and you can add a bit of height to this one. What is he? His social icon. I might find social icon. Where are you? There and add a bit of padding to it, because these have to be different. That's why I'm not doing it to the footer. I'm going to add a bit of margin to the top and just get it to look like it's in the center. There is ways of doing it, but it's super complicated. Copyrights. Same one. I'm going to add height to him. Get him to look like he's in the center. The next thing I want to do is, add spacing between all of these guys. Matching roughly. This, okay, it doesn't have to be exact but I'm not going to do it on screen. Going to do it secretly in the background. What I want you to do is see if you can space these guys out, without pushing it off from the side here and everything falling to pieces. But see if you can put a bit of spacing. Up to you, how much. But I'd like to see if you can create a class or just a class or work on something to get these to space out a little bit. Very good luck. I know you can do it, and if you don't do it and you break it, just undo it and leave it. They look fine by themselves. But I'd like you to stop with me, and see if you can add some padding. Let's go off to the next video where we start actually adding our template. Actually, one last thing before we go is this big green box. Let's get rid of the big green box. Let's find main and that big green background here. This little trash can. Save all. See in the browser. Awesome there's my footer down the bottom. There's this and now go off, get these guys spaced out. You can do it. 22. How do I make a template in Adobe Dreamweaver: Hello, lovely Dreamweaver people. It's time to make a template. In this video, we're going to make this thing here. It looks exactly the same as the last video, but now it's called a.dwt and we have this thing called an "Editable Region." What that means is, I can make loads of pages and update the template, which has got my header and my footer and it will spill through and update all the pages on one big foul swoop. Let's learn how to do that in Dreamweaver. First thing I want to do before I make my template actually is, there's a bit of texts in here that I want to get rid of. You can do it in code view or live view, it doesn't matter, I prefer in code view, so the text's gone. Now we're going to save it as a template. If I've got anything selected up here in my live view, and I go to "File," save this template. It's grayed out with some reason. But if I click down here in code view, and then go to the exact same option, comes to life, not sure why. Description, I never gave it a description. But in terms of "Save As," this is quite important. Index is a bad name for it and we're going to call as portfolio-templates, and no spaces, don't use any crazy characters and click, "Save." Update links, click "Yes." One of the problems I had when I was making this course is back in video four, I under, "Site," I came into sites, under my "Site Name," when we name this, I put an apostrophe s, both in the site name and in the folder that's on my desktop and that caused problems for nothing except for this template. It was a bit about eye-opener for me. Just make sure if you are having problems with your template, that you don't have any funny characters in either the site name or the local folder name. I'm pretty sure it was the local folder name that was causing me issues. Cancel all that, "Done," so it's saved the template. Awesome. Now what's actually happened, a couple of things is, a bit of code that's been added that wasn't there before, you can see template begin in double doc title. There's a bunch of that being added. The other thing is, you can see up here the extension dwt is been added. That is Dreamweaver template. You'll also notice in our site files, you can see here that's a new folder that's being made and inside of it, there's my portfolio. Also, when you are working with templates, and you'll notice that live view doesn't work as well as it used to, still functioning and works kind of, but it's a little bit harder to use than it was when it is not a template, that's no problem and I also find when I first generate it, if I close it down and reopen it, it's going to say, "Warning," you don't have any editable areas, and I am like, "Cool," I need to fix that. Let's close it and reopen a backup, [inaudible] really works a whole lot better, quick the Dreamweaver, lovely, we love them. Now what I want to do is, I need the editable region because the moment everything is part of the template, and if I make new pages based on this template, there's going to be nothing I can do to it because they're all locked. What I want to do is click where I'll, remember our main content box was here. You notice I didn't highlight like it used to, "Hey, it's one of the quirks." It has highlighted down here. But if I go to "Insert," "Template" in a region, remember it doesn't really work for working in this live view anymore, so we have to use a little bit more code view. I'm going to highlight these guys, main because that's the bit that I want to be editable. Go to "Insert," go to "Template," and I'm going to make this my "Editable Region." What are we going to call it? Editable region three," I'm just going to call this main-content. Click "Okay." You'll see it gets wrapped up in this tag and that's going to allow it to be editable. Let's hit "Save," and that is how you create a template. In the next video, we show you how to generate a page from this template. All right. Let's go and do that now. 23. How to create new pages based on a Dreamweaver template: Hey there. In this tutorial, we're going to create a new page based on our template we've made and when we go and make a change like this, look, it's going to update all the other pages connected to the template and our template awesomeness is complete. So to make a page from our template, we're going to close down the DWT we had open, then we're going to go to "File", "New". We'll click this button here. We're going to go to Site Templates and we're going to pick Portfolio Template. Yes, we want to update it. It's the whole reason we created you and you can see here we've got our untitled document and you can see all the codes hidden except for our main one. You can see there's a bit of color there and there's a few other things. Title should be editable for every page. So it's automatically done that for us and yeah. You can see up here, this has come back to life. But these guys are grayed out. Only the main content is editable. So now we need to save it. This is where it gets a bit mind bending. We're going to look at our files. We created this index file. That's what we've done for this whole tutorial, we've made our homepage. Then we said we'll turn them into a template. The problem is that template is not connected to this index page. This guy here is useless now. We used him, he generated this, but they're not connected. So we need to delete him, because he's not connected to our template. So what we're going to do is I don't want to delete him. I'm going to make a folder called Zold, which is old with a Z and I'm just going to click hold and drag them in there. I don't want to delete him in case things go horribly wrong. So here's in my Zold old folder. What we need to do now is save this new file, we'll call him Index, and save him. Cool. Weird, right? We generated an index file to start with, then we needed to delete him and remake him just so he's connected to the template and any new file now that we need to make. The Contact Us page, the About Us page, all you need is to go file new and we need to generate from our template so that they're all connected. So now in the rest of the tutorial we're going to go through the stuff to main. We're going to build out this. We're going to have the ticks and all the buttons and all the images. But what I really wanted to do before we go is give you a little heads up about how to work with templates and how to make sure you don't get into any trouble. The easiest one is to make sure, say you need to update these buttons here, add a third one, or play around with something. Of course we need to update the template, which is a good idea. So "File", "Open". You'll find that Templates folder and here's my template. Whenever you're updating the template, make sure you close down any other page. I found in my experience that if I've got Index open and I try and make changes to the template, it does update it most of the time, but I've had a few problems, so I just make sure that nothing else is opened, just the template. Then I go in here and I say you, my friend, this image here, I want to make it. I don't know. I'm not sure why I'm doing this. Just, for instance, "File", "Save". It's going to say I'm going to update these pages because they are based on the template. This is the cool bit. This is the bit you're like oh man, this is going to save loads of time, especially when there's a long list. It's got like 500 pages and you say update them all, please. I click "Close" and it's gone and updated them. So I'm going to close the template and open up my Index. You'll see hopefully, he's updated. Awesome. I'm going to turn it back, close this down. Open up the template, so just have him open all by himself. Down here he was 803. Save, update, all these guys close it down. Done. You know what's going to happen. It's updated. So we've made a template. Let's go fill it up with awesomeness. See you in the next video. 24. How to create a responsive hero box for our website in Dreameaver: Hi there, In this video we're going to start our responsive hero box that's inside of our template. You might be looking and going, "I can only see two things." Yes, we only create two things in this one, but there's a bit of underlying structure that we need to create. We need to create our hero content box, and we're going to create some reusable floating classes, all sorts of other awesomeness, so let's go and do that now. I've got my index.html open, so I'm going to start filling out my page. This is connected to a template, so you can see all this stuff is grayed out, and I can work inside this main tag here. It's pretty easy, just click inside anywhere, and that's the only editable box on this page. We're going to be working on this part here, so it's going to be called the hero content. We've got this hero image in the backgrounds. We don't need to worry about him. We've done him in earlier tutorial. We just need to worry about the stuff in here, and it's going to be universal, so it's going to be on this page here. He's going to update the takes depending on what kind of page it is. We're going to start by putting in our hero content div tag, and then we'll stop putting in the images, and text, so let's get started. With the selected, I'm going to go to Insert, we're going to insert a div, I'm going nested inside, and I'm going to leave it for the moment. I'm going to create a CSS style. It's going to be in styles.CSS. It's going to be global one and the select is going to be a class. Remember it full stop at the beginning, and this one's going to be called hero content. What is it going to do, it's going to do a whole lot. You can see it's pushed down from the top and away from the left. I've already measured it, so I'm going to do a margin at the top here of a three pixels, and on this left hand side here, 100 pixels. Hopefully if I hit save all, nothing happens. Why does it not happen? It's because I haven't actually applied it yet. I've created the class and I've created a div, but I haven't connected them up. I'm going to do that here. This one is actually called hero content. Nice, so it pushes down and pushes off. Lovely. Next thing I want to do is with my hero content selected, I'm going to insert that image. I'm going to nest it inside. Thank you. I'm going to go to my exercise files, images, and find on the bottom equal tick. It's not in the right place. Copy it across, yes please. That's going to go to images. Thank you very much. It`s saved. Nice. Now whenever you put in a new image, make sure that you put in the alt text. This is going to be something keyword friendly without stuffing your website full of keywords I guess. This one is going to be freelance, and web design available. Running out of good keyword thinking things anyway. The link, this one's not going to have a link as it's not going to go anyway, cool. Let's click off, click the hamburger menu, and next thing we're going to put in some text. Now you could start using this placeholder takes in here, but it's going to give us some drama. It's better to use P tags rather than see this text here has no tag around it, so you're better to work with a P tag. I click on this image, I'm going to insert HTML, I'm going to go down here to find P tag. I am not going to go down there, there it is there, and I'll get it to be just after, cool. Inside this P tags, I'm going to click it goes orange around the outside, and actually just going to copy and paste the text from here. Cool. This text down he is no longer that useful, so I'm going to select all of that and delete it. It was the place auto text for that original div, the little it takes. I remember there's a non-breaking space, it gets lifted, keep the tag open. I don't need that. They are stacking underneath each other. We'll style the color in a second because it's black and it's I guess had to see. But you can see by default they want to stack on top of each other, that happens all the time. Now we're going to fix that like we did down the bottom here for the footer. Whereas a foot a member, we floated left and right. Now what we did do down the bottom there is we had some specific tags to use. We had like social icons in our copyright, and we floated those tags to left and right. Problem is we have to do that again now, and we're like, "Wouldn't it be nice to create just like a universal tag that we could apply to this P tag." Because you can add more than one class. This image here, I'd like to apply a float lift class and this one a float right one. We're going to create that as like a reusable thing, rather than coding at hard into these classes, which was fine but not very reusable. Let's create a class first. We're going to go to CSS designer, make sure we're on all CSS styles, make sure I'm global, select that and we're going to call this one dot float, hyphen lift, and his job is going to be floating lift. Then we're going to create another one called float. He's going to float right that's going to be his job. Cool. Now we just need to apply it, so we're going to grab the tick here, and we're going to say you my friend, where is he? That one there, no. You my friend. We're going to click on plus, and we're going to say float. You can see it's just lazy, and now we get to reuse this thing, put lift. This thing squishes up underneath it, but it's a bit trapped. Now if you're watching, you might be like, "Why would he float it right?" I have no idea. I don't want it floating right, I want that universal tag, so I'm going to leave it there, but that is totally my fault. What I actually want is them both to float left. The nice thing about that is if they float left, they'll bang up next to each other side-by-side. You can see what happens is if you float them both left, they sit side-by-side. If you just flip one, the other one tries to sneak in underneath, and it causes lots of problems. Make sure you flip them both left then right. Next thing I want to do is I want to style this text here. Now I could probably make a compound select and say P tags that are inside hero box. But let's look at the design. I might use P tags again differently, and this one here, this is where you run into problems. You'll be okay and you're like, "Oh I won't make a new class with this because there's only one P tag here." But then later in the design you go like, "Oh, it's going to be two different P tags, and we need a bit more specificity. What we're going do is we're going to create a class, let's click styles, let's kick global, let's click selector, and let's put in a full stop, and let's put in availability, and we're going to do a couple of things. We going to steal the color from illustrator, so the text selected. We could use our window CSS properties. I don't know I have gone this way. It's another way to look at it. Let's double-click the color, copy it, back into Dreamweaver, and I want my text color for this one here to be hicks hash, and that now return and let's apply it. Over here my P tag, it's going to have float left, but we're also going to have, we're going to add another one cold.availability. You can have more than one tag applied. Next thing that I'm going to do is play around with the margins because it's not really sitting correctly. What we're going to do is go to this first one, go to margins now. This one here is going to be about seven. You'll notice it went up. Cave seven from the top, by default is aligning down on the baseline there. Sometimes you play around and you'll go, "Hey, yes, hitting from the top makes sense." But then it goes up like it did there. But don't worry about it. Left on this side, we're going to do 15. I measured these from illustrator as well. We're getting there. Save it. Let's just preview and a browser. Double check, it 's all working, looking nice. Let's go and put in this H1, which is this big chunk here. I'm just going to grab the text while I'm here and it's going to put that in. Actually before we go on, we'll just cut this video here because we're going to look at clearing the float. I want to turn that into its separate video because you'll probably have to come back to that one to do it later on. Because clearing the float is easy to understand but hard to remember the syntax so we'll keep that as a nice little bundle video in the next one, let's go do that. 25. Fix problems with div tags when you float left in Dreamweaver aka clearing the float: Hi there. This video is to here to save the day. You've got a website where you've used float and it's applied to something. Now the object underneath is trying to sneak underneath it and generally just behave badly. We're going to fix this using something called clearing the float and it will magically push the H1 down like this. Let's go and learn how to do that now in Dreamweaver. First thing is let's put [inaudible] H1. I'm going to click on my p tag here. I really like to click these tags selectors down the bottom here, so it grabs the beginning and ending. I find it's always easy when you start inserting stuff using the design live view. Insert panel, Let's go to heading H1. Click on it again, and I want to just afterwards please and you can see this is the problem. The H1 really wants to sneak up underneath these two elements that we've put in there. The reason is because we floated these two guys and the way I think of it is, think of float pulling it off the page towards us and the H1 sneaks in underneath because it's not aware of those guys anymore because they have being floated. To fix it, we do something called clearing the float. It just means, hey, I want you to look up and there's some guys floating above you. I don't want you to ignore them like you currently are. Great example, no, I couldn't think of a better way of explaining it, but, so let's add a class to this H1 to say, hey, there's some float going on and be normal. First thing is let's make the class. It's called the CSS Designer, styles.CSS, nothing is working. Go to All styles.CSS GLOBAL and we're going to create a selector. Call anything you'd like. We're going to call it as clear float. Its main job is clearing the float on both of these. Now we need to apply it our H1. I'm going to go in here,.clearfloat. Whenever you have float just underneath it, you need to clear the float. Now this is a reasonable tag. We can use this over and over again. Now, if I put something underneath the H1, I don't need to clear the float. This is like a one-hit. Whenever there's clear float just underneath it, we need to clear it. Then we don't need to do it again until we stop flirting again. You will know when you need to do it because things that acting we'd like our H1 did. Let's get onto some other details. Next thing is going to put this takes in here, and we'll start, I like putting the text for some reason in code view, better. You also know that we've used an ampersand here. Ampersand encode normally is fine. You can see it's displaying fine, but some older browsers, it's not going to have a good day. You can see that Dreamweaver, if I type it in there, is saying like it's red bad. The code version of [inaudible] okay, the [inaudible] is actually and amp, so AMP and then a semicolon. I know it's weird. But in life you still get your [inaudible] But it's not going to break anybody's web browser. But if you've got a website and you're putting in lot's and lot's of text. I've done it before and I've never run into trouble. That's why it was written anyway. One of the things I want to do though, is hit in Illustrator. I've broken it up into three lines. Now I've got two ways of doing this. A good way in the bad way. The bad way is if I go to what I would break it broke cross Kiwi.Okay. If I go to the UI, double-click and I'm going to hit "Return", the difference and another one is designer based. I'm going to put a return and here, write the code. That works. But you can see here my code, I actually have now three H1's. That's not a good plan. Why? Because I'm now going to have to go and install these old separately. It was not a big deal, but also when it comes to search engines, it sees, so say Google search engine comes to me and says, "Hey, there's a title called I'm a Kiwi". It says UI and UX design up. They see them as separate blocks, so it's nice and easy to put in instead of returns, I'm going to undo those all together. Go back into here. Just in front of the UI, I'm going to hold down "Shift" on my keyboard and hit return on my key keyboard. What you'll see is I'll do it there, and then I'll click down here and you'll see you get these bright characters. I show you them for a couple of reasons, is that you will copy and paste things from bits and pieces and you would be like to "What the hell is a BI?" It's just like if you're a graphic designer, it's a shift for ten okay, or a soft for ten, or they call them all sorts of different things. In web land, it's quarter BI or break. It just means it's still red as one complete H1 just with a couple of line breaks in there. The next thing I'm going to do is I want to style this HI here I'm going to go to Styles global select, and I'm just going to type in H1. Remember pre-existing tags that we didn't write like the H1 and the image tag, will the BI, don't have full stops in front of them when you ask styling them. H1, I would like to do a couple of things. Probably the easiest one is going to be the color is going to be white. I think it's white. What I'd also like to do is update the font. Now, actually let's do the size first because that's a nice, easy one. Then we'll look at some of the issues when it comes to think it's about 80. Keeps putting in double digits. What's the right size? I want to use this font here, and it's something called Playfair. I'm going to go and use that. Now, I can go through, and we had done this earlier in the course remember. We went up to type, and we went to font family, and we went to manage fonts, and we did that. Now, that won't work in this case because it has to deal with so much of the head tag. Remember up here, it needs to add all this stuff in here where it says, here's the web age fonts, so it needs to be able to edit this stuff. We're going to close down no index page and open up the template. Save, yes. I'm going to open up my template. That's it, and do it in here. There are just a few things that's going to happen throughout your web build, now that you've got a template, you're going to have to go back to the template folder. Do it and if you run into trouble and you like, "Maybe if I do it on the template", go back to the template tried in the air, you might find it fixes the problem that you've got. Template, I'm going to insert actually CC libraries. Note we're going to hit CC's designer a piano and do I have an H1? I don't yet, so I am going to I do have an H1, H3 is there, I lie. Type. We just made them font family and it's going to manage fonts. That's one here is called Playfair display. I'm going to tick them on, click "Done." Nothing really happens. Then I'm going to go off and click on the "Playfair". Awesome. It adds a few properties for you to make it work. It's telling you up here it's added those going and I hit "Save all." It's going to update index update, please. Yes, please. You may change the code mocked as non integral. You say, yes. Click "Close", close on the template, and hopefully now when we open up our index. It's our Playfair. Remember, if something's not working, you might have to go and do it in the template. The reason I know that particular problem is because when I was designing this course, I tried to do it here, my index page, and it didn't work. I jump back into the template and it did. The last thing I'll do before we go is and it's going to play around with as line spacing. It shouldn't worry me, but there's a big gap between these. Remember earlier we put in and if I click on here, we put him bright characters. The line spacing is going to work in this case, if there was separate H1's, I have to use the margin between those H1s. We use the current thing now because I want I guess, get you to use that because as you get better, this is going to become more and more useful from Dreamweaver is I've got the selected here and if I click on "Current" down here, it cuts it down to the computed ones, which just means like everything that is affecting what you've got selected is available so it cuts down the less quadrats all after a while you end up with a 3D. I've got websites and then just select as list is joined enormous. Current becomes super useful. We like actually click on this and it just gives you the stuff that's applying to it. In my case clearfix is applying, but it's not the one I want. H1 is applying, Awesome. What I want to do is get on to type, and I want to play around with line-height. I'm going to use pixels, zero pixels. I was going to click "Hold" and drag. It's one of the other nice things that Dreamweaver is that instead of having to type it every time, you can click and drag stuff to be a bit more of a designer in here. Yeah, maybe with that. Save all. That'll be it for this video. It's pretty epically long one, and let's get on to building the rest of this page. See you in the next video. 26. How to add and change the styling of a horizontal rule HR in Dreamweaver: Hi, there. In this tutorial, we're going to make this white line. It's called a horizontal roads. It's not hard, but there are some default styling that we want to go and change afterwards. Let's go do it now in Dreamweaver. First of all, let's put in the horizontal rule, so it's called an hr tag. That' what they call it. I'm going to stick my H1, which is my hitting one, because I want to stop to this. I'm going to go to "Insert an HTML" and all the way down the bottom, right down the bottom is called horizontal row. Let's click on that, slide down there it is there. Actually mine ended up right in the middle of my text, I'm going to undo. That happens to you. Click on the "H_1". Make sure it's selected down here in your tag selector and then go and click horizontal row. I want to go off to please, and then there's there, is my horizontal rule. Now I'm going to preview this in a browser, because by default the horizontal row comes with some ugliness, so let's go and check it in a browser. Now, it's a little hard to see, but it's actually what's called Inset or Bivalent Emboss for the Photoshop people. If I zoom in loads, you'll start to see the styling on it. So down here, there he is there. You can see it's half white, half gray, and got this like little chisel in here. I don't like it. You can see that. You can save time and just move on to the next tutorial. I don't like it and I want to style it. We're going to start this HR. That's what's considered a horizontal rule. One of the few tags that doesn't have a beginning and an ending like an h1 has an open and a close and HR doesn't like this br tag as a few that don't. Let's go ahead and style it under CSS Designer: styles, global select is, it's going to be called HR. Because it's one of those pre-existing ones where we didn't write it like the h1, something already preexisting in HTML. We don't have to put the period in front. It's all to do with border. With border, we're going to say style by default, it's inset. We're going to say so please color. I think it's like an off-white. By default I'm going to make it white and then I'm going to save all pretty in my browser and see what I like here. Is it thin enough? You can play around with width here. I put it down to 1.2, play with the pixels. I'm happy with the way it is. That is how to create a line. It's a long tutorial for just a line, but we want it to be a pretty line. Then we go onto the next tutorial. 27. How to create a button in Adobe Dreamweaver CC: Hi there. In this tutorial, we're going to make this red button. We're going to do cool things where we borrow existing CSS from other classes and we've reused some classes, get no offencing. Let's go and do that now. So first thing is let's put in a button. Now, I wanted to be just after this horizontal rule, so click on that. There's no insert button. So it's just a hyperlink that we style with some padding and some background colors that look like a button. The button is this guy here. So it's a lot like this one up the top here that we used for our nav. So we're going to actually borrow, CSS from that to save some time. So our horizontal rule selected up here in my Live view and I'm going to get Insert, Hyperlink, it's going to say after, and then I'm going to call this one Let's Talk. Cool, linking. Remember we don't have the name for the page yet, so I'm just going to use hash, target I want it to be self, so we leave it blank, which self is the default and the title, this is good for search engines. So it sees this button and "Let's Talk" is not particularly useful to know what's happening, so we give it some more information. We make sure it's keyword friendly. So this is going to be Daniel Walter Scott, because I'm going to be the UX UI designer that I'm trying to rank for in Google, contact us. Why is it in capitals? Because I left the caps lock on, it should probably just be title case but I'm okay with that. Nobody sees that in background about the search engines. So now we're going to go and style it and the cool thing about it is that we, if you remember, made a class called red button and green button. So we have to reuse that. So I get to [inaudible] tag. This is where we get to start reusing things, and this is nice when you get to that point of the website where like, a lot of the hard work's done, you get to start reusing things instead of always trying to create new classes. So now we get to go dot and this one, remember we called it btn in the beginning to make it easy to find, button read. Cool. So it got a red background. Now that button red didn't come along with all the padding. We did that separately, if you remember. So I'm going to steal the CSS from this button. Now, we can't do it here in index page because it's part of the template and it just doesn't let you. If I click on it, you get a CSS design a panel. Let me turn all that off. So yes, good on us and it just doesn't really work. So we have to go open that template and then here, I'm going to switch to current. Remember Current allows me to click on something and it actually gives me the classes that might be applied and it happens to be this top one. I know because if I click Show Set, it's going to show me the things that are applied to that particular class and not everything and yes, you can see the padding and the text color and removing the underline. So that's all the stuff we need. So there's a cool feature. We can right-click this and say copy all styles. There was an option in here, also this is just the text styles we've just allowed depending on what you want, but I want all styles. Cool. Thank you template. Now I'm going to apply it to this. Now I could go into here and create another class, and style it with this. I'm going to be a little bit more resourceful and use a compound selector. So what I'm going to say is if there's a red button inside this hairy box then apply this text. So maybe go from Current to All. There's styles, global, make a selector. It's picked bits of it. So what do I want? You'll notice it hasn't put in the a tag. So let's put it in button red and hero-content, but not the a tag. Let's just check of a work. Sometimes they do, sometimes they don't. So with it selected, I'm going to right-click it and say paste styles, a magic. So it is working. So now it's time to put some space between this horizontal rule because it's butted up next to it. So I would like you to go for the pause button now, hit pause and I want you to think of how you do it. You can go and try. This is what I do and see if you can give it a go. You can undo if it doesn't work. Hit it undo, and you can watch the rest of this video. But come down here wherever it is, pause the button and have a think. Go now. You're not pausing any. What I would do, there's actually a couple of things you could do. We could do this class here, and it was a margin at the top, or we could use this horizontal rule here. I'm going to do the horizontal rule mainly because I'm looking at a go, actually I want to do the space between there and underneath. So instead of trying to do them separately, I'm also just through the horizontal row here. Go to current, there's my hr and I turn off show set so I see them all and I'm going to go to layout and I want to maybe minus a margin of the top by just clicking, holding and dragging and put a load at the bottom there. Either way would have worked, that compound class that we used, you could have created a new class that did spacing, that weird, but it would work. But what I did was, I did a horizontal rule to play with both sides. Come in and let's save all. 28. Change fonts spacing of a website for Tablet Mobile sizes using Dreamweaver: Okay, in this video, we want to take our desktop view, which we've got here. But when it gets down to tablet, we're going to adjust this hero content in here. So we're going to play with the padding, change the font size down mobile even more. Okay, we'll change the font size even smaller. Adjust the line height and we'll make everything centered cool, so centered not centered big text. Now we want to go and do some updates to our responsive design and we've designed this kind of hero box for desktop. When it gets down to tablet, there's a couple of changes, one of them is petting from the side here changes, it becomes kind of flat and the font size gets smaller. Font size gets even smaller than a mobile and becomes centered and I've disabled this line here on mobile. Just I didn't like the look of it when I go down to mobile because all of this was centered. Let's go and do that now in Dreamweaver. All right, first step we'll tackle the padding. We've got the single hero content that wraps up, well my hero content and so we're going to add the padding to this. Desktop, it's fine. Now we're going to go down to tablet. We're going to click on the little colored line we need jump or you can just drag this, remember. We're in tablets and I want to get this to the edge now in my design and illustrate ahead up kind of flush against this black box but when I'm here in Dreamweaver and I was practicing this for you guys. I want kind of have it off about 25 pixels what kind of lines up with his logo mole. That is one of the creative freedoms of being the designer and, the developer. Okay? If I was designing this for somebody else and they gave me a Photoshop or illustrate a mock-up. I do it exactly how they liked it. What we'll do is styles CSS will do it for tablet and we'll create there's no select at the moment for here are content. We'll say dot hero content. Yes please. I would like you to have a margin of 25 pixels. But to get that side, and again on the other sides, 25 pixels nice. Lets do the spacing, for the mobile as well. Down here, okay, it's back to a 100 pixels, which was my desktop. I'm going to say Styles, Mobile Sector. Here content and we'll say you my friend, even though this is zero here. But maybe you got a kind of like type it in again because zero just means actually we've lifted at the default and the default is under pixels as for the desktops. Zero that side,zero that side. Nice, awesome as the font obviously is that big problem next especially if it is top. We'll do tablet first, and what we'll do is on a tablet view, we're going to start the H1. Okay, so the H1 when it's in tableview, I would like you to be a font size or font size and now I should go and check in Illustrator. I guess. That seems okay , maybe a little bit small. The other thing I need to do is play with my line spacing, okay, well my line height and pixels zero, and I'm going to get this to be something. All right, let's do it for mobile. There's a couple of things we need to do one is make it a lot smaller. Styles mobile, selector range one and we will do a couple things we will do, first of all, phone size okay. Actually, I'll check what have got it in here. I should check this. You are at 46. Font size, pixels 446. Remember that's my keyboard for some reason, types two digits in there. All right, so that's the size and I'm going to override it soon as I do it, I hear that too. We're going do sitting the center. Okay, now it's aligning all the text to the center. Okay, you can see in here, but you can see down here it's not done these other attributes. What we're going to do is instead of starting the H1 for centered and we get a bend that and because it didn't do that text, everything was text and they was centered but I actually want other parts need to be selected as well because that was just the H1. What we're going to say is back to this hero content and say I want everything aside U to be centered. Okay, now the line, this image here, this guy here is not me like, "Hey, you just said so." It's because this one is floated. What we'll do in this case, we'll create a special class just to push him over a little bit. We'll do how much do we hate them stuck to there, I can hide the items, we'll do that next is go install him out. But before we do that, let's save all and preview the browser. Okay, so desktop tablets smaller and the padding is different, which is awesome an indented mobile gets smaller and we have to do the line spacing, which we didn't do so it was the H1. Mobile H1 line spacing, texts, line height, pixels bigger. That's about nice, save all just in-browser, better. Maybe I needed to be a bit higher. If you don't have any fluted things like we did here, that's going to be all you need to do. The next part, we'll save it for the next video, and we'll disable this line here and we'll get some special classes to push him out and it's nothing fancy you're just going to apply class to it and say have pending on mobile, that kind of gets it centered. It can be really hard to actually properly seen to stuff when it floated. We're just going cheat. All right, onto the next video. 29. How to turn off parts of a website in different views like mobile or desktop: In this video, we're going to disable this ruler here when it gets down to mobile, because that's what I've done in my design. Let's go and do that. What we're going to do is we're going to make a compound selector, but we're going to do it inside mobile because this is the only time I want this thing to activate. In styles.css when I'm in mobile, I don't have anything that controls the ruler yet. I could just have hr and turn it to disable and if I use a ruler anywhere else, it's going to turn off as well, so I'll be a little bit more specific. I'm going to say hero content. Yes, if there's a horizontal rule inside here a content, then I want to disable it. Sometimes I probably get away with just hr. I'm I going to use another horizontal rule in your house on the site? I think I do. Yeah, I don't want to turn off. This specific ruler that's inside this content box here is going to be disabled when, make sure show set is off so you can see everything. I want to go to display and go to none, cool. Save all, checking the browser. You can see here tablet still there but in mobile gone, easy. Couple things I want to tidy up is maybe there's some padding down here. In the earlier tutorial I was very clever and I said let's use the horizontal rule for the padding. We use that style to give this gap between this and the button, but because between that ruler off, this time disappears. I want to add a bit more to it, plus I want to push this off from the side. Let's go and do that now in Dreamweaver, let's go down to this view so I can see it, so mobile and it's there and he gets disabled. Now, has he disabled? For some reason he's not disabling here in live view and that's why I prefer to test in the browser. There are just some little quirky things that don't happen in live view. It's handy for selecting stuff, but don't use it as your absolute 100 percent finish work view. Use the browser for that. What I'll do is I'm going to make a compound selector. When there's an h1 and it's down in mobile, I would like to add a bit of padding to the bottom. I do have an h1, that's in mobile already. I can sneakily use this selector already because I'm in styles.css, I'm in my mobile styles and there's already an h1, I can say, hey, you want to get into h1 can you a little bit of margin down the bottom? There he goes, he's disappeared. This could be just my program. I end up having really testing versions of Dreamweaver, how bug fix and to make videos for Adobe, but sometimes mine goes a little bit bang. Let's just stay in the browser, yeah, looks good. What I'm hoping is with just little things like that, I love those from those little treats you have and you like, " I wish I could, there's already a tag, and I can just adjust that one." You stop creating classes to do everything, you start reusing classes. Another thing I want to do is this guy at the top here, I need to push bit of padding to the left to fake center because he's a floated to the left, it's really hard to like naturally get them to center like we did with this text in a button. We're going to actually just say this thing here called image float lift, that is inside the hero content. Let's select on him. Let's create CSS designer panel CSS styles, styles.css. We'll do it globally, next you know we're doing mobile and we'll just check if we don't have anything. Do we have anything that says, header a image? No, there's nothing in here. Let's go and create one. It's like that. Now that's not good enough. Anything that's got float left applied to it inside our hero content is going to add this padding and the moment that's only this image, actually both of these images, it's not going to work because they'll both get some padding on the left hand side. We're going to have to be a bit more specific. Now welcome to the weirdly wield of web is if I do say img here,that's not going to work. It's not the way that this is constructed. Let's edit, let's go over here and some margin, just guess a margin for the moment, but there's obviously nothing is changing. That has float left that's inside our content box. Maybe it's the other way around, maybe it's the image img that has clear float applied to it and it still doesn't work. It's because of these things are stuck together. This cliff float is attached to this image so there can't be a space between here. This will catch you out, it catches me out. It's one of those fun things where image and then a dot, that means those two I actually joined and connected to each other now it's going to apply. With that, I'm going to drag them up a little bit more. Nice. yeah, we've learned a couple of things and I have a tendency when I'm making the courses just to keep it nice and simple and make sure there's not anything too difficult like these weird things where there's one instance where we join these two and we've not being able to center because the floated, but I'm leaving this particular one in because it is times with things that mean to work don't work and you find that workarounds to get them going happens to every web designer. What I should do is potentially go back to the beginning and restructure how I make this side so that I don't particularly have this one problem, but nobody does that. You get to a point, you're like do I double back just to fix that one thing or do I make it a little hacky thing to fix it up? This is not particularly hacky, but just to let you know there are times we like, actually I'm just going to add a class to fudge it, because often there are no repercussions. It looks good for the user. The user experience is great, the UI looks good, everybody is happy but if somebody looked at your code, they might look at it again and go, " Darn that's a ugly way of doing that," and I'd definitely say that if you're a developer and you're looking at my code, you'd be horrified to see the word hero content all written out with hyphens. They probably just put hc, keep it nice and simple. Keep the code really lightweight. I like to write little notes to myself with my classes like hero image and mobile view. But that's just my style and I guess coming from more of a visual background, I need to see those things in the code to help me out. That's it for this video, let's get on to the next one where we start looking at image columns. Awesome. 30. How to create a responsive image grid in Dreamweaver: Hi there. In this tutorial, we're going to take our design from illustrated here where we've got three columns of six images and this ones only got two columns. When it gets down to tablet and then down to mobile, which got one column and we turn a couple of the images off, so six down to only four of them. I'll end up looking something like this. Here's my desktop view, down to tablets and then down to my wall with his just four plus it'll do that because stretchy thing where they take most use of the space. Let's go and learn how to do that now in Dreamweaver. We're actually back here on illustrator because I want to explain how the structure works. What we're going to do is we're going to create these columns here and our design has them changing. You can see it has three columns, they down to two, and then down to one. What I need to do or I need to explain to you is we're going to create a box, so one column here, and we're going to make it 33 percent of the width. That's going to stick after each other and because we've saved new image, or wall column be 33 percent, the next image is going to fit, the next image is going to fit, but the next one is only frame, it's only 100 percent to pick from, so it's going to push down to the next row. The reason this is useful is that when you're in tablet, is you can say that exact same image, but you now occupy 50 percent of the space, so 30 percent and then tries to fit in the next one, but it's not that firm, so it breaks down. Same when we get down to mobile, same image, but we're going to say when you are immobile, you are a 100 percent buddy, so the another 100 percent can't fit, so if it's underneath and they just keep stacking. Essentially these goes a stack one on top of each other, but we just give it different percentages. That's how responsive tiling like this works. Let's go and actually do that now in Dreamweaver, I promise, this time it's Dreamweaver. Before we put in those columns, we needed a container to put around it. Up the top here we've got a container called hero content and remember that's the stacks at the top that it'll take the each one we've kept it in a nice little box. We enter the same for our images so that mainly so we can put some padding in between this and the hero content because five hero contents selected, so click in here somewhere, click on hero content, and then going to insert HTML Div and I'll put it afterwards please, you'll see that down the bottom here, it's actually banged up right underneath the list top button, not this image in the background, mainly because this is a background image and we said you be in the background and nobody can really affect you. That's why we can put our sticks on the top. We need to add some padding tool, so let's create a class to do that. CSS Designer, we're going to do it globally and we're going to say we're going to make one up quote image grid, anything you like, and we're going to add some margin to the top. Nothings applying so over here, let's apply a class first image. There's a bit of padding man and said a bit more till I'm roughly happy with it. Now we're going to put in our columns, so with our Div image good selected, we're going to go to insert, we're going to insert another division of space. I'm going to say inside of here, please I would like column, I'm going to col it, it's a little bit hard when you start having this now, there's two, I'll put in a Div and then the Div inside of it and you're like, which one I'm I missing with? Let's quickly go and add a class to it, so what we'll do is CSS Designer, and let's make a class. We're going to call this one col as their column. That's just an industry standard you call it column and often I do because it's easy for me to understand, but I want to get used to some of these syntax or commonly used names so that when you start working on somebody else's project or another site, you might recognize these. This column here, let's first of all give them a background color, we don't really need the background color, I just wanted it here so that I can describe what I'm doing. I'm going to apply it here to say dot col. Sometimes it's easy to look down in code view, you can see I've got a Div called image grid, and inside of there you can see there's the beginning and there's the opening, inside of that is my color, and there's also this random text, which I'm going to delete from col view. You don't need anymore, slightly more useful. We could now go in and click on this one, can be right-click it yet, and go to duplicate, and have six of them, Command D on a Mac is the shortcut, we'll Control D the on a PC, so got six of them now. But before we do that, and you can see that are stacked after each other, I'm going to undo, which is Command Z automatic controls on a PC. What I want to do is add a class-specific for desktop, because if we look at illustrator, you can see desktop is 33 percent, this is 50 percent, and this is 100 percent, so we're going to create three classes and just trigger them at different media queries. We're going to say when your desktop be 33 percent, 40 percent, 100 percent, so create the desktop version fest. First that we're going to create a selector, we're going to col it, put in styles global, and we're going to call this one.col and am going to use lg. Now, lg is not just another common way of cooling desktop view, you could colcolumn-desktop to make it easier for yourself, but you'll see on other sites people using col-lg instead. We're going to col it as that, we're going to say I'd like you to be a width of percentage, make sure it's percentage and 33 percent. Often it'll switch back to pixels so if you are having troubling you, like mine is not working, its probably by default, it really wants to be pixel so you go to force percentages in there. That's working, we need to apply it now, so you col, large, as I make 33 percent while somehow. Now we are going to create lists duplicated, so let's duplicate and they can stack on top of each other. They are not sticking next to each other like we need just yet, but that's going to be the basics. We're going to have subsidies and total, but let's go back and fix the first one, I'm going to undo a few times, there it is. What I want to do is get them into float left, so what I'm going to do is my little reusable class float left. Now I'm going to duplicate them, so Command D, no token, and I've got six. If you need another row, just say Command D on a Mac or Control D on a PC, and it keeps duplicating them. Let's have a little look in the browser, so save all, jump into the browser. You can see here, nice and responsive as well, because it's 33 percent, maybe they don't get bigger than our max width that we save for our desktop, but they get nice and squid you down here. One of the things that I want from my design is a bit of space in between, so we're going to go into Dreamweaver and what we're going to do is, for the column large, or I do we want to do it for a col, I'll do it for the column, so every single column on every single view not just a large, just going to have a bit of padding, which is true of my design. What I'm going to do is col, I'm going to say I'd like a little bit, we can use percentages, so I want to put 1 percent this side, 1 percent this side, and 1 percent this side. You'll notice that my design there has gone and broken, it's because this adds to my 33.3 percent that I added to my box, so 33.3 percent times three plus the pending in the side wrecks everything. What we're going to have to do is jump into my lg, col my lg, and our 33 percent it's going to be like 31.3 percent. That's not what it is jumping to pixels. Remember I said it tries to do it, does that to me too, so now they all fit, so what have you add in terms of padding you're going to have to minus off the width that you're using, and the last thing is that I actually want padding at the bottom as well. Imagine we are going to do it back to our column, lg column, and 1 percent also. You can see mine, the actual spacing is a little different because this is 1 percent, but it's either side. I've got 1 percent plus 1 percent, there's actually 2 percent in here, so the bottom here I'm going to add 2 percent. Now it's even, I will leave that tutorial here, and the next one we'll add images to them. There's a couple little things we need to do to make them responsive, but the guts of it is in here. Let's get on to the next tutorial. 31. How to make your images responsive in Dreamweaver to match the page size: Hi there, in this tutorial we're going to take out empty div tags and fill them with responses of images. Hey, presto, like this. The cool thing about them is that they are resized as well, responsiveness. Let's go and do that now in Dreamweaver. First step, I want to add an image to this first div tag here. I'm going to go to Insert, HTML, image. I want to [inaudible] inside the div tag. I'm going to go to my Exercise Files, Images. If you don't have the Exercise Files, there will be a link on the page somewhere, if not, message me and I'll hook you up with those. Let's check it in a browser, you'll notice that it's in there, but it's not responsive. You can see it's just being itself. The other thing to note is that it's a little bit bigger than I need it. Why? Because actually at this top view, let's look at my example here. It's actually the size, but when it gets out to the mobile size, it's a little bit bigger, so I've kind of allowed for the biggest size to be exported out of here for Illustrator. Don't make it too big, because page load speeds is really important for Google in its rankings. Just something a little bit bigger than you need is fine, so to make it responsive, we're going to create a class. We're going to create in CSS Designer, styles.css global. We're going to create a selector. This one is going to be called responsive-image. You might call it something a bit smaller and less descriptive. But there is three things you need to do. We need to say the width is a percentage, okay. It has to be a 100 percent Just make sure if you are having problems, it's a 100 percent and not pixels. Since this designer panel uses pixels as a default, it ends up being there quite a bit, so that's one bit. We need to make sure that the height is set to auto and we need the display set to block and we need to apply it. I've got my image selected. I got the IMG thing here and then I say my image is now.responsive image. Let's check it in the browser now, save all. You'll hopefully see, this guy here resizes, awesome. Basically now, it's just duplicating this original div here, we will delete these ones. We will also delete these ones, we will also delete this text down here. You can see this is the text that was originally before we put the image in here. It's just kind of squidged at the bottom, delete these, delete these columns. Let's go and do that now. Let's get rid of the text first at the bottom here. I've got my div tag here, beginning and ending and there's this text squidged in here. I don't need them anymore. I find it's always easier to do it in code view. I don't need any of these guys. I'm just going to delete them down in CodeView, that's why we love split view in Dreamweaver. Next thing I want to do is duplicate this thing here. I don't want to duplicate just the image. I want to duplicate everything because at the moment it just has the image selected seen there. I want the surrounding div class, so that is my column. That's it there, so col-lg float-left. I'm going to hit command D or replicate and go to duplicate or Ctrl+D on a PC and look at us flying now. We've got six of them. Obviously you can make nine. It'll keep going. What we want to do now is go through and just switch out these images here. It's not going to be particularly a sexy process and we're not going to do anything else than that, so you can skip along if you like. But if you want to follow me, let's click on this image, click on the little strappy lines and in here, we're going to grab browser file, exercise size files, images. Go down, thumbnail, great. Now, you definitely should be adding all texts here. This is the project. It gives you a project name as the project. It was a UI project and add all the details you can because you want it to be good and search engine friendly. I'm not going to because I'm lazy now. But if this is my own site, I would 100 percent go and do it. But in this tutorial I'm just trying to speed things up. What also I'm going to do to speed things up is, I'm actually just going to go to my exercise files images, and grab all of these guys. Actually I've got these first two so I'm going to copy them, put them on my desktop inside my images folder. Just so that now, I can go into here and I don't have to copy and paste them every time. I can go into here and actually just change the name to thumbnail3. Change the whole text don't forget. This one here, exciting stuff. Other things that I could do is when I click these, where are they going to go to? Because that's actually going to happen later on. I can do it now and I can just put in hash? It's up to me if I want to do it now or later on. Done that one. But yeah, we'll go into that later on when we actually build those second pages, so test this on a browser to see how good it looks. Save all, check in the browser and look at that. I love it. Especially with all the new colored images in here it starts looking like a full-on website now. The next thing we're going to have to do, is to figure out what happens when it gets down to tablet like this. Because at the moment it just keeps going down in those three rows. I want to change it when it gets to a tablet and mobile and we'll do that in the next video. 32. How to make different columns for desktop tablet mobile websites in Dreamweaver: Hi there. In this tutorial, we're going to take our desktop view which has three columns, then we're going to get it down to two columns, when it gets down to tablet and then we're going to gets down to mobile, just one column. Super easy to do, let's do it in this tutorial. Currently we have one class telling it to be this third, remember 30 percent. We're going to click on it, this guy here. It's not the image, it's the div that's around the outside. Remember column just gets him to float left. But there's column large or LG is the one saying be 33 percent. We need two more applied to it. Let's make the first one. CSS Designer, styles CSS, I'm going to put this one in tablet. We're going to make a new class called col and I'm going to do in deep for medium, okay? This one's going to have a width of percentage and this percentage is going to be, now should be 50 percent to go equal, but I have a padding around it so to 48 percent. Because I want the percentage margins on each side, I'm going to switch into percentages. Actually I might do this all the way around. Pick percentages without that little locking icon on means I go all the way around. All the way around. Nothing happens because how we're looking at a desktop view and we haven't applied the class, let's edit. Okay, so I'm going click on this and I had this one called col-md. If it's doing what I didn't come doesn't recognize it hasn't been made, okay? I'm going to kick off and I'm going to do a save all and then try and apply it to you. Grab the external class. Turn it off. Turn it on and hopefully now.col-md. There it is there. Sometimes you need to save it all. That's applied, it's going to kind of work. Let's have a look in a browser. Go some setup my desktop size, then you get the tablet and you can see he wants to occupy this. We need to do the padding as well, so we might. But we can play around with him a little bit, let's just get the images going. But you can see he is about half. Okay, so we need to do it for all of them. We could go through slip the outside tag at the mall, so I'm going to show you a little trick here. I want them. Can you see how classes are applied down here in code view? Okay, so it goes div as a class equals and inside these quote marks, all the classes col, col-lg, flipped lift and our col-mid get added. I'm going to show you a cool little trick. My specific or Dreamweaver. If I click in here and then hold down the command key and click on there as well. You can see there are multiple cursors. This is really handy when you want to add a class col-md. You don't hit the period at the beginning because we don't need to because it says class over here. Looks a little different in code view and that's a way of adding them all at the same time. Save all, now let's get to the browser, [inaudible]. Desktop view and mobile view. I find these types of steps in the course quite satisfying, I really do. Let's go and do the mobile version or do padding and a little bit. We want to create a new class, so styles, we're going to stick it in mobile. We're going to create a new class in here called, small, right? We're going to call it extra small. Why? Because I'm trying to get you used to some of the styling language that goes on in the big wide world web of web design. It's M is often used for tablets, that kind of big Phone signs like the iPhone plus, okay? We then have the plus size phones. We could call a small and that's fine. But normally people call it extra small for their smaller mobiles at about 300 pixels wide, like a standard phone. Cool. What we want to say is we want you to be 100, so we're going to go not quite 100. We're going to add a bit of padding around the outside, but I'll do 98. Make sure it's percentage. These guys are going to lock all the way around and say I'd like you all to be a percentage of one. Puts in all of them. Cool. Now let's save all just in a browser. Let's go down ready. Boom, that did not work. I did not apply it. Okay. You've got to make sure you're probably looking at me watch this video going, it's not going to work. Then you need to do your multiple cursor tricks. We could add the member manually, but we're just going to be quick and go small. It's not even small, it's extra small. Save all, check it in here. Now we're working desktop, tablet and then down and move up. Boom, they all stack up. There's a bit of a gap around the outsides looking pretty cool. There's a few little things to work on. But I think a success. You've learned how to do responsive columns in Dreamweaver. All right. Let's go and tidy up a few things in the next video, but well then everyone, we're getting close to having all of the techniques we need to go and build any of website. All right. To the next video. 33. How to create a clearfix pseudo after class in Adobe Dreamweaver: Hello, and welcome to this scary titled video, it's all about clear fixes and pseudo classes. It sounds scary, it's not that hard. We are doing it. For what reason? It's because I want to add a little bit of padding between this box here, which is called image grid, so this is div tag and my footer. But I can't because these guys are all floated left and it causes problems when there is boxes underneath float like this footer here. But if we use a pseudo-class, that means I can add padding to the bottom of my image grid and it actually starts moving. If you're following along the tutorial, you can't do that. Let's learn how to do that in this tutorial. We have to do it because these guys are floating to the left and we know from an earlier tutorial that if we foot anything to the left, the very next div tag needs to have clear flow applied and we did that with a special little class. The trouble here is the structure. This is my last div, it's my last little column, then the div tag underneath should have clear float, but I don't have a div tag underneath. I close out image grid and then I close out main and then footer starts way down here. The problem with adding clear float to a footer, it just doesn't work, it's too far out of the stream here. So a trick is I could click in here and just insert a div tag, give it no name, remove the placeholder text and just give it clear float and that would totally work. That's what I did for years and that's what lots of people still do and that's totally fine, you can go do that, why? Because it's easy, but we're further on in this course and you came here to learn and it's time to learn some cool stuff. Pseudo-classes are particularly hard to make or use, so I'm going to do that. What we need to do is we're going to do it over here in our CSS Designer. Click somewhere in here, CSS styles, do it globally and we've got one in here called image, where are you? Find them, image grid. What we need is another one that still says image grid, but before you close it out, we're going to add a colon in there, that colon indicates that it's a pseudo-class. So it's like that class, but a little bit different and our pseudo-class is going to say after. So we're going to add some attributes that only get applied after image grid. That is a pseudo-class, super easy. Well, the main one is clear float. Some of the time you can get away just with clear float, but we're going to do something called clear fix. It's a name given to a slightly more complicated, not complicated, a slightly more robust way of clearing the float. Clearing the float by itself works most of the time, but not on all browsers all of the time. So to make a more robust one, all we need to do is click display, change it to block, and we need to add something called content. There is actually no content here in the CSS Designer panel. But the helpful people add Dream Weaver said there's a little extra more edge [inaudible] down the bottom here. So I'm going to hit content, there it is and pretty much I want nothing for the contents, so it's two quotation marked with nothing in the middle. Don't ask why, but that helps us across lots of browsers. So that is a replacement for just putting in an empty div underneath with that clear float applied and if we're all honest, it's not that hard, we did this coalen and an after, and it makes us feel like super-duper developers when you're doing clear fix pseudo-classes. Sounds like you're talking another language. At least I feel like that when I'm talking about it. Let's go and do the thing we wanted to do, which was it? It was image grid, I wanted to add some padding afterwards. Yeah. So it jumps around, but there you go, padding added. Nice. Before we go just a little bit of housekeeping, and when I go from desktop down to tablet, the padding at the top here isn't good. So it's nice at desktop and it's okay at mobile, we'll do that one as well but it's pretty bad at tablet. To do that, what we're going to do is we're going to make styles.css in tablet and we won't go to image grid. We don't have image grid in here currently, so we're going to say when image grid appears in tablet, it has, I'm going to click on this, scroll down, just needs more margin up. This thing keeps jumping around, because we're overriding it now you can see how it jumped up, I'm going to hit a lower, so we're not adding it on top of desktop, we're replacing it. So we're saying instead of that, do this. Now just a little bit of testing between here. Looks good, also looks good here, it's a little bit of playing around. One thing we might have to do is, can you see here this word breaks onto these different lines and it messes with us? It is just really hard to work with so many different sizes, so there's a point when you're a web designer, you're going to have to live with some views that aren't perfect. I guess it doesn't have to be perfect, it has to be usable, but it doesn't have to be perfect. What you do is you aim for the main devices and if somebody comes up with a crazy size, you might have to go back and adjust it. You don't want to get caught in creating like ten different media queries. Just so you know, three is the minimum, so desktop, tablet and mobile, that's what we've got. But a lot of more sophisticated sites will have five, so I'll have like a really small one, like we've got, they'll have a fablet size, that kind of iPhone plus size. They'll also look at landscape and horizontal tablets and then the bigger desktops, so I'll have five. I've seen sites with seven. So you can keep making these media queries and making adjustments, it depends on how much control you want over every single view. But know that the more media queries you have, I guess the more work that needs to be done and you might be okay with that. For this site here we're keeping it simple, mainly for class size and if I'm honest, I only do three media queries for my sites personally. All right. Should we do mobile? You can create one for mobile. Actually, when it gets down to mobile, I'm happy with the padding, but you just go to max width here for mobile and add our class for image grid and change the padding. But you could do that, I have faith. All right. Next tutorial. 34. How to create & link new pages in Dreamweaver using templates: Hi there. In this video we're going to go through and start building our second page, which is our portfolio page. This will be indicative of how to create any new pages. We're going to go and change out the heading here and these image chunk down the bottom. Yeah, let's go and do that now in Dreamweaver. First up, there's two ways of doing it. We can go to File, New like we did earlier and we said search some template and this is the template that we created earlier in the series. Yeah. Hit "Create". The only trouble is we get blank page. What I do typically is I'm going to hit "Cancel" as I just do a Save As of this page. Now we had to call our first page index.html. That's the homepage, no way around that one. Now, every other page we'll get to name on our own. The only rules are, don't use uppercase and don't use any spaces or any that crazy characters like this. We're going to call ours portfolio-ui-design , and the client name for this one, let's just say it's byol. We want good keywords in our URLs as well. This is really good for search engines. I'm going to hit "Save" and drag them up and save. It's still connected to the template. One thing that I have had problems with using templates in the past is that sometimes you make an update to the template, now and this guy doesn't update, if that event happens, it happens like once in a blue moon, but you can go to Tools, Templates, if it's ever grayed out, just click in the code vision down the bottom here. For some reason, clicking in live view makes that not work. Cool. Templates, and this one here you can say, "Apply Template to Page". You can just click on your template again. I don't have to do it now because it's working just fine. But if that happens, try that. The other thing you can try, if later down the road yours breaks, you can say "Update Current Page" and that'll just go back and check the template again just to make sure in case it didn't get connected. I'm going to mesh this design in here. There's a few things I need to get rid off. I'm going to click them in live view. There was this tag, you've gone. Clicking on this. I like to click down here to make sure, because I don't want hear a content that's the big box, but this image float-left is everything I want to get rid of. I'm going to reuse this text and I'm going to change the text to what I had in here, UI design. Stick around. We're going to just do some, obviously entering in some details, but there are going to be some extra tricks we'll learn as we build. This is going to be my UI design for BYOL. Delete U. Cool. When it's orange, I want to insert at a p tag and it's going to represent this text here. What I don't want to do, I'm copying and pasting it, is when you're in this orange mode it doesn't let you do a lot of the stuff. You got to click off and click on it in it's tag view, that's the blue view. Orange is the editing text only thing. With that selected, I'm going to go to Insert, I'm going to go down to p tag, where are you? There, paragraph. I'm going to go after my H1. I'm going to replace this text. I don't know why I do like doing it down here in code view better, paste. Here we go. Cool. We're going to have to do some styling for it. Now I could create a compound selector to say p tags that are inside hero content. The problem with that is that I might use another p tag to do something else. I'm going to be a bit more specific here. I'm going to create a class specifically for styling this text just here, rather than all p tags that are inside of this top box. Because maybe on the contact us page or the about us page, we want to do different things with the p tag. Let's create a class CSS designer, mine is not looking so I'm going to reset Dan is awesome. Cool. Styles.css, I'll do it globally. I'm going to create a class in here, and I'm going to call it text at the beginning. Whenever you start doing texts, just call it text at the beginning so that it's easy to find later on. This is going to be text white, and we'll call this one description. What am I going to do to it? I'm going to make it, I'm going to get Text, I'm going to make it a font color of white and I'm going to make it a font size of 30. Which I've pulled from my, oh man, it's getting annoying that double 3's. I don't know why it does that. I type three once and it puts in two. Cool. Now we're going to apply that over here. This one's going to be called text. You can start to see why using text at the beginning is useful. You can go through all the different text options. Next thing I want to do is, this is the kind of new unique thing. The rest of the stuff we've done so far, we've done in the course. But this bit here now on orange. The problem is we can only apply classes to this entire p tag. The problem is I want this little part of the p tag to be red. Now what I could do is create two p tags and then float them next to each other and that's a lot of drama, so we're going to look at something called a span tag. A span tag is if you are from the world of say, InDesign, it's that character style. I can use it as part of my paragraph, just updating a little bit. If you've never heard of a character style, no worries.. A span tag, watch this, you have to do it in here in CodeView. It's a way of applying a class, instead of the parent tag which normally happens, we can apply it to our little bit inside of the p tag and it's just called a span tag. First of all, let's create this tag. Styles.css, GLOBAL, create this one here. I'm going to call this one.text, we'll go with red. I'm going to call it red just because it's reusable. I should've just called this text-white as well. But text-red, I'm going to say you are red. I'm going to pull it from, with the text color. I should go and find the proper color from Illustrate or use the eyedropper tool, which is there and steal the color. I'm not going to do anything else because the font size comes from the underlying text-white that we'll apply to the whole tag. To apply a span tag we highlight it down here in CodeView then we hit "Command T" on a Mac or "Control T" on a PC and this wrap tag appears. Type in span. That's what we want. But we want to add a class as well. Span, space and then type in cl and you can see, handy Dreamweaver, it's got a class in there and it's added all the syntax for us as well, which is the equals and the quote marks. In here we're going to type in without the full stop. Often when you're working in CodeView you don't put the full stop sign. This one is text and text-red. Nice. I return again, and hopeful Dreamweaver has wrapped client in the span tag and it's called a span class, which is red text, and there you go, like in-line styling. Next thing I want to do is this chunk of text underneath here for the brief. That's pretty much exactly the same as this. Make sure you clicking on the parent tag, which is the p tag, hit "Command D" on a Mac or "Control D" on a PC, duplicates that tag. Awesome. Let's changed this to brief. Now the tics tailored up some I could copy and paste different illustrator, but I want to show you a cool trick. Now, this only works down here in code view and that mix up Latin words called Lorem ipsum, just place holder ticks. What we can type down here in code view is alarm and then put in how many words you want and then hit ''Tab'' not enter tab on your keyboard like that. I've got 20 widths will somehow. That's something called image. If you're not using image and you want to get more into code view, I've got another colas that's kind of more designed for doing a lot of what we've done here but encode views, that might be a next step for you but it's pretty cool. You want to Google that and have a look or look at some of my other videos. Now let's look at getting rid of- I'm going to leave the ''let's talk'' stuff and then do I leave the let's talk stuff in there. Okay. It's still on my designs I'm going to leave it in there. Next thing I need to do is this Pergamon sheets, one big image that's going to represent that designs that have done. When I click on, say, one of these icons here, it loads up this page so I need to go through and delete all these columns. I'll click on these guys. Now, we're going to leave the image grid box. I probably shouldn't call it image grid and probably should have just called that secondary, main or something like that because it's just going to have one imagine and now not a grid. Confusing. I need everything gone out of here. It's easier to do it in code view. You can totally do it in live view if you prefer, but I'm going to grab all you guys, make sure you grab that beginning in the end. How do you know if it's the beginning or end in code view? Click on image grid and you can see it highlighted down here. That's the closing as the opening. Everything in between here, I'll get rid of and goodbye. Now with my cases are still flashing in there. Let's put in our image. We're going to go to ''Insert Image'' and we're going to bring in from our exercise files images and I've got portfolio one. It's this big guy, a little bit different from my design and let's save it all, test it in the browser. The image is way too big and it just not responsive but don't worry, remember we created a code tag, called responsive. We're going to edit to this image Code dot responsive of image and we save all, open in the browser and now let me shrink it down. Hey, look at it all being responsive. You can decide whether you want padding around it as well. I haven't done that. You might add some padding to the image grid or you might create a special padding class but I'm happy for it to bat up next to the edges here, edit fake padding with the actual image itself. But that's what I need to do looking at this when it gets down to mobile view. It's just too big text so, I can go through now and adjust the maybe compound selected to say p tags that are inside image make smaller. They are 30 pixels at the moment. Let's try that. Let's go to CSS designer styles, mobile. Let's create a compound selector that says, actually nothing is in there, I'm going to off and actually click on adhered to hopefully, hopefully save some time. I'm going click on him, then make a selector. Here a tag I want, I don't need this text image description. P tags that are inside here, our content will work hopefully and we're going to grab. Actually let's lower it down, let's go to text and say, let's go font size and let's make it pixels of 220. We getting them awesome. One thing I didn't do is I didn't have any padding on the sides when it got down to my ball because it didn't really matter when I had those original ticks of him, but now I'm thinking it probably needs it so here there's one cold here or content and done a mobile. Does it say anything? I'm going to shows it. So it sits zeros. I'm actually going to turn it up to 10 pixels. Then 10 pixels on that side just give myself a little breathing room on the sides. Whenever you do stuff like that, you're going to have to go back and just double check that I wrecked the index page. I feel like I didn't but we're going to taste the anyway. With this open in my browser, it's looks fine there. Nothing has gone wrong except remember that padding that we put on that side there and we faked it being in the middle. We've broken up by adding an extra team pixel. So we're going to have to go and adjust that compound selector. But everything else look fine what compound selector we used. I might go to index, go to mobile, go to this thing here and it was image inside hero contents. Let's check it. Header image. It was this guy here, hero content image float left. We're going to just slow down a little bit. This type of thing happens all the time. You get further on in the course and you make a little adjustment, you need to go and double-check. It doesn't have any ramifications. If it does, you might have created its own special class but you don't want to get in the habit of creating too many of them because your CSS style sheet can get crazy looking at the moment. Ours is nice and clean and we wouldn't win any development awards, mainly because my really stupid long names desktop view. But it's doing pretty good. Last thing we're going to do is we need to connect these two pages. In my index page here, I'm going to go out to full view. That will click in him. I'm going to say when this button is clicked, this image, we're going to go to the stripy lines and say link. If you had a hash in here like we looked at earlier, we can delete hash and actually click on ''browse for file'' and say a portfolio UI, click ''Open''. Now it's defaulting to self, which is target none. Old tics, this is going to be my UI design for bring your laptop website. It's not, this is stuff that I've got as templated placeholder stuff so this is not my work, this is stocked library work. Let's click off in the background and let's go and test it in a browser. Now this image here hopefully we can click it and it jumps to that page. To get back, we're going to use clicking on the image here as logo. This goes back to the homepage. We did this in an earlier tutorial but it's exactly the same hand that we just did for this image except instead of linking to the UI page, it links back to index. All right. Now you'd go through duplicate that page and do all of these. The cool thing about it is you'll notice that as we get through this course, the production gets faster and faster because we get to rely on things we've done in the past, and this duplication is going to be super easy because it's part of a template and bays because we've done the layout for this page already. We just do a ''Save As'' and go switch it all out. That's it for this tutorial. Let's get onto the next one. 35. How to upload your website to the internet hosting via Dreamweaver: All right, in this video, we're going to sign up for a host. In our case, we're going to use bluehost because they're awesome. But you could sign up for any hosting here, whichever you prefer, and then jump to the next video after this, where we actually connect out FTPD downs to Dreamweaver and upload our site. So if you're looking to host, okay, go to A couple of things happen is that you get a discount and I get a commission on the sale, doesn't cost you anything extra, you save money. But if you don't want to do that way, you can just go straight to and go around my little link. Regardless of how you do it, you end up here, you click on "Get Started". What you want is this first option, okay. Have a read through, have a little look but from the majority of small to medium businesses, you only need a simple basic plan. It said 395, but actually it ends up being about 595 after you put all the things you need. So if you have a domain name already, type it in the here. If you don't have one, I'm going to sign up for now. Bring your laptop is All right, so fill in the fields here, and this part here is really important. So your price for 395 is for three years. If you want to keep the cost down and do 12 months, you pay more. But you only have to cough up one year. Things you don't need. Domain privacy doesn't really keep your private, only keeps you private from people that don't know what they're doing. Site backup. If you're just working on your own site, you don't need this because you'll always have a copy on your laptop. But if you're working with multiple people, this can be really helpful because they wreck your site. You don't have a copy of that new site. Yeah. You want to go to this backup. I don't need it for this case because it's just me working. The search engine jump start never works. 'Site lock' This doesn't work either. Just allows you to put a badge on your site to say we've secured from malware, we're not going to use it, so we're not going to edit and SSL certificates a little bit complicated for what we're doing now, but it's definitely something in your future, it makes your website from HTTP, www.bringingyourlaptopisawesome to HTTPS, which is more secure. But there are some other hoops to jump around. So we're going to turn that off and keep it simple. So enter your payment details and I'll see you in the next screen. Okay. Congratulations, we have signed up. Do I want payments fare and something else; word press, no thanks. Okay. It'll ask you to sign up for a password. I've done that. Log in. Okay, so this is where we end up and what we're looking for we really need is something called the FTP details. They are little button here. Or you'll get an email like I did. Okay, welcome you to bluehost and they'll send you the FTP information. So have a look in your email and this stuff here is quite important. So write it down somewhere where you keep all that notebook, keep all your files or that Google Doc. So put them all in there because this FTP details you'll use once and forget. Then in a couple of years when you need to update stuff, you'll forget, especially your password. If you do forget, you can actually find this stuff here in bluehost click on FTP and write down the bottom will be the same information. I don't want to click on now just because it has some personal details in there that I don't want you to see. So let's jump into Dreamweaver now and, put in this FTP details. So it doesn't matter really what page you have opened. It doesn't matter at all. Let's go to site and manage site. This is the one we're working on this whole course, Okay, Dan's awesome portfolio. We're going to double-click it. This is the details we started of putting in, but now we need to insert something called the server. That's what bluehost is giving us, they're allowing us to use their servers. So let's hit plus. Give it a name at the top here it doesn't matter, "bluehost. " Okay, if you're using Go Daddy or any other domain hosting company, you can just type in the FTP details here. It's pretty much exactly the same. So in that email you saw I had the host name, which is actually the FTP address. Let's actually pull this up next to it. So that's that one, the username. What else we got? We've got the password, which I'll cut out. Password. Awesome, and the root directory needs to be put in. In our case, it's public underscore HTML, that's a super common one. Nice. Now the moment of truth, we're going to hit 'Test 'Hit 'Test' and fingers crossed it works. Awesome. If it doesn't work, sometimes when you are setting up a new hosting account it can take a little time to populate, so give it an hour, maybe two before you start yelling at bluehost or me. Sometimes it can just take a little while to get working. The other thing you can do is that your domain name might not be registered and working yet. So might not have populated yet. What they've done is they've given you a temporary password. See this temporary URL? Okay, this is one that you might use in the interim until your actual domain names that's working. Let's click 'Okay'. Now if you are having problems with a FTP, some of the things that can happen is you can switch this off and on passive FTP that can sometimes fix things. The other thing that might happen if you're using a different host, it might not be called public underscore Html, it might have a different URL. So reach out to your hosting company if you're having problems before you hassle them, check the FAQs. Often they'll have like how to set up in Dreamweaver and they'll tell you which bit goes where if you're still having troubles, reach out to the hosting company. It's what you've paid them for. Often the online chat is an easy way to do it or drop a comment here on this page. I'll see what I can do to help. Let's hit, 'Save' and it's done and you are ready. So you upload pages individually generally. I've got index.html open. Over here we're in our files panel. This is the site that's on my local drive. You can see local view. It's just my machine. Now what I want to do is put it. So site put and this is going to connect it to bluehost. Takes a long time. Okay, connecting to server. Would you like to put dependent files? Okay, this is important for some reason there's a timer on this. I'm not sure why, but I've got 22 seconds to explain it. Dependent files at the moment we're just putting out HTML. But we've built a CSS sheet and some JavaScript and some other things and some images that are all not part of that. Dependent files are all those extra bits. So if you just want to put up the index file, you click on 'No'. If you want it like me, put the index file plus all the images plus all the JavaScript, and all the CSS. Okay, that's what we need to do. The reason they keep that separate is that, say it's a lots of images and they're big long images; see the images take the longest. Html takes seconds to update, whereas Jpegs can be quite big. So what you do is say just making it text change here. You change the text and just upload the HTML. So you say dependent files, 'No'. Because all the images haven't changed. They're all the same. All right, so we've uploaded at all, and now we're going to go check, bring your own laptop is awesome. Let's go have a look in a browser. All right, here we are, Hey ho, we have a website and the rest of the planet can see it. No longer testing locally or testing on our remote. It all looks awesome and it all works. If you've got to this point, you are probably super happy with yourself. I have done this a million times, and I am only doing this for a test and I'm still pretty excited. I don't know why I feel is different when the world can see it. Let's go and have a look at what else we need to do just to make sure it's all up. So back into Dreamweaver. So what we need to do now is we need to make sure all the pages are updated so we could now, because we've only got one of the page, and the portfolio page, we can just open it and go to site and go to put. That will upload it to the hosting. If you've got lots of pages, say you've updated and you've got 20 pages, you can have that close, it doesn't matter. You can select on all the different pages in here or select the whole site. Actually there's no need for those two to go up. The templates is just for you locally all of the rest of these can go up. So you could like like this one hold down Command on a PC, sorry, command on a Mac or Control on a PC and click two of them. Then up here, there's another way of putting things in put. It'll ask you about the dependent files again. Do I want dependent files? I'm going to have to say yes because that portfolio UI has some extra images. The trouble is, is that it's going go and upload the ones from index again. So it can be a bit of a long process. Let's go check it now. Hey ho, and let's click on a button. There it is. There's our big portfolio image and it says, "Hey there's bits in here written in Latin, wouldn't you like to translate it." That's because I've got this placeholder text in here. So that'll go away when I actually put proper text in there. Thank you. Google Chrome. All right, my friends, that is the end of putting stuff up online. Now that I know for a fact gives a lot of my students a lot of hassle. So drop me a line, leave a message to say, I couldn't make it work, what's wrong? Make sure you save me screenshots. I don't necessarily need your password, but it's good to see what your FTP name is and username is so that I can diagnose the problem. That is the end of this one. Let's get on to the next tutorial. 36. How to adding Google Analytics to your Dreamweaver website: >Okay, in this video, we're going to sign up for Google Analytics. Why? Because it gives you all of this information about who comes to your site. It's free. You can see my case. How many people have paid for courses on bringing your in the last seven days, how many people are currently on the site? Six of you. What times of the day they're at? What countries they from? All sorts of goodness. Okay, so we are going to go through and show you how to install it. It's pretty much copy and paste. Super easy, great value. Let's do it now. Okay, so do sign up to Google Analytics, go to analytics. You'll need to sign in with a G-mail account. If you don't have one, they're free to get, but you're going to have to use one of these for this process. Create a G-mail account if you don't already have one. You go through the process of signing up. It's free, you'll end up somewhere like here. This changes quite often. So if your screen looks a little different, don't worry, it's pretty easy. Just follow the steps that Google gives you. Eventually what you want to get to is having the tracking code. Okay so let's following me just because we're trying to get it to work. We're going to go BYOL is awesome. Website. Okay. My account name and my website name are the same. The URL is www.byol is awesome. Go industry pick one. I'm in the education, jobs and education will do. Okay. Reporting zones, this can't be changed later on to make sure it is in the country that you want the reporting from. So I live in Ireland, but if I'm studying a site for the US, I want it to be US because I want there day and night because it will be weird to be checking on them. They're like, "Hey, why they so active at 4:00 am? " When it actually it's there like 7:00 pm depending on where you are in the world. So pick the reporting zone of not where you are but with the website or the most of the people who have the website, are going to be. So I'm going to leave mine in the United States. Cool. Do I wanted to take a lease? I do. Can get tracking ID. I agree. Because what I want is this here, this is the main bit that I want. We click in here and we copy it and then we jump into Dreamweaver. So here in Dreamweaver, and I'm not going to open up these pages because I want it to be as part of the templates. I'm going to open up my template. Now, I'm in this files tab here. You can open up your template from within here. Cool, because what I want to do is I want it on every page. Now the user doesn't see it. The stuff were the user doesn't see is in this head tag, body tag is our page that everybody sees and the head tag is just the code in the background and put it where it tells us. Hey, in our case it tells us to put it just on every page. Used to have a specific space it needed to go into. So where am I going to put mine? I'm going to put mine inside. Maybe who I wanted to load just after these scripts here. Hit paste and you got this big, ugly bit of JavaScript. The nice thing about it though, is if I save it and update those pages, awesome, close it. Let's just double-check it is in those pages. I'm going to open up index, double-check its in the hid somewhere. It will be grayed out. There. It is there nice. Portfolio page. There it is. Great. They are updating. So now all I need is upload these two pages. I'm going to close them down and just upload them at the same time holding command to select them both. We'll control on a PC and go to put. Would you like to put domain and files? I don't need to in this case because it's nothing's really changed except for the HTML pages. No CSS changes, no images. So that's going to be super quick. Now the disappointing bit. Let's go have a little look, is that the drinking coke and take a little wild go. No data received in the past 24 hours, that's fine. Let's see if we've got any tracking codes straight away. Where you want to go to now is go back to this Home button, okay, and just make sure you're in, you'll bring your laptop is awesome or whatever when you are using. Okay. Down here, are there any people on my site? Is there any tracking code actually working? let's test it. Let's go to BYOL is awesome. Nice. Go back to analytics and nothing is working. Come on, Google Analytics. Now, we're all disappointed. That's okay. The let analytics can take a little while to get going, give it a day. If it's don't know working by then you've got a problem and maybe reach out to me and say, "Hey Dan, it's not working." We'll check through the analytics FAQs and see if you can fix it. But I've never had it fail really. It's a pretty solid, easy thing to do as long as you put it in the head tag. Now let's look at some of the other analytics. Let's look at one of my other sites. Let's look at bring bring your own Okay. I've got it cold. BYOL online. You can have multiple sites free. Cool one at the moment there are five people on the site. Okay, looking at different pages and we're not going to get too deep into these details because I don't know. I feel like there are personal details kind of. I don't mind sharing. You can start to see all the details that I'm getting from people, where people are coming from, the pages that they're on the most. This is the last seven days. So I can see things like time that day that's most users are online, all sorts of goodness. Now this is not going to be Analytics course, okay? We'll stick to just getting analytics going. Yeah, that's going to be us analytics super easy to do, super cool information about who's on your site. Don't be disappointed at the beginning. This might look impressive. It's not. Okay if five people on the sites pretty cool. It's one of the biggest sites I've ever made. But when you first got a site, you're going to be the only person visiting then your mom and then you Nana. Then your brother's friend, okay. You might have over the first few months you may only have a couple of people. But as you grow your business or your portfolio site, you start ranking better. All that sort of goodness. You'll start getting details in here. Alright, I'm ruffling. Let's move on to the next video. 37. Dreamweaver class exercise: All right it is class exercise time. So there are two options the first one is to continue on with this course and build us or contact us and about us page. So put content in there, link it to the homepage, and then either upload it to a host so I can see it or test it locally and send me screenshots I'd like to see what you've done with it. The next thing to do is and the bigger option is to actually build your own portfolio. I'm totally happy for you to use the structure that we've built in this course. I just want you to go off and switch it out maybe pick a different font. You can use the same font. You can use your own portfolio images. I'd love to see that. That is a pretty big exercise I know but if you are like most people you've been avoiding doing your portfolio this could be the perfect time, and I'd love to see it scrutinize it if you ask for advice I will give you some it'll be constructive I promise. All right yeah let's get on to the next video.