Hur du gör en egen Howrselayout
Först av allt vill jag säga att det är såhär jag gör detta. Det finns flera sätt att göra detta på och det finns folk som är mycket bättre än mig på att göra layouts, men såhär har jag gjort mina layouts. Jag är inte i något samarbete med sidorna jag rekommenderar utan det är mina åsikter. I den här tutorialen kommer jag visa hur jag redigerade min Howrselayout. Ni får dock inte göra exakt samma, utan detta är ett exempel. Vill tacka The Book Of Howrse som drog in mig i det här och lärde mig att det inte är så svårt ändå!
Steg 1: Hitta en bakgrundsbild
Om du kan ta en fin bild att använda så är ju det jättebra. Det blir unikt och personligt och du blir säker på att du inte har stulit bilden. Om du är bra på att rita eller redigera så kan du ju göra det och använda den bilden. Annars kan du ta en bild från exempelvis Pixabay, men se till att sidan du använder tillåter att du använder bilden. Ladda ner bilden till din dator.
|
Steg 2: Redigera bilden
Jag använder Ribbet för att redigera mina bilder och rekommenderar det, men det finns ju fler bra sidor att redigera i.
Det jag brukar börja med är texten. Välj ett fint teckensnitt, jag brukar oftast använda någon slags handskrift till rubrikerna eftersom det är finast i min mening. Klicka på texten när du lagt till den för att ändra färg, storlek osv. Dra den till där du vill ha den. Sen kan du göra rutorna till den mindre texten. Jag brukar gå in på Stickers (detta är alltså i Ribbet, jag vet inte hur det funkar i andra program) och välja antingen rektangeln eller den rundade rektangeln. Även den kan du välja färg på. Du kan fadea den lite så man ändå ser bakgrunden igenom. Om du vill ha flera som ser likadana ut så kan du klicka på "Duplicate Rectangle" så de blir samma storlek, samma fade och allt. På min layout la jag även till lite stjärnor runt rubrikerna. |
Steg 3: Överför bilden till direktlänk
När du gör koden kommer du behöva ha en direktlänk till bilden. Jag använder Imgur för att göra detta. Man laddar upp bilden dit och sen tar du "Direct Link". Kopiera den så visar jag vad du ska göra med den i nästa steg!
Steg 4: HTML-koden
Det är den här delen som många (inklusive jag) tror är jättesvår innan man provar. Jag tror det finns ett till sätt att koda på, men div-kodning är inte så svårt när man vant sig vid det. Det här programmet använder jag för att koda i. För att se hur layouten ser ut hittills, klicka på "DISPLAY". Du kan fortsätta redigera efter det och det kan ta några försök innan allt är på plats. Ta bort det som redan är i rutan och sen skriver du på första raden:
<div style="background: url('https://i.imgur.com/lKQd3EU.jpg'); width: 1550px; height: 1100px;">
Det som står i rött eller rosa eller vad du nu vill kalla det ska ändras. Dessa exempel är från Vildhästar- koden. Så det första röda ska du ändra till din direktlänk. Det andra ska du ändra till bildens bredd och det tredje till bildens höjd (i pixlar). Sen går du ner ett steg (enter) och skriv:
<div style="width: 300px; height: 400px; overflow: auto; text-align: left; margin-top: 550px; margin-left: 250px; float: left;">
Detta är början på första textrutan. Du kommer få prova dig fram ganska mycket här. Välj bara någon bredd och höjd, välj om texten ska vara left- center- eller right-aligned (osäker på vad det heter på svenska). Margin-top är hur långt det är från toppen på bilden till toppen på textrutan. Margin-left är hur långt det är mellan textrutan och vänstra kanten på bilden. Gå ner ett till steg.
<font color="white" size="3" face="palatino linotype">
Välj textfärg. Om du inte trivs med en basic färg som white, black, red, blue osv så kan du ta en HTML-färg, jag kan rekommendera den här sidan för att se vilken färg som har vilken kod. Jag brukar oftast använda storlek 2 eller 3 på min text, 4 funkar också, men du får ju välja själv. Det finns ett antal teckensnitt som man kan välja. Prova dig fram bara!
Nästa steg är att skriva en massa text (ett steg ner igen). Det enklaste är att bara skriva "text text text text text text text text text text" flera gånger om (enklast att skriva det några gånger och sen kopiera och klistra in massa gånger). Klicka på display och se om det finns en fungerande rullist på texten. Om det gör det, bra! Ha det sådär så länge så kan du ändra i normalläget på din presentation senare.
</font></div>
Skriv bara det där ett till steg ner, så har du gjort din första textruta! Om du vill göra fler textrutor, kopiera alltifrån början på första till detta och klistra in det nedanför. Du kan behöva ändra en del saker, speciellt margin-left brukar jag ändra. När du har gjort alla rutorna, gå ner ett sista steg och skriv helt enkelt:
</div>
Kontrollera att allt ser rätt ut, kopiera koden och klistra in det i ditt HTML-läge. Nu har du en alldeles egen layout!
<div style="background: url('https://i.imgur.com/lKQd3EU.jpg'); width: 1550px; height: 1100px;">
Det som står i rött eller rosa eller vad du nu vill kalla det ska ändras. Dessa exempel är från Vildhästar- koden. Så det första röda ska du ändra till din direktlänk. Det andra ska du ändra till bildens bredd och det tredje till bildens höjd (i pixlar). Sen går du ner ett steg (enter) och skriv:
<div style="width: 300px; height: 400px; overflow: auto; text-align: left; margin-top: 550px; margin-left: 250px; float: left;">
Detta är början på första textrutan. Du kommer få prova dig fram ganska mycket här. Välj bara någon bredd och höjd, välj om texten ska vara left- center- eller right-aligned (osäker på vad det heter på svenska). Margin-top är hur långt det är från toppen på bilden till toppen på textrutan. Margin-left är hur långt det är mellan textrutan och vänstra kanten på bilden. Gå ner ett till steg.
<font color="white" size="3" face="palatino linotype">
Välj textfärg. Om du inte trivs med en basic färg som white, black, red, blue osv så kan du ta en HTML-färg, jag kan rekommendera den här sidan för att se vilken färg som har vilken kod. Jag brukar oftast använda storlek 2 eller 3 på min text, 4 funkar också, men du får ju välja själv. Det finns ett antal teckensnitt som man kan välja. Prova dig fram bara!
Nästa steg är att skriva en massa text (ett steg ner igen). Det enklaste är att bara skriva "text text text text text text text text text text" flera gånger om (enklast att skriva det några gånger och sen kopiera och klistra in massa gånger). Klicka på display och se om det finns en fungerande rullist på texten. Om det gör det, bra! Ha det sådär så länge så kan du ändra i normalläget på din presentation senare.
</font></div>
Skriv bara det där ett till steg ner, så har du gjort din första textruta! Om du vill göra fler textrutor, kopiera alltifrån början på första till detta och klistra in det nedanför. Du kan behöva ändra en del saker, speciellt margin-left brukar jag ändra. När du har gjort alla rutorna, gå ner ett sista steg och skriv helt enkelt:
</div>
Kontrollera att allt ser rätt ut, kopiera koden och klistra in det i ditt HTML-läge. Nu har du en alldeles egen layout!
Hoppas det var hjälpsamt! Om du behöver mer hjälp kan du skriva i "Annat" under fliken "Kontakt", eller PMa Stuteri Shetland på Howrse!