PDF (adobe.com)

Création d'une page avec une mise en page CSS



Lors de la création d'une nouvelle page dans Dreamweaver, vous pouvez en créer une qui contient déjà une mise en forme CSS. Dreamweaver vous permet de choisir parmi plus de 30 mises en forme CSS. En outre, vous pouvez créer vos propres mises en forme CSS et les ajouter au dossier de configuration pour qu'elles figurent parmi les choix de mise en forme dans la boîte de dialogue Nouveau Document.

Dreamweaver Les mises en page CSS sont restituées correctement dans les navigateurs suivants : Firefox (Windows et Macintosh) 1.0, 1.5 et 2.0, Internet Explorer (Windows) 5.5, 6.0, 7.0, Opera (Windows et Macintosh) 8.0, 9.0, et Safari 2.0.

Création d'une page avec une mise en page CSS

  1. Choisissez Fichier > Nouveau.
  2. Dans la boîte de dialogue Nouveau document, sélectionnez la catégorie Modèle vierge. Il s'agit de la sélection par défaut.
  3. Pour Type de page, sélectionnez le type de page à créer.
    Remarque : Vous devez sélectionner un type de page HTML pour la mise en forme. Par exemple, vous pouvez sélectionner HTML, ColdFusion®, PHP, etc. Vous ne pouvez pas créer de page ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ou ColdFusion Component avec une mise en forme CSS. Les types de page de la catégorie Autre dans la boîte de dialogue Nouveau document ne peuvent pas non plus inclure de mises en page CSS.
  4. Pour Mise en forme, sélectionnez la mise en forme CSS à utiliser. Vous pouvez choisir parmi plus de 30 mises en forme différentes. La fenêtre Aperçu montre la mise en forme sélectionnée et en donne une brève description.

    Les mises en forme CSS prédéfinies fournissent les types de colonnes suivants :

    Fixe
    La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou des paramètres de texte du visiteur du site.

    Elastique
    La largeur de la colonne est définie dans une unité de mesure (ems) proportionnelle à la taille du texte. La mise en page s'adapte si le visiteur du site modifie les paramètres du texte, mais pas en fonction de la taille de la fenêtre du navigateur.

    Liquide
    La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur du visiteur du site. La mise en page s'adapte si le visiteur du site augmente ou diminue la largeur de son navigateur, mais pas en fonction des paramètres de texte définis par le visiteur.

    Hybride
    Les colonnes emploient une combinaison des trois options précédentes. Par exemple, la mise en page Deux colonnes hybrides, encadré à droite comprend une colonne principale qui s'adapte à la taille du navigateur et une colonne élastique, à droite, dont la taille s'adapte aux paramètres de texte du visiteur du site.

  5. Sélectionnez un type de document dans le menu DocType.
  6. Sélectionnez un emplacement pour le fichier CSS de la mise en forme dans le menu déroulant CSS de mise en forme dans.
    Ajouter à l'en-tête
    Ajoute le code CSS de mise en forme à l'en-tête de la page que vous créez.

    Créer un nouveau fichier
    Ajoute le code CSS de mise en forme à une nouvelle feuille de style CSS externe et associe la nouvelle feuille de style à la page que vous créez.

    Lier au fichier existant
    Permet d'indiquer un fichier CSS existant qui contient déjà les règles CSS requises pour la mise en forme. Cette option est particulièrement utile si vous voulez utiliser la même mise en forme CSS (les règles CSS figurant dans un fichier) dans plusieurs documents.

  7. Procédez comme suit, au choix :

    • Si vous avez sélectionné Ajouter à l'en-tête dans le menu déroulant CSS de mise en forme dans (l'option par défaut), cliquez sur Créer.

    • Si vous avez sélectionné Créer un nouveau fichier dans le menu déroulant CSS de mise en forme, cliquez sur Créer, puis spécifiez un nouveau nom pour le nouveau fichier externe dans la boîte de dialogue Enregistrer la feuille de style sous.

    • Si vous avez sélectionné Lier au fichier existant dans le menu déroulant CSS de mise en forme dans, ajoutez le fichier externe dans la zone de texte Lier le fichier CSS en cliquant sur l'icône d'ajout de feuille de style, en renseignant la boîte de dialogue Associer feuille de style externe et en cliquant sur OK. Une fois que vous avez terminé, cliquez sur Créer dans la boîte de dialogue Nouveau document.

      Remarque : Lorsque vous sélectionnez l'option Lier au fichier existant, le fichier que vous spécifiez doit déjà contenir les règles correspondant au fichier CSS.

    Lorsque vous placez le CSS de mise en forme dans un nouveau fichier ou lorsque vous le liez à un fichier existant, Dreamweaver lie immédiatement le fichier à la page HTML que vous créez.

    Remarque : Les Commentaires conditionnels pour Internet Explorer, qui permettent de contourner les problèmes de rendu dans IE, restent incorporés dans la section head du nouveau document de mise en forme CSS, même si vous sélectionnez Nouveau fichier externe ou Fichier externe existant en tant qu'emplacement pour votre fichier CSS de mise en forme;
  8. (Facultatif) Vous pouvez également lier des feuilles de style CSS à la nouvelle page (sans rapport avec la mise en forme CSS) lors de la création de cette page. Pour ce faire, cliquez sur l'icône Ajouter une feuille de style au-dessus du volet Lier le fichier CSS, puis sélectionnez une feuille de style CSS.

Ajout de mises en forme CSS personnalisées à la liste de choix

  1. Créez une page HTML contenant la mise en forme CSS que vous souhaitez ajouter à la liste de choix de la boîte de dialogue Nouveau document Le fichier CSS correspondant à la mise en forme doit résider dans la section head de la page HTML.
    Pour uniformiser votre mise en forme CSS personnalisée avec les autres mises en formes fournies avec Dreamweaver, vous devez enregistrer votre fichier HTML avec une extension .htm.
  2. Ajoutez la page HTML au dossier Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts.
  3. (Facultatif) Ajoutez une image d'aperçu de votre mise en forme (par exemple, un fichier .gif ou .png) au dossier Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts. Les images par défaut fournies avec Dreamweaver sont des fichiers PNG de 227 pixels de large x 193 pixels de haut.
    Donnez à votre image d'aperçu le même nom de fichier que votre fichier de façon à pouvoir l'identifier facilement. Par exemple, si votre fichier HTML est nommé myCustomLayout.htm, appelez votre image d'aperçu myCustomLayout.png.
  4. (Facultatif) Créez un fichier de notes pour votre mise en forme personnalisée en ouvrant le dossier Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts\_notes, en copiant et en collant les fichiers de notes existants dans le même dossier, et en renommant la copie en fonction de votre mise en forme personnalisée. Par exemple, vous pouvez copier le fichier oneColElsCtr.htm.mno et le renommer myCustomLayout.htm.mno.
  5. (Facultatif) Après avoir créé un fichier de notes pour votre mise en forme personnalisée, vous pouvez ouvrir le fichier et spécifier le nom de la mise en forme, sa description et une image d'aperçu.