Dans ce tutoriel, nous allons examiner rapidement les modèles de démarrage de Dreamweaver CC.
Je vais commencer par sélectionner l'espace de travail Création.
Pour créer un fichier à l'aide d'un modèle de démarrage, procédez comme d'habitude.
Choisissez Fichier > Nouveau, puis sélectionnez Modèles de démarrage à gauche dans la boîte de dialogue Nouveau document.
Le dossier Responsive Starters contient 5 modèles différents : Page À propos, Billet de blog, eCommerce, E-mail et Portefeuille.
Comme le nom du dossier l'indique, chaque modèle de démarrage inclut un responsive design intégrant du HTML sémantique.
Cliquez sur les modèles pour afficher leur aperçu et une description sur la droite.
Je vais choisir la page À propos, puis cliquer sur le bouton Créer.
Je dois maintenant choisir où enregistrer la nouvelle page web.
J'enregistre le fichier dans le dossier du projet en le nommant « about.html ».
Dans la fenêtre Copier les fichiers dépendants, je clique sur Copier.
Examinons à présent le panneau Fichiers.
J'ai déjà configuré un site pointant sur le dossier du projet.
Le site contient désormais la page about.html et des fichiers associés.
La page À propos est aussi visible en mode Fractionner.
Jetons un œil au code du modèle en mode Code.
Je fais défiler pour vous montrer la structure, qui utilise un balisage HTML5 standard.
Quand je clique sur un élément en mode En direct, le mode Code s'actualise.
Je peux facilement modifier les blocs HTML qui composent le modèle en ajoutant, supprimant et dupliquant des éléments.
Enfin, je sélectionne le fichier .css pour afficher les styles de page et les requêtes multimédias.
Les styles du haut constituent la mise en forme de base et les requêtes multimédias vers le bas définissent les modifications de style selon la taille d'écran.
Je choisis Fichier > Aperçu dans le navigateur pour prévisualiser mon travail.
Le modèle en responsive design s'adapte à la largeur de l'écran.
Il est facile de personnaliser un modèle de démarrage avec les outils visuels et de programmation de Dreamweaver.
Dans CSS Designer, je sélectionne aboutPageStyle.css sous Sources et la balise body sous Sélecteurs, puis je clique sur Arrière-plan sous Propriétés.
Je choisis le noir comme couleur d'arrière-plan.
J'ajoute ensuite une image de mosaïque et je définis background-attachment sur fixed.
En mode En direct, je sélectionne ce texte, puis je définis sa couleur sur blanc via CSS Designer.
Je peux modifier tous les attributs de texte selon cette méthode.
Le processus est simple : soit j'applique des styles visuellement via CSS Designer, soit je modifie le code directement en mode Code.
À présent, je vais remplacer une image en la sélectionnant dans le mode En direct, puis en utilisant la fenêtre contextuelle des attributs HTML pour choisir une nouvelle image.
Mon dossier de projet contient déjà des images.
Je choisis le fichier feature_259x259.png.
Mon design commence à prendre forme.
Pour le texte, il suffit de copier-coller le contenu ou de taper directement en mode En direct ou Code.
Je peux ajouter et supprimer les éléments de mon choix.
Avec les modèles, j'utilise des blocs HTML comme point de départ, puis j'affine jusqu'à ce que le design soit prêt.
Voici le résultat final.
J'ai supprimé de nombreux blocs HTML du modèle d'origine pour ne conserver que le strict nécessaire.
Je choisis Aperçu dans le navigateur pour étudier de nouveau mon travail.
Le design finalisé s'adapte parfaitement à la taille de la fenêtre.
Il est donc très facile de créer une page web à l'aide d'un modèle de démarrage.
Prenez le temps d'étudier les différents modèles et n'hésitez pas à les recycler comme bon vous semble.
Testez-les pour gagner du temps en début de projet.
