Wie man eine CSS Sprite Navigation Bar Design

Mitglieder-Login

InformationenComputer Programming Languages

Wie man eine List Box in einem HTA … Sie brauchen nicht Jahre Programmiererfahrung lernen, wie man ein Listenfeld zu einer HTA hinzuzufüg
Wie Sie das Symbol in LaTeX Daher v… LaTeX ist ein Satz in der Sprache TeX -Programm verwendet . Mit LaTeX , können Sie erstellen und ges
Wie Tile eine Hintergrund in HTML Wenn Sie eine Website in HTML zu entwickeln , können Sie zum Einrichten eines Hintergrundbildes , di
Visual Basic Vs. Fortran Die Programmiersprache Fortran , die Abkürzung für Formula Translation , war eine der ersten jemals

Programming

HOME

* Computer Wissen >> Programming >> Computer Programming Languages >> .

Wie man eine CSS Sprite Navigation Bar Design

CSS Sprites können Web-Entwickler die Geschwindigkeit erhöhen , mit der die Website Belastungen durch Verwendung einer einzigen Bilddatei , die mehrere Grafiken enthält . Eine Navigationsleiste kann als ein einzelnes Bild , wenn die Web Seite gerendert wird geladen , aber immer noch enthalten einzelne Bilder, die bearbeitet und gestaltet auf eigene Faust kann in der Navigationsleiste. Der Web-Browser muss nur ein Bild herunterzuladen, anstatt von mehreren Bildern , die jeweils würde die Navigationselemente in der Navigationsleiste. Things You
Adobe Photoshop Kunst-Text -Editor-Anwendung
brauchen anzeigen Weitere Anweisungen
1

Starten Sie Adobe Photoshop und öffnen Sie die Bilddatei, die Sie entworfen zu sein habe verwendet, wie die Website der Navigationsleiste. Sie müssen diese Datei verweisen , um Pixelbreiten bestimmen , wie Sie auf zu schreiben, den CSS-Code , die definieren, wie die Navigationsleiste verwendet wird gehen .
2

Starten Sie einen Texteditor und öffnen Sie dann die CSS-Datei für die Webseite Erhalt der Sprite Navigationsleiste. Wenn Sie nicht über eine Spezialität Codierung Programm zur Hand , können Sie in Microsoft Windows Notepad oder TextEdit verwenden in Mac OS X.
3

Zurück zum Bild in Photoshop und wählen Sie " ; Bild " aus der Liste der verfügbaren Optionen an der Spitze des Photoshop Anwendungsfenster. Wählen Sie "Eigenschaften " und notieren Sie die Höhe und Breite der Navigationsleiste Bild als in Pixel definiert. Der CSS-Code verwenden diese pixel Definitionen .
4

zurück zur CSS-Datei im Text -Editor und fügen Sie den folgenden Code . Ändern Sie die Höhe, Breite, Name der Bilddatei und Marge Werte auf die Größe und Spezifikationen des Bildes entsprechen

* { margin: 0px ; padding: 0px ;} . # Nav {background : url ( navbarsprite.png ) , Höhe : 35px ; width: 800px ; margin: 0 auto; # nav span { display: none; }
5

geben Sie in der Navigationsleiste eine angemessene Orientierung auf Ihrer Seite , indem Sie die folgenden Zeilen CSS-Code und sie sie in Ihrer CSS-Dokument :

# nav li {list- style-type : none; float: left; } # nav a {height : 38px ; display: block; }

6

Klicken Sie auf "Ansicht" in Photoshop , dann " Lineale hinzufügen ", um eine Reihe von on-Screen- Regeln auf die Fenster, in dem Sie Ihre Navigationsleiste Bild erscheint hinzuzufügen. Zoom in auf das Bild, und messen Sie die Breite der einzelnen Navigations- Knopf in Ihrer Navigationsleiste.
7

Fügen Sie den folgenden Code auf Ihre CSS -Datei, über die einzelnen Pixel Messungen der einzelnen Elemente. Zum Beispiel:

# list1 {width: 110px ; } # list2 {width: 110px ; } # list3 {width: 125px ; } # list4 {width: 123px ; } # list5 {width: 131px ;}
8

Speichern Sie die modifizierte CSS-Datei und laden Sie sie und die Navigationsleiste Bild auf Ihrem Web -Server zu beginnen mit es in der Website- Produktionsumgebung.