Nvu Unidade 2

NVU    ELEMENTOS BÁSICOS DUNHA PÁXINA WEB     Independentemente do programa que se use para a creación de páxinas Web, estas  poden conter os mesmos elementos, a saber:   •

Texto: estático ou en movemento.  

•

Imaxes: fixas ou animadas.  

•

Sons.  

•

Secuencias de vídeo.  

  TEXTO     O texto, compoñente fundamental das páxinas Web, xerámolos tecleando (aínda  que tamén se pode copiar desde calquera outro programa e pegalo).   Hai unha serie de regras que debemos ter en conta con respecto ó texto:     •

O seu obxectivo é a lexibilidade (parece una obviedade, pero non é inusual  encontrar páxinas en Internet que practicamente non se poden ler).  

  Nas páxinas Web hai que reservar o subraiado exclusivamente para os enlaces. En  xeral, a cursiva é o formato apropiado para titulares e funciona ben para enfatizar. Cando  queiras destacar unha palabra, emprega negrita ou cursiva. o uso abusivo de demasiados  estilos produce un efecto estrambótico. Reserva os tipos de negrita e letra grande para os  titulares, os cales deben destacar sobre o resto da páxina.   En resumen, podemos darlle ó texto distintas aparencias, pero debemos ter a  precaución de utilizar tipos de letra que resulten claramente lexibles para que non resulte  pesada a lectura das túas páxinas. Un aspecto a ter en conta é que o texto debe contrastar  claramente co fondo que elixas para as túas páxinas e que os tipos de letra (fontes) que se  utilicen garantan a lexibilidade do mesmo.  

 

1

NVU  Por outra parte, se empregamos unha fonte que o navegante da nosa páxina non  ten no seu equipo non a verá exactamente como a deseñamos. Cada carácter, en calquera  fonte, consta dunha letra, un número ou un símbolo xunto cunha certa cantidade de  espazo branco arredor. As fontes proporcionais e de ancho fixo defiren na cantidade de  espazo que ocupa cada carácter.   As proporcionais se denominan así porque cada carácter ten un ancho diferente  (como acontece co texto deste escrito) e, polo tanto, emprega unha cantidade de espazo  proporcional ó seu tamaño. A cantidade de espazo que unha palabra ocupa nunha liña  depende de qué letras conten, non de cantas letras conten.     Exemplo: Times New Roman é unha fonte proporcional, polo que a letra “i” ocupa  menos espazo que a “w” : iiiiiiiiii wwwwwwwwww (non ocupan o mesmo espazo dez  letras “i” que dez “w”). As fontes de ancho fixo empregan letras que ocupan unha  cantidade igual de espazo. Por exemplo: Courier é unha fonte de ancho fixo, polo que dez  “i” ocupan igual que dez “w” : iiiiiiiiii wwwwwwwwww. Esta fonte ten a aparencia  do texto dunha máquina de escribir ou dun telegrama.     Para organizar o texto en pantalla é preferible utilizar táboas e prescindir do uso de  tabuladores e sangrías. Tampouco debe abusarse da utilización de viñetas. A forma de  traballar con táboas e viñetas é moi similar que con calquera procesador de textos.                  

 

2

NVU  EXERCICIO: Abre a páxina index.htm se non a tes aberta (recordamos que se atopa  na carpeta C:\Documents and Settings\Nombre_de_usuario\Mis Documentos\webtic).  Ó igual que calquera programa, NVU memoriza as últimas páxinas abertas no Menú  Arquivo, opción Páxinas recentes.   

    Cando teñas a páxina aberta escribe:   “Cómo inserir un texto” (como cabeceira)   Tipo de letra: Helvetiva, Arial.   Tamaño: 37 pto. Para isto, na barra de ferramentas utilizamos o botón de Aumenta  o tamaño da letra.   Negrita e cursiva.   Xustificación: Centrada (isto se pode facer na barra de ferramentas).   Pon como fondo de páxina calquera color que contraste co color de letra que  seleccionas (por exemplo: amarelo claro).   Despois escribe “Estou realizando un taller de NVU e isto é o primeiro que escribo.  Resulta practicamente igual que facelo co procesador de textos. De feito, unha opción  podería ser seleccionar este trozo de texto, copialo no portapapeis e pegalo en NVU”.  

 

3

NVU  Posteriormente, copia ese trozo que escribiches e pégao un pouco máis abaixo. O  segundo parágrafo o xustificamos (por defecto a aliñación dos parágrafos en NVU é á  esquerda).   Cando o teñamos feito, pincha na pestana Vista previa da parte inferior da ventá e  comprobará a aliñación dos dous parágrafos (ver figura de abaixo).   

      SANGRADO DE PARÁGRAFOS     Para sangrar parágrafos podes utilizar a tecla Tab do teu teclado (ó igual que  acontece co procesador de textos), ou el botón Sangrar texto da barra de ferramentas.   Tamén podemos tabular “artificialmente” un parágrafo mediante espazos sen salto.  É, como o seu nome indica, un espazo que non produce salto (é un tipo particular de  espazo que está considerado un carácter en si mesmo en lugar de ser, simplemente, un  espazo entre caracteres). Para ser más específico, los espazos simples que se obteñen ca  barra espaciadora non son considerados esenciais pola maioría dos navegadores; se  colocas un puñado de espazos en branco, un tras outro, para intentar dar formato a un  texto, nalgúns navegadores só se mostrará un espazo.    INSERTAR IMAXES     Para inserir unha imaxe no documento seleccionar a opción de menú Inserir >>  Imaxe, se mostrará a seguinte caixa de diálogo, con diversas solapas:   

4

NVU                          •

Ubicación: indicase de onde tomar a imaxe, pulsando no botón Elixir  arquivo. Tamén se indica o texto alternativo que se mostrará da imaxe e un  texto de axuda cando se pase o rato por encima.  

•

Dimensións: pódese cambiar o tamaño da imaxe.  

•

Aparencia: establécense as distancias entre a imaxe e o texto, así como a  aliñación do texto arredor da imaxe.  

•

Enlace: pódese establecer un hipervínculo para a imaxe.  

•

Botón Edición avanzada: para establecer opcións avanzadas como atributos  HTML, eventos de JavaScript, estilos, etc.  

  Unha vez inserida a imaxe, pódense establecer as súas propiedades facendo dobre  pulsación sobre ela, seleccionando a opción de menú Formato >> Propiedades da imaxe  ou a través do menú contextual.        

 

5

NVU  EXERCICIO: vamos a aprender a inserir imaxes de varios tipos. Unha imaxe fixa, un  gif animado e unha imaxe de fondo será a próxima proposta.     As imaxes funcionan máis ou menos como nun procesador de textos. Nas páxinas  Web soen utilizar os formatos seguintes:     •

GIF. Para debuxos e imaxes con poucos colores. Este formato nos permite elixir  un color transparente e facer animacións.  

  •

JPEG ou PNG. Para fotos e imaxes que requiren máis calidade. Non obstante,  non permite transparencias nin animacións.  

  Antes de nada vamos a crear unha carpeta para incluír nela todas as imaxes da nosa  Web na carpeta webtic, de xeito que a ruta quede da maneira seguinte C:\Documents  and Settings\Nombre_de_usuario\Mis Documentos\webtic\imagenes, os arquivos de  imaxes poderemos descargalos desde Internet ou ben copialos en dita carpeta desde a  ubicación que teñan no noso ordenador.   Unha vez feito isto, para inserir una imaxe nunha páxina, procederemos tal e como  se comentara ó comezo deste apartado, mostrándose a continuación unha pantalla como  a seguinte, tendo dúas opcións:   A primeira será inserir unha imaxe desde a carpeta imaxes que comentamos  previamente, para o que faremos clic en Elixir arquivo…   

 

6

NVU 

 

    Nesta pantalla seleccionaremos a imaxe que queremos engadir na nosa Web.  

 

7

NVU  A segunda será indicar unha dirección url onde se atope a imaxe a inserir. Por  exemplo, buscamos unha imaxe da Catedral de Málaga no banco de imágenes del CNICE.   

  Unha vez seleccionada a imaxe, facemos clic sobre ela co botón dereito do rato,  despregándose o menú emerxente podemos observar a continuación e elixindo a opción  Copiar a ruta da imaxe.   

 

8

NVU 

    Una vez copiada la ruta da imaxe, volvemos á ventá do noso editor NVU e no  apartado Ubicación da  imaxe “pegamos” a  ruta da imaxe que  queremos inserir, tal e  como observamos a  continuación.               

 

9

NVU  Completamos igualmente los campos Título emerxente (neste caso “Catedral de  Málaga”) e Texto alternativo, quedando a imaxe inserida na páxina que estamos creando  tal e como vemos a continuación.   

    AVISO: Realizando a inserción de imaxes desta maneira, temos o risco de que cando  a imaxe deixe de estar ubicada no servidor correspondente, non apareza na nosa Web  pois a ruta da mesma cambiou.    IMAXES COMO FONDO DE PÁXINA     Agora colocaremos unha imaxe de fondo de  páxina. Para elo pinchamos sobre a páxina en Formato  >> Colores e fondo de páxina...    Despois, no cadro de diálogo que se nos mostra  pinchamos en Imaxe de Fondo; activamos a casilla  Imaxe de fondo e pinchamos no botón Elixir arquivo....   

 

10

NVU 

    Como vimos antes, a primeira ventá que se nos abre é na que aparece a nosa Web  (C:\Documents and Settings\Nombre_de_usuario\Mis Documentos\webtic\imagenes).  Dentro da carpeta “imaxes” seleccionamos o arquivo que desexemos ter como fondo de  páxina.  Se a imaxe é máis pequena que a zona de visualización dunha páxina (como nesta  imaxe elixida para o fondo), a repite en forma de mosaico ocupando toda a pantalla. Por  iso as imaxes de fondo sempre hai que seleccionalas ben para que non dificulten a lectura  do texto. 

 

11

NVU 

  Isto mesmo que describimos para o fondo da páxina serve para o fondo dunha táboa  que poñamos nela.     VER O NOSO TRABALLO     Unha vez que temos creada a nosa páxina, podemos visualizala desde o programa  navegador. Para isto arrancamos o navegador por defecto que teñamos no noso  ordenador desde NVU de varias formas:     1.

Seleccionando la opción Visualizar páxina no navegador desde o menú Arquivo.    

2.

Pinchando o botón situado na Barra de ferramentas.     Tamén se pode abrir desde o navegador seleccionando o arquivo da nosa páxina 

Web.   Hai que ter en conta que cada vez que realices modificacións na túa páxina,  poderanse ver reflectidos os cambios no programa navegador, polo que se gardará a  páxina antes de vela.  

 

12