Dreamweaver gratuit

Tutorials menu spry gratuits pour Dreamweaver

29 juin 2009 | Posté par caroder à 08:58

Suite à la question d'une lectrice sur un problème de menu Spry de Dreamweaver, je mets en ligne quelques tutoriaux utiles pour ceux qui souhaiteraient utiliser ce fonctionnel.

1. Un tutorial vidéo basique mais en français

2. Un tuto vidéo en anglais avancé et très détaillé

NB : Comme tout les tutoriaux vidéo de Tutvid, l'accent américain est très prononcé et le débit très rapide. Si vous ne maitrisez pas bien la langue de Shakespeare, passez votre chemin :)

Ce tutorial aborde aussi la partie CSS des menus Spry.

Durée du tuto : plus de 22 minutes !

3. Un tutorial classique en anglais très détaillé

Ce tutorial détaille notamment la feuille de style des menus Spry ce qui peut s'avérer extrêmement utile  : http://www.creativepro.com/article/view-source-the-easy-way-add-dynamic-elements-web-sites

Les 20 sites indispensables pour webdesigners

24 mars 2009 | Posté par caroder à 09:20

Je sais, je sais... Le site que vous consultez ne représente pas une performance graphique... et pourtant, mon premier job, c'est la direction artistique... Voici ma liste des 20 incontournables en matière de design de site web :

Au commencement était... l'ergonomie :

• Un peu de théorie, ça ne fait pas de mal : http://www.ergolab.net/. Comprendre le pourquoi et le comment  de l'usability... Une excellente ressource. Ma bible.

Comprendre les CSS et les mettre en application :

• les normes du W3C : http://openweb.eu.org/ (à consulter absolument, l'article sur le positionnement float : http://openweb.eu.org/articles/initiation_float)
• les problèmes liés à IE : http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297 et le HAsLayout http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html
• le validateur du W3C : http://validator.w3.org/

Gabarits de mises en page :

La base de tout... C'est avec eux que je commence tous mes designs... Plus le gabarit est dépouillé, moins la CSS contient de ligne de code, plus j'aime !

• la boite à outil d'Alsacréations : http://www.alsacreations.com/outils/
• 224 gabarits  de mise en page : http://layouts.ironmyers.com/
• A ne pas oublier : les gabarits proposés par Dreamweaver (via la commande fichier >> nouveau)

Templates gratuites :

Ici on croit résoudre ses problèmes, mais attention ! ce ne sont QUE des templates...
Il existe des centaines de sites avec des templates gratuites. Voici ceux que je considère comme les meilleurs, la crème de la crème...

• Templates : http://www.freecsstemplates.org/css-templates/
• Templates dédiés à Dreamweaver : http://www.ex-designz.net/template/tempcat.asp?cat_id=9
• Une liste de thème Wordpress : http://www.opensourcehunter.com/2009/03/03/55-free-and-beautiful-wordpress-themes/
• Thèmes pour Wordpress de qualité pro : http://topwpthemes.com/

Ressources graphiques :

• Des milliers d'images gratuites, de pinceaux et de pattern photoshop, bref une ressource inépuisable ! http://www.deviantart.com/
• Des puces à foison pour de jolies listes : http://www.stylegala.com/features/bulletmadness/
• Travailler sur la couleur et les compatibilités de gamme : http://www.colorblender.com/
• Vérifier le rendu d'un site dans tous les navigateurs : http://browsershots.org/

Trouver l'inspiration (qu'est-ce qui est in et out en matière de design CSS web) :

• CSS Vault : http://cssvault.com/
• CSS Beauty : http://www.cssbeauty.com/
• CSS Zen Garden : http://www.csszengarden.com/ (CSS Zen Garden est plus un exercice de style ou une performance au sens artistique du terme mais c'est aussi un excellent reflet de l'air du temps)
• Style Gala : http://stylegala.com/
• CSS Drive : http://www.cssdrive.com/

Si vous en avez d'autres, n'hésitez pas à commenter :-)

Menu CSS déroulant horizontal, largeur adapté à chaque item du menu

23 mars 2009 | Posté par caroder à 15:16

Vous me direz, il y a les menus Spry pour faire ça... Ou alors plus simplement les attributs  :

ul li a {
display: block;
width : 100px;
}

Oui, mais... essayez d'enlever la largeur des menus et voyez ce qui se passe sous IE6 !!...

Je désirais un menu simple et surtout facilement paramétrable selon mon design ce que Spry ne me permettait pas totalement ! J'ai longtemps cherché sur le web aussi bien sur la toile française que le web anglophone. Ce sera finalement un site italien qui apportera la solution à mon problème !

La particularité de cette solution tient en priorité à sa très large compatibilité avec les navigateurs, même les plus anciens. Je vous laisse découvrir : http://www.sergiogandrus.it/index.php/2007/07/11/css-menu-orizzontale-compatibile-con-tutte-le-versioni-firefox-e-internet-explorer/