Como num tem nada parecido aqui, resolvi criar este tópico para apresentar a todos que já estão acostumados com o front page 2000 e suas funções, ou até mesmo que nunca mexeu no front page 2000 e esta começando a mexer com web agora... pode começar e mexer nesta potente ferramenta disponibilizada pela Microsoft aos desenvolvedores web que é o Front Page 2003.
Tentarei aqui, então, neste espaço fazer uma breve introdução, pois bem, chega de mais – mais – mais e vamos ao que interessa.
Vamos começar
Abrimos nosso front, vamos em iniciar >> abrir site...
Abrimos nossa pasta onde estão nossos arquivos ( isso se vc já tem um site começado, se não, basta criar uma pasta, e começar do zero )
Caso apareça somente a sua pagina, e não apareça a sua lista de pastas já criadas, vá em Exibir >> Relatórios >> Arquivos >> Todos os arquivos...
Neste momento não vou me ater a criação de paginas especificas.. como .html, .asp, .php e sim, funções “genéricas” do Front Page.
Abra um arquivo ( pode ser .html mesmo ) logo abaixo você verá algumas guias, como Designer, Divisão, Código e Visualização.
Designer: Clicando na guia designer, será onde poderemos criar nossas tabelas, forms, ou tudo que for relacionado ao Layout da página.
Divisão: Aqui a tela de Designer será dividida ao meio, ficando a parte de cima, mostrando o código escrito da pagina, e abaixo o código de Designer da pagina que estamos criando.
Código: Veremos somente o código da pagina, onde poderemos criar tabelas, programar, entre outras coisas, diretamente no código da pagina, sem ajuda do modo gráfico.
Visualização: Aqui veremos como a pagina será publicada, pelo motivo do Office ser da Microsoft, ele parece em muito com o IE, então no modo de visualização você verá “mais ou menos” como a pagina ficara quando for publicada, digo mais ou menos, por o modo de visualização não possuir todos os recursos de um browser, apenas os comandos básicos, para rodarmos alguns códigos.
Veja um exemplo:
Copie e cole este código abaixo no modo de Código:
<script language=JavaScript>
function click() {
alert('A mensagem!');
}
// -->
</SCRIPT>
<tr>
<td height="37" valign="top"><a href="javascript:click();">alerta</a></td>
</tr>E visualize esta pagina em todas as opções de visualização, que você começará a se familiarizar cada vez mais com o front page.
- Criando uma tabela:
- Criando uma camada
- Aplicando modelos CSS
- Inserindo campos de formlário
Inserindo uma tabela com linhas e colunas pré definidas.
Clique na guia Tabela no topo do seu FP
Tabela >> inserir >> tabela, abrirá uma tela assim:
Onde:
Linhas: Ditamos a quantidade de linhas que terá nossa tabela
Colunas: Ditamos a quantidade de colunas que terá nossa tabela
Alinhamento: Esquerdo, direito e centralizado, ditamos como a tabela vai aparecer na tela.
Especificar largura:
Em pixel: Você define um tamanho para a tabela, exemplo, se você colocar 300, a sua tabela terá 300 pixel de tamanho.
Em porcentagem: Dependendo do valor, será a quantidade que a tabela ocupará sua tela, exemplo, se colocarmos 50, a tabela ocupara apenas a metade da tela, isto é 50% da tela, se colocarmos 100, ficará 100% a nossa tabela, isso é, ocupando a tela toda em qualquer resolução.
Enchimento da célula: Será o enchimento que ela terá, eu aconselho a deixar o valor 0 como padrão.
Espaçamento da célula: Será o tamanho que terá espaçado entre uma célula e outra, aconselho a deixar 0 também.
Bordas:
Tamanho: Ditamos o tamanho da borda. A principio se você não for colocar nenhum efeito na borda, aconselho a deixar como tamanho 0.
Plano de fundo: Ditaremos uma cor ou uma imagem para usarmos de fundo nesta tabela.
Definir:
Definir como padrão para novas tabelas: Se você marcar esta guia, todas as tabelas que você criar apartir deste momento, terão as mesmas características.
Criando uma tabela pelo modo de desenho a mão livre.
Tabela >> Desenhar tabela
Aparecerá um lápis onde você poderá desenhar a sua tabela.
Vale lembrar que você deve estar no modo designer para poder desenhar uma tabela com esta ferramenta.
Criando uma camada.
Trabalhar com camadas também é muito fácil, camada é uma “tabela” que você pode arrastar para qualquer pedaço da sua pagina...
Para inseri uma camada basta clicar em Inserir >> camada.
Pronto será inserida uma camada, no seu modo Designer, onde você clicando nesta camada, verá que pode arrastar para qualquer pedaço da sua página, ao contrário de uma tabela.
Se formos olhar teremos um código mais ou menos assim quando inserimos uma camada.
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="camada1"> </div>
width: 100px; height: 100px; : Definimos largura e altura da nossa camada.
" id="camada1" : Damos um nome a nossa camada.
position: absolute; : Defimos a posição da nossa tabela
left:295px; top:170px : estes parâmetros podem ser inseridos no seu código, caso você queira mudar a posição da sua camada na página pelo código, mas você pode movimenta -la pelo modo designer, que será mais fácil e estes valores serão inseridos automaticamente.
Inserindo modelos CSS:
Crie uma tabela de uma célula e uma coluna e escreva algo neste campo, sua tabela ficara mais ou menos assim.
<table border="1" width="112" height="25"> <tr> <td height="25" width="112">Teste</td> </tr> </table>
Então clique em Formatar >> Estilo ( lembrando que você deve estar no modo designer.
Abrirá uma tela assim:
Baixe sua guia até achar Table para aplicarmos um efeito a nossa tabela.
Clique em modificar:
Clique em formatar.
Abrirá uma guia, então clique em fonte.
Escolha uma fonte para usar na sua tabela.
No meu caso, para exemplo escolhi a fonte tahoma, que é uma fonte que gosto, mas você pode escolher uma fonte qualquer.
De OK em todas as telas, pronto, você acabou de criar um estilo de fonte para todas suas tabelas da pagina.
No código da sua pagina terá um código mais ou menos assim:
<style>
<!--
table { font-family: Tahoma }
-->
</style>Veja que a fonte da nossa tabela agora é tahoma, para todas as tabelas que você criar na sua pagina, terá esta formatação de fonte, lembrando que você pode inserir a formatação que quiser as suas tabelas, fiz a modificação de fonte apenas para servir como exemplo, agora suponhamos que queremos aplicar este efeito de fonte apenas a uma tabela da nossa pagina e o resto fique como padrão, então, vamos dar um nome a este estilo criado, ficando assim:
<style>
<!--
.teste { font-family: Tahoma }
-->
</style>Veja que dei o nome de teste a este estilo, e para aplicamos este estilo teste apenas a uma tabela, fazemos assim:
<table border="1" width="112" height="25" class="teste"> <tr> <td height="25" width="112">Teste</td> </tr> </table>
Veja que adicionei ao código da minha tabela a linha class="teste" então, agora meu estilo CSS apenas será aplicado as tabelas que tenham a linha class="teste"
Podemos criar diversos estilos na mesma pagina, um para cada tabela.
Inserindo campos de formulário:
Vamos inserir o FORM, que seria o básico para um formulário funcioanr.
Inserir >> formulário >> formulário
Inserimos um código assim:
<form method="POST" action="--WEBBOT-SELF--"> <p><input type="submit" value="Submeter" name="B1"><input type="reset" value="Redefinir" name="B2"></p> </form>
Com os botões padrão de enviar e limpar o formulário.
Bem, não estarei comentando as linhas, afinal isto faz parte do html, sendo padrão para qualquer editor.
Então, na guia Inserir >> Formulário, podemos inserir todos os campos de formulários possíveis na nossa página.
Pois bem, esta foi uma pequena a mostra do que o FP pode proporcionar a você, possuindo ainda, inúmeras ferramentas aqui, ainda não citadas, mas que serão citadas em outras apresentação do FP.
Tentei aqui, descrever as principais funções utilizadas pelos usuários que criam paginas no FP.
Espero ter ajudado a quem utiliza esta ferramenta, ficando este tópico aberto a quem queira tirar maiores dúvidas sobre esta ferramenta.
Abraço a todos do fórum.
