Een website template is een basis webpagina layout --- of container --- u opnieuw kunt gebruiken om meerdere pagina's te maken . De sjabloon bevat de basisstructuur voor uw website , zodat u een consistent thema en lay-out door de hele site te onderhouden zonder dat u elke pagina opnieuw . Hoewel Photoshop is technisch niet een webpagina ontwerp -programma, kunt u deze gebruiken om web templates te creëren door de PSD afbeelding " snijden " in de verschillende secties en vervolgens exporteren van de PSD naar een HTML- webpagina . U kunt dan openen de HTML- template -bestand in Dreamweaver of een ander programma voor webontwerp en gebruik deze om de pagina's voor uw website te creëren . Wat je nodig hebt
Adobe Photoshop CS3 of hoger
Toon Meer Aanwijzingen
1 Start een nieuw document in Photoshop . Geef het de dimensies die u wilt gebruiken voor uw webpagina's , zoals deze : Klik op " File " op de menubalk en kies "Nieuw " om het dialoogvenster Nieuw te openen . Typ de breedte ( in pixels ) in de " breedte " Veld en de hoogte (in pixels ) in het veld "Hoogte " . Klik op "OK . " Kopen van 2 Maak de banner voor uw webpagina . De banner, natuurlijk, is de grafische of afbeelding die over de bovenkant van de pagina weergegeven . Het bestaat meestal uit een bedrijfslogo en een aantal andere afbeeldingen met betrekking tot een product of dienst . U kunt invoegen een bestaande afbeelding of gebruik van Photoshop verf en de tekst tools om de banner te creëren .
3 Maak de knoppen voor uw webpagina . Deze zullen koppelingen , of " hot spots ", dat de gebruikers van de website naar verschillende pagina's binnen de site. Ofwel steek bestaande knop foto's en plaats ze waar je ze wilt hebben in de sjabloon of het gebruik van Photoshop verf en de tekst tools om de knoppen te maken .
4 Selecteer de " Slice Tool " ( vijfde knop van boven in de Toolbox ) . Als u nog niet eerder gebruik gemaakt van de Slice Tool , wordt deze knop waarschijnlijk ingesteld op een ander instrument . Klik en houd de knop , en kies vervolgens " Slice Tool " van de fly - out .
5 Sleep de Slice Tool om de eerste toets of gebied in de template waar u een koppeling wilt maken . Dit creëert een doos " Slice " rond het object . Photoshop plaatst dit vakje in een tabelcel die een aparte HTML- tafel zal worden wanneer u dit document te exporteren naar HTML .
6 Rechtsklik op de nieuwe slice en kies "Edit Slice Options " van de fly - out menu . Dit opent het dialoogvenster Deelopties .
Type 7 de URL die u wilt deze knop te koppelen aan in het veld "URL" . U kunt ook andere informatie voor de toets , zoals het doelwit browser pagina , en alternatieve labels in te voeren . Als u wilt dat de grootte en positie van het segment te bewerken , dus met de opties in de sectie "Afmetingen" van het dialoogvenster . Klik op "OK . "
8 Herhaal de vorige stappen voor het creëren plakken en bewerken slice opties voor elke knop in de sjabloon .
Klik 9 " File " op het menu bar en kies " Opslaan voor web en apparaten . " Dit opent de Opslaan voor web en apparaten dialoogvenster . Vanaf hier kunt u verschillende aspecten van uw template te wijzigen , zoals de achtergrondkleur , beeldcompressie en de kwaliteit, grootte document en ga zo maar door . Deze opties zijn goed gelabeld en spreken voor zich . ( U kunt de HTML- code voor deze sjabloon bekijken door te klikken op de knop 'Voorbeeld' . ) Op Twitter 10 Klik op de knop "Opslaan" . Noem het HTML- bestand en sla . Je hebt met succes je Web template . U kunt nu openen in een webpagina-editor en voeg je eigen content.
|
