COLEGIO DE BACHILLERES PLANTEL

42° DE JUÁREZ CHIAPAS

MATERÍA:
PAGINAS WEB

TEMA:
MAQUETACION WEB ,TABLAS , CLASES Y MENÚS

DOCENTE:
YOSIMAR SOBERANO MALPICA

NOMBRE DE LA ALUMNA:
BELLALI CAMACHO SILVA

SEMESTRE:6TO GRUPO:
“A"
 ¿Qué es la maquetación web?

Antes de nada, vamos a definir este aspecto del diseño web.

La maquetación web se refiere al proceso por el cual se crea la

perfecta armonía entre todos los contenidos de una página web, es
decir, que tanto los textos, como las imágenes, como los vídeos, como
todo lo que queramos añadir a nuestra página, estén bien situados y
ordenados.

Para ello deberemos revisar los tamaños de las imágenes y de las

letras, su colocación para que no se superpongan unas con otras, etc.

¿Quiero hacer la maquetación web de mi página ¿Qué debo

saber?

Los conocimientos que debes de tener para ser todo un maquetador

profesional, son varios, y te vamos a decir cuáles son:

Conocimiento web
Antes de decidir qué tipos de maquetación web realizaremos,
debemos tener unos conocimientos digitales mínimos.

Con estos conocimientos, tampoco nos referimos a que seas un

experto en código HTML, pero sí será necesario que conozcas los
CMS o gestores de contenido como WordPress, Prestashop… con los
que trabajar y poder diseñar tu página web.

Poseer vista estética

Evidentemente, este es uno de los aspectos más importantes a la hora
de trabajar con los diferentes tipos de maquetación web, ya que como
comentamos con anterioridad, se trata de crear una página con
armonía y que sea estéticamente correcta.

Para ello, debes ser una persona preocupada por el más mínimo
detalle, algo perfeccionista y con gusto.

Una mente creativa

Otro aspecto fundamental para ser todo un maquetador profesional, es
tener creatividad para poder realizar los mejores diseños en los tipos
de maquetación web que realices.

Tipos de maquetación web

Y, por fin, vamos a hablar de los tipos de maquetación web que podrás
usar en tu propia página web. Entre ellos encontramos:

 Landing Page
Las Landig page, son aquellas páginas que utilizamos para
generar leads. Deben ser páginas atractivas que en un máximo
de 3 pasos le permitan al usuario hacer la acción que requieran,
es decir, también deben ser simples.

En este tipo de maquetación web, debemos usar una escritura

sencilla, enviando un mensaje conciso, debemos evitar enlaces
que distraigan al usuario y debemos añadir información
multimedia que atraiga el interés del usuario.

También puede ser buena idea añadir enlaces para compartir en

redes sociales y reseñas de usuarios anteriores.
  Maquetación de una Home
La home es lo primero que ve el usuario de tu página web, (y Google).
El diseño de la misma es imprescindible para lograr un buen
posicionamiento.

En la Home debemos representar la idea que queremos conseguir

dependiendo del tipo de web que tengamos (tienda online, página
web, blog…).

Para lograr la atención del usuario, debemos tener un buen diseño,

deberemos tener un menú bien estructurado, no excedernos en meter
mucho texto ya que el usuario no lo leerá, también tendrá que
aparecer la página de contacto y tampoco deberemos saturarla con
anuncios que genere incomodidad al usuario.

La importancia de una maquetación web

La maquetación web es uno de los pasos a realizar para conseguir un mejor

posicionamiento. Todo comienza a través de un diseño web atractivo que
convenza al usuario de quedarse en nuestra web e interesarse por nuestro
contenido.

Por ello tener una buena imagen, y unos contenidos con orden y bien colocados,
mejorará la experiencia de usuario de nuestra web proporcionándonos un mayor
tráfico.
Con un buen diseño captarás la atención de posibles compradores si quieres crear
una tienda online, de lectores, si tu idea es un blog, y finalmente de usuarios para
cualquier tipo de web.Si no sabes cómo comenzar a hacer tu página web o si
necesitas ayuda con la maquetación de una web ya hecha, no dudes en
contactarnos para alcanzar el éxito.

TABLAS
¿Qué son las tablas en HTML?
Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar
información de forma agrupada. Ya sea texto, imágenes, vídeos,…

El elemento table será el que nos ayudará para crear las tablas en HTML.

Un mal uso de las tablas en HTML es el motivo de maquetación, uso que se dio a
las tablas en los principios del lenguaje HTML. Algo que hoy en día es una mala
práctica. Cambiando por un modelo de maquetación apoyado en capas.

Crear una tabla simple

Para crear una tabla vamos a necesitar conocer, al menos, tres elementos: table,
tr y td. Si bien existen otros cuantos que nos permitirán ampliar la funcionalidad de
las tablas.

El primer elemento es table. Table es el elemento que representa las tablas y será
el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y
cierre.

<table> … </table>
Siguiendo con la construcción de la tabla el siguiente elemento que necesitamos
es tr. El elemento tr representa a una fila de la tabla. Por lo tanto tendremos tantos
elementos tr como filas tenga la tabla.

Así, si queremos tener una tabla de tres filas tendremos un código como el que
sigue:
 MAQUETAR NUESTRA PÁGINA CON CSS Y DIVS

La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la

actualidad en las páginas web. En la edad de piedra se maquetaba con tablas,
práctica que no recomiendo en absoluto. Las tablas son para presentar datos de
una manera ordenada, no para maquetar una página web.

LOS DIVS <DIV>

Una etiqueta <div> define un bloque donde incluiremos información dentro de

nuestro documento. A este bloque definido con la etiqueta <div> le asignaremos
por medio del CSS, las propiedades de posición, tamaño, color, etc etc.

La forma de definir un bloque con la etiqueta <div> dentro de nuestro documento

HTML, es tan simple como:
[sourcecode language=’HTML’]

[/sourcecode]Vamos a hacer un ejemplo REAL de maquetación web, creando los

bloques <div> de las secciones que descubrimos en nuestro documento, cuando
hicimos el análisis de las mismas con la «Visualización Mental»
Las secciones del documento: