USAR PLANTILLAS PARA UNA EMERGENCIA

Una plantilla es un conjunto de páginas con un diseño preestablecido y listo para usarse, Expression Web
tiene una gran cantidad de plantillas, sólo se debe escoger aquella que se desea usar.

Una vez que entramos a Expression Web, para crear una plantilla realizamos los pasos siguientes:

1. Seleccionamos el menú Archivo  Nuevo  Sitio Web

2. En el cuadro de diálogo “Nuevo” seleccionamos Plantillas,  Organización1

En especifique la ubicación del nuevos sitio Web cambiamos el nombre de la última carpeta a
“PaginaEcologica”

3. Presiona el botón “Aceptar” para que Expression Web comience con la creación de un sitio web nuevo
Una vez que Expression Web ha terminado de crear el sitio nuevo basado en una plantilla podemos
observar una serie de carpetas y archivos en la “Lista de carpetas”.

4. Dentro de la carpeta de PaginaEcologica, se crearon automáticamente las carpetas: About, Calendar,

Contact, FAQ, images, information_links, news, photo_gallery y styles, cada una de ellas guarda ciertos
archivos, que conforman el sitio de la Página Ecológica.

Cabe señalar que este sitio ya contiene imágenes, texto e hipervínculos listos para funcionar, para ver el
sitio en ejecución basta ir al menú Archivo  Vista previa en navegador…
Debajo del título y en la parte inferior se localizan una serie de enlaces (hipervínculos) que llevan a
diferentes partes del sitio web, cada parte esta formada por una página web y cada una de las páginas
web se encuentra en una carpeta específica de la estructura del sitio web, de acuerdo con la relación
siguiente:

COMENZAR POR EL DEFAULT.

Ya hemos visto que el sitio es totalmente funcional, tiene imágenes, texto e hipervínculos que funcionan,
sin embargo, la información que tiene el sitio es aún el de la plantilla de Expression Web, entonces, es
necesario ver la forma en que se puede editar la información para que se ajuste a nuestros
requerimientos.
Todos los sitios web que existen en Internet tienen una página por omisión, esta página es la primera que
se muestra cuando se ingresa a un sitio web mediante un navegador.
Para que una página se cargue por omisión, debe tener un nombre especial, dependiendo del servidor
donde esté hospedado el sitio, la mayoría de los servidores web aceptan los nombres siguientes:
Default.htm, Index.htm

Y esa página default o index debe guardarse en la carpeta raíz del sitio web

Así que este archivo es el que se va a modificar en primer lugar para darle el aspecto que se desea,
después se modificarán cada una de las páginas que conforman el sitio web.
¿QUÉ PUEDO CAMBIAR CUANDO USO UNA PLANTILLA?
Cuando se usan plantillas de Expression Web para crear un sitio, en cada página hay partes se pueden
cambiar, pero otras no, esto es con el fin de mantener la concordancia y el diseño del sitio, veamos cuales
son estas áreas que se pueden modificar:
Las aéreas que se pueden cambiar se reconocen porque es posible dar clic y seleccionarlas, mientras
que las áreas que no se pueden cambiar no pueden ser seleccionadas.
En el caso de la página principal, el área en los cuadros rojos es el área editable, mientras que el resto no
se puede cambiar (posteriormente veremos como cambiar esas partes).

Eso significa que solo podemos cambiar las imágenes y el texto de los encabezados 2 y 3
Puesto que estamos construyendo un sitio para la ecología, el diseño en color verde nos viene muy bien,
sin embargo es necesario cambiar las imágenes y el texto, esto lo haremos en la siguiente clase.

LAS DOS VISTAS DE UNA PÁGINA

Como se dijo en la primera clase, las páginas web están escritas en un lenguaje llamado HTML, hasta el
momento no lo hemos utilizado ya que Expression Web nos ayuda con esta tarea y va creando el código
HTML necesario para que la página que se esta creando luzca como deseamos, sin embargo, Expression
Web también permite ver el código que genera para las páginas; cuando se tenga mas experiencia se
podrá modificar directamente el código de una página para hacer ajustes finos.
Expression Web nos permite tres modos de ver la página web (un momento, en el encabezado dice dos,
si son dos modos y el tercero es mixto): Diseño, Código y Dividir estos botones están ubicados en la parte
inferior de la ventana de la aplicación; para ver el código generado para nuestra página “default.htm”
podemos presionar el botón “Código”

Para regresar al modo original presionamos el botón “Diseño” y para ver ambos, presionamos el botón
“Dividir”, que permite ver el código y el diseño de la página al mismo tiempo.

CAMBIO DE LAS IMÁGENES PREESTABLECIDAS

Continuamos trabajando con la página Default.htm y ahora es tiempo de comenzar a editar la página para
que cumpla con la función que le hemos asignado; como recordará, en la primera clase insertamos un par
de imágenes en la página acerca de las ardillas del mundo, para este caso el proceso es un poco distinto.
El primer paso es averiguar el tamaño de las imágenes para hacer que las nuevas tengan el mismo
tamaño,
Para esto:

1. Damos clic en la imagen del puente para seleccionarla

2. Damos clic derecho y en el menú contextual seleccionamos “Propiedades de imagen”

3. En el cuadro de “Propiedades de imagen” seleccionamos la pestaña “Apariencia”

4. El tamaño (ancho y alto) se muestra en pixeles o en porcentaje, en este caso es de 288 x 189 pixeles.

Cerramos el cuadro de “Propiedades de imagen” y realizamos los mismos pasos para averiguar el
tamaño de la otra imagen; ahora tenemos que la imagen “garden_01.jpg” mide 288 x 189 pixeles y la
imagen llamada garden_02.jpg mide 160 x 248 pixeles.
Con ayuda de un editor de imágenes creamos dos imágenes que sustituirán a estas, cada una con la
medida correcta; así, tenemos dos imágenes, una llamada “PaginaEcologica.jpg” con un tamaño de 288 x
189 y la otra imagen que se llama “SoloTenemosUnHogar.jpg” de 160 x 248.

Vamos a colocar cada una de ellas en su lugar, para esto realizaremos los pasos siguientes:
1. Con ayuda del explorador de Windows copiamos ambas imágenes a la carpeta de imágenes del sitio
web, para saber donde esta ubicada la carpeta podemos ver la lista de carpetas de Expression Web.

Las imágenes para sustituir han sido copiadas a la carpeta images

Una vez que las imágenes se han copiado regresamos a Expression Web y para cambiar las imágenes
hacemos lo siguiente:

1. Seleccionamos la imagen del puente (garden_01.jpg) y damos clic derecho.

2. Del menú contextual seleccionamos “Propiedades de imagen…”

3. En el cuadro de “Propiedades de imagen” presionamos el botón “Examinar…”

4. En el cuadro de “Imagen” seleccionamos el archivo “PaginaEcologica.jpg” y presionamos el botón

“Abrir”.

5. Podemos incluir un texto alternativo, el cual se mostrará si, por algún problema la imagen no llega a
cargarse.

EDICIÓN DE TEXTO
Solo falta poner los encabezados y textos adecuados para tener completa la página principal. (En clases
posteriores nos ocuparemos del encabezado principal).

1. Seleccionamos el “Encabezado 2”, lo borramos y escribimos “Ecología”.

2. Seleccionamos el texto que esta debajo y lo sustituimos por el Texto1 del archivo TextoClase3.txt.

3. En la caja de “Propiedades de CSS” buscamos el atributo “text-align” y establecemos su valor a “justify”

(justificado).

4. En el “Encabezado3” colocamos la frase “Porque solo tenemos un hogar”

5. En Seleccionamos el espacio para el texto y ahí copiamos el Texto2 del archivo TextoClase3.txt.

6. En la caja de “Propiedades de CSS” buscamos el atributo “text-align” y establecemos su valor a “justify”

(justificado).
Guardamos el archivo default.htm y podemos verlo en el navegador para apreciar como luce.

LA IMPORTANCIA DEL ARCHIVO MASTER.DWT

Cuando navegamos por un sitio web, vemos que éste tiene algunas partes que se mantienen sin cambios
en todas las páginas que visitamos, por ejemplo el encabezado, el pie de página, el menú principal, los
colores, etc.
Es aquí donde interviene el archivo Master.dwt, ya que en él se encuentran definidas las áreas que se
mantienen fijas en todas las páginas del sitio web, esto significa que si editamos este archivo, podremos
cambiar el aspecto de todo el sitio web, ya que el cambio se aplicará a todas las zonas invariantes de las
páginas del sitio.

El archivo master.dwt se encuentra en la raíz del sitio web.

Un archivo master.dwt también nos ayuda a no hacer cambios accidentales al diseño de una página en
particular.
Como recordará, en la clase anterior vimos que al usar una plantilla, existen zonas que no se pueden
editar en una página web, esto es porque pertenecen a las zonas fijas (protegidas) definidas por el
archivo master.dwt.
Ahora se verá la forma en que este archivo se puede editar para modificar todas las páginas del sitio de
forma simultánea.
EDICIÓN DE LOS TÍTULOS Y DEL MENÚ.
Para realizar los cambios que ser requieren en el título vamos a editar al archivo master.dwt, lo hacemos
de la forma siguiente:

1. De doble clic sobre el archivo “master.dwt” para mostrarlo en la ventana de diseño.

2. De clic en ORGANIZACIÓN y escriba el título: “Mundo Verde”

3. De clic en “Descripción de la organización” y escriba: “Apoyando a la Ecología”

Ahora vamos a cambiar el menú de forma que se adapte a nuestras necesidades.
En este caso podemos ver que la plantilla creó automáticamente el menú con las opciones: Principal,
Acerca de, Noticias, Calendario, Galería de fotografías, Vínculos, Preguntas más frecuentes y Contacto.
Casi todas nos sirven, sin embargo vamos a eliminar las ligas correspondientes a “Acerca de”, “Galería de
fotografías” y “Calendario” y en su lugar vamos a colocar los enlaces: “Contaminantes”, “En peligro de
extinción” y “Apoyo al planeta.”
Para esto realizaremos los pasos siguientes:

1. En la vista de diseño del archivo master.dwt seleccionamos el texto del vínculo “Acerca de”.

2. Escribimos “Contaminantes”.

3. Seleccionamos el texto del vínculo “Calendario”.

4. Escribimos “Peligro de extinción”.

5. Seleccionamos el texto del vínculo “Galería de fotografías”.

6. Escribimos “Apoyo al planeta

Realizamos los mismos pasos con el menú de la parte inferior para que los textos de los vínculos sean
iguales.

Algo importante que debemos recordar es que aunque se hayan cambiado los textos de los vínculos,
éstos aun enlazan con sus archivos originales, a estos no les hemos hecho cambios, los cambios se
harán en clases posteriores.
Una vez que hemos hecho todos los cambios al archivo master.dwt, es necesario guardarlo, en el
momento de presionar el botón de guardar, Expression Web nos avisa que se van a afectar a cierto
número de archivos.

Después vamos a Archivo  Guardar todo para asegurarnos de que todo el sitio web ha sido actualizado.
VISTA DEL SITIO EN UN NAVEGADOR.
Una de las ventajas de las páginas creadas con Expression Web es que están diseñadas para funcionar
en la mayoría de los navegadores que existen actualmente.
Si se desea ver la página en el navegador por defecto se puede presionar la tecla F12, sin embargo
también se puede mostrar en otros navegadores que se tengan instalados en la computadora.
Los navegadores más comunes son Internet Explorer, Netscape y Firefox, para ver la página en
cualquiera de ellos o en todos a la vez puede usar: Archivo  Vista previa en el explorador  Seleccionar el
navegador (explorador) y la resolución a la que desea ver la página web.
Es
Vínculo es sinónimo de hipervínculo, liga o enlace, todos son traducciones de Hyperlink, link