|
АБРАКАДАБРА (Тоже самое но в читаемом виде)
Kak izvestno, HTML - eto azik razmetki stranic. Vozmojnosti klassi4eskogo HTML (naprimer, versii 3.2) po etoy samoy razmetke sil'no ograni4eni. Naprimer, on ne pozvolaet raspolagat' elementi stranici (tekst, kartinki, tablici i t.p.) v sloax.
Nemnogo teorii dla tex, kto nikogda ne stalkivalsa s terminom "sloy". Sloy (angl. layer) - eto pramougol'niy blok, kotoriy mojet soderjat' razli4nie ob&ekti - tekst, grafiku, tablici. Dopuskaetsa primenenie neskol'kix sloev v predelax odnogo dokumenta, kotorie mogut vzaimno perekrivat'sa, s pomo6'u 4ego mojno dobivat'sa razli4nix interesnix effektov. Krome togo, soderjimoe sloa v luboy moment mojno otredaktirovat' ili voob6e udalit', ne trogaa elementi drugix sloev. Eto gorazdo udobnee, 4em zanovo sozdavat' kartinku (4to prixodilos' bi delat' pri nevozmojnosti ispol'zovania sloev). Sloi davno uje stali privi4noy texnologiey dla pol'zovateley professional'nix grafi4eskix i izdatel'skix paketov. Esli bi Adobe Photoshop ne rabotal bi so sloami, on stoal bi na odnoy stupen'ke so starim urodlivim karlikom Paintbrush'em iz sostava Windows.
HTML je dolgoe vrema ne podderjival sloi. Elementi stranici raspolagalis' posledovatel'no, v tom samom poradke, v kotorom v tekste stranici bili zapisani sootvetstvuu6ie HTML-tegi. Tak bilo do 1997 goda.
V 1997 godu razrabot4iki Netscape Navigator 4.0 vveli v etom brouzere noviy teg LAYER - takim obrazom, sloi v HTML stali real'nost'u. Teper' stalo vozmojnim, naprimer, raspolojenie grafiki poverx tablici ili dinami4eskoe skritie/otobrajenie srazu neskol'kix elementov s pomo6'u JavaScript.
Vpro4em, rasslablat'sa dizayneri ne spe6ili - Microsoft Internet Explorer ne podderjival teg LAYER. Tem ne menee, sloi s pomo6'u nebol'6ogo finta u6ami mojno realizovat' i tam. "Fint u6ami" zaklu4aetsa v kombinacii tega DIV (opredelaet razdel v dokumente, sm. specifikaciu HTML 3.2) i CSS (kaskadnie tablici stiley). Interesno, 4to etot priem, s nebol'6imi ograni4eniami, srabotaet i v Netscape Navigator (tak kak on podderjivaet i HTML 3.2, i CSS).
Veroatno, 4to vozmojnostey DIV+CSS vam vpolne xvatit, i togda ot ispol'zovania tega LAYER mojno otkazat'sa sovsem. Eto, kstati, blagotvorno skajetsa na razmere Web-stranici (ne budet kombinaciy tegov , v kotorix zapisivaetsa variant HTML-koda dla brouzerov, ne podderjivau6ix teg LAYER).
Pojaluy, na etom xvatit lit' vodu, perexodim k praktike. 6ablon HTML-koda sloa vigladit tak:
font color=#00008B
tt
DIV STYLE="<i>Svoystva sloa"</i>
Soderjimoe sloa
;/DIV
So strokoy Soderjimoe sloa vse ponatno: zdes' naxodatsa obi4nie HTML-tegi, kotorie opredelaut elementi, iz kotorix sostoit sloy.
Svoystva sloa - eto svoystva tablici stiley CSS. Zapisivautsa oni tak:
svoystvo:zna4enie
Estestvenno, svoystva sloa mogut sostoat' iz neskol'kix par svoystvo:zna4enie, kotorie otdelautsa drug ot druga to4kami s zapatoy.
A teper' rassmotrim sami svoystva:
position:absolute
Bez ukazania etogo svoystva (imenno so zna4eniem absolute) vi ne smojete ustanovit' poziciu sloa otnositel'no levogo verxnego ugla okna brouzera s pomo6'u svoystv left i top (sm. nije).
left:4islo
Opredelaet rasstoanie ot levogo kraa okna brouzera do levogo kraa sloa. Dopuskaetsa ukazivat' etu veli4inu v raznix edinicax izmerenia. Mojno podstraxovat'sa i prinuditel'no zadat' v ka4estve edinic izmerenia pikseli: left:50px.
top:4islo
Opredelaet rasstoanie ot verxnego kraa okna brouzera do verxnego kraa sloa. Vse ostal'noe - analogi4no svoystvu left.
width:4islo
Eto svoystvo ukazivaet (surpriz!) 6irinu sloa. Esli ukazannaa 6irina sloa men'6e, 4em 6irina kartinok, tablic i pro4ix nerazrivnix elementov, 6irina sloa budet opredelat'sa naibolee 6irokim elementom. Mojno ukazivat' 6irinu i v procentax (width:100%), pravda, eto daet neskol'ko stranniy rezul'tat v oboix brouzerax.
height:4islo
Opredelaet (opat' surpriz!) visotu sloa. Pravda, Netscape Navigator, tormoz etakiy, eto svoystvo ne podderjivaet - on opredelaet visotu sloa po ego soderjimomu.
background-color:cvet
Eto svoystvo opredelaet fonoviy cvet sloa. Kak i v HTML, mojno ukazivat' i 6estnadcateri4noe zna4enie (#FFFFFF), i "obi4noe" nazvanie cvetaNazvania cvetov
Katalog nazvaniy cveta v russkom azike
www.p-marketing.ru (white). Netscape Navigator i tut otli4ilsa - cvet on pokazivaet kak bog na du6u polojit, i background-color v Netscape ispol'zovat' prakti4eski nel'za. V ka4estve al'ternativi mogu posovetovat' zaklu4it' soderjimoe sloa v tablicu i zadavat' fonoviy cvet uje dla nee. Kross-brouzernaa sovmestimost' trebuet jertv...
background-image:url(put')
Opredelaet fonovoe izobrajenie sloa. V ka4estve puti mojno ukazivat' kak polniy URL (http://www.utugi.ru/img/bgimg.gif) tak i otnositel'niy put' (/img/bgimg.gif). Netscape Navigator... net, vse normal'no, zdes' on rabotaet bez fokusov :-)
z-index:4islo
Eto svoystvo slujit dla opredelenia poradka raspolojenia sloev na stranice. 4em men'6e zna4enie svoystva z-index, tem pozdnee vivoditsa sloy na ekran. Naprimer, sloy so zna4eniem z-index, ravnim 0, budet perekrivat' sloy s z-index:1.
Takim obrazom, polniy primer tega DIV, opredelau6ego sloy, mojet vigladet' sleduu6im obrazom:
Soderjimoe sloa
Kstati, esli vam nujen sloy, soderja6iy vsego odin ob&ekt, vi mojete ne sozdavat' otdel'niy teg DIV, a ukazat' atribut STYLE pramo vnutri tega, kotoriy opisivaet sootvetstvuu6iy element, naprimer:
IMG SRC=pic.gif WIDTH=400 HEIGHT=200 STYLE="Svoystva sloa"
Mejdu pro4im, specifikacii CSS predusmatrivaut zna4itel'no bol'6ee koli4estvo razli4nix svoystv, kotorie mojno ukazivat' v zna4enii atributa STYLE. Poeksperimentiruyte, i, vozmojno, vi otkroete kakie-nibud' novie interesnie effekti DIVnix sloev.
Stanislav Jarkov
http://pro.net.ru/
|
|
