Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:
|
|
|
- Luis Miguel Pérez Hidalgo
- hace 8 años
- Vistas:
Transcripción
1 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 y podrá encontrar un tutorial de como crearlas aqui. El orden de las carpetas es el siguiente: 2 carpetas (css para la hoja de estilo) e( images para las imágenes). Bien, lo primero que haremos es abrir nuestro editor de HTML, en mi caso he utilizado Dreamweaver 8, pero usted puede usar lo que desee. Abrimos un documento nuevo en HTML, para ello vamos a Archivo Nuevo Página Básica HTML o podemos simplemente presionar las teclas Ctrl+N y ahí seleccionamos el documento que se necesite. (Ver imagen) Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas: En vista de Diseño y Código. En vista de Código. Vamos a trabajar de forma que nos sea fácil ver lo que vamos haciendo y para eso seleccionaremos la vista: Diseño y Código. Para eso seleccionamos las pestañas que se pueden ver en la imagen inferior. (Ver imagen)
2 Lo primero que haremos una vez que hayamos finalizado los pasos anteriores es, ponerle el título a nuestra página. Con Dreamweaver eso es muy fácil, solamente tienes que buscar en la parte superior y ahí encontrarás un lugar que dice título y que por defecto nos muestra este texto: Documento sin título. Pues bien, eso lo reemplazamos por el título de nuestra página que en mi caso se llamaría: elavdesigner :!: Tutoriales. Este paso aunque no lo crean es muy importante, créanme cuando les digo que me he encontrado sitios en Internet a los que se le han olvidado ponerle el nombre de la web. Ahora vamos a empezar a trabajar con el código: Nos vamos a la vista de Código y buscamos la etiqueta <body> presionamos Enter y colocamos lo siguiente: <div id=''contenedor''> Qué hicimos aquí? Pues lo que hicimos fué crear una capa llamada contenedor, que no es más que la capa que contendrá las demás subcapas. Lo señalo en rojo porque es muy importante conocer el nombre de las capas para que posteriormente nuestro código CSS funcione. Se podrán dar cuenta de que a medida que vamos escribiendo Dreamweaver nos va mostrando una serie de opciones en un pequeño submenú, hay que tener cuidado, no vaya a ser cosa que cambien la palabra y después nuestro código no funcione. Dentro de esta capa colocaremos otras capas para ir conformando la estructura de nuestro sitio web, el header, el menú de navegación, la capa que contendrá el texto...etc. Y nos quedaría algo como esto: <div id=''contenedor''> <div id=''header''> <div id=''menu''> <div id=''cuerpo''> <div id=''pie''> Si vamos a la vista de Diseño nos podemos encontrar algo como esto: (Ver imagen). Como ven hasta ahora no se ve el diseño real de nuestra página, ya que lo único que hicimos fué crear las capas que contendrán nuestra información, las imágenes y esas cosas. Ahora vamos a crear las capas para el logo, el texto y la sidebar (la cual contendrá un menú a la izquierda del texto). La capa que contendrá el logo, la insertaremos dentro de la capa header y las capa sidebar y texto la insertaremos dentro de la capa contenido que a su vez se encuentra dentro de la capa cuerpo y nos quedaría algo como esto: <div id=''contenedor''> <div id=''header''> <div id=''logo''> <div id=''menu''> <div id=''cuerpo''> <div id=''contenido''>
3 <div id=''sidebar''> <div id=''texto''> <div id=''pie''> Aunque no lo parezca, ya tenemos conformado la estructura de nuestra página web, ahora lo único que nos falta es darle la forma que deseamos. Para ello presionamos Ctrl+N y esta ves seleccionamos Página Básica CSS. Una vez abierto el documento CSS lo guardamos en la carpeta que tenemos destinada para el mismo. Una vez guardado, nos dirigimos al documento HTML y en el caso de Dreamweaver, abrimos el panel CSS, para ello nos dirigimos a Ventana Estilos CSS y se abrirá en la parte derecha una panel. En este panel buscamos en la parte inferior un icono en forma de cadena o eslabón que es el que nos va a adjuntar la hoja de estilos. (Ver imagen).
4 Una vez que lo presionamos sale algo como esto: (Ver imagen). Como pueden ver nos salen varias opciones, lo primero que vamos a hacer es presionar el botón que dice: Examinar, para buscar la carpeta en dónde se encontrará nuestra hoja de estilo o CSS. Una vez que la seleccionemos no tenemos que seleccionar más nada y damos clic en Aceptar. Automáticamente Dreamweaver inserta entre las etiquetas <header></header> el siguiente código: <link href="css/estilo.css" rel="stylesheet" type="text/css" /> Lo que nos indica que ya está vinculada la página en CSS a la página en HTML. Guardamos el documento HTML y nos vamos a trabajar en el documento CSS. Y ahora empieza la diversión. Lo primero que haremos es ponerle las propiedades al body, o sea, a toda la página: body{ background-color:#f2f2f2; background-image:url(../images/fondo_body.png); background-repeat:repeat-x; font-family:verdana, Arial, Helvetica, sans-serif; font-size:12px; Aquí lo que hicimos fué:
5 1. Con background-color, le asignamos un color de fondo a toda la página web. 2. Con background-image, le ponemos a la página web un imagen de fondo (En caso de que no pueda ser mostrada no hay problema, ya que anteriormente le asignamos un color al fondo del sitio.) 3. Con la propiedad background-repeat:repeat-x, le decimos a la imagen que solamente se muestre de forma horizontal (Si no ponemos esta propiedad la imagen se repetirá por todo el fondo de la página) 4. Con la propiedad font-family, establecemos un tipo de fuente para toda la página web, en este caso, adoptara el tipo de fuente Verdana. 5. Y por último con font-size le ponemos un tamaño específico a toda la tipografía en la página web. A no ser que usted posteriormente especifique otra cosa, todo el contenido de la página adoptará estas propiedades, o sea, el tamaño de la fuente, el tipo de fuente... Ahora vamos a darle la propiedad a la capa contenedor. contenedor{ width: 700px; margin:auto; background-color: #F2F2F2; Que hicimos aquí? Fácil: 1. Con la propiedad width le asignamos el ancho que tendrá el contenedor, que en este caso será 700 píxeles. 2. Con la propiedad margin:auto; la capa contenedor se va a centrar en el medio del navegador. 3. Y con background-color, le ponemos un color de fondo. Ahora le vamos a poner la propiedades a la capa header: #header{ width:700px; height:100px; background-color:#f2f2f2; background-image:url(../images/fondo.jpg); border-bottom:3px solid #990000; Qué hicimos aquí? 1. La propiedad width ya la conocemos, ahora con la propiedad height, le asigno el alto a la capa (100 pixeles). Por qué? Porque la imagen que diseñé para el header tiene estas medidas (700px de ancho por 100px de alto). 2. La propiedad background-image también la conocemos, y con la propiedad borderbottom le asignamos un borde inferior de 3px sólido y le ponemos un color. Ahora vamos a colocarle las propiedades a la capa logo: #logo{ float:left; width:170px; margin-left:5px; margin-right:auto; A la capa logo le asignamos las siguientes propiedades: 1. Float:left, para flotar la capa hacia la izquierda de nuestro navegador. Como dentro de la capa header, se encuentra la capa logo y la capa menu, al flotar la capa logo a la izquierda, automáticamente la capa menu, que estaba debajo, se coloca a su derecha. 2. Margin-left y margin-right para establecer el margen izquierdo y derecho
6 respectivamente. En este caso por la izquierda va a tener un margen de 5px y por la derecha adoptará un margen automático. Ahora le toca el turno a la capa menu y aquí hay que aclarar algo. Para el menú he utilizado las listas desordenadas las cuales se representan con la etiqueta ul, pero todavía no hemos puesto el menú en el documento HTML, por lo tanto, vamos a abrirlo y colocamos lo siguiente dentro de la capa menu. <ul> <li><a href="#l">home</a></li> <li><a href="#">portafolio</a></li> <li><a href="#">artículos</a></li> <li><a href="#">tutoriales</a></li> <li><a href="#">contacto</a></li> </ul> De forma que nos quedaría algo como esto: <div id=''contenedor''> <div id=''header''> <div id=''logo''> <div id=''menu''> <ul> <li><a href="#l">home</a></li> <li><a href="#">portafolio</a></li> <li><a href="#">artículos</a></li> <li><a href="#">tutoriales</a></li> <li><a href="#">contacto</a></li> </ul> <div id=''cuerpo''> <div id=''contenido''> <div id=''sidebar''> <div id=''texto''> <div id=''pie''> Ahora vamos al documento CSS y ponemos lo siguiente: #menu{ float:right; width:500px; text-align:right; padding:28px 0px 28px 0px; margin-left:auto; margin-right:5px; font-weight:bold; Aquí lo que hice fue lo siguiente: 1. Floté la capa menu a la derecha y le asigné un ancho de 500px. 2. El texto de la capa menú lo coloco hacia la derecha con la propiedad text-align:right. 3. Ahora le asigno un relleno de 28 pixeles por arriba y por abajo (top y bottom) para que
7 el texto del menu, o sea para que los botones se coloquen a la mitad de header. 4. La propiedad margin ya la conocemos. 5. Y por último con font-weight hago que el texto adopte un estilo como en negrita y de apariencia fuerte. Ahora vamos a trabajar con la lista. Por defecto al insertar una lista esta adquiere esta forma: (Ver imagen) Y como podemos ver de esta forma acabaría con nuestro diseño. Para ello vamos a hacer lo siguiente, insertamos en nuestro código CSS esto: #menu ul { padding:0px; margin:0px; list-style:none; Al poner las propiedades de relleno y margen en 0px y quitarle los punticos al lado del texto con list-style:none, nos viene quedando algo com esto: Bien, pero todavía no es lo que queremos, porque el diseño de la página lleva un menú horizontal, no vertical. Para eso, ahora vamos a trabajar con la etiqueta <li> y colocamos esto en el código CSS: #menu li{ display:inline;
8 De esta forma, nuestra lista quedará de forma horizontal como se puede ver en la web del ejemplo. (Ver imagen) Pero todavía no ha terminado la cosa, si previsualizamos la web hasta el momento nos podemos dar cuenta de que al menu le falta la imagen del fondo, y el efecto rollover. Bien, para eso trabajaremos con la etiqueta <a> y pondremos esto en el CSS: #menu li a{ color:#666666; background-image:url(../images/menu.jpg); background-position:top; padding:18px 18px 18px 18px; text-decoration:none; Como pueden ver ahora le asignamos las propiedades a la etiqueta <a>, la cual modificará los vínculos que están dentro de la lista de la capa menú en su estado de reposo. 1. Le ponemos un color al texto con la propiedad color. 2. Le colocamos una imagen de fondo al vínculo y con la propiedad background-top, mostramos la parte superior de la imagen de fondo. 3. Le asignamos un relleno, para separar cada vínculo 18px entre ellos con la propiedad padding que como pueden ver tiene los valores 18px 18px 18px 18px, (Esto viene siendo lo mismo que: padding-top:18px padding-right:18px padding-bottom:18px padding-left:18px) es a lo que comunmente se le llama Hacks. 4. Y por último le quitamos la raya que sale debajo del texto con la propiedad textdecoration:none. Ya va cogiendo forma la cosa, pero falta el efecto de rollover (cuando pasamos el puntero del mouse sobre el vínculo) por lo que pondremos esto: #menu li a:hover{ color:#ffffff; background-image:url(../images/menu.jpg); background-position:bottom; padding:18px 18px 18px 18px; text-decoration:none; Aquí hacemos lo mismo que en el paso anterior pero hay una pequeña diferencia, en este caso la propiedad background-position: bottom, nos va a mostrar la parte de abajo de la imagen de fondo. Este efecto es muy recomendable ya que es muy limpio al usarse una sola imagen, para crear esta imagen hay disponible un tutorial con todos los pasos aqui. Para completar el header y ver como va quedando, vamos al documento en HTML y buscamos la capa logo, en la vista de código damos un clic dentro de la capa y vamos a Insertar Imagen y ahí seleccionamos nuestro logo.
9 Guardamos el documento y en Dreaweaver presionamos F12 para previsualizar la web en nuestro navegador por defecto. Ahora vamos para el contenido y el menú de la izquierda. Primero le asignamos las propiedades a la capa cuerpo, que contiene a la capa contenido. #cuerpo{ width:700px; background-color:#f2f2f2; Las propiedades que le asignamos, ya la conocemos, ancho y color de fondo. Ahora vamos para la capa contenido: #contenido{ width:690px; text-align:justify; background-color:#f2f2f2; En este caso todo el texto que se encuentre dentro de la capa contenido, estará justificado con la propiedad text-align: justify. Uno de losproblemas que presentan los diseñadores al trabajar con CSS es el trabajo con los menúes. Ahora vamos a diseñar un menú vereticla sumamente sencillo dentro de la capa left: Primero le asignamos las propiedades generales a la capa: #left{ width:200px; float:left; margin-left:0px; margin-right:auto; La flotamos a la izquierda para que la capa texto se coloque a la derecha. Y ajustamos le margen según nuestras necesidades. Ahora vamos a trabajar con la lista. Primero abriremos el documento HTML y le insertaremos el siguiente código dentro de la capa left: <ul> <li><a href="index.html">tutoriales</a></li> <li><a href="#">html + CSS </a></li> <li><a href="#">flash</a></li> <li><a href="#">fireworks</a></li> <li><a href="../pages/contacto.html">contacto</a></li> </ul> Y colocamos esto en el CSS: #left ul{ list-style:none; width:200px; margin: 0 0 0px 0; padding:0; #left li{ margin-bottom:2px;
10 #left li a{ height:20px; text-decoration:none; color:#666666; display:block; padding: 6px 0px 0px 10px; background-color:#ffffff; border-left:3px solid #333333; #left li a:hover { height:20px; text-decoration:none; color:#990000; display:block; padding: 6px 0px 0px 10px; background-color:#cccccc; border-left:3px solid #990000; Aquí sucede lo mismo que con el menú del header pero hay unos ligeros cambios. 1. A la etiqueta <li> le asignamos la propiedad margin-bottom: 2px, esto hará que lo que se encuentre debajo de la lista se separe 2px de la misma. 2. Se le asigna a la etiqueta <a> la propiedad height:20px. Por qué? Si usted no pone esta propiedad, al visualizar la página web en Firefox no tendrá problemas, pero si lo hace con Internet Explorer, le insertará entre cada vínculo un espacio en blanco que podría arruinar el diseño. 3. También se la asigna la propiedad display:block. Para qué? Cuando le ponemos un background al estado de rollover del botón, y no le ponemos esta propiedad, solamente el color de fondo lo tomará el texto, para que quede un poco más bonito, se le pone esta propiedad y entonces el color de fondo lo toma toda las lista. (Ver imagen) 4. Para separar un poco el botón por la parte superior se le asigna la propiedad pading:6px. 5. Y por último le agregamos un borde en la parte izquierda para que se vea un poco más bonito el menú. Ahora vamos para la capa que contiene el texto:
11 #right{ float:right; width:480px; margin-left:10px;; margin-right:0px; Las propiedades que se le asignaron a esta capa ya las conocemos. Así que no será necesartio explicar que se hizo. Y por último vamos al footer o pie de página: #pie{ background-color:#f2f2f2; background-image:url(../images/background.jpg); background-position:center; text-align:center; padding:10px 0px 0px 0px; margin:0px; width:700px; height:20px; clear:both; #pie a{ color:#666666; text-decoration:underline; #pie a:hover{ color:#666666; text-decoration:none; El footer tiene algunas propiedades que no hemos visto, por ejemplo clear:both. Al establecer esta propiedad a ambos lados de la capa pie no se colocará nada, osea que si había algo a su lado, pasará para abajo, pero nunca a su lado derecho o izquierdo. Y bueno hasta aquí este tutorial, espero que les haya servido. Por favor cualquier duda o sugerencia puede hacérmela llegar mediante este formulario. Este tutorial fué realizado por:
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
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
La ventana de Microsoft Excel
Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft
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
MANUAL BÁSICO DE WRITER
MANUAL BÁSICO DE WRITER Los contenidos que vamos a tratar en este pequeño manual son los siguientes: 1. 2. 3. 4. 5. 6. 7. 8. Qué es OpenOffice y qué es Writer? Cómo accedemos a Writer? Principales opciones
COMO HACER UN CUMENTO DE WORD PARA TRABAJOS LARES
COMO HACER UN CUMENTO DE WORD PARA TRABAJOS LARES Computación Básica Veracruz: di@uv.mx Se describe como hacer una plantilla de un Documento de Word que ne: Portada, Hojas Pares e Impares, Tablas de Contenido,
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
Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS
49 1.7 Hojas de estilo CSS 50 1.7 Hojas de estilo CSS 1.7.1 Qué es una hoja de estilo? Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla
Manual de Front Page 2003
Manual de Front Page 2003 FREDDY OSWALDO OVALLES PABÓN Tutor Virtual CEV SENA NDS Guía Rápida para el Desarrollo de un Archivo de paquete o Material en Línea en el Área de Contenido de Materiales del Curso
Í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
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.
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
COMO CREAR UN ÁLBUM DE FOTOGRAFÍAS EN MICROSOFT OFFICE POWERPOINT?
COMO CREAR UN ÁLBUM DE FOTOGRAFÍAS EN MICROSOFT OFFICE POWERPOINT? Para crear tu propio álbum de fotografías, el cual contenga las fotos que tú quieras, con música de fondo, con un video que te identifique
Tutorial de Introducción a la Informática Tema 0 Windows. Windows. 1. Objetivos
1. Objetivos Este tema de introducción es el primero que debe seguir un alumno para asegurar que conoce los principios básicos de informática, como el manejo elemental del ratón y el teclado para gestionar
Combinar comentarios y cambios de varios documentos en un documento
Combinar comentarios y cambios de varios documentos en un documento Si envía un documento a varios revisores para que lo revisen y cada uno de ellos devuelve el documento, puede combinar los documentos
Microsoft Power Point
Actividad Nº1 Microsoft Power Point Qué es Power Point? Power Point es un programa que permite hacer presentaciones mediante diapositivas en las cuales puedes poner texto e imágenes, también efectos de
CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B)
APRENDERAPROGRAMAR.COM CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B) Sección: Cursos Categoría: Tutorial básico del programador web:
Estructurar la información dentro del ordenador:
Estructurar la información dentro del ordenador: Aprender a estructurar la información dentro del ordenador, para facilitar su manejo y búsqueda. Las carpetas se utilizan para clasificar los documentos
MANUAL DE USO http://www.arsliber.com/ Octubre 2011. CLIENTE: Liber Ediciones AUTOR: 2.0 DISEÑO _
MANUAL DE USO http://www.arsliber.com/ Octubre 2011 PROYECTO: MANUAL DE USO - Página Web PAG: 1 INDICE 1. INICIO DE SESIÓN:... 3 2. AÑADIR Y MODIFICAR LAS PÁGINAS:... 5 2.1. Añadir un nuevo libro a bibliofilia...
Para ingresar a la aplicación Microsoft PowerPoint 97, los pasos que se deben seguir pueden ser los siguientes:
Descripción del ambiente de trabajo Entrar y salir de la aplicación Para ingresar a la aplicación Microsoft PowerPoint 97, los pasos que se deben seguir pueden ser los siguientes: A través del botón :
Índice general de materias LECCIÓN 7 74
Índice general de materias LECCIÓN 7 74 BUSCAR 74 BUSCAR CON FORMATO 77 REEMPLAZAR 78 REEMPLAZAR CON FORMATO 79 NOTAS AL PIE DE PÁGINA 79 CONFIGURAR LAS NOTAS 81 INSERTAR NOTAS AL PIE 83 MODIFICAR NOTAS
**NOTA** las partes tachadas todavía no están escritas, se ira actualizando poco a poco el documento
Simple tutorial we riseup Pequeña introducción a We Riseup #Qué es we.riseup o Crabgrass? #Como esta estructurado We.riseup? Lo Esencial Unirse a un grupo Metodo 1 Metodo 2 Crear contenido #1 ) Crear la
OpenOffice Writer LA PÁGINA
4: CONFIGURARC LA PÁGINA Cuando se escribe de forma manual se empieza por elegir el tamaño del papel, su orientación y los márgenes. En un procesador de texto, como Writer, estas operaciones que habitualmente
InfoPath forma parte del paquete ofimático de Microsoft desde la versión XP (2003).
Formularios Los Sistemas Informacionales utilizan los datos derivados de los OAS y Transaccionales (nóminas, facturaciones, etc.) para, en su aspecto más básico, generar informes que ayuden a los directivos
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
MACROS Y FORMULARIOS
MACROS Y FORMULARIOS Para poder realizar formularios en Excel es necesario ubicar el menú programador Qué hacer si no aparece el menú programador? En algunos equipos no aparece este menú, por lo que es
ADMINISTRACIÓN DE CURSOS
ADMINISTRACIÓN DE CURSOS Luego de haber modificado los datos necesarios para una buena identificación. Vamos a acceder a los cursos. Click en Cursos Virtuales. En este caso, ingresare a la Subcategoría
Curso Internet Básico - Aularagon
Antes de empezar es necesario que tengas claro algunas cosas: para configurar esta cuenta de correo, debes saber que el POP y el SMTP en este caso son mail.aragon.es; esta cuenta de correo hay que solicitarla
Introducción a Microsoft Word
La barra de herramientas de Word La barra de herramientas de Word ha evolucionado a través de las distintas versiones, manteniéndose más o menos constante desde la versión 97 hasta la 2003 y cambiando
Manual de ayuda para la utilización del Correo Interno en el Campus Virtual
Manual de ayuda para la utilización del Correo Interno en el Campus Virtual Página 1 de 12 Contenido 1. INTRODUCCIÓN... 3 2. CONFIGURACIÓN DEL BLOQUE DE CORREO INTERNO... 3 3. GESTIÓN DEL CORREO... 4 4.
Oficina de Tecnologías de la Información y Comunicaciones MANUAL DE USUARIO. Diseño básico para elaboración de banners en Macromedia Fireworks 8
MANUAL DE USUARIO Diseño básico para elaboración de banners en Macromedia Fireworks 8 Pág. 1 de 13 ÍNDICE 1. INTRODUCCION... 3 2. EL ESPACIO DE TRABAJO DE FIREWORKS... 3 3. CREAR UN NUEVO DOCUMENTO...
Tutorial de PowerPoint
Tutorial de PowerPoint Este documento pretende explicar la elaboración de la presentación Los Planetas del Sistema Solar que se comenta en el apartado II de la Guía del curso. Las imágenes utilizadas están
CREACIÓN DE E-POSTERS CON POWER POINT (Instructivo preparado por la Dra. PaulaOtero)
CREACIÓN DE E-POSTERS CON POWER POINT (Instructivo preparado por la Dra. PaulaOtero) Abrir el programa POWER POINT desde el menú INICIO TODOS LOS PROGRAMAS MICROSOFT OFFICE MICROSOFT OFFICE POWER POINT
2011-2012 RESOLUCIÓN DE ERRORES EN MOODLE CAMPUS VIRTUAL-BIRTUALA UPV-EHU
2011-2012 RESOLUCIÓN DE ERRORES EN MOODLE CAMPUS VIRTUAL-BIRTUALA UPV-EHU Antecedentes:... 2 1. Introducción... 3 2. Imágenes que no se visualizan... 3 3. URLs de recursos o actividades que no son autocontenido...
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER
2011 2012 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER WWW.FAUBELL.COM vicente@faubell.com Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por
TUTORIAL. Edición de contenido y creación de entradas y páginas Wordpress
TUTORIAL Edición de contenido y creación de entradas y páginas Wordpress Su sitio web ha sido realizado con la última versión estable de WordPress. WordPress funciona como un Sistema Gestor de Contenidos
Vamos a ver las dos formas básicas de arrancar PowerPoint.
Iniciar Powerpoint Vamos a ver las dos formas básicas de arrancar PowerPoint. 1) Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Coloca el cursor y haz clic
ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea.
ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea. Ministerio de Gobierno y Reforma del Estado Secretaría de Tecnologías para la Gestión Secretaría de Comunicación
En este tutorial vamos a calificar una tarea por el método "Calificación simple directa"que es el que utiliza por defecto moodle.
1 de 9 Calificar Tarea En este tutorial vamos a calificar una tarea por el método "Calificación simple directa"que es el que utiliza por defecto moodle. La evaluación por guías de calificación y las rúbricas
TUTORIAL PRÁCTICO DE BASES DE DATOS EN ACCESS CREAR UNA AGENDA
TUTORIAL PRÁCTICO DE BASES DE DATOS EN ACCESS CREAR UNA AGENDA Antes de iniciar con nuestro tutorial, conozcamos algunos conceptos que vamos a utilizar en este tutorial: Que es una base de datos: Una base
ENTORNO DE TRABAJO DE WORD 2007
ENTORNO DE TRABAJO DE WORD 2007 Esta nueva versión de Office no contiene las 4 barras que son comunes a versiones anteriores, en esta ocasión solo contiene una barra llamada barra de título, una banda
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
Como dibujar las vistas de una pieza en Autocad
El problema de las vistas de una pieza. Una vez que he dibujado la pieza en el espacio modelo (página con el fondo en negro). Haz el render a un archivo. Elige el fondo blanco. Abro una presentación. Para
Instituto Mar de Cortés Elaborar Documentos en Procesador de Texto
Instituto Mar de Cortés Elaborar Documentos en Procesador de Texto Configurar página Cuando estamos escribiendo en un documento Word es como si lo hiciéramos en una hoja de papel que luego puede ser impresa.
Elementos de Microsoft Word
Contenido 1. Distintas formas de iniciar Word 2007... 2 2. Ayuda de Word... 2 3. Las barras de herramientas... 3 4. Funcionamiento de las pestañas. Cómo funcionan?... 4 5. Personalizar barra de acceso
Manual Impress Impress Impress Impress Impress Draw Impress Impress
Manual Impress Se puede definir Impress como una aplicación dirigida fundamentalmente a servir de apoyo en presentaciones o exposiciones de los más diversos temas, proyectando una serie de diapositivas
reemplaza menú archivo y esta situado en la esquina superior izquierda de estos programas de
Taller de Computación Básica Curso de Apoyo a la Modalidad Presencial Lección 1: Conociendo Word Indicaciones: 1. Identifica los elementos principales e interfaz de Word. 2. Maneja los elementos principales
Antes de empezar con el tutorial, vamos a ver algunas cosas que nos van a ayudar mucho a entender como usar este programa.
Tutorial PhotoShop: Selección y Line Art Antes de empezar con el tutorial, vamos a ver algunas cosas que nos van a ayudar mucho a entender como usar este programa. 1- Redimensionar imágenes. Para cambiar
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
CURSO DE CREACCIÓN Y ACCESO AL CORREO ELECTRÓNICO
CURSO DE CREACCIÓN Y ACCESO AL CORREO ELECTRÓNICO Vamos a crear nuestro correo electrónico, con el servicio GMAIL de Google, para ello accedemos a la página de GMAIL, abriendo nuestro navegador web (Mozilla
CÓMO CREAR NUESTRO CATÁLOGO
CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL II
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL II [Escriba texto] Contenido CAPÍTULO I: ESTRUCTURANDO UN REPORTE... 4 CAPÍTULO II: FICHA DE INFORMES... 5 CAPÍTULO III: BARRA DE HERRAMIENTAS INFORME... 19 EJERCICIOS...
1.- Creación de sitios web
Creación y publicación de sitios web TABLA DE CONTENIDOS 1.- Creación de sitios web...1 1.1 Formato Web...1 1.2 Creación de los componentes del sitio web...2 INSERTAR IMAGEN...2 CUADRO DE TEXTO...2 HIPERVÍNCULOS...3
http://www.hikashop.com/en/component/updateme/doc/page-...
español Contenido de visualización en el extremo delantero Descripción Página del producto con un menú Listado de productos con un menú Listado de categorías con un menú Los productos con un módulo Categorías
Amnistía Internacional Sección Española
Amnistía Internacional Sección Española Webs locales Manual para editores Diciembre 2007 Versión 1.0 INTERNO SECRETARIADO ESTATAL. FERNANDO VI, 8, 1º IZDA. 28004 MADRID Telf.: + 34 91 310 12 77 Fax: +
Manual de OpenOffice Impress
Manual de OpenOffice Impress. Capítulo 4. Trabajando con gráficos, esquemas y plantillas 1 Manual de OpenOffice Impress Capítulo 4: Trabajando con gráficos, esquemas y plantillas Este material es una adaptación
Diseño de páginas web
Diseño de páginas web Utilidades en Dreamweaver Ricardo Esteban Alonso Preferencias. Edición En el menú Edición > Preferencias...,podemos modificar a nuestro gusto las opciones que de forma predeterminada
CUADERNIA 2.0. CÓMO INSTALAR CUADERNIA 2.0 Para instalar Cuadernia debemos seguir los siguientes pasos:
CUADERNIA 2.0 Se trata de una herramienta fácil y funcional que nos permite crear de forma dinámica ebooks o libros digitales en forma de cuadernos compuestos por contenidos multimedia y actividades educativas
Gestor de contenidos de la plataforma web
Gestor de contenidos de la plataforma web 2011 1 de 24 Funcionamiento del gestor de contenidos Acceso Para acceder al la extranet es necesario ir a la dirección web: http://www.tudominio.com/adm e introducir
GUÍA PARA MANEJAR GOOGLE DRIVE
GUÍA PARA MANEJAR GOOGLE DRIVE 1 Universidad de Córdoba Grupo de Investigación AVI Ambientes Virtuales Interactivos GOOGLE DRIVE GOOGLE DOCS O GOOGLE DRIVE Google Docs es una sencilla pero potente suite
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
Clase Nº 9 OPERADOR PC. P á g i n a 1 HOJA DE CALCULO MICROSOFT EXCEL
P á g i n a 1 Clase Nº 9 HOJA DE CALCULO MICROSOFT EXCEL Para acceder a este programa se debe hacer clic en el botón INICIO, luego en PROGRAMAS, luego en MICROSOFT OFFICE y finalmente en MICROSOFT EXCEL.
Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE
. Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE El entorno de trabajo La página tiene como base una plantilla
Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web
Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo
UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS
UNIVERSIDAD DE MEDELLÍN MANUAL DE USUARIO GESTOR DE CONTENIDOS NUEVO PORTAL WEB TABLA DE CONTENIDO Tabla de Contenido 2 Consideraciones Iniciales 3 Ingreso al Sistema 4 Opciones de Gestor de contenidos
Una plantilla es un modelo que puede servir como base para muchas hojas de cálculo. Puede incluir tanto datos como formatos.
USAR PLANTILLAS Vamos a conocer y manejar con más precisión las opciones disponibles en Excel2010 a la hora de empezar un libro de trabajo, como puede ser el uso de plantillas como modelos que usaremos
Módulo II - Word. Eliminar caracteres... 2. Selección de texto... 2. Selección de una palabra... 4. Selección de varias palabras...
Módulo II - Word Índice Eliminar caracteres... 2 Selección de texto... 2 Selección de una palabra... 4 Selección de varias palabras... 4 Selección de una frase... 5 Selección de un párrafo... 6 Configuración
Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes?
Preguntas frecuentes Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes? Atención! Esta opción es de configuración y solamente la prodrá realizar el administrador de la
Introducción a Scratch Autor
Autor Índice Comenzando a trabajar con Scratch...3 Pestaña Programas...3 Pestaña Disfraces...3 Pestaña Sonidos....3 Familias de bloques...4 Agregar Objetos...8 Crear un Objeto desde el editor de pintura...9
La visualización de la ventana de Word tiene las siguientes partes:
TRABAJANDO CON WORD Ventanas de Word La visualización de la ventana de Word tiene las siguientes partes: Visualización de página Barra de título, Barra de Menús, donde se indica el nombre de la aplicación
UTILIZACIÓN DE UNA CUENTA DE CORREO ELECTRÓNICO (NUEVO) Acceso al correo electrónico
Acceso al correo electrónico Pasamos ahora a lo que sería usar la cuenta de correo que nos hicimos en la clase anterior. Lo primero que hacemos es entrar en la página web de Yahoo y localizar el icono
Para ingresar a la aplicación Microsoft Word 97, los pasos que se deben seguir pueden ser los siguientes:
Acceso a la aplicación Descripción del ambiente de trabajo Para ingresar a la aplicación Microsoft Word 97, los pasos que se deben seguir pueden ser los siguientes: A través del botón Inicio: 1. Seleccionar
EMPLEO NTIC`S II SEGUNDO SEMESTRE
UNIVERSIDAD TECNICA DE AMBATO FACULTAD DE CONTABILIDAD Y AUDITORIA EMPLEO NTIC`S II SEGUNDO SEMESTRE Ing. Luz Perez SEMESTRE MARZO JULIO 2009 EXCEL Excel es un programa del tipo Hoja de Cálculo que permite
Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen
Curso CSS Clase 5 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo
Microsoft Word 2010. Los formatos son las características que le asignamos a cualquier carácter, a un conjunto de caracteres o a otros elementos.
Microsoft Word 2010 Estilos y Formatos A continuación les voy a explicar como utilizar los estilos y formatos en Word, pero antes de esto necesitamos tener en claro que son los estilos y que son los formatos.
Páginas web ::: Viñetas y marcadores Diseño de materiales multimedia. Web 2.0. 1.4 Viñetas y marcadores
31 1.4 Viñetas y marcadores 32 1.4 Viñetas y marcadores 1.4.1 Introducción En ocasiones nos puede interesar colocar enlaces a otros puntos de una misma página. Antes de crear el hipervínculo, es necesario
A) CREACIÓN DE SITIOS WEB CON MARCOS. (FrontPage 2003)
A) CREACIÓN DE SITIOS WEB CON MARCOS. (FrontPage 2003) A continuación aprenderás a crear la estructura (esqueleto) de una página web con marcos. Como acabáis de llegar de viaje, qué mejor que recordar
PRÁCTICAS DE GESTIÓN GANADERA:
PRÁCTICAS DE GESTIÓN GANADERA: MANEJO DE HOJA DE CÁCULO (EXCEL) 1. INTRODUCCIÓN AL MANEJO DE EXCEL La pantalla del programa consta de una barra de herramientas principal y de una amplia cuadrícula compuesta
3. Navegar por Internet
3. Navegar por Internet 3.1 Favoritos En esta sección veremos cómo utilizar la Barra de Favoritos del explorador de Internet. La Barra de favoritos nos proporciona acceso cómodo a los sitios web que visitamos
3) Aprender a insertar archivos adjuntos y llamarlos desde la presentación.
Objetivos: 1) Aprender a crear hipervínculos. 2) Aprender a insertar sonidos asignados a objetos. 3) Aprender a insertar archivos adjuntos y llamarlos desde la presentación. 4) Aprender a utilizar el clasificador
Curso de TIC educativas JITICE 2015
Curso de TIC educativas Nombre del curso: Taller de Pizarra Digital Interactiva con SMART Notebook Nombre profesor: Jorge Castellanos Correo: jorge.castellanos@urjc.es INDICE Actividad 1: Trabajando con
Un kilobyte (KB) son 1024 bytes, un Megabyte (MB) son 1024 KB, un Gigabyte son 1024 Mb
El Explorador de Windows es la herramienta básica en un Sistema Operativo porque con ella controlaremos toda la información que tenemos guardada en nuestro disco duro, disquete, CD, USB, etc. Terminología
3.1 Definir objetivos y contenidos de la página web
3.1 Definir objetivos y contenidos de la página web Dreamweaver Qué es Dreamweaver? Es una aplicación en forma de estudio enfocada a la construcción y edición de sitios y aplicaciones web basados con estándares,
Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico
Diseños de sitios Web y Comercio Electrónico Universidad Politécnica de Valencia Campus de Gandía Organización del curso viernes 15 martes 19 jueves 21 viernes 22 martes 26 jueves 28 viernes 29 Introducción
Impress : Programa de presentaciones de OpenOffice.
Impress : Programa de presentaciones de OpenOffice. Básicamente Impress es un programa de presentaciones proyectadas a través de diapositivas (pantallas completas) que un orador o ponente puede utilizar
TUTORIAL PARA REDIMENSIONAR FOTOS
TUTORIAL PARA REDIMENSIONAR FOTOS Es extremadamente importante cuidar las imágenes con las que trabajamos en nuestro sitio Web y no subir fotografías a cualquier tamaño. Esto puede ralentizar considerablemente
Google Sites_04: Acciones del sitio
Google Sites_04: Acciones del sitio En este tutorial veremos las Acciones de sitio que aparecen al pulsar el menú Más. 1.- Suscribirse a los cambios del sitio. Si seleccionamos esta opción recibiremos
Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor...
Módulo I - Word Índice Iniciar Word... 2 Finalizar Word... 3 Definición de elementos de pantalla... 4 Escribir texto en un documento... 5 El cursor... 5 Control de párrafos... 5 Nuevos párrafos... 5 Abrir
Manual Word 2010. Tablas
Manual Word 2010 Tablas CONTENIDO Insertar Tabla Seleccionar tablas Eliminar Tablas Agregar - eliminar filas, columnas y celdas Combinar y dividir celdas Dividir tablas Establecer alto y ancho de la celda
Qué es una máquina virtual?
Instalación de Windows XP en una máquina virtual utilizando Sun VirtualBox. Vamos a empezar este tutorial dando una pequeña explicación acerca de que es una máquina virtual y luego vamos a proceder a instalar
Microsoft FrontPage XP
XP El conjunto de páginas escritas en formato HTML (Hyper Text Markup Lenguaje) recibe el nombre de Web, el lugar en el que se almacena se denomina sitio Web. En estos documentos podemos incluir archivos
TEMA 4: CORREO ELECTRÓNICO: OUTLOOK 2007 CORREO ELECTRÓNICO: OUTLOOK 2007 2 EJECUTAR EL ENTORNO DE TRABAJO GESTIÓN DE CORREO ELECTRÓNICO 3
TEMA 4: CORREO ELECTRÓNICO: OUTLOOK 2007 CORREO ELECTRÓNICO: OUTLOOK 2007 2 EJECUTAR 2 EL ENTORNO DE TRABAJO 3 GESTIÓN DE CORREO ELECTRÓNICO 3 Configurar cuenta de correo 3 Recepción y envío de mensajes
Dependiendo de la utilización, forma y resultado deseado, Word propone diferentes columnas:
COLUMNAS Dependiendo de la utilización, forma y resultado deseado, Word propone diferentes columnas: de Las periodísticas simples. En ellas, el usuario define las columnas antes de escribir y salta de
INSTRUCTIVO PARA LA CREACIÓN DE PÓSTER DIGITAL CON PowerPoint Versión 2010
INSTRUCTIVO PARA LA CREACIÓN DE PÓSTER DIGITAL CON PowerPoint Versión 2010 Abrir el programa PowerPoint desde el menú INICIO TODOS LOS PROGRAMAS MICROSOFT OFFICE MICROSOFT OFFICE POWERPOINT (Fig. 1) (Fig.
e-conocimiento Manual de uso
2 Índice 1. Qué es e-conocimiento?... 3 Web del I+CS... 3 Web de los profesionales... 4 2. Cómo puedo acceder a la Web de los profesionales?... 6 3. Qué puedo encontrar en la Web de los profesionales?...
Procesador de palabras Microsoft Word
Procesador de palabras Microsoft Word El procesador de palabras Microsoft Word 2010 está organizado por medio de una cinta de opciones que actualmente se denominan fichas y que son: Archivo, Inicio, insertar,
Módulo II - PowerPoint
Módulo II - PowerPoint Índice Copiando diapositivas Menú Edición... 2 Copiando diapositivas utilizando la barra de herramientas... 3 Copiando diapositivas utilizando el menú contextual... 3 Copiando diapositivas
MANEJANDO FICHEROS Y CARPETAS
Tutorial 1 MANEJANDO FICHEROS Y CARPETAS 1.1.- Creando carpetas Para organizar la información que almacenamos en nuestros ordenadores, tenemos una elemento denominado carpeta. Vamos a ver cómo, usando
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