ADOBE GoLive CS2 User Manual [fr]
présentation technique
Maîtriser
les bases d’Adobe GoLive CS2
TABLE DES MATIERES
1 Introduction
1 Création de site
1 Boîte de dialogue Nouveau
2 Fenêtre de site
4 Mise en page
11 Avantages des objets dynamiques
13 Palette Actions
15 Téléchargement du site
16 Ressources supplémentaires
Introduction
Le logiciel Adobe® GoLive® CS2 met à votre disposition tous les outils nécessaires à la conception,
au codage et à la gestion des projets Web les plus complexes, sans que vous ayez à saisir une seule
commande HTML. Néanmoins, il est préférable de connaître quelques astuces avant de travailler
sur le Web. En eet, les images doivent être compressées d’une certaine façon, les polices ne
s’achent pas toujours comme vous le souhaitez et la mise en page varie d’un navigateur Web
à l’autre. Et contrairement aux publications imprimées, les sites Web évoluent en permanence,
exigeant des outils de gestion plus sophistiqués.
Le logiciel Adobe GoLive vous aide à relever le dé. Les outils de mise en page visuelle génèrent
un code standard, clair et moderne. L’intégration du logiciel Adobe Photoshop® et d’autres
applications Adobe facilite par ailleurs l’utilisation d’images. Enn, les outils de gestion de site
GoLive simplient les opérations de maintenance.
Le document présent décrit la marche à suivre pour créer un site Web simple à l’aide d’un ux
de production GoLive standard. Il présente également les tâches primordiales auxquelles vous
serez confronté dans le développement et la gestion de votre site. Grâce à ce document, vous
apprendrez à :
1 créer un dossier de site, importer des ressources et ajouter des pages à votre site ;
2 mettre en page le site, manipuler des images, ajouter des zones de texte et créer des liens ;
3 utiliser les objets dynamiques et ajouter des scripts interactifs sans avoir à les coder ;
4 publier votre site sur Internet à l’aide de la fonction Serveur de publication du logiciel GoLive.
Création de site
Lorsque vous entamez la construction d’un site Web, votre premier réexe consiste peut-être
à ouvrir une page et à commencer à la garnir de texte et d’objets à votre guise. Avec le logiciel
GoLive, vous avez tout intérêt à démarrer la construction d’un site plutôt que d’une page.
Le logiciel peut ainsi suivre à la trace la moindre de vos ressources dès le départ, ce qui limite
les risques de perdre une page ou une image.
Boîte de dialogue Nouveau
Pour vous lancer dans la création d’un site, utilisez la boîte de dialogue Nouveau :
1 Dans l’écran de bienvenue de GoLive, cliquez sur Nouveau document (ou sur Fichier > Nouveau,
si vous avez décidé de ne plus acher l’écran de bienvenue).
2 Cliquez sur Site dans la colonne gauche de la boîte de dialogue Nouveau.
La boîte de dialogue Nouveau.
3 Sélectionnez Site vierge, puis cliquez sur Suivant.
4 Donnez un nom au site et choisissez un emplacement simple d’accès où l’enregistrer.
Cliquez sur Suivant.
5 Assurez-vous que l’option Ne pas utiliser le contrôle des versions est sélectionnée, puis cliquez sur Suivant.
Boîte de dialogue Nouveau
Au-delà de la construction de sites Web, GoLive
vous permet de concevoir des chiers vidéo et des
sites interactifs adaptés aux téléphones portables.
Pour une variété de ux de production, cette boîte
de dialogue constitue un excellent point de départ
dont vous mesurerez l’utilité tout au long de votre
apprentissage de la conception interactive.
6 L’écran suivant vous permet de spécier le serveur de publication qui hébergera votre site une fois sa
construction achevée. Sélectionnez l’option Spécier le serveur ultérieurement, puis cliquez sur Terminer
pour ouvrir la fenêtre de site.
La fenêtre de site.
Fenêtre de site
La fenêtre de site est l’élément principal de l’espace de travail GoLive. C’est dans cette fenêtre que vous
entretenez, contrôlez et même publiez votre site Web.
L’onglet Fichiers abrite votre dossier racine, c’est-à-dire tous les éléments de votre site qui seront
téléchargés vers un serveur. Par défaut, le dossier racine contient un élément appelé index.html. Lorsqu’un
navigateur Web atteint ce dossier, la page par défaut est le premier élément qu’il charge. Dans GoLive,
index.html est donc la page d’accueil du site.
Contenu de la fenêtre de site
La fenêtre de site de GoLive comporte dix onglets
diérents destinés à des fonctions diverses :
• Fichiers : il s’agit du dossier racine de votre site.
Téléchargez ces chiers vers le serveur lorsque
la conception de votre site est achevée.
• Externe : répertoriez les adresses URL et de courrier
électronique fréquemment utilisées an de créer
rapidement des liens vers ces adresses lors de la
construction du site.
• Couleurs : répertoriez les couleurs utilisées par le site.
• Jeux de polices : répertoriez vos groupes de
polices Web préférés.
• CSS : accédez aux diérents éléments CSS utilisés
par le site.
• Diagrammes : grâce à cet onglet, bénéciez de
l’ecacité des outils de structuration de site par
diagramme.
• Serveur de publication : téléchargez vos pages
et images vers un serveur.
• Collections : enregistrez dans cet onglet les
pseudonymes et les raccourcis des ressources
les plus utilisées.
• Erreurs : les liens rompus et les chiers manquants
sont immédiatement repérés par GoLive, qui les
ache dans cet onglet.
• Divers : recherchez des objets dynamiques,
des assemblages InDesign et des modèles
pour agrémenter votre site.
Maîtriser les bases d’Adobe GoLive CS2
2
Ajout de pages
Pour ajouter des pages à votre site :
1 Cliquez sur l’icône Créer une nouvelle page dans la barre d’outils GoLive.
Création de pages à l’aide de la barre d’outils GoLive.
2 Entrez un nom de page, puis appuyez sur Entrée.
3 Répétez l’étape précédente pour créer quelques pages supplémentaires.
Ajout de sous-dossiers
La plupart des concepteurs de site Web classent les diérents chiers associés au site Web dans des
sous-dossiers hiérarchisés. Lorsqu’il s’agit d’un petit site, il est d’usage de regrouper les pages HTML
dans un dossier, les images dans un autre dossier et ainsi de suite. Lorsque vous classez vos dossiers,
veillez à placer le chier index.html, la page d’accueil, au niveau le plus haut sous l’onglet Fichiers
(cet emplacement est également appelé dossier racine), an que les navigateurs Web puissent le détecter.
Pour créer un dossier :
1 Cliquez sur l’icône Créer un nouveau dossier dans la barre d’outils GoLive.
Règles de nommage des pages
Vous ne savez pas comment appeler une page Web ?
Tout nom comportant lettres ou chires fera l’aaire.
Sachez simplement que la plupart des signes de
ponctuation sont exclus (le tiret bas “_” est accepté).
En général, les concepteurs de site Web nomment
leurs pages en fonction de leur contenu, en lettres
minuscules. Ainsi, les pages du site type d’une
entreprise de conception pourraient porter des noms
tels que clients.html, portfolio.html et contenu.html.
Création de dossiers à l’aide de la barre d’outils GoLive.
2 Entrez un nom de dossier ; par exemple, html. Faites ensuite glisser les pages que vous avez créées vers ce
dossier, exactement comme vous le feriez dans le Finder (Macintosh) ou dans l’Explorateur (Windows).
Ajout d’images
Seuls certains formats d’image, tels que les formats GIF et JPEG, sont pris en charge par le Web.
La commande Enregistrer pour le Web des logiciels Adobe Photoshop et Illustrator® vous permet de
créer facilement des images dans ces formats (voir l’explication ci-contre). Le logiciel GoLive CS2 vous
permet également d’utiliser des objets dynamiques. Chaque objet vous ore la possibilité de spécier un
chier source (généralement dans un format natif Adobe) pour lequel GoLive génère un chier cible dans
un format parfaitement adapté au Web. Pour plus d’informations, reportez-vous à la section « Avantages
des objets dynamiques » ci-après.
Pour ajouter des images compatibles avec le Web :
1 Optimisez une image pour l’utiliser sur le Web (voir l’explication ci-contre).
2 Dans la fenêtre de site de GoLive, créez un sous-dossier et nommez-le « ressources ».
3 Placez les images dans ce dossier par glisser-déposer.
La commande Enregistrer pour le Web
Pour optimiser des chiers an de les utiliser sur le
Web, vous devez utiliser la commande Enregistrer
pour le Web des logiciels Photoshop et Illustrator,
si l’une de ces applications est installée sur votre
système.
1 Lorsque le chier est ouvert dans l’une de ces
applications, sélectionnez Fichier > Enregistrer
pour le Web.
2 En haut de la boîte de dialogue Enregistrer pour
le Web - Piloté par ImageReady, sélectionnez
l’onglet 2 vignettes. L’image de gauche correspond
à l’original, tandis que celle de droite deviendra
la version compressée. Sélectionnez l’image
compressée.
3 A droite, une série d’options apparaît. L’option la
plus importante est Format de chier optimisé.
Choisissez le format GIF lorsque vous sélectionnez
des images aux couleurs simples ou dont les
motifs sont récurrents, telles qu’un logo. Choisissez
le format JPEG lorsque vous compressez des
photographies ou des chiers dont les dégradés
sont peu accentués.
4 Dans cette boîte de dialogue, vous pouvez également
redimensionner l’image et régler d’autres paramètres.
L’objectif est d’obtenir la meilleure image possible
pour un chier le plus léger possible. Pour plus
d’informations concernant la poursuite de cet objectif,
consultez l’aide de Photoshop ou d’Illustrator.
5 Une fois satisfait des paramètres dénis, cliquez sur
Enregistrer et suivez les instructions relatives au
type d’image sélectionné.
Maîtriser les bases d’Adobe GoLive CS2
3
Arborescence du site
L’organisation des répertoires dans GoLive ore un suivi complet grâce aux outils de gestion de site.
Vue globale du site sous Windows XP.
Le dossier de votre site contient les éléments suivants :
➤
Un dossier racine (nommé web-content). Ce dossier contient les pages HTML, les images et les
autres chiers dont le site est composé. Le contenu de ce dossier est aché dans la fenêtre de site
du logiciel GoLive.
➤
Un dossier de données (nommé web-data). Il s’agit des éléments utilisés lors de la création du
site Web, comme les modèles, les objets dynamiques et les assemblages InDesign. Ces chiers ne
sont pas téléchargés vers le serveur.
➤
Un dossier de paramètres (nommé web-settings). Ce dossier contient les chiers de paramètres
du logiciel GoLive.
➤
Un chier de site (que vous nommez à votre guise). Ce chier répertorie le contenu des dossiers
décrits ci-dessus. Lorsque vous ouvrez le chier de site, vous lancez le logiciel GoLive, qui ache
la fenêtre de site.
Mise en page
La fenêtre de mise en page ore six modes diérents pour l’achage des pages Web, mais le mode le
plus important est l’éditeur de mise en page, dans lequel vous pouvez faire glisser et déposer les chiers
nécessaires à la création des pages.
Ouvrez une page an d’en savoir plus sur les outils de mise en page du logiciel GoLive.
La fenêtre de document en mode Editeur de mise en page.
La fenêtre de document
La fenêtre de document comporte six onglets
diérents.
• Editeur de mise en page : créez des pages à l’aide
d’outils visuels très simples d’utilisation.
• Editeur de cadres : vous pouvez utiliser des jeux
de cadres.
• Editeur de code source : entrez et modiez le code
source dans cet onglet.
• Editeur de structure : accédez à des éléments de
code avancés.
• Aperçu de mise en page : achez votre site dans
un environnement simulant un navigateur.
• Prévisualiser la mise en page au format Adobe PDF :
générez un chier PDF à partir de la page ouverte.
Cet onglet est particulièrement ecace pour
réaliser et envoyer des captures des pages.
Maîtriser les bases d’Adobe GoLive CS2
4
Boîte à outils des objets
Outils
Catégories
Objets
La boîte à outils des objets comporte trois parties. La partie supérieure regroupe les outils de sélection ;
la partie centrale présente une liste des catégories d’objets que vous pouvez ajouter aux pages ; enn,
la partie inférieure contient les objets mêmes.
La boîte à outils des objets.
Pour ajouter des objets au site :
Catégories de la barre d’outils
Voici une rapide présentation du contenu des
catégories de la barre d’outils des objets.
• Standard : éléments HTML standard pour les pages,
tels que des boîtes de mise en page, des tableaux
et d’autres éléments de ce type.
• Objets dynamiques : ajoutez et utilisez des objets
dynamiques.
• CSS : ajoutez des objets de bloc CSS pour construire
des pages compatibles avec des navigateurs et
plates-formes multiples.
• Formulaire : outils destinés à l’utilisation de
formulaires.
• En-tête : ajoutez des métadonnées, telles que
des mots-clés pour les moteurs de recherche.
• Cadre : utilisez cette section pour construire des
pages à l’aide de cadres.
• Site : cette section peut être utilisée pour ajouter
des éléments à la fenêtre de site.
• Diagramme : créez des diagrammes de site.
• Quicktime : ces éléments sont destinés à l’éditeur
Quicktime de GoLive.
• SMIL : créez des documents SMIL (Synchronized
Multimedia Interaction Language). Cette fonction
est avant tout destinée au développement de
contenu pour les périphériques mobiles.
1 Depuis la partie inférieure de la boîte à outils des objets, faites glisser et déposez l’élément Grille de mise
en page (en haut à gauche) dans la page ouverte. Notez que si la catégorie Standard n’est pas sélectionnée
dans la liste des objets déplaçables, l’élément Grille de mise en page n’est pas aché.
L’objet Grille de mise en page.
Maîtriser les bases d’Adobe GoLive CS2
5
2 Tirez sur la poignée dans le coin inférieur droit de la grille jusqu’à ce que celle-ci couvre complètement
l’espace de travail.
L’éditeur de mise en page après application de la grille de mise en page.
3 Faites glisser une image au format GIF ou JPEG de l’onglet Fichiers de la fenêtre de site vers la grille
de mise en page. Si l’image est trop grande, GoLive vous propose de la convertir en objet dynamique.
Pour l’instant, utilisez une autre image ou reportez-vous à la section « Avantages des objets
dynamiques » ci-après.
L’éditeur de mise en page après ajout de l’image.
Vous pouvez à présent déplacer et positionner l’image en toute liberté.
Maîtriser les bases d’Adobe GoLive CS2
6
Loading...