Autor: Ing. Jackeline Romero Rodríguez

CREACIÓN DE PÁGINAS WEB CON

PLANTILLAS PREDISEÑADAS

PLANTILLAS Adobe Dreamweaver CS3 permite crear páginas Web a partir de una serie de plantillas prediseñadas que están incluidas en el programa. La utilización de plantillas permite que todas las páginas que conforman un Sitio Web tengan un formato uniforme en cuanto a diseño, color de página, tipo de letra, etc. Cada diseño de plantilla que posee Adobe Dreamweaver, proporciona estructuras para crear páginas principales, páginas de texto, páginas de productos, páginas de catálogos y de calendario. Esto facilita y agiliza la creación de páginas Web, permitiendo adaptar el diseño de acuerdo a nuestra necesidad, modificando sólo el contenido de la página como imágenes, texto, etc;

• Plantillas – Páginas Principales: Un excelente punto de partida su Sitio Web. Puede incluir texto, vínculos e imágenes.

• Plantillas – Páginas de Texto: Un diseño sencillo para páginas sencillas. • Plantillas – Páginas de Productos: Permite añadir imágenes,

descripciones y características para promocionar productos.

• Plantillas – Páginas de Calendario: Idea para describir próximos eventos y reuniones importantes.

• Plantillas – Páginas de Catálogos: Muestra la imagen y el nombre de

cada uno de los productos.

Para crear una página Web utilizando una plantilla debe realizar el siguiente procedimiento: 1. Primero que todo cree un Sitio de Trabajo. Dentro de este sitio debe crear una

carpeta llamada Archivos, en esta carpeta se guardarán todos los archivos dependientes que se necesitan para las plantillas. Las páginas que creemos se guardarán directamente dentro de la carpeta del sitio.

2. En la barra de menú Archivo selecciona la opción Nuevo…

Autor: Ing. Jackeline Romero Rodríguez

3. En la ventana de Nuevo documento debe seleccionar la opción Página de

Muestra, en carpeta de muestra seleccione Página de Inicio (tema), y en página de muestra seleccione el diseño de plantilla que desea utilizar, por ejemplo Entrenamiento personal – Página de texto.

4. De clic en el botón Crear. 5. En la ventana Guardar Como…, seleccione la carpeta del sitio de trabajo

de creó. En nombre, digite el nombre con el cual desea guardar la página, y por último de clic en el botón Guardar.

Autor: Ing. Jackeline Romero Rodríguez

6. En la ventana Copiar Archivos Dependientes, debe seleccionar la carpeta en la cual desea guardar los archivos, para este caso debe seleccionar la carpeta Archivos que se encuentra dentro de la carpeta del sitio de trabajo que creó previamente. Por último debe dar clic en el botón Copiar.

7. En el área de trabajo de Dreamweaver, podrá observar la página con la

plantilla que ha seleccionado. Ahora puede modificar el contenido de la página de acuerdo a su necesidad.

Autor: Ing. Jackeline Romero Rodríguez

Cómo crear la Página Principal de un Sitio Web Cuando se va a crear un Sitio Web por ejemplo de una empresa, la página principal es la más importante porque en ella se encuentran los vínculos que le permiten al usuario navegar por las diferentes opciones del menú. Generalmente está página se guarda con el nombre de index.html. Para crear la página principal realice el siguiente procedimiento: 1. En la barra de menú Archivo selecciona la opción Nuevo… 2. En la ventana de Nuevo documento debe seleccionar la opción Página de

Muestra, en carpeta de muestra seleccione Página de Inicio (tema), y en página de muestra seleccione el diseño de plantilla que desea utilizar, por ejemplo Entrenamiento personal – Página principal

3. Realice los mismos pasos explicados anteriormente. Recuerde que debe

guardar la página con el nombre index.html 4. En el área de trabajo de Dreamweaver, podrá observar la página con la

plantilla para una página principal.

Autor: Ing. Jackeline Romero Rodríguez

5. Ahora puede modificar el contenido de la página de acuerdo a su necesidad.

Observe que en la parte superior de la página en la franja de color Amarillo se encuentran los textos que conforman las opciones del menú de navegación. Usted puede modificar estos textos de acuerdo a las opciones que quiere tener en el menú de su página. Si desea puede agregar más opciones, para esto debe hacer clic sobre cualquiera de los textos. Sobre cada texto le aparecerá una flecha, al hacer clic sobre ésta puede insertar una columna a la derecha o la izquierda.

Para que este menú funcione debe hacer vínculos en cada una de las opciones que le permitan al usuario ir a la página que ha seleccionado. Para hacer los vínculos debe hacer lo siguiente:

• Seleccione un texto del menú

Autor: Ing. Jackeline Romero Rodríguez

• En el Inspector de Propiedades haga clic en el icono de carpeta situado a la derecha del cuadro de texto Vínculo para localizar y seleccionar el archivo de la página a la cual desea ir al hacer clic sobre el texto seleccionado. En la opción Relativa a Seleccione Documento.

• De clic en el botón Aceptar. • En la barra de menú Archivo seleccione la opción Guardar.

• Para visualizar la página en un navegador presione la tecla F12.

Autor: Ing. Jackeline Romero Rodríguez

• Haga clic sobre el texto al cual le realizó el vínculo, inmediatamente le debe

aparecer la página vinculada.

• Para regresar a la página principal debe realizar un vínculo en la opción Inicio que se encuentra en la franja amarilla del menú. Al realizar el vínculo debe seleccionar la página index.html, que es la página a la cual se debe regresar.