>>




>>

februar 2016


Blir bildene dine "dratt" i hyden eller bredden?


Bilder som vises slik som bildet til hyre er veldig lett unng...

 

Kort forklart

Bilder skaleres automatisk i bredden for unng at store bilder kuttes nr de ligger i en boks eller vises p en skjerm som er smalere enn selve bildet. Hyden p bildet vil derimot alltid vre den hyden som er satt, dersom det er satt en hyde p bildet.
Ikke sett hyde p bilder s vil nettleseren til leseren justere denne helt selv - og bildene dine vil alltid se riktige ut.
 


Grundigere forklart - og hvordan du fikser det

Html for et bilde kan f.eks. se slik ut:
<img src="mittbilde.jpg" width="1000" height="500" />

Denne koden sier at bildet skal vre 1000 pixler bredt og 500 pixler hyt. Det fungerer fint i en blogg som er 1000 pixler, eller mer, bred, men bredden avgjres egentlig av opplsningen p skjermen man leser p. Mobile enheter kan for eksempel ha en opplsning p alt fra pinglete 312 pixler p vertikal mobilskjerm til utrolige 3840 pixler p horisontal visning p enkelte nyere nettbrett. Derfor skaleres bildebredden slik at den passer til skjermen de vises p.

P mobil, og ogs i mange bloggdesign, skaleres normalt bilder ned (aldri opp - det gjr dem uklare) til 100% av tilgjengelig bredde i innlegget - for unng "avkuttede bilder" nr bildet er bredere enn boksen det ligger i. Problemet er at hyden ikke kan bestemmes p samme mte. S, nr bildet ditt fra eksempelet over skaleres fra 1000px bredde til f.eks. 720 pixler skjermbredde vil hyden fremdeles vre 500 pixler og bildet vil derfor se dratt ut.
 


 

Lsningen er alts ikke fortelle hvor hyt et bilde skal vre. Da fikser nettleseren bredde-/hydeforholdet helt selv og bildet vil alltid se riktig ut, enten du ser det p PC, en liten mobiltelefon eller et nettbrett.
 

Nr du laster opp et bilde til et innlegg p blogg.no blir det ikke satt noen hyde p bildet. Kun den bredden du valgte ved opplastingen blir satt. Det samme gjelder dersom du setter inn et bilde fra arkivet eller fra Yay Images, kun bredden du velger blir satt. Men, dersom du drar et bilde strre eller mindre med "hndtakene" p bildet (denne funksjonen er ikke en del av blogg.no's editor, men noe som finnes i enkelte nettlesere) vil det alltid bli satt en fast hyde p bildet, og bildet vil oppleves dratt nr bredden autoskaleres. Trenger du endre bredden p bildet br du derfor bruke innstillingene som er innebygd i editoren. Dobbeltklikk p et bilde i innlegget for pne boksen for bildeinnstillinger.
 



 

Dersom feltet for hyde allerede har et tall nr du pner denne boksen kan du fjerne det ved frst pne hengelsen og deretter slette tallet. Husk trykke p "OK" etterp.

 

LES MER OM:

AVANSERTE BILDEINNSTILLINGER

HVORDAN MIDTSTILLE BILDER?

BLOGG.NO: Avanserte bildeinnstillinger

Den nye teksteditoren vr gir deg ogs mer avanserte bildeinnstillinger. Dobbeltklikk p et bilde i innlegget ditt s fr du opp redigeringsboksen.
 

Bildeegenskaper



 

Jeg har satt et kryss over boksen for hyde, fordi man ikke br oppgi en fast hyde p bilder. Mobilvisning, og veldig mange design for webvisning, vil autoskalere (automatisk justere) bredden p bilder, men kan ikke gjre det for hyden. Du risikerer dermed at strrelsesforholdet mellom bredde og hyde blir feil.

For eksempel: dersom du har et bilde som er 1000 pixler bredt og 500 pixler hyt, og bredden automatisk justeres ned til 320 pixler p mobiltelefoner, vil fremdeles hyden vre 500 pixler, og bildet vil oppleves som dratt i hyden eller trykket sammen fra sidene. Dersom du ikke har oppgitt noen bestemt hyde p bildet vil hyden justere seg selv og bildet ser riktig ut uansett hvor det vises.

For fjerne en satt hyde p et bilde klikker du p hengelsen slik at den pner seg, og s fjerner du tallet i boksen for hyde. Husk trykke "OK" etterp.

Du kan ogs venstre- eller hyrejustere bilder.
nsker du midtstille/sentrere bilder kan du lese om det her.

 



 

Lenke



 

 

Avansert



 

Hvordan lage en lenke med egen tekst

 

Da vil det se f.eks. slik ut:

Trykk HER for komme til websiden...

 

Vil du endre p teksten?
Marker den p nytt og skriv inn endringen.

 

 

Hvordan markere tekst

  1. Skriv teksten frst.

    Dette er en tekst og jeg vil sette inn en lenke HER midt inni teksten snn ca...
     
  2. Sett musepekeren p begynnelsen eller starten av det du vil markere.
  3. Trykk ned venstre museknapp.
  4. Dra musepekeren bortover teksten du vil markere.
  5. Slipp musepekeren nr du er kommet til slutten av det du vil markere.
    Du kan teste dette ved markere et ord i teksten du akkurat leste.
     



 

 

 

 

Hvordan sentrere bilder




 

 

...eller...

 





 

 

"Vis blokker"-funksjonen i teksteditoren

Denne artikkelen er laget for vise hvordan du kan bruke "Vis blokker"-funksjonen i editoren for formatere innlegget ditt slik du vil ha det. Frst vil du se et screenshot av hvordan det ser ut under redigeringen av innlegget, deretter vil du se det faktiske innlegget helt nederst i artikkelen. Jeg har bare skrevet artikkelen frst, tatt screenshot, og s lagt bildet inn over selve teksten...

Jeg vil forklare bilderedigering i en annen artikkel.
 



 

"Vis blokker"-funksjonen i teksteditoren er genial!
 



 

Den forteller deg hvordan innlegget ditt formateres, mens du skriver. Her ser du for eksempel at hvert avsnitt ligger inni en blokk (eller boks) som heter "P" (for "paragraph"). Man lager et nytt avsnitt ved trykke p "Enter" (linjeskift).

For starte en ny linje i samme avsnitt (blokk) trykker man p "Shift" + "Enter"...
Da hopper man n linje ned, uten starte et nytt avsnitt.

Bilder og videoer br ligge i helt egne blokker dersom de skal st for seg selv.
 

Tekst i samme blokk som bildet vil havne rett under bildet, eller p siden av bildet. Er dette effekten du vil ha m du alts passe p at teksten som skal ligge sammen med bildet er i den samme blokken/boksen som bildet.
Du kan dobbeltklikke p et bilde for legge inn en margin p begge sidene av et bilde, eller over og under et bilde, eller begge deler.
P dette bildet har jeg valgt avansert redigering og satt padding-right til 30px.

 



 

 

#bloggno #design #redigering #innlegg #tutorial #teksteditor


hits