Tutorial Estrutura de sites CSS – PDF. by alievi
14 Agosto, 2009
Para todos que estão iniciando em CSS e querem deixar de lado as tabelas para estruturar um site. Tabelas são usadas somente para dados tabulares e não para estruturar um site. Então aí vai alguns tutoriais para vocês começarem usar para DIV’s.
PDF’s :
Layout 1 coluna (líquido)
Alievi sites agora é ESTATUS Informática, vamos trabalhar com:
. Montagem e Manutenção de computadores
- Formatação
- Instalação de Sistema Operacional (Windows, Linux)
- Softwares diversos
- Antívirus
- Codecs Audio e Vídeo
e muito mais….
Seu PC pronto pra trabalhar e se divertir!!!
. Desenvolvimento de sites
- Site para sua empresa
- Site pessoal
- Portfólio
- Portais
Solução web completa para você ou sua empresa.
Visite: www.estatus.com.br
Região: Francisco Beltrão – PR
Jair – (46) 8805-6675
Marcos – (46) 9105-7137
Retirando espinhas das fotos(photoshop) – Vídeo Tutorial
10 Dezembro, 2008
Retirando espinhas utilizando o Photoshop.
»Informações
Estilo: Vídeo Tutorial
Tamanho: 3 MB
Formato: Rar
Idioma: Português
» Clique aqui para Download
Mais um pouco sobre CSS. Criar uma folha de estilo separada
21 Outubro, 2008
Vamos então a mais uma parte do CSS.
Estilos dentro do html.
Digamos que temos um html assim, lembrando que você ja tenha conhecimento em html, vamos trabalhar ele dentro das tags <body>:
<body>
<h1 style=”font-family:Arial; font-size:16px; color:#369“>Título de um documento</h1>
<h2 style=”font-family:Arial; font-size:14px; color:#369“>Aqui vai um sub-título no documento</h2>
<p style=”font-family:Arial; font-size:12px; color:#000″>Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto.Aqui vai um parágrafo de texto. Aqui vai um parágrafo de texto.</p>
<body>
Ou melhor, que tal criar uma folha de estilo separada para não ficarmos aplicando estilos a cada tag html?
O que é CSS (Cascading Style Sheets) e qual vantagem de ser usado?
28 Setembro, 2008
OLá a todos. Um bom tempo sem escrever um post, volto a todo vapor e espero que consiga terminar o que estou iniciando. A pedidos de várias pessoas e alunos vou disponibilizar no blog conteúdos sobre CSS. Quero deixar claro a todos que também sou um aprendiz e que me ajudem comentando para que eu possa melhorar meu trabalho e de muitos que vierem visitar nossos posts. Vou tentar expôr de uma maneira fácil de ser entendida para que possa não deixá-los com dúvidas a respeito desse conteúdo. Sem enrolação então vamos a nossa introdução.
Não sou o primeiro a falar sobre CSS. Muitos blogs e sites defendem a muito tempo essa linguagem. Linguagem? É isso mesmo. Linguagem de estilo:
“Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.” Wikipédia
A idéia do CSS, como diz a citação anterior, é separar a formatação do site de seu conteúdo, trabalhando-os separadamente mas que tenham uma ligação entre si, através de um link. É craido um documento, ou melhor, uma folha de estilo com a extensão .css a qual iremos definir cores, tamanhos de fontes e blocos, títulos, subtítulos, bordas, espaços e etc. Ler o restante desta entrada »
Desenvolvimento de sites – ALIEVI
28 Agosto, 2008
Alievi Desenvolvimento de sites - Portfólio
Cada vez mais as pessoas procuram estar em contato com esse novo universo, a utilização da internet esta crescendo cada vez mais, não somente dentro das empresas, mas dentro dos lares. O celular (tecnologia móvel) e outros aparelhos também estão tomando conta do mercado e o número de acessos a páginas por meio de computadores e aparelhos móveis está em grande alta. As pessoas a um clique encontram a informação que buscam. E se sua empresa não estiver na telinha quando alguém precisar de seus serviços?
Um site expõe idéias, serviços e entretenimento 24 horas ao dia durante 365 dias. A qualquer momento o seu cliente encontrará seus serviços e informações sobre sua empresa sem ter que sair de casa.
ALIEVI soluções trabalha para manter a sua empresa vista com bons olhos e transformar seu site em um meio de marketing poderoso para conquistar cada vez mais clientes em um território sem limites, o mundo.
Temos uma equipe experiente na área de desenvolvimento de sites, equipe formada por webdesigners e programadores que sempre estão em busca de aperfeiçoamento e novas têndencias que o mercado exige. Que busca satisfazer nossos clientes com sites leves atentando para acessibilidade e usabilidade buscando se adptar aos padrões web, além de trabalhar o conteúdo e estrutura para que buscadores encontrem de maneira mais fácil seu site na internet.
Deixar seu site em nossas mãos, é garantia de sucesso.
Obrigado.
Jair Alievi
Digital Painting : Robô
27 Agosto, 2008
Photoshop Tattoo (Inserindo tatuagem usando Photoshop)
27 Agosto, 2008
Um tutorial iniciante rapidinho ,de como colocar tattoo com o photoshop ,o truque é aplicar multiply na layer da tatto…(é importante que o background da imagem seja branco assim não tem effeito sobre a pele da modelo )!! Bom é isso aí boa sorte! *ah prestem atenção na iluminação da foto e vão ajeitando a % da imagem da layer da tatto !
Contribuição do nosso amigo Samorel Harawata – samorel.harawata@gmail.com
Desenhando olho realista no Photoshop
20 Agosto, 2008
Olho realista photoshop - ALIEVI
Ola galera, depois de um bom tempo e pouco tempo pra atualizar meu blog, fiz mais uma vídeo aula do photoshop. É claro que não vou abandonar o blog, só peço desculpas pelo tempo de demora pra atualizá-lo, muito trabalho por aqui. Fiz esse vídeo baseado num tuto que tinha visto uma vez, mas ñ achei mais nem o link, era apenas imgens e texto e em inglês. Trago pra vocês em vídeo. Aproveitem e podem comentar. Ha! se alguém souber de um servidor melhor que o easy-share e que seja grátis pode me mandar dicas, eu aceito, realmente ta ficando ruim de hospedar no easy-share.
Abraço a todos.
- Formato do arquivo: Flash / .rar
Tamanho: 103,21MB
Autor: Jair Alievi
Clique aqui para fazer o download.:
Parte 1 - 95,78 MB
Parte 2 – 7,43 MB
Configurando os parágrafos no Word 2007
3 Agosto, 2008
Na aba “Início” em parágrafo veremos um grupo de atalhos da configuração dos parágrafos, mas se eu quiser algo mais avançado, escolher as configurações de forma mais exata, como medidas de recuos, alinhamentos, espaçamento entre parágrafos e espaçamento entre linhas?
Primeiro: Clique no local conforme mostra a seta vermelha na figura abaixo:
Parágrafo, atalhos do Word 2007
Ao clicar no ponto indicado deverá abrir a seguinte tela, na qual iremos fazer as modificações desejadas:
Configurando parágrafos no Word 2007
RECUO: Usado pra inserir um recuo ao texto, fazendo o texto ir mais a direita ou a esquerda. Selcione uma parte do seu texto e altere as medidas, primeiro do recuo esquerdo e clica em OK. Após deixe o valor 0 para esquerdo e mude o direito para verificar os diferentes resultados.
RECUO ESPECIAL: Recua a primeira linha de cada parágrafo. Dando o início dos parágrafos ou deslocando (deslocamento) somente o texto de baixo da primeira linha.
ESPAÇAMENTO: Você pode definir o espaçamento entre um parágrafo do outro, a distancia anterior do parágrafo e depois. O Word 2007 vem com um espaçamento depois configurado, valor de 10 pt. Você pode alterar esse valor ou deixar 0, assim não ficará espaço entre os parágrafos.
ESPAÇAMENTO ENTRE LINHAS: Espaço utilizado pra dar uma distância entre uma linha da outra. O espaçamento mais usado é o simples (1), mas geralmente as faculdades pedem pra deixar o documento com um espaçamento de 1,5 linhas. Isso facilita melhor a leitura do texto. Após isso clique em OK e pode digitar a vontade que ficará nas medidas configuradas.
Não deixem de comentar. Obrigado.
Jair Alievi
Configurando as margens de uma página no Word 2007
2 Agosto, 2008
Uma dúvida que quase todos que entram em uma faculdade se deparam. Como configurar as margens de uma página no Word 2007? Então vamos la:
Primeiro: Clica na aba LAYOUT DA PÁGINA e em seguida em Margens, ali você encontrará vários tamanhos predefinidos, como margens superior, esquerda, inferior e direita. Se uma dessas opções é o que você precisa, apenas clique nas margens desejadas e pronto, mas se não for nenhuma dessas opções, clica em Margens Personalizadas no final da aba.
Como configurar margens no Word
Segundo: Depois de clicado em “Margens Personalizadas …” aparecerá a janela como a imagem abaixo. Na guia imagens, altere as margens Superior, Esquerda, Inferior e Direita como desejar. Não é necessário digitar “cm” no final do valor, pois o Word reconhece que é em “cm” mesmo não digitando.
Terceiro: No final da janela, você encontrará as opções de “Aplicar a:” , você escolhe se quer no documento inteiro, ele aplicará em todas páginas, ou somente do ponto que você estiver no documento em diante, as páginas anteriores não sofrerão as alterações.
Quarto: Após, clique na guia “Papel” no topo da janela e altere também o tipo de papel. O padrão usado é o A4. Abaixo escolha o “Aplicar a:” também. Pronto, agora só clicar em OK no final da janela e pronto, seu documento já esta configurado.
Configurando margens no Word
Deixe seu comentário no formulário abaixo. Obrigado.
Jair Alievi
Desenhando Fogo no Photoshop
15 Julho, 2008
Saiba como fazer o Efeito de Fogo no photoshop na Raça! É fácil de fazer. Através deste exemplo você poderá fazer outras variações até chegar do jeito que você quizer.
Formato do arquivo: Flash / .rar
Tamanho: 43,95MB
Autor: Jair Alievi
Clique aqui para download
Fazendo Tabelas HTML – aula 6
24 Abril, 2008
Iniciaremos uma tabela usando as tags <table> e finalizamos usando </table>
<table>…</table>
A seguir vamos separar ela em linhas e células (colunas).
Para criarmos as linhas usaremos as tags <tr> …linha… </tr>, e para cada linha faremos as colunas usando <td>..célula ..</td>. Segue exemplo:
<table>
<tr>
<td>Linha 01, célula 01</td>
<td>Linha 01, célula 02</td>
<td>Linha 01, célula 03</td>
</tr>
<tr>
<td>Linha 02, célula 01</td>
<td>Linha 02, célula 02</td>
<td>Linha 02, célula 03</td>
</tr>
<tr>
<td>Linha 03, célula 01</td>
<td>Linha 03, célula 02</td>
<td>Linha 03, célula 03</td>
</tr>
</table>
Fica assim:
|
Linha 01, célula 01 |
Linha 01, célula 02 |
Linha 01, célula 03 |
|
Linha 02, célula 01 |
Linha 02, célula 02 |
Linha 02, célula 03 |
|
Linha 03, célula 01 |
Linha 03, célula 02 |
Linha 03, célula 03 |
Para definir uma largura usaremos widht e para altura height e border para inserir a espessura da borda da tabela:
Para a tabela toda:
<table widht=”770px “ height=”430px” border=”1”> - largura de 770 pixel`s por altura de 430 pixel`s </table>
Para a célula:
<td width=”270 px” height=”50px” border=”1”>…….</td>
Como faço para chegar ao resultado a seguir:
|
Linha 01, célula 01, 02 03 |
||
|
Linha 02, célula 01 |
Linha 02, célula 02 |
Linha 02, célula 03 |
|
Linha 03, célula 01 |
Linha 03, célula 02 |
Linha 03, célula 03 |
Todos nós sabemos que são 3 células em cada linha. Vamos juntar essas 3 células da primeira linha usando colspan formando uma única célula:
<table>
<tr>
<td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
<td>Linha 02, célula 01</td>
<td>Linha 02, célula 02</td>
<td>Linha 02, célula 03</td>
</tr>
<tr>
<td>Linha 03, célula 01</td>
<td>Linha 03, célula 02</td>
<td>Linha 03, célula 03</td>
</tr>
</table>
E para juntarmos duas células em uma mesma coluna?
|
Linha 01, célula 01 |
||
|
Linha 02, célula 01 |
Linha 02, célula 02 |
Linha 02, célula 03 |
|
Linha 03, célula 02 |
Linha 03, célula 03 |
|
Agora usaremos rowspan , no exemplo acima foi juntado as células 01 e 01 das linhas 02 e 03:
Na célula 01 da linha 02 digitaremos rowspan=”2” para juntarmos as duas células, e na linha 3 eliminaremos a célula 01.
<table>
<tr>
<td colspan=”3”>Linha 01, célula 01</td>
</tr>
<tr>
<td rowspan=”2”>Linha 02 – célula 01, Linha 03 – célula 01</td>
<td>Linha 02, célula 02</td>
<td>Linha 02, célula 03</td>
</tr>
<tr>
<td>Linha 03, célula 02</td>
<td>Linha 03, célula 03</td>
</tr>
</table>
Espaçamento:
cellspacing: para inserir um espaço entre cada célula;
cellpadding: espaço entre a borda da tabela e o texto dentro da célula.
<table cellpadding=”5px” cellspacing=”5px”>…..</table>
Jair Alievi
HTML – Formatação de Texto – aula 4
11 Março, 2008
Olá, mais uma sequência das nossas aulas de html. Na aula passada vimos títulos, parágrafos e quebra de linha. Vamos ver um pouco sobre formatação agora. Então veremos o seguinte:
Estilos:
b ► Negrito – <b>negrito</b>
i ► Itálico – <i>itálico</i>
u ► Sublinhado (underline) – <u>sublinhado</u>
sup ► Faz com que o texto fique Sobrescrito – <sup>sobrescrito</sup>
sub ► Faz com que o texto fique Subscrito – <sub>subscrito</sub>
pre ► Utiliza a pré-formatação, ou seja, deixa o texto da maneira que foi digitado – <pre>…</pre>
negrito | itálico | sublinhado
Formatação da Fonte
Lembrando:
<tag atributo1=valor1 atributo2=valor2>texto</tag>
Tag <font>Texto</font>
COR:
<font color=”cor”>Texto</font>
<h1><font color=”red“>Meu Primeiro site em HTML</font></h1>
TAMANHO:
<font size=tamanho da letra>Texto</font>
<font size=3>Texto</font>
O tamanho 3 é o tamanho padrão, as outras medidas serão relativas ao tamanho 3.
<font size=+2>Letra Maior</font>
<font size=-2>Letra Menor</font>
Existem outros tipos de medidas detalhados mais a frente. Ex: 14px, 1em ….
FONTE:
O atributo FACE é o responsável pela fonte a ser utilizada da tag font:
<font face=“fonte da letra”>Texto</font>
Exemplos:
<font face=“arial” color=”blue”>Fonte Arial, azul.</font>
<font face=“arial” color=”#0000ff”>Fonte Arial, azul.</font>
Clique e veja a tabela de cores html.
Jair Alievi
