Pradedančiųjų vadovas HTML5 / CSS3 tinklalapių kūrimui

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

HTML5 ir CSS3 ištroškė tinklą tik per 2 metus. Prieš juos buvo sukurta daugybė pakeistų semantikos būdų, kaip tikimasi, kad interneto dizaineriai sukurs tinklalapius, ir atvykę ateina į didžiulį palaikymą, pvz., Alternatyvias žiniasklaidos priemones, XML stiliaus žymes ir progresyvius interneto dizainerių įvesties atributus pasiekti svajingą funkcijos, pavyzdžiui, animacija.

Nors dauguma kūrėjų demonstruoja galimus, bet sudėtingus demonstracijas, HTML5 / CSS3 nėra tikrai raketų mokslas, ir aš pėsčiomis jus per atsipalaidavimo procesą, kad sukurtumėte standartinį HTML5 / CSS3 tinklalapį su išsamiu, tačiau nuodugniu paaiškinimu ir tada! Jums siūlomos premijos, pvz., Mokymosi ištekliai ir nemokami HTML5 šablonai, todėl pasinaudokite šia galimybe, kad pradėtumėte savo HTML5 kelionę!

Pakeitimai tarp HTML4 ir HTML5

Jums gali būti įdomu, kodėl netgi svarbu pereiti į HTML5. Yra daugybė priežasčių, bet daugiausia dėl to, kad būsite dirbti su visuotiniais interneto standartais kaip ir visi kiti dizaineriai. Tokiu būdu rasite daugiau paramos internete ir jūsų tinklavietės bus tinkamai pateiktos šiuolaikinėse naršyklėse kurios nuolat tobulinamos.

(Vaizdo šaltinis: W3C)

HTML4 ir HTML5 palyginimą sunku nustatyti ant paviršiaus lygio. Žiūrėdami naują HTML5 juodraštį galite matyti rodomus elementus ir pataisytas klaidų tvarkymo procedūras. Naršyklės kūrėjai specialiai naudojosi naujomis numatytųjų tinklalapių pateikimo specifikacijomis.

Kas daugiau iš HTML5 yra mūsų modernios žiniatinklio naršyklės konversija. Su šiomis naujomis specifikacijomis žiniatinklis kaip visuma yra laikomas taikymo platforma HTML (ypač HTML5), CSS ir „JavaScript“, kuriuos reikia sukurti. Be to, ši sistema yra elegantiška sukuria harmoniją tarp interneto dizainerių ir kūrėjų nustatydami bendruosius standartus, kurių turi laikytis visos naršyklės.

Be to, sukurta daug elementų atstovauja naujosios amžiaus skaitmeninės terpės. Jie apima ir kurios yra didelės daugialypės terpės palaikymui. Kai kuriose naršyklėse galite užpildyti formos patvirtinimą tiesiogiai HTML. Patvirtinta, kad jQuery reikia ir toliau, nes yra daug programinės įrangos kūrėjų, kurie dar turi atpažinti funkcijas. Jei norite, kad žymių sąrašas patikrintų šią W3Schools lentelę, sužinokite daugiau apie juos.

Bare HTML5 skeletas

Lengviausias būdas suprasti bet kurią temą yra pasinerti į ją. Taigi sukursiu labai paprastą HTML5 skeleto šabloną tinklalapiui. Įtraukiau keletą naujesnių elementų, kuriuos tikiuosi šiek tiek vėliau suskirstyti į kategorijas.

   Mūsų pirmasis HTML5 puslapis       Sveiki, vienas ir visi!
   Namai
 Apie mus
 Kontaktai
 
 
 
   turinio čia.
 
  bet kai kurie čia!
 
 
  Kai kurie autorių ir teisiniai pranešimai čia. Galbūt naudokite © simbolį.

Iš karto tai nėra labai skiriasi nuo standartinio HTML4 tinklalapio. Ką galite pastebėti, kad mes nereikia įtraukti daugiau savarankiškų žymų. Tai tikrai nuostabios naujienos, nes tai padės sutaupyti daug laiko projektams.

Tiems, kurie nežino, XHTML projektuose buvo daug elementų savęs uždarymas. Tai baigtųsi į priekį, kol „didesnė nei“ operatorius nurodys, kad kitoje vietoje nereikės įtraukti kito uždarymo žyma. Pavyzdžiui, jei norite sukurti meta raktinių žodžių žymą, kurią naudosite be uždarymo kitur.

Ši taisyklė vis dar taikoma HTML5. Bet dabar tu net nereikia papildomo priekinio brūkšnio! yra visiškai galioja, nors jums leidžiama tęsti XHTML / XML standartą. Visi standartai atitinkantys naršyklės abu elementai taps tokie patys.

Mūsų puslapių sričių apibrėžimas

Didžioji mūsų naujo kodo dalis neturėtų būti pernelyg šokiruojanti. Mūsų doctype yra paprastesnis paprastumas nei bet kada, nereikia per daug kūno atributų, ir informacija mūsų antraštėje yra aiškiai pažymėta. Perkėlęs norėčiau atkreipti jūsų dėmesį į turinį mūsų viduje žyma. Tai apima visą pagrindinio puslapio struktūrą. Tiksliai naudoju keletą gražių HTML5 žymių, kad galėčiau nurodyti, kaip juos įtraukti į savo darbą.

Pirmiausia pamatysite visą puslapį įdėtas į a div žyma. Aš pažymėjau šį ID vyniojamasis popierius, Tai reiškia, kad ji apgaubia visą mūsų svetainės turinį. Tai yra naudinga nustatyti maksimalų plotį arba pozicijos turinį aplink ekrane. Toliau suskaldiau puslapį į 3 pagrindinius elementus - vieną

, branduolys

, ir trumpas

. Mano priskirtos antraštės srityje pridėjau paprastą puslapio pavadinimo rodymą ir navigacijos elementus naudodami

žyma kaip įvynioklis.

Dabar

su ID branduolys Aš naudoju antrinį išvalyti. Ši funkcija leidžia, kad galėtume laisvai plaukite 2 stulpelius viduje ir mes negalime patirti jokio kritimo turinio ar keistų reiškinių. Ir teisėtai taip, kaip aš įdėjau du

žymės, kuriose bus atitinkamai pagrindinė turinio sritis ir šoninė juosta. Naudosime CSS stilius, kad juos atskirtume.

Panašiai tylus poraštė žyma gerai veikia, kad šis turinys būtų atskirtas nuo puslapio. Viduje aš iškėliau iškilmingą pastraipą, kurioje gali būti pateikta informacija apie autorių teises ir nuosavybę. Tačiau tikimės, kad norite įtraukti šiek tiek daugiau turinio, pvz., Antrinių nuorodų į jūsų puslapius.

Creative CSS3 vedlys

Norėdami užbaigti šį pagrindinį trafareto išdėstymą, galime naudoti kelis CSS stilius. Pagrindiniame HTML5 šablone pridėjau išorinis CSS stiliaus puslapis todėl mes galime išlaikyti atskiras kodų sritis. Tai bus išvalyti daug painiavos ilgainiui, kai jūsų puslapiai ir stiliai pradės veikti skirtingiems puslapiams.

(Vaizdo šaltinis: W3C)

Taigi aš ne daug laiko praleidau su CSS, bet pakankamai, kad galėčiau parodyti keletą tvarkingų efektų. Pirmiausia aš naudoju kai kuriuos sienos spindulio nustatymai sukurti labai vėsią navigacijos nuorodą. Šį patį efektą galite nukreipti į šablono kodą, tiesiog pridėkite šias eilutes į CSS dokumentą.

 nav ekranas: blokas; paraštės apačia: 10px;  nav ul list-style: nėra; šrifto dydis: 14px;  nav ul li display: inline;  nav ul li a display: block; plūdė: kairė; įdėklas: 3px 6px; spalva: # 575c7d; teksto apdaila: nėra; šrifto svoris: paryškintas;  nav ul li a: hover background: # deff90; spalva: # 485e0f; -webkit-border-spindulys: 3px; -moz-border-spindulys: 3px; pasienio spindulys: 3px; įdėklas: 3px 6px; marža: 0; teksto apdaila: nėra;

Kitas tvarkingas efektas yra „Clearfix“ stiliai. Tai nėra visiškai nauja koncepcija su CSS3, tačiau tai svarbu norint sukurti standartus atitinkančius tinklalapius. Dažnai, kai ieškote plūduriuojančio turinio šalia vienas kito, patirsite klaidingas pozicionavimo triktis. Tai sukelia kompensuoti paraštės ir klaidos nustatant absoliučius plūduriuojančio turinio pločius.

Ši koncepcija gali atrodyti šiek tiek paini, ir aš padėjau šiek tiek mažesnio kodo. Iš esmės mes orientuojamės į du

elementus, #left ir #right atitikti jų puslapio pusę. Aš kiekvienam nustatiau tam tikrą plotį ir plūduriuojančią kairę, todėl jie bus sukrauti šalia kito. Nuo mūsų talpyklos div # core yra išvalyti tai reiškia, kad visas vidinis turinys gali būti laisvai judėti po to automatiškai išvalo papildomą erdvę.

/ * puslapio šerdis * / div # core display: block; aišku: abu; paraštės apačia: 20px;  sekcija # kairėje plotis: 550px; plūdė: kairė; skirtumas: 0 15px;  sekcija # right float: kairė; plotis: 300px;  / * clearfix * / .clearfix: po content: "."; ekranas: blokas; aišku: abu; matomumas: paslėptas; linijos aukštis: 0; aukštis: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix aukštis: 1%;

Šie kodo bitai yra paprasti pradėti. Jie taip pat susiję su anksčiau sukurtu HTML5 šablono kodu, todėl tai yra paprasta praktika. Bet kai kalbama apie realius žiniatinklio gabalus, jūs ieškosite daugiau CSS3 funkcijų.

Mažesnė žinoma CSS3 sintaksė

Norėdami sukurti visus HTML5 / CSS3 tinklalapius, pradėsite naudoti daug sudėtingesnes stilių lenteles. Daugelis dizainerių žino trumpojo kodo kodą (pvz., šriftas: nuosavybė), nes jie buvo standartai dar prieš CSS2.

Tačiau yra keletas naujų savybių CSS3, kurias daugelis dizainerių nemano. Daugelis jų yra ne tik estetikos, bet ir animacijos efektai. Toliau pateikiamas trumpas sąrašas, kuriame paaiškinamos kelios savybės, kurias galėtumėte žaisti. Jei jaučiatės praradę, išbandykite „googling“ sintaksės pavyzdžius.

langelis-šešėlis: prideda tvarkingą šešėlio efektą jūsų puslapio elementams. Jums suteikiami 4 parametrai, nustatantys padėtį kairėje / dešinėje, aukštyn / žemyn, šešėlio neryškumą ir spalvą. Atkreipkite dėmesį, kad langelių šešėliai nėra laikomi papildoma vieta, esanti pradiniame plotyje / aukštyje.
teksto šešėlis: sukuria gražius šešėlius už jūsų puslapio teksto. Naudodami teisingus efektus, jūsų laiškai gali būti rodomi iš karto.
pasienio spindulys: Apvalūs kampai užtruko ilgai, kad taptų priimtinais standartais. Prieš kelerius metus daugelis interneto 2.0 dizainerių kūrė foninius vaizdus, kad tiktų suapvalinti kampai su CSS. Bet naudojant CSS3 pasienio spindulį, galite valdyti kiekvieno krašto kreivę bet kuriame elemente.
neskaidrumas: Atrodo paprasta nuosavybė, kurią daugelis dizainerių nemano. Neskaidrumas tikisi, kad vienas skaitinis įėjimas bus nuo 0 iki 1,0 (0% - 100%). Šis efektas puikiai veikia kaip judėjimo animacija.
@ šrifto veidasKitas gražus kai kurių sudėtingų CSS stilių ir tipografijos pavyzdys. Dabar interneto dizaineriai gali dirbti su savo pasirinktiniais šriftais, apibrėždami juos kaip kintamuosius viduje savo CSS dokumentuose.
dėžės dydžio: pagal nutylėjimą dėžutės dydis nustatys visus jūsų elementus turinio dėžutė. Tai reiškia, kad plotis, pamušalas ir sienos yra įtrauktos į maksimalų plotį. Bet nustatykite pasienio dėžutė jūs galite nustatyti maksimalų plotį (pvz., 20px), o pridėtos pagalvėlės / sienos bus įtrauktos į šį elementą, taip pašalinant erdvę objekto viduje. Tai puiki nuosavybė, kai įvaldysite savo išradingumą.

Visos šios savybės yra mažesnės ir mažesnės. Nerekomenduoju bandyti juos visus įterpti į savo tinklalapius. Bet praktika suteiks jums aiškų požiūrį lengviau kurti naujas svetaines.

Dar viena svarbi pridėtinės sintaksės dalis, kurią verta paminėti atributų atrankos. Su CSS3 galite dabar nustatyti stilius pagal HTML atributus (pvz., tipas, href, pavadinimas) ir netgi pateikiamos konkrečios vertės. Pavyzdžiui, galėtume nukreipti nuorodas į apibrėžtą pavadinimo atributą ir suteikti jiems fono piktogramos rinkinį.

 ul li [title ^ = "ico"] fonas: URL („my-icon.gif“);

Jei pastebėsite, kad aš įtraukiau a caret simbolis prieš lygiavertį ženklą. Tai operatorius, kuris apibrėžia visus sąrašo elementus, turinčius prefiksą, ico. Arba galite pakeisti „caret“ (^) dolerio ženklu ($), kad nukreiptumėte pavadinimo pavadinimą. Tokiu būdu CSS3 žino pridėti fono paveikslėlius, kuriuose pavadinimai gali būti „pirmasis ico“ arba „book ico“. Jei domitės, skaitykite šiek tiek daugiau apie atributų parinkiklius.

Viskas kartu

HTML5 ir CSS3 tinklalapių esmė yra paprastumas. Žiniatinklio kūrėjai stengiasi kurti labai kūrybingas svetaines mažiau laiko ir mažiau streso. Naujosios HTML5 funkcijos leidžia tai padaryti su daugybe pernelyg didelių patalpų. Naudojant kai kuriuos naujus „CSS3“ selektorius ir savybes, jūs suteikiate pranašumų ilgainiui.

(Vaizdo šaltinis: W3C)

Bet taip pat turėtumėte būti atsižvelgiant į galutinį vartotoją. Tinklalapio kūrimo procesas galiausiai baigiasi po to, kai viešai skelbiama svetainė. Jūsų tikslas yra prašome publikuoti lengvai prieinamą informaciją, ir ne tik žmonių skaitytojai, bet paieškos varikliai ir robotų indeksavimas. Semantika labai išplėtė, įtraukdama naujus HTML5 išdėstymo elementus, nuosekliai suskaidydama puslapio išdėstymus. Niekada nebuvo lengviau sukurti nedidelę navigacijos ir poraštės dalį, atitinkančią visas šiuolaikines žiniatinklio naršykles.

Kai tik tapsite patogiais, HTML5 tinklalapius galėsite pradėti ieškoti puslapių animacijose. Netgi nedideli efektai su „JavaScript“ ir „AJAX“ gali iš esmės pagerinti naudotojų patirtį ir svetainės našumą. Nors tai nėra straipsnio apimties dalis, rekomenduoju žaisti su jQuery, jei turite bet kokį laiką. Atviro kodo biblioteka yra stulbinanti ir leidžia greitai kurti HTML5 puslapių elementus.

Papildomi resursai

Dienoraščiai visame pasaulyje aptarė naujas HTML5 ir CSS3 tendencijas ir dalijasi ištekliais visuomenei. Laikas keičiasi ir su jais keičiasi interneto bendruomenė. Turėtumėte apsvarstyti keletą nišų sričių, kad galėtumėte mokytis ir sukurti nedidelį susidomėjimą.

Žemiau yra keletas papildomų sąrašų, straipsnių ir pamokų, kuriuos galite mėgautis. Aš ėmiau laisvai suskirstyti sąrašus į HTML5 ir CSS3 išteklius. Remiantis tuo, ką ieškote, čia turėtų būti keletas temų visiems. Taip pat mėgaukitės trumpu nemokamų HTML temų galerija, kurią galima atsisiųsti internete!

HTML5

HTML5: 15 įkvepiančių eksperimentų
HTML5: 19 žiniatinklio programos
HTML5: 48 Galimi „Flash-Killing Demos“
Sukurti „Ajax“ pagrįstą HTML5 / CSS3 kontaktinę formą

CSS3

CSS3: Pradedančiųjų vadovas
CSS3: paieškos lauko kūrimas
CSS3: Pseudo klasių naudojimas
CSS3: 30+ Naudingi pamokos

Premija: HTML5 šablonai ir temos

Dizaino kompanija

Ar esate pasiruošęs žengti į nuostabų HTML5 pasaulį? Čia yra visiškai nemokama HTML5 šablonas, kuriame jQuery scenarijai ir pasirinktiniai šriftai gali būti išbandyti laisvai!

HTML5 / CSS3 tema

Ši „HTML5 / CSS3“ sukurta tema turi bendrą dienoraščio išdėstymo dizainą, kad galėtumėte sukurti savo HTML5 tinklaraštį, turintį daug funkcijų, arba tiesiog kasti į kodą ir sužinoti ką nors apie tai.

Yoko

„Yoko“ yra šiuolaikinė „WordPress“ tema, kurioje kalbama apie lankstumą, reaguojantį į jos išdėstymą pagal CSS3 žiniasklaidos užklausas, kuri yra gebėjimas prisitaikyti prie skirtingų ekrano dydžių, sužinoti apie tai!

Pilka

Jei pageidaujate klasikinio „WordPress“ tinklaraščio stiliaus, „Grey“ yra turbūt jums su savo integruotomis CSS3 funkcijomis, tokiomis kaip sienos spindulys, keli fonai, teksto šešėlis ir tt.

Pradedančiųjų vadovo vadovas, socialinės žiniasklaidos naršyklė

Pradedančiųjų vadovas iOS kūrimui Sąsaja - I dalis

„Windows 7 Media Center“ nustatymo pradžios vadovas