10 Nettsteder med stort eksempel CSS Layouts - dummies

En av de beste måtene å lære å bruke CSS til å utføre ulike oppgaver er å se hvordan andre mennesker konfigurerer sine nettsteder. Følgende liste presenterer forskjellige layouter som du kan bruke til å lage ditt eget nettsted. Det diskuterer også layouttypen og spesialfunksjonene om hvert nettsted du bør merke.

• Astronomi Bilde av dagen : Astronomiets bilde av dagen (APOD) er et fremragende eksempel på en væskedesign. Prøv å endre størrelsen på siden, og du vil bli overrasket over hvordan sidens innhold reagerer. (Grafikken i midten fungerer ikke bra på en mobiltelefon, men teksten sikkert gjør det.) Den presenterer en god kombinasjon av skrifttypestiler og viser hvordan du bruker lenker godt for å forbedre innholdet.

• USA Today : Dette er et godt eksempel på en to eller tre kolonne adaptiv design. Legg merke til at når du endrer størrelsen på siden, vil den tredje kolonnen til høyre forsvinne når siden blir for liten. Legg merke til pilene på hver side av presentasjonen. Du kan bruke dem til å flytte mellom aviseksjoner, noe som er en utmerket bruk av denne spesielle effekten.

• Yahoo! Kart : Kartsteder kan være notorisk vanskelig å bruke fordi de er avhengige av et komplekst grensesnitt, eller informasjonen er ikke i et skjema som er enkelt for brukerne å skrive inn. Yahoo! Kart får rundt dette problemet ved å gi tre enkle felt. Flertallet av grensesnittet er faktisk viet til å vise kartet. Kontrollsystemet for kartet er lett å forstå og krever ingen ordlyd. Dette er et godt eksempel på en grafikkorientert applikasjon. Dette er også et av de få eksemplene på en responsiv design som du finner riktig implementert.

• Thesaurus. com : Dette fastgjort med oppsettsted gir et godt eksempel på hvordan du bruker faner på en unik måte. Det er faktisk flere nettsteder knyttet til dette enkeltstedet. Ved å klikke på en av kategoriene øverst, blir du overført til andre nettsteder, for eksempel Dictionary. com og ordbok. com Oversetter. Legg merke til bruken av et komplekst layout for dette nettstedet. De tre kolonneoppsettene er delt inn i underavdelinger etter behov for å formidle tilleggsinformasjon.

• Go Convert : Dette er et godt eksempel på en tre søyle elastisk design. Implementeringen er ikke perfekt, men legg merke til hvordan innholdet forbruker hele siden, uansett hvor stor du gjør det. Du kan også gjøre siden relativt liten før du ser et tegn på en rullefelt fordi innholdet krymper for å passe ledig plass. Denne siden har også et to menysystem (en til venstre for å få tilgang til konverteringsfunksjoner og en til høyre for å få tilgang til nettstedsfunksjoner).

• JC Penney : Mange salgssteder gir lag av innhold. I dette tilfellet ser du en leverandøroverskrift øverst, en fin interaktiv meny neste, det siste salget neste, den nåværende webbanen, og til slutt de to kolonnene salgsinformasjon. Dette er en fast breddepresentasjon, slik at den ikke skaleres bra når nettleserens størrelse endres. Fokus er på å presentere bildene på siden på best mulig måte.

• Petter Hesselberg. com : I motsetning til de fleste nettsteder i dag bruker denne absolutt posisjonering effektivt (det bryter også reglene ved å bruke tabeller for å holde innholdet - siden ville være bedre hvis det bare brukte CSS). Presentasjon av tabelldata kan være vanskelig. Dette nettstedet viser en effektiv måte å vise tabelldata som ikke er for opptatt eller vanskelig å se. Det er ikke alltid nødvendig å bruke grenser når du viser tabelldata - noen ganger er subtil farging alt du trenger.

• Sourceforge : I noen tilfeller må du opprette et oppsett for å distribuere informasjon i et annet format, for eksempel. ZIP-filer. Dette er et eksempel på en informasjonsdistribusjonsstrategi som bruker HTML5-teknikker og funksjoner som uordnede lister for menyer. Den faste breddeoppsettet endres ikke veldig bra, men selve nettstedet er ganske fleksibelt. Legg merke til hvordan dette nettstedet effektivt bruker et to-kolonneoppsett med overskrift og bunntekst.

• GetHuman : Databaser blir søkt oftere enn de er forandret. Når databasen er stor, blir det vanskelig og frustrerende å forsøke å finne et bestemt stykke informasjon. Denne fastbreddeområdet demonstrerer en telefonkatalogssøkteknikk som kan brukes på andre typer nettsteder som har en tendens til å stole på bare en eller to nøkler for å vise en rekke opplysninger. Legg merke til bruk av spesial effekter for å vise hvilken linje som er valgt. Nettstedet presenterer også et tabulært utseende uten å faktisk bruke tabeller (se kildekoden for å se for deg selv).

• John's tilfeldige tanker og diskusjoner : Dette nettstedet presenterer deg et perfekt eksempel på de to kolonneoppsettene som brukes i et bloggmiljø. Du ser hvordan oppføringene i sidefeltkolonnen til venstre gjør det mulig å få tilgang til innholdsoppføringene i høyre rute med større enkelhet. I tillegg hjelper dette nettstedet deg til å forstå fordelene og ulemperne i den klassiske fastbreddeoppsettet.