layouts Div são projetos para páginas da Web que incluem recipientes para o conteúdo da Web , tais como imagens , texto e links. Eles ajudam a manter uma aparência uniforme para páginas web. Adobe Photoshop de " Fatia Ferramenta " e "Salvar para Web e dispositivos " comandos permitem aos usuários criar um layout Div visualmente , adicionando elementos da página e , em seguida, criar recipientes diretamente no layout, em vez de usar código HTML e CSS ou depender de pré-fabricados layouts div, que também requerem conhecimento de código para personalizar . Coisas que você precisa
software Adobe Photoshop
Show Mais instruções
1

Abra o Photoshop e crie um novo documento Web , selecionando " File> New " no menu do aplicativo e definindo o "Preset" drop-down para "Web ". Defina suas dimensões desejadas para o seu layout nos campos " Largura " e " Altura " , ou selecionar um dos tamanhos de layout da Web padrão do "Tamanho" drop-down.
2

Adicione seu desejado visual imagens para o seu layout. Estes podem incluir imagens importadas usando o comando " File> Place" , formas, botões ou texto criado com o " Type Tool ".
3

Selecione a ferramenta " Slice" das Ferramentas Painel e corte cada elemento do seu layout , clicando e arrastando sobre ele com a ferramenta " Slice" selecionado. Criar fatias individuais para cada elemento de texto , botão, imagem ou linha. Estas fatias servirá como elementos Div em seu layout web.
4

Clique no menu " Arquivo" e selecione "Salvar para Web e dispositivos " para abrir a caixa de diálogo otimização , o que permitirá que você configure cada elemento do seu layout para que ele pode ser melhor visualizado na web. Ajuste as configurações para cada fatia criada clicando em cada individualmente usando o " Slice Select Tool " no canto superior esquerdo da caixa de diálogo , e mudando o formato , qualidade e de cor de acordo com as configurações do lado direito da caixa. Clique em "Salvar " quando você tem otimizado cada fatia com suas preferências.
5

Nomeie o arquivo layout e selecione um local para que os campos indicados do " Save Optimized como" caixa de diálogo. Altere o "Format" drop-down "HTML e imagens" e certifique-se as "Configurações" e "fatias" drop-downs são definidas para " Default Settings " e " Todos os Slices ", respectivamente . Clique em " Salvar". O layout está agora pronto para ser aberto em um Web- editor como o Dreamweaver, onde você pode adicionar links e comportamentos para as seções Div você criou com a ferramenta " Slice ".