Une très grosse quantité de travail a due être fournie pour vous proposer ce modèle original que vous pourrez utiliser et modifier à votre guise. La seule et unique condition sera de conserver intacts les crédits me concernant dans le pied de page et la feuille de style.
Toutefois, sachez que si vous utilisez, en arrière-plan de votre entête, une image qui ne vous appartient pas et que vous n'utilisez pas ce modèle à des fins privées, vous devrez, sauf si une exemption de copyright est spécifiée, obtenir au préalable la permission du photographe ou de l'artiste concerné.
Vous pourrez, bien entendu, modifier la feuille de style CSS et les pages HTML à l'aide du Bloc-note fourni avec Windows mais cela risque de se révéler fastidieux car toutes les lignes du code s'afficheront de la même couleur. Je vous conseille donc d'utiliser un éditeur de texte offrant des fonctions de colorisation de la syntaxe (il existe de nombreux programmes gratuits à cet effet). J'en ai testé un certain nombre et ma préférence va à PSPad. Comme les dernières versions comportent des bogues, si vous rencontrez des problèmes, je vous suggère d'utiliser la version 452 build 2241 qui fonctionne très bien pour moi. Elle est disponible au téléchargement sur le site de PSPad et n'est dépourvue d'aucune fonction importante qui puisse vous servir.
Evitez également d'utiliser un programme WYSIWYG tel que Dreamweaver, Frontpage, NVu ou KompoZer car il risque d'altérer le code et de le corrompre. On peut voir ce que l'on fait en utilisant un éditeur de texte. Il suffit de recharger la page concernée dans votre navigateur à chaque nouvelle modification de cette dernière ou de la feuille de style. Il vous suffira d'apprendre quelques bases du language mais ce n'est pas vraiment difficile surtout si vous ne vous contentez de modifier que les couleurs et les polices.
Toutes les modifications de style s'effectuent dans le fichier "video.css" située dans le sous-dossier "styles". Vous pourrez modifier les couleurs et les tailles (réservé aux utilisateurs chevronnés). Si vous devez intervenir sur certaines hauteurs et largeurs, Cool Ruler est un outil pratique qui, comme son nom l'indique, est une règle servant à mesurer à l'écran.
Si vous changez les couleurs de l'arrière-plan, vous devrez utiliser un logiciel de retouche d'image pour coloriser les diverses images d'arrière-plan (bg) dans le sous-dossier "styles" et qui sont en fait des dégradés. Vous aurez sans doute à créer vos propres images également. Les éditeurs graphiques les plus répandus sont Photoshop et Paint Shop Pro (que j'utilise) mais il en existe des gratuits pouvant gérer les calques et les transparences ce qui est le cas de The Gimp ou de Photofiltre.
A des fins à la fois pratiques et esthétiques, j'ai utilisé des images PNG plutôt que GIF. En effet, nul besoin d'éditer ces fichiers si vous décidez de changer de couleur d'arrière-plan et le tracé des contours est bien plus beau. Comme uniquement FF et IE7 sont capables d'afficher ce format correctement, j'ai inclus un "hack" (trouvé ici : http://homepage.ntlworld.com/bobosola/pngtestfixed.htm) sous forme Javascript pour IE5.5 et 6 (il n'existe malheureusement aucun remède pour les versions antérieures mais à quoi bon continuer à les utiliser de toute façon ?)
Le site se charge en ouvrant le fichier "index.html" dans le dossier racine. Cette page est, en fait, constitué de quatre cadres différents (header, sidebar, main, footer) contenus dans deux jeux de cadres (A 3 rangées en noir et B imbriqué dans A constitué de 2 colonnes en blanc) comme indiqué ci-dessous. La hauteur des cadres header et footer est fixe tout comme la largeur du cadre sidebar. Ainsi, la largeur des cadres header et footer s'adaptera à la fenêtre de votre navigateur, de même que la largeur et la hauteur du cadre main.
Tous les liens figurant dans la page chargée dans le cadre header en orange (entete.html dans le sous-dossier "navigation") s'ouvriront dans le cadre main. Tous les liens figurant dans les pages chargées dans le cadre sidebar en vert (recherche.html par défaut dans le sous-dossier "navigation" – mais si vous sélectionnez une catégorie dans le formulaire, une nouvelle page que vous aurez exportée avec une liste de films se chargera à la place) s'ouvriront également dans le cadre main. Tous les liens internes figurant dans les pages chargées dans le cadre main en mauve (INDIV.html par défaut dans le sous-dossier "pages", mais il vous faudra modifier ce détail – ce qui sera expliqué plus loin) s'ouvriront dans le cadre main tandis que tous les liens externes s'ouvriront dans une nouvelle fenêtre ou un nouvel onglet si vous utilisez Firefox ou IE7. La page chargée dans le cadre footer en jaune (footer.html dans le sous-dossier "navigation") ne comporte aucun lien mais vous pouvez en ajouter si vous le souhaitez en portant la cible sur une nouvelle fenêtre ou un nouvel onglet (target:_blank).
A moins que vous ne souhaitiez agrandir le cadre d'entête ou du pied de page, vous devrez quand même éditer la page "index.html" pour y indiquer le nom de votre site (par défaut, il s'appelle "Mes films") entre les balises "title" ainsi que la page devant être chargée par défaut dans le cadre main au lieu de "INDIV.html" (ex : si vos pages individuelles commencent par "films_xx" et disons que vous voulez que le premier film soit la page par défaut, il suffit de remplacer "INDIV.html" par "films_1.html"). Pas de panique, j'ai incorporé des commentaires dans ladite page qui vous permettront d'identifier plus facilement ce que vous devez modifier.
Voici quelques captures d'écran pour vous donner un aperçu de ce à quoi ressemble mon site sous Firefox 2.
Page de film chargée depuis la liste à gauche. Veuillez noter le séparateur animé dans la boite de recherche !
Identique au précédent mais là vous pouvez constater que seule la partie située sous les titres est déroulante (cela ne fonctionne pas sous IE6 et c'est alors toute la page du cadre principal qui sera déroulante – IE ne reconnaît pas la position "fixed"). Vous avez également un aperçu du formulaire déroulé.
Là j'ai chargé la page "A voir" depuis le lien du même nom dans le cadre d'entête. Cette page peut être générée à l'aide de AMC tout comme une page de liste avec le modèle d'exportation "VOIR.html" où il vous faudra sélectionner tous les films que vous voulez y voir figurer. Il suffira alors de cliquer sur la vignette du film pour charger la page s'y rapportant. Aucun tableau n'est utilisé aussi vous pouvez avoir un nombre impair de films, aucune cellule vide ne sera créée comme avec les tableaux. Un tableau, de toute manière, n'aurait pas permis d'avoir deux colonnes avec le script d'exportation. Veuillez noter que le logo "pellicule" à gauche du titre de la page est animé et que le haut de la page est fixe.
Là j'ai chargé la page "Filmographies" depuis le lien du même non dans le cadre d'entête. Cette page ne peut pas être générée à l'aide de AMC car les catalogues ne contiennent pas ce type d'informations. C'est pourquoi, vous trouverez un modèle intitulé "acteurs.html" dans le sous-répertoire "pages" que vous devrez remplir avec les données souhaitées. Les photos devont être placées dans le sous-dossier "images".
Là j'ai chargé la page correspondant à la filmographie d'un acteur depuis un lien sur la page précédente. Pareil, un modèle intitulé "filmographie.html" a été placé dans le sous-dossier "pages" où devront figurer tous les duplicatas. Toutes les données devront être saisies manuellement mais on s'en sort plutôt bien en utilisant la méthode du copier-coller. Comme vous pouvez le constater, j'ai mis des liens à tous les films de cet acteur figurant dans mon catalogue qui se chargeront dans le même cadre (target="main"). Désolée, il n'existe pas, à ma connaissance, de manière automatisée pour placer ces liens alors j'espère que vous n'avez pas trop d'acteurs préférés ;)
J'ai utilisé des couleurs et une image d'arrière-plan pour mon entête différentes de celles fournies avec le modèle dans le souci de conserver une touche personnalisée. L'image que j'ai utilisée sur les captures est un collage réalisé à l'aide de divers filtres.
Pour le cas où vous souhaiteriez créer votre propre image, j'ai inclus un modèle PNG intitulé "modele_bghead" dans les sous-dossier "styles" à utiliser comme guide – vous devrez exporter le résultat final au format JPEG en écrasant le fichier "bgheader.jpg" actuel situé dans le sous-dossier "styles". Vous devrez coller l'image de votre choix dans la zone transparente.
Je vous conseille de lancer une requête sur Google Image avec les mots-clé "panorama" ou "panoramic". J'ai trouvé de magnifiques photos au format panoramique sur ce site mais sauf usage privé, il vous faudra demander la permission pour les utiliser : http://www.myfourthirds.com/
Pour ce qui est du logo, vous n'aurez qu'à saisir le nom de votre site dans la page "entete.html". Si vous préférez un logo plus élaboré, il vous faudra le créer sous forme d'image et remplacer les balises <h1> par une balise <img> en ajoutant le nom de votre image. Si le style de mon logo vous plait, j'ai généré l'image façon néon en allant sur ce site : http://www.glassgiant.com/neon/
Dernière chose : j'ai intitulé le dernier lien dans l'entête "Articles" ("Autre lien" par défaut) afin de vous y mettiez ce que bon vous semble ou que vous le supprimiez s'il ne vous est d'aucune utilité. N'oubliez-pas de lui donnez un nom de fichier adéquat dans le chemin du lien.
Vous n'aurez qu'à remplacer "Votre Nom" dans le copyright par... votre nom ! Merci de ne pas retirer le copyright qui me revient pour le design Web.
Toutes les pages génerées à l'aide de ce modèle devront être exportées vers le sous-dossier "pages".
Champs utilisés dans la partie gauche (fixe sous FF/IE7)
$$ITEM_PICTUREFILENAME (.jpg) dans le sous-dossier "images"
$$ITEM_CATEGORY
$$ITEM_MEDIA
Champs utilisés dans la partie supérieure (fixe sous FF/IE7)
$$ITEM_FORMATTEDTITLE
$$ITEM_ORIGINALTITLE
$$ITEM_SIZE utilisé pour les Titres alternatifs (alias)
$$ITEM_COUNTRY
$$ITEM_YEAR
Champs utilisés dans la partie centrale (déroulante)
$$ITEM_APPRECIATION (.png) dans le sous-dossier "styles", étoiles de 1 à 5, image transparente quand le champ est vide
$$ITEM_DESCRIPTION
$$ITEM_DIRECTOR
$$ITEM_PRODUCER utilisé pour Histoire (scénario, adaptation)
$$ITEM_ACTORS
$$ITEM_COMMENTS utilisé pour les Bonus
Champs utilisés dans la partie droite (fixe sous FF/IE7)
$$ITEM_VIDEOFORMAT(.png dans le sous-dossier "styles"
$$ITEM_RESOLUTION utilisé pour les standards vidéos (ex. : PAL, NTSC, etc.)(.png) dans le sous-dossier "styles"
$$ITEM_FRAMERATE utilisé pour le ratio image (ex. : 2:35, 1:85, etc.)(.png) dans le sous-dossier "styles"
$$ITEM_AUDIOFORMAT utilisé pour la première piste audio : Langue + format audio (.png) dans le sous-dossier "styles"
$$ITEM_LANGUAGES utilisé pour la seconde piste audio : Langue + format audio (.png) dans le sous-dossier "styles"
$$ITEM_SUBTITLES
$$ITEM_LENGTH
$$ITEM_SOURCE utilisé pour la source (ex.: Original or copie depuis un DVD, TV, etc.)
$$ITEM_DISKS
$$ITEM_TYPE
$$ITEM_NUMBER
$$ITEM_MEDIA
Toutes les étoiles sont fournies tout comme un certain nombre de formats audio/langues et vidéo. Vous devrez vous assurer que les noms des fichiers image sont absolument identiques (les minuscules ou majuscules ne comptent pas) au contenu de vos champs. Au besoin, renommez les images selon vos champs ou modifiez le contenu de vos champs pour coincider avec le nom des images comme bon vous semblera. Il ne m'était pas possible de créer toutes les combinaisons possibles alors vous devrez créer vos propres images si elles vous font défaut.
Pour le cas où vous ne souhaiteriez avoir du texte plutôt que des images, remplacez les balises <img> par une balise ouvrante <p> en ne laissant que le nom du champ (sans le chemin, ni l'extension de fichier)et terminez avec une balise fermante </p>.
Exemple :
<img title="Audio track 1: $$ITEM_AUDIOFORMAT" alt="$$ITEM_AUDIOFORMAT" src="../styles/$$ITEM_AUDIOFORMAT.png">
deviendra
<p>$$ITEM_AUDIOFORMAT</p>
Toutes les pages génerées à l'aide de ce modèle devront être exportées vers le sous-dossier "navigation".
Formulaire Javascript
Chaque option se rapporte à une catégorie (une liste de films à générer pour chaque catégorie). J'ai intégré des options sans lien (des "optgroups" auraient été plus approprié mais IE6 ne les reconnait pas) pour établir une distinction entre les DVD/CD et les VHS. Supprimez la seconde partie (voir les commentaires dans le fichier) si vous n'avez pas de VHS ainsi que la ligne "DVD/CD" comme ça vous n'aurez qu'une liste de catégories. Celles incorporées au modèles sont celles que j'utilise et ne sont là qu'à titre d'exemple. Les vôtres diffèreront probablement alors il faudra modifier tout cela.
IMPORTANT : N'oubliez pas de reflèter tout changement entre les balises <form> et </form> dans le fichier "recherche.html" situé dans le sous-dossier "navigation".
Pour n'avoir qu'une liste simple sans distinction de catégories et de supports, supprimez le formulaire (balises et options) ainsi que la référence au script dans la balise "head" <script language=language="JavaScript" src="../scripts/cat.js" type="text/javascript></script>). Supprimez également la ligne faisant référence au Support et à la Categorie au-dessus de la liste.
Liste de films
Support - Catégorie – éditez cette ligne en fonction à chaque exportation
$$TOTALMOVIES
$$ITEM_FORMATTEDTITLE
Pour exporter vos listes par catégories, vous devrez d'abord choisir un affichage groupé par catégorie puis utiliser le panneau de recherche dans AMC pour isoler un support et enfin sélectionner le premier groupe catégorie de la liste en vous assurant que l'option "selectionné" est cochée dans la fenêtre d'exportation HTML. N'oubliez pas de modifier la ligne "Support - Catégorie" à chaque fois avant de cliquer sur le bouton "Exporter" et ne sauvegardez pas les changements si on vous le demande. Si vous n'utilisez qu'un type de support, supprimez Support - pour de bon et contentez-vous d'éditer la "Catégorie".
Note : Afin d'obtenir une liste "plus lègère", je me suis servie d'un champ inutilisé (URL) dans lequel j'ai saisi chaque titre de film comme je voulais le voir apparaître dans mes listes.
Exemple :
"Le Seigneur des Anneaux - La Communauté de l'Anneau"
devient ainsi
"Le Seigneur des Anneaux 1"
Vous pouvez avoir recours à un script pour remplir le champ choisi automatiquement puis éditer manuellement les parties à modifier. Dans le modèle d'exportation des listes vous devrez alors remplacer ITEM_FORMATTEDTITLE par $$ITEM_URL (si c'est le champ que vous utilisez).
Si vous avez des questions à formuler, veuillez utiliser le forum à cet effet et je ferais mon possible pour me connecter régulièrement afin d'y répondre ou bien d'autres s'en chargeront. Et s'il vous vient des idées pour améliorer ce modèle, n'hésitez pas à les partager, c'est ainsi que nous progressons tous. Amusez-vous bien !
© 2008 Eyael