Aula 03 – HTML, CSS e photoshop

Apresentação em tema: "Aula 03 – HTML, CSS e photoshop"— Transcrição da apresentação:

1 Aula 03 – HTML, CSS e photoshop
Construção Web Design Aula 03 – HTML, CSS e photoshop

2 CSS – Arquivo separado <link href="css/style.css" rel="stylesheet" type="text/css" /> O HTML fica mais limpo e organizado;

3 CSS: Class e ID DIV CLASS HTML: <div id=“topo”></div>
CSS: #topo { ... } CLASS HTML: <div class=“topo”></div> CSS: .topo { ... }

4 CSS: Class e ID Quando usar? Exemplo
Quando o HTML obedece uma hierarquia. Exemplo HTML: <div id=“topo”> <div class=“logo”><img src=“logo.jpg” /></div> <div class=“menu”></div> </div> CSS: #topo { ... } #topo .logo{...} #topo .menu{...}

5 CSS: Class e ID Outro exemplo HTML: <div id=“conteudo”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque libero quam, <span class=“titulo”>dignissim ut gravida </span>at, imperdiet in arcu. Nulla dolor augue, rhoncus interdum pharetra a, pharetra eget. <span class=“detalhe”>Nullam porta</span>tincidunt sollicitudin. Aliquam erat volutpat. Vestibulum et nisi tellus, placerat mattis tellus. </div> CSS: #conteudo{ ... } #conteudo .titulo{...} #conteudo .detalhe{...}

6 Tabelas <table> </table> <tr> </tr>
<td></td> </tr> </table>

7 Tabelas Propriedades: Width=“100%” ou “250px” border=“1”
cellpadding=“2” cellspacing=“2” bgcolor=“red” Bordercolor=“blue”

8 Imagens - Photoshop CSS: Background: url(caminho) repeat-x;

9 Atividade