Este documento describe los conceptos básicos de diseño y maquetación de sitios web. Explica que un sitio web está compuesto de páginas agrupadas bajo un dominio único con una URL. También cubre temas como elegir un tema atractivo, organizar archivos, estructurar la navegación y páginas, y utilizar técnicas como colores, texto, tamaños y posicionamiento para crear un diseño funcional y atractivo.

1. DISEÑO Y MAQUETACIÓN

2. ¿QUÉ ES UN SITIO WEB?
 Un sitio web o website, es un conjunto de páginas
web, más o menos extenso, agrupadas bajo un
dominio.
 Cada sitio tiene una URL única que nos permite
acceder a él.

3. LA TEMÁTICA DEL SITIO.
 La idea de crear un sitio web nace porque tenemos
algo que comunicar con el mundo.
 El tema debe de ser , atractivo y que se domine.
 El tema elegido determinará el diseño de la página.

4. ORGANIZAR ARCHIVOS.
 El sitio web se encuentra alojado en un servidor, que no
es más que un ordenador conectado a internet, capaz
de "dar" archivos a quien se lo solicita.
 En la raíz del sitio, tendremos como mínimo la página
de inicio, a la que llamaremos index.html (o .htm).
 Esto se debe a que cuando a un navegador le
indicamos que abra una carpeta, busca el archivo index
de la misma.
 Organizaremos los tipos de archivo en carpetas.

5. ORGANIZAR ARCHIVOS.
 Si tenemos secciones claramente definidas,
podemos guardar sus páginas en subcarpetas.

6. NAVEGACIÓN.
 El usuario debe de ser capaz de moverse de forma
intuitiva por nuestro sitio sin perderse, para ello:
 Debe de saber dónde está.
 Debe de saber dónde ha estado.
 Debe de saber dónde puede ir.
 Debe de poder seguir navegando.

7. ESTRUCTURA DEL MENÚ.
 Un menú no es más que una lista de enlaces
relativos a nuestro sitio, llamados elementos del
menú.
 Por lo general el menú se suele colocar en la parte
superior de la página, junto al logo o debajo de él.
 El menú no debe de ser demasiado extenso.
 Normalmente, aparecerán las secciones de nuestro sitio
web.
 Los elementos del menú deben de ser descriptivos
 El menú debe de ser ligero, y no ocupar demasiado
espacio.

8. ESTRUCTURA DEL MENÚ.
 En lo que se refiere al código, el menú suele tener
estos elementos:
 Los menús se suelen basar en listas <ul></ul>. Dentro
de cada elemento de la lista, colocaremos un enlace. Si
no sabes qué son las listas, puedes verlo en este
básico .
 El aspecto del menú se consigue por CSS.
 Suelen tener código javascript, por ejemplo para
mostrarlo, producir efectos más o menos avanzados, o
en vez de los enlaces.

9. ESTRUCTURA DE LA PÁGINA.
 Como norma general todas las páginas
mantendrán la misma estructura.
 Una excepción a esto puede ser la página de inicio.
Ejemplo:
 Un título, para lo que podemos utilizar un encabezado
h1. En el se mostrará el nombre de la asociación.
 Un menú.
 Un área para el contenido. Cambiará en cada página,
pero tendrá un título para la sección.
 El pie.

10. ESTRUCTURA DE LA PÁGINA.

11. UN BUEN DISEÑO
 Pero ¿qué es un buen diseño web? Bueno, este
punto puede dar para mucho.
 Comodidad para el visitante.
 Comodidad para el autor.
 Accesibilidad.
 Usabilidad.
 Transmitir.
 Bonito y original.
 Simple

12. COLORES.
 La elección de colores apropiados es una de las
cosas que más influyen en el aspecto del sitio.
 Atractiva.
 Decorativa.
 Organización.

13. TEXTO Y FONDO
 Estos son puntos a destacar para el texto de una
página web:
 Tipo de fuente.
 Tamaño de la fuente.
 Color del texto.
 Espacios.
 Alineación.
 Y el fondo:
 El fondo del texto debe de tener un buen contraste.
 Evitar utilizar imágenes que puedan dificultar la lectura.

14. MAQUETACIÓN.
 La maquetación es la distribución de los elementos
en nuestra página.
 La maquetación de las páginas web se realizaba
utilizando tablas (<table>).
 La maquetación con tablas ha caído en desuso, y
se realiza utilizando capas (<div>).
 Las capas pueden estar anidadas unas dentro de
otra.

15. TAMAÑO.
 Cualquier elemento HTML de bloque, tiene dos
atributos que pueden definir su tamaño: ancho
(width) y alto (height).
 Los valores para estas medidas, pueden ser
expresados en las medidas habituales:
 Tamaños absolutos, utilizando px, cm, etc...
 Tamaños relativos al elemento que lo contiene,
utilizando porcentajes (%).
 Tamaños relativos a la fuente, utilizando em.
 El valor auto es el valor por defecto. Por ejemplo, un
párrafo, por defecto, tienen un ancho del 100% y un alto
ajustado al contenido.

16. TAMAÑO.

17. DESBORDAMIENTO.
 ¿qué pasa si el contenido del elemento (texto,
imágenes, etc...) no cabe? Entonces se produce un
desbordamiento, que podemos controlar desde el
estilo con la propiedad overflow. Podemos darle
estos valores:
 visible. Es la opción por omisión. El contenido sale de
elemento, y puede que se solape con los elementos
que haya a continuación.
 hidden. Lo que no quepa en el elemento, queda oculto.
 auto. Muestra las barras de desplazamiento en el
elemento cuando sea necesario.
 scroll. Siempre muestra las barras de desplazamiento.

18. POSICIONAMIENTO.
 Utilizando CSS, con la propiedad position podemos
cambiar el tipo de posicionamiento de los elementos.
Existen cuatro tipos de posicionamiento:
 static. Es el normal.
 relative. El posicionamiento relativo coloca el elemento en su
posición normal. A partir de ahí, podemos desplazar el
elemento, permaneciendo el hueco de su posición original.
 absolute. Con el posicionamiento absoluto, especificamos la
posición del elemento con respecto al elemento que lo
contiene.
 fixed. Se establece la posición del elemento de forma
parecida al absoluto, pero el elemento queda fijo en la
pantalla, aunque utilicemos barras de desplazamiento.