Arquivos para o mês: outubro, 2009

Exemplo com posicionamento (aula 28/10)

28 outubro, 2009 (20:54) | Sem categoria | Por: admin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#im2 {
position: relative;
left: 300px;
top: 30px;
}
#im3 {
position: absolute;
left: 0px;
top: 0px;
}
#im4 {
position: fixed;
right: 100px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>Posicionamento Estático</h1>
<img id="im1" src="http://www.pucpr.br/gerenciador/imagens_noticias/6345_c.jpg">

<h1>Posicionamento Relativo</h1>
<img id="im2" src="http://www.pucpr.br/gerenciador/imagens_noticias/6326_c.bmp">

<h1>Posicionamento Absoluto</h1>
<img id="im3" src="http://www.pucpr.br/gerenciador/imagens_noticias/6310_c.jpg">

<h1>Posicionamento Fixo</h1>
<img id="im4" src="http://www.pucpr.br/images/banner_intercambio0.jpg">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo [...]

Layout gerado na aula de 28/10

28 outubro, 2009 (20:41) | Sem categoria | Por: admin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#cabecalho {
background-color: red;
border: 1px solid black;
}
#lateral {
background-color: blue;
border: 1px solid black;
float: left;
width: 30%;
min-height: 200px;
}
#conteudo {
background-color: yellow;
border: 1px solid black;
float: right;
width: 68%;
min-height: 200px;
}
#rodape {
background-color: green;
border: 1px solid black;
clear: both;
}
#container {
width:  640px;
margin: 0 auto;
}
</style>

</head>
<body>
<div id="container">
<div id="cabecalho">
<h1>Site do Jamanta</h1>
</div>
<div id="lateral">
<ul>
<li>Home</li>
<li>…</li>
</ul>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing [...]

Exemplos mostrados na aula de 27/10

27 outubro, 2009 (19:20) | Sem categoria | Por: admin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container {
background-color: #ccc;
border: 1px solid black;
margin: 10px;
}
.imgFloat {
float: left;
}
.spacer {
clear: left;
}
</style>
</head>
<body>
<div id="container">
<h1>Eu</h1>
<img src="eu.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div></div>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#cabecalho {
background-color: red;
border: 1px solid black;
}
#lateral {
background-color: blue;
border: 1px solid black;
width: 39%;
float: left;
min-height: [...]

Exercício O07 – Posicionamento CSS

27 outubro, 2009 (18:53) | exercícios | Por: admin

Este é um exercício que aumentará nas próximas semanas. Segue sua especificação inicial no formato do item O07.
Selecione um site de notícias qualquer / blog ou similar.
Recrie a página inicial deste site apenas usando o que aprendeu na aula sobre posicionamento CSS e seus conhecimentos anteriores.
Em sua interface você deve apresentar:

as notícias apresentadas em um [...]

Posicionamento de elementos em CSS

27 outubro, 2009 (14:20) | aulas | Por: admin

Nas próximas 3 semanas, descansamos um pouco de nosso trabalho com a linguagem JavaScript.
Voltamos hoje a nosso último tópico referente a CSS: como posicionar nossos layouts.

Defesa dos trabalhos F11 e F12

6 outubro, 2009 (19:05) | aulas | Por: admin

Pessoal,
Os exercícios não precisam ser entregues.
Serão cobrados APENAS no dia da defesa: 20 e 21/10/2009.
Não há entrega posterior do exercício!
Lembre-se: no máximo duplas.