Dans un monde de créateurs de sites Web par glisser-déposer, Adobe Dreamweaver a bien fait de rester pertinent face à la concurrence. Doté d’excellentes fonctionnalités et de nombreux outils pour vous faciliter la vie, ce logiciel est un excellent choix pour les concepteurs et les développeurs Web.
Mais comment créez-vous votre premier site Web avec Dreamweaver ?
Premiers pas avec Dreamweaver
Vous devez obtenir une copie d’Adobe Dreamweaver avant de pouvoir commencer à l’utiliser, mais un essai gratuit est disponible.
Dirigez-vous vers le Adobe site Web, connectez-vous ou créez un compte, puis téléchargez l’outil Adobe Creative Cloud pour commencer. À partir de là, vous pouvez télécharger Adobe Dreamweaver et commencer avec le guide complet.
Ce guide vous montrera comment créer un site Web de base en utilisant les fichiers de modèle Dreamweaver comme base. Vous pouvez trouver les fichiers complets du projet sur ce référentiel GitHub.
Étape 1 : créer un site Dreamweaver
Ouvrez Adobe Dreamweaver et accédez au Placer menu en haut de la page. Sélectionner Nouveau sitepuis choisissez un nom pour votre site Web et choisissez un emplacement de fichier pour celui-ci.
Étape 2 : créer un fichier de modèle
Ensuite, il est temps de créer un fichier modèle pour votre nouveau site Web. Les fichiers modèles fonctionnent de la même manière que les thèmes utilisés par les systèmes CMS tels que WordPress et Shopify, sauf que vous les créez vous-même.
Cliquer sur Créer un nouveau ou aller à Dossier > Nouveau et choisissez Modèle HTML du Type de document liste.
Cela créera un modèle de base avec du code HTML déjà en place. Vous utiliserez ce code HTML pour votre projet, il vaut donc la peine de le conserver pour les prochaines étapes.
Il est maintenant temps de créer la section menu/en-tête sur le site Web dans le modèle que vous venez de créer. Aller à Insérer en haut de l’écran et sélectionnez Entête de la liste.
Une boîte de dialogue s’ouvrira à ce stade. Ajoutez un nom pour la classe de votre nouvel en-tête et cliquez sur D’ACCORD pour ajouter le code à votre HTML. Il devrait automatiquement placer le nouveau code dans le tags, mais vous pouvez le déplacer si nécessaire.
Ensuite, vous devez également ajouter un élément div pour le logo du site et un élément nav pour le menu du site. Allez à la Insérer menu et sélectionnez Divisionpuis retournez à la Insérer menu et sélectionnez Navigation. Ces deux éléments ont besoin de leur propre nom de classe.
Comme dernière étape de ce processus, nous avons ajouté quelques options de menu à notre élément de navigation. Pour ce faire, rendez-vous sur Insérer et sélectionnez Lien hypertexte. Nous avons ajouté cinq hyperliens à l’en-tête de notre site : Home, Lion, Tiger, Jaguar et House Cat.
Les pages qui auront des liens dans l’en-tête n’existent pas encore, alors laissez le href propriété vide jusqu’à ce que vous les créiez.
Étape 4 : Ajouter une feuille de style pour CSS
Comme vous pouvez le voir, ce site Web n’a pas l’air très bon tel qu’il est. Un peu de CSS résoudra ce problème, et vous pouvez facilement ajouter une feuille de style dans Dreamweaver. Allez à la Concepteur CSS sur le côté droit de l’écran et cliquez sur le Plus icône à côté de Sources. Il vous suffit de choisir un nom pour votre feuille de style et de laisser le reste des paramètres tels quels.
La première chose à faire est de transformer l’en-tête en flexbox. Flexbox n’est qu’un moyen de mettre en page une page Web à l’aide de CSS. Parallèlement à cela, la police du site est définie, un fond noir est défini et plusieurs autres modifications sont en place pour améliorer l’apparence du site. Vous pouvez voir le code CSS complet à la fin de l’article.
Étape 5 : Ajouter des régions modifiables au modèle
Les régions modifiables créent des sections de code HTML modifiables lorsque vous utilisez le modèle pour créer d’autres pages. Le contenu de notre page principale s’intègre parfaitement dans une région comme celle-ci. Aller à Insérer > Modèle > Région modifiable pour ajouter une région modifiable à votre page.
Étape 6 : Ajouter du contenu image/texte au modèle
La région modifiable que vous venez d’ajouter est utilisable sans HTML supplémentaire, mais vous pouvez toujours en ajouter à modifier lorsque vous créez des pages individuelles. Pour commencer, rendez-vous sur Insérer et sélectionnez Division pour ajouter un nouvel élément div à votre site Web.
Cela fonctionnera à la fois comme conteneur pour le contenu textuel de la page et comme emplacement pour ajouter une image d’arrière-plan. Cet élément a une classe et un ID afin que différentes pages aient différentes propriétés CSS. Ces motifs d’arrière-plan CSS uniques sont parfaits si vous souhaitez faire passer votre site Web Dreamweaver au niveau supérieur.
Ensuite, allez à Insérer > Rubriques > H1 pour ajouter un titre à l’intérieur de l’élément div que vous venez d’ajouter. Ces deux éléments ont besoin de CSS pour fonctionner correctement. La div a des valeurs d’image d’arrière-plan, de taille d’arrière-plan et de hauteur. Aller à Dossier > Sauver tous pour vous assurer que votre modèle est mis à jour.
Vous pouvez ajouter des images depuis n’importe où sur votre réseau local ou sur Internet, mais il est préférable d’enregistrer les images dans les propres fichiers du site Web pour un accès facile.
Étape 7 : Ajouter des pages avec le modèle
Maintenant que vous avez un modèle en place, vous pouvez commencer à ajouter quelques pages. Aller à Dossier > Nouveau et sélectionnez HTML en dessous de Type de document. Ajouter un Titre pour chaque page que vous ajoutez avant de cliquer Créer.
La nouvelle page est blanche et n’a pas encore notre modèle. Une fois votre nouvelle page ouverte dans Dreamweaver, accédez à Outils > Modèles et cliquez sur Appliquer le modèle à la page. Choisissez votre modèle dans la liste et cliquez sur Sélectionner pour charger votre modèle. Enfin, rendez-vous sur Dossier > Enregistrer sous et choisissez un nom pour votre nouvelle page avant de l’enregistrer.
Répétez ce processus jusqu’à ce que vous ayez suffisamment de pages pour répondre à vos besoins. Vous n’êtes pas obligé de vous en tenir à un seul modèle pour cela ; vous pouvez en ajouter de nouveaux pour différentes mises en page.
Étape 8 : Ajouter des liens de page au modèle
Une fois vos pages ajoutées, vous pouvez modifier les liens de navigation dans votre modèle afin qu’ils pointent vers les bonnes pages. Revenez à votre modèle et recherchez les balises A que vous avez ajoutées précédemment. Supprimez le lien d’espace réservé et cliquez sur le guillemets pour ouvrir le Parcourir menu. À partir de là, vous pouvez sélectionner la bonne page pour chacun de vos liens.
Étape 9 : Corrigez CSS/HTML sur les nouvelles pages
Chacune des pages aura la même apparence pour le moment. Il y a quelques étapes à suivre pour s’assurer qu’ils ont leur propre contenu ; suivez les étapes ci-dessous pour terminer votre nouveau site Web.
- Modifiez l’ID d’élément div de contenu sur chaque page pour refléter le titre de la page
- Ajoutez du code CSS pour le nouvel ID d’élément avec une image d’arrière-plan différente
- Changer le titre sur chaque page
Étape 10 : testez le site Web dans votre navigateur
Vous pouvez tester votre nouveau site Web dans le navigateur Web de votre choix directement à partir d’Adobe Dreamweaver. Aller à Dossier > Aperçu en temps réel et sélectionnez le navigateur de votre choix pour afficher votre site Web. C’est idéal pour tester CSS ou tout autre code qui n’est pas compatible avec tous les navigateurs.
Maintenant, vous avez juste besoin d’un endroit pour héberger votre site Web. Hébergement d’un site statique avec AWS S3 est un excellent point de départ.
Le code HTML et CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="main-header">
<div class="site-logo">MakeUseOf Example Site</div>
<nav class="main-menu">
<a href="../Home.html">Home</a><a href="../Lion.html">Lion</a><a href="../Tiger.html">Tiger</a><a href="../Jaguar.html">Jaguar</a><a href="../House Cat.html">House Cat</a>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<div class="main-content" id="lion">
<h1>This is a lion!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Ce HTML construit le site Web fini pour notre projet. Vous pouvez le démonter pour voir comment cela fonctionne, mais nous vous encourageons à créer votre propre code HTML pour votre site Web.
@charset "utf-8";
body {
margin: 0;
background: black;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.main-header {
display: flex;
background: black;
padding: 20px;
}
.site-logo {
width: 30%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.main-menu {
width: 70%;
text-align: right;
}
.main-menu a {
padding: 10px;
text-decoration: none;
color: white;
}
.main-content {
height: 100vh;
padding: 20px;
background-size: cover;
}
.main-content h1 {
color: white;
font-size: 10rem;
text-transform: uppercase;
}
background-image: url("Images/largelion.png");
}
background-image: url("Images/tiger.png");
}
background-image: url("Images/jaguar.png");
}
background-image: url("Images/housecat.png");
}
background-image: url("Images/loadsofcats.png");
}Ce CSS fait également partie du projet fini. Comme le code HTML que nous avons couvert, vous pouvez jouer avec ce code pour vous approprier ce site Web.
Créer des sites Web avec Adobe Dreamweaver
Dreamweaver peut ne pas sembler aussi facile à utiliser que des outils comme WordPress ou Squarespace, mais il vous donne beaucoup plus de puissance. Ce guide est un excellent point de départ, mais il reste encore beaucoup à apprendre et cela vaut la peine d’explorer Dreamweaver par vous-même.
— to www.makeuseof.com
Jeu de briques
Snake
Pacman
Bubble