Lessons

Lesson Info

What's New in Dreamweaver CC

We saw a bunch of Dreamweaver Muse in the last session. We actually got through many of the features and muse. There are some things we didn't get to, but that was a pretty good overview of what you could do with that program. And again, overall, I'm really impressed with words going in general. I think it's still a 1.0 program. I expect to see more features at, and some of the obvious things that are missing, I'm sure, will be added. But Dreamweaver actually kind of had the opposite problem. It's kind of interesting when you get to Dreamweaver CC. If you've been using previous versions and again, just so you know there's Dreamweaver CC. And then there are updates that have happened as recently as 8 15 2013 Today I'm teaching on 8 13 So if you buy this in the future, there may actually be slightly new features in the program. But the biggest change Inversion cc, is all the things that were taken out. 10 panels, 14 dialogues and 62 menu items have been removed from Dreamweaver CC. That...

's a quote I learned from Paul Trani, who is an adobe evangelist. Fantastic presenter. If you get to see Paul somewhere, I highly recommend the meats Delightful to watch. And he's really good at showing all the cool things that Dreamweaver does. I don't work for Doby, So I'm gonna point out some of the things I wish during waiver did or it doesn't quite do as well as I want. Same with Muse. But I will tell you up front, I'm a big fan of Adobe. I'm really intrigued by Muse. I've used Dreamweaver for more than a decade. I love both programs. So with love and a desire to really help you get the most out of these programs, I'm gonna show you what's new. What's not here, Some of the things you might be missing and hopefully some tips to help you along the way. If you've never used dream we were before, this is not enough to learn how to use the program. I'll just set that up right away. I will try to give you enough basics that even if you haven't used it, you can get a sense of how it works and get a good overview to get started. But because this class is about using CC. I'm gonna look mostly at what's new in CC and not spend as much time on the basics as I did in my dream. Weaver 101 course which I taught here some time ago. That course used Dreamweaver CS six. But the very basic fundamentals are actually pretty consistent. So if you already have that coarse or you've seen that this should be a compliment, not a complete duplication of that and with a focus on the new version CC. So one of the things that's gone or changed is that the CSS Styles panel this is what it looked like in CS six. Just to give you a sense, when we move into Dreamweaver CC, it looks like this and what you're really seeing here is this whole area here now expanding the whole CSS panel to this designer panel with many more options and in many ways a much cleaner workflow. But it is quite different from how things work before, and there are some dialogues you might have been used to that simply aren't here anymore. Um, this is the basic interface here, some tools that one of the things that's changed a lot is the spry menu and the insert menu. So if you're on a screen like this, this is Dreamweaver CS six Again, there were a lot more options in the spry menu. There was a spry menu in Dreamweaver CC. You'll see that's not there. One of the things that I think is probably most missed in the new version, Sisi is there is no way to insert a menu anymore so that horizontal or vertical menu that we created and Muse that was so intuitive to make that drop down menu. There used to be a way to do that and dream. We were using the spry. Many of our it's been removed, and it hasn't yet been replaced. I wouldn't be surprised if it gets replaced in the future. There are some plug ins or extensions that I will show you that that offer that functionality. But in Dreamweaver CC, there's no more an option for making drop down menus. Of course, I can UCC to make a navigation menu, and that's all built in. But the drop down menu future that lets you do things like this is no longer there. Just a little shoutout. That's my husband. Okay, if you're watching Dave, Hi. Okay, you will still find the behaviors. And although there's no insert gallery feature and Dreamweaver, I've created a lot of galleries over the years like this one. The This is a site called In Plain Sight art that I did for a friend years ago. When you roll over these images, this changes, and that's done with the rollover effect in Dreamweaver behaviors. That's not changed in CC, so I'm not gonna get into it. But I want to acknowledge that it exists so that when I say there aren't any ways to make galleries, there are ways if you do it manually, but the rather tedious, time consuming insert each image yourself, set up each thing yourself to use that feature, so I'm going to jump right to Dreamweaver Extensions. This is a somewhat advanced tip if you've been using Dreamweaver for a while. If there's some features in Dreamweaver CC that you really wish were there that aren't these are the four extension creating companies or the four companies that create Dreamweaver extensions that I have been most impressed with. Project seven has an image gallery magic, too, and a rotator that I've been very impressed with their pop up magic menu. Three for drop down menus is really quite excellent. So if you're looking for a drop down menu feature in Dreamweaver CC and you're really frustrated that it's not their projects, seven has something called Papa Pop Menu Magic three. That actually has a whole lot of features. Not gonna show it, because you have to purchase that separately and add it into Dreamweaver. And I don't want to go into that in this basic class. But I do want to give that tip for anybody who's frustrated. They don't have a drop down menu anymore of years that with some clients, it's pretty intuitive to use. It's great, the power slider from extend studio I used to use on my site. Now that I'm using WordPress, I use something different. But I was very happy with that tool as well. And if you're interested in shopping carts specific to Dreamweaver, the last two are probably your best options. So that's just to extend the range and make sure that my advanced users get something out of this class, no matter what. Most of those tools do cost somewhere between $2500 to add to Dreamweaver. But if you're doing a lot of sites or you're using those features a lot well worth the added expense also mentioned that forms in Dreamweaver have changed all of these spry validation options that were in Dreamweaver CS 60 and I can zoom in. No, I got my zoom back. Sorry for not being able to zoom in the mews segment last time. Um, those spy validation features are gone, but there's still lots of form features, But again, you have to come connect any form you create a dreamweaver with something on your server so during mover can only let you build the form. It doesn't have the programming built in to process the form data. That's what Adobe forms Central is for. So if you're trying to figure out how to make forms, work on a website, a kind of simple catch. All solution is Adobe Form Central. There are other scripts. You can get a few Google forms, scripts, foreign processing, contact, born processing. You'll find things through Google. You'll find a number of scripts and some Web hosting services. If you pay for Web hosting will include some basic scripts for form handling, so you can build the form and during labour. But you can't actually process the form without something on the server. So that's all I'm gonna cover in terms of forms gonna go through some of this kind of quickly because I want to get through what's new in CC in this election and in the last session today, I really want to dive into the fluid grid layouts, which were new in CS six improved in C C. And that's how you create responsive design. So that's one of the hot topics. So this is the site set up process from Dreamweaver CS four and previous versions. This morning I was talking about all the different versions. If you're not at least at CS for, you really should upgrade. If you're at CC, you'll see a very different dialogue. But if you haven't upgraded since, CS for this is a radical change. The site set up dialogue, and we'll do that a couple times. At the beginning of this class, the new site set up starting in. CS five was greatly simplified, and it's pretty much still the same. That's one thing that hasn't changed much in CC. And remember, this is just about setting up that folder. We're going to save all of the files in your sight. When you transfer them to a server, you know, everything's gonna work, so we'll do that a few times. I always suggest when you're working in Dreamweaver, especially for new, or if you're redesigning or testing a new features that the first thing you do is set up a sandbox. So if you're looking for a quote of the day, I think everybody should set up a sandbox. And Dreamweaver, let me show you what I mean by that. I'm gonna switch over to Dreamweaver and I was showing you earlier today, and now that I can zoom in again, I can go in closer that once you set up a site, it shows. So we set up that architectural photography site that we're gonna work on today, and I set up my own site. Um, there is already a sandbox set up here. So what we do is show you how to change the folder that a site points to, and then I'm gonna set up a completely new site. So let's look at that sandbox site that's already in there. Because, of course, every during Weaver site should have a sandbox. But once you played in one sandbox, it's kind of full of everybody's toys, and you really don't want you know who wants to clean the sandbox? I think you just start a new sandbox. So whether you're setting up a new site for the first time or your redefining an existing site, you can do so by choosing manage sites either from the bottom of the files panel here or by choosing site manage sites. What that does is bring up a dialogue that lists all of the sites that have been set up in Dreamweaver. That means I've taken the time to tell Dreamweaver what is the main root folder, the folder where I'm gonna save all of the files and Dreamweaver can identify the folder with all the files for each of these sites. What's nice about that is if you work on multiple websites the way many of us do once you set it up. Once in Dreamweaver, Dreamweaver remembers it, and you can switch from one site to another but everyone small. You might want to change what folder that site definition points to. And to do that, you just go in and select the name of the site you're already working on. Choose the Edit current site buttons on the click on Edit button, and here, instead of choosing the folder or creating a new folder for a new site, I'm just gonna change it again, just browsing for the folder and I'm choosing the root folder. Let's just go to the desktop. Remember, you can choose an existing folder, or you can create a new folder, Your own Windows. There's a create new folder option here on Macintoshes. It's at the bottom left. So I'm gonna call this sandbox to so it won't be confused with Sandbox one created and selected at the same time. Choose it, Save it. Okay, I'm done and I have a new place to play. But all I've done in the site set up process is create a space toe work in so very different from news. Remember when we set up a site and muse immediately? We got these wonderful image icons, and we could start creating new pages just by clicking on the little plus sign. That was really an intuitive way to start building out this site structure kind of cool, and we can even delete them just by getting rid of them. In Dreamweaver, it's not quite as intuitive, but in principle, the same thing is happening. You wanna have all of the images, files and everything else related to your one site in one place, so you set up that site and you can set up multiple sites. So let's set up another one. If I'm working on a site that already exists, I've got the whole side of my folder. I set it up the same way. So manage sites. You can choose new site from here, or you can simply choose site new site to go right to the new site dialogue. So again, this actually hasn't changed. But I always try to make sure I spent a little time on this because if you don't take the time to do the sights, set a process before you start working on a new or existing site. Many of the features in Dreamweaver don't work properly, so always start by setting up a site. So this is a site I created about Antonio Gaudi. And we're going to spend some time on that this afternoon. This is the site here. So I'm just gonna select this and I'm gonna start by using this as a site to just show you some of the cool new features in Dreamweaver this afternoon. We're actually gonna build a site very similar to this. So if you wanna work and Dreamweaver, one of the things that is a little confusing potentially right away is that you have all these different options. You could be in code view. You can be in split view. You see what I've got going on over here, Cody, you split view, design view, live you what's all that about? And then there are also kind of different layouts. So there's compact or expand it. Now, if you use Dreamweaver, CS six, CS five, CS four. There were a whole bunch of layouts over here. There was coder and designer and all these different layouts, and you could switch back and forth and and you might guess coder was optimized for code view and designer was after my for design view, but in Dreamweaver CC again because they removed a lot of things to simplify it. You simply have the expanded option. Sorry that Muse showed there for a second or the compact option. Gonna close my ears. So that doesn't happen anymore. We talked about Muse a lot last session. And the only thing I'm gonna do in this session with views is to show you the code that got exported from use. I'm gonna open that up in Dreamweaver in a few minutes and just show you, if you've been thinking, Well, I can mock it up in news, and then I'll open it up and Dreamweaver and play with it. I'm initially why That might not work as well as you think, but I'm gonna close muse for now so it doesn't keep flashing on the screen while I'm working in Dreamweaver. So there are a couple other things going on here. Down at the bottom. I have different layout options. Look at that. When we go all the way to design, I've got some limited real estate here on the screen because of the resolution of this monitor optimized for you to see as well as possible on camera, but not the way I usually work, usually work on a higher resolution monitor, so you may get to see more things on the screen at once than I do down here at the very bottom. And this has also been in previous versions of the mobile size, the tablet size and the desktop size. And when I click on them, they're switching from one layout to another. And because this site was designed using the fluid grid layout features, there are actually three very different layouts. You'll see this more if I scroll down, depending on how big your screen sizes. That's what we call responsive design, and I'm just gonna preview this and a browser so you can see one of the ways you know if you're working on a website that's done with responsive design is if when you click and drag the browser window as it gets smaller, the design responds to that. And when it gets even smaller, it changes again. So dream weavers, fluid Gridley outs enable you to create three different layout options with one HTML page, and that's when we're spend the whole last session on. I'm gonna go into depth on how that works and what it means. But I wanted to give you a sneak preview, and I've chosen to use this site to show off some of during livers new features because it's got enough complexities to appreciate some of the new features in Dreamweaver. One of them is that it uses some CSS three features, so you can see how this navigation bar looks a little funky here, and boy times might become a mooring choice for the main text on your page. I want you to look again over here and again. This is not new in this version, but it's still true and CC live. You operates like a Web browser designed. You operates like a really old Web browser. So when I click on live, watch what happens. Hey, that's kind of a cooler looking site. Looks a lot more like what we saw in safari, right? My thoughts come up, my rounded corners show up very differently out. So one of my continued frustrations with Dreamweaver love you adobe. But please is the fact that design, view and live you are two different things and Dreamweaver, in my humble opinion, live you could replace design, view and things would work a lot better for all of us in the reality of programming. I'm sure there are a lot of challenges to that. But in the reality of designing websites and dream we were today, that means that in order to really get a sense of what you're designing and how it's gonna look in a browser, you have to click on live you. But some of the other features in Dreamweaver. When you're in live, you don't work. So we have to turn live you off. Do some editing turn live you back on, make sure it looks OK. That's a rather cumbersome way to work sometimes. So I hate to start Dreamweaver by showing you how not intuitive some of this is after I showed you how wonderfully designer friendly Toby Muse is. But I'll get back at Muse when I show the code view in a few minutes. So So let's look at some of the other things that are new and CC and probably the most dramatic thing that's new and CC when I'm doing here, just clicking and dragging the set of panels over to the left to make it a lot bigger If you don't see these, you'll find him under the windows menu, and you can always open and close any of the panels Injury. We were here, so I'm using the CSS designer down here and I've got the files panel open so I could see all of the files on the site. But I'm gonna close that just by double clicking on it. It closes up, and now I've really got lots of space for this new CSS designer and the coolest newest feature in Dreamweaver. Sisi is definitely the CSS designer, and for the most part, even in live you you can use the futures over here. So while you're working in CSS, if you turn on live you, you'll still be able to click around to the different style sheets and the different features. So let me tell you a little bit about what's going on over here. So the first thing that you'll notice is this sources dialogue. What exactly is sources? So sources tells me that there are actually multiple style sheets attached to the same document. If you've never worked with CSS before, that's cascading style sheets. CSS has a lot of complexities. I could spend four days just teaching you CSS. It's that complex. Dreamweaver simplifies a lot of it for you, but in this crash course, if you've never worked with cease CSS before, I just want to tell you just take it in. Just start to get the idea. Don't worry about all the details. I can go off on some kind of more explanatory pieces about CSS. But it would it make it impossible if I do too much of that to cover much of Dreamliner. So just bear with the idea that one of the fundamentals of CSS is that you can save styles in the document you're working on. Or you can save styles in a secondary document with a dot CSS extension. And you can attach that page to any or all of the pages in your sight and kind of like the master pages when you were working in Muse. If you make a change in one master page, it affects everything created from that. If you have a CSS file with the styling information that applies to an HTML page, then when you make a change in that CSL s file, it applies to all of the pages that files associated with, and you can actually have more than one CSS file associated with each page. So this page and part of why I'm using it to show you, has to CSS files. It has one called boilerplate dot CSS and one called responsive dot CSS. And because the response of that CSS file has media queries for different layouts for the tablet phone and desktop size layouts, it looks like there are three different CSS files here. But really, it's one dot CSS file with multiple media queries represented by these other two. Again, that's a lot if you've never worked with CSS. If you know a little bit about media queries that when I scroll down here and we look at this media section, you'll see Oh, hey, there's the media query that says the styles associated with this media query should Onley work on devices that are smaller than 481 pixels wide means IPhone in horizontal and smaller right, and then the other one should work on Lee when it's pixels. So Dreamweaver is dividing the page breaks in terms of where that CSS gets applied. Why That layout changed when I clicked and dragged. When it gets to the size of an IPhone, it changes toe one set of styles. When it gets the size of a tablet, it changes to another size. When it gets the size of a die stop, it changes to yet another size, and that's what media queries are. And that's what's going on in this section of the new CSS designer. If you're working with a page, I'll create a simple page in a minute that doesn't have any media queries. Then there won't be anything here, and that's OK. You can just close up that part of it and not even use it. If you're working on responsive design, you may find it really handy that you can easily identify the styles that are associate with each media query by clicking on them Here, the global option means that those air styles that apply to everything irrespective of screen size, so in addition, toe having styles that apply only at certain screen sizes. There are other styles in the site that apply to all sizes, no matter what. Okay, so the CSS designer panel, if you've never use CSS before is a lot to take in at once. If you've been working with CSS for a while, you might be going well, that's that's kind of cool. So first I say, Well, the style I want toe work on is in this CSS file, and it's associated with this media query. And then here's all the selectors. So the other element of CSS again making the very crash course in CSS is you could have styles that start with a dot those air class styles. You could have styles that start with a pound. Sign those air I D styles. You can have compound styles like this style only effects list items if they're in the a Norden list tag and their associated with an I D style called Never and Again, if that doesn't make any sense to you yet, that's because styles are complicated. But what I want you to see here is that all of the styles in that are associate with this media query get listed when I click on it and all of the global styles get listed. When I click on that, how we doing over there? Jim throwing a lot of people at once. Let's keep rolling because I know Todd Australia, who's one of our regulars out there. And me from where I'm sitting were slightly a little bit more advanced. And we're loving this CSS designer. So this is like speaking English to us. And the people that are Lord that are a little newer are definitely getting it. So thank you. So let me really blow your mind with CSS designer because I saved the best for now, let's just open up something that brings up the properties because this is where not only to CSS designer. I think it particularly cool. But if you've never done CSS before, some of the constructs of CSS can start to make more sense because there are visual aids to help you with this now. So check this out, Jim, When I choose a selector over here, I've got multiple properties to work with. I have the layout properties, I have text properties, have border properties, have background and then others so I could jump around. If you actually scroll through this, it's one really, really, really, really long list. They're all there. These links at the top just let you jump to a specific area if you're formatting the text in your style or if you're changing the layout in your style. But one of the things that's so nice if you're new to this or if you're a visual thinker is when you set margins and styles. Now you get to use this tool. This did not exist in earlier versions. This is wonderfully intuitive. It used to be that you kind of look a right left right bottom. Where am I putting padding and margin? And so padding goes on the inside of an element and margin goes on the outside of an element. What does that mean? Well, I think this visual tool actually helps a little bit with us. So if I have a box like a def tag or an image, and I want to put space around it, I can put as much margin space as I want on each of the four size sides. And I could do in this very visual way if I want to put padding, which goes inside a box. If I have a DIV tag that's like a box patting, it's inside the box Margin is outside the box. This is a visual attempt to kind of represent that. And again, you can change that in this very visual environment will do a little more of that. You also have some positioning elements that have again a more visual option. So you see, if I'm floating right or floating left, I kind of see Oh, that means I'm aligning something to the left. I'm aligning something to the right, so we're going to do a little bit of that. But I just wanted to give you a sense that the CSS designer has a lot going on. It is by far the biggest change to Dreamweaver CS CC. And if you've never used CSS before, it's an easy place to get lost. And if you have a simpler site, it doesn't have as many things going on in it as it could. Let me show you one more thing. If I split the screen here, I want you to notice that over here in my code view, I have some names of things, right? So if I look in code, you see things like remember there was that I d now have an inside that were list items and a new ordered list that style that applied to this code. So there's HTML code and styles that apply to HTML code. And as you get more comfortable, or if you've been doing this for a while, it'll be really familiar to see an I D or a class style called Never an Idea or Class so called banner article Footer. Thes air. Very common styles. Now the advanced users already thinking HTML five has tags for that, you're right, and we'll get to that. But the beginners. I want you to just kind of see that if you look through my code, I'm not going to say this is the cleanest code in the world. But there's a logic to what I've done here. There's some elements here that are pretty clear, pretty easy to figure out once you worked with dreaming for for a little while. Now let's go look at what I'm used it and then we'll go back to creating a simpler page and dreaming somebody do site set up new site and muse exports. So this is the muse site that I created before today's class. It's a simpler version. I mean It's a little more complex version than what I did in class, but the code looks pretty much the same. So let's look at my computer completed muse site and the muse export. Remember when Muse exports exports multiple HTML pages? CSS. It's creating ultimately the same basic file types and code that Dreamweaver does. So choose it, save it, and this is going to set up like any other site and Dreamweaver. And if I just close this for a second, you could say, Well, see, it looks like any other site. I've got an index page, by the way. Newbies indexes what you call the home page of any website, and you can also put an index page in any subdirectory. And that's the first page the browser will open when it gets to that directory. So you're opening up a site you've never opened before, and you're looking for the home page. Look for the index page. So the first thing I'm gonna do in my news site is double click on the index page and, uh, wait a minute. What happened? So here's my architectural photography site. No, Like I said, this one slightly more complicated than the one we built together this morning, but it's pretty similar, but it sure doesn't look like that here. What do I say? I'm in design view. Why? Oh, there isn't. Why does this look so different? Why doesn't this look like it should? Well, let's give Muse the benefit of the doubt. Let's click that live button. Remember, I said, If you're in design view and Dreamweaver, it's like a really old browser. If you're in live you, it's like a newer browser, Mu says. It doesn't work in all browsers, just the newer ones, although it goes back pretty far. But let's click live. Oh, thank you. That looks so much better. That looks more like I would have expected a website like this. And now, because live you is also like a browser. You get rollover effects and and that's kind of cool. Asai, scroll down, You see? All right. So not as bad as it looked when I first opened it, cause wow, that's just not at all what I expected. So part of working with Muse and Dreamweaver would be you're probably gonna want to be in live. You you're gonna have to switch back and forth. Okay, But let's go to split view and let's just see what Muse did behind the scenes. Now you remember we just looked at that page. I created lots of different ways to create CSS and HTML. But as I scroll down through here, let's just see if they're so things that those of us who have done Web design for a while, huh? So the first Div tag says, Class clear, fix I D Page. The next one is class position content. Okay, then we have column I. D. P u 2893 There's a style name for you. Oh, next one's called you to eight six four dash for What's my point here? Good code, Bad code clean code, messy code. At the end of the day, it's whether you can read the code or not. Does the code make any sense to you or not? So when I create a style called Nev, I know that's probably about the navigation. When I create a style called Footer, you know, that's probably where you put the food, er, and that's a pretty common convention throughout the Internet. But as I'm looking at the styles that got created here in Muse. In this wonderful, magical way, that muse kind of took care of creating styles for me. It created a bunch of styles with names like you 4 to 1 that's going to make it a little harder for most of us who create styles with more intuitive names. Toe understand the code. So it's one of the reasons I would say, the codes a little bizarre in muse for most of us who are used to writing code. And I would say, Just looking at that, there's more code there than there needs to be. If I created this page from scratch and dream we were, I could do it more efficiently. There would be fewer lines of text now. Is that going to make hours of difference in download time? No, it's gonna make seconds or milliseconds, but the cleaner your code, the more efficient your page, the better it loads, the better it works on mobile devices, the more love you get from Google, so at the end of the day, code does matter doesn't matter enough. If you love those design tools and just creating a simple portfolio for your art or your photography. You may be perfectly fine with news, but if you want to be able to edit the code, optimize it, take it to the next level. If you've got the fantasy that you're gonna start in use and end up in Dreamweaver, let me to show you why I wouldn't do that. Because the next thing after we say Okay, well, let's let's not even look a split view. Let's just stay in designer here with live. Let's just use those wonderful new CSS tools entering Weaver CC. What have we used those? So Okay, well, sources we said this designer tool shows if they're multiple CSS files and yes, indeed, there are multiple CSS files. So let's click on. Wait a minute. There's something kind of weird going on here. So all these CSS files created by Muse have these funny extensions on them. And because of that dream, Weaver doesn't really recognise them. The CSS files. So none of my wonderful new CSS designer features are gonna work the way you would expect them to in most remover sites. I did find a little bit of a work around, you know, I said, I want used muse. A lot of actually banged on it quite a bit. And I did try to go back and forth quite a bit. So I double click on this. I can actually open. Let me split this again and let me open these. Double click on this and Dreamweaver doesn't recognize it. Usually if you double click on a CSS file here, it opens over here. But I want you to notice that in Dreamweaver you also get all of the files Associate ID with whatever file you have open across the top. So let's again trying to give the benefit of the doubt. Let's open up this site. Global CSS Zoom back out. Let's go. Just a code view. And now okay, I can see the styles that were created. Some of these make a fair amount of sense. This global one. Let's go to this Master CSS Oh, there's my you two eight six four dash for Okay, So these are all the styles that means created for me. Thank you so much. And now that I actually have the CSS file open in Dreamweaver now, I'm starting to be able to use some of the CSS designer tools. So when I was just in design view and trying to click on the name of the CSS file, Dreamweaver wasn't getting in it all. But when I opened the actual CSS file no, I could use designer to edit some of these. I'd still have to keep track of what they all went. Teoh and I'd still have, you know, some stumbling around, figure out what went with what. But here's the last and final reason I wouldn't recognize this. I wouldn't recommend this. Uhm, I'm kicking the cables under the table and unplugging things again. Don't you love when you ask the text for help and they come in and say, Oh, you unplugged this with your foot? That one happened off camera today. Thank you. I'll try not to do it again on camera. The reason that I wouldn't recommend building a site news and then editing it in Dreamweaver, even though at first blush I thought that might be a good idea. But after quite a bit of testing, I would tell you not only is the code from use so not friendly, that editing and dream we were is just a huge nightmare. But as soon as you change anything in that code from use, you're pretty much done with Muse. You can't just import it back into Muse and keep working on it. The way Muse works, you get everything set up in Muse. It looks beautiful. It's wonderful that you exported. Publish it and you're done. If you want to make a change later, you go back to muse. You make the changes, you export it, publish it and you're done. If you make any changes, that code after you export it, then you either have to make that change again every time you export it or you never work in music. And and that's a pretty big price to pay if you're trying to go back and forth. So I think the end of the day and not to blow the final ending of the dream. We reverses Muse contest. You really kind of have to decide. I only want to work in Muse. Or maybe I'm gonna use muse for quick site mock ups to show my client where it's really easy. And then once they say they like it, I'll rebuild it and dream we were from scratch and managing Dreamweaver after that, that's a possibility. But I this whole notion that you're gonna go from one to the other at least the way these tools work right now, all due respect. Obi Adobe seems to be going off into very different directions, not creating tools that complement each other. Somewhere in the crazy world of Adobe the Edge tools fall somewhere between Dreamweaver amuse, and they often work in both. And as I said this morning, you can do things like creating animation in Adobe Edge and put that in Dreamweaver or Muse. And that's kind of interesting, but Dreamweaver and mused together, it's an either or not a one, and all right, so before I go on to creating a new page from Scratch and Dreamweaver and spending some more time and CSS How we doing over there? Jim? Oh, fantastic, Great. I really appreciate your comment on that personally, you know, this is coming from someone who is the master of WordPress, and I know that you do a lot of oh, you know, working on WordPress in Dreamweaver, and to me, that is extremely complicated. Whenever I delve into that, it's brutal. So to hear you say, Don't try and update something in use That's great to hear because I know if you can I mean that that says a lot to me personally and a couple questions directly related to that. Jasmine Baker asks about editing websites from WordPress in Dreamweaver. And let's just put a slash on that in music because we always get clients. I know I dio who say, I want where I want to be able to edit my content. Is it any easier in amuse site as opposed to a Dreamweaver sites? So, yeah, there's another good reason to choose during we were amused. So first of all, Dreamweaver is a great tool to use with WordPress. I do. A whole lecture on Dreamweaver versus WordPress is a ah class I've given several times, and at the end of that class, I come and say, actually, we can all play together. Dreamweaver is a wonderful tool for editing WordPress. They're not mutually exclusive. You don't have to use Dreamweaver with WordPress. And that's okay, too, if you dio. This is my advanced tip of the day server press dot com will make using WordPress entering. We were on your own computer so much easier than ever before. And I'm very delighted to find that. And next month, just a tease ahead, doing a course for creativelive the end of September called Redesigning Your Website, or Blawg. And I'll be using this tool toe work in WordPress on my local computer without messing up my live site while I'm editing it and I'll show some things like how to go from terrain Weaver to WordPress. If you're completely redesigning a sight how to use Dreamweaver toe edit WordPress, we'll get into all that. So that's my If you use Dreamweaver in WordPress, they're happy pair and server press is your friend. If you use Muse, you use Muse pretty much. That's it. That's the simple answer. Okay, you really again? You could create a mock up amuse and then later go completely recreated for WordPress. But no, you really can't in any way I can imagine. That would be practical or convenient. Use muse toe toe work on WordPress about adoption. Gotcha. And chip design would like to know, Does Dreamweaver have template sites that we can build upon? I remember in the old days, when you open a new document. It give you a handful of templates. That's what I'm about. Teoh. We're leaving in there. Another question before Ideo. Actually, I own my own question. If you don't mind in the old. In the olden days when I was editing my CSS, it would bring up that pop up window and I would have all those different tabs, and I would click down Is that gone? Is now replaced with the It's It's for all intents and purposes, intensive purposes, intensive purposes. That's one of those phrases I somebody in the chat room tell me which one it is. I think it's for all intents and purposes, not intensive. Think I'm right on that. But you know, if my husband's out there, he'll correct that one for sure. Coffee editor, Wordsmith. And he is among other talents. Um, okay, so that wonderful tool, the CSS set of tools is kind of still here, but mostly not. And I'm gonna show that, too, as we go through. So let's just dive into both those things it wants, and that's a really good question. And Jim, I'm really loving how much know about Web design and can help keep me on track. So please ask her questions. Remind me if I forget something. I really appreciate it. We'll do. No, thank you. So we're in Dreamweaver. And what? Once you've got a site set up, let me just make sure I'm in the right site. Set up. Not in the mews. Set up. We don't stay there. Remember? I said once you've got a site set up, you can switch around pretty easy. So let's go back to that CN Bucks. Now I'm in a folder called Sandbox has nothing in it. This is my place to explore an experiment. All I did was the basic site set up. Identify that folder. Now I get to play around. I highly recommend creating a sandbox in Dreamweaver where you can play and really in use. The same approach is not the worst. And that is it's really easy to go in and create a lot of things and make a mess in either one of these programs. And it could be much harder to fix that mess than to just throw it out and start over again. This is actually pretty easy to set up a lot of these things. But once you've got something not right, you can really get into a mess trying to fix it. Sometimes your best option is throwing out and start over. And it's part of why I suggest starting a sandbox in the first place workout. This stuff kind of get the structure, get the design you want, and then set up your actual site and build very carefully the page you want. And when you dio, you'll start with file new right, some just up here at the top. I can also do a short cut in the middle. If I do a short cut in the middle, I'm just creating a new basic HTML page. I'm just gonna get a blank page. If I actually go to file new, I'm gonna get the whole dialogue of options, and I could spend 20 minutes just teaching this. But I'll start by saying it's actually a lot simpler than it used to be. Previous versions of this had even more options, but the basics are still here. You can create a blank page. You can create a fluid grid layout. That's how we create that responsive design. That's what we're gonna do right after the break, the last session of the day, you can use starter templates. The Onley starter templates you get now are really for mobile Web APS, so this is not responsive to design. This is I am just creating something for smartphones, and I'm just designing Web APS and during. Weaver has some kind of cool tools for that. If that's all you're targeting, and then there templates and I'll just show you real quick. I loaded in multiple sites here, right? So there's the architecture site that has nothing in it. We just set that up to play around. There's the Gowdy site we just did. It doesn't have any templates in it. There's the Janine Warner site. I told you, desperately needs to be redesigned. I hope to redesign it before my next class next month. Wait. Did I create a whole class about redesigning websites just to make myself do it? No, but I may use myself as a guinea pig in my current site. I actually have four different templates, and that's because I have two sections of my site and I have two languages on my site. So if you go to Jeannine Warner dot com. You'll see there's an English side it will throw in espanol tambien insane. You en espanol People always get a kick out of it when I speak a little Spanish, these classes. So I teach in English and Spanish. I work in English and Spanish, and my main website is in both languages. And because of that, I have multiple templates. So when you're creating a new document, if you have set up a site with Dreamweaver templates, I'm gonna show you the basics of how to do that. Men. If you're on a site like mine, wary of multiple templates, you can choose which template you want when you create the new page. And look at this, I'm in the sandbox. But I just created a template using I just created a page using a template from a whole nother site, and that's actually possible in Dreamweaver. You can kind of use the templates from one site into another. That's kind of interesting again in music to compare these in Muse, you have master pages in dream we were You have templates. So in this new site, dialogue choosing file new one option of site templates But only if you have created those templates already. They're not automatically there. What is there? And I think your your question there was about are these layouts that come with Dreamweaver? So if you just choose blank page Now, you have an option of a whole different whole bunch of different kinds of pages. Who knew, Right. I thought we just created HTML and Web design and we're done right. J snow. You can create HTML or you can create CSS. Okay, Start to get that with H small pages. We have cascading style sheets, CSS pages. Html creates the structure of the page. CSS puts the design on that page. Those to make sense, they work well together. Then we get toe less and sass and s CSS. And even if you've been doing website designed for a while and have no idea what those are, Wikipedia is your friend. I won't go into that here, But there's some kind of new interesting, um meant to go ways and creating webpages I have. There's no way to do justice to what those are in a few seconds, so I won't even try. Java script gets used a lot with HTML and CSS. We used to use flash. Now we put JavaScript, html and CSS together, and we create animations and things that slide around and roll around. And all those interactive features you see are almost always done with some JavaScript on top of HTML and CSS. If we were working with WordPress, we'd also be working with PHP. We'd still be using HTML, CSS and JavaScript. Everything you learn when you learn the basics of Dreamweaver will help you when you get to WordPress. It's just that when you get to work for us, you add this layer of dynamic, database driven website that needs PHP programming code. And that's why people's heads explode when they start trying to figure all that out. But PHP is built in Here is one of the page type options xml SPG. If you're working on big sites, you might use that XML is a universal exchange format. Wow, all this stuff templates, library items and PHP templates 99% of the time. Unless you're working on a dime dynamic site. Unless you're working on WordPress, you Onley need to worry about HTML CSS and HTML templates, because when I showed my site. How have those multiple templates? Those were made with HTML templates. Okay, so I'm going to start by just creating an HTML page. But I want you to notice now, no matter what I choose here html template or a smell page. I have a couple of layouts, and if you use previous versions of Dreamweaver, you might feel a little short changed. In fact, I think it's time for chocolate. You too. Must be thinking chocolate by. No. Here we go. Chocolate for you. Yes, Keith Far Show you okay? You're coughing a little bit. You got water there and tea and everything you need. I could hear some tea myself. Okay, if you guys need anything, I'm here for you. Okay? So if you're feeling a little sort, teams like, Wow, there's only two layouts. And I actually got an email this week from somebody who said, I'm really glad I only bought that three month Dreamweaver thing cause I got in there and it says there's a two column fixed right sidebar left. I want the sidebar on the left side. Not the right. And I said, Well, that's really legitimate. Let me show you how easy that is to change. So let's just do a quick. I'm just gonna create this, and I'm gonna create it. And then I want you to just notice here. They're a couple options about CSS I'm gonna come back to For now, I'm just gonna create the CSS in the head and I'm gonna create it, okay? I just created a page and html page with a lay out. What that means is the dream Weaver gave me kind of a starter page. So there's all this nice stuff that's kind of built in here before we even get started and Okay, so what did I actually get? Well, there's nothing in here yet. Excitement saved it. But if I see this, let's just save and call this, um, simple. I call this my simple page. So my simple page is now saved. It's now in my folder over here on the right. You can see that that got saved in there. And as I save pages, they'll be saved in my sandbox. And if you're thinking, you know that I really want that on the left and not on the right. Let me show you. That's actually a relatively easy thing to change. A little tricky when I have limited screen real estate, but right now it's on the right. If I double click on something over here, my wonderful CSS styles options to close the files panel again, double click to close and open those My CSS designer has all these things going on, and this is an internal style sheet, meaning all of the styles air saved internally in this page, instead of being saved in it external page that could be linked to this and other pages. Thes styles air just in this page, which is why you see the little brackets around the style here. If this were a separate page, it would be something dot CSS. You'll see that in a second you saw that in the last one. There are no media queries in there, so I don't even need that. I can actually give myself a lot more room now and drag that up out of the way. But I have a whole bunch of selectors that are already in this page, and what I need to do first is identify which one of those controls this sidebar and notice how the way I selected this matters. If I select here, I get just one of these navigation items. If I select a little higher, I get the entire sidebar. And when I dio, one of the nice things about CSS Designer is that it takes me right to the style that applies to that area of the page. Previous versions of Dreamweaver did not do this. You had to kind of identify what style is that? And then finding the list of styles we had to right click on the Navigator and kind of show you? No, Now and during liver CSS, you just double click on that side bar and boom! The sidebar comes up what you first see here, where it says commute computed. This is actually showing me all of the styles that apply to this area. The page. Another confusing thing about Stiles is that they cast gained down a page, so I have some styles that control everything on the page. Other sounds that only control specific elements on the page. But some of those page wide styles may affect more specific elements like this cyber, so don't be confused that there are three styles affecting the sidebar Dreamweaver is showing me all of those, irrespective of which style these rules are in. I can change them. And here's the cool thing about the visual element of the CSS designer float left. Float right, a line right? A line left in CSS. Think float means a line. There's some complex cities, the float part away. They don't just call it a line, but basic bottom line. I created a page with the layout that had that side bar on the right. And if I want to make that cyber on the left, all I do is double click to select the sidebar. Come over here, it says. Float right click on Float Left and look at that Now my sidebar, Izabela. So there's some really intuitive, easy things to do in Dream Mirror. Okay, maybe not easy and intuitive compared to news. But if you've used CSS a little bit and you've kind of got a concept, there's some things in that CSS designer panel that actually do make it easier to work with CSS again. If you have never worked with CSS before, I expect her head hurts a little bit and I'm sorry, but I'm trying to give you a quick overview. So one of the things you can do with these layouts is easily switch the sidebar from one to the other. The other thing I said, this site, this layout. When I created this page, I said, Put all the CSS in the header. So all of the CSS styles, if you know anything about CSS, the top of this page is all CSS styles, a bunch of comments that explain what all these things are. You can delete those if you don't like them. If you delete the gray code and you leave the pink and purple code, you'll be fine. If you read the great code, he'll learn a lot about how this layout was created and why you can actually learn a lot about CSS and HTML just by reading what's behind the scenes here. These air called comments and in any programming language, including wimpy little HTML markup language. We have comments that enable us to leave notes for each other and ourselves, so there's the code that the browser reads. And then there the special tags that say, ignore everything in here that are for humans who come in and read each other's code later. So code comments are really meant to be read. And these layouts air heavily commented for that reason. But there are only two of them now, so they're kind of starter pages. So as I scroll down, you see now I'm into the HTML part of the page. So the HTML starts here with us close head, open body, everything between the open body and the clothes body tag. At the bottom of the page is the actual part of the page. Everything above that is all that CSS. So okay, we created a simple page where the CSS was in the top. Let's do that again. And this time let's create an external style shed and link it to the page at the same time. We'll talk a little bit about that, so I'm getting a little way six CSS as we go through here. So let's make a three column this time. Just a little more complicated. Layup. Maybe we'll stick with Yes, let's make a three column going back and forth about all the different ways to teach this class. I want to look down here and see you have some choice about which version of HTML you use by default. HTML five is now selected in previous versions of Dreamweaver H x html 1.0, Transitional was selected again. If you're new to this stuff, you're like, What? Shouldn't there be like HTML one html to H cement? No, that would be too simple and logical. And then how would we keep the riffraff from learning Web design? Right, So we had to complicate it. The W three c had too complicated in their infinite wisdom, all due respect to that amazing group of people. So there's x html one point. Oh, Transitional is still used for many websites in the world and by default, Dreamweaver CS six shows that html five you probably heard of cause it got more publicity than ever any version of HTML ever before. It really just means that the tags or set up a little differently, and I'll show you a quick look at what's different. And then here we had add the CSS to the head or create a new file. This was in Dreamweaver CS six as well, but let me just go ahead and do it differently this time. So you see so choosing each meal time again. And this time, instead of choosing, add ahead, which puts all of the CSS in the head area of the document I'm gonna choose create new file, and that's going to allow me to create a new CSS file as I create the HTML page. So when I create, the first thing is going to say is what you want to call the CSS file and it's going to give me a head start on a name based on the name of the layout that I chose. Well, that's nice, but you I'm gonna call this my stows that CSS because it's more concise and it's my words, and I can name my CSS file anything I want with one caveat. Anybody has heard me teach Web design before. No spaces, no special characters dashes and underscores air. Okay, dashes seemed to be favored for summaries of programmers like underscores Google like Stashes. It's a rumor. It's hard to confirm some of the Google things. I use nothing or dashes, but no special characters and no empty spaces when you're creating links and when you're going round last caps off. That's a good question. Hold that for a second and I'll come back to do because I want to make sure you see what I just did. Now that's a really good question. Um, is to create a new document. And this time that CSS is not up here in the top of the page it saved. And something called My style's not CSS, and I want you to notice a couple things that could be a little confusing When you're new to Dreamweaver, Um, you've got source code and you've got whatever is attached. And as pages get more complex, you saw what that muse page that Muse document had like 10 things attached to it because it had multiple CSS files and JavaScript files and other things. And you can switch if you click here. Code view changes to whatever you've selected up here, and one of the things that's confusing is your working and design view, and then you go to split view, and then you're editing the CSS, and then you're trying to figure how to get back to HTML. Click on source code and you'll go back to your HTML. This also affects the undo feature. Here's a advanced tip for people who think you can't undo the last thing you did in CSS. You can. You just have to click the CSS file before you hit. Undo. Show you what I mean, Let's say I delayed this. That's a good idea. We don't need that extra thing up there at the top. Let's say I want to change the background of that header cause boy, whoever chose Green was expecting us to change the color, right? Yes, they really work. They did that kind of on purpose, I think, because they definitely expected us to change it. So when I do that, if I'm here and source code and I'm going back and forth, I click on instructions and it's nice. I can see in source code where I am. There some wonderful things about slip view. I'm going along. I select the header. We see if I can actually select the header who DoubleClick ticks and look at that. My CSS designer panel takes me right to that hideous green color and now I have a choice. I can change the Hexi decimal color code. I can click in the color well and pick any color I want, or I can just remove it completely. And if I want it to be white, my best option is actually to delete the color completely, because it will pick up the white that's behind it. And any time you're setting a color or any other style, remember that it's gonna inherit the style of whatever's around it. This is an advanced tip. You never need to set a style twice, so I don't need a background color of white and a header color of white. I could just set the background color white, leave the header color nothing and the white will show through. And that's more for efficient. Because if later I change the background color to black, my head or color will change to black unless I want to keep it white than I'd make it way to override it. And while I said all that you changed your mind and you wanted that greenback and you wanted to undo and I promised I'd show you could undo. But if I do command Z right now, the logo comes back. That's not what I wanted. I wanted me command wine get rid of it. I wanted to undo the last thing I did which was changing that background color. And I can. But first, I have to click on the style sheet. Undo, and that color comes back. So that's an advanced tip for those of you who thought you couldn't undersea assess in Dreamweaver. Yes, thank you. But you do have to make sure you're in the right place. So let me go get rid of that again. Because I still think it's a hideous color. Um, well, just go wipe that color out. So selecting a dreamweaver is an art and a science. You may need to kind of click around to get the right thing, Which is why I sometimes still use down here in the bottom. Even though you can click and select. You've got a selection tool that lets you identify and select things like the header. So if I click there, I know I've got the header selected. I get exactly what I need here. I delete that, and that color goes way. All right. So we have done a little bit with CSS layouts. We've thrown in a couple advanced tips. I hope we haven't completely lost the beginners. How we doing over there, Jim? You don't worry. We're in great shape. You know that people are popping in with comments. There's a lot of talk about HTML five about how we could do an entire class for just on CSS. Oh God, I can do a week just on CSS. Exactly. Yeah, So again, if you're new to CSS, there are lots of places they learn. CSS. There are tons of resource is my best advice. If you've never worked with CSS before, is just start reading different things and ah, lot of the CSS books out there start with a fair amount of expectation of knowledge and could be a little hard to get into. Look for the simplest stuff. Work your way up, get multiple teachers. There are lots of us who teach CSS. It's an art and a science, and I would lack claim to be the only CSS instructor. There are lots and lots of places to learn. TSS um, a list apart. If you're in advance to see assess Caesar, I'll just do a shout out to the website a list apart dot com. If you're starting to get into CSS and really getting into the conflicts and the intricacies. And the latest A list apart dot com has the best CSS teachers I know, but what I want to show you is a little bit about HTML five, because people are starting to ask about that and what that means and what's different about that. So we just created a page using HTML five. Let's go ahead and save this one. Let's call this, um, because my html five page Oh, and that reminds me, can we use upper and lower case letters? Um, you're going to remind me about upper and lower case letters. I'm going to get to that. But if I go off on, too many tangents will lose track of what we're doing. So I created a national five page with the CSS page attached this time, So instead of being in the header of the page, it's attached as a separate document, and what I want to do now is one more time going to the new document Dialog. She's a blink html page. Create a two column Let's do this time, and this time I'm just gonna choose x html one point a transitional actual. Let me do exactly the same thing and create this. And then we can We can put these next to each other. So this is my transitional doc CSS. And I'm gonna save this as transitional so I can create an html five page, or I can create an X html transitional page. And then I can look at the two and yeah, okay. I made a couple edits to this one, but otherwise they look pretty much the same on the surface, because they are What's different? The biggest difference between HTML and Transitional. Did I not do that? Right? Let's see. Don't don't Don't get along so fun using somebody else's computer. Okay, so, uh, get into the source code. So the top of my html five document I see a very simple doc type doc, type html. And if this is truly no, this is somehow I made an html five document it. Let me do the skin new. Yeah. Exceptional. Transitional. Thank you. And let's just put the code in the header. Could I'll put it in a new file to be consistent. Create. Let's try that again. Transitional CSS. I think When I hit that, somehow I didn't select html five. I mean, I selected html five when I met Transitional. There we go. Now I can see this is transitional advanced code for you. So transitional HTM Oh, I'm gonna replace the other one, so we know we have it. The biggest difference between an HTML five document and an X html or previous versions is what's called the doc type. You never see the doc type in the document itself. The browser looks at that and says, Oh, that's that flavor of HTML. I should interpret it this way. Oh, that's that flavor of HTML. I should interpret that differently. And over the years, for a whole lot of reasons, I won't go into the dock type for X html transitional html got really, really complicated. You see that two lines just to tell us that this is basically an HTML document and then this whole other line to tell you where to go to find out what kinds cheese, all of that. That's just to identify to the browser what kind of cone this is in Annex two html one point out transitional document. Contrast that with our each small five document. That's all we need. You could write that My hand. So some of what happened in html five as we really simplified the doc type, that's kind of cool. And I really love one. Things evolving Get simpler. Dreamweaver did that. This origin a couple features I still miss. But overall, simpler is better. So what's the other big difference in html five? And that has to do. And some people are already jumping ahead to these tags called better. So again comparing this x html transitional document when I get down to the head age of the page that is using, uh, why are they using HTML five and my X html traditional document? Because they're tricky. Okay, because they only have a shuttle five layouts. That's my mistake. So Okay, adobe, you're a little misleading here. It told me that it was creating an X html transitional document, but it actually created HTML code. I'll just show you what it should look like. If it were really x html Transitional. It would be something like this in the old days when we wanted to create a header, most of us very carefully created a style called Header, trying to make things fit on the screen looking for the clothes editor. So here, this would be closed in again. If you've never done this before, expect this to be a little advanced, but I want to make sure you see some things if you are a little advanced. So a very classic way of date doing HTML that you might have see in an older document would be that the container is a class style applied to a dip tag that the header is a class style named Header applied to a diff tag. When you got down on the footer, it would be a Div tag with a style called Footer, and the only reason that's called Footer and not George is because most of us thought Footer was a better name for the style of the bottom of the page. But in practice, header container footer NCS s. One of the things that's confusing is that class and at Ideo styles can be called anything you want. No spaces, no special characters. We're going to get back to case basically, yes, you can use mixed case, but you have to be consistent so the bottom line here is HTML. Five, in part of the evolution of the Web, started to recognize that so many of us were naming the same thing Header or something like that and the same thing Footer or something like that. But if we wanted to make the Web more semantic, meaning we add greater meaning to content by making its semantic, we would start using tags that instead of all of the tags or DIV tags, which doesn't mean anything but divide this area of the page into a box. We have all these div tags with styles that identify whether it's a footer or header and then rules that say, whether that foot or should be a certain falling to a certain color or a certain style. Now what we're saying is, boy, that's an awful long way to go to do something that everybody does. Why don't we just have a style called Header right? Why don't we just have a tag called Header? Maybe we don't even need a style called Hetero. Maybe we don't need a style called Nev. We can just have a tag called Nap. But if I go down to the bottom of this. As you might expect from where I'm going with this, there's a tag called Footer, So HTML five replaces some of the common styles people created and applied to def tags with tags that use the names of those common styles. An HTML five also replaces the DOC type at the top of the page, and those are really the two biggest changes that you find in HTML five. All the rest, rounded corners and fonts and all that other stuff isn't really HTML five, it's CSS three. But because HTML five and CSS three came out at about the same time and each small five got more publicity than CSS three, most of us associate html five with all these things that really are the C. S s that goes with it. So long answer to an HTML five question. I will get back to case any other questions on html five or something related or something about something, uh, related. So, um, tailor made had asked, Is there is there a possibility to use either amuse or Dreamweaver to build on the same site? Updates sub pages? So again, I was saved remover has almost infinite flexibility in that you can edit almost any page in almost any format. You're really just editing the code when it was built in WordPress or June lower drew people or whatever, you know, open source tool. Or you can use Dreamweaver for a lot of things. Mews. Pretty much you're working mews. And as muse evolves, that may start to change. Their may start to be more flexibility there. But for the most part today, I would say the only thing you should use Muse for is to create a new site exported and be done if you want to do anything else or edit any other existing site on the Web. Dream weavers. Almost undoubtedly the choice. Okay? And not to add even more craziness to the soup people were asking about. A person has a client that uses Catalyst Toe update the regular Dreamweaver site. Do you know if Catalyst can work with amuse site that I will tell you business Catalyst is definitely designed. Or at least Muse is definitely designed to work with Catalyst. I talked about that a little this morning. Okay. I know everybody can watch all day long, but let me just go quickly. Business catalyst dot com is a hosted Web solution. Owned and operated by Adobe. It offers lots and lots of futures. It charges for those features. It does all kinds of things. It is what I would call a walled garden. It's not. Unlike the relationship between wordpress dot com and wordpress dot warg at wordpress dot com. It's really easy to set up a WordPress site. You can only use the templates and plug ins that they allow at WordPress. That or you have to do a lot more stuff yourself. You can use all these open source options out there on the Internet that don't exist in the world of dot com or haven't been approved in some ways. Business catalyst a similar. It's a totally different kind of program. It's not WordPress at all, but it's a dynamic site creation tool, among other things, and it is integrated with Dreamweaver and Muse. I have not tested how well Muse works with some of the more advanced versus features at Catalyst, and I would be a little skeptical that some of the advanced features a catalyst will work and muse just because Muse is still a relatively new tool. You can do a lot more with Dreamweaver, but I'll say again if you have an existing site that was built with Dreamweaver and this hosted a business catalyst, unless you build outside over again and muse, you're not going to just move it into music. If you build a site muse and you pay the licensing fee from use or you pay for Creative Cloud, you actually get business Catalyst hosting included in that. And if you're intrigued, you might as well try it. You've already paid for it. Thank you. I'll get rolling. So let me show you another thing about upper and lower case and when it matters on this sites not complicated enough to really get to it. But if you go to my site, maybe if I go here. So remember, I said, you can name your HTML pages anything you want, as long as no spaces or special characters. So I do have a dash here. Case matters on Lee because most Web servers are case sensitive because they're built on UNIX and UNIX is just a little more finicky than Mac and Windows, so I can create a site on Mac or Windows and use upper and lower case in my file names. And even if the link to that file name is all lower case and the final name itself is all uppercase, they'll work on My Mac if I put them up on a UNIX server. That will break because the UNIX server says a lower case bio and an upper case bio are two different things. So for that reason, lots of people in the world of Web design just make all of their file names lower case, because then they never have to think about whether it's upper lower. And they never have to worry about breaking links by mixing that. If you use Dreamweaver amused to set those links, it's going to set them perfectly. And you don't even have to think about this, whether it's upper or lower case. And then here's the one more tip and why I'm showing the URL field when you're typing in one of those long you are Ellis from somebody else's website. Everything before the dot com. The case doesn't matter, so I could type, and I often on my business card. I put J. C. Warner like this with caps because of my business card is easier to read or digital family. I'll put the capital D in the capital F for digital family, right? It doesn't matter. The browser doesn't care before dot com whether I type up or a lower case. But after the dot com this now we're actually looking at filings, usually on a UNIX server. And so if it's a really long name of the folder name in a folder name in a file name, if you don't type the letters and exactly upper and lower case as those folders and files were actually named on the server, you won't get to that page. So if I change this to a Capital B bio and then I try to go there, it gives me a for a four year, right. If I bring it back to a lower case, P Bio hopes wants to go back to business, get a list. Thank you so much. Let me just go to the link and you can see if that's a lower case. P bio. You see my bio? If it's an upper case, be bio, it gives me a for a four error. And that's because everything after the dot com case matters everything before the dot com. It doesn't. That's why it's OK to use capitals on your business card if it's or you are l. But it's not OK to mix the case after the dot com and why I have to pay special attention to those long Urals when you typed them into a browser window. And if that's new to you, you're not the only one toe. Learn that today. I'm sure I just learned it. Think it's a cool thing to know is really a surfer and a designer and great great demonstration, Thank you, Thanks. Thanks. So what else do we have bundling over there? I know we've only got a few minutes left. There's so much more I could show you. It's a pew. I could I could throw a question at you, throw a question at me, and if I think I've got a better question pending, I'll let you know. So maybe they'll make me choose what I showed. X Jim and studio asked. Well, Dreamweaver show you accurate, responsive layouts for all devices in live you. I'm going to save that for the last session, which is all about responsive design. Give me another question. All right. All right. Here. This could be a toughie, but I'm gonna throw Angela until a ask. Could you need speak to the time and knowledge required for making up and testing a designed to function across numerous browsers in Dreamweaver, Muse versus Dreamweaver. So here's the simple answer to that amuse. You can do it in an afternoon, but you're leaving it all in the hands of adobe and adobe is great and they give you a list on this morning I showed you. But if you go to the muse site, you can find exactly which browsers Adobe claims their code will work in. And for the most part, I trust them. If they say it works and Firefox 11 and up, don't go look at it in Firefox eight. But I think like I said, we're upto Firefox 23 and they claim it works and fire in Internet Explorer seven and up. They do some things like rounded corners that don't work in inter next 47 But I haven't seen anything that would break necessarily. So mostly I'm a trusted Dobie. So the simple answer is with Muse. If you're comfortable with the browsers that they say their code works in, it may not be the cleanest and may not be the most efficient. It's definitely not the most mobile friendly. That's a whole another issue. I'll talk about a little bit more this afternoon, but you know, you can definitely look at that code in multiple browsers. The last several versions. No problem. Cool in Dreamweaver, you can spend as many years of your life as you want on this pondering again. For the most part, one of the nice things about these layouts and one of the reasons that a lot of us, even those of us who know a little bit about Web design often start with these layouts is because they are already pretty well optimized from multiple browser the spine, and you can do lots of changes. It's very easy. Like I said, you just click and select the thing that you want to change, and you can start editing and getting rid of that horrible green color and all the other things in the layout. That was a link so it doesn't go away at once. But if you want to optimize for every browser on the planet, and you really have to do very complex code within that, that's where those browser testing tools that I showed earlier come in handy. If you weren't online for that and you want to find them, go to digital family dot com. Scroll down the page. And one of the last kind of featured stories on the front of digital family dot com right now is on article about testing your site in multiple browsers, and it will show you a number of online. Resource is you can use for that and you'll see you can spend a lot of time thinking about that again. In the last session, I'm gonna show you the mobile tablet and desktop preview tools and how those air helpful in Dreamweaver. They certainly can get you a long way toward designing sites that work in a lot of different process. What I wanted to show you is that there is Ah whole section on Web fonts built into Dreamweaver CC that was not built in two previous versions of Dreamweaver, and it's actually not unlike what we saw in use In fact, the styling is really similar to what we saw in use that first you go through and you find the font that you want. So you these air, the fonts that are kind of included in Dreamweaver now and what that basically means is Adobe is leveraging the fact that it owns something called Adobe Edge Web fonts, and it's taking this relatively limited that still way better than the Web font list. We used to be stuck with collection of funds and building them into Dreamweaver, where they're very easy to add in. You can also download and upload fonts. So if you get a font squirrel or one of those font repositories where you can get a front kit and download that to your computer, you would use the local Web fonts option to browse for that front selected and load that into Dreamweaver. If you do that than the phone actually gets uploaded to the server, and you can also do custom fonts stacks. So once you've set up those ones, you can create your sets of wants. So the simple thing to dio and dream. We were very much like muse. I think we used the cabin font. We see if I can find that one again just to be consistent. And then I might actually remember what I did, cause that's always helpful. Um, is that in this collection or is that yes, here we go. So let's let's choose the cabin fund. And so if I do this click done again, nothing happens. But what has happened is that now, when I define a style that's gonna have fonts on defining styles again, this gets way more complicated than I can tell you in a little bit of time Here. But you can format. Um, you can create new styles in a number of ways. And I let me show you, this will quit cause this is different and you are asking where all those dialogues I used to use, um, in Dreamweaver CC. The way you create a new font is not as obvious as you might expect. New style, a new style. Thank you. I'm gonna create a new style and use that new font in my new style because you can't really use the style to you. Put it in a fun and apply it to something. Why CSS takes a week to teach. But if you've used during Weaver before and you're used to going, create a new style and you'd click on that little plus sign in the CSS and it's not there anymore. And so you're trying to figure how to create a new style. Here's what to dio that trick, and the thing that will trip you up is that first dream mover wants to know where you want to save that style. It didn't used to ask you this question the same way. Now you can't create a new style until you identify by selecting either the external style or if there's an internal style sheet or if they're multiple external style sheets. The first thing you have to do is go into source and choose even if there's only one. Just click and select which style sheet you want the new style in. Once you've done that, you can click plus and create a new style. It's down here at the bottom where you can't see it cause I'm zoomed in, and whatever you have selected on the page, it will give you that head start. It used to, given that dialogue down there. Sorry for the It's hard to see. There we go. So what Dreamweaver did when I clicked on All right, I want the style sheet associate with this page. That's the first step. This thing you have to remember if you're an old Dreamweaver user and this is your first experience with Sisi, the missing link is make sure you have that style sheets selected. Once you've done that, the plus sign works a lot like the other option, except instead of getting a dialogue, it adds it to the bottom of the list when it's done here. For those of you who are new to this is it said, Hey, you had a heading one tag selected that's inside content inside container. So I'm gonna give you all of that. I can accept that and say, That's what I want as the name of my new style or I can override it and say, No, I want to call this Creativelive because I'm a creative live and I'm running out of time and I could call this George if I wanted to, and I'm gonna hit return. And when I dio, I've now created that new style and I'm ready to define the rules of that style however I want. And one of those might be that I would change the font family. And now, because I've added cabin to my list of fonts, it's here. And so if I select cabin and you couldn't see it, but it'll change the the fun of that h want where that h one tag is already applied. So that was way too quick. Let me just show you again real quick. First you choose modify manage fonts. You go in and you decide the font face that you want to add. You click done. Nothing happens. But it did you go find the style that you want to change. We created style. Oh, of course it didn't change. I just created a new style called Creativelive cause I'm running out of time. And then I forgot I did it and we went into text and I changed it to cabin and it didn't apply to that h one because I hadn't applied the style to it again way too much on CSS too fast. But I've got an H one tag applied to this. I created a new style that I want to apply to that. It's called Creativelive. When I do that, it will change to the cabin font that I defined if I now change my mind and I want to make it that April far face of real far face. But I just added to my list of Web fonts. I can switch the fun here, and because it's already applied, it should automatically show up. If it doesn't hit the live you come on and you'll seem that most Web funds don't actually display properly in Dreamweaver until you click live you.