Ejemplos de sitios web en Dreamweaver
No hace muchos años, casi todas las páginas web de Internet se diseñaban, en cierto grado, a mano. Era difícil, y antes de que el CSS se afianzara y fuera bien soportado por la mayoría de los navegadores comunes, a menudo se trataba de hackear un diseño mediante el uso de tablas HTML de una manera que nunca se había previsto.
Mientras algunos diseñadores desarrollaban flujos de trabajo completamente basados en la edición manual de archivos HTML sin procesar, el editor WYSIWYG (what you see is what you get) comenzó a surgir como una herramienta de empoderamiento para millones de diseñadores aficionados y profesionales que no conocían, o al menos no dominaban, el arte del marcado de hipertexto.
Productos como CoffeeCup, HotDog, FrontPage, GoLive y muchos otros llenaron el mercado, y también surgieron muchos editores WYSIWYG basados en la web. Uno de los más exitosos fue Dreamweaver, de Macromedia (luego Adobe), que estuvo entre mis favoritos durante muchos años.
Estas herramientas de autoría web no se limitaban a la edición WYSIWYG; incluso para aquellos que se sentían cómodos con la autoría directa del lenguaje de marcas, estas herramientas ofrecían ventajas con el control de las plantillas, la gestión de archivos y, simplemente, la reducción del tiempo necesario para crear código funcional.
Dreamweaver crear sitio web
Adobe Dreamweaver CS5 es un potente programa de creación de páginas web y gestión de sitios web con un editor HTML que se utiliza para diseñar, codificar y crear páginas web, sitios web y aplicaciones web de aspecto profesional. Las funciones de edición visual de Dreamweaver le permiten crear páginas sin escribir una línea de código. Dreamweaver ofrece muchas herramientas y funciones, entre ellas las siguientes
– Creación automática de páginas web: Dreamweaver proporciona herramientas que puede utilizar para desarrollar páginas web sin tener que pasar horas escribiendo código HTML. Dreamweaver genera automáticamente el código HTML necesario para publicar sus páginas web.
– Gestión de sitios web: Dreamweaver le permite ver un sitio, incluidos todos los archivos locales y remotos asociados al sitio seleccionado. Puede realizar tareas de mantenimiento estándar como ver, abrir y mover archivos y transferir archivos entre sitios locales y remotos.
– Herramientas estándar de creación web de Adobe: Dreamweaver incluye una interfaz de usuario que es coherente en todas las herramientas de creación de Adobe. Esta coherencia permite una fácil integración con otros programas de Adobe relacionados con la Web, como Adobe Flash, Director, Shockwave y ColdFusion.
Documentación de Dreamweaver
Esta serie de tutoriales en ocho partes está diseñada para guiarle en la construcción de un sitio web sencillo pero elegante en Dreamweaver 2015. Le guiará a través del proceso de definición del sitio, la construcción de la estructura con HTML (Hypertext Markup Language), la adición de texto e imágenes, y el estilo de las páginas con CSS (Cascading Style Sheets).
Nota: No es necesario tener experiencia previa con Dreamweaver. Sin embargo, un conocimiento general del Lenguaje de Marcado de Hipertexto (HTML) y de las Hojas de Estilo en Cascada (CSS), le ayudará a contextualizar muchos de los temas de esta serie. Tanto HTML como CSS son estándares web abiertos y hay muchos recursos disponibles para aprender estas tecnologías. Definir la estructura de la página con HTML, maquetar y dar estilo a las páginas web con CSS, y HTML y CSS proporcionan una gran base.
Este es un tutorial en profundidad, por lo que hay que disponer de mucho tiempo. Cada parte se ha dividido en secciones cortas que explican no sólo lo que hay que hacer, sino también el porqué. Tómate un descanso entre las secciones para asegurarte de que entiendes las distintas técnicas introducidas.
Dreamweaver wysiwyg
Aparecerá una nueva página con un aspecto muy parecido al de su plantilla – excepto que cuando pase el cursor por encima de un área no editable (como el pie de página) aparecerá un signo de “no entrada” indicando que no puede editar esa área.
La página por defecto de un sitio web (o de cualquier directorio) puede llamarse de varias maneras, normalmente index.html o default.html. El sufijo del nombre del archivo también puede variar, y puede incluir .php, .asp, .htm, etc. Sin embargo, para un sitio web HTML básico y estático como éste, index.html sería el que hay que utilizar.
…y nombrar el archivo. Antes de guardarlo, asegúrate de que lo guardas en el directorio raíz del sitio haciendo clic en el botón “Raíz del sitio” en la esquina inferior izquierda del cuadro de diálogo. A continuación, haz clic en Guardar.
Puedes previsualizar la página en un navegador haciendo clic en el botón “Preview/Debug in browser” en la parte superior de la ventana (figura 1). Selecciona el navegador que prefieras y verás la página previsualizada exactamente como aparecería en línea.
Ahora que tu página de inicio está abierta, empezarás a ver la razón de mantener la barra de navegación separada. Tenemos que hacer que la pestaña “Inicio” de la parte superior esté “activa” (blanca) para que el visitante sepa en qué sección está.