A - Page Accueil interface Bouton

Une image C4D est utilisé par les adeptes de photoshop, c'est en réalité ce que PSP appellerait un tub.

Prendre une image C4D , la mienne, ou une image de votre choix de la taille qui vous convient mais assez large et haute pour que le fond ne se répète pas trop, pour faire l'arrière-plan;Si vous voulez plus de choix en C4D, dites le moi, je vous enverrai personnellement un dossier de 46MO.

1 - Ouvrir une nouvelle image de la même dimension que le C4D ou d'une taille assez proche.( Mon C4D fait 1000px X 700px. J'ai pris une image de la même taille)

 

La copier et la coller comme un nouveau calque que vous appelez C4D

2 - Avec l'outil pipette,Choisir deux couleurs du c4d

et faire un dégradé avec un angle de 315°,sans répétition, le répandre dans le calque, mettre le calque sous le C4D dans la fenètre des calques.

3 - Se mettre dans la palette des calques sur le C4D et faire en vectoriel,avec une couleur en remplissage seulement,à votre choix, le titre dans le tiers haut de l'image. J'ai choisi cette couleur :

Convertir le calque du titre en raster. Lui mettre une petite ombre portée pas trop floue.

Voici la palette des calques à ce niveau du tuto :

4 - Ensuite, mettre sur le tiers droit et à peu près au milieu de l"image, le texte qui fera le bouton d'entrée dans le site.

Moi, j'ai écrit "Entrez" avec la police Juggle Ruff

Utilisez une couleur de votre choix, celle du titre par exemple mais faites surtout comme vous en avez envie tout en sachant que le bouton aura un effet rollover . Faire une ombre portée comme pour le titre.
Voici la mienne :

5 - Dupliquer le texte du bouton.

Modifier le gamma de ce calque dupliqué (maj +g) selon le bouton initial, pour l'éclaircir ou le foncer à votre goût.

6 - un texte sera votre bouton over,appelez le "btnover"

l'autre nommez le "btn" pour l'état normal. A vous de choisir.

Faire une sélection rectangulaire autour du texte.

Notez sa dimension et également sa position, vous en aurez besoin dans dreamweaver:

Vous trouverz la position top et left en cliquant sur le bouton sélection personnalisée :

position de la sélection

A partir de ce moment, ne changez plus la sélection.

Vous copiez la sélection du calque btn, edition/copier ,et vous collez comme une nouvelle image.

Cette image est enregistrée en png sous le nom btn.png dans le dossier de votre site.

Revenir sur votre travail, Ne pas désélectionner

fermez l'oeil du calque btn et ouvrir le calque btnover, édition/copier la sélection et vous la collez comme une nouvelle image.

Cette image est enregistrée en png sous le nom btnover.png dans le dossier de votre site.

 7 - Nous allons éviter le traditionnelle découpage car les tableaux ne sont plus de mise dans les pages web pour faire ces effets. Ils doivent être réservés à afficher des données tabulaires pas des images. Il faut renoncer au montage de telle page comme nous l'avons fait au premier niveau.

8 - Déselectionnez le bouton.

enregistrez l'image complète de 1000 X 700 qui va être l'arrière-plan du wrapper de la page d'accueil. Il n'est pas utile d'enregistrer le texte du mot entrez, mais en réalité, cela n'a pas d'importance.

l'enregistrement de cette image se fait en jpg, compression aux environs entre 12 et 20

9 - reprenez dans PSP l'image de 1000 x 700, et fermez les yeux de tous les calques sauf le dégradé et le c4d. Fusionnez les calques visibles et faites un effet de mosaïque sans jointures,
enregistrez dans le dossier du site sous le nom de bg.jpg. Cette tuile pourra servir soit comme background pour cette page d'accueil ou dans le background pour l'interface.

10 - Maintenant, il n'y a plus qu'à monter dans Dreamweaver cette page d'accueil avec un bouton rollover sur l'image entrez.Ouvrir le logiciel.

11 - ouvrir une nouvelle page xhtml, l'enregistrer dans un dossier avec vos images dans votre site comme cela l'adresse des images sera courte.L'appeler "accueil.html"

 

12 - Dans la fenètre des Styles CSS , cliquez sur le bouton "nouvelle règle css" :

13 - y mettre les styles pour le body :

code du body

14 - puis mettre le style pour pour l'id wrapper :

une largeur de 1000px;
une hauteur de 700px;
margin-top et bottom à 20px;
margin right et left à auto; ce qui va center le wrapper sur l'écran.
position: relative;
Vous savez bien faire cela maintenant.

15 -inserez une div dont l'id sera wrapper dans le body

 

16 - Il reste à faire le bouton rollover pour entrer dans le site :

17-Dans la div wrapper, insérez une div en position absolue avec la valeur du top et left pris dans PSP/ pour moi, c'est top : 455px et left: 526px. La largeur et hauteur de l'image png seront celles du calque pour moi c'est 270px /67px. le z-index sera 2 ( 1 est pour le fond du wrapper). cette div va contenir le bouton survolé.

17b - Contrôlez que la div absolue est bien dans le wrapper dans l'onglet code.

18 - Dans l'onglet Création, Cliquez bien dans cette div absolue et par le menu Insertion :insérez une image survolée.

 

19 - puis remplir la fenètre qui s'affiche :

J'ai donné le nom entrez à mon image survolée, c'est son identifiant, id.

Si vous avez nommé les images du bouton, btn.png et btnover.png, vous les mettrez respectivement dans les cases pour l'image originale ( coller l'adresse que vous avez coupée précédemment) et l'image survolée ( mes noms sont différents, vous voyez, j'ai fait ce tuto en plusieurs fois, alors, il y a des imperfections...)

"si cliquez", vous mettez la page cible que vous voulez atteindre. N'oubliez pas de valider avec OK

16 - Enregistrez dans dreamweaver la page, et testez-la dans un navigateur pour vérifier le comportement du bouton rollover.

La page d'accueil est terminée. elle doit avoir cette allure ICI

Le code de mon exemple ne correspond pas avec mon tutoriel. Les méthodes sur le web évoluant, j'ai repris le tutoriel par l'exemple. A vous de jouer....

La suite, l'interface dans PSP.