gradient
 
gradient
 
 
 
 
title

13. Adding Links Through Slices

title
sign
 

 

One of the advantages of using slices is that you can define links directly from Photoshop. We will use links for our rollover buttons but you can define links for any slice you need.

Open the index.psd file located in template/psd:

If you don't see the slices go and select de Slice Tool. You can also hide or unhide the slices by activating/deactivating the Extras option from View -> Extras (Ctrl+H):

So we decided we need links for our buttons. After selecting the Slice Tool from Tools go and right-click on the slice defining the "Home" button and from the menu choose Edit Slice Options... Doing that you'll open the slice options window in which you can define links.

The Edit Slice Options... appears and should look like the image below:

As you can see we have already defined the name, the URL, the Message Text and the Alt Tag for all the buttons. You can modify them as you like but first take a moment and find out what each one of these represents:

The Name sections defines the slice's name and this will be also the name of the exported image (Note: if you give the same name to 2 or more slices when you'll export the file for the web using ImageReady the resulting image files will be automatically renamed generally by adding to the slice name a number)

The URL section defines the link. This link may be for internal pages of the web site and then you'll write for example only "home.html", for external pages and then you must write the whole web page's address like this "http://www.sitename.com/page.html" or you can define a "blind" link writing only "#". By default the templates have "blind" links because they only have one page, the index page. When you'll create your web site starting from a template you'll need to change the "#" sign with you internal or external links.

The Target section defines how will be opened the linked file. To open the page in the same window leave this space blank. To open the page in a new browser window write "_blank" in the Target section.

The Message Text sections defines the text that will appear in the message area of the browser when you have your mouse places over the button. In the image below you have an example of a link message in Internet Explorer:

.

The Alt text section defines the message that pops close to your mouse pointer when you are over a link. You have an example of an Alt text message in the image above.

The other options in the Edit Slice Options window don't need to be adjusted.

In our layout as you can see we defined as Message text and Alt text the same text "Home", but you can write what you want, generally the Message text is a short description of that page (for example: "welcome page").