Create Websites with Dreamweaver

 

Lesson Info

Prepare to Create a Web Page

We are going to get started on our website that we're going to create from scratch. So, we're going to plan out the whole thing from the beginning. By the way, everyone can follow along with this. It doesn't require any special files. We will add some images and stuff, but you can use any images lying around, if you guys don't have the files with you. All right. So I have Dreamweaver opened, but we have to do some planning before we ever even get inside of Dreamweaver. And I am going to close up Dreamweaver. Okay. So, what I want to do is, I want to create what's called a Root folder. And a lot of these terms and technologies and stuff come from Unix. Lot of websites are hosted on Unix boxes, so that's why I'm saying like, Roots or whatever. That's where all these names come from, you guys. And what I want to do is, I want to gather all of my stuff that I'm going to put inside of my web page. So I've already spent time in Photoshop creating the pieces and parts for the images, and I ne...

ed to figure out where my website is going to live on my computer, right? Super important because wherever I decide it's going to live, it kind of needs to stay there. You can move it, but it's kind of a pain to repoint Dreamweaver to where you move it to. So you really want to find it a permanent home, wherever that is on your computer. If you have some folder somewhere that says Websites or whatever. I'm going to do it on my desktop, okay? Because this is not going to live very long, just on this desktop for today. And I'm actually…I take it back. I'm going to stay on my desktop and I'm just going to right-click. I'm going to create a new folder on my desktop, and I want to give this folder some sort of name so that I know it's my website. And I am going to call it "simple donuts," because we're doing a simple one-page site about donuts. So, inside of my "simple donuts," this is now my Root folder. I want to bring in any assets that I already have. And the assets that we have, we created these handy little images inside of Photoshop, so I'm actually just going to drop those in here. But I'm going to rename this folder, right? Inside this folder is all my images. Let me go back. I'm going to rename it "Images." Because the web servers are set up to look for stuff like this, okay? So if you've ever wondered why we name an index page "Index." Why is it called "index.html?" Why isn't it just called "Home," or "My First Page," or whatever? Because the web servers are programmed to look for something called "Index," okay? Some of them are also programmed to look for something called "Home." I don't know if that's still true. It used to be a long time ago. So I have my "Images" folder. So I have my images. Everything that I'm going to create is going to go in here. So, I'm going to have CSS to go in here, I'm going to have HTML files that go in here. If I have extra stuff that I may want to access, let's say if I have like a Word document, or an Excel spreadsheet, or whatever. Whatever kind of content that I might have lying around, I might create a folder inside of here called "Resources," or "Content," or something as well. That folder is just to keep it handy, not necessary. I wouldn't even necessarily upload that to my server once I'm done with my website, but I want to keep everything in here. We are going to use multiple CSS files. I could have them all kind of out in the open, but I think I'm going to create a new folder for CSS too. So I'm going to call it "CSS." And in reality, you may just use one giant CSS file. I just want to keep them all separate. Okay. So now that I have that done, and I know where it's going to live. And I just want it off to the side, just in case I need to see it. I'm going to go ahead and go back into Dreamweaver, and I've kind of hidden the files that we were looking at. So if you don't have any sites inside of Dreamweaver already, you're just going to be looking at your computer, right? So in my Files tab, over here on the right, it says Computer. You can see I can look at the computer, I can look at the hard drive, I've got some externals on here, and I've got this donut site that I created yesterday. So, if you do have multiple websites, they'll all show up in here so you can always bounce back and forth. So Dreamweaver, I am now done monkeying around on the computer, okay? Things that I might do, is I might have to go to Photoshop and make new images, then I would dump them in the "Images" folder, okay? But I'm not going to move things around. I'm not going to rename them, and I'm not going to move them around because Dreamweaver will lose the links. From now on, once I've created that and I set up this site, everything's going to managed inside of Dreamweaver. So I'm going to go to Site, New Site. In New Site, it's asking me for a name. I'm going to call this, "simple donuts." The most important part, okay? Everybody's eager to get through this screen and click OK. The next part is the most important part, Local Site folder. This is our Root folder that we created. So I'm going to click, and to browse for my folder, I'm going to go to my Desktop, I'm going to choose that "simple donuts" folder that I created with my stuff inside and say Choose, okay? Don't skip that step. That part is super duper important. That's all I need to do to get started in Dreamweaver. I now just click Save and boom, inside of My Files folder, I now have... You can see my "CSS" folder, you can see my "Images" folder. If I do a little twirly arrow, you can see all of my images inside of there. I also have this Assets panel. Oh, I got them both to show up. So inside of my Assets panel, you can see, on the left-hand side of the Assets panel, there's a whole bunch of little icons. I am looking at the images, which is the first icon, and I can see a preview of my images, of what images I have to work with, okay? So if I'm not sure what they look like, I could just come in here to Assets and be able to see them.

Adobe recently announced significant changes to Dreamweaver, offering a brilliant new interface making websites easier to build–and more beautiful than ever before. Empowering non-technical users to build a website, this class you will teach you how to create a basic brochure-style website using Adobe Dreamweaver.


Adobe Certified Instructor Melissa Piccone shows you how to: 
  • Create a website from start to finish 
  • Apply web design best practices 
  • Understand Dreamweaver basics 
  • Customize Adobe Stock Templates 
  • Identify basic code to help troubleshoot 
Join us for this helpful class that will give you the tools you need to have your website up and running.


Software Used: Adobe Dreamweaver CC 2017

 
 
 
 

Reviews

  • Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!
  • I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.
  • She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.