Site

Disponível somente no TrabalhosFeitos
  • Páginas : 115 (28685 palavras )
  • Download(s) : 0
  • Publicado : 18 de abril de 2013
Ler documento completo
Amostra do texto
Montagem de Site - Parte 1
Agora que vimos inúmeras técnicas de desenvolvimento em HTML e CSS que tal colocar tudo em prática montando um site completo?
A partir desta lição iniciaremos a montagem passo a passo de um site utilizando XHTML e CSS.
Analisando o Layout
Normalmente quando vamos desenvolver um website o layout do mesmo já foi definido por um webdesigner.
Aqui cabe uma breveexplicação da diferença entre o Desenvolvedor Web e oWeb Designer.
O Web Designer é o profissional que utiliza ferramentas para desenho como Corel Draw, Photoshop, Ilustrator, In Design, Gimp, etc. Esse profissional geralmente tem bastante criatividade e existem inclusive cursos universitários voltados à área como Design Gráfico e Produção Multimídia, dentre outros.
O Desenvolvedor Web é oprofissional que transforma o desenho elaborado pelo Webdesinger em código HTML e CSS que gera o conteúdo definido, que é o propósito deste curso.
Claro que existem profissionais que transitam entre as duas áreas e as empresas valorizam essa flexibilidade.
Mas muitas empresas de desenvolvimento web têm profissionais que trabalham exclusivamente com o design e outros com a codificação.
Vamos partir dopressuposto que um Web Designer já elaborou o layout que deve ser aplicado.
Vamos trabalhar com um layout bem simples mas que servirá para aplicarmos diversas técnicas que já estudamos.
Clique no link abaixo para ver como será esse layout.
Layout Página Inicial.
Achou estranho os textos utilizados no template? Eles são chamados de Lorem Ipsum. Trata-se basicamente de uma simulação de texto muitoutilizada pela indústria tipográfica. Para fins de análise de diagramação é melhor que quem estiver realizando o trabalho não se distraia com o conteúdo textual mas concentre-se no design.
Você pode baixar o layout no formato PNG no link abaixo:
Baixar template.
Se aparecer a imagem ao invés da opção de download, clique com o botão direito na mesma e escolha "Salvar imagem como".
Ok, você jáestá de posse da imagem que representa como ficará o site depois de pronto. Dê uma boa olhada na imagem e tente imaginar como poderemos montar um site que fique idêntico à imagem.
O primeiro detalhe a ser notado é o fundo geral do layout que é de um tom azul:

Você pode descobrir qual a cor em hexadecimal utilizando a ferramenta conta-gotas em um editor de imagens. Mas neste caso não serápreciso, pois o hexadecimal desse tom de azul é #2B79FF.
Outro detalhe importante é com relação ao banner no topo da página. Como o mesmo possui um desenho irregular de fundo talvez seja inviável utilizar alguma técnica de repetição da imagem (lembra da propriedade background-repeat?). Se não está lembrado acesse novamente o tópico background-repeat.
Vejamos a imagem do banner em separado:

Noentanto, se o designer fornecer somente a imagem irregular sem fundo é possível repetir horizontalmente o fundo do banner. Neste caso, somente horizontalmente, pois a cor de fundo do banner está em degradê de um tom mais escuro acima para um tom mais claro abaixo.
Dentro do banner temos alguns textos com cores e margem esquerda diferentes. Também nota-se que os textos estão meio sobrepostos. Isso seráútil para aplicarmos algumas técnicas de estilização de linhas e espaçamento:

Mais abaixo temos uma barra de navegação com um fundo em degradê em tons laranja/amarelo. Já neste caso compensa utilizar a propriedade background-repeat com um valor repeat-x. Dessa forma, uma pequena fatia da imagem de fundo da barra bastará para preencher o fundo desse menu:

A imagem que será repetida no fundopode ser algo como:

Há também o separador dos itens da barra de navegação, uma pequena imagem que será inserida entre cada link:

Outro detalhe que chama a atenção é com relação às imagens no conteúdo principal da página. As imagens em um momento estão posicionadas à direita e em outro à esquerda, sem afetar o posicionamento do texto:

Mais abaixo vemos o rodapé da página, bem simples, com...
tracking img