Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site
Skill Level Beginner
Now we get to my favorite part of creating any website, which is going to be the upload, basically the publishing of your site so the world can see it. So this is great. Dreamweaver can do all of that for you, provided you give it the necessary information. In fact, you can see my beautiful page here. I do have a Live view on, but all of these pages I need to upload, so I am going to go ahead and create new site. Yes, I already have one created, but I am going to create a new site.
So here it says you are going to set up a local folder and a name for you Dreamweaver site. So Eva Jones is what we'll call list, And we'll point to that local folder where I've been building this site. So that's what I am going to do. Going to my Desktop, if you have access to the exercise files, it's exactly what I'm doing. I am going into Chapter 09/02 Begin. There is my website, and there's my index.html, which is actually already open. So I am choosing a local root folder is what I've just done there, so that looks good.
I can click Servers, and here's where you'll select the server that will host your pages on the web. Okay, that sounds like a good idea. You can have multiple servers, but really we just need one, so I am going to add a new server. Right in here I can give it a server name. This is actually hosted on GoDaddy servers. And then from GoDaddy what I need is I need the FTP address, the username, and the password. So whoever your hosting company is, they will provide you these three blanks.
So that's what I'm going to go to get now from godaddy.com in this case. So here I am, on godaddy.com. I've logged in. I'm in my account. And really, this would be your hosting company, but I am going to select website hosting. Scrolling down I can see Eva Jones design as being hosted, so I can click launch to see all of the details for the site. And as I take a look, I can see DOMAINS, FTP ACCOUNTS, DATABASES, all sorts of good stuff.
Well, to be honest with you, it's ftp.evajones.com. That's the URL I want. I can see there's FTP ACCOUNTS as well. That's already added. So I can Edit FTP User. Here's where I have already selected a name and given it a password as well. So whatever I enter in there, that will be my username and password. So that's provided by you to the hosting company. evajones, and I happen to know the password.
All right, so we know it's ftp.evenjones.com. You can also use the IP address instead of the ftp.evajones.com. And as I scroll down, a lot of hosting companies will provide an FTP file manager. So you can use their file manager to upload those files. But hey, Dreamweaver makes it easy. And based on this information from my hosting company, now I can go back in the Dreamweaver and hook this up. So I'm minimizing these pages.
Going back into Dreamweaver. FTP is going to be ftp.evajonesdesign.com. IP address would also work there, Eva Jones is the username, and then the password that I've defined, and then we can click Test. And it says it's connected to the web server successfully. That's wonderful. If it doesn't then it means you have one of these three fields incorrect. It also gives me the web URL, so the web URL can actually be www.
Saving that, I can see that GoDaddy servers, because I have a lot of servers that your content is being hosted on. This is my remote server. You can also set up a testing server too. But that's all I need to do. You don't have to worry about any of other controls. Just click save. You might get this pop up. It says Keychain Not Found. This is if you're on a Mac. Just hit Cancel. And look what happens. It opens up your Files panel and actually shows you the website, so check that out, as I expand it a little more.
I can see the path where this content exists, all those folders, all those files, including this index.html, and this is great. This is my local site. I really love this. In fact, I can view the remote server or the local view, so I can toggle between those. In fact, as I select Remote server, it's going to connect to godaddy.com in this case, to my server, and show me all of those files. Here's what's on my server.
Now, yours might not look like this, but there are basically some files that the hosting company has provided to you, usually that they feel might be helpful to you, like a 404 page. That's what that missing.html page is, and some additional things. But nonetheless, I can even click on this Expand to show local and remote sites. I like this view because this helps me understand what's going on. So in here I have my local files and then my remote files. And you can see that my local files are not on the remote server yet.
So what do I need to do? Well, I need to upload them. So taking the index.html for instance, as I select it, I can select Put, so that is uploading. It says hey, do you want to include the dependent files, because there happens to be images and various things that are in these images folders and CSS. Do you want to put that stuff up there as well? I'll say yes. Sure, why not? And it will upload all of those files. You can see the index is there on my remote server, CSS, images. It looks like we have some SpryAssets. I don't have to worry about making sure I upload those individual files; it does it all for me.
All right, there it is. My index.html is actually now out on this remote server. So, that being said, I can even now go check it. So, that's what I am going to do right now. I'll close this panel, and I'll launch a browser and go to that URL, typing in evajonesdesign.com. And here it is. You can see that page load in. Everything looks great. I love it. I can go to the about page. What's going to happen? Oh, here is that missing HTML page that shows up.
Okay, it's because I haven't uploaded the about page. So really, that is my goal right now, is to upload the rest of the content. Now you don't need to always expand the view. What you can do is you can just select all of these files, okay. So keep in mind I am going to have this Local view selected, and I am going to just Shift+Select all of those files and select Put to put all of those files, including the dependent files, everything, up on that Remote server, so I have the complete site uploaded. All right, with that done, all of my files are uploaded. I can go ahead and test it out in a browser, and this is just really fun to do.
Launching a browser window, remember this page was not there. In fact, I can just hit Return. There's my about page. In fact, as I click the homepage, about, scrolling down, it looks great. Portfolio, you can see my portfolio in here. Scrolling down, selecting any one of these, clicking through each one of those images, you can see that everything looks great. All right, closing that. Lastly, you have the contact page. I can go ahead and say, "I love your site!" Testing out this form. There you are, your thank you page.
So congratulations. If you did do this video, you now should have a site available out there on the world wide web for other people the see. And quite frankly, all I need to do is send them this URL and they'll be able to access it. Very cool, Dreamweaver making it easy and just really efficient for you to publish your own website.