tutorial para fazer homepage
- Autor do tópico Umek
- Data Início
keoshi
Power Member
Hey!
Tudo depende do que queres fazer... Queres fazer:
a) uma página simples e está o caso arrumado?
b) uma página bem estruturada, aprender com isso e, quem sabe, explorar mais essa área no futuro?
If a): Usa o dreamweaver, o google page creator ou um qualquer editor que tenha WYSIWYG, é o ideal para principiantes. Se fores aventureiro podes experimentar a fazer através do Photoshop com slices e exportação em XHTML+CSS. Em qualquer destes casos (o do photoshop também, atenção!) deves ter no final uma página estruturada com tabelas.
If b): lê algumas páginas sobre os básicos de XHTML e de CSS. Depois disso começa a ver sources de páginas como o csszengarden.com, saca uns templates do mollio.org, do oswd.org, etc. O importante nesta fase é ler, perceber e tentar reproduzir a tua versão. Deixo ainda aqui um tutorial sobre o básico de um layout por meio de CSS: http://www.subcide.com/tutorials/csslayout/
Vai por mim, o melhor é aprender aos poucos mas consolidar bem os conhecimentos, isto caso tenhas escolhido a 'porta' b
eheheh
boa sorte!
edit: ao contrário do que muitos dizem, layouts em tables não tem NADA a ver com layouts com divs. A tabela não foi inventada para estruturar designs, senão para apresentação de dados tabulares, apenas e só. Isto prende-se não só com o aspecto visual do site no pc de uma pessoa, mas encontrar o standard para toda a gama de ecrans (pcs, macs, telemóveis) mas também, muito importante, com a forma como alguém acede ao site (a.k.a.: acessibilidade).
Isto pode soar a tretas e mais tretas, mas não são, têm muito fundamento até Se bem que a 'web 2.0' é só um nome giro que encontraram para tornar tudo isto mais 'da moda', mas isso é para outro topic xD
Tudo depende do que queres fazer... Queres fazer:
a) uma página simples e está o caso arrumado?
b) uma página bem estruturada, aprender com isso e, quem sabe, explorar mais essa área no futuro?
If a): Usa o dreamweaver, o google page creator ou um qualquer editor que tenha WYSIWYG, é o ideal para principiantes. Se fores aventureiro podes experimentar a fazer através do Photoshop com slices e exportação em XHTML+CSS. Em qualquer destes casos (o do photoshop também, atenção!) deves ter no final uma página estruturada com tabelas.
If b): lê algumas páginas sobre os básicos de XHTML e de CSS. Depois disso começa a ver sources de páginas como o csszengarden.com, saca uns templates do mollio.org, do oswd.org, etc. O importante nesta fase é ler, perceber e tentar reproduzir a tua versão. Deixo ainda aqui um tutorial sobre o básico de um layout por meio de CSS: http://www.subcide.com/tutorials/csslayout/
Vai por mim, o melhor é aprender aos poucos mas consolidar bem os conhecimentos, isto caso tenhas escolhido a 'porta' b
ehehehboa sorte!
edit: ao contrário do que muitos dizem, layouts em tables não tem NADA a ver com layouts com divs. A tabela não foi inventada para estruturar designs, senão para apresentação de dados tabulares, apenas e só. Isto prende-se não só com o aspecto visual do site no pc de uma pessoa, mas encontrar o standard para toda a gama de ecrans (pcs, macs, telemóveis) mas também, muito importante, com a forma como alguém acede ao site (a.k.a.: acessibilidade).
Isto pode soar a tretas e mais tretas, mas não são, têm muito fundamento até
Se bem que a 'web 2.0' é só um nome giro que encontraram para tornar tudo isto mais 'da moda', mas isso é para outro topic xD
Última edição:
Squillace
Power Member
Sim, e o Web 2.0 ainda é outra coisa bastante diferente.keoshi disse:Hey!
[..]
Isto pode soar a tretas e mais tretas, mas não são, têm muito fundamento até
keoshi
Power Member
Fiz um template muito simples mas funcionar e 100% xHTML e CSS compliant. Tableless, claro.
Fiz o mais simples possível para que possa servir como um 'guia' de como funciona o layout de uma página... Fiz isto à pressa portanto corrijam se encontrarem erros
Download!
Vem com todos os ficheiros incluindo o .PSD do logotipo.
Se usarem podem tirar o crédito mas mandem o link para eu ver como ficou
Espero que possa ajudar alguém, acima de tudo!
Fiquem bem
Fiz o mais simples possível para que possa servir como um 'guia' de como funciona o layout de uma página... Fiz isto à pressa portanto corrijam se encontrarem erros
Download!
Vem com todos os ficheiros incluindo o .PSD do logotipo.
Se usarem podem tirar o crédito mas mandem o link para eu ver como ficou
Espero que possa ajudar alguém, acima de tudo!
Fiquem bem
.![[N]](/data/avatars/m/7/7035.jpg?1408069828){kind=avatar}
[N]
Power Member
keoshi disse:Fiz um template muito simples mas funcionar e 100% xHTML e CSS compliant. Tableless, claro.
Fiz o mais simples possível para que possa servir como um 'guia' de como funciona o layout de uma página... Fiz isto à pressa portanto corrijam se encontrarem erros
Download!
Vem com todos os ficheiros incluindo o .PSD do logotipo.
Se usarem podem tirar o crédito mas mandem o link para eu ver como ficou
Espero que possa ajudar alguém, acima de tudo!
Fiquem bem
Qual é a licença disso? Posso usar à vontade?
EDIT: vi agora que sim. Outra coisa podemos modificar à vontade também certo?
Estou m a iniciar nisto das css. O principal problema/preocupação que tenho é a licença. Nas imagens nem pego pk sei que a maior parte é td copyright. no entanto o .css podemos sacar e alterar certo? mesmo que o autor nao permita o uso podemos usar aquele como base e modificarmos.
Com certeza há aqui gente experiente em webdesgin como lidam voces com isto de licenças e copyrights?
Quanto ao design está bastante agradável. Bom para fazer um website estilo "cartão de visita", gostei.
Já agora podias patrocinar o logo em png do fireworks pois n tenho PS
Última edição:
keoshi
Power Member
Hey,
obrigado a todos, ainda bem que gostaram
Licença deste meu layout é simples: usar, abusar e aprender
O formato .CSS é como outro qualquer, claro que pode ser copyright, mas podes ler o CSS e aprender. Como é um formato universal vais utilizar os mesmo parâmetros.
O que é mau é, por exemplo, copiar um menu todo (imagens incluídas).
[N]: não tenho o fireworks, mas fica aqui o link para um PNG básico do header, se quiseres tirar a cena laranja arrastas um bocado do lado direito e metes por cima. http://i5.tinypic.com/14ilooy.pnghttp://i5.tinypic.com/14ilooy.png
dampiro: depois quero ver isso
obrigado a todos, ainda bem que gostaram
Licença deste meu layout é simples: usar, abusar e aprender
O formato .CSS é como outro qualquer, claro que pode ser copyright, mas podes ler o CSS e aprender. Como é um formato universal vais utilizar os mesmo parâmetros.
O que é mau é, por exemplo, copiar um menu todo (imagens incluídas).
[N]: não tenho o fireworks, mas fica aqui o link para um PNG básico do header, se quiseres tirar a cena laranja arrastas um bocado do lado direito e metes por cima. http://i5.tinypic.com/14ilooy.pnghttp://i5.tinypic.com/14ilooy.png
dampiro: depois quero ver isso
Última edição:
keoshi
Power Member
Explicação 01
Resolvi explicar o que faz cada parâmetro porque já várias pessoas me pediram. Assim fica tudo claro
Comentários dentro de um ficheiro CSS devem sempre vir entre: /* e */
Este excerto não vai ser lido pelos browsers. Útil também para esconder temporariamente bocados de código durante a construção de um site.
E começa:
html e body são 'quase' a mesma coisa, se a tag <body> não tiver mais parâmetros (exemplo: <body id="azul"> - neste caso o parâmetro 'azul', definido no css vai sobrepôr-se às definições do body)
Basicamente aquilo que fiz foi indicar que toda a página vai ter 0px de margem no browser. Não vai existir margem entre a página e o browser.
Aqui defino o tipo de fonte. As fontes vão ser lidas com prioridade da esquerda para a direita. Ou seja, se o utilizador não tiver a 'Lucida Grande' vai ler com 'Verdana' e assim sucessivamente.
Defino a cor da letra com valores hexadecimais (#666).
E o tamanho da letra com valores percentuais para que se possa adaptar às várias resoluções.
-------------
Aqui defino as cores dos links e dos links quando têm o cursor em cima. Há ainda mais parâmetros do valor 'a' tal como active, visited, etc.
Defino a altura para 140px, a largura para 100%, e as margens externas (margin) e internas (padding) para 0px.
Aqui defino um header (h1) para o div #header. Isto pode ser confuso. Chamei header ao meu div mas podia ser cabeçalho (por exemplo). Os verdeiros headers são h1, h2, h3, h4, h5 e h6.
Os headers são definições de títulos, até sem estilo aplicado o browser os reconhece. O h1 é o maior e o h6 o mais pequeno.
Como eu quero apresentar uma imagem em vez de texto no h1 indico os tamanhos da imagem (310x140) e meto como background deste header a minha imagem. O valor transparent serve para que o background não tenha nenhuma cor definida, em seguida indico a localização da imagem com o parâmetro url(), depois indico que quero a imagem no canto superior esquerdo deste div (0% 0% - 0% em relação ao topo e também 0% em relação ao lado esquerdo) e indico que não quero que a imagem se repita (no-repeat)
O valor float:left; vai obrigar este div a 'flutuar' no lado esquerdo.
Finalmente crio uma nova condição (h1 span) e escolho display:none; para que o texto dentro deste span não seja mostrado.
No ficheiro HTML pode ver-se que escrevi:
Isto vai obrigar a que o h1 seja visualizado, mas não o que está dentro do span.
Mais brevemente...
Resolvi explicar o que faz cada parâmetro porque já várias pessoas me pediram. Assim fica tudo claro
Comentários dentro de um ficheiro CSS devem sempre vir entre: /* e */
Este excerto não vai ser lido pelos browsers. Útil também para esconder temporariamente bocados de código durante a construção de um site.
Código:
/*------------- GERAL -------------*/
Código:
html {
margin:0;
padding:0;
}
body {
font-family:'Lucida Grande', Verdana, Tahoma, Sans-Serif;
color:#666;
font-size: 62.5%;
background:#4d4d4d url(header.gif) repeat-x;
margin:0px;
padding:0px;
}
Código:
margin:0px;
padding:0px;
Código:
font-family:'Lucida Grande', Verdana, Tahoma, Sans-Serif;
color:#666;
font-size: 62.5%;Defino a cor da letra com valores hexadecimais (#666).
E o tamanho da letra com valores percentuais para que se possa adaptar às várias resoluções.
-------------
Código:
a {
color:#83b830;
}
a:hover {
color:#a4dc4b;
}
Código:
#header {
height:140px;
width:100%;
padding:0px;
margin:0px;
}
Código:
#header h1 {
height:140px;
width:310px;
background:transparent url(logo.gif) 0% 0% no-repeat;
margin:0;
padding:0;
float:left;
}
h1 span {
display:none;
}Os headers são definições de títulos, até sem estilo aplicado o browser os reconhece. O h1 é o maior e o h6 o mais pequeno.
Como eu quero apresentar uma imagem em vez de texto no h1 indico os tamanhos da imagem (310x140) e meto como background deste header a minha imagem. O valor transparent serve para que o background não tenha nenhuma cor definida, em seguida indico a localização da imagem com o parâmetro url(), depois indico que quero a imagem no canto superior esquerdo deste div (0% 0% - 0% em relação ao topo e também 0% em relação ao lado esquerdo) e indico que não quero que a imagem se repita (no-repeat)
O valor float:left; vai obrigar este div a 'flutuar' no lado esquerdo.
Finalmente crio uma nova condição (h1 span) e escolho display:none; para que o texto dentro deste span não seja mostrado.
No ficheiro HTML pode ver-se que escrevi:
Código:
<h1><span>Exemplo</span></h1>Mais brevemente...
Última edição:
[N]
Power Member
já votei 5 estrelas na thread! está realmente bom para quem se está a iniciar (como eu )!
isto é realmente simples. apenas dá um bocado de trabalho. basta saber os códigos.
Só uma pergunta: Peguei neste design http://www.csszengarden.com/?cssfile=/128/128.css&page=8 e transformei nisto: [Edit: retirei o link]
A imagem de cima fui eu que a fiz. No entanto o resto fui retirado do site em questao. basicamente aquilo sao barras coloridas... como isto é para uso pessoal nao tem problema, mas se fosse para uso comercial o autor poderia acusar-me de alguma coisa? Peço desculpa mas eu levo isto de licenças a sério! é importante.
)!isto é realmente simples. apenas dá um bocado de trabalho. basta saber os códigos.
Só uma pergunta: Peguei neste design http://www.csszengarden.com/?cssfile=/128/128.css&page=8 e transformei nisto: [Edit: retirei o link
]A imagem de cima fui eu que a fiz. No entanto o resto fui retirado do site em questao. basicamente aquilo sao barras coloridas... como isto é para uso pessoal nao tem problema, mas se fosse para uso comercial o autor poderia acusar-me de alguma coisa? Peço desculpa mas eu levo isto de licenças a sério! é importante.
Última edição:
keoshi
Power Member
[N]: em cada design há termos específicos se os autores assim o desejarem mas há um 'requisito' básico que eles fazem questão de evidenciar:
Já agora, [N], não dá para ver a tua página =\
Ou seja, teoricamente podes usar todos os designs (excepto as imagens), modificá-los, fazer tudo desde que não seja para uso comercial. Deves também ter que manter um link para o autor.
Já agora, [N], não dá para ver a tua página =\
Última edição:
[N]
Power Member
pois não... suspenderam-me a página.... até gostava de saber pq.... vou falar com eles...já agora
isto é o que aprece no css... parece que andei a fazer o site para nada =(
Antes de mais uma pergunta, o que quer dizer "Uso nao comercial"?? Parece estupido mas gosta que me explicassem.
Lá no site tem
Com commercial use quer dizer utilizar o website como sendo o website oficial de uma empresa por exemplo?
EDIT: parece que os gajos da duoni tavam com problemas mas ja resolveram.uns chineses andavam a causa spam.
Última edição:
keoshi
Power Member
Modifica o site, o esquema de cores, algo que faça diferença para não te chatearem.
Uso comercial é, por exemplo, venderes esse site como trabalho original teu.
Mas 'uso comercial' é exactamente andares a fazer dinheiro à custa disso. Seja de que maneira for.
De qualquer forma, envia um mail ao autor a indicar o URL da página, o que pretendes fazer com o site a ver se ele está de acordo. Se não estiver muda tudo como te disse (cores e tamanhos é o que se nota mais) e tenta de novo.
O melhor mesmo é aprenderes desse e fazer um personalizado com o que precisas e com os elementos que gostas.
Só como exemplo, ninguém inventou o layout de duas colunas, não é propriedade de ninguém nem de nenhuma empresa logo ninguém vai processar um site por estar a usar esse tipo de layout. O web design, como qualquer outra coisa, têm as suas ambiguidades no que toca à lei e copyrights.
EDIT: já agora, só para dizer uma coisa: acho altamente estúpido alguém submeter um design no css zen garden e não deixar os utilizadores modificar e utilizar o layout. Fazem isto apenas para publicidade e não deviam aceitar submissões destas. Mas é a minha opinião...
Uso comercial é, por exemplo, venderes esse site como trabalho original teu.
Mas 'uso comercial' é exactamente andares a fazer dinheiro à custa disso. Seja de que maneira for.
De qualquer forma, envia um mail ao autor a indicar o URL da página, o que pretendes fazer com o site a ver se ele está de acordo. Se não estiver muda tudo como te disse (cores e tamanhos é o que se nota mais) e tenta de novo.
O melhor mesmo é aprenderes desse e fazer um personalizado com o que precisas e com os elementos que gostas.
Só como exemplo, ninguém inventou o layout de duas colunas, não é propriedade de ninguém nem de nenhuma empresa logo ninguém vai processar um site por estar a usar esse tipo de layout. O web design, como qualquer outra coisa, têm as suas ambiguidades no que toca à lei e copyrights.
EDIT: já agora, só para dizer uma coisa: acho altamente estúpido alguém submeter um design no css zen garden e não deixar os utilizadores modificar e utilizar o layout. Fazem isto apenas para publicidade e não deviam aceitar submissões destas. Mas é a minha opinião...
Última edição:
keoshi
Power Member
Eu trabalho nisto há já algum tempo (2 anos a sério) mas como não tenho o meu portfolio ainda online (preguiça do caraças) não posso pedir tanto como eu desejaria.
Além disso, nunca fiz nada assim muito importante para grandes empresas (que pagam 5000 dólares e mais por uma página) e sou estudante, portanto digamos que ganho para as minhas voltas
Sei lá, no princípio comecei por fazer uns trabalhos nuns concursos de fórums (sitepoint), depois fiz umas skins/templates para um software de blog e com isso ganhei algum nome. O resto é uma pessoa mostrar trabalho e começar a fazer cenas.
Digamos que começas em 50 euros -> 200 -> 400 -> 500 -> 1000 -> 5000
Além disso, nunca fiz nada assim muito importante para grandes empresas (que pagam 5000 dólares e mais por uma página) e sou estudante, portanto digamos que ganho para as minhas voltas
Sei lá, no princípio comecei por fazer uns trabalhos nuns concursos de fórums (sitepoint), depois fiz umas skins/templates para um software de blog e com isso ganhei algum nome. O resto é uma pessoa mostrar trabalho e começar a fazer cenas.
Digamos que começas em 50 euros -> 200 -> 400 -> 500 -> 1000 -> 5000
keoshi
Power Member
O template não é nada de especial mas obrigado!
O que é interessante nisto do CSS é que há muitas maneiras de fazer a mesma coisa e uma pessoa começa a descobrir outras que nunca pensou serem possíveis. Eu acho que se pode chamar 'a arquitectura da web'
Trabalho por conta própria, sim
Envia-me o teu endereço por PM.
O que é interessante nisto do CSS é que há muitas maneiras de fazer a mesma coisa e uma pessoa começa a descobrir outras que nunca pensou serem possíveis. Eu acho que se pode chamar 'a arquitectura da web'
Trabalho por conta própria, sim
Envia-me o teu endereço por PM.
keoshi
Power Member
O <span> é um elemento inline, não é block. Ou seja, não cria nenhum bloco por defeito. É útil se queres mudar, sei lá, por exemplo, a cor ou o tipo de letra ou o tamanho de um bocado de texto que já está por si só formatado.
As definições do <span> vão sobrepor-se a estas primeiras.
As definições do <span> vão sobrepor-se a estas primeiras.