Nvu

Manual do NVU adaptao da

apostila_nvu_cobra1-1.0

Nvu

ndice geral
1. ELEMENTOS DA JANELA DO NVU ............................................................................3 2.TRABALHANDO COM TEXTO ....................................................................................8 3. INSERINDO IMAGENS ..............................................................................................8 4.INSERINDO TABELAS .............................................................................................10 5.LINK .......................................................................................................................11 6.FORM (FORMULRIO).............................................................................................12 7.LAYERS (CAMADAS)................................................................................................12 8. STYLES (ESTILOS) .................................................................................................15 9.TEMPLATES (MODELOS) .........................................................................................20 10. SITE MANAGER (GESTO DE SITES) ....................................................................20 11.PUBLICAO DO SITE NA REDE............................................................................22

Nvu

Manual do NVU
DESCRIO: O NVU uma ferramenta que foi criada para Webdesigners e para criadores de aplicaes para o ambiente web. um editor muito poderoso e permite configuraes para reconhecimento de sintaxe em linguagens de scripts como PHP. CONHECENDO PASSO A PASSO: Para aceder ao NVU clique em Aplicaes >> Programao >> NVU surgir desta forma a seguinte janela:

1. ELEMENTOS DA JANELA DO NVU 1.1-Barra de Ttulo - Mostra o nome da aplicao, o nome do documento em uso.

1.2-Barra de Menus - Contm os menus onde se encontram todos os recursos do NVU. Para abrir qualquer um deste, basta clicar uma vez sobre seu nome. 3

Nvu

1.3-Barra de Ferramentas - Nesta barra encontram-se os botes de acesso aos recursos mais utilizados do NVU, evitando o percurso pelo interior dos menus.

Veja a seguir a funo de cada um: New (Novo) - Ao clicar neste boto, poder criar uma nova pgina. A nova pgina poder ser aberta numa nova aba (Tab), ou numa nova janela. Poder ainda escolher se deseja criar um novo ficheiro HTML.

Open (Abrir) - Permite escolher um ficheiro local para abertura.

Nvu Save (Guardar) Permite-lhe guardar a pgina em edio, localmente.

Publish (Publicar) - Esta opo permite publicar a pgina num servidor remoto. Para isso necessrio especificar o http do site.

Anchor (ncora) - Inserir nova ncora ou editar as propriedades da ncora seleccionada, o que se ir realizar ao clicar sobre esta opo.

Nvu Links - Esta opo permite inserir um novo link ou editar as propriedades do link seleccionado.

Image (Imagens) - Ao clicar sobre este boto poder inserir uma nova imagem na sua pgina html ou modificar as propriedades de uma imagem que esteja seleccionada.

Form (Formulrio) - Traz uma srie de opes referentes insero e edio de formulrios, entre as quais se encontram as opes: Definir formulrio, Imagem 6

Nvu de formulrio, rea de texto, Lista de seleco, Definir boto, Definir rtulo, Definir configurao de campo e Procura de ndice.

Spell (Ortografia) Permite-lhe fazer a verificao ortogrfica do texto inserido na pgina em edio.

Print (Imprimir) - Permite configurar opes de impresso.

Nvu

1.4-Barra de Formatao -Esta barra permite ao utilizador a utilizao da maioria dos recursos de formatao como aplicao da fonte, do tamanho, etc.

2.TRABALHANDO COM TEXTO 2.1 - Formatar texto: 1- Seleccione o documento 2- Formate da maneira que desejar atravs da Barra de Formatao, que disponibiliza os recursos utilizados para uma formatao simples e rpida. 2.2 - Listas: 1- Clique no menu Format Opo List

Nvu

Tipo de Lista: Bullet (Lista de marcador): Crculo slido, crculo aberto ou quadrado slido. Numbered (Lista numerada): 1,2,3 I,II,III i,ii,iii A,B,C ou a,b,c. Definition (Lista de definio): A sequncia varia conforme o nmero de linhas.

2.3-Visualizar documento:

1- Clique na aba (tab) Preview (Visualizao) 3. INSERINDO IMAGENS 3.1-Inserir imagens: 1 Clique no cone Image Location (Localizao)

Nvu

Image Location (Posio da imagem): Especifique o local e o ficheiro onde a imagem est localizada. Tolltip (Dica de Ferramenta): Uma mensagem especifica da imagem. Alternate Text (Texto alternativo): Voc tem essa opo para capturar imagens de ficheiro, podendo ser usada ou no. Dimensions (Dimenses):

Actual Size: Tamanho actual da imagem. Custom Size: Dimensionar o tamanho imagem. Width: Largura da imagem Heigth: Altura da imagem Appearance (Aspecto):

10

Nvu

Left and Rigth: Espaamento esquerda e direita da imagem. Top and Bottom: Espaamento no alto e ao fundo da imagem. Solid Border: Altera o tamanho do limite. Align Text to Image: Alinha o texto com a imagem, conforme a sua preferncia.

Link:

Escolha o caminho da pgina ou ficheiro. Ex: minha_primeira_pgina.html 4.INSERINDO TABELAS 4.1-Inserir tabelas:

11

Nvu 1Clique no boto Table (Tabela)

Tabela:

Quickly Com o rato seleccione o nmero de linhas e colunas que pretende inserir. Precisely Definio mais precisa do nmero de colunas e de linhas, do tamanho e do limite. Cell Definio dos alinhamentos (horizontal e vertical), do ajustamento e espaamento do texto. 5.LINK 5.1-Descrio: O Link um atalho para aceder a uma outra pagina HTML ou uma parte da prpria pgina ou at mesmo um atalho para se enviar um e-mail. 1 - Clique em Insert (Inserir) Opo Link

Link Text (Texto do Link):Texto que ser o link para outra pgina ou parte dessa mesma pgina. 12

Nvu Link Location (Posio do Link): Endereo de outra pgina sua ou da internet ou mesmo parte do texto. Choose File (Escolher ficheiro): Esse boto serve para escolher a pgina ou mesmo ficheiro, caso seja o pretendido. 6.FORM (FORMULRIO) 1- Clique em Insert (Inserir) Opo Form (Formulrio )- Define Form

Form Properties (Propriedades do Formulrio ) Form Name (Nome do Formulrio): um campo obrigatrio para poder manipular futuramente as informaes desse campo. Action URL (Aco URL): Pode ser uma outra pgina com os resultados esperados. Method (Mtodo): Como sero enviado os dados e como ser aberta a prxima pgina, se na mesma ou noutra janela do browser. 7.LAYERS (CAMADAS) 7.1-Descrio: So recipientes que podem ser posicionados por coordenadas e podem conter vrios tipos de informao. Uma camada uma diviso, uma parte da pgina, que tem um comportamento muito independente dentro da janela do browser, j que podemos coloc-la em qualquer parte da mesma e podemos movernos por ela independentemente. Clicando no cone na barra de ferramentas automaticamente vai ser inserida uma camada onde se pode movimentar de acordo com a sua necessidade. Surgir a seguinte janela: 13

Nvu

Na seguinte caixa poder mover a camada atravs da pgina e clicando duas vezes surgir uma janela de configurao. Guia HTML Attributes (Atributos HTML)

Advance Property Editor (Editor de Propriedades Avanado)

Atributos Align: Alinhamento do contedo da clula. ID: Identificao da camada. Class: Classe Title: Ttulo.

14

Nvu Guia Inline Style (Estilo Srie em Linha)

Editor de Propriedades Avanado (camada) Position: Posio Width: Tamanho da camada em largura. Left: Posio X ou quanto maior for o valor mais para o lado direito ficar a camada. Top: Posio Y ou seja quanto menor for o valor mais em cima ficar a camada.

Guia JavaScript Events (Eventos JavaScript )

15

Nvu

Atributo: Onclick: A aco s ocorrer quando se clicar na camada ou no link na camada. Ondblclick: A aco s ocorrer quando der um duplo clique na camada ou no link na camada. Onmousedown: A aco s acontece quando se clicar com o boto do rato sobre a camada. Onmouseover: A aco ocorrer quando passar a seta do rato sobre a camada ou link da camada. Onmousemove: A aco ocorre quando se movimenta o ponteiro do rato sobre a camada ou link. Onmouseout: A aco ocorre quando a seta do rato sai de cima da camada ou link. Onkeydown: A aco ocorre quando pressionar uma tecla. Onkeyup: A aco ocorre quando pressionar e soltar a tecla.

8. STYLES (ESTILOS) 8.1-Descrio: O CSS (Cascading Style Sheet) permite uma versatilidade maior na programao do layout de pginas web sem aumentar o seu tamanho em Kb, pois oferece vrias possibilidades que antes s eram conseguidas com a utilizao de gifs e jpgs. Basicamente, o CSS permite ao designer um maior controlo sobre os atributos de uma home page, como o tamanho, a cor das fontes, o espaamento entre as linhas, os caracteres, as margens do texto, as caixas de texto, os botes do formulrio, entre outros. Introduziu tambm s pginas a utilizao de layers, permitindo a sobreposio de objectos como textos e imagens em camadas uma sobre as outras.

16

Nvu

1-Na barra de menus, clique no menu Tools (Ferramentas) Opo CSS-Editor, de seguida aparecer a seguinte janela:

Style elt.: Nessa opo criamos a entrada de um novo estilo. New Stylesheet Media List: Nome da lista de estilos Title: Titulo do estilo.

Create Stykesheet: Boto para criar o estilo.

17

Nvu

No boto Rule criar regras para o estilos

*No campo a vazio digite um nome para a regra: Create Style rule: Boto para criar as regras.

18

Nvu Foi criado um campo TEXTO para o estilo agora edita-lo Guia Geral:

Guia Text:

Text Font Family Unspecified: sem especificao. Predefined: Especificar o tipo da fonte. Use Custom font family: Escolher as fontes. Font size: Tamanho da fonte. Line height: Tamanho da Linha. Color: Cor da Fonte. Font weight: Normal ou negrito. Font Style: Normal ou Itlico. Case: tudo caixa alta ou tudo caixa baixa, capitulares. Alignment: Alinhamento, centralizado, justificado, esquerda ou direita. Text decorations: Overline: Linha acima do texto. Line-through: Linha sobre o texto. Underline: Linha abaixo do texto. Guia Background

19

Nvu

Color: Escolher uma cor para o fundo da Pagina ou da tabelas. Opacity: Grau transparncia da cor. Image: inseri uma imagem como fundo. Choose file: escolher a imagem navegando pelas pastas.

Guia Borders:

All four sides use same border style: As alteraes do limite Top ser a mesma para todas as outras. TOP: Limite superior. Left: Limite esquerdo. Right: Limite direito. Bottom: Limite inferior. Style: Tipo do limite. Width: Espessura do limite. Color: Cor do limite.

20

Nvu Guia Box

*Configurao feita atravs do servidor FTP. Relativo a caixa de textos. Guia Aural

*Configurao feita atravs do servidor FTP.

Relativo ao udio. Observao:

General Export stylesheet and switch to exported version: Boto para exportar para 21

Nvu um ficheiro. 9.TEMPLATES (MODELOS) 9.1 Descrio: Como o prprio nome j diz, pode aproveitar um modelo j existente no ficheiro, site, etc, ou at mesmo criar um documento baseado num modelo ou um modelo em branco. 1 -Clique no menu File (Ficheiro) Opo New(Novo)

Blank Document (Um documento em branco) : Novo documento HTML ou XHTML. A New Document based on a template (Um documento baseado em um modelo): Usa um ficheiro j existente como modelo. A Blank Template (Um modelo em branco): Cria um novo modelo. *Nova aba, na mesma janela do programa. *Nova janela, uma janela separada da actual.

10. SITE MANAGER (GESTO DE SITES) 10.1 Descrio: Esse recurso pode ser utilizado para a edio de sites independente de estar local ou remoto. Nele ser necessrio o endereo da pagina e o endereo do FTP mais Login (nome de utilizador) e password. 1-Clique no menu View (Exibir) Opo Show/Hide (Mostrar/Ocultar) -

22

Nvu Site Manager (Gestor de sites)

New Site: Novo site. Site Name (Nome do site): O nome da pgina web. Informao do Web Site - O Endereo HTTP da pgina web. Servidor de Publicao (FTP) do site web. Endereo de FTP NVU Site Manager (Gestor de Site Nvu )

Estrutura do site ser exibida em forma de raiz, poder ser vista: All files: Todos os ficheiros. HTML documents: Somente documentos HTML Images files: Somente as imagens. 23

Nvu

11.PUBLICAO DO SITE NA REDE

11.1-Validando um site Essa validao feita atravs de um protocolo chamado FTP (File Transfer Protocol) uma forma bsica de transmisso e recepo de ficheiros entre os computadores na Internet. Todos os sites armazenados num servidor web ganham um nome de utilizador e senha de autenticao para que seja possvel transferir a qualquer momento ficheiros. O nome do servidor FTP o prprio nome do domnio do cliente (ex: www.nome_do_dominio.com.br). 11.2-Publicando o site 1- Clique menu File (Ficheiro) Opo Publish (Publicar Publicar Pgina)

Site Name (Titulo da pgina): Nome da pgina ou do site. Web Site Information (Nome do ficheiro): Index.html caso seja a pgina principal, ou um nome qualquer referente a pagina, lembrando que no se deve alterar o nome do ficheiro da pagina sem alterar os vnculos. Site Name (Nome do Site): Colocar ou alterar o nome do site. Web Site Information (Informao de Web Site): Endereo da pgina na internet. 24

Nvu Publhishing Server (Servidor de Publicao): Geralmente o mesmo endereo da pagina web, mas tambm pode ser um endereo IP (InternetProtocol). User Name e Password (Nome de Utilizador e Senha): Serve para autenticar o servio para poder efectuar o Upload (envio de dados). E a manipulao dos ficheiros no servidor. Ateno: em qualquer dos casos, verifique os nomes dos ficheiros e pastas antes de envi-los. Recomendamos que todos os links e referncias dentro dos ficheiros html sejam feitos em letras minsculas (ou mantendo a coerncia de letras minsculas ou maisculas entre o nome do ficheiro que est gravado no disco e o nome do ficheiro que est escrito dentro do cdigo html). No utilize acentos ou espaos em branco no nome dos ficheiros.

25

Nvu

ANEXO I TECLAS DE ATALHOS

ACO Novo documento Abrir documento Abrir localidade Fechar documento Gravar documento Publicar pgina Imprimir documento Sair Desfazer aco Recortar Copiar Colar Eliminar Seleccionar tudo Localizar Localizar novamente Localizar anterior Ortografia Link Discontinue text stile Aumentar recuo

ATALHO Crtl+N Crtl+O Crtl+shift+L Crtl+W Crtl+S Crtl+shift+S Crtl+P Crtl+Q Crtl+Z Crtl+X Crtl+C Crtl+V Del Crtl+A Crtl+F Crtl+G Crtl+shift+G Crtl+K Crtl+L Crtl+shift+Y Crtl+]

26