Linking to web pages and sites
Video: Linking to web pages and sitesSo 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.
Viewers: in countries Watching now:
Creating a First Web Site with Dreamweaver CS4 shows the basics of doing just that—building a first web site. Adobe Certified Instructor Paul Trani walks through the important steps of creating a web site from concept to publishing, using Dreamweaver CS4. He teaches how to create basic web pages, add text and image content, use Cascading Style Sheets for design and layout, create a photo gallery, and even check the final site for browser compatibility. He also demonstrates how to create a contact form to encourage viewer feedback on the site. Exercise files accompany the course.
- Exploring the Dreamweaver workspace for first-time users
- Linking to external web pages and sites
- Improving the presentation of text and images on the site
- Building a layout using Cascading Style Sheets
- Making navigation reusable across multiple pages
- Displaying content using the Accordion widget
- Creating a contact form and sending data from it
- Making the final site search engine-friendly
Linking to web pages and sites
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.
Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS4 .
Here are the FAQs that matched your search "" :
- Q: After creating the website as instructed in the tutorial, and uploading the site to the internet, the website does not seem to work for every browser. How can one make sure that the website will work for all browsers?
- A: An important step when creating a website is to check for browser compatibility. To do so in Dreamweaver, go to Window > Results > Browser Compatibility. Click the Play icon in the left corner then go to Settings and target the browsers you¹re after. Then hit the Play button to run it and check the page that’s open. If there’s an issue, best-case scenario, it should show you what the issue is and link out to a solution. Worst case is that it’s a pretty unique issue, in which case further troubleshooting would be needed.
- Q: The background image is tiling, instead of being one large image. How is this corrected in Dreamweaver?
- A: This can be corrected by using a larger image, something around 1024x768 that will fill up most of the monitor space. The issue is that the background image is just too small. Note that tiling of the background image can be turned off in the CSS Panel, but that would only result in a single small image. So it’s better to just use a larger image for the background.
- Q: When trying to import SWF content, I get a message: “This file is outside the root folder of site ‘xxxxx’ and may not be accessible when you publish the site.” What is causing this?
- A: Make sure your SWF file (and all files you put on a page) are located in your local site. Basically make sure you set up a local site in the site panel. It will ask where to put your local site on your computer. Just make sure you SWF is in that folder and you won’t get that error.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.