Autenticação de usuário e senha em PHP

Abaixo escrevi uma rotina simples para verificar se o nome e senha do usuário são válidos.
Caso sejam válidos, a página mostra o conteúdo restrito.
Caso os dados informados sejam inválidos, a página chama uma outra página mostrando falha de autenticação (um arquivo simples em formato html informando dados incorretos).

1)Crie um arquivo chamado verifica.php
contendo o código abaixo:


if (($usuario=="master") && ($senha=="12345"))
{
?>

// aqui mostra o conteúdo restrito


//caso o usuário e senha sejam inválidos, o código abaixo mostra
a página contendo erro de autenticação
}
else {
?>

}
?>


Pronto. Está criado uma rotina de autenticação para usuário. Caso deseje efetuar cadastros de usuários e senhas, aconselho utilizar um banco de dados, sugiro o MySQL, pois é free e atende muito bem as características do Php.

Bom estudos,
um grande abraço,

Autor: Reiner Franthesco Perozzo

Read more »

Posted in: Programação,Web Desing

Por que o Dreamweaver se tornou tão popular

O texto a seguir pode estar incompreensível em algumas partes, é por que eu tirei ele de um site em inglês, mesmo assim achei um ótimo post e decidi colocá-lo aqui, até a próxima.

Quando nos cursos de formação Dreamweaver, estamos sempre espantado com o número de diferentes tipos de usuário do Dreamweaver que freqüentam nossos cursos. Simplesmente não há mais um típico usuário do Dreamweaver. Temos pessoas trabalhando em todos os tipos de organização em todos os tipos de papel. Os particulares, especialistas em contabilidade, especialistas em marketing, acadêmicos, trabalhadores nos serviços de saúde ...

Das pessoas que agora querem aprender Dreamweaver a grande maioria irão nossos cursos não vai necessariamente se tornar especialistas em desenvolvimento web. Ao contrário, eles têm uma necessidade de desenvolver conteúdo para um site ou para construir um site para uma finalidade específica. Eles se debruçaram sobre as opções de software disponíveis e chegar à conclusão de que o Dreamweaver é o melhor pacote para usar e agora eles precisam aprender como ele funciona.

Dreamweaver tornou-se a indústria de desenvolvimento de software padrão web, vendo os rivais, como o Microsoft FrontPage. E merece a sua posição. É um grande pacote de software com recursos avançados e uma interface acessível que permite que qualquer um que pode usar um computador embarcar em um projeto básico de desenvolvimento de software e, com um pouco de paciência e conhecimento de alguns fundamentos, trazê-la a uma conclusão. Dreamweaver alcançou esta posição dominante, porque seus criadores têm sempre o objetivo de satisfazer as necessidades de todos os diferentes tipos de usuários de seus softwares.

Nos primeiros dias de desenvolvimento web, havia dois tipos de ferramenta de desenvolvimento web: aquelas usadas pelos codificadores (os especialistas que entenderam as tecnologias subjacentes páginas web) e as ferramentas de software visual que funcionava de forma semelhante ao processamento de texto e programas de layout de página e foram utilizados por não-especialistas e desenvolvedores web inexperientes. Os programas de visual (que inclui o Dreamweaver) tinha uma reputação muito ruim entre os profissionais da web que descobriram que o código produzido por esses programas era desajeitado, detalhado e ineficiente.

Há uns dez anos (reconhecendo a necessidade de satisfazer ambos os tipos de usuário), Macromedia, os donos do Dreamweaver começou a fazer esforços para atrair desenvolvedores web grave para o Dreamweaver. Eles abordaram a questão de código, incluindo as ferramentas de que iria limpar ineficiências no código gerado automaticamente e de compra e agregação de um utilitário de codificação chamado com o Dreamweaver. Eles também reforçaram o seu ambiente de código com funcionalidades sofisticadas como a numeração de linha, codificação de cores e código de dicas e adicionados outros recursos de código-friendly para completar o ambiente de desenvolvimento visual, como o seletor de tags, que exibe as tags HTML que representa os objetos na página .

Outra característica importante que tem ajudado a demarcar o Dreamweaver como uma ferramenta séria de desenvolvimento web é a inclusão de ferramentas para gerar conteúdo dinâmico lado servidor indústria usando linguagens de scripts como ASP e ColdFusion e, posteriormente, ASP.Net e PHP. Essa funcionalidade foi introduzida inicialmente em meados de 2000 em uma edição um pouco mais caro do Dreamweaver chamado Dreamweaver UltraDev. A idéia na época era que os desenvolvedores web pesado iria comprar UltraDev e leves iria comprar a edição padrão do Dreamweaver. No entanto, em 2002, a Macromedia UltraDev simplesmente parou de fazer e colocar toda a sua funcionalidade para a edição muito mais barato do padrão do Dreamweaver, o Dreamweaver fazer a escolha óbvia para desenvolvedores web de todos os tipos.

Macromedia também reconheceu que os desenvolvedores web profissionais geralmente trabalham em equipes e adicionou recursos de colaboração para o Dreamweaver que permitem que um grupo de pessoas para trabalhar no mesmo site sem pisar em cada um dos outros dedos. Eles chamaram o recurso "File check-in e check-out". Há também criou um ", observa o projeto" facilidades que permite que os membros das equipes de desenvolvimento para unir notas a páginas da Web individuais para a informação dos outros membros da equipe.

Como as novas tecnologias surgiram, os fabricantes de Dreamweaver responderam também por levá-los a bordo e modificando a forma como o programa gera o código. Assim, na versão mais recente do programa, Dreamweaver CS3, presume-se que o usuário será construir sites usando folhas de estilo em cascata (ao invés de tabelas HTML como era o caso) e Dreamweaver oferece uma série de trinta ou tão diferente de página CSS layouts que podem ser usadas para criar páginas eficientes e adaptadas e personalizadas à vontade.

Dreamweaver CS3, a versão mais recente do programa, também incorpora algumas características novas grandes para adicionar a funcionalidade Ajax em páginas web. Ajax oferece aos desenvolvedores web uma forma de criar aplicações web que são executados rapidamente e estão perfeitamente incorporados ao padrão de conteúdo da página web. Codificação de aplicações web Ajax exige um bom conhecimento de programação JavaScript. Usando o Spry do Dreamweaver Framework para Ajax, os desenvolvedores podem criar aplicações sofisticadas Ajax sem ter que escrever o código si.

Como novas funcionalidades são adicionadas ao Dreamweaver com cada novo lançamento, o programa continua a ter uma interface que é fácil de usar e acessível por qualquer usuário experiente de computador, trazendo desenvolvimento web ao alcance de quase todo mundo no planeta. E é esta política de satisfazer as necessidades dos profissionais, bem como iniciantes que irá sem dúvida continuar a fazer a escolha óbvia para qualquer pessoa que queira desenvolver o conteúdo da web em qualquer nível.

Read more »

Posted in: Artigos,Web Desing

Aumentando a resolução de imagens

Nos filmes e seriados, esse problema é rapidamente solucionado, parece ate mágica. O que seria de Jack Bauer, sem uma ferramenta mágicas dessas?

A realidade e bem diferente, o trabalho pra se conseguir alterar a resolução de uma imagem é de grande complexidade. É preciso paciência e muita experiência com o Photoshop.

A dica é justamente essa, existe um programinha ( totalmete gratuito) que torna essa tarefa extremamente simples. O SimillaEnlarger , é um programa que utiliza um algoritmo especial pra suavizar as bordas das imagens ( acabei me lembrando das aulas de Processamento de Imagens que tive, viva ao R).

O funcionamento do SimillaEnlager é bastante simples. A primeira coisa a fazer é arrastar a imagem que deseja redimensionar o espaço certo, e em seguida, especifique o novo tamanho da Dimensões de saída. Fique a vontade pra testar todas as configurações possíveis e qualquer momento você pode clicar em Preview para ver o resultado. Assim que estiver pronto, clique em ampliar e em Salvar para salvar a sua criação.

Não espere um resultado perfeito, pois essa aplicação ma aplicação que recebe menos perda de qualidade ao redimensionar as imagens.

Que pena que 24 Horas acabou, com essa ferramenta dava pra conseguir trabalho fácil na UCT

Link: SimillaEnlarger

Read more »

Posted in: Dicas,Downloads,Web Desing

Entendendo o mercado de servidores dedicados e planos de hospedagem

Um servidor dedicado é, como o nome sugere, uma máquina só sua, que, além de hospedar os sites da sua empresa, pode ser usado para fornecer serviços, como servidores virtuais e planos de shared hosting.

Existem várias empresas especializadas neste tipo de serviço, que oferecem desde servidores baratos, por de US$ 80 a US$ 150 mensais, até servidores mais parrudos, de acordo com suas necessidades e seu bolso. Alguns exemplos de empresas de hospedagem com preços competitivos, sediadas no exterior são:

• http://theplanet.com
• http://www.layeredtech.com
• http://www.crucialp.com
• http://www.serverbeach.com
• http://www.lpdedicated.com
• http://www.hostican.com

Temos em seguida as empresas nacionais, que oferecem o diferencial de hospedarem os servidores no Brasil, ligados diretamente aos links das operadoras nacionais. Isso garante que, na maioria dos casos, o acesso aos sites hospedados (para usuários do Brasil) seja melhor, principalmente com relação ao tempo de resposta. Alguns exemplos são:

• http://www.locaweb.com.br/
• http://www.uolhost.com.br/
• http://www.digiweb.com.br
• http://www.amt.com.br/
• http://www.datacorpore.com.br/

Os dedicados hospedados no Brasil acabam saindo quase sempre muito mais caro, como você vai rapidamente perceber ao comparar os planos.

Pode parecer estranho que os datacenters com melhor custo benefício estejam justamente nos EUA, onde a mão de obra é mais cara, mas a questão principal aqui não é o custo da mão de obra, mas sim o custo dos links. Os links nacionais são muito mais caros (sem falar nos impostos e no custo dos equipamentos comprados no Brasil), o que prejudica a competitividade de qualquer DC nacional. Com isso, as empresas nacionais são obrigadas a concorrer com base na qualidade do serviço e do suporte, e não tanto em relação aos preços.

Tudo começa com as operadoras (carriers), responsáveis pelos links de acesso. Em alguns casos, a própria operadora pode montar seu datacenter, evitando intermediários, mas o mais comum é que ele seja mantido por uma segunda empresa, que monta a estrutura necessária e contrata os links.

Por ser uma estrutura muito cara, o espaço no datacenter é cuidadosamente dividido. Cada unidade de espaço corresponde a uma das baias de um rack de servidores. Um rack de tamanho padrão possui 42 baias, e cada servidor pode ocupar de uma a quatro baias (existem casos de servidores que ocupam 6 baias, mas eles não são comuns), de acordo com o tamanho do gabinete.

Isso abre espaço para a existência de diversas camadas de atravessadores, que revendem espaço ou serviços.

No nível 1 teríamos as próprias operadoras que fornecem os links, no nível 2 a empresa responsável pelo datacenter, no nível 3 uma empresa de hospedagem que loca racks inteiros, instala e mantém os servidores, no nível 4 teríamos uma empresa menor, que loca os servidores já instalados e os fornece aos clientes individuais e, no nível 5, empresas ainda menores, que locam um ou mais servidores dedicados e vendem planos de hospedagem, ou servidores virtuais.

É por isso que existem tantas opções de serviços e tanta variação de preços. Você pode imaginar uma pirâmide similar a esta:

1. Operadora (carrier), que fornece os links.
2. Empresa responsável pelo datacenter. Contrata os links da operadora, mantém a estrutura do DC e vende espaço para instalação dos servidores.
3. Empresa de hospedagem. Aluga o espaço, instala os racks e os servidores e loca os servidores individuais.
4. Revendedor. Loca os servidores (normalmente obtendo descontos por causa dos volumes) e os revende, incluindo suporte ou outros serviços que justifiquem o aumento no preço em relação aos servidores fornecidos diretamente pela empresa de hospedagem.
5. Prestador de serviços. Loca alguns servidores e revende planos de hospedagem, servidores virtuais ou outros serviços, que permitam fracionar um único servidor entre diversos clientes.
6. Atravessador. Apenas revende serviços prestados por outros, recebendo comissão.

Como em outras áreas, quanto mais alto na pirâmide você conseguir se posicionar, melhor. De uma forma geral, você entra no terceiro nível, locando um servidor dedicado diretamente a partir da empresa de hospedagem e, se for o caso, revende planos de hospedagem e outros serviços utilizando o servidor (fazendo assim o papel de revendedor ou prestador de serviços).

Em muitos casos, as camadas se interpolam. Em alguns casos a própria operadora pode decidir montar um datacenter e invadir o nível 2 da pirâmide, ou a empresa responsável pelo datacenter pode decidir começar a atender os clientes individuais, invadindo os níveis 3, 4 e 5.

Dependendo do volume de servidores que você deseja hospedar, pode ser vantajoso montar as máquinas e locar diretamente o espaço no datacenter (nível 2) em vez de locar os servidores implantados por outra empresa.

Além dos servidores dedicados, tempos também a categoria do VPS (Virtual Private Server) que são servidores semi-dedicados, que rodam sobre uma máquina virtual, dentro do Virtuozzo, VMware Server, Xen ou outro sistema de virtualização. Isso reduz bastante os custos para a empresa de hospedagem, já que um único servidor pode hospedar vários VPS, com os recursos de hardware sendo compartilhados entre eles.

Os planos de VPS são bem mais comuns que os de servidores dedicados, pois inúmeras empresas locam servidores e revendem servidores virtuais. Com isso, existe uma variação muito grande na qualidade dos planos.

Os planos de VPS de maior qualidade custam a partir de US$ 40, com 256 MB de RAM, 40 GB ou mais de armazenamento e garantia de disponibilidade de pelo menos 10 ou 20% dos recursos do processador, independentemente do uso dos demais servidores virtuais hospedados na mesma máquina.

Existem diversos planos de VPS de baixo custo, muitos deles abaixo da faixa dos 10 dólares, o faz com que os planos sejam interessantes se você quer apenas hospedar alguns sites de baixo tráfego ou quer ter um servidor para estudar e fuçar.

Um exemplo de empresa já antiga nesse nicho é a http://vpslink.com/, que oferece planos a partir de US$ 7.95. Outras empresas que oferecem planos de VPS abaixo da marca dos US$ 10, mantendo uma qualidade de serviço aceitável são: https://www.rapidvps.com,http://www.wsservers.com e http://www.vpsville.ca

Concluindo, temos os planos de shared hosting, os planos de hospedagem "simples", onde você tem acesso a uma conta de FTP ou uma interface web para dar upload dos arquivos do site, tem uma quota de espaço e uma quota de transferência mensal e paga por domínio hospedado.

Além dos planos de hospedagem gratuita, existem inúmeras opções de hospedagem com quotas generosas de transferência e preços extremamente baixos, incluindo planos "milagrosos", como no caso de serviços como o http://dreamhost.com/ e o http://www.bluehost.com/.

Estes planos são possíveis devido ao uso de overselling, onde são vendidos um volume muito maior de planos do que o suportado pela estrutura de hospedagem, partindo da premissa de que apenas alguns dos usuários realmente consumirão todos os recursos oferecidos pelo plano, assim como no caso de serviços como o Gmail.

Read more »

Posted in: Artigos,Dicas,Web Desing

Gerando estatísticas com o webalizer

O Webalizer é um gerador de estatísticas de acesso para o servidor web. O Apache, por si só, loga todos os acessos feitos ao servidor, incluindo as páginas acessadas, o tráfego gerado, os navegadores e os sistemas operacionais usados pelos clientes, entre outras informações úteis para entender os hábitos e interesses de seus visitantes.

Com o Apache funcionando, é simples instalar o Webalizer: procure pelo pacote "webalizer" dentro do gerenciador de pacotes. Ele é incluído em todas as principais distribuições. Nas derivadas do Debian, você pode instalá-lo via apt-get:

# apt-get install webalizer 

Ao contrário do Apache, o Webalizer não é um serviço que fica residente, mas sim um executável que precisa ser chamado cada vez que quiser ver a página de estatísticas atualizada. Basta chamá-lo como root:

# webalizer 

Por padrão, a página de estatísticas é armazenada na pasta "webalizer/", dentro do seu servidor web. Se o Apache estiver configurado para armazenar as páginas dentro do diretório "/var/www", então as estatísticas vão para a pasta "/var/www/webalizer".

O arquivo de configuração do Webalizer é o "/etc/webalizer.conf". É importante que você revise o arquivo de configuração, indicando pelo menos a localização correta do arquivo de log do Apache e alterando a pasta onde as estatísticas ficarão armazenadas, caso não queira que elas fiquem disponíveis ao público. Você pode armazená-las em uma pasta isolada no servidor web, como, por exemplo, "/var/webalizer", de forma que elas fiquem disponíveis apenas localmente ou através de um script. As duas opções "essenciais" dentro do arquivo são:

LogFile /var/log/apache/access.log OutputDir /var/www/webalizer 

Para não precisar executar o comando "webalizer" manualmente sempre que precisar atualizar as estatísticas, você pode configurar o cron para executá-lo automaticamente uma vez por dia ou uma vez por hora. Para isso, basta criar um script dentro da pasta "/etc/cron.daily/" ou "/etc/cron.hourly/", contendo o comando "webalizer".

Todos os scripts colocados dentro dessas pastas são, respectivamente, executados todos os dias de manhã, ou uma vez por hora. Para que funcione, é importante verificar se o serviço "cron" ou "crond" está ativo. No caso do Debian, o script para execução do webalizer através do cron é criado automaticamente e configurado para ser executado uma vez por dia.

Em um servidor Apache com vários virtual hosts, é possível fazer com que o Webalizer gere estatísticas separadas para cada um, com uma configuração um pouco mais cuidadosa.

Read more »

Posted in: Dicas,Web Desing

Apache: Instalando o suporte a PHP e MySQL

No início, existiam apenas páginas html estáticas, com links atualizados manualmente. Depois, surgiram os scripts CGI (geralmente escritos em Perl), que permitiram criar vários tipos de formulários e automatizar funções. Finalmente, surgiu o PHP, adotado rapidamente como a linguagem padrão para criação de todo tipo de página dinâmica, fórum ou gerenciador de conteúdo.

Além da linguagem ser bastante flexível, um script em PHP chega a ser mais de 100 vezes mais rápido que um script CGI equivalente, além de mais seguro. Em resumo, um script CGI é um executável, que precisa ser carregado na memória, executado e descarregado cada vez que é feita uma requisição. No caso do PHP, o interpretador fica carregado continuamente e simplesmente vai executando de forma contínua os comandos recebidos dos scripts incluídos nas páginas.

Com o suporte a PHP ativado, o Apache continua exibindo diretamente páginas com extensão .htm ou .html, mas passa a entregar as páginas .php ou .phps ao interpretador php, que faz o processamento necessário e devolve uma página html simples ao Apache, que se encarrega de enviá-la ao cliente.

Estas páginas processadas são "descartáveis": cada vez que um cliente acessa a página, ela é processada novamente, mesmo que as informações não tenham sido alteradas. Dependendo do número de funções usadas e da complexidade do código, as páginas em PHP podem ser bastante pesadas. Não é incomum que um site com 100.000 pageviews diários (o que corresponde a umas 5 a 8 requisições por segundo nos horários de pico) precise de um servidor dedicado, de configuração razoável.

Quase sempre, os sistemas desenvolvidos em PHP utilizam também um banco de dados MySQL ou Postgre SQL. Naturalmente, é perfeitamente possível que os scripts simplesmente salvem as informações em arquivos de texto dentro do diretório do site, mas isso resultaria em um desempenho muito ruim, sem falar em eventuais brechas de segurança. Utilizar um banco de dados permite armazenar um volume muito maior de informações, acessíveis de forma mais segura.

O MySQL é um banco de dados extremamente versátil, usado para os mais diversos fins. Você pode acessar o banco de dados a partir de um script em PHP, através de um aplicativo desenvolvido em C ou C++, ou praticamente qualquer outra linguagem (até mesmo através de um shell script! :).

Você pode instalar vários scripts diferentes (um fórum, um chat e um gestor de conteúdo, por exemplo) no mesmo servidor e, inclusive, várias cópias de cada um. Isso é cada vez mais utilizado, tanto dentro de sites que oferecem diversos serviços, quanto em servidores compartilhados, onde os responsáveis por cada site têm a liberdade de instalar os sistemas de sua preferência. Isso é possível graças à possibilidade de criar usuários e dentro do MySQL e definir os privilégios de cada um, assim como nas contas do sistema.

Read more »

Posted in: Dicas,Web Desing

Colocar fundo degradê na página

Vou mostrar como construir o fundo degradê usando o Fireworks.

Use o seu editor preferido.

1-) Abra o FW e tecle Ctrl + N para abrir um novo documento;

2-) Ajuste as dimensões do palco para 10px x 700px e cor transparente;

1-) Desenhe um retângulo com as dimensões do palco e aplique o preenchimento degradê;

Ajuste o degradê e salve com a extensão .jpg

Neste tutorial salvei como bgdegrade.jpg

Esta é a regra CSS que coloca o degradê como fundo da página:

Nota: Defina também uma cor para o fundo que ofereça contraste com os textos na página, pois se por acaso a imagem do fundo não for carregada no browser do usuário você garantirá a legibilidade da página.
Imagine um fundo degradê em cor escura onde você projetou textos em cor branca. Se a imagem de fundo não for carregada o fundo assumirá uma cor clara (em geral branca) e os textos ficarão invisíveis.
Nesta dica adotei a cor alternativa para o fundo #02CBFF (azul claro)

Read more »

Posted in: Dicas,Web Desing

Construção de uma Tabela com cantos arredondados

Neste artigo abordarei o uso do (FW) Fireworks e (DW) Dreamweaver para obter um efeito de bordas arredondadas em tabelas. O objetivo é "quebrar" aquela apresentação fria, quadrada e padrão do formato retangular das tabelas tão usadas para definir layouts. É uma maneira bastante simples de se obter um visual diferente e o exemplo que vou seguir tem como finalidade apresentar a técnica geral. Com criatividade você conseguirá outros efeitos. ESTE TUTORIAL SUPÕE QUE VOCÊ TEM NOÇÕES BÁSICAS DE MANIPULAÇÃO DAS FERRAMENTAS DO FW e do dreamweaver .

O efeito final que a que nos propomos está ilustrado na figura abaixo:

Uma tabela com os quatro cantos arredondados.

Vamos assumir que o fundo geral da página é na cor cinza escuro (#666666) e o fundo da tabela é na cor cinza claro (#EEEEEE), como mostrado na figura acima.

Observe na figura abaixo uma visão "raio X" da tabela:

Trata-se de uma tabela com 03 linhas e 03 colunas. A célula marcada com o número 1 destina-se ao conteúdo (um texto no caso mais comum ou uma figura ou um formulário, etc..) da tabela. As células marcadas com o número 2 são os quatro cantos arredondados da tabela. Vamos admitir para o nosso exemplo que as células dos cantos têm as dimensões de 25 x 25 pixels.

Vamos ao FIREWORKS, construir os cantos arredondados. Existem várias maneiras de você criar os quatro cantos. Não está em discussão neste tutorial qual a melhor delas. Se você tem uma maneira diferente desta que usei, vá em frente! Use-á.

Parte 1 - FIREWORKS

Abra o FW - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para Largura: 50 pixels - Altura: 50 pixels - Cor da Tela: transparente. Tecle OK.

Construa um quadrado de 50 x 50 ocupando todo o palco, sem bordas e com cor do preenchimento #666666. Atenção: o preenchimento do quadrado deve ser com mesma cor do fundo da página. A seguir construa um círculo com 50 px de diâmetro, sem bordas e com cor do preenchimento #EEEEEE. Atenção: o preenchimento do círculo deve ser com mesma cor do fundo da tabela. Você agora está com uma figura igual a mostrada abaixo:

Vamos agora transformar nossa figura em BITMAP. Selecione as duas figuras que você criou abra o menu "Modificar ===> Nivelar seleção" (ou tecle Ctrl+Alt+Shift+Z) e você agora tem uma imagen bitmap.

Ver figura abaixo: 1- Selecione a ferramenta "Cortar". 2- Ajuste suas dimensões para 25 x 25 e seu canto superior esquerdo em cima do canto superior esquerdo do bitmap criado. 3-Vamos cortar o canto arredondado superior esquerdo! Dê duplo clique dentro do "quadradinho" do cortar e Zás. 4- O primeiro canto está pronto. Exporte e salve com o nome sup_esq.gif

Vamos a construção dos três cantos restantes. Abra o arquivo recém criado sup_esq.gif Ver figura abaixo: Selecione o desenho e vá no menu "Modificar ===> Transformar ===> Inverter Horizontalmente"

Com essa ação você inverte a figura na horizontal e obtém o canto superior direito. "Salve" a figura como sup_dir.gif A estas alturas você já descobriu como construir as duas que faltam não é mesmo? O procedimento é o mesmo, selecione a figura que você acabou de "salvar" e vá ao menu "Modificar,Transformar,Inverter Verticalmente" você obtém a inf_dir.gif De modo semelhante obtenha inf_esq.gif

Abaixo estão os quatro cantos para você transferir para seu HD, caso não queira construí-los. Clique com botão direito do mouse sobre a figura e "Salvar figura como".

sup_esq.gif

sup_dir.gif

inf_esq.gif

inf_dir.gif

Parte 2 - DREAMWEAVER

Abra o - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Abra um novo documento (Página básica-HTML). Tecle OK.

Ajustando a cor do fundo da página; No menu "Modificar" selecione "Propriedades da Página" (ou tecle Ctrl+J), para abrir a caixa das Propriedades da página. Digite o Título da Página e ajuste a cor do fundo para #666666. Tecle OK Ver figura abaixo:

Inserindo a tabela; 1- selecione a aba "Tabelas"; 2- Clique no ícone das tabelas para abrir a caixa "Inserir Tabelas" (ou tecleCtrl+Alt+T); 3- Ajuste os parâmetros de construção da tabela conforme a figura abaixo e tecle OK.

Selecione a aba "Layout" e a "Visualização padrão", para ter a tabela neste modo, na janela de visualização. Ver figura abaixo:

Vamos inserir as imagens dos cantos arredondados nas células correspondentes: Ver na figura acima: CÉLULA A - figurasup_esq.gif CÉLULA B - figura sup_dir.gif CÉLULA C - figura inf_esq.gif CÉLULA D - figura inf_esq.gif

Para inserir a figura na célula A: Clique dentro da célula; Menu "Inserir", "Imagem" (ou tecle Ctrl+Alt+I) para abrir a caixa de origem do arquivo de imagem. Selecione a imagem sup_esq.gif e tecle OK. Faça o mesmo com os três cantos restantes e você terá uma imagem como a figura abaixo:

Coloque o cursor em cima da linha 1 e arraste para a posição 2. Faça o mesmo de 3 para 4. Sua tabela ficará como na figura abaixo:

2- mude a cor do fundo da tabela digitando a cor #eeeeee no campo correspondente. 3- clique no ícone de tabela e sua tabela assumirá o aspecto abaixo:

Coloque o cursor na célula F e digite seu texto. Nota: Como você já deve ter percebido as células E e G podem ser preenchidas com conteúdo, mas sem ultrapassar sua altura, no caso 25 px. A célula F pode expandir-se a vontade sem interferir com os cantos arredondados. (Faça experiências para analisar!).

Abaixo um exemplo de aplicação de tabela com canto arredondado construido na tabela gerada conforme esta matéria:

E isso pessoal!
E, agora a melhor parte do novo aprendizado. Os exercícios e pesquisas individuais e novas descobertas :-)
Crie outros arquivos e experimente:
...coloque cantos chanfrados na sua tabela;
...construa uma figura para inserir nas células E e G (ver segundo desenho acima), que se integre com os cantos!
...e milhares de outras combinações! ...DESCUBRA A VERSATILIDADE DAS FOLHAS DE ESTILO EM CASCATA. Um abraço e até a próxima.

Fonte: maujor.com

Read more »

Posted in: Dicas,Web Desing