Ako navrhnúť CSS Sprite navigačný panel

CSS sprites môže pomôcť Weboví vývojári zvýšiť rýchlosť , pri ktorej ich webové stránky načíta pomocou jediného image súbor , ktorý obsahuje viac grafiky . Navigačný panel je možné načítať ako jeden obraz , keď je webová stránka vykreslenie , ale stále obsahujú jednotlivé obrázky , ktoré môžu byť editované a štylizované na vlastnú päsť v navigačnom paneli . Webový prehliadač má iba stiahnuť jeden obrázok namiesto niekoľkých obrázkov , ktoré by každý predstavujú navigačné prvky v navigačnom paneli . Veci , ktoré budete potrebovať
Adobe Photoshop
Textový editor aplikácie
Zobraziť ďalšie inštrukcie Cestuj 1

Spustite Adobe Photoshop a otvorte súbor s obrázkom , že ste navrhnutý tak , aby sa používa ako webové stránky navigačnej lište . Budete musieť odkazovať na tento súbor , ktorý chcete určiť šírku v obrazových bodoch , zatiaľ čo vy idete k vypísať CSS kód , ktorý bude definovať , ako sa používa panel navigácie .
2

Spustite aplikáciu textového editora a potom otvorte súbor CSS pre webové stránky , ktorý je príjemcom sprite navigačný panel . Ak nemáte kódovacie program , špeciality na ruky , môžete použiť Poznámkový blok v systéme Microsoft Windows alebo TextEdit v systéme Mac OS X.
3

Vykonať späť na obrázku vo Photoshope a zvoľte " , Image " zo zoznamu dostupných možností v hornej časti okna aplikácie Photoshop . Zvoľte " Vlastnosti " a vziať na vedomie výšky a šírky Vášho navigačného baru obrázka , ako je definované v pixeloch . CSS kód bude používať tieto definície obrazových bodov .
4

Späť na CSS súboru v textovom editore a pridajte nasledujúci kód . . Upravte výšku , šírku , názov súbor a hodnoty okrajov , aby zodpovedal veľkosti a špecifikácie vášho obrazu

* { margin : 0px ; padding : 0px ; } # nav { background : url ( navbarsprite.png ) , výška : 35px ; šírka : 800px ; margin : 0 auto ; # nav span { display : none ; }
5

Dajte navigačnom paneli príslušnú orientáciu na stránke pomocou nasledujúce riadky CSS kód a pridať ich do svojho CSS dokumentu :

# nav ak { list - style - type : nie je ; float : left ; } # nav a { výška : 38px ; display : block ; }

6

Kliknite na " Zobraziť " vo Photoshope , potom " Pridať pravítka " pridať súbor pravidiel na obrazovke okno , v ktorom sa objaví navigačná lišta image . Zväčšenie obrazu a zmerajte šírku každého navigačného tlačidla v navigačnom paneli .
7

Pridajte nasledujúci kód do súboru CSS , použitia jednotlivých meraní obrazových bodov každého prvku . Napríklad :

# Hárok1 { width : 110px ; } # zoznam2 { width : 110px ; } # Hárok3 { width : 125px ; } # list4 { width : 123px ; } # Zoznam 5 { width : 131px ; }
Stránka 8

Uložte upravený CSS súbor a nahrať ho a navigácia bar obrázok webového servera začať používať na webových stránkach v produkčnom prostredí .

• Predchádzajúca strana: Ako zverejniť do JSON v ColdFusion 
• Ďalšia strana: Výhody deklaratívneho programovanie