Please enable JavaScript.
Coggle requires JavaScript to display documents.
Diseño de páginas en Dreamweaver :pencil2: (:bookmark_tabs: Barra de menu…
Diseño de páginas en Dreamweaver :pencil2:
Pasos para crear un documento nuevo
:new:
:one: En la pantalla inicial da clic en la opción New → HTML Document.
:two: En la siguiente pantalla presiona New Document, en Document Type selecciona HTML y presiona el botón Create
Pasos para abrir un documento
:door:
:one: En la pantalla inicial haz clic en la opción Open, en la columna central de Open Recent.
:two: Se despliega la siguiente pantalla, da doble clic sobre el archivo que desees abrir.
:bookmark_tabs:
Barra de menu
es un área de la interfaz de usuario que indica y presenta las opciones o herramientas de Dreamweaver CC.
:books:
Pestaña del documento
: indica el nombre del archivo que se encuentra activo o en uso
:orange_book:
Barra de herramientas estándar
: contiene iconos para realizar las acciones más habituales del menú Archivo y Edición.
:bookmark:
Barra de herramientas de documento
: contiene iconos que permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en multipantalla, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.
:notebook:
Barra de propiedades
: es una de las más importantes, muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto, mostrará el tipo de fuente, la alineación, o si está en negrita o cursiva.
:put_litter_in_its_place:
Área de paneles
: contiene diversos paneles, por ejemplo para la edición de objetos.
:eyes:
Vistas del proyecto
: te permite elegir entre la vista de diseño, vista de código o ambas, según tus necesidades.
:bookmark:
La barra de estado:
también llamada selector de etiquetas, indica la lista de etiquetas según se sitúe el cursor.
Tipos de vistas
:eye:
:check: La vista Diseño: se muestra a través del botón de Design, permite trabajar con el editor visual.
:check: La vista Código: se muestra a través del botón de Code, se utiliza para trabajar en un entorno totalmente de programación, de código fuente.
:check: La vista Código y Diseño: se muestra a través del botón de Split, permite dividir la ventana en dos zonas.
Ubica el ícono de Dreamweaver CC y actívalo,da clic en la opción New → HTML Document. :newspaper:
:floppy_disk:Las
plantillas de diseño
son una serie de páginas ya creadas, están disponibles en la página de inicio en la columna Starter Templates, cada una de ellas tiene diferentes diseños de página para que tú elijas la que más se acople a tus necesidades.
:check:Edit: edición de la configuración de imagen, si se dispone del software de Adobe Photoshop, la imagen se abrirá con este software para que se pueda modificar.
:check: Rows: el número de filas.
:check: Columns: la cantidad de columnas.
Table width: se establece en pixeles (ancho fijo) un porcentaje con respecto al elemento que la contiene.
:check: Border thickness: indica el espesor de la línea exterior de la tabla, si el grosor es de cero o vacío, oculta el borde.
:check:Cell padding: indica la distancia entre el contenido de las celdas y sus bordes.
:check: Cell spacing: indica la distancia entre las celdas de la tabla.
:check: Header: se utiliza para indicar si se desea tener encabezado en una fila, una columna o ambos.
:check: Width: establece el ancho en pixeles.
:check: Height: establece el alto en pixeles.
:check: Alt: especifica un texto alternativo que se desplegará al momento de situar el mouse sobre el centro la imagen.
:check: Src: es la ruta donde se encuentra ubicada la imagen. E