Scribd Logo
Upload

Welcome to Scribd!

  • Diseño Web

    Uploaded by

    LeidyDavila
    6 views14 pages
    trabajo diseño grafico

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    trabajo diseño grafico

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views14 pages

    Diseño Web

    Uploaded by

    LeidyDavila
    trabajo diseño grafico

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    DISEO 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 diseo y objetivo en comn.

    PASOS PARA CREAR UN SITIO WEB.


    1. En una carpeta local no extrable crear una subcarpeta donde estn
    todos los activos y dems 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 informacin (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 intrusin
    <intruccion>. Y se establece con una etiqueta incial y una final de la siguiente
    forma:
    <B> (NEGRILLA)

    CENSA

    INTRUCCION INICIAL

    </B>

    INSTRUCCIN 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 identificacin y de validacin o
    vinculacin de otros lenguajes al documento. Y en el cuerpo va todo el
    contenido visual (activos y extructuras de diagramacin.)
    <HTML>
    <HEAD>
    <TITLE>LEIDY </TITLE>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>

    ATRIBUTOS DE LAS ETIQUETAS.


    Son modificaciones especiales que permiten definir ms posibilidades en una
    instruccin.
    Ejm. <table
    5>
    ETIQUETA

    width=

    800

    border=

    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 pgina)
    Apariencia css la configuracin esencial de la pgina.
    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 configuracin.
    PASOS PARA CONFIGURAR UNA PLANTILLA CON DIV.
    1. En software de diseo o en hoja disear con matriz de rectngulos la
    estructura de la plantilla indicando las diferentes zonas de la pagina.
    2. En un archivo HTML disear con la extructura DIV cada parte de la
    interfaz segn su funcionalidad. De la siguiente manera:
    Insertar una etiqueta DIV
    NOTA: CUANDO SE CREA UNA PLANTILLA SE DEBE INSERTAR UNA
    ETIQUETA DIV QUE ABARQUE TODAS LAS DEMAS. Utilizando la opcin
    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 TAMAO.
    3. LA tendencia de la web es disear las entradas respecto a cualquier
    resolucin 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 categora cuadro y


    en la margen externa (margen) desactivar la casilla IGUAL PARA TODO. Y en la
    opcin left y raiHG activar el valor AUTO.
    Insertar la primera estructura anidndola dentro de la principal (contenedor)
    para anidar una estructura dentro de otra referenciada se deben tener en
    cuenta las siguientes formas de insercin:
    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: prrafos
    Cuadro: confi del rea de la divi, ubicacin y mrgenes
    Borde. Estilo grosor y color de los bordes de la DIV
    Lista: config de las vietas para los lisstados
    Posicin: 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 mrgenes 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=HEIGHTALTO
    LEFT+ RIGHT= WIDTH ANCHO

    TRABAJO:
    1. GENERAL
    TIPO: ARIAL, HELVETICA, SANS
    10 PT
    FONDO: BLANCO
    WHIDT 800PX
    MARGIN: LEFT RIGH >AUTO
    2. NAVEGADOR
    FONDO: #8CC63E
    BLOQUE: TEXT ALIGN= CENTER
    CUADRO: HEIGHT: 24PX
    PADDING-TOP= 6 PX
    BORDE : STYLE=SOLID
    WIDHT=THIN
    COLOR= VERDE OSCURO (TOPP Y BOTTOM)
    3. LOGOTIPO
    FONDO:BEIGE
    CUADRO: HEIGH 84.PX

    BORDE: STYLE=SOLID
    WIDTH= THIN
    COLOR=AMARILLO MOSTAZA
    (TOP Y BOTTOM)
    4. INFO
    CUADRO: HEIGHT 450PX
    5. COL1:
    TIPO: ARIAL, HELVETICA, SANS
    109T
    FONDO: BACK CROUND-IMAGE: BG-COL1-JPG
    BLOQUE: TEXT- ALIGN: SUSTYFY
    CUADRO: WIDHT: SSS PX FIDAT: LEFT
    HEIGHT : 450PX
    PADDING: LEFT : 2.DPX
    RIGHT: 5PX
    6. COL2
    CUADRO: WIDTH: 220 PX FLOAT: RIGHT
    HEIGHT: 450PX
    7. PROMOCIONES
    FONDO:BACKGROUND-IMAGE-: FND.PNG
    CUADRO: HEIGHT:240 PX
    PADDING: TOP: 20PX
    LEFT: 30PX
    BOTTOM: 10PX
    RIGHT: 30PX
    8. PROMO2
    CUADRO:WIDTH: 220PX
    HEIGHT: 220PX
    MARGIN: LEFT
    RIGHT AUTO
    9. PROMO1
    CUADRO:WIDTH :220PX FLONT: LEFT
    HEIGHT: 220PX
    10.PROMO5
    CUADRO:WIDTH:220PX FIOAT: RIGHT
    HEIGHT:220 PX

    COMO CREAR UNA HOJA DE ESTILO Y ADJUNTAR HTML

    MARCADORES:

    VINCULOS ARCHIVOS Y ACTIVOS:


    1 seleccionar el botn o componente y en la barra de propiedades en la
    opcin vinculo copiar el nombre mas la extensin 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 -opcin vinculo copiar toda la URL del sitio a visitar. ya
    agregarle el destino blank
    VINCULO A UN CORREO ELECTRONICO
    Se 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 direccin.
    ventas@adobe.com

    FORMULARIO HTML

    FORMULARIOS
    SON planillas virtuales para llenar datos, consultar datos y establecer
    sesiones en un servidor.
    PASOS PARA CREAR UN FORMULARIO HTML
    1. Base de datos
    2. 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 cdigo 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 Envan los datos en una cadena invisible (no se ve lo que se enva) y
    se utiliza en formularios de mas de una pregunta.
    GET: Enva los datos en una cadena visible. Se ve lo que se enva se utiliza en
    formularios de una sola pregunta
    ACTION: indica el lugar donde sern 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 bsica desde la
    barra de propiedades asignndole 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 seleccin mltiple con multiple respuesta.
    BOTON OPCION O GRUPO DE OPCION
    Son campos de seleccin mltiple 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 opcin de que al seleccionar un
    ITEM nos lleve a una pgina web o un URL
    CAMPO DE IMAGEN Y BOTON
    Se utilizan para insertar el componente que enva los datos,
    CAMPO DE IMAGEN con archivo jpg png o gif
    BOTON: crea un cdigo con un botn estndar
    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 botn


    comportamientos dar clic en el icono del + (aadir comportamiento)

    Y buscar uno que se llama validar formulario

    COMPORTAMIENTO ABRIR VENTANA DE NAVEGADOR


    Consiste en crear una ventana web de menor tamao que abre encima de una
    web principal y su contenido suele ser promocional
    PASOS:
    Disear en un archivo HTML el contenido de la ventana flotante y finalizada
    medir cuando tiene de ancho y alto todo el diseo.
    Abrir la pgina html Donde cargara la ventana flotante y seleccionar el
    componente encargado de ejecutarla.
    Shift f4 y en botn comportamiento ,,, aadir comportamiento, y seleccionar
    abrir ventana de navegador
    En la ventana de dialogo que aparece. Examinar y buscar el archivo HTMl que
    tiene el diseo 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 imgenes

    Subir los editables

    PARAMETROS PARA LA FINAL


    Disear una web corporativa con los siguientes requerimientos
    1. 4 enlaces + el indexhtml
    2. 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 internas
    3. Insertar en alguna pagina un comoponente de formulario
    4. Hacer el diseo con un ancho entre 900 y 1024px y el largo como
    quieran y centrar.
    5. Hacer el diseo para el fondo (imagen, textura, o degradado
    6. Disear dos cabeceras, una para el index y otra para las pag internas
    7. Disear las imgenes a medidas precisas
    8. Aplicar los fundamentos de layout (ppio del diseo)
    9. Publicarlo en un servidor y mandar el link a : industria.ideas@gmail.com
    hasta el 21 de diciembre.

    You might also like