Media

Ideen med media er at man kan styre så man har forskelligt udseende, alt efter hvilket medie man får vist sin hjemmeside på.

Typiske medier

Der er i dag 3 medier man normalt er nødt til at forholde sig til:

• Screen - Altså visning i en normal browser
• Print - Det udseende man får, når man printer siden, det er ikke altid det er relevant, men til sider med mere information, så er det godt at kunne styre hvordan det skal se ud.
• Handheld - Til håndholdte enheder, specielt smartphones

Vil man lave en hjemmeside, der skal kunne fungere fornuftigt i alle 3 medier, så er man nødt til at forholde sig til hvilket layout man ønsker i alle 3

Andre medier

Der findes en del andre medier, som kan give mening i mere specielle anvendelser af hjemmesider:

• all - Angiver at disse definitioner gælder alle medier
• aural - Medier der fokuserer på lyd
• braille - Anvendes til blindskrift (medier der kan vise en hjemmeside ved hjælp af blindskrift)
• embossed - Udskrift af blindskrift (printere der skal udskrive en hjemmeside ved hjælp af blindskrift)
• projection - Anvendes til visning på en projektor
• tty - Gammeldags terminal-medie
• tv - TV mediet

Koden i CSS-filen

For at bestemme hvordan tingene skal se ud i f.x. 3 forskellige medier, så kan man angive 3 forskellige dele af sin CSS-fil, og det gør man på følgende måde:

/* CSS definitioner til skærmvisning */
@media screen {
  p {
    font-family:verdana,sans-serif;font-size:14px;
  }
  body {
    background-color:#EEEEEE;
  }
  #content {
    margin:auto;  /* Centreret layout */
  }
}

/* CSS definitioner til udskrift */
@media print {
  p {
    font-family:times,serif;font-size:12px;
  }
  #content {
    margin:0px;
  }
}

/* CSS definitioner til håndholdte enheder */
@media handheld {
  p {
    font-family:arial,sans-serif;font-size:10px;
  }
  body {
    background-color:#FFFFFF;
  }
  #content {
    margin:0px;
  }
}

Skærm-layout

I 2012 er det ved at være standard med skærme på mindst 1200px i bredden, så man kan godt tillade sig at lave sider der fylder så meget, med mindre man også vil kunne begå sig på de små notebook-computere. Her er det typisk 1024px i bredden og 600-800px i højden.

De fleste sider vil kunne gå, hvis de holder sig inden for 1000px, og med et centreret layout vil de også have en fornuftig visning på på skærme op til 1900px.

Man skal dog være opmærksom på at der er mulighed for at zoome ind på sider i browseren i dag.

Print-layout

Til en printer skal man reducere sit layout mest muligt, da en printer normalt selv vil bestemme sin udskrift.

Man skal igen være opmærksom på at zoom i nogle browsere kan give forskellig udskrift.

Alt hvad der hedder baggrund bliver ignoreret i udskrifterne, så hvis man ønsker grafiske effekter, så skal man etablere det ved hjælp af billeder, hvilket dog også kan drille en del sammen med tekst.

Billeder kan anvendes til illustrationer, men igen så er det afhængigt af zoom, og hvilken printer det er (hvor stor en opløsning den har), men typisk vil man kunne regne med at man totalt på en side har et print-areal på ca. 1050px gange 1500px.

Eksempel på anvendelse af Media

Dette eksempel dækker kun screen og print, og er lavet for at illustrere hvad man kan med forskellene.

Eksemplet kan hentes i denne ZIP-fil med HTML, CSS og to billeder.

Der er 4 bokse der ligger inde i en stor usynlig boks. De to af boksene indeholder hhv. et lodret og en vandret billede, så er der en tekst-boks med en længere tekst, som så indeholder en footer-boks med en anden farve.

På skærmen kan man lave ting med baggrundsfarver runde hjørner osv. Det er vist her:

Når man laver et layout til print, så er der ikke de samme muligheder, men billederne ligger der stadig. Blot for at illustrere forskellen, så er teksten i udskriften lagt ind over billederne:

Referencer

Webdesign
CSS	Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown
HTML	<b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere