Comment construire un portefeuille avec Dreamweaver
Contenu
Les choses dont vous aurez besoin
- logiciel d`édition graphique Web (Adobe Fireworks recommandé)
- Adobe Dreamweaver
- Images pour votre portefeuille
Créer une image Miniatures
Ouvrez votre outil d`édition graphique et puis ouvrez l`une des images pour votre portefeuille.
Cliquez sur l`image et la redimensionner à une miniature d`environ 150 à 200 pixels de large. Dans Fireworks, le logiciel utilisé pour l`exemple montré ici, la commande Taille de l`image se trouve sous le menu Modifier -> Canvas.
Exporter la miniature comme un nouveau fichier JPG avec un nom qui indique qu`il est la vignette. Dans Fireworks, pour exporter utiliser le menu Fichier -> Aperçu de l`image et sélectionnez JPG comme format de fichier.
Répétez les étapes ci-dessus pour créer des vignettes de toutes les images pour votre portefeuille.
Créer une page Web pour les vignettes
Ouvrez Dreamweaver et cliquez sur « Créer un nouveau » dans le menu principal pour lancer un nouveau document HTML.
Tapez un texte pour décrire ce genre de portefeuille est ce puis appuyez sur la touche de retour.
Cliquez sur le bouton Insérer une image dans la barre d`outils pour ajouter une vignette à la page.
Vidéo: [TUTO] Comment télécharger des films gratuitement et rapidement en français / N°2
Vidéo: Créer son premier site Portfolio avec WordPress
Cliquez sur l`image pour le sélectionner et choisir l`alignement Moyen de l`inspecteur de propriétés afin que le texte que vous tapez à côté de la vignette alignera avec le milieu de l`image.
Tapez un texte à côté de la vignette pour décrire ce qu`elle est.
Vidéo: Créer un book photo en ligne avec Monbook.net
Tapez un retour chariot couple et insérer une autre vignette et un texte descriptif. Répétez l`opération pour toutes vos vignettes.
Cliquez sur le menu Fichier et sélectionnez Enregistrer pour enregistrer vos progrès jusqu`à présent.
Créer portefeuille Pages de détail
Cliquez sur le menu Fichier, puis sur Nouveau pour lancer un nouveau document HTML. Ce sera la page qui apparaît lorsque quelqu`un clique sur votre première vignette.
Tapez un texte en haut de la page pour indiquer que la conception de cette page est détaillant.
Cliquez sur le bouton Insérer une image dans la barre d`outils et d`ajouter une plus grande ou une image pleine grandeur que vous voulez montrer aux clients.
Cliquez sur le menu Fichier et sélectionnez Enregistrer pour enregistrer ce nouveau fichier.
Répétez ces étapes et créer des pages de détail pour tous les éléments de votre portefeuille.
Lien Vignettes Détails Pages à
Double-cliquez sur la page avec les vignettes dans la liste des fichiers du site local sur le côté droit de l`écran pour l`ouvrir si ce n`est pas encore ouvert à l`écran.
Cliquez une fois sur une vignette pour la sélectionner.
Insérer un lien de cette vignette pour la page de détails qui lui est associée en cliquant sur l`icône de dossier à droite de la boîte « Link » dans l`inspecteur de propriétés et de choisir le fichier à partir de la boîte de dialogue, ou en utilisant le « Point to File » cross -hairs icône à côté de la zone de lien et en faisant glisser le pointeur vers le fichier dans votre liste de fichiers du site local à droite.
Vidéo: Créer son portfolio avec wordpress
Répétez les étapes ci-dessus pour ajouter des liens vers toutes vos vignettes.
Cliquez sur le menu Fichier et sélectionnez Enregistrer pour enregistrer vos modifications.
Téléchargez les fichiers de portefeuille sur votre serveur Web en utilisant le bleu « up » flèche dans la liste des fichiers du site local à droite et puis testez les pages de votre navigateur Web.
Conseils Avertissements
- Si votre portefeuille comprend les vignettes des sites Web que vous avez créé et ces sites sont en direct, vous pouvez ajouter un lien vers les sites Web pour les montrer au lieu de créer une page de détails sur la conception séparée.
- Pour arrêter les gens qui téléchargent vos images pleine grandeur de votre portefeuille, vous pouvez ajouter un filigrane à eux avec votre outil graphique d`édition. Une ligne de texte avec une faible opacité dans la partie principale de l`image fonctionnera.