Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Créer une page web avec un style CSS

Ce tutoriel illustre la création d'une page web mise en page de style CSS dans Dreamweaver.

Nous allons maintenant créer une page web en utilisant une mise en page CSS. Si vous vous demandez où en obtenir un, ne vous inquiétez pas. Nous pouvons utiliser l'un de ceux qui viennent avec Dreamweaver.

Commençons par la boîte de dialogue habituelle pour une nouvelle page.

Nouveau document

Sélectionnez HTML comme type de page à créer, comme d'habitude, mais cette fois, au lieu de sélectionner <aucun(en)> dans la liste Mise en page, choisissez 1 colonne fixe, centré, en-tête et pied de page.

Laissez le DocType à sa valeur par défaut.

Le choix de mise en page CSS est très important.

Mise ne forme du document

Sélectionnez Ajouter à l'en-tête si vous voulez que le code CSS pour cette mise en page doit être ajouté à la tête de la page.

Sélectionnez Créer un nouveau fichierdans Lier le fichier CSS si vous souhaitez que Dreamweaver crée une nouvelle feuille de style externe qui sera jointe à la nouvelle page.

Sélectionnez Lier au fichier existant pour utiliser une feuille de style CSS externe existante.

Nous allons créer une nouvelle feuille de style à cette occasion. Choisissez Créer un nouveau fichier puis cliquez sur Créer.

Nouvelle feuille de style

Je vois maintenant Enregistrer le fichier feuille de style dans la boîte de dialogue. J'ai déjà créé un dossier css dans mon dossier racine du site local, donc je vais l'utiliser pour garder toutes mes feuilles de style. Dreamweaver propose un nom pour la feuille de style, que je vais utiliser à cette occasion. Notez que je commence à partir de l'une des mises en page fournies par Dreamweaver, et effectivement faire une copie de celle-ci à personnaliser pour mon propre usage.

Voici la boîte de dialogue terminée.

Enregistrer feuille de style sous

Cliquez sur Enregistrer. La page est créée, et nous pouvons voir de nombreux éléments stylistiques de la page, y compris l'espace dans le coin supérieur gauche d'un logo.

Page gabarit

Le texte de la page donne quelques informations utiles sur l'utilisation et la personnalisation de la mise en page. Ce sera - bien sûr - remplacé par notre contenu.

Notez que le curseur se trouve dans l'en-tête de page et dans le panneau Propriétés, vous pouvez voir que l'en-tête de classe s'applique.

Jetons un coup d'œil à la feuille de style CSS que nous avons «hérité» de Dreamweaver. Ouvrez le fichier css / oneColFixCtrHdr.css et vous ouvrez une page Web, et elle ressemble à ceci.

Aperçu feuille de style

Si vous faites défiler, vous pouvez voir les commandes qui composent la feuille de style. Ne vous inquiétez pas si vous ne pouvez pas comprendre la plupart d'entre elles dont vous n'avez pas besoin encore. Toutefois, vous devriez trouver utiles quelques-uns des commentaires qui les accompagnent (le texte entre les marqueurs: / * et * / ).

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site