Jump to content

Como formatar código HTML usando o Dreamweaver


Recommended Posts

  • 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 to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×
×
  • Create New...

Important Information

Terms of Use Privacy Policy Guidelines