En av de stora mysterierna i webbdesign är hur man får en effekt skugga bakom huvudinnehållet området , vilket ofta är vitt eller ljust färgat och kallad wrapper . Skapa den rätta bilden i ett bildredigeringsprogram , t.ex. Photoshop , är halva slaget . Använda bilden som ett upprepande bakgrund i en HTML div-taggen är den andra halvan . Bilden sitter faktiskt inne sin egen div innanför ” wrapper ” div på sidan . Instruktioner
1
Skapa ett nytt dokument i Photoshop som är 840 pixlar bred och 1000 pixlar djup . Dubbelklicka på bakgrundslagret i paletten Lager för att göra det till en redigerbar skikt . Arbetsytan ska ha ett schackbräde bakgrund , visar öppenhet .
2
Skapa en rektangel på scenen med hjälp av ” Marquis Rektangel ” verktyg ( streckad rektangel ) i det vänstra verktygsfältet . Oroa dig inte om storleken du ritar . Högerklicka över rutan och välj ” Transform Selection . ” Klicka på den övre vänstra rutan i ” Reference Point Location ” indikatorn i verktygsfältet längst upp i arbetsytan . Det ser ut som en Tic Tac Toe styrelse sorterar . Detta orienterar ditt x , y koordinater till upp till vänster på arbetsytan . Inom de områden referens formuläret till höger om indikatorn , ställ dina x -koordinat till 20 pixlar och din bredd till 800 pixlar . Detta centrerar rektangeln i din arbetsyta och lämnar 20 pixlar på varje sida för skuggan . Dubbelklicka på rektangeln för att gå tillbaka till din markis rektangel . Högerklicka över den, välj ” Fyll ” och välj ”White ” från dina alternativ .
3
Klicka på ” Lägg till en Layer Style ” -knappen ( F ) längs botten paletten Lager och välj ” Ytterglöd . ” Dubbelklicka på ” Set Color of Glow ” fältet i fönstret som öppnas och ange 333333 . Ställ din ” Opacitet ” till 100 procent och ” Spread ” och ” Storlek ” till 5 . ” Buller ” och ” jitter ” bör sättas till 0 och ” Range ” till 50 , standardinställningarna för alla tre . Klicka på ” OK . ” Skuggan – typ effekt bör dyka upp runt rektangeln , även om det kommer att synas mindre uttalad än hur det kommer att se ut på din webbsida .
4
Ställ din ” Crop ” verktyget till 840 pixlar för bredden och 2 pixlar för djupet . Dra ditt ” Crop ” verktyget från den ena sidan av arbetsytan till andra , skära en kil 2 pixlar djupt över mitten av din rektangel . Dubbelklicka på ” Crop ” i verktygsfältet för att bekräfta den gröda ( eftersom du inte har någon plats att dubbelklicka på den tunna bilden ) . En liten mängd av glöden kommer att visa på endera sidan av din beskurna bilden innanför 20 pixlar av transparent område du kvar på varje sida . Spara filen som ” wrapper.png ” i PNG- format till samma mapp som din webbsida .
5
Öppna din HTML- dokument och skapa en wrapper div med id ” wrapper ” som är 840 pixlar bred och centrerad i sidan . Skapa en div med ID ” content ” som sitter på insidan av omslaget div med en bredd på 840 pixlar och lägg din wrapper.png till detta skikt som en upprepande bakgrundsbild på y-axeln , eller vertikalt . Lägg en div med id ” leftSideBar ” med innehåll för att ge djup till ditt innehåll div , sträcker den vita bakgrunden så att du kan se effekten av skuggan . Koder för HTML-sidan ser ut så här :
body {
marginal : 0 ;
padding : 0 ;
bakgrund : # FFCC99 ;
}
# wrapper {
width : 840px ;
ställning : relativa ;
marginal : 0 auto ;
}
# content {
width : 840px ;
bakgrund : URL ( wrapper.png ) repeat – y ;
position: absolute ;
}
# leftSideBar {
float: left ;
width : 90px ;
font -family : Verdana , Arial , Helvetica , sans – serif ;
font – size : 11px ;
line -height : 18px ;
color: # 000 ;
padding : 20px 10px 20px id = ” wrapper ” >
Text här text här text här text här text här text här text här text här text här text här text här text här text här text här text här text här text här text här text
6
Spara din sida , öppna den i en webbläsare och kontrollera att skugga visas bakom din wrapper område .