bejárat2010
16apr
Minta bejegyzés 1
38
Curabitur ut concue hac, diam turpis […]
Érzékeny HTML5 és CSS3 elrendezés. Hozzon létre egy reszponzív oldalt a html5 és a css3 nyelven kezdőknek hat lépésben! Érzékeny elrendezés a HTML5 -ben és a css3 -ban
A szerzőtől: Amióta cikkek jelentek meg az interneten, bemutatva a HTML5 és a CSS3 új tulajdonságait, az volt az ötletem, hogy létrehozzak egy webhely elrendezést képek nélkül. A HTML5 és a CSS3 fejlesztéseivel felvértezve (a tiszteletre méltó korábbi specifikációkhoz képest) nem túl nehéz egy tisztességes megjelenésű webhelyet írni, amelynek nem kell a képekre támaszkodnia a jelöléshez.
Itt van egy kép a webhelyről, amelyet kódolni fogunk HTML5 és CSS3 formátumban:
Mielőtt folytatná a gyakorlati lépéseket, javaslom, hogy tekintse meg a munka demóeredményét.
A fejléc eleme egy bevezető csoportot vagy navigációs segédeszközöket jelent.
A fejlécelem az ő ajánlásaikat követve tartalmazza a logónkat, a feliratot és a fő navigációt. Amikor belépünk a fejlécelembe, a fejlécbe, egy jelölő részletünk van, amely tartalmazza az oldal összes olyan részét, amelyet intuitív módon fejlécnek gondolunk. (Vagy az oldal minden olyan részlete, amely a div -ben lesz beágyazva a cím azonosítójával.) A fejlécelem többször is használható egy oldalon, és újra felhasználjuk a cikk elemein belül, amelyek a bevezetőt tartalmazzák A poszt.
Hcsoport elem
Először a címelemben található egy új címke, a hgroup. Ezt használjuk webhelyünk logójának és alcímének megjelenítésére a h1 és h2 címkékben.
A hgroup elem a h1-h6 elemek halmazának csoportosítására szolgál, ha a címsornak több szintje van, például alnevek, alternatív nevek vagy alszámok.
A hgroup elem túlzásnak tűnhet, kivéve, ha a címsorokat a szokásos módon div -be csomagolja, hogy a cím vagy alnév (ek) normális háttérrel vagy stílusúak legyenek. A hgroup azonban fontos szerepet játszik a dokumentum sémájában. A sémaalgoritmus ellenőrzi az oldalt, és átadja a fejléc szerkezetét. Tekintse meg vázlatát munkájáról az Outliner eszközzel. Amikor a séma algoritmusa találkozik egy hgroup elemmel, akkor figyelmen kívül hagy mindent, kivéve a legfelső szintű címsort (általában h1).
Most van egy problémánk: az áramkör algoritmusa nem hibátlan és nem teljes. Például a következő elem, amelyet megvitatunk, a nav elem, és a jelölés "Untitled Section" -ként jelöli. A jelölésfejlesztőket felkérték, hogy változtassák meg a séma algoritmusát úgy, hogy az a navigációs elemet "Navigáció" -ként jelenítse meg. Mindenesetre a hgroup elem lehetőséget ad arra, hogy csoportosítsa a fejléceit, és ezáltal strukturálisan és szemantikailag is rendszerezze őket.
Nav elem
Továbblépünk a következő HTML5 elemre - a nav. A navigációs rendszerben tartalmazza a webhely fő navigációját, rendezetlen listába csomagolva.
A navigációs elem az oldal azon részét jelöli, amely más oldalakra vagy az oldalon belüli területekre mutat: navigációs linkeket tartalmazó terület.
A navigátorok használata a webhely fő navigációjának létrehozásához kissé adott, de a körülmények olyanok, hogy több linkterület lesz a webhelyen; a kérdés az, hogy melyiket érdemes beburkolni a nav címkével. Íme néhány felhasználási eset, amelyek szerintem működhetnek:
Kapcsolódó hozzászólások.
A specifikáció szerint ezek megfelelő vagy nem megfelelő használati esetek lehetnek a nav elem számára. A specifikáció nem túl világos, és a bemutatott példák nem túl hasznosak. Tehát bár a specifikáció nem végleges és konkrétabb, a választás helyes módszer A nav elem használatára csak a fejlesztői közösség számíthat.
Cikk elem
A következő elem, amit szeretnék bemutatni nektek, a cikk. Demóoldalunk fő területe három bejegyzés idézetet tartalmaz, és mindegyiket egy cikkcímkével csomagoljuk.
XHTML
2010
16
április
Minta bejegyzés 1
38
Curabitur ut concue hac, diam turpis […] Írta: Szerző neve Címkék: menő modern hype-barát
|
Itt található a cikk elem W3C definíciója:
A cikk elem egy moduláris kompozíciót ábrázol [...] a dokumentumban, ezért önállóvá vagy újrahasználhatóvá válik, például szindikációban (tartalom egyidejű közzététele több webhelyen).
Ezúttal a specifikáció világosabb, és a blogbejegyzés (vagy részlet) sokkal jobb ( figyeljen a szindikáció említésére) megy a cikkhez. Természetesen sok cikkelemet elhelyezhetünk az oldalon.
Biztosan észrevette, hogy a fejlécet és a láblécet a cikk belsejébe helyeztük. A fejléc és a lábléc többször is használható egy külön HTML -oldalon. Mivel a fejléc "bevezető csoport vagy navigációs segédeszköz", a dátumot, a címet és a megjegyzések számát is belefoglaltuk. Ezután van egy bekezdésünk egy bejegyzésrészlettel, amelyet egy lábléc követ.
Láblécelem
Amint azt már korábban említettem, a lábléc a szükséges számú alkalommal használható ugyanazon az oldalon, és a dokumentumoldal vagy a dokumentumrész lábléc szegmensét képviseli.
A láblécelem az elérni kívánt szakasz láblécét jelenti. Általában a lábléc információkat tartalmaz a szakaszáról, például a hozzárendelést, a kapcsolódó dokumentumokra mutató hivatkozásokat, a szerzői jog dátumát stb.
Demóoldalunkon négy láblécelem található: egy a három cikk elemeihez, és egy közös lábléc az egész oldalhoz. A cikk elem lábléce tartalmazza a bejegyzés szerzőjének nevét, címkéket és a linkre mutató gombot teljes verzió blog bejegyzés.
A közös lábléc három szakaszelemet és szerzői jogi megjegyzést tartalmaz. A lábléc elem mindkét használata törvényes és megfelel a W3C ajánlásának.
Szakasz elem
Demo oldalunk közös láblécének területe három szakasz elemet tartalmaz. Ezekben felsoroljuk a legnépszerűbb blogbejegyzéseket, a legutóbbi megjegyzéseket és a kitalált cégünk rövid életrajzát.
A szakasz elem egy dokumentum vagy alkalmazás általános területét képviseli. A szakasz ebben az esetben a tartalom tematikus csoportosítása, általában címsor segítségével.
A szakasz elem meglehetősen trükkös, mert úgy tűnik, nagyon hasonlít a div elemhez, ahogy azt a specifikáció határozza meg. Ebbe a csapdába estem, amikor elkezdtem írni a demo oldal kódját; Három cikk elemet helyeztem el a szakasz elemen belül. Hamar rájöttem módszereim tévedésére. Az egyetlen módja annak, hogy eldöntse, használjon -e egy szakaszt, ha megnézi, hogy a szakaszelemmel lezárni kívánt területnek szüksége van -e címre. Amint a definícióból látható, a szakasz elemnek általában van címe.
Egy másik kérdés, amelyet érdemes feltenni a szakaszelem használatának indoklásának megállapításához, az: kizárólag stílusformázás céljából adja hozzá? Egyszerűen azért adja hozzá, mert ezt a részt szeretné kiemelni a JavaScript segítségével, vagy mert normál stílust szeretne alkalmazni, és div elemet kell használnia.
Bemutató oldalunk három cikkelemének a szakaszcímkébe való csomagolása indokolt lenne, ha a szakasz olyan címsort tartalmazna, mint a „Legutóbbi blogbejegyzések”. Ennek lenne értelme; ellenkező esetben a címke, amelyen belül a cikk elemei találhatók, csak formázási támogatás - valami, ami segít abban, hogy mikor célozzuk meg JavaScript súgó vagy CSS.
Elülső elem
A demóoldalhoz használt utolsó HTML5 elem félre van téve; oldalsó tartályként használtuk.
A fél elem az oldal egy olyan részét alkotja, amely tartalomból áll, és felületesen kapcsolódik a félretett tartalomhoz, és amely ettől a tartalomtól elkülönítve érzékelhető. Az ilyen szakaszokat a tipográfiában gyakran oldalsó oszlopként ábrázolják.
Amint a specifikációból látható, az oldalsávon az egyik példa a félrevezető elem ideális használatára. Az alábbiakban a grafikonon látható a demóoldalunk félrevezető elemének hierarchiája.
Két részt és egy navigációt helyeztünk el. Az első szakasz eleme a Twitterre és az RSS -re mutató linkeket tartalmaz, a második pedig a legutóbbi tweetet (a felhasználó Twitter -bejegyzését) jelenti. A második elem, a szakasz is azon ritka esetek közé tartozik, amelyekben nincs címsor. Ennek lehet címe, valami "Utolsó tweet", de szerintem nem szükséges, mert az olvasók hozzászoktak az ilyen blokkokhoz, és az idézet alatti Twitter címke nagyon felismerhető. Az oldalsáv navigációs elemét a blogok listájának megjelenítésére használjuk, és a fő navigációval ellentétben címe van.
Az utolsó szó
Így a cikkünk első része a HTML5 és CSS3 webhelyek elrendezésével foglalkozik. Igyekeztem a lehető legrövidebb ideig tartani, és nem vesztegetni túl sok időt a HTML5 specifikációk kétértelműségeire, mert még nincs kész. Addig is a közösségre és a HTML5 -gyógyítók munkájára kell támaszkodnunk, hogy eligazítsanak bennünket az új elemek webhelyekre történő bevezetésében.
Köszönjük, hogy elolvasta, és ne hagyja ki a cikk 2. részét, ahol a jelölés díszítésére használt CSS3 tulajdonságokat tárgyaljuk.
Szokás szerint szívesen várok minden kérdést és észrevételt. Nyugodtan beszéljen és kezdjen vitát az új elemek használatáról, mert ez - A legjobb mód tisztázzák előnyeiket.
Szerkesztőség: Rog Victor és Andrey Bernatsky. Webformyself csapat.
HTML5 és CSS3 nélkül nem juthat messzire
A modern webhelyeket és a webfejlesztést már lehetetlen elképzelni HTML5 és CSS3 nélkül, bármit is mondjunk.
Bármely projekthez, ügyfélhez érvényes, böngészőközi és modern HTML5 és CSS3 elrendezés szükséges, és mobileszközökhöz kell igazítani.
Ha tudja, hogyan kell gépelni HTML5 és CSS3 formátumban, és a projektet mobileszközökhöz kell igazítani, akkor biztonságosan emelheti egy órája munkájának költségét.
Nos, ha létrehoz egy webhelyet magának, akkor ez a tudás segít abban, hogy jobb, funkcionálisabb és kényelmesebb legyen. Ez általában a pozíciók, a forgalom és ennek megfelelően a bevétel növekedését jelenti.
Tudod, azt...
Most a Yandex keresési találatai között (a TOP 10 -ben) 55% -a olyan webhelyek, amelyek adaptív kialakításúak, és képesek alkalmazkodni a mobileszközökhöz. Ez azt sugallja, hogy a Yandex (és a Google is) jobban preferálja a reszponzív kialakítású webhelyeket. Azok. azok, amelyeken a felhasználó jól érzi magát.
És HTML5 és CSS3 hozzáadásra kerül a webhelyhez további jellemzők, amelyek segítségével még kényelmesebbé tehetjük az oldalt.
Felhasználóknak és robotoknak egyaránt.
Nyitóoldal ( Nyitóoldal, nyitóoldal) arra szolgál, hogy a látogatókat előfizetőkké vagy ügyfelekké alakítsa.
Néha forgalomszegmentáláshoz is használják.
A céloldal egy lehet külön oldalt egy domainben vagy egy teljes értékű webhely részeként.
Ebben az esetben a webhelyet népszerűsítik a keresésben, és a céloldalt a Yandex.Direct, a Google Adwods, a Target Vkontakte stb.
Egy ilyen csomag lehetővé teszi, hogy a legtöbbet hozza ki a különféle internetes marketing eszközökből.
Most lehetőség nyílik mindezt gyorsan megtanulni és alkalmazni tevékenységükben.
HTML5 + CSS3 + reszponzivitás + céloldal
Ezzel a tanfolyammal képes lesz:
reszponzív webhelyeket és oldalakat hozhat létre
mobileszközökhöz igazítani
használja a HTML és a CSS képességeit saját vagy ügyfélprojektjeiben
bármilyen céloldalt létrehozhat: oldalak, előfizetési oldalak, termékek céloldalai stb.
adjon hozzá különféle effektusokat és szkripteket a céloldalhoz
speciális űrlapok létrehozása és használata Visszacsatolásés még sok más.
Nem lesz nehéz ezzel a videó tanfolyammal!
Tanfolyam vázlata
Bevezető rész
A HTML5 és a CSS 3 új funkciói egyszerűsítik és megkönnyítik az elrendezési folyamatot.
Szemantikai jelölés - titkai és mire való.
Médiaobjektumok beszúrása - hogyan lehet hangot és videót beilleszteni lejátszó nélkül.
Gyakorlati rész
Céloldal létrehozása lépésről lépésre.
Az elrendezés megtervezésétől, a különböző összetettségű blokkok elrendezésétől a szkriptek összekapcsolásáig és php kezelők formákhoz
Körhinta / csúszka, sima görgetés, gombok, CSS sprite, űrlapellenőrzés stb.
Hozzáadás. anyagok
A további anyagok tartalmazzák az összes szkriptet és forrást, amelyekkel dolgozni fogunk + csalólapok kóddal, amelyeket csak át kell másolnia és be kell illesztenie a megfelelő helyre.
És egyéb hasznos forrásokat is.
A videóleckék száma: 23
Mit tehetsz a tanfolyam elvégzése után?
Előkészületben
Ismerje meg a PSD elrendezést a PhotoShop segítségével
Vágja ki a kívánt képeket a PSD elrendezésből
megtalálja gyönyörű minták céloldal és webhelyek
Tervezési blokkok és elrendezési szakaszok
Kombinálja az ikonokat CSS -sprite -kbe
Dolgozzon a PhpDesigner programmal
Az elrendezés szempontjából
Csatlakozás gyönyörű betűtípusok a Google tárhelyéről
Használjon hatékonyan pszeudo-osztályokat
A webhely adaptálása minden mobileszközhöz
Használjon 2 vagy több hátteret blokkhoz, animációhoz, átalakításhoz, RGBA -hoz stb.
Dolgozzon a @media lekérdezésekkel
Interaktív Yandex térképek beszúrása
Hozzon létre CSS -sprite -kat, és gyorsítsa fel az oldal betöltését
Használjon előre megtervezett stílusokat (hasonlóan a Bootstrap keretrendszerekhez)
A javulás szempontjából
Hover effektek létrehozása ("animálás" lebegéskor)
Gördítse simán a blokkokat és a "Fel" gombot
A visszajelzési űrlapok érvényesítése a jQuery segítségével
Készítsen intelligens visszajelzési űrlapokat az UTM -címkék átvitelével
Célok összekapcsolása és konfigurálása a Ya.Metrica -ban események segítségével
Könnyítse meg az oldalakat azáltal, hogy gyorsabban betöltődik
Ellenőrizze és javítsa ki a hibákat az oldalakon
Adaptív elrendezés A webhely lehetővé teszi, hogy a weboldalak automatikusan igazodjanak a táblagépek és okostelefonok képernyőjéhez. Mobil internetes forgalomévről évre növekszik, és ennek a forgalomnak a hatékony feldolgozása érdekében fel kell ajánlania a felhasználóknak reagáló webhelyeket, felhasználóbarát felülettel.
A keresőmotorok számos kritérium alapján értékelik a webhely válaszkészségét, amikor megtekintik őket mobil eszközökÓ. A Google azzal próbálja megkönnyíteni az okostelefonok és táblagépek tulajdonosainak internethasználatát, hogy a mobilbarát webhelyeket speciális jelzéssel jelöli a mobil keresési eredményekben. mobilbarát... A Yandex rendelkezik egy olyan algoritmussal is, amely a mobilkeresésben részesülő felhasználók számára előnyben részesíti a mobil / adaptív verziójú webhelyeket.
Ellenőrizheti az oldal mobil eszközökön történő megjelenítését a szolgáltatásokon és.
Rizs. 1. A Yandex és a Google mobil keresési eredményei, megjegyzéssel a webhely mobilkészülék -barátságáról Mi a reszponzív elrendezés
A reszponzív elrendezés feltételezi, hogy nincs vízszintes görgetősáv és skálázható területek, ha bármilyen eszközön megtekintjük, olvasható szöveg és nagy területek a kattintható elemekhez. A médialekérdezések segítségével szabályozhatja a blokkok elrendezését és elrendezését az oldalon, újratelepítve a sablont, hogy az alkalmazkodjon a készülék különböző képernyőméretéhez.
A reszponzív webhely létrehozásának alapvető technikáit a cikk tartalmazza. For reszponzív dizájn a webhely fő tárolójának szélessége% -ban van megadva, míg a böngészőablak szélességének 100% -a, vagy ennél kisebb is lehet. A rácsoszlopok szélessége is%-ban van megadva. V reszponzív dizájn a fő konténer és a rácsoszlopok szélességét px értékekkel rögzítik.
Az ebben a leckében tárgyalt reszponzív folyadékelrendezési technika remekül működik kétoszlopos elrendezésen, így a webhely érzékeny és könnyen megtekinthető mobileszközökön. A sablon az oldalak fő tartalmának eltérő elrendezését feltételezi, ebben a leckében a főoldal elrendezését szétszerelik.
A főoldal elrendezése
Egy oldal három fő blokkból áll: egy fejlécből (fejlécből), egy csomagoló tárolóból a fő tartalomhoz és az oldalsávhoz, valamint egy láblécből. Tervezési döntőpontként 768 és 480 képpontot veszünk.
Az első ponton elrejtjük a felső menüt, és áthelyezzük az oldalsávot a bejegyzésekkel ellátott konténer alá. A második pontban megváltoztatjuk a fejlécelemek helyzetét, megszüntetjük a közösségi média gombok elhelyezését a bejegyzésekben, és megszüntetjük a lábléc körüli folyamatot.
Rizs. 2. Példa a reszponzív elrendezésre 1. Meta tags és szakasz
1) Hozzáadás a szakaszhoz
szükséges fájlok - hivatkozás a használt betűtípusokra, a jQuery könyvtárra és az előtag nélküli bővítményre (hogy ne írjon böngésző előtagokat a tulajdonságokhoz):
2. Oldalfejléc
Az oldal fejlécében
a logót ;
gomb a főmenü megjelenítéséhez / elrejtéséhez