Tutoriales sobre diseño Web
Lunes, 02 Mayo 2016 14:10

Introducción a Dreamweaver (iii)

Valora este artículo
(2 votos)

Cabezal Diseñador CSS en Dreamweaver 

 El diseñador de CSS en Dreamweaver CC (i)

Como vimos en la entrada HTML y CSS: Notas preliminares, el diseño web estándar exige separar contenidos de diseño, existiendo tres formas de asignar estilos a los elementos html:

  1. Asignar estilos de forma local, en la propia etiqueta:
    Ej.: <p style="color:#CCC;>Contenido del párrafo</p>
  2. Asignar un conjunto de estilos en la cabecera de cada documento HTML:
    Ej.: <head>
             <style>
                body{
                         margin:0;
                         }
                .destacados{
                         color:red;
                         }
             </style>
         </head>
  3. Vincular un documento CSS externo a uno o más documentos HTML:
    Ej.: <link href="file:///D|/Clientes Web/Demo 01/pepe.css" rel="stylesheet" type="text/css">
    Nota: También es posible importar documentos CSS, tema que veremos en una próxima entrada.

También vimos en una nota anterior algunos ejemplos de como trabajar con estilos de etiquetas, definiciones de clases e IDs en CSS: CSS: Selectores básicos.

Como dijimos en algún momento, tanto los documentos HTML, como los documentos CSS, son documentos de texto plano que pueden ser editador por cualquier editor que permita guardar en este formato con la codificación correcta, pero en el caso de Dreamweaver tendremos una herramienta de gran ayuda al momento de trabajar con estilos CSS: El Diseñador de CSS, sobre el que hablaremos a continuación:

Domingo, 01 Mayo 2016 21:13

Introducción a Dreamweaver (ii)

Valora este artículo
(1 Voto)

Cabezal tutorial Configurando Sitios en Dreamweaver

Definiendo un nuevo sitio en Dreamweaver CC 2015 (i)

Como herramienta de diseño web, DW permite crear y trabajar múltiples sitios web, realizando operaciones sobre uno, varios o todos los archivos editables de un sitio, por lo que es necesario indicarle al programa cuáles son las carpetas de cada uno de éstos sitios de forma que el programa pueda gestionar sus archivos adecuadamente; así, definir un sitio en Dreamweaver, en su forma más básica, consiste en crear o indicarle al programa la carpeta de trabajo en la que almacenaremos todos los archivos que vayamos luego a subir como parte de nuestro sitio, evitando la anidación de ésta carpeta debajo de otra carpeta donde antes ya hayamos definido un sitio, lo que podría ser causante de errores varios durantes operaciones tales como la de buscar y reemplazar contenidos globalmente en alguno de nuestros sitios.

Vayamos con el paso a paso de la definición más básica de un sitio usando Dreamweaver CC2015:

Lunes, 18 Abril 2016 18:24

Introducción a Dreamweaver (i)

Valora este artículo
(1 Voto)

Introducción a DW (01)

Tutorial de introducción a Dreamweaver: La interfaz

Este es el primero de una serie de tutoriales de introducción a Dreamweaver CC; en nuestro caso comenzaremos con una breve descripción sobre sobre "qué es Dreamweaver" , un repaso rápido de su interfaz de usuario, y algunos enlaces importantes con ayuda de Adobe sobre este programa:

Valora este artículo
(1 Voto)

Configurando CF Builder en WordPress

Configurando Contact Form Builder en WP (ii)

En la primera parte de este tutorial instalamos el plugin Contact Form Builder en WordPress como herramienta para la creación y publicación de un formulario de contacto en WordPress; en esta segunda parte configuraremos el plugin que ya tenemos instalado:

Valora este artículo
(1 Voto)

 Instalando un Formulario en WP

Configurando Contact Form Builder en WP (i)

Como forma de instalar un formulario de contacto instalaremos y configuraremos el plugin Contact Form Builder en WordPress, para lo cual seguiremos los siguientes pasos:

Jueves, 10 Marzo 2016 17:11

Trabajando con los menús en WordPress

Valora este artículo
(1 Voto)

Configurando los menús en WordPress

Consulta en clase: ¿Cómo configuro los menús en WordPress?

Junto con la entrada anterior sobre como Configurar Slider en plantilla Appointment de WordPress surgió la consulta sobre como trabajar con menús en WordPress. A continuación veremos la respuesta, sobre un sitio con la plantilla Appointment activada, la que dispone de un único espacio para publicar un único menú; la única salvedad que debemos hacer es que, con plantillas más potentes, es posible trabajar con distintos menús, en distintos espacios de la interfaz del front-end de esta plataforma.

Valora este artículo
(3 votos)

Consulta sobre WordPress

Configurar Slider en plantilla Appointment de WordPress

Respuesta a consulta recibida: ¿Cómo cambiar el contenido del slider de la plantilla "Appointment" que se ofrece en la lista de temas de WordPress?

Martes, 08 Marzo 2016 22:05

Photoshop Web: Exportando PSD a HTML

Valora este artículo
(1 Voto)

Exportando PSD a HTML

Exportando PSD a HTML con PhotoShop CC 2015

A partir del archivo que creamos en la segunda parte de este tutorial -Sectorizando nuestro diseño con PhotoShop CC- que es posible decargar haciendo clic aquí), veremos los pasos básicos para exportar nuestro diseño a formato HTML. Veamos cuáles son estos pasos:

Valora este artículo
(1 Voto)

Cabezal artículo

Sectorizando nuestro diseño con PhotoShop CC

En esta segunda parte sobre el diseño web utilizando PhotoShop CC veremos un posible proceso de sectorizado y generación de enlaces sobre el diseño logrado en la primera parte de esta serie.

Valora este artículo
(1 Voto)

Cabezal PhotoShop Web

Diseñando una página web básica usando PhotoShop CC

El siguiente tutorial muestra, de modo rápido, suponiendo que el alumno tiene un uso básico de PhotoShop, la forma de diseñar una página para un sitio web usando este programa; en una segunda parte añadiremos a sus botones, y exportaremos el resultado final a formato html, a modo de boceto funcional para que podamos presentárselo a nuestro cliente, antes de comenzar con la maquetación y, eventualmente, programación de nuestro diseño.