background preloader

Demonstration

Demonstration
Une démonstation de Fancybox. C'est la traduction française de la documentation issue du site officiel Des animations différentes ('fade', 'elastic' and 'none') La position des titres ('outside', 'inside' and 'over') Les galeries d'images (utilisez la molette de la souris) Quelques exemples Le texte est d'abord écrit dans le code mais non-affiché (display:none). Inline un document dans le code html Ajax Un document interne (texte.txt) Iframe Le site Wikipedia dans une fenêtre (affichage à 95%) Swf Une animation vidéo Autres exemples (bidouillages personnels) 1. À déclarer dans l'en-tête : Puis à afficher dans la page html : <a class="site" href="l_url_du_site? On peut définir la taille de la fenêtre en pixel ou en pourcentage, la transition, la couleur et l'opacité de la trame (overlay) et la vitesse d'apparition et de disparition de la fenêtre fancybox. 2. Il faut d'abord définir l'objet sans l'afficher : Puis, le lancer : Un autre exemple : Le parti d'en rire (Pierre Dac et Francis blanche). 3.

Dreamweaver gratuit - Dreamweaver tutorials et extensions Les pratiques du référencement Les bases du référencement Site Web de qualité - affichage rapide - nom de domaine pertinent - pages web bien faîtes avec des contenus uniquesPopulariser son site - net linking (distribution de liens sur des sites externes et réseaux sociaux) - multiplier les liens internesMise à jour régulière Pour aller plus loin, voyons en détail les 17 bonnes pratiques de référencement sur google 1 – La balise <title> Probablement l’un des facteurs les plus importants aux yeux de Google ! Le secret d’un <title> bien optimisé? 2 – La balise <description> Directement liée à la balise <title>, la balise <description> devra contenir entre 150 et 200 caractères. 3 – La balise <keywords> De moins en moins importante pour les moteurs de recherche, cette balise mérite tout de même d’être renseignée convenablement. 4 – Les Hn Un autre élément à prendre sérieusement en considération : la présence de titres de plusieurs niveaux (H1, H2, H3, etc.) au sein de votre page web. 5 – Le contenu textuel 8 – L’âge du site

Accordion with CSS3 | Codrops - Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. View demo Download source Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing. There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. So, let start! Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use. The Markup We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Note that we need to give each input an ID which we will then use in the for attribute of the label. Each article will have a class that will help us determine to which height we it to expand to. The CSS Demos

HtaccessProtection Comment protéger l'accès à un répertoire par une authentification ? Introduction Vous pouvez réaliser ceci grâce à un fichier .htaccess. Avant de procéder, il est nécessaire de préciser quelques petites choses par rapport aux fichiers .htaccess. Tout d'abord, il faut savoir qu'il s'agit de fichiers particuliers pour le serveur web, et que ces fichiers n'apparaissent pas dans l'arborescence du répertoire concerné si un internaute fait un accès à un répertoire listable (qui ne contient pas de page index, et dont le listage n'est pas interdit). Procédure à suivre CRÉER LE FICHIER DE MOT DE PASSE Dans un premier temps, il faut créer le fichier qui contiendra la liste des utilisateurs ayant le droit de se connecter et le mot de passe qui leur est associé. Note : Sous windows, vous ne pouvez pas créer directement un fichier nommé .htaccess ou .htpasswd. Ces lignes sont de la forme suivante : utilisateur:mot_de_passe_crypté Note :

Générateur de sitemaps Devant l'utilisation massive de l'outil que je proposais, mon hébergeur me force à couper son activité. N'ayant pas encore trouvé de solution pour proposer une version online de l'outil, je créais en ce moment une version téléchargeable de cet outil permettant de générer un sitemap en local. Définition d'un sitemap Sitemap/plan de site Les sitemaps (= plans de site) permettent d'accéder rapidement au contenu d'un site web en listant l'ensemble des ressources (images, pages) web. Auparavant Yahoo! Pour créer un sitemap il faut donc d'abord lister les URL d'un site pour pouvoir ensuite les exploiter en XML et publier le sitemap. Soumission d'un sitemap Vous pouvez par la suite soumettre ces sitemaps : Ou plus simple encore, au lieu de soumettre votre sitemap, rendez le accessible aux moteurs par le biais d'un fichier robots.txt en plaçant le code suivant dedant : User-agent: * Sitemap: Créer un sitemap avec un outil logiciel (Xenu)

CSS Zen Garden: The Beauty of CSS Design CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes Sur la version automatique (la seconde) : Poser les fondations

Fancybox jQuery » 20 tutoriaux CSS3 pour vous préparer au futur du web Le web design évolue constamment, au grès des modes et des technologies. Les graphistes et designers doivent non seulement garder un oeil sur les nouvelles tendances mais aussi sur les dernières technologies comme jQuery, HTML5 et CSS3, qui permettent d’exprimer une plus grande créativité tout enrichissant l’expérience de l’utilisateur. Ces 20 tutoriaux CSS3 vous permettront d’apprendre à coder de superbes éléments web interactifs. Ajoutez ces sites à vos favoris, et prenez votre temps… N’hésitez pas à partagez de billet avec vos collègues / amis ! Ces 20 tutoriaux CSS3 ont été référencés sur web design ledger par Tomas Laurinavicius. Construisez rapidement une page annonce (teaser) en CSS3 Avec ce tutoriel, vous apprendrez à créer une page annonce en utilisant uniquement CSS. Créer un menu déroulant avec CSS3 Avec ce tutoriel relativement simple, vous apprendrez à coder un menu déroulant en CSS3 pour un résultat simple, propre et professionnel. Accordéon avec CSS3 Tableaux de prix en CSS3

Related: