Thursday, September 23, 2010

Linking to websites

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.        


         2- Keep your cursor on the word and create a new style.  
Select format and CSS styles, then New.

         3- Selector Type: select Compound
In Selector Name: select a:link  (this is creating the link from your type to the desired link or website)



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


4- A style sheet will appear, stylize your link and change font, color, add border etc.  You decide.


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,


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.




















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 CSS



View HTML Code




No comments:

Post a Comment