Diseño Web

DISEÑO WEB

CONTENIDO

CREACION DE UN SITIO WEB “ANIMACION BASICA”

LENGUAJE HTML

CONFIGURACION DE PAGINA CON CS5

MAQUETACION DE INTERFAZ CON ESTRUCTURAS DIV Y REGLAS CSS

INSERCION DE ACTIVOS “COMPONENTES”

HIPERVINCULOS

FORMULARIOS HTML

COMPORTAMIENTOS BASICOS DE JAVA SCRIPT

PUBLICACION DE SITIOS EN SERVIDORES

CREACION DE MENU CON SPRY

INSERCION DE GALERIAS TIPO WIDGET

PROYECTO FINAL.

SITIO WEB.

Conjunto de archivos y activos. (archivos editables, activos los que se le insertan a la web ”multimedia!) que tienen un diseño y objetivo en común.

PASOS PARA CREAR UN SITIO WEB.

1. En una carpeta local no extraíble crear una subcarpeta donde estén todos los activos y demás recursos.

2. En dreviewer establecer el registro del sitio dando clic en el icono CITIO DE DREAMWEBER.3. Crear todos los archivos HTML que tendrá el proyecto. clic derecho de la parte local 4. Editar los archivos para diagramar su plantilla o interfaz

LENGUAJE HTML

Es un lenguaje sencillo para presentar información (activos) basada en paginas web. Esta conformado por una serie de etiquetas. (marcas)que controlan todo el aspecto de los componentes dicha mara es un texto o intrusión <intruccion>. Y se establece con una etiqueta incial y una final de la siguiente forma:

<B> (NEGRILLA) CENSA </B>

INTRUCCION INICIAL INSTRUCCIÓN FINAL

ESTRUCTURA BASICA DE UNA PAGINA HTML

SE divide en dos partes esenciales el encabezado y el cuerpo. El encabezado se encarga de agregar las etiquetas de identificación y de validación o vinculación de otros lenguajes al documento. Y en el cuerpo va todo el contenido visual (activos y extructuras de diagramación.)

<HTML>

<HEAD>

<TITLE>LEIDY </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

ATRIBUTOS DE LAS ETIQUETAS.

Son modificaciones especiales que permiten definir más posibilidades en una instrucción.

Ejm. <table width= ”800” border= “5”>

ETIQUETA ATRIBUTO VALOR ATRIBUTO VALOR

NOTA: 1.LOS ATRIBUJOS SOLO SE DEFININ EN LA ETIQUETA INICIAL.

2. TIENEN UN VALOR QUE LOS SEPARA DE SU ATRIBUTO CON EL SIMBOLO IGUAL (SIN ESPACIOS)

3.SOLO SE DEJAN ESPACIOS ENTRE ETIQUETAS Y OTROS ATRIBUTOS.

4.EL VALOR DEL ATRIBUTO VA EN COMILLAS

CONFIGURACION DE PAGINA CON ESTILO CSS GENERAL

Para configurar un documento a nivel general se abre el archivo html y se preciona ctrl+ j.(propiedades de página)

Apariencia css la configuración esencial de la página.

NOTA: PARA CONVERTIR EN BOTON ES CON “ #”

MAQUETACION DE INTERFAZ CON ESTRUCTURAS DIV Y REGLAS CSS

Las estructuras DIV son componentes HTML que se configuran atravez de CSS para ubicar los componentes de la pagina de una manera mas exacta y mas posibilidades de configuración.

PASOS PARA CONFIGURAR UNA PLANTILLA CON DIV.

1. En software de diseño o en hoja diseñar con matriz de rectángulos la estructura de la plantilla indicando las diferentes zonas de la pagina.

2. En un archivo HTML diseñar con la extructura DIV cada parte de la interfaz según su funcionalidad. De la siguiente manera:

Insertar una etiqueta DIVNOTA: CUANDO SE CREA UNA PLANTILLA SE DEBE INSERTAR UNA ETIQUETA DIV QUE ABARQUE TODAS LAS DEMAS. Utilizando la opción “ INSERTAR EN EL PUNTO DE INSERCION, POR SER LA PRIMERA”.

LA CASILLA CLASE EN EL CUADRO INSERTAR ETIQUETA, ES PARA QUE TODOS LOS CONTENEDORES TENGAN EL MISMO TAMAÑO.

3. LA tendencia de la web es diseñar las entradas respecto a cualquier resolución de pantalla

COMO centrar una estructura con respecto a la pantalla web o otras DIV que la contenga ¿

Pasos:

Al crear la estructura y configurarla con la regla css ir a la categoría cuadro y en la margen externa (margen) desactivar la casilla IGUAL PARA TODO. Y en la opción left y raiHG activar el valor AUTO.

Insertar la primera estructura anidándola dentro de la principal (contenedor) para anidar una estructura dentro de otra referenciada se deben tener en cuenta las siguientes formas de inserción:

DELANTE DE LA ETIQUETA: inserta una DIV por FUERA de la div referenciada y la ubica encima de ella.

DESPUES DEL INICIO DE LA ETIQUETA: inserta una etiqueta DIV por dentro de una DIV referenciada y la ubica por encima de cualquier posible contenido.

DELANTE DEL FINAL DE LA ETIQUETA REF: inserta una etiqueta dentro de una DIV refernciada y la ubica por debajo de cualquier posible contenido que pueda tener la DIV referenciada.

DESPUES DE LA ETIQUETA: inserta un DIV por fuera de la DIV referenciada y la ubica por debajo de ella.

(paddin =margen interna )

(margin=margen externa)

DEFINICION DE REGLA PARA NUMERO DE # CONTENEDOR

Tipo: config caracteres

Fondo: baciground = imagen – color

Bloque: párrafos

Cuadro: confi del área de la divi, ubicación y márgenes

Borde. Estilo grosor y color de los bordes de la DIV

Lista: config de las viñetas para los lisstados

Posición: config complementaria al área de la div y estilos DIV “flotantes ,fijas , acopladas.

Extensiones: config de los componentes config con j.s

Width, ancho

Heigh alto.

COMPENSACION DE MEDIDAS CON MARGENES INTERNAS CON DIV

Si desea agregar márgenes internas a una DIV y esta tiene una medida en ancho y alto, los valores que se le asignan a la margen se le restan al alto y ancho asi:

PADDING “MARGEN INTERNA”

TOP + BOTTON=HEIGHT”ALTO”

LEFT+ RIGHT= WIDTH “ANCHO”

TRABAJO:

1. GENERALTIPO: ARIAL, HELVETICA, SANS 10 PTFONDO: BLANCOWHIDT 800PXMARGIN: LEFT RIGH >AUTO

2. NAVEGADORFONDO: #8CC63EBLOQUE: TEXT ALIGN= CENTERCUADRO: HEIGHT: 24PXPADDING-TOP= 6 PXBORDE : STYLE=SOLIDWIDHT=THINCOLOR= VERDE OSCURO (TOPP Y BOTTOM)

3. LOGOTIPOFONDO:BEIGE CUADRO: HEIGH 84.PXBORDE: STYLE=SOLIDWIDTH= THINCOLOR=AMARILLO MOSTAZA(TOP Y BOTTOM)

4. INFOCUADRO: HEIGHT 450PX

5. COL1: TIPO: ARIAL, HELVETICA, SANS109TFONDO: BACK CROUND-IMAGE: BG-COL1-JPGBLOQUE: TEXT- ALIGN: SUSTYFYCUADRO: WIDHT: SSS PX FIDAT: LEFTHEIGHT : 450PXPADDING: LEFT : 2.DPXRIGHT: 5PX

6. COL2CUADRO: WIDTH: 220 PX FLOAT: RIGHTHEIGHT: 450PX

7. PROMOCIONESFONDO:BACKGROUND-IMAGE-: FND.PNGCUADRO: HEIGHT:240 PXPADDING: TOP: 20PXLEFT: 30PXBOTTOM: 10PXRIGHT: 30PX

8. PROMO2CUADRO:WIDTH: 220PXHEIGHT: 220PXMARGIN: LEFT RIGHT AUTO

9. PROMO1CUADRO:WIDTH :220PX FLONT: LEFTHEIGHT: 220PX

10. PROMO5 CUADRO:WIDTH:220PX FIOAT: RIGHTHEIGHT:220 PX

COMO CREAR UNA HOJA DE ESTILO Y ADJUNTAR HTML

MARCADORES:

VINCULOS ARCHIVOS Y ACTIVOS:

1 seleccionar el botón o componente y en la barra de propiedades en la opción vinculo copiar el nombre mas la extensión del archivo o activo a enlazar o descargar .

ARCHIVOS: ENLAZAR

ACTIVO: DESCARGA

2.Arrastarr al archivo o activo en el panel archivos

3.buscar el archivo o activo en la carpeta razi

NOTA: PARA DESCARGAR UN ACTIVO SE DEBE GUARDAR EN UNA CARPETA COMPRIMIDA,

VINCULOS ABSOLUTOS:

1. LINK : se utiliza para acceder a otro sitio web.Pasos: seleccionar el componente para acceder y en la barra de propiedades -opción vinculo copiar toda la URL del sitio a visitar. ya agregarle el destino blank

VINCULO A UN CORREO ELECTRONICOSe utiliza para abrir el programa configurado como servidor de correo y enviar un msn a uno o mas contactos,PASOS: SELECCIIONAR EL BOTON O COMPONENTE QUE ABRE EL PROGRAMA.Y EN BARRA DE PROPIEDADES –VINCULO: MAIlTO:la dirección. [email protected]

mailto:[email protected]

FORMULARIO HTML

FORMULARIOSSON planillas virtuales para llenar datos, consultar datos y establecer sesiones en un servidor.

PASOS PARA CREAR UN FORMULARIO HTML1. Base de datos2. Situar el cursor en la estructura DIV donde ira el formulario y agregar un área de

formulario.

AREA DE FORMULARIO: Es la zona donde se insertan todos los campos o ítems que tendrá el formularios

EL área de formulario establece en la vista de código las siguiente sintaxis :

ETIQUETA: <FORM> </FORM>

ATRIBUTOS: METHOD: POST O GET

METODOS: INDICA LA MANERA EN QUE ESTAN ENVIADOS LOS DATOS: POST O GET

POST: SE Envían los datos en una cadena invisible (no se ve lo que se envía) y se utiliza en formularios de mas de una pregunta.

GET: Envía los datos en una cadena visible. Se ve lo que se envía se utiliza en formularios de una sola pregunta

ACTION: indica el lugar donde serán enviados los datos para ser procesados.

Dentro del área del formulario crear una estructura de tablas para insertar los campos.

3.crear la estructura

4.agragar los campos de formulario que tendrá la planilla

CAMPOS DE FORMULARIO

1.CAMPO DE TEXTO: ES EL CAMPO MAS USADO EN UN FORMULARIO porque se puede introducir cualquier tipo de dato y se configura de forma básica desde la barra de propiedades asignándole

un nombre de etiqueta, numero de caracteres que se pueden introducir y la forma en la que se ve el dato,.

CAMPO OCULTO

Se utiliza para agregar un nombre asociativo con l nombre de la base de datos correspondiente o tabla en la base de datos

AREA DE TEXTO:

Se utiliza para redactar mensajes extensos, debe tener un ID , y se puede configurar su aspecto o ancho.

CASILLAS O GRUPO DE CASILLAS DE VERIFICACION.

Son campos de selección múltiple con multiple respuesta.

BOTON OPCION O GRUPO DE OPCION

Son campos de selección múltiple con única respuesta

GRUPO DE OPCION: CON UNICA RESPUESTA

LISTA MENU: ordena los ítems en un Menú desplegable ahorrando espacio,

MENU SALTO: similar a lista menú, tiene la opción de que al seleccionar un ITEM nos lleve a una página web o un URL

CAMPO DE IMAGEN Y BOTON

Se utilizan para insertar el componente que envía los datos,

CAMPO DE IMAGEN con archivo jpg png o gif

BOTON: crea un código con un botón estándar

NOTA:Para ambos el ID, debe llamarse SUBMIT

CAMPO DE ARCHIVO: Se utiliza para adjuntar y enviar a una base de datos un archivo local

VALIDACION DE FORMULARIOS

Se utilizan para comprobar el tipo de dato que el usuario introduce en los campos y áreas de texto,

PASOS PARA VALIDAR UN FORMULARIO CON JAVASCRIPT:

Seleccionar el formulario ; <form#form1>

3. Abrir el escritor de etiquetas ( SHIFT + F4) y en el botón comportamientos dar clic en el

icono del + (añadir comportamiento) Y buscar uno que se llama validar formulario

COMPORTAMIENTO ABRIR VENTANA DE NAVEGADORConsiste en crear una ventana web de menor tamaño que abre encima de una web principal y su contenido suele ser promocional

PASOS:

Diseñar en un archivo HTML el contenido de la ventana flotante y finalizada medir cuando tiene de ancho y alto todo el diseño.

Abrir la página html Donde cargara la ventana flotante y seleccionar el componente encargado de ejecutarla.

Shift f4 y en botón comportamiento ,,, añadir comportamiento, y seleccionar abrir ventana de navegador

En la ventana de dialogo que aparece. Examinar y buscar el archivo HTMl que tiene el diseño de la ventana flotante

COMO EDITAR UN COMPORTAMIENTO:

SELECCIONA EL COMPONENTE QUE SE PROGRAMO YY EN EL INSPECTOR DE ETIQUETAS (SHIFT

+F74) DAR DOBLE CLIC EN EL NOMBRE DE LA ACCION

Entrar en la carpeta y subir todas las imágenes

Subir los editables

PARAMETROS PARA LA FINALDiseñar una web corporativa con los siguientes requerimientos

1. 4 enlaces + el indexhtml2. Dos plantillas diagramadas con div, una para la principal y la otra para las internas.

NOTA: hacer la hoja de estilos para las estilos scs para las internas3. Insertar en alguna pagina un comoponente de formulario4. Hacer el diseño con un ancho entre 900 y 1024px y el largo como quieran y centrar.5. Hacer el diseño para el fondo (imagen, textura, o degradado6. Diseñar dos cabeceras, una para el index y otra para las pag internas7. Diseñar las imágenes a medidas precisas 8. Aplicar los fundamentos de layout (ppio del diseño)9. Publicarlo en un servidor y mandar el link a : [email protected] hasta el 21 de

diciembre.

mailto:[email protected]

Diseño Web

Documents

Transcript of Diseño Web