Nouvelle disposition de grille fluide Dreamweaver CS6

• Mai 13, 2024

Si vous développez des sites Web simples ou des CMS complexes, vous avez toujours cette question lancinante à l'esprit - est-ce que je fais tout ce que je peux pour cibler tous les types de publics et de résolutions d'écran? Eh bien, Dreamweaver^R CS6 a de nouvelles fonctionnalités qui facilitent la tâche.

Dans le passé, il fallait créer un fichier CSS différent pour chaque résolution d'écran différente et utiliser une requête multimédia pour attribuer le fichier CSS requis. Cela prenait beaucoup de temps et augmentait le coût global du développement du site, ce qui était une mauvaise nouvelle pour le développeur et le client. Dreamweaver CS6 a supprimé une grande partie du travail de création de sites Web adaptatifs.

Ce nouveau processus de workflow dépend de la nouvelle mise en page de la grille fluide qui ressemble un peu à un modèle de démarrage avec des mises en page et une typographie par défaut pour chaque résolution d'écran de votre site Web.

1. Cliquez simplement sur Fichier - Nouvelle disposition de grille fluide dans la barre de menus.
   
   
2. Dans la boîte de dialogue Nouveau document, vous verrez les valeurs par défaut de cette nouvelle page Web adaptative. La largeur est fixe pour chacune des différentes résolutions d'écran.
   
   Mobile 480px
   Tableau 768px
   Desktop 1232px
   
   
3. Vous avez la possibilité de modifier le nombre de colonnes par défaut et le pourcentage de largeur de colonne pour chaque résolution d'écran. Les valeurs par défaut sont:
   
   Mobile 5 colonnes - 91%
   Tablette 8 colonnes - 93%
   Bureau 10 colonnes - 90%
   
   
4. L'espace de travail par défaut peut afficher le code et les vues de conception. Comme vous pouvez le voir dans la vue de conception, le nouveau fichier a déjà une balise div. Vous pouvez modifier l'ID et la classe par défaut de la div dans le panneau Propriétés.
   
   Bien sûr, votre page Web aura besoin de plus d'une div. Nous pouvons donc ajouter plus de divs pour l'en-tête, la navigation, le principal, le côté et le pied de page.
   
   
5. Pour ajouter un nouveau div, choisissez Insérer une balise Div de disposition de grille de fluide dans le panneau Insérer.
   
   
6. Dans la boîte de dialogue, vous pouvez nommer l'ID de la balise.
   
   
7. Une fois que nous avons ajouté toutes les div principales de notre page, nous pouvons cliquer et les faire glisser pour les repositionner dans la grille.
   
   

Il est suggéré de commencer à créer la version mobile de notre site et de passer aux tailles plus grandes. Vous pouvez facilement comparer les résultats visuels pendant que vous travaillez en utilisant le sélecteur de résolution pour les résolutions Mobile, Tablette et Bureau.

Lorsque nous enregistrons notre mise en page, nous obtenons un fichier HTML5 et CSS3 qui fonctionnera pour les trois résolutions d'écran. Si nous jetons un œil à l'intérieur de ces fichiers, nous pouvons trouver des informations sur le fonctionnement des fichiers pour créer notre page Web adaptative.

* Adobe m'a fourni une copie de ce logiciel à des fins de révision.

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Instructions Vidéo: 2015-2017 Mustang GT Vortech V-3 Si Supercharger System - Black Review & Install (Mai 2024).