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 images dans un tableau HTML avec Dreamweaver

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

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

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

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

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.

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

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

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

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.

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

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).

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é.

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)

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

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’.