Prilagodljivi izgled web stranice omogućava da se web stranice automatski prilagode ekranima tableta i pametnih telefona. Promet mobilnog interneta raste svake godine, a da biste efikasno obrađivali ovaj promet, potrebno je korisnicima ponuditi responsive web stranice sa korisničkim sučeljem.

Pretraživači koriste brojne kriterije za procjenu odziva web lokacije kada se gleda na mobilnim uređajima. Google pokušava da pojednostavi korištenje interneta za vlasnike pametnih telefona i tableta označavajući stranice prilagođene mobilnim uređajima posebnom oznakom mobile friendly u rezultatima pretraživanja na mobilnim uređajima. Yandex također ima algoritam koji daje prednost stranicama s mobilnom/responzivnom verzijom za korisnike u mobilnoj pretrazi.

Prikaz stranice na mobilnim uređajima možete provjeriti na servisima i.

Rice. 1. Rezultati mobilnog pretraživanja od Yandexa i Googlea s napomenom o prilagođenosti stranice mobilnim uređajima Šta je prilagodljivi izgled?

Prilagodljivi izgled pretpostavlja odsustvo horizontalne trake za pomicanje i skalabilnih područja kada se gleda na bilo kojem uređaju, čitljiv tekst i velika područja za elemente na koje se može kliknuti. Koristeći medijske upite, možete kontrolirati izgled i postavljanje blokova na stranici, preuređujući predložak tako da se prilagođava različitim veličinama ekrana uređaja.

U članku su date osnovne tehnike za izradu responzivne web stranice. Za responzivni dizajn, širina glavnog kontejnera web mjesta je postavljena u % i može biti jednaka 100% širine prozora pretraživača ili manje. Širina kolona mreže je također navedena u %. U responzivnom dizajnu, širina glavnog kontejnera i stupaca mreže je fiksirana pomoću px vrijednosti.

Tehnika adaptivnog fluidnog rasporeda o kojoj se govori u ovoj lekciji savršeno će raditi na predlošku s dvije kolone, čineći stranicu prilagodljivom i pogodnom za gledanje na mobilnim uređajima. Predložak pretpostavlja drugačiji izgled glavnog sadržaja stranica u ovoj lekciji će se raspravljati o izgledu glavne stranice.

Izgled početne stranice

Stranica se sastoji od tri glavna bloka: zaglavlja (header), kontejnera omotača za glavni sadržaj i bočnu traku i podnožja (footer). Uzmimo 768px i 480px kao prekretnice dizajna.

U prvoj tački ćemo sakriti gornji meni i pomeriti bočnu traku ispod kontejnera sa objavama. U drugoj tački, promijenit ćemo lokaciju elemenata zaglavlja, otkazati pozicioniranje dugmadi društvenih mreža u objavama i otkazati prelamanje stupaca podnožja stranice.

Rice. 2. Primjer prilagodljivog izgleda 1. Meta tagovi i odjeljak

1) Dodajte potrebne datoteke u odjeljak - link do korištenih fontova, jQuery biblioteku, kao i dodatak bez prefiksa (kako ne biste pisali prefikse pretraživača za svojstva):

Prilagodljivi izgled web stranice

2. Zaglavlje stranice

Sljedeće elemente kontejnera ćemo postaviti u zaglavlje stranice:
logo ;
dugme za prikaz/sakrivanje glavnog menija;
glavni meni

;
obrazac za pretragu sajta.

L O G O

• Blog
• Portfolio
• O autoru
3. Blok sa sažetkom članka

Umotat ćemo najavu članaka sa elementom:

Design Spring

Ruski jezik je veoma bogat riječima koje se odnose na godišnja doba i prirodne pojave koje su s njima povezane.

Nastavite čitati ...
4. Bočna traka

U bočnu kolonu ćemo dodati listu kategorija, nedavne objave i obrazac za pretplatu na bilten:

Kategorije

• Dizajn (2)
• Layout (5)
• video (1)
Najnovije postove
• Ljeto
• Jesen
Pretplatite se na newsletter
5. Podnožje

U podnožje stranice postavićemo informacije o autorskim pravima, dugmad društvenih mreža i link e-pošte:

Moj blog © 2016 Napišite slovo $(".nav-toggle").on("click", function())( $("#menu").toggleClass("active"); ));

6. Opšti CSS stilovi

Opšti stilovi, resetirajte stilove pretraživača na zadane:

*, *:posle, *:prije (dimenzija okvira: okvir-kutija; padding: 0; margina: 0; prijelaz: .5s jednostavnog ulaska; /* dodajte glatke prijelaze za sve elemente stranice */ ) ul ( list-style: nema ) a (tekst-dekoracija: nema; ) img (prikaz: blok; širina: 100%; ) h1, h2, h3, h4, h5, h6 (familija fontova: "Playfair"); Display"; težina fonta: normalna; razmak između slova: 1px; ) tijelo (familija fontova: "Open Sans", arial, sans-serif; veličina fonta: 14px; visina linije: 1; boja: #373737; background: #f7f7f7 ) /* dodaj čišćenje toka za sve kontejnere koji imaju podređene elemente umotane unutar njih */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after; ( sadržaj: ""; display: table; clear: oboje; ) /* klasa stila koja kontroliše širinu mrežnog kontejnera */ .container ( margina: 0 auto; širina: 100%; max-width: 960px; padding: 0 15px ;

7. Stilovi zaglavlja i zaglavlja njegovog sadržaja (širina: 100%; pozadina: bijela; senka okvira: 3px 3px 1px rgba(0,0,0,.05); padding: 15px 0; margin-bottom: 30px; pozicija : relativna ) /* logo */ .logo (prikaz: blok; float: lijevo; ) .logo raspon (boja: bijela; prikaz: inline-block; širina: 30px; visina: 30px; visina linije: 30px; granica -radijus: 50px 0: 2px 1px rgba(0,0,0,4); .logo span:nth-child(even) (pozadina: #F8B763; ) /* meni */ #menu ( float: desno; ) #menu li ( display: inline-block; margin-right: 30px; ) #menu a ( boja: #111; transformacija teksta: velika slova; razmak između slova: 1px; težina fonta: 600; prikaz: blok; visina linije: 40px; ) #menu a:hover ( boja: #EF5A42; ) #menu li :last-child ( margin-right: 0; ) /* obrazac za pretragu */ #searchform ( float: desno; margin-left: 46px; display: inline-block; position: relative; ) #searchform input ( width: 170px; float: left: nema padding-left: 10px; visina: 40px; overflow: skriveno; obris: nema; boja: #9E9C9C; stil fonta: kurziv; ) Dugme #searchform (pozadina: prozirna; visina: 40px; granica: nema; pozicija: apsolutna; desno: 10px; boja: #EF5A42; kursor: pokazivač; veličina fonta: 18px; ) #searchform input:focus (outline: 2px solid #EBEBE3 ) /* dugme za prebacivanje menija koje se pojavljuje na širini od 768px */ .nav-toggle (prikaz: nema; položaj: relativan; float: desno; širina: 40px; margina-levo: 20px; pozadina: #EF5A42; kursor: pokazivač ) .nav-toggle span (displej: blok; položaj: 19px; lijevo: 8px; visina: 2px; pozadina: bijela; ) .nav-toggle span:before; , .nav-toggle span:after ( sadržaj: ""; pozicija: apsolutna; prikaz: blok; lijevo: 0; širina: 100%; visina: 2px; pozadina: bijela; ) .nav-toggle span:before ( vrh: -10px ) .nav-toggle span:after ( bottom: -10px; ) /* klasa koja će biti dodata u gornji meni kada se klikne na dugme i prikazaće skriveni meni */ #menu.active (max-height); : 123px ) 8. Stilovi za glavni blok sadržaja /* lijevi kontejner */ .posts-list ( margin-bottom: 30px; širina: 64%; float: lijevo; ) /* blok za članak */ .post ( margin-bottom: 35px; ) .post-content p ( line-height: 1.5; padding-bottom: 1em; ) .post-image ( margin-bottom: 30px; ) .kategorija ( margin-bottom: 15px; ) .category a (boja: #F8B763; text-transform: uppercase; ) .post-title ( margin-bottom: 12px; font-size: 26px; ) /* blok sa ". nastavi "čitanje dugmeta" i dugmad društvenih mreža */ .post-footer ( border-top: 1px solid #EBEBE3; border-bottom: 1px solid #EBEBE3; position: relative; margin-top: 15px; ) .more-link ( položaj: relativni : inline-block: velika slova: 0 22px; 1em; razmak: nowrap; ) .more-link:after ( sadržaj: ""; prikaz: blok; pozicija: apsolutna; širina: 0; visina: 0; vrh: 0; desno: 0; ivica: čvrsta prozirna; granica-širina: 22px 18px; ivica -left-color: #3C3D41 transform: translateX(100%) .post-social (pozicija: apsolutna; lijevo: auto; gore: 50%; desno: 0; text-align: desno; transform: translateY(- 50); %; veličina fonta: 12px; text-align: center-radius: 50% border: 1px solid */ .widget (padding: white; font-size: 30px); 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; padding: 10px 0; boja: #c6c6c6; stil fonta: kurziv; ) .widget-category-list li:last-child ( border-bottom: none; ) .widget-category-list li a ( boja: #626262; margin-right: 6px; font-style: normal; ) .widget- kategorija-list li a:before ( sadržaj: "\f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; boja: #c6c6c6; ) .widget-posts-list li ( granica -top: 1px solid #EBEBE3: 15px 0 ) .widget-posts-list li:nth-child(1) ( border-top: none; ) .post-image-small (širina: 30%; float: float; left margin-right: 15px .widget-post-title (float: left; ) /* obrazac za pretplatu */ #subscribe (pozicija: relativna; širina: 100%; padding: 15px 0; ) #subscribe input (širina:); 100% float: font-style: 0 0 10px #subscribe button (padding: 0 15px; background: visina: 40px; border: none; right: 0; color: #EF5A42; : pointer-size: 18px ) #subscribe input: fokus + dugme (pozadina: #EF5A42; boja: bijela; ) 10. Stilovi podnožja

Podnožje stranice dijelimo u tri jednake kolone:

Podnožje ( padding: 30px 0; pozadina: #3C3D41; boja: bijela; ) .footer-col (širina: 33,3333333333%; float: lijevo; ) .footer-col a (boja: bijela; ) .footer-col:last- dijete ( text-align: right; ) .social-bar-wrap (text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

11. Medijski upiti @media (max-width: 768px) ( /* prikazuje dugme za prebacivanje gornje navigacije */ .nav-toggle ( display: block; ) header ( padding: 10px 0; ) /* sakriva gornji meni , otkažite prelamanje, pozicionirajte ga, pomjerite ga na visinu zaglavlja web-mjesta */ #menu ( maks. visina: 0; pozadina: bijela; float: nema; pozicija: apsolutna; prelijevanje: skriveno; vrh: 63px; desno: 0 lijevo: 0, z-indeks: 3 ) /* čine elemente liste locirani jedan ispod drugoga (display: block); border-bottom: 1px solid # EBEBE3 ) /* poništiti prelamanje lijevog i desnog stupca, postaviti njihovu širinu na 100% */ .posts-list, aside ( width: 100%; float; : none ) .widget-post-title (font-size: 1.5em; ) ) @media (max-width: 480px) ( /* otkažite prelamanje za logotip i poravnajte ga sa središtem */ .logo (float) : nema margine: 0 auto 15px display: table ) .logo span (margina: 0 2px; ) /* pozicioniranje menija na povećanu visinu zaglavlja */ #menu (top: 118px; ) /* pozicionirajte obrazac za pretragu na lijevo */ #searchform ( float: lijevo; margin-left: 0; ) /* uklonite gornju i donju ivicu i poravnajte dugme sa središtem */ .post-footer ( border- vrh: bez granica: bez poravnanja teksta ) /* otkažite pozicioniranje dugmadi na društvenim mrežama */ .post-social (položaj: statički; poravnanje teksta: bez; margina-top; : 20px;) .widget-post-title (font-size: 1.2em; ) /* otkažite prelamanje za stupce podnožja stranice */ .footer-col (float: none; margin-bottom: 20px; width: 100%; text; text). -align: center ) 12. Skripta za mobilni meni.

jQuery kod koji smo prethodno dodali u oznaku stranice prije završne oznake odgovoran je za prikazivanje i skrivanje gornjeg menija kada se klikne na dugme (visina menija se mijenja - od nule do jednake njegovom sadržaju):

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

Od autora: otkako su se na internetu počeli pojavljivati ​​članci koji pokazuju nova svojstva HTML5 i CSS3, pala mi je ideja da napravim izgled web stranice bez slika. Koristeći prednosti poboljšanja u HTML5 i CSS3 (u odnosu na prethodne vrijedne specifikacije), nije previše teško sastaviti web stranicu pristojnog izgleda koja se ne mora oslanjati na slike za označavanje.



Evo slike stranice koju ćemo dizajnirati koristeći HTML5 i CSS3:



Prije nego što počnemo s praktičnim koracima, preporučujem da pogledate demo rezultat rada.

Element zaglavlja predstavlja uvodnu grupu ili navigaciona pomagala.

Nakon njihove preporuke, element zaglavlja će sadržavati naš logo, podnaslov i glavnu navigaciju. Kada unesemo element zaglavlja zaglavlja, imamo detalj za označavanje koji sadrži sve one dijelove stranice koje intuitivno smatramo zaglavljem. (Ili svi oni detalji stranice koji će biti ugniježđeni u elementu div sa ID-om zaglavlja.) Element zaglavlja se može koristiti više puta na stranici, a mi ćemo ga ponovo koristiti unutar elemenata članka, koji će sadržavati uvode u postove.

Hgroup element

Prvo unutar elementa zaglavlja nalazi se još jedna nova oznaka, hgroup. Koristit ćemo ga za prikaz logotipa i podnaslova naše stranice u oznakama h1 i h2.

Element hgroup se koristi za grupisanje skupa elemenata h1-h6 kada naslov ima više nivoa, kao što su titlovi, alternativni naslovi ili podnaslovi.

Element hgroup može izgledati suvišno osim ako naslove ne umotate u div element kao i obično tako da naslov ili podnaslov(i) imaju normalnu pozadinu ili stil. Međutim, hgroup igra važnu ulogu u šemi dokumenta. Algoritam šeme provjerava vašu stranicu i izvještava o strukturi zaglavlja. Provjerite nacrt svog rada pomoću alata Outliner. Kada algoritam šeme naiđe na element hgroup, zanemarit će sve osim naslova najvišeg nivoa (obično h1).

Sada imamo problem: algoritam kola nije savršen i nije potpun. Na primjer, sljedeći element o kojem ćemo raspravljati je navigacijski element, a oznaka ga označava kao "Nenaslovljeni odjeljak". Bilo je zahtjeva od strane programera za označavanje da se promijeni algoritam sheme kako bi se navigacijski element predstavio kao "Navigacija". U svakom slučaju, element hgroup vam pruža način da grupišete svoje naslove i tako ih organizirate i strukturno i semantički.

Nav element

Prelazimo na sljedeći HTML5 element, nav. U nav ćemo uključiti glavnu navigaciju stranice, umotanu u neuređenu listu.

Nav element predstavlja dio stranice koji povezuje na druge stranice ili područja unutar stranice: područje sa navigacijskim vezama.

Korištenje navigacije za kreiranje glavne navigacije web-mjesta je nešto dato, ali okolnosti su takve da će na vašoj web lokaciji biti više područja koja sadrže veze; pitanje je koje biste trebali omotati navigacijskom oznakom. Evo nekoliko slučajeva upotrebe za koje mislim da bi mogli biti prikladni:

Related Posts.

Prema specifikaciji, ovo može ili ne mora biti prikladna upotreba navigacijskog elementa. Specifikacija nije baš jasna i navedeni primjeri nisu od velike pomoći. Dakle, iako specifikacija nije konačna i konkretnija, možete se osloniti samo na zajednicu programera da odredi ispravnu metodu za korištenje navigacijskog elementa.

Element članka

Sljedeći element koji želim da vam predstavim je članak. Glavno područje naše demo stranice sadrži tri citata posta, a svaki od njih ćemo umotati u oznaku članka.

XHTML

2010 16. april Sample Post 1 38

Curabitur ut congue hac, diam turpis[…]

Napisao: Ime autora Oznake: coolmodernohype-friendly Nastavite čitati

2010 16. april Uzorak posta 1 38 Curabitur ut congue hac, diam turpis[…] Napisao: Ime autora Tagovi: cool moderno hype-friendly Nastavite čitati

Evo W3C definicije za element članka:

Element članak predstavlja modularnu kompoziciju u dokumentu […], tako da je namijenjen za samodistribuciju ili ponovnu upotrebu, kao što je sindikacija (istovremeno objavljivanje sadržaja na više web stranica).

Ovaj put je specifikacija jasnija, a blog post (ili izvod) mnogo bolji ( obratite pažnju na spominjanje sindikacije) ide na članak. Naravno, možemo postaviti mnoge elemente članka na stranicu.

Bez sumnje ste primijetili da smo unutar članka postavili elemente zaglavlja i podnožja. I zaglavlje i podnožje se mogu koristiti više puta na jednoj HTML stranici. Budući da je zaglavlje „uvodna grupa ili pomoć za navigaciju“, uključili smo datum, naslov i broj komentara. Zatim imamo pasus sa izvodom iz posta, nakon čega slijedi podnožje.

Element podnožja

Kao što sam već rekao, podnožje se može koristiti onoliko puta koliko je potrebno na jednoj stranici i predstavlja segment podnožja stranice dokumenta, ili dio dokumenta.

Element podnožja predstavlja podnožje odjeljka kojem pristupa. Uobičajeno, podnožje sadrži informacije o svom odjeljku, kao što su autorstvo, veze do povezanih dokumenata, datum autorskih prava itd.

Imamo četiri elementa podnožja na našoj demo stranici: po jedan za svaki od tri elementa članka i zajedničko podnožje za cijelu stranicu. Podnožje u elementu članka sadrži ime autora posta, oznake i dugme za vezu do cijelog blog posta.



Opće podnožje sadrži tri elementa odjeljka i obavijest o autorskim pravima. Obje upotrebe elementa podnožja su legalne i u skladu su sa preporukom W3C.

Element sekcije

Opće područje podnožja naše demo stranice sadrži tri elementa odjeljka. U njima navodimo naše najpopularnije postove na blogu, nedavne komentare i kratku biografiju naše izmišljene kompanije.

Element odjeljka predstavlja opće područje dokumenta ili aplikacije. Odjeljak je u ovom slučaju tematsko grupiranje sadržaja, obično koristeći naslov.

Element sekcije je prilično lukav jer u svojoj definiciji specifikacije izgleda vrlo sličan elementu div. Upao sam u ovu zamku kada sam počeo da kodiram demo stranicu; Postavio sam tri elementa članka unutar elementa odjeljka. Ubrzo sam shvatio grešku mojih metoda. Jedini način da odlučite da li ćete koristiti sekciju je da vidite da li oblasti koju želite da omotate elementom sekcije treba naslov. Iz definicije možete vidjeti da element odjeljka obično ima naslov.

Još jedno pitanje koje je korisno postaviti za utvrđivanje valjanosti korištenja elementa odjeljka je: dodajete li ga isključivo u svrhu stiliziranja? Dodajete ga jednostavno zato što morate da se odeljak istakne pomoću JavaScript-a ili zato što na njega treba da primenite regularni stil i umesto toga morate da koristite element div.

Umotavanje tri elementa članka naše demo stranice u oznaku odjeljka imalo bi smisla ako bi odjeljak uključivao naslov poput „Najnoviji postovi na blogu“. Imalo bi smisla; u suprotnom, oznaka koja sadrži elemente članka je samo podrška za stilizovanje – nešto što nam pomaže da je ciljamo koristeći JavaScript ili CSS.

Sa strane element

Posljednji HTML5 element korišten za demo stranicu je po strani; koristili smo ga kao bočni kontejner.

Element sa strane predstavlja dio stranice koji se sastoji od sadržaja koji je površno povezan sa sadržajem koji okružuje postrance i koji se može percipirati kao odvojen od tog sadržaja. Takvi se odjeljci često predstavljaju u tipografiji kao bočne trake.

Kao što možete vidjeti iz specifikacije, jedan primjer idealne upotrebe elementa sa strane je u bočnoj traci. Ispod na grafikonu možete vidjeti hijerarhiju elementa aside na našoj demo stranici.



Postavili smo dvije sekcije i jednu nav. Prvi element odjeljka sadrži linkove na Twitter i RSS, a drugi predstavlja najnoviji tweet (objavu korisnika na Twitteru). Element drugog odjeljka je također jedan od rijetkih slučajeva gdje nema naslov. Mogao bi imati naslov, nešto poput "Posljednji tvit", ali mislim da to nije potrebno jer su čitaoci navikli da vide ovakve blokove, a Twitterova oznaka ispod citata je vrlo prepoznatljiva. Naš navigacijski element na bočnoj traci koristi se za prikaz liste blogova i, za razliku od glavne navigacije, ima naslov.

Poslednja reč

Dakle, prvi dio našeg članka o izgledu web stranice u HTML5 i CSS3 je došao do kraja. Pokušao sam da bude što kraći i da ne trošim previše vremena na nesigurnosti u HTML5 specifikaciji jer još nije završen. U međuvremenu, morat ćemo se osloniti na zajednicu i rad HTML5 “iscjelitelja” kako bismo postali naši vodiči u uvođenju novih elemenata na stranice.

Hvala na čitanju i ne propustite drugi dio ovog članka gdje ćemo raspravljati o CSS3 svojstvima koja se koriste za ukrašavanje markupa.

Kao i uvijek, radujem se svim pitanjima ili komentarima. Nemojte se plašiti da progovorite i započnete diskusiju o upotrebi novih elemenata, jer je to najbolji način da razjasnite njihovu korisnost.



Urednik: Rog Victor i Andrey Bernatsky. webformyself team.

Ne možete daleko stići bez HTML5 i CSS3

Moderne web stranice i razvoj weba više se ne mogu zamisliti bez HTML5 i CSS3, bez obzira kako na to gledate.
Svaki projekat, svaki kupac zahteva validan, cross-browser i moderan izgled u HTML5 i CSS3, i mora biti prilagođen za mobilne uređaje.
Ako znate kodirati u HTML5 i CSS3 i prilagoditi projekat za mobilne uređaje, onda možete sigurno povećati cijenu sata svog rada.
Pa, ako kreirate web stranicu za sebe, onda će ovo znanje pomoći da bude bolja, funkcionalnija i praktičnija. To u pravilu rezultira povećanjem pozicija, povećanjem prometa i, shodno tome, prihoda.

da li ste znali da...

Sada u rezultatima pretrage (u TOP 10) Yandexa, 55% su stranice s prilagodljivim dizajnom koji se mogu prilagoditi mobilnim uređajima. Ovo sugerira da Yandex (i Google također) daju veću prednost web lokacijama sa responzivnim dizajnom. One. one na kojima je korisniku udobno.
A HTML5 i CSS3 dodaju dodatne funkcije na stranicu, pomoću kojih možemo učiniti stranicu još praktičnijom.
I za korisnike i za robote.
Landing stranica (landing page) se koristi za pretvaranje posjetitelja u pretplatnike ili klijente.
Također se ponekad koristi za segmentaciju prometa.
Odredišna stranica može biti ili jedna zasebna stranica na domeni ili kao dio punopravne web stranice.
U ovom slučaju, stranica se promovira u pretraživanju, a odredišna stranica se koristi za oglašavanje u Yandex.Direct, Google Adwods, Target VKontakte itd.
Ova kombinacija vam omogućava da maksimalno iskoristite mnoge internet marketinške alate.
Sada postoji prilika da sve ovo brzo naučite i primijenite u svojim aktivnostima.

HTML5 + CSS3 + responzivnost + odredišna stranica
Uz ovaj kurs ćete moći:

kreirajte responzivne web stranice i stranice
prilagoditi ih mobilnim uređajima
koristite HTML i CSS mogućnosti u svojim ili klijentskim projektima
kreirajte bilo koju odredišnu stranicu: stranice za snimanje, stranice za pretplatu, odredišne ​​stranice proizvoda itd.
dodajte različite efekte i skripte na odredišnu stranicu
kreirajte i koristite napredne obrasce za povratne informacije i još mnogo toga.
Uz ovaj video kurs neće biti teško!

Sažetak kursa

Uvodni dio

Nove funkcije u HTML5 i CSS 3 koje pojednostavljuju i olakšavaju proces izgleda.
Semantičko označavanje - njegove tajne i zašto je potrebno.
Umetanje medijskih objekata - kako umetnuti audio i video bez plejera.

Praktični dio

Korak po korak kreiranje odredišne ​​stranice.
Od planiranja izgleda, izgleda svakog bloka različite složenosti, do povezivanja skripti i PHP rukovatelja za obrasce
Vrteška/klizač, glatko pomicanje, dugmad, CSS sprijtovi, provjera valjanosti obrazaca, itd.

Dodaj. materijala

Dodatni materijali sadrže sve skripte i izvore sa kojima ćemo raditi + cheat sheets sa kodom koji samo trebate kopirati i zalijepiti na pravo mjesto.
Kao i drugi korisni izvori.
Broj video lekcija: 23

Šta ćete moći raditi nakon završetka ovog kursa?

U pripremi

Razumijevanje PSD izgleda pomoću PhotoShopa
Izrežite željene slike iz PSD izgleda
Pronađite prekrasan dizajn odredišne ​​stranice i web stranice
Dizajn blokova i faze rasporeda
Spojite ikone u CSS sprijtove
Rad sa PhpDesigner-om

U pogledu rasporeda

Povežite prekrasne fontove iz Google spremišta
Efikasno koristite pseudo-klase
Prilagodite stranicu za sve mobilne uređaje
Koristite 2 ili više pozadina za blok, animaciju, transformaciju, RGBA itd.
Radite sa @media upitima
Umetnite interaktivne Yandex karte
Kreirajte CSS sprite i ubrzajte učitavanje stranice
Koristite unaprijed dizajnirane stilove (slično okvirima kao što je Bootstrap)

U smislu poboljšanja

Kreirajte efekte lebdenja ("oživljavanje" kada lebdite)
Napravite glatko skrolovanje do blokova i do dugmeta "Nazad na vrh".
Potvrdite obrasce za povratne informacije koristeći JQuery
Kreirajte pametne obrasce za povratne informacije s prijenosom UTM oznaka
Povežite i konfigurirajte ciljeve u Ya.Metrici koristeći događaje
Olakšajte stranice tako da se brže učitavaju
Provjerite i ispravite nedostatke na stranicama

Moderne web stranice i razvoj weba više se ne mogu zamisliti bez HTML5 i CSS3, bez obzira kako na to gledate. Svaki projekat, svaki kupac zahteva validan, cross-browser i moderan izgled u HTML5 i CSS3, i mora biti prilagođen za mobilne uređaje. Ako znate kako da kodirate u HTML5 i CSS3 i prilagodite projekat za mobilne uređaje, onda možete sigurno podići cijenu sata svog rada. Pa, ako kreirate web stranicu za sebe, onda će ovo znanje pomoći da bude bolja, funkcionalnija i praktičnija. To u pravilu rezultira povećanjem pozicija, povećanjem prometa i, shodno tome, prihoda.

Dodatne informacije

Uvodni dio

0. Uvodni video
O kursu i kako ga koristiti

1. HTML5. Semantička oznaka
O novim oznakama: zaglavlje, navigacija, odjeljak, strana, članak, itd.

2. HTML5. Medijski objekti
Umetanje videa i zvuka bez dodatnih plejera + atributa.

3. HTML5. Forms
Rad sa obrascima u HTML5 + novi tipovi polja.

4. HTML5. Druge opcije
Primjeri implementacije drugih funkcija u HTML5

5. CSS3. Nova svojstva u CSS3
Linearni gradijenti, radijusi, transparentnost, sjene, transformacija, animacija.

Praktični dio

1. Izgled i PSD izvor
Upoznavanje sa PSD izvorom i skiciranje budućeg izgleda

2. Izgled zaglavlja
Proračun prilagodljivih dimenzija i rasporeda zaglavlja + formula za izračunavanje EM i %

3. Izgled bloka "Usluge".
Planiranje pozornice, priprema slike i raspored blokova.

4. Izgled bloka "Portfolio".
Planiranje, dupli časovi i raspored.

5. Blok "Portfolio": efekti lebdenja
Kreiranje efekta lebdenja prilikom prelaska preko elemenata pomoću CSS3.

6. Izgled bloka “O nama”.
Izgled lukavog bloka sa pozicioniranjem i pseudoklasama.

7. Izgled bloka “Naš tim”.
Priprema i raspored bloka + kreiranje CSS sprijtova

8. Izgled bloka "Partneri".
Izgled bloka i umetanje karusela slika pomoću JQueryja

9. Umetanje Yandex karte
Umetnite Yandex interaktivnu kartu pune širine.

10. Izgled obrasca za povratne informacije
Planiranje faze, kreiranje obrasca sa novim tipovima polja.

11. Blokirajte sa autorskim pravima
Izgled bloka za autorska prava, ekstenzija CSS sprite-a, umetanje datuma u PHP-u

12. Poboljšanje i revizija
Dodavanje funkcije glatkog pomicanja blokovima i dugmeta "Nazad na vrh" (3 opcije)

13. Poboljšanje i revizija 2. dio
Validacija polja u formi za povratne informacije (putem JS) + zaštita od SPAM botova

14. Adaptacija za mobilne uređaje
Adaptacija za ekrane tableta i mobilnih telefona + rad sa FireBugom

15. Adaptacija za mobilne uređaje 2. dio
Drugi dio adaptacionog videa.

16. PHP obrađivač obrasca
Kreiranje skripte za rukovanje u PHP-u za obrazac za povratne informacije.

17. Pametni obrazac za povratne informacije
Povezivanje skripte za obrazac za povratne informacije sa prijenosom UTM oznaka i pisanjem u CSV datoteku.

18. Transfer na hosting i validacija
Prebacivanje odredišne ​​stranice na hosting putem FTP-a, provjera, ubrzavanje i postavljanje ciljeva u Yandex.Metrica.

Pametni telefoni postaju sastavni dio života, pa udio mobilnog prometa stalno raste. Izgled u HTML5 i CSS3 vam omogućava da prilagodite stranice pretraživača na desktopu interfejsu mobilnih medija. Video kurs o adaptivnom izgledu kreiran je tako da možete savladati profesionalno okruženje i učiniti svoju web stranicu praktičnijom.

Autor kursa “Adaptive Layout u HTML5 i CSS3” Oleg Kasyanov je iskusni web programer, osnivač internetskog resursa JoomlaTown.net, bloger i kreator programa obuke za početnike i iskusne profesionalce.

Adaptivni dizajn web stranice - obuka

Svaka video lekcija popraćena je pojašnjavajućim komentarom autora. Naučit ćete o mogućnostima korištenja HTML5 i CSS3 tehnologija, poboljšati svoje razvojne vještine, a također ćete naučiti kako kreirati prilagođeni izgled.

Video kurs Olega Kasjanova sastoji se od teoretskih osnova, prakse i dodatnih materijala. Dobićete odgovore na sledeća pitanja:

• koja je funkcionalnost u HTML5 i CSS3 izgledu;
• šta je semantičko označavanje;
• kako raditi s različitim tipovima medijskih objekata;
• koje su faze izrade odredišnih stranica;
• zašto je važno miješati tipove stranica i vizualizacije;
• glavne poteškoće s kreiranjem mobilne verzije stranice.

Kurs “Adaptive Layout u HTML5 i CSS3” je praćen šablonima za rad, skriptama i cheat sheets sa kodom. Oleg uvelike olakšava proces učenja, omogućavajući nekoliko puta brže savladavanje rada sa HTML5 i CSS3.

Prilagodljivi HTML5 i CSS3 izgled

Rezultati završenog kursa neće vas natjerati da čekate: naučit ćete analizirati trenutnu situaciju, vidjeti dizajn budućeg web resursa, a također ćete unijeti korisne promjene. Kurs Olega Kasjanova pomoći će vam da savladate adaptivni izgled u HTML5 i CSS3.