HTML DREAMWEAVER
En este tema no se pretende enseñaros
el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en el
código estando dentro de Dreamweaver.
Ya sabes que el lenguaje HTML está
basado en etiquetas que marcan el inicio y fin de cada elemento de la
página Web.
En el primer tema vimos como ejemplo
las etiquetas que hay que incluir en el código HTML de una página para darle un
título. Consistía simplemente en escribir el título deseado entre las
etiquetas .
Las 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 /, indica
final y se suele denominar etiqueta de cierre.
Las etiquetas disponen
de atributos que permiten definir características del elemento sobre
el que actúan, incluyendo cierto código dentro de la etiqueta.
Por ejemplo, un párrafo se inserta
entre las etiquetas y
, pero es posible cambiar sus
características predeterminadas, como puede ser asignarle una clase de estilo
CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el
atributo y su valor, quedando y . También hay elementos que no
precisan insertar etiqueta de cierre. Por ejemplo,
un May + INTRO dentro del código HTML equivale a la
etiqueta
. Realmente estas etiquetas si tienen
cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTMLque obliga a que todas las etiquetas se cierren. Por tanto
el salto de línea anterior se escribiría
Otras etiquetas que
se cierran sobre sí mismas son las imágenes , reglas horizontales
DE DREAMWEAVER
El entorno de Dreamweaver
Vamos a ver cuáles son los elementos básicos de
Dreamweaver , 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.
Ruta :
Clic en Inicio
Clic en todos los programa
Clic en Macromedia
Clic en Macromedia
Dreamweaver.
La 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.
Las barras
La barra de la aplicación.
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.
Los botones propios de la aplicación, que aparecen junto al
icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o
código, acceder a las extensiones que se pueden añadir, o al administrador de
sitios, que ya veremos.
Más hacia la derecha observamos el conmutador del espacio
de trabajo, como un desplegable. Un espacio de trabajo es la configuración del
entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo
veremos más adelante.
Los menús, están agrupados en categorías.
Las pestañas de documento.
Dreamweaver CS4 añade una novedad. 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 de estado.
A la izquierda, encontramos el selector de etiquetas. Nos sirve
para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos
las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos
como el tamaño de la ventana, el tamaño de la página o su codificación.
Hasta aquí las barras que siempre veremos en la aplicación. A
parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.
La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para
realizar las acciones más habituales del menú Archivo yEdición. De
izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar,
Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y
Rehacer.
La barra de herramientas de documento.
La barra de representación de estilos.
Como veremos al personalizar el entorno, algunos paneles,
como Insertar nos permiten colocarlo como otra barra de herramientas.
No hay comentarios:
Publicar un comentario