Passei um tempinho fora devido a muitos jobs (graças a Deus ), mas estou retornando com um post muito interessante.

Vez por outra, dependendo do projeto, para ganharmos tempo, necessitamos de modelos de estrutura de layouts  nos padrões W3C, CSS, XHTML para criarmos nosso design sobre essas estruturas. E selecionei alguns sites de referência sobre o assunto. E o melhor de tudo: “de grátis”.

Bom proveito.

Free CSS Layouts e Templates

Free CSS Layouts e Templates

CSS Layout Ideas and all that Jazz

CSS Layout Ideas and all that Jazz

CSS – Cutting edge Cascading Style Sheets. Experiments in CSS

CSS - Cutting edge Cascading Style Sheets. Experiments in CSS

Intensiv Station

Intensive Station

Layout Gala: a collection of 40 CSS layouts

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

Litle Boxes

Litle Boxes

Nice and Free CSS Templates

Nice and Free CSS Templates

Simplify your CSS designs with these easy Pure CSS Layouts

Simplify your CSS designs with these easy Pure CSS Layouts

Max Design – Sample CSS Page Layouts

Max Design - Sample CSS Page Layouts

CSS Layout Generator | CSS Creator

CSS Layout Generator | CSS Creator

CarlosHPS Webdesigner

Olá, pessoal

Mais uma vez estamos concorrendo ao Concurso Peixe Grande. De um ano para cá melhoramos muito em termos de conteúdo, acessibilidade e relevância para todos.

O Peixe Grande é um concurso de sites criado em 2004 pela Arteccom, editora da Revista Webdesign, com o objetivo de descobrir, divulgar e premiar novos talentos e empreendedores que estão conquistando o mercado digital brasileiro. Dessa forma, o Concurso Peixe Grande incentiva o aumento da qualidade dos websites brasileiros e ajuda na ascensão dos nossos profissionais na rede. Com o grande sucesso alcançado nas edições anteriores, o concurso se consolidou como referência para a área, e o Selo Peixe Grande tornou-se um sinalizador de qualidade em todo o país. Na edição de 2008, a Arteccom criou a categoria Blog, com a finalidade de divulgar e valorizar aqueles que se empenham em distribuir bom conteúdo na rede.

Então, pessoal, ajude-nos e votem no nosso blog.

Basta clicar nas imagens acima ou abaixo e fazer a votação

Obrigado.

CarlosHPS Webdesigner

Salve-salve Fireworkseiros de plantão!

Neste tutorial veremos uma excelente aplicação do Fireworks para apresentação de um projeto, geralmente um protótipo, ao cliente em formato PDF em poucos cliques.

A idéia é criar links dentro do próprio projeto que levam o cliente a outra página contida no mesmo arquivo que foi gerado em PDF, dando-lhe uma sensação de estar navegando em um site que na verdade, ainda nem foi publicado na Internet.

Pré-Requisitos

Facilidade quanto ao manuseio do Fireworks CS4

Objetivo

Gerar um arquivo PDF com as páginas (e links) de um protótipo criado pelo Fireworks CS4

Conteúdo

1º Passo – Criando as Páginas do Protótipo

Vamos aproveitar o layout disponiblizado para download no tutorial Criando Layout – Empresa de Tecnologia: Parte 2,  para facilitar o entendimento deste tutorial.

Com o arquivo aberto (obviamente :P), devemos ter visível no painel à direita, a seção Pages (F5) para renomear a página atual e criar uma duplicação. Para dar um nome a página, basta clicarmos duas vezes sobre o nome da mesma e trocarmos, como sugestão, para HOME.

Fig. 01 - Nomeando página

A intenção é aproveitarmos os links do layout e criarmos (só a efeito de exemplificação) as páginas internas no intuito de apresentarmos o cliente. E para reaproveitarmos a “home”, vamos criar mais 4, dando-lhes os respectivos nomes:

• A Empresa
• Serviços
• Suporte
• Fale Conosco

Fig. 02: Duplicação das páginas

2º Passo – Editando as Páginas Duplicadas

Só para ilustrar, pois o objetivo deste tutorial é outro, fiquemos à vontade para editar as páginas duplicadas. Para isso é só clica na página indicada e fazer sua edição. As minhas ficaram assim:

Fig. 03: Edição das páginas internas

3º Passo – Criando Links Internos

Páginas criadas e editadas, agora elas estão prontas para serem vinculadas através de links internos. Então, voltemos à página “HOME” para que, a partir delas, criemos tais vínculos no menu.

Utilizando a ferramenta Rectangle Hotspot Tool, selecionemos a área onde desejamos criar um link, e no Painel Properties, façamos o direcionamento como mostrado na imagem a seguir:

Fig. 04: Criando links

Com este mesmo procedimento, façamos todos os outros links para as outras páginas e, em todas elas, não esqueçamos de criar um link para colocar no logotipo das páginas, com link para a “HOME”.

4º Passo – Exportando o Projeto em PDF

Concluída a etapa de criação de links, agora vem a parte mais fácil: criar o arquivo PDF.

Para isso, acessemos o menu File > Export e configuremos como na imagem a seguir:

Fig. 05: Exportação em PDF

Bom, pessoal, agora é só abrir o arquivo e conferir os links.

A dica que eu dou é que vocês criem uma capa de apresentação, cabeçalho e rodapé também para ficar bem apresentável.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

No tutorial de hoje veremos como criar um cartão de visitas profissional, com dimensões, formatos, tipografia e ilustrações voltadas aos profissionais freelancer’s da web espalhados por este “mundão” a fora, ok?!

O detalhe aqui é que não utilizaremos uma ferramenta especí­fica para produções impressas como o Corel Draw ou o Indesign, mas sim, nosso velho e multi-uso Fireworks e, ao final, exportaremos o cartão em um formato compatí­vel, tudo bem?!

Pré-Requisitos

• Facilidade quanto ao manuseio do Fireworks.

Objetivos

• Criar um cartão de visitas profissional utilizando o Fireworks.

Conteúdo

1º Passo – Configurando as Dimensões

Inicialmente, aqui no Brasil, as gráficas trabalham com diversos formatos e dimensões para cartões de visitas, mas o padrão são os de 9.5cm x 5.5cm. E como estamos utilizando o Fireworks, devemos configurar sua resolução para 300 pixel/Inch afim de melhorar no momento da impressão do cartão.

Fig. 01: Dimensões e resolução do cartão

Só para ressaltar, mesmo colocando as dimensões em centímetros no momento da criação do novo arquivo, automaticamente o Fireworks converte para pixel. Sendo assim, 9.5 x 5.5 cm é a mesma coisa que 1122 x 649 pxiel.

2º Passo – Configurando as Linhas-Guias

Para os “novatos” com o Fireworks, é preciso ativar as réguas pelo menu View > Rulers (Ctrl + Alt +R). E para criar as linhas-guias, basta clicar sobre a régua, segurar e arrastar para a área de desenho.

Em um processo de criação de um cartão de visitas em uma gráfica, é preciso que definamos duas áreas: a de corte e a de segurança. Estas áreas são delimitadas pelas linhas-guias. Uma área de corte ideal, fica entre 3mm a 5mm da área de segurança. Portanto, faremos aqui com de 3mm, ok?!

Fig. 02: Linhas-Guia

Para deixarmos as linhas-guia exatamente onde queremos, basta darmos dois cliques sobre as mesmas e determinarmos suas posições. Sendo assim, criemos as seguintes marcações:

Horizontal

0 – 35 – 1087 – 1122

Vertical

0 – 35 – 614 – 649

Fig. 03: Posicionamento das linhas-guia.

3º Passo – Configuração do Background (fundo): Textura

Criaremos um fundo meio estilo Windows Vista para este cartão. Para isso, as imagens utilizadas estão disponíveis logo abaixo:

Importemos (Ctrl + R) a Textura-1.jpg e a alinhemos como na imagem abaixo:

Fig. 04: Alinhamento da imagem

Agora, para desfocá-la, vamos utilizar o filtro Blur, acessado em Filters > Blur > Gaussian Blur.

Fig. 05: Filtro Gaussian Blur

O resultado obtido é este:

Fig. 06: Aplicação do Gaussian Blur

Em seguida, vamos criar um retângulo com as mesmas dimensões do cartão para refinarmos o background, aplicando em seguida, um preenchimento gradient radial nos tons de azul:

Fig. 07: Retângulo com preenchimento Gradient Radial

Atenção!
A camada (layer) que contém o retângulo azul deve estar sobre a imagem inserida anteriormente.

E para concluirmos esta parte, aplicaremos um Blend mode > Hard Light neste retângulo e com Opacidade (opacity) 85%, obtendo o seguinte resultado:

Fig. 08: Aplicação do Blend mode.

4º Passo – Configuração do Background: Curvas

Pronto! Já preparamos a textura do nosso cartão. Agora iremos criar e estilizar algumas linhas curvas, resultando em um efeito bem moderno e diferenciado.

Com a ferramenta Pen Tool, façamos uma curva como mostrada a seguir:

Fig. 09: Criação de um linha curva

Em seguida, apliquemos um preenchimento grandiente, retiremos a borda e incluamos mais um Blend mode como na imagem abaixo:

Fig. 10: Formatação da curva

E com isso, teremos o seguinte efeito:

Fig. 11: Resultado da aplicação de efeitos à curva

E, utilizando esta mesma técnica, alternando as opacidades e Blends modes, façamos várias curvas e distribuamos pelo cartão. Minha distribuição ficou assim:

Fig. 12: Resultado das curvas

5º Passo – Inserindo o Logotipo

Façamos agora um retângulo que servirá de “cercadura” para a inserção do logotipo. Utilizei o meu. Fique à vontade para usar o seu ou outro.

Neste retângulo (rotacionado), apliquemos as seguintes formatações:

Fig. 13: Inserção do logotipo

6º Passo – Inserção dos Textos

E para finalizarmos, basta inserirmos os dados que conterão no cartão de visitas, mandar para a gráfica e começar a distribuir

E como resultado final, vejamos:

Fig. 14: Resultado final

7º Passo: Download

Bom, pessoal, até a próxima.

CarlosHPS Webdesigner

Webtutoriais:B4FAB27C

Salve-salve Fireworkseiros de plantão!  

Vamos à conclusão deste layout?!

Pré-Requisitos

• Ter concluído a 1ª parte deste tutorial. Se não, clique aqui.
• Facilidade quanto ao manuseio do Fireworks CS3/CS4.

Objetivo

Concluir um layout para uma empresa de tecnologia utilizando o Fireworks.

Conteúdo

1º Passo – Barra de Separação

Observando bem o layout final da 1ª parte deste tutorial, é percebido a necessidade de criarmos uma divisória entre o conteúdo principal e o secundário. Podemos fazer de diversas maneiras: criando caixas com cores diferenciadas, gradientes, bordas…

Mas neste caso, utilizaremos uma simples e eficiente, barra de separação.

Então, vamos criar dois retângulos com as dimensões 940 x 1 pixel cada, nas cores de preenchimento, #FFFFFF e #D3DDE4.

Fig. 01: Barras divisórias

Aí você me pergunta:

“Mas Carlos, eu poderia ter criado duas linhas ao invés de dois retângulos?”

Sim, poderia, mas, por incrível que pareça, um arquivo/imagem fica mais “leve” quando utilizamos menos linhas, bordas para as artes gráficas. Aí vai uma dica que vale ouro….hehehe 

2º Passo – Criando o Blocos de Conteúdo

Lembram do wareframe criado no tutorial anterior?

Fig. 02: Wareframe do layout

Pois bem, existem 3 blocos de conteúdo. Então vamos lá!

Criemos 2 retângulos com as dimensões 240 x 143 px nos dois das extremidades, 1 retângulo de 245 x 143 px, no bloco do centro e os coloquemos de acordo com a imagem:

Fig. 02: Posicionamento dos blocos de conteúdo secundário no layout.

Observemos que o alinhamento através das linhas-guia são fundamentais para organizarmos e harmonizarmos os elementos e conteúdos do layout.

Sabendo destes posicionamentos, agora é só inserir o devido conteúdo:

Fig.03: Conteúdo dos blocos secundários

3º Passo – Rodapé

E para finalizarmos, basta inserirmos o copyright (direitos autorais) e, com a autorização prévia do cliente, nosso logotipo ou dizeres “desenvolvido por”. E eis o resultado final:

Fig. 04: Layout finalizado

CADASTRE-SE no blog e faça o download do arquivo final em PNG:

Note: There is a file embedded within this post, please visit this post to download the file.

Um grande abraço e até a próxima.

CarlosHPS Webdesigner

Salve-salve Fireworkseiros de plantão!

Neste tutorial, veremos como criar um layout para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.

Pré-Requisitos

Facilidade quanto ao manuseio do Fireworks CS3/CS4

Objetivo

Criar um layout para uma empresa de tecnologia utilizando o Fireworks

Conteúdo

1º Passo – Definindo a Estrutura do Site

Como mencionei no tutorial Criando um Site Passo-a-Passo: Parte 5, a utlização de um Wireframe, ou seja, a criação de uma estrutura antes do desenvolvimento em si, faz com que economizemos tempo e otimizemos o processo de criação. Pensando nisso, vejamos como está dividido o layout a ser desenvolvido:

Fig. 01 - Wareframe - Estrutura do website

2º Passo – Utilizando Modelo do 960 Grid System

Grande parte dos layouts desenvolvidos por mim, utilizo como base para alinhamento e proporções, modelos do 960 Grid. Portanto, façamos o download no site oficial – 960.gs e descompactemos os arquivos PNG. Ao descompactarmos, veremos dois modelos: um 12_col (contém 12 colunas) e outro, 16_col (contém 16 colunas).

E qual deles usar?

Simples. Geralmente (eu disse: geralmente), se o layout tiver 3 caixas (exemplo: “Sobre a Empresa, Atendimento e Notícias, como na Fig. 01″), utilizaremos o modelo 12_col. Isso porque 12 é múltiplo de três. Já para um layout com 4 caixas, utilizaríamos o 16_col, devido o fato de 16 ser múltiplo de quatro.

Então, ao abrirmos o arquivo 960_grid_12_col.png, teremos:

Fig. 02: 960 Grid System - 12 Colunas

3º Passo – Criação do Topo – Tarja

Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”:

Fig. 03 - Criação da tarja do topo

4º Passo – Criação do Topo – Barra de Menu

Criemos outro retângulo de dimensões 940 x 30 pixel, com a mesma cor da tarja e posicionamento X: 40 e Y: 70:

Fig. 04: Barra de menu

5º Passo – Criação do Topo – Logotipo, Feed e Twiter

Realizando os downloads do logotipo e ícones, complementaremos o topo como mostra as orientações das figuras 05 e 06 a seguir:

Fig. 05: Posicionamento do logotipo

Fig. 06: Ícones, Feed, Twiter e links do topo

Vejamos o resultado até aqui:

Fig. 07: Resultado até aqui

6º Passo – Criação do Topo – Barra de Menu

E concluindo o topo, utilizando a fonte Arial Narrow, tamanho 13 e cor #D7E1E8, posicionemos os itens como na imagem a seguir:

Fig. 08: Barra de menu - links

7º Passo – Criação do Background

Passemos agora para a criação do background do site. Façamos um retângulo com as dimensões 940 x 350 pixel. Em seguida, vamos aplicar um preenchimento gradiente do tipo barra (bars) com as cores branca e azul conforme a imagem abaixo:

Fig. 09: Criação do background

8º Passo – Inserindo Imagem dos Computadores

De acordo com a imagem abaixo, após realizarmos o download dos computadores, posicionemos nas coordenadas – X: 379 | Y: 71. E Complementemos com o slogan da empresa: “Empresa Especializada em Tecnologia WEB”

Fig. 10: Inserção do slogan da empresa e imagem ilustrativa

9º Passo – Lista de Serviços – Textos

Criaremos agora a lista de serviços da empresa, juntamente com seus botões e ícones.

Posicionemos os textos conforme a imagem abaixo:

Fig. 11: Lista de serviços da empresa

10º Passo – Lista de Serviços – Ícone

Agora, criaremos os ícones para cada item da lista.

Primeiramente, façamos um círculo na cor branca e com as dimensões 14 x 14 px. Depois uma estrela que se transformará num triângulo de 7 x 6 px.

Fig. 12: Criação do ícone

11º Passo – Lista de Serviços – Botões

E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”

Fig. 13: Criação do botão

O mesmo processo deverá ser aplicada para a criação do outro botão.

Vejamos o resultado até aqui:

Fig. 14: Resultado parcial da primeira parte do tutorial

Bom, pessoal

No próximo tutorial, concluiremos o layout.

Até lá.

CarlosHPS Webdesigner

Webtutoriais:1AE7E97B

Você é daqueles que gosta de criar layouts para websites no estilo “clean”, limpo, leve e simples? Então veio ao local certo

Neste tutorial veremos como estilizar botões com ícones e implementá-los em um código HTML básico com formatação CSS.

Pré-Requisitos

• Ter facilidade em manusear o Fireworks (a partir da versão CS3)
• Ter noções básicas de HTML
• Ter noções básicas de formatação em CSS

Objetivo

Inserir os botões e seus ícones em um código HTML básico e formatando-os com CSS

Conteúdo

Pensando na parte gráfica e no design, primeiramente vamos criar um fundo padrão para os botões para que os mesmos possam receber os ícones. Feito isso, numa página HTML simples, vamos inserir estes botões e com o CSS, formatar os ícones e fontes para que dêem o tão esperado visual “clean”.

1º Passo – Criando o Botão

Vamos desenhar um retângulo (que servirá como imagem de fundo) com as dimensões 200 x 40 px com cantos arredondados e cores pastéis de acordo com a imagem abaixo:

Fig. 01: Criando o fundo do botão no Fireworks

Agora é só exportar em formato gif ou png com fundo transparente para uma pasta destinada a este tutorial.

2º Passo – Download dos Ícones

Para os ícones, utilizaremos as dimensões 24 x 24 pixel, ok?! Basta fazermos o download dos mesmos clicando no link abaixo: Note: There is a file embedded within this post, please visit this post to download the file. Estes ícones foram disponibilizados gratuitamente pelo seu autor, Creative 9 Design.

3º Passo – Trabalhando o Código HTML

Para nós que já sabemos o básico do HTML, não necessitaremos de muita coisa não, apenas utilizar esta simples estrutura:

• Um link (tag a)
• Uma tag no interior do link

<a href="#" class="botao"><span class="home">Página Inicial</span></a>

Veja o detalhamento deste código:

Fig. 02: Classes na tag a

O importante a observar que, para cada botão (que terá uma mesma classe para todos), um ícone diferente é definido na tag span através de uma classe única. Obedecendo esta sequência lógica, vamos criar mais alguns botões, utilizando a codificação a seguir:

<a class="botao" href="#"><span class="home">Página Inicial</span></a>
<a class="botao" href="#"><span class="usuario">Cadastrar Usuário</span></a>
<a class="botao" href="#"><span class="email">Verificar E-mail</span></a>
<a class="botao" href="#"><span class="calendario">Agendar Compromisso</span></a>
<a class="botao" href="#"><span class="senha">Senha de Acesso</span></a>
<a class="botao" href="#"><span class="imprimir">Configurar Impressão</span></a>

4º Passo – Trabalhando o Código CSS

Primeiramente, vamos configurar o nosso botão – largura, altura, imagem de fundo, alinhamento, etc:

a.botao {
background: url(imagens/botao.png);
line-height: 40px;
font-weight: bold;
color: #404040;
text-decoration: none;
display: block;
height: 40px;
width: 200px;
margin-bottom: 10px;
}
a:hover.botao {
color: #C00;
}

Lembrando que o “body” foi utilizado para pré-definir as fontes.

E em seguida, para cada botão, vamos configurar um ícone:

/*******************
Classes de cada botão
********************/
/*Botão HOME*/
.home {
background: url(imagens/home.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão USUÁRIO*/
.usuario {
background: url(imagens/usuario.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão E-MAIL*/
.email {
background: url(imagens/email.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão AGENDA*/
.calendario {
background: url(imagens/calendario.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão SENHA*/
.senha {
background: url(imagens/acesso.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão E-MAIL*/
.imprimir {
background: url(imagens/imprimir.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}

O resultado final será este, pessoal:

Pegue o código-fonte, clicando no link abaixo:

Até a próxima, pessoal.

CarlosHPS Webdesigner

Webtutoriais:61CE45A6

Olá, pessoal Como prometido, veremos nesta parte, a complementação do sistema de cadastro (como excluir dados) que vem sendo desenvolvido ao longo dos nossos tutoriais. Vamos ao final então?!

Pré-Requisitos

• Ter realizado o tutorial: Como Criar um Sistema de Cadastro: Parte 1
• Ter realizado o tutorial: Como Criar um Sistema de Cadastro: Parte 2
• Ter realizado o tutorial: Como Criar um Sistema de Cadastro: Parte 3
• Ter criado uma conta gratuita no servidor 000webhost.com
• Ter facilidade quanto a manuseio do Dreamweaver (a partir da versão CS3)

Objetivos

• Incluir no sistema a ação de exclusão de dados.

Conteúdo

Uma das operações menos utilizadas em um sistema como este é o de exclusão de dados, sabiam?! Isso porque após a exclusão, não se pode mais recuperar os dados. Por isso, que uma alternativa é cria a opção de ativo e inativo, mas aí já é outro caso A lógica inicial é semelhante a criada no tutorial anterior, onde vimos como atualizar os dados, isto é, é necessário identificar o registro que pretendemos eliminar. Com isso, vamos realizar os procedimentos a seguir.

1º Passo – Criar a Opção Excluir

Vamos inserir uma imagem com um link ao lado dos e-mails cadastrados, chamado Excluir. Para isso, abramos o arquivo cadastros.php e insiramos uma coluna à direita do campo Editar e coloquemos a imagem abaixo:

Em seguida, com a imagem selecionada, coloquemos o link da página responsável pela exclusão: excluir.php e em seguida, cliquemos na “pastinha” ao lado do campo link para fazermos a inclusão das instruções do registro.

Fig. 01: Parâmetros do link

Na janela seguinte, no campo URL, cliquemos em Parameters…

Fig. 02: Parâmetros do link

Na primeira coluna (name), coloquemos a palavra cad_id e na segunda (coluna value), cliquemos no “raio” para abrir uma nova janela, Dynamic Data e selecionemos o campo cad_id.

Fig. 03: Dynamic Data

Clicando em OK até voltarmos à página cadastros.php, o link da imagem deverá conter o seguinte código:

excluir.php?cad_id=<?php echo $row_exibe_cad['cad_id']; ?>

2º Passo – Criar Mensagem de Confirmação

Como se trata de uma ação destrutiva, ou seja, que não há como voltar, é coveniente pedir ao usuário que confirme sua atitude de excluir ou não. E esta confirmação faremos utilizando Javascript. Com a imagem selecionada, acessemo o menu Modify > Edit TAG, categoria Events > onClick e digitemos a mensagem como mostra a imagem abaixo:

Fig. 04: Mensagem de alerta em JavaScript

return confirm('Você realmente deseja excluir este cadastro?');

O onClick indica que no momento em que o usuário clicar na imagem, surgirá uma janela com a mensagem acima. Clicando em OK, o mesmo será redirecionado à página excluir.php. Em Cancelar, ele permanece na página atual.

Fig. 05: Janela de confirmação

3º Passo – Cria a Página Excluir.php

Na verdade, esta página nunca será visualizada pelo usuário, pois sua única função é carregar as instruções em PHP responsáveis pelo pedido de exclusão de dados. E estas instruções encontraremos no Server Behaviors. Em uma nova página, acessemos o painel Server Behaviors > Sinal de “+” > Delete Record e configuremos de acordo com a imagem a seguir:

Fig. 06: Painel Server Behaviors

Fig. 07: Configuração do Delete Record

4º Passo – Inserir Mensagem de Confirmação de Exclusão

Para finalizarmos, é importante que indiquemos ao usuário que sua exclusão foi realizada com sucesso. Poderíamos ter criado uma página para isso como fizemos anteriormente e inseri-la na configuração do Delete Record no lugar de cadastros.php. Ao invés disso, vamos exibir uma mensagem apenas.

Então, na página excluir.php, complementemos a opção After deleting, go to com a seguinte instrução: cadastros.php?excluido=sucesso Abrindo a página cadastros.php e clicando no modo de exibição Split (ou menu View > Code and Design), logo abaixo do cabeçalho do cadastro, vamos inserir o seguinte código:

< ?php
if ((isset($_GET['excluido'])) && ($_GET['excluido']=="sucesso")) {
echo "<p><i>Cadastro excluído com sucesso!</i>";
}
?>

Fig. 08: Código PHP de confirmação de exclusão

Agora é só testar e correr pro abraço

Bom pessoal, terminamos aqui mais um tutorial.

Até a próxima.

CarlosHPS Webdesigner

Olá, pessoal

Atendendo a vários pedidos, vamos implementar nosso sistema incluindo ações para editarmos os cadastros efetuados e termos a possibilidade também, no próximo tutorial, de excluí-los.

Pré-Requisitos

• Ter realizado o tutorial: Como Criar um Sistema de Cadastro: Parte 1
• Ter realizado o tutorial: Como Criar um Sistema de Cadastro: Parte 2
• Ter criado uma conta gratuita no servidor 000webhost.com
• Ter facilidade quanto a manuseio do Dreamweaver (a partir da versão CS3)

Objetivos

Incluir no sistema a ação de edição de dados.

Conteúdo

1º Passo – Criando a Opção ‘Editar’

Para fazer com que o sistema possibilite-nos a editar um nome ou e-mail cadastrado, precisamos fazer com que ele possa identificar, qual cadastro deverá sofrer tal ação. Para isso, utilizaremos um Recordset que fará esta identificação, pelo campo criado no 1º tutorial, cad_id (responsável pela identificação individual de cada cadastro).

Primeiramente, criemos uma nova página, salvando-a como editar.php. Em seguida, acessemos o painel Bindings > Sinal de “+” > Recordset (Query):

Fig. 01: Recordset (Query)

E na janela seguinte, realizemos a seguinte configuração:

Fig. 02: Criação do Recordset

Para verificarmos se está tudo ok, cliquemos em Test e insiramos o valor 3. Teremos o seguinte resultado:

Fig. 03: Teste com banco de dados

2º Passo – Criando o Formulário de Edição

Utilizando o mesmo processo do tutorial anterior, vamos criar um formulário de edição dos dados, utilizando o recurso do Dreamweaver Record Insertion Form Wizard, situado no painel Insert, aba Data, a opção Update record > Record Update Form Wizard:

Fig. 04: Update record

Realizemos, então, a configuração do nosso formulário:

Fig. 05: Formulário Update Record

E fazendo alguns ajustes como o título do formulário e o nome do botão, acabamos de criar nosso formulário de edição de dados:

Fig. 06: Formulário de edição

3º Passo – Criando a Página editar_ok.php

Antes de testarmos o formulário de edição, vamos criar a página para onde o usuário será redirecionado assim que clicar em Editar. Para não termos muito trabalho, é só abrirmos a página criada no tutorial anterior, cadastro_ok.php e renomeá-la para editar_ok.php. E inserirmos os textos abaixo:

Os dados foram editados com sucesso..

Clique aqui e veja todos os outros cadastros.

4º Passo – Criando a Opção Editar

E finalmente, para podermos realizar os devidos testes, vamos inserir uma imagem com um link ao lado dos e-mails cadastrados, chamado Editar. Para isso, abramos o arquivo cadastros.php e insiramos uma coluna à direita do campo E-mail e coloquemos a imagem abaixo:

Em seguida, com a imagem selecionada, coloquemos o link que levará o usuário à página de edição:

editar.php?cad_id=< ?php echo $row_exibe_cad['cad_id']; ?>

Com este link, agora já podemos realizar os testes abaixo:

No próximo tutorial, falaremos como excluir um registro do banco de dados.

Até lá.

CarlosHPS Webdesigner

Olá, pessoal

Como o prometido, vamos dar continuidade ao Sistema de Cadastro, iniciado no tutorial anterior. Caso não tenha visto, recomendo que o faça antes de seguir neste: Como Criar um Sistema de Cadastro: Parte 1

Pré-Requisitos

1. Facilidade quanto a manuseio do Dreamweaver e a manipulação de formulários
2. Ter feito o tutorial anterior: Como Criar um Sistema de Cadastro: Parte 1
3. Ter criado uma conta gratuita no servidor 000webhost.com

Objetivos

1. Criar um sistema de cadastro básico utilizando o Dreamweaver, PHP e Banco de Dados
2. Criar um formulário que envie os dados para o servidor web
3. Criar uma página para exibir a relação de cadastrados no sistema

Conteúdo

1º Passo – Criando a página formulario_cadastro.php

Vamos criar uma página PHP e nomeá-la como formulario_cadastro.php. Para isso, acessemos o menu File > New (CTRL+N) e selecionemos a opção PHP, clicando em Create em seguida.

Os dados serão cadastrados nesta página que acabamos de criá-la e nela conterá um formulário e todo o processo para enviarmos o que digitarmos em seus campos, para o banco de dados, mais especificamente, na tabela cadastro.

2º Passo – Desenvolvendo o Formulário de Cadastro

Existe um recurso no Dreamweaver chamado Record Insertion Form Wizard e, através dele, de uma só vez, criaremos o formulário e os códigos PHP. Acessemos então no painel Insert, aba Data, a opção Insert record > Record Insertion Form Wizard

Fig. 01 - Insert Recordset Form Wizard

Na tela seguinte, surgem as opções de configuração do formulário e seus campos de preenchimento:

Fig. 02 - Janela Record Insertion Form

Fig. 03 - Label NOME.

Fig. 04 - Label EMAIL

Preenchido e configurados os pontos, é só clicar em OK e teremos o seguinte resultado:

Fig. 05 - Formulário de cadastro

Lembram dos pré-requisitos para fazerem este tutorial? Pois então, supondo que tenham conhecimentos básicos sobre formulários, apresentarei o resultado final da inserção de um cabeçalho para ele e a mudança do nome do botão.

Fig. 06 - Formatação do formulário

3º Passo – Envio do Arquivo para o Servidor

Nosso formulário de cadastro está pronto, agora é só enviá-lo para o servidor.

Como o FTP foi configurado no tutorial passado, basta clicarmos sobre o arquivo formulario_cadastro.php, no painel Files e clicar em Put File(s).

Fig. 07 - Envio de arquivos via FTP

4º Passo – Criação da Página de Confirmação de Envio

Lembram que no momento da inserção do formulário, definimos que a página de redirecionamento após o envio dos dados a qual colocamos lá foi a cadastro_ok.php?

Então, vamos criá-la e inserir um link que levará o usuário a visualizar todos os cadastros efetuados, ok?! Para isso, acessemos o menu File > New e escolhamos o tipo de página PHP.

Criemos uma página simples, apenas para podermos visualizar seu resultado e criemos um link chamado: Veja todos os cadastros e com a url cadastros.php.

Fig. 08 - Confirmação de envio.

5º Passo – Criando a Página de Exibição de Cadastros

Pessoal, a página que exibirá a relação de todos os cadastros enviados para o banco de dados, será chamado de cadastros.php. Com a página já criada e salva, trabalharemos com outro recurso do Dreamweaver chamado Recordset (conjunto de registros).

Então, acessemos o painel Bindings > Sinal de “+” > Recordset (Query):

Fig. 09 - Recordset

E, realizando as devidas configurações a seguir…

Fig. 10 - Painel Recordset

… poderemos visualizar o segunte resultado:

Fig. 11 - Recordsets campos

Bom, estamos quase lá

Para ficar organizado, criemos uma tabela (CTRL+ALT+T) com 2 linhas e 3 colunas, com largura de 700 px:

Fig. 12 - Tabela de relatório

Fazendo algumas configurações, ela ficará assim:

Fig. 13 - Tabela de relatório

Dando prosseguimento, vamos clicar nos “Recordsets” e arrastá-los para dentro da tabela, sob seus respectivos títulos:

Fig.14 - Configuração da tabela

Da maneira que está aqui, já podemos visualizar o último cadastro inserido no banco de dados, mas o ideal é que visualizemos alguns ou até mesmo todos. Para isso, devemos SELECIONAR a linha inteira onde estão os recordsets e acessar o painel Insert > Data > Repeat Region:

Fig. 15 - Repetição de dados

Feito isso, nossa página está pronta.

Veja abaixo:

É isso aí, pessoal.

Espero que tenham gostado.

Até a próxima.

CarlosHPS Webdesigner