Niquelao » Blogarkiv » Trespaltet layout og semantisk opmærkning... "det rigtige"

Rumoroso Når man ønsker at strukturere indholdet i et webdokument, skal man under alle omstændigheder undgå at have det visuelle design – og især layoutet – for øje. Dette er afgørende, hvis man vil opnå en korrekt struktureret informationsstrøm samt semantisk opmærkning og optimal kode.

For at nå dette mål skal man ubetinget tage udgangspunkt i W3C’s standarder og undgå ekstra opmærkning, der udelukkende tjener præsentationen i stylesheetet. Udarbejdet eksempel .- Dokumentets indhold er struktureret i tre funktionelle områder eller grupper : specifikt indhold, hovednavigationsmenu og et tværgående område for hele sitet (enten relateret til det aktuelle dokument, f.eks. nyheder fra sektionen, eller til selve websitet/portalen, f.eks. relevante links eller en samling banners). Organiseringen af indholdet i koden bør baseres på dets specificitetsniveau og relevans i forhold til den aktuelle side.

Således bør gruppen med dokumentspecifik information komme først i koden, efterfulgt af det tværgående område, hvis dette er specifikt relateret til de foregående oplysninger og varierer afhængigt af indholdet. Derefter følger hovednavigationsmenuen. Hvis det tværgående indhold er fælles for hele sitet og ikke er sektions-specifikt, placeres det til sidst efter menuen.

I alle tilfælde bør der oprettes links, der gør det muligt at navigere mellem de tre grupper ved at springe til næste eller forrige gruppe. Med henblik på at opnå så ren og optimal kode som muligt er tilgangen følgende:

Der er tilføjet en header og en footer, da dette er en af de mest almindelige situationer. Der anvendes generiske blok-containere ( div ) til eksemplet.

Hvis disse kun indeholdt én enkelt blok (f.eks. en liste), ville de ikke være nødvendige, da identifikatoren kunne anvendes direkte på denne. For at opnå ren og optimal kode undgås containere, der grupperer én eller flere af disse elementer.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Den anvendte opmærkning og dens organisering er bevaret intakt i alle eksemplerne. De generiske styles er inkluderet i et fælles css -fil. De specifikke styles for hvert enkelt eksempel er inkluderet i dokumentets header for at gøre gennemgangen lettere. I alle tilfælde er hovedindholds-blokken gjort flydende (fluid).

Der er brugt den universelle selector til at anvende margener på de første underordnede elementer i blokken kaldet “contenido1″. Da ikke alle browsere understøtter pseudoelementet ” :first-child ” korrekt, er egenskaberne blevet anvendt på alle underordnede elementer i blokken og derefter nulstillet for alle underordnede elementer, hvis forælder er underordnet samme blok.

Andre metoder kan anvendes, f.eks. brug af det nævnte pseudoelement sammen med betingede kommentarer til Internet Explorer (IE). En anden mulighed ville være at oprette en blok inden i “contenido1 ” og anvende de nødvendige styles på denne. Denne metode er undgået for at opnå renere opmærkning uden elementer, der udelukkende tjener layout-formål. Faktisk er de egenskaber, der potentielt kunne ændres for de underordnede elementer, side-margener, som er lette at kontrollere; derfor betragtes den foreslåede løsning som den mest optimale i dette tilfælde.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Det er vigtigt at være opmærksom på, hvilke egenskaber og attributter der er defineret for at undgå uventede effekter ved anvendelse af styles. F.eks. viser IE ikke baggrundsstyles eller kantfarver korrekt, når lister indsættes i floatede og relativt positionerede elementer (dette kan løses ved at positionere dem relativt). Ideen er at opnå et tredelt layout med en bestemt rækkefølge afhængigt af sitets behov.

De forskellige layouts vises organiseret efter blokkenes rækkefølge og deres flydende egenskaber. Flydende blokke opnås ved at definere deres bredde i procent (i alle eksempler 20 % af deres container), mens faste bredder defineres i absolutte enheder (i alle eksempler 150px). Alternativt kunne relative enheder (em) bruges i stedet for absolutte enheder.

Alt afhænger af de specifikke behov i hvert enkelt tilfælde: Rækkefølge i layout 1 2 3 Eksempel på flydende design: Flydende Flydende Flydende Eksempel på hybriddesign: Flydende Fast Flydende Eksempel på hybriddesign: Flydende Flydende Fast Eksempel på hybriddesign: Flydende Fast Fast Rækkefølge i layout 1 3 2 Eksempel på flydende design: Flydende Flydende Flydende Eksempel på hybriddesign: Flydende Flydende Fast Eksempel på hybriddesign: Flydende Fast Flydende Eksempel på hybriddesign: Flydende Fast Fast Rækkefølge i layout 2 1 3 Eksempel på flydende design: Flydende Flydende Flydende Eksempel på hybriddesign: Fast Flydende Flydende Eksempel på hybriddesign: Flydende Flydende Fast Eksempel på hybriddesign: Fast Flydende Fast Rækkefølge i layout 2 3 1 Eksempel på flydende design: Flydende Flydende Flydende Eksempel på hybriddesign: Fast Flydende Flydende Eksempel på hybriddesign: Flydende Fast Flydende Eksempel på hybriddesign: Fast Fast Flydende Rækkefølge i layout 3 1 2 Eksempel på flydende design: Flydende Flydende Flydende Eksempel på hybriddesign: Flydende Flydende Fast Eksempel på hybriddesign: Fast Flydende Flydende Eksempel på hybriddesign: Fast Flydende Fast Rækkefølge i layout 3 2 1 Eksempel på flydende design: Flydende Flydende Flydende Eksempel på hybriddesign: Flydende Fast Flydende Eksempel på hybriddesign: Fast Flydende Flydende Eksempel på hybriddesign: Fast Fast Flydende I nogle tilfælde og for visse browsere (f.eks.

Internet Explorer) kan der opstå unormal adfærd ved ændring af vinduesstørrelsen. Den forkerte adfærd skyldes grundlæggende, at selvom containerens bredde er specificeret, påvirker teksten ved gen-sizing let kanterne. Hvis blokkene tilsammen skal fylde 100 % af containeren, kan det ske, at en blok med relative dimensioner på grund af ovennævnte effekt fylder lidt mere end forventet og dermed skubber de andre blokke, som, fordi de er floatede og ikke har plads, rykker ned under. Løsningen kan være at angive en dimension på én af blokkene, der er lidt mindre end ideel (f.eks.

19,9 % i stedet for 20 %). Kategori: CSS —> 1 kommentar Norwin Galeano 28. august 2006 Meget godt. Denne artikel bør være meget nyttig for dem, der begynder at lave layout til deres sider

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.