Cómo utilizar una plantilla de diseño descargada

Escrito por katelyn kelley
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Una plantilla de diseño descargada es una gran manera de acortar la creación de un nuevo sitio web. Con una plantilla, no necesitas agonizar por el diseño, ya que está hecho para tí. Hasta los gráficos están incluídos. Sin embargo, necesitarás personalizarla para que encaje con las necesidades de tu sitio web. Esto requiere un programa de edición de web, preferentemente uno con una vista de la disposición del diseño, como el Adobe Dreamweaver y los programas de edición de diseño, como el Adobe Photoshop y el Adobe Fireworks que pueden leer archivos PNG y PSD y pueden exportar archivos JPG y GIF.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Un programa de edición de páginas web
  • Un programa de edición gráfica

Lista completaMinimizar

Instrucciones

    Personaliza el archivo HTML

  1. 1

    Busca los archivos incluídos en la plantilla de diseños descargada. Estos serán una mezcla de archivos HTML, CSS y de gráficos. Algúnos gráficos estarán etiquetados como "editables", queriendo decir que son los que el diseñador cree que querrás personalizar para tu sitio web, como el encabezado. Otros gráficos que probablemente no necesites editar son los espaciadores, las barras el los fondos que mantienen unido al diseño.

    Cómo utilizar una plantilla de diseño descargada
  2. 2

    Realiza una copia de la carpeta que contiene los archivos de la plantilla. De esta manera, puedes editar un grupo de archivos y mantener los originales en otro lugar en caso de que quieras utilizarlos nuevamente.

  3. 3

    Ejecuta el programa para editar web y abre el archivo de la plantilla etiquetado de una manera parecida a index.html. Ésta debería ser la página de inicio de la plantilla.

    Cómo utilizar una plantilla de diseño descargada
  4. 4

    Examina la plantilla en tu herramienta de edición web y busca las zonas que deseas personalizar. Haz clic sobre las imágenes para conocer el nombre de los archivos y poder ubicarlas en la plantilla para editarlos. También presta atención a las dimensiones de las imágenes (alto y ancho). Cuando personalices los gráficos de la plantilla deberás asegurarte de que tus nuevos archivos tengan las mismas medidas que las originales, sino deformarás la disposición.

    Cómo utilizar una plantilla de diseño descargada
  5. 5

    Edita las áreas de texto de la plantilla y agrega el nuevo contenido.

    Cómo utilizar una plantilla de diseño descargada
  6. 6

    Quita cualquier parte de la plantilla que no desees, pero recuerda que algunas plantillas que utilizan tablas en su disposición, pueden tener gráficos o textos en determinadas ubicaciones para mantener el ancho de una columna de una medida determinada. Si quitas esos ítems, la columna podría encogerse, distorcionando el armado. Reemplázala por un gráfico o un texto de igual tamaño para mantener el ancho de la columna.

  7. 7

    Utiliza el comando Guardar en tu herramienta de edición web para guardar tus cambios, luego sal de la herramienta de edición web.

    Personaliza los archivos de gráficos

  1. 1

    Ejecuta la herramienta de edición de gráficos y abre los archivos que deseas personalizar. Los que ya has visto en el archivo HTML, probablemente tengan una extensión JPG o GIF, que son archivos comprimidos optimizados ara la web. Los archivos que quieres editar son los archivos "originales" de las versiones comprimidas. Deberían estar en PNG o PSD o en otro formato distinto a JPG o GIF y probablemente estén almacenados en una carpeta separada dentro de la carpeta de la plantilla.

    Cómo utilizar una plantilla de diseño descargada
  2. 2

    Utiliza las herramientas de edición en tu programa de gráficos para cambiar los archivos a como tu deseas que se vean en tu página web y guarda los cambios.

  3. 3

    Exporta los archivos de gráficos editados en los formatos de JPG o GIF que coincidan con el formato de los archivos que estás reemplazando en la plantilla y colócalos en la misma carpeta que el archivo HTML que has guardado en la parte uno. No cambies los nombres de los archivos, de lo contrario, las referencias en el HTML se modificarán. Tu programa de gráficos sólo te notificará que el archivo exportado está reemplazando un archivo existente, y eso es lo que tú quieres.

    Cómo utilizar una plantilla de diseño descargada
  4. 4

    Vuelve a abrir el archivo HTML index en tu herramienta de edición de web para ver cómo se ven los gráficos actualizados y realiza los ajustes necesarios.

    Cómo utilizar una plantilla de diseño descargada

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles