Fetstil Fetstil Kursiv Understrykning linje färgläggning tabellverk Punktlista Nummerlista Vänster Centrerat högerställt Utfyllt Länk Bild htmlmode
  • Forum & Blog
    • Forum - översikt
      • .Net
        • asp.net generellt
        • c#
        • vb.net
        • f#
        • silverlight
        • microsoft surface
        • visual studio .net
      • databaser
        • sql-server
        • databaser
        • access
        • mysql
      • mjukvara klient
        • datorer och komponenter
        • nätverk, lan/wan
        • operativsystem
        • programvaror
        • säkerhet, inställningar
        • windows server
        • allmänt
        • crystal reports
        • exchange/outlook
        • microsoft office
      • mjukvara server
        • active directory
        • biztalk
        • exchange
        • linux
        • sharepoint
        • webbservers
        • sql server
      • appar (win/mobil)
      • programspråk
        • c++
        • delphi
        • java
        • quick basic
        • visual basic
      • scripting
        • asp 3.0
        • flash actionscript
        • html css
        • javascript
        • php
        • regular expresssion
        • xml
      • spel och grafik
        • DirectX
        • Spel och grafik
      • ledning
        • Arkitektur
        • Systemutveckling
        • krav och test
        • projektledning
        • ledningsfrågor
      • vb-sektioner
        • activeX
        • windows api
        • elektronik
        • internet
        • komponenter
        • nätverk
        • operativsystem
      • övriga forum
        • arbete karriär
        • erbjuda uppdrag och tjänster
        • juridiska frågor
        • köp och sälj
        • matematik och fysik
        • intern information
        • skrivklåda
        • webb-operatörer
    • Posta inlägg i forumet
    • Chatta med andra
  • Konto
    • Medlemssida
    • Byta lösenord
    • Bli bonsumedlem
    • iMail
  • Material
    • Tips & tricks
    • Artiklar
    • Programarkiv
  • JOBB
  • Student
    • Studentlicenser
  • KONTAKT
    • Om pellesoft
    • Grundare
    • Kontakta oss
    • Annonsering
    • Partners
    • Felanmälan
  • Logga in

Hem / Artiklar / Titel på artikeln

Formatera utskriften av dina webbsidor

Postad 2003-04-18 av tabortmig tack i sektionen ASP.NET, C#, Okategoriserat med 1 Kommentarer | Läst av: 9206, Betyg: 89%

Förord

När din chef frågar dig vart "Sida för utskrift"-länken är på sidan så kan du i fortsättningen bara skratta åt det och öppna en Cola till.. Med dagens webbläsare kan du bygga in den sidan direkt i ditt stylesheet.
Innehåll
  » Varför vill jag formatera utskriften?
  » Hemligheten heter media
  » Att gömma menyer och reklam
  » Alternativa sätt att inkludera
  » Sidbrytning
  » Ett helt exempel
  » Avslutningsvis
  » Mer information


Varför vill jag formatera utskriften?


Ofta när man bygger hemsidor så kanske man vill att de ska se bra ut på skärmen. Spektakulära färger, mycket grafik och flashiga effekter. Men om någon vill skriva ut informationen på din sida då vill nog inte den personen ha en massa tjafs på sin utskrift. Reklam, färgsprakande bilder och fräcka menyner - bläckpatroner och toners till skrivare kostar pengar, och man vill i allmänhet inte skriva ut mer än man behöver. Var är då lösningen? En speciell sida för utskrift? Nej! Inte idag! Man måste inte skapa helt separata sidor för utskrift - man behöver inte skapa länkar som med javascript öppnar nya fönster och med automatik skriver ut innehållet. Idag är det mycket enklare.

Om du har en relativt ny webbläsare så kan du med all sannorlikhet hitta menyalternativet "Förhandsgranska" (Print Preview) i "Arkiv"(File)-menyn på din webbläsare. Om du väljer det, så får du se hur den aktuella sidan ser ut när man skriver ut den. Om du går upp där och väljer det nu, så ser du till exempel hur den här sidan kommer att se ut när du skriver ut.

Bilder i menyerna, navigering och banners är egentligen helt ovesäntligt vid utskrift - det är väl ändå informationen man vill åt. Nu påstår jag att det finns ett mycket enkelt och smidigt sätt att välja precis vilka element som visas på skärm, utskrif och en mängd andra medier för den delen.



Hemligheten heter media


Kanske känner du redan till Cascading Stylesheets? Jag tänker inte förklara väldigt ingående vad de olika stylesheeten i denna artikel gör. Vill du lära dig, vilket du bör, så finns det andra sidor och artiklar som tar upp det.

Sättet du bestämmer vad som ska skrivas ut är barnsligt enkelt! Du delar helt enkelt upp ditt stylesheet i flera olika delar med hjälp av mediatyper.

Du skriver bara @media [typ(er)] { och sedan skriver du ett speciellt stylesheet för just de kommaseparerade mediatyperna [typer] du valt och avslutar med }.






Ovanstående exempel betyder alltså: På skärmen ska typsnitt utan serifer användas med storleken small. När man skriver ut det så ska typsnitt Med serifer användas, då det är mer gjort för läsning på papper, och ha storleken 11 punkter. Både på skärmen och vid utskrift ska texten vara fet.

Typen kan vara något av flera olika saker, men jag nämner bara tre stycken här. För mer information så finns det länkar i slutet av denna artikel. Här är några mediatyper:
MediatypGäller
screenEnbart datorskärmen
printEnbart utskrifter
projectionProjektor/Storskärm
allAlla olika mediatyper



Du kan ju också, som du ser i exemplet, kombinera typerna om du separerar dem med kommatecken. Notera alltså att det finns flera mediatyper än dessa tre, så "all" betyder inte samma sak som "print,screen,projection".


Att gömma menyer och reklam


Med samma princip som ovan så kan vi helt enkelt gömma olika objekt som vi inte vill ska synas på utskriften. Om vi har en DIV med en banner i:





Så kan du dölja den DIV:en vid utskrift genom att bara skriva följande stylesheet:





Eller om du till exempel vill att alla bilder med classen "skrivejut" ska vara dolda vid utskrift så kan du skriva:







Alternativa sätt att inkludera


Äldre webbläsare, till exempel Netscape 4, förstår inte dessa olika mediatyper så bra. Om du väljer att
göra som jag har gjort i tidigare exempel så kommer sidan inte alls att se bra ut i Netscape 4.
Men då finns det ett annat sätt att lösa det på - du kan ha ett stylesheet för varje media!

Du kan alltså välja media direkt när du inkluderar ditt stylesheet genom att specifiera mediatypen då du inkluderar ditt stylesheet.






Sidbrytning


Inte nog med att man kan välja vad som ska visas vid utskrift, man kan dessutom undvika sidbrytning inom vissa block - eller tvinga fram dem om man känner för det.

Om du inte vill att t.ex. en paragraf får brytas vid utskrift så kan du skriva såhär:





Eller om du vill styra hur sidbrytningen hanteras före och efter en paragraf så kan du använda page-break-after och page-break-before. Dessa två kan bland annat ha värdena "always" och "avoid". Sätter man det till "always" så blir det alltid sidbrytning före varje sådant block.






Ett helt exempel


Här följer en hel html-sida som du kan klippa ut och ha som utgångsläge om du vill testa själv. Notera också att underrubriken (h2) automatiskt hamnar på sida nummer 2 vid utskrift.


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Exempel





En blaffa som inte ska skrivas ut


En rubrik




Brödtext, brödtext och brödtext.



Underrubrik 1




Den här utskriften sponsras av Bananer.










Avslutningsvis


Jag hoppas nu att du i alla fall fått upp ögonen på att detta existerar, och vilka möjligheter som finns vid formatering av utskrift på en hemsida. Man kan experimentera med många olika saker inom detta område. Detta är ett enkelt och effektivt sätt att designa utskrifterna, och det enda besökaren behöver veta är just hur man skriver ut sidan. De behöver inte leta på någon speciell "Sida för utskrift"-länk eller något liknande. Det ska ju vara så enkelt som möjligt för besökaren, eller hur?

Tänk även på typsnitten. Att Läsa Verdana på ett papper är inte alls vänligt för ögat. De små "fötterna" (seriferna) på vissa typsnitt existerar just för att de ska vara enkla att läsa på papper. Det blir en osynlig linje i textmassan som blir lätt för ögat att följa.

För att testa hur Projection ser ut så kan du använda webbläsaren Opera i läget "Helskärm".


Mer information

Läs mer om Mediatyperna hos www.w3.org
Lär dig CSS hos w3schools.com
Läs mer om paged media hos w3.org




Upp

1 Kommentarer


  1. Ricky Rehn
    14 apr 2005

    Kanon med denna typ av artiklar. Det löste mina utskriftsproblem på ett bra sätt. Problemet är bara att hitta artiklarna.

Skriv en kommentar på artikeln

Ditt betyg på artikeln



Kommentar:





Nyligen

  • 09:09 Vill du köpa medicinska tester?
  • 12:47 Vem beviljar assistansen – kommune
  • 14:17 Någon med erfarenhet av hemstädnin
  • 14:14 Bör man använda sig av en båtförme
  • 14:12 Finns det någon intressant hundblo
  • 14:25 Tips på verktyg för att skapa QR-k
  • 14:23 Tips på verktyg för att skapa QR-k
  • 20:52 Fungerer innskuddsbonuser egentlig

Sidor

  • Hem
  • Bli bonusmedlem
  • Läs artiklar
  • Chatta med andra
  • Sök och erbjud jobb
  • Kontakta oss
  • Studentlicenser
  • Skriv en artikel

Statistik

Antal besökare:
Antal medlemmar:
Antal inlägg:
Online:
På chatten:
4 569 153
27 952
271 704
726
0

Kontakta oss

Frågor runt konsultation, rådgivning, uppdrag, rekrytering, annonsering och övriga ärenden. Ring: 0730-88 22 24 | pelle@pellesoft.se

© 1986-2013 PelleSoft AB. Last Build 4.1.7169.18070 (2019-08-18 10:02:21) 4.0.30319.42000
  • Om
  • Kontakta
  • Regler
  • Cookies