manual diseño web

CENTRO DE EDUCACIN TCNICA PRODUCTIVO

PRIVADO SAN PEDRO

CARRERA TCNICA : COMPUTACIN E INFORMTICA

DOCENTE: RAL : FERRA REYES, RAL

ALUMNO :

2012

Ral Ferra Reyes Docente

El diseo web es una actividad que consiste en la planificacin, diseo e

implementacin de sitios web. No es simplemente una aplicacin del diseo

convencional, ya que requiere tener en cuenta la navegabilidad, interactividad,

usabilidad, arquitectura de la informacin y la interaccin de medios como el

audio, texto, imagen, enlaces y vdeo. Se lo considera dentro del diseo

multimedia.

CONCEPTOS BSICOS

a. Pgina Web

Qu es una pgina web: Una pgina web es un documento electrnico

diseado para el World Wide Web (Internet) que contiene algn tipo de

informacin como texto, imagen, video, animacin u otros. Una de las

principales caractersticas de las pginas web son los Hipervnculos tambin

conocidos como links o enlaces y su funcin es la de vincular una pgina con

otra.

Las pginas web pueden estar almacenadas en un equipo local o un servidor

web remoto. El servidor web puede restringir el acceso nicamente para

redes privadas, p. ej., en una intranet corporativa, o puede publicar las

pginas en la World Wide Web.

b. Servidor Web

La principal funcin de un servidor Web es almacenar los archivos de un sitio

y emitirlos por Internet para poder ser visitado por los usuarios. Bsicamente,

un servidor Web es una gran computadora que guarda y transmite datos va

Internet. Cuando un usuario entra en una pgina de Internet su navegador se

comunica con el servidor enviando y recibiendo datos que determinan qu es

lo que ve en la pantalla. Por eso decimos que los servidores Web estn para

almacenar y transmitir datos de un sitio segn lo que pida el navegador de un

visitante.


c. Hosting

El alojamiento web (en ingls web hosting) es el servicio que provee a los

usuarios de Internet un sistema para poder almacenar informacin, imgenes,

vdeo, o cualquier contenido accesible va web. Es una analoga de

"hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un

lugar especfico, en este caso la analoga alojamiento web o alojamiento de

pginas web, se refiere al lugar que ocupa una pgina web, sitio web,

sistema, correo electrnico, archivos etc. en internet o ms especficamente

en un servidor que por lo general hospeda varias aplicaciones o pginas web.

Las compaas que proporcionan espacio de un servidor a sus clientes se

suelen denominar con el trmino en ingls web host.

El hospedaje web aunque no es necesariamente un servicio, se ha convertido

en un lucrativo negocio para las compaas de internet alrededor del mundo

Se puede definir como "un lugar para tu pgina web o correos electrnicos",

aunque esta definicin simplifica de manera conceptual el hecho de que el

alojamiento web es en realidad espacio en Internet para prcticamente

cualquier tipo de informacin, sea archivos, sistemas, correos electrnicos,

videos etc.

d. Navegador web.

Un navegador o navegador web (del ingls, web browser) es una aplicacin

que opera a travs de Internet, interpretando la informacin de archivos y

sitios web para que podamos ser capaces de leerla (ya se encuentre sta

alojada en un servidor dentro de la World Wide Web o en un servidor local).

El navegador interpreta el cdigo, HTML generalmente, en el que est escrita

la pgina web y lo presenta en pantalla permitiendo al usuario interactuar con

su contenido y navegar hacia otros lugares de la red mediante enlaces o

hipervnculos entre los ms usados tenemos: Internet Explorer, Mozilla

Firefox, Opera Web browser.


e. Buscador web

Un motor de bsqueda, tambin conocido como buscador, es un sistema

informtico que busca archivos almacenados en servidores web gracias a su

spider (o Web crawler). Un ejemplo son los buscadores de Internet

(algunos buscan nicamente en la web, pero otros lo hacen adems en

noticias, servicios como Gopher, FTP, etc.) cuando se pide informacin sobre

algn tema. Las bsquedas se hacen con palabras clave o con rboles

jerrquicos por temas; el resultado de la bsqueda es un listado de

direcciones web en los que se mencionan temas relacionados con las

palabras clave buscadas.

Los buscadores en Internet, son programas o aplicaciones que residen en un

sitio o pgina web, los cuales, al ingresar palabras en sus recuadros de

bsqueda, operan dentro de la base de datos del mismo buscador y recopilan

todas las pginas que contengan informacin relevante y relacionada con lo

que se busca; de hecho este es el principal desafo que enfrentan las

compaas que brindan este servicio, el ser capaces de brindar un orden al

verdadero ocano de informacin que es la web (hablamos de red o web

tambin para referirnos a la Internet). Las palabras que ingresamos en los

recuadros para buscar se denominan en el medio "palabras clave", o

"keywords" en ingls, por su importancia para obtener la informacin

necesaria de la gran base de datos que maneja cada buscador.

HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las

pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite

escribir texto de forma estructurada, y que est compuesto por etiquetas, que

marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no slo se compone de texto, puede contener

imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como

un documento multimedia.


Los documentos HTML deben tener la extensin html o htm, para que puedan ser

visualizados en los navegadores (programas que permiten visualizar las pginas

web).

Los navegadores se encargan de interpretar el cdigo HTML de los documentos,

y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado.

1. Etiquetas

Las etiquetas o marcas delimitan cada uno de los elementos que

componen un documento HTML. Existen dos tipos de etiquetas, la de

comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo est delimitada por los caracteres < y >. Est

compuesta por el identificador o nombre de la etiqueta, y puede contener

una serie de atributos opcionales que permiten aadir ciertas propiedades.

Su sintaxis es:

2. Estructura de una pgina web

La estructura bsica de una pgina es:

...

...

3. Cabecera de la pgina

La cabecera de la pgina se utiliza para agrupar informacin sobre ella,

como puede ser el ttulo.

Est formada por las etiquetas y . La etiqueta va

justo debajo de la etiqueta .


Por ejemplo:

...

...

Entre las etiquetas y , las etiquetas que podemos

encontrar y ms se utilizan son:

, ,

4. Ttulo de la pgina

El ttulo de la pgina es el que aparecer en la parte superior de la ventana

del navegador, cuando la pgina est cargada en l. Para asignar un ttulo

a una pgina es necesario escribir el texto deseado entre las etiquetas

y .

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las

etiquetas y .

Por ejemplo:

Curso de HTML

...


5. Cuerpo del documento

El cuerpo del documento contiene la informacin propia del documento, es

decir lo que queremos que se visualice, el texto de la pgina, las imgenes,

los formularios, etc.

Todos estos elementos tienen que encontrarse entre las etiquetas

y , que van justo debajo de la cabecera.

Por ejemplo:

Curso de HTML

...

A travs de la etiqueta es posible establecer el color o la imagen de

fondo de la pgina. El color de fondo puede establecerse a travs del

atributo bgcolor, al que es posible asignarle un color representado en

hexadecimal o por un nombre predefinido.

Por ejemplo, para hacer que el color de fondo de una pgina sea de color

azul, tendremos que escribir:

...

...


6. Saltos de lnea

En general, cuando trabajamos con un editor de texto se produce un salto

de lnea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento

HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en

el navegador. Para que se produzca el salto de lnea en el navegador, en

lugar de pulsar la tecla INTRO hay que insertar la etiqueta donde se

desee que se produzca el salto.

La etiqueta no precisa ninguna etiqueta de cierre. No hay que insertar

la etiqueta despus de ella, ya que dicha etiqueta no existe.

Por ejemplo, para insertar el texto:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva seccin.

Habra que escribir:

Queridos usuarios,tengo el placer de comunicaros que hay una

nueva secci&oacuten.

7. Sangrado de texto

La sangra es una especie de margen que se establece a ambos lados del

texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas

y .

Esta etiqueta en un principio se defini para delimitar citas pero que como

la mayora de los navegadores resuelven la cita incluyendo un sangrado

del texto, su uso para sangrar texto se ha generalizado.

El uso de la etiqueta obliga a que el texto aparezca en una

nueva lnea.

Insertando el texto entre varias etiquetas y se

consigue que los mrgenes sean mayores.


Queridos usuarios,

tengo el placer de comunicaros que hay una nueva seccin.


Habra que escribir:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva secci&oacuten.

8. Formatear el texto ...

Las propiedades del texto pueden modificarse a travs de la etiqueta

. Para ello, podemos insertar el texto entre las etiquetas y

, especificando algunos de los atributos de la etiqueta:

Ejemplo

Hola a todos

9. Prrafos ...

El texto de una pgina puede agruparse en prrafos. Para ello, el texto de

cada uno de los prrafos debe insertarse entre las etiquetas y .

No es necesario insertar la etiqueta para que un nuevo prrafo

aparezca debajo del anterior, ya que las etiquetas y hacen que se

cambie de lnea automticamente.

Atributo Significado Posibles valores

face Fuente nombre de la fuente, o fuentes

color color del texto nmero hexadecimal o texto

predefinido

size tamao del texto valores del 1 al 7, siendo por

defecto el 3.


Tambin es posible cambiar la alineacin del texto de cada prrafo. Para

ello se modifica el valor del atributo align, cuyos valores pueden ser left

(izquierda), right (derecha), center (centrado) o justify (justificado).


Bienvenidos a mi pgina.

Aqu encontraris cursos de formacin muy interesantes.

Habra que escribir:

Bienvenidos a mi pgina.


DREAMWEAVER CS3

Dreamweaver CS3 es un software fcil de usar que permite crear pginas web

profesionales. Las funciones de edicin visual de Dreamweaver CS3 permiten

agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de

programar manualmente el cdigo HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar

comportamientos JavaScript, etc., de una forma muy sencilla y visual.

1. El entorno del Dreamweaver CS3

Formato de texto

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas

visualizar el inspector de propiedades que se encuentra normalmente en la

parte inferior de la ventana, y que tiene el siguiente aspecto:


Si no te aparece, puedes

mostrarlo a travs del men

Ventana, con la opcin

Propiedades.

2. Configuracin de un sitio local

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s,

con un diseo similar o un objetivo comn. Es necesario disear y planificar

el sitio web antes de crear las pginas que va a contener.

Una vez creadas las carpetas que formarn un sitio local, ya es posible

definir el sitio en Dreamweaver.

Para ello hay que dirigirse al men

Sitio, a la opcin Administrar sitios....

Recuerda que a travs del panel

Archivos, pestaa Archivos, se puede

acceder a cada uno de los sitios

creados y a la opcin Administrar

sitio.

En el caso de haber seleccionado la

opcin Administrar sitios, aparece

una ventana que contiene la lista de sitios locales definidos con

anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se

mostrar la misma ventana en la que definir las caractersticas del sitio.

3. Estilos CSS. Introduccin

En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos

que pueden aplicarse al texto seleccionado.


Los estilos CSS estn en hojas de estilo de actualizacin automtica

(tambin denominadas Hojas de Estilo en Cascada) se utilizan para

combinar una serie de atributos del texto, como pueden ser el color o el

tamao, de modo que no sea necesario asignar estos atributos uno a uno

cada vez que se desee repetir la asignacin de esos mismos valores a

otras partes del texto. Tambin algunas de sus opciones pueden utilizarse

para definir atributos de imgenes y otras caractersticas que no permitan

definir los estilos HTML en versiones anteriores, como el color de fondo

para el texto, etc.

Para crear un Estilo CSS personalizado:

a. En el documento, se selecciona el texto al que se desea aplicar

caractersticas concretas.

b. En el inspector de propiedades se modifican todas las propiedades de

formato de texto, se establecen los atributos de la fuente y del prrafo

que queramos.

Automticamente Dreamweaver crear un nuevo estilo con el nombre

Estilo1 o Estilo2 o Estilo3,... segn los nombres de los estilos ya

creados.

4. Hiperenlaces

Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al

ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es

posible asignar un vnculo a un texto, a una imagen, o a parte de una

imagen

Tipos de enlaces


Existen diferentes clases de rutas de acceso a la hora de definir los

vnculos.

a. Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la

ruta completa del archivo.

La ubicacin es en Internet, por ejemplo, http://www.google.com, o

http://www.misitio.com/pagina/pagina1.html.

b. Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el

documento actual, pero partiendo del directorio en el que se

encuentra el documento actual.

Si queremos referirnos a carpetas que estn por encima del nivel

donde nos encontramos deberemos utilizar ..

Por ejemplo, imagina que estamos en la siguiente direccin

http://www.misitio.com/pagina/informacion/index.html. En esta

pgina queremos mostrar una imagen que se encuentra en la

carpeta http://www.misitio.com/pagina/secciones/seccion1.html,

cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo

referencia al nivel superior (http://www.misito.com/pagina/) para

poder ir luego a la carpeta secciones.

El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacin,

subimos un nivel y luego nos movemos dentro de la carpeta

secciones para mostrar el archivo seccion1.html.

c. Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el

documento actual.En este mtodo los enlaces se crean indicando la

ruta a partir de la raz del sitio.

En el ejemplo anterior si tuviesemos definido como sitio la carpeta


http://www.misitio.com/, un enlace en cualquier pgina del sitio a

http://www.misitio.com/pagina/secciones/seccion1.html se creara

como /pagina/secciones/seccion1.html.

Como puedes ver ahora el vnculo a un archivo en todas las pginas

es igual porque se define dependiendo del sitio raz y no de la

ubicacin donde se encuentra.

Puntos de fijacin:

Conduce a un punto dentro de un documento, ya sea dentro del

actual o de otro diferente. Para ello el vnvulo debe ser

nombre_de_documento.extension#nombre_de_punto.

El punto se define dentro de un documento a travs del men

Insertar, opcin Anclaje con nombre.

Podramos referenciar de este modo a un anclaje llamado parte2 de

la siguiente forma: ../secciones/seccion1.html#parte2

5. Imagen de sustitucin. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sita

sobre ella. Este tipo de imagen suele utilizarse en los mens o en los

botones para desplazarnos a travs de distintas pginas.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de

Imagen, a la opcin Imagen de sustitucin. En la nueva ventana hay que

especificar la imagen original y la de sustitucin.


Es preferible que la opcin Carga previa de imagen de sustitucin est

activa. Si se activa, la imagen de sustitucin se carga cuando se carga la

pgina, de este modo se evitan las demoras debidas a la descarga de la

imagen cuando llega el momento de que aparezca.

6. Botones Flash

Existen otra serie de imgenes especiales, similares a los rollovers, que

suelen utilizarse para crear mens, como pueden ser los botones Flash.

Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver

qu es lo que ocurre.

Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la

opcin Botn Flash, aparecer el siguiente cuadro de dilogo:

A travs de Estilo: puede seleccionarse uno de los distintos formatos de

botn que se ofrecen.


En esta misma ventana hay que especificar tambin el Texto que mostrar

el botn (Texto del botn:), as como el nombre con el que ser guardado

(Guardar como:) y el vnculo asociado (Vinculo: y Destino:).

Es preferible guardar los botones Flash en el mismo directorio que los

documentos HTML, en lugar de la carpeta destinada a almacenar

imgenes, ya que de no ser as es posible que al intentar asignar un

vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn

con ese vnculo en una ubicacin diferente de la de dicho documento.

Recuerda que los botones deben guardarse con la extensin SWF.

manual diseño web

Documents