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

Site extremamente simples... como?

Discussão em 'Web Development' iniciada por pedroL, 21 de Março de 2009. (Respostas: 9; Visualizações: 724)

  1. pedroL

    pedroL Power Member

    Olá ZWAME users ! :)

    Preciso de criar uma página web q contenha uma lista em q cada item é uma hiperligação!
    Qquer coisa como isto:

    [​IMG]

    De preferência, gostaria de ser eu a fazer no Photoshop o seguinte:
    - fundo do site
    - "bolha" da lista dos links
    - talvez tenha q usar imagens c/ texto em vez de puro texto, uma vez q gostaria q ficasse +/- c/ o aspecto do preview acima

    Informações extra:
    - em termos de espaço de alojamento, o q eu preciso p/ isto é praticamente "nada", uma vez q será apenas uma única página e nenhum ficheiro será alojado (à excepção do .html ou como se chama)
    - o objectivo é msm apenas listar links, mas c/ um aspecto bonitinho :)

    Como é q eu poderia fazer isto?
    Quais as minhas opções em termos de alojamento grátis e programas/templates p/ a parte gráfica?


    Tá visto q de sites n percebo nadinha... :(
    Apenas fiz isto uma única vez no Dreamweaver há alguns anos atrás e, lamentavelmente, já nem sequer me recordo de como o fiz...

    Mt obrigado pela atenção e ajuda!
    Cumps!
     
    Última edição: 21 de Março de 2009
  2. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Boas,

    Isso é relativamente fácil de fazer, desde que tenhas alguns conhecimentos de HTML e CSS ;)
    Em relação ao alojamento, vê este tópico.

    Estás a ir pelo bom caminho ao perceberes o que podes fazer. Cor sólida de fundo (a cor em questão é a #4CBFC6), imagem para a caixa com a lista de botões, uma imagem com a "estrela" e uma para cada item.

    Depois, em HTML crias uma "bulleted list", e em CSS configuras que a "bullet" é a estrela. Cada item da lista é uma imagem, que terás feito no photoshop ou equivalente :)

    O que está neste tópico também te pode dar jeito.
     
  3. Camolas_san

    Camolas_san Power Member

    Atenção que é recomendável usar sempre cores SAFE FOR WEB ou seja, cores que garantidamente vão ser vistas de igual forma por todos os utilizadores, por isso para jogares pêlo seguro tens de substituir #4CBFC6 por #33CCCC , não é exactamente igual, mas de certeza que todos vão vê-la da mesma forma!
    :001:
    Cumps

    Camolas_San
     
  4. pedroL

    pedroL Power Member

    Muitíssimo obrigado pela ajuda, Kayvlim !

    A parte do "desde que tenhas alguns conhecimentos de HTML e CSS" é msm o meu handycap... :(
    Tal como tinha dito, tive apenas uma experiência minúscula... :)
    Mas acredito q lá chegarei, até pq tal como referiste é algo simples de se fazer!

    Sugeri usar um fundo em vez de uma cor pq gostaria de usar uma imagem criada no photoshop c/ alguns "efeitos engraçados"! :)
    Em relação à lista, a "estrelinha" poderá fazer parte da msma imagem do texto, n? Fica é tb "clicável" como o texto!

    Aconselhas-me q faça no Dreamweaver ou existe um programa bem mais simples, tendo em conta o q pretendo?
    Ahh... pergunto isto tb pq deixei de ter o Dreamweaver ao mudar p/ Mac...

    Mais uma vez, mt obrigado Kayvlim ! :)


    Obrigado Camolas ! :)
    Já n me lembrava desses detalhes... de qquer das formas preferia usar uma imagem como fundo pelos motivos acima mencionados! ;)
     
    Última edição: 21 de Março de 2009
  5. OldMan

    OldMan Power Member

    CODA ;)
     
  6. pedroL

    pedroL Power Member

    Mt obrigado OldMan !
    Por esta e pelas outras dicas ! ;)
     
  7. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Na minha opinião, HTML é bastante fácil. Juntar CSS é que pode tornar-se um pouco confuso, mas desde que se tenha boas dicas (o site w3schools é muito bom nisso), geralmente chega-se lá depressa :)

    Sim, podes juntar a estrela à imagem do texto. Simplesmente achei melhor aconselhar-te a evitares isso porque
    1) uma imagem (que fica em cache) mais 5 imagens pequenas é mais poupado que 5 imagens um bocado maiores (porque, a cada uma delas, tens de acrescentar a estrela).
    2) em termos de acessibilidade, imagina que por acaso quem vai ao teu site tem algum tipo de deficiência visual e precisa de um browser específico, que o impede de ver as imagens. Uma coisa é ele ter cinco imagens sem a propriedade "alt" e separadas por enters (ou seja, não percebe nada do que estava ali), e outra coisa é ter uma lista de cinco imagens com descrição na propriedade "alt" e na forma de uma lista (ou seja, não vê as imagens, mas percebe o que elas representam)
    Mas isto é só uma opinião minha, e também não deve ficar muito mais pesado :)

    Quanto ao fundo, o Camolas_san tem razão no que diz, e eu é que, por outro lado, não tinha, porque só agora reparei que aquilo é uma gradiente, e eu dei-te uma cor à toa lá para o meio. Desvantagens de ver estas coisas num ecrã de portátil onde as variações pequenas de core se percebem mal :x

    Eu nunca aconselho o uso de ferramentas como o FrontPage (este então... :| ) ou o Dreamweaver para quem ainda está a começar. Se só quiseres fazer esse site, também não tens nada a perder ao usá-las, mas se quiseres aprender a sério, usa o bloco de notas para escrever o HTML à mão, e depois vai gravando a página e testando em casa. Não precisas de pôr o ficheiro num alojamento, sequer ;)
     
  8. pedroL

    pedroL Power Member

    Obrigado pelo w3schools ! Apontado ! ;)

    As coisas q eu desconheço... de facto, a "estrelinha" vai msm ficar à parte! :)
    Eu estou msm a começar... aliás, até me sinto numa fase antes do "início", de tão leigo q sou...
    Esta é uma área q me atrai muitíssimo e s/ dúvida q gostaria de me dedicar a ter umas boas aulas! No entanto, nesta fase n consigo dispôr do tempo p/ me cultivar profundamente, o q me obriga a tentar fazer isto c/ o menor custo de tempo possível! :( Caso contrário aventurar-me-ia de outra forma s/ dúvida !
    Ainda n percebi o q é, mas tou agora a ver o q o CODA q o OldMan sugeriru pode fazer por mim... :)
    De qquer das formas, p/ o q pretendo, achas q escrever o HTML à mão seria uma tarefa excessivamente puxada p/ mim?

    Mais uma vez, mt obrigado Kayvlim ! :)
     
  9. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Não sei. Eu sempre gostei de escrever tudo à mão, mas eu adoro "bater código", portanto sou um bocado suspeito nisso :D

    Quase todas as páginas que escrevo começam com este rascunho (que todas as páginas têm):
    Código:
    <html>
       <head>
           <title></title>
       </head>
       <body>
       </body>
    </html>
    
    Tudo o que queres que apareça na página fica dentro do <body>; o título da página aparece dentro de <title>.
    Depois podes escrever coisas como
    Código:
    The <strong>quick brown <em>fox</em> jumps</strong> over the <em>lazy</em> dog.
    :D

    Segue o tutorial do w3schools, que acredito que aprendas bem mais do que te consigo dizer por aqui ;)
     
  10. pedroL

    pedroL Power Member

    Mt obrigado novamente Kayvlim ! ;)
    O q eu me vou divertir c/ isto... n imaginas como gosto de aprender estas coisas! :)
    Vou "devorar" o w3schools...
     

Partilhar esta Página