Výukový program pre Wrapper Div vo Photoshope

Jedna z najväčších záhad v web design je to , ako sa dostať efekt vrženého tieni za hlavné oblasti obsahu , ktoré často je biely alebo svetlo sfarbené a len obal . Vytvorenie správnej obrázok v editore obrázkov , ako je Photoshop , je napoly vyhraté . Použitie obrázka ako opakujúce sa pozadie v HTML tagu div je druhá polovica . Obrázok v skutočnosti sedí vnútri jeho vlastnej div vnútri " wrapper " div na stránke . Pokyny dovolená 1

Vytvoriť nový dokument vo Photoshope , ktorý je 840 pixelov široký a 1000 pixelov hlboké . Dvakrát kliknite na vrstvu pozadí v palete Vrstvy , aby sa to upravovať vrstvu . Pracovná plocha by mala mať šachovnicový pozadí , čo znamená transparentnosť .
2

Vytvorte obdĺžnik na javisku pomocou funkcie " Marquis obdĺžnik " ( bodkovaný obdĺžnik ) v ľavom paneli . Nestarajte sa o veľkosť , ktorú kreslíte . Kliknite pravým tlačidlom myši na pole a vyberte možnosť " Transformovať výber . " Kliknite na hornej ľavej pole v ukazovateli " referenčný bod umiestnenie " v nástrojovej lište pozdĺž hornej časti pracovného priestoru . Vyzerá to ako Tic Tac Toe rady druhov . To sa orientuje svoje súradnice X , Y na ľavom hornom rohu pracovnej plochy . V poli Odkaz formulára na pravej strane indikátora nastavte vaše súradnice x 20 pixelov a vaše šírke 800 pixelov . Tieto centrá obdĺžnik v priestore a necháva 20 pixelov na každej strane tieňa . Dvakrát kliknite na obdĺžnik sa vrátiť do svojho markíz obdĺžnika . Kliknite pravým tlačidlom myši na neho , zvoľte " Fill " a zvoľte " biela " z vašich možností .
3

Kliknite na tlačidlo " Pridať štýl vrstvy " ( F ) , pozdĺž spodnej časti v palete Vrstvy a vyberte " vonkajšie žiara . " Dvakrát kliknite na pole " Set Farba Glow " v okne , ktoré sa otvorí , a zadajte 333333 . Nastavte " Opacity " na 100 percent a " Šírenie " a " veľkosť " až 5. " Noise " a " chvenie " by mala byť nastavená na hodnotu 0 a " rozsah " až 50 , predvolené hodnoty pre všetky tri . Kliknite na tlačidlo " OK " . Tieň - typ efektu by sa malo ukázať okolo obdĺžnika , aj keď to bude vyzerať menej výrazný , než ako to bude vyzerať na svoje webové stránky .
4

váš " Crop " nástroj Set na 840 pixelov na šírku a 2 pixely na hĺbke . Pretiahnite " Orezať " nástroj z jednej strany pracovnej plochy na druhú , rezanie klin 2 pixelov hlboko cez stred vášho obdĺžnika . Double - kliknite na " Orezať " nástroj v paneli nástrojov potvrdiť plodiny ( pretože nemajú kam Dvakrát kliknite na tenké snímke ) . Malé množstvo žiara sa objaví na oboch stranách vašej orezanej snímky v 20 pixelov priehľadnej oblasti , ktorú nechal na každej strane . Uložte súbor ako " wrapper.png " vo formáte PNG do rovnakej zložky ako webové stránky .
5

Otvorte dokument HTML a vytvoriť wrapper div s ID " obalu " , ktorý je 840 pixelov a v strede stránky . Vytvorte div s ID " obsahu " , ktorý je umiestnený vo vnútri obálky div o šírke 840 pixelov a pridať wrapper.png do tejto vrstvy ako opakujúce sa obraz na osi y , alebo vertikálne pozadia . Pridať div s ID " leftSideBar " s nejakým obsahom, aby ste hĺbku svojho obsahu div , rozťahovanie biele pozadie , takže môžete vidieť efekt tieňa . Kódovanie pre stránky HTML vyzerá takto :