Lessons

Lesson Info

Many Ways to Create a Website

It's such a pleasure to be back here and such a pleasure to have a studio audience and the internet audience and it really brings me to life to know that they're real people out there this is my second class here and there really is live so everything ideo you'll see me do it live on the screen that means I might make a mistake once in a while I give prizes if I make a mistake you in chocolate or possibly jellybeans tio I also will just point out a little preliminary stuff before we get into dreamweaver last time I was here I threw a lot of chocolate at the audience and because I was using square chocolate I almost put somebody's eye out so creative live and there infinite wisdom got me a basket of soft things to throw this time so I will try to be a little later let's see heads up who see she caught right on this is why they're soft because I do stuff like that so sexy and silly we'll see so I split my time professionally as running a digital design agency so actually create websites ...

for clients I figure I need to keep myself honest what it's like in the real world to do this so I take on a few clients at a time and manage riel websites but then I spend most of my time writing books, doing training, doing public speaking so you can find lots of books that I've written. You can find me on facebook on twitter I welcome your connections and all those places and I tried to be really accessible. I even answer most of the questions I get an email let's start with just a couple of quick manager expectations. My goals in this class are really to teach you the basics of dreamweaver if you've been using the creative suite, you've been a little afraid of that during waiver program or you've opened it up when you've kind of gone, I don't even know what to do are you dabbled in css and gotten completely confused and overwhelmed? You're not alone on I'm here to try and help manage just what it's like to do the basics in doing that, I have to introduce some of the basic const out of one design. One of the challenges of teaching dream weaver is that I can't teach you dream weaver without at least teaching you the basics of html css fortunately dream weaver has some nice tools built in tow help you do both of those things, so we're going to cover the basics of each melon css and I'm going to show you a little more advanced stuff like how to upload and download web sites so if you already have a website online and the first thing I do is get it on your computer we're going to do that is one of the first things this morning, we're going to go through that process a couple times, but I'll make sure you learn how to do that, and then I want to try and toss in a couple of a little more advanced tips, but mostly this will be a very beginner class. If you're here because you want to learn to create mobile web, perhaps with phone gap with html five and css three this is not your class, I'm sorry, I'll be back for a more advanced class in the future and there are lots of other resource is on the internet, but this will be a basic intro to dream weaver, html, css class. We will not be able to cover everything we possibly can, and we won't spend all our time in power point. I promise we won't learn every feature and dreamweaver we won't learn how to write html, css and javascript from scratch. I'm going to give you an overview give you a crash course, I'm going to show you the tags that matter, but not expect you to memorize everything. And one of the nice things about dream weaver is you don't have to it has all those tags in there, so once you learn what to look for and where it is, you don't have to memorize everything. But I am going to give you this foundation and each melon css, and that does require a little bit of new vocabulary and some basic things that you have to learn. So you should learn enough to build a basic web site or to edit a sight you exist you already have. And no matter what kind of site you have, I heard something in the pre show talking about a wordpress site. The foundation you get in this class will help you and dreamweaver inward press in any other way. You might make a website because at the end of the day, all websites are based on html in css. We're going to spend a lot of time on that today, so even were impressed, which adds all these other fancy php and things like that still at its heart is hln css so let's, just take a second to switch over to the web browser, and I talk a little bit about the history of web design and the kinds of sites were created. So what I have on the screen right now is a really, really old website it's, also about the chocolate game, you know, kind of notorious for chocolate and just to kind of keep it simple, I always have to teach the rules of the talk that game in any class I teach the basics are that you put the chocolate on your forehead and you can't use your hands to get it into your mouth. I won't make you play that today because we have a different theme coming up last thing was chocolate, this one's different as you'll see, but I want to show you this old site because in the early days of web design, we use something called tables to lay out what pages and if you're redesigning a site that was created a long time ago, you may find that it's done here. I've got the borders turned on on the table. There was a little hard to see, you see, they're forming boxes, and each of the images in each of the pieces of the text are in a cell of that table, and in the early days of web design, really, the only option we had was putting a background image behind the page. This one brick eats in the background and then merging or splitting cells. So here the top of the two cells merged together so I could get that banner image that's how we used to build websites things have changed a lot, so if you find a site built like this, your best attempt at fixing it is probably to start over from scratch with everything I'm gonna teach today. Today the on ly time you would use html tables and I will teach just a little bit about that is if you're actually using tabular data if you actually have something that has a header and columns of information that are consistent on just full disclosure these are my nieces playing the talking and on and on I cheat when I play I cheat sometimes in love designed to and that's ok, my goal here is to show you enough to be able to edit your sights and get a good site online. I try to follow standards try to teach you the best of web design but also try to give you practical it vice so occasionally I will work on the practical at the expense of the perfect because you don't have the rest of your life to learn what does lisa's far as I know, one other thing to watch out for another way we used to build websites is what we called frames this is a really strange concept if you've never seen it, but each of these sections is actually a separate web page all put together in one page and if I click on these images you see that the image changes but there are already some problems I can't even really school there we go so you see this little scroll are kind of appears so you've got a scroll bar in a scroll bar I change this here, but you can't really see it with the long address because this is a site I'm looking at locally on my computer, but one of the problems with frames was that they're all in one web page, and as you click around to different pages, the address never changes. You could never linked to a specific page on one of the ways to know if you're looking at a site with frames is if you're clicking around in the address stays the same never changes. You might be working on a site with frames, and in that case, you've got one page that describes all the other pages, and it was kind of a cool idea at the time, and nobody does it anymore, and the features have been removed from during weaver and if your sights and frames started, what we will dio is make sure that you learn some basics of css and we will spend most of our time in this web site, the jump start talent agency, which I created specifically for this class. These photos come to me from my dear friend jasper jollies, a fantastic photographer. Some of his work is here on the wall behind me. I like to say I believe in equal opportunity eye candy so that you will see beautiful women and beautiful men today I want to keep everybody entertained and paying attention so you know number here khun leap justus well is all the rest of them I'm going to show you how do you see ss to create a clean lay out like this to a line images on a paged at borders to images toe have text that aligns around images I'll show you how to create differently out so I would never recommend that you have navigation on the left side in one page and at the top on another but I designed the site this way so I can show you a couple of different approaches and you can choose the one that works best for you so most of this class will be working on this site and if you buy the class you'll get the project files you'll basically get this completed website that you can deconstruct follow along you can use the images innit jasper's given us permission to use them in this class please don't use them beyond that you'll only have small low res images anyway but out of respect these photos are just for your use in the class jasper's website is beautiful and I'll show it to you just to show you that one of the things that we also do and one design in addition to html and css is to use java script whenever you see this kind of thing going on these rollovers that's a little bit of java script adding a little help to html css there are some new things and css three that can help us with some of the java script stuff we're probably not going to get to any of that today if we wash through and they're no questions I have time at the end I might throw that in I'm guessing we're probably not gonna get to it, but I want you to appreciate that html css and java script not java are often what you do in dream leader and that there's some nice things like rollover effects in the behaviors and the spry menu that make it easier to create these kinds of effects. Another thing we're not going to get to but I want to make sure you're aware of is that the latest and web design is called responsive design if you look at this site which I created and dreamweaver I want you to notice something when I pull it out of the browser line up there and now I can actually click and drag the edge of this and I want you to notice what happened as I make this site smaller they get to about the size of a tablet computer and noticed that the whole layout just changed and when I get even smaller let's get down to maybe the size of a cell phone the layout changes again this is something we call responsive design and it's about designing for the fact that today websites are seeing on everything from little tiny smartphone screens toe big giant computer monitors right and everything in between so the modern approach to what design is to create three different layouts sometimes seven or ten but usually at least three for each site seems to get the biggest size this is a little different layout everything they teach you in this class will get you ready for creating three layouts but because of the time in the basics when I teach you how to create one good desktop layout but again all that foundations we'll play right into creating the two smaller layouts and how you set that together with media queries and there are some nice features and dreamweaver that facilitate creating sites that are responsive so I want you to know this is the future of web design this is about future proofing your website and this is how all good websites should be done but in truth most of us are still kind of catching up with us just to give you an example of that I have two websites this one was designed and during we were and it's not responsive yet I'm sorry I will get around to it see I even I haven't done it on all of them this site digital family dot com is a sight that I created to go with my books and videos this one is responsive so if you click and drag you'll see it change it also uses java script for the slider this one's built in wordpress this one's built in dreamweaver now why would I do that? I teach dreamweaver and word press and they have different purposes so a lot of months ago I was here teaching a wordpress class and we did the chocolate site of course and then that site I looked a lot at wordpress themes and plug ins and all the things that make wordpress great but when I touched on and couldn't really get into that class is how dreamweaver can actually be used to edit wordpress and to create things and work process so again, even if you're thinking I don't know if I should have used this word press or dream weaver or my sights and one or the other they're not mutually exclusive you can use both and in my own practice because digital family is a site with thousands of pages or it presses a more efficient way to do it because my personal site on lee has a few pages and I wanted to have more ability to customize the layout and play with the design dreamweaver made more sense no I can talk for hours about the differences and the advantages of wordpress dreamweaver I want to just give you that initial taste their different. They're not mutually exclusive and what you learned today will help you with either one. Any initial questions burning as I go through the basics of holly sites work well, just a quick question, then from sweet sicily does job allow you to have photos that scroll automatically great? So let me just clarify one thing. There's java and there's java scripts java is a programming language more in the category of php java cold fusion doc net what a weird thing for microsoft to call that those air all programming languages used for dynamic websites, so wordpress is built with php as well as hln css lots of really big, complicated sites are done with dot net or java or cold fusion. Java script is a completely different animal that just happens to share the name and java script can be used for things like these rollover effects, but it can absolutely be used for things like automatically sit shifting through a series of images. One of the transitions were saying I'm not showing a site, but this is another question I get a lot. Many people have designed their websites with flash because flash was really good for creating slide shows and animations and lots of interactive features what's the problem with flash today, why don't we use flash as much today I've heard I don't know if that show is google can't your clothes it's actually the ios that can't display it so google under? Well, actually, maybe what you're getting at google was not historically good at reading the text in a flash fine, so if you want the best search engine optimization, the best ceo flash was usually not the best choice, but if your goal is to have something that works on an iphone and an ipad, the problem with flash is that they don't work at all so you can have this beautiful slideshow in flash that's fantastic and you open up your web site on your ipad and there is nothing there because of that limitation of the iphone and ipad which are so popular and so many people are surfing the one with them many people have left flashed behind and moved to html css and java script to create very similar effects. So you see a lot of java script on the internet today doing things we used to do in flash okay, you know what? I already threw a ball at you, so I'm gonna give you a soft piece of chocolate. Thanks for that question and the answer. Okay, let's, dive in a little bit today. Quick question. Yeah, sure, sure, a question from colorado dreamboat ass if I decide to side today or if it if I designed to say, today and dreamweaver, but I have to start completely over if I wanted to move it toward press tomorrow. So that is a great question that's a little bit complicated answer. And let me tell you why most people today, unless they're fairly technically savvy, are going to start with a theme, which is like a complicated template that somebody else created for them. And in that case, you're kind of starting over because you're probably going to just move the content from dream weaver in toward press if you get relatively advanced injuring lever in this class will give you the basics, but you would have to learn more. You can actually create your own theme in dream weaver that will work in word press, and a lot of people do this, so if you're willing to invest a little more time, you can use dreamweaver if you've got a site in love and dreamweaver, but you want all the functionality of wordpress, you can turn your dream. Weaver lay out into a wordpress theme by simply replacing the content with the php code and setting it up with the database. So, in theory, absolutely intern injuring weaver site into a wordpress site, in fact, have some examples where you can't even tell the difference. Because the design can be exactly the same if you knew how to make that being yourself and removers great for making themes but that is a more advanced level of use of dream we were to do that thank you great questions so let's jump into dream weaver a little bit so I want to start by saying this is dreamweaver cs six I want to talk about versions a little bit there's a rumor that there's a new version coming out called dreamweaver cc I can confirm that rumor today it will be out soon that there is a lot of talk about that but in part because adobe is moving to the creative cloud and not everybody wants to do that I won't go into all the details of that dream weaver csx will continue to be available and supported so I feel very confident teaching dreamweaver cs six today e I'm not even allowed to teach dreamweaver cc yet so this is the right place to start and again almost everything I'm gonna teach you today will apply to dream weaver sisi as well I'll try and point out a couple of differences and I'll talk a little bit about the versions but I want to jump in a little bit here so you're looking at dreamweaver cia six and you open up this program and if you're like most people you kind of go oh are now even start right, there's all this stuff on the screen and that. Well, let me let me just try file new and I'll create a new she's how even? Create a new page. And you know what? You don't even start there. That's, you're already wrong. I'm sorry. When you start with dream weaver, you don't start by creating a new page. You start by creating a new site, right? So the first thing you're going to do in dream weaver and something we're gonna do over and over again throughout this day is go up here to the site menu and shoes new site. So I want you to get in his head. I don't really want you to get in my head. I want you to get this in your head. You know, sometimes it's hard to parse everything when you're doing this, I want you to get this on your head when you start with remover. The very first thing you do any time you're gonna work is set up the website. Once you've done this setup process, dreamweaver will remember it, and it'll keep track of it, and it makes it easy to switch among different sites, and I'll show you that as well, but the very first thing you do it's set up a site now that sounds kind of ominous. What does it mean to set up a site? But here's kind of a cool thing, starting with dreamweaver cs five if you've got an older version, this dialogue window looks a little different. I'll show you this a screen shot the second, but the site senate process was really simplified. I just zoom in a little bit so you can see exactly what I'm doing here sites set up is really about naming your site now you can name it anything you want because this is really just about you being able to keep track of your sights. So this name is just for you within the interface of dream, we have to keep track similarly, the folder that you should have on your computer where you going to keep all of the files that are for your web site? You could name that anything you want as well after that, I'm gonna start getting really strict about names, we'll come back to that. So what you're doing in sight set up is giving the sight of name that you can identify and dream weaver and then telling dreamweaver where that folder is on your hard drive, where you're going to save all those files as we go through some of these things, you'll start to understand why that's so important that all of the files on your web site get kept in one folder because when you transfer them up to a web server later, they need to all go up there together in the same relative location toe one another. So you going toe folder on your website folder on your hard drive with your web site and a folder on a web server that matches that. And because of that, the first thing dream weaver needs it's nowhere is that folder, so all we're really doing inside set up our two things naming the site and finding that folder. Now, if you're working on a site that you've already created, I'm just going to go in here to my section here. If you've downloaded my project files and you want to start by opening up that jumpstart talent agency, all right, then we're going to go. We're going to select that. Now if I open this, you're going to see that that is just all of the h e mail and other files in that web site. So I'm setting up in this case an existing site later, I'll set up one that I'm building from scratch, and then I'll show you how to download one off the internet, but right now I'm just finding a site that already exists. If you got the project files you can follow right along choosing that folder and down here you see once I selected it I just click on choose and dreamweaver now says oh all your website folders are in that folder great now I know how to reference everything when we set links and insert images cool so now let me say that all right, now let me zoom back out you can see what happened now notice over here we can zoom in on this part there's a files panel and when you set up a new site and dreamweaver the files panel which I can well around here lists all of those pages makes it really easy for you to find them in the interface so after you've set it up you could make sure it worked by looking at that files panel. But first you have to find that files panel so let me open up a page. I'm gonna open up the main page of the website anybody know what you call the main page of a website? Early tough question home page oh that's nice home page. You know what most of us call the first page of a website home page but we name the file itself index not obscure why would you call the main page your webs like index so you see this index file any time you're looking at an existing website the home page you're absolutely right is going to be a file called index. There are a few exceptions, as there always are on some microsoft sites and might be called default, but almost every site on the internet is either index dot html or index stop bhp. If it's a wordpress site, that main page is always going to be index that's, actually, because when a browser comes to your website and looks, all those files are in that folder in the browser gets there and since I came to the domain name in next is the first page that browser is trained open actually it's really the first page the server delivers, but that's why we call it index so the browser on the server no this's the home page index some geek came up with that, you'll hear it over and over, but in next dot html, we're always going to call the home page index, so I opened up my index page and you can see now this is the web site we're going to be working on today, so the first thing I'm gonna do is I'm gonna go back to my power point presentation for a second that could make it work, and I want to just talk about versions, right? So there are a lot of versions of dream weaver, and I'm gonna embarrass myself a little bit by showing you that I wrote the very first dream over one point overtime these there was no dreaming, or too, because the first one didn't sell that. Well. Honestly, back then, there weren't that many people do, a lot of design, but then during we were three came out, they thought, well, maybe this program's catching on, then for then and these are actually a lot of order the company that owned it at the time called dream weaver max, and then I'm x two thousand four and then dream we were eight came along, although I think it was really version seven or not, I lost track myself. Most people have probably caught up with one of these versions. Cs three cs for c s five there's a c s five dot five don't be confused by that it's kind of like see us five not quite see essex, but somewhere between a dummy thought maybe they should have another version and the numerous industry were cc if you have an older version than dreamweaver. Cs three it's timeto upgrade I'm sorry, but really and it's, not just because you should spend money on software, right? Really that's up to you it's because the internet has changed so much that if you had my dream we were eight book and dreamweaver eight you'd still be building websites and tables and we don't recommend that any more it's what I wrote about then it's what we all did then it's not what we do today so I always recommend get the latest copy of my book and the latest version you can afford and do your best because you the internet changes so fast but one of the things we have to talk about is that if you're using dreamweaver cs three while you're watching this class some of the things I shall aren't going quite be the same if you're using c s five or six almost everything I showed the exactly this five five dot five and six you are in exactly the right class should have no trouble cc probably nobody even has that yet but if you in the future get this video all of the css features have changed quite a bit inversion cc so be aware of that but we're going to be using c s six and I will try to point out a couple of differences for example that site set of window we just went inversions yes for it looked totally different in fact teaching that basic site set up used to take me fifteen minutes now it's just two steps they really simplified that their whole on other options still in there but it used to be a really complicated screen you had to do all these things just to set up your site you actually really only had to do two of them but it showed you all of those and that confused people so inversion for inversion five they simplified that just to give you a quick sneak peek this's dreamweaver cc and what the interface looks like and this is what I mean by the css has changed there if you've used during liver before you might be used to having some css panels here but now everything related to see assesses in these panels so it's quite different and instead of opening a lot of the dialogues will open as we do css everything is in this panel set over right so that's just a sneak peek have dreamweaver cc again once you learn the fundamentals in this class it really doesn't matter which version use so we're using dreamweaver cia six but this still may not look exactly like your computer for one thing I'm on a mac and some of the oran windows always like to ask how many windows users in my audience and how many mac users who for the one you're kind of out number and you know what? I'm actually a windows mac person myself I like to say I go both ways I never understand why people laughed at that joke but no I use mac and windows quite a bit and I really recommend but you get comfortable with both but the truth is once you get into dream weaver there very few differences so even if your own windows and you realize I'm gonna mack with very few exceptions that I'll try to point out most things will be the same. The other big difference however is this different layouts injuring we were so if I suman over here I want you to see that their a list of options over here in the top right hand corner that radically changed the way the program looks it's if I zoom back out you'll see I'm in designer view right now designer compact actually if I switched over to coder view you might guess that the program would change look at that to be more focused on programming this is all the html code behind that web page and if you're a coder and you love working in the code this may be how you like to use the program and you'll use it this way all the time we're not going to do that we're going to stay more in designer view but there are a whole bunch of different options you could have dual screen options so it shows you multiple things at once you can and then I lost my options let's see if I could even get back now to that list of options um if I choose my workspace layout, you can also get to the workspace layouts from the window menu. We're going to spend all of our time in the designer lay out, so if you choose designer from this list, your program interface should look just like mine. And if you move some things around because what's cool about dream weaver is that, like all the other programs on the creative suite, you can customize it to be how you want so you could drag this browser latte option out of here and open it up and have it visible and here's a tip. Don't be killed, rosa lab really sorry you won't find it in dreamweaver cc and you won't be able to use it anymore, so we might as well get rid of that right so we can disclose that and it doesn't have to take up space on the window. You're going to double click on these tabs to open things doubleclick again to close them so it's pretty easy to switch around, you can have multiple tabs in the same area, you can click and drag to move things up announce if you're working on files and you want to see the files panel, you could do that, then when I'm working on css and we bring it down. Start looking at some of that css code don't worry about this, we'll get into it war, but you see that this program's really flexible, and then if you get to the point where you've moved this around and you've moved that around and you've moved that around and online, gosh, I don't even know how to use this program anymore. You can go back over here and choose reset designer, and it puts it all back that you can also save your own setting. So if once you get the browser lab thing gone and you know, you don't want it there anymore and actually gonna get rid of business catalyst also that's a tool that adobe it's, a hosted web service that lets you do a whole lot of things, but we're not going to use it all today. Someone close that as well. And now I could say, you know what? This is my workspace layout. If I choose new work space, I can say this is janine's layout, click ok, and dreamweaver will remember that this is how I like to use the program and I can always go back and reset miley out so you can customize this however you want, but I want to make sure we're all on the same page as you say, and you can follow along one last thing that you can only kind of switch the interface around if you have a file open, so I want to have an open the home page, the index page of this website, but you could just create a new blank page, and as soon as you have any page open, you can start moving stuff around in the interface. So if you're messing around with that at home, you don't have to have the project fights, okay? I'm going to take a quick break, see how we're doing with questions. We're doing good any in the audience, so you're going to take us through your custom work space because that had that had come out. Yeah, so I actually in my computer at home have multiple workspaces said okay, because what I find is if I'm heavily doing css, I may want it one way if I'm heavily setting up a bunch of links and they want other features. So for example, up here is the insert menu now in older versions of dream weaver this man, you used to be up top of the screen, and a lot of people still put it up there. In fact, if I go to classic new keeps flashing the browser as I do this. Classic view you see here these air the insert menu options and this is just an easy way to insert links insert images the's air tools that you'll use a lot as you're working and dreamweaver if you like them appear and its tab so you can get to all the different kinds of tools like most programs in the adobe suite there are way more tools in this program than you will ever need in your life my goal today is to show you the ones that matter most I encourage you to explore all of them but classic view will get you back to that cs three cs four layout you might be more comfortable with I really gotten toe like having that insert menu here in the top right but even then you can switch it around so for example I often hide the labels which just means you get the icons instead of having all that extra information if I show the labels and you see what each of those do but if you want to make it a little more compact so it's not taking up so much room that's kind of a handy little way so I often set up dreamweaver kind of like that and then the files panel I might have completely closed while I'm working so I have more room for the css and then just open it up if I'm doing something with the files on the site, okay and again, if you save the way you like it, you can always re set designer. Or you can choose again your own layout. And it again takes it back to the way I had it before. So let's, just take that, okay, I'm gonna leave those little things showing, so you can see what those icons are.