1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Dreamweaver CS3 - Screen Size

Discussão em 'Web Development' iniciada por JasonWll, 12 de Fevereiro de 2009. (Respostas: 6; Visualizações: 1790)

  1. JasonWll

    JasonWll Power Member

    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
     
    Última edição pelo moderador: 13 de Fevereiro de 2009
  2. rdgomes

    rdgomes Power Member

    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>
    
     
    Última edição: 12 de Fevereiro de 2009
  3. JasonWll

    JasonWll Power Member

    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!
     
  4. rdgomes

    rdgomes Power Member

    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.
     
  5. JasonWll

    JasonWll Power Member

    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.
     
    Última edição pelo moderador: 16 de Fevereiro de 2009
  6. rdgomes

    rdgomes Power Member

    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.
     
  7. JasonWll

    JasonWll Power Member

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

Partilhar esta Página