5.7 paginas basicas

Partiendo de la página que hemos creado, vamos a crear un par de páginas sencillas. La idea es tener páginas con algunos elementos, como texto, para poder comenzar con el diseño.
Otra opción podrá ser crear la páginas con un texto de prueba. En este caso, como ya sabemos lo que queremos poner podemos adelantar trabajo.

• Comenzamos por el título de la sección. Como estamos en la página inicial, y trata de ser una web amistosa, vamos a darle la bienvenida al usuario. Por ejemplo, lo cambiamos por ¡Bienvenidos a la web de Floramics!
• Al estar en la página inicial, vamos describir brevemente qué puede encontrar el usuario en nuestra página. Recuerda que la idea principal es que los usuarios visiten nuestra galería de fotos, que pensábamos dividir en cuatro categorías.

5.6 ESTRUCTURA DE LA PAGINA

pasos para crear una pagina base con estos elementos comunes que podemos utilizar como panilllas :
Vamos a ver qué elementos necesitamos en nuestro ejemplo:

1._ Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.
2._Un menú. En este caso pondremos un enlace a las siguientes secciones:

• Vamos a ver qué elementos necesitamos en nuestro ejemplo:
  Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.
  Un menú. En este caso pondremos un enlace a las siguientes secciones:
  Inicio (index.html)
  *Flores (flores/index.html)
  *Nosotros (nosotros.html)
  Contacto (contacto.html)
  *Noticias (noticias.html) Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.
  *Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.
  *El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de bloque como un párrafo o un div. También existe una etiqueta específica,
  utilizada para contener información sobre el autor de la página.
  

5.5 ESTRUCTURA DEL MENU

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, o en un lateral, normalmente el izquierdo.
*El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.
*Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables.
*Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.
*El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.

5.4 NAVEGACION

un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a 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á. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección.
• Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo.
• Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles
• Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio.

La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas

5.3 ORGANIZAR ARCHIVOS

¿cómo organizamos los archivos del sitio?

cuando accedemos a un sitio web, realmente accedemos a una carpeta de ese ordenador, que funciona como raíz del sitio. Internamente, dentro de esa carpeta, encontramos archivos y subcarpetas que nos permiten organizar el sitio, igual que organizamos los documentos en las carpetas de nuestro equipo

1. En la raíz del sitio, tendremos como mínimo la página de inicio, a la que llamaremos index.html (o .htm). abre una carpeta, busca el archivo index de la misma.
2. Organizaremos los tipos de archivo en carpetas.
3. Si tenemos secciones definidas, podemos guardar sus páginas en subcarpetas. Por ejemplo, en aulaclic.es
4. tenemos una carpeta para cada curso. Recuerda que es conveniente incluir en cada carpeta que contenga páginas htm, un archivo index.html, más que nada para que no se produzca un error si se accede directamente a la carpeta.
5. daremos un nombre descriptivo a los archivos.

5.2 LA TEMATICA DEL SITIO

La idea de crear un sitio y un tema que puede resultar interesante.
por ejemplo, aunque crear una página Web con nuestros hobbies y aventuras cotidianas puede ser un buen ejercicio pero, a la hora de la verdad a poca gente le resultará interesante leerlo. es mejor crear una cuenta:

• El tema también debe de ser concreto.
• Es mejor crear un sitio independiente para cada una.
• No sólo debemos de elegir un tema que resulte atractivo , si no que debemos de tener información sobre él.
• No tiene demasiado sentido crear un sitio para escribir un sólo artículo de media página
• El tema elegido determinará el diseño de la página. esto de acuerdo al gusto de cada persona.
• El tema elegido determinará el diseño de la página.
• distinguir cuales son las categorías en las que vamos a dividir nuestro sitio

QUE 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.

el sitio web parte desde una página inicial, o home, desde la que podemos acceder, de forma jerárquica a todo el contenido del sitio, a través de hiperenlaces. podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL única que nos permite acceder a él.

• El contenido de las páginas del sitio, puede estar escrito directamente en HTML.
• genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el código.
• lenguajes, como PHP, ASP o JSP que generan en HTML a partir de datos, como contenidos de bases de datos, datos introducidos por el usuario, información global.Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados desde la propia página.

ELEMENTOS DEL ENTORNO KOMPOZER

barra de título:en esta como su nombre lo dice podemos insertar el titulo.

barrra de menus: podemos acceder a todas las opciones del programa.

barras de formato:estas nos ayudan a formatear un documento.

encontramos dos desplegables muy interesantes:

El primero, que en la imagen muestra Texto en el cuerpo, nos permite elegir el elemento que contienen el texto que escribimos, por ejemplo un encabezado o un párrafo.

El segundo, que en la imagen muestra (sin clase) nos permite asignar una clase al texto.

En la parte central, encontramos el área de edición, donde podemos editar el contenido de nuestra página. Podemos tener varias abiertas en distintas pestañas

para poder trabajar en esta pagina depende del modo de edición, de las cuatros disponibles en la parte inferior:

normal:.Con este modo, vemos el diseño de la página como se mostraría en un navegador. Aunque aparecen algunas marcas más, como información de la ubicación de algunas etiquetas especiales, como comentarios y scripts.

etiquetas HTML:funciona como el anterior, pero mostrando en cada etiqueta un cuadradito amarillo con su identificador.

Código fuente:nos permite trabajar diretamente sobre el codigo.

Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca adicional

En la parte inferior, en la barra de estado encontramos una barra que muestra la jerarquía de etiquetas que hay sobre el lugar.esto nos permite seleccionar cualquier etiqueta haciendo clic sobre ella.

si hacemos clic derecho sobre una etiqueta nos aparece

Seleccionar hace lo mismo que la hacer clic sobre la etiqueta.
Eliminar etiqueta borra la etiqueta, pero no su contenido.
Cambiar etiqueta, sustituye una etiqueta por otra sin lateral si contenido.
ID muestra una lista de los ID que utilicemos en nuestros estilos, y nos permite asignárselos a un elemento.
Clases, como con ID, muestra las clases disponibles y nos permite asignarlas al elemento

estilos en linea:permite definir el estilo del elemento, para lo que creará el atributo style.

propiedades avanzadas: podemos ver todos los atributos del elemento y sus valores, editarlos, eliminarlos o añadir nuevos. También podremos definir el estilo incrustado.