Diseño de páginas web

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Diseño de páginas web por Mind Map: Diseño de páginas web

1. paginas web

1.1. 2.1 ¿que es una pagina web?

1.1.1. son los documentos que conforman de world wide web , el servicio mas conocido y utilizado de Internet. se tratan de documentos que ofrecen información combinando texto, sonido , imágenes , vídeos , etc..

1.1.2. lenguaje HTML

1.1.2.1. es un modo de garantizar que cualquier persona pueda pueda visualizar con independencia con el navegador web que utilice

1.2. 2.2 ¿que es un sitio web?

1.2.1. es un conjunto de paginas web pertenecientes a una persona , empresa o entidad .

1.3. 2.3 tipos de paginas web

1.3.1. las paginas web se pueden clasificar según distintos criterios

1.3.1.1. paginas web estadísticas

1.3.1.1.1. son documentos HTML que muestran información

1.3.1.2. paginas web animadas

1.3.1.2.1. las paginas web estadísticas se pueden animar incluyendo scripts o applets, que son pequeños programas escritos en un lenguaje de programación compatible con HTML y , por lo tanto , interpretables por los navegadores web

1.3.1.3. paginas web dinámicas

1.3.1.3.1. son las que ofrecen al usuario la posibilidad de interactuar con la pagina e incluso de modificar o introducir información

1.3.1.4. paginas web de contenidos

1.3.1.4.1. proporcionan una plataforma en la que los usuarios pueden participar activamente en la elaboración de la información mostrada.

2. editores de paginas web

2.1. 3.1 editores de texto

2.1.1. con cualquier editor de texto , incluso con los mas sencillos , se pueden crear paginas web

2.2. 3.2 editores visuales

2.2.1. son los que permiten crear paginas web sin tener conocimiento de HTML . el usuario diseña el documento con las herramientas del editor , escribe el texto necesario y agrega otros elementos .

2.2.2. kompoZer

2.2.2.1. es un editor de software libre de fácil manejo que permite visualizar los documentos con su aspecto real .

2.2.3. adobe dreamweaver

2.2.3.1. es uno de los editores de documentos HTML comerciales mas utilizados .proporciona herramientas avanzadas de diseño y facilita el uso de código HTML dinámico .

2.3. 3.3 herramientas de la web 2.0

2.3.1. son herramientas de web 2.0 que están disponibles para distintos servidores de Internet o aplicaciones especificas en linea , como , por ejemplo, Glogster.

2.4. 3,.4 editores online

2.4.1. ventaja : es que pueden crear paginas web sin necesidad de utilizar ninguna aplicación especifica .

2.5. 3.5 gestores de contenidos

2.5.1. e un sistema de gestión de contenidos es una plataforma que permite , crear una estructura de soporte para que distintos usuarios puedan crear , publicar y administrar información con un diseño común .

3. crear paginas web con KompoZer

3.1. 4.1 crear y administrar un sitio web local

3.1.1. 1 crear , con el administrador de archivos del sistema operativo , una carpeta con el nombre que se quiera para el sitio web

3.1.2. 2 iniciar KompoZer y hacer clic en el botón ordenador , localizado en el panel administrador de sitios .

3.1.3. 3 hacer clic en el boton nuevo sitio

3.1.4. 4 seleccionar la carpeta creada , cuya ubicación dependerá del sistema operativo en el que estés trabajando

3.1.5. 5 comprobar el nombre y el sitio y hacer clic en aceptar.

3.2. 4.2 crear una pagina web

3.2.1. 1 abrir el menú archivo y seleccionar la opinión nuevo .

3.2.2. 2 activar las opciones que se deseen

3.2.3. 3 hacer clic en el botón crear

3.3. 4.3 escribir texto en una pagina web

3.3.1. modificar el formato de los caracteres

3.3.2. escribir una lista

3.3.3. modificar el formato de los párrafos

3.3.3.1. estilo

3.3.3.2. alineación

3.3.3.3. y por sangrado

4. trabajar con paginas web

4.1. 5.1 cambiar los colores de una pagina

4.1.1. el fondo del documento puede ser blanco o de un color , e incluso puede rellenarse con una imagen . para cambiar de color del fondo de la pagina , se deben seguir estos pasos :

4.1.1.1. 1 abrir el menú formato y seleccionar colores y fondo de la pagina .

4.1.1.2. 2 activar la opción usar colores personalizados

4.1.1.3. 3 hace clic sobre el boton fondo y elegir el color que se quiera de la paleta que aparecera

4.1.1.4. 4 cerrar la paleta de colores y , posteriormente , el cuadro de dialogo heciendo clic sobre el boton aceptar

4.2. 5.2 guardar un pagina web

4.2.1. 1 hacer clic sobre el botón guardar .

4.2.2. 2 escribir el texto del titulo

4.2.3. 3 hacer clic en el boton aceptar para dar validez al titulo

4.2.4. 4 activar la carpeta que se ha definido previamente en KompoZer como sitio web local

4.2.5. 5 escribir un nombre para el archivo

4.2.6. 6 hacer clic en guardar .

4.3. 5.3 cambiar las propiedades de una pagina

4.3.1. se puede especificar en el cuadro de dialogo que se activa mediante la opción titulo y propiedades de la pagina del menú formato

4.4. 5.4 modos de edición

4.4.1. varios modo de edición mediante las pestañas diseño código fuente y dividir que se encuentran en la parte inferior izquierda del área de trabajo

4.5. 5.5 comprobar las paginas creadas

4.5.1. permite ver el apecto final de las paginas web mientras se esta trabajando en ellas , es conveniente abrirlas con uno o varios navegadores para comprobar su compatibilidad y confirmar su aspecto en el esperado.

4.6. 5.6 trabajar con varias paginas web

4.6.1. laa paginas web guardadas

5. tablas en paginas web

5.1. 6.1 insertar una tabla como estructura de la pagina web

5.1.1. 1 hacer clic sobre el boton tabla

5.1.2. 2 hacer clic sobre la pestaña precioso para activar la ficha que permite especificar las propiedades de la tabla

5.1.3. 3 como , en este caso , la tabla se va a utilizar para definir la estructura de la pagina.

5.1.4. 4 hacer clic sobre el botón aceptar

5.2. 6.2 insertar una tabla para mostrar datos

5.2.1. si la tabla que se inserta se quiere utilizar para mostrar datos , ademas de especificar el numero de filas y columnas , habra que indicar su tamaño y pixeles

5.3. 6.3 escribir texto en una tabla

5.3.1. para insertar texto en una tabla , basta con activar sus distintas celdas e introducir el texto que se quiera en cada una .

5.4. 6.4 modificar la estructura de una tabla

5.4.1. insertar o eliminar filas y columnas

5.4.1.1. 1 situar el cursor en una celda de la tabla

5.4.1.2. 2 abrir menú tabla y seleccionar la opción insertar

5.4.1.3. 3 elegir alguna de las posibilidades que ofrece el programa para tal efecto

5.4.1.4. Para eliminar alguna fila , columna o celdilla , habrá que :

5.5. 6.5 cambiar el aspecto de una tabla

5.5.1. 1 situar el cursor en la tabla para activarla

5.5.2. 2 abrir menú tabla y seleccionar propiedades de la tabla

5.5.3. 3. activar las fichas tabla o celdas y modificar las propiedades que se quiera en cada una de ellas .

5.5.4. 4 hacer clic sobre el botón aceptar

6. imágenes en paginas web

6.1. 7.1 ¿que son los vínculos relativos ?

6.1.1. son todos los elementos que se incluyen en las paginas web , excepto el texto escrito , no se almacena en el archivo de la misma pagina , si no que esta contiene vinculos a cada elemento que indica en el archivo estan los mismos ..

6.2. 7.2 insertar una imagen

6.2.1. 1 guardar la pagina web , aunque no este finalizada

6.2.2. 2 situar el cursor en el lugar donde se quiera colocar la imagen

6.2.3. 3 hacer clic en el botón imagen.

6.2.4. 4 activar la ficha ubicación y seleccionar la imagen

6.2.5. 5 activar la opción la URL es relativa a la ...

6.2.6. 6 escribir un texto alternativo

6.2.7. 7 activar la ficha dimensiones y especificar el tamaño que debe tener la imagen en el documento .

6.2.8. 8 hacer clic sobre el boton aceptar

6.3. 7.3 modificar la imagen

6.3.1. cambiar el tamaño

6.3.1.1. para modificar lo debes arrastrar alguno de sus tiradores verdes visibles cuando la imagen esta seleccionada .

6.3.2. distribuir texto alrededor

6.3.2.1. 1 pulsar el boton derecho del ratonsobre la imagen y seleccionar la opcion propiedades de la imagen .

6.3.2.2. 2 activar la ficha apariencia .

6.3.2.3. 3 cambiar los valores de las propiedades que se quiera

6.3.2.4. 4 hacer clic en aceptar

7. enlaces en paginas web

7.1. 8.1 crear un enlace de texto

7.1.1. 1 comprobar que la pagina web esta guardada

7.1.2. 2 seleccionar el texto que se quiera utilizar como enlace , por ejemplo , acueducto de Segovia de la `pagina index.html.

7.1.3. 3 hacer clic sobre el botón enlace

7.1.4. 4 en este caso , se quiere rear un enlace para abrir una pagina del sitio local .

7.1.5. 5 comprobar que la opción la URL es relativa a la dirección de la pagina esta activa .

7.1.6. 6 hacer clic sobre el botón aceptar

7.2. 8.2 crear un enlace en una imagen

7.2.1. 1 comprobar que la pagina web esta

7.2.2. 2 hacer clic sobre la imagen para seleccionarla

7.2.3. 3 hacer clic sobre el botón enlace

7.2.4. 4 especificar la dirección URL del documento que se quiera enlazar .

7.2.5. 5 comprobar , si el documento enlazado es una pagina del sitio web local , que la opcion la URL es relativa a la direccion de la pagina queda activada .

7.2.6. 6 hacer clic sobre el botón aceptar

7.3. 8.3 crear un en lace a una pagina de Internet

7.3.1. para crear enlaces a paginas de otros sitios web , es muy importante escribir la dirección URL de la pagina web elegida de forma correcta y completa .

7.4. 8.4 crear un enlace a otros tipos de documentos

7.4.1. los enlaces no se utilizan solo para enlazar documentos, sino que se pueden usar para abrir cualquier otro tipo de documento, como PDF

7.5. 8.5 crear un enlace a un correo electrónico

7.5.1. los enlaces también se pueden utilizar para ofrecer al visitante un modo rápido de enviar un correo electrónico, por ejemplo el administrador puede indicar alguna sugerencia o algún departamento o persona para realizar alguna solicitud o comentario

7.6. 8.6 crear un enlace a un vídeo

7.6.1. los vídeos no pueden insertarse físicamente en una página web, sino que se debe crear un enlace con el archivo del vídeo, existen muchos formatos de vídeo que determinan tanto la calidad y el tamaño del archivo como el reproductor que lo podrá mostrar

8. lenguaje HTML en paginas web

8.1. 9.1 lenguaje HTML

8.1.1. es el que se utiliza para crear paginas web.se trata de un conjunto de palabras clave , tags o etiquetas que permiten dar formato al texto y al resto de elementos utilizados en las paginas.

8.2. 9.2 etiquetas HTML

8.2.1. los documentos creados con lenguaje HTML estan constituidos por un conjunto de elementos que pueden tener propiedades diferentes :tipo de letra , color de la fuente , color del fondo , negrita , ancho , alto..

8.2.2. algunas etiquetas son imprescindibles porque definen la estructura obligatoria de cualquier documento , tal y como se muestra en la figura del margen .

9. hojas de estilo en paginas web

9.1. los estilos son reglas e intrucciones que definen el aspecto de los elementos de una pagina web .

9.2. 10.1 crear una hoja de estilos enlazada

9.2.1. 1 abrir una pagina web , por ejemplo , acueducto.html.

9.2.2. 2 hacer clic sobre el boton CSS para iniciar el editor de estilos .

9.2.3. 3 desplegar el botón CSS y seleccionar hoja de estilos enlazada , opción que permite crear una hoja de estilos independientes .

9.2.4. 4 escribir el nombre que se quiera dar a la pagina de estilos y, si se quiere , un titulo para la pagina .

9.2.5. 5 hacer clic sobre el botón crear hoja de estilos

9.3. 10.2 crear reglas de estilo

9.3.1. 1 comprobar que esta seleccionada , en el papel izquierdo , la hoja de estilos creada anteriormente

9.3.2. 2 desplegar el botón CSS y seleccionar la opción regla de estilo .

9.3.3. 3 activar la opción estilo aplicado a todos los elementos de tipo

9.3.4. 4 desplegar la lista de elementos situada en la parte inferior y seleccionar h1, correspondiente a la etiqueta titulo 1

9.3.5. 5 hacer clic sobre el boton crear regla de estilo .

9.3.6. 6 activar , mediante su pestaña , la ficha texto y modificar las propiedades en las fichas restante .

9.3.7. 7 hacer clic en aceptar.

9.3.8. para ello , se deben seguir estos pasos :

9.3.8.1. 1 hacer clic sobre boton CSS y activar , en el papel izquierdo , la hoja de estilos misestilos

9.3.8.2. 2 desplegar el botón Y selecionar la opcion regla de estilo .

9.3.8.3. 3 activar la opcion estilo aplicado a todos los elementos de tipo , desplegar la lista de elementos y seleccionar boby

9.3.8.4. 4 hacer clic sobre elboton crear regla de estilo .

9.3.8.5. 5 activar la ficha fondo y seleccionar el color que se prefiera

9.3.8.6. 6 hacer clic sobre el botón aceptar ; se cerrara el editor .

9.3.8.7. 7 cerrar la pagina web abierta

9.4. 10.3 en lazar una hoja de estilos a una pagina web

9.4.1. 1 abrir una pagina web , por ejemplo , index.html.

9.4.2. 2 hacer clic sobre el boton CSS

9.4.3. 3 desplegar el botón CSS y seleccionar hoja de estilos enlazada .

9.4.4. 4 seleccionar la hoja misestilos y hacer clic en crear hoja de estilos .