Accentsconagua
Lorem ipsum dolor sit amet ...
Nam aliquet tempor turpis ...
Share
Når du bygger et nettsted, har du noen måter å nærme seg med å gjøre.
Du kan starte med å lage den mest avanserte versjonen av nettstedet med alle skript, stiler og så videre, og deretter få det til å gjengis i eldre nettlesere via grasiøs nedbrytning. Du kan velge å ignorere eldre nettlesere, eller du kan starte med en grunnleggende side og legge til skript og stiler slik at den blir mer funksjonell via progressiv forbedring.
I denne serien skal vi se på sistnevnte.
Nå som vi har dekket teorien om progressiv forbedring, kan vi lage en enkel side for å illustrere tilnærmingen. Nettstedet vi skal skape vil være bare et enkelt informasjonsside: noen få lenker, litt tekst, bilder og et kontaktskjema.
Vi vil bruke det utbredt F-oppsettet (hvis du ikke vet hva det er, ta en titt på denne flotte artikkelen om Web Design Tuts +: Forstå F-Layout i Webdesign).
Begynn med å opprette index.html fil med denne HTML-koden:
Eksempel Nettsted
La oss nå lage en overskrift på nettstedet vårt. For å overholde reglene, vil vi bare bruke tag for det:
Vår Eksempeloverskrift
Deretter kan vi lage menyen. Vanligvis vil du bruke tag og plasser ankre i den:
Vær oppmerksom på at selv om du ikke bruker innrykk i koden din (og du bør gjøre det mer lesbar), må du gjøre det her, fordi uten CSS er mellomromene mellom koblingene det eneste som vil skille dem fra når de ser på siden. Selvfølgelig vil du ikke merke det siden nettleseren har en standard CSS for dem.
Slik ser vår side ut:
For å få noen eksempler på tekst, kan du gå til http://www.lipsum.com/ og generere noen få avsnitt. Husk reglene: Vi vil ikke legge innholdet i noen spesiell beholder Lorem ipsum dolor sit amet ... Nam aliquet tempor turpis ... Legg nå bunnteksten med Siden skal nå se slik ut: Du kan opprette Handle om og By på sider på samme måte - de vil ikke ha noe spesielt i dem (du kan legge til navnene som Den siste tingen å gjøre i HTML er kontakt siden. Kopier innholdet til din Legg nå overskriften til skjemaet (i Deretter kan vi legge til en De Nå som siden vår virker, kan vi begynne å få det til å se litt bedre ut. Opprett en fil og navn den Den første tingen å gjøre er å endre fonter og overordnet form på siden: To linjer med CSS, og du kan se at siden ser litt bedre ut som den ikke lenger bruker standardfonter. La oss nå legge til noen ser på overskriften: plasser det litt, endre skriftstørrelsen, og legg til bakgrunnen: Legg merke til hvordan vi endret skriftstørrelsen - vi brukte Etter å ha festet topptekstens utseende, kan vi fortsette med menyen. Vi endrer også skriftstørrelsen på ankrene, fjerner understreken, og legger til en bakgrunn når de svinger over eller når de har en Legg nå til Slik ser det ut akkurat nå: Her vil vi sikte på bare å forbedre lesbarheten ved å øke linjens høyde (ikke glem brukerens innstillinger - vi kan endre størrelsen på rent visuelle elementer som overskrifter og knapper, men brukerne angir standard skriftstørrelse av en grunn). Vi endrer også skrifttypen og legger til noe polstring: Her er resultatet. Legg merke til hvordan lesbarheten er forbedret med en så liten endring: Dette vil også være bare en liten kosmetisk forandring: bakgrunn, polstring og sentrert tekst: Slik ser fotfoten ut akkurat nå: Den siste tingen å gjøre er å fikse utseendet til kontaktskjemaet. Først, la oss fjerne polstring og margin på La oss nå sette bredden på . Det må være semantisk, så vi vil bruke HTML5 element. Sett teksten i tagger rett under menyen. stikkord:
koder rett over innholdet).Trinn 4: Kontaktskjemaet
index.html til contact.html og fjern innholdet i element. stikkord):Kontakt oss
element med passende felt for brukeren å fylle (siden server siden av ting forblir ganske mye det samme vil jeg ikke dekke det her, så hvis du vil teste skjemaet ditt må du skrive back-enden selv): Kodene bryter ikke semantikkregelen fordi etikett- og inngangskombinasjonen faktisk er et avsnitt. Kontaktsiden skal se slik ut:
CSS
style.css. Legg nå denne linjen til delen av dokumentet ditt:
Trinn 5: Basestiler
* font-family: Calibri, sans-serif; kropp bredde: 900px; margin: auto;
Trinn 6: Header
h1 polstring: 100px 10px 20px; margin: 0; bakgrunn: #dfdfdf; font-weight: normal; skriftstørrelse: 3em;
em i stedet for noen annen enhet. Dette er på grunn av det siste av reglene som er forklart i første del av denne serien: Brukere kan endre grunnstørrelsen på skrifttypen, og hvis vi for eksempel hadde brukt px, deres innstillinger ville ikke bli respektert av vårt stilark.Trinn 7: Menyen
aktiv klasse:nav bakgrunn: # aed8ff nav en text-decoration: none; fontstørrelse: 1.3em; farge: # 333; polstring: 15px 25px; display: inline-block; nav a: svever, nav a.active bakgrunn: #dfdfdf; farge: # 666;
aktiv klasse til riktig ankre i filene dine slik at de vises "trykket" når siden er lastet inn:Hjem
Trinn 8: Innholdet
p font-familie: Helvetica, Arial, Sans-Serif; linjehøyde: 1,6; tekstjustering: rettferdiggjøre; polstring: 10px;
Trinn 9: Bunnteksten
footer polstring: 10px; bakgrunn: #dfdfdf; tekst-align: center;
Trinn 10: Formularen
elementer:skjema p margin: 0; polstring: 0;
elementer og