 Curso de Diseño de Páginas Web - Tutorial de Diseño de Páginas web |
 |
 |
MODULO 2 - CURSO DE DISEÑO DE PÁGINAS WEB |
En este módulo veremos los diferentes programas para el diseño de páginas web. Veremos mucho más a fondo el Macromedia Dreamweaver, que es una de las herramientas de diseño más completas.
 Programas de Diseño de Paginas Web
Macromedia Dreamweaver
Descargar Macromedia Dreamweaver
Instalación de Dreamweaver
Configuración de Dreamweaver
Evaluación
|
| |
|
 Programas de Diseño de Páginas Web |
Para diseñar una página web , no es necesario de utilizar un programa especifico, si conocemos el código HTML, podríamos desarrollar nuestras páginas web incluso, desde el NotePad que viene con el Windows.
Para comprobarlo, hagamos la siguiente tarea:
1. Abrimos nuestro editor de texto NOTEPAD o Bloc de Notas. (Inicio » Programas » Accesorios » Bloc de Notas)
2. Al abrir el programa, escribamos el siguiente código: |
| |
|
<html>
<head>
<title>Bienvenidos a mi pagina web</title>
</head>
<body>
este es el contenido de mi primera pagina web
</body>
</html> |
|
| |
| Al terminar, le damos Archivo » Guardar y le colocamos como nombre: pagina.html. Ahora abrimos el archivo y vamos a ver algo como esto: |
| |
|
| |
| Esto es una sencilla página web, en la que tenemos: Título y Contenido textual. Vamos a explicar el código un poco, para que puedan entender lo que hace cada línea: |
| |
| 1. Línea: <html> |
| Para iniciar siempre una página web, debemos empezar a por la etiqueta <html>, esta etiqueta es necesaria para que nuestros navegadores puedan identificar el contenido que va a mostrar. |
| |
| 2. Línea: <head> |
| La etiqueta HEAD la contienen todos los documentos y es la cabecera de información y siempre aparece en la parte superior del documento. |
| |
| 3. Línea: <title>Bienvenidos a mi pagina web</title> |
| Se encuentra situado entre la etiqueta HEAD y es la que le da el título al documento. Por lo general aparece en la parte superior. |
| |
| 4. Línea: </head> |
| Este es el cierre de la etiqueta Head, Es necesario cerrar cada una de las etiquetas para que no existan errores. |
| |
| 5. Línea: <body> |
| La etiqueta BODY se pone después de la estructura HEAD y dentro del la etiqueta BODY se pone todo el contenido de la página web: imágenes, textos, ligas (links) etc. La etiqueta BODY es importante para que no se pierdan los parámetros de otras etiquetas. |
| |
| 6. Línea: este es el contenido de mi primera pagina web |
| Esta frase es el contenido de la página web, si queremos ver mucho más contenido, puedes escribir más texto en esta parte. |
| |
| 7. Línea: </body> |
| Esta es la etiqueta de cierre de la etiqueta <body> |
| |
| 8. Línea: </html> |
| Esta es la etiqueta de cierre de la etiqueta <html> |
| |
| Veremos un poco más acerca del código HTML en los siguientes módulos para realizar documentos web mucho más complejos. |
| |
Los programas que existen en el mercado, simplemente lo que hacen es escribir el código HTML solo con hacer unos simples clic desde el programa.
Los más utilizados son: Macromedia Dreamweaver, Microsoft Front Page, Adobe GoLive, HomeSite, Web Developer, etc.
En nuestro curso veremos todo sobre Macromedia Dreamweaver, Considerado como el más completo programa de diseño y programación de páginas web. |
| |
|
| Macromedia Dreamweaver |
Dreamweaver 8 es 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 le proporciona útiles herramientas que mejorarán su experiencia de creación Web.
Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash.
Dreamweaver también ofrece un entorno de codificación con todas las funciones, que incluye herramientas para la edición de código (tales como coloreado de código y terminación automática de etiquetas) y material de referencia de lenguajes sobre hojas de estilos en cascada (CSS), JavaScript, y ColdFusion Markup Language (CFML), entre otros. La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera.
Dreamweaver permite crear aplicaciones Web dinámicas basadas en bases de datos empleando tecnologías de servidor como CFML, ASP.NET, ASP, JSP y PHP.
Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar métodos abreviados de teclado e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios. |
| |
|
| Descargar Macromedia Dreamweaver |
Dentro del curso de Diseño de Páginas web, vamos a utilizar Macromedia Dreamweaver. Para que puedas desarrollar todas las tareas y aprender más de ésta herramienta, debemos descargar la versión gratuita de 30 días. Esta versión nos permitirá desarrollar todas las tareas sin limitaciones.
Para descargar, debemos hacer clic en este enlace: www.adobe.com/la/products/dreamweaver Cuando entremos a éste sitio, debemos hacer clic en "Versión de prueba gratuita para 30 dias" |
| |
|
| |
Al ingresar en este Link, vamos a encontrar un formulario en donde nos piden un Email y la clave de acceso, como nosotros no tenemos esta clave de acceso, debemos crear una cuenta
Para crar nuestra cuenta, debemos ir al formulario en la parte de Inscríbase o inicie una sesión ahora, Ahora en el formulario, debemos ingresar nuestro Correo Electrónico, y como no tenemos una clave de acceso, en la pregunta de "Tiene una contraseña para Adobe", seleccionamos: No, creare una cuenta ahora. y luego hacemos clic en el botón Continuar. |
| |
|
| |
La siguiente página, nos muestra un formulario más completo en el cual, debemos llenar todos los campos que tengan el asterisco rojo *
Cuando finalicemos, recibiremos un email confirmando nuestra cuenta de acceso y luego, ingresamos nuevamente a: www.adobe.com/la/products/dreamweaver, hacemos click en Versión de Prueba Gratuita y luego llenamos el formulario con los datos que recibimos en el email.
Cuando le demos en Continuar, entraremos en una nueva página donde nos muestran todos los productos Macromedia que podemos descargar de forma gratuita.
Para este curso, debemos descargar el Macromedia Dreamweaver Versión Español: |
| |
|
| |
|
| Instalando el Macromedia Dreamweaver |
| |
| Cuando descarguemos el archivo, debemos ejecutarlo para poder instalarlo en nuestro computador, al hacerle doble clic, veremos la siguiente ventana: |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| Cuando le demos finalizar, nos pregunta si tenemos un serial para nuestro equipo, debemos seleccionar Evaluar. Luego nos muestra una pequeña ventana que pregunta hacerca del modo de programación, debemos seleccionar MODO DISEÑADOR y listo. Ya tenemos instalado nuestro MACROMEDIA DREAMWEAVER. |
| |
|
| Configurando el Macromedia Dreamweaver |
| |
| El primer paso que debemos hacer después de haber instalado el macromedia dreamweaver, es configurar nuestro sitio web. Para ésto, debemos seguir los siguientes pasos: |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| Al hacerle clic en LISTO, vamos a finalizar de configurar nuestro sitio web. Podemos realizar este paso cuantas veces queramos para agregar multiples sitios web. Ahora ya podremos realizar nuestros primeros ejemplos de diseño de páginas web en nuestro siguiente módulo. |
 |
Principal
Servicios
Clientes
Soporte
Contáctenos
Webmail 
Diseño de Páginas Web
Contacto Rápido 
