Iesācēja ceļvedis HTML5 / CSS3 tīmekļa lapu veidošanai

Šis raksts ir daļa no mūsu "HTML5 / CSS3 konsultāciju sērija" - veltīts, lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

HTML5 un CSS3 ir izgājuši tīmeklī vētra tikai divus gadus. Pirms viņiem ir bijušas daudzas izmaiņas semantikā, kā web dizaineriem ir sagaidāms, ka tie radīs tīmekļa lapas, un, ierodoties, nāksies satriecošs atbalsts, piemēram, alternatīvie mediji, XML stila tagi un progresīvi ievades atribūti tīmekļa dizaineriem, lai sasniegtu sapni funkcijas, piemēram, animācija.

Lai gan vairums izstrādātāju, šķiet, demonstrē potenciālās, bet sarežģītās demonstrācijas, HTML5 / CSS3 nav īsti raķešu zinātne, un es jūs eju pa relaksējošu procesu, lai izveidotu standarta HTML5 / CSS3 tīmekļa lapu ar visaptverošu, bet padziļinātu skaidrojumu un tad! Jums ir pieejamas piemaksas, piemēram, mācību resursi un bezmaksas HTML5 veidnes, tāpēc izmantojiet šo iespēju, lai sāktu HTML5 braucienu!

Izmaiņas starp HTML4 un HTML5

Jums var būt jautājums, kāpēc ir pat svarīgi pāriet uz HTML5. Ir vairāki iemesli, bet galvenokārt tāpēc, ka jūs būsiet strādājot ar globālajiem interneta standartiem tāpat kā visi citi dizaineri. Tādā veidā jūs atradīsiet vairāk atbalsta tiešsaistē un jūsu tīmekļa vietnēs tiks sniegti pareizi mūsdienu pārlūkprogrammās kas pastāvīgi uzlabojas.

(Attēla avots: W3C)

HTML4 un HTML5 salīdzinājumu ir grūti pamanīt virsmas līmenī. Apskatot jauno HTML5 melnrakstu, jūs varat redzēt Featured elementus un labotās kļūdu apstrādes procedūras. Pārlūka izstrādātāji ir īpaši izbaudījuši jaunās specifikācijas noklusējuma tīmekļa lapām.

Kas vairāk ir HTML5, ir mūsu modernās tīmekļa pārlūkprogrammas pārveidošana. Ar šīm jaunajām specifikācijām tīmekli kopumā uzskata par lietojumprogrammu platforma HTML (īpaši HTML5), CSS un JavaScript pamatā. Arī šī sistēma ir eleganti rada harmoniju starp tīmekļa dizaineriem un izstrādātājiem nosakot kopīgus standartus, kas jāievēro visām pārlūkprogrammām.

Turklāt ir izveidoti daudzi elementi pārstāvēt jaunā vecuma digitālos medijus. Tie ietver un kas ir milzīgi multivides atbalstam. Dažās pārlūkprogrammās veidlapu apstiprināšanu var pabeigt tieši HTML. Piešķirot, ka jQuery joprojām ir liela vajadzība, jo ir daudz programmatūras izstrādātāju, kuriem vēl ir jāatzīst šīs funkcijas. Ja vēlaties, lai tagu saraksts pārbaudītu šo W3Schools tabulu, lai uzzinātu vairāk par tiem.

Bare HTML5 skelets

Man ir vieglākais veids, kā saprast jebkuru tēmu ienirt tieši tajā. Tāpēc es būšu izveidojis ļoti vienkāršu HTML5 skeletu veidni tīmekļa lapai. Es iekļāvu dažus jaunākos elementus, kurus es ceru, ka mazliet vēlāk iedalīšu.

   Mūsu pirmā HTML5 lapa       Laipni lūdzam, viens un viss!
   Mājas
 Par mums
 Kontakti
 
 
 
   šeit ir kāds saturs.
 
  bet daži arī šeit!
 
 
  Daži autortiesību un juridiskie paziņojumi šeit. Varbūt mazliet izmantojiet © simbolu.

Uzreiz tas nav ļoti atšķirīgs no standarta HTML4 tīmekļa lapas. Ko jūs varat pamanīt, ka mēs nav nepieciešams iekļaut vairāk pašaizverošu tagu. Tas ir patiesi brīnišķīgi jaunumi, jo tas ietaupīs daudz laika pie jūsu attīstības projektiem.

Tiem, kas nezina, XHTML projektos bija daudz elementu, kas iezīmēti pašaizveršanās. Tie beigtos ar priekšu slīpsvītru pirms "lielāks par" operatoru, lai norādītu, ka citur nebūtu jāiekļauj cits noslēguma tags. Piemēram, lai izveidotu meta atslēgvārdu tagu, ko izmantotu bez slēgšanas citur.

Šis noteikums joprojām attiecas uz HTML5. Bet tagad jūs pat nav nepieciešams papildu priekšgriezums! ir pilnīgi derīgs, lai gan jums ir atļauts turpināt izmantot XHTML / XML standartu. Visiem standartiem atbilstošiem pārlūkiem abi elementi būs vienādi.

Mūsu lapu apgabalu definēšana

Lielākajai daļai mūsu jauno kodu nevajadzētu būt pārāk šokējošiem. Mūsu doctype ir vienkāršāk vienkāršāka nekā jebkad agrāk, nav vajadzīgas pārmērīgas ķermeņa īpašības, un informācija mūsu pozīcijā ir skaidri marķēta. Pārvietojoties, es gribētu pievērst jūsu uzmanību mūsu iekšējam saturam tag. Tas ietver visu galveno lapu struktūru. Es mērķtiecīgi izmantoju dažas jaukas HTML5 tagus, lai norādītu, kā jūs tos varat iekļaut savā darbā.

Vispirms jūs redzēsiet visu lapu iekapsulēts a div tag. Es to atzīmēju ar ID iesaiņojums, tas nozīmē, ka tas aptver visu mūsu tīmekļa vietnes saturu. Tas ir noderīgs, lai iestatītu maksimālo platuma vai pozīcijas saturu ap ekrānu. Tālāk es esmu sagriezusi lapu 3 galvenajos elementos - viens

, kodols

, un īss

. Manā pielāgotajā galvenes apgabalā esmu pievienojis vienkāršotu lapas nosaukuma un navigācijas vienumu displeju, izmantojot

kā iesaiņojumu.

Tagad

ar ID kodols Es esmu izmantojis sekundāro skaidrs. Šī funkcija ļauj to darīt brīvi peldēt 2 kolonnas iekšpusē un mēs neizjutīsim nekādu kritušo saturu vai dīvainas parādības. Un pamatoti tā, kā es iekšā esmu novietojis divus

tagi, kas ietver attiecīgi mūsu galveno satura apgabalu un sānjoslu. Mēs izmantosim CSS stilus, lai tos izkliedētu.

Līdzīgi kluss kājene tag labi darbojas, lai šo saturu atšķirtu starp lapu. Manā vietā esmu ievietojis svinīgu punktu, kurā var būt informācija par autortiesībām un īpašumtiesībām. Bet izredzes ir labas, ja vēlaties iekļaut nedaudz vairāk satura, piemēram, sekundāras saites uz jūsu lapām.

Radošā CSS3 burvība

Lai pabeigtu šo pamata trafaretu izkārtojumu, mēs varam izmantot dažus CSS stilus. HTML5 pamata veidnē es pievienoju ārējā CSS stila lapa tāpēc mēs varam paturēt mūsu koda apgabalus atsevišķi. Tas būs daudz neskaidrību ilgtermiņā, kad lapas un stili sāk darboties dažādās lapās.

(Attēla avots: W3C)

Tāpēc es neesmu pavadījis daudz laika ar CSS, bet pietiekami, lai parādītu pāris gudrus efektus. Vispirms es esmu izmantojis dažus robežu rādiusa iestatījumi veidot ļoti atdzist navigācijas saiti hover efektus. Jūs varat atlasīt šo pašu efektu veidnes kodā, vienkārši pievienojiet šādas rindas CSS dokumentā.

 nav displejs: bloks; margas apakšā: 10px;  nav ul list-style: nav; fonta lielums: 14px;  nav ul li display: inline;  nav ul li a display: block; peldēt: pa kreisi; polsterējums: 3px 6px; krāsa: # 575c7d; teksta apdare: nav; font-weight: bold;  nav ul li a: hover background: # deff90; krāsa: # 485e0f; -webkit-robežu rādiuss: 3px; -moz-border-rādiuss: 3px; robežu rādiuss: 3px; polsterējums: 3px 6px; starpība: 0; teksta apdare: nav;

Vēl viens veikls efekts ir skaidrs stils. Tas nav pilnīgi jauns jēdziens ar CSS3, bet tas ir svarīgi standartiem atbilstošu tīmekļa lapu veidošanai. Bieži vien, ja jūs meklējat, lai peldētu saturu blakus viens otram, jūs redzēsiet kļūdainas pozicionēšanas glitches. Tas ir saistīts ar nobīdes starpībām un kļūdām, nosakot jūsu peldošā satura absolūtos platumus.

Šī koncepcija var šķist mazliet mulsinoša, un es esmu pievienojis mazu kodu zemāk, lai palīdzētu. Būtībā mēs orientējamies uz diviem

elementiem, #left un #pa labi lai atbilstu viņu lapas malai. Esmu iestatījis katram ar noteiktu platumu un peldošu pa kreisi, tāpēc viņi novietosies tieši blakus. Kopš mūsu konteinera div # core satur skaidrs tas nozīmē, ka viss iekšējais saturs var būt brīvi pārvietoties pēc tam automātiski iztīra papildu vietu.

/ * lappuses kodols * / div # core displejs: bloks; skaidrs: abi; margas apakšā: 20px;  sadaļa # pa kreisi platums: 550px; peldēt: pa kreisi; starpība: 0 15px;  sadaļa # pa labi float: pa kreisi; platums: 300px;  / * clearfix * / .clearfix: pēc saturs: "."; displejs: bloks; skaidrs: abi; redzamība: slēpta; līnijas augstums: 0; augstums: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix augstums: 1%;

Šie koda biti ir vienkārši, lai sāktu darbu. Tie attiecas arī uz mūsu iepriekš izveidoto HTML5 veidnes kodu, tāpēc šī ir vienkārša prakse. Bet, kad runa ir par īstiem interneta junkies, jūs meklējat vairāk CSS3 funkcionalitātes.

Mazāk zināms CSS3 sintakse

Lai izveidotu pilnas HTML5 / CSS3 tīmekļa lapas, jūs sāksiet izmantot dažas daudz sarežģītākas stilu lapas. Daudzi dizaineri zina stenogrammas kodu (piemēram, fonts: īpašums), jo tie ir standarti pat pirms CSS2.

Bet CSS3 ir dažas jaunas īpašības, ko daudzi dizaineri nedomā. Daudzas no tām nav tikai estētikas, bet arī animācijas efekti. Zemāk ir īss saraksts, kurā izskaidrotas dažas no īpašībām, kuras jūs varētu uzskatīt par spēlēm. Mēģiniet googling par sintakses piemēriem, ja jūtaties zaudēti.

kastes ēna: pievieno veikala ēnu efektu jūsu lapu elementiem. Jums tiek doti 4 parametri, kas nosaka pozīciju pa kreisi / pa labi, uz augšu / uz leju, ēnu izplūšanu un krāsu. Ņemiet vērā, ka kastes ēnas nav uzskatāmas par papildu vietu sākotnējam platumam / augstumam.
teksta ēna: aiz lapas teksta rada skaistas ēnas. Ar pareizajiem efektiem var parādīties, ka jūsu burti var parādīties tieši pie lapas.
robežu rādiuss: Noapaļotiem stūriem ir vajadzīgs ilgs laiks, lai kļūtu par pieņemtiem standartiem. Pirms dažiem gadiem daudzi web 2.0 dizaineri crafting fona attēlus tikai, lai ietilptu noapaļotiem stūriem ar CSS. Bet, izmantojot CSS3 robežu rādiusu, jūs varat manipulēt katras robežas līkni jebkurā elementā.
dūmainība: Šķiet, ka tas ir vienkāršs īpašums, ko daudzi dizaineri neuzskata. Necaurredzamība gaida vienu skaitlisku ievadi no 0 līdz 1,0 (0% - 100%). Šis efekts lieliski darbojas kā kustības animācija.
@ font-faceVēl viens skaists piemērs dažiem sarežģītiem CSS stiliem un tipogrāfijai. Web dizaineri tagad var strādāt ar saviem pielāgotiem fontiem, definējot tos kā mainīgos CSS dokumentos.
kastes izmēri: pēc noklusējuma lodziņu izmēri noteiks visus jūsu elementus kā satura lodziņā. Tas nozīmē, ka platums, polsterējums un robežas ir iekļautas maksimālajā platumā. Bet iestatiet rāmis jūs varat definēt maksimālo platumu (piemēram, 20px), un pievienotie polsterējumi / robežas iekļausies tajā, tādējādi novēršot telpas iekšpusē. Tas ir fantastisks īpašums, kad būsiet apguvis savu atjautību.

Visām šīm īpašībām ir savi uzvedumi un lejupslīde. Es neiesakām mēģināt tos visus ievietot jūsu tīmekļa lapās. Bet prakse sniegs jums skaidru domāšanu uzsākt jaunu tīmekļa vietņu izstrādi ar vieglumu.

Vēl viena būtiska pievienotā sintakse ir vērts pieminēt atribūtu selektori. Ar CSS3 jūs tagad varat definējiet stilus, kuru pamatā ir HTML atribūti (piemēram, tips, href, virsraksts) un pat nodrošināt konkrētas vērtības. Tā, piemēram, mēs varējām mērķēt saites ar noteiktu nosaukumu atribūtu un piešķirt tām fona ikonas kopumu.

 ul li [nosaukums ^ = "ico"] fons: url ('my-icon.gif');

Ja pamanāt, ka esmu iekļāvis a caret simbols pirms vienādojuma zīmes. Tas ir operators, kas definē visus saraksta vienumus, kuriem ir prefikss, ico. Alternatīvi jūs varat nomainīt kārtiņu (^) ar dolāra zīmi ($), lai mērķētu uz jūsu nosaukuma sufiksa apgabalu. Tādā veidā CSS3 zina, lai pievienotu fona attēlus, kur jūs varat iestatīt nosaukumus kā "pirmo ico" vai "grāmatu ico". Ja jūs interesē, izlasiet vairāk par atribūtu atlasītājiem.

To visu kopā

HTML5 un CSS3 tīmekļa lapu pamatā ir vienkāršība. Tīmekļa izstrādātāji cenšas veidot ļoti radošas tīmekļa vietnes mazāk laika un mazāk stresa. Jaunās HTML5 funkcijas ļauj to ar daudzu ērču telpu. Un, izmantojot dažus jaunos CSS3 selektorus un īpašības, jūs ilgtermiņā sniegsiet priekšrocības.

(Attēla avots: W3C)

Bet arī jums vajadzētu būt ņemot vērā gala lietotāju. Tīmekļa lapas izveides process beidzot beidzas pēc tīmekļa vietnes publiskošanas. Jūsu mērķis ir lūdzu skatīt auditoriju ar viegli pieejamu informāciju, un ne tikai cilvēku lasītāji, bet meklētājprogrammu roboti un rādītāju indeksēšana. Semantika ir ievērojami attīstījusies, iekļaujot jaunus HTML5 izkārtojuma elementus, vienmērīgi sadalot lapas izkārtojumus. Nekad nav bijis vieglāk izveidot nelielu navigācijas un kājenes sadaļu saskaņā ar visām mūsdienu tīmekļa pārlūkprogrammām.

Kad esat kļuvis par ērtu HTML5 tīmekļa lapu veidošanu, jūs, iespējams, sāksiet meklēt lapas animācijas. Pat nelielas sekas ar JavaScript un AJAX var lielākoties uzlabot lietotāju pieredzi un vietnes veiktspēju. Lai gan tas nav daļa no raksta darbības jomas, es iesaku spēlēt apkārt ar jQuery, ja jums ir kāds laiks. Atvērtā koda bibliotēka ir pārsteidzoša un ļauj ātri veidot prototipus HTML5 lapu elementos.

Papildu resursi

Emuāru autori visā pasaulē ir diskutējuši par jaunajām tendencēm HTML5 un CSS3 un kopīgojuši resursus sabiedrībai. Laiks mainās, un interneta kopiena ar tiem mainās. Jums vajadzētu apsvērt dažas nišas jomas, lai izpētītu un veidotu nelielu interesi.

Zemāk ir daži papildu saraksti, raksti un konsultācijas, ko jūs varat baudīt. Esmu brīvi sadalīt sarakstus HTML5 un CSS3 resursos. Pamatojoties uz to, ko jūs meklējat, šeit vajadzētu būt dažām tēmām visiem. Izbaudiet arī īsu bezmaksas HTML tēmu galeriju, kas pieejama lejupielādei tiešsaistē!

HTML5

HTML5: 15 iedvesmojoši eksperimenti
HTML5: 19 tīmekļa lietojumprogrammas
HTML5: 48 Iespējamās Flash-Killing Demos
Izveidot Ajax balstītu HTML5 / CSS3 kontaktu formu

CSS3

CSS3: iesācēja ceļvedis
CSS3: meklēšanas lauka izveide
CSS3: Pseido klases izmantošana
CSS3: 30 + Noderīgas konsultācijas

Bonuss: HTML5 veidnes un tēmas

Dizaina kompānija

Vai esat gatavs ieiet brīnišķīgajā HTML5 pasaulē? Šeit ir pilnīgi bezmaksas HTML5 veidne, ar jQuery skriptiem un pielāgotiem fontiem, kas ir bruņoti, lai jūs varētu brīvi pārbaudīt!

HTML5 / CSS3 tēma

Šai HTML5 / CSS3 darbinātai tēmai ir kopīgs emuāra izkārtojuma dizains, lai jūs varētu veidot savu HTML5 emuāru ar plašām funkcijām vai vienkārši ienirt kodā un uzzināt kaut ko par to.

Yoko

Yoko ir moderna WordPress tēma, kas runā par elastību ar atsaucīgu izkārtojumu, pamatojoties uz CSS3 mediju vaicājumiem, kas ir spēja pielāgoties dažādiem ekrāna izmēriem, uzzināt par to!

Pelēka

Ja vēlaties izmantot klasisko WordPress emuāra stilu, Gray jums, iespējams, ir ar iebūvētajām CSS3 funkcijām, piemēram, robežu rādiusu, vairākiem foniem, teksta ēnu utt..

Iesācēja ceļvedis, lai uzzinātu par sociālo mediju pārlūku

Iesācēja ceļvedis iOS izstrādei Interfeiss - I daļa

Iesācēju rokasgrāmata Windows 7 Media Center iestatīšanai