Comment construire un site Web dans Illustrator

Création d'une mise en page

1. Créez un document Illustrator qui est de 960 pixels de large avec une hauteur de votre choix en fonction du contenu et de la conception que vous avez à l'esprit. Un site 960 px de large est conforme à la largeur de la résolution d'écran la plus populaire de 1024 px fois la barre de défilement et de fenêtres bords sont prises en compte.

2. Créez une esquisse dessinée à la main de la présentation visuelle de base de votre site si vous ne l'avez pas déjà fait. Cela va vous fournir une référence pratique pour créer dans Illustrator.

3. Créer votre mise en page en utilisant les outils d'image et de texte pour une tête stylisée. Si votre conception comprend un espace pour le texte tel que le blog, laisser l'espace dans cette zone vierge ou créer une bordure autour d'elle pour la délimitation facile.

4. 
   
   
   

   Ajouter guides à votre conception de délimiter les différentes sections de la mise en page. Ceci est très important parce que vous allez utiliser ces guides pour faire des tranches, qui définissent les frontières des éléments sur votre site web. Guides peut vous aider à aligner des objets avec précision. Cliquez sur la règle verticale ou horizontale et faites glisser la souris à l'endroit où vous voulez le guide pour être situé.

5. Double-vérifier le placement de vos guides pour la précision et l'exactitude. Dessinez plus si nécessaire pour séparer chaque élément, comme des images de navigation qui seront liens sur votre site.

Génération de code

1. Sélectionner "Objet" dans le menu, puis sélectionnez "Tranche" et choisissez "Créer à partir de Guides." Quand les tranches sont créées, vous verrez de petites boîtes noires à l'intérieur de chaque tranche avec un nombre correspondant. Sélectionner "Fichier" dans le menu et choisissez "Enregistrer pour le Web et les périphériques." Sélectionnez l'outil Sélection de tranche, qui est la deuxième icône dans le menu de l'outil à la droite de l'écran sous l'icône de la main. Sélectionnez toutes les tranches.

2. 
   
   
   

   Sélectionnez les paramètres d'optimisation des options sur le côté droit de l'écran. Vous pouvez choisir les paramètres prédéfinis ou créer un profil personnalisé en fonction de si vous voulez que vos images soient JPEG, GIF ou PNG. Vous pouvez également ajuster la qualité des images.

3. Un aperçu des différentes paramètres en cliquant sur le "2-up" et "4-up" onglets. Dans le coin inférieur de chaque aperçu, vous pouvez afficher les informations d'optimisation tels que la taille de fichier et le navigateur le temps de rendu. Cliquez sur le "Sauvegarder" bouton. Décidez où vous voulez que vos images et le code soient sauvés et naviguer dans cette zone en utilisant la "Où:" bouton.

4. Choisissez le format de votre travail. Si vous êtes compétent en HTML et voulez seulement les images parce que vous allez ajouter du code pour eux plus tard, choisissez "Images seulement." Si vous êtes un débutant ou préfèrent avoir le code HTML généré pour vous, choisissez le "HTML et images" option. Si vous préférez pour le positionnement des éléments à être organisé avec Cascading Style Sheets place de tables, sélectionnez la "Paramètres par défaut" bouton et choisissez "Exporter comme calques CSS" dans le "Couches" onglet.

5. Ouvrez le fichier HTML à partir d'un navigateur pour visualiser votre travail. Modifier les fichiers avec un programme de conception de sites Web.