- 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
Once you have one page for your site created and looking good, you can then start to create the other various pages. In this case, I have the homepage created known as index.html, and now I need to create the about, portfolio, and contact pages. Notice even as I click on them, they're not going anywhere, so I need to hook up this menu too. So that's my goal: hook up the menu and make those various pages. So I'm going to go into Dreamweaver. Here I am, in Dreamweaver. I can select this Spry Menu Bar, and I want to link up these different items as I select the home item right here, that specific button.
The link just has a pound sign in there, so it says you know what, I know I am a link, but I don't really go anywhere. Well, I can change that. In fact, if I click that Browse button, notice that I can go ahead and select any file that I have in here. And if you have access to the Exercise Files/Chapter 05/03 Begin, that's what I'm referring to. Selecting that file, selecting Open, and it just puts it right in there. Moving on to the about page, well, you know what, an about page it doesn't exist yet. Well, that's easy enough. I can just type in here "about.html" and just keep in mind that's what I called it.
Going to the portfolio, doing the same thing, portfolio.html, contact. You got it, contact.html, just like that. All right, my menu is hooked up, and I need to start making those pages now. So I'm going to save everything, is what I like to do. And with this design set up and everything looking good, I can now go to File > Save As and save an about page. There's my about.html. Here we have it: index and about.html.
So for my about.html page I can start to customize some of this text. Right down here you can see for this About page, you know what? I can eliminate that text there. And you can see for the About page has a resume and additional content. I can remove that text as well. All right, that's my About page. In fact, I want to change some of this text. In fact, I do actually want to call this Eva Jones. And this will be about, okay, just like that.
So it says about Eva Jones. So let's click on Live view. That looks good. It looks like a great about page, and then I can save that. All right, going back to my index.html page, because this also has content for my portfolio page, so I can save this as my portfolio page, same folder, just like that. And right in here I can start to just make sure this contains the items, as I scroll down, Graphic Design and Motion Graphics. That's what I need it to say, removing that content.
In fact, right in here and in this case again Eva Jones, and in this case what I want to do, portfolio. I want to move this, taking this, I'm going to cut it, paste it on that side. That looks good, and I can insert more content in there. But overall, that looks great. I'm going to save this page, going back to my index.html. I'm going to save my final page, which is going to be my contact page, doing a Save As. It saves it to the same folder, clicking Save, right in here. Scrolling down, getting rid of all of that other content except for that Let's connect contact page information. So in this case I can say, contact Eva Jones.
All right, clicking in Live view. It looks great. I can add more in here if I want to as well. Saving this page, actually saving everything and from there, what I can do is even test it in a web browser. So here I'm testing the contact page. Well, let's click on the homepage. Yup, works great. Clicking the About page, clicking the portfolio page, and the contact page. But I want to customize this even more. I want to customize the style. In fact, I want the style to be consistent across all the pages, but I want to change the background for each page.
So what I want to do there is starting with this contact page, I can add a style. Okay, so it's actually referring to these various style sheets which are all external, but in this case if I want to customize any of the look specific to a specific page, I can add a new style just by clicking here, New CSS Rule. And I can add a new selector and even selector name. So in this case I want to change the background. That's going to be B for body.
Selecting OK and from there I can create a new background. In this case, I'm going to reference a new background image that's going to overwrite this current one. So I'm going to select Browse, and I'm going to go to my images folder. And if you do have access to these files, I'm going to go into the 03 Begin images folder. Notice right in here, since I'm dealing with the contact page, I can select that background contact that I've exported earlier from Photoshop.
So selecting Open, I can click Apply. Oh, and there it is. Looking good. I'll click OK. That looks great. But what happened? Well, let's take a look. As I look at my CSS Styles panel, I can see that body. This is what it's added. This body is actually, if I go to the code just by right-clicking, this is actually just internal to this HTML page. So it's just specific to this HTML page.
So this is basically saying, hey you know what, all that other style, just go ahead and apply it as you usually would, and anything I want to overwrite or apply specifically to this page I would just add internal to this page like I just did. So that's how that's set up. It cascades, as it's known as a Cascading Style Sheet, cascades down applies this CSS and then overwrite that original image with this one, okay. So it works out great. I like that. I can save that. I get that nice customization. In fact, let's move on to the portfolio page, right in here, with that selected, adding that new tag known as the body, and I can type in body if I want to.
Selecting OK, going to the background, then browsing to that background for that portfolio page, which is right here, background port. Selecting OK. And you can see it's changed; it has these feathers which are pretty cool. Saving this page, going into this About page, and now what I can do is again, just be mindful of what you have selected, because if I have this selected, it's going to actually add it to a CSS page. So just that style is selected.
I'm adding a new CSS rule. It's going to be a tag known as body, and again you can type it in there or select it from the dropdown. Selecting OK. Going into the Background category, this is my last one. There's my about image. Appropriate, since its Eva Jones. All right, everything looks good. Since I start to deal with these multiple pages, I get in the habit of just saving everything.
Okay, so I just save all. We can preview this in a browser. Here it is. You can see that image. It takes on all those characteristics of that stylesheet.css, so it expands and contracts accordingly. And then as I click on, say, the Home link, you can see it changes that background. All right, let's do some more, going to the portfolio page. I love this. So the style is consistent. The user is used to the nav and where all the content is being positioned, but each page has its own unique look.
So that's how you can easily create multiple pages, link them together, and even customize them for a unique style per page.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.