INSTRUCTIVO PARA SABER COMO USARLO REALIZADO POR: Alicia Sangucho o 1
EDITORIAL Esta revista está dirigida a las personas que desean realizar una página web pero les resulta muy difícil, aquí les indicare paso a paso para que sirve cada una de las funciones que nos brinda el dreamweaver y lo fácil que es para poder usarlo. Además estará una variedad de imágenes en donde indicare en donde se encuentra cada una de las funciones mencionadas. Esta es una manera muy fácil y rápida de diseñar una página web de acuerdo al tema que nosotros deseemos y al diseño que tengamos pensado hacerlo.
2
EDITORIAL 1. CONCEPTO 2. COMO CREAR UNA NUEVA PAGINA EN DREAMWEAVER CS4 3. COMO CAMBIAR EL NOMBRE DE LA PAGINA 4. COMO CAMBIAR EL COLOR DEL FONDO DE LA PAGINA 5. COMO CAMBIAR EL TIPO DE LETRA Y EL TAMAテ前 EN UN TEXTO 6. BARRA DE HERRAMIENTAS A. ARCHIVO B. EDICION C. INSERTAR 7. OPCIONES DE LA PAGINA A. CODIGO B. DIVIDIR C. DISEテ前 D. VISTA EN VIVO 8. COMO AGREGAR UN VINCULO A LA PAGINA 9. COMO INSERTAR UNA BARRA DE MENUS 10.COMO INSERTAR UNA IMAGEN 11.COMO INSERTAR UN VIDEO 窶「 COMO INSERTAR UNA TABLA 12.ARGUMENTOS SOBRE DREAMWEAVER CS4
2 4 5 6 6 8 9 9 10 10 11 11 11 12 12 13 15 16 16 17 19
3
1.
DREAMWEAVER
Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basadas basada en estándares. Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Consortium La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C,, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace,, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
A continuación indicare cada una de las funciones del Dreamweaver y en donde se encuentra cada una de estas:
4
2. COMO CREAR UNA NUEVA PAGINA EN DREAMWEAVER CS4 Para crear una nueva pรกgina al momento de abrir el programa nos sale una ventana en donde debemos hacer clic en HTML y automรกticamente nos sale una pรกgina en blanco.
5
3. COMO CAMBIAR EL NOMBRE DE LA PAGINA Para cambiar el nombre de la pagina hacemos clic en ARCHIVO, GUARDAR COMO y nos sale una ventana en donde seleccionamos la carpeta o el lugar en donde queremos guardar la pagina y en la parte de abajo dice NOMBRE ah铆 escribimos en nombre que queremos ponerle a la pagina y hacemos clic en GUARDAR.
4. COMO CAMBIAR EL COLOR DEL FONDO DE LA PAGINA Para poder cambiar el color del fondo de la pagina vamos a la parte inferior del dreamweaver y ah铆 hay una opci贸n que dice propiedades de la pagina y hacemos clic en esa opci贸n y nos sale una ventana en donde podremos cambiar el color del fondo e incluso poner una imagen como fondo.
6
7
5. COMO CAMBIAR EL TIPO DE LETRA Y EL TAMAテ前 EN UN TEXTO Para poder cambiar el tipo de letra de un texto de igual manera nos vamos a propiedades de la pagina y en donde dice fuentes de la pagina podemos escoger el tipo de letra que nosotros deseemos y para cambiar el tamaテアo de igual manera esta en propiedades de la pagina debajo de fuente y hacemos clic en aceptar.
8
6. BARRA DE HERRAMIENTAS A. ARCHIVO Esta opción nos permite crear una nueva página, abrir una página que ya ha sido creada, abrir paginas creadas recientemente, cerrar la pagina, guardar la pagina que estamos creando, ver cómo está quedando la pagina abriéndolo en internet Explorer, salir del programa, etc.
9
B. EDICIÓN Esta opción nos permite deshacer o rehacer algo que ya estábamos haciendo, pegar cualquier grafico o texto que deseemos, seleccionar toda la pagina, buscar una página para reemplazarla por otra, etc.
C. INSERTAR Esta opción nos permite agregar etiquetas, imágenes, tablas, hipervínculos a nuestra página web de acuerdo a como este hecho nuestro diseño.
10
7. OPCIONES DE LA PAGINA A. CÓDIGO Esta opción nos permite ver los códigos de cada imagen, vinculo y todo lo que tenga nuestra página.
B. DIVIDIR Esta opción nos permite ver al mismo tiempo el código y el diseño de la página para saber en donde se encuentra cada diseño de la página.
11
C. DISEÑO Esta opción nos indica únicamente el diseño de la página sin los códigos.
D. VISTA EN VIVO Esta opción nos permite ver la página como queda después de todo lo que hayamos pues, es decir con imágenes vínculos, etc.
12
8. COMO AGREGAR UN VINCULO A LA PAGINA Para agregar un vínculo en la página con un texto debemos primero ingresar el texto, después de haber agregado seleccionamos y después nos vamos a la parte inferior del dreamweaver y en donde dice vínculo hacemos clic en la carpeta que esta alado y seleccionamos la página que deseemos que sea el vínculo y hacemos clic en aceptar. Ese es el mismo procedimiento si nosotros queremos que una imagen sea un vinculo solo que en lugar de seleccionar el texto seleccionamos la imagen y realizamos los mismos pasos.
13
9. COMO INSERTAR UNA BARRA DE MENÚS Para insertar una barra de menús nos vamos a la opción insertar y hacemos clic en SPRY y seleccionamos BARRAS DE MENUS SPRY.
Después nos sale una ventana en donde nos pide que seleccionemos como queremos que quede el diseño de la barra si deseamos de forma horizontal o vertical y aceptar.
14
Cuando aceptemos nos va a salir la barra ahí vemos si deseamos aumentar o disminuir la barra eso se realiza en la parte inferior de la pagina.
Para cambiar los nombres de los botones seleccionamos la palabra y cambiamos el nombre y para hacer vínculo con otra página hacemos clic en la carpeta de vínculo y seleccionamos la página que deseemos.
15
10. COMO INSERTAR UNA IMAGEN Para insertar una imagen nos vamos a la opci贸n insertar y hacemos clic en imagen en ese momento nos va a salir una ventana en donde debemos seleccionar la imagen que deseemos que aparezca en nuestra p谩gina y hacemos clic en aceptar.
11. COMO INSERTAR UN VIDEO Para insertar un video en la pagina primero debemos crear una tabla la cual se la crea en la opci贸n insertar y haciendo clic en tabla.
16
Nos sale una ventana en donde debemos poner cuantas filas y columnas deseamos que tenga nuestra tabla y si queremos que tenga grosor o no los filos de la misma.
Después de haber creado la tabla seleccionamos el recuadro en donde deseemos que este el video y hacemos clic en VER y seleccionamos CODIGO. Se nos abre la página de códigos y en donde está el cursor es en donde debemos pegar el código del video. Para obtener el código del video nos vamos a la pagina del youtube y en la parte inferior del video hacemos clic en insertar, de esa manera nos sale un código el cual lo debemos copiar y pegar en la parte que dijimos anteriormente en el dreamweaver.
17
Después de haber pegado el código en la página del dreamweaver nos vamos a la opción VER y seleccionamos DISEÑO y nos va a salir el video en el recuadro que escogimos en la tabla. Para poder ver el video en nuestra página aplastamos la tecla F12 y automáticamente se guarda y se nos abre en el internet.
18
12. ARGUMENTOS SOBRE EL DREAMWEAVER CS4 PROS: • • • •
Extremadamente potente: contiene infinidad de funciones que nos facilitaran mucho el trabajo. Multilenguaje: no solo podremos crear páginas web en HTML, sino que también reconoce código PHP, JavaScript, CSS, etc. Varias vistas de entorno: es decir, podemos acomodar la interfaz como más nos guste. Vista en vivo: el nuevo Dreamweaver CS4 contiene una funcionalidad única, se llama "vista en vivo" y lo que hace es emular un navegador web (el que nosotros le digamos, puede ser Internet Explorer, Firefox, etc.) mostrando cómo va quedando nuestra página web sin necesidad de abrir ventanas ni nada parecido.
CONTRAS: •
• •
No es multiplataforma: seguramente estas utilizando Windows en este momento y este punto no te afecta, pero las personas que utilizan Linux no podrán usarlo sin programas de terceros. Pesado: si tu maquina no es medianamente potente se te hará pesado trabajar con él. Pago: no es gratuito, para usarlo deberás pagar su licencia de US$399.
http://www.comocrearunsitioweb.com/curso-tutorial-dreamweaver
19