Efectos Spry

Tema 1. Las plantillas en Adobe Dreamweaver CS6

Las plantillas web permiten agilizar el desarrollo de sitios web, ya que vienen con un
esquema de navegación, estilos, imágenes y áreas de contenidos predeterminados, donde el
diseñador sólo debe editar los contenidos y enlaces (hipervínculos).
Las plantillas permiten mantener el esquema de navegación y la imagen, es prácticamente
hacer copias de una página terminada (index.html), solamente cambia el contenido del área
(edición) a medida que se navega por cada página perteneciente al sitio web.
Como diseñador puede crear su propia plantilla, pero también es posible descargarlas desde
la internet, ya sea gratis o pagando.
Es importante que se tenga el boceto de la página con anterioridad, junto con el esquema de
navegación, luego debe entrar a internet y desde el explorador de confianza hacer la
búsqueda de sitios que brinden las plantillas, ubicar la que más se adapte al bosquejo
planteado y descargarla.
Procedimiento:
1. Desde internet abra la página de su buscador de confianza y digite “Descargar plantillas
web gratis dreamweaver CS6”.
 2. Descargue la plantilla que se encuentra en un archivo comprimido, luego coloque el
archivo en la carpeta del sitio web local y descomprímala. Para el ejemplo se utiliza la
plantilla llamada Professional.

3. Carpeta de la
plantilla.

1. Plantilla
descargada
en formato 2. Descomprimir
comprimido. la plantilla.

3. Dentro de la carpeta de la plantilla Professional halla el archivo de inicio Index.html, él de

hojas de estilo y una carpeta con imágenes.

Carpeta de la plantilla y
su contenido.
Recuerde que la plantilla debe estar en la carpeta del sitio web local.
4. Después de descargar y descomprimir la plantilla en la carpeta del sitio web local, se
procede a abrir el archivo index.html para su edición, esto puede hacerlo directamente
desde el panel o entrando al espacio de trabajo y abriendo el archivo.

Abrir el index.html de la
plantilla desde el panel.

5. En el área de trabajo se despliega el index.html. Se puede visualizar una página bien

diseñada con un esquema de navegación predefinido, áreas de contenido e imágenes.
Por defecto, el contenido de la plantilla del ejemplo está en inglés.
6. Inicie la edición del texto, ponga lo que se tiene dentro del boceto previo.

Edición de textos en
la página index.html.

7. Creación de hipervínculos: ahora implementará los hipervínculos para la navegación

entre las páginas conservando el diseño. Seleccione el texto activo, diríjase al menú
Insertar / Hipervínculo.
8. En el cuadro de diálogo digite el nombre del archivo o la dirección URL que se va a abrir
cuando se dé clic sobre el texto seleccionado. En el ejemplo está el nombre del archivo
que se va a invocar, en este momento el archivo no existe (acercade.html), pero se va a
crear más adelante. Este procedimiento se debe hacer para todos los enlaces.

Nombre del archivo

o URL.

9. Una vez creados todos los hipervínculos y finalizada la edición del contenido de la página
index.html, guarde y proceda a realizar copias de esta página, una por cada hipervínculo
desarrollado.
10. Para realizar la copia del index.html, diríjase al menú Archivo / Guardar como.

11. En nombre del archivo se debe poner la denominación exacta utilizada en la creación de
los hipervínculos (punto 8) y luego hacer clic en Guardar.

Nombre del archivo

utilizado en el punto 8.
12. Edite la página actual con el contenido, guarde y realice tantas copias de index.html
como sea necesario, cada una con el nombre empleado para realizar los hipervínculos.
Repita los pasos 10 y 11.

Edite el contenido
que debe tener la
página Acerca de.
Se tiene a index.html y
acercade.html con el
mismo esquema.

Ahora en el sitio local ya

se tiene un nuevo
archivo.

13. Después de terminar la copia y edición de las páginas que requiere el sitio web, debe
ubicarse sobre la página index.html y dar vista previa en el navegador.

Ver vista previa del

sitio web.
14. Vista previa del sitio web, haciendo uso de plantillas.

En la página de
inicio.

15. Navegando por los enlaces.

En la página de
Acerca de.
 Referencias

 Servicio Nacional de Aprendizaje, SENA. (2009). Diseño web con Adobe

Dreamweaver CS3. Colombia: Autor.

 Fotolia. (2004). Imágenes de alta definición para todos sus usos profesionales.
Consultado el 11 de diciembre de 2013 en:
http://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_
CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7Ao
dkiMAKg

Control del documento

Nombre Cargo Dependencia Fecha

Centro de
Teleinformática y
Diciembre
José Geovanny Instructor Producción
de 2013
Angulo Imbachi Industrial. Regional
Cauca
Autor
Centro de
Teleinformática y
Guillermo Alexander Diciembre
Instructor Producción
Burgos Ibarra de 2013
Industrial. Regional
Cauca
Guionista - Centro
Rachman Bustillo Diciembre
Línea de Agroindustrial.
Martínez de 2013
Producción Regional Quindío
Adaptación Integración
Centro
Andrés Felipe de Diciembre
Agroindustrial.
Velandia Espitia Contenidos y de 2013
Regional Quindío
Actividades