Voir la source de Formation - Création de Sites Web

== Ressources sur le Web ==
Tout ce qui concerne la création de site peut être trouvé sur Internet, encore faut il trouver des informations en français, bien écrites et abordables par tout public.

Selection de sites informatifs
* [http://www.allhtml.com/articles AllHTML]
* [http://www.laltruiste.com l'Altruiste]
* [http://www.developpez.com/ Developpez.com]

Sites de Ressources
* [[Collecter_des_Images_et_Photos | Images]] : une fournée de liens vers des banques d'images Libres de droits (vérifier quand même avant utilisation sur votre site)
* [[Collecter_de_l%27audio | Audio]] : des liens vers de l'audio en libre téléchargement/diffusion et parfois en libre modification.
* [[Collecter_des_Vid%C3%A9os | Videos]] : idem pour les vidéos
* [http://www.smartpixel.net/chromoweb/fr/index.htm Chromoweb] Choisir les couleurs de son site
* [http://www.degraeve.com/color-palette/ Color-palette] Choisir des couleurs en fonction d'une image
* [http://colorblender.com/ ColorBlender] Encore un outil pour trouver un agencement de couleurs

==== Les différents navigateurs Internet ====

Description des navigateurs principaux disponibles sur Windows / Linux /MacOS. Comment se passer d'Internet Explorer et redécouvrir le Web. Un navigateur en particulier : Firefox et ses extensions.<br />
* [http://www.mozilla-europe.org/fr/products/firefox/ Firefox] (Win, Lin, Mac)
* [http://www.opera.com/ Opera] (Win, Lin, Mac)
* [http://www.apple.com/fr/macosx/features/safari/ Safari] (Mac)
* [http://www.konqueror.org/ Konqueror] (Lin)
* [http://www.microsoft.com/windows/ie_intl/fr/default.mspx Internet Explorer] (Win) [Déconseillé]

Tour des extensions utiles à Firefox pour enrichir ses fonctions grâce au site référence en français [http://extensions.geckozone.org/Firefox/ Geckozone].



==== Aspect Graphique ====

===== Collecter des images libres de droit =====

Voir la section [[Collecter des Images et Photos]]

===== Découverte du langage CSS =====

Langage permettant de designer une page web en mettant une frontière entre contenu et présentation. Pourquoi utilisez ce langage, avantages et inconvenients.<br />
* [http://pompage.net/pompe/cssdezero-1/ le CSS pas à pas] plus de 15 épisodes servent à comprendre comment utiliser le CSS dans une page web.
* [http://css.alsacreations.com/Plan-du-site Tutoriaux CSS - AlsaCréations]
* [http://mammouthland.free.fr/cours/css/index.php CSS Débutant] Découvrir le CSS pour les débutants

===== Approfondir le CSS =====
Pratiquer, pratiquer, pratiquer, la seule solution viable. C'est encore plus interessant quand les cours sont expliqués dans le détail et organisés de façon à produire des éléments CSS/XHTML efficaces et néanmoins graphiquement très jolis.
* [http://css.alsacreations.com/Construction-de-menus-en-CSS/ Construire ses propres menus en CSS]
* [http://wiki.media-box.net/documentation/css Liste de toutes les propriétés CSS] expliquées et commentées.

===== Choix d'un Panel de Couleur =====

Comment choisir les couleurs du menu, de l'habillage, du texte, des liens ? Comment ne pas en faire trop.<br />
* [http://www.smartpixel.net/chromoweb/fr/index.htm Chromoweb] Choisir les couleurs de son site
* [http://www.degraeve.com/color-palette/ Color-palette] Choisir des couleurs en fonction d'une image
* [http://www.raquedan.com/random100.php?pastel=true 100 couleurs au hasard]
* [http://colorblender.com/ ColorBlender] Encore un outil pour trouver un agencement de couleurs
* [http://www.telecable.es/personales/alberto9/color/index.htm ColorSyntaxis] Très sympa comme outil

===== Taille et disposition des éléments =====

Différence entre taille fixe et taille liquide, placement des éléments d'information sur la page<br />
* [http://www.aidejavascript.com/article93.html Comprendre la position des éléments (blocs d'infos) dans une page]<br />

Galerie de Menus prêts à l'emploi : <br />
* [http://css.alsacreations.com/Galeries-de-menus-en-CSS AlsaCreations]
* [http://css.maxdesign.com.au/index.htm Maxdesign]

===== Définir l'aspect du texte =====

Qu'est ce qu'une Typo ? comment mettre en valeur le texte ? et les liens ?

==== Les Balises META ====

Comprendre leur utilité, choisir les mots clefs décrivant le site ou une page pour une bonne indexation dans les moteurs de recherche.
* [http://www.netalya.com/fr/ToolBoxMeta.asp Générateur de META Tags]

=== Développer et mettre en ligne un site Web ===

==== Quelques règles indispensables ====

Création de l'arborescence du site, dénomination des fichiers, Liens absolus et relatifs, différence entre l'ordinateur local et le serveur distant.<br />
Liste de bonnes pratiques de développement [http://www.opquast.com/bonnes-pratiques/liste/ Opquast]<br />

==== Comment se passer des cadres (frames) ====

Comment banir les cadres, quelles sont les solutions équivalentes, pourquoi faire autrement ?

==== Comment éviter le design avec des tableaux ====

Les tableaux servent à afficher des données tabulaires, pas à organiser l'affichage des éléments dans une page.<br />
* [http://www.cybercodeur.net/weblog/presentations/seybold/everything.html En quoi la mise en page avec des tableaux est-elle stupide ?]

==== Fonctions d'animations offertes par le CSS ====

Comment changer une image au survol de la souris, personnaliser les liens Hypertextes, afficher ou cacher des éléments dans la page.
* [http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique Effet de survol d'une image]

==== Comment heberger son site ====

Solutions gratuites actuelles, comment transférer ses fichiers vers l'adresse "www.monsite.com" grâce au FTP (File Transfer Protocol).
* [http://www.01net.com/windows/Internet/ftp/fiches/17966.html Filezilla] Logiciel libre permettant de se connecter à un serveur pour y déposer ses fichiers grâce au File Transfer Protocol (FTP)

=== Exemple commenté d'architecture de Site ===
Une [http://www.levillagenumerique.org/stock_ressources/site_tableau_menu_en_haut.exe première version d'architecture de site Web] réalisée avec un tableau structurant la place des informations dans la page. Cette méthode de positionnement des informations est [http://www.cybercodeur.net/weblog/presentations/seybold/everything.html déconseillée], sachant qu'un tableau ne sert pas à présenter de l'information mais à proposer des VRAIS tableaux à 1 ou 2 entrées.

:'''Note''' : Il faut double-cliquer sur le fichier ".exe" que vous avez téléchargé, ce qui créera à côté de lui un repertoire contenant l'architecture de site. Dans l'architecture se trouvent plusieurs fichiers et les répertoires "img" et "style". Vous pouvez ouvrir tous les fichiers ".html" avec un éditeur de texte de votre choix (Bloc-Note sous Windows).

[[Catégorie:Vrac]]