Salva L' Àrtic

Hem creat una pàgina web a DreamWeaver, mitjançant estils, divs, imatges, textos i full d'estils.


Sitio: Tens que crear bé el sitio per que és el mes important, on estan les imatges i textos per treballar i on desaràs tot.

Div: Per nombrar el tipus de etiqueta, si es clase o id.

Div pa:  El pots crear a la mida que vulguis, manualment.

Propietats: Per editar si és clase, id, format, tamany de text, etc.

Estils: Els estils de cada apartat.

També vam fer una animació en codi HTML, amb el programa Hype que ja vam explicar més enrere.

Retículas

En cualquier trabajo de maquetación se debe llevar una guía a través de una estructura estudiada y de tamaños fijos. Para ello usamos la retícula compositiva, que consiste en una guía en los elementos de la maquetación en papel, con la finalidad de conseguir un orden y estética. Las retículas se subdividen a su vez en superficies bidimensionales o tridimensionales, en campos más pequeños en forma de una reja. 

La retícula compositiva se puede definir como una plantilla, muy útil, cuando necesitamos componer un documento con muchas páginas que tengan una estructura de orden, claridad y legibilidad. El dilema de un diseñador de editorial se encuentra en cómo encontrar el equilibrio entre el orden que impone la estructura reticular y la necesidad de evitar la monotonía e inyectar una cierta dosis de creatividad a la maquetación. 

Una retícula impone orden, uniformidad y coherencia. Una página con retícula transmite estructura y una cierta mecánica, frente a algo desordenado, desestructurado o caótico.

Clases de retículas

Una vez estudiado y demostrado que una maquetación realizada a través del sistema reticular aporta y favorece la credibilidad de lo que se está leyendo, expresa orden y nos traslada orden y confianza. 

La retícula hace también que, la lectura se efectúe con mayor rapidez, se visualicen los contenidos a distancias más lejanas y se retenga con más facilidad en nuestra memoria la información que estamos recibiendo.

La retícula de 2 y 4 columnas: Es una retícula muy utilizada por los diseñadores, ya que les permite componer una distribución equilibrada, aunque en alguna ocasión, puedan surgir algunas composiciones demasiado simétricas. 

La retícula de 3 y 6 columnas: Habitualmente se considera esta retícula como la más acertada para el diseño de los folletos publicitarios. Proporciona anchas y columnas muy legibles, y además se tiene la opción, que la de tres columnas se puede subdividir a su vez, en 6 columnas.

Una retícula base se encuentra compuesta por las siguientes partes, dependiendo de la composición que se esté diseñando: 

- La orientación o dirección del papel. 
- El número de columnas y el tamaño de estas. 
- La separación existente entre ellas (el medianil). 
- El formato del texto y su color (tipografía y tamaño), los titulares, cabeceras, pies de imagen, etc. 
- La utilización de imágenes como fondo en todas las páginas (marcas de agua) y demás complementos ornamentales, los filetes decorativos, etc.

Creación de botones

Para crear un botón en dreamweaver necesitamos editar dos tipos, el tipo estático y el que cambia. Nosotros hemos utilizado Photoshop para crearlos. Cuando los crees, debes cargarlos a tu sitio y seguido le das a insertar, objeto de imagen y imagen de sustitución. Hacemos click en examinar junto al campo de la imagen de sustitución para abrir la imagen de sustitución cuadro de diálogo. Seleccione la imagen del botón de estado y haga clic en aceptar.

Estilos CSS

Proyecto Gutenberg

El Proyecto Gutenberg es un sitio web que se dedica a publicar libros que ya han entrado en el dominio público por lo que se pueden descargar de manera gratuita. Fue fundado en 1971 por Michael Hart, por lo que estamos ante el primer proyecto de estas características que se conoce, aunque luego hayan surgido otros similares.

Su catálogo de libros puede ser consulado de diversas formas. Por ejemplo, podemos ver cuáles son los libros más descargados, por idioma o por categoría, así como hacer una búsqueda de nuestro libro favorito para ver si está disponible.

Formatos de página

Hype

Hype funciona de la siguiente manera: evita la escritura de código manualmente grabando las acciones que realicemos en la plantilla de diseño para la web y se encarga de añadir las transiciones necesarias para generar el movimiento sin necesidad de la intervención del usuario, es decir, lo hace de forma automática, generando grandes resultados, ya que además de tener un elemento dinámico en el sitio web, tenemos un portal totalmente compatible con todos los dispositivos móviles incluyendo los que tienen el sistema operativo iOS de Apple ya que son incapaces de visualizar contenido en Flash.

Además de eso, Hype tiene interesantes herramientas de exportación ya que una vez que creemos el elemento, podemos exportar los directorios para que al subirlo al servidor de nuestra web y añidamos las lineas de código generadas por el programa, sea anexada inmediatamente el sitio.

Empaquetar

El empaquetado nos permite guardar en una sola carpeta todo lo que estamos requiriendo en nuestro proyecto. Para empaquetar tenemos que ir a archivo, empaquetar, o con el atajo de teclado o Comand+Shift+Option P.

La ventana que aquí nos aparece contiene un resumen de todo lo que esta ocurriendo en el documento, las fuentes que se utilizan, los vínculos e imágenes, colores y tintas, configuración de impresión y los plugins externos.

Al oprimir la opción «Empaquetar», el programa nos abrirá un cuadro de instrucciones de impresión, que es de gran utilidad si nos comunicamos con el impresor a través de este elemento.

Al oprimir la tecla Continuar se genera automáticamente una carpeta con todo el contenido del documento.

Paginación

Adición de un marcador de número de página a una página maestra

Por lo general, los marcadores de número de página se añaden a las páginas maestras. Si se aplican páginas maestras a las páginas de los documentos, la numeración de páginas se actualiza de forma automática, al igual que los encabezados y los pies de página.

En el panel Páginas, haga doble clic en la página maestra a la que desee agregar el número de página. Para crear páginas maestras, consulte Creación de páginas maestras.

Cree un nuevo marco de texto de tamaño suficiente como para albergar el número de página más largo y cualquier texto que desee que aparezca junto a dicho número. Coloque el marco de texto en el lugar en el que desea que aparezca el número de página.

Si el documento tiene páginas opuestas, cree marcos de texto independientes para las páginas maestras izquierda y derecha.

En el marco de texto del número de página, añada el texto que irá antes o después del número de página (cómo “Página”).

Coloque el punto de inserción en el lugar en el que desea que aparezca el número de página y, a continuación, elija Texto > Insertar carácter especial > Marcadores > Número de página actual.

Aplique la página maestra a las páginas del documento en las que desea que aparezca la numeración de páginas. Para aplicar páginas maestras, consulte Aplicación de páginas maestras.

Para quitar el número de página de la primera página del documento, tiene dos opciones: aplicar una página maestra diferente o la página maestra Ninguna o bien omitir y eliminar el marco de texto maestro de la página del documento. Pulse las teclas Ctrl/Comando+Mayús y haga clic en un marco de texto maestro para ignorarlo.

Iframe

El elemento HTML inline frame (<iframe>) representa un contexto de navegación anidada, efectivamente incorporar otra páginaHTML en la página actual. Cada contexto de navegación tiene su propia historia  sesión y en el documento activo. El contexto de navegación que incluye el contenido implícito se llama el contexto de navegación principal. El contexto de navegación de nivel superior es típicamente la ventana del navegador.

Creación de div

Puede utilizar etiquetas div para crear bloques de diseño CSS y colocarlos en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición. Dreamweaver le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos existentes.

1. En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la etiqueta div.
2. Seleccione Insertar > Objetos de diseño > Etiqueta Div.
3. Clase
    
   Muestra el estilo de la clase aplicado actualmente a la etiqueta. Si ha adjuntado una hoja de estilos, las clases de la hoja de estilos aparecerán en la lista. Utilice este menú emergente para seleccionar el estilo que desea aplicar a la etiqueta.
   ID
    
   Permite modificar el nombre utilizado para identificar la etiqueta div. Si ha adjuntado una hoja de estilos, aparecerán en la lista los ID definidos en la hoja de estilos. No aparecen en la lista los ID de bloques que ya están en el documento.
4. La etiqueta div tendrá el aspecto de un cuadro en el documento con texto de marcador de posición. Al desplazar el puntero sobre el borde del cuadro, Dreamweaver lo resaltará.

   Si la etiqueta div se sitúa con una posición absoluta, se convierte en un elemento PA. (Puedes editar las etiquetas div que no tengan una posición absoluta.)

   
   

   Div PA

   - En la categoría Diseño del panel Insertar, haga clic en el botón Dibujar Div PA .

   - En la vista de diseño de la ventana de documento, arrastra para crear una sola Div PA.

   
   

   Un elemento PA (elemento con posición absoluta) es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Los elementos PA pueden contener texto, imágenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML.

   Con Dreamweaver, puede emplear elementos PA para diseñar la página. Puede colocar elementos PA delante o detrás de otros elementos PA, ocultar algunos elementos PA mientras muestra otros y mover elementos PA por la pantalla. Puede colocar una imagen de fondo en un elemento PA y, a continuación, insertar un segundo elemento PA, con texto y un fondo transparente, delante del primero.

   Los elementos PA suelen ser etiquetas div con posición absoluta. (Estos son los tipos de elementos PA que Dreamweaver inserta de manera predeterminada.) Recuerde, no obstante, que puede clasificar cualquier elemento HTML (por ejemplo, una imagen) como elemento PA asignándole una posición absoluta. Todos los elementos PA (no sólo las etiquetas div con posición absoluta) aparecen en el panel Elementos PA.

   
   

   Ejemplo de código html div pa:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css"> <!--     #apDiv1 {         position:absolute;         left:62px;         top:67px;         width:421px;         height:188px;         z-index:1;     } --> </style> </head> <body>     <div id="apDiv1">     </div> </body> </html> Div pa anidada: Una Div PA anidada es una Div PA que contiene código entre las etiquetas de otra Div PA. Por ejemplo, el siguiente código muestra dos Div PA que no están anidadas y dos Div PA que sí están anidadas: 1 2 3 4 5 <div id="apDiv1"></div> <div id="apDiv2"></div> <div id="apDiv3">     <div id="apDiv4"></div> </div>