Forduljunk a munkáshoz

Mit látsz a rétegek hátrányai A szegezett lábléc hatásának megvalósítása szempontjából? Ezt látjuk
1) A helyszínen található lábléc a blokkban van az ID \u003d elrendezéssel, amelynek nincs százalékmagassága. Elmélet szerint, a szülők és a tartalomblokk szerint. Állandó balra van szükség ahhoz, hogy magasságot tegyen 100% -os magasságra. Az utóbbiakkal problémák merülnek fel - ez nem adaptált erre. Következésképpen nincs elég az állítólagos blokk vagy a lábléc nem a szinten. Ráadásul,
2) A FETTER Magassági változó (függ a listán szereplő elemek számától és a betűméreten, akkor nem látható a HTML-től, hanem a CSS-től). ÉS
3) felett #elrendezés A 90PX rögzített magasságú reklámegység van;
4) Nincsenek szintező blokkok egy láblécben, sem (általában beszélnek) a blokkban #elrendezés (Van, de a blokk felett .rotated_posts.; Talán azonban a futurnak kell lennie).

4. pont - Szkriptet kell rajzolnia.
A harmadik pont, hogy kitaláljuk, egyszerűen úgy tűnik, egyszerűen a #layout (margó-tetején: -90px, de ne feledje, hogy ez a blokk nem - a bannervágó elnyomja, vagy a hirdetők hirtelen úgy döntenek, hogy nem mutatják meg . Számos oldaloldal van, ahol nem. Ezért függőség margó felső. A hirdetési egységből - rossz ötlet. Sokkal jobb - helyezze be #elrendezés - Akkor nem fog zavarni semmit.

Az első elemet általában megszerzett módon kell megszületni, meg kell helyezni a FTER-ot #elrendezés. Azonban a JavaScript segítségével más szétszórt lábléc-rendszereket is megvalósíthatsz, de mindenképpen szüksége van egy JS-re, vagy kezdetben a megfelelő elrendezésre.

Mivel nem lehetünk erősebbek, mint a webhely legfrissebb velcherje, a "beillesztve" a tartalom belsejében található lábát, elhalasztja a lábléc jobb elhelyezésének ötletét a jövőben (amely "hűvösebb lenne" Habra!), És a HABR a JavaScript (felhasználói parancsfájl) eloszlatja a megfelelő állapotot. (Azonnal azt mondom, hogy nem hibáztatom, nem pedig egy gyalogos, nem lövő és a webhely típusa, természetesen meghatározza a projektmenedzsment stratégiai döntését.) Tehát nem fogjuk elérni az ideális, mert a Az oldal letöltésének folyamatában az első második kettő szabálytalan elrendezéssel lesz. De számunkra egy koncepció és a lehetőség, hogy meghaladja az Aytishnikov világának legnépszerűbb honlapját.

Ezért a szkript kívánt helyén (korai, az oldal betöltése végén) a DOM-blokkok reklámozását és a futurot a kívánt helyekre írjuk. (Az a tény, hogy a felhasználói szkriptek miatt a megoldás nehezebb lesz, mint a tiszta.)
Var dQ \u003d funkció (Q) (Return Document.QuerySelector (Q);) // Csökkentse a var topl \u003d dq ("# topline"), lay \u003d dq ("# layout"), láb \u003d dq ("# lábléc") ); Ha (Topl && Lay) // banner - a lay.insertbe előtti tartalomblokk (topl, lay.firsstchild); Ha (Lay && foot && lay.nextsibling) // átadása futher lay.parentnode.insertbe előtt (lábléc, lay.nextsibling);
Helyezze a blokkokat helyekre - most már továbbra is hozzárendelje a szükséges tulajdonságokat az elemekhez. A futár magassága biztosan meg kell adnia, egyszerűen azért, mert már ismerjük a felhasználói szkript idején (az oldal betöltésének vége). A felhasználó működési pontja miatt, amint azt már említettük, az oldal futó megjelenítésének útja elkerülhetetlen. Megpróbálhatsz "jó arcot", de egy "rossz játékkal"? Minek? A webhely "rossz játéka" lehetővé teszi, hogy szuper szenvedély nélküli koncepciót készítsen, amely elegendő lesz a minőségének értékeléséhez, és nem lesz szükség a projekten "Jobb játékkal".
Ha (láb) (// blokk-kiegyenlítő

A láblécben H.APND_EL (CLSS: "CLEAR", appendto: lábléc); var foothot \u003d foot.offsetheight; // ... és mérje meg a lábléc magasságát), ha (topl && lay && lábléc && lay.nextsibling) (// a kívánt magasság beállítása a kívánt magasságban ("Leiaut") h.apnd_el ((CLSS: "CLEAR ", CSS :( Magasság: (Footh || 0) +" px "), appendto: Lay: Lay)); lay.style.minheight \u003d" 100% "; h.Addres (" # elrendezés: - " + Footh + "px! Fontos) HTML, test (magasság: 100%)");)
Itt megengedett magukat, hogy alkalmazzák az önhitt funkciót h.apnd_el.körülbelül ugyanaz, mint a jquery -
$("") .Css ((magasság: footh || 0)). Appendto ($ (lábléc))
És további - a CSS-szabályok végrehajtásának másik jellemző funkciója - h.Addres.. Itt anélkül, hogy nem tudod, mert meg kell adnod a szabályt " Fontos."- Csak a felhasználói forgatókönyvek prioritásainak jellemzői miatt.

Ezekkel a kódokkal láthatjuk a felhasználói szkript zsonglőrköpenyét (lefelé ugrott), és teljes mértékben felismerjük, hogyan kell létrehozni az oldalak elrendezését. Használja az ugrás kialakítást minden nap - kellemetlen, ezért ajánlott kizárólag bemutatásra és tesztelésre. A Habrajax felhasználói parancsfájlban hasonló szkriptet telepítettem a "Under footer" konfigurációval (állítsa be a "Tick" beállításait a "lábléc aljára", a 0.883_2012-09 verzióval kezdődően -12.

Volt-e a megvásárolta a Zencomment Styles frissítésének szükségességét, ha azok telepítve vannak? Igen, befolyásolja. A komplex stílusláncok miatt, amelyekben a felhasználó által beillesztett stílusok alacsonyabb prioritással rendelkeznek, ki kellett javítanom a felhasználót képességek Egy köröm labdarúgással működik. Ha nem frissíti a felhasználót (legfeljebb 2.66_2012-09-12 +) - a lábléc pontatlanul fog működni.

Blokk rotated_post (Három népszerű hozzászólás a múltból) Logikusnak tűnik egy lábléchez, így a valódi szkriptben is átkerül a láblécbe.

A második tétel (a Liestone hibáinak listájából) - Az érvelés pusztán a HABRA-nak (a felhasználók nem tartalmazzák és részben ismételjék meg az előbbiet).

Az oldalaknak problémája van, amely zavarja a szegezett láblécet a tiszta CSS-en egy meghatározhatatlan lábmagasság a böngésző alapértelmezett betűméretétől függően. A Futter CSS-re történő végrehajtásához ki kell választania a betűtípusok relatív magasságát, de előfordulhat, hogy nem működnek, ha a felhasználó számítógépét nem adja meg a felhasználó számítógépén. Ezért a megoldásnak tartalmaznia kell egy JavaScriptet, amely testreszabható átmeneti (átmenet) hozzávetőleges helyzetét a lábléc pontos. Vagy, tekintettel a különböző platformokon történő felhasználói szkriptre vonatkozó döntés elfogadhatóságára, a szegezett lábléc kiszámított telepítését - az első megfigyelések azt mutatják, hogy a megoldás praktikus.

KÖVETKEZTETÉS: Lehetséges, hogy teljes mértékben elrendezheti a HABRÉ elrendezést, de erre szükség van egy elrendezésre, egyértelműen megérteni az elrendezés viselkedését, amely blokkolja a megfelelő sorrendben. (Most a lábuház és a felső banner "nincs ott", és nem így van, hogy egyszerűen stílusok kapnak egy köröm labdarúgást.) JS-vel is meg tudod csinálni, ha a relatív egységekben a Futter magasságát kérdezi a betűtípus-bizonytalanságon.

Értékesítés

Ha a Habrajax 0.883+ -ot tartalmazza, meglátjuk a "mind a Futter" munkáját. A szkriptekkel alkalmazza a magasságot. Lehetővé teszi, hogy értékelje, hogy mennyi jobb oldala van egy köröm labdarúgáshoz képest a szokásos. A ZenComment felhasználók kompatibilisek a szkriptekkel, de a szegezett lábléc helyes működéséhez telepítenie kell a Zencomment 2.66_2012-09-12 + verzióját.

Tények a végrehajtás viselkedéséről

A sámánság lábléccel, stílusokkal és szkriptekkel egy sámánizmus (csak az elmélet által megerősített). Különböző böngészőkben, egy kicsit más viselkedés, de néhány helyen - váratlan. Felhasználói szkriptek és átrendezés blokkok nélkül az eredmények mások lesznek. Ez az, ami kísérleteket adott a felhasználó megvalósításával.

1) A Firefox a láblécek váratlan hiánya. Furcsa, hogy nem - a rajz az alábbi lábszár elhelyezése után fordul elő.

2) Chrome - meglepte a "vándorló görgetés" - az oldalra másodpercenkénti időtartamra, az üres helyek hozzáadásra kerülnek az alján - valami helytelen történik a magasságok számításával. Ezt az előírt HTML, test (magasság: 100%) kezeli a felhasználóban, de garanciák nélkül, ami mindig működik. Megbízható - Ellenőrizze, hogy a dokumentum ne haladja meg a magasságban lévő ablakot, és ha nem haladja meg, akkor mozgassa a láblécet, különben - semmi. Ugrással - minden rendben van, ez az.

3) Opera - ugrás nélkül (v. 12.02) Amikor az oldalt először betölti, de a gyors újraindítás megmutathatja a hopot. A többi nem kevésbé helyes, mint az FX.

Ami azt kell, hogy ki kell tanítani a Chrome-t, hogy helyesen viselkedjenek (szkript) és ebben az űrlapon, dobja ki a verziót a felülvizsgálathoz. Ezért a felhasználó telek egy kicsit bonyolultabb, mint a cikk.

Emlékeztetni kell arra, hogy ez nem teljes körű végrehajtás - nem veszi figyelembe például az újrahasznosított ablak eseteit a felhasználó által. Megtalálhatja és ritka (a gyakorlatban) a mozgatás előtti és utána, ahol a logika elkezdi olyan hibákat, amelyek nem vezethet kellemetlenséghez. A hiányosságokat tudatosan elhagyják, mert a javulás összetettsége és a döntés időpontja megfigyelhető.

Ennek eredményeképpen a gyors rögzített számítógépek esetében teljesen hatékony munkamódszert váltott ki. Ha rossz viselkedést észlel, akkor a "aluli" konfigurációt le kell tiltani.

Milyen oldalak hasznosak?

A standard webhelyen, a userstile nélkül, még a rövid válaszlapok nélkül is 1500px-nél hosszabbak, amelyek a legtöbb esetben megfigyelhetően vízszintesen elhelyezett monitorok esetén észrevehetetlenül. De még hagyományos monitorokkal is, mintegy 1300 pixeles felhasználók személyes oldalai gyakran körülbelül 1300 pixel magasságban találhatók, ahol a finomított lábléc minden dicsőségében megjelenik. Nem túl hosszú és számos oldal a felhasználói beállításokban.

Ha a ZenCOMMENT USERSTILI-t használod, erősen csökkentik a szükséges oldalmagasságot, és a Habrajax felhasználói szkript nem jeleníthet meg néhány vagy minden oldalsó blokkot a SIDBAR-ban. Ezért a szkriptekkel és stílusokkal a nem FTER hatása észrevehetően megfigyelhető. Ezért logikus, hogy először a Futret először jelent meg Habrajaxban. De a szokásos webhely számos oldalt tartalmaz, ahol a szegezett lábléc hasznos lenne.

Támogatni fogja a támogatást?

A webhely viselkedése az elmúlt évben azt mutatja, hogy a fejlesztők (és ezért a vezetés) elkezdték végrehajtani a korábban csak a felhasználói szkriptekben és a felhasználói szkriptekben. Például az év elején írtam, ahol sok kis kívánságot gyűjtöttem össze. Hat hónapon belül visszatértem vele, és elégedettséggel jelöltem (jobbra a szövegben; megismerheti magát az "Upding" és a dátumok), hogy számos lehetőséget ismertetett a kívánságnak már bevezetésre került a webhelyre.

Ezután nézd meg a "nyilakat", a négyzetek helyett a megjegyzések becslése. Megjelentek az Almalexa felhasználó ("Pretttifier") az év 3 évvel ezelőtt, és elfogadták a 2 évvel ezelőtti Zencommentben. 2-3 hónappal ezelőtt megjelentek az oldalon. Elkezdi hinni, hogy egy ideig a nyilakat egy bizonyos távolságban elválasztják, ahogyan a ZenCommentben (egy nyíl a szám bal oldalán, a második jobbra) kevesebbet kellene.

Ezért talán "szegezett lábléc" a Habré nem olyan fantázia, amelynek tűnhet 3 évvel ezelőtt.

A Habrajax parancsfájl egyéb jellemzőiaz elmúlt 3 hónapban (a beállítások leválasztása):
* Autorent beviteli mezők (az operában lassíthat nagy szövegeket);
* A hét napjai dátumokon, kivéve a "ma" és a "tegnap";
* Események egy szalagban, minimalizálva legfeljebb 1 sor és 2 karakter;
* A "HABR *" szavak csökkentése "χ ·" és "χα";
* A dátumok tippjei a cikkszámmal - a cikket jelentették, a cikket és az évet, mielőtt betölti, szám az URL-ben;
* Twisted "Hasonló hozzászólások" akár 2 szó. Pop-up "Hasonló hozzászólások" képernyőképe (12 link, nem 4).

Elkezdjük az ötödik leckét, amely a sablonok szerkesztésére szolgál a CMS Joomla 3-ban, ezúttal beszélünk az oldal lábáról. Elemezzük a lábléc kialakításának lehetséges lehetőségét és néhány megközelítést a teremtéshez.

Mi a lábléc

A helyszín lábát vagy alagsorát a legalacsonyabb résznek nevezik, amelyben szabályként információkat tartalmaz a webhelyről, a szerzői jogról stb. Szabványos kivitelezés a sablonban ProtostárFutter nem tartalmaz semmilyen értelmes információt:

A Standard Futher tartalom az aktuális év, a webhelynév és a "felső" link, ami az oldal tetejére vezet. Ahhoz, hogy őszinte legyek, a Futret ezen verziója teljesen haszontalan a webhelyünk látogatói számára, ráadásul a "felső" link a mi esetünkben teljesen nem szükséges, már készítettünk egy gyönyörű gombot e célokra.

Ezért kezdeni, azt javaslom, hogy megszabaduljon a lábléc standard tartalmától. Nyissa meg a fájlt index.php. Standard protostar sablon és keres egy kódot, amely felelős a felszerelésért. A Futter kimenet esetében a kód megfelel a 205 és 219 karakterláncok között, ami a következő (a Joomla verziójától és a kódvonalak indexfájljának változásaitól függően eltérhet):

És most töröljön egy extra kódot 210-től 217 karakterláncból, ennek eredményeképpen a Futret kódja:

Tény, hogy eltávolítottuk mindent, ami képes, így csak a láblécben lévő modulok kimenetének lehetőségét hagyjuk, a karakterlánc felelős azért:

Mentse az indexfájlt, menjen az oldalra, és frissítse az oldalt. A fordulat tartalma eltűnt, elértük ezt. Most új információkat adhat hozzá a lábléchez a belátása szerint, de mielőtt hozzáadná a kérdés megválaszolásához - mi lehet a láblécben?

Milyen információk jelenhetnek meg a webhely felvételein

Annak érdekében, hogy a lábuházat hatékonyabbá tegye, olyan információkkal kell rendelkeznie, amelyek érdekelhetnek a webhely látogatói számára. A webhely irányától függően ez az információ eltérhet. Itt van egy kis példa a láblécben lévő információkra:

• Extra menü - Ez a menü már meglévő vagy egyedi lehet. A lábléc menüpontja akkor hasznos, ha gyakran adja meg webhelyét a mobileszközökről, a látogató, az alján található Frack oldalról, további navigációt használhat az oldalon.
• Elérhetőség - Az értékesítési helyek, vagy a különböző szolgáltatásokat nyújtó webhelyek esetében a kapcsolattartási információk rendelkezésre állása egyszerűen szükséges, de a láblécben a helyére.
• A szociális hálózatok gombjai - A modern világban, a szociális hálózatok sok ember számára mindent, így ez az információ felesleges, soha nem lesz.
• Különböző linkek - Például az oldal térképére, hírcsatornákra stb.
• Widgetek- Lehetőség van a webhelyen, a jelenlévő számlálók, a legutóbbi megjegyzések stb.
• Hirdető- Van egy pillanat, amikor a webhelyről nemcsak jelenlétét akarom elérni, hanem profitot is, ebben az esetben a követő nem lehet rossz tartály reklámozáshoz.

Ne próbálja meg illeszkedni a webhelyed láblécébe, a fentiek mindegyike, az információ túlkínálata, mint a távolléte, nem vezet semmi jó.

Másrészt nem számít, hogy mely információkat tartalmaznak a webhely láblécében, a legfontosabb dolog, hogy illeszkedjen az általános tervezésbe, és gyönyörűen díszített.

Egy lábléc létrehozása a webhelyhez

Most dobjuk az elméletet, és folytassanak közvetlenül egy lábléc létrehozásához. A Futter képződési módszerek többek lehetnek:

• Autó- magában foglalja a különböző modulok használatát bizonyos információkat
• Kézikönyv- A modulok nem használják, az összes változtatás manuálisan történik a sablonfájlok szerkesztésével.
• Vegyes- Ebben az esetben mindkét fenti opciót használják.

Minden módszer jó a saját módján, például a kezdeti szakaszban, a modulok használata jelentősen leegyszerűsíti a feladatot, és a modulok nem használható módszert, felgyorsítja az oldal betöltését. Mindenesetre a választás továbbra is a tiéd.

Annak érdekében, hogy fontolja meg az összes lehetséges lehetőséget, megállítom a választásomat a harmadik verzióban. Így általános ötlete lesz, hogy mit szerkesztett.

Példaként úgy döntöttem, hogy a láblécet három függőleges részre osztom, a bal oldali linkek jelennek meg, a központ egyfajta logó, ami egy kis szöveget hozhat. A lábléc bal és jobb oldalának megjelenítéséhez a modulok megválaszolódnak, és a logót kézzel nyomja meg az indexfájlban.

Kezdjük, új pozíciókat hozunk létre a láblécben lévő modulokhoz (hogyan kell ezt tenni, a sablonok beállítására és szerkesztésére szolgáló leckében beszéltünk) két darabszámban. Mivel a lábléc bal és jobb oldalán helyezkednek el, akkor a megfelelő nevük van - lábléc balra. és lábléc-jobb. Kijelentjük őket a fájlban templasedetails.xml..

Most módosítjuk a sablon index fájlját, a kódom kiderült:

És az Clarity screenshot:

A modulok általában tisztaak, de részletesebben szeretném megállítani a logót. A logó kimenetének megfelel a kódnak:

baseurl. "Sablonok /". $ this-\u003e sablon. "/images/joom4all.png"?\u003e "" /\u003e

Első pillantásra, a szokásos HTML-címke a képhez, de a szokásos fájl helyszínének helyett a PHP kódot írja. Ez a kód első pillantásra komplex és érthetetlennek tűnhet, de valójában, ha szétszerelték, világossá válik, hogy nincs bonyolult bonyolult:

• - Indítsa el a PHP kódot
• visszhang.- felelős a vonal kibocsátásáért
• $ This-\u003e baseurl - Ez a karakterlánc visszaadja az oldal nevét.
• sablonok / - Itt megadjuk, hogy a kép a sablonok mappában van tárolva
• $ this-\u003e sablon - Visszaadja az aktuális sablon nevét
• /Images/joom4all.png. - a kép elérési útja a sablon gyökérmappájába és a képen található fájlnév
• ?> - Végezze el a PHP kódot

A PHP-kód használatának eredményeként megkapjuk a képfájl relatív elérési útját. Más szóval, függetlenül attól, hogy a név a helyszínen lesz, és milyen sablonképet használnak a kiválasztott sablon kép mappájából.

Mentse az index.php fájlt, most zárható le, már nem hasznos számunkra.

Most hozzunk létre több olyan modulot, amelyet csak új pozíciókban visszavonnak. Az első modul megjeleníti a menüt a láblécben, és a második kis szöveget.

A következő lépésben hozzon létre modulokat - a "Menü" típusú menüben és a "HTML Code" típusú szöveghez (hogyan kell létrehozni egy modulot). Jelentős helyzetként csak a létrehozott modul pozíciókat választjuk:

Ahhoz, hogy megkülönböztessük a menüünket a helyszín többi menüjének többi részéhez, a Menü modul beállításaiban "_footer" soffika:

Annak érdekében, hogy ne magyarázzuk meg, hogy milyen modul van a "HTML kód" típusával, megmutatom a cselekvés elvét a screenshot:

Töltöttem ki ezt a modult egy adott szöveggel, amelyet egy láblécben visszavonnak, kivéve a szokásos szöveget, írtam egy kis PHP kódot, amely megjeleníti az aktuális évet:

Mentessük a modulokat, és menjünk az oldalra, hogy ellenőrizzék az eredményt, és ez az, amit kaptam:

Az eredmény, bár van, de nem nagyon lenyűgöző. Most jobban kell elrendeznünk a lábléc elemeit a CSS segítségével.

Új jövő blokkok kiadása:

Láb balra, .foot-center (úszó: balra;) / * a további blokkok beállítása * / .foot-bal (szélesség: 20%,) / * a bal oldali blokk szélessége * / .foot-center (margó) -Left: -6px;) / * központi blokk francia bekezdés * / .foot-jobb (/ * jobb blokk * / úszó: nincs; magasság: 60px;

A regisztrációs jelölt a menü, amelyre a következő stílusokat alkalmaztam:

Ul.nav.menu_footer (margó: 0;) / * nulla francia bekezdés a * / ul.nav.menu_footer Li menüből (/ * Decor Text Menü * / Font-Face: "Lobster", Cursive; Font-Méret: 16px; Line -Height: 18px;) ul.nav.menu_footer li.item-179 A (/ * Menüpont oldal térkép * / margó-balra: 15px; szín: # fc8f30;) ul.nav.menu_footer li.item-180 a (/ * Menüpont: * / Szín: # 5AA426; határ teteje: 3px szilárd # 5AA426;) ul.nav.menu_footer li.item-181 A (/ * Menüpont Kapcsolatok * / Margin-Bal: 45px : 3px szilárd # 0f70ad; szín: # 0f70ad;)

És a végén, különítsük el a láblécet a tartalom fő részéből:

Footer.footer HR (határ teteje: 3px szilárd # FC8F30;) / * Különítse a láblécet a fő tartalomból * /

Mentse el a stílusfájlt, menjen az oldalra, és nézze meg az eredményt:

Tehát létrehoztunk egy lábunkat a webhelyünkhöz, ami sokkal szórakoztatóbbnak tűnik, mint a szabvány. Ezt a leckét ez a lecke, és a következő leckében ellenőrizzük az adaptív tervezési hibákat és helyesbítjük néhány hiányosságot. Ezenkívül azt tanácsolom, hogy olvassa el a cikket, hogyan hozzon létre egy Joomla 3 sablont, és különösen egy láblécet a Scratch gyorsan a bootstrap segítségével.

Ez a címke az előző címkékként használható többször az oldalon. Valószínűleg már kitaláltad a nevét, hogy ő egy alagsori oldal. A számlálók, a szerzői jog szövege, a kapcsolattartási adatok stb. Lehetőség van a navigációs panel () beillesztésére az oldal alagsorba. Senki sem tiltja be ilyen új elemeket, mint félretéve és szakasz, de nem tenném ezt a helyedben.

és

Helyszíni fejléc

Az №1

Itt írjuk az első hozzászólás szövegét.

A 2. SZÁMÍTÁS.

Itt megírjuk a második bejegyzés szövegét.