Dreamweaver gratuit

Construire un site d'annuaire avec Dreamweaver

28 avril 2009 | Posté par caroder à 22:38

Voici un tutorial d'importance puisqu'il ne compte pas moins de 17 parties pour réaliser un site d'annuaire de sites (ou de liens) dont j'espère que vous l'utiliserez pour la bonne cause (et non pas pour en détourner la finalité - merci le Pagerank). Certaines pages de ce tutoriel sont à elles seules de véritables tuto en soi ! Un travail énorme... Jugez plutôt :

Préparations

• Définition du site
• Création de la base de données (ne passe pas par PHPMyAdmin mais directement bia la console MySQL !)
• Connection à la base
• Création d'une template dans Dreamweaver

Back Office

• Template du Back Office
• Page de Login
• Page de validation de liens
• Moteur de recherche
• Page de modification de lien
• Page d'ajout de lien
• Page d'ajout de categorie 
• Page de modification de categorie 
• Sécurisation du back office

Front Office

• Moteur de recherche et affichage des catégories
• Page de résultat
• Page de liens récents
• Page de soumission

Ce tutorial (en anglais) est disponible ici : http://www.sebastiansulinski.co.uk/web_design_tutorials/tutorial/9/link_exchange_system_with_dreamweaver_cs3

16 Templates Dreamweaver gratuites haute qualité

24 avril 2009 | Posté par caroder à 11:32

Le site Just Dreamweaver offre plusieurs templates gratuites de très belle facture. La licence "free" est offerte à la condition de maintenir le lien de pied de page vers le site dans le footer (licence complète à 20 $, sans mention dans le pied de page). Pourquoi bouder son plaisir ?

Ces templates comprennent les fichiers Fireworks et toutes les illustrations vectorielles nécessaires à l'adaptation à vos propres besoins (y compris parfois les fichiers sources PSD pour Photoshop). A noter toutefois : parfois ces templates utilisent des tableaux pour certaines parties de la mise en page (donc pas complètement conformes aux standard du W3C) et utilise la technique des régions éditables (que personnellement j'abhore car je préfère de beaucoup la méthode des includes - philosophie inverse).

Voici donc les plus beaux exemples (à mon goût) de ce qui est offert avec un lien vers la preview de la template :

Pour visualiser l'ensemble des templates et les télécharger (inscription préalable sur le site obligatoire) :
http://www.justdreamweaver.com/dreamweaver-templates.html

Benchmarker son site internet : des outils de référence gratuits

23 avril 2009 | Posté par caroder à 19:13

Le Ministère du Budget, des Comptes publics et de la Fonction publique a mis, fin 2008, à la disposition de tous les webmasters en charge de sites web publics ou de collectivités territoriales plusieurs documents extrêmement utiles :

• Une charte ergonomique rassemblant les grandes règles qui doivent présider à la conception d'un site :
  • Architecture de l'information
  • Système de navigation
  • Lisibilité
  • Considérations techniques (navigateurs, écrans, langages de programmation)
  • Accessibilité après authentification
  • Liens hypertextes
  • Fichiers en téléchargement
  • Formulaires
  • Boutons
  • Tableaux
  • Images
  • Multimédia
  • Règles sur les contenus (notamment pages d'accueil)
  • Flux RSS, widgets, etc.
• Un référentiel d'accessibilité : ce document dénombre  65 "points de contrôle" permettant de s'assurer d'une bonne accessibilité aux personnes handicapées
• Last but not least ! Une grille d'auto-évaluation (capture écran de résultats ci-dessus) parfaitement fonctionnelle qui vous permettra de situer votre site et donc d'orienter vos créations, évolutions ou refontes.

Ces recommandations et référentiels nous sont à tous extêmement profitables, quel que soit le type de sites que nous animons, puisqu'ils contiennent la somme de (quasiment) toutes les best practices en matière de conception de site internet. Avis aux amateurs !

Je ne peux que vous conseiller une lecture extrêmement attentive de ces documents mis gracieusement à notre disposition et surtout de télécharger la grille d'auto-évaluation (format Excel) :

• http://www.references.modernisation.gouv.fr/sites/default/files/Charte_ergonomique_v2.0_2.pdf
• http://www.references.modernisation.gouv.fr/sites/default/files/RGAA_version_1.0_0.pdf (accessibilité)
• http://www.references.modernisation.gouv.fr/sites/default/files/Guide-auto-évaluation_v2_0(3).xls

Dreamweaver CS4 et Photoshop : gestion des images - Tutorial de Jpierre

21 avril 2009 | Posté par caroder à 08:53

JPierre propose sur le site ASP-PHP.net un tutorial sur les fonctionnalités de Dreamweaver CS4 permettant de mieux gérer les images d'un site. En effet, il vous est offert la possibilité de créer une synchronisation entre le travail de l'image dans Photoshop CS4 et l'import de l'image dans une page web avec Dreamweaver.

J'en profite pour effectuer un petit rappel sur les formats d'images web et leur utilisation :

• Le format JPG : compression d'image supportant jusqu'à des millions de couleurs différentes (plus la compression choisie est élevée moins vous préservez la variété des couleurs et la netteté de la photo d'origine). Ce format d'image est particulièrement indiqué pour les photos et plus généralement tout image comportant un dégradé.
• Le format GIF : la palette gif comporte au maximum 256 couleurs ; c'est pourquoi ce format de compression sans perte est plus adapté aux images comportant des aplats de couleurs telles que des logos ou des illustrations type "ligne claire". Ce format d'image supporte très mal la réduction, homothétique ou non. A éviter donc quand on souhaite afficher des vignettes sans création de fichier spécifique.
• Le format PNG : il supporte des images en 24 bits et 32 bits (soit16 millions de couleurs + 256 niveaux de transparence). C'est donc la panacé ? Pas si sûr... Car pour des images comportant de nombreuses couleurs le poids des fichiers est nettement plus important que les 2 précédents formats !

Pour consulter le tutorial de Jpierre : http://www.asp-php.net/tutorial/asp-php/dreamweaver-cs4-et-photoshop-cs4.php

Le nouveau design de Dreamweaver Gratuit

19 avril 2009 | Posté par caroder à 15:53

Non, non, vous ne rêvez pas... Vous le découvrez en lisant ces lignes, le site Dreamweaver Gratuit fait peau neuve.

Comme vous pouvez le constater, j'ai voulu la jouer un peu "décalé" par rapport aux sites "geek" habituel : je donne dans le résolument girly, raisonnablement, certes, puisque je reste dans les tons classiques du vert Dreamweaver (au lieu d'un rose plus attendu dans ce style de design), mais girly tout de même.

Que mes (très et majoritairement) nombreux lecteurs masculins ne m'en tiennent pas rigueur, qu'ils ne se sentent pas déboussolés par ce style un peu particulier pour un site de tutorials. J'ose même espérer qu'ils apprécieront... Oui, je suis une femme et pourquoi ne pas le revendiquer par le design dans un domaine aussi peu sensible à la feminité !

En tout état de cause, hommes ou femmes, vos avis m'intéressent. N'hésitez pas à vous exprimer en commentant ce billet.

Avis aux utilisateurs de la plate-forme Canalblog : je tiens à leur disposition ma CSS et mon code commenté pour ceux qui en feront la demande (attention : ce blog est conçu en "mode avancé") afin de comprendre comment je suis parvenue à ce résultat.

Coins arrondis en CSS - tutorial vidéo

06 avril 2009 | Posté par caroder à 21:15

Voici une (petite) vidéo pour apprendre à faire des coins arrondis en CSS avec Dreamweaver. Il s'agit d'une méthode assez basique mais très efficace :)

Web_design_round_corners
envoyé par knowledgeocity