7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
1/20
1
Conhecendo o Wysiwyg Web Builder
Hlio Maia
Introduo
Neste captulo estudaremos o software Wysiwyg Web Builder 8 e suas
funcionalidades. Este um programa da categoria WYSIWYG que representa uma sigla
em ingls expressando "What You See Is What You Get" que em uma traduo livre
significa "O que voc v o que voc obtm". Assim, ao permitir a construo de uma
pgina para a internet, todos os elementos desta pgina sero exibidos na mesmaposio. O programa gera cdigos HTML automaticamente, sem a necessidade do
conhecimento dessa linguagem. Para criar uma pgina, basta arrastar e soltar objetos
para a posio pretendida na pgina a ser criada. Um arquivo de projeto Web Builder
pode conter vrias pginas da Web, lhe permitindo facilmente gerenciar todos.
Instalao
Antes de mais nada necessrio baixar o programa. Para isso v ao endereo
e baixe a verso a Wysiwyg
Web Builder 8.5.8. Aps baixar o arquivoZip, voc dever descompact-lo e executar o
arquivo setup.exepara a instalao do software em seu computador. Siga as instrues
na tela e aguarde at que a instalao esteja concluda. Um novo cone ser adicionado
sua rea de trabalho chamado "WYSIWYG Web Builder". Por padro, os arquivos do
programa sero instalados na pasta C:\Arquivo de Programas\WYSIWYG Web Builde 8\.
Todos os seus arquivos pessoais (projetos, modelos, extenses, temas, etc.) sero
armazenados em sua pasta de documentos: Meus Documentos\WYSIWYG Web Builder.
Lembre-se que a verso instalada uma verso de teste, completamente funcional, e lhe
d o direito de experiment-la por 30 dias aps a instalao. Nessa verso teste, os
arquivos gerados, apresentam no final da pgina, o cone do programa. Na verso
comprada, esse cone no exibido. A cada vez que se carrega o programa, uma "tela de
ativao" exibida, para pular a ativao durante o perodo experimental, clique no
boto "Skip".
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
2/20
2
Funcionalidades Bsicas
O WYSIWYG Web Builder uma ferramenta de construo de sites que
possibilita a voc projetar e montar sites repletos de recursos da Web sem ter de
aprender HTML. Quando a interface inicial carregada, a janela que se apresenta a
representada na figura 1.
Figura 1 Janela inicial do WYSIWYG
Ferramentas padro
A barra de ferramentas "Ferramentas padro" inclui todos os comandos bsicos,
como abrir ou salvar um projeto de web site, salvar, cortar, copiar, colar, desfazer,
refazer. Ela tambm apresenta cones para inserir ou editar hiperlinks ou adicionar
caracteres especiais quando se est no modo de edio de texto. Os ltimos dois cones
so para pr-visualizar e publicar. Pode-se facilmente adicionar novos navegadores para
visualizao usando-se a opo "lista de navegadores Editar".
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
3/20
3
Caixa de ferramentas
A caixa de ferramentas pode ser usada para adicionar novos objetos nas suas
pginas web. Para inserir um novo objeto, selecione um dos itens disponveis clicando
em cima do mesmo e na rea de trabalho, clique o mouse e segure, arrastando para abrir
uma caixa para indicar a posio do objeto. O novo objeto ser agora inserido na
pgina. Outra forma de adicionar objetos para sua pgina simplesmente arrastando-os
para fora da caixa de ferramentas para a rea de trabalho.
Guias
Quando j se abriu vrias pginas pode-se utilizar as guias para alternar entre as
pginas. Para fechar a pgina ativa pressione o pequeno 'x' no canto superior direito da
faixa de guias.
rea de Trabalho
O centro da tela a rea de trabalho, este o lugar onde se projetar suas
pginas web.
Ferramentas de formatao
As ferramentas de formatao s so ativas quando voc est no modo de edio
de texto.
Para inserir texto simplesmente deve-se arrastar o cone de texto na rea de
trabalho. Um novo objeto com o texto "Clique duas vezes para editar" ser exibido na
pgina. Para alternar para o modo de edio de texto, clique duas vezes neste texto e as
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
4/20
4
ferramentas de formatao ficaro ativas, e
algumas ferramentas so destacadas para serem
usadas.
Administrador do Site
O administrador do site tem a sua prpria barra de ferramentas para adicionar, editar ou
remover e duplicar pginas. H tambm um boto para abrir as propriedades da pgina
selecionada. Na imagem esquerda voc v um exemplo de uma estrutura de web site.
O nome deste site exemplo chamado de "mywebsite.wbs", este nome sempre exibido
na raiz da rvore site. A raiz pode ter uma ou mais pginas e cada pgina tambm pode
ter subpginas. A pgina inicial de um site deve ser sempre chamada 'ndice' (index),
por este motivo o construtor Web adiciona automaticamente esta pgina para cada novo
projeto. Os nomes dos itens (pginas) na rvore do local so os nomes reais dos
arquivos HTML de destino, ento se voc publicar uma pgina chamada 'index' a pgina
publicada como index.html.
O Administrador do site pode ser usado para adicionar, editar, remover e
organizar seu site. Quando o site tem mais de uma pgina que deve ser parte do mesmo
arquivo de projeto Web Builder. Um arquivo de projeto tem a extenso wbs (. web b
uilder s ite). Dica: Verifique se todas as pginas de um website so parte do mesmo
projeto, desta forma o Web Buildervai "saber" que as pginas so juntas e gerar HTML
ideal para o seu site. Como mencionado, o Web sites sempre tem uma pgina inicial que
normalmente chamado de index, por este motivo o Web Builder adiciona
automaticamente esta pgina para cada novo projeto. Importante: As informaes no
Administrador do Site no representam uma pasta no seu disco rgido, mas a estrutura
do site publicado. As pginas e pastas no Administrador do Site sero geradas quandovoc publica o site. As pginas e informaes da estrutura do site sero armazenados
dentro do arquivo de projeto wbs.
A barra de ferramentas Site Manager tem os
seguintes comandos (da esquerda para a direita):
Nova Pgina
Adicionar uma nova pgina para o seu site.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
5/20
5
Nova Pasta
O comando 'Nova Pasta' lhe d a possibilidade de organizar as pginas em
pastas.
Nova pgina do Modelo
Cria uma nova pgina baseada em um modelo.
Inserir arquivo externo
Esta opo pode ser til se voc quiser fazer parte de arquivo externo (HTML)
do projeto, para que voc possa facilmente vincul-lo ou torn-lo parte do mapa do site.
E embora esta opo tenha sido projetada para incluir arquivos HTML, pode
basicamente ser usada para qualquer tipo de arquivo. Note, porm, que ela s vai ser um
link para o arquivo. Voc no ser capaz de editar o arquivo diretamente em
WYSIWYG Web Builder.
Editar Pgina
Abrir / editar a pgina selecionada.
Pgina clone
Faa uma cpia da pgina selecionada.
Remover Pgina
Remova a pgina selecionada a partir do site atual.
Propriedades da Pgina
Exibir as propriedades da pgina selecionada.
Mover para cima
Mover a pgina selecionada para cima entre as demais.
Mover para baixo
Mover o item selecionado para baixo entre os demais.
Mover para a esquerda
Faa o item selecionado mover-se para esquerda.Mover para a direita
Faa o item selecionado mover-se para a direita.
Dica: Voc tambm pode organizar as pginas usando arrastar e soltar. Mantenha
pressionada a tecla CTRL se quiser evitar que o item arrastado torne-se uma subpgina
do destino. Neste caso, a pgina ser movida abaixo do objetivo.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
6/20
6
O primeiro item na rvore de estrutura do local o nome do site (tambm
chamado de raiz ). A raiz pode ter um ou mais pginas e cada pgina tambm pode ter
sub-pginas. Se voc no salvar seu site, no entanto, ele provavelmente ser chamado
Untitled. Use o menu Arquivo (file) para salvar a seu site e dar-lhe um nome mais
significativo como 'MyWebSite'. Note-se que Web Builder adiciona automaticamente o.
Extenso wbs ao nome do arquivo.
Adicionar uma nova pgina para o seu site
Selecione a posio em que deseja inserir a pgina, por exemplo, selecione a raiz
(o item de nvel superior) para inserir a pgina para o primeiro nvel. Clique no primeiro
boto na barra de ferramentas (Nova pgina). Web Builder acrescenta a nova pgina no
seu projeto e vai abrir automaticamente, assim que voc comear a construir a pgina.
Para inserir uma nova pgina como subpgina de uma pgina j existente, selecione
primeiro a pgina e clique em 'New Page'.
Inicialmente Web Builder vai dar a nova pgina de um nome original como
page1. Voc pode facilmente mudar o nome desta para outra coisa, selecionando o
nome e pressionando a tecla F2. Ou clique direito no nome da pgina e selecione
Rename Pageno menu flutuante que aparece. Em seguida, voc pode especificar o novo
nome. Pressione Enter para salvar o novo nome da pgina ou Esc para cancelar a
renomeao.
Adicione uma nova pasta para o seu site
Selecionando posio em que deseja inserir a pasta, por exemplo, selecione a
raiz (o item de nvel superior) para inserir a pgina para o primeiro nvel.
Abra uma pgina j existente
Selecione o item (nome da pgina) ou o que deseja editar e clique em "Editar Pgina" na
barra de ferramentas. Outra forma de abrir uma pgina simplesmente o duplo cliqueno seu nome.
Clonar uma pgina j existente
Para fazer uma cpia exata de uma pgina existente, selecione o item (nome da
pgina) que voc deseja clonar e clique no boto 'Clone' boto na barra de ferramentas
para inserir uma cpia da pgina.
Remover uma pgina
Selecione o item (nome da pgina) que voc deseja remover e clique no botoRemover na barra de ferramentas ou pressione a tecla Delete no teclado.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
7/20
7
Nota: Voc no pode remover a ltima pgina em seu site.
Renomear uma pgina
Selecione o item (nome da pgina) e pressione F2 para entrar o novo nome. O
software ir automaticamente atualizar todos os links (internos) para voc, assim voc
no tem que transferir os links existentes para a pgina renomeada.
Organizar Itens
Voc pode organizar os itens usando arrastar e soltar, selecione o item e arraste-
o para a posio onde voc deseja mov-lo ou pode usar o menu de contexto (boto
direito) para mover os itens para outra posio.
Importar pgina HTML
Voc pode importar pginas existentes em HTML em seu site, eles sero convertidos
para o formato interno Web Builder (se possvel).
1. Boto direito do mouse sobre a janela do Administrador do Site para exibir o menu
de contexto.
2. Selecione Importar-> Importar pgina HTML.
Usando o menu de contexto
Quando se clica com o boto direito do mouse em um item
no Administrador do Site o menu de contexto ser exibido.
Usando o menu de contexto se pode rapidamente acessar os
comandos disponveis para o item especfico.
Importar uma pgina de outro projeto
Voc pode importar uma pgina de outro projeto com o
comando de menu Pgina importao de outro projeto.
Inspetor Propriedades
Use o inspetor de Propriedades para visualizar e alterar as propriedades dos
objetos selecionados. Voc tambm pode usar o Inspetor de propriedades para modificar
as propriedades da pgina. As mudanas sero visveis imediatamente.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
8/20
8
O Inspetor de Propriedades exibe
diferentes tipos de campos de edio,
dependendo das necessidades de uma
determinada propriedade. Estes campos de
edio incluem caixas de edio, listas drop-
down (que se abrem para baixo), e links para
caixas de dilogo personalizadas. Tambm
possvel modificar manualmente o tamanho e a
posio do objeto selecionado, alterando a
posio e propriedades de tamanho. A
propriedade ID de um objeto deve ser nica
dentro da pgina. Normalmente o construtor
Web ir dar o seu objeto nomes originais
automaticamente. No entanto, se voc usar uma
ou mais pginas mestras, ento IDs podem ser
duplicados, j que o software no pode
distinguir um mestre de uma pgina normal. O Inspetor de Propriedades tambm lhe
dar acesso a atributos mais avanados, como o ID de um objeto. Isto pode ser til se
voc usar pginas mestras e quer dar aos itens da pgina um ID nico. Recomendamos
dar aos objetos em uma pgina-mestre nomes com um prefixo como
MasterPage_Text1. Isso vai garantir que, se a pgina mestra utilizada em outra pgina,
os IDs dos objetos so nicos.
E como criar uma pgina Web?
Aqui iremos delinear algumas consideraes importantes.
Plano de Pginas WebPlanejamento essencial para a criao de um site, se o seu site consiste em uma pgina
ou mais. Decida o que voc quer alcanar com suas pginas web. Decidir sobre um
assunto ou tema principal para suas pginas web.
Reunir informaes
Colete as informaes que deseja incluir em suas pginas da Web, como texto, imagens,
etc.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
9/20
9
Organizar a informao
Divida as informaes coletadas em sees. Cada seo deve ser uma pgina Web
separada.
Pgina Inicial
A pgina inicial a pgina principal de um site. A pgina inicial geralmente a
primeira pgina que as pessoas vem quando visitam um site. Sempre inclua um breve
resumo de suas pginas da Web na pgina inicial. Sua pgina inicial deve incluir uma
tabela de contedo que lista as informaes contidas em seu site. Voc deve incluir
links que permitem aos leitores acessar rapidamente as informaes de interesse.
Dicas:
1. Estudar outros sites.
Antes de comear a criar suas pginas web dar uma olhada em alguns dos seus sites
favoritos. Determine o que voc gosta neles e considere como voc pode usar essas
ideias em suas pginas.
2. Coloque informaes importantes primeiro
Sempre exibir as informaes mais importantes no topo de cada pgina. Alguns
usurios no rolaro uma pgina web para ler todas as informaes.
3. Velocidade de transferncia
Ao criar suas pginas, tentar manter o tamanho do arquivo das pginas e imagens to
pequenas quanto possvel. Isso vai acelerar a exibio de pginas da web, reduzindo o
tempo que leva para que as informaes sejam transferidas a partir do servidor para o
navegador. Imagem redimensionadas no Web Builder no as torna menores em
tamanho, ento use seu editor de imagem favorito para redimensionar a imagem para o
tamanho correto.
4. Teste seu site em diferentes navegadores
s vezes, quando uma pgina fica bem em um navegador, nem sempre pode ser exibidada mesma forma em outro navegador.
Adicionando texto a uma pgina web
Um dos primeiros passos na criao
de uma pgina web costuma ser adicionar
texto. Selecione Inserir-> Texto no menu e
desenhe uma caixa para indicar a posio e o
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
10/20
10
tamanho do texto. Note que voc tambm pode arrastar e soltar o objeto de texto na
caixa de ferramentas. Em seguida, clique duas vezes a caixa para comear a editar o
texto. Digite algum texto e (pressione Enter para ir a prxima linha). A caixa muda
automaticamente seu tamanho para ajustar o texto.
Em seguida, voc pode alterar os atributos de texto,
destacando o texto que deseja modificar com o
mouse e, em seguida, escolher os novos atributos
da barra de ferramentas Formatao. A partir da
barra de ferramentas voc pode mudar o tipo de
letra, tamanho, negrito, itlico, sublinhado, cor do
texto e cor de destaque. H muitas outras opes de
formatao disponveis no menu Formatar. Para
adicionar um link, selecione o texto que voc deseja
vincular e selecione Insert> Hyperlinkno menu.
Usando Estilos
Para aplicar um estilo ao texto selecionado, basta
selecionar um dos estilos criados anteriormente a
partir do menu de estilo. Voc pode criar, editar ou
remover estilo com o Gerente de Estilo (Menu-
>Formatar-> Estilos).
Adicionar uma imagem a uma pgina web
Selecione Inserir-> Imagem do menu e desenhe uma caixa para indicar a posio
da imagem. Ou selecione Imagem na caixa de ferramentas.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
11/20
11
O tamanho da caixa no importa, o Web Builder ajusta
automaticamente a caixa da imagem depois de coloc-la. A janela
de arquivos de imagem ser aberta para que se possa localizar a
imagem que se deseja colocar na caixa de imagem. Selecione a
imagem que deseja adicionar e clique em Abrir para adicion-lo
pgina.
Para redimensionar a imagem arrastar as fronteiras (lida) do objeto da imagem.
Girar uma imagem
Voc pode girar objetos de imagem e de forma. Para girar um objeto:
1. Para selecionar a ferramenta "Rotate" clique Menu-> Editar-> Rotate.
2. Clique para selecionar o objeto, passe o mouse sobre uma de suas alas at ver o
ponteiro de rotao.
3. Segure o boto do mouse e arraste na direo em que voc deseja girar o objeto, em
seguida, solte. Use a tecla Shiftpara intervalos de 15 de rotao.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
12/20
12
Aplicar efeitos em uma imagem
Em WYSIWYG Web Builder voc pode aplicar efeitos em imagens sem ter de
abrir um editor de imagem separado. Alguns dos efeitos disponveis so: brilho,
contraste, Blur, GrayScale, relevo, Negativo, Spia, Nitidez, Suavizar e muito mais.
Ligando suas pginas juntas (Criando hiperlinks)
Um hiperlink vincula uma pgina a outra. Quando um visitante do site clica no
hiperlink, a pgina de destino exibida em um navegador. Os hiperlinks podem tambm
ligar a fotos, arquivos multimdia, locais especficos em uma pgina da web, e-mail, e
programas. Alm de ser apresentada como texto, hiperlinks podem ser de imagens. Para
criar um hiperlink em Web Builder, siga as instrues abaixo.
Texto Vinculao
Selecione o texto que voc deseja vincular e selecione Insert> Link da barra de menu,
clique no boto link na barra de ferramentas ou pressione CTRL + K no teclado. Isto ir
exibir o Hyperlink Inserir janela.
Links de imagens, formas e outros objetos
Selecione a imagem de forma ou a imagem que voc deseja vincular e selecione
Insert> Link da barra de menu, clique no boto link na barra de ferramentas ou
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
13/20
13
pressione CTRL + K no teclado. Note que h tambm uma ligao guia na janela de
propriedades imagens.
Link para uma pgina em outro site
Definir o link para a opo Web Site. Digite a URL completa (endereo de
Internet) da pgina de destino na caixa de URL. URLs externas devem comear com
"http://" ou eles no vo funcionar. Por exemplo, a ligao para a pgina inicial da
disciplina Estudos dos Softwares de Produo em TIC para Educao II "
http://ead.emac.ufg.br/course/view.php?id=289" em vez de "
ead.emac.ufg.br/course/view.php?id=289".
Link para uma pgina em seu prprio Web site
Definir o link para a opo Pgina Web interna. Clique em "Selecionar" para
escolher uma pgina. Isto ir listar todas as pginas que fazem parte do projeto do atual
web site. Selecione uma das pginas e um link relativo ser criado automaticamente
(por exemplo: / Products.html).
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
14/20
14
Link para um arquivo (ZIP, PDF etc)
Esta opo pode ser til se voc quiser criar um link
para download de um arquivo ZIP ou PDF. Defina o
link para a opo Arquivo. Procure o arquivo que voc
deseja criar um link. WYSIWYG Web Builder ir
automaticamente fazer ouploaddo arquivo local para
o seu site, quando voc publicar sua pgina.
Nota: Quando liga para arquivos grandes, pode
demorar um tempo um pouco at que o arquivo seja transferido para o seu site. Note
tambm que no pode abrir o arquivo em uma janela pop-up. Pop-upss funciona para
arquivos HTML.
Salvando o seu site
No WYSIWYG Web Builderno so editadas pginas HTML diretamente. Em
vez disso, um arquivo de projeto est sendo usado (. Wbs), e nele so armazenadas
todas as pginas de seu site dentro de um nico arquivo. Toda vez que quiser editar seu
site deve abrir este arquivo de projeto. Para salvar o seu site web (incluindo todas as
pginas que contm), selecione File-> Save Web Siteno menu e digite um nome para o
projeto. Web Builderusa a extenso . wbs (Web Site Builder) para salvar os arquivos do
projeto, para salvar sua pgina como HTML voc precisa publicar suas pginas.
Fazer backup de arquivos
Por padro todos os arquivos de projetos sero salvos na pasta Meus
Documentos \ WYSIWYG Web Builder. Ento, para fazer backup de seu trabalho,
certifique-se de faz-lo de toda a pasta, alm de todas as pastas onde foram
armazenados os arquivos do site (imagens, movimentos, etc.).
Visualizar uma pgina em seu navegador
Selecione File-> Preview in Browser-> Default Browser(F5) para visualizar a
pgina atual em seu navegador padro. Tambm possvel alterar o navegador que
utilizado para a visualizao. V em File-> Preview in Browser -> Edit Browser list
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
15/20
15
para adicionar / editar a lista de navegadores que podem ser usados para pr-visualizar
as pginas que voc est trabalhando.
Dependendo do escopo de visualizao (Ferramentas-> Opes-> Misc), voc
pode visualizar uma nica pgina ou o site inteiro.
Publicar suas pginas da webA fase final de criao de um website publicar suas pginas. Para colocar as
suas pginas na Web, necessrio um servidor web. Comumente chamado hosts,
servidores Web permitem transferir e armazenar arquivos, incluindo documentos
HTML, imagens e arquivos multimdia. A menos que se tenha o seu prprio servidor
web, voc precisa encontrar um servidor para hospedar suas pginas (estudaremos mais
adiante servios de hospedagem de pginas de internet).
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
16/20
16
Adicionando uma barra de navegao para o seu site
Uma das caractersticas interessantes de WYSIWYG Web Builder a
capacidade de adicionar elementos de navegao avanadas para sua pgina da web
com apenas alguns cliques do mouse. A barra de navegao um desses elementos.
Para inserir uma barra de navegao selecione Insert> Navigation-> Navigation Bar.
Uma barra de navegao um grupo de botes, onde cada boto ligado a uma pgina
diferente.
Voc pode adicionar, editar ou remover botes a qualquer momento usando as
propriedades. Selecione Adicionar para inserir um novo boto ou Editar para modificaras propriedades de um boto existente. Para remover um boto da barra de navegao,
selecione Remover. Voc pode reorganizar a ordem dos botes usando Mover para cima
e Mover para baixo.
Em Navigation Bar Propertiers, Style,se define
coisas tipo fonte, estilo, tamanho e cor. Para
alterar a aparncia do boto, deve-se selecionar
um da imagem de boto da lista suspensa. Vocpode selecionar uma imagem diferente para
quando o mouse passa sobre um boto na barra
de navegao. Para selecionar suas prprias
imagens, selecione o primeiro item na lista
ento voc vai ser capaz de especificar a
localizao de uma imagem no seu computador.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
17/20
17
Adicionando uma barra de menu para o seu site
Uma das caractersticas interessantes de WYSIWYG Web Builder a
capacidade de adicionar elementos de navegao avanadas para sua pgina da web
com apenas alguns cliques do mouse. A barra de menus um desses elementos. Para
inserir uma barra de menu selecione Insert->Navigation->Menu Bar.
A barra de menu um menu script muito poderoso baseado emJavaScript que
pode imitar complexos menus encontrados em aplicaes GUI populares. Web Builder
fornece um menubuilderassim voc pode facilmente adicionar itens de menu, atribuir
os links e definir o estilo para o menu usando a guia de estilo.
Selecione Add para inserir um novo item no menu ou Edit para modificar as
propriedades de um item existente.Para remover um item da barra de menu, selecione Remove.
Pode-se reorganizar os itens no menu usando arrastar e soltar para mover os
itens em torno de ou usando a mover para cima, Mover para baixo, Mover para a
esquerda ().
Os botes Insert Split insere um divisor / divisor no menu. O menu pode ser
vertical ou horizontal. Ao ativar a opo de Synchronize with Site Manager, o Web
Builder sincroniza automaticamente os botes com o contedo do Site Manager, para
que voc no tenha que adicionar todos os seus links internos manualmente.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
18/20
18
Menubar Style
Use-o para alterar a aparncia da barra de menu ou selecionar um tema pr-
definido de padro de seleo para editar as cores do menu e texto formatao. Observe
o efeito do tema escolhido s ser visvel no navegador. Ento voc vai ter que
visualizar ou publicar na primeira pgina.
Outras amostras menubar:
Usando modelos
WYSIWYG Web Builder tem um recurso muito til chamado "modelos". Os
modelos podem mais tarde ser usado por voc (ou outra pessoa) para usar uma base
para um novo site.
Ao salvar uma pgina web para um modelo que ir incluir todas as imagens e
outros objetos no arquivo de modelo. Portanto, no h necessidade de copiar estes
arquivos separadamente. Ento simplesmente se copia um arquivo de um computador
para outro e se pode comear ou continuar trabalhando em suas pginas. Modelos Web
Builder tem a extenso WTP.(ou wwb.) e so salvos na sub-pasta \ templates da
subpasta de sistema do Web Builder na sua pasta de documentos. C: \ Users \ SeuNome
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
19/20
19
\ Documents \ WYSIWYG Web Builder \ system \ templates onde seunome o nome
da sua conta de usurio do Windows.
NOTA IMPORTANTE: Se voc tiver alterado a pasta padro dos documentos em
Menu->Options->Tools->Folder->Documentos padro, ento a pasta de modelo
tambm vai mudar. Assim, por exemplo, se voc mudou para C:\My Web Sites\ ento a
pasta do sistema (e todas as sub-pastas) estaro em C:\My Web Sites\system\templates.
Crie um site baseado em um modelo
Selecione File-> New Web Site do modelo para exibir a janela de seleo de
modelo. Escolha um modelo e clique em OK. O Web Site Salvar Como janela agora ir
pedir que voc especifique um nome para o site. Digite o nome e clique em Salvar para
criar o novo site baseado no modelo de seleo.
Escolha um modelo e clique em OK. O Web Site salvar e agora ir pedir quevoc especifique um nome para o site. Digite o nome e clique em Salvar para criar o
novo site baseado no modelo de seleo.
Para salvar seu prprio site como
modelo, selecione: File->Save As
Templatecomo modelo a partir do menu
modelos adicionais.
7/22/2019 Cap. 3 - Conhecendo o Wysiwyg Web Builder1
20/20
20
Agora com voc. Explore as possibilidades da caixa de ferramentas e recorra
s propriedades para a personalizao das suas escolhas. Por exemplo, para escolher
uma cor de fundo no seu site, v em "Properties" e em "BackgroundColor" clique no
campo na coluna ao lado para escolher a cor que lhe agrada. Fazendo isso,
imediatamente, tem-se a alterao da cor do fundo da rea de trabalho. Para modular
essa cor, pode-se clicar no campo da coluna lateral da funo "BackgroundMode" e
escolher entre as funes "Solid", "Transparent", "image" e "Gradient".
Assim, tenha liberdade de alterar e montar seu site do jeito que quiser, sem se
importar com os resultados imediatos. S lembrando que voc pode alter-lo em
qualquer momento.
Atividade 3 - Construindo uma proposta de pgina simples com o Wysiwyg .
Nessa atividade voc deve explorar os recursos do programa estudado para a construo de uma propostade pgina para apoio pedaggico ao trabalho do professor. Assim, releia o item "E como criar umapgina Web?" na pgina 8 e com base nas dicas expressas elabore uma proposta de site para o trabalhode apoio pedaggico dentro de uma determinada temtica a sua livre escolha. Envie a proposta elaboradaem PDF. Caso queira construir a pgina proposta com o WYSIWYG, ela ser til para o estudo docaptulo sobre hospedagem de pginas na Web.
Bibliografia Consultada
ONLINE TUTORIAL - WYSIWYG Web Builder 8. Disponvel no site
.
Top Related