Cómo utilizar plantillas en Dreamweaver
Autor:Eve Cole
Fecha de actualización:2009-05-30 18:50:16
Hay una función muy poderosa en la herramienta de diseño web Dreamweaver (en lo sucesivo, DW, la versión más alta actual es 4.02, el ejemplo en este artículo es la versión 4.0), que son las plantillas.
Entonces, ¿cuál es el encanto de las plantillas? ¿Qué características tiene?
Usando plantillas, podemos solidificar elementos que aparecen en cada página del sitio.
Al utilizar plantillas para crear páginas WEB, todo el sitio puede tener un estilo unificado.
Siempre que se modifique la plantilla, todas las páginas WEB a las que se aplica la plantilla se pueden modificar sin la necesidad de modificar manualmente cada página. Por ejemplo, cuando necesita cambiar sus derechos de autor, ¿necesita modificar los derechos de autor página por página? ¿Qué pasa si hay miles de páginas? Creo que al principio tendrás dos o tres grandes. Pero si usas plantillas, esto no será un problema.
A continuación se muestra un ejemplo más completo que puede ayudarle rápidamente a dominar el uso de plantillas.
1. Editar página
Abra DW y cree un nuevo sitio, al que llamaremos "Spider Web".
Cree una nueva página en blanco como página interna (normalmente un sitio web solo tiene una página de inicio, por lo que no necesitamos crear una plantilla para la página de inicio) y asígnele el nombre body.htm.
Edite esta página y complétela como se muestra en la Figura 1.
Figura 1, la página body.htm después de completar la edición. Preste atención al punto A, que se utilizará como área editable y se mencionará a continuación.
2. Generar plantilla
Una vez completada la edición, guardamos esta página como una plantilla (tenga en cuenta que no se guarda como una página web htm normal). Puede guardarlo como plantilla a través de ArchivoàGuardar como plantilla en DW. Después de ejecutar este comando, aparecerá la ventana Guardar como plantilla, como se muestra en la Figura 2.
Figura 2, ventana Guardar como plantilla.
En la Figura 2, B es la selección del sitio, seleccionamos "Spider Web", C es el nombre del archivo de plantilla que queremos guardar y completamos el cuerpo. Presione Guardar en la esquina superior derecha para guardar.
En este momento, presionamos F8 para abrir el sitio (administrador del sitio) y podrá ver body.dwt en la carpeta Plantillas (cuando hay un archivo de plantilla, DW generará automáticamente la carpeta Plantillas y dwt es el tipo de plantilla). archivo)
3. Editar plantilla
Cuando abre el archivo de plantilla body.dwt en el sitio, encontrará que no parece ser diferente de la página body.htm, pero en realidad no puede agregar áreas editables en body.htm. Las áreas editables solo se pueden agregar en archivos de plantilla.
Para que todos comprendan mejor el "área editable", primero usamos esta plantilla para generar un archivo html: haga clic en ArchivoàNuevo desde plantilla, aparece la ventana Seleccionar plantilla, seleccione el cuerpo en las plantillas y luego haga clic en Seleccionar en la parte superior. esquina derecha para generar un nuevo archivo htm. Cambiamos el nombre de esta nueva página a body2.htm. Ahora usamos DW para abrir los archivos body.htm y body2.htm y comparar las diferencias. Encontrarás las palabras "Plantilla:cuerpo" escritas en la esquina superior derecha de la página body2.htm. (Esta página se genera a partir del archivo de plantilla body.dwt). Al mismo tiempo, se sorprenderá al descubrir que el archivo body2.htm no se puede editar (body.htm se puede editar). Por cierto, esto se debe a que el "área editable" no está definida en el archivo de plantilla body.dwt, lo que hace que las páginas generadas no se puedan editar. Entonces tenemos que agregar un área editable en el archivo de plantilla. Estos son los pasos para agregar una región editable:
1) Abra el archivo de plantilla body.dwt. Esperamos que se pueda editar la tabla del medio (es decir, A en la Figura 1). Pero en el archivo body.dwt, no en body.htm), agregue el área editable aquí.
2) Coloque el cursor del mouse en la tabla en A, haga clic con el botón derecho del mouse y seleccione Nueva región editable.... Aparecerá la ventana Nueva región editable, pidiéndole que complete el nombre de esta región editable (normalmente llámelo marca de región editable). Completamos Región01 y hacemos clic en Aceptar para cerrar esta ventana y completar la edición de la marca de región editable actual. En este momento, puede ver la pantalla en la tabla como se muestra en la Figura 3.
Figura 3, ventana Nueva región editable.
Tenga en cuenta que hay una región editable marcada como Región01.
Hasta ahora hemos definido un área editable. Si hay varias áreas de edición, podemos hacer lo mismo.
※También puede generar una nueva región editable a través de ModificaràPlantillasàNueva región editable…. Si desea eliminar la región editable, puede usar ModificaràPlantillasàEliminar región editable… y luego seguir las instrucciones.
4. Genere páginas usando plantillas.
De hecho, hemos mencionado antes que los pasos para generar páginas usando plantillas son a través de FileàNew From Template. Consulte los pasos relevantes en el paso tres. Ahora usamos la plantilla para generar una página llamada body3.htm. En este momento, encontrará que en la página body3.htm, excepto en el área editable Región01, que se puede editar, el mouse está restringido a otros lugares. Agregamos el contenido que necesitemos en esta área editable, por ejemplo, podemos escribir un artículo a nuestro antojo. De esta forma, podremos utilizar plantillas para generar páginas según nuestras necesidades.
5. Modifique el contenido de la plantilla y actualice los archivos del sitio.
Abra el archivo de plantilla body.dwt y modifique las áreas que necesitemos modificar. Por ejemplo, podemos reemplazar la imagen del logotipo o modificar cualquier área no editable, o incluso agregar o eliminar áreas editables, etc.
A continuación se utiliza el cambio del logotipo para ilustrar cómo la plantilla actualiza el archivo.
Cambiamos la imagen del logotipo a otra imagen que nos guste y guardamos el archivo body.dwt una vez completado. En este momento, DW abrirá una ventana que preguntará si el archivo necesita actualizarse. Seleccione Actualizar y DW actualizará automáticamente todas las páginas. generado con esta plantilla, DW abrirá la ventana Actualizar páginas durante la actualización. Una vez completada, el registro de actualización se mostrará en la ventana Actualizar páginas.
※Si no se selecciona Actualizar, DW mantendrá directamente el archivo de plantilla y no actualizará la página temporalmente, pero podemos actualizar la página manualmente, simplemente seleccione ModificaràPlantillasàActualizar páginas….
En este momento abrimos cualquier página generada con body.dwt, como por ejemplo body3.htm. Verá que la imagen del logotipo ha cambiado.
No es difícil descubrir que con esta función podemos resolver fácilmente el problema de la actualización del sitio. La función de plantilla es muy poderosa. Este artículo solo sirve como punto de partida. Muchas funciones no se pueden mencionar debido a problemas de espacio. Pruebe más para poder utilizarlo por completo. Pruebe el estilo de plantilla de DW.
En DW, también hay una función llamada biblioteca, que se puede combinar orgánicamente con plantillas, lo que hará que las plantillas sean más poderosas. Si los lectores están interesados, estoy dispuesto a ofrecer este regalo a todos.