Adaptivní rozvržení webových stránek umožňuje webovým stránkám automaticky se přizpůsobit obrazovkám tabletů a chytrých telefonů. Návštěvnost mobilního internetu každým rokem roste a pro efektivní zpracování této návštěvnosti je potřeba uživatelům nabídnout responzivní weby s uživatelsky přívětivým rozhraním.

Vyhledávače používají řadu kritérií k vyhodnocení odezvy webu při prohlížení na mobilních zařízeních. Google se snaží majitelům chytrých telefonů a tabletů zjednodušit používání internetu tím, že ve výsledcích mobilního vyhledávání označuje stránky přizpůsobené pro mobilní zařízení speciální značkou mobile-friendly. Yandex má také algoritmus, který uživatelům v mobilním vyhledávání dává přednost webům s mobilní/responzivní verzí.

Zobrazení stránky na mobilních zařízeních si můžete zkontrolovat na službách a.

Rýže. 1. Výsledky mobilního vyhledávání od Yandex a Google s poznámkou o přívětivosti webu pro mobilní zařízení. Co je adaptivní rozvržení?

Adaptivní rozvržení předpokládá absenci vodorovného posuvníku a škálovatelných oblastí při prohlížení na jakémkoli zařízení, čitelný text a velké plochy pro klikací prvky. Pomocí dotazů na média můžete ovládat rozvržení a umístění bloků na stránce a přeuspořádat šablonu tak, aby se přizpůsobila různým velikostem obrazovky zařízení.

Základní techniky tvorby responzivního webu jsou uvedeny v článku. Pro responzivní design je šířka kontejneru hlavního webu nastavena v %, a může se rovnat 100 % šířky okna prohlížeče nebo méně. Šířka sloupců mřížky je rovněž uvedena v %. V responzivním designu je šířka hlavního kontejneru a sloupců mřížky pevná pomocí hodnot px.

Technika adaptivního proměnlivého rozvržení popsaná v této lekci bude perfektně fungovat na šabloně se dvěma sloupci, díky čemuž bude web přizpůsobivý a pohodlný pro zobrazení na mobilních zařízeních. Šablona předpokládá jiné rozvržení hlavního obsahu stránek, v této lekci se budeme zabývat rozvržením hlavní stránky.

Rozložení domovské stránky

Stránka se skládá ze tří hlavních bloků: záhlaví (záhlaví), obalový kontejner pro hlavní obsah a postranní panel a zápatí (zápatí). Vezměme 768px a 480px jako designové zlomy.

V prvním bodě skryjeme horní nabídku a přesuneme postranní panel pod kontejner s příspěvky. Ve druhém bodě změníme umístění prvků záhlaví, zrušíme umístění tlačítek sociálních sítí v příspěvcích a zrušíme obtékání sloupců zápatí stránky.

Rýže. 2. Příklad adaptivního rozvržení 1. Meta tagy a sekce

1) Přidejte do sekce potřebné soubory - odkaz na použitá písma, knihovnu jQuery a také plugin prefixfree (aby se nepsaly předpony prohlížeče pro vlastnosti):

Adaptivní vzhled webu

2. Záhlaví stránky

Do záhlaví stránky umístíme následující prvky kontejneru:
logo ;
tlačítko pro zobrazení/skrytí hlavní nabídky;
Hlavní menu

;
formulář pro vyhledávání na webu.

L O G O

• Blog
• Portfolio
• o autorovi
3. Blok se shrnutím článku

Oznámení článků zabalíme prvkem:

Designové jaro

Ruský jazyk je velmi bohatý na slova týkající se ročních období a přírodních jevů s nimi spojených.

pokračovat ve čtení ...
4. Postranní panel

Do bočního sloupce přidáme seznam kategorií, poslední příspěvky a formulář pro odběr newsletteru:

Kategorie

• Design (2)
• Rozložení (5)
• Video (1)
Poslední poznámky
• Léto
• Podzim
Přihlaste se k odběru newsletteru
5. Zápatí

Do zápatí stránky umístíme informace o autorských právech, tlačítka sociálních sítí a e-mailový odkaz:

Můj blog © 2016 Napište písmeno $(".nav-toggle").on("click", function())( $("#menu").toggleClass("active"); ));

6. Obecné CSS styly

Obecné styly, resetujte styly prohlížeče na výchozí:

*, *:after, *:before ( box-sizing: border-box; padding: 0; margin: 0; transition: .5s easy-in-out; /* přidat hladké přechody pro všechny prvky stránky */ ) ul ( list-style: none; ) a ( text-decoration: none; outline: none; ) img ( display: block; width: 100%; ) h1, h2, h3, h4, h5, h6 ( font-family: "Playfair Display"; váha písma: normální; mezera mezi písmeny: 1px; ) tělo (skupina písem: "Open Sans", arial, bezpatkové; velikost písma: 14px; výška řádku: 1; barva: #373737; background: #f7f7f7; ) /* přidat vyčištění toku pro všechny kontejnery, které mají uvnitř zabalené podřízené prvky */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after ( content: ""; display: table; clear: both; ) /* třída stylu, která řídí šířku kontejneru mřížky */ .container ( margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15 pixelů ;)

7. Styly pro záhlaví a jeho obsah záhlaví ( šířka: 100 %; pozadí: bílá; stín boxu: 3px 3px 1px rgba(0,0,0,.05); padding: 15px 0; okraj-dole: 30px; position : relativní; ) /* logo */ .logo ( display: block; float: left; ) .logo span ( color: white; display: inline-block; width: 30px; height: 30px; line-height: 30px; border -radius: 50%; margin: 5px 0; text-align: center; text-shadow: 2px 2px 1px rgba(0,0,0,.4); .logo span:nth-child(liché) (pozadí: #EF5A42; ) .logo span:nth-child(even) ( background: #F8B763; ) /* menu */ #menu ( float: right; ) #menu li ( display: inline-block; margin-right: 30px; ) #menu a ( barva: #111; transformace textu: velká písmena; mezera mezi písmeny: 1px; váha písma: 600; zobrazení: blok; výška řádku: 40px; ) #menu a:hover ( barva: #EF5A42; ) #menu li:last-child ( margin-right: 0; ) /* vyhledávací formulář */ #searchform ( float: right; margin-left: 46px; display: inline-block; position: relativní; ) #searchform input ( šířka: 170px; plovoucí: vlevo; okraj: žádný; padding-left: 10px; výška: 40px; přepad: skrytý; obrys: žádný; barva: #9E9C9C; styl písma: kurzíva; ) #tlačítko vyhledávacího formuláře ( pozadí: průhledné; výška: 40px; ohraničení: žádné; pozice: absolutní; vpravo: 10px; barva: #EF5A42; kurzor: ukazatel; velikost písma: 18px; ) #searchform input:focus ( obrys: 2px solid #EBEBE3; ) /* tlačítko pro přepínání nabídky, které se zobrazuje při šířce 768 pixelů */ .nav-toggle ( display: none; position: relativní; float: right; width: 40px; height: 40px; margin-left: 20px; background: #EF5A42; kurzor: ukazatel; ) .nav-toggle span ( display: block; position: absolute; top: 19px; left: 8px; right: 8px; height: 2px; background: white; ) .nav-toggle span:before , .nav-toggle span:after ( obsah: ""; pozice: absolutní; zobrazení: blok; vlevo: 0; šířka: 100 %; výška: 2px; pozadí: bílá; ) .nav-toggle span:before ( nahoře: -10px; ) .nav-toggle span:after ( bottom: -10px; ) /* třída, která bude přidána do horní nabídky po kliknutí na tlačítko a zobrazí skrytou nabídku */ #menu.active ( max- výška: 123px; ) 8. Styly pro blok hlavního obsahu /* levý kontejner */ .posts-list ( margin-bottom: 30px; šířka: 64 %; plavat vlevo; ) /* blok pro článek */ .post ( margin-bottom: 35px; ) .post-content p (line-height: 1,5; padding-bottom: 1em; ) .post-image ( margin-bottom: 30px; ) . category ( margin-bottom: 15px; ) .category a ( color: #F8B763; text-transform: largecase; ) .post-title ( margin-bottom: 12px; font-size: 26px; ) /* blok s " pokračovat" tlačítko čtení" a tlačítka sociálních sítí */ .post-footer ( border-top: 1px solid #EBEBE3; border-bottom: 1px solid #EBEBE3; position: relativní; margin-top: 15px; ) .more-link ( pozice: relativní ; zobrazení: vložený blok; velikost písma: 10px; transformace textu: velká písmena; barva: bílá; výška řádku: 44px; odsazení: 0 22px; pozadí: #3C3D41; mezera mezi písmeny: 0. 1 em; white-space: nowrap; ) .more-link:after ( content: ""; display: block; position: absolute; width: 0; height: 0; top: 0; right: 0; border: solid transparent; border-width: 22px 18px; border -left-color: #3C3D41; transform: translateX(100%); ) .post-social (position: absolute; left: auto; top: 50%; right: 0; text-align: right; transform: translateY(- 50 %); padding: 0; font-size: 12px; ) .post-social a ( display: inline-block; margin-left: 8px; color: #F8B763; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 50%; border: 1px solid; ) 9. Styly pro postranní sloupec /* pravý kontejner */ stranou ( šířka: 33 %; plovoucí: vpravo; ) /* blok pro widgety */ .widget ( padding: 20px 15px; background: white; font-size: 13px; margin-bottom: 30px; box-shadow: 3px 3px 1px rgba(0,0,0,.05); ) .widget- title ( font-size: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid #F8B763; box-shadow: 3px 3px 0 0 #F8B763; ) .widget-category-list li ( border-bottom: 1px solid #EBEBE3; odsazení: 10px 0; barva: #c6c6c6; styl písma: kurzíva; ) .widget-category-list li:last-child ( border-bottom: none; ) .widget-category-list li a ( color: #626262; margin-right: 6px; font-style: normal; ) .widget- category-list li a:before ( content: "\f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; color: #c6c6c6; ) .widget-posts-list li ( border -top: 1px solid #EBEBE3; padding: 15px 0; ) .widget-posts-list li:nth-child(1) ( border-top: none; ) .post-image-small ( width: 30%; float: left; margin-right: 15px; ) .widget-post-title ( float: left; ) /* formulář odběru */ #subscribe ( position: relativní; šířka: 100 %; padding: 15px 0; ) #subscribe input ( width : 100 %; zobrazení: blok; plovoucí: vlevo; ohraničení: 2px plné #EBEBE3; výplň: 0 0 0 10px; výška: 40px; pozice: relativní; obrys: žádný; barva: #9E9C9C; styl písma: kurzíva; ) #tlačítko odběru ( odsazení: 0 15px; pozadí: průhledné; výška: 40px; ohraničení: žádné; pozice: absolutní; vpravo: 0; barva: #EF5A42; kurzor: ukazatel; velikost písma: 18px; ) #subscribe input: focus + tlačítko ( pozadí: #EF5A42; barva bílá; ) 10. Styly zápatí

Zápatí webu rozdělíme do tří stejných sloupců:

Zápatí ( padding: 30px 0; background: #3C3D41; color: white; ) .footer-col ( width: 33.3333333333 %; float: left; ) .footer-col a ( color: white; ) .footer-col:last- dítě ( text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

11. Media queries @media (max-width: 768px) ( /* zobrazit tlačítko pro přepínání horní navigace */ .nav-toggle ( display: block; ) header ( padding: 10px 0; ) /* skrýt horní nabídku , zrušit zalamování, umístit jej, přesunout na výšku záhlaví webu */ #menu ( max-height: 0; pozadí: bílé; plovoucí: žádné; pozice: absolutní; přetečení: skryté; nahoře: 63px; vpravo: 0 ; left: 0; margin : 0; padding: 0; z-index: 3; ) /* vytvoří prvky seznamu ve tvaru bloku tak, aby byly umístěny pod sebou */ #menu li ( display: block; text- align: center; border-bottom: 1px solid # EBEBE3; margin-right: 0; ) /* zrušit zalamování levého a pravého sloupce, nastavit jejich šířku na 100 % */ .posts-list, aside ( width: 100 %; float: none; ) .widget-post-title (font -velikost: 1,5em; ) ) @media (max-width: 480px) ( /* zrušit obal loga a zarovnat na střed */ .logo ( float: none; margin: 0 auto 15px; display: table; ) .logo span ( margin: 0 2px; ) /* umístěte nabídku do zvýšené výšky záhlaví */ #menu ( top: 118px; ) /* umístěte vyhledávací formulář doleva */ #searchform ( float: left; margin-left: 0; ) /* odstraňte horní a dolní ohraničení a zarovnejte tlačítko na střed */ .post-footer ( border- top: none; border-bottom: none; text-align: center; ) /* zrušit umístění tlačítek sociálních médií */ .post-social ( position: static; text-align: center; transform: none; margin-top : 20px; ) .widget- post-title ( font-size: 1.2em; ) /* zrušit zalamování sloupců zápatí stránky */ .footer-col ( float: none; margin-bottom: 20px; width: 100%; text -align: center; ) . footer-col:last-child ( text-align: center; margin-bottom: 0; ) ) 12. Skript pro mobilní nabídku

Kód jQuery, který jsme dříve přidali do označení stránky před uzavírací značku, je zodpovědný za zobrazení a skrytí horní nabídky po kliknutí na tlačítko (výška nabídky se přepne z nuly na její obsah):

$(".nav-toggle").on("click", function())( $("#menu").toggleClass("active"); ));

Od autora: od chvíle, kdy se na internetu začaly objevovat články demonstrující nové vlastnosti HTML5 a CSS3, mě napadlo vytvořit rozvržení webu bez obrázků. S využitím vylepšení v HTML5 a CSS3 (oproti předchozím úctyhodným specifikacím) není příliš obtížné sestavit slušně vypadající web, který se nemusí při označování spoléhat na obrázky.



Zde je obrázek webu, který navrhneme pomocí HTML5 a CSS3:



Než začneme s praktickými kroky, doporučuji si prohlédnout ukázkový výsledek práce.

Element záhlaví představuje úvodní skupinu nebo navigační pomůcky.

Na základě jejich doporučení bude prvek záhlaví obsahovat naše logo, podnadpis a hlavní navigaci. Když zadáme element header header, máme detail označení obsahující všechny ty části stránky, které intuitivně považujeme za záhlaví. (Nebo všechny ty detaily stránky, které budou vnořeny do prvku div s ID hlavičky.) Prvek hlavičky lze na stránce použít vícekrát a znovu ho použijeme uvnitř prvků článku, které budou obsahovat úvody k příspěvkům.

Prvek Hgroup

První uvnitř elementu header je další nový tag, hgroup. Použijeme jej k zobrazení loga a titulků našeho webu ve značkách h1 a h2.

Prvek hgroup se používá k seskupení sady prvků h1-h6, pokud má nadpis více úrovní, jako jsou titulky, alternativní nadpisy nebo podnadpisy.

Prvek hgroup může vypadat nadbytečně, pokud nezabalíte nadpisy do prvku div jako obvykle, takže nadpis nebo podnadpisy mají normální pozadí nebo styl. Hgroup však hraje důležitou roli ve schématu dokumentu. Algoritmus schématu zkontroluje vaši stránku a nahlásí strukturu záhlaví. Zkontrolujte obrys své práce pomocí nástroje Outliner. Když algoritmus schématu narazí na prvek hgroup, bude ignorovat vše kromě nadpisu nejvyšší úrovně (obvykle h1).

Nyní máme problém: obvodový algoritmus není dokonalý a není úplný. Například dalším prvkem, o kterém budeme diskutovat, je prvek nav a označení jej označí jako „Sekce bez názvu“. Vývojáři značek požadovali změnu algoritmu schématu tak, aby prvek navigace reprezentoval jako „Navigace“. V každém případě vám prvek hgroup poskytuje způsob, jak seskupit vaše nadpisy a uspořádat je tak strukturálně i sémanticky.

Nav prvek

Přejdeme k dalšímu prvku HTML5, nav. V navigaci zahrneme hlavní navigaci webu zabalenou do neuspořádaného seznamu.

Element nav představuje část stránky, která odkazuje na jiné stránky nebo oblasti na stránce: oblast s navigačními odkazy.

Použití navigace k vytvoření hlavní navigace na webu je něco samozřejmého, ale okolnosti jsou takové, že na vašem webu bude více oblastí, které obsahují odkazy; otázkou je, které z nich byste měli obalit navigačním tagem. Zde je několik případů použití, o kterých si myslím, že by mohly být vhodné:

Související příspěvky.

Podle specifikace se může, ale nemusí jednat o vhodná použití navigačního prvku. Specifikace není příliš jasná a uvedené příklady nejsou příliš užitečné. I když tedy specifikace není konečná a konkrétnější, můžete se spolehnout pouze na vývojářskou komunitu, která určí správnou metodu použití prvku nav.

Prvek článku

Dalším prvkem, který vám chci představit, je článek. Hlavní oblast naší ukázkové stránky obsahuje tři uvozovky příspěvků a každou z nich zabalíme do značky článku.

XHTML

2010 16. dubna Ukázka příspěvku 1 38

Curabitur ut congue hac, diam turpis[…]

Napsal: Autor jmenovky: chladnýmoderníhumbuk přátelský Pokračovat ve čtení

2010 16. dubna Ukázkový příspěvek 1 38 Curabitur ut congue hac, diam turpis[…] Napsal: Jméno autora Štítky: chladný moderní humbuk přátelský Pokračovat ve čtení

Zde je definice W3C pro prvek článku:

Prvek článku představuje modulární složení v dokumentu […], takže je určen k samodistribuci nebo opětovnému použití, například v syndikaci (současné publikování obsahu na více webových stránkách).

Tentokrát je specifikace jasnější a blogový příspěvek (nebo úryvek) je mnohem lepší ( všimněte si zmínky o syndikaci) přejde na článek. Na stránku můžeme samozřejmě umístit mnoho prvků článku.

Nepochybně jste si všimli, že uvnitř článku jsme umístili prvky záhlaví a zápatí. Záhlaví i zápatí lze na jedné stránce HTML použít vícekrát. Protože záhlaví je „úvodní skupina nebo navigační pomůcka“, zahrnuli jsme datum, název a počet komentářů. Dále tu máme odstavec s úryvkem z příspěvku a za ním zápatí.

Prvek zápatí

Jak jsem řekl dříve, zápatí lze na jedné stránce použít tolikrát, kolikrát je potřeba, a představuje segment zápatí stránky dokumentu nebo části dokumentu.

Prvek zápatí představuje zápatí sekce, ke které přistupuje. Zápatí obvykle obsahuje informace o své sekci, jako je autorství, odkazy na související dokumenty, datum autorských práv atd.

Na naší ukázkové stránce máme čtyři prvky zápatí: jeden pro každý ze tří prvků článku a společné zápatí pro celou stránku. Zápatí prvku článku obsahuje jméno autora příspěvku, značky a tlačítko odkazu na celý příspěvek na blogu.



Obecné zápatí obsahuje tři části oddílu a upozornění na autorská práva. Obě použití prvku zápatí jsou legální a splňují doporučení W3C.

Prvek sekce

Obecná oblast zápatí naší ukázkové stránky obsahuje tři prvky sekce. V nich uvádíme naše nejoblíbenější blogové příspěvky, nedávné komentáře a krátkou biografii naší fiktivní společnosti.

Prvek sekce představuje obecnou oblast dokumentu nebo aplikace. Sekce je v tomto případě tematické seskupení obsahu, obvykle pomocí nadpisu.

Element section je poměrně složitý, protože ve své specifikační definici se zdá velmi podobný prvku div. Spadl jsem do této pasti, když jsem začal kódovat demo stránku; Do prvku sekce jsem umístil tři prvky článku. Brzy jsem si uvědomil chybu svých metod. Jediný způsob, jak se rozhodnout, zda použít sekci, je zjistit, zda oblast, kterou chcete zalomit prvkem sekce, potřebuje název. Z definice můžete vidět, že prvek sekce má obvykle nadpis.

Další otázka, kterou je užitečné položit k určení platnosti použití prvku sekce, je: přidáváte jej pouze pro účely stylingu? Přidáváte jej jednoduše proto, že potřebujete, aby sekce vynikla pomocí JavaScriptu, nebo proto, že na ni potřebujete použít běžný styl a místo toho potřebujete použít prvek div.

Zabalit tři prvky článku naší ukázkové stránky do značky sekce by dávalo smysl, pokud by sekce obsahovala název jako „Nejnovější příspěvky na blogu“. Dávalo by to smysl; jinak značka, která obsahuje prvky článku, je pouze podporou stylů – něco, co nám pomáhá na ni cílit pomocí JavaScriptu nebo CSS.

Vedlejší prvek

Poslední prvek HTML5 použitý pro ukázkovou stránku je stranou; použili jsme ho jako kontejner na postranním panelu.

Prvek aside představuje část stránky sestávající z obsahu, který povrchně souvisí s obsahem obklopujícím stranu a který lze vnímat jako oddělený od tohoto obsahu. Takové sekce jsou často v typografii reprezentovány jako postranní panely.

Jak je patrné ze specifikace, příkladem ideálního použití prvku aside je postranní panel. Níže v grafu můžete vidět hierarchii prvku aside na naší demo stránce.



Umístili jsme dvě sekce a jednu nav. První prvek sekce obsahuje odkazy na Twitter a RSS a druhý představuje nejnovější tweet (příspěvek uživatele na Twitteru). Druhý prvek sekce je také jedním z mála případů, kdy nemá název. Mohlo by to mít název, něco jako „Poslední tweet“, ale nemyslím si, že je to nutné, protože čtenáři jsou zvyklí vídat takové bloky a značka Twitteru pod citací je velmi dobře rozpoznatelná. Náš navigační prvek bočního panelu slouží k zobrazení seznamu blogů a na rozdíl od hlavní navigace má nadpis.

Poslední slovo

První část našeho článku o rozložení webu v HTML5 a CSS3 je tedy u konce. Snažil jsem se, aby to bylo co nejkratší a netrávil jsem příliš mnoho času nejistotami ve specifikaci HTML5, protože ještě není dokončen. Mezitím se budeme muset spolehnout na komunitu a práci „léčitelů“ HTML5, kteří se stanou našimi průvodci při zavádění nových prvků na stránky.

Děkujeme za přečtení a nenechte si ujít 2. část tohoto článku, kde probereme vlastnosti CSS3 používané ke zdobení značek.

Jako vždy se těším na případné dotazy či připomínky. Nebojte se prosím ozvat a zahájit diskuzi o využití nových prvků, protože tak si nejlépe vyjasníte jejich užitečnost.



Střih: Rog Victor a Andrey Bernatsky. tým webformyself.

Bez HTML5 a CSS3 se daleko nedostanete

Moderní webové stránky a vývoj webu si již nelze představit bez HTML5 a CSS3, ať se na to díváte jakkoli.
Každý projekt, každý zákazník vyžaduje validní, cross-browser a moderní layout v HTML5 a CSS3 a musí být přizpůsoben pro mobilní zařízení.
Pokud umíte kódovat v HTML5 a CSS3 a přizpůsobíte projekt pro mobilní zařízení, můžete si klidně prodražit hodinu své práce.
No, pokud si vytváříte web pro sebe, pak vám tyto znalosti pomohou, aby byl lepší, funkčnější a pohodlnější. Zpravidla to má za následek nárůst pozic, zvýšení návštěvnosti a tím i příjmu.

Víš, že...

Nyní ve výsledcích vyhledávání (v TOP 10) Yandexu tvoří 55 % stránky s adaptivním designem, které se mohou přizpůsobit mobilním zařízením. To naznačuje, že Yandex (a také Google) dává větší přednost webům s responzivním designem. Tito. takové, na kterých se uživatel cítí pohodlně.
A HTML5 a CSS3 přidávají na web další funkce, se kterými můžeme web ještě více zpříjemnit.
Pro uživatele i roboty.
Vstupní stránka (vstupní stránka) se používá k přeměně návštěvníků na předplatitele nebo klienty.
Někdy se také používá pro segmentaci provozu.
Vstupní stránka může být buď jedna samostatná stránka na doméně, nebo jako součást plnohodnotného webu.
V tomto případě je web propagován ve vyhledávání a vstupní stránka se používá pro reklamu v Yandex.Direct, Google Adwods, Target VKontakte atd.
Tato kombinace vám umožňuje maximálně využít mnoho nástrojů internetového marketingu.
Nyní je zde možnost se to vše rychle naučit a uplatnit ve svých aktivitách.

HTML5 + CSS3 + responzivita + vstupní stránka
Díky tomuto kurzu budete schopni:

vytvářet responzivní weby a stránky
přizpůsobit je pro mobilní zařízení
používat možnosti HTML a CSS ve svých vlastních nebo klientských projektech
vytvořit libovolnou vstupní stránku: snímací stránky, stránky předplatného, ​​vstupní stránky produktů atd.
přidat na vstupní stránku různé efekty a skripty
vytvářet a používat pokročilé formuláře zpětné vazby a mnoho dalšího.
S tímto video kurzem to nebude vůbec těžké!

Shrnutí kurzu

Úvodní část

Nové funkce v HTML5 a CSS 3, které zjednodušují a usnadňují proces rozvržení.
Sémantické značení – jeho tajemství a proč je potřeba.
Vkládání mediálních objektů – jak vložit zvuk a video bez přehrávače.

Praktická část

Vytvoření vstupní stránky krok za krokem.
Od plánování rozvržení, rozvržení každého bloku různé složitosti, až po propojování skriptů a PHP handlerů pro formuláře
Carousel/slider, plynulé rolování, tlačítka, CSS sprites, ověřování formulářů atd.

Přidat. materiálů

Doplňkové materiály obsahují všechny skripty a zdroje, se kterými budeme pracovat + cheat sheets s kódem, který stačí zkopírovat a vložit na správné místo.
Stejně jako další užitečné zdroje.
Počet videolekcí: 23

Co budete po absolvování tohoto kurzu umět?

Připravuje se

Porozumění rozložení PSD pomocí PhotoShopu
Vystřihněte požadované obrázky z rozvržení PSD
Najděte krásné návrhy vstupní stránky a webových stránek
Návrhové bloky a fáze rozvržení
Sloučit ikony do skřítků CSS
Práce s PhpDesignerem

Z hlediska rozložení

Připojte krásná písma z úložiště Google
Používejte pseudotřídy efektivně
Přizpůsobte web všem mobilním zařízením
Použijte 2 nebo více pozadí pro blok, animaci, transformaci, RGBA atd.
Práce s @media dotazy
Vložte interaktivní mapy Yandex
Vytvářejte CSS sprity a urychlete načítání stránek
Používejte předem navržené styly (podobné frameworkům jako Bootstrap)

Z hlediska zlepšení

Vytvářejte efekty visení („oživení“ při vznášení)
Proveďte plynulé rolování na bloky a na tlačítko "Zpět na začátek".
Ověřte formuláře zpětné vazby pomocí JQuery
Vytvářejte chytré formuláře zpětné vazby s přenosem značek UTM
Připojte a nakonfigurujte cíle v Ya.Metrica pomocí událostí
Usnadněte stránky tím, že se budou načítat rychleji
Zkontrolujte a opravte vady na stránkách

Moderní webové stránky a vývoj webu si již nelze představit bez HTML5 a CSS3, ať se na to díváte jakkoli. Každý projekt, každý zákazník vyžaduje validní, cross-browser a moderní layout v HTML5 a CSS3 a musí být přizpůsoben pro mobilní zařízení. Pokud umíte kódovat v HTML5 a CSS3 a přizpůsobíte projekt pro mobilní zařízení, můžete si klidně prodražit hodinu své práce. No, pokud si vytváříte web pro sebe, pak vám tyto znalosti pomohou, aby byl lepší, funkčnější a pohodlnější. Zpravidla to má za následek nárůst pozic, zvýšení návštěvnosti a tím i příjmu.

dodatečné informace

Úvodní část

0. Úvodní video
O kurzu a jak jej používat

1. HTML5. Sémantické označení
O nových značkách: záhlaví, navigace, sekce, stranou, článek atd.

2. HTML5. Mediální objekty
Vkládání videa a zvuku bez dalších přehrávačů + atributů.

3. HTML5. formuláře
Práce s formuláři v HTML5 + nové typy polí.

4. HTML5. Jiné možnosti
Příklady implementace dalších funkcí v HTML5

5. CSS3. Nové vlastnosti v CSS3
Lineární přechody, poloměry, průhlednost, stíny, transformace, animace.

Praktická část

1. Rozložení a zdroj PSD
Seznámení se zdrojem PSD a načrtnutí budoucího rozvržení

2. Rozložení záhlaví
Výpočet adaptivních rozměrů a rozložení záhlaví + vzorec pro výpočet EM a %

3. Rozložení bloku "Služby".
Plánování etap, příprava obrazu a rozložení bloků.

4. Uspořádání bloku "Portfolio".
Plánování, dvojité třídy a rozložení.

5. Blok "Portfolio": efekty přechodu
Vytváření efektu přechodu při najetí na prvky pomocí CSS3.

6. Rozložení bloku „O nás“.
Rozložení složitého bloku s umístěním a pseudotřídami.

7. Rozložení bloku „Náš tým“.
Příprava a rozložení bloku + tvorba CSS sprajtů

8. Rozložení bloku "Partneři".
Rozložení bloku a vložení obrázkového karuselu pomocí JQuery

9. Vložení mapy Yandex
Vložte interaktivní mapu Yandex v plné šířce.

10. Uspořádání formuláře zpětné vazby
Plánování etapy, vytvoření formuláře s novými typy polí.

11. Blok s autorskými právy
Rozvržení bloku copyright, rozšíření sprite CSS, vkládání data v PHP

12. Zlepšení a revize
Přidání funkce hladkého posouvání do bloků a tlačítka „Zpět na začátek“ (3 možnosti)

13. Vylepšení a revize část 2
Validace polí ve formuláři zpětné vazby (přes JS) + ochrana proti SPAM botům

14. Adaptace pro mobilní zařízení
Adaptace pro obrazovky tabletů a mobilních telefonů + práce s FireBugem

15. Adaptace pro mobilní zařízení část 2
Druhá část adaptačního videa.

16. PHP manipulátor formuláře
Vytvoření obslužného skriptu v PHP pro formulář zpětné vazby.

17. Formulář chytré zpětné vazby
Propojení skriptu pro formulář zpětné vazby s přenosem UTM tagů a zápisem do CSV souboru.

18. Převod na hosting a ověření
Přenesení cílové stránky na hosting přes FTP, kontrola, zrychlení a stanovení cíle v Yandex.Metrica.

Chytré telefony se stávají nedílnou součástí života, takže podíl mobilního provozu neustále roste. Rozvržení v HTML5 a CSS3 umožňuje přizpůsobit stránky prohlížeče desktopů rozhraní mobilních médií. Videokurz adaptivního rozvržení byl vytvořen tak, abyste zvládli profesionální prostředí a učinili svůj web pohodlnějším.

Autor kurzu „Adaptivní rozvržení v HTML5 a CSS3“ Oleg Kasyanov je zkušený webový vývojář, zakladatel internetového zdroje JoomlaTown.net, blogger a tvůrce školicích programů pro začátečníky i zkušené profesionály.

Adaptivní tvorba webových stránek - školení

Každá videolekce je doplněna vysvětlujícím komentářem autora. Dozvíte se o funkcích používání technologií HTML5 a CSS3, zlepšíte své vývojářské dovednosti a také se naučíte, jak vytvořit vlastní layout.

Videokurz Olega Kasjanova se skládá z teoretických základů, praxe a doplňkových materiálů. Obdržíte odpovědi na následující otázky:

• jaká je funkčnost v rozložení HTML5 a CSS3;
• co je sémantické označení;
• jak pracovat s různými typy mediálních objektů;
• jaké jsou fáze vytváření vstupních stránek;
• proč je důležité kombinovat typy formulářů stránek a vizualizací;
• hlavní potíže s vytvářením mobilní verze webu.

Kurz „Adaptivní rozvržení v HTML5 a CSS3“ doprovázejí šablony pro práci, skripty a cheat sheets s kódem. Oleg značně usnadňuje proces učení, díky čemuž skutečně zvládnete práci s HTML5 a CSS3 několikanásobně rychleji.

Adaptivní rozvržení HTML5 a CSS3

Výsledky absolvování kurzu na sebe nenechají dlouho čekat: naučíte se analyzovat současnou situaci, uvidíte design budoucího webového zdroje a také provedete užitečné změny. Kurz Olega Kasjanova vám pomůže zvládnout adaptivní rozvržení v HTML5 a CSS3.