High Quality
Open the downloaded document, and select print from the file menu (PDF reader required).
ColeSan
aparExisaunen elo coel mplo
123
4io
gustín
PR
Fíjate enSe difere1.
2.
3.
4.
5.
Cada uecer en laen varias1.
2.
3.
4.
Lo másue la maycódigo fuel lenguajEl trabajismo que ro. Su pri
ÁCTICAS
CO
P
la páginancian variona de la cenú superablónoticias desenú lateraa de estapágina weaneras deon tablason marcoson contentilizar Javsencillo esría de lasnte de mue de progro que hayealizaban lera tarea
N
HTML
Y
N
ÁCTICA
eb del cols zonas enabecera coiortacadasl“zonas”b de formcrear estaso framesdores (etiqScriptutilizar taáginas actchas páginmación Javetrás de uos cajistasconsistía e
vu
º 3. Orga
gio:la pantalla:el nombrsirve paraa que resonas en laueta HTMlas, que sales estáns, verás laaScript.tilizar las te las impn recoger
izar el cue
y escudoorganizarlte fácil npantalla:
div
)rá lo querealizadasetiqueta
d
ablas paraentas cuanel diseño
5
rpo
el colegiolos contenvegar portilicemoscon conten
v
en numrganizar ldo trabajade la págiidos quela páginaen esta prdores (si trosas ocasiinformacian con tip
na y repar
1
an aweb.ctica,fijasones)ón esos detir la
Colegio
San
Agustín
PRÁCTICAS
CON
HTML
Y
Nvu
2
plancha utilizando tablillas que delimitaban las diferentes zonas. Una vez hecha estaprimera distribución de "masas" iban introduciendo los tipos en cada una de las zonasque se habían creado para componer el texto de las noticias.Pues bien, la forma en la que vamos a repartir los diferentes contenidos dentrode nuestra página va a ser la misma que si trabajáramos en una de estas viejasimprentas. En lugar de utilizar pequeños listones de madera vamos a crear tablascuyos límites entre celdas harán la función de separación entre las zonas.Para crear una tabla en Nvu utilizaremos el modo detrabajo normalen vez decó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 lapestaña de “Rápido” pero lo hacemos en esta por la opción que nos aparece acontinuación:
Anchura.
Elegimos el 100% de la ventana porque queremos que la tablasirva para estructurar el contenido de la misma. Por la misma razón, elegimos borde 0para que no se visualice.
Colegio
San
Agustín
PRÁCTICAS
CON
HTML
Y
Nvu
3
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 enlos bordes) de forma que:
o
la primera y última fila tengan una altura de 70 px, y la delcentro 340 px
o
la primera y tercera columna tengan 150 px de anchoDebe quedar de la siguiente manera:Para distinguir las zonas, ya que no tienen bordes, vamos a colorearlas dediferentes 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 lasiguiente ventana, seleccionamos el color que queramos:
Add a Comment