Share
I denne opplæringen skal vi bygge en bloggside ved hjelp av neste generasjons teknikker fra HTML 5 og CSS 3. Opplæringen tar sikte på å demonstrere hvordan vi skal bygge nettsteder når spesifikasjonene er ferdigstilt og nettleservirksomhetene har implementert dem. Hvis du allerede kjenner HTML og CSS, bør det være enkelt å følge med.
Før vi begynner, bør du vurdere å bruke en av våre HTML5-maler eller CSS-temaer for ditt neste prosjekt, det vil si hvis du trenger en rask og profesjonell løsning. Eller du kan prøve en av de erfarne utviklerne på Envato Studio som kan hjelpe deg med et bredt spekter av egendefinerte HTML5- og CSS-prosjekter.
Ellers er det på tide å grave inn i disse teknikkene.
HTML 5 er den neste store versjonen av HTML. Den introduserer en rekke nye elementer som vil gjøre sidene mer semantiske. Dette vil gjøre det mye enklere for søkemotorer og skjermlesere å navigere på sidene våre, og forbedre webopplevelsen for alle. I tillegg vil HTML 5 også inneholde fancy APIer for å tegne grafikk på skjermen, lagre data offline, dra og slippe, og mye mer. La oss begynne å markere bloggsiden.
Før vi begynner å markere siden, bør vi få den samlede strukturen rett:
I HTML 5 er det bestemte koder som er ment for å markere topptekst, navigasjon, sidebar og bunntekst. Først, ta en titt på markeringen, og jeg vil forklare etterpå:
Side tittel Side tittel
Det ser fortsatt ut som HTML-oppslag, men det er noen ting å merke seg:
I stedet for å bruke divs for å inneholde forskjellige deler av siden bruker vi nå passende, semantiske koder. De vil gjøre det mye enklere for søkemotorer og skjermlesere å finne ut hva som er hva på en side.
Navigeringen er merket opp akkurat som vi ville gjøre det i HTML 4 eller XHTML, ved hjelp av en uordnet liste. Nøkkelen er at denne listen er plassert inne i nav-taggene.
Vi har allerede definert en ny seksjon i dokumentet ved hjelp av avsnittetiketten. Nå trenger vi bare litt innhold.
Elsker du blomster så mye som vi gjør?
Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, med en utøvende utøvelse av arbeidskraft.
Vi legger til et id til delen tagg slik at vi kan identifisere det senere når styling. Vi bruker header-koden til å vikle rundt det innledende h2-elementet. I tillegg til å beskrive et hel dokument, skal header-taggen også brukes til å beskrive enkelte seksjoner.
Vårt hovedinnholdsområde består av tre seksjoner: blogginnlegget, kommentarene og kommentarskjemaet. Ved å bruke vår kunnskap om de nye strukturelle kodene i HTML 5, bør det være enkelt å markere det.
Gå gjennom merkingen, og jeg vil forklare de nye elementene etterpå.
Dette er tittelen på et blogginnlegg
postet på av Mads Kjaer - 3 kommentarer
Kjæresten er dum og sitter, og er en avgjørende forfatter. Proin euismod tellus eu orci imperdiet ikke rutrum lacus blandit. Det er en god ide, så mye som helst, men det er ikke noe som helst. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio ...
Vi starter en ny seksjon og bryter hele blogginnlegget i en artikkel-tag. Artikkel-taggen brukes til å betegne en selvstendig oppføring i en blogg, diskusjon, encyklopedi, etc. og er ideell til bruk her. Siden vi ser på detaljer i et enkelt innlegg, har vi bare en artikkel, men på forsiden av bloggen vil vi pakke inn hvert innlegg i en artikkel-tag.
Overskriftselementet brukes til å presentere toppteksten og metadataene om blogginnlegget. Vi forteller brukeren når innlegget ble skrevet, hvem skrev det og hvor mange kommentarer den har. Merk at tidsstempelet er pakket inn i en -tag. Denne taggen er også ny for HTML 5 og brukes til å markere et bestemt sted i tide. Innholdet i datetimeattributtet skal være:
Markering av kommentarene er ganske rett frem. Ingen nye koder eller attributter blir brukt.
kommentarer
George Washington på Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, med en utøvende utøvelse av arbeidskraft.
Benjamin Franklin på Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, med en utøvende utøvelse av arbeidskraft.
Flere forbedringer av skjemaer har blitt introdusert i HTML 5. Du må lenger gjøre klientsiden validering av nødvendige felt, e-post, etc. Nettleseren tar seg av dette for deg.
Det er nye to nye typer innganger, e-post og nettadresse. E-post angir at brukeren skal skrive inn en gyldig e-post, og oppgi at brukeren skal skrive inn en gyldig nettadresse. Hvis du skriver på som et attributt, kan brukeren ikke sende inn et tomt felt. "Required" er en boolsk attributter, ny til HTML 5. Det betyr bare at attributtet skal deklareres uten en verdi.
Markeringen av sidefeltet og bunnteksten er ekstremt enkel. Noen få seksjoner med noe innhold inne i riktig side- og bunntekst.
Du kan se den endelige, ustile oppslaget her. Nå for styling.
CSS 3 bygger på prinsippene om stiler, selektorer og kaskade som vi vet så godt fra tidligere versjoner av CSS. Det legger til mange nye funksjoner, inkludert nye selektorer, pseudoklasser og egenskaper. Ved hjelp av disse nye funksjonene blir det mye enklere å konfigurere oppsettet. La oss dykke inn.
For å begynne med skal vi definere noen grunnleggende regler angående typografi, bakgrunnsfarge på siden, etc. Du vil gjenkjenne alt dette fra CSS 2.1
/ * Makeshift CSS Reset * / margin: 0; polstring: 0; / * Fortell nettleseren for å gjengi HTML 5-elementer som blokk * / header, footer, til side, nav, artikkel display: block; kropp margin: 0 auto; bredde: 940px; font: 13px / 22px Helvetica, Arial, sans-serif; bakgrunn: # f0f0f0; h2 skriftstørrelse: 28px; linjehøyde: 44px; polstring: 22px 0; h3 font-size: 18px; linjehøyde: 22px; polstring: 11px 0; p polstring-bunn: 22px;
Først tilbakestilles vi margin- og padding-stiler med en enkel regel. I et produksjonsmiljø ville jeg bruke en mer komplett CSS Reset som Eric Meyer (for CSS 2.1), men for omfanget av opplæringen vil dette gjøre.
Vi forteller nettleseren å gjengi alle de nye HTML 5-elementene som blokk. Nettleserne er fine med elementer de ikke gjenkjenner (dette er grunnen til at HTML 5 er noe bakoverkompatibel), men de vet ikke hvordan disse elementene skal gjengis som standard. Vi må fortelle dem dette til standarden er implementert over hele linja.
Legg også merke til hvordan jeg har valgt å formatere skrifter i piksler i stedet for ems eller%. Dette er å opprettholde den progressive karakteren av opplæringen. Når de store nettleserne en dag er fullstendig ferdig med å implementere HTML 5 og CSS 3, har vi alle tilgang til sidenzoomering i stedet for bare å endre størrelsen på tekst. Dette eliminerer behovet for å definere størrelser i relative enheter, da nettleseren vil skalere siden alligevel.
Se hvordan siden ser ut som den grunnleggende stylingen som er brukt. Nå kan vi fortsette å stylere resten av siden. Ingen ekstra stiler kreves for toppteksten, så vi går rett til navigasjonen.
Det er viktig å merke seg at bredden på kroppen er definert som 940px og at den har vært sentrert. Vår navigasjonslinje må spenne hele bredden av vinduet, så vi må legge til noen ekstra stiler:
Accentsconagua
nav posisjon: absolutt; venstre: 0; bredde: 100%; bakgrunn: url ("nav_background"); Vi plasserer nav-elementet helt, juster det til venstre for vinduet og gjør det spenner over hele bredden. Vi senterer den nestede listen for å vise den innenfor rammen av oppsettet:
nav ul margin: 0 auto; bredde: 940px; listestil: none;
Nå skal vi definere noen flere stilarter for å gjøre navigasjonselementene mer prettige og justere dem til gridene som layoutet er basert på. Jeg har også tatt med en stil for å markere siden brukeren er på, og noen tilpasset styling for abonnementslinken.
nav ul li float: left; nav ul li a display: block; margin-høyre: 20px; bredde: 140px; skriftstørrelse: 14px; linjehøyde: 44px; tekst-align: center; tekst-dekorasjon: ingen; farge: # 777; nav ul li a: svever color: #fff; nav ul li.selected a color: #fff; nav ul li.subscribe a margin-left: 22px; polstring-venstre: 33px; tekstjustering: venstre; bakgrunn: url ("rss.png") venstre senter no-repeat; Markeringen for introduksjonen er ganske enkel: En seksjon med en overskrift og et stykke tekst. Vi bruker imidlertid noen nye CSS 3 triks for å gjøre det ser mer tiltalende ut.
#intro margin-top: 66px; polstring: 44px; bakgrunn: # 467612 url ("intro_background.png") repeat-x; bakgrunnsstørrelse: 100%; border-radius: 22px; Vi bruker to nye eiendommer. Den første er bakgrunnsstørrelse, som lar deg skalere bakgrunnsbildet. I vårt tilfelle skaller vi det til 100% på begge akse. Hvis boksen utvides når vi legger til mer innhold, vil også gradientbakgrunnen skalere. Dette er noe som ikke var mulig i CSS 2.1 uten ikke-semantisk merking og diverse nettleserproblemer.
Den andre nye eiendommen er grense-radius, som gjelder avrundede hjørner til elementet. Radien av våre avrundede hjørner er 22px i hvert hjørne. Du kan angi forskjellige verdier for hvert hjørne eller velge å bare runde individuelle hjørner.
Dessverre er ingen av egenskapene fullt implementert i de store nettleserne. Vi kan imidlertid få litt støtte ved å bruke leverandørspesifikke attributter. Bakgrunnsstørrelse støttes av nyere versjoner av Safari, Opera og Konqueror. Border-radius støttes av nyere versjoner av Safari og Firefox.
#intro ... / * Bakgrunnsstørrelse ikke implementert ennå * / -webkit-bakgrunnsstørrelse: 100%; -o-bakgrunnsstørrelse: 100%; -Khtml-bakgrunnsstørrelse: 100%; / * Border-radius ikke implementert ennå * / -moz-border-radius: 22px; -webkit-grense-radius: 22px;
Siden vi har definert bakgrunnsfarger, vil det ikke være store problemer i nettlesere som ikke støtter bakgrunnsstørrelse, for eksempel Firefox. Nå må vi bare skrive på overskriften og teksten.
#intro h2, #intro p¬ † width: 336px; #intro h2 polstring: 0 0 22px 0; font-weight: normal farge: #fff; #intro p polstring: 0; farge: # d9f499;
Blomstbildet kan legges enkelt ved å gi #intro et andre bakgrunnsbilde, noe som CSS 3 støtter.
#into ... background: # 467612 url ("intro_background.png") øverst til venstre (287px 100%) repeat-x, url ("intro_flower.png") øverst til høyre (653px 100%) no-repeat; ... Vi gir de to bakgrunnsbildene eksplisitte dimensjoner for å sikre at de ikke overlapper, og vi er satt. Legg merke til stenografi notering av bakgrunnsstørrelse.
Dessverre støtter ingen nettleser dette på en pålitelig måte, så vi må gjøre det på gammeldags måte: ved å inkludere et inline bilde og plassere det ved hjelp av CSS. Se det siste eksemplet for å se hvordan det ble gjort.
Innholdsområdet og sidefeltet skal justeres ved siden av hverandre. Tradisjonelt ville du gjøre dette ved å bruke flyter, men i CSS 3 skal vi bruke tabeller!
"Hva ?! Tabeller?" du kan spørre og se forvirret. Du har sikkert lært år siden at bruk av tabeller for weboppsett er et stort nei, og det er fortsatt. Du bør aldri bruke tabellelementet til å markere et oppsett. I CSS 3 kan vi imidlertid gjøre elementer oppfører seg som tabeller uten at det noen gang vises i oppslaget! For å begynne med, trenger vi noen divs for å gruppere seksjonene på en litt mer logisk måte.
Alt er fortsatt sanselig semantisk, men nå kan vi stile det. Vi vil at #content div skal oppføre seg som et bord, med #mainContent og til side som tabellceller. Med CSS 3 er dette veldig enkelt:
#content display: table; #mainContent display: tabell-celle; bredde: 620px; polstring-høyre: 22px; til side display: tabell-celle; bredde: 300px;
Det er alt! Ingen mer flytende, faux kolonne bakgrunnsbilder, rydde eller kollapsende marginer. Vi har gjort elementene oppfører seg som et bord, og dette gjør det mye enklere for oss å gjøre oppsett.
Styling av post header er ganske trivielt, så jeg hopper over til den morsomme delen: multi-column layout.
Flere tekstkolonner var tidligere umulige uten å splitte teksten manuelt, men med CSS 3 er det et stykke kake, selv om vi må legge til en div rundt de flere avsnittene for at dette skal fungere med nåværende nettlesere.
Lorem ipsum dolor sit amet ...
Pellentesque ut sapien arcu ...
Vivamus vitae nulla dolor ...
...
Nå kan vi legge til to enkle egenskaper og kalle det en dag.
.blogPost div kolonne-telling: 2; kolonneavstand: 22px;
Vi ønsker 2 kolonner og et gap på 22px mellom kolonnene. Den ekstra diven er nødvendig fordi det for øyeblikket ikke er mulig å få et element spenner over en kolonne. I fremtiden vil du imidlertid kunne spesifisere egenskapen for kolonnestrekning, og vi kan bare skrive:
.blogPost kolonne-telling: 2; kolonneavstand: 22px; .blogPost header kolonne: alle;
Selvfølgelig støttes kolonne-tall og kolonne-gap egenskaper bare av noen nettlesere, Safari og Firefox. Vi må bruke leverandørspesifikke egenskaper for nå.
.blogPost div / * Column-count ikke implementert ennå * / -moz-column count: 2; -webkit-kolonne-telling: 2; / * Column-gap ikke implementert ennå * / -moz-column-gap: 22px; -webkit-kolonne-gapet: 22px;
Hvis du ser nøye på bildet i blogginnlegget, ser du en dråpe-skygge. Vi kan generere dette ved hjelp av CSS 3 og boksskyggeegenskapen.
.blogPost img margin: 22px 0; boks-skygge: 3px 3px 7px # 777;
Den første "3px" forteller nettleseren hvor vi vil ha skyggen til å stoppe horisontalt. Den andre "3px" forteller det hvor vi vil at skyggen skal stoppe vertikalt. Den siste "7px" er hvor uskarpt grensen skal være. Hvis du setter den til 0, blir den helt solid. Sist men ikke minst definerer vi skyggenes grunnfarge. Denne fargen er selvsagt falmet, avhengig av hvor mye du slør skyggen.
Det kommer sannsynligvis ikke som en overraskelse at denne egenskapen ikke er implementert i alle nettlesere ennå. Faktisk fungerer det bare i Safari, og du må bruke den leverandørspesifikke eiendommen.
.blogPost img margin: 22px 0; -webkit-boks-skygge: 3px 3px 7px # 777;
Zebra-striping, eller utheve hvert sekundelement i en serie, har tradisjonelt involvert å velge alle elementene via javascript, deretter looping gjennom dem og markerer alle de ulike elementene. CSS 3 introduserer pseudoklassen "nth-child", noe som gjør det latterlig enkelt å gjøre dette uten javascript. Vi bruker den til å zebra-stripe kommentarene.
seksjon # kommentarer artikkel: nth-barn (2n + 1) polstring: 21px; bakgrunn: # E3E3E3; grense: 1px solid # d7d7d7; / * Border-radius ikke implementert ennå * / -moz-border-radius: 11px; -webkit-grense-radius: 11px;
Den rare verdien "2n + 1" er faktisk ganske enkel hvis du forstår hva den står for:
Alternativt kan du bare skrive:
seksjon # kommentarer artikkel: nth-barn (merkelig) ...
Siden standarden inneholder de to mest brukte verdiene som stenografi, merkelig og jevn. Resten av kommentar styling bør være enkel å forstå med din nye kunnskap.
Et par CSS 3 teknikker blir gjenbrukt i styling av kommentarform, bunntekst og sidebar. I kommentarformet og bunnteksten har jeg brukt samme type tabelloppsettsteknikk som brukes i hovedoppsettet. I sidelinjen er rammen radius brukt til å legge runde hjørner til de forskjellige seksjonene.
Se det endelige designet med all styling påført.
Siden gjøres riktig i Safari 4 og nyere webkitbaserte nettlesere, da det er den eneste gjengivelsesmotor som støtter alle CSS 3-teknikkene vi har brukt. Firefox 3 har noen problemer med å bruke avrundede hjørner til vårt blomstebilde, og det støtter ikke bakgrunnsstørrelse, men dessuten fungerer oppsettet. Jeg har valgt å ignorere Internet Explorer fordi det krever litt hacking for å få HTML 5 til å fungere. Du kan også definere noen flere regler og få alt som fungerer over store nettlesere, men alt dette er utenfor omfanget av opplæringen.
Når HTML 5 og CSS 3 er implementert en dag i alle nettlesere, blir det mye enklere å bygge nettsteder. Vi vil endelig kunne slutte å bruke flyter for layout (som de aldri var ment å bli brukt til), og vi vil bruke betydelig mindre tid på å skrive javascript for å skala våre bakgrunnsbilder eller zebra-stripe våre bord. Forhåpentligvis vil vi bruke all denne ekstra tid til å studere noen forsømte områder av webdesign, som frontendoptimalisering og riktig informasjonsarkitektur.
Ta en titt på våre HTML5-maler eller CSS-temaer - hvis du trenger en profesjonell, ferdig løsning for ditt neste webprosjekt.
