Fundador 403 - Forbiddeen Postado Outubro 8, 2018 Fundador Compartilhar Postado Outubro 8, 2018 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é? Autor 403 - Forbiddeen Categoria HTML | CSS | Javascript Enviado 08-10-2018 13:21 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 More sharing options...
Posts Recomendados
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 contaEntrar
Já tem uma conta? Faça o login.
Entrar Agora