Tuto Dreamweaver - Montage HTML / CSS d'un site responsive Flat Design en One Page - Formation CC
Channel: Astuce Informatique
Date: 2014-08-13

Tutoriel vidéo Photoshop en Français. Apprendre à créer un template de site Internet Portfolio minimaliste de A à Z. Cette formation Photoshop est destinée aux débutants / intermédiaires voulant se perfectionner sur le logiciel.

Au programme de ce tuto :

Mes chaînes Youtube
http://www.youtube.com/user/AstuceInformatiquefr
https://www.youtube.com/user/LesEnquetesNT1
http://www.youtube.com/user/DocumentairesEnFr
http://www.youtube.com/user/MrAzOuZ1

Nous commencerons par créer le template de la page d'accueil
- Création du header qui sera constitué d'un moteur de recherche, d'icônes liées aux réseaux sociaux et d'un menu)
- Mise en place d'un slider en full width qui affichera vos dernières créations
- 2 blocs d'articles qui affichera les 2 dernières actualités du blog
- Création d'un slider pour afficher les logos de vos clients / partenaires...
- Création du footer (pied de page)

En suite nous déclinerons la page à propos
- Mise en place d'un slider d'images
- Mise en situation de plusieurs barres de compétences qui seront animées en html5 et css3 lors du prochain tuto
- Mise en place d'une zone pour afficher les photos de l'équipe
- Création d'un sidebar à droite pour afficher les derniers projets / articles par exemple

Déclinaison de la page portfolio
- Création d'un filtre par catégorie
- Mise en place des projets en 2 colonnes
- Mise en situation d'un rollover sur une image

Déclinaison de la page single folio
- Mise en place d'un slider pour afficher plusieurs images par projet
- Mise en situation des boutons de partage
- Informations complémentaires de votre client (logo, nom, date, description, site web)
- Mise en place des projets similaires pour un meilleur linkage de votre site

Déclinaison de la page blog
- Création d'un listing de vos actualités
- Simulation d'un liker interne au site
- Simulation d'une pagination pour favoriser l'indexation des pages de vos articles

Déclinaison de la page single blog
- On se basera sur le même template de page que single folio

Déclinaison de la page contact
- Création d'un simple formulaire de contact
- Simulation avec un googlemap

Ce tuto peut être suivi à partir de la version CS5 de Photoshop. Si vous bloquez à une étape, n'hésitez pas à consulter ci-dessus, l'onglet besoin d'aide. Si vous avez aimé ce tuto, nous serions ravis de vous lire dans l'onglet commentaires.