Ce tuto dédié à l'intégration d'une maquette de blog web 2.0 est la suite du tuto : "Créer une Maquette de Blog Web 2.0". Nous partirons donc du PSD qui a été obtenu dans ce premier tuto, nous le découperons sous photoshop, puis nous l'intégrerons sous Dreamweaver en utilisant les langages HTML, CSS et jQuery.
Pendant près de 5h de formation en vidéo, vous allez abordez les points suivants :
1) Le découpage d'une maquette graphique réalisée sous Photoshop
- Apprendre à anticiper le codage
- Réaliser des sprites
- Savoir découper avec une hiérarchie précise
- Gestion de la fusion de calques et dossiers
- Savoir enregistrer une image avec des parties transparentes
2) Intégration HTML / CSS / jQuery
- Définir un ordre hiérarchique à notre travail
- Définir nos balises HTML dîtes "primaires" à notre design
- Coder des sprites en CSS
- Savoir intégrer du code Javascript
- Relier des pages css et jQuery à un index HTML
- Réaliser une info bulle en 3 temps (html / css / jQuery)
- Savoir coder une barre et un bouton de recherche
- Utilisation du framework 960 GS
Ce tuto est destiné à un public intermédiaire, ayant déjà quelques bases sur Photoshop et Dreamweaver. Les fichiers sources de ce tuto sont fournies, vous pourrez donc aisément suivre et reproduire les manipulations montrées par le formateur. Si vous souhaitez voir le résultat final que vous obtiendrez, visitez cette version du blog en ligne.
Si vous avez des questions, n'hésitez pas à utiliser l'onglet prévu à cet effet. Bonne formation !