Els dissenyadors web professionals desenvolupen plantilles de llocs web, generalment en potents editors gràfics com Adobe Photoshop. El resultat del treball és un fitxer amb una imatge, que en aquest formulari es proporciona al client. Per utilitzar el disseny ja fet, és a dir, per dissenyar una pàgina web, heu de tallar la plantilla.
Necessari
editor de gràfics ràster Adobe Photoshop
Instruccions
Pas 1
Obriu el fitxer de plantilla a l’editor gràfic Adobe Photoshop. Seleccioneu Fitxer i Obre al menú o premeu la combinació de tecles Ctrl + O. Al quadre de diàleg que apareix després, aneu al directori amb el fitxer, seleccioneu-lo a la llista i feu clic al botó "Obre".
Pas 2
Trieu una escala convenient per visualitzar la imatge de la plantilla. Utilitzeu l'eina Zoom o els elements del menú contextual. Seleccioneu una escala que us permeti situar el cursor amb precisió de píxels. Això és necessari per establir amb precisió les línies de referència.
Pas 3
Formeu un conjunt de línies de referència sobre la imatge de la plantilla. Activeu la visualització de regles a les finestres del document si encara no està activada. Per fer-ho, premeu Ctrl + R o seleccioneu Visualitza i regles al menú.
Pas 4
Moveu el cursor del ratolí per sobre del regle superior per afegir una línia de referència horitzontal. Mantén premuda la tecla esquerra. Mou el cursor del ratolí cap avall fins a l'àrea de la imatge. De la mateixa manera, mitjançant la regla dreta, podeu afegir línies horitzontals.
Pas 5
Afegiu el nombre necessari de línies de referència i col·loqueu-les al llarg dels límits de la divisió de les regions de la plantilla. Les línies haurien de recórrer tots els llocs on vulgueu tallar la plantilla. Han de restringir totes les imatges i àrees lògiques (logotip, capçalera del lloc, menús horitzontals i verticals, etc.) que es presentaran en una pàgina web.
Pas 6
Activeu l'eina Slice. El seu botó es troba a la barra d'eines vertical.
Pas 7
Creeu el nombre requerit d’àrees de tall mitjançant l’eina Slice. Trieu una escala convenient per mostrar la plantilla. Utilitzeu el ratolí per establir els límits de les àrees. Les directrius afegides al tercer pas proporcionaran un posicionament precís dels límits dels objectes que creeu. Si cal, ajusteu les àrees existents amb l'eina de selecció de la porció.
Pas 8
Canvieu les propietats de les regions de tall segons calgui. Activeu l'eina de selecció de la porció. Feu clic amb el botó dret a la zona desitjada. Al menú contextual, seleccioneu l'element Edita les opcions de la secció. Al quadre de diàleg Opcions de la secció que apareix, seleccioneu el tipus d'àrea (imatge, àrea buida, taula), el mode d'emplenament de fons, especifiqueu, si cal, el nom, l'URL de destinació, el contingut de l'atribut alt="Imatge" i altres valors. Feu clic a D'acord.
Pas 9
Tallar la plantilla. Seleccioneu Fitxer i Desa per a dispositius web i dispositius al menú o premeu Maj + Ctrl + Alt + S. Al diàleg Desa per a dispositius web i dispositius especifiqueu el format i els paràmetres de compressió d’imatges en què es tallarà la plantilla. Feu clic al botó Desa. Es mostrarà el quadre de diàleg Desa l'optimitzat com.
Pas 10
Seleccioneu HTML i imatges (*.html) a la llista desplegable Tipus de fitxer i, al camp Nom del fitxer, introduïu el nom del fitxer on es col·locarà el marcatge HTML de la plantilla. A la llista Slices, seleccioneu All Slices. Especifiqueu el directori per a la sortida i feu clic al botó "Desa".
Pas 11
Es col·locarà un fitxer HTML al directori de destinació, que és, de fet, una plantilla de pàgina web ja feta. El subdirectori d'imatges contindrà el conjunt d'imatges en què s'ha tallat la plantilla original.
