Thursday, September 23, 2010

Linking to other Pages

Creating Link to other Page

Step 1: This will allow you to link an image or word to any link.

Step 2: Make sure your files are prep.

-Manage Folders/new and link to your folder/

Step 3:

1-Highlight the text you want as the link and in the Link bar at the bottom

type in the website.

UR System:Users:uruser:Desktop:highlighted image.jpg

UR System:Users:uruser:Desktop:bottom link bar.jpg

2- Keep your cursor on the word and create a new style.

Select format and CSS styles, then New.

UR System:Users:uruser:Desktop:link_tutorial:Create new style sheet.jpg

3- Selector Type: select Compound

In Selector Name: select a:link (this is creating the link to the type or image you desire for the link.

-Select in the Rule Definition: New style sheet file or this document only. OK

UR System:Users:uruser:Desktop:link_tutorial:a link in compound.jpg

4- A style sheet will appear, stylize your link and change font, color, add border etc. You decide.UR System:Users:uruser:Desktop:link_tutorial:customize.jpg

After stylizing is complete push OK.

Repeat this process for the next three style sheets.

Remember you need to keep them in order.

5- Create new Style sheet,

UR System:Users:uruser:Desktop:link_tutorial:Save style sheet.jpg

6- In this style sheet, repeat everything from before except in the Selector Name box select a:visited, and in the Rule Definition select your first style name, ex. Style.css

a:visited shows what the link will look like after it has been visited.UR System:Users:uruser:Desktop:link_tutorial:avisited in style.jpg

Finish this style sheet by changing color or size, you decide.

7- Again create another style sheet, this time in the Selector Name: box select a:hover. Repeat as the step before and stylize as you wish.

a:hover will show the style of the link when the mouse is hovering over it.

8-Finish by creating a final new style sheet, in the Selector Name: box select a:active. Repeat as before and stylize. Be sure to save.

a:active will show the style of the link when it is clicked and active.

9- View results after saving by clicking File, Preview in Browser, then select your desired browser.

View of CSSUR System:Users:uruser:Desktop:link_tutorial:css.jpg

View HTML Code

UR System:Users:uruser:Desktop:link_tutorial:code.jpg