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

n00b total! Site de Teste para a escola...

Discussão em 'Web Development' iniciada por c|_|, 30 de Janeiro de 2009. (Respostas: 6; Visualizações: 983)

  1. c|_|

    c|_| Power Member

    Bom dia, tenho uma dúvida, utilizando o dreamweaver MX, como poderei criar um "template" mais ou menos com este layout que fiz no Paint...

    [​IMG]

    Obviamente que a página estará centrada (mas isso eu sei fazer)
    Alguem me pode dar aqui uma iniciaçãozinha?
     
  2. Bem, antes de mais bom dia.

    Confesso que tambem nao tenho muitas bases desse tipo de areas, mas o conselho que lhe dou, corrijam-me se estiver enganado, é criares tabelas.

    Cria primeiro uma tabela para a primeira imagem (canto superior direito a azul)
    De seguida cria outra para a imagem que está por cima na pagina (a verde)
    E depois disto, crias uma para os Menus (azul claro) e outro para o corpo do texto.

    Depois crias ficheiros a parte como as imagens, os menus, e chamas com o action, (<form action="NOME_IMAGEM.jpg"></form>)

    Assim, na minha opiniao, se depois quiseres desenvolver mais o site, torna melhor e mais rápido, devido a precisares apenas de actualizar por exemplo o Corpo do Site, nao prexixando de actualizar as imagens e exas cenas...

    Com a experiencia que tenho (que infelizmente ainda é pouca) acho que é uma opçao a tomar...

    Mas, espera por mais ideias, pode ser que alguem tenha um metodo melhor,

    Espero ter sido util.
    Saudaçoes, redy
     
  3. c|_|

    c|_| Power Member

    Muito obrigado Redy, pelo menos até agora tudo bem... :009:
    Hum... Querias dizer "Superior Esquerdo" correcto?
     
  4. geoblast

    geoblast Power Member

    Primeiro, vais ao famoso w3schools.com para melhor entenderes o html, css e javascript.

    Depois, olhas para o teu layout e defines, no papel, quais as áreas estruturais que existem no teu site (header, footer, menu, contentHolder, etc.). Ao realizares esta definição, será mais simples para ti criares no dreamweaver o teu layout, seja com recurso a divs ou com recurso a tables.

    Depressa compreenderás que existem muitos elementos do design que irão ser definido por css, como os tipos de letra, cores, e outros que tais.

    Por fim, de acordo com a esquematização que fizeste, deves transformar o teu template em gif's ou jpeg's, cortares de acordo com o teu layout e aplicar no site.
     
  5. unsilent

    unsilent Power Member

    15euros e não se fala mais nisso...:)
    Agora a sério experimenta isto(faz copy past directamente p/dreamwaver)
    Isto o exemplo mais simples de uma liquid css. Não sei para que disciplina é estas a fazer nem se tens interesse em web design mas acredita que se quiseres mesmo aprender mais vale começar pelo css-tabelas é coisa do passado(apesar de úteis).
    Basicamente o que esta dentro da tag <style> é a css, ai podes definir os atributos dos elementos- no dreamweaver aparecem-te automaticamente nem tens que os saber de cor.
    Tenta perceber a hierarquia das <div>'s, põe o dreamweaver na opção split, para poderes ver o código e o design, e vai carregando nas div's para veres a que parte do código correspondem. Brinca com os atributos para ver os efeitos.
    O W3 é o melhor site mas pode intimidar, experimenta primeiro uns tutoriais mais light :)
     
  6. Razziel

    Razziel Power Member

    Não sei se te das com o photoshop, mas a maneira mais "rapida" e facilitada de fazer um site usando o PS, é criares o grafismo todo la, usares slices para cortares a imagem como queres que apareça no site (botão a botão, banner, zona de conteúdos, etc) e fazer "export for the web".
    Automaticamente é-te criado o ficheiro html com tabelas exactamente como cortaste em slices no PS, e tens tudo direitinho, ja ordenado...

    Depois, quanto à linkagem, procura no google "iFrame"... É uma tecnica ... "pouco ortodoxa"... mas simples, para carregares nos botões, e so alterar a parte dedicada aos conteúdos, mantendo o resto da pagina intacta...


    De qualquer maneira, se pretendes mesmo aprender html, CSS e por aí fora, é mesmo melhor seguires o que foi dito ate agora... truques a contornar os problemas nunca fizeram ninguém aprender... =)
     
  7. mazinhu

    mazinhu Power Member

    tenta utilizar tabelas para organizar o esquema.
    tipo assim
    Código:
    <head>
    <title>Minha Pagina</title>
    </head>
    <body>
    <table>
     <tr>
      <td>
       <table>
        <tr>
         <td>imagem</td>
        </tr>
       </table>
      </td>
      <td>
       <table>
        <tr>
         <td>imagem</td>
        </tr>
       </table>
      </td>
     </tr>
     <tr>
      <td>
       <table>
        <tr>
         <td>menu</td>
        </tr>
        <tr>
         <td>menu</td>
        </tr>
        <tr>
         <td>menu</td>
        </tr>
       </table>
      </td>
      <td><!-- Aqui fica um iframe como opçao para mostrar o texto! --><iframe>texto</iframe></td>
     <tr>
    </table>
    </body>
    </html> 
    
     

Partilhar esta Página