| Desenhar uma página Bom pessoal; vamos retornar nossa missão nada linear. Mas na medida do possível didatica, de entendermos a base para sermos webdesigners. Achei um bom tutorial no site ( http://www.prof2000.pt ).... hoje usaremos uma ferramenta simples; o FrontPage. Esse programa vem dentro do pacote Office, de qualquer edição.
A página Background foi formatada com um tema gráfico que aplicarás ao Millennium Celebration Web mais adiante, na lição nº 2. A página Destination, requer um pouco mais de trabalho. Para ajudar o leitor a diferenciar o parágrafo de cabeçalhos, a lista de viagens destino e detalhes de eventos, falados nesta página, adicionaremos algumas imagens, alteraremos alguns estilos de parágrafos e criaremos listas "bullets". |
| | Para criar uma lista "Bullet" |  | No assistente escrever:
How do I make a list? | - Com a página Destination ainda activa no Page View, procura as palavras "Times Square in New York."
- Usa a barra de scrol para colocar a lista total de destinos no View, a começar em "Times Square in New York" e terminar com "The Acropolis in Greece".
- Clica á esquerda da letra "T" da palavra "Times" prime a tecla SHIFT, e clica depois da palavra "Greece".
 | Botão Bullet | - Na toolbar clica no botão Bullets. O FontPage converte o texto seleccionado.
- Clica algures na página para anular a selecção da lista. A tua página deverá paracer-se com a seguinte:
| | |
| | Tambem podes criar listas numeradas com o FrontPage. Quando acrescentas um novo item a uma lista numerada, o FrontPage incrementa automaticamente a numeração. No final da lista tecla "Enter" 2 vezes para terminar. A seguir irás introduzir 4 imagens na tua página corrente e usar posições características no FrontPage para alinhar as imagens com os parágrafos que lhes estão associados. Isto irá criar uma página mais sugestiva. Para posicionar imagens com o texto - Com a página Destination ainda activa, faz scrol até ás palavras "France and England"
- Clica imediatamente á esquerda da letra "F" e pressiona a tecla HOME. Em seguida, no toolbar clica em Insert Picture From File. O FrontPage assume que queres trabalhar com imagens, e por isso mostra a caixa de diálogo "Picture".
 | Botão Select File | - Porque ainda não adicionámos imagens á nossa Web, , clica no botão Select File. O FrontPage mostra a caixa de dialogo Select File.
- Clica no nome "Paris" e depois OK. O FrontPage insere a imagem corrente imediatamente antes do parágrafo corrente.
- Clica na imagem da Torre Eiffel para a seleccionar.
| No assistente, escreve:
How can I position objects on a page? | - No menu Format, clica em Position. O FrontPage mostra a caixa de diálogo Position.
- No Wrapping Style, clica em Right e depois OK. A imagem fica alinhada na margem direita do parágrafo e o texto "circunda-a".
- Na toolbar clica no botão Save, para guardar as alterações da página corrente.
- na caixa de diálogo Save Embedded Files, clica OK.
| | |
| | Podes inserir imagens desta forma, uma por uma, ou podes importar todas as imagens, que vais usar nas tuas páginas de uma única vez. Uma única imagem é importada no Page View, enquando um grupo de ficheiros ou pastas é feito no Folder View. Para adicionar grupo de ficheiros á corrente web. |  | O Icon de Folders | - Clica no icon de Folders na barra Views para alterar para Folders View. O Forlders View, é um complemento do Navigation View e do Page View, com uma forma de apresentação e funções similares ao explorador do Windows. Aqui podes ver os detalhes sobre ficheiros e pastas da tua web e executar algumas tarefas com: adicionar, apagar, mover, copiar ou renomear ficheiros.
| No assistente escreve:
How can I add files to my web? | - No menu File clica em Import. O FrontPage mostra a caixa de diálogo Import. Aqui podes adicionar ficheiros e pastas do teu sistema local, de uma rede local, de um servidor Internet ou World Wide Web assim como um servidor FTP.
- Na caixa de diálogo Import, Clica em Add File.
- Na caixa de diálogo Add File to Import List navega até á pasta c:\Programas\Microsoft Office\Office\Tutorial para a brir.
- Clica na lista Files of Type e depois Gif and JPEG (*.gif, *.jpg), para mostrar todos estes ficheiros da pasta tutorial.
- Clica no nome firewks1 da lista para o seleccionar.
- Em seguida com a tecla CTRL premida, clica nos ficheiros: firewks2, firewks3, firewks4, japan, london e sanfran. O FrontPage permite executar os métodos de selecção do Windows.
- Quando os ficheiros estiverem seleccionados clica em Add File to Import List, e quando a caixa de diálogo aparecer clica em Open. O FrontPage adiciona as imagens seleccionadas á caixa de diálogo Import.
- Clica em OK para importar os ficheiros seleccionados para a Web corrente.
| | Agora que as imagens restantes foram adicionadas ao teu Web, é altura de terminares o esquema da página Destination. Para terminares o esquema da página - Clica no icon Page na barra Views para voltar ao Page View.
- Localiza a frase começada por "England is planning to reconstruct...," clica imediatamente á esquerda da letra "E" de "England" e clica no botão Insert Picture From File da toolbar.
- Na caixa de diálogo Picture, aparecem agora todas as imagens que acabaste de importar. Selecciona a imagem London.gif da lista. Repara que quando seleccionaste a imagem, o FrontPage a mostra na caixa de diálogo, para teres a certeza que é exactamente aquela imagem que pretendes inserir. Esta é a vantagem de adicionar todas as imagens da nossa web antes de as inserirmos. A caixa de diálogo tambem te liga á galeria de arte incluida no FrontPage. E se tiveres um scanner ou uma cãmara digital, podes obter imagens originais daquelas fontes.
- Clica em OK para inserir a imagem.
 | Botão Align Left | - Clica na imagem da Torre de Londres e depois no botão Align left, para a colocares na margem esquerda do teu texto.
- Em seguida, procura a frase "World-famous Times Square..., clica á esquerda da letra "W" e depois em Insert Picture From File do menu Toolbar.
- selecciona a sanfran.gif da lista e clica em OK.
 | Botão de Align Right | - Clica na imagem Golden Gate Bridge e depois no botão Align Right. A imagem desloca-se para a margem direita do texto.
- Finalmente faz scrol até ao inicio da frase "A travel agency in Japan...," clica imediatamente atrás da letra "A" da frase e no botão Insert Picture do menu toolbar.
- Faz duplo-click no ficheiro Japan.gif da lista.
- Clica na imagem Japanese Temple e depois no botão da toolbar Align Left. A imagem desloca-se para a margem esquerda do texto.
A tua página deverá parecer-se com a que se segue: | | |
| | Colocar imagens nas nossas páginas "circundadas" pelo texto, torna as páginas mais interessantes, exactamente como nos jornais e revistas, alem destas poderem serem preservadas se forem vistas por monitores com diferentes resoluções quando acedidas por Browsers na Web. Para terminar a página Destination, vamos criar uma janela de respostas, para os visitantes que queiram mostrar interesse em participar no nosso site. Esta janela (Form) irá registar as informações das pessoas que nos visitam. |
| Para criar uma janela de resposta- No Page View tecla em CTRL+END para saltares rapidamente para o rodapé da página corrente, ou usa a barra de scrol.
- Numa nova linha escreve : "Diz-nos onde estás ", e depois tecla "enter"
- Numa nova linha escreve : "Fizeste grandes planos de viagens para a festa do milénio? Fala-nos um pouco disso.
- Clica en "Enter" para criar uma nova linha.
- No menu Insert faz aponta para Form
O FrontPage insere uma nova janela na tua página. As linhas a tracejado indicam-nos as fronteiras da nossa janela. Por defeito uma janela contem dois botões: Submit e Reset. A seguir irás personalizar o teu Form, adicionando campos de texto e etiquetas, por forma que o teu visitante saiba que tipo de informação pretendes. |
| Para personalizar o Form  | Botão Center | - Com o cursor posicionado á esquerda do botão Submit, clica no botão Center da toolbar. Em seguida clica Enter para adicionar algum espaço ao form
- Clica em Up Arrow (seta para cima) para colocar o cursor no inicio do form. O FrontPage coloca o cursor no centro da 1ª linha do form.
- Na 1ª linha escreve: "O teu nome:?" e em seguida SHIFT+ENTER. Ao teclares Enter com a tecla de Shift premida, nota que a nova linha que criaste fica mais junto á de cima
- No menu Insert, aponta para form e clica em One-Line Text Box e Enter. O Frontpage insere uma "caixa" onde será permitido escrever texto.
- Numa nova linha escreve:"Qual é o teu email?", e novamente SHIT+ENTER
- No menu Insert, aponta para form e clica em One-Line Text Box e Enter.
- Na nova linha escreve: "Quais os teus planos de viagem?" e novamente SHITF+ENTER
- No menu Insert, aponta para form e clica em ScrollingText Box e Enter. O FrontPage insere uma caixa de texto com um scrolling horizontal e outro vertical.
- Faz duplo-click na scrolling text box para poderes alterar a suas propriedades.
- Na caixa de diálogo da Scrolling Text Box Properties, altera o Width in characters (nº de caracteres por linha) para 30 e o Number of Lines para 5, e em seguida OK. A scrolling text box foi alterada para encorajar os visitantes a escrever um pouco mais sobre os seus planos. Agora será boa ideia guardar o trabalho, visto que está completa a página Destination.
- Na toolbar, clica no botão Save. A tua página será mais ou menos assim:
| | |
| Bom trabalho, o form de resposta está pronto, assim como a página Destination. Nas próximas lições iremos criar um album de fotos online e uma lista de Links para os sites favoritos da World Wide Web.
Bom pessoal. Se alguem tiver alguma reclamação; ou quem sabe, algum elogio. pode comentar ok????
grande abraço a todos e até o proximo post
| |
