Adding Hyper Links to Your Website
A guest post by Victoria Rose Martin
Last month you created a design that will become a home page for a website. You sliced it and saved it for the web. This month we’re going to add hyper links to your website in Dreamweaver. Now before you start hyperventilating over hyper links, it’s actually easier than you think. I am going to walk you through step by step and I won’t lie, a blog entry really only skims over the surface or web design, it’s my hope that this is your first steps as a web designer. Remember, if you have questions you can always ask me.
For this demo you are going to need Adobe Photoshop and Dreamweaver. As you may know Dreamweaver is an html (web) editing software. The interface is considerably different from Photoshop, but if you follow the instructions below you could have a website up and running in no time.
Please refer to February’s blog entry for information on how to get discounted versions of the Adobe Creative Suite. And remember, you can download a free 30-day trial of the software from Adobe’s site to give a test run before purchasing.
Image 1. Root folder website contains index.html file and an images folder with sliced header, nav and body.
Find the file we sliced last month. It should be named index.html and with it should be located with a folder titled “images”. If you look inside the images folder you will notice that it has the header, nav, and body images we sliced last month. (image 1). Put all together they create your web page.
Launch Adobe Dreamweaver and choose menu option FILE/OPEN and browse for your index.html file.
When the document opens, click on the header. Notice that it gets a black line around it when it’s selected. There are a few things I want to point out in image 2. At the bottom of the document in image 2, notice the <img> or image tag (the red arrow is pointing to it). That is the tag inspector and it is basically “bread crumbs” showing you where you are in the document. By looking at the tag inspector in image 2
I can see that we have an image selected because the <img> tag is highlighted. If I look to the left of the image tag in the tag inspector I can see the image is situated in a <td> tag or table data tag, and then to the left of that <tr> or table row and to the left of that a <table> tag. And by slicing this image in Photoshop and choosing save for web, we were able to theoretically “write” html. How cool is that?
Image 2 Note the arrow pointing to the Tag Inspector, where the src link is located and where to add the title of your page.
Also at the top of the document in image 2 where it says title, that is where you enter the name of your web site. Be sure to use good key words to help people find you on the web. For example I might call my page “Home Page of ceramic artist and designer Victoria Rose Martin”. This information will also be on the top of the browser bar when a person visits your web site.
Also, in image 2 at the bottom of the page notice the area circled in red. That is the Src or location of the image in your images folder. Any time in web design when you see a forward slash (/), that means an object is located in another folder or directory.
Now that you are oriented with the document, we need to tell Dreamweaver where the web files can be found on your computer. We do this by Defining the Site, or going to menu option SITE/MANAGE SITES/NEW SITE.
Image 3. When you choose menu option site, new site, this dialogue box appears.
When you chose New Site a dialog box will appear. (image 3) Give your site a name in the top line and in the lower click on the folder icon and browse for the folder which holds your index.html and images folder. When you finish, click Save.
Notice the Files panel located at the right of the screen, it should display your root folder and all files located inside that folder. (image 4) If you do not see a Files panel, go under menu option WINDOW/FILES to display it.
Image 4. Notice the Files panel on the right. If you don't see it you can find it under menu option Window//Files.
Locate the index.html file in the Files panel and right click on it.
Detail of Image 4
A dialog box/ option box will pop up when you right click on index.html. Choose the option EDIT/DUPLICATE to duplicate the index page. (image 5)
Image 5. Right click on index.html in the files panel, choose Edit, Duplicated to create new copies of pages.
Select the t document in the Files panel and rename it. Give it the name about.html. You’ve just made the second page in your web site.
Repeat steps 9 and 10 three more times. And rename each copy contact.html, portfolio.html, and resume.html. Now you have 5 html pages for your web site. (image 6)
Image 6. Duplicate the index page and rename each copy the name of a page in your site.
ADDING LINKS: Click on the nav.jpg image on your index page. You’ll know it’s selected when the black lines appear around the graphic.
With the image selected, look at the Properties Inspector. Notice the lower left corner it says hot spot. A hot spot is a fancy way of saying “make a spot on this image a hyper link. You get to choose the shape of the hot spot. Note the options for a rectangular, circular and free form lasso hot spots. Select the Rectangular Hot Spot Tool and draw a box over the word Home in the nav.jpg image. (image 7)
Image 7. Draw a hot spot over the word Home.
You will receive a message to be sure to include Alt information. Say OK. Before you go any further be sure you can see the pages in the Files panel. In fact click once on index.html so it is selected in the files panel.
In the Properties panel locate the area where is says Link. Immediately following the word link and the box in the Properties panel you will notice a small circle that looks like a compass and a little folder icon.
Click on the compass and hold the button on your mouse. Don’t let go. (image 8)
Image 8. Pointing to a link in the Files panel.
While holding the button on the mouse drag your mouse over to the index.html page. Notice the cursor becomes an arrow. You are in effect pointing to your page you are linking. Let go of the mouse when you select the index page.
Notice in the properties panel in the Link area that the Hot Spot is now linked to the index.html page.
Draw Hot Spots on each page name in the nav.jpg image (about, contact, portfolio, and resume) and repeat steps 17 - 19 pointing to each respective page. For example, draw a hot spot box over about and then point the link to the about.html page.
In the files panel open the about, contact, portfolio and resume pages by double clicking on each of them. Repeat the process of linking each page using Hot Spots.
Be sure to save often. There is nothing worse than working on a project and not backing up your work. Save often.
- When naming your files for web sites do not use spaces, capital letters, or special characters such as $%&@.
- Make your web site live you need a web site (which you now have), a domain name, and hosting.
- Next month we’ll go deeper into how to make your site live and how to find a host.
If you try this and get stuck send me a message, I’ll do my best to help.
Victoria Rose Martin is an artist and designer currently living in South Florida. She is the Department Chair for Fine Art and Graphic Design at Palm Beach State College in Lake Worth, Florida. You can visit her website at: VictoriaRoseMartin.com.
For more tips about being successful in the business of being an artist, check out 2013 Artist's & Graphic Designer's Market
MORE RESOURCES FOR MIXED MEDIA ARTISTS
• Improve your mixed media art with books, DVDs, downloads & from the North Light Shop
• Sign up for your FREE Create Mixed Media email newsletter for great tips, projects & more
• Get unlimited access to mixed media art instruction ebooks
• Download free mixed media desktop wallpapers
You may also like these articles: