Recortando um layout

Bom galera.. para quem ainda naum sabe fatiar um layout..
achei um tutorial muito bom e disponibilizo ele para vcs..


1. Depois de fazer 1 layout (o nosso não é tão complicado) vamos fatiar, bom... primeiro você vai conhecer o nosso layout, ele foi feito unicamente para este tutorial, chamado de FW studio pois é o primeiro nome que veio em mente... click na imagem abaixo para ampliar




2. Então vamos recortar o nosso layout, claro que o seu não é igual ao nosso, mais dá para tirar uma idéia... primeiramente conheça a ferramenta fatia... ela é usada como se fosse um retângulo, você fará um retângulo com esta ferramenta, este retângulo ficará numa cor verde e ficará sobra o layout... isso significar que cada retângulo que você fizer, será 1 tabela e 1 imagem... se você fizer 1 retângulo, a parte do layout que estiver sobre este retângulo é o que vai ser de 1 imagem só .gif ou .jpg e no html será 1 tabela


ferramenta fatia


3. Bom.... como você já viu nosso layout, fique sabendo que se você quiser fazer um retângulo daquele para colocar 1 banner de parceria, faça um retângulo no tamanho de 474 X 66 dentro deste retângulo ficará um banner.... mais com essas medidas ele ficará mais bonito no encaixe.. ao contrário de se você usar medidas melhores...



4. Então.... Vamos à luta !!! Como você já sabe das medidas do retângulo em que ficará o banner... vamos começar por ele... crie 1 fatia no tamanho de 468x60 (é o tamanho oficial do banner de parceria) e coloque bem no centro do retângulo branco... então... quando exportarmos você irá colocar 1 banner alí dentro facilmente... agora nós aplicamos mais fatia por todo o topo até completar o topo inteiro....... veja na imagem abaixo





6. Acabamos o nosso topo... vamos fazer o Menu... existe várias formas.. eu sempre fiz da seguinte forma...

No menu inteiro... você vai fazer 1 só fatia..... do seguinte tamanho.... se o menu tiver 130 px de largura a fatia será 131 px de largura... veja o exemplo abaixo.. que server para os 2 menus...



7. observe que a altura da fatia do menu.. é a mesma altura da fatia do conteúdo....
onde vai se formar 1 tabela de 3 colunas e 1 linha...

8. A mesma coisa você fará com o rodapé... você fará 1 retângulo com a ferramenta fatia por cima do rodapé inteiro.. lembrando de que a fatia do rodapé deve passar por cima de uma parte de baixo do menu... veja na imagem abaixo:




9. Pronto... agora está prontinho... vamos exportar...


10. Pressione CTRL + SHIFT + Z para que abra a janela de exportar





11. No círculo 1 você irá escolher a extensões das imagem e tudo mais... se tiver muitos efeitos.. escolha .jpg se tiver poucos escolha .gif

No círculo 2 você vai escolher a qualidade das imagens.. se tiver muitos efeitos escolha 100 e vai variando se tiver poucos efeitos.. pois se você colcoar 100 de qualidade ficará mais pesado do que se você colocar 80 de qualidade... então coloque 100 se realmente precisar....

então dê OK


12. abrirá a janela da pasta conde você for exportar... lembrase-se de escolhar as seguintes opões no menu...




Na imagem acima você irá escolher o nome... no 1º menu.. escolha HTML e imagens no 2º menu escolha Exportar arquivo HTML no 3º menu escolha Exportar fatias e só.... agora é só escolher se você quer que as imagens fiquem em 1 pasta só para imagens.... então é só marcar a opção em baixo da janela...


Agora o arquivo HTML... e as imagens estão na pasta onde você indicou ao programa...



13. A parte da barrinha de baixo do topo, foi recortado em 1 só imagem, pois depois de exportar você fará a seguinte operação para determinar o link dos textos na barra:


A) Se eu programa é o DreamWeaver você irá selecionar a barrinha e depois clicar num dos 3 botões a seguir para fazer uma forma em volta do texto para determinar o link:




B) Se eu programa é o FrontPage você irá selecionar a barrinha e depois clicar num dos 3 botões a seguir para fazer uma forma em volta do texto para determinar o link:





Todos os direitos ao Autor Original: Ricardo Lemos