Curso de Dreamweaver MX

Cursos Relacionados:

Referencias de HTML.

HTML es el lenguaje con el que se escriben las páginas Web. Las páginas Web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas Web al usuario, siendo hoy en día la interface más extendida en la red.
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura (de forma general <etiqueta>) y Un cierre (de tipo </ etiqueta>)

En esta lección vamos a ver las etiquetas fundamentales de las que se compone toda página web.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


<HTML> y </HTML>.

Son las etiquetas que delimitan todo documento HTML, al principio y al final del mismo. Entre esta etiquetas  podemos distinguir dos partes principales: el encabezamiento (<head>) y el cuerpo (<body>).


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


<HEAD> y </HEAD>.

Esta etiqueta delimita el encabezamiento de una página Web (la cabeza). Contiene etiquetas de índole informativo, como por ejemplo la etiqueta <title> que determina el título de nuestra página.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


<BODY> y </BODY>.

Delimita el contenido visual de la página (el cuerpo). Aquí iremos colocando texto, imágenes y demás, que tendrán su traducción a etiquetas de HTML como iremos viendo.

La etiqueta BODY puede albergar atributos, que determinan las características generales del cuerpo de la página Web, como bgcolor (color del fondo de la página), background (imagen de fondo de la página), text (color del texto), leftmargin (margen izquierdo), topmargin (margen superior), etc.

Ésta será la estructura básica del código HTML de una página web vacía (con el body por rellenar):

Entre la etiqueta <body> y </body> se incluirán todas las etiquetas que generan la página Web. El texto incluido entre <title> y </title> es el texto que aparece en la barra de título del navegador al abrir una página.

Podemos ver un ejemplo al pulsar la vista de código HTML en un documento nuevo. A medida que vayamos avanzando podemos comprobar la traducción a código HTML de todo lo que veamos por medio de esta vista.

¡Truco!
Si tienes curiosidad por ver el código HTML de cualquier página Web mientras navegas por Internet; Pon el cursor encima de ella (donde no haya una imagen) y pulsa el botón derecho del ratón, selecciona Ver código fuente, y se te abrirá un documento de texto con todo el código.

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Gestión de Páginas.

En esta sección explicamos las operaciones básicas sobre páginas Web. Antes de crear una página Web debemos crear un sitio Web, de tal modo que sirva de contenedor para todas las páginas que se creen.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Crear una página Web.

Este método crea una página suelta, es decir, hasta que no guardemos este nuevo documento no pertenecerá a ninguna carpeta, no tendrá una localización definida.

  1. Seleccionamos la opción Archivo>Nuevo, al hacerlo se abrirá el cuadro de dialogo de Nuevo Documento.


    Este mismo cuadro aparece cuando pulsas este botón en la Ventana de bienvenida:

  2. En la lista de categorías de la izquierda elegimos Página básica, es decir, sin un diseño predefinido.
  3. Hacemos clic en Crear.

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Guardar una página.

Con el método anterior hemos creado un página pero no la tenemos guardada dentro de un Sitio Web. Para guardar una página nueva los pasos a seguir son:

  1. Seleccionamos Archivo>Guardar o hacemos cilc sobre el botón de la barra de herramientas Estándar.
  2. En el cuadro de diálogo Guardar como, accedemos a la carpeta raíz del sitio (en nuestro ejemplo, la carpeta CursoDw ).
  3. Introducimos el nombre de archivo .htm ( por ejemplo; index.htm)
  4. Hacemos clic en Guardar.

El nombre de archivo y su localización en la carpeta del sitio aparecerán ahora en la barra de título de la ventana de documento, entre paréntesis, después de las palabras “Documento sin título”, al igual que en su solapa superior.

¡OJO! Para evitar problemas con los distintos servidores de página Web, te aconsejamos que los nombres de páginas e imágenes de un Web cumplan estas indicaciones:

  • El nombre no debe ser muy largo.
  • No utilizaremos espacios en blanco.
  • No utilizaremos signos de puntuación (acentos, puntos,...)
  • No utilizaremos Mayúsculas.
  • En fin, no utilizaremos signos raros (!%&*.), incluida la ñ

SI QUIERES INCUMPLIR TODAS ESTAS REGLAS, cuando tengas que guardar por primera vez una página le puedes dar el nombre de Página informativa de Logroño.htm, ya verás qué cantidad de problemas  te surgen cuando la publiques en un servidor Apache de Internet.

Esta solapa de la ventana de documento, solo visible cuando está maximizada, nos ayuda a pasar de una a otra página cuando estamos trabajando con varias a la vez. Cada una tendrá su solapa superior como esta.
Además, nos indica si ese documento tiene modificaciones que hay que guardar: en ese caso aparece un asterisco * al lado del nombre del archivo.

Para guardar esa modificación podemos pulsar el botón derecho del ratón en esa solapa y elegir Guardar (guardar los cambios en ese archivo) o Guardar todo (guardar todos los cambios de los archivos que estén abiertos).


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Crear una página desde la solapa Archivos.

La solapa Archivos es útil para realizar operaciones con los archivos que contenga el sitio (páginas Web, imágenes, carpetas,..). En capítulos posteriores explicaremos de forma detenida esta solapa y su importancia. Por ahora explicaremos algunas opciones puntuales por su rapidez y utilidad práctica.

Éste es un método rápido para crear archivos .htm en nuestro sitio.

  1. Abrimos el menú de paneles y visualizamos la solapa Archivos, si está cerrado seleccionamos Ventana>Archivos.
  2. Hacemos clic sobre la carpeta raíz del sitio para seleccionarla. Ésto es importante ya que la carpeta que seleccionemos al principio es donde se creará el nuevo archivo.
  3. Pulsamos sobre ella con el botón derecho del ratón. De la lista de opciones que se nos ofrece elegimos la primera: Nuevo documento.


  4. Ya está el archivo en la carpeta raíz, ahora podemos introducirle el nombre al archivo como a cualquier otro, clic con el botón derecho del ratón y elegimos Cambiar nombre.

ATENCIÓN
El BOTÓN DERECHO del ratón suele ser el método más rápido para la realización de la mayoría de tareas.
Además este método te crea el nuevo documento directamente dentro de la carpeta del sitio web, sin tener que guardarlo ¡Perfecto¡

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Abrir una Página.

Para abrir una página Web actuamos como sigue:

  1. Seleccionamos Archivo>Abrir o hacemos cilc sobre el botón de la barra de herramientas Estándar.
    También podemos pulsar este botón en la ventana de bienvenida:
  2. Si la página corresponde al sitio Web que está abierto hacemos clic sobre ella y a continuación sobre el botón Abrir. Si la página se encuentra en otro sitio Web u otra carpeta desplegamos la lista Buscar en y seleccionamos dicha ubicación.

Consejo:
El mejor método para abrir una página es utilizar la solapa Archivos. Para abrir una página del sitio en el que estamos trabajando solamente tenemos que hacer doble clic en el archivo .htm que queramos.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Cerrar una Página.

Para cerrar una página Web que se está editando seleccionamos la opción Archivo>Cerrar o pulsamos la X de la ventana de documento.

Si se han realizado modificaciones sobre la página y no se han guardado al cerrar la misma el editor dará la opción de guardar o no los cambios.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver MX y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver MX y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.