ESTRUCTURACIÓN DE UNA PÁGINA DE PRIMER NIVEL: EJEMPLO DE DIVISIÓN EN ZONAS
Configuración- Construir y comprobar - Añadir imágenes - Utilizar iframes - Ejercicios


AJUSTE DE UNA PAGINA DIVIDENDO EN ZONAS: :

Aquí le damos un ejemplo STEP BY STEP con el esquema de página que queremos construir, indicando en cada zona colorada o división (div) el contenido con unas líneas de explicación. Para facilitar la comprensión ponemos color como en la siguiente figura. De lo contrario no sería fácil ver las zonas.
El fondo negro indica la "corniz", que es tan amplia como la pantalla, por que es necesario poner el resto del dibujo en el centro de la pantalla
Esta es la cabecera en la parte superior de la pantalla
   

Esta zona es una columna de izquierda donde se quiere poner un menu.

Es contenida en el campo de color verde

 Este campo verde es la zona Que utilizamos como contenedor para centrarse en la pantalla.
Tedrá otros elementos en su interior		  

Esta zona en negro es la corniz principal donde se ponen todas las DIVs

FIGURA 1. División de la pantalla en áreas (DIVs)


PROCEDIMIENTO: vamos a reanudar por nuestro editor la última página htm previa que hemos preparado , y a escribir las divisiones (DIV) en el lugar entre <body>    .....  </body>

Para resaltar que el área está contenida en otra área, en la figura dejemos un borde en el entre las zonas. El esquema del código es el siguiente:

<DIV id="cornice"><!--Comenzando el marco negro que llamamos 'cornice':>
   <DIV id="testata"></DIV> <!-- la cabecera anidada en "cornice'  la hemos llamado '"Testata'" -->
     <DIV id="corpo"><!-- el contenedor verde anidado que nombramos "corpo" -->
         <DIV id="colonna-sinistra"></DIV> <!-- la columna amarilla anidad en "corpo" -->
     </DIV><!-- aquí es cerrado el contenedor verde anidado  corpo' -->
</DIV><!-- cerrado el contenedor negro que llamamos 'cornice'-->

Dentro de la DIV "cornice" hay la jerarquía de zonas anidadas (<DIV> ....</DIV>), , primero el encabezado "testata", y debajo de éste el contenedor "corpo".
Dentro del contenedor "corpo" está la columna "colonna-sinistra"Inside the DIV "cornice"

En lo que respecta a los DIVs es preferible asignar 'nombres hablantes', Es decir, indicando por su nombre la posición y función de cada DIV individual. Aquí he dado los nombres DIV en mi idioma ..

Las zonas anidadas no pueden funcionar correctamente si no se les asignan sus propriedades, es decir, al menos la anchura, la longitud y la posición.
Allí tenemos que asignar muchas otras propiedades, según nuestras especificaciones. Todas estas propiedades son asignadas por un archvo CSS.
Preparemos un fichero de Hoja de Estilo en el que todas las áreas mostradas en la Figura 1 anterior se definirán por sus características principales.
Este texto se puede ingresar directamente en cualquier página HTML que deseemos dividir como se muestra.
Hay tres maneras de hacerlo, lo mejor es lo siguiente, ya que sólo requiere una línea de instrucciones en la cabecera de la página HTML. La mejor manera de hacerlo es escribir un archivo css independiente y, a continuación, agregarlo al archivo HTML por referencia a la ubicación del archivo. La construcción suena así

<link href="../../../modellii/pagprinc.css" rel="stylesheet" type="text/css" />

Donde la dirección del archivo .css debe conducir al intérprete a tomar el archivo donde reside, a partir de la página HTML que lo llama. Nuestra hoja de estilos reside en la carpeta modellii/ y el link arriba se refiere a la posición de esta carpeta

@charset "utf-8"
/* CSS Document nombrado pagprinc.css */

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
#cornice { padding: 0px; text-align: center; margin: 0 auto; }
#testata { margin: 0px auto; top: 0px; width: 960px; height: 80px; position: relative; background-color:#EDFCFE; }
#colonna-sinistra { width: 352px; height: 598px; position: absolute; left: 5px; background-color::#FFCC00;}
#corpo { margin: 0px auto; border: 0px solid rgb(0, 0, 0); border-image: none; width: 980px; height: 600px; text-align: left; padding: 0px; position:relative;background-color:#66FF66; }


Nombre Valor Descripción
BODY   contiene la entera página HTML visible
margin-left 0px ancho del margen izquiedo en pixels
margin-top 0px margen superior en pixels
margin-right 0px margen derecho en pixels
margin-bottom 0px margen abajo en in pixels
#cornice   El contenedor de todo anchura 100% (ancho de la pantalla)
padding 0px Acolchado entre #cornicce y sus lados.
text-align center El texto dentro del marco se alinea centrado
margin 0px Todos los márgenes del marco son cero
#testata   identifica el ID de #testata
width 760px ancho de 'testata'. En este caso, también se puede hacerlo tan ancho como la pantalla (= 100%)
height 80px Altura Total de #testata
margin 0px auto Margen: distancia entre los lados exteriores de #testata y el marco del contenedor #cornice
top 0px Distancia entre los lados superiores exteriores de la div #testata y el marco del su contenedor #cornice
background-color #EDFCFE Color codificado por los valores de la paleta de colores
#colonna-sinistra   Este nombre identifica el ID del DIV #colonna-sinistra (columna-izquierda)
width 352px ancho de #colonna-sinistra
height 598px Altura Total
background-color #FFCC00 Color de fondo codificado por los valores de la paleta de colores
position absolute La propiedad indica un div colocado con referencia absoluta, o sea sir referencia a otras div
left 5px La distancia desde el borde izquierdo del #corpo' es 5px
#corpo   Este nombre identifica el DIV #corpo (cuerpo)
margin 0px auto Los márgenes exteriores son cero. el comando 'Auto' centra #corpo' pecho a #cornice
border 0px Borde invisible. En su lugar se puede poner también el valor none (ninguno)
width 980px Ancho Total de #corpo
height 600px Altura Total de #corpo
padding 0px Distancia interior entre los lados de #corpo y su contenido
background-color #2BF81B Color (verde) codificado por los valores de la paleta de colores
     

Creemos carpetas en tu PC donde guardar tus archivoslders in our PC where to save our files

            Principal            
          |            
|   |    
Scripts   CSS  
Figure 1_1

En nuestra hoja de estilos podemos cambiar el tamaño, el color y los márgenes de las diferentes áreas según el tamaño de nuestra pantalla y el diseño deseado.

Para crear la hoja de estilo:

  • En la carpeta que ha creado para su sitio, crear una nueva carpeta (vean arriba) , con el nombre 'CSS' o lo que quieras, que contendrá todas sus hojas de estilo
  • Abra su editor de texto y cree un nuevo archivo css
  • Copiar y pegar en este archivo el texto que está en rojo en el cuadrado anterior
  • 'Guardar como' su archivo en la carpeta CSS. Nombre el css como quiera pero con el sufijo .css. Aquí he nombrado este archivo como miepagine.css

Vamos a construir nuestra página usando CSS e imágenes

  • copiar y pegar el texto siguiente - Excluyendo el borde
  • 'Guardar como' y nombrar index.html entre la carpeta 'Principal'

CONSTRUYENDO Y COMPROBANDO NUESTRA PÁGINA

Comencemos con el DIV 'frame' que sirve para centrar nuestra página en la pantalla, colocándola entre el TAG <body> y </ body>

<!doctype html><html>
<head>
<meta charset="utf-8">

<!---Estos elementos anteriores son comunes a todas las páginas a que se da este estándar . --->

<!--- Cabeza = la cabecera. Aquí - entre <head> y </head> vamos a escribir muchos elementos diferentes. Ahora sólo el título de la página y la metaetiquetas para describir el contenido-->

<title>Título que aparece en el navegador al abrir la página </title>
<meta name="description" content="Tomemos un ejemplo de estructuración de una página web paso a paso, introduciendo áreas distintas en la página">
<meta name="keywords" content="pagina web, pagina, base, meta, tag, DIV">

<!---enlazamos a la hoja de estilo--->

<link href=" css/miepagine.css" rel="stylesheet" type="text/css" />

</head>

<!---Debajo, entre el body vamos a escribir el contenido del cuerpo de la página --->

<body>

<!--- En primer lugar ponemos sólo la 'cornisa', que tiene las propiedades dadas por el CSS-->

<DIV id="cornice"></DIV>
</body>
</html>

Al hacer clic en un botón de la siguiente tabla puede ver la página con las modificaciones posteriores correspondientes. Haga clic en los botones de la siguiente tabla:

Table: Añadiendo divisiones subsecuentes entre <body> y </ body>

Click the button Description of page's content

Code added between
<body> and </body>
1 'Cornisa', de color azul, con un pequeño margen here we've let a small margin
2 Página con 'cornisa', pero blanca y sin margen <DIV id="cornice"></DIV>
3 Dentro del  DIV #cornice insertamos la DIV #testata

<DIV id="cornice">
<DIV id="testata"></DIV>
</DIV>
4 Dentro del DIV #cornice y bajo #testata ponemos la DIV #corpo"

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo" </DIV>
</DIV>
5

Dentro de la DIV "corpo" añadimos una columna a la izquierda. Los colores de las lineas son diferentes sólo para entender mejor la posición de las DIVs anidadas

.

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo">
<DIV id="colonna-sinistra"></DIV>
</DIV>
</DIV>

TABLE 1

Ejemplos de DIV en la página HTML, cambiando por el código que se agregará entre las etiquetas <body> ..... </ body>. Si no hay un código claro como se muestra en la tabla, mire el código a través de los comandos de su navegador.


Si presiona el botón 1, nota que debe quedar un borde blanco alrededor del área azul. Esto se debe a que aún no hemos dado instrucciones sobre las características generales de la página en sí, y no hemos dicho que los márgenes deben ser 0.

Tips and tricks
Para ver cómo está hecha la página, por ejemplo, vean el número 5, que se abre haciendo clic en el botón 5, y sus elementos contenidos, ábrenlo con su navegador en una nueva pàgina y hagan 'guardar como' en una carpeta que ya han preparado o haran pronto..
Cieren el navegador y vayan a ver lo que has guardado. Deberían encontrar el archivo CSS en una subcarpeta y el archivo html en la carpeta, que puede abrir y examinar con su editor.

El CSS contiene todos los elementos que necesitamos para dar forma a la página y todos sus elementos, y permanece igual para todas las páginas, siempre que en esas páginas estén las etiquetas DIV nombradas agregadas entre <body> ..... </ body >. Al cambiar la hoja de estilo, cambiarán todas las páginas a las que está vinculado el CSS.

ADDING IMAGES

After removing background colors, we want to add the following elements in order,

  • Una imagen de fondo en toda la página. La imagen se tomó de Internet y se manipuló para mitigar los colores y reducir tanto como sea posible el peso (para obtener instrucciones, consulte la parte correspondiente de este sitio).
  • Una imagen de fondo en la columna de izquierda. La imagen se tomó de Internet y se manipuló para adaptarse al tamaño y reducir tanto como sea posible el peso (para obtener instrucciones, consulte la parte correspondiente de este sitio).
  • Una columna a la derecha en div 'corpo' e imágenes de fondo relacionadas
  • Una franja de imágenes en el encabezado. Las imágenes se tomaron de Internet, se manipularon para ajustarlas al tamaño y se pegaron en una tira (para obtener instrucciones, consulte la parte correspondiente de este sitio).

Ejemplos de edición de la página HTML estructurada con CSS y imágenes

Clic el botón elemento  CSS

Código CSS modificado
1 body: hay la imagen roma-di-notte.jpg body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../../images/roma-di-notte.jpg);}
2 #colonna-sinistra
Agregar una imagen de fondo con menores dimensiones que el DIV, y que luego se repite para llenar el espacio		 #colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../../images/sanpietro1.png ) ; text-align: center; }
3 #testata
Agregar una imagen de fondo como arriba

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
}
4 ALTERANDO EL CSS ANTERIOR EN EL ANCHO DEL ENCABEZADO AL 100%

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
}

TABLA 2

Esto le permite editar de la misma manera todas las páginas vinculadas a hojas de estilo. Por ejemplo, al cambiar las imágenes de fondo en CSS, se cambia de la misma manera en todas las páginas enlazadas a este CSS

AÑADIR ARTÍCULOS CON 'IFRAME'

El 'iframe' es un elemento identificado cada uno con su propio nombre, que permite las siguientes funciones:

A)  insertar una página .htm dentro del 'iframe'
B)  insertar un 'iframe' dentro de un DIV o una celda de una tabla
C) cambiar dinámicamente la página contenida en ella dando como 'target' (dirección) el nombre del 'iframe'

Para una mejor comprensión doy aquí un ejemplo de gráfico utilizando el esquema de la anterior FIGURA 1, mediante la inserción de un IFRAME en cada DIV:

Utilizamos DIV 'testata' por un iframe aquí identificado con nombre = "sopra" que a su vez contiene una página con logotipos y lo que sea
Entre DIV nombrado "colonna-sinistra" ponemos un iframe identificado  con nombre = "sinist" que a su vez contiene una página con un menú
Dentro de la DIV 'corpo' ponemos otro DIV

Insertamos el nuevo DIV id = "colonna-destra" para poner en su interior un iframe identificado como 'dest' ( ie name = "dest" ) que contiene una primera página inicial. Se escribe

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo">
<DIV id="colonna-sinistra"></DIV>
<DIV id="colonna-destra"></DIV>
</DIV>
</DIV>

FIGURA 2 - Estableciendo 'iframes' en las DIVs

Se podría también poner bajp la DIV testata una tabla con dos columnas de ancho apropriado, y a sus internos los iframes que hemos dicho antes..

Aquí la hoja de estilo modificada con la adición de una columna derecha, flanqueada a la columna izquierda y con ancho complementario.

<style type="text/css">

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../images/roma-di-notte.jpg);}
# cornice { padding: 0px; text-align: center; margin: 0 auto; }

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(.../../images/testaroma.jpg); }

#colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../images/sanpietro1.png ) ; text-align: center; }

#colonna-destra { width: 760px; height: 598px; position:absolute; left: 201px;
background-image:url(../../images/pansoff..png ) ; text-align: center; }

#corpo { margin: 0px auto; border: 0px solid rgb(0, 0, 0); border-image: none; width: 980px; height: 600px; text-align: left; padding-bottom: 0px; position:relative;}

* aquì una definicion de clase

..perframe { width:100%; height:00%; scrolling:no; overflow:visible; frameborder:0:;}

</style>


Como puede ver, hemos incluido una columna derecha con una imagen de fondo semitransparente (pansoff.png) que nos permitirá ver mejor el texto que vamos a escribir, y en el mismo tiempo no oculta la imágen del fondo.
Hay que recordar que la dirección de la imagen debe ser indicada teniendo en cuenta la posición de la hoja CSS. Aquí la hoja no està enlazada, pero escrita entre la página. Si se quiere enlazar, se debe hacer un archivo .CSS de 'salvar como' con un su nombre entre la carpeta css.

Proporcionamos ahora como construir páginas para cornisas diferentes, de izquierda a derecha. Si desea crear una página de encajar en el encabezado, recuerde que aquí la altura del marco no debe exceder 80px. (la de 'testata')

A)  Menú sencillo en la columna izquierda. Tomemos un ejemplo de la declaración que se escribirá entre<div> ... </div> para agregar un menú llamado paginamenu.htm

<div id="colonna-sinistra">
<iframe id= "sinist" src="paginamenu.htm" margin="0" width="350" height="500" frameborder="0" overflow="visible" scrolling="no"></iframe>
</div>

El ancho y largo del frame se puede poner = 100% de modo que vaya a ocupar todo el espacio definido de la DIV .

Para definir el frame se puede también poler una definicion de clase llamada perframe en la hoja de estilo:y podremos escribir una instrucccion mas sencila

<div id="colonna-sinistra">
<iframe id= "sinist" class="perframe" src="paginamenu.htm""></iframe>
</div>

Similar se puede hacer para casi todos los elementos dr una página

Inicialmente en cada iframe tendremos una página fija. Al hacer clic en los enlaces en la columna izquierda del menú de la columna izquierda se puede cambiar de una página a otra entre la columna derecha asignando como 'target' (destino) de la nueva página el nombre del iframe que es agregado en la columna derecha.

Aquí uno de los enlaces de menú trae al iframe de la columna derecha un archivo llamado 'pagmissione.htm'. La inserción se produce cuando hace clic en un vínculo del menú. La declaración que se escribirá entre<div> ... </div>

<a href="pagmissione.htm" target="dest" accesskey="M">Co<u>M</u>o Funciona</a>

Vamos a construir en primer lugar el menú en la columna de la izquierda, y después haremos unas pocas páginas que se incluirán en la columna de la derecha con hacer clic en los enlaces asignados a cada elemento del menú

Tabla: Elementos a incluir en los IFRAMEs

Hace click Item

CSS and HTML code
1 Paginamenu.htm
contiene elementos de menú para usar en un iframe llamado "sinist" agregado en el DIV "colonna-sinistra"

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
table {  table-layout: fixed; width: 200px; border:thin; border-collapse: separate; border-spacing: 5px; background:white;
border-radius:10px; column-width:200; white-space:normal;
background-size:auto; }

td {background-color:#06F; color:#FFF; font-family:Cambria; font-weight:bold; width:200px; border-radius:10px; height:35px; alignment-baseline:middle; padding-left:10px; padding-top:3px;}
2 pagmissione.htm
page to put into the iframe named "dest" into the DIV "colonna-destra"		 LLAME A LA PÁGINA Y VÉASE A SI MISMO CÓMO SE HACE EL CÓDIGO HTML. La hoja de estilo está incrustada en la cabecera de la página. Pero se puede separar en laq hoja de estilo vinculada
3

Con estas declaraciones ponemos en la página de la Figura 2
-el menú paginamenu.htm por el iframe 'sinist'
-la pág.pagmissione.htm por iframe 'dest'

<div id="cornice">
<div id="testata"></div>
<div id="corpo">
<div id="colonna-sinistra"><iframe name="sinist" src="../../software/esempi/opere/paginamenu.htm" margin="0" width="100%" height="100%" frameborder="0" overflow-style="visible" scrolling="no" vspace="80"></iframe></div>
<div id="colonna-destra">
<iframe name="dest" src="../../software/esempi/opere/pagmissione.htm" margin="0" width="760" height="100%" frameborder="0" overflow-style="visible" scrolling="no" vspace="80"></iframe>
</div>
</div>
</div>

TABLA 3: Elementos de agregar en los iframes

Para insertar un iframe en un DIV debe escribir entre una div una sentencia como la siguiente:

  • Asignar el nombre (name) al iframe, en este caso name = "dest"
  • Poner la página deseada en el iframe con la declaración
    src = "../../ software / examples / works / pagmissione.htm"
    Donde en este caso ponemos la página pagmissione.htm. Vea el código anterior en azul.
  • Asignar margen, tamaño y otras características del iframe congruentes con su DIV huesped
    <Iframe name = "dest" src = "../../ software / examples / works / pagmissione.htm" margin = "0" width = "760" height = "100%" frameborder = "0" overflow-style = "visible" scrolling = "no" </ iframe>

Cuando por el menú que desea cambiar una página dentro de un iframe sólo se tiene que dar la dirección de la página con target (destino) el nombre del iframe. Aquí hemos utilizado iframe dentro de un DIV, pero puede haber DIV dentro de un iframe, o iframes anidados. El lenguaje HTML es muy versátil y fácil. Sólo suficiente entender los mecanismos.

EJERCICIO para probar si le expliqué bien

  1. Prepare nuevas carpetas para sus páginas como en l Figura 1_1 (Par:Configuración de una página)
  2. Abrir pulsando el botón 3 en la tabla 3 anterior e intentar utilizar el menú, para comprobar si las páginas funcionan correctamente. Cuidado con los enlaces
  3. 'Guardar como' con el nombre de index.htm, la página abierta por el botón punto 3 de la tabla superior  y salvar a la carpeta 'Principale' que ha preparado. Esta será la página de inicio, que es la página principal. El navegador debería crear otra subcarpeta bajo la principale, que contenga todos los archivos que se refieran a la página guardada. Puede abrir con los editores todos los archivos relacionados con la página y también ver y las imágenes guardadas.
  4. Arrastre todos los archivos de imágenes a la subcarpeta denominada "imágenes" desde la sucarpeta de archivos creada por su navegador.
  5. Arrastre todos los archivos .htm a la carpeta denominada preparada para contener lo archivos htm desde la subcarpeta de archivos creada por su navegador. El archivo htm index.htm de inicio debe permanecer en la carpeta 'principale' (Principal)
  6. Arrastre todos los archivos .css a la carpeta denominada 'CSS'  desde la subcarpeta de archivos creada por su navegador. De otra manera usted puede recrearlos/modificarlos con el redactor.
  7. En el encabezado de la página principal elimine el texto del stile y reemplácelo con un enlace al archivo de hoja CSS que ha creado antes en la subcarpeta del estilo.
    <link href=".CSS/mycssfile.css" rel="stylesheet" type="text/css" />
    Donde la dirección del archivo .css debe conducir al intérprete a tomar el archivo donde reside, a partir de la página HTML que lo llama. Compruebe los enlaces que están en las hojas de estilo
  8. REPETIR OPERACIONES ANALÓGICAS 4 - 7 A CADA OTRO ARCHIVO HTM EN LAS subcarpetas de los archivos html.
  9. AHORA SE TIENE QUE CAMBIAR y AVERIGUAR TODOS LOS ENLACES A CADA ARCHIVO, COMENZANDO DEL PRINCIPAL referente a la trayectoria de imágenes, archivos htm, hojas de estilo css para que la pàgina pueda funcionar.
  10. Ahora se puede abrir el file principal  index.htm en su browser

Después de todo esto, si puede ejecutar su página principal del DIR 'Principale', y todo està funcionando, usted ha pasado el examen. 

NOTA:
La dirección del archivo .css guiará el intérprete para tomar el archivo donde reside, haciendo referencia desde la página HTML que lo llama. Recuerde que la declaración 'target' de los enlaces de menú debe tener el nombre de iframe relacionado.

Aquí he utilizado iframes dentro de DIVs, pero puede haber als DIV dentro de un iframe. El lenguaje HTML es muy versátil y fácil. Sólo se tiene que entender los mecanismos.

ADVERTENCIA REPETIDA:
PAGINAS HTM Y TODOS LOS ARCHIVOS - CSS FIGURAS SCRIPT ETC - SE TOMAN A TRAVÉS DE SU POSICIÓN EN LAS CARPETAS. ESTA ES LA POSICIÓN QUE SE NECESITA INDIVIDUAR A PARTIR DEL ARCHIVO QUE LES UTILIZA. Si TODAVÍA este concepto no está claro, vayaN a ver el artículo "estructura de un sitio"


.

 
Lino Bertuzzi - Roma Agosto 2014 - translated 08/03/2017