Lessons

Lesson Info

Creating a New Site

we've optimized some images. We've recognized that, uh, things might look different in different browsers, but we're gonna be designing for the latest one. So we're not gonna be overly concerned about that This class, that it's a pretty advanced topic as you get into Web design and again unless you're creating fairly complicated sites isn't as much of an issue today as it once was. I'm gonna run you through the site, said it process one more time just to make sure that we're clear on that. Before you do anything in Dreamweaver, you want to set up a site. So we're just gonna go to slight new site? I'm gonna call this California new, and I've already got a folder. Remember when I was optimizing those images and I have ah, folder of websites on my desktop. I created something called California New that's got the images that I want to use already in it. And I'm gonna choose that and I'm gonna say it. So now you can see I've got a couple images now that justice, those 1st 2 images on copy s...

ome others in there as we go, but that'll give us something to get started with. I want to take a quick moment here and point out that there are different layouts for Dreamweaver, and your version of Dreamweaver may look slightly different than mine. But you can always get it back to mind my choosing window workspace layout and then reset, expanded. Or you can choose the more compact layout. So the compact layout is probably better for smaller screens and the bigger layout. The expanded layout lets you fill the whole screen with your space. It depends on your options. Now. You can also click and drag things around and change them. We go back to, um, you can click things around and change the way they're positioned. You can, Ah, just different elements of the layout, and once you get the lay out the way you like it, you can save it. Click on the red thing. Here we go. Let me. I think actually, we go back to expanded and then open these. There we go. So if I kind of play around this for a second and again bear with me because this is a much smaller work space than I usually work with, all of these panels could be open and closed by double clicking on the tabs and they could be expanded and reduced by clicking and dragging. And this becomes particularly important as we start getting into this CSS designer panel that will be working in a lot today and again because I'm working a rather constrained space. I'm gonna move things around more than I usually do. Usually I get them kind of set up the way I like them. Get the lay out the way I want it, and then you can save a layout on. Come on, There we go. It usually lets me you can create a new workspace. So I'm gonna call this Janine's workspace Click. OK, And now I can come back to this anytime I want so I can change. I can adjust this and I could even have multiple ones so I could also have Let's make a new workspace. That's my CSS workspace. So maybe when I'm working in CSS, I want that all the way open. If I'm not working and CSS, I might want it more like this. And now that I've saved those layouts, I can switch back to them very easily. Incidentally, one of the interesting little perks of the cloud that many people don't realize is all that customization you do in Dreamweaver or Photoshopped or illustrator or any other tool can be shared through the cloud to your multiple computers. So if you have your computer work all set up the way you love it, but you've never gotten the one at home set up that way. Now, if you've got if you're using the cloud, you can actually share those workspace layouts from one computer to another. You'll find information about that in the creative lives in the Creative Cloud site. But it's kind of a cool feature of cloud that a lot of people don't take advantage of yet, so I can adjust, usually adjust these by clicking and dragging them up in town again. In this constraint workspace. I can't move this around as much as I'm used to, but on a bigger monitor. There's a lot of adjustment here, so I've created this news. I've set up my new site. I've got a couple images in there, but there's nothing else there, so the first thing we do is create a new page. Now you would think file New Pretty straightforward until you open the style are gonna go. What? Wait a minute. I just want a new page. What is all that stuff? Right? Kind of crazy when I'm teaching three Weaver before we even get to inserting an image and for mining some text on the stuff you've all been waiting for. I'm already, you know, a couple hours into my class and we've set up the site. We've done a little basic image preparation, and now, for the first time, we're creating a page, and if I zoom in a little more, you'll see I can create a blank page. It can create a fluid grid layout. When the world is that there are starter templates. Why would I want those? And then their site templates? And if you've never used to remove her before, this will be blink. What do I want? Well, even if I just want to create a blank page, then it says don't want any HTML pages. CSS less sass. What are all these? Acronym Dreamweaver is capable of editing many different kinds of file types. Remember? We were talking about WordPress uses PHP and ah ah, lot of people are creating Java script files to add interactivity, and we're gonna have HTML and CSS and there times when you might want to create a CSS file and then attach it to an HTML page. And that's why Dreamweaver lets you create all these different kinds of file types, and it makes it pretty easy to just select the one you want. But if you're just creating a simple portfolio site entering liver, which is what I'm going to do today, all you have to do is click blank page HTML and then decide you want a head start with one of these layouts or not, these air CSS layouts. In previous versions of Dreamweaver, there were quite a few of these to choose from today, in the most recent version, they've limited to just to, and you can choose between either of these. Um, I may look at one of these after lunch when we get into more about CSS, but basically they give you a head start and they give you a bunch of styles there. Let me go ahead and just create one real quick, just so you can see if you choose to create that you'll get a, um, you'll get a Web page that looks kind of strange, right? First of all, most of us probably wouldn't choose green and tan as our primary colors. But that's really just placeholder information. You can change all of that yourself. The idea of these layouts is that they're already optimized toe work in multiple browsers. They're already set up with multiple columns, and all you have to do is start editing the CSS, and I think it's actually not a bad idea to show you this first, because now you can see the CSS Styles panel populated when a close up the files panel on the right. This is the CSS designer panel. You can also open any and close any of these and other panels from the Windows menu. It'll be here. You see all sources style, and if I clue to style, I see all these different styles down here and again. This I actually can or should be able to move around a bit. Let me just introduce you to the CSS Styles panel. In previous versions of Dreamweaver, there was a relatively simple CSS panel, and then there were some other dialogue boxes that could be opened to manage CSS. If you've never dealt with CSS before, this could be, at best, confusing and at worst, highly overwhelming at first. But the basic concept of cascading style sheets CSS they're better known is that your separating all the style information, the colors, the fonts, the layout description from the content, the headlines, the images, the body text and you're using HTML to structure the page or on the content, and you're using CFS toe. Add all the design elements that make it look pretty. And part of why we separate those two things has to do with those browser differences again because it allows us to accommodate different browser differences better, and part of it is that it allows us to do things like redesigned sites later without having to change everything on every page. So if you think about the evolution of the Web, most of us create a website, and then not too long later we're already thinking maybe we want to redesign it. Maybe that purple headline wasn't the right choice, and we really should have used Green No, maybe that green was in the right choice, and we really should use purple. And if I've hard coded those colors into the HTML, I may have to go into every one of 57 pages and change that color. If I've created a style that says Make All My Headlines purple and then later I decide to make him green. I change a style from Purple Green and all 57 pages get updated automatically. So one of the big savings of CSS has to do with making changes to sites. But it also added a whole lot more design control for us a whole lot more ways that we could move things around and change them. But it's a little weird to get your head around the fact that if I want to change the color of this banner at the top, I'm gonna do that over here somewhere. And the first thing I have to do is figure out what in the world is causing that to be that color in the first place. So I may have to click around a little bit and see if I can figure out which one of these styles has that color in it. Where exactly is that and how do I change that? And depending on what you're trying to change, it may take a little while to find where that color is actually set. As you get more adept at CSS, as you get more adept at using Dreamweaver, you'll get better at identifying which style of what part of the page. But one of the things that's confusing about CSS from the start is, like so many other things in Web design, there's no one way to do it. I can change the formatting of this headline by If you look at this, this headline is formatted within each one. Remember, we had an H one tag with the having one tank and with a close heading one time at the end, the heading one style and by default that's gonna be times bold in about 24 point. But with CSS, I could make that Ariel and I could make it purple, and that's gonna show up in the code over here. But if I change it here and I want to change it later than I have to change it in the style, not right here in the HTML And like I said, that could be a little confusing at first. So with that very simple overview, I want to just show you we'll build a page from scratch. This time. Let me show you what I just did. Um, and I'll show you how styles get created as we go, and then they will go back to one of those more complex style sheets, and it will make a little more sun like trying to teach you HTML and CSS. As I'm teaching, Dreamweaver is for more than I can do in one day. It's like trying to teach you lighting techniques while I'm teaching you the basics of Photoshopped like you can spend days just on where you put lights right. It's very similar with Dreamweaver in terms of HTML and CSS, but the basic concept is the styles are saved in one place. The html in the content are saved in another place, usually two different documents, sometimes inside the same document. We'll get to that, but let's go back to just creating a basic page so I can create a new HTML blank page. So I just choose none. If I just want a blank canvas to start, I choose blank page html None. I was using these little layouts again. They give you a head start, but they also have a lot of code in them already. Teoh to sort through. If there close to the design you want, they're not a bad head start. If you want to create a completely custom designed like I'm gonna dio, you probably are better off just starting with nothing. One other thing. I'll point out here. There are different versions of HTML, and they weren't always called HTML just to confuse things. So there was html four transitional in strict. And then there was X html transitional instruct. And now there's html five, and I'm guessing you've all heard of HTML five. It had definitely had the best branding campaign of all of the versions. Based in fact, a gentle five really gets credit for a lot of the things that CSS three are actually doing. So the ability to use cool fonts into rounded colors and drop shadows and all that stuff is really because of CSS three, not html five. For the most part, if you're creating new pages today, HTML five is the right choice, and there's no reason to go back to one of the previous one. If you inherit a website with an earlier version, be aware that there may be some slight differences in the way code is written. X Html, for example, was stricter, especially the strict version about opening enclosed tags and how they were set up. I won't go into all the details. The simple answer is stick with HTML five today, and you pretty much can't go wrong because it can handle all the code that came before. If you're creating a new page today, a Channel five is the right choice. So by default, that's what selected, and I'm just gonna go ahead and create a new blank page and look at that on your blank page. Now, the 1st 1st 1st thing I always recommend you do injuring liver. As soon as you create a new page, save it, save it, save early and often in Dreamweaver and part of the reason for that. Just open the files panel back up so you'll see it is that. Remember all these things air relative to each other. When I start inserting images and they start setting links. The location of this page in relation to those images and other pages. They're linked to matters so sieving. The page first locks its location and just makes everything else work better. Dreamweaver smart enough to temporarily set links and then fix him after you save em. But it'll start complaining if you start doing things without saving. So it's just a good practice, and it's a nice way to wrap up before lunch will save this page and we'll build it after lunch. But I'm gonna save it. I'm gonna put it in my California new folder. Notice. Down here, there's a site route button. This is kind of handy if you're working on multiple sites and you're not sure which one you had open left, and you want to make sure you're putting this lorry place, which ever cite you have actively selected in the files panel. Remember, we've set up multiple sites we can choose. We have our new one set up. If you choose site root, it'll make sure that you're saving into that folder and you're putting that file where you wanted the first page of any website should be called Index. You guys have been paying attention. Awesome so index html and I've saved it. And then the other thing I always suggested you right away has put a title on it. Because I have seen so many one sites on the Internet. That's untitled. And you see that up at the top of the browser window. And it's also against bookmarked if you say it just looks sloppy, so I'm just gonna put California wildlife photography. Now if you're into S E. O. The title tag is particularly valuable, and this is a good place to slip a few key words in not keyword stuffing, but adding a couple key words. So I might put California wildlife photography focusing on eager. It's owls and elk if that's the main my site, and I might get slightly better attention from Google on the words in that title tag because it's perceived to be one of the more important things. And then if I want to start typing or I don't want to type, I'm gonna use copy and paste. Copy and paste is your friend, Um, and just copy and paste that same text here as my headline. And then, if you want a format, I'm just gonna highlight down here at the bottom. We have some formatting things. There's my H one tag. H one and I have created a page. Saved it, given it a title. What? A headline in there. That was all pretty simple. After all the preliminary stuff, I'm gonna also just leave you with you Have an option of using code do and see just the HTML code. So, behind the scenes while I was doing that, Dreamweaver set up my open and close HTML, but a very simple doc type for HTML five. Don't worry about that if you don't know what it is. But if you're used to seeing a lot more stuff up there, html five really simplified that doc type. I've got ahead section of the site. That's the very top part with the title. Nothing in that part of this age. It'll document actually displays in the browser window. The Onley things that display in the browser window are the things between the body and the clothes body checks. Okay. I generally work and split view, and then I can see what I'm doing and designed you and keep an eye on the code behind the scenes again. I don't have as much space in this workspaces I'm used to, but that's generally how I like to have during we were set up when I'm working.