ACTIVIDAD 1 UNIDAD 2
Usted ya ha sido contratado por la empresa, y su primer proyecto está orientado a la definición de la página web para la empresa, la cual permitirá promocionar todos los productos comercializados.Su reto es diseñar la página de inicio del portal de la empresa.La página diseñada deberá cumplir con los siguientes requerimientos:Nombre de la empresa- Imagen representativa y breve descripción.Descripción de los productos representativos de la empresa ( implementar imágenes de productos para adelgazar, productos para cuidado corporal, productos para el cuidado del cabello, Maquillaje, entre otros)Debe contener las siguientes características.a) Título : Nombre de la empresa, al cual se le debe aplicar un estilo con las siguientes especificaciones:- Nombre del estilo: .mi estilo- Tipo de selector: clase- Definir en: solo este documento- Fuente: Arial- Tamaño: 14 píxeles- Grosor: Negrita- Estilo: Normal- May/min: Mayúscula- Color : Defina el color representativo- La alineación del texto para el titulo debe ir centrada.b) Imagen : Las imágenes utilizadas para promocionar los productos representativos y la imagen corporativa de la empresa debe contar con la siguiente configuración- Tamaño: 150 píxeles alto X 150 píxeles ancho ( imagen corporativa) y las imágenes de los productos no deben superar los 70 Pixeles de alto y ancho- Alineación: centrada- Formato de imagen: jpgc) Párrafo: La descripción de la empresa y de los productos, deberá contar con la siguiente configuración:- Fuente: Arial- Tamaño: 12 píxeles- Color : Negro- Estilo de fuente: Normal- Alineación: Justificada
martes, 3 de noviembre de 2009
INTRODUCCION A DREAMWEAVER CS3
IntroducciónDefiniciónEntorno de Trabajo Creación del SitioMi Primera Página En nuestro tema de la semana 1 "INTRODUCCIÓN A DREAMWEAVER CS3" queremos:Aprender a instalar Dreamweaver.Ambientación al entorno de trabajo.Identificar sus herramientas básicas.Crear un sitio de trabajo.Elaborar la Primera Página Web.Macromedia define a Dreamweaver CS3 como un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML, como si prefiere trabajar en un entorno de edición visual. Dreamweaver CS3 le proporciona útiles herramientas que mejorarán su experiencia de creación Web.Las funciones de edición visual de Dreamweaver CS3 permiten crear páginas de forma rápida, sin escribir una sola línea de código. No obstante, si prefiere crear el código manualmente, Dreamweaver cs3 también incluye numerosas herramientas y funciones relacionadas con la codificación. Además, Dreamweaver le ayuda a crear aplicaciones Web dinámicas basadas en bases de datos empleando lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP.Ahora vamos a explorar los elementos básicos de la herramienta, porque se debe conocer a fondo las utilidades prácticas como: menús, paneles, pantallas, etc.BarrasComo se puede apreciar en la pantalla, existen unos elementos horizontales que contienen a su vez iconos y opciones de menú, ha estas disposiciones horizontales o verticales se les conoce como barras y se encuentran en todas las aplicaciones Windows. A continuación se describirán las barras más relevantes de la herramienta.Barra títuloContiene el nombre del programa que estamos trabajando, junto con el título, nombre y ubicación de la página. En el caso de no tener título y nombre de página aparecerá nombres predeterminados como muestra la gráfica.Además en el sector derecho se encuentran las opciones de maximizar, minimizar, restaurar y cerrar.Barra de Herramientas EstándarContiene iconos que nos permite ejecutar de forma inmediata, algunas de las operaciones más habituales.Ejemplo: Guardar, Pegar, etc.Barra de MenúEn esta barra podemos encontrar las operaciones de Dreamweaver que están agrupadas en menús desplegables Nota: Se recomienda realizar las operaciones desde los paneles.Barra de Herramientas de DocumentoEn este sitio podemos encontrar iconos que nos permite ejecutar de forma inmediata algunas de las operaciones habituales que no son incluidas en la barra de herramientas estándar. Algunas de estas operaciones son: cambio de vista del documento (código, diseño, vista previa), la administración de archivos, el titulo, etc. Nota: Para efecto de este curso se recomienda trabajar con vista de documento en Diseño, ya que no se va a trabajar código HTML.Barra Insertarcontiene botones para la inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tablahaciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.PanelesDreamweaver utiliza unas ventanas emergentes similares a los menús, estas reciben el nombre de paneles o inspectores, pero su diferencia radica en que el inspector varía sus opciones dependiendo del objeto seleccionado.En la parte superior, en el menú ventana, podemos seleccionar ocultar o mostrar los paneles e inspectores. A continuación se mostraran lo más importantes.Inspector de PropiedadesEl inspector permite ver y realizar modificaciones de las diferentes propiedades del objeto o del texto seleccionado. En la gráfica podemos observar las propiedades de un texto, como el tipo de fuente, color, negrilla, etc.SITIODespués de revisar y reconocer el ambiente de Dreamweaver, antes de empezar a diseñar una Página Web, es recomendable definir la ubicación de los objetos que la componen: como imágenes, animaciones flash, archivos, etc. A esta ubicación se le denomina como un sitio.Cree una carpeta en su PC con el nombre del sitio (el nombre del sitio debe hacer referencia al tema principal de las páginas). Por ejemplo para efecto de este curso utilizaremos como nombre MISITIO . Dentro de esta carpeta se debe crear carpetas para las imágenes, para los archivos, etc.Nota: El nombre de la carpeta que se crea es indiferente al nombre que se le asigne al sitio, pero por organización vamos a utilizar el mismo nombre tanto para el sitio como para la carpeta. Los nombres de las carpetas no deben llevar espacios, tildes, ñ o caracteres especiales.En el menú principal que esta ubicado en la parte superior de la pantalla debe ingresar a la opción sitio , donde se seleccionara administrar sitio . Debe aparecer la siguiente pantalla, en botón nuevo escogemos sitio .continuación se definirá el nombre del sitio y la carpeta raíz local, donde se encuentra el sitio dentro del disco duro local. Por ahora las demás opciones no son de nuestro interés, porque estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.Nota: En la carpeta Animaciones Semana 1 podrá descargar la animación flash (MISITIO) que le ayudara a entender la creación de un sitio de trabajo con
IntroducciónDefiniciónEntorno de Trabajo Creación del SitioMi Primera Página En nuestro tema de la semana 1 "INTRODUCCIÓN A DREAMWEAVER CS3" queremos:Aprender a instalar Dreamweaver.Ambientación al entorno de trabajo.Identificar sus herramientas básicas.Crear un sitio de trabajo.Elaborar la Primera Página Web.Macromedia define a Dreamweaver CS3 como un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML, como si prefiere trabajar en un entorno de edición visual. Dreamweaver CS3 le proporciona útiles herramientas que mejorarán su experiencia de creación Web.Las funciones de edición visual de Dreamweaver CS3 permiten crear páginas de forma rápida, sin escribir una sola línea de código. No obstante, si prefiere crear el código manualmente, Dreamweaver cs3 también incluye numerosas herramientas y funciones relacionadas con la codificación. Además, Dreamweaver le ayuda a crear aplicaciones Web dinámicas basadas en bases de datos empleando lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP.Ahora vamos a explorar los elementos básicos de la herramienta, porque se debe conocer a fondo las utilidades prácticas como: menús, paneles, pantallas, etc.BarrasComo se puede apreciar en la pantalla, existen unos elementos horizontales que contienen a su vez iconos y opciones de menú, ha estas disposiciones horizontales o verticales se les conoce como barras y se encuentran en todas las aplicaciones Windows. A continuación se describirán las barras más relevantes de la herramienta.Barra títuloContiene el nombre del programa que estamos trabajando, junto con el título, nombre y ubicación de la página. En el caso de no tener título y nombre de página aparecerá nombres predeterminados como muestra la gráfica.Además en el sector derecho se encuentran las opciones de maximizar, minimizar, restaurar y cerrar.Barra de Herramientas EstándarContiene iconos que nos permite ejecutar de forma inmediata, algunas de las operaciones más habituales.Ejemplo: Guardar, Pegar, etc.Barra de MenúEn esta barra podemos encontrar las operaciones de Dreamweaver que están agrupadas en menús desplegables Nota: Se recomienda realizar las operaciones desde los paneles.Barra de Herramientas de DocumentoEn este sitio podemos encontrar iconos que nos permite ejecutar de forma inmediata algunas de las operaciones habituales que no son incluidas en la barra de herramientas estándar. Algunas de estas operaciones son: cambio de vista del documento (código, diseño, vista previa), la administración de archivos, el titulo, etc. Nota: Para efecto de este curso se recomienda trabajar con vista de documento en Diseño, ya que no se va a trabajar código HTML.Barra Insertarcontiene botones para la inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tablahaciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.PanelesDreamweaver utiliza unas ventanas emergentes similares a los menús, estas reciben el nombre de paneles o inspectores, pero su diferencia radica en que el inspector varía sus opciones dependiendo del objeto seleccionado.En la parte superior, en el menú ventana, podemos seleccionar ocultar o mostrar los paneles e inspectores. A continuación se mostraran lo más importantes.Inspector de PropiedadesEl inspector permite ver y realizar modificaciones de las diferentes propiedades del objeto o del texto seleccionado. En la gráfica podemos observar las propiedades de un texto, como el tipo de fuente, color, negrilla, etc.SITIODespués de revisar y reconocer el ambiente de Dreamweaver, antes de empezar a diseñar una Página Web, es recomendable definir la ubicación de los objetos que la componen: como imágenes, animaciones flash, archivos, etc. A esta ubicación se le denomina como un sitio.Cree una carpeta en su PC con el nombre del sitio (el nombre del sitio debe hacer referencia al tema principal de las páginas). Por ejemplo para efecto de este curso utilizaremos como nombre MISITIO . Dentro de esta carpeta se debe crear carpetas para las imágenes, para los archivos, etc.Nota: El nombre de la carpeta que se crea es indiferente al nombre que se le asigne al sitio, pero por organización vamos a utilizar el mismo nombre tanto para el sitio como para la carpeta. Los nombres de las carpetas no deben llevar espacios, tildes, ñ o caracteres especiales.En el menú principal que esta ubicado en la parte superior de la pantalla debe ingresar a la opción sitio , donde se seleccionara administrar sitio . Debe aparecer la siguiente pantalla, en botón nuevo escogemos sitio .continuación se definirá el nombre del sitio y la carpeta raíz local, donde se encuentra el sitio dentro del disco duro local. Por ahora las demás opciones no son de nuestro interés, porque estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.Nota: En la carpeta Animaciones Semana 1 podrá descargar la animación flash (MISITIO) que le ayudara a entender la creación de un sitio de trabajo con
DREAMWEAVER
Es el programa que hace parte del paquete de macromedia, junto con los programas de flash y fire. Es un editor gráfico con extención HTML profesional para diseñar, modificar y desarrollar sitios, pagina y apilaciones web.las funciones de edición visual de dreamweaver permiten crear paginas de forma rápida, sin necesidad de escribir una sola linea de código...para crear nuestra pagina lo primero que hay que tener en cuenta es crear una carpeta donde almacenaremos las imagénes, animaciones. A esta carpeta la llamaremos mi sitio, (todo debe de ir en esta carpeta). loa nombres de las carpetas no deben llevar espacios, tildes o caracteres especiales.NOTA:El nombre que se le crea a la carpeta es indiferente al nombre que se le asigne al sitio.ELEMENTOS BÁSICOS DE LA VENTANAElementos principalesBarra de titulo: Contiene el nombre del programa en el que estamos trabajando, junto con el título, nombre y ubicación. Además las opciones de minimizar, maximizar, cerrar.Barra de menú: Son los menús desplegables (archivo, edición, ver, insertar, modificar textos, comandos, sitio, ventana y ayuda).Barra de herramientas de documento: En este sitio podemos encontrar iconos que nos permiten ejecutar de forma inmediata de las operaciones habituales que no son incluidas en la barra de herramientas estandar. Algunas de estas operaciones son: cambio de vista del documento,(código, diseño, vista previa, DVD, validar formatos, administración de archivos).NOTA:Para este proyecto nos vamos a ubicar en la ficha diseño, ya que vamos a trabajar con los códigos HTML.Barra insertar: Contiene botones para inserción de diferentes tipos de objetivos, como hipervínculos, imagenes, tablas, y capas en un documento. Cada objetivo es un fragmento de código HTML, que le permite establecer diversos atributos al insertar.Por ejemplo: puedo insertar una tabla haciendo clic en el botón tabla de la barra insertar o también en el menú insertar del menú principal.NOTA: las imagenes deben tener la extensión .jpgInspector de propiedades: Este permite ver y realizar modificasiones de las diferentes propiedades del objeto del textoi seleccionado, en el podemos obsertvar las propiedades de un texto (negrita, color, fuente, estilo, etc).
Publicado por CRISTINA en 12:46 0 comentarios
ESTILOS CSS
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional SantanderTodos los derechos reservadosEstilos CSS(Hojas de Estilo en Cascada)ESTILOS CSSUna de las opciones más interesantes que posee la herramienta DreamweaverCS3 son los Estilos CSS (Hojas de Estilo en Cascada), que nos permite crearformatos que controlan de una forma flexible los contenidos de una página Web(texto, imágenes, formato de la página, listas, bloques, entre otros).Por medio de los CSS podemos combinar atributos de color, de tamaño, de tiposde fuente, o de fondo; buscando la forma de no repetir asignaciones de estosatributos.La ventaja de la utilización de CSS, es que permite una actualización automáticaen el documento de los cambios que se generen en ellos.La desventaja de los estilos es que algunos navegadores antiguos no puedensoportarlos y a veces los ignoran, aunque esto puede ocurrir solo en casoscontados.Nota: Para evitar que ocurra un conflicto en los CSS creados, evite aplicar dos estilos deferentes a un mismo texto.Crear Estilo CSS Nuevo:1. En la barra de Menú en la opción Texto, seleccione Estilos CSS y luegode click en la opción Nuevo…Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional SantanderTodos los derechos reservados2. Aparecerá el cuadro de diálogo Nuevo Estilo CSS.Defina el tipo de estilo CSS que desea crear:• Seleccione Clase (puede aplicarse a cualquier etiqueta) y escriba el nombredel estilo en el cuadro de texto Nombre (Ejemplo: .miestilo)Nota: los nombres de clase deben comenzar por un punto (.) y puedencontener cualquier combinación alfanumérica (por ejemplo .myhead1). Si nointroduce el punto inicial, Dreamweaver lo hará de forma automática.• Para incrustar el estilo en el documento actual, donde dice Definir en,seleccione Sólo este documento.3. De click en el botón Aceptar. Aparecerá el cuadro de diálogo Definición deEstilos.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional SantanderTodos los derechos reservados4. Seleccione las opciones de estilo que desea establecer para el estilo CSSnuevo como tipo fuente, tamaño, color, etc. y haga clic en el botón Aceptar.Aplicar un Estilo CSS:Nota: Antes de aplicar los Estilos CSS, se recomienda digitar primero todo el textoque estará en la página.Para aplicarle a un texto un Estilo CSS creado previamente debe hacer losiguiente:1. Seleccione el texto al que desea aplicarle el estilo2. En el inspector de propiedades, en el cuadro de texto Estilo, seleccione elnombre del estilo.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional SantanderTodos los derechos reservadosLe aparecerá en la página el texto con el estilo que ha seleccionado.Nota: El procedimiento anterior lo debe realizar para aplicarle un estilo a cadauno de los textos que se encuentran en la página.Modificar el Nombre de un Estilo CSS:Para modificar el nombre de un Estilo CSS, en el panel de archivos en la VentanaEstilos CSS, seleccione el nombre del estilo que desea modificar, de click derechoy seleccione la opción Cambiar nombre de claseCopyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional SantanderTodos los derechos reservadosAparecerá el cuadro de diálogo Cambiar nombre de clase, en el cual se encuentraseleccionado el nombre del estilo que va a cambiarEn el cuadro de texto Nuevo nombre, digite el nombre que desea asignarle al estiloy de click en el botón Aceptar.Modificar las Propiedades de un Estilo CSS:Para modificar las propiedades de un Estilo CSS como tipo de fuente, color,tamaño, etc, en el panel de archivos en la Ventana Estilos CSS, seleccione elnombre del estilo que desea modificar, de click derecho y seleccione la opciónEditarAparecerá el cuadro de diálogo Definición de regla, en el cual se encuentran laspropiedades actuales del estilo.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional SantanderTodos los derechos reservadosModifique las propiedades que desee y por último de click en el botón Aplicar yluego de click en el botón Aceptar.Para la realización de este documento, se tomó como referencia el “ManualAdobe Dreamweaver CS3” de la empresa Adobe y el Sitio Webhttp://www.aulaclic.es/dreamweavercs3/index.htm
FORMATOS GRAFICOS PARA PAGINAS WEB
Copyright ©: http://www.desarrolloweb.com/.El componente gráfico de las páginas web tiene mucha importancia, es el que hace que estas seanvistosas y el que nos permite aplicar nuestra creatividad para hacer del diseño de sitios una tareaagradable. Es también una herramienta para acercar los sitios al mundo donde vivimos, siembargo, es también el causante de errores graves en las páginas y hacer de estas, en algunoscasos, un martirio para el visitante.Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sealigeramente, nos ayudará a crear sitios agradables y rápidos. No cometer errores en el uso de lasimágenes es fundamental, aunque no seas un diseñador y las imágenes que utilices sean feas,utilízalas bien y así estarás haciendo más agradable la visita a tus páginas.Tipos de archivosEn Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensadosespecialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños setransmiten más rápidamente por la Red.El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formatoJPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma decomprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otrospropósitos.Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formatono tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan eldesconocimiento del formato por parte de los desarrolladores, que las herramientas habitualespara tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportan y que losnavegadores antiguos también tienen problemas para visualizarlas. Sin embargo, el formato secomporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resultaríaútil si se llega a extender su uso.GIFA parte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otrascaracterísticas que son importantes y útiles.Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser interesante sila imagen es muy pequeña, aunque sea una foto.Un logotipo esun ejemplo clarode imagen GIFCopyright ©: www.desarrolloweb.comTransparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De estemodo podemos colocar las imágenes sobre distintos fondos sin que se vea el cuadrado donde estáinscrito el dibujo, viendose en cambio la silueta del dibujo en cuestión.Para crear un gif transparente debemos utilizar un programa de diseño gráfico, con el podemosindicar qué colores del dibujo queremos que sean transparentes. Generalmente, definimos latransparencia cuando vamos a guardar el gráfico.Colores: Con este formato gráfico podemos utilizar paletas, conjuntos, de 256 colores o menos.Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen,por lo general, menos ocupará el archivo. En ocasiones, aunque utilicemos menos colores en ungráfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lohacemos mientras creamos el gráfico.32 colores16 colores8 coloresImagen tomada con distintas paletas de colores. Se puede apreciar como con pocos colores se ve bien elgráfico y como pierde un poco a medida que le restamos colores.JPGVeamos ahora cuales son las características fundamentales delformato JPG:Compresión: Tal como hemos dicho anteriormente, sualgoritmo de compresión hace ideal este formato para guardarfotografías. Además, con JPG podemos definir la calidad de laimagen, con calidad baja el fichero ocupará menos, y viceversa.Parte de estaimagen estransparenteUna fotografía con formato JPGCopyright ©: www.desarrolloweb.comTransparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamoscolocar una imagen con un área que parezca transparente procederemos así: con nuestroprograma de diseño gráfico haremos que el fondo de la imagen sea el mismo que el de la páginadonde queremos colocarla. En muchos casos los fondos de la imagen y la página parecerán elmismo.IColores: JPG trabaja siempre con 16 millones de colores, ideal para fotografías.Optimizar ficherosPara que las imágenes ocupen lo menos posible y se transfieran rápidamente por la Red debemosaprender a optimizar los ficheros gráficos. Para ello debemos hacer lo siguiente:Para los archivos GIF: Reduciremos el número de colores de nuestra paleta. Esto se hace connuestro editor gráfico, en muchos casos podremos hacerlo al guardar el archivo.GIF 256 colores - 10,8 KBGIF 32 colores - 5,5 KBGIF 4 colores - 2 KBPara los archivos JPG: Ajustaremos la calidad del archivo cuando lo estemos guardando. Esteformato nos permite bajar mucho la calidad de la imagen sin que esta pierda mucho en suaspecto visual.Intento detransparencia enJPGCopyright ©: www.desarrolloweb.comJPGcalidad 03 KBJPGcalidad 205,9 KBJPGcalidad 5010 KBEs imprescindible disponer para optimizar la imagen de unaherramienta buena que nos permita configurar estascaracterísticas de la imagen con libertad y fácilmente.Photoshop 5.5 o 6 es un programa bastante recomendable,pues incorpora una opción que se llama "Guardar para elWeb" con la que podemos definir los colores del gif, calidaddel JPG y otras opciones en varias muestras a la vez. Asícon todas las opciones configurables, viendo los resultadosa la vez que el tamaño del archivo podemos optimizar laimagen de una manera precisa con los resultados quedeseamos.También existen en el mercado otros programas que nospermiten optimizar estas imágenes de manerasorprendente. Una vez hemos creado la imagen la pasamos por estos programas y noscomprimen aun más el archivo, haciéndolo rápido de transferir y, por tanto, más optimo paraInternet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con losprogramas de edición gráfica.Photoshop es una herramienta excelentepara optimizar ficheros. Viendo variascopias podemos elegir la más adecuada
Copyright ©: http://www.desarrolloweb.com/.El componente gráfico de las páginas web tiene mucha importancia, es el que hace que estas seanvistosas y el que nos permite aplicar nuestra creatividad para hacer del diseño de sitios una tareaagradable. Es también una herramienta para acercar los sitios al mundo donde vivimos, siembargo, es también el causante de errores graves en las páginas y hacer de estas, en algunoscasos, un martirio para el visitante.Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sealigeramente, nos ayudará a crear sitios agradables y rápidos. No cometer errores en el uso de lasimágenes es fundamental, aunque no seas un diseñador y las imágenes que utilices sean feas,utilízalas bien y así estarás haciendo más agradable la visita a tus páginas.Tipos de archivosEn Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensadosespecialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños setransmiten más rápidamente por la Red.El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formatoJPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma decomprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otrospropósitos.Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formatono tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan eldesconocimiento del formato por parte de los desarrolladores, que las herramientas habitualespara tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportan y que losnavegadores antiguos también tienen problemas para visualizarlas. Sin embargo, el formato secomporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resultaríaútil si se llega a extender su uso.GIFA parte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otrascaracterísticas que son importantes y útiles.Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser interesante sila imagen es muy pequeña, aunque sea una foto.Un logotipo esun ejemplo clarode imagen GIFCopyright ©: www.desarrolloweb.comTransparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De estemodo podemos colocar las imágenes sobre distintos fondos sin que se vea el cuadrado donde estáinscrito el dibujo, viendose en cambio la silueta del dibujo en cuestión.Para crear un gif transparente debemos utilizar un programa de diseño gráfico, con el podemosindicar qué colores del dibujo queremos que sean transparentes. Generalmente, definimos latransparencia cuando vamos a guardar el gráfico.Colores: Con este formato gráfico podemos utilizar paletas, conjuntos, de 256 colores o menos.Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen,por lo general, menos ocupará el archivo. En ocasiones, aunque utilicemos menos colores en ungráfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lohacemos mientras creamos el gráfico.32 colores16 colores8 coloresImagen tomada con distintas paletas de colores. Se puede apreciar como con pocos colores se ve bien elgráfico y como pierde un poco a medida que le restamos colores.JPGVeamos ahora cuales son las características fundamentales delformato JPG:Compresión: Tal como hemos dicho anteriormente, sualgoritmo de compresión hace ideal este formato para guardarfotografías. Además, con JPG podemos definir la calidad de laimagen, con calidad baja el fichero ocupará menos, y viceversa.Parte de estaimagen estransparenteUna fotografía con formato JPGCopyright ©: www.desarrolloweb.comTransparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamoscolocar una imagen con un área que parezca transparente procederemos así: con nuestroprograma de diseño gráfico haremos que el fondo de la imagen sea el mismo que el de la páginadonde queremos colocarla. En muchos casos los fondos de la imagen y la página parecerán elmismo.IColores: JPG trabaja siempre con 16 millones de colores, ideal para fotografías.Optimizar ficherosPara que las imágenes ocupen lo menos posible y se transfieran rápidamente por la Red debemosaprender a optimizar los ficheros gráficos. Para ello debemos hacer lo siguiente:Para los archivos GIF: Reduciremos el número de colores de nuestra paleta. Esto se hace connuestro editor gráfico, en muchos casos podremos hacerlo al guardar el archivo.GIF 256 colores - 10,8 KBGIF 32 colores - 5,5 KBGIF 4 colores - 2 KBPara los archivos JPG: Ajustaremos la calidad del archivo cuando lo estemos guardando. Esteformato nos permite bajar mucho la calidad de la imagen sin que esta pierda mucho en suaspecto visual.Intento detransparencia enJPGCopyright ©: www.desarrolloweb.comJPGcalidad 03 KBJPGcalidad 205,9 KBJPGcalidad 5010 KBEs imprescindible disponer para optimizar la imagen de unaherramienta buena que nos permita configurar estascaracterísticas de la imagen con libertad y fácilmente.Photoshop 5.5 o 6 es un programa bastante recomendable,pues incorpora una opción que se llama "Guardar para elWeb" con la que podemos definir los colores del gif, calidaddel JPG y otras opciones en varias muestras a la vez. Asícon todas las opciones configurables, viendo los resultadosa la vez que el tamaño del archivo podemos optimizar laimagen de una manera precisa con los resultados quedeseamos.También existen en el mercado otros programas que nospermiten optimizar estas imágenes de manerasorprendente. Una vez hemos creado la imagen la pasamos por estos programas y noscomprimen aun más el archivo, haciéndolo rápido de transferir y, por tanto, más optimo paraInternet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con losprogramas de edición gráfica.Photoshop es una herramienta excelentepara optimizar ficheros. Viendo variascopias podemos elegir la más adecuada
QUE ES DREAMWEAVER
CURSO DREAMWEAVER www,senavirtual.edu.coAdobe Dreamweaver® (Dw) Es una aplicación en forma de estudio (Basada porsupuesto en la forma de estudio de Adobe Flash®) pero con más parecido a un tallerdestinado para la construcción y edición de sitios y aplicaciones Web basados enestándares. Creado inicialmente por Macromedia (actualmente producido por AdobeSystems). Es el programa de este tipo más utilizado en el sector del diseño y laprogramación web, por sus funcionalidades, su integración con otras herramientas comoAdobe Flash y, recientemente, por su soporte de los estándares del World Wide WebConsortium. Su principal competidor es Microsoft Expression Web y tiene soporte tantopara edición de imágenes como para animación a través de su integración con otrasherramientasHasta la versión MX, fue duramente criticado por su escaso soporte de los estándares dela web, ya que el código que generaba era con frecuencia sólo válido para InternetExplorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en lasversiones recientes.Se vende como parte de la suite Adobe Creative Suite 3 y 4La gran base de este editor sobre otros es su gran poder de ampliación y personalizacióndel mismo, puesto que en este programa, sus rutinas (como la de insertar unhipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, loque le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos delprograma no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea unprograma muy fluido, que todo ello hace, que programadores y editores web haganextensiones para su programa y lo ponga a su gusto.Las versiones originales de la aplicación se utilizaban como simples editoresWYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías webcomo CSS, JavaScript y algunos Framework del lado servidor.Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el90% del mercado de editores HTML. Esta aplicación está disponible tanto para laplatafoma MAC como para Windows, aunque también se puede ejecutar en plataformasbasadas en UNIX utilizando programas que implementan las API's de Windows, tipoWine.Como editor WYSIWYG que es, Dreamweaver oculta el código HTML de cara alusuario, haciendo posible que alguien no entendido pueda crear páginas y sitios webfácilmente.Algunos desarrolladores web critican esta propuesta ya que crean páginas HTML máslargas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de laejecución de las páginas en el navegador web. Esto puede ser especialmente cierto yaque la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además,algunos desarrolladores web han criticado Dreamweaver en el pasado porque creabacódigo que no cumplía con los estándares del consorcio Web (W3C).CURSO DREAMWEAVER www,senavirtual.edu.coNo obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginassin tablas en versiones posteriores de la aplicación.Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instaladosen su ordenador para previsualizar las páginas web. También dispone de herramientasde administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad deencontrar y reemplazar líneas de texto y código por cualquier tipo de parámetroespecificado, hasta el sitio web completo. El panel de comportamientos también permitecrear JavaScript básico sin conocimientos de código.Con la llegada de la versión MX, Macromedia incorporó herramientas de creación decontenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTMLWYSIWYG, también permite la conexión a Bases de Datos como MySQL y MicrosoftAccess, para filtrar y mostrar el contenido utilizando tecnología de script como, porejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServerPages),PHP sin necesidad de tener experiencia previa en programación.Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Esdecir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, sonpequeños programas, que cualquier desarrollador web puede escribir (normalmente enHTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo asífuncionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una grancomunidad de desarrolladores de extensiones que hacen posible la disponibilidad deextensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que vandesde simple efectos rollover hasta completas cartas de compra.Dato Curioso: Su nombre en español significa "tejesueños o tejedor de sueños
CURSO DREAMWEAVER www,senavirtual.edu.coAdobe Dreamweaver® (Dw) Es una aplicación en forma de estudio (Basada porsupuesto en la forma de estudio de Adobe Flash®) pero con más parecido a un tallerdestinado para la construcción y edición de sitios y aplicaciones Web basados enestándares. Creado inicialmente por Macromedia (actualmente producido por AdobeSystems). Es el programa de este tipo más utilizado en el sector del diseño y laprogramación web, por sus funcionalidades, su integración con otras herramientas comoAdobe Flash y, recientemente, por su soporte de los estándares del World Wide WebConsortium. Su principal competidor es Microsoft Expression Web y tiene soporte tantopara edición de imágenes como para animación a través de su integración con otrasherramientasHasta la versión MX, fue duramente criticado por su escaso soporte de los estándares dela web, ya que el código que generaba era con frecuencia sólo válido para InternetExplorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en lasversiones recientes.Se vende como parte de la suite Adobe Creative Suite 3 y 4La gran base de este editor sobre otros es su gran poder de ampliación y personalizacióndel mismo, puesto que en este programa, sus rutinas (como la de insertar unhipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, loque le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos delprograma no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea unprograma muy fluido, que todo ello hace, que programadores y editores web haganextensiones para su programa y lo ponga a su gusto.Las versiones originales de la aplicación se utilizaban como simples editoresWYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías webcomo CSS, JavaScript y algunos Framework del lado servidor.Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el90% del mercado de editores HTML. Esta aplicación está disponible tanto para laplatafoma MAC como para Windows, aunque también se puede ejecutar en plataformasbasadas en UNIX utilizando programas que implementan las API's de Windows, tipoWine.Como editor WYSIWYG que es, Dreamweaver oculta el código HTML de cara alusuario, haciendo posible que alguien no entendido pueda crear páginas y sitios webfácilmente.Algunos desarrolladores web critican esta propuesta ya que crean páginas HTML máslargas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de laejecución de las páginas en el navegador web. Esto puede ser especialmente cierto yaque la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además,algunos desarrolladores web han criticado Dreamweaver en el pasado porque creabacódigo que no cumplía con los estándares del consorcio Web (W3C).CURSO DREAMWEAVER www,senavirtual.edu.coNo obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginassin tablas en versiones posteriores de la aplicación.Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instaladosen su ordenador para previsualizar las páginas web. También dispone de herramientasde administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad deencontrar y reemplazar líneas de texto y código por cualquier tipo de parámetroespecificado, hasta el sitio web completo. El panel de comportamientos también permitecrear JavaScript básico sin conocimientos de código.Con la llegada de la versión MX, Macromedia incorporó herramientas de creación decontenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTMLWYSIWYG, también permite la conexión a Bases de Datos como MySQL y MicrosoftAccess, para filtrar y mostrar el contenido utilizando tecnología de script como, porejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServerPages),PHP sin necesidad de tener experiencia previa en programación.Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Esdecir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, sonpequeños programas, que cualquier desarrollador web puede escribir (normalmente enHTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo asífuncionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una grancomunidad de desarrolladores de extensiones que hacen posible la disponibilidad deextensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que vandesde simple efectos rollover hasta completas cartas de compra.Dato Curioso: Su nombre en español significa "tejesueños o tejedor de sueños
UTILIDADES DE ADOBE DREAMVEAVER CS3
MENÚA continuación se describirá los elementos más importantes del Menú de AdobeDreamweaver CS3:El menú Archivo contiene los elementos de menú estándar como Nuevo, Abrir,Guardar, Guardar como. También contiene otros comandos para la visualización o manipulación del documento actual, como Vista previa en el navegador e Imprimir código.El menú Edición contiene los elementos de menú estándar como Cortar, Copiar y Pegar. También incluye comandos de selección y búsqueda, como Seleccionaretiqueta padre, Buscar y reemplazar, y proporciona acceso al editor de Métodosabreviados de teclado y al Editor de la biblioteca de etiquetas.El menú Ver le permite obtener diversas vistas del documento (como la vistaDiseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de página y herramientas de Dreamweaver CS3.El menú Insertar ofrece una alternativa a la barra Insertar para la inserción deobjetos en el documento.El menú Modificar le permite cambiar las propiedades del elemento de páginaseleccionado. A través de este menú, puede editar los atributos de etiquetas,cambiar las tablas y elementos de tablas y realizar diversas operacionesrelacionadas con elementos de biblioteca y plantillas.El menú Texto le permite aplicar formato al texto fácilmente.El menú Comandos proporciona acceso a diversos comandos, entre otros, unopara aplicar formato al código en función de las preferencias de formato y otropara crear un álbum de fotos.El menú Sitio proporciona opciones de menú para crear, abrir y editar sitios, así como para administrar los archivos del sitio actual (en Macintosh).El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanasde Dreamweaver CS3.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).El menú Ayuda proporciona acceso a la documentación de Dreamweaver CS3,incluidos los sistemas de ayuda para la utilización de Dreamweaver y la creaciónde extensiones para Dreamweaver, además de información de referencia paradiversos lenguajes.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).COLORSe puede modificar el color de muchos objetos (texto, tablas, fondo de página,entre otros).Para la asignación del color se debe desplegar la paleta de colores, estos coloresse muestran de la misma forma tanto en Windows como en Linux.Pulse sobre el recuadro gris que se encuentra en el Inspector dePropiedades, de esta forma aparecerá la paleta de colores con un cursor en forma de gotero para seleccionar el color deseado, tanto de la paleta de colores o de cualquier otro color que señale con el cursor en la pantalla.Los colores se expresan en forma de valores hexadecimales después del carácter#, los dos primeros valores equivalen al rojo, los dos siguientes al verde y los 2restantes al azul ( #FF0000).En la parte superior de este recuadro muestra el valor hexadecimal del color.Si conoce el valor hexadecimal del color debe introducirlo en el recuadro blanco:Otro método para cambiar el color es ingresar en el recuadro blanco el nombre en inglés del color.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados). TEXTOEl Texto es una de las utilidades más importantes que trae la herramienta dediseño Dreamweaver, a continuación revisaremos sus principales opciones yaplicaciones.FormatoPermite establecer el estilo de párrafo para el texto seleccionado, puede serPárrafo, Encabezado y PredeterminadoNegrita y Cursiva Se aplican al texto seleccionado.FuentePermite especificar el conjunto de fuentes que se emplean en Dreamweaver CS3.Se encuentran fuentes, por la posibilidad que al establecer un tipo determinado de letra no la tenga instalada su computador.AlineaciónEl texto puede ser alineado a la izquierda, centrado, derecha y justificado.SangríaEstos botones permiten insertar o anular la sangría en el texto.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).ListasSe puede insertar el texto en forma de lista ya sea con viñetas o connumeración. Para realizar este cambio se debe desplazar a las propiedades dela Lista que se encuentran en el Menú Texto o en el Inspector de Propiedades.Viñetas: Lista sin ordenarNumeración: Lista Ordenada• Casa• Baño• Habitación1. Casa2. Baño3. HabitaciónCopyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).IMÁGENESAntes de incluir una imagen, debe guardar la página en la carpeta del Sitio.Para incluir una imagen en la página que fue guardada previamente, laimagen deberá estar guardada primero en la carpeta del Sitio que fue creado,sino lo está Dreamweaver le preguntará si desea copiar el archivo en el sitio.Para Insertar una Imagen:Coloque el punto de inserción en el lugar de la ventana de documento en el quedesea que aparezca la imagen y a continuación siga uno de estos procedimientos:• En la categoría Común de la barra Insertar, haga clic en el icono Imagen.• En la barra de menú Seleccione Insertar > imagen. Luego Busque y seleccioneel origen de imagen o contenido que desee insertar. En la parte inferior en laopción Relativa a seleccione Documento.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).En la parte inferior podrá observar que aparece el campo URL localizador uniforme de recurso (Uniform Resource locutor), es aquí donde se encuentra la ruta de ubicación de la imagen, la misma que aparece en el Inspector de Propiedades en el campo Origen.Si aparece un cuadro gris o un recuadro en blanco con una X roja, significa que la ruta esta de forma incorrecta, o puede ser que se ha modificado el nombre de la imagen, para solucionar esta situación se debe actualizar la ruta para que laimagen vuelva aparecer.Modificar el Tamaño de la Imagen:Existen 2 formas para realizar el cambio de dimensiones en una imagen:1. Seleccione la imagen y arrastre con el puntero alguno de sus recuadros negrosque aparecen alrededor de la imagen.Para cambiar el tamaño de manera proporcional, seleccione algún recuadroubicado en las esquinas y al mismo tiempo mantenga oprimido la tecla Shiftmientras modifica la imagen.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).2. Seleccione la imagen, a través del inspector de propiedades, modifique loscampos An (anchura) o Al (altura).Para alinear las imágenes hay que hacerlo por medio del campo Alinear desdeel Inspector de Propiedades.Para la realización de este documento, se tomó como referencia el “ManualAdobe Dreamweaver CS3” de la empresa Adobe y el Sitio
MENÚA continuación se describirá los elementos más importantes del Menú de AdobeDreamweaver CS3:El menú Archivo contiene los elementos de menú estándar como Nuevo, Abrir,Guardar, Guardar como. También contiene otros comandos para la visualización o manipulación del documento actual, como Vista previa en el navegador e Imprimir código.El menú Edición contiene los elementos de menú estándar como Cortar, Copiar y Pegar. También incluye comandos de selección y búsqueda, como Seleccionaretiqueta padre, Buscar y reemplazar, y proporciona acceso al editor de Métodosabreviados de teclado y al Editor de la biblioteca de etiquetas.El menú Ver le permite obtener diversas vistas del documento (como la vistaDiseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de página y herramientas de Dreamweaver CS3.El menú Insertar ofrece una alternativa a la barra Insertar para la inserción deobjetos en el documento.El menú Modificar le permite cambiar las propiedades del elemento de páginaseleccionado. A través de este menú, puede editar los atributos de etiquetas,cambiar las tablas y elementos de tablas y realizar diversas operacionesrelacionadas con elementos de biblioteca y plantillas.El menú Texto le permite aplicar formato al texto fácilmente.El menú Comandos proporciona acceso a diversos comandos, entre otros, unopara aplicar formato al código en función de las preferencias de formato y otropara crear un álbum de fotos.El menú Sitio proporciona opciones de menú para crear, abrir y editar sitios, así como para administrar los archivos del sitio actual (en Macintosh).El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanasde Dreamweaver CS3.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).El menú Ayuda proporciona acceso a la documentación de Dreamweaver CS3,incluidos los sistemas de ayuda para la utilización de Dreamweaver y la creaciónde extensiones para Dreamweaver, además de información de referencia paradiversos lenguajes.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).COLORSe puede modificar el color de muchos objetos (texto, tablas, fondo de página,entre otros).Para la asignación del color se debe desplegar la paleta de colores, estos coloresse muestran de la misma forma tanto en Windows como en Linux.Pulse sobre el recuadro gris que se encuentra en el Inspector dePropiedades, de esta forma aparecerá la paleta de colores con un cursor en forma de gotero para seleccionar el color deseado, tanto de la paleta de colores o de cualquier otro color que señale con el cursor en la pantalla.Los colores se expresan en forma de valores hexadecimales después del carácter#, los dos primeros valores equivalen al rojo, los dos siguientes al verde y los 2restantes al azul ( #FF0000).En la parte superior de este recuadro muestra el valor hexadecimal del color.Si conoce el valor hexadecimal del color debe introducirlo en el recuadro blanco:Otro método para cambiar el color es ingresar en el recuadro blanco el nombre en inglés del color.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados). TEXTOEl Texto es una de las utilidades más importantes que trae la herramienta dediseño Dreamweaver, a continuación revisaremos sus principales opciones yaplicaciones.FormatoPermite establecer el estilo de párrafo para el texto seleccionado, puede serPárrafo, Encabezado y PredeterminadoNegrita y Cursiva Se aplican al texto seleccionado.FuentePermite especificar el conjunto de fuentes que se emplean en Dreamweaver CS3.Se encuentran fuentes, por la posibilidad que al establecer un tipo determinado de letra no la tenga instalada su computador.AlineaciónEl texto puede ser alineado a la izquierda, centrado, derecha y justificado.SangríaEstos botones permiten insertar o anular la sangría en el texto.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).ListasSe puede insertar el texto en forma de lista ya sea con viñetas o connumeración. Para realizar este cambio se debe desplazar a las propiedades dela Lista que se encuentran en el Menú Texto o en el Inspector de Propiedades.Viñetas: Lista sin ordenarNumeración: Lista Ordenada• Casa• Baño• Habitación1. Casa2. Baño3. HabitaciónCopyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).IMÁGENESAntes de incluir una imagen, debe guardar la página en la carpeta del Sitio.Para incluir una imagen en la página que fue guardada previamente, laimagen deberá estar guardada primero en la carpeta del Sitio que fue creado,sino lo está Dreamweaver le preguntará si desea copiar el archivo en el sitio.Para Insertar una Imagen:Coloque el punto de inserción en el lugar de la ventana de documento en el quedesea que aparezca la imagen y a continuación siga uno de estos procedimientos:• En la categoría Común de la barra Insertar, haga clic en el icono Imagen.• En la barra de menú Seleccione Insertar > imagen. Luego Busque y seleccioneel origen de imagen o contenido que desee insertar. En la parte inferior en laopción Relativa a seleccione Documento.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).En la parte inferior podrá observar que aparece el campo URL localizador uniforme de recurso (Uniform Resource locutor), es aquí donde se encuentra la ruta de ubicación de la imagen, la misma que aparece en el Inspector de Propiedades en el campo Origen.Si aparece un cuadro gris o un recuadro en blanco con una X roja, significa que la ruta esta de forma incorrecta, o puede ser que se ha modificado el nombre de la imagen, para solucionar esta situación se debe actualizar la ruta para que laimagen vuelva aparecer.Modificar el Tamaño de la Imagen:Existen 2 formas para realizar el cambio de dimensiones en una imagen:1. Seleccione la imagen y arrastre con el puntero alguno de sus recuadros negrosque aparecen alrededor de la imagen.Para cambiar el tamaño de manera proporcional, seleccione algún recuadroubicado en las esquinas y al mismo tiempo mantenga oprimido la tecla Shiftmientras modifica la imagen.Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).2. Seleccione la imagen, a través del inspector de propiedades, modifique loscampos An (anchura) o Al (altura).Para alinear las imágenes hay que hacerlo por medio del campo Alinear desdeel Inspector de Propiedades.Para la realización de este documento, se tomó como referencia el “ManualAdobe Dreamweaver CS3” de la empresa Adobe y el Sitio
Semana 4 : 5 de octubre de 2009
En el dia de hoy estuve en la sala informaticadel colegio creando una pagina web con codigos de html;donde la pagina se tenia que hacer con unas bases que la profesora nos dio: crear una pagina individual con 12 palabras en cursiva y negrilla, dos parrafo de diferente colores con imagenes y que tuviera mucha creatividad.Terminado todo esto la docente procedio a revisarlo y a darnos la nota.
DEL 29 DE SEPTIEMBRE AL 02 DE OCTUBRE
En esta semana la profesora nos dio una teoria acerca de la creacion de paginas web, enseguida nos dio un ejemplo para la creacion de la pagina web y asi nos dirigimos a la sala de computadores para la realizacion de este procedimos a hacer la pagina web sencilla y con mucha creatividad donde teniamos que hablar de la vida de cada una o terminada la clase procedimos a guardarlo en la memoria de la profesora para luego ella revisarmelo.
31 de agosto al 11de septiembre
Hardware: En este aprendí que el hardware es la parte física de un computador ,en esta destacan algunas partes tales como son: el teclado ,el mouse, la Cam, pantalla,cpuEl software: Es la parte intangible del computadorSistemas operativos: Es un sistema que controla la computadora Luego procedí a estudiarlo mas a fondo para exponerlo con mis compañeras del grupo. La cual se realizo por medio del video beam para mayor comodidad de todos y el trabajo estaba realizado en diapositivas para una mejor apreciación del grupo. terminado l exposición algunas compañeras nos preguntaban sus dudas del tema y nosotros procedíamos a responderlas y finalmente la docente nos dio la nota .
Semana 2: Del 14 al 25 de septiembre
La profe nos dio una guía e bases de datos para realizarlas en el computador. Terminadas de realizarlas las enviamos al correo de la profe pero tenían un tiempo limite para enviarlas.
En el dia de hoy estuve en la sala informaticadel colegio creando una pagina web con codigos de html;donde la pagina se tenia que hacer con unas bases que la profesora nos dio: crear una pagina individual con 12 palabras en cursiva y negrilla, dos parrafo de diferente colores con imagenes y que tuviera mucha creatividad.Terminado todo esto la docente procedio a revisarlo y a darnos la nota.
DEL 29 DE SEPTIEMBRE AL 02 DE OCTUBRE
En esta semana la profesora nos dio una teoria acerca de la creacion de paginas web, enseguida nos dio un ejemplo para la creacion de la pagina web y asi nos dirigimos a la sala de computadores para la realizacion de este procedimos a hacer la pagina web sencilla y con mucha creatividad donde teniamos que hablar de la vida de cada una o terminada la clase procedimos a guardarlo en la memoria de la profesora para luego ella revisarmelo.
31 de agosto al 11de septiembre
Hardware: En este aprendí que el hardware es la parte física de un computador ,en esta destacan algunas partes tales como son: el teclado ,el mouse, la Cam, pantalla,cpuEl software: Es la parte intangible del computadorSistemas operativos: Es un sistema que controla la computadora Luego procedí a estudiarlo mas a fondo para exponerlo con mis compañeras del grupo. La cual se realizo por medio del video beam para mayor comodidad de todos y el trabajo estaba realizado en diapositivas para una mejor apreciación del grupo. terminado l exposición algunas compañeras nos preguntaban sus dudas del tema y nosotros procedíamos a responderlas y finalmente la docente nos dio la nota .
Semana 2: Del 14 al 25 de septiembre
La profe nos dio una guía e bases de datos para realizarlas en el computador. Terminadas de realizarlas las enviamos al correo de la profe pero tenían un tiempo limite para enviarlas.
Suscribirse a:
Entradas (Atom)