Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So once you have some content on your HTML pages, you really want to start linking these pages together. So, what I want to do now is I want to create a quick text navigation bar, made up of HTML text. And I also want to link out to a website externally as well. So, right up here under Home page, I want to type in Home. So, I'm just creating text that is then going to link to the different pages. So, I have typed in Home. I want a divider between the Home link and the Next link, which is the About link.
So, I'm just going to use this Pipe key, so I'm going to select Shift and then hit the Backslash key. It will give you that sort of pipe divider, which works out pretty well. So, Home About. Again, Shift+Backslash will give you that pipe. Portfolio. Shift+Backslash and then Contact. So, as you can see, here are my four different pages and I want them to jump to these pages that currently are already open but more importantly I want, say for instance, the About page to jump to about HTML.
So, in order to link any text to something else, all you need to do is select it and I'm just going to double-click on that word and it will select the whole word. And then in the Properties panel, under HTML, I can go ahead and link to that page and again I want to link to this About page. So, I really like the ability to point to a file. So, I'm going to select this Target Looking icon and you can see it gives me this arrow. This arrow will allow me to click-and- drag and point to that specific file and then when I release, it points to that file.
In fact it says About HTML. Look what it gives me. It gives me this text. It now blue. It has an underline, which is clearly the signs of a link. So, that's working out well. Portfolio again, double-clicking on that word, I can use my Point to File button and point to Portfolio like that and Contact. Double-click on that word and maybe instead of using the Point to File, I can always browse to that file as well.
So, browse, 05 Begin, Contact. Okay, so that's exactly what I want to point to. The contact HTML. Click Choose and there it is. Well, okay lastly the Home word, I'm going to link that to the index.html because that's my homepage. Select Choose and there is my navigation. So, well, you might be curious as to whether this is working or not and in order to see this working, I need to preview it in a browser.
So, that's my next step. So, I'm going to go to File and I'm going save this page first and then I'm going to go to File > Preview in browser and I'll preview it in Firefox but you can select any browser you have in here and what it will do is it will launch that browser with that page in it. So, you can see that it is the index.html page. It gives me my links. I get the little hand icon. When I roll over any one of these links and if I click on it, it will jump to that page.
So, here I am on the about.html. I can click the Back browser button and check all of these out. And look what starts to happen. This is the visited link color. It is by default this purple. So, I visited all these pages already and it's just this last one. In fact, if I click on it, look what happens. It turns red and then jumps to that page. So, again, really quickly I was able to add that navigation, pretty effectively for the most part and again it's just really a matter if I go back into the Dreamweaver, of linking those files and pointing to those particular files, so they are sort of linked together.
That's for making sort of a website, sort of this linking intertwined pages. In this case, down below, I have this Follow Jane on Twitter. And what I want to do here is I want this text to jump out to our Twitter page. So, with that text selected, I can go down to this Link input field and I can go ahead and type in that web address. In this case http://twitter.com/ janedoephoto and then hit Return. There it is.
And let's go ahead and save this file and preview it in our browser again. Now if I click on Follow Jane on Twitter, sure enough her Twitter page opens up just fine. In some cases, I might want this page to open up in a new browser window and I can easily control that. In fact, if I close those windows and go back to Dreamweaver, I can select this text and right next to where I typed in the web address, I can select this Target and I can open it up in a blank page.
So, this is sort of a best practice. If you are jumping sort of to a different website, to open that up in a blank window. So, that's what I have just done there. I'm going to click save and I'm going to preview it in a browser. And if I click Follow Jane on Twitter, it opens up in a new browser window in this separate tab. So, they never quite lead my site, which is exactly what I want. I want them to open up that new browser window and again, behind the scenes or under the hood, I can click Split View and you can really start to see what's going on and what Dreamweaver does, which is creates this href, this reference to this page and then targets the new window.
But again, it's code I didn't have to write. Dreamweaver did all of this for me and Dreamweaver does a good job of effortlessly writing all this code for me.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.