| Accueil | Tutoriels | Forum | Chat | Liens | FAQ | Contact |
Affiché 25866 fois - difficulté : 
Voilà un tutorial vous permettant de découper un webdesign, afin de pouvoir y écrire votre texte. Seul l'aspect de la découpe sera abordé dans ce tutorial, si vous désirez de plus amples informations, apprenez l'html sur les sites suivants : http://www.commentcamarche.net http://www.allhtml.com
Source : http://www.teknopole.com
Tutorial :
| Tout d'abord, avant de pouvoir découper un design, il faut en avoir un sous la main ! J'ai pris un design très simple afin de ne pas surcharger le tutorial. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Créez des repères afin de délimiter les gros blocs de votre webdesign, menu, corps de la page etc ... Pour cela, faites affichage > nouveau repère, puis créez un repère horizontal ou vertical selon vos besoin, et déplacez le à l'aide de l'outil déplacement. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voici mes repères pour ce webdesign, j'ai délimité une partie pour mon menu, une pour mes pages, une pour le bas de la page, et les bords. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Passez ensuite sous image ready, en cliquant sur le lien tout en bas de votre boite à outil. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Sous image ready, faites tranches > créer des tranches à partir des repères | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Ensuite, avec l'outil tranche (K), créez de petites tranches pour les liens de votre menu. | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| J'ai également séparé le texte du bas de mon webdesign. Voilà à quoi ressemble ma zone de travail | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Faites ensuite fichier > enregistrer une copie optimisée sous Enregistrer en fichier html et images gif | - Illustration - |
| ---------------------------------------------------------------------------------------- | |
| Voilà ce que vous obtenez en fin de compte http://www.teknopole.com/tuto/images/html/index.html Après quelques modifications, j'obtiens ceci http://www.teknopole.com/tuto/images/html/index_modifie.html simplement en modifiant mon fichier html. Pour cela, je vous laisse voir avec les sites appropriés. | - Illustration - |
38 commentaires postés sur ce tutorial
----------------------------------------------------------------------------------------
myrdwin le 28/10/2006
Parce que quand je veux ecrire dans le "corps" du site (la partie 13 sur votre capture) sur dreamweaver il considere cette partie comme étant une image, et je ne peux rien faire dessus.
Merci par avance !!
----------------------------------------------------------------------------------------
stef le 30/10/2006
salut, pour répondre à ta question. je suppose que dans ta page tu dos avoir un truc du genre table td... bg=image13.jpg... et bien il faut remplacer par bg-color=#XXXXXX avec XXXXXX le code couleur de l'image 13, et comme ça tu as une cellule de tableau
----------------------------------------------------------------------------------------
Tibo le 23/11/2006
Pour les parties qui contiendront le texte, on peut specifier dans ImageReady, ds la palette "Tranches", en choisissant ds le menu déroulant "Pas d'image". ;)
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
Poster un commentaire :