Creating links in your Dreamweaver Template
Share this Dreamweaver Article:
So we will be adding links to a main navigation bar that we have inserted and also well be creating a few blank HTML documents, saving them to our root directory, and then creating links to those pages from our index homepage.
Adding links to a navigation bar
If you don’t know how to insert a navigation bar then please see my tutorial on inserting a main navigation bar in dreamweaver.
Ok, let’s first create a few blank HTML documents that we can create links to from our homepage. Go to:
FILE>NEW select a Blank HTML page and press CREATE
Place your cursor inside design view and type a sentence or whatever you like. I’m going to type DREAMWEAVER TUTORIALS. Notice that when you type dreamweaver tutorials that the text will also appear in code view as well.
Now highlight the text and go down to the properties inspector and change the format to a heading 1 or 2 just so that you can see it a bit better. This is done from the HTML section of the properties inspector, click on the drop down menu for FORMAT located at the top left of the properties inspector and select the headings you want from there. Now let’s create another page by going to:
FILE>NEW select another blank HTML page and press CREATE
Place your cursor once again inside of design view and type some more text that we can link to. I’m going to type FIREWORKS TUTORIALS because that is one of the sections for www.dreamweavertutorial.co.uk. Change the format to a heading 1 or 2 like the previous page we created. Lets create one more page by going to FILE>NEW and press create. I know you know this by now!
Ok let’s practice changing text headings by doing in inside of code view. We’re going to Place our cursor inside of code view. To open code view you can click on the SPLIT button located top left, a little way below the FILE option on the menu bar. Or click VIEW>CODE AND DESIGN.
Just place your cursor anywhere inside the body tag:
<title>Untitled Document</title>
<head>
<body>
| <-------------------------- place your cursor here
</body>
</html>
Now type in the heading tag for a H1 heading:
<H1> type your text here </h1>
Ok now click away or click the refresh button to make the action take effect and you will notice that the words you typed now appear in design view and the text has enlarged to a heading 1 and that’s proof that dreamweaver has recognized the syntax that you have entered.
Ok let’s now save all of our blank documents and close them all down. Got to FILE>SAVE and save the documents into you sites root directory. That way you will be able to see them from within dreamweaver by looking to the bottom right of your screen in the files panel. I’m going to save them as .HTM files because they are accessed from within the site itself. So no need to type .HTML because it may take the document longer to load when it’s finally online.
Now let make sure we have our homepage open or our index.html page open and click on the first navigation button that you want to link to another page that we have created. Now go down to the properties inspector and you will notice that there is a link box.
The quickest way is to create links in dreamweaver is touse the point to file icon. But first let’s practice typing the links manually as this will serve you well in the long term.
You can type in there the link for the page.
Now if you saved the blank pages directly into your site root then you can simply type the name of the file followed by the extension so for the first page I created, dreamweaver tutorials, ill type:
dreamweavertutorials.htm
That will create the link for you. Now if say your pages are inside a folder in your root directory for instance, a folder called ‘blankpages’ then in the link box you would type:
blankpages/dreamweavertutorials.htm
and the link will know to go to the blankpages folder and access dreamweavertutorials.htm from there.
The second and most popular way to link pages or buttons to pages is to use the point file icon. You will notice just to the right of the link box in the properties inspector a ‘target’ like icon. If you click and hold the mouse on that icon, you can then drag the arrow pointer to the file in the files panel and while you hover over the file with your mouse just let go and you will find that the link has been created. That’s a really great time saver and I think you’ll agree!
Create the links to your other pages by following the procedure above and then preview in your browser. You should find that the links go to the pages that we created.
Creating links from text to other pages
Let’s look in our site directory and load up one of the blank pages we created earlier. Highlight a portion of the text or all of the text and go down to your properties inspector. Use the point to file icon and drag the link to another page that you created. Now open up that page and highlight the text there, and create a link to another page using the point to file icon. For good practice, trying linking all of the pages in a circle so that they link from your homepage, and then back to your homepage after travelling through all of the pages that you have created.
For a Dreamweaver CS4 Video Tutorial explaining the above techniques follow this link:
Creating Links and Linking a Navigation Bar in Dreamweaver CS4.
