Estou disponibilizando no link abaixo uma ótima apostila de Dreamweaver CS5 em português.
"O software Adobe® Dreamweaver® CS5 permite que designers e desenvolvedores criem sites baseados em padrões com confiança. Crie visual ou diretamente no código, desenvolva páginas com sistemas de gerenciamento de conteúdo e realize testes de compatibilidade de navegador com precisão graças à integração com o Adobe BrowserLab."
Clique aqui para baixar apostila do Dreamweaver CS5
3D em CSS - parte 3
Abaixo mostro um exemplo de menu com efeito tridimensional ao passarmos o cursor do mouse.
3D em CSS - parte 2
Continuando sobre o tema 3D usando CSS, o exemplo abaixo mostra duas camadas sobrepostas através da tag z-index, criando o efeito de sombra. Esse truque pode ser usado em banners, divisões ou botões.
WEB DESIGN
3D em CSS
No CSS,podemos criar efeitos 3D em fontes usando a propriedade z-index. Se temos duas camadas, por exemplo, e o z-index de uma for igual a 1 e o da outra igual a 2, e colocarmos uma camada quase sobre a outra, criamos um efeito de sobreposição.
WEB DESIGN
WEB DESIGN
Softwares gratuitos parte 2
Para trabalhar com imagens também existem alternativas grátis para o Photoshop. Podemos citar o GIMP http://www.gimp.org/ que vem com diversos filtros interessantes, e o Paint.NET http://www.getpaint.net/ versão aditivada do Paint.
Softwares gratuitos
O Notepad ++ é o tipo de ferramenta gratuita que todo programador deveria ter.
Além de enumerar as linhas de programação, ele marca as tags de acordo com a linguagem utilizada (PHP, ASP, HTML, etc.) por cores facilitando
o trabalho de criação das páginas. Altamente recomendado.
http://notepad-plus-plus.org/
Além de enumerar as linhas de programação, ele marca as tags de acordo com a linguagem utilizada (PHP, ASP, HTML, etc.) por cores facilitando
o trabalho de criação das páginas. Altamente recomendado.
http://notepad-plus-plus.org/
Tabela de Cores
Em HTML e CSS, utilizamos cores para os elementos das páginas através de códigos hexadecimais ou pelo nome das cores em inglês. Existem na internet vários sites que mostram tabelas com os códigos de cores, como este que cito abaixo:
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Linhas de Separação
Neste post demonstro o recurso de linhas de separação de texto - HR. Veja abaixo:
Esta é uma boa maneira de separar textos.
Esta é uma boa maneira de separar textos.
Formulários Web: Menu de Opções em HTML
Oi. Hoje mostro um exemplo de menu de opções para ser usado dentro de um formulário. Para que essa informação fosse realmente enviada e processada deveríamos ter um servidor com banco de dados e uma página em ASP, PHP ou outra linguagem que permitisse registrar essas em informações on-line (o endereço da página viria dentro do espaço vazio entre aspas no código-fonte. Tudo de bom e até mais.
Efeito Zoom em texto
Olá, pessoal. O exemplo abaixo demonstra como posso alterar o tamanho da fonte usando CSS. Passem o mouse no botão abaixo e descubram. Tchau.
ZOOM
Layers ou camadas em CSS
Os chamados layers (camadas) são bastante usados para posicionar elementos dentro da página, pois podemos definir posição, altura, largura, cor, etc. de cada um, como no exemplo abaixo:
Esta é uma camada
Esta é outra camada
Menu em CSS - parte 2
Dando sequencia ao assunto menus em CSS, temos abaixo um exemplo na horizontal. Se vocês olharem o código fonte desta página, perceberão que utilizei uma lista como base do menu e apliquei CSS sobre ela.
Menus em CSS - parte 1
No exemplo abaixo, temos um menu CSS vertical, ideal para uma home page. No próximo post mostrarei um menu horizontal utilizando esta técnica. Para outras referências sobre o assunto, clique na página de Links Recomendados e pesquise nos sites do Stu Nicholls e do Maujor. Até mais!
Pg 1
Pg 2
Pg 3
Usando Tabelas
Apesar da W3C (conselho responsável pela implementação de padrões para Web) desaconselhar o uso de tabelas para exibir informações não tabuladas, elas ainda podem ser utilizadas para mostrar dados que realmente necessitem de tabulação, como planilhas. Vejam o exemplo abaixo:
| Empresas ACME | ||
| Relatório do trimestre | ||
|---|---|---|
| jan | fev | mar |
| 120 | 30 | 250 |
Usando listas
As listas são um recurso interessante quando queremos organizar um texto. Demonstro abaixo um exemplo. Olhe o código-fonte da página para entender como funciona.
- Primeiro item
- Subitem 1
- Subitem 2
- Subitem 1
- Segundo item
- Terceiro item
Por que usar CSS?
O CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata é um recurso que permite uma melhor organização das páginas de nossos sites, permitindo economizar tempo na implantação e manutenção.
Digamos que o nosso projeto de site tenha dez páginas, e que as páginas terão todas o mesmo estilo (o que é mais coerente). Se fizéssemos pela maneira tradicional, teríamos que definir uma série de elementos das páginas (cor da fonte, cor do fundo, tipo e tamanho da fonte, etc.) uma a uma, até concluirmos todas. Com CSS poderíamos criar um arquivo com a extensão .css que definiria o visual de todas as páginas apenas uma vez, e só precisaríamos fazer uma referência chamando esse arquivo nas dez páginas.
Prático, não? Se quisermos mudar todo o estilo do site, basta alterar o arquivo css.
Se vocês se interessaram pelo assunto, procurem pelos sites do Maujor e do Stu Nicholls na Web. São grandes referências sobre o assunto e ótima fonte de inspiração.
Digamos que o nosso projeto de site tenha dez páginas, e que as páginas terão todas o mesmo estilo (o que é mais coerente). Se fizéssemos pela maneira tradicional, teríamos que definir uma série de elementos das páginas (cor da fonte, cor do fundo, tipo e tamanho da fonte, etc.) uma a uma, até concluirmos todas. Com CSS poderíamos criar um arquivo com a extensão .css que definiria o visual de todas as páginas apenas uma vez, e só precisaríamos fazer uma referência chamando esse arquivo nas dez páginas.
Prático, não? Se quisermos mudar todo o estilo do site, basta alterar o arquivo css.
Se vocês se interessaram pelo assunto, procurem pelos sites do Maujor e do Stu Nicholls na Web. São grandes referências sobre o assunto e ótima fonte de inspiração.
Entenda a Web 2.0 - O retorno do JavaScript
Para quem não conhece, o JavaScript é uma linguagem de programação para web que, inserida em uma página HTML, possibilita a criação de páginas mais dinâmicas e interativas.
Não confundir com Java, que é uma outra linguagem. A linguagem JavaScript foi por algum tempo discriminada entre os desenvolvedores web, pelo fato de ser um recurso que pode ser desabilitado no navegador, o que não chega a ser um problema, já que os navegadores trazem o JS habilitado como padrão.
Mas os tempos mudam, e com o crescimento da Web 2.0 e das técnicas utilizando Ajax (onde o JavaScript e o CSS são as bases do desenvolvimento de interatividade e dinâmica) esta linguagem voltou a ter a importância que merece. Em muitas situações, o JS substitui o Flash e o Java, com a vantagem de ser muito mais leve e não necessitar de plugins instalados do lado do internauta.
Como um exemplo do que se pode fazer, coloquei abaixo um pequeno exemplo. Clique no botão abaixo e ele exibirá uma mensagem:
Assinar:
Postagens (Atom)