présente Création d un site Web (sans aucune programmation) Projet Restaurant Le Dragon Rouge utilisant édité chez par Bertrand Picard
Projet Restaurant: Le Dragon Rouge est le manuel pédagogique de formation donné chez f ormation@bc Publications@BC 2014 Première édition : toute reproduction en tout ou en partie est protégée par droits d auteurs et ne peut être acceptée sans la permission écrite de f ormation@bc 2 Couverture, textes, illustrations et mise en page: Bertrand Picard
présente Création d un site Web (sans aucune programmation) Projet Restaurant Le Dragon Rouge utilisant édité chez par Bertrand Picard 3
Module no 1...5 1.1 Le Projet Le Dragon Rouge... 5 1.2 Les systèmes de couleur... 7 1.3 Les bits... 7 1.4 Le hexadécimal...8 1.5 Les formats Web...8 Module no 2 L interface Photoshop... 10 2.2 Les outils...11 2.3 Les couleurs...11 2.4 Les calques...11 2.5 Nouveaux calques... 12 2.6 La transparence des calques... 12 2.7 L outil de transformation manuelle... 12 Module no 3 La maquette... 13 3.1 La création et l organigramme... 13 3.2 Les règles et les guides...14 3.2.1 Les règles de mesure...14 3.2.2 Ajouter des guides...14 3.2.1 Les couleurs du dégradé... 15 3.2.2 Le fond de dégradé...16 3.3 La bannière!...16 3.3.1 Le logo...16 3.3.2 Les effets...16 3.3.3 Le titre...16 3.4 Les boutons...16 3.5. Le découpage des images... 17 Module no 4 Les diaporamas... 17 4.1 Les images... 17 4.2 Les sélections... 17 3.2.1 Les sélections de forme... 17 3.2.2 Les sélections lasso...18 3.2.3 Le menu sélection...18 4.3 Les montages-photos...18 Module no 1... 19 Définir le Projet Le Dragon Rouge. Les systèmes de couleur et les formats Web...19 Module no 2 L interface Photoshop... 19 Les outils et les calques...19 La transparence et l outil...19 de transformation manuelle...19 Table des matières Module no 3 La maquette... 20 La création et l organigramme... 20 et le découpage des images... 20 Module no 4 Les diaporamas... 20 Recadrer les images... 20 Les sélections et le montages-photos... 20 Module no 5 L interface de Muse... 21 Les outils et les calques. Le plan et la grille et le site web... 21 Module no 6 Le gabarit... 21 La page gabarit et les images de fond... 21 La bannière... 21 Module no 7: Barre de navigation... 22 Les boutons et les états. La bannière et le menu en pied de page...22 Module no 8: La page accueil... 22 Les propriétés et les métadonnées...22 Les images de fond et...22 installer une vidéo...22 Module no 9: La page menu... Les diaporamas et les widjets. Importer et installer, recadrer une image... Module no 10: La page lieu... Installer une carte Google. Ajouter du htlm à votre site Web... Module no 11: Les contacts... Comment créer des hyperliens et ajouter un formulaire de client...... Module no 12: Publier le site sur le Web... Utilisation de Business Catalyst ou du FTP pour placer le site sur Internet... 4
Module no 1 1.1 Le Projet Le Dragon Rouge Bienvenue dans ce premier cours de Adobe Muse. Enfin un vrai logiciel conçu pour la création de site Web, pour intéresser les graphistes et les idéateurs d images Internet. Pratiquement aucune notion de programmation n est requise pour réaliser des sites Web complexes, interactifs, conviviaux et même spectaculaires. Dans le cadre de ce premier cours nous établirons les bases d un site d un restaurant fictif, Le Dragon Rouge. Vous apprendrez à le concevoir et comprendre les bases fondamentales qui gèrent Muse. Bien évidemment il faudra utiliser un logiciel de création d images pour le site, car il sera toujours nécessaire de faire ainsi. Muse est très créatif et permet une grande souplesse dans la réalisation visuelle de pages Web, mais il ne peut modifier ou transformer une photo ou une image. C est pourquoi nous utiliserons le logiciel Photoshop pour produire les images nécessaires pour le site. Sur cette page vous voyez plusieurs images ou logos qui seront utilisés pour la conception du site Le Dragon Rouge.. Ces images ainsi que tous les textes et menu du restaurant sont disponibles sur le site de formationabc.com. Vous avez l accès au http:// www.formationabc.com/ ledragonrougemateriaux.html. Nous allons introduire le logiciel Photoshop avec lequel pour fabriquerons la maquette et les images en arrière-plan. Également toutes les images nécessaires pour les différents diaporamas du menu du restaurant seront organisées et redimensionnées. 5
Commençons par la création de la maquette du site Web. Nous allons établir la structure du gabarit qui sera le modèle de toutes les pages du site. Nous allons faire dix pages Web au total, dont quatre majeures, pour le menu principal, et six pages sous-menu. Nous présentons ici la maquette de création du site. Cette maquette est disponible dans les documents fournis: elle est entièrement fabriquée avec Photoshop. Nous avons utilisé différents zones délimitant les contenus informatifs nécessaires pour le présentation de la première page: Zone de bannière: cet espace contient le logo et le nom de l entreprise et parfois sa mission (ex: restaurant) Barre de navigation: nous avons choisi un menu horizontal pour les boutons principaux. Zone du contenu principale: elle accueillera les images et les diaporamas et les principaux textes du site. Pied de page: zone pour les boutons médias sociaux et les Copyright. Parfois on peut y répéter le menu si la page est extrêmement longue. Ça évite à l usager de remonter pour naviguer. Zone de sous-menu de gauche: elle sert souvent à des sous-menus qui peuvent différer d une page à l autre, ou à du contenu information ou publicitaire. Zone de sous-menu de droite: elle sert à du contenu information ou publicitaire. 6