Join Paul Trani for an in-depth discussion in this video Adding links, part of Creating a First Website in Dreamweaver CC 2014.
- View Offline
What really makes the Web powerful in my opinion is the fact that content can be linked together. It really is a very large network of linked content. How do we link content? Well it's done pretty easily. In fact, notice how I have this HTML page open and I have Live View selected. So say for instance right down here in this paragraph text, if I want to link the words 15 years, I'm going to double-click on it. And it's going to give me that orange border.
So now I can actually select those two words, and I love this because I get formatting in live view. So notice how I can make it bold, italic, or add a hyperlink. And you can also do that down here in the Properties panel by typing in a link. But all I'm going to do is jump in there, just double-click, select what you need to. Add a hyperlink right here and in this case this is going to link to my about page.
So it's going to be about.html. I don't have that page created yet but I can easily create it later as I select it. There it is. It does turn it blue and it gives it an underline. And that's what happens when you start linking content together. Even up here if I double click on this nav and I double click and select Home and I decide to hyperlink that particular word to index.html. It's going to make that one blue.
But that's what I'm going to do, is I'm going to just start adding a couple of links for the About page. It's going to be about dot HTML. Portfolio as well, linking that. Portfolio.html. This could actually be a link to a JPEG, if I want to. But in this case, they're all HTML pages. Contact.html as well. All right, so there they are. I have all these various links. And they will jump out to those various pages. Let's say, for instance, right down here if I decide the words Paul Shranney to link out to my website I can add a hyperlink right there.
In this case, what I want to do is, I need to type in http://www.paultrannie.com, just like that. OK, now if I expand the properties panel, just to show you that link,. You can see it here. But you actually, do get additional options. Because if I'm ever jumping out to another site, what I want to do is I want to change the target. So don't go away from this page. Open up a new blank page for any external site.
So selecting that. That is good to go, all right. But I'm starting to take a look and to be honest with you I'm not crazy about the blue with an underline. Yes it's very legible as a link but I want to just add a little bit of flair to it and really just make it work with my design. So that's the goal. So going in here, what I can do is I can select Styles.css. Okay, we can see all those selectors. But again, for this specific word, if I jump in there and I select it.
What I want to do is I want to add to it. So I'm add a selector. And this is what I get. Section right, paragraph a. Now, a is the tag that I want so if I decide I want to change all my links, all I need to do is change that. Just have that set to a and even as I select it you can see it highlights everything. So it's saying, hey, if you change any of these properties it's going to change all of these various items.
That's great because for the text I do want to change the color. I want to change it from blue to red because that's more along the lines of my design. So, changing that to red just like that you can see it set to red. If I decide I don't want a text decoration because I think quite frankly. The red is enough. I can select none right there. So, with that set up, that's actually going to work.
I'm going to save this page. In fact, I'm going to save all. And at this point, I'm going to preview this page in a browser. So file preview in browser. Preview any browser that you have installed. I'm going to use Google Chrome. There's my site. I can scroll down. Remember these pages don't exist. But I can select Paul Trani, and sure enough it jumps out to that site. And it doesn't overwrite the current site as well.
So there's the new site. Everything will be linked together exactly as expected. Notice how you can customize it as well. Just jump in, select styles, and it's going to be that a tag. And really, my next step for the design is to customize the navigation.
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