Parte 1 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Parte 1 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS"

Transcripción

1 Parte 1 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Muchos diseñadores de páginas web para principiantes tienen problemas para el diseño de sitios y, a continuación, la codificación de manera adecuada y acaban de pasar a las mesas y de Dreamweaver. En este tutorial te mostraré cómo diseñar un sitio en The Gimp y luego en el código XHTML y CSS válidos con divs y las clases (no cuadros). Esta es la primera parte de una serie de cuatro partes sobre este tema, esta parte se centrará en el diseño de The Gimp, parte 2, 3 y 4 estará dedicado a la codificación listo para la web. Así que volver en el próximo par de semanas o suscribirse a nuestro feed RSS. Así que aquí vamos: Paso 1 Crear una nueva imagen en The Gimp, que 960px (anchura) por 900px (altura) y lo rellenamos de color gris oscuro (333333) Paso 2 Ahora crear una nueva capa de 900px de ancho y lo llaman página, llenarlo con blanco (FFFFFF). Use las teclas de flecha para mover en el centro de la imagen como esta:

2 Paso 3 Ir a Filtros > Luz y Sombra > Drop Shadow y configurar el offset Offset X y Y a 0 y desmarca Permitir cambiar el tamaño, haga clic en Aceptar. Esto añadirá una sombra para el área de la página. Paso 4 Crear una nueva capa llamada de cabecera y hacer 900px de ancho y 150px de altura, pasar en su lugar como este:

3 Paso 5 Ajuste el color de frente a y el color de fondo a 84a3e3 y seleccione la herramienta de mezcla. Haga clic y arrastre desde la parte inferior de la capa a la parte superior para crear este efecto:

4 Paso 6 Seleccione la herramienta y haga clic en seleccionar y arrastrar un rectángulo de altura 5px en la parte superior de la capa y la rellenamos con el color de primer plano.

5 Paso 7 Ahora duplicar la capa y pulse Eliminar la capa de vaciar de su contenido, esto le ahorrará tiempo ya que no necesita crear una nueva capa y la posición de la misma. Con la herramienta Seleccionar, haga clic y arrastre la capa a través de un rectángulo de 100% de ancho y altura de 1px y lo rellenamos de negro (000000) y debajo de él exactamente lo mismo, esta vez llenado con blanco. A continuación, cambiar la opacidad de la capa a 10,0. Esto producirá este efecto (si tiene dificultades para entender el presente y, a continuación, checa mi tutorial sobre esta aquí:

6 Paso 8 Duplicar la capa de la página y borrar su contenido y, a continuación, utilizando la herramienta de seleccionar dibujar un rectángulo en la parte derecha de la página con un ancho de 320px. Llenarlo con 84a3e3 y cambiar la opacidad de la capa a 15,0, lo que presenta la siguiente:

7 Paso 9 Ahora crear una nueva capa con un ancho de 900px y una altura de 100px y lo llaman el pie de página, el lugar que en la parte inferior del diseño como este y lo rellenamos de :

8 Paso 10 Haga clic en el marco del área de grabado y añadir los elementos del menú que desea, cambiar la fuente a Arial negrita tamaño 14 de color blanco (FFFFFF) y mover la capa para que se parezca a esta:

9 Paso 11 Duplicar la capa superior de cabecera y borrar su contenido, ahora bajo el grabado líneas dibuja un rectángulo y lo rellenamos de blanco (FFFFFF) y cambiar la opacidad a 10, esto creará este efecto:

10 Paso 12 Por último, añadir que el logotipo utilizando la opción Abrir como capas en el menú Archivo y colóquelo en la parte superior izquierda de la cabecera de la zona como esta: Y eso es todo por esta parte, hemos creado un sencillo diseño que se corte en la siguiente parte de este tutorial y que ésta esté preparada para la codificación. Hay mucho mejor que los diseños que se pueden realizar en The Gimp, pero sólo quiero mostrar que los fundamentos de esta serie. Como dije al principio, volver o suscribirse a nuestro feed para ser notificado cuando las nuevas piezas están.

11 Parte 2 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Bienvenidos a la muy anticipada segunda parte. Mi agradecimiento a todos los que han sido estimular a prisa y escribir la parte 2, así que aquí está. En la segunda parte de esta serie de 4, voy a mostrar cómo el diseño listo el tramo para la codificación. Este es el proceso por el cual estamos básicamente de corte en cada elemento por separado las imágenes dispuesta a código en el sitio. Paso 1 Crea una nueva carpeta en el equipo y dentro de esta carpeta agregar otra carpeta llamada imágenes. Paso 2 Regresar a la imagen y abrir el diálogo de capas, seleccione un ojo al lado del logotipo de la capa, la capa hover menú de navegación y de la capa de texto para que la imagen ahora parece esto:

12 Paso 3 Ahora, utilizando la herramienta Seleccionar, haga clic y arrastre desde la esquina superior izquierda a la derecha justo encima de la línea de grabado, la región seleccionada debe 960px x 108px (busque en la parte inferior de la ventana por el 100% mientras arrastra el botón para ver el seleccionado dimensiones) Paso 4 Volver al menú Edición y seleccione Pegar este momento y, a continuación, Como Nueva Imagen. Esto abrirá una nueva imagen copiada de la región. Guardar esta imagen como en las imágenes header.png carpeta que creó anteriormente. Paso 5 Regresar a la lona, si la región ya no es seleccionado a continuación, pulse Ctrl y Z hasta que se seleccione. Si coloca el ratón sobre la parte superior de la zona seleccionada, te darás cuenta de que esta aparece:

13 Paso 6 Haga clic y arrastre esta barra superior en el área de la parte inferior de la zona seleccionada de todos el camino a la parte inferior de la cabecera de la zona en la imagen para que la selección ahora parece esto, la región seleccionada debe 960px x 42px: Paso 7 Ahora como antes la región visible Copiar y pegar como una nueva imagen, esta vez de guardarlo como menulinks.png Paso 8 Vaya ahora a la capa de diálogo y volver a la capa menuhover y regresar a la lona. El área para la menulinks debería estar aún seleccionada, ahora este tiempo, agarrar el mango de la derecha del área seleccionada y la posición alguna dentro de la zona menuhover, hacer lo mismo manejar a la izquierda para que la selección se ve algo como esto:

14 Paso 9 Copiar el área seleccionada y pegar como una nueva imagen llamándolo menuhover.png

15 Paso 10 Ahora selecciona a la izquierda de la imagen a la derecha de la imagen en cualquier lugar de la sección central de este modo: Paso 11 Copie el área visible y pegar como una nueva imagen. Guardarlo en la carpeta de imágenes llamándola page.png Paso 12 Vaya a la zona de pie de página y seleccione la región de pie de página, debe ser píxeles de alto. Y entonces, adivinen qué? Sí, tienes razón, la zona visible copia y pega como una nueva imagen y lo llaman footer.png Paso 13 Por último, haga clic en el ojo al lado del logo de la capa y seleccione la parte superior izquierda de la imagen a la parte inferior derecha del logotipo, la zona visible copia y pega como una nueva imagen llamándolo logo.png

16 Resultados Ahora debería tener una carpeta con imágenes de una carpeta llamada interior. La carpeta debe contener imágenes header.png, menulinks.png, menuhover.png, page.png, footer.png y logo.png. Puede descargar el archivo. Zip con el corte original de las imágenes y el archivo XCF aquí. En la parte 3, yo te mostraré cómo iniciar la codificación de la plantilla en XHTML y CSS válidos.

17 Parte 3 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Bienvenido a la parte 3 de mi serie sobre el diseño y la codificación de una página web con el Gimp, HTML y CSS. En esta parte voy a mostrarte cómo iniciar la codificación del sitio. Paso 1 Para crear los archivos que no es necesario ningún procedimiento especial, sólo el Bloc de notas o un editor de texto de algún tipo (no MS Word). En primer lugar, guardar ambos archivos en la carpeta que creó anteriormente. La estructura de la carpeta debe tener este aspecto: Paso 2 En el index.html tenemos que crear la estructura html añadir este código: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> </head> <body> </body> </html> Estos se denominan etiquetas html. En la cabeza entre las etiquetas ir toda la información, como los scripts y el estilo y en las etiquetas "body" va todo el contenido.

18 Paso 3 Ahora vamos a rellenar la sección de cabecera de la plantilla, de aquí vamos a añadir el título que se muestra en la barra de título cuando ve la página y un enlace a la hoja de estilo CSS (style.css). También puede añadir metaetiquetas aquí si lo desea. Añadir este código entre las <head> y </ head>. <title> SITIO WEB </ title> <link rel=stylesheet href="style.css" type="text/css" media=screen> - -- Paso 4 Ahora vamos a añadir a los componentes de la div archivo index.html. Un div es una etiqueta que es de estilo en CSS y puede ser utilizado en HTML como un contenedor que posee contenido. A continuación se muestra una imagen de cómo el divs van a ser expuestas en nuestra plantilla:

19 Paso 5 Añadir el siguiente código al archivo index.html entre la <body> y </ body> tags: <div id="page"> </div> <div id="header"> </div> <div id="menulinks"> </div> <div id="mainarea"> </div> <div id="contentarea"> </div> <div id="sidebar"> </div> <div id="footer"> </div> Todos los elementos están contenidos dentro de la página div contentarea y la barra lateral y están contenidas en un subgrupo denominado mainarea div. Paso 6 Ahora, si usted fuera a abrir el archivo index.html ahora, usted no ve nada es porque no hemos aún estos elementos de estilo y esto es lo que vamos a empezar a hacer ahora. (Fuente) La sintaxis CSS se compone de tres partes: un selector, una propiedad y un valor: selector {property: value} Así, por ejemplo, si queríamos la cabecera para tener un ancho de 960px el código sería #header {width:960px;} # cabecera (width: 960px;) Cuando se refieren a un div que necesita para añadir un hash firmar delante del nombre (página #, # cabecera etc), sin embargo, cuando usted se refiere a una clase que necesita para añadir una. frente (. descripción. izquierda etc), vamos a entrar en más detalles sobre esto más adelante. Y para cada declaración dentro de la (y) es necesario añadir un punto y coma (;) al final de cada línea.

20 Por lo tanto, existe una rápida introducción a CSS, para más de una introducción le sugiero que se lea esta introducción. Paso 7 Vaya a su archivo style.css y agregue el siguiente código CSS. Voy a tratar de explicar a cada paso lo que hace: body { background-color:#333333; margin:0; padding:0; text-align:center; font-family:arial; font-size:12px; color:#555555; } #page { width:960px; margin:auto; padding:auto; background-image:url(images/page.png); text-align:left; } #header { # width:960px; height:108px; background-image:url(images/header.png); clear:both; }

21 #menulinks { width:960px; height:44px; background-image:url(images/menulinks.png); clear:both; } #mainarea { width:960px; clear:both; padding-top:10px; } #contentarea { float:left; width:560px; padding-left:45px; margin-bottom:10px; } #sidebar { # float:right; width:290px; padding-right:45px; } #footer { width:960px; height:100px; background-image:url(images/footer.png);

22 clear:both; } #footer p { padding-top:30px; color:#ffffff; padding-left:50px; line-height:20px; } body styling El cuerpo es básicamente la página, yo he puesto el margen y el relleno a 0, porque esto significa que no existan lagunas en la parte superior o inferior de la página. El color de fondo se ha establecido en gris oscuro, he usado un código de colores html para este (333333), puede ver los códigos de color para todos los colores aquí. Y, finalmente, yo he puesto la página para alinear texto al centro, lo que hará es hacer que el centro de la página en el centro. También he creado la familia de fuentes, por defecto el tamaño de la letra y el color de fuente. #page styling La página tiene un ancho de 960px y el margen de relleno y se han establecido para auto, esto hace de la página centrado en la web. También he añadido una imagen de fondo, se trataba de la imagen de la página que hemos creado en la segunda parte de esta serie y, por último, yo he puesto el texto alinear de nuevo a la izquierda, más todos los elementos que han centrado el texto. La claridad de la propiedad significa que se agrega debajo y por encima del anterior y siguiente componentes. #header, #menulinks and #footer styling He establecido una anchura y una altura adecuada, y añadió la imagen de fondo. #mainarea styling Este es un simple contenedor para la barra lateral y contentarea así que simplemente han creado un ancho de 960px. También hay un principio de propiedad de relleno para que el contenido de la página no está demasiado cerca de la cabecera de la zona. #contentarea styling El contentarea se ha dejado a flote, lo que significa que está en la columna de la izquierda de dos columnas. También he añadido un relleno izquierda porque de lo contrario la propiedad cuando agreguemos el contenido, no se mostrará en la zona blanca de la imagen. #sidebar styling El lateral derecho ha sido flotaba por lo que es en la columna de la derecha y también he añadido un padding derecho de propiedad para que el contenido aparece en la barra lateral área.

23 #footer p styling El relleno y relleno superior izquierda de la posición de pie de página de propiedades contenido, el color cambia a blanco (FFFFFF) y la línea está el espacio para el espacio de cada línea. Paso 8 Finalmente, para esta parte, tenemos que añadir algunos contenidos a la contentarea, barra lateral y pie de página, a fin de añadir el siguiente código html <br/> es el separador línea, sin que todos los de este texto sería agrupado en un párrafo: Contentarea: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor

24 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> <br/> <br/> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sidebar: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat no proident, sunt en culpa qui officia deserunt mollit anim Id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/><br/> Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br/> <br/>

25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed hacer eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris NISI ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis Aute irure dolor en reprehenderit en voluptate velit esse cillum dolore eu fugiat nulla pariatur. Footer: <p>copyright (c) 2008 SITE NAME. <br/> <p> Copyright (c) 2008 NOMBRE DEL SITIO. <br/> All Rights Reserved.</p> Todos los Derechos Reservados. </ P> Resultados Ahora debería tener una página que se ve algo como esto: En la parte final me va a añadir el logotipo, estilo links, H1, H2 y la creación de etiquetas en el menú rollover enlaces. Puede descargar todo el trabajo que hemos hecho hasta ahora aquí.

26 Parte 4 / 4: Diseño de un sitio y en el Código con Gimp, HTML y CSS Bienvenidos a la cuarta y última parte de mi serie sobre el diseño y la codificación de un sitio web en el Gimp, HTML y CSS. En este punto quiero dar las gracias a todos los que ha estado siguiendo esta serie y espero que continúe el uso Ayuda para desarrolladores. En esta parte voy a mostrar cómo acabar con la plantilla que hemos venido creando, vamos a estilo de los elementos textuales, como la H1, H2 y etiquetas de enlace y vamos a crear la tan esperada renovación menú. Paso 1 En primer lugar vamos a añadir el logotipo de la cabecera de la zona. Abra el archivo style.css y añadir el texto siguiente: a.logo { width:353px; height:102px; float:left; background-image:url(images/logo.png); } Esto estilo en el hipervínculo que tiene un atributo de clase "logo". Cambiar el ancho de valor a la anchura del logotipo de la imagen que cortar antes. Paso 2 Abra el archivo index.html y añadir la siguiente línea entre la <div id="header"> y </ div>: <a href="./index.html" class="logo"></a> Ahora debería tener este aspecto:

27 Paso 3 Ahora vamos a la h2 etiquetas estilo que vamos a utilizar para crear los títulos de las páginas y la barra lateral. Ir al archivo style.css y agregar el siguiente código: h2 { font-size:20px; color:#333333; font-weight:bold; } y esto a la index.html archivo directamente debajo de la etiqueta <div id="contentarea">: <h2>welcome</h2> Esto creará algo como esto:

28 El uso de etiquetas h2 es bueno para SEO porque robot de Google analiza el h2 etiquetas para determinar lo que su sitio se trata. Observe también que no hay ningún punto (.) O hash (#) antes de la h2 en el CSS, esto se debe a que se trata de una opción de formato y no se trata de un div (#) o una clase (.) Paso 4 Siguiente es el estilo de los hipervínculos en el texto, en primer lugar añadir un hipervínculo al archivo index.html. (<a href= link_here >text_to_display_here</a>), la notificación se utilizará la configuración del navegador por defecto: Para este estilo de añadir lo siguiente al archivo style.css: a { font-weight:bold; color:#333333; text-decoration:none; } Ahora se ve como este: Puede estilo aún más mediante la adición de un estilo hover, por ejemplo, he añadido el siguiente código: a:hover { color:#389ccb; text-decoration:underline; } y este fue el resultado cuando se ciernen sobre el vínculo:

29 Asimismo, sólo una pequeña nota, si quieres cambiar el estilo de un elemento como un hipervínculo en un área determinada, por ejemplo al pie de página en el área luego cambiar el archivo style.css a{ a footer # { Paso 5 Y ahora, lo que tiene para todos los que se espera, el vuelco del vehículo menú enlaces.esto se hace de una manera similar a lo que ves arriba en el paso 4 utilizando la una y una: flotar en las opciones de CSS. Al hacer esto en su propio sitios / templates necesitará usar ensayo y error para obtener el derecho de las mediciones para que se vea bien, pero en este ejemplo los elementos son todos los mismos que el tutorial (si usted ha sido el siguiente otras partes correctamente, por supuesto). Añadir lo siguiente en el archivo index.html en el marco del <div id="menulinks">: <a href="#">home</a> <a href="#">about</a> <a href="#">services</a> <a href="#">contact</a> Aquí está la CSS para la renovación menulinks artículo: #menulinks a { padding-top:15px; padding-left:15px; padding-right:15px; height:27px; float:left; text-decoration:none; color:#ffffff; font-weight:bold;

30 font-size:14px; margin-top:1px; } Bien, un poco de una explicación para el código de más abajo. Utiliza el relleno para que el texto dentro de la relación centrada en la altura y la propiedad sólo es llenar el área. Cuando se utiliza este en otras plantillas de relleno superior y la altura de propiedad van a ser las propiedades que usted necesita para mantener el cambio hasta que se vea bien. He utilizado flotar: izquierda, de modo que los elementos que se muestran junto a la otra.he cambiado el color a blanco (FFFFFF), el tipo de letra negrita y el tamaño de 14px. También he añadido un margen superior de 1px porque, por alguna razón, parecía fuera de lugar sin él, el margen superior de propiedad sólo empujó el elemento hacia abajo o hacia arriba si usa un valor negativo. Para añadir el efecto hover todo lo que tienes que hacer es esto: #menulinks a:hover { # menulinks a: hover ( background-image:url(images/menuhover.png); background-imagen: url (images / menuhover.png); } ) Simple! Simple! Ahora debería tener algo como esto: Unhovered Hovered Paso 6 Por último, es todo lo que queda por hacer es pasar los enlaces a la derecha un poco, como usted puede ver en las imágenes por encima de los enlaces que salen del borde. Para mover los enlaces a la derecha vaya a la style.css y encontrar el archivo # menulinks propiedad y cambiarlo por: #menulinks { # (menulinks width:930px; ancho: 930px; padding-left:30px; height:44px;

31 background-image:url(images/menulinks.png); clear:both; } He añadido un relleno izquierda atributo con un valor de 30px y con el fin de no estropear su diseño, asegúrese de quitar la misma cantidad de la anchura atributo de relleno porque se añade a la anchura. Resultados Eso es todo, ahora debería tener algo parecido a éste: Puede descargar todos los archivos haciendo clic aquí. Por último, quisiera dar las gracias a todos ustedes por seguir este tutorial y espero que le ha ayudado considerablemente en el aprendizaje de cómo diseñar un sitio web en el Gimp y luego el código mismo. Usted podrá ahora llegar a más sitios web que utilizan las mismas técnicas utilizadas en este tutorial y mantener un ojo en tutoriales de ayuda para los desarrolladores de técnicas más avanzadas tales como efectos hover agradable. Puede suscribirse a mi feed RSS aquí.

(*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío.

(*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío. (*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío. (*) Crear el archivo index.htm (*) Añadir la estructura básica

Más detalles

C/ Juan Ramón Jiménez, 15 28036 Madrid info@asat.es www.asat.es 1

C/ Juan Ramón Jiménez, 15 28036 Madrid info@asat.es www.asat.es 1 1 MANUAL DE IDENTIDAD VISUAL CORPORATIVA Asociación Sectorial de Estudiantes de Ingeniería de Edificación Índice DEFINICIÓN DE LA MARCA... 3 FORMATO DE LA MARCA... 3 COLORES CORPORATIVOS DE LA MARCA...

Más detalles

RESPONSIVE DESIGN PARTE 1 RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS. MARCOS HEIZ @msh_cd. HERNÁN NADOTTI @Cuquinho10

RESPONSIVE DESIGN PARTE 1 RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS. MARCOS HEIZ @msh_cd. HERNÁN NADOTTI @Cuquinho10 RESPONSIVE DESIGN RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS PARTE 1 MARCOS HEIZ @msh_cd HERNÁN NADOTTI @Cuquinho10 Qué es el diseño responsive? Qué es el responsive design? Es una tecnica

Más detalles

Manual de Identidad Corporativa PARLAMENTO DEL MERCOSUR / PARLAMENTO DO MERCOSUL. Año 2010. Manual de Identidad Corporativa Parlamento del MERCOSUR

Manual de Identidad Corporativa PARLAMENTO DEL MERCOSUR / PARLAMENTO DO MERCOSUL. Año 2010. Manual de Identidad Corporativa Parlamento del MERCOSUR Manual de Identidad Corporativa PARLAMENTO DEL MERCOSUR / PARLAMENTO DO MERCOSUL Año 2010 Manual de Identidad Corporativa PARLAMENTO DEL MERCOSUR / PARLAMENTO DO MERCOSUL Año 2010 Diseño del Manual: Kairos

Más detalles

RESPONSIVE DESIGN PARTE 1 RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS. MARCOS HEIZ @msh_cd. HERNÁN NADOTTI @Cuquinho10

RESPONSIVE DESIGN PARTE 1 RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS. MARCOS HEIZ @msh_cd. HERNÁN NADOTTI @Cuquinho10 RESPONSIVE DESIGN RESPONDIENDO A DISPOSITIVOS, RESOLUCIONES Y EXPERIENCIAS PARTE 1 MARCOS HEIZ @msh_cd HERNÁN NADOTTI @Cuquinho10 Qué es el diseño responsive? Qué es el responsive design? Es una tecnica

Más detalles

Manual de Identidad Corporativa

Manual de Identidad Corporativa Manual de Identidad Corporativa blackbean studio Contenidos 8 Intro 11 Identificadores Básicos 25 Papelería 33 Aplicaciones 43 Medios de Comunicación 12 Desarrollo de la Marca 26 Papel carta y sobres

Más detalles

Pg. 2 Pg. 3. En el mundo las cosas, las personas y las instituciones cambian, en los últimos 30 años nuestras vidas se han visto revolucionadas

Pg. 2 Pg. 3. En el mundo las cosas, las personas y las instituciones cambian, en los últimos 30 años nuestras vidas se han visto revolucionadas Reseña Histórica Presentación Uniagraria Marca Uniagraria UNIAGRARIA, fue creada mediante Acta de Constitución firmada el 8 de marzo de 1985 por el grupo de GESTORES que integra la Asamblea General: Alfredo

Más detalles

EMAKUMEEN AURKAKO INDARKERIARI EZ NO A LA VIOLENCIA CONTRA LAS MUJERES IDENTITATE GRAFIKOAREN ESKULIBURUA MANUAL DE IDENTIDAD GRÁFICA

EMAKUMEEN AURKAKO INDARKERIARI EZ NO A LA VIOLENCIA CONTRA LAS MUJERES IDENTITATE GRAFIKOAREN ESKULIBURUA MANUAL DE IDENTIDAD GRÁFICA IDENTITATE GRAFIKOAREN ESKULIBURUA MANUAL DE IDENTIDAD GRÁFICA Indice 4.- El Punto Lila 5.- Símbolo 6.- Lema 7.- Punto Lila + Lema 8.- Color 9.- Tipografía 10.- Usos crómaticos 11.- Tamaños mínimos 12.-

Más detalles

Museo Interactivo da Historia de Lugo. Manual de utilización de la identidad corporativa del Museo Interactivo da Historia de Lugo

Museo Interactivo da Historia de Lugo. Manual de utilización de la identidad corporativa del Museo Interactivo da Historia de Lugo Manual de utilización de la identidad corporativa del _01 LOGOTIPO El logotipo representa gráficamente al Este logotipo se crea mediante circunferencias que expresan dinamismo y forman un conjunto orgánico.

Más detalles

MANUAL DE MARCA ÍNDICE INTRODUCCIÓN 1. ELEMENTOS BÁSICOS DE LA MARCA 1.1. LA MARCA 1.2. EL CLAIM 1.3. EL LOGOTIPO 1.4. VERSIÓN NEGATIVA EN COLOR 1.5. LOGOTIPO EN DOS Y UNA TINTA 1.6. VERSIÓN MONOCROMÁTICA

Más detalles

Construcción de la marca

Construcción de la marca Manual de Imagen La marca está compuesta por cuatro elementos: El símbolo A (de ASDE) ocupa una superficie del 45% del total de la marca, y la inclinación hacia arriba de éste es siempre de 17 grados con

Más detalles

Manual de Normas Gráficas. Programa Revive Barrios

Manual de Normas Gráficas. Programa Revive Barrios Manual de Normas Gráficas Programa Revive Barrios 2016 Introducción Definición: El Programa para la Revitalización de Barrios e Infraestructura Patrimonial Emblemática PRBIPE, que viene a dar cumplimiento

Más detalles

De XML a PDF Tipografía con TEX

De XML a PDF Tipografía con TEX De XML a PDF Tipografía con TEX Javier Bezos CervanTEX Grupo de Usuarios de TEX Hispanohablantes De XML a PDF p.1/23 Introducción Palabra clave: tipografía. Problemas presentes: Énfasis en la maqueta y

Más detalles

QUIÉNES SOMOS QUIÉNES SOMOS PRODUCTOS Y SERVICIOS PROYECTOS ACTUALES GALERÍA

QUIÉNES SOMOS QUIÉNES SOMOS PRODUCTOS Y SERVICIOS PROYECTOS ACTUALES GALERÍA QUIÉNES SOMOS Somos una empresa dedicada a la comercialización de productos geosintéticos; innovadoras en el uso de tecnologías y tendencias de construcción. Aplicamos el principio de servicio total al

Más detalles

Manual de marca 08/2015

Manual de marca 08/2015 Contenido 1. Identidad Nuestra esencia Nuestros valores de marca 2. Nuestra marca Concepto del logotipo Construcción 3. Aplicaciones Color - Versión color - Versión fondos oscuros - Versión escala de grises

Más detalles

Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:

Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas: Mi primera web... El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks

Más detalles

MANUAL DE IDENTIDAD CORPORATIVA ZARATE

MANUAL DE IDENTIDAD CORPORATIVA ZARATE MANUAL DE IDENTIDAD CORPORATIVA EMPRESA DE CAPITALES ARGENTINOS ÍNDICE 01 02 NORMATIVA IDENTIFICACIÓN Logo Logo invertido Versiones Logo versión Asociación de Propietarios Área de reserva Colores Tamaño

Más detalles

Manual de Imagen. ASDE Exploradores de Madrid

Manual de Imagen. ASDE Exploradores de Madrid Manual de Imagen ASDE Exploradores de Madrid Manual de Imagen Agosto 2009 - Segunda Edición ASDE Exploradores de Madrid Hortaleza 19, 1º Izq. 28004 - Madrid (España) Tel: (+34) 91.521.91.58 Fax: (+34)

Más detalles

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3

Más detalles

MANUAL DE IMAGEN CORPORATIVA. Asociación Andaluza por la Solidaridad y la Paz

MANUAL DE IMAGEN CORPORATIVA. Asociación Andaluza por la Solidaridad y la Paz MANUAL DE IMAGEN CORPORATIVA 0 LOGOTIPO El logotipo consta de dos elementos diferenciados y complementarios a la vez: - Imagotipo compuesto por: un riángulo verde calado por las iniciales de la Asociación

Más detalles

FENÓMENOS METEOROLÓGICOS ADVERSOS CON GRAVES CONSECUENCIAS HECHOS AISLADOS?

FENÓMENOS METEOROLÓGICOS ADVERSOS CON GRAVES CONSECUENCIAS HECHOS AISLADOS? FENÓMENOS METEOROLÓGICOS ADVERSOS CON GRAVES CONSECUENCIAS HECHOS AISLADOS? PEDRO DORTA ANTEQUERA CÁTEDRA DE REDUCCIÓN DE RIESGOS DE DESASTRES. CIUDADES RESILIENTES. ULL 1 El miércoles 18 de junio de 1851

Más detalles

GUÍA SISTEMA GRÁFICO PRESIDENCIA DE LA REPÚBLICA

GUÍA SISTEMA GRÁFICO PRESIDENCIA DE LA REPÚBLICA Bogotá D.C., Febrero 16 de 2015 TABLA DE CONTENIDO 1 OBJETIVO 2 ALCANCE 3 TÉRMINOS Y DEFINICIONES 4 CUERPO DEL DOCUMENTO 5 MARCO LEGAL 6 RESPONSABLE DEL DOCUMENTO 1. OBJETIVO Impartir directrices de identidad

Más detalles

Dinámicas de Grupo. FAVA - Formación en Ambientes Virtuales de Aprendizaje. SENA - Servicio Nacional de Aprendizaje GUIA DE TURISMO COLOMBIA

Dinámicas de Grupo. FAVA - Formación en Ambientes Virtuales de Aprendizaje. SENA - Servicio Nacional de Aprendizaje GUIA DE TURISMO COLOMBIA GUIA DE Dinámicas de Grupo COLOMBIA TURISMO INTRODUCCIÓN Las dinámicas de grupo son acciones o tareas que permiten a un grupo con características similares interactuar de forma agradable con el fin de

Más detalles

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho

Más detalles

Directrices Sobre la Marca

Directrices Sobre la Marca Directrices Sobre la Marca CONEXPO Latin America, Inc. 2013 10-1657 (Rev-1) 08.2010 1 ENTENDIENDO LA MARCA CONEXPO Latin America AEM es un referente mundial en la organización y la producción de exposiciones

Más detalles

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3 ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una

Más detalles

Guía de estilo de imagen de marca 2015

Guía de estilo de imagen de marca 2015 Guía de estilo de imagen de marca 2015 ES Fotografía: David Lliff Grupo PPE en el Parlamento Europeo c/ Wiertz, 60 1047 Bruselas (Bélgica) Redactor Índice Introducción...2 Coherencia gráfica...2 Una identidad

Más detalles

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual.

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Paso 1 de 13 En este tutorial vamos a crear un logotipo basado en un texto al que aplicaremos algunos efectos utilizando filtros

Más detalles

NATURALMENTE. ilex. Ilex crenata Dark Green Ilex crenata Blondie

NATURALMENTE. ilex. Ilex crenata Dark Green Ilex crenata Blondie NATURALMENTE ilex Ilex crenata Dark Green Ilex crenata Blondie Índice L L orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

Más detalles

1. Duplicar la capa de fondo:

1. Duplicar la capa de fondo: 1. Duplicar la capa de fondo: Con nuestra foto recién abierta en el Photoshop, lo primero que tenemos que hacer es hacer una copia de nuestra capa de fondo, que es la capa que contiene nuestra foto y en

Más detalles

ANUNCIA EN SODEXO CLUB

ANUNCIA EN SODEXO CLUB Permite que los clientes vean tu empresa mientras buscan lo que ofrece Sodexo Club. Tenemos diversas opciones para anunciar dentro de nuestra página web. Además, sólo se le cobrará cuando hagan clic en

Más detalles

Herramientas de Google

Herramientas de Google 1 Índice de contenido Licencia y condiciones de uso...3 Introducción...4 Crear sitio...5 Acceso a Google Sites...5 Registro del sitio...6 La página de inicio...8 Añadir páginas...9 Añadir páginas...9 Página

Más detalles

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas. 3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc

Más detalles

COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS.

COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS. 2011 2012 COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS. WWW.FAUBELL.COM vicente@faubell.com VÍNCULOS: Antes de proseguir hemos de repasar el concepto vínculo ya que vamos a utilizarlo mucho

Más detalles

Manual de la marca UGT - Federaciones. Versión 2.0 abril 2008

Manual de la marca UGT - Federaciones. Versión 2.0 abril 2008 Manual de la marca UGT - Federaciones Versión 2.0 abril 2008 Manual de la marca UGT - Federaciones Versión 2.0 abril 2008 Manual de la marca UGT - Federaciones Este manual se realiza con el objeto de

Más detalles

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas

Más detalles

Presentación de la nueva imagen corporativa

Presentación de la nueva imagen corporativa Presentación de la nueva imagen corporativa 01 Análisis de la situación 02 Homologación logotipo 03 Identidad corporativa del club al ámbito de la comunicación: 03.1 Simplificación del escudo 03.2 Revisión

Más detalles

Sistemas de Control y Vending www.scv.es. La empresa

Sistemas de Control y Vending www.scv.es. La empresa La empresa La empresa SCV es una empresa de ingeniería especializada en diversas áreas relacionadas con los sistemas de control automático y la informática orientada al control industrial, como son: El

Más detalles

Tutorial de Dreamweaver MX 2004

Tutorial de Dreamweaver MX 2004 1 Tutorial de Dreamweaver MX 2004 Dreamweaver MX 2004 es una aplicación para el diseño de espacios web que incorpora múltiples posibilidades de edición. 1. Configurar un sitio local El método más común

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB CREACION DE PÁGINAS WEB CREAR LO QUE LLAMAREMOS SITIO WEB LOCAL En el escritorio del ordenador crear una carpeta llamada sitio web que sea donde guardes todos los archivos Dentro de ella guardaremos todos

Más detalles

Pinchamos sobre la capa deseada y la modificamos. Seleccionamos Imagen > Ajustes y probamos todos.

Pinchamos sobre la capa deseada y la modificamos. Seleccionamos Imagen > Ajustes y probamos todos. 1 ADOBE PHOTOSHOP Para abrir o crear una imagen realice una de las acciones siguientes: Seleccione Archivo > Abrir, busque y seleccione el archivo de imagen que desea. Seleccione Archivo > Nuevo. Escriba

Más detalles

Creando una webquests

Creando una webquests Creando una webquests 1. LO PRIMERO EL PROGRAMA Para crear paginas web necesitamos el software apropiado. Hay muchas formas y programas para hacerlo, pero por su facilidad de uso y por ser software libre

Más detalles

Creación, configuración, formato y visualización de una presentación en Power Point

Creación, configuración, formato y visualización de una presentación en Power Point Módulo 3 Herramientas de Cómputo Creación, configuración, formato y visualización de una presentación en Power Point Cómo crear una diapositiva nueva? Para crear una diapositiva nueva tienes que ir al

Más detalles

LOS ELEMENTOS DE UN ESPACIO WEB:

LOS ELEMENTOS DE UN ESPACIO WEB: Ardora permite al docente crear un lugar en el que integrar y organizar cualquiera de las distintas páginas o grupo de páginas que crea el programa: actividades interactivas, paquetes de actividades, páginas

Más detalles

1. UNA PÁGINA WEB SENCILLA

1. UNA PÁGINA WEB SENCILLA { 1 } Índice 1. UNA PÁGINA WEB SENCILLA... 3 2. PROPIEDADES DE LA PÁGINA... 4 3. COLORES EN UNA PÁGINA WEB... 5 4. LÍNEAS HORIZONTALES... 6 5. AÑADIR UNA IMAGEN... 7 6. USAR ENLACES... 8 7. INSERTAR TABLAS...

Más detalles

Operaciones con el diseño

Operaciones con el diseño Operaciones con el diseño Bienvenido a CorelDRAW, un completo programa de dibujo y diseño gráfico vectorial concebido para los profesionales del diseño gráfico. En este tutorial, creará un póster para

Más detalles

Tema 8. Creación y diseño de un sitio web

Tema 8. Creación y diseño de un sitio web 1. Interfaz de Dreamweaver MX El entorno de trabajo de Dreamweaver está compuesto por una serie de ventanas, paneles y otros elementos configurables por el usuario. En la Figura 1 podemos ver una posible

Más detalles

libelfoo yolllen LA REPÚBLICA.

libelfoo yolllen LA REPÚBLICA. República de Colombia PRESIDENCIA libelfoo yolllen PARA: MINISTERIOS, DIRECTORES DE DEPARTAMENTO ADMINISTRATIVO, SUPERINTEN DIRECTORES UNIDADES ADMINISTRATIVAS, GERENTES Y PRESIDENTE ENTIDADES DESCENTRALIZADAS

Más detalles

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas

Más detalles

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. IMÁGENES Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Existen una serie de formatos de imagen más

Más detalles

Autenticación de usuarios y Sesiones en PHP

Autenticación de usuarios y Sesiones en PHP Tema: Autenticación de usuarios y Sesiones en PHP Facultad: Ingeniería Escuela: Computación Asignatura: PERL/PHP Guia 5 pag.1 I. Objetivos Identificar las formas en que se pueden desarrollar aplicaciones

Más detalles

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH Jornadas de INCLUSION DIGITAL a través de las TIC ORGANIZAN: CAPACITA: CLAEH Con Google Docs puedes crear, compartir y editar documentos online con facilidad. A continuación te indicamos algunas acciones

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

Contenido. Manual de Microsoft Word 2010 Intermedio-Avanzado

Contenido. Manual de Microsoft Word 2010 Intermedio-Avanzado Contenido Saltos de Página.... 1 Listas y esquemas numerados... 1 Números de página.... 2 Encabezados y pies de página.... 3 Tabulaciones... 4 Crear tablas... 5 Formulas.... 6 Plantillas.... 6 Columnas

Más detalles

1. Tutorial Página Personal... 2

1. Tutorial Página Personal... 2 Índice 1. Tutorial Página Personal... 2 1.1. Introducción... 2 1.2. Tutorial de edición de páginas web con Kompozer... 2 1.2.1. Descarga del programa... 2 1.2.2. Edición de la página web... 4 1.3. Como

Más detalles

Preparando las imágenes para la maquetación con GIMP

Preparando las imágenes para la maquetación con GIMP Preparando las imágenes para la maquetación con GIMP Cuando maquetamos una página web la idea principal es hacerla lo más parecida al diseño original, y que además todas las imágenes y demás archivos utilizados

Más detalles

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver

Más detalles

Pasos a seguir para la realización del ejercicio final

Pasos a seguir para la realización del ejercicio final Pasos a seguir para la realización del ejercicio final 1 - Crear Página con WordArt e insertar el texto con un tipo de letra similar y los formatos adecuados. Activar la barra de herramientas de dibujo

Más detalles

Manual de NVU Capítulo 5: Las hojas de estilo

Manual de NVU Capítulo 5: Las hojas de estilo Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de

Más detalles

100 EJERCICIOS DE MICROSOFT WORD

100 EJERCICIOS DE MICROSOFT WORD 100 EJERCICIOS DE MICROSOFT WORD 1. COMO SE ACTIVAN Y SE DESACTIVAN LAS BARRAS DE HERRAMIENTAS Clic derecho en la Barra de Menú Clic en el nombre de la barra que desee activar o desactivar. Clic en el

Más detalles

TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER

TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER Existen muchos proveedores de servicios para crear un blog. En nuestro caso se ha decidido crear uno en Blogger, que es, a su vez, donde muchas

Más detalles

Gimp - Segunda parte. En qué formatos puede grabar GIMP mi imagen? Guardar una imagen

Gimp - Segunda parte. En qué formatos puede grabar GIMP mi imagen? Guardar una imagen Gimp - Segunda parte En qué formatos puede grabar GIMP mi imagen? Gimp puede guardar en su propio formato que es.xcf y mantendrá de esta forma las capas que hayamos añadido. Además puede exportar la imagen

Más detalles

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0 Manual de gestión de contenidos web en entorno Drupal Versión sitio maestro para servicios 1.0 Contenido Gestión de contenidos... 5 Crear contenidos... 5 Tipos de contenido... 5 Página básica o basic

Más detalles

La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.

La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición. Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en

Más detalles

La única regla que debe de tener presente siempre, es que cada etiqueta que abra debe de cerrarla en el mismo orden < /etiqueta cerrada>.

La única regla que debe de tener presente siempre, es que cada etiqueta que abra <etiqueta> debe de cerrarla en el mismo orden < /etiqueta cerrada>. Antes de comenzar, si algo no está en este manual, utilice google para averiguarlo y acostúmbrese a ello ya que será la mejor herramienta que pueda encontrar. La estructura básica de toda página web es:

Más detalles

Las imágenes de los sitios web deben ser livianas para que las páginas se abran con mayor rapidez.

Las imágenes de los sitios web deben ser livianas para que las páginas se abran con mayor rapidez. PARA QUÉ NECESITAMOS OPTIMIZAR LAS IMÁGENES? Las imágenes de los sitios web deben ser livianas para que las páginas se abran con mayor rapidez. Dos cosas sacan usualmente de las casillas a un usuario de

Más detalles

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página ADMINISTRACIÓN DEL SITIO WEB Todos los jefes de Departamento, coordinadores de proyectos y directivos del Centro somos administradores de la página web. Cada uno tendrá la responsabilidad de administrar

Más detalles

EXCEL. Para comenzar a trabajar abriremos el programa desde su acceso directo correspondiente. Aparecerá la siguiente ventana: Zona de Trabajo

EXCEL. Para comenzar a trabajar abriremos el programa desde su acceso directo correspondiente. Aparecerá la siguiente ventana: Zona de Trabajo EXCEL Microsoft Excel es un programa que permite la manipulación de libros y hojas de cálculo. En Excel, un libro es el archivo en que se trabaja y donde se almacenan los datos. Cada libro puede contener

Más detalles

Taller 1. Creación una Página Web Personal

Taller 1. Creación una Página Web Personal Taller 1 Creación una Página Web Personal El objetivo de este taller es comenzar a trabajar los elementos básicos utilizados en HTML como imágenes, hipervínculos (links), listas, tablas, para crear una

Más detalles

Es una aplicación online gratuita, Esta aplicación permite crear un sitio web o una intranet de una forma tan sencilla como editar un documento

Es una aplicación online gratuita, Esta aplicación permite crear un sitio web o una intranet de una forma tan sencilla como editar un documento Google Sites: Es una aplicación online gratuita, Esta aplicación permite crear un sitio web o una intranet de una forma tan sencilla como editar un documento 1. Registro Previo 1.1- Pantalla de Bienvenida

Más detalles

TEMA 5: HOJAS DE CÁLCULO. Edición de hojas de cálculo con OpenOffice Calc

TEMA 5: HOJAS DE CÁLCULO. Edición de hojas de cálculo con OpenOffice Calc TEMA 5: HOJAS DE CÁLCULO Edición de hojas de cálculo con OpenOffice Calc Qué vamos a ver? Qué es una hoja de cálculo y para qué sirve El entorno de trabajo de OpenOffice Calc Edición básica de hojas de

Más detalles

Manual del Profesor/a Por favor, mándenos sus comentarios, sugerencias y mejoras a vcampos@ciberaula.net

Manual del Profesor/a Por favor, mándenos sus comentarios, sugerencias y mejoras a vcampos@ciberaula.net Manual del Profesor/a Por favor, mándenos sus comentarios, sugerencias y mejoras a vcampos@ciberaula.net Introducción Proyectos es un Sistema de Gestión de Comunidades Virtuales en Web, creado por Quaderns

Más detalles

Tutorial de Wordpress para Editores de Sitios. Autora: Aylín Alvarez Martínez Dpto. Web

Tutorial de Wordpress para Editores de Sitios. Autora: Aylín Alvarez Martínez Dpto. Web Tutorial de Wordpress para Editores de Sitios Autora: Aylín Alvarez Martínez Dpto. Web 2011 ÍNDICE Blog -----------------------------------------------------------------------------------------------------------

Más detalles

Webquest Creator Manual*

Webquest Creator Manual* Tras el registro, si todo es correcto ya estaremos dentro de la aplicación sin necesidad de pasar por el menú Entrar. La siguiente vez que queramos editar o crear una webquest ya si http://www.culturaemprendedora.es/manualwq/wq_manual.htm

Más detalles

Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales.

Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales. Qué es Powerpoint 2010? Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales. El entorno de trabajo En la siguiente imagen

Más detalles

Guía Google Sites. En este tema se desarrolla una guía rápida de uso para editar con Google Sites

Guía Google Sites. En este tema se desarrolla una guía rápida de uso para editar con Google Sites 1. INTRODUCCIÓN Google Sites es una aplicación gratuita que se enmarca dentro de la filosofía Web 2.0. Permite crear el sitio que puede adaptarse a cualquier situación: web personal, informativa, educativa,

Más detalles

Arrancar Word. Clic en inicio Clic en Microsoft Word 2010

Arrancar Word. Clic en inicio Clic en Microsoft Word 2010 Word 2007 Arrancar Word Clic en inicio Clic en Microsoft Word 2010 Nuestro primer documento Tarea 1 Escribiremos nuestros datos: Busca 1º Cambiamos formato de guardado: 3º 2º 4º Guardar un documento Dónde

Más detalles

CÓMO CREAR UNA WEBQUEST Paso a Paso

CÓMO CREAR UNA WEBQUEST Paso a Paso CÓMO CREAR UNA WEBQUEST Paso a Paso 1.- Lo primero que tenemos que hacer es acceder a la página del instituto usando Mozilla (no usar el navegador Firefox que puede dar problemas) URL: www.ieseltablero.org

Más detalles

Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice

Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar ocho procedimientos:

Más detalles

100 EJERCICIOS DE MICROSOFT WORD

100 EJERCICIOS DE MICROSOFT WORD 100 EJERCICIOS DE MICROSOFT WORD 1. como se activan y se desactivan las barras de herramientas Clic derecho en la Barra de Menú Clic en el nombre de la barra que desee activar o desactivar. Clic en el

Más detalles

Espacios web con Ardora José Manuel Bouzán Matanza

Espacios web con Ardora José Manuel Bouzán Matanza Espacios web con Ardora José Manuel Bouzán Matanza Ardora permite al docente crear un lugar en el que integrar y organizar cualquiera de las distintas páginas o grupo de páginas que crea el programa: actividades

Más detalles

Índice. Introducción. Página 2 Empecemos con un ejemplo. Página 3 Crea tu site: Página 3

Índice. Introducción. Página 2 Empecemos con un ejemplo. Página 3 Crea tu site: Página 3 Índice. Introducción. Página 2 Empecemos con un ejemplo. Página 3 Crea tu site: Página 3 Anexo. Guía para desarrollo de programas en HTML y JavaScript. 1. Introducción. En este anexo vamos a escribir un

Más detalles

Diseño de páginas web

Diseño de páginas web Diseño de páginas web Capas. Objetos en movimiento Ricardo Esteban Alonso Creación de capas en la página web Las capas son rectángulos transparentes, donde podemos insertar datos y hacer que éstos aparezcan

Más detalles

Nos dirigimos a la siguiente página web. http://es.openoffice.org/

Nos dirigimos a la siguiente página web. http://es.openoffice.org/ 1. INTRODUCCIÓN A OPENOFFICE IMPRESS 1.1. INTRODUCCIÓN OpenOffice.org es una suite ofimática de software libre y código abierto de distribución gratuita. Está disponible para muchas plataformas: como Microsoft

Más detalles

Creando un Sitio Web personal.

Creando un Sitio Web personal. Creando un Sitio Web personal. FrontPage Express FrontPage Express de Microsoft es un sencillo editor htm 1 l que venía instalado por defecto con Windows 98 o con el Internet Explorer 4 para Windows 95.

Más detalles

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando

Más detalles

Curso POWERPOINT 97. Introducción

Curso POWERPOINT 97. Introducción Curso POWERPOINT 97 Introducción El curso PowerPoint 97 está destinado a aquellos alumnos que necesiten crear presentaciones que informen de la evolución de un proyecto. PowerPoint es un programa de edición

Más detalles

Crear una página Html con el Editor.

Crear una página Html con el Editor. Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante

Más detalles

13.3. Personalización avanzada

13.3. Personalización avanzada 13.3. Personalización avanzada Cómo crear informes mediante Report Builder Un informe es un documento que nos va a mostrar una información. En un informe disponemos de varias secciones. El encabezado de

Más detalles

Kompozer: Crear un banner para la web

Kompozer: Crear un banner para la web Kompozer: Crear un banner para la web En este tutorial vamos a ver cómo crear un banner con Macromedia Flash y luego vamos a insertarlo en la página de inicio de nuestra web. 1.-Abre Macromedia Flash MX

Más detalles

EDITOR MANUAL DE USUARIO:

EDITOR MANUAL DE USUARIO: MANUAL DE USUARIO: EDITOR Sistema drag & drop... 2 1. Gestor de contenidos... 3 2. Editor de estilo... 5 3. Añadir elementos... 6 4. Deshacer/Rehacer... 13 5. Guardar... 13 Al acceder al visualizador del

Más detalles

En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas.

En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas. 1 de 18 Inicio Qué es un foro En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas. En el campus virtual, el foro es una herramienta

Más detalles

Usando SMARTboard Notebook v.10

Usando SMARTboard Notebook v.10 Usando SMARTboard Notebook v.10 Sumario de los elementos claves Orientación: calibrando la pizarra interactiva Encienda el ordenador y el proyector. Hay dos botones en la parte frontal del SMARTboard (al

Más detalles

Manual de NVU Capítulo 2: Elementos básicos de una páginas Web

Manual de NVU Capítulo 2: Elementos básicos de una páginas Web Manual de NVU Capítulo 2: Elementos básicos Pág. 1 Manual de NVU Capítulo 2: Elementos básicos de una páginas Web Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero

Más detalles

Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.

Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas. Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.

Más detalles

Route Rider Community

Route Rider Community Route Rider Community Raúl Garcia Castilla Proyecto final de posgrado Posgrado de Diseño web: usuarios, interfaces y móviles Sergio Schvarstein Liuboschetz 16/06/2015 CAPÍTULO 1: Definición del proyecto

Más detalles

ESCUELA TIC 2.0 MÓDULO 0

ESCUELA TIC 2.0 MÓDULO 0 FORMACIÓN DEL PROFESORADO ESCUELA TIC 2.0 MÓDULO 0 PIZARRA DIGITAL INTERACTIVA SMART BOARD SOFTWARE NOTEBOOK SESIÓN 2 SOFTWARE NOTEBOOK ÍNDICE Acceso al software Notebook...03 Descripción del entorno de

Más detalles

Herramientas para crear páginas.

Herramientas para crear páginas. Herramientas para crear páginas. Herramientas para la creación de páginas Web. Como hemos visto resulta sencillo pero engorroso escribir directamente en HTML. Por ello es más sencillo utilizar un editor

Más detalles

ADMINISTRAR UN BLOG EN BLOGGER

ADMINISTRAR UN BLOG EN BLOGGER ADMINISTRAR UN BLOG EN BLOGGER Para entrar en nuestro Blog vamos a la página principal de Blogger, accedemos a través de nuestra cuenta de Google (correo Gmail) con usuario y contraseña. EL PANEL DE CONTROL

Más detalles