Après avoir créé une nouvelle page avec une mise en page CSS dans Dreamweaver, vous disposez d'un nombre apparemment infini d'options pour la modifier, mais vous devez d'abord déterminer quels styles de la feuille de style correspondent aux éléments que vous souhaitez modifier.
Comme vous pouvez probablement l'imaginer, vous pouvez modifier les styles d'une mise en page CSS de plusieurs manières pour créer vos propres conceptions.
Après avoir ajusté les styles existants pour obtenir la conception de base de la page comme vous le souhaitez, vous pouvez créer autant de styles supplémentaires que vous le souhaitez.
Vous pouvez utiliser ces mêmes instructions de base avec n'importe quelle mise en page CSS incluse dans Dreamweaver. Pour modifier les styles dans une mise en page CSS, procédez comme suit :
Ouvrez un fichier d'échange basé sur une mise en page CSS Dreamweaver et choisissez Fenêtre → Styles CSS (ou cliquez sur l'onglet CSS Designer pour développer le panneau).
Le panneau CSS Designer s'ouvre ou se développe.
Cliquez pour sélectionner le nom de la feuille de style dans le panneau Sources en haut de CSS Designer.
Tous les styles associés à la nouvelle page sont répertoriés dans le panneau Sélecteurs.
Sélectionnez le nom de n'importe quel style répertorié dans le panneau Sélecteurs du concepteur CSS.
Les règles CSS correspondantes définies pour le style sont affichées dans le panneau Propriétés, en bas du panneau CSS Designer. Cliquer sur la liste des styles et revoir les règles correspondantes est un bon moyen d'avoir un aperçu rapide de la conception et de voir où sont stockées les différentes options de formatage de page.
Les balises d'en-tête, .nav et de pied de page HTML5 contrôlent les sections principales de la page. Par exemple, le style d'en-tête inclut une règle qui rend la couleur d'arrière-plan verte. Ainsi, pour modifier la couleur de la zone d'en-tête en haut de la page, vous modifiez le paramètre de couleur d'arrière-plan dans la règle d'en-tête.
Pour modifier les paramètres à l'échelle de la page, tels que la couleur d'arrière-plan de la page ou la police principale, la taille et la couleur du texte utilisé sur toute la page, procédez comme suit :
Dans le panneau Sélecteurs CSS Designer, sélectionnez le style nommé body.
Les propriétés définies dans la règle de style sélectionnée sont affichées dans le panneau Propriétés.
Cliquez sur l'icône T en haut du panneau Propriétés et modifiez ou ajoutez la police souhaitée et d'autres paramètres de texte.
Vous pouvez modifier la police, la taille, le style et le poids. Pour modifier l'espace entre les lignes de texte, modifiez la hauteur des lignes.
Faites défiler jusqu'à la zone Arrière-plan du panneau Propriétés et utilisez le cadre de couleur dans le champ Couleur d'arrière-plan pour spécifier une couleur pour l'ensemble de l'arrière-plan de la page.
Alternativement, vous pouvez entrer n'importe quel code de couleur hexadécimal dans le champ Background-Color ou utiliser la pipette pour échantillonner n'importe quelle couleur. Pour ajouter une image d'arrière-plan, cliquez dans le champ URL de la section Arrière-plan, puis cliquez sur le bouton Parcourir qui apparaît et sélectionnez l'image que vous souhaitez utiliser comme arrière-plan. Utilisez les icônes Arrière-plan-Répéter pour spécifier comment l'image d'arrière-plan doit se répéter sur la page.
Apportez d'autres modifications ou ajouts à la règle de style.
Les modifications apportées aux règles de style dans le panneau Propriétés sont automatiquement enregistrées et appliquées au contenu formaté avec la règle.
Pour modifier la largeur ou d'autres paramètres des zones de contenu principales, qui contrôlent la taille globale de la page et l'en-tête, le pied de page et la barre latérale, procédez comme suit :
Pour modifier la largeur de toute la zone de conception principale :
Cliquez sur le style .container dans le panneau Sélecteurs du panneau CSS Designer.
Les propriétés de la règle de style .container sont affichées dans le panneau Propriétés, où vous pouvez également modifier le style.
Modifiez la taille dans le champ Largeur ou saisissez un nouveau nombre pour la largeur de page souhaitée.
La largeur de la conception de la page est automatiquement modifiée en fonction de la taille que vous avez saisie. Lorsque vous modifiez la largeur du style .container, vous modifiez la largeur de la conception entière car tous les
les balises et autres éléments sont contenus dans le
formaté avec le style .container - et ils sont tous prêts à se développer pour remplir le .container
.
Pour modifier la taille de la zone de contenu de la page, sélectionnez le style nommé .content et spécifiez la taille et les autres options souhaitées dans le panneau Propriétés.
Si vous modifiez la largeur de la zone de contenu dans une mise en page qui inclut une barre latérale, vous devez également modifier la largeur de la barre latérale.
Pour modifier la couleur d'arrière-plan de n'importe quel style de la page, cliquez sur le nom du style correspondant et modifiez les paramètres dans la section Arrière-plan du panneau Propriétés.
Par exemple, dans les mises en page CSS de Dreamweaver, la barre latérale est définie dans un style nommé .sidebar1. Ainsi, pour modifier la couleur d'arrière-plan, vous devez cliquer sur .sidebar1 dans le panneau Sélecteurs, sélectionner la catégorie Arrière-plan dans le panneau Propriétés et sélectionner la couleur souhaitée. De même, pour modifier la couleur d'arrière-plan de l'en-tête, sélectionnez le style nommé en-tête dans le panneau Sélecteurs et utilisez le cadre de couleur.
Pour ajouter une image à l'en-tête :
Sélectionnez l'image d'espace réservé intitulée Insérer un logo et appuyez sur la touche Supprimer ou Retour arrière.
Choisissez Insertion → Image → Image et sélectionnez une image à l'aide de la boîte de dialogue Sélectionner la source de l'image.
Remplacez le texte et insérez des images dans la barre latérale et les zones de contenu principal.
Vous pouvez ajouter ou remplacer du texte et insérer des images dans n'importe quelle page créée à partir d'une mise en page CSS, comme vous le feriez dans n'importe quelle autre page Web.
Choisissez Fichier → Enregistrer tout pour enregistrer la page et les styles.
Vous pouvez utiliser l'outil Instantané d'Adobe Acrobat CS5 pour sélectionner à la fois du texte et des images et créer une image d'une certaine zone dans un fichier PDF. Le résultat est communément appelé une capture d'écran d'une section dans un fichier PDF. Le résultat est une image, et votre texte n'est pas […]
Conçues pour les chercheurs et les scientifiques, les capacités de mesure de Photoshop CC sont assez puissantes. Vous pouvez mesurer à peu près n'importe quoi et compter le nombre de n'importe quoi dans une image technique, peut-être à partir d'un microscope ou d'un télescope. Si vous connaissez la taille exacte de n'importe quel élément d'une image, vous pouvez alors découvrir à peu près n'importe quoi […]
Lorsque vous utilisez les outils Fluidité d'Adobe Creative Suite 5 (Adobe CS5) Illustrator, vous pouvez plier des objets (les rendre ondulés, gluants ou hérissés) en créant des distorsions simples à complexes. Les outils Liquify peuvent accomplir toutes sortes de distorsions créatives ou farfelues (selon la façon dont vous les regardez) sur vos objets. Tu […]
Lorsque vous avez du texte dans votre projet Adobe XD, vous pouvez commencer à modifier les propriétés du texte. Ces propriétés incluent la famille de polices, la taille de la police, l'épaisseur de la police, l'alignement, l'espacement des caractères (crénage et suivi), l'espacement des lignes (interlignage), le remplissage, la bordure (trait), l'ombre (ombre portée) et le flou d'arrière-plan. Voyons donc comment ces propriétés sont appliquées. À propos de la lisibilité et de la police […]
Vous pouvez utiliser InDesign pour créer et modifier des graphiques de code QR. Les codes QR sont une forme de code-barres qui peut stocker des informations telles que des mots, des nombres, des URL ou d'autres formes de données. L'utilisateur scanne le code QR à l'aide de son appareil photo et d'un logiciel sur un appareil, tel qu'un smartphone, et le logiciel utilise […]
Tout comme dans Adobe Illustrator, les plans de travail Photoshop offrent la possibilité de créer des pages ou des écrans séparés dans un même document. Cela peut être particulièrement utile si vous créez des écrans pour une application mobile ou une petite brochure. Vous pouvez considérer un plan de travail comme un type spécial de groupe de calques créé à l'aide du panneau Calques. Son […]
Emballer du texte dans Adobe Illustrator CC n'est pas tout à fait la même chose qu'emballer un cadeau, c'est plus facile ! Un habillage de texte force le texte à s'enrouler autour d'un graphique, comme illustré dans cette figure. Cette fonctionnalité peut ajouter un peu de créativité à n'importe quelle pièce. Le graphique force le texte à s'enrouler autour de lui. Tout d'abord, créez […]
Lors de la conception dans Adobe Illustrator CC, vous avez souvent besoin d'une forme d'une taille exacte (par exemple, 2 x 3 pouces). Après avoir créé une forme, la meilleure façon de la redimensionner à des mesures exactes est d'utiliser le panneau Transformer, illustré dans cette figure. Faites sélectionner l'objet, puis choisissez Fenêtre → Transformer en […]
Apprenez à appliquer la transparence aux graphiques SVG dans Illustrator. Découvrez comment sortir des SVG avec des arrière-plans transparents et appliquer des effets de transparence.
Après avoir importé vos images dans Adobe XD, vous n'avez pas beaucoup de contrôle sur l'édition, mais vous pouvez redimensionner et faire pivoter les images comme vous le feriez pour n'importe quelle autre forme. Vous pouvez également facilement arrondir les coins d'une image importée à l'aide des widgets de coin. Masquage de vos images En définissant une forme fermée […]
