Sistema de Gestión   de la Calidad                          REGIONAL META                       Fecha: Abril 17 de 2012   ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Sistema de Gestión   de la Calidad                         REGIONAL META                       Fecha: Abril 17 de 2012    ...
Próxima SlideShare
Cargando en…5
×

Unidad 1

631 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
631
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
23
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Unidad 1

  1. 1. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 1 de 14 UNIDAD 1. CONCEPTOS BÁSICOS DE DREAMWEAVER CS5Qué es Dreamweaver CS5Dreamweaver CS5 es un software fácil de usar que permite crear páginas webprofesionales.Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamentediseño y funcionalidad a las páginas, sin la necesidad de programar manualmente elcódigo HTML.Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientosJavaScript, etc.., de una forma muy sencilla y visual.Además incluye un software de cliente FTP completo, permitiendo entre otras cosastrabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sinsalir del programa.Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradasDreamweaver y Adobe.Las páginas web están escritas en HTML. Conozcamos las características básicas de HTML.Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper TextMarkup Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin decada elemento de la página Web.Por ejemplo, el título de la página Web se escribe entre las etiquetas <title> y </title>.Como ves, ambas etiquetas consisten en poner un mismo comando entre los símbolos "<"y ">". La primera etiqueta indica inicio, y la segunda, que incluye el símbolo "/", indicafinal.Las etiquetas disponen de atributos que permiten definir características del elementosobre el que actúan. Por ejemplo, <table border="1"> indica que la que se trata de unatabla, y que tendrá un borde de grosor 1.
  2. 2. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 2 de 14Una página HTML básica tendría el siguiente aspecto:<html> <head> <title> Mi primera página web </title> </head> <body> <p><a href="http://www.google.com.co/"> Haz clic aquí para ir a Google</a> y aprender más sobre páginas web.</p> </body></html>El ejemplo anterior mostraría una página con un sólo párrafo en el que parte del textoenlaza con la web de Google. Puedes probarlo copiando el código y pegándolo en unarchivo de texto, que debes guardar con la extensión .htm.Observa que cada etiqueta tiene una apertura y un cierre, y que están anidadas unasdentro de otras.Las etiquetas que se introducen en un documento HTML no son visibles cuando eldocumento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuandoun usuario desde Internet solicita ver una página el servidor Web envía la página alnavegador y este interpreta las etiquetas para dar la página correctamente formateada.Cuando utilizamos Dreamweaver para crear una página Web no tenemos quepreocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetasnecesarias para construir la página con la apariencia y contenido definidos en el editorgráfico. Esto nos facilita muchísimo el trabajo.Novedades de Dreamweaver CS5En este punto comentaremos las características que aporta esta nueva versión sobre laanterior.Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglésContent Management System, abreviado CMS) es in interfaz o programa que nos permitegestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaverintegra con los principales, permitiéndos crear nuestras páginas con la estructuraadecuada.
  3. 3. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 3 de 14Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente losmárgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si sonpropias, como heredadas de los elementos padre.Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de Adobe, quenos permite comparar cómo se ve una misma página web en las distintas versiones deInternet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.Este servicio es fácilmente accesible desde Dreamweaver, pero realmente cualquierapuede usarlo desde su página web. Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio local yremoto. Ya que se han simplificado las opciones esenciales, y distinguido más las opcionesavanzadas y poco importantes.
  4. 4. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 4 de 14 Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.Editar páginas webCualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear losdocumentos con la extensión HTML o HTM, e incluir como contenido del documento elcódigo HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows parahacerlo.Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizandoun editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno delos elementos de la página, al mismo tiempo que es más complicado crear una aparienciaprofesional para la página, sobre todo si no estamos demasiado familiarizados con elHTML. Aunque también es cierto que escribir el código nos da más control sobre él, ysobre todo al principio, nos ayudará a aprenderlo rápidamente.Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados,y que destaca por su sencillez y por las numerosas funciones que incluye, es AdobeDreamweaver.Además de Dreamweaver, existen otra serie de buenos editores de páginas web, comopueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus.Algunos de los cuales tienen la ventaja de ser gratuitos.Cómo tener una página en InternetPara poder poner una página web en Internet, es necesario contratar a alguna empresacon servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día.
  5. 5. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 5 de 14El precio por disponer de espacio propio en el servidor dependerá de la empresa, delespacio en disco, volumen de transferencia y otras opciones que podamos contratar.Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: pocoespacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hayque tener también en cuenta que estas empresas deben generar ingresos de algunaforma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas,publicidad que no podremos negarnos a incluir en ellas.Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de unaempresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.Cuando se va a contratar un servicio de hospedaje es necesario contratar también undominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar undominio consiste en registrar un nombre para nuestra página. Este nombre no puedeestar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de lasempresas. Es posible registrar un mismo nombre con distintas terminaciones, como porejemplo, .net, .org, .es o .com.En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya quenuestra página no será más que un archivo dentro de la de la empresa contratada.A la hora de contratar un servicio de hospedaje también hay que tener en cuenta elnúmero de cuentas de correo electrónico propias que pueden habilitarse y si disponemosde una base de datos para poder acceder a ella a través de programación vía Web, aunqueesto último será útil sólo para usuarios avanzados.En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luegoquerrás que se encuentre a disposición de todo el mundo en Internet.Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla atu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivostal y como aparecen en tu disco duro, respetando el nombre de los archivos y laorganización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos yenlaces que no funcionarán.Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, niespacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás deque el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivosque alojes en él.
  6. 6. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 6 de 14Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir,también, los nombres en minúscula. Algunos servidores (los que utilizan linux) distinguenentre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagenfoto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidasbuscando fallos.Arrancar y cerrar Dreamweaver CS5Veamos las dos formas básicas de arrancar Dreamweaver CS5.• Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa.• Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones:• Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.• Pulsar la combinación de teclas Alt + F4.• Hacer clic sobre el menú Archivo y elegir la opción Salir.Si existe algún documento modificado que no ha sido guardado antes de cerrarDreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.Abrir y guardar documentosPara abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:• Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).• Pulsar la combinación de teclas Ctrl + O.
  7. 7. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 7 de 14• Hacer clic sobre el menú Archivo y elegir la opción Abrir....• Hacer doble clic sobre el archivo en la ventana del sitio.• Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS5.Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:• Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).• Pulsar la combinación de teclas Ctrl + N.• Hacer clic sobre el menú Archivo y elegir la opción Nuevo.Después de esto aparecerá una nueva ventana, en la que deberás elegir la CategoríaPágina en blanco.En la segunda columna seleccionamos HTML, observamos que hay muchos diseños yacreados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. Acontinuación pulsamos el botón Crear.
  8. 8. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 8 de 14Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.• Hacer clic en el botón Guardar de la barra de herramientas estándar.• Pulsar la combinación de teclas Ctrl + S.• Hacer clic sobre el menú Archivo y elegir la opción Guardar.Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamentecon varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno poruno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.• Hacer clic en el botón Guardar todo de la Barra de herramientas estándar.• Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechasen cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya queen ocasiones es posible no desear guardar los cambios en todos los documentosmodificados. Por ello es conveniente que al principio no utilices esta opción, al menoshasta que te hayas habituado a manejar el programa. De todas formas, observa quecuando hay cambios sin guardar aparece un * tras el nombre del documento.Mi primera páginaPara que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear unapágina web sencilla, con varios estilos de texto, una imagen y un enlace a otra página.Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con loselementos básicos con los que están hechas la mayoría de las páginas web. Si nunca hashecho una página web, este es el momento para descubrir lo fácil que es. Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anteriorcomo puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica,HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
  9. 9. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 9 de 14Una vez introducido el texto, vamos a modificar el título y el color de fondo deldocumento.Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de lapágina.Entonces se abrirá una ventana como la que aparece a continuación:
  10. 10. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 10 de 14En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser decolor azul.Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.Para aplicar los cambios, pulsa sobre el botón Aceptar.Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en lacarpeta donde estamos creando nuestras páginas, habitualmente en una subcarpetadedicada a las imágenes.Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacerclic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, seabre una ventana con una opción similar a Guardar imagen como... (dependiendo delnavegador que utilices) que permite grabar dicha imagen en un fichero de nuestro discoduro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar losderechos de autor de la imagen.Copia la imagen que aparece a continuación, para luego poder insertarla en la página webque estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas decrear.
  11. 11. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 11 de 14Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar,situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter).Después nos dirigimos al menú Insertar, opción Imagen.En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que lahabías guardado, seleccionarla y pulsar Aceptar.Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspectorde propiedades que se encuentra normalmente en la parte inferior de la ventana, y quetiene el siguiente aspecto:Si no te aparece, puedes mostrarlo a través del menú Ventana, opción Propiedades.
  12. 12. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 12 de 14Si lo que te ocurre es que únicamente te aparece el título del panel, es porque estácontraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades.Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica elformato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando elicono CSS a la izquierda.Mediante el inspector de propiedades en Dreamweaver CS5 accedemos tanto a laspropiedades de CSS como a las propiedades de HTML.Podemos decir que en una página web, HTML se encarga de estructurar el contenido, lainformación, mientras que CSS se encarga de mostrar ese contenido con el formatoadecuado.Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al textomediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre eldiseño de la página Web y reducen el tamaño del archivo.Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, paraaplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial,Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagensiguiente:
  13. 13. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 13 de 14Observa que hemos centrado el texto pulsando en el botón .Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en línea>,marca los botones para ponerlo en negrita y cursiva respectivamente.Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es elcontenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de laspropiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo comohemos visto hasta ahora, pulsando en .Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panelde Propiedades a las propiedades de HTML.En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:
  14. 14. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 1 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 14 de 14Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo,desde la opción Guardar.Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Porejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la mismacarpeta que la imagen descargada.Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.Podrás ver cómo debería haber quedado la página después de haber seguido todos lospasos anteriores.

×