Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Técnicas e 
processos de 
produção 
Profº Ritielle Souza
Interface - Dreamweaver
Interface - Dreamweaver 
Modo código
Interface - Dreamweaver
Folhas de Estilo – Seletores 
de Classes 
Por meio dos seletores de classe, é possível 
configurar estilos diferentes no m...
Folhas de Estilo – Seletores 
de Classes 
Colocamos a estrutura do CSS dessa forma: 
.p1{ 
font-family:verdana; 
backgroun...
Folhas de Estilo – Seletores 
de Classes 
Colocamos a estrutura do CSS dessa forma: 
.p3{ 
font-family:arial; 
background-...
Folhas de Estilo – Seletor de 
id 
Ao contrário do seletor de classe, o seletor de id é 
aplicado a um único elemento, poi...
Folhas de Estilo – Seletor de 
id 
#p2{ 
font-family:arial; 
font-size:20px; 
color:blue; 
text-align:left; 
} 
No HTML, c...
Dimensionando elementos e 
margens 
Atributos Valores Definição 
height Auto, porcentagem ou 
o valor desejado 
Altura do ...
Mais sobre bordas 
 border-width:thin; 
 border-width:medium; 
 border-width:thick; 
 border-top-width:2px; 
 border-...
TABLELESS 
Tableless é o nome atribuído à metodologia de 
construção de sites sem o uso de tabelas. 
Utiliza-se o XHTML pa...
TABLELESS 
Camada absoluta 
Fica sobre a página, para determinar o 
posicionamento da camada absoluta é 
necessário atribu...
TABLELESS 
 z- index: empilhamento de 
camadas, você pode colocar uma 
camada em cima da outra. 
 Quanto maior o valor d...
TABLELESS 
#camada1{ 
position:absolute; 
top:100px; 
left:50px; 
width:170px; 
height:100px; 
background-color:#99ccff;
TABLELESS 
border:2px solid ccff99; 
font-style:italic; 
z-index:1; 
}
TABLELESS 
#camada2{ 
position:absolute; 
top:150px; 
left:100px; 
width:170px;
TABLELESS 
height:100px; 
background-color:red; 
border:2px solid yellow; 
text-align:center; 
font-weight:bold; 
color:wh...
TABLELESS 
font-style:italic; 
z-index:2; 
}
TABLELESS 
#camada3{ 
position:absolute; 
top:200px; 
left:250px; 
width:170px; 
height:100px;
TABLELESS 
text-align:center; 
font-weight:bold; 
color:white; 
font-style:italic; 
z-index:3; 
}
TABLELESS 
 Salve esse arquivo como 
camadas.css 
 Crie o arquivo 
exercício_camadas.html e 
coloque o código abaixo
TABLELESS 
<html> 
<head> 
<title>Camadas</title> 
<link rel="stylesheet" 
href="camadas.css" type="text/css"> 
</head> 
<...
TABLELESS 
<div id="camada1">CAMADA1</div> 
<div id="camada2">CAMADA2</div> 
<div id="camada3“>CAMADA3</div> 
</body> 
</h...
TABLELESS
Upcoming SlideShare
Loading in …5
×

Técnicas e processos - HTML / CSS - aula 5

274 views

Published on

Curso de Design, Anhanguera unidade Brigadeiro

Published in: Design
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Técnicas e processos - HTML / CSS - aula 5

  1. 1. Técnicas e processos de produção Profº Ritielle Souza
  2. 2. Interface - Dreamweaver
  3. 3. Interface - Dreamweaver Modo código
  4. 4. Interface - Dreamweaver
  5. 5. Folhas de Estilo – Seletores de Classes Por meio dos seletores de classe, é possível configurar estilos diferentes no mesmo elemento de um documento XHTML. Por exemplo, no mesmo documento teremos três tipos diferentes de formatação para o parágrafo. <p>
  6. 6. Folhas de Estilo – Seletores de Classes Colocamos a estrutura do CSS dessa forma: .p1{ font-family:verdana; background-color:#ffdead; color:gray; text-align:center; width:500px; } .p1{ font-family:verdana; background-color:#ffdead; color:blue; text-align:left; width:500px; }
  7. 7. Folhas de Estilo – Seletores de Classes Colocamos a estrutura do CSS dessa forma: .p3{ font-family:arial; background-color:#ffdead; color:red; text-align:center; width:500px; } No HTML deve ser colocado dentro da tag <p> e outra tag pode utilizar as mesmas características de uma classe <p class=“p1”>texto</p> <p class=“p2”>texto</p> <p class=“p3”>texto</p> <h2 class=“p1”>texto</p> <p class=“p2”> outro p com as características da classe p2</p>
  8. 8. Folhas de Estilo – Seletor de id Ao contrário do seletor de classe, o seletor de id é aplicado a um único elemento, pois os valores do atributo id não podem aparecer mais de uma vez em uma página. Colocamos a estrutura da Folha de Estilo dessa forma: #p1{ font-family:verdana; font-size:15px; color:red; text-align:center; }
  9. 9. Folhas de Estilo – Seletor de id #p2{ font-family:arial; font-size:20px; color:blue; text-align:left; } No HTML, chamamos o id da seguinte forma: <p id=“p1”> texto</p> <p id=“p2”>texto</p>
  10. 10. Dimensionando elementos e margens Atributos Valores Definição height Auto, porcentagem ou o valor desejado Altura do elemento width Altura, porcentagem ou valor desejado do comprimento Largura do elemento margin-top Valor desejado para a margem Margem superior do elemento margin-right Valor desejado para a margem Margem à direita do elemento margin-left Valor desejado para a margem Margem à esquerda elemento margin-bottom Valor desejado para a margem Margem inferior do elemento
  11. 11. Mais sobre bordas  border-width:thin;  border-width:medium;  border-width:thick;  border-top-width:2px;  border-right-width:3px;  border-bottom-width:4px;  border-left-width:5px;
  12. 12. TABLELESS Tableless é o nome atribuído à metodologia de construção de sites sem o uso de tabelas. Utiliza-se o XHTML para determinar a estrutura de dados e as folhas de estilo CSS para a formatação e exibição dos mesmos.
  13. 13. TABLELESS Camada absoluta Fica sobre a página, para determinar o posicionamento da camada absoluta é necessário atribuir o posicionamento absolute em position e as quatro propriedades cujo posicionamento é absoluto: bottom, top, left e right.
  14. 14. TABLELESS  z- index: empilhamento de camadas, você pode colocar uma camada em cima da outra.  Quanto maior o valor do atributo z-index, maior a prioridade de visualização do elemento.
  15. 15. TABLELESS #camada1{ position:absolute; top:100px; left:50px; width:170px; height:100px; background-color:#99ccff;
  16. 16. TABLELESS border:2px solid ccff99; font-style:italic; z-index:1; }
  17. 17. TABLELESS #camada2{ position:absolute; top:150px; left:100px; width:170px;
  18. 18. TABLELESS height:100px; background-color:red; border:2px solid yellow; text-align:center; font-weight:bold; color:white;
  19. 19. TABLELESS font-style:italic; z-index:2; }
  20. 20. TABLELESS #camada3{ position:absolute; top:200px; left:250px; width:170px; height:100px;
  21. 21. TABLELESS text-align:center; font-weight:bold; color:white; font-style:italic; z-index:3; }
  22. 22. TABLELESS  Salve esse arquivo como camadas.css  Crie o arquivo exercício_camadas.html e coloque o código abaixo
  23. 23. TABLELESS <html> <head> <title>Camadas</title> <link rel="stylesheet" href="camadas.css" type="text/css"> </head> <body>
  24. 24. TABLELESS <div id="camada1">CAMADA1</div> <div id="camada2">CAMADA2</div> <div id="camada3“>CAMADA3</div> </body> </html>
  25. 25. TABLELESS

×