Créer un site Internet ou un blog Avec iweb Yves Roger Cornil Microcam06, Fréjus Vous Accueille Fréjus le 2 décembre 2006 1 Plan iweb dans ilife 06 Créer un site Internet Créer un blog Créer un podcast Ajouter un site Créez vos pages sans modèle Zoom sur quelques outils 2 2 idvd iweb dans ilife 06 iweb s intègre très bien dans la suite ilife 06 (79 ). Il peut être complété par l abonnement.mac (99 par an). 3 3 La suite ilife 06 comporte 6 logiciels intégrés. itunes pour la gestion de la musique et achats sur Internet, Garageband pour composer vos propres morceaux, iphoto pour la gestion de vos photos,imovie pour monter vos films, idvd pour graver vos DVD et le programme iweb qui vous permet de créer en quelques clics votre site Internet et votre blog. La suite ilife coûte 79, mais est livrée avec les nouvelles configurations des Macintosh. L abonnement à.mac, bien que non obligatoire, est fortement conseillé. Créer un site ou un blog avec iweb. 4 4
5 Démarrage d iweb. 5 Démarrage d iweb. 6 6 Site que nous allons créer Nous allons créer un site Internet pour Microcam06 (le club de micro-informatique du Crédit Agricole) qui contient une page d accueil (bienvenue), une page d informations, une page de photos, un blog et un podcast vidéo. Nous verrons aussi des modifications apportées sur un autre site que Microcam06. 7 7 Nom du site Création de la première page Création de la première page (bienvenue). Choisissez un modèle pour la page bienvenue. Voici le premier écran quand vous utilisez iweb. Le site créé s appelle site; vous pourrez changer de nom pour mieux le personnaliser. Vous pouvez créer un site en vous basant, uniquement sur les différents modèles ou créer des pages à partir d une page vierge. Les modèles s appliquent à un type de page : page personnelle, blog, photos podcast 8 8
9 Créer un site ou un blog avec iweb. Voici la page bienvenue créée avec le modèle Journal. Il faudra modifier le modèle avec ses propres textes et ses propres images. L adresse de la page est : web.mac.com/clubmicrocam06/iweb/site/bienvenue.html Clubmicrocam06 est le nom de l abonné à.mac. Site est le nom du site (modifiable). 9 Modifier les photos du modèle depuis iphoto Déplacez les photos depuis iphoto sur la page modèle Vous pouvez modifier les images depuis un simple glisser déposer depuis iphoto ou depuis un fichier. La taille des photos s adaptera au modèle. Il faudra adapter les texte latins par vos propres textes. Vous pouvez utiliser les polices comprises dans les modèles ou utiliser vos polices préférées depuis l outil polices. 10 10 Modification du titre de la page de bienvenue Après avoir déposé quelques photos depuis iphoto, modifiez les textes du modèle. 11 11 N en perdez pas votre latin Remplacez le texte en latin par votre propre texte. 12 12
13 Insérer un lien vers un site Internet 13 Pour ajouter un lien sur un texte, sélectionnez ce texte, allez sur l outil Inspecteur. Dans l outil inspecteur, cliquez sur l outil inspecteur de lien. Cochez la case activer comme lien et tapez votre adresse dans la zone URL. Si au préalable vous copiez votre adresse (depuis le navigateur, par exemple), le fait de cocher la case activer comme lien, copiera l adresse dans la zone URL. Lier vers est ici positionné sur une page externe. Insérer un lien vers une adresse de messagerie Pour insérer un lien vers une adresse électronique mettez le menu déroulant lier vers un message électronique. Dans la zone à tapez l adresse électronique et dans la zone objet mettez l objet du message. 14 14 Insérer un lien vers une page du site Pour ajouter un lien sur un texte, sélectionnez ce texte, allez sur l outil Inspecteur. Dans l outil inspecteur, cliquez sur l outil inspecteur de lien. Sélectionnez une de mes pages dans le menu déroulant lier vers et choisissez une de vos pages. La page peut être dans votre site ou dans un autre site (au sens iweb). 15 15 Créer une nouvelle page Pour créer une nouvelle page allez dans le menu fichier, nouvelle page. Choisissez ensuite un modèle et un type de page. Ici j ai choisi le modèle élégant pour une page fiche personnelle. 16 16
17 La page personnelle modifiée Il est possible de renommer une page. Voici la page personnelle terminée. Cette page a été renommée en page infos, mieux adaptée pour Microcam06. Ici la page personnelle a été renommée infos 17 Créer une page de photos dans iweb. Pour créer une page de photos, choisissez un modèle et un type de page, ici modèle élégant, type de page photos. 18 18 Créer une page de photos dans iweb. Le modèle de page photos propose 3 photos. Vous pouvez inclure plus de 3 photos. Sélectionnez vos photos dans iphoto et glissez les vers la page. 19 19 Créer une page de photos dans iweb. Les photos venant de iphoto ont été ajoutées à la page photos. 20 20
21 Créer une page de photos dans iweb. Modifiez maintenant les textes du modèle ainsi que les légendes des photos. Modifiez les textes du modèle 21 Créer une page de photos depuis iphoto pour iweb Vous pouvez aussi créer une page de photos depuis iphoto. Dans iphoto, sélectionnez un album ou quelques photos, allez dans le menu partage et transférer vers iweb et page de photos. Créer un site ou un blog avec iweb 22 22 Créer une page de photos depuis iphoto pour iweb Choisissez ensuite un modèle de page (ici pour enfants). Choisissez un modèle de page 23 23 Créer une page de photos depuis iphoto pour iweb Les photos sont transférées d iphoto dans la page de photos d iweb. Les images sont importées dans la page depuis iphoto. 24 24
25 Enregistrer - Publier De temps en temps enregistrez votre travail. Pour publier votre site allez dans la menu fichier publier sur.mac, ou dans un dossier. 25 Créer un blog avec iweb 26 26 C est quoi un blog? Un blog peut être un journal personnel. Une tribune. Un lieu d échanges. Vous pouvez vous en servir pour donner votre avis et faire entendre votre voix dans le monde. Vous pouvez inclure les informations de votre choix dans votre blog. Quelques bonnes raisons pour vous persuader de la nécessité de créer votre propre blog. Un blog est un site Web sur lequel vous ajoutez continuellement des éléments. Les ajouts sont affichés en haut de la liste, afin que les internautes accèdent directement aux nouveautés. Les visiteurs du blog peuvent ensuite communiquer leurs commentaires, créer des liens vers votre blog ou vous envoyer un courrier électronique. Ou ne rien faire... 27 27 Le blog, principes - Les articles s empilent Dernier article Premier article 28 28
29 Créer un blog avec iweb Ici, choix du modèle élégant pour un blog. Pour créer un blog allez dans le menu fichier nouvelle page puis choisissez un modèle de page (ici élégant) et un type de page (ici blog). 29 Créer un blog avec iweb Le titre dans la page (ici Rhomcus ) donne le nom de la page (ici Microcam06 à Apple Expo). 30 30 Créer un blog avec iweb Notez que si vous créez un blog avec plusieurs photos sélectionnées depuis iphoto, iweb créera une entrée (ou un article, ou un billet) par photo dans le blog. 31 31 Créer un podcast 32 32
33 Créer un podcast avec iweb Un podcast est une émission radio (son) ou télé (vidéo) accessible sur Internet, selon le même principe que le blog (articles qui s empilent). Les podcasts peuvent être aussi accessibles depuis itunes (sur Mac et sur PC); c est le cas des podcasts publiés par Yves Cornil. 33 Créer un podcast avec iweb Modifiez le texte en latin du modèle. Pour le titre, même principe que pour le blog. Ici le titre devient Internet, mode d emploi - épisode 1. 34 34 Insertion d un film dans un podcast avec iweb L insertion du film dans la page podcast se fait par un simple glisser déposer. Insérez votre film par un simple glisser déposer. 35 35 Insertion d un film dans un podcast avec iweb Si le film vidéo est trop important (en méga octets), vous aves un message d attention. Ici le film qui a été inséré est un film en format m4v (format pour ipod). 36 36
37 Publication du podcast Complétez la page podcast avec vos textes. 37 Modification du podcast Pour publier votre podcast allez dans le menu fichier publier sur.mac. 38 38 Ajouter une entrée au podcast Vous pouvez ajouter des entrées, comme dans le blog. 39 39 Supprimer une entrée à un podcast Et supprimer des entrées. 40 40
41 Supprimer une entrée à un podcast Et supprimer des entrées. 41 Ajouter un site à votre site iweb 42 42 Ajouter un site 43 43 Renommer un site 44 44
45 Déplacer une page Vous pouvez déplacer une page à l intérieur d un site ou vers un autre site. Allez dans l organiseur de sites, sélectionnez la page et déplacez la vers le site désiré. 45 Créez vos pages sans modèle 46 46 Créer des pages depuis une page vierge Vous pouvez créer vos pages depuis une page vierge (cette page s appellera vierge, que vous pourrez renommer avec un nom plus significatif. 47 47 Créer des pages depuis une page vierge Voici notre page vierge. 48 48
49 Insertion du texte Pour insérer du texte allez sur l outil texte (T). Déplacez et adaptez à vos besoins la zone de texte en tirant sur les poignées pour l élargir (ou la rétrécir). Vous pouvez ensuite taper votre texte ou collez le texte que vous copiez d une page ou d un document existant. 49 Insertion du titre Insertion du titre de la page. 50 50 Renommer la page 51 51 Pour modifier le nom de la page, sélectionnez la page à modifier dans l organiseur de site (colonne de droite); un clic droit fait apparaître un menu contextuel, choisissez renommer et entrez le nom de la page. Ici la page vierge sera renommée histoire de la bravade. Tapez ensuite le titre de la page (ici histoire de la Bravade). Vous pouvez choisir de ne pas ajouter cette page dans l index du site (menu de navigation); pour cela allez dans l outil inspecteur de page et décochez la case inclure la page dans le menu. Vous pouvez aussi ne pas afficher le menu de navigation dans la page. Choisir un arrière plan pour la page Pour avoir un arrière plan couleur de la page allez dans l inspecteur page et choisissez une couleur d arrière plan ainsi que le sens du dégradé en faisant tourner la petite roue angle dans un sens ou dans un autre. Vérifiez si le texte reste encore lisible après avoir appliqué le dégradé. Jouez sur le curseur à côté de la roue chromatique. 52 52
53 Création d une marge Vous pouvez insérer une marge en tirant sur les poignées qui délimitent la zone de texte. 53 Insertion d images Vous pouvez insérer des images depuis iphoto ou par un classique copier-coller. Vous povez déplacer la photo sur le page et redimensionner la photo en jouant sur les poignées qui entourent votre image. 54 54 Changement du dégradé du fond de la page Vous pouvez modifier le dégradé que nous avons déjà découvert précédemment. 55 55 Zoom sur les outils 56 56
57 Zoom sur les outils 57 Texte figures Au dessus En dessous multimédia Réglages photo Inspecteur couleurs polices Masquer ou dévoiler des photos 58 58 Les outils texte et figures A bientôt sur votre blog. Zone de texte 59 59 Outils multimédia A bientôt sur votre blog. 60 60
61 Outil ajuster A bientôt sur votre blog. 61 Inspecteur de site L inspecteur de site vous permet de modifier des réglages sur le site sélectionné. Vous pourrez un mot de passe à un site; le visiteur du site devra alors s identifier avec un nom d utilisateur et d un mot de passe. Nom du site 62 62 Inspecteur de page Avec l inspecteur de page vous pourrez modifier les réglages de votre page (nom de lapage, insertion ou non dans la barre de navigation, format de la page, arrière plan). 63 63 Inspecteur de blog et de podcast Pour aller dans l inspecteur de blog et de podcast cliquez sur RSS. Dans l inspecteur de blog vous choisirez le nombre et la longueur des articles du blog. Vous choisirez aussi si vous acceptez des commentaires. Dans l inspecteur de podcast vous donnerez le nom de «l artiste», l adresse électronique de contact et si vous autirisez la publication du podcast sur l Itunes Store. 64 64
65 Inspecteur de texte L inspecteur de texte permet d ajuster la propriété de textes (couleur, alignement, espacement). 65 Inspecteur des graphismes Avec l inspecteur des graphisme vous pouvez modifier les propriétés d objets (remplissage, largeur de ligne, ombre, opacité. 66 66 Inspecteur des mesures L inspecteur de mesures donne la taille des fichiers incorporés dans la page (photo, multimédia). Avec l outil rotation vous pouvez effectuer une rotation d une image. 67 67 Inspecteur de liens Pour ajouter un lien, sélectionnez le texte ou l image, puis allez dans l inspecteur de liens. Vous pouvez un lien vers une page externe (http ) ou sur une page de votre site iweb. 68 68
69 Outils couleurs 69 Outil police 70 70 Où sont stockés les fichiers d iweb? Les fichiers générés par iweb sont dans un paquet Domain qui est dans le dossier iweb du dossier support aux applications, du dossier bibliothèque de l utilisateur qui a créé le site iweb. 71 71 Merci de votre attention A bientôt sur votre blog. 72 72