|
Bom hoje vou ensinar como criar um site simples. Para criarem o site podem usar o adobe dreamweaver, frontpage ou qualquer outro editor HTML.
O resultado final será este:
Os melhore softwares são os pagos poderá fazer download do fireworks e do dreamweaver e testar durante 1 mês basta criar uma conta no site da adobe.
http://www.adobe.com
Quanto aos gratuitos:
HTML Editors: 1st page 2000 - http://www.evrsoft.com/download.shtml AceHTML - http://freeware.acehtml.com/download.html Aracnophilia - http://www.arachnoid.com/arachnophilia/ HTML-Kit - http://www.chami.com/html-kit/ Selida - http://www.amaryllis.8m.com/ Trellian webPAGE - http://webpage.vendercom.com/ TSW WebCoder - http://www.tsware.net/ Então vamos começar.
Primeiro aconselho a fazer um esboço do site a mão numa folha de papel.
Devem definir os seguintes campos.
Onde fica o logotipo.
Onde fica o menu.
Onde irá ser mostrada a informação.
No meu caso, não vou fazer um esboço mas ja tenho em mente aquilo que quero.
O tema do site, tem de jogar com as cores. Eu escolhi fazer um site sobre a natureza,lembrando que
vou fazer um site super simples para ficar acessivel a qualquer pessoa.
O site será feito usando um simples sistema de tabelas que será suficiente para aquilo que procuramos.
Primeiro abrimos o dreamweaver outro programa de criação de paginas. E criamos um novo ficheiro HTML.
FILE / NEW / HTML PAGE
Agora vamos definir a cor de fundo do site. Atenção esta cor de fundo apenas irá aparecer em redor do site,
nunca ficará atras do texto. Agora crie uma tabela precionando CTRL + ALT + T (se estiver usando outro programa procure a opção inserir tabela. Agora vamos centrar a tabela e deixar ela com as seguintes opções. São elas Cor de fundo branco, cor da borda Cinza,
Borda com 3 pixeis de largura e 700 px de largura para a tabela.
Agora vamos criar um Header que mais não é do que o topo do site.
Abra Fireworks e crie uma imagem com 600px de comprimento e uns 100 de altura dependendo daquilo que voce prentende colocar. Agora crie a sua imagem eu nao vou ensinar a criar um logotipo. Isso ficará para outro tutorial.
Limite-se a colocar uma imagem e o nome do site.
Agora antes de salvar a imagem faça o seguinte. Crie uma pasta com o nome que quiser por exemplo "site"(sem aspas) e grave o site dentro da pasta com o nome "index.html" (sem aspas). Depois crie uma nova pasta dentro da pasta site, com o nome imagens e grave a imagem dentro desta pasta imagens. Ao gravar a imagem deve optar por gravar com e a extençao .GIF as imagens gif tem optima qualidade e são muito pequenas em termos de espaço em disco.
Agora volte ao dreamweaver e insira o nosso hearder que criamos na primeira linha da tabela.
Clique na primeira linha da tabela, depois vá ao topo do dreamweaver clique INSERT / IMAGE .
Deverá estar dentro da pasta site, entre na pasta imagens que criou e escolha o hearder que lá gravou.
O dreamweaver irá perguntar se deseja colocar uma tag na imagem mas ignore clique apenas OK.
O site ficará com o seguinte aspecto.
Bom agora na segunda linha iremos colocar o menu. E na terceira será mostrado o conteudo.
Vamos fazer o menu, comece por clicar dentro da segunda linha e centre a mesma como se fosse um texto. (pode encontrar a opção centrar logo abaixo nas propriedades da linha)
Agora que a segunda linha esta centrada escreva os menus que queira ter deixando um espaço entre eles ou usando uma barra. Por exemplo:
Home | Artigo 1 | Artigo 2 | Sobre
Agora vamos criar um estilo. Os estilos ajudam bastante na criação de menus.
Carreguem no botão para verem apenas o codigo.
Naveguem até ao inicio do codigo ate encontrarem a linha :
<style type="text/css">
<!--
Depois desta linha virá o seguinte codigo:
body {
background-color: #009933;
}
Esta linha diz que o fundo do site é verde. #009933 = verde
Nesta linha de um enter e depois de "}" adicione o seguinte codigo:
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 26px;
font-weight: bold;
color: #5C5C5C;
text-decoration: none;
}
.style1:hover
{
color: #00CC33;
}
Neste codigo criamos uma class chamado style1.
font-family: Define a Fonte a ser usada
font-size: Tamanho da Fonte
font-style: Estilo da Fonte
line-height: Altura da linha onde se encontra o menu
font-weight: Tipo da fonte , negrito italico etc.
color: #5C5C5C; Cor da fonte
text-decoration: None; Tipo de decoração, neste caso nenhuma. Podia ser underline "sublinhada".
.style1:hover ( Define como será o texto quando tiver o rato por cima)
color: #00CC33; muda a cor para verde
O codigo ficará com o seguinte aspecto.
<style type="text/css">
<!--
body {
background-color: #009933;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 26px;
font-weight: bold;
color: #5C5C5C;
text-decoration: none;
}
.style1:hover
{
color: #00CC33;
}
</style>
Agora vamos definir os menus e aplicar o estilo neles. (enganei me na imagem por isso esta fora de ordem.)
1- Sublinha todos os menus 1 de cada vez
3- Defina os endereços de cada pagina. Iremos criar uma pagina para cada assunto. Por exemplo para o
menu home a pagina será o index.html , para artigo 1 poderemos colocar artigo1.html , e assim por diante.
2- Escolhe o style1 para todos eles.
Agora o seu site deverá ter este aspecto.
Agora vamos definir como irá ficar o texto na 3ª linha da tabela.
Para isso iremos criar um novo estilo.
Iremos ao codigo dos estilos no inicio do codigo como explicado anterior mente e devemos criar um novo estilo.
Depois do final so estilo anterior devemos colocar este codigo:
.style2 {
color: #999999;
margin-left:10px;
margin-right:10px;
}
Ficara algo assim:
Explicando o codigo:
margin-left:10px;
margin-right:10px;
Estes parametros irão defenir a margem neste caso qualquer coisa que seja colocada ficará a 10px
da direita e 10 pixeis da esquerda.
Agora coloquem o conteudo da pagina na 3ª linha da tabela, depois basta sublinhar o conteudo e escolher o
style2 para o definir.
Bom agora o seu site deverá estar com este aspecto.
Até nem ta mau de todo.Vamos agora dar uns toques para o deixar mais suave, vamos arredondar as pontas e retirar a borda da tabela.
Primeiro retirar a borda da tabela:
Selecione a tabela e mude o valor 3 para 0.
Agora que ja não temos borda clique na primeira linha da tabela (aquela que tem a imagem do hearder)
mas cuidado nao clique em cima da imagem clique dentro da linha sem selecionar a imagem.
Dirija se ao menu do topo do dreamweaver e escolha:
Insert / Table Objects / Insert Row Above
Agora faça o mesmo na ultima linha depois do texto. Mas faça Insert Row Below.
De seguida vamos abrir o fireworks e criar uma imagem com 700px de comprimento uns 60px de altura e a corde fundo será a cor que colocamos no fundo do nosso site.
No meu caso #009933.
Agora selecione a ferramenta Rounded Rectangel e desenhe um rectangulo branco este rectangulo devera ter exactamente os 700px de comprimento e apenas uns 50px de altura de modo a fique a ver se o fundo por baixo do rectangulo e por cima.
Assim:
Agora precione o "K" para activar a ferramenta de corte Slice Tool. Recorte duas fatias ao longo de toda a imagem.
Como podem ver abaixo. E depois cliquem com o botão direito sobre cada uma das fatias e escolham a opção "Export selected slice". Grave ambas as imagens na pasta "imagens" que criamos anteriormente.
Agora iremos a primeira linha de todas no dreamweaver e iremos colocar a fatia de cima como background e isso irá dar o efeito que temos uma tabela de cantos arredondados mas na verdade a tabela tem os cantos quadrados e uma imagem de fundo.
Repita o processo la ultima linha criada por baixo do texto, mas desta vez usando a fatia inferior.
Agora o site estará praticamente acabado vamos apenas puxar o texto mais para dentro. Vá ao style2 que criamos e modifique:
margin-left:20px;
margin-right:20px;
Estes dois parametros estariam a 10px ao colocar a 20px ele deixara uma margem maior tornando mais agradavel a leitura.
Agora finalmente a pagina esta acabada. Agora salve esta pagina principal como "index.html" como ja o tinha feito.
De seguida clique em FILE / SAVE AS.
Teremos de gravar a pagina com mais 3 nomes. "artigo1.html" "artigo2.html" "sobre.html"
Lembrando que podera abrir o artigo1.html e modificar apenas o texto e inserir o que quiser.
O mesmo se aplica as outras paginas.
Lembre-se de uma coisa não é obrigatoria a existem de 4 itens no menu. Crie os que quiser, 2 , 10.
Depois salve o index.html varias vezes com nomes diferentes. Sendo estes nomes os nomes que colocou a linkar a pagina.
Veja:
Sempre que fizer uma modificação posterior no menu. Terá de modificar todas as paginas por isso e importante saber tudo o que
o seu site vai ter e quantas páginas vai ter antes de fazer as multiplas copias da pagina principal.
Bom este será o resultado final do site que fiz. Penso foi de contrução simples e já introduzi algumas dicas de estilos CSS.
A unica maneira de melhorar é treinar. Faça suas paginas. ^^ divirta -se.
|
