Tutorial de Dreamweaver


Tutorial de Dreamweaver para crear un sitio webComo saben, este sitio trata sobre cómo hacer un sitio web. Puedes aprender diferentes formas usando WordPress, Joomla o Drupal. Incluso tenemos una guía sobre el uso de HTML puro como en los viejos tiempos (obviamente con HTML5, la última versión). En este tutorial de Dreamweaver para principiantes, aprenderá otro..


Para aquellos que no lo saben, Dreamweaver es una aplicación que le permite diseñar, codificar y administrar sitios web. Lo interesante de Dreamweaver es que ofrece la posibilidad de escribir código y crear un sitio web mediante una interfaz visual..

En este tutorial de Dreamweaver, aprenderá todo lo que necesita saber para comenzar a crear sitios web con Dreamweaver. Conocerá el programa y lo que puede hacer, características destacadas y cómo configurarlo. Después de eso, encontrará una guía paso a paso sobre cómo crear un sitio web simple con Dreamweaver, hacerlo amigable para dispositivos móviles y luego subirlo a su servidor.

Este será un largo viaje. Sin embargo, se sorprenderá de lo rápido que entrará en este programa muy intuitivo..

Contents

¿Qué es Dreamweaver y qué puede hacer??

En la superficie, Dreamweaver es un IDE (Entorno de desarrollo integrado). Eso significa que es una pieza de software que combina diferentes herramientas para facilitar el diseño y desarrollo web.

Lo que lo hace especial es que está en algún lugar entre un CMS (donde controlas todo sobre tu sitio web a través de una interfaz visual) y un editor de código puro. Así es como funcionan las diferentes partes.

Crear sitios web a través de una interfaz de diseño visual

La caja de herramientas de diseño visual básicamente te permite crear sitios web con el mouse. Le permite colocar elementos del sitio web de la forma en que crea un diseño en Word. Básicamente, ve su sitio web como lo vería en un navegador, pero también tiene la capacidad de manipularlo.

Esto es muy útil porque le permite construir el esqueleto de un sitio web rápidamente y sin la necesidad de escribir una sola línea de código. En cambio, Dreamweaver creará automáticamente el código necesario para usted. De esa manera, teóricamente, puede armar un sitio web completo a mano y subirlo a su servidor.

Por otro lado, si eres capaz de codificar, Dreamweaver también tiene todas las herramientas necesarias para eso..

Funciona como un editor de código completo

La segunda parte de Dreamweaver es un editor de código con todas las funciones. Viene equipado con todas las funciones estándar, que incluyen:

  • Resaltado de sintaxis – Eso significa que Dreamweaver resalta diferentes elementos (como operadores, variables, etc.) en diferentes colores para que el código sea más fácil de leer y corregir.
  • Terminación de código – La finalización del código funciona de manera similar a la de autocompletar en su teléfono. Comience a escribir y el editor le hará sugerencias sobre lo que está tratando de escribir. De esa manera, no tiene que escribir todo por completo.
  • Colapso de código – El colapso de código es otra característica para facilitar la lectura del código. Le permite reducir visualmente partes de su código cuando no las necesita. De esa manera, no tiene que desplazarse por todo el archivo, sino que solo puede ocuparse de las partes en las que necesita trabajar.

Dreamweaver admite los idiomas más importantes para el diseño web (HTML5, CSS, JavaScript, PHP) y mucho más.

La mejor parte: Si cambia algo en su código, Dreamweaver también lo mostrará automáticamente en el lado visual. De esa manera, puede verlo sin tener que cargar sus archivos en un servidor o encender el navegador.

Hay muchas más funciones y verá muchas de ellas en acción en el próximo tutorial de Dreamweaver para principiantes.

Configuración de Dreamweaver y proceso de diseño de sitios web (paso a paso)

Como primer paso, debe adquirir Dreamweaver desde el sitio web oficial de Adobe.

Puede obtener una prueba gratuita aquí o desde su cliente Creative Cloud.

tutorial de dreamweaver para precios de principiantes

Paso 1. Descargue e instale

Cuando obtenga el programa del sitio web oficial, simplemente descargue el archivo de instalación, ejecútelo y siga las instrucciones.

Si ya está utilizando Creative Cloud (como nosotros), simplemente puede hacer clic en Tratar dentro del cliente. Luego, cuando el programa haya terminado de instalarse, haga clic en Iniciar prueba.

Paso 2. Primer inicio

Cuando inicies Dreamweaver por primera vez, verás esta pantalla.

Dreamweaver primera puesta en marcha

Si nunca ha usado el programa antes, elija No, soy nuevo. Cuando lo haga, Dreamweaver lo guiará a través de un asistente de configuración. El primer paso es elegir si usar el espacio de trabajo para desarrolladores o un espacio de trabajo estándar.

guía de incorporación de dreamweaver elegir espacio de trabajo

Como se trata de un tutorial para principiantes de Dreamweaver, elija la versión estándar. Después de eso, puede elegir un tema de color para su espacio de trabajo entre cuatro opciones diferentes.

guía de incorporación de Dreamweaver elegir combinación de colores

El paso final es elegir si comenzar con un archivo de muestra, un proyecto nuevo o existente o ver un tutorial.

guía de incorporación de Dreamweaver último paso

Elija comenzar con una carpeta nueva o existente y habrá terminado con el proceso de configuración. Buen trabajo!

Ahora comencemos un proyecto y aprendamos cómo crear un sitio web con Dreamweaver.

Paso 3. Comience un nuevo sitio

El primer paso es crear un nuevo sitio. Para eso, ve a Sitio> Nuevo sitio. Te llevará a esta pantalla:

crear un nuevo sitio en dreamweaver

El primer paso es darle un nombre a su sitio. Luego, debe elegir dónde guardarlo. Esto depende de usted, pero generalmente tiene sentido mantener todos los proyectos en un solo lugar para simplificar.

También tiene la posibilidad de asociar su nuevo proyecto con un repositorio Git. Esta puede ser una buena idea ya que te da control de versiones pero puedes omitirlo por ahora.

Nos ocuparemos de todo bajo Servidores en el lado izquierdo más tarde. Lo mismo con Preprocesadores CSS, lo cual solo es importante cuando usas ese tipo de cosas.

Lo que es importante para nosotros es Información local debajo Ajustes avanzados.

habilitar la carpeta de imágenes predeterminada en dreamweaver

Asegúrese de hacer clic en el icono de la carpeta a la derecha donde dice Carpeta de imágenes predeterminada. Luego, vaya al directorio de su sitio recién creado, ábralo, cree una nueva carpeta llamada imágenes y seleccione eso como su carpeta predeterminada. De esta forma, Dreamweaver guardará las imágenes asociadas a su sitio automáticamente allí..

Eso es todo por ahora, haga clic Salvar para volver a su espacio de trabajo.

Paso 4. Cree su archivo de página de inicio

Ahora que ha creado un sitio de proyecto, es hora del primer archivo. Comenzaremos con la página de inicio.

Si Dreamweaver no le ofrece la opción en sí, vaya a Archivo> Nuevo. Puede crear un archivo completamente nuevo o usar una plantilla existente. El programa viene con algunos de esos (ver Plantillas de inicio) En este momento, crearemos uno nuevo.

crear un nuevo archivo en dreamweaver

HTML está configurado de forma predeterminada y puede dejarlo como está. Para el título del documento, ingrese index.html y elige Crear. Esto te llevará a la siguiente pantalla.

nuevo proyecto en dreamweaver

Esto es lo que mencionamos al principio: una vista en vivo de cómo se ve su sitio (en blanco, en este momento) y el código detrás de él. También notará que Dreamweaver ha creado automáticamente un marcado HTML básico sobre el que puede construir. Hagamos eso ahora, ¿deberíamos??

Paso 5. Crear un encabezado

Para insertar un elemento en la página, primero debe elegir su ubicación. Haga clic en la página vacía (Dreamweaver elegirá automáticamente el elemento si lo hace) o coloque el cursor en el mismo elemento en la parte del código de la pantalla.

Después de eso, debes ir al Insertar pestaña en la esquina superior derecha. Esto le proporciona una lista de elementos HTML y de sitio comunes que puede agregar a su página. Desplácese hacia abajo hasta que pueda ver Encabezamiento como una opción.

insertar elemento de encabezado en dreamweaver

Un simple clic lo inserta en la página. También lo ve aparecer dentro del documento HTML.

encabezado visible en la interfaz visual y editor de código

Simple, correcto?

Ahora cambiará el texto dentro del encabezado y también lo convertirá en un encabezado. Para ambos: primero marque el texto en el editor de código en la parte inferior.

marcar texto de encabezado en dreamweaver

Después de eso, vuelve a Insertar, haga clic en la flecha al lado de Bóveda y elige H1. Esto envuelve el título de la página en una etiqueta H1 HTML. Para obtener más información sobre las etiquetas de encabezado, lea Este artículo.

Después de eso, también puede escribir un título para su página. En su sitio web real, elegiría algo descriptivo con palabras clave y no solo Bienvenido a mi sitio web de prueba como en el ejemplo.

encabezado cambiado en dreamweaver

Muy bien, ¡acabas de crear un encabezado de página! Por el momento todavía parece un poco crudo, así que cambiemos eso a través de CSS a continuación.

Paso 6. Crear un archivo CSS

En caso de que no esté familiarizado con él, CSS es la parte que proporciona todo el estilo en una página web. Le permite definir colores, dimensiones de elementos, tipos y tamaños de fuente y mucho más. Queremos usar el marcado para arreglar el título de nuestra página y también aprender cómo cambiar CSS en Dreamweaver.

Teóricamente, puede agregar CSS directamente dentro del documento HTML. Hay una opción mucho menos elegante que lo que haremos, que es crear un archivo dedicado para todo el estilo CSS de todo el sitio.

El primer paso es darle a su nuevo encabezado una clase o id de CSS. Durante ese proceso, Dreamweaver también le pedirá que cree un archivo de hoja de estilo. Vaya al menú DOM en la parte inferior derecha de la pantalla que enumera toda la estructura de su sitio. Asegúrese de que su encabezado esté seleccionado.

En la vista en vivo, ahora lo verá marcado en azul con una pequeña etiqueta y un signo más en la parte inferior.

Añadir archivo CSS en Dreamweaver

Haga clic en el signo más y escriba #encabezamiento en el campo que se abre El hashtag significa que está asignando un id en lugar de una clase. Presione enter. En el menú de apertura, en lugar de Definir en página Seleccione Crea un nuevo archivo CSS. En la ventana emergente, elija Vistazo y navegue a la carpeta de su sitio. Luego escribe style.css (que es el nombre estándar para las hojas de estilo) en el Nombre del archivo campo y golpe Salvar.

crear hoja de estilo en dreamweaver

Cuando ahora selecciona Okay, aparecerá un nuevo archivo en la parte superior de su vista en vivo. Puede verlo y editarlo desde allí. También estará vinculado a la sección de la parte HTML de tu página.

hoja de estilo agregada al sitio web

¡Increíble zarigüeya! Ahora estás listo para cambiar el estilo de tu página.

Paso 7. Crea un selector CSS para el título de la página

Lo primero que debe hacer es cambiar la fuente de su encabezado y también centrarlo. Para eso, primero debe crear un nuevo selector CSS. Un selector es el nombre de un elemento en nuestra página al que puede asignar propiedades, por ejemplo, color, tamaño y más.

Marque su encabezado H1 en la vista DOM en la parte inferior derecha (como lo hizo antes con el encabezado). Luego, por encima de eso, elija Diseñador de CSS.

preparar el estilo para el elemento de encabezado

Para crear un selector CSS, haga clic en la línea donde dice Selectores y luego haga clic en el símbolo más. Esto debería proponerle automáticamente un selector llamado #header h1.

crear selector css en dreamweaver

Presiona enter para crearlo. Hecho!

Nota rápida: para todos los nuevos en CSS, este selector significa que está apuntando al elemento llamado h1 dentro el elemento llamado #encabezamiento. De esa manera, lo que ingrese como CSS solo se aplica al texto escrito y no al elemento de encabezado en general.

Paso 8. Cambiar la fuente del título

Ahora que tiene un selector, puede asignarle propiedades. Si conoce bien CSS, simplemente puede escribir marcado en style.css y el programa se encargará automáticamente.

Para los usuarios menos experimentados, Dreamweaver también lo hace realmente fácil. Permanecer en el Diseñador de CSS menú y desmarca la casilla donde dice Mostrar conjunto. Cuando lo hagas, desbloqueará muchas opciones adicionales.

habilitar las opciones de CSS en Dreamweaver

Con los nuevos botones, puede elegir muchas propiedades CSS de las áreas de diseño, texto, borde y fondo. los Más El botón le da opciones para ingresar sus propias reglas.

Para cambiar el tipo de fuente, haga clic en el Texto opción en la parte superior (alternativamente, desplácese hacia abajo). En las próximas opciones, coloca el cursor sobre Familia tipográfica y haga clic en fuente predeterminada.

cambiar la familia de fuentes en dreamweaver

Esto le dará una serie de opciones para las fuentes comunes, incluidas sus reservas (en caso de que el navegador del usuario no pueda mostrar la fuente principal). Es posible que desee hacer clic en Administrar fuentes en la parte inferior para llegar a este menú:

fuentes web adobe edge

Aquí, puede elegir fuentes gratuitas de Adobe Servicio de fuentes web perimetrales. Busque una fuente por nombre o use las muchas opciones de filtro a la izquierda para reducir sus opciones hasta que encuentre algo.

Un clic en cualquiera de los tipos de letra lo marca para su inclusión en Dreamweaver. Una vez que lo haya hecho, puede usarlos directamente o ir a Pilas de fuentes personalizadas para definir sus propias fuentes de reserva.

crear pilas de fuentes personalizadas en dreamweaver

Por ahora, simplemente presiona Hecho y luego haga clic en fuentes predeterminadas de nuevo. Esta vez elige la fuente personalizada elegida y voilá – el cambio se realiza incluyendo toda la codificación necesaria.

fuente cambiada en dreamweaver

Si hace clic en su style.css archivo en la parte superior, verá que todas las marcas también se han agregado.

hoja de estilo actualizada en dreamweaver

Paso 9. Centra el título y cambia su tamaño

El texto aún podría verse mejor. La siguiente tarea es centrarlo y aumentar el tamaño de la fuente. Para eso, también puedes usar otra función llamada Edición rapida.

Para usarlo, vaya a la vista de código y haga clic con el botón derecho en la parte que desea editar. En este caso, está en el

soporte.

abrir el menú de edición rápida en dreamweaver

Aquí elige Edición rapida en la cima. Esto abrirá el CSS asociado con este elemento debajo de él. Ahora puede ingresar propiedades adicionales sin tener que buscar en todo el archivo de hoja de estilo (que puede ser muy largo). Para centrar el texto y agrandarlo, agregue el siguiente código.

tamaño de fuente: 42px;
alinear texto: centro;

Al escribir, Dreamweaver también hará propuestas para lo que está intentando ingresar, lo que lo hará aún más fácil. Esa es la función de finalización de código mencionada anteriormente.

Cuando haya terminado, se verá así:

cambiar CSS a través de la edición rápida en Dreamweaver

Tenga en cuenta que el texto ya ha cambiado en la vista en vivo. Ahora presiona Esc para salir rápido, edite y diríjase a la hoja de estilo. Encontrará que el nuevo CSS se ha agregado en el lugar apropiado.

Muy bien, cierto?

Por cierto, si alguna vez no está seguro de lo que significa una propiedad CSS, simplemente haga clic derecho y elija Documentos rápidos (o presione Ctrl + K) Dreamweaver te dará una explicación.

documentos rápidos de dreamweaver

Paso 10. Agregue más contenido

Con lo que has aprendido hasta ahora, ahora puedes construir un sitio rudimentario. Por el bien de este tutorial de Dreamweaver, hemos hecho lo siguiente:

  • Fuentes predeterminadas definidas para encabezados y párrafos
  • Se agregó una barra de navegación y se creó un enlace a la página de inicio.
  • Se agregó un cuadro div para contenido con dos cuadros más dentro
  • Movió uno de ellos a la izquierda y uno a la derecha con el flotador propiedad
  • Limitó su ancho a porcentajes para que puedan alinearse horizontalmente
  • Se agregó un encabezado de muestra y un texto ficticio a la izquierda, incluida una lista desordenada
  • Creó un formulario (use el menú desplegable debajo de Insertar), dos campos de texto y un botón de enviar
  • Se agregó espacio alrededor de los elementos a través de márgenes CSS y relleno
  • Colores de fondo y bordes provistos
  • Creó un pie de página y un mensaje de copyright

Aquí está el resultado:

sitio web con diseño avanzado

Código para el ejemplo:

Dado que esto es un poco avanzado y no todos sabrán cómo hacerlo, puede encontrar el HTML y CSS a continuación para que pueda reconstruirlo usted mismo. Primero el HTML:





index.html

 



Casa

Encabezado de muestra para contenido principal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellenteque scelerisque id est sit amet ornare. Suspendisse eget elit mi. En imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nuncfficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Llamada a la acción de muestra!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellenteque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 Mi sitio web imaginario

Y luego el CSS:

@charset "utf-8";

cuerpo {
color de fondo: # F5F5F5;
margen superior: 0px;
margen derecho: 0px;
margen inferior: 0px;
margen izquierdo: 0px;
}

pags,
una,
ul,
ol,
li,
etiqueta,
entrada{
Familia tipográfica: muli, sans-serif;
estilo de fuente: normal;
peso de fuente: 300;
tamaño de fuente: 17px;
}

h1, h2, h3, h4, h5 {
font-family: karla, sans-serif;
estilo de fuente: normal;
peso de fuente: 400;
transformación de texto: mayúscula;
}

#header {
relleno superior: 25px;
relleno inferior: 25px;
color de fondo: #FFFFFF;
borde inferior: 4px sólido # EB232F;
}

#header h1 {
font-family: aguafina-script;
estilo de fuente: normal;
peso de fuente: 400;
tamaño de fuente: 42px;
alinear texto: centro;
margen superior: 0px;
margen inferior: 0px;
transformación de texto: ninguno;
}

#navegación {
margen derecho: auto;
margen izquierdo: auto;
ancho máximo: 1140px;
margen superior: 10px;
margen inferior: 10px;
}

#navegación a {
color: # EB232F;
}

.principal {
bloqueo de pantalla;
margen superior: 15px;
margen derecho: auto;
margen izquierdo: auto;
margen inferior: 15px;
Limpia los dos;
desbordamiento: auto;
ancho máximo: 1140px;
}

.main # main-right {
flotar derecho;
ancho: 37.5%;
bloqueo de pantalla;
}

.main # main-left {
flotador izquierdo;
ancho: 57%;
bloqueo de pantalla;
relleno derecho: 20px;
}

.main # main-right .cta {
alinear texto: centro;
}

.main # main-right .form {
ancho: 92%;
margen derecho: auto;
margen izquierdo: auto;
}

# main-right .form div {
margen inferior: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
ancho: 100%;

}

.main # main-right #button {
alinear texto: centro;
relleno superior: 7px;
relleno inferior: 7px;
margen izquierdo: auto;
margen derecho: auto;
posición: relativa;
bloqueo de pantalla;
relleno derecho: 36px;
relleno-izquierda: 36px;
borde: ninguno;
color de fondo: # EB232F;
color: #FFFFFF;
cursor: puntero;
}

.pie de página {
bloqueo de pantalla;
relleno superior: 25px;
relleno inferior: 25px;
alinear texto: centro;
}

Queremos usar esto como un ejemplo para mostrarle los próximos pasos. Incluso si parece complicado, armamos esto de la misma manera que te mostramos antes.

Paso 11. Vista previa en el navegador y en el dispositivo móvil

¿Cómo hicimos todo esto? Bueno, antes que nada, tenemos un poco más de experiencia en la creación de sitios web de lo que probablemente tengas. Por lo tanto, ya tenemos los pasos en mi mente sobre cómo crear una página web adecuada.

En segundo lugar, estamos utilizando una función muy útil que me ayuda a acelerar el proceso: la vista previa del navegador. Dreamweaver le permite ver sus páginas web en tiempo real en un navegador e incluso en dispositivos móviles.

Para comenzar, haga clic en el botón de vista previa en tiempo real en la esquina inferior derecha.

habilitar el menú de vista previa en dreamweaver

Esto abrirá las opciones de vista previa.

Opciones de vista previa en tiempo real en Dreamweaver

Un clic en uno de los nombres del navegador abrirá el proyecto de su sitio web en él. También puede escanear el código QR con su teléfono o tableta (por ejemplo, con Firefox Quantum) o escriba la dirección que se muestra en su navegador para iniciar la vista previa en vivo en su dispositivo.

Solo tenga en cuenta que debe ingresar su ID y contraseña de Adobe para eso. Deberías tener eso al registrarte en Dreamweaver.

La mejor parte: Los cambios que realice en Dreamweaver aparecerán automáticamente en el navegador al mismo tiempo que los realiza..

¿Cómo me ayudó esto a armar el sitio más rápido? En primer lugar, dependiendo del tamaño de su pantalla, la visualización en el navegador podría estar más cerca del original que lo que ve en Dreamweaver.

En segundo lugar, comprobar el sitio en el navegador me permite usar las herramientas de desarrollador para probar los cambios..

herramientas de desarrollador en el navegador

Son muy similares a lo que ves en Dreamweaver. Nos son más familiares, por lo que podemos trabajar más rápido con ellos y simplemente copiar y pegar el código en nuestra hoja de estilo.

Una mirada a la versión del teléfono muestra que todavía hay mucho trabajo por hacer.

vista previa móvil en tiempo real en dreamweaver

Esto nos lleva directamente al siguiente punto..

Paso 12. Agregar consultas de medios

Para que su sitio web funcione en todos los dispositivos, debe agregar las llamadas consultas de medios. Estas son declaraciones CSS condicionales que le dicen a los navegadores que se apliquen al estilo solo por encima o por debajo de ciertos tamaños de pantalla o en dispositivos particulares. De esa manera, puede cambiar el diseño en pantallas más pequeñas.

Hasta ahora, solo ha definido estilos globales. Eso significa los estilos que se aplican a todo el sitio. Ahora aprenderá cómo agregar estilos condicionales para pantallas más pequeñas..

Primero, ve a Diseñador de CSS. Asegúrese de que el archivo al que desea agregar el código esté seleccionado en Fuentes. Presiona el signo más debajo @medios de comunicación.

Te da este panel de opciones:

menú de consulta de medios en dreamweaver

Puede definir condiciones para consultas de medios, por ejemplo, los dispositivos a los que se aplican, orientación, resolución y mucho más. También puede agregar múltiples condiciones con el signo más.

Lo más importante para nuestro ejemplo es el anchura máxima ajuste. Con eso, puede definir CSS personalizado que solo se aplicará a un determinado tamaño máximo de pantalla.

Digamos que primero quieres arreglar las cosas en el teléfono, así que escribes un anchura máxima de 375 píxeles. Cuando lo hagas, puedes ver el código CSS en la parte inferior.

crear consulta de medios en dreamweaver

¿Qué pasará también cuando hagas clic? Okay es que aparece una línea verde en la parte superior de la pantalla. Esto representa visualmente la consulta de medios. Haga clic en él y la pantalla saltará automáticamente a ese tamaño..

crear consultas de medios en dreamweaver

Paso 13. Agregar CSS condicional

Para corregir el diseño para dispositivos móviles, lo primero que debemos hacer es eliminar el código que hace que los dos elementos del sitio se organicen uno al lado del otro. Claramente no hay suficiente espacio para eso.

Puedes hacer esto de la misma manera que manipulaste CSS antes, solo que esta vez tienes una consulta de medios activada mientras lo haces.

En primer lugar, navegue hasta el elemento en su vista DOM. A partir de ahí, cree un nuevo selector de CSS. Luego, establece su anchura a auto, flotador a ninguna (para evitar que se vaya hacia la izquierda) y agregue algo de relleno a los lados para que el contenido no bordee el borde de la pantalla.

diseño móvil corregido

Se ve mucho mejor, ¿no? De la misma manera, puede cambiar el CSS de todos los demás elementos de la página para que todos se vean bien.

Eso es básicamente para consultas de medios. Puede usar el mismo método para ajustar el diseño a tabletas y otros tamaños.

Consejo profesional: No optimice para ciertos dispositivos y sus tamaños, en su lugar, cree consultas de medios según el diseño. Eso significa jugar con el tamaño de la pantalla y agregar consultas en esos puntos cuando el diseño ya no se ve bien.

Una cosa más: también puede crear consultas de medios un poco más fácilmente utilizando los tamaños de dispositivo preestablecidos en la esquina inferior y haciendo clic en el símbolo más en la parte superior cuando haya encontrado un punto donde desea agregar uno.

crear consultas de medios a través de accesos directos en dreamweaver

Paso 14. Sube tu sitio al servidor

Recomendamos usar Bluehost (enlace de afiliado) para alojar su sitio Dreamweaver.

Una vez que haya terminado con la parte de diseño, estará listo para cargar el sitio en su servidor. Como se mencionó al principio, Dreamweaver también lo hace muy fácil..

Primero, ve a Sitio> Administrar sitios. Seleccione su sitio web actual del menú y elija Editar en la parte inferior izquierda En la siguiente ventana, haga clic en Servidores.

configuración remota del servidor en dreamweaver

Ingrese todos los datos importantes para conectarse a su servidor FTP. El nombre depende de usted, el resto (dirección FTP, nombre de usuario, contraseña) proviene de su proveedor de alojamiento. ¡No olvide especificar en qué directorio colocar los archivos y la dirección web de su sitio en vivo! La última parte es importante para que Dreamweaver pueda crear enlaces internos relativos al sitio..

Debajo Avanzado tiene algunas opciones más (ya sea para cargar archivos automáticamente al guardar). Por lo general, puede mantener las cosas como están. Golpear Salvar dos veces y listo.

Ahora ve al Archivos panel (ya sea en el lado superior derecho o mediante Ventana> Archivos) y haga clic en el símbolo más a la izquierda para conectarse a su servidor:

subir el sitio al servidor remoto en dreamweaver

Una vez establecida la conexión, seleccione los archivos que desea cargar y haga clic en la flecha hacia arriba para hacerlo. Una vez hecho, su sitio debería estar disponible desde su dirección web.

¡Bien hecho! Acaba de crear y cargar un sitio simple con Dreamweaver!

Tutorial de Dreamweaver – Palabras finales

Dreamweaver es un programa fantástico para crear sitios web. Combina una interfaz de usuario intuitiva con un editor de código completo. A través de esta combinación, facilita a los principiantes, intermedios y usuarios avanzados la creación de sitios web de alta calidad..

En este tutorial de Dreamweaver para principiantes, le presentamos Dreamweaver y sus capacidades. Le hemos mostrado cómo configurar el programa y comenzar con su primer sitio. Has aprendido cómo crear una estructura HTML básica y darle estilo con CSS. También explicamos cómo hacer que un sitio web sea móvil y subirlo a su servidor.

A estas alturas ya tiene una sólida comprensión de cómo funciona Dreamweaver y cómo puede usarlo para crear un sitio web. Ahora depende de usted sumergirse más y descubrir los próximos pasos..

No olvides: Dreamweaver es solo una forma de crear un sitio web. Hay muchos más y puede encontrar mucha información sobre eso aquí. Buena suerte!

¿Has usado Dreamweaver antes? ¿Cuál es tu opinión? ¿Algo que agregar a lo anterior? Háganos saber en la sección de comentarios!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map