Join Paul Trani for an in-depth discussion in this video Creating your first webpage, part of Creating a First Website in Dreamweaver CC 2014.
Now when you first launch Dreamweaver you might be greeted with this feature tour if you will. So just hit Skip Tour. And we can dive right in to creating our first webpage. And we're going to create a new HTML page. So you can select that here. Or you can go to File > New. Select HTML as your page type and then None. But also, I'd like to point out, there's a couple of different layouts in here as well. And these are HTML 5 layouts that have CSS, and are fully commented, so those are a great way to learn as well.
But we're going to start from scratch by selecting None. And this is an HTML 5 document. Selecting create. And here's our very first web page right here. But let's take a quick look at Dreamweaver the interface in general. Notice everything's separate out into panels. You can easily take any of these panels, and click, and drag them off. The Insert panel is a very important panel so I'm going to pull that off. And the Files panel is going to be a very important as well.
As well as the CSS Designer panel. And really what's helped me out a lot is just really having one panel set off to the side. So I'm going to take the Insert panel, drag it back over. Until it highlights all the way around, put it in there, files as well, dragging it over, putting it right there. This CSS transitions panel, well, I honestly don't use that a lot, so I'm going to close that. So really it boils down to. These 3 different panels.
You have your files. Need to be aware of where everything is. The insert panel for inserting content. And then styling content with CSS designer. Now also down here. Depending on what you selected, you'll be given the properties for that element. So even if I just click, on this document, my html document, I can take a look at the page properties for this document depending on what's selected, and you can see all of those different properties. I'm going to click cancel there, but let's get familiar with our first html document.
In fact our first web page we have design, live view, split view, and code view, so let's go through these. We have design view, we have code view. Clicking right there. Oh, here is the code or the HTML for this particular page. You can see it says untitled document, Okay. I can even go into split mode. I really like split mode, because you can see yourself creating things, and you can see the HTML being written behind the scenes, if you will. But, nonetheless, for the title, case in point.
If I want to change this to Ryan: Designer for Hire, I change it right up here. It'll change the title right here, pretty straight forward. Even if I type, on this page, Ryan Designer for Hire. There we go, just like that. And you will sometimes get this little pop-ups, and these are meant, to help you out, because in general it says hey you know what? If you ever want to see your page as if it's in an actual browser, click on live view.
So that's great and that's very powerful because I don't need to preview this html page in a browser all the time. All I need to do is, actually I'll just X out that and I'll click live view. And whatever you see here, right here. Will be our live view, in fact, look, it's already giving me hints as well. You can double-click on any text element to edit it and style it, okay? So, we're going to be doing that later, but you can easily see that this is the paragraph tag and it's asking me to basically make changes to it.
But what I could also do is double-click on it and in live view, this is brand new in. Dreamweaver, the 2014 release, right in here, this is where I'd write out the content for the page. Just like that. But I'm actually editing in live view, so if you will, it's like I'm actually editing in a browser. Very powerful. Really, the last thing I want to do right now is, first I'm going to minimize this properties panel because we just don't need it right now.
And I want to save this page. Now this seems really simple, just saving the page. But I can't emphasize this enough. because it really matters where this site is being saved. First off what am I going to call it? I'm going to call it index.html. The first page to any site is going to be your index.html, or index.htm, or home.htm. But trust me just go with index.html. It's pretty much the industry standard. Exercise files > Chapter 2, and I'm going to go into 01 Begin.
That's where this file is going to go. But just be aware of where you're working, because as you start to add images and link to other files. Those links could get broken if you're pointing to files on your hard drive. And then you upload the site, your site might be looking for images on your hard drive. So just be aware of where your content is in this case, saving that HTML page right there. And we're done. And we're again, just getting comfortable with the interface.
And really the next step is to add more content to it
Author Paul Trani begins with brief introductions to HTML and CSS. Then you'll learn how to create a basic webpage, add text and images, and style the content with CSS. Paul then shows how to add navigation and links between pages, integrate video and social media (such as a Twitter feed), and create a contact form. The course also covers making sure your layout is "flexible" (i.e., that it resizes to fit mobile devices), testing your site, and uploading it to the web.
- Understanding the Internet and websites
- Adding HTML content to a webpage
- Styling content with CSS
- Creating navigation
- Adding more pages
- Creating a flexible layout
- Adding video and animations from Edge Animate
- Linking to other pages and websites
- Creating a contact form
- Creating a responsive site for mobile devices
- Uploading and testing the website