Mest brukte skjermoppløsning, nettleser og plattform

http://www.nettredaktor.no/?module=Articles;action=Article.publicShow;ID=2309 

Nettredaktor.no har laget en oversikt over hvilke skjermoppløsninger, nettlesere og plattformer norske nettbrukere benytter. Tallene er basert på 1200 norske nettsteder.

Skjermoppløsning: De fleste bruker en oppløsning på 1024 x 768. 40 prosent av brukerne kan ikke vise større oppløsninger enn dette. Bredskjermsformatene er på vei inn, med 16 prosent som kan se 1280 piksler i høyden, men ikke mer enn 800 i høyden.

Nettlesere: Hele 80 prosent bruker Internet Explorer. 10 prosent bruker Firefox.

Plattform: Windows XP og NT dominerer markedet, med en andel på 85 prosent. Apple/Mac har en markedsandel på 3,75 prosent av norske nettbrukere.

http://www.nettredaktor.no/?module=Articles;action=Article.publicShow;ID=2309 

Midtstille en webside

Før CSS var det enkelt å midtstille designen på en webside. Det var bare å skrive <CENTER></CENTER>. Så kom <DIV ALIGN=”center”>. Bruker du disse i dag, vil HTML-valideringen mislykkes.

I CSS brukes “margin: 0 auto;”, men dette funker ikke uten videre. Jeg har prøvd og feilet og prøvd litt til og kommet frem til følgende løsning:

Jeg setter inn “margin: 0 auto;” i hovedbeholderen for siden. Men for at siden skal vises sentrert i Internet Explorer, må jeg sette inn “text-align: center;” i Body {}. Slik:

body {
     text-align: center;
}

/*—:Beholderen der hele siden er pakket inn:—*/
.container {
     margin: 0 auto;
}

I de blokkene der teksten ikke skal sentreres, overstyrer jeg “text-align: center;” med “text-align: left (right osv.)”.

Generatorer for alle formål

Det finnes generatorer for å lage alt mulig: avisoverskrifter, feilmeldinger, bløtkaker, stereogrammer, moderne kunst, nigerianske svindelbrev. På Generator Blog finner du over 800 generatorer. Jeg har testet noen av dem.

Les mer

Dette avisutklippet – klikk gjerne på det :-) – er laget med The Newspaper Clipping Generator:

Lag menyknapper med CSS

Hvis du ikke vil bruke kompliserte JavaScript-baserte menyer eller grafiske menyknapper, men likevel ønsker en ryddig meny, kan du enkelt lage “menyknapper” ved hjelp av CSS:

 

Klikk her for å se hvordan menysystemet ser ut på en webside.

Du er velkommen til å kopiere kildekoden og tilpasse den slik du selv vil.

Min favorittside for mer avanserte menysystemer og andre typer skript er Dynamic Drive. Det var der jeg fant ”slide-in”-menyen som jeg bruker øverst til venstre på www.transonline.no.

Lag skisser til websider i Photoshop

Er du blant dem som går rett løs på CSS- og HTML-kodingen når du skal lage en webside, eller lager du en elektronisk skisse først?

Hvis det er en privatside du lager, har du kanskje tid til endeløs prøving og feiling og omskriving av koder. Får du derimot i oppgave å lage websider for en kunde, er tid penger, og du har en tidsfrist å forholde deg til. Kunden ber gjerne om å få et første utkast ganske raskt. En rask og enkel løsning er å lage en skisse i Photoshop før du skriver så mye som en kode:

1. Start med å ta en skjermdump av en tom side i nettleseren. Det gjør du ved å skrive “about:blank” på adresselinjen for å åpne en ny, tom side. Deretter trykker du på Print Screen-tasten.

2. Velg Fil > Ny i Photoshop. Du ser at de faktiske sidemålene allerede er lagt inn i Bredde- og Høyde-boksen. La gjerne bakgrunnsinnholdet være hvitt, og trykk på OK.

3. Velg Rediger > Lim inn. Du har nå et arbeidsunderlag:

4. Sett inn logo, skriv inn tekst, lag fargede ruter, alt på hvert sitt lag, slik at du kan bearbeide hvert element på siden uavhengig av de andre. Bruk lagpaletten i Photoshop til å legge til nye lag (ikonet ved siden av papirkurven nederst til høyre på paletten), vise og skjule lag (øyeikonet). Flytt designelementene rundt om på skjermen for å finne ut hvor de passer best. Lagre som en Photoshop-fil (PSD), så har du skissen for hånden.

Lagpaletten og tilhørende bilde:

Arbeidet med de faktiske sidene går utrolig mye raskere når du har gode skisser som underlag. I eksemplene ovenfor har jeg brukt Internet Explorer. Lag skisser både i Explorer, Opera og Firefox mens du er i gang.