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

c|_|

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

fbb235.jpg


Obviamente que a página estará centrada (mas isso eu sei fazer)
Alguem me pode dar aqui uma iniciaçãozinha?
 
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
 
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...

fbb235.jpg


Obviamente que a página estará centrada (mas isso eu sei fazer)
Alguem me pode dar aqui uma iniciaçãozinha?

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.
 
15euros e não se fala mais nisso...:)
Agora a sério experimenta isto(faz copy past directamente p/dreamwaver)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A minha pagina</title>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

td {
font-family: Arial, Helvetica, sans-serif;
}

th {
font-family: Arial, Helvetica, sans-serif;
}
.style1 {font-size: 2em; color:#FFFFFF;}

#wrapper{ width:85%;
margin:auto;
}

#header{ width:100%;

}
#content{ width:100%;

}

#imagem1 {
width: 20%;
background: #000066;
color:#FFFFFF;
float:left;
}
#imagem2 {
width: 80%;
background: #000066;
color:#339933;
float: right;
}

#menu {
width: 20%;
float:left;
background:#0000CC;
}
#texto {
float:right;
width: 80%;
background:#999999;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<div class="style1" id="imagem1">IMAGEM 1</div>
<div class="style1" id="imagem2">IMAGEM 2</div>
</div>

<div id="content">
<div id="menu">
<p>MENU</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="texto">
<p>Texto</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
</div>
</body>
</html>

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 :)
 
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... =)
 
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>
 
Back
Topo