PDF (adobe.com)

Creación de una página con un diseño CSS



Cuando crea una nueva página en Dreamweaver, puede crear una que ya contenga un diseño CSS. Dreamweaver viene con más de 30 diseños CSS distintos para elegir. Además, también puede crear sus propios diseños CSS y añadirlos a la carpeta de configuración para que aparezcan en la lista de diseños disponible del cuadro de diálogo Nuevo documento.

Los diseños CSS de Dreamweaver se reproducen correctamente en los siguientes navegadores: Firefox (Windows y Macintosh) 1.0, 1.5 y 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows y Macintosh) 8.0, 9.0; y Safari 2.0.

Creación de una página con un diseño CSS

  1. Seleccione Archivo > Nuevo.
  2. En el cuadro de diálogo Nuevo documento, seleccione la categoría Página en blanco (selección predeterminada).
  3. En Tipo de página, seleccione el tipo de página que desea crear.
    Nota: Debe seleccionar un tipo de página HTML para el diseño. Por ejemplo, puede seleccionar HTML, ColdFusion®, PHP, etc. No pueden crearse páginas ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ni ColdFusion Component con un diseño CSS. Los tipos de página de la categoría Otro del cuadro de diálogo Nuevo documento tampoco pueden incluir diseños de página CSS.
  4. En Diseño, seleccione el diseño CSS que desea utilizar. Puede elegir entre más de 30 diseños distintos. La ventana Vista previa muestra el diseño y ofrece una breve descripción del diseño seleccionado.

    Los diseños CSS predefinidos ofrecen los siguientes tipos de columnas:

    Fija
    El ancho de columna se especifica en píxeles. La columna no cambia de tamaño en función del tamaño del navegador o de la configuración del texto del visitante del sitio.

    Elástica
    El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamaño del texto. El diseño se adapta si el visitante del sitio cambia la configuración del texto, pero no en función del tamaño de la ventana del navegador.

    Flotante
    El ancho de columna se especifica como porcentaje del tamaño del navegador del visitante. El diseño se adapta si el visitante del sitio amplia o reduce el navegador, pero no en función de la configuración del texto.

    Híbrida
    Las columnas son una combinación de las tres opciones anteriores. Por ejemplo, el diseño dos columnas híbridas, barra lateral derecha tiene una columna principal que se ajusta al tamaño del navegador y una columna elástica a la derecha que se ajusta al tamaño de la configuración del texto del visitante del sitio.

  5. Seleccione un tipo de documento del menú emergente DocType.
  6. Seleccione una ubicación para el código CSS del diseño en el menú emergente Diseño CSS en.
    Añadir a Head
    Añade código CSS para el diseño al encabezado de la página que se va a crear.

    Crear nuevo archivo
    Añade código CSS para el diseño a una nueva hoja de estilos CSS externa y la adjunta a la página que se va a crear.

    Vincular a archivo existente
    Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseño. Esta opción es especialmente útil cuando desea utilizar el mismo diseño CSS (las reglas CSS para el mismo se encuentran en un único archivo) en varios documentos.

  7. Siga uno de estos procedimientos:

    • Si ha seleccionado Añadir a Head en el menú emergente Diseño CSS en (opción predeterminada), haga clic en Crear.

    • Si ha seleccionado Crear nuevo archivo en el menú emergente Diseño CSS en, haga clic en crear y, a continuación, especifique un nombre para el nuevo archivo externo en el cuadro de diálogo Guardar archivo de hoja de estilos como.

    • Si ha seleccionado Vincular a archivo existente en el menú emergente Diseño CSS en, añada el archivo externo al cuadro de texto Adjuntar archivo CSS; para ello haga clic en el icono Adjuntar hojas de estilos, introduzca la información necesaria en el cuadro de diálogo Vincular hoja de estilos externa y haga clic en Aceptar. Cuando haya finalizado, haga clic en Crear en el cuadro de diálogo Nuevo documento.

      Nota: Si selecciona la opción Vincular a archivo existente, el archivo que especifique debe contener las reglas para el archivo CSS.

    Al situar el diseño CSS en un nuevo archivo o vincularlo a uno existente, Dreamweaver vincula de forma automática el archivo a la página HTML que se va a crear.

    Nota: Los comentarios condicionales de Internet Explorer (CCs), que ayudan a solucionar problemas de representación en IE, siguen incrustados en el encabezado del nuevo documento de diseño CSS aunque se seleccione Nuevo archivo externo o Archivo externo existente como ubicación para el diseño CSS.
  8. (Opcional) También puede adjuntar hojas de estilos CSS a la nueva página (independientes del diseño CSS) al crearla. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.

Adición de diseños CSS personalizados a la lista de opciones

  1. Cree una página HTML que contenga el diseño CSS que desea añadir a la lista de opciones del cuadro de diálogo Nuevo documento. El código CSS del diseño debe residir en el encabezado de la página HTML.
    Para mantener la coherencia del diseño CSS personalizado con el resto de los diseños que vienen con Dreamweaver, debe guardar el archivo HTML con la extensión .htm.
  2. Añada la página HTML a la carpeta Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts.
  3. (Opcional) Añada una imagen de vista previa al diseño (por ejemplo, un archivo .gif o .png) a la carpeta Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts. Las imágenes predeterminadas que vienen con Dreamweaver son archivos PNG de 227 píxeles de ancho y 193 píxeles de alto.
    Asigne a la imagen de vista previa el mismo nombre que el archivo HTML para que pueda encontrarla fácilmente. Por ejemplo, si el archivo HTML se llama midiseñopersonalizado.htm, llame a la imagen de vista previa midiseñopersonalizado.png.
  4. (Opcional) Cree un archivo de Design Notes para su diseño personalizado; para ello abra la carpeta Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts\_notes, copie y pegue cualquiera de los archivos notes existentes en la misma carpeta y cambie el nombre a la copia por el de su diseño personalizado. Por ejemplo, podría copiar el archivo oneColElsCtr.htm.mno y cambiarle el nombre a midiseñopersonalizado.htm.mno.
  5. (Opcional) Cuando haya creado un archivo de Design Notes para su diseño personalizado, podrá abrir el archivo y especificar el nombre, la descripción y la imagen de vista previa del diseño.