Seguimos con nuestro cursillo de creación de páginas WEB; aunque aún seguiremos con un poco de teoría, pero no te preocupes que pronto empezaremos con las prácticas... sí, porque con la práctica se aprende más... al menos así debería ser.
¡Adelante!
Además del texto, podemos
mostrar imágenes en los formatos GIF y JPG. Para incluir un
gráfico en nuestra página usaremos este botón
de la barra de
herramientas, al pulsarlo te mostrará un cuadro de diálogo en
el cual tendrás que escribir el nombre del fichero o
seleccionarlo, pulsando en el botón "Browse"
(Examinar)
Esta es
el cuadro de diálogo de selección de imagenes:
Recuerda que los gráficos que uses en la página tienen que estar accesibles desde Internet, por tanto es conveniente tener los gráficos almacenados en la carpeta que hayas creado para ello dentro de la carpeta en la que se encuentra la página.
Una vez insertado el gráfico,
puedes posicionarlo a la izquierda, centro o derecha de la
página, para hacerlo: selecciona la imagen (haciendo click en
ella) y pulsa en cualquiera de los tres botones de formato del
párrafo. 
|
La mayoría de los elementos que
se pueden insertar en una página Web pueden configurarse
mediante un cuadro de diálogo de propiedades. Para mostrar ese cuadro de diálogo, selecciona el objeto y pulsa Alt+Intro o bien pulsa el botón derecho del ratón y selecciona propiedades. Más adelante veremos un ejemplo de esto. |
Otros elementos
Además del texto y los gráficos, podemos insertar líneas, "tablas" y otras cosillas más.
Líneas
Las líneas las usaremos para
separar distintas partes de la página; como acabo de comentarte,
puedes usar un cuadro de diálogo de propiedades para modificar
la apariencia de la línea: el grosor, el color, el tamaño, etc.
Prueba con las distintas opciones del cuadro de diálogo, para
que veas las distintas posibilidades y quédate con la que más
te guste.
Este es
el cuadro de diálogo de las líneas:
Vamos a ver algunos ejemplos de líneas:
| Normal, 2 pixels de altura y con el 100% de la pantalla | |
| Normal, 3 pixels de altura y con el 50% de la pantalla | |
| Normal, 2 pixels de altura y con el 75% de la pantalla, línea sólida | |
| Normal, 3 pixels de altura y con el 60% de la pantalla, línea sólida | |
| Normal, 2 pixels de altura y con el 75% de la pantalla, línea sólida, color rojo | |
| Normal, 3 pixels de altura y con el 60% de la pantalla, línea sólida, color rojo |
|
| Normal, 5 pixels de altura y con el 60% de la pantalla, línea sólida, color rojo |
|
| Normal, 5 pixels de altura y con el 60% de la pantalla, línea normal, color azul (para variar), pero el aspecto es prácticamente como el anterior. |
Tablas
Las tablas se usan contener los
distintos "elementos" de la página, para que se puedan
mostrar como deseemos, ya que una página Web no permite hacer
virguerías con ella... pero mediante las tablas y un poco de
práctica, podemos remediarlo.
En el caso de que queramos mostrar una serie de información que
tenga varias columnas y filas, para poder mostrarla de forma
"encolumnada", por ejemplo en el caso de la lista
anterior con los diferentes tipos de líneas. a lo largo de este
cursillo verás algunas tablas...
Las tablas se pueden mostrar con bordes o sin ellos, incluso
jugando un poco con el grosor del borde podemos crear efectos
vistosos.
En las tablas y en las celdas de la tabla, podemos insertar
imágenes de fondo, cambiar el color del fondo y de los bordes;
posicionar lo que esté dentro de esa casilla de forma
independiente, etc. Todo ello mediante el uso del diálogo de
propiedades... como será costumbre...
Vamos a ver el cuadro de diálogo de las tablas y el de las celdas, te recomiendo que experimentes un poco con las distintas opciones para que puedas ver el aspecto que se consigue... ya sabes que para mostrar el cuadro de diálogo puedes hacerlo mediante el uso del botón derecho del ratón y seleccionar las propiedades que corresponda. En el caso de usarlo dentro de una tabla, el menú emergente te mostrará otras opciones, no sólo la de la tabla, sino también de la celda, de la página, fuente y párrafo, así que selecciona la opción que quieras usar... parece que es una tontería esto que te digo, pero... También puedes hacer que se muestre el diálogo de propiedades de la tabla o celda desde el menú Tabla de la barra de menús.
Propiedades
de la tabla:
Propiedades
de la celda:
Esto que viene a continuación está hecho con una tabla, todo es cuestión de jugar un poco con las propiedades y el ancho de las columnas:
| Todo lo
que se escriba en una columna se ajustará al tamaño de
esa columna y el tamaño total de la tabla se ajustará
al de la columna más grande. Dependiendo de la alineación de cada una de las columnas, el texto o las imágenes se adaptarán a ese tamaño y formato indicado. |
En esta
columna se muestran una serie de opciones numeradas:
|
Esta columna está centrada en "middle", es decir que se adaptará su contenido para que esté en el centro de la tabla | Esta
otra estará centrada, tanto por los lados, como por la parte superior e inferior |
Se pueden hacer muchas más cosas, incluso si se tienen diferentes filas, se puede indicar que una celda ocupe varias filas y columnas:
| Fila 1, columna 1 | Fila 1, columna 2 | Fila 1, columna 3 | Fila 1, columna 4 |
|
Filas 2 y 3, columnas 1 y 2 Esta celda ocupa dos filas y dos columnas. |
Fila 2, columna 3 | Fila 2, columna 4 | |
| Fila 3, columna 3 | Fila 3, columna 4 | ||
| Fila 4, columna 1 | Fila 4, columna 2 | Fila 4, columna 3 | Fila 4, columna 4 |
Una cosa que debes tener en
cuenta cuando "expandas" una celda, es que las celdas
que ya había se "desplazan"; como puedes ver en la
siguiente tabla.
Por tanto lo que debes hacer es "borrar" las celdas que
están de extra, sino el resultado no será el deseado.
| Fila 1, columna 1 | Fila 1, columna 2 | Fila 1, columna 3 | Fila 1, columna 4 | |
| Filas 2 y 3, columnas 1 y 2 | Fila 2, columna 2 | Fila 2, columna 3 | Fila 2, columna 4 | |
| Fila 3, columna 2 | Fila 3, columna 3 | Fila 3, columna 4 | Fila 3, columna 5 | |
| Fila 4, columna 1 | Fila 4, columna 2 | Fila 4, columna 3 | Fila 4, columna 4 | |
Como ves es cuestión de que pruebes... aunque te recomiendo que te acostumbres a guardar el contenido de la página antes de modificar nada de las tablas ya que te puedes encontrar con alguna sorpresilla y se te cuelgue el editor... esto también es válido para cualquier otro editor, no sólo el FPE, todo lo que no guardes... peligra de que no se guarde... el que avisa...
Vamos a dejar esta "entrega" aquí, ya que la siguiente será más practica... en la que usaremos un par de páginas para que vayas probando todo lo que estamos viendo hasta ahora y algunas otras cosillas que veremos próximamente.
¿El adelanto? Pues que veremos como linkar a distintas partes de una página y también con otras páginas... pero mejor que lo veas el próximo día...
Nos vemos.
Guillermo
