Concevoir un site web de A a Z Cours 3. Aujourd’hui Découper sa page en tranche pour une intégration graphique optimale avec Photoshop L’intégration des.

Présentation au sujet: "Concevoir un site web de A a Z Cours 3. Aujourd’hui Découper sa page en tranche pour une intégration graphique optimale avec Photoshop L’intégration des."— Transcription de la présentation:

1 Concevoir un site web de A a Z Cours 3

2 Aujourd’hui Découper sa page en tranche pour une intégration graphique optimale avec Photoshop L’intégration des images dans un tableau HTML avec Dreamweaver

3 Les tranches Permet de découper vos images en de multiples morceaux pour une intégration plus harmonieuse. Exemple: hankestenville.com

4 Les tranches Dans Photoshop, les outils utilisés sont -L’outil tranche, pour découper notre image -Les options de tranche, pour nommer correctement vos tranches -Enregistrer pour le web, pour optimiser le poid de vos tranches Selon la version de Photoshop, on peut utiliser ImageReady Exemple

5 Les tranches Voir les différentes options d’exportation (avec et sans HTML)

6 Dreamweaver Assurez-vous de classer les images dans le bon répertoire de votre site Insérer les images dans les tables Vos tables doivent n’avoir aucune bordure ni d’espace entre les cellules

7 Dreamweaver Pour parvenir à l’effet ‘rollover’ En javascript: assignez un id a vos images Sélectionner l’image inspecteur de balise + permuter une image Choisir l’autre statut (hover, par exemple) Vous pouvez modifier les status dans une zone de liste déroulante.

8 Dreamweaver En CSS:.accueil_up { background-image: url(images/Accueil.gif); }.accueil_up:active { background-image: url(images/Accueil_down.gif); }

9 Dreamweaver L’utilisation des bibliothèques permet d’éviter la redondance de code HTML. Exemple

10 Pour être en ligne Hébergement (serveur web, une sorte d’espace dans lequel vous mettez vos fichiers) Un nom de domaine (une adresse URL) Une même entreprise peut vous offrir les deux services, mais pas nécessairement. Ex: QuebecIT, Domainatcost etc

11 FTP Votre hébergeur va vous donner les coordonnées nécessaires pour accéder à votre espace en ligne. - Une adresse - Un usager - Un mot de passe Ces données vous permettront de vous connecter au serveur FTP (File Transfer Protocol) de l’hébergeur.

12 FTP Un logiciel est nécessaire pour se connecter sur votre site FTP. Ex: Dreamweaver, Filezilla, etc. L’interface est similaire à l’explorateur windows. Exemple

13 Le référencement Pratique visant à améliorer la visibilité de votre site sur internet pour en accroitre le trafic. Le référencement naturel se fait de deux façons: L’inscription à des moteurs de recherche et par l’amélioration du positionnement d’un site. Il existe aussi le référencement payant (la pub).

14 Le référencement L’inscription à des moteurs de recherche Il sagit d’entrer l’url de votre site dans les annuaires en ligne (Google, Yahoo, Altavista etc). Il y a un délais de 2 a 12 semaines pour être validé dans Google. Vous devez respecter certains critères pour être correctement validé.

15 Le référencement L’amélioration du positionnement d’un site - Vous pouvez utiliser les balises meta ( max 100 caracteres et 200 ou plus)

16 Le référencement Vous devez enrichir votre code source de mots clés pertinents sélectionnés en fonction: - De l’activité du site - Du positionnement de vos concurrents - Du volume de recherche des mots clés (Voir le générateur de mots clés de Google) - Le Web Focus Group, l’analyse d’un marché potentiel grâce aux requêtes effectuées par les internautes dans les moteurs de recherche

17 Le référencement Techniques de référencement: - Créer des contenus en adéquation avec une qualité qui respecte les chartes des moteurs de recherche - Créer des liens externes sur des sites traitant du sujet. Voir link:cegep-ste- foy.qc.ca dans google pour voir un exemple de ‘backlink’.