Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Css Buttons

    Загружено:

    handbooktiem
    13 просмотров4 страницы

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    13 просмотров4 страницы

    Css Buttons

    Загружено:

    handbooktiem

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    CSS Buttons

    Until Sh e et s

    re cently, have

    C as c a ding n ot b e en

    St y le f ully

    supp or te d by all brows er s . T his over sight has change d, and as a result , p ossibilities to contro l th e app ear ance of your sites have com e to th e foref ront .

    A s imp or t antly, h owever, s o has th e abilit y to re duce th e size of a p ages f ile, re ducing th e tim e it t akes to dow nlo a d it . O n e of th os e options is to create your nav igation b ar using C SSs, allowing you to create ro llover ef fe c t s with out th e n e e d for multip le images, re ducing
    Copyright - W. Mitchell

    th e p ages f ile size consider ab ly.

    T his tutor ial will lea d you through th e pro cess es re quire d to create a f ully f unc tional nav igation b ar that is def in e d and contro lle d

    s tr ic tly through th e app lic ation of C as c a ding St y le Sh e et s .

    1. 2. 3.

    In Dreamweaver, create the page you wish to add the buttons to Create a AP Element on the page and type in the Label for a button you wish to create Because of problems encountered setting a Cascading Style Sheet to control this button by this instructor, I have determined it is easier and safer to insert a basic css rule into the code display to start with, then work from there

    4. 5. 6. 7. 8. 9.
    CSS ButtonS
    Copyright - W. Mitchell

    There are two parts of the css rule; one to control the appearance of the Up State, and one to control the appearance of the Over State The first part, in this tutorial, is called .links, while the second one is called .links:hover The :hover part of the rule defines what happens when the cursor passes over the link To insert the code, select the Split icon in Dreamweaver to display the pages code and design views In the code section, find the <head> and </head> tags Between these two tags, type in the following code: <s t y le t y p e =te x t /c ss> <! - -

    . link s{font- f amily : Ar ial, H elvetic a, s ans-s er if ; font-size: 12px ; co lor : # 0 0 0 0 0 0) . link s:h over (font- f amily : Ar ial, H elvetic a, s ans-s er if ; font-size: 12px ; co lor : # 0 0 0 0 0 0; te x t- de cor ation: n on e} - -> < /s t y le>

    10. 11. 12. 13. 14. 15. 16. 17. 18.

    Once you place the rules in the code you will probably have to refresh the css panel to have the two new rules appear Select the text you wish to apply this style to and apply it using the dropdown list beside Style in the properties inspector, selecting links With the text still selected, enter the link in the Link field in the properties inspector Ensuring that the Style drop-down is open in the CSS panel, doubleclick on the .link listing to open the CSS Rule Definition panel Now you can get busy and play In the Text category, make any settings you wish In the Background category, set the colour you wish the button to display in its Up State In the Block category, set the Vertical Alignment to Middle In the Box category, set the Width and Height fields to whatever size you wish (my settings were 120px for Width, 18px for Height)

    CSS ButtonS

    Copyright - W. Mitchell

    19. 20. 21. 22.

    In the Block category, set the border if you wish one (my settings gave the button a black 1px border) Click Apply to view your settings, and if you are happy with them, select OK, and if you are not happy, go back and change what you wish Now double-click on the .link:hover listing to open this rule up in the CSS Rule Definition panel This style is for the Over State of the button and can be set to whatever you wish, but if you wish for the button to remain consistent between the states except for colour, then all of the settings made in the .link style should be set in the .link:hover style, changing the colours accordingly

    23. 24.

    Save your page and test it in the different browsers You can use these two styles to cause simple text links to change colour in the over state by simply not setting any colour in the Box or Background categories

    CSS ButtonS

    Copyright - W. Mitchell

    Вам также может понравиться