¿Cómo usar una herramienta WYSIWYG para hacer mi diseño básico y luego editarlo con HTML / CSS? ¿Hay alguna manera de hacerlo sin comprar software?

La mayoría de la gente siente que es más fácil hacer el diseño por separado y luego codificarlo.

Aunque puede hacerlo todo en un editor WYSIWYG como Dreamweaver, la vista previa del diseño no siempre coincidirá con lo que vería en un servidor web, por lo que aún querrá verlo en el navegador. También necesitaría crear activos como imágenes de pancartas en un programa de gráficos.

Solía ​​diseñar y codificar al mismo tiempo, y funciona para algunas cosas, pero otras veces tomó más tiempo.

Dichos editores también facilitan el desorden de su código, por lo que si creó en modo de diseño, necesitaría hacer una gran cantidad de limpieza en la vista de código. (A menudo he visto cosas como esta en los archivos que los no codificadores han creado en Dreamweaver. Por supuesto, vi mucho peor salir de Front Page).

Algunas palabras y otras palabras .

Limpiar esas tonterías es un dolor.

Prefiero

1) Cree wireframes para los distintos tipos de páginas, como la página de inicio, las páginas de inicio de sección y las páginas interiores (se puede hacer con lápiz y papel)

2) Dibuje un diseño basado en la estructura alámbrica (lápiz y papel cuadriculado, lápices de colores, marcadores mágicos, lo que quiera) o puede omitir este paso y pasar directamente al n. ° 3 si prefiere trabajar de esa manera.

3) Crear diseños en Photoshop tamaño (en píxeles) para que coincida con lo que quiero producir en la web. Por ejemplo, 1024 px de ancho para escritorio, 320 px para teléfonos pequeños, etc.)

4) Codifique las páginas y CSS en un editor HTML. (podría ser el modo de código de un editor WYSIWYG o cualquier editor de texto sin formato).

5) Cargue periódicamente en el servidor para ver cómo se ve en la vida real.

6) editar y repetir.

Si no tiene un presupuesto de software, puede probar Un editor de código moderno y de código abierto que entienda el diseño web. para el lado del código y el Programa de manipulación de imágenes GNU en lugar de Photoshop.

A la larga, si trabaja con otros diseñadores, querrá obtener Photoshop para poder compartir archivos. A menudo construyo sitios que otros han diseñado y generalmente me dan archivos de Photoshop en capas.

¡Buena suerte!

Algunos de los creadores de sitios web WYSIWYG, como Wix y Weebly, le permiten ingresar y personalizar ALGUNOS HTML y CSS, si solo desea armar un sitio web rápidamente. También es posible que desee probar Brackets, muchos de mis estudiantes estaban contentos con la vista previa en vivo que le ofrece. Puede descargar por un mes de prueba el software de Adobe o hacer una suscripción mensual a Creative Cloud. También hay alternativas a Adobe como Bohemian Sketch, Inkscape y GIMP. No los recomiendo si quieres trabajar en la industria ya que no son estándar. Muchos editores de código gratuitos disponibles, así que eso no es un problema. ¿Es que te sientes cómodo con el diseño y no te sientes cómodo con la codificación? Me gustaría saber más para comprender mejor su problema.

Esto está en mi cinturón de herramientas para html y css, tanto de pago como de código abierto:
– Editor web de Pinegrow, http://pinegrow.com (alrededor de 50 USD)
Funciona bien con Twitter Bootstrap y algunos otros marcos. La nueva versión 2 es compatible con la codificación de temas básicos de WordPress con fragmentos de código ya preparados. Un editor de Wysiwyg realmente bueno con soporte visual para páginas receptivas. Todo el código es fácil de ver y editar.

– Espresso, http://macrabbit.com/espresso (alrededor de 75 USD)
Un editor basado en texto para html, css, Javascipt y mucho más. Código codificado por color y fácil de usar el navegador interno o externo para verificar el resultado.

– Aptana Studio, http://www.aptana.com/products/s … (Código abierto)
Como Espresso, pero tiene más funciones y no es tan fácil de usar. Gratis y también una muy buena elección.

¡Buena suerte!

Si puede editar html y css, ¿por qué no usar Bootstrap? Hay muchos temas de inicio gratis en línea. Y Bootstrap es una excelente manera de construir un sitio, ya sea profesional o aficionado.