Layouts Div ya des dessins pour les pages Web qui incluent des conteneurs pour le contenu Web, tels que des images, du texte et des liens. Ils aident à maintenir une apparence uniforme pour les pages web. Adobe Photoshop de "Slice Outil" et "Enregistrer pour le Web & Appareils" commandes permettent aux utilisateurs de créer une mise en page Div visuellement en ajoutant des éléments de page, puis la création de conteneurs directement sur la mise en page, plutôt que d'utiliser du code HTML et de CSS ou de compter sur layouts div pré-faites, qui exigent également la connaissance de code pour personnaliser.
Ouvrez Photoshop et créez un nouveau document Web en sélectionnant "Fichier gt; Nouveau" dans le menu de l'application et le réglage de la "Preset" déroulant pour "Web." Définissez vos dimensions souhaitées pour votre mise en page dans le "Largeur" et "Hauteur" champs, ou sélectionnez une des tailles de mise en page Web standard de la "Taille" menu déroulant.
Ajoutez vos images visuelles désirées à votre disposition. Ces peuvent inclure des images importées en utilisant le "Fichier gt; Lieu" commande, des formes, des boutons ou texte créés avec le "Type d'outils."
Sélectionnez le "Slice Outil" à partir du panneau Outils et coupez chaque élément de votre mise en cliquant et en faisant glisser dessus avec la "Slice Outil" sélectionné. Créer tranches individuelles pour chaque élément de texte, bouton, l'image ou de la ligne. Ces tranches serviront les éléments Div dans votre mise en page Web.
Cliquez sur le "Fichier" menu et sélectionnez "Enregistrer pour le Web & Appareils" pour faire apparaître la boîte de dialogue d'optimisation, qui vous permettra de configurer chaque élément de votre mise en page afin qu'il puisse mieux être affiché sur le Web. Réglez les paramètres pour chaque tranche que vous avez créé en cliquant sur l'utilisation de chacun individuellement la "Sélection de tranche Outil" en haut à gauche de la boîte de dialogue, et en changeant les paramètres format, la qualité et la couleur en conséquence à la droite de la boîte. Cliquez "Sauvegarder" lorsque vous avez optimisé chaque tranche de vos préférences.
Nommez votre fichier de mise en page et sélectionnez un emplacement pour elle dans les domaines de l'indiqués "Enregistrer optimisé" boite de dialogue. Changer la "Format" menu déroulant "HTML et images" et assurez-vous de la "Paramètres" et "Tranches" déroulantes sont mis à "Paramètres par défaut" et "Toutes les tranches" respectivement. Cliquez "Enregistrer." Votre mise en page est maintenant prêt à être ouvert dans un Web-éditeur tel que Dreamweaver, où vous pouvez ajouter des liens et des comportements aux sections Div vous avez créés avec le "Outil Slice."