dreamweaver

11
Pertenece a: Diego Carvajal Curso: 11 A Profesora: Analida Carvajal 2013

Upload: diego-carvajal

Post on 16-Jul-2015

107 views

Category:

Education


1 download

TRANSCRIPT

Page 1: dreamweaver

Pertenece a:

Diego Carvajal

Curso:

11 A

Profesora:

Analida Carvajal

2013

Page 2: dreamweaver

Menu:

¿Qué es dreamweaver?.

¿Cómo tener una pagina en internet?.

Entorno de dreamweaver.

Propiedades HTML del texto.

¿Como insertar una tabla?.

Crear plantillas.

Insertar una imagen

Page 3: dreamweaver

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Page 4: dreamweaver

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con

servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El

precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio

en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco

espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que

tener también en cuenta que estas empresas deben generar ingresos de alguna forma, 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 una

empresa, 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 un

dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un

dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar

repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas.

Es posible registrar un mismo nombre con distintas terminaciones, como por

ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que

nuestra página no será más que un archivo dentro de la de la empresa contratada.

Page 5: dreamweaver

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

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 luego querrás que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para 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) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

Page 6: dreamweaver

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la pantalla, las barras, los paneles, etc..., para saber

diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener

ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de

empezar a crear páginas web.

Pantalla inicial.

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos

los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y

en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede

decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.

Page 7: dreamweaver

Barra de aplicación:

Pestañas de documento:

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá

cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene

cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder

a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.

Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de

estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante

tiempo.

La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si

tenemos la ventana maximizada veremos todos los elementos de la barra

ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen

superior.

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la

parte inferior), varios botones propios de la aplicación, el conmutador de

espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

Page 8: dreamweaver

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos

personalizarlas con CSS para que se vean exactamente como queramos.

Formato:

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado.

Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto

aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al

establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir

siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de

cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos

personalizarlo.

Estilo:

El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre

<em></em>, que por defecto se ve en cursiva.

Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por

ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que

los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo.

Además, emplea etiquetas que están en desuso.

Lista:

Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.

Sangría:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos

lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.

Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada

hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

Page 9: dreamweaver

para insertar una tabla hay que dirigirse al menú insertar, a la opción Tabla.

Page 10: dreamweaver

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, que se puede

abrir a través del menú Ventana, opción Activos.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las

plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.

Page 11: dreamweaver

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen.

Después de esto, ya es posible seleccionar una imagen a través de la nueva

ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación

de teclas Ctrl + Alt + I.