Tutorial for Wrapper Div i Photoshop
En av de store mysterier i webdesign er hvordan man skal få en skygge effekt bak hovedinnholdet området, som ofte er hvit eller lys farget og referert til som wrapper. Opprette riktig bilde i et bilderedigeringsprogram, for eksempel Photoshop, er halve kampen. Bruke bildet som et gjentakende bakgrunn i en HTML div tag er den andre halvparten. Bildet faktisk sitter inne i sin egen div inne i "wrapper" div på siden.
Bruksanvisning
1 Opprett et nytt dokument i Photoshop som er 840 piksler bred og 1000 piksler dyp. Dobbeltklikk på bakgrunnslaget i lagpaletten for å gjøre det en redigerbar lag. Arbeidsområdet bør ha et rute bakgrunn, noe som indikerer åpenhet.
2 Lag et rektangel på scenen ved hjelp av "Marquis rektangel" -verktøyet (stiplet rektangel) i venstre verktøylinjen. Ikke bekymre deg om den størrelsen du tegne. Høyreklikk over boksen og velg "Transform Selection". Klikk øverst til venstre boksen i "Reference Point Location" indikator på verktøylinjen øverst i arbeidsområdet. Det ser ut som en Tic Tac Toe styret slags. Dette orienterer dine x, y-koordinatene til øverste venstre hjørne av arbeidsområdet. I referanseskjemafeltene til høyre for indikatoren, sett x koordinat til 20 piksler og din bredde 800 piksler. Dette sentrerer rektangelet i arbeidsområdet og etterlater 20 piksler på hver side for skyggen. Dobbeltklikk på rektangelet for å gå tilbake til markien rektangel. Høyreklikk over den, velg "Fyll" og velg "White" fra alternativene.
3 Klikk på "Legg til en Layer Style" knappen (F) langs bunnen av lagpaletten og velg "Ytre Glow". Dobbeltklikk på "Set Color of Glow" -feltet i vinduet som åpnes og skriv 333333. Sett din "Opacity" til 100 prosent og "Spread" og "Size" til 5. "Noise" og "Jitter" bør settes til 0 og "Range" til 50, standardverdiene for alle tre. Klikk på "OK". Skyggen-type effekt bør dukke opp rundt rektangelet, men det vil dukke opp mindre uttalt enn hvordan det vil se ut på websiden din.
4 Sett din "Crop" -verktøyet til 840 piksler for bredden og 2 piksler for dybden. Dra "Crop" -verktøyet fra en side av arbeidsområdet til den andre, kutte en kile 2 piksler dypt over midten av rektangelet. Dobbeltklikk på "Crop" -verktøyet på verktøylinjen for å bekrefte avlingen (siden du har ikke noe sted å dobbeltklikke på den tynne bildet). En liten mengde av gløden vises på hver side av beskårede bildet inni de 20 pikslene i gjennomsiktige området du igjen på hver side. Lagre filen som "wrapper.png" i PNG-format til samme mappe som websiden.
5 Åpne HTML-dokument og lage en wrapper div med ID "wrapper" som er 840 piksler bred og sentrert på siden. Lag en div med ID "innhold" som sitter inne i wrapper div med en bredde på 840 piksler og legge til wrapper.png til dette laget som et gjentakende bakgrunnsbilde på y-aksen, eller vertikalt. Legg en div med ID "leftSideBar" med noe innhold for å gi dybde til innhold div, strekker den hvite bakgrunnen, slik at du kan se effekten av skyggen. Kodingen for HTML-siden ser slik ut:
<Html>
<Head>
<Style type = "text / css">
kropp {
margin: 0;
padding: 0;
bakgrunn: # FFCC99;
}
wrapper {
width: 840px;
position: relative;
margin: 0 auto;
}
innhold {
width: 840px;
bakgrunn: URL (wrapper.png) gjenta-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 40px;
margin: 0;
}
</ Style>
</ Head>
<Body>
<Div id = "wrapper">
<Div id = "innhold">
<Div id = "leftSideBar">
<P> Tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her tekst her </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
6 Lagre siden din, åpne den i en nettleser og sjekk at skyggen vises bak wrapper område.