Dreamweaver CS3 - Screen Size

JasonWll · 12 de Fevereiro de 2009

Boas ppl..

Estou a construir uma web page em Dreamweaver CS3 que na verdade não é mais que apenas a front page do site uma vez que o site com todo o seu conteúdo é uma pop-up window em flash.

A dita front page é muito simples, contem apenas o nome/logo da empresa e indicações do tipo ‘Please allow pop-up windows in your browser.’ e ‘This site requires the Flash 8 plug-in. Click here to download the latest version of Flash.’, etc. … tudo isto na parte superior do ecrã. No canto inferior esquerdo deverá aparecer a indicação do copyright.

A questão é a seguinte:
Como é que eu consigo que a parte do copyright se ajuste às dimensões do ecrã?
Ou seja, o painel superior que tem menos de 400px (com o logo, etc.) não ocupa mais de metade do ecrã (mesmo num laptop de 15”) e estará sempre ‘colado’ á parte de cima do ecrã (lógico!) mas o copyright deve estar sempre a uma determinada distancia do fundo da página, independentemente do tamanho do ecrã do utilizador, seja ele de 15” ou de 24” …

Basicamente o que eu quero fazer é igual ao que acontece neste site - www.rex-ny.com - em que este texto:

LEGAL NOTICES | PRIVACY POLICY
© 2009 REX

aparece sempre ‘colado’ ao fundo do browser independentemente de estar num ecrã de 13” ou 24” …

Já fui ao fundo do Google (o que quer que seja que isto signifique!) e nada… espero que algum dreamweaver expert me possa ajudar, porque eu não queria alterar o layout nem por nada!

Thanks

rdgomes · 12 de Fevereiro de 2009

Código:

<html>
<head>
<title>teste</title>

<style>
html, body {
margin:0;
padding:0;
height:100%;
} 
#topo
{
    background-color:#FF0000;
    position:absolute;
    top:0;
    width:100%;
    height:300px
}
#fundo
{
    background-color:#006600;
    [B]position:absolute;[/B]
    [B]bottom:0;[/B]
    width:100px;
    
}
</style>

</head>

<body>
<div id="topo">Aqui o topo</div>
<div id="fundo">Aqui o fundo</div>
</body>
</html>

JasonWll · 13 de Fevereiro de 2009

rdgomes disse:

Código:

<html>
<head>
<title>teste</title>
 
<style>
html, body {
margin:0;
padding:0;
height:100%;
} 
#topo
{
    background-color:#FF0000;
    position:absolute;
    top:0;
    width:100%;
    height:300px
}
#fundo
{
    background-color:#006600;
    [B]position:absolute;[/B]
    [B]bottom:0;[/B]
    width:100px;
 
}
</style>
 
</head>
 
<body>
<div id="topo">Aqui o topo</div>
<div id="fundo">Aqui o fundo</div>
</body>
</html>

Antes de mais obrigado pela resposta que, sendo tão 'directa', imagino que seja exactamente aquilo que eu procuro...

Mas os meus conhecimentos de Dreamweaver são um pouco basicos (resumem-se a Lynda.com Dreamweaver CS3 Essential Training e pouco mais!) e ainda mais basicos no que respeita a code! Pode-me explicar, sumáriamente, o code para eu saber como o inserir correctamente?

Thanks!

rdgomes · 13 de Fevereiro de 2009

Para te explicar isto tens de me dizer com exactidão quais são os teus conhecimentos em html/css e o que não compreendes no código que te enviei. Cumps.

JasonWll · 14 de Fevereiro de 2009

rdgomes disse:
Para te explicar isto tens de me dizer com exactidão quais são os teus conhecimentos em html/css e o que não compreendes no código que te enviei. Cumps.

Os meus conhecimentos de html/css são basicos e como tal não me permitem entrar no code e alterar muita coisa manualmente... Já o fiz uma vez (sem saber muito bem o que estava a fazer!) e consegui concretizar o objectivo pretendido, mas não posso dizer que perceba grande coisa de html code, bem pelo contrário!

Para que perceba melhor o caso que descrevi vou transcrever aqui o code:

Código:

[COLOR=red]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[/COLOR][URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"][COLOR=red]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/COLOR][/URL][COLOR=red]">[/COLOR]
[COLOR=red]<html xmlns="[/COLOR][URL="http://www.w3.org/1999/xhtml"][COLOR=red]http://www.w3.org/1999/xhtml[/COLOR][/URL][COLOR=red]">[/COLOR]
[COLOR=red]<head>[/COLOR]
[COLOR=red]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />[/COLOR]
[COLOR=red]<title>JASON WANDELL</title>[/COLOR]
[COLOR=red]<style type="text/css">[/COLOR]
[COLOR=red]<!--[/COLOR]
[COLOR=red]body,td {[/COLOR]
[COLOR=red]font-family: Arial;[/COLOR]
[COLOR=red]font-size: 10px;[/COLOR]
[COLOR=red]color: #000000;[/COLOR]
[COLOR=red]line-height: 13px;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:link {[/COLOR]
[COLOR=red]color: #000000;[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:visited {[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]color: #000000;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:hover {[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]color: #000000;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:active {[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]color: #000000;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red].JASON WANDELL_LOGO {[/COLOR]
[COLOR=red]background-color: #000000;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:link {[/COLOR]
[COLOR=red]color: #FFFFFF;[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:visited {[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]color: #FFFFFF;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:hover {[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]color: #FFFFFF;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red]a:active {[/COLOR]
[COLOR=red]text-decoration: none;[/COLOR]
[COLOR=red]color: #FFFFFF;[/COLOR]
[COLOR=red]}[/COLOR]
[COLOR=red].style2 {background-color: #000000; color: #FFFFFF; }[/COLOR]
[COLOR=red].style3 {color: #000000}[/COLOR]
[COLOR=red]-->[/COLOR]
[COLOR=red]</style>[/COLOR]
[COLOR=red]</head>[/COLOR]
[COLOR=red]<body>[/COLOR]
[COLOR=red]<p align="left"><br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]</p>[/COLOR]
[COLOR=red]<p align="center"><span class="style2"><a href="[/COLOR][URL="http://www.adobe.com/products/flashplayer/%22%3E%3Cspan"][COLOR=red]http://www.adobe.com/products/flashplayer/"><span[/COLOR][/URL][COLOR=red] class="style3">_</span>JASON WANDELL<span class="style3">_</span></a></span><br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]Please allow pop-up windows in your browser.<br />[/COLOR]
[COLOR=red]This site requires the Flash 9 plug-in. Click <a href="[/COLOR][URL="http://www.adobe.com/products/flashplayer/%22%3E%3Cspan"][COLOR=red]http://www.adobe.com/products/flashplayer/"><span[/COLOR][/URL][COLOR=red] class="style3">here</span></a> to download the latest version of Flash.</p>[/COLOR]
[COLOR=red]<p><br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]<br />[/COLOR]
[COLOR=red]© 2009 JASON WANDELL. All rights reserved.</p>[/COLOR]
[COLOR=red]</body>[/COLOR]
[COLOR=red]</html>[/COLOR]

Isto, é o que a página deverá parecer num ecrâ de 15", como o do meu laptop.
O que eu queria era evitar de ter de inserir linhas para 'colar' a indicação do copyright ao fundo da página.

rdgomes · 14 de Fevereiro de 2009

Penso que seja +/- isto:

Código:

<html>
<head>
<title>teste</title>
 
<style>
html, body {
margin:0;
padding:0;
height:100%;

font-family: Arial;
font-size: 10px;
color: #000000;
line-height: 13px;
} 
#topo
{
    
    position:absolute;
    top:200px;
    width:100%;
}
#fundo
{
    position:absolute;
    bottom:20px;
    left:8px;
 
}

a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
.JASON WANDELL_LOGO {
background-color: #000000;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style2 {background-color: #000000; color: #FFFFFF; }
.style3 {color: #000000}
</style>
 
</head>
 
<body>
<div id="topo" align="center">
    <span class="style2"><a href="http://www.adobe.com/products/flashplayer/"><span class="style3">_</span>JASON WANDELL<span class="style3">_</span></a></span><br />
    <br />
    Please allow pop-up windows in your browser.<br />
    This site requires the Flash 9 plug-in. Click <a href="http://www.adobe.com/products/flashplayer/"><span class="style3">here</span></a> to download the latest version of Flash.
</div>

<div id="fundo">
    © 2009 JASON WANDELL. All rights reserved.</p>
</div>
</body>
</html>

Resumidamente, tens de criar 2 divisões (div's), uma que fica com o logo e informação relativa ao flash e o outra com a indicação do copyright. Na 1ª indicas a distância em relação ao topo da página (ex. top:200px) e na 2ª a distância em relação ao fundo (bottom:20px) e em relação à esquerda (left:8px).
Penso que é facil de perceber.

PS: Não sei como se faz para a 1ª divisão fique verticamente centrada. É uma questão de googlares.

JasonWll · 14 de Fevereiro de 2009

Yep, percebi.
E funciona na perfeição!!!
Thank you very, very much.

Dreamweaver CS3 - Screen Size

JasonWll

Power Member

rdgomes

Power Member

JasonWll

Power Member

rdgomes

Power Member

JasonWll

Power Member

rdgomes

Power Member

JasonWll

Power Member