Sideshow barker

Hvorfor tabeller er tåbelige til layout:

problemer defineres, løsninger tilbydes

Tabeller eksisterede i HTML for en grund: For at vise tabullerede data. Men så gjorde border="0" det muligt for designere at have et grid hvorpå man kunne lægge billeder og tekst. Selvom det stadigvæk er den mest anvendte metode til at lave visuelt rige web sites, er brugen af tabeller faktisk en barriere for at bygge et bedre, mere tilgængeligt, fleksibelt og funktionelt web. Find ud af hvor problemet stammer fra og lær metoder til at lave overgangs- eller totalt tabel-løst layout.

Yuppie holding a cigar

Hent din chef

Er der nogen "jakkesæt" blandt publikum? Er dine chefer i huset, men igang med noget helt andet? Hent dem. De er de personer, som har behov for at vide, hvordan web standarder kan spare penge for jeres firma.

Plumber with a toliet plunger

Oversigt: Hvad er fordelene for mig?

Vi vil give dig en introduktion til en arbejdsmetode som vil

Vi vil også beskrive hvordan layout ved hjælp af Cascading Style Sheets (CSS) kræver en lidt anden måde at tænke på dit indhold og din kode end du måske har været vant til.

Man in a top hat, tuxedo, and white tie

Dræber Web Sites: Indlejrede tabeller og fyld GIF'er

I begyndelsen var Internettet primært et medie til akademikere, forskere og militæret til at dele information. Det varede dog ikke længe inden visionære forretningsfolk forstod at det nye medie var ideelt til at sælge alt fra ferskvarer og hundemad til brugte biler og streamede sportsbegivenheder.

Det tidlige Internet var dog, som ethvert medie i dets barndom, æstetisk ‘uraffineret’ (og ikke særligt indbydende for forbrugeren) indtil David Siegel udgav sin milestensbog, som gav opskriften på en række fremragende workarounds for de daværende browseres begrænsninger og W3C specs anno 1997. (Vi taler om Netscape 2 og 3.)

Disse workarounds var så fremragende at de rent faktisk stadigvæk de mest anvendte metoder til layout på websider idag.

Mad scientist hatches his evil plot

Problemet med at bruge tabeller:

Preacher testifying to the mortal danger of using tables for layout

Frelsen er nær

Moderne browsere er meget bedre til at håndtere Web standarder og vi behøver ikke disse ældgamle metoder mere.

I stedet for at indlejre tabeller i tabeller og fylde tomme celler med fyld GIF'er, kan vi anvende en meget mere simpel kode og CSS til at layoute smukke sites som hentes hurtigere, lettere at redesigne og mere let tilgængelige for alle.

Boxer exhausted between rounds of a fight

Løsningen: CSS og strukturel kode

Ved at bruge strukturel kode (markup) i vores HTML dokumenter og Cascading Style Sheets til layout på siderne, kan vi holde det egentlige indhold adskilt fra måden hvorpå det præsenteres.

Dette har adskillige fordele fremfor at anvende tabeller....

Film director shouting at his crew

Redesign er nemmere og mindre dyrt

Ved at flytte præsentationskode fra dine sider bliver redesign af eksisterende sites og konvertering meget mindre arbejdstungt (og meget mindre dyrt). For at ændre sitets layout behøver du kun at ændre dit style sheet; du behøver ikke redigere selve siderne overhovedet.

For eksempel, check CSS Zen Garden, eller style switcheren på Eric Meyer's site. For at lære mere, se Alternative Style af Paul Sowden.

Reporter grilling a lawmaker about his website

Båndbredde er ikke gratis

Brugen af web standarder reducerer filstørrelsen på dine sider fordi brugerne ikke længere skal downloade præsentationskode for hver side de besøger. Style sheets som kontrollerer layoutet bliver cached af brugerens browser.

Reduceret filstørrelse betyder hurtigere hentning og lavere hosting omkostninger.

Sweating orchestra conductor

Hey, disse sider ligner allesammen hinanden!

Brug af web standarder gør det også ekstremt nemt at bibeholde visuel konsistens igennem et site. Da alle sider bruger det samme CSS dokument for deres layout, er de alle formatteret ens.

Dette styrker dit brand og gør din site mere anvendelig.

Cowboy talking about the importance of accessibility

Skriv en gang, brug hvor som helst, for alle

Brug af web standarder gør vores sider meget mere tilgængelige for brugere med handicaps og læsere som bruger mobiltelefoner og PDA'er.

Besøgende der bruger skærmlæsere (såvel som langsomme forbindelser) behøver ikke at vade igennem tonsvis af tabelceller og spacers for at nå til vores sides egentlige indhold.

Med andre ord, ved at adskille indholdet fra måden hvorpå det præsenteres gør dit indhold enheds-uafhængigt.

Woman freaking out because her markup is ruining her SEO

Google er blind

Når du øger din tilgægelighed, minimerer din kode og bruger header tags ordentligt forbedrer du også din søgemaskine placering.

At reducere forholdet imellem kode og indhold, bruge nøgleord i dine header tags og erstatte GIFs i headeren med egentlig tekst vil altsammen hjælpe dine sites med at opnå bedre søgemaskine placeringer.

Construction worker committed to using his old tools

Overgangsdesign: Du kan stadigvæk bruge tabeller hvis du er nødt til det, bare lad være med at bruge så mange

Dette vil give besøgende (og chefer), som er fast besluttede på at bruge version 4 browsere til deres dages ende, en rimelig fornemmelse af hvad alle andre ser.

Overconfident yuppie not worried about his code

En rimelig nydelig tabel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eros et accumsan et iusto odio dignissim qui blandit
Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Epsum factorial non deposit quid pro quo hic escorol.
Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.
Bellboy struggling

Tag et kig under overfladen

Dette kunne laves meget mere simpelt.Gæt hvormeget kode der er i denne lille tabel? 13.7k. Der er 17 rækker og 9 kolonner. Huskede jeg at nævne alle de fyld GIF'er?
Der er alt for mange tabel celler og spacers her.Og alle de stiplede rammer er lavet med en background attribut på tabel cellerne, som ikke kan valideres.
En indlejret tabel? Hvorfor?
For at lave en punktopstilling? Du gør grin med mig?
Det hele kunne laves med 8 tabel celler og 4 CSS regler.Seriøst. 8 celler og 4 CSS regler, er alt hvad der skal til.
Åh nej, endnu en tabel til at lave en punktopstilling.
Bare marker din punktopstilling som en punktopstilling og lad CSS gøre resten.
Du skal have en regel til <table>, en til <td>, en til <ul> og en til <li>.Det er det hele. Når du har dem er du flyvende.
Det er noget bedre end at bruge 8 tabel celler mere for at lave en falsk punktopstilling, som i sidste ende er noget mindre tilgængeligt.
SUPER! Det sidste falske punkt.

Koden til at vise tabel strukturen:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Man telephoning his co-worker in a panic

Det var meget bedre

Meget bedreGæt hvormegett kode der er i denne lille tabel? 2.1k. Der er 4 rækker og 2 kolonner. Og ingen fyld GIF'er.
Helt perfektOg alle de stiplede rammer er lavet med CSS og er helt valide.
  • Der er nu en liste type
  • Helt som det bør være
Det hele er lavet med 8 tabel celler og 4 CSS regler.Seriøst. 8 celler og 4 CSS regler, er alt hvad der skal til.
  • Hurra for punktopstillinger
  • Hvorfor ikke markere din punktopstilling som en punktopstilling og lade CSS gøre resten?
Du skal have en regel til <table>, en til <td>, en til <ul> og en til <li>.Det er det hele. Når du har dem er du flyvende.
  • Jeg elsker punktopstillinger
  • Fantastisk! ikke flere falske punkter

Og her er CSS koden som fjerner al den rodede kode:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Policeman signaling for us to stop and think
<

Opsummering af overgangsdesign

Brug margin og padding i stedet for ekstra celler og fyld GIF'er.

Brug link og @import styles. Det første til gamle browsere, det andet til moderne browsere.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Eksempler fra den virkelige verden:

Men vent, der er mere endnu:

For mere information om overgangsdesign, se kapitel et i Eric Meyer on CSS og store dele af Jeffrey Zeldman's Designing with Web Standards.

Young coder realizing that he does not need to use tables for layout

CSS layout: Fremtiden er her nu

Browserne som langt de fleste anvender har en god CSS support. De har alle deres mærkværdigheder, men når først man har vænnet sig til dem, kan man komme uden om dem.

At kode CSS er nemt. Selv for en fyr som mig som synes at JavaScript for det meste ligner bandeord.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Hver enkelt CSS regel har en selector og en deklaration. Deklarationen består af en egenskab og en værdi. Til egenskaber der lyder som om de skulle være i 2 ord bruges bindestreg.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Superhero flying to our rescue

Strukturel kode: Kod det du mener, mén det du koder

Selvom det at skrive den egentlige CSS er simpelt, kræver det at anvende CSS til dit layout en lidt anden måde at tænke på end de fleste af os sikkert er vant til.

I stedet for at tænke på ting som "dette skal være her og dette skal være der" når vi arbejder på en side eller et layout, skal vi nu tænke på ting som typer af information på vores sider og strukturen på informationen.

Vi tildeler den vigtigste overskrift et <h1> tag; underoverskrifter får <h2> tags, etc.; og afsnit er afsnit.

Dette er hvad der forståes ved "strukturel" eller "semantisk" kode.

I stedet for at proppe dit indhold ind i tabeller og tabel celler pak det ind i div elementer. Giv dine div elementer et id eller en class som beskriver deres indhold og/eller funktion, snarere end deres udseende.

Chef preparing tag soup

Undgå <b>ed and <br>eakfast kode

Tænk på hvorfor du vil have noget til at fremstå på en bestemt måde; hvad er betydningen? Din kode kan og bør indeholde betydning, også for nogen som ikke kan se din side. Semantisk kode gør vores sider mere tilgængelige for alle, inklusive søgemaskiner.

Hvis du laver noget kursivt, er det så fordi du vil fremhæve det, <em>, eller fordi det er det er titlen på en bog, <cite>?

Hvis noget står med fed, burde det nok kodes som <strong>.

Hvis du vil have et linieskift efter noget, så er der nok en sandsynlighed for, at det skulle kodes som et overskriftselement. Hvis det ikke er en overskrift, er det så en del af en class som anvendes på hele dit site? Hvis det er tilfældet brug CSS i stedet for <br>.

.foo {display:block}

For at lære mere, læs Bed and BReakfast markup (B&BR) af Tantek Çelik.

Evil villain mocking us

Ting som tabeller er bedre til end CSS

Der er nogle bestemte ting som CSS ikke gør ligeså godt som tabel layouts.

For eksempel, hvis du nu har en sort nav bar i siden som skal have samme udstrækning som dit indhold. Med tabel layout er det let som ingenting. Bare giv <td> en sort baggrund.

Vi kan gøre det med CSS, men det kræver en noget anden tilgang.

Hvis vi giver vores nav div en sort baggrund, vil det sorte kun strække sig indtil nav'en 'ender'. På de fleste sider er indholdet længere end indholdet, så det er ikke godt..

I stedet kunne vi 'tile' en sort GIF i vores div for indholdet og give denne div tilstrækkeligt med padding til venstre, men hvis vores navigation er længere end inholdet, virker dette heller ikke.

En anden fremgangsmåde er at 'tile' den sorte GIF på baggrunden af vores <body>, hvilket er fint med mindre du vil bruge et andet billede som baggrund af din <body>.

Eller, vi kan pakke vores indhold ind i en 'wrapper' div og 'tile' billedet i den div. Men, dette ikke-semantisk fyld til vores kode.

Og, i det hele taget virker det ikke at 'tile' baggrundsbilleder hvis du vil have bredden af din navigation til at være flydende.

Som sagt, der er nogle ting tabeller gør bedre CSS. Men i sidste ende er du nødt til at spørge dig selv, om al den baggage, som følger med ved at bruge tabeller til layout i stedet for data er det værd.

Friendly mailman

Skiftet fra tabel hacks til web standarder: Det store overblik

Først er du nødt til at finde en strategi for skiftet. Vil du ændre hele sitet på en gang eller vil du lave en sektion ad gangen?

Identificer sektioner og sider som vil have størst gavn af konverteringen. Startsider, annoncering af nye produkter og lignende sider er et naturligt sted at starte.

Identificer hvilke typer af indhold/information dit site indeholder totalt set

Surgeon in the operating room

Bryd dine sider ned

Når du har styr på typerne af indhold på dit site, er det på tide at analysere dine eksisterende sider for en logisk opdeling af indholdet.

Analyser din tabel struktur for indlejrede tabeller og tomme spacer celler og rammer. (Vi vil erstatte disse med div tags eller en meget simplere tabel struktur.)

Passive aggressive maid

Kig på din kode

Når du har analyseret strukturen på dine sider, er det på tide at kigge ind under det ydre. Dvs. analysere din eksisterende kode af præsantationsmæssig HTML, som kan blive erstattet med strukturel kode.

Fireman rescuing content

Erstat præsentations tags med strukturel kode

Du kan bruge søg og erstat (og lignende udtryk), men det letteste er nok at se din eksisterende side i en browser og kopiere teksten herfra og indsætte den i din HTML editor.

Overvej strukturen af dit dokument! Bare at erstatte <b> tags med <strong> tags er ikke nok.

Hvad er den vigtigste overskrift? Marker den med et <h1> tag. Marker dine underoverskrifter med <h2> tags og så videre. Marker afsnit med <p> tags. Kod din your navigation som uordnede lister.

Vælg en DOCTYPE og brug den. (Vi anbefaler XHTML transitional med mindre du er hard core, i så fald bør du kaste dig ud i ren XHTML.)

Clown

Opdel din side i logiske divs

Placer din overordnede navigation i en div med et id: mainnav. Placer din subnav i en div med et id eller class: subnav. Placer din sidefod i en <div id="footer"> og pak dit indhold ind i en <div id="content">.

Det ser ikke ud af meget endnu, men når først du begynder at tilføje regler til dine style sheets kommer der gang i tingene.

Two superheroes

Det er på tide at begynde og skrive din CSS

Til at begynde med, giv hver div en ramme. For eksempel, div {border:1px dotted gray; padding:.5em} Det vil hjælpe dig med at se hvor de begynder og slutter, og også om du har gang i noget indlejring.

Skriv din CSS for element selectors først (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)

Brug kontekstuelle eller nedarvede selectors så meget som muligt. Dette vil gøre din kode meget mere ryddelig. For eksempel, #subnav li{border:1px solid black; padding:.5em; display: inline} vil kun påvirke liste elementer som er i din subnav div.

Test i så mange browsere som muligt og få dine venner til at teste det i deres browsere.

Paparazzi

Eksempler på sites der er lavet med CSS

Newsboy selling newspapers

Læs alt om det

Selvfølgelig kan vi ikke dække alt hvad du har brug for at vide omkring CSS på en time, men disse bøger vil give dig et godt begreb omkring web standarder, så du kan gøre dine sider lettere, renere og hurtigere.

Painter at his easel

Papir? Vi har sgu' ikke brug for papir: Online resourcer

CSS-Discuss

zeldman.com The Daily Report: Indsigtsfuld, provokerende og velskrevet indhold og links som jævnligt opdateres.

A List Apart For personer der laver Web sites

The Web Standards project Gud velsigne disse mennesker.

CSS: A guide for the unglued En super links side

CSS Layout Techniques: for Fun and Profit Layouts som du kan bruge i dine projekter fra Eric Costello. Ressourcer og vejledninger, også.

Real World Style CSS layouts, tips, tricks og teknikker techniques fra Mark Newhouse.

The Business Benefits of Web Standards Gode nyheder for moderne chefer. Essensen af Web standarderne præsenteret så en MBA kan forstå det.

Worker asleep at his computer

Tak. Nogle spørgsmål?

; Scott Design Inc

; Adobe Systems Incorporated

Christian Rygaard ; amplio (Overs.)

Carsten Fisker ; 3fisk (Overs. ill.)

Internationale versioner

Alle sprog

Creative Commons LicenseThis work is licensed under a Creative Commons License.

>
Scott Design