7. Diseño Web básico.
 
 
Editor
Tablas
Título de la página
Imágenes
Colores y fondos de la página
Línea separadora
Apariencia del texto
Enlaces y destinos
 
La forma más simple de crear una página Web consiste en utilizar un editor. 
Proponemos el editor HTML de Netscape.

 
 
 
REGRESO AL "ÍNDICE".

 
 
 
Editor.
      Netscape Communicator  ofrece un editor llamado Composer. Este programa navegador permite crear fácilmente páginas Web. Se escribe un texto, se hace click para añadir cursiva o negrita, una imagen, sonidos o un enlace, y  Composer añade los comandos necesarios para crear páginas (con imágenes, color, tablas, sonido y enlaces).
Netscape se obtiene gratuitamente en Internet, conectándonos a la página del navegador:

Netscape


Para lanzar Composer a partir de Netscape Communicator :

Hacer click en Archivo-Nuevo-Página en blanco

ó 

En el menu desplegable Communicator, haced click en  Composer.

Aparecerá un nuevo formato, preparado para comenzar nuestra página en hipertexto. 

Para seguir mejor las orientaciones que siguen, aconsejamos abrir una página en Composer (el editor HTML) y también en  Navigator (el navegador). Leed estas instrucciones en  Navigator, y cambiad a Composer para hacer vuestro documento en hipertexto. Para cambiar de documento basta con hacer click en la pestaña que aparece en la parte baja de la pantalla.

 

 
 
REGRESO A "DISEÑO WEB BÁSICO".

 
Título de la página
      Es recomendable dar un título a la página que vamos a confeccionar (el título no es el nombre del documento). Para añadir el título haremos click en el menú desplegable Formato-Colores y Propiedades de la página. En la pestaña General escribid el título que deseais dar a vuestra página. Después haced click en OK. El título aparecerá en la primera barra (normalmente azul) de la parte de arriba del navegador, y será utilizado por los motores de búsqueda.
 
¿Eres buen observador? ¿Cuál es el título de esta página? 
  1. 1.11. Software en internet.
 

 
REGRESO A "DISEÑO WEB BÁSICO".

 
 
 
Los colores y los fondos de página
      Una vez que se ha dado un título a nuestra página, podemos empezar a personalizarla. Elegid el menú Formato, después haced click en Colores y Propiedades de la página. Elegid la pestaña Colores y Fondo. Se puede cambiar: 
el color del texto de vuestra página;
el color del texto de un enlace no visitado; 
el color del texto de un enlace ya visitado;
el color del texto de un enlace cuando se hace click encima.
Además, se puede cambiar el color del fondo de la página  (Background) o utilizar una imagen. Si se elige una imagen (que se tiene guardada en el disco del ordenador), el navegador puede repetir la imagen para cubrir toda la página. En este sitio se encontrarán varios tipos de fondos de página. 

¡Atención! Algunos fondos dificultan la lectura del texto. Una vez elegido el fondo, es aconsejable escribir algunas palabras y después hacer click en el botón Presentación preliminar, para comprobar si el texto es bien legible. 
 

Intentad crear una página. Una vez creada, no olvidéis guardarla en el disco duro. Después haced click en el botón Presentación preliminar y comprobad si el texto es legible y os gusta el aspecto.
 

 
 
REGRESO A "DISEÑO WEB BÁSICO".

 
 
 
El aspecto del texto
      La cuarta barra de  la parte de arriba del editor, que reproducimos aquí, nos da diversas posibilidades para la presentación de la página. En las explicaciones siguientes nos referimos a los círculos en color indicados. 

la 4e barre

Círculo azul:
Haciendo click sobre la flecha, se accede a un menú que permite cambiar el aspecto del texto. 
    Normal

    El texto aparece así.
    Los encabezamientos: generalmente influyen en el tamaño de los caracteres

    título 1

    título 2

    título 3

    título 4

    título 5
    título 6
    Dirección: formato que permite presentar la dirección del autor de la página, al final de ésta.
    cvera@platea.pntic.mec.es

    Con formato: permite guardar la misma distancia entre las letras.
     
    Este es el resultado.


la 4e barre

Círculo naranja :
Haciendo click en la flecha, se accede a diversos colores para las letras. Todas las letras pueden ser modificadas en un texto. Basta con seleccionarla, creando un bloque, y elegir el color que se desee. Pero ¡atención! ciertos colores como el s, son difícilmente legibles sobre un fondo blanco.

 

 
 
 

la 4e barre

Círculo rojo :
Indica los botones que permiten poner las partes de texto en determinado formato.
Las cuatro A
La primera  A permite poner el texto en negrita.
La segunda  A permite poner el texto en cursiva.
La tercera A permite subrayar el texto.
La cuarta A permite suprimir todas las modificaciones que se hubiesen realizado en el texto.
Haciendo click en el menú desplegable Formato - Estilo, se tienen otras posibilidades:
 
    Un texto tachado.
    Una parte del texto en superíndice : il fait 20o C. 
    Una parte del texto en subíndice : L'ordinateur a sa place en L2.
    Un texto que parpadea


la 4e barre

Círculos violeta y amarillo:
Estos botones controlan la presentación de la página. 
Presentación de la página :
Decreciente : permite desplazar un bloque de texto hacia la izquierda.
Creciente : permite desplazar un bloque de texto hacia la derecha.
Alineamiento : permite alinear el texto a la izquierda, en el centro o a la derecha.
la 4e barre
Círculo verde
Estos dos botones sirven para crear listas :
    1. lista con iconos.  Este botón permite crear una lista en la que cada línea estará precedida por un icono. Estos iconos tienen formas diferentes : 
      • un círculo 
        • un disco vacío : haced click en el botón CRECIENTE para cambiar el tipo de icono. 
          • un cuadro. 
Intentad crear una lista en otra lista. Estos son los pasos a seguir: 
  • Haced click en el botón lista con iconos. Un icono aparece. Escribid la primera línea de vuestro texto. 
  • Presionar en la tecla  ENTER y otro icono aparecerá. 
  • Ahora haced click en CRECIENTE
    • y conseguiréis otro tipo de icono. Escribid otro texto. Presionad sobre  ENTER
  • Ahora, haced click en el botón DECRECIENTE y habréis recuperado el otro tipo de icono.
    1. lista numerada : Este botón permite crear una lista numerada cuyos números aumentan automáticamente. Para cambiar el tipo de número o elegir a, b, c en lugar de números, haced click en el botón ENLACE, en la pestaña PÁRRAFO, y elegid el estilo que os interese.
Cread una lista numerada : 
  1. Haced click en el botón correspondiente a este tipo de lista.
  1. Un signo  # aparecerá, que se transformará en número cuando el documento se visualice en la Web. (En el editor no se ve el número.) 
    1. Para hacer una sub-lista basta con hacer click en CRECIENTE
    2. después, haced click en ENTER, y podréis continuar esta sub-lista. 
  2. Para volver a la primera lista, haced click en DECRECIENTE
  3. Si se desean utilizar otros estilos de numeración, hay que elegir el botón ENLACE, después hacer click en la pestaña PÁRRAFO y cambiar el estilo de los números. 
El resultado sólo se verá en el modo navegador de Netscape.
 

 
 
 
REGRESO A "DISEÑO WEB BÁSICO".

 
Las tablas
      Nuestras páginas pueden tener un aspecto más agradable si ponemos el texto o las imágenes en tablas. Éstas permiten organizar mejor el contenido de la página. 
Con el botón Tabla, que se encuentra en el menú desplegable Insertar, se puede establecer el número de columnas y de filas, los bordes y los espacios separadores, los colores, el alineamiento, etc. 

 
Ejemplo de tabla. 
Esta tabla tiene 4 columnas y 3 filas.
--->
Hay un título encima de la tabla.
--->
La tabla tiene un borde de 3 pixels.
--->
Podemos añadir una tabla en otra. como ésta.
 
El espaciado entre las celdas es de 6 pixels.
--->
La distancia entre el borde de la celda y su contenido es de 12 pixels.
--->
La anchura de la tabla es de 500 pixels.
--->
Se ha cambiado el color de las letras porque el fondo de la tabla es azul.
Haciendo click en el botón derecho del ratón, se pueden cambiar muchas cosas en la tabla: el color del fondo de la celda, añadir una columna, etc. 
---> 
Elegid PROPIEDADES DE LA TABLA, 
después la pestaña CELDA. El color de fondo de esta celda ha sido cambiado a blanco.
---> 
¡Elegid las diferentes posibilidades!
--->
Ahora podéis crear una tabla que responda a vuestras necesidades.

 
 
REGRESO A "DISEÑO WEB BÁSICO".

 
 
 
 
 
Las imágenes
      Las imágenes sirven para hacer más atractivas las páginas Web. Estas imágenes pueden estar en formato  GIF o JPG. Pueden insertarse fácilmente en la página haciendo click en el botón IMAGEN. Aparece entonces una ventana con 3 pestañas:
  • IMAGEN : A partir de este botón se busca, haciendo click en Seleccionar archivo,  en el disco del ordenador, el fichero que contiene la imagen. Después se decide dónde se desea que el texto se coloque con respecto a la imagen, es decir, arriba, enmedio, etc. Como se indica en estos ejemplos.


El texto está arriba.

Voici Astérix.
C´est mon héros de bande dessinée préféré.
 
 



El texto está en el centro.

Voilà Gaston Lagaffe.



El texto está abajo.

Voilà Tintin. Je l´adore aussi.



La imagen está a la izquierda del texto.

Vous reconnaissez cette photo, j'espère. Tout de même, voici quelques indices. Voici le château Frontenac. Le fleuve Saint-Laurent traverse cette ville. C'est la capitale d'une des dix provinces canadiennes. À cet endroit, on a gardé les vieux murs de la ville. Dans quelle ville sommes-nous?



La imagen está a la derecha del texto.

Vous reconnaissez cette photo. Nous sommes dans la même province et le fleuve Saint-Laurent traverse aussi cet endroit. À cet endroit, on n'a pas gardé les vieux murs de la ville, mais il y a une vieille partie de la ville où le vieux port a été réaménagé. Comme vous voyez, il y a des gratte-ciel. C'est la deuxième ville francophone du monde. Dans quelle ville sommes-nous?



Una pequeña advertencia: en el Composer no se ve la diferencia entre las dos últimas fotos, es decir, si están a la derecha o a la izquierda del texto. 

Con los atributos  HEIGHT y WIDTH, podemos determinar la altura y anchura de la imagen. Es lo que hemos hecho con la imagen de Montréal para que tenga la misma dimensión que la de Québec. El espacio vertical y horizontal alrededor de la imagen está a cero, así como el borde alrededor de la imagen de Québec. La imagen de Montréal tiene un borde de 3 pixels y un espacio de 3 pixels entre la imagen y el texto.

  • PÁRRAFO: en este apartado se puede poner la imagen a la derecha, a la izquierda o en el centro.
Aunque las imágenes hagan las páginas más atractivas, es necesario tener en cuenta que cuantas más imágenes tenga una página, más tiempo tardará en cargarse. 
 
Cread una página con una imagen y texto. Podéis utilizar esta imagen, copiándola, si no tenéis otra. Para recordar cómo se copian las imágenes, haced click aquí.
 

 
REGRESO A "DISEÑO WEB BÁSICO".

 
 
La línea separadora
      Para separar párrafos, encuadrar un texto o para obtener otros efectos, se puede añadir fácilmente una línea separadora. Para esto, haced click en el botón Línea y crearéis esto : 


Si deseáis cambiar su aspecto, situad el cursor sobre la línea que acabáis de crear. Haced click en el botón derecho de vuestro ratón y poned el cursor sobre la línea Propiedades de la línea horizontal. Elegid la altura que deseáis, y podéis obtener, por ejemplo, esto : 


Se encuentran otros estilos de líneas en este sitio : http://pages.infinit.net/bearing/graphismez.html
En este caso deberéis insertarlas como si se tratase de una imagen, tras haberlas copiado en vuestro disco duro.


 
REGRESO A "DISEÑO WEB BÁSICO".

 
 
 
 
 
Los enlaces y los destinos
      Un enlace es una zona activa de nuestra página. Haciendo click en esta zona activa, podemos llegar a otro sitio Web, o a un destino en el mismo documento en el que nos encontramos, o en otro sitio web. 

Un destino es un lugar concreto en la página. Si se desea crear un enlace hacia este destino, es preciso, en primer ugar, crear el destino. Para ello se sitúa el cursor en el lugar a donde deseamos llegar (texto o imagen), o se selecciona con el ratón una palabra o grupo de palabras o una imagen. Después hacemos click en el botón DESTINO o TARGET, según la versión del Composer, en la tercera barra de arriba, y escribimos el nombre de referencia que deseamos dar a este destino.

Para crear el enlace, se procede de la misma forma. Se selecciona texto o imagen, después se hace click en el botón ENLACE de la tercera barra. En la pantalla que aparece, se indica el nombre del destino ya creado, o la dirección (URL) de otra página a la que deseamos enlazar. 
 

Podéis constatar que los enlaces tienen un color diferente al del texto normal. Esto depende de lo que hayáis elegido en FORMATO-   COLORES Y PROPIEDADES DE LA PÁGINA.

El enlace hipertexto puede conducir también a otra página que se encuentra en otro documento o en otro servidor. 
De esta forma se pueden confeccionar páginas con enlaces que lleven a sitios web que interesen a nuestros alumnos.

Existe un tipo de enlace que permite enviar un correo electrónico, para ello, en la ventana ENLAZAR CON, escribiremos el texto siguiente:
mailto:adresse électronique, donde adresse électronique será sustituido por la dirección a la que queréis que se envíe el mensaje.  Al hacer click sobre este enlace, se abrirá una ventana, que permitirá transmitir un mensaje.
 

Si escribís mailto:cvera@platea.pntic.mec.es
crearéis un enlace hacia mi dirección de correo electrónico y podréis enviarme un mensaje.
Ultimo ejercicio. Leed todas las instrucciones antes de comenzar... 

Elegid el menú ARCHIVO - MODIFICAR PÁGINA. Esto os permitirá obtener esta página en Composer. Observad cómo está hecha, las tablas, las imágenes, etc. Practicad cambios en cuanto al tipo de letra, color, tamaño de la tabla. No alteraréis mi página, sólo la vuestra. 

 

 
 
REGRESO A "DISEÑO WEB BÁSICO".