Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Webdesigner Tem Que Dominar CSS

    Enviado por

    api-3771284
    99 visualizações2 páginas

    Título original

    Webdesigner tem que dominar CSS

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOC, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    99 visualizações2 páginas

    Webdesigner Tem Que Dominar CSS

    Enviado por

    api-3771284

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 2

    Webdesigner tem que dominar

    CSS
    Autor: Frederick van Amstel

    Pare! Pare tudo o que você está fazendo agora. Você já manja de CSS? Não estou falando daquele
    painel do Dreamweaver, estou falando dos recursos que o CSS oferece. Cheguei a conclusão de
    que todo designer de interface Web tem que saber codificar um bom XHTML na mão. Esse negócio
    de fazer o layout no Photoshop e entregar ao programador é coisa de webdesigner capenga.

    Sabe porque? Simplesmente porque há diversas decisões do design que acontecem durante a
    codificação. Não existe ainda uma ferramenta WYSIWYG que agilize tanto a criação de XHTML a
    ponto de dispensar o Photoshop ou o Flash para esboçar o layout. Então, o layout deve ser criado
    primeiro e codificado depois. No entanto, quando esse layout vai ser implementado em CSS,
    algumas adaptações tem que ser feitas para acatar as restrições. Detalhes como área de ação,
    efeitos rollover e otimização de arquivos são todos decididos nesse momento e isso é tarefa de
    designer.

    Talvez você esteja com duas dúvidas: e esse Flash de que você fala tanto? E o Dreamweaver não
    quebra o galho? Primeiro, Flash tem suas aplicações mas com certeza disponibilizar textos não é
    uma delas. E Web ainda é 90% texto. Dreamweaver faz um bom layout baseado em tabelas, mas
    mesmo na versão 2004 ainda tem que melhorar muito para rendereizar um layout baseado em
    CSS position e float. Ah, você não sabe o que é isso? Então nem adiantaria tentar usar o
    Dreamweaver, porque ele vai te exigir saber CSS de cor do mesmo jeito. Trate de aprender
    urgente.

    Não é nada complicado. Aliás se você pudesse esquecer tudo o que sabe sobre o arcaico HTML 4,
    veria que XHTML com CSS é tão fácil que editar código na mão é moleza (ainda mais usando o
    TopStyle). Não é aquele bixo de sete cabeças como é o HTML4. Para criar um layout de três
    colunas basta o seguinte código:

    <div id="coluna1" style="float:left; width: 180px;">Olá</div>


    <div id="coluna2" style="float:left; width: 400px;">tudo</div>
    <div id="coluna3" style="float:left; width: 180px;">bem?</div>

    Lembra quantas linhas eram necessárias para fazer isso usando tabelas? Essa tag div aí é análoga
    as caixas do Pagemaker e do Corel Draw. Olha só, dá pra fazer melhor ainda:

    <html><style type="text/css">
    .colunalateral { float:left; width: 180px; }
    #colunacentral { float:left; width: 400px; }
    </style><body>
    <div class="colunalateral">Olá</div>
    <div id="colunacentral">tudo</div>
    <div class="colunalateral">bem?</div>
    </body></html>

    Opa! Acho que você já pegou quais são as duas grandes vantagens do CSS: separação entre
    formatação e conteúdo (e consequente facilidade para atualização) e diminuição drástica no
    tamanho do código. Se você pegar aquelas linhas dentro da tag style e colocar num arquivo
    externo e carregar em cada página com esse código: <link rel="stylesheet"
    href="estilos.css" type="text/css" /> você controla o layout de todas as páginas de
    um site com um só arquivo. Genial, não? Melhor ainda para seu usuário que só vai precisar baixar
    isso para uma página fictícia (note como só com o código é possível entender a página):

    <body>
    <h1><img src="logo.gif" alt="Tabajara design" /></h1>
    <p>Nós temos o melhor design do mundo, aquele que pode ser visto por
    qualquer pessoa em qualquer lugar. <strong>Ubiquidade</strong> é nosso
    codinome.</p>

    <div id="destaques">
    <h2>Você vai gostar...</h2>
    <p><img src="foto_paisagem_nuvens.jpg" alt="Fique tranquilo, deixe o
    trabalho com a gente" /> Garantia de <a href="prazo.html">conclusão no
    prazo</a> determinado</p>
    <p><img src="mao_apontando.jpg" alt="Não fique aí parado, contrate-nos
    já!" /> Você foi escolhido para ser o nosso cliente, saiba <a
    href="porque.html">porque</a></p>
    </div>
    </body>

    Os estilos que estão no arquivo externo é quem faz o posicionamento dos elementos, as cores, as
    imagens de fundo e etc. Agora imagine se o usuário não pode ver a página diagramada, como na
    ocasião de usar um Palm que tem uma tela de 120x120 pixels ou usando um leitor de tela? Sem
    problemas, mesmo ignorando os estilos, a página continua completamente usável, um luxo
    inatingível usando tabelas.

    Agora minha última cartada para te convencer: sim, os browsers atuais são compatíveis com essa
    codificação. Se você tiver saco de lidar com algumas pequenas diferenças de renderização, seu
    website vai ficar igual nos browsers Internet Explorer 5+, Mozilla, Opera 7+ e virtualmente
    qualquer browser que possa vir a surgir. Como eu garanto? Simplesmente porque você está
    fazendo aquilo que está oficializado pelo W3C como sendo o padrão de mercado.

    Por falar em mercado, que tal ganhar algum dinheiro com isso? Diga aos seus clientes que você
    domina técnicas que podem jogar os websites deles lá pra cima na listagem do Google. "Imagine
    digitar o ramo que sua empresa atua e ver ela em primeiro lugar?" Provoque, mexa nos egos
    deles. Se você conseguir convencê-lo não será difícil cumprir a promessa. Basta escrever um
    código bem esperto, semântico.

    Opa, qual o significado dessa palavra? Significado, oras! Lembra da tag <h1> que a gente nunca
    usava naqueles tempos de HTML 4 porque ficava muito grande? Pois o conteúdo que estiver
    dentro dela é interpretado pelo Google como sendo um título, ou seja, coisa importante. Escreva
    um título gostoso de ler, com uma palavra-chave legal no meio e pronto! Mais um pontinho no
    ranking dos buscadores. Não, o seu h1 não vai ficar grande se você colocar isso no CSS: h1
    { font-size: 100%; }. Conheça bem as tags semânticas do XHTML e as formatações que o
    CSS possibilita e arrase.

    Fonte: http://www.flashmasters.com.br/?site=artigos&as=mostra&id=48

    Você também pode gostar