sprites CSS pode ajudar os desenvolvedores Web aumentar a velocidade com que as suas cargas site usando um único arquivo de imagem que contém vários gráficos. A barra de navegação pode carregar como uma única imagem quando a página Web é processado , mas ainda contêm imagens individuais que podem ser editados e estilo por conta própria dentro da barra de navegação . O navegador da Web só tem que baixar uma imagem , em vez de várias imagens que cada um representam os elementos de navegação na barra de navegação . Coisas que você precisa
Adobe Photoshop
aplicativo editor de texto
Show Mais instruções
1

Lançamento Adobe Photoshop e abrir o arquivo de imagem que você tenha projetado para ser utilizado como barra de navegação do site. Você vai precisar fazer referência a esse arquivo para determinar larguras de pixels que você vá a escrever o código CSS que vai definir a forma como a barra de navegação é utilizada.
2

lançar um aplicativo editor de texto e , em seguida, abrir o arquivo CSS para a página da Web que recebe a barra de navegação do sprite . Se você não tem um programa de codificação de especialidade na mão, você pode usar o bloco de notas no Microsoft Windows ou TextEdit no Mac OS X.
3

Volte para a imagem no Photoshop e selecione " ; imagem "na lista de opções disponíveis na parte superior da janela do aplicativo Photoshop. Selecione "Propriedades" e tomar nota da altura e largura da sua imagem da barra de navegação , tal como definido em pixels. O código CSS vai usar essas definições de pixels.
4

Retornar para o arquivo CSS no editor de texto e adicione o seguinte código. . Modificar a altura, a largura , o nome do arquivo de imagem e valores de margem para estar de acordo com o tamanho e as especificações da sua imagem

* {margin: 0px; padding: 0px; } # nav {background: url ( navbarsprite.png ), altura de 35px ; width: 800px ; margin: 0 auto; # nav espaço {display: none;}
5

Dê a barra de navegação de uma orientação adequada em sua página usando as seguintes linhas de código CSS e adicioná-los ao seu documento CSS:

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

6

Clique em " Exibir" no Photoshop, em seguida, em "Adicionar Rulers " para adicionar um conjunto de regras na tela para a janela na qual a imagem da barra de navegação aparece. Amplie a imagem e medir a largura de cada botão de navegação na barra de navegação.
7

Adicione o seguinte código ao seu arquivo CSS, usando as medidas de pixels individuais de cada elemento. Por exemplo :

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

8

Salve o arquivo CSS modificado e enviá-lo ea imagem da barra de navegação para o seu servidor web para começar a usá-lo em ambiente de produção do site.
< br >