Coleggio  

PR
RÁCTICAS CON HTML Y Nvu 
San A
Agustín 
 
PR
RÁCTICA NºN 3. Organ
nizar el cuerrpo

Fíjate en la página web

w del coleegio:

2
3 
5

Se difereencian variaas zonas en la pantalla:

1. Zona de la cabecera
Z c con
n el nombree y escudo del
d colegio
2. M
Menú superrior
3. T
Tablón
4. N
Noticias desstacadas
5. M
Menú lateraal

Cada un na de estass “zonas” sirve para organizar los conten nidos que van
v a
apareecer en la página weeb de form ma que resu ulte fácil naavegar por la página web.
Existten varias maneras
m de crear
c estas zonas
z en la pantalla:

1. Con tablas
C
2. C marcos o frames
Con
3. C conteneedores (etiq
Con queta HTML
L div)
4. U
Utilizar JavaaScript

Lo más sencillo es utilizar tab

blas, que seerá lo que utilicemos
u een esta prá
áctica,
aunqque la mayo oría de las páginas
p actu
uales están realizadas con
c conteneedores (si tee fijas
en ell código fueente de mucchas páginaas, verás la etiqueta di
iv en numeerosas ocasiiones)
o con
n el lenguajee de prograamación JavvaScript.

El trabajo que hay detrás

d de utilizar
u las ta
ablas para organizar
o laa informaciión es
el mismo que realizaban loos cajistas de
d las imprrentas cuan ndo trabajabban con tipos de
mo. Su prim
plom mera tarea consistía en
e recoger el diseño de la págin na y reparrtir la

1
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
plancha utilizando tablillas que delimitaban las diferentes zonas. Una vez hecha esta
primera distribución de "masas" iban introduciendo los tipos en cada una de las zonas
que se habían creado para componer el texto de las noticias.

Pues bien, la forma en la que vamos a repartir los diferentes contenidos dentro
de nuestra página va a ser la misma que si trabajáramos en una de estas viejas
imprentas. En lugar de utilizar pequeños listones de madera vamos a crear tablas
cuyos límites entre celdas harán la función de separación entre las zonas.

Para crear una tabla en Nvu utilizaremos el modo de trabajo normal en vez de
código fuente. Pulsamos el icono Tabla o ejecutamos el comando tabla →insertar →
tabla:

Vamos a la pestaña “preciso” y seleccionamos el número de filas y columnas.

En nuestro caso 3 filas y 3 columnas. Esto también lo podríamos haber realizado en la
pestaña de “Rápido” pero lo hacemos en esta por la opción que nos aparece a
continuación: Anchura. Elegimos el 100% de la ventana porque queremos que la tabla
sirva para estructurar el contenido de la misma. Por la misma razón, elegimos borde 0
para que no se visualice.

2
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
Modificamos la tabla para que nos quede del siguiente modo:

• Unimos las tres celdas de la primera fila (para ello las seleccionamos,
botón derecho →unir celdas seleccionadas) y las de la última fila.
• Redimensionamos las celdas (basta mover los cursores que aparece en
los bordes) de forma que:
o la primera y última fila tengan una altura de 70 px, y la del
centro 340 px
o la primera y tercera columna tengan 150 px de ancho

Debe quedar de la siguiente manera:

Para distinguir las zonas, ya que no tienen bordes, vamos a colorearlas de

diferentes tonalidades de un mismo color. Para ello, situamos el cursor en una celda,
pulsamos el botón derecho → cambiar color de fondo de tabla o celda. Nos aparece la
siguiente ventana, seleccionamos el color que queramos:

3
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 

Vamos a rellenar de contenido (información) la tabla:

• La zona superior va a contener el título de nuestra web. Utilizaremos la

barra de formato (los botones recuadrados en la figura siguiente) para
que quede centrado, a gran tamaño, con color y con otro tipo de letra.
• En la zona de la izquierda vamos a crear un menú con los siguientes
apartados: Preparativos, Miércoles, Jueves, Viernes, Sábado, Post-salou.
Deben estar en una lista de viñetas, con otro tipo de letra, a color.
• La zona inferior contendrá información sobre el autor de la página,
asignatura, curso, colegio, y fecha de última modificación.

4
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 

El resto de zonas las rellenaremos en prácticas posteriores. Guarda la página,

envíasela a tu profesor y súbela al servidor.

5