Ir para conteúdo

Como formatar código HTML usando o Dreamweaver


Posts Recomendados

  • Fundador

Como formatar código HTML usando o Dreamweaver


Na vida de um desenvolvedor visual FRONTEND é comum pegar códigos bem bagunçados sem formatação, ou seja - conteúdo escrito em uma linha só. Mas é fácil de resolver isso usando o DREAMWEAVER. Estou usando nesse exemplo a versão CS6 do software. Exemplo de código sem formatação: <div class="container" style="margin-top: 50px;"> <div class="sixteen columns"> <div class="homepage_content section clearfix image_with_text image-text--align-center"> <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div> <div class="seven columns content_column offset-by-one omega text-align--center"> <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1> <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3> <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br />MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p> </div> </div> </div> </div> Para realizar a formatação de forma automática é simples. Abra seu arquivo HTML no DREAMWEAVER e vá em COMMANDS > APPLY SOURCE FORMATTING. Esse é o resultado. <div class="container" style="margin-top: 50px;"> <div class="sixteen columns"> <div class="homepage_content section clearfix image_with_text image-text--align-center"> <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div> <div class="seven columns content_column offset-by-one omega text-align--center"> <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1> <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3> <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br /> MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p> </div> </div> </div> </div> Bem mais fácil de ler né?

 

Antes de perguntar, visite a Wiki GGames | Quer GCoins? Junte-se ao meu Clube

Junta-se ao Telegram Oficial do GGames, lá pode falar de tudo! | Clique aqui

 

Link para o comentário
Compartilhar em outros sites

  • Respostas 0
  • Criado
  • Última resposta

Mais Ativos no Tópico

Dias Populares

Mais Ativos no Tópico

Dias Populares

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
×
×
  • Criar Novo...

Informação Importante

Termos de Uso Política de Privacidade Regras