Tutoriales sobre diseño Web
Valora este artículo
(3 votos)

Cabezal artículo Accordion de BS en DW CC 2015

Tutorial Básico: Acordeón de Bootstrap desde DW CC 2015

Este tutorial surge en respuesta a una consulta surgida en clases: ¿Cómo insertar un acordeón en HTML usando Dreamweaver?

Veremos la solución a este problema insertando el componente Accordion de Bootstrap desde Dreamweaver CC 2015 en una página recién creada, de modo que en este tutorial nuestro componente quedará colocado directamente dentro del body del documento; en caso de trabajar con páginas parcialmente desarrolladas debemos elegir dentro de qué etiqueta insertaremos este componente, de acuerdo a nuestras necesidades de diseño; por otra parte, cada vez que se hable de ediciones en la vista de diseño debemos tener presente que es posible trabajar directamente en la ventana de códigos si es que nos resulta más cómodo, lo que dependerá de los conocimientos que cada uno de nosotros tenga con los mismos.

Valora este artículo
(2 votos)

Algunos componentes de ejemplo en HTML5 y CSS3

Construyendo con HTML5 y CSS3

Esta lista de códigos de ejemplo son un complementario a los apuntes y tutoriales sobre diseño web, algunos ejemplos de maquetación de distintos componentes estructurales, visuales y de navegación utilizando HTML5 y CSS3. Bajo el entendido de que se trata de material de apoyo para estudiantes iniciales de diseño los ejemplos se irán publicando en la medida de que las consultas y el desarrollo de las clases lo vayan requiriendo.

Domingo, 12 Junio 2016 13:11

Introducción a Dreamweaver (iv)

Valora este artículo
(1 Voto)

Configurando un sitio en DW (FTP)

Definiendo un nuevo sitio en Dreamweaver CC 2015 (ii)

En la primera parte de este tutorial vimos las pautas básicas para la definición de un sitio en Dreamwever, asignando un nombre y una carpeta de trabajo para el mismo; en esta segunda parte ingresaremos los datos necesarios para poder subir (cargar) y bajar (descargar) archivos a nuestro servicio de hosting usando el cliente FTP [1] [2] que Dreamwever trae incorporado:

Valora este artículo
(3 votos)

Registrando un subdominio en 000webhost

000webhost: Registro de un subdominio gratuito

Este tutorial forma parte de una serie de entradas donde describiremos el registro de subdominios gratuitos en algunos de los sitios que ofrecen este servicio (ver también "Cinco (+1) sitios donde obtener hosting gratuito"); sitios con los que no Formación Gráfica no tiene ninguna relación comercial establecida, y que son publicados en nuestro sitio como material de apoyo a estudiantes iniciales de diseño web:

Valora este artículo
(1 Voto)

Plantillas de inicio en DW CC 2015

Creando páginas con las plantillas de inicio de DW CC 2015

En esta entrada trabajaremos en un brevísimo tutorial donde mostraremos como trabajar con las plantillas de inicio de Dreamweaver CC 2015, a partir de las cuales podremos luego crear nuevas páginas web; para lo cual se espera que el alumno, o eventual diseñador, adquiera o maneje las habilidades necesarias de edición de los documentos generados, de forma que le permitan modificar el diseño, así como cambiar, eliminar o agregar comportamientos nuevos de acuerdo a los propósitos desados.

Comencemos entonces con este tutorial de dificultad baja, dirigido a estudiantes iniciales y diseñadores que toman primer contacto con Dreamweaver, o más específicamente, con Dreamweaver CC 2015:

Valora este artículo
(1 Voto)

Slider responsivo - Cabezal del tutorial

Carousel responsivo usando Bootstrap en Dreamweaver CC

En este tutorial veremos la forma de generar un slider (slideshow) con Bootstrap en Dreamweaver CC 2015, para lo cual alternaremos entre la vista de diseño y la ventana de códigos con la finalidad de mejorar la comprensión de los códigos html y, por consiguiente, la edición lo más afinada posible de los mismos, lo que genera una independencia paulatina de la plataforma usada, así como un conocimiento mayor de los comportamientos de cada etiqueta html y las propiedades CSS involucradas. En este tutorial, además del agregado del Carousel de forma casi automática en Dreamweaver hablaremos sobre etiquetas body, div, ul, ol y otras:

Valora este artículo
(2 votos)

Envío de formularios con archivos adjuntos

Formulario de contacto con envío de adjuntos en DW CC2015

Veremos a continuación cómo generar un código básico de ejemplo para un formulario de contacto, usando Adobe Dreamweaver CC2015.2:

Valora este artículo
(2 votos)

Cabezal Imagen de Sustitución en DW CC2015

Consulta de Clase: Imagen de Sustitución en DW CC2015

Esta entrada es el complemento a una respuesta en clases sobre cómo colocar imágenes de sustitución usando Dreamweaver CC2015, ya que la ubicación del menú de esta opción ha cambiado respecto a la versión anterior:

Valora este artículo
(3 votos)

Convertir un html en una plantilla de Dreamweaver

Regiones repetidas y regiones editables en Dreamweaver CC2015

Introducción

En la primera parte de este tutorial estuvimos viendo como definir, de forma básica, un sitio en Dreamweaver y la importancia que esto tenía al momento de trabajar con templates en este programa. En esta segunda parte veremos cómo convertir un un documento html existente en una plantilla de DW al insertar, directamente, un elemento de plantilla dentro de su código:

Valora este artículo
(4 votos)

Trabajando con plantillas en DW CC 2015 (i)

Plantillas en Dreamweaver CC2015: Definiendo un nuevo sitio

Introducción

Las plantillas (templates) en Dreamweaver son documentos en formato DWT, que DW se almacenan en una carpeta llamada Templates, dentro del sitio de trabajo que tengamos activo, y que servirán luego para crear nuevas páginas web que heredarán sus diseños, y contenidos fijos presentes en estas plantillas.

Una vez que creamos un nuevo documento basado en una plantilla, DW sólo permite agregar o modificar contenidos en aquellas regiones que hayamos definido como editables, por lo que, debemos reconocer primero aquellos contenidos fijos de aquellos otros que dependerán del contenido de cada página que creemos luego a partir de nuestra plantilla.

Asimismo, y con el fin de aumentar la productividad durante los procesos de diseño y carga de datos en el sitio, es posible crear distintos tipos de "regiones espaciales"; entre las cuatro posibles en ésta y una próxima entrada veremos las siguientes:

  • Las regiones editables, sobre las cuales, al crear nuevas páginas desde una plantilla, se permitirá agregar o cambiar contenidos. Es necesario que una plantilla tenga, por lo menos, una región editable, de modo que permita trabajar luego sobre ella.
  • Las regiones repetidas en cambio, nos permitirán crear o eliminar zonas enteras de código en un documento basado en la plantilla, con lo que podremos agregar no solamente contenidos, sino repetir estructuras especiales, las que se crearán con los estilos de diseño que tengan asignados.
  • Las tablas de repetición, sobre las cuales hablaremos y veremos como trabajar en un siguiente tutorial.

Al crear múltiples páginas a partir de una de más plantillas es posible actualizar el diseño y contenidos fijos de éstas páginas cada vez que modifiquemos la plantilla ya que éstas permanecen relacionados, a menos que rompamos luego este vínculo posteriormente.

Para mostrar el proceso de creación y uso de una plantilla, trabajaremos sobre el template que podemos bajar de aquí, cuya captura de pantalla, a escala, es la siguiente: