Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 1

Este guião irá ensinar-te a trabalhar com a ferramenta Wix para que aprendas a

construir um Website.

Abre o browser e acede ao Website http://pt.wix.com/

A primeira página será semelhante à seguinte.

Procede com o botão Comece já ou no canto superior direito clica em Entrar.

Uma nova janela irá surgir no ecrã onde deves escolher a opção Registe-se.

Aqui deves preencher os campos com o teu e-mail e com a senha aluno@escola.

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 2

Automaticamente ficas registado e autenticado no Wix onde terás de escolher o tema

que pretendes para o teu Website. Neste caso vais aceder a este link aqui para começares

a trabalhar sobre um tema específico.

Clica em Editar este site para começares a alterar.

Atenção, apesar deste trabalho não ser direcionado ao desporto devemos escolher o template

que graficamente se enquadra melhor no projeto que pensamos desenvolver.

Atenção: a qualquer momento pode surgir no ecrã uma notificação para que

guardes o teu projeto. Se quiseres podes clicar no botão para que esta janela

apareça.

Dá-lhe o nome ticnxny onde x e y são os vossos números (exemplos: ticn10n23,

ticn3, ticn13n15). No final clica em Salvar Agora.

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 3

Antes de inserirmos o conteúdo na nossa página vamos começar por mudar a sua

aparência. Muda o fundo da tua página no menu lateral em Background (podes escolher

um qualquer).

Em vez de escolhermos um dos fundos à disposição podemos inserir no fundo da nossa

página uma imagem do nosso próprio computador. No mesmo local onde mudaste o

fundo escolhe a opção Imagem.

Na janela clica em Fazer Upload de Imagens e escolhe a imagem de nome porto1.jpg

que está disponível neste pack de fotos para download e faz Aplicar.

1

2

3

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 4

Altera as cores do tema ao teu gosto em Cor(1)→Alterar(2)

Altera o tipo de letra do website ao teu gosto clicando sobre as caixas de texto e Editando

as suas caraterísticas.

Vamos agora começar a alterar o conteúdo do Website para que esteja de acordo com

a nossa temática, i.e. Fotografia de viagens.

Seleciona o texto Sport Photographer e altera-o para Fotógrafo Amador.

Altera ainda o nome John Smith para o teu/vosso nome.

1

2

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 5

Altera os nomes das páginas acessíveis pelo menu. Começa por mudar a página Home

para Principal. Começa por selecionar o menu e escolhe a opção Gerenciar Menu

(Alternativamente na barra superior podes clicar em )

Renomeia a página Home para Principal.

Altera ainda no menu Gallery para Galeria e About para Outras informações.

Apaga as páginas Contact e Client Showcase.

Altera o texto da página principal tal como se mostra na figura seguinte. Para

aprenderes a mover caixas de texto assiste ao vídeo presente no Website da disciplina.

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 6

Vamos agora Organizar as imagens para podermos substituir as fotos existentes pelas

que nos interessam colocar. Clica em Alterar Imagens.

Na janela que irá aparecer no ecrã escolhe a opção Adicionar Imagens

(1). Tens disponível para Download no website da disciplina as

imagens para colocar nesta parte.

Nota: podes fazer Upload de todas as imagens de uma só vez

Seleciona as 8 imagens (2) e pressiona Aplicar (3).

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 7

Remove as imagens (1) que já lá estavam para que fiquem apenas as novas imagens.

A tua página ficará semelhante à seguinte.

Procede às alterações no rodapé tal como se mostra de seguida. Retira o telemóvel e

morada visto que estes dados não devem ser divulgados na Internet uma vez que te

podem pôr em perigo. Normalmente apenas as empresas preenchem dados deste tipo.

1

1

2

3

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 8

Terminamos assim a primeira página. Na construção de um website o mais difícil, no

seu design é conseguir terminar a primeira página. As outras serão muito mais simples de

terminar.

Abre a página Galeria. Altera o texto para o que se segue e troca as imagens por 8 à

tua escolha retiradas da Internet.

Atenção: as imagens devem ter pelo menos 1920x1080px e devem ser sobre fotografia (paisagens, objetos, etc)

Por baixo das imagens vais adicionar o seguinte vídeo do Youtube

https://www.youtube.com/watch?v=uWHp6ADQCAg conseguido com um Drone Dji

Phantom 4 publicado pelo youtuber WonderfulWorldPT_CH.

Para isso em escolhe Vídeo→Youtube.

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 9

Clica em e substitui em pelo dado em cima.

Ficará algo do género:

Abre a página Outras Informações. Altera o texto para o que se segue. Retira a

fotografia pessoal e não introduzas uma fotografia tua. Mais uma vez deves ter cuidado

para o nível de exposição a que te submetes quando colocas uma fotografia na Internet.

Uma vez lá inserida perdes total controlo do que poderão fazer com ela.

A palavra TIC é uma hiperligação para a página da disciplina http://rsergio.pt

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 10

Para inserir a hiperligação deves selecionar a palavra TIC e nas configurações clicar em Link

(1). De seguida escolher Endereço Web (2) e preenche o campo com o endereço

http://rsergio.pt (3).

Acrescenta ainda a informação relativa aos direitos de autor do vídeo que inseriste:

No final Salva o teu projeto novamente e clica Visualizar (canto superior direito).

Neste modo tens a perspetiva idêntica a

quem visita a tua página.

Termina com Publicar acessível também no canto superior direito da página.

1

2

3

Tecnologias da Informação e Comunicação

Desenvolvimento de Websites em Wix

Guião prático Nº1

Ricardo Sérgio 11

Fecha o editor e acede à tua conta Wix.

O teu website estará publicado no link acima. Atenção vai ser diferente do meu, porque

é baseado no vosso e-mail e nome que deram à página (ticnxny).