Scribd Logo
Importer

Bienvenue sur Scribd !

  • Dreamweaver Cloud Creative

    Transféré par

    Johan jordi Madounga-kombo
    5 vues26 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    5 vues26 pages

    Dreamweaver Cloud Creative

    Transféré par

    Johan jordi Madounga-kombo

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 26

    Travail pratique développement web

    FORMATEUR M.MOUNZEO G.

    UNIV LOANGO gi3

    IDE ADOBE CLOUD CREATIVE

    Adobe Dreamweaver CC est un logiciel d’environnement de développement intégré (IDE), ce qui


    signifie qu’il fournit des outils et un soutien complets à des fins de développement. Grâce à la
    structure Créative Cloud, vous pouvez choisir d’inclure d’autres logiciels de création d’Adobe pour
    stimuler votre productivité.

    1. Créer un nouveau site

    Dans votre tableau de bord Adobe Dreamweaver CC, allez à Site -> Nouveau site et une
    fenêtre s’ouvrira.

    La première étape est de donner un nom à votre site web et de l’enregistrer dans un dossier
    unique. Cela permet d’organiser les fichiers et facilitera le processus de téléchargement.

    Si vous souhaitez inclure des images dans votre site, vous pouvez le faire en naviguant vers
    Paramètres avancés -> Infos locales. Le dossier des images doit également être créé dans le
    dossier de votre site.
    Cliquez sur Enregistrer lorsque vous avez terminé.

    2. Créer le fichier de la page d’accueil

    Vous aurez un espace de travail vide pour le moment. Mais, regardez dans le panneau en haut
    à droite, les fichiers de votre site devraient s’y trouver. Maintenant, nous allons créer le fichier
    de la page d’accueil à partir de zéro.

    Cliquez sur Fichier -> Nouveau et choisissez Nouveau document. Sélectionnez HTML
    comme type de document et cliquez sur Créer. Le titre du document est facultatif.
    Vous serez redirigé vers l’espace de travail et vous aurez une page blanche avec plusieurs
    lignes de code HTML. Ceci est en fait la vue en temps réel de votre site web. Enregistrez ce
    fichier HTML sous le nom index.html, et placez-le dans le dossier du site.

    3. Créer un en-tête
    Nous allons créer l’en-tête du site web. Habituellement, il s’agit du logo et du nom de votre
    site.

    Cliquez sur la page blanche ou choisissez un endroit précis dans l’élément <body> de
    l’éditeur. Dans le menu supérieur, cliquez sur Insertion. Vous obtiendrez ainsi une liste
    d’éléments HTML courants que vous pouvez ajouter à votre page.

    Trouvez l’élément Header.

    Cliquez ou glissez-déposez-le dans votre espace de travail, et il sera ajouté à votre site web
    avec son code.
    Ensuite, nous allons transformer l’en-tête en un titre avec la balise <H1>…</H1>. Ceci est
    pour des raisons de référencement et pour informer les moteurs de recherche de la nature de
    votre site. Marquez le texte dans cette section et allez dans le menu Insertion. Faites une
    recherche et cliquez sur Titre : H1.

    Ensuite, changez le texte en fonction du titre de votre site web. Il doit être descriptif et
    représentatif. Ici, nous allons utiliser « Bienvenue sur le site de développement ».
    4. Ajouter un menu de navigation

    Pour ajouter un bouton de navigation, ajoutez une ligne après l’en-tête en appuyant sur la
    touche retour ou entrée. Allez maintenant dans le panneau Insertion et recherchez l’élément
    Navigation. Lorsque vous cliquez dessus, une fenêtre s’ouvre. Saisissez navigation comme
    ID et cliquez sur OK.

    Cela ajoutera un élément de navigation à l’éditeur. Lorsque vous êtes dans le contenu de
    l’élément, recherchez Hyperlink dans le panneau Insertion. Cliquez dessus et remplissez les
    détails comme suit :
    Important : le lien correspondra à la page dans laquelle vous naviguerez sur votre site web.
    Actuellement, nous n’utilisons qu’un hashtag # pour combler le vide.

    Lorsque vous avez terminé, cliquez sur OK. C’est maintenant un bouton d’accueil cliquable
    et une nouvelle ligne de code a été ajoutée sur l’éditeur.
    5. Ajouter une description du site web

    Nous allons insérer un titre secondaire, un paragraphe et plusieurs puces comme description.

    Ajoutez une ligne après le code de navigation et cliquez sur Titre : H2 et Paragraphe dans le
    panneau Insertion. Cela ajoutera les balises <h2> et <p> dans l’éditeur. Remplissez-y votre
    contenu.

    Maintenant, pour ajouter des puces, ajoutez une autre ligne sous le code du paragraphe. Allez
    dans le panneau Insertion et cliquez sur Liste simple. Cela devrait ajouter la balise <ul> sur
    l’éditeur. Ensuite, cliquez sur Élément de liste dans le panneau Insertion et il ajoutera la
    balise <li> à l’intérieur de la balise <ul>.

    Le truc avec la liste en HTML, c’est que vous devez vous-même ajouter manuellement
    plusieurs balises en fonction du nombre de vos points. Pour nous, c’est comme ça.
    Vous avez essentiellement créé la structure de base de la page d’accueil. Vous pouvez
    également ajouter du contenu supplémentaire comme des formulaires, des vidéos, des images,
    etc.
    Bien que cela semble ennuyeux pour le moment, nous allons ajouter le style de la page pour la
    rendre plus attrayante.

    6. Créer un fichier CSS

    La feuille de style en cascade (CSS) est utilisée pour styliser les éléments en HTML et va de
    pair lors de la création d’un site web par les développeurs. Pensez à HTML comme la
    structure du corps, et CSS comme la partie esthétique qui rend le corps visuellement attrayant.

    Maintenant, la première chose à faire est de donner un identifiant à votre Header. Allez en bas
    à droite du panneau Dreamweaver et choisissez le panneau DOM. Vous y verrez un aperçu de
    la structure de votre site web.

    Cliquez sur Header, et vous remarquerez qu’il marque votre en-tête en bleu, ainsi que
    l’étiquette et le symbole plus.
    Cliquez sur le symbole plus et tapez #header. Le hashtag signifie que nous attribuons un
    identifiant à cet élément. Appuyez sur la touche retour ou sur la touche entrée. Dans le menu
    suivant, sélectionnez une source : Créer un nouveau fichier CSS.

    Une nouvelle fenêtre s’ouvrira. Choisissez Parcourir et localisez le dossier de votre site.
    Tapez style.css et cliquez sur Enregistrer. Ensuite, cliquez sur OK.
    Vous remarquerez qu’un nouveau style.css apparaît en haut de la vue en temps réel et un
    nouvel élément de lien sur l’éditeur de code.

    Faites de même pour tous les éléments qui ont besoin d’être stylisés. Cette fois, au lieu de
    créer un nouveau fichier CSS, enregistrez-le dans le même fichier style.css que vous avez
    créé précédemment.

    Maintenant, vous êtes prêt à le styliser en utilisant le sélecteur CSS.

    7. Créer un sélecteur CSS pour le titre du site web

    Nous allons changer la police de caractères et aligner le titre de notre site web au centre.

    Sélectionnez le H1 sous votre header dans le panneau DOM. Ensuite, choisissez CSS
    Designer dans le panneau ci-dessus.
    Cliquez sur le symbole plus qui se trouve juste derrière Sélecteurs. Il propose
    automatiquement un nom comme #header h1, et appuyez sur la touche Entrée.
    Remarque : Cela signifie que vous ne visez que l’élément nommé h1 à l’intérieur de
    l’élément #header. De cette façon, le style ne s’appliquera qu’au texte écrit (le titre de votre
    site web) et non à l’élément header lui-même.

    8. Changer la police du titre

    Assurez-vous que les sélecteurs pointent sur #header h1.

    Cliquez sur Propriétés et décochez la case Ensemble pour déverrouiller les options Mise en
    page, Texte, Bordure, Arrière-plan et Autres.

    Cliquez sur l’option Texte et survolez font-family et cliquez sur default font. Vous aurez
    alors le choix entre de nombreuses options.
    De plus, le menu Gérer les polices vous donnera une autre gamme d’options disponibles dans
    la base de données Adobe Edge Web Fonts.

    Choisissez votre police préférée en cliquant dessus. Ici, nous utilisons une police appelée
    Karla. Lorsque vous aurez terminé, la police de titre de votre site web sera modifiée et le
    code nécessaire sera ajouté au Code source et à style.css.
    9. Mettre le titre au centre

    Dans l’option Texte, survolez text-align et cliquez sur center. Vous remarquerez que le
    changement se produit et que du code supplémentaire est ajouté au fichier style.css.
    Apportez toutes les modifications nécessaires au contenu de votre site web. Pour ce tutoriel,
    nous avons également ajouté du contenu et donné un nouveau style à notre site. Voici le look
    final :

    Vous aimerez peut-être aussi