Hvordan laver man layouts?
1
Første skridt er at lave et baggrundsbillede. Dette kan fx. gøres i photoshop, paint, gimp eller en anden online / offline billed editor.
Jeg har under indsat en video om hvordan jeg gør det i photoshop.
Det kan anbefales at slå lyden fra, jeg siger ikke noget, men musikken larmer.
Hvis et layout til bred profil ønskes, bør billedet være 933 pixels bredt.
Er layoutet i stedet til en smal profilside, et ridecenter eller et hold, bør billedet være 533 pixels bredt.
Jo flere af de detaljer man vil have med (som fx. overskrifter, tekst, billeder) man kan få på baggrunden, jo nemmere er det at skrive koden.
Nu skal billedet uploades på en hjemmeside. Jeg bruger ofte imgur (https://imgur.com/)
Når billedet er uploadet, findes det "direkte link" ved at højreklikke på billede og kopiere billedets webadresse. Gem dette link, vi skal bruge det senere.
2
3
Nu skal vi i gang med koden. Det gør vi ved at jeg her har indsat nogle små stykker, som du kan kopiere ind i "html" på profilsiden og ændre nogle få ting. Det er vigtigt at kun de med blåt mærkerede dele ændres.
Først: En baggrund.
<div style="background:url("HELE DET DIREKTE LINK TIL BILLEDET HER");width:BREDDEN PÅ DIT BILLEDEpx;height:HØJDEN PÅ DIT BILLEDEpx;">
Fx.:
<div style="background:url("https://i.imgur.com/xQr0AkX.png");width:533px;height:683px;">
Du kan nu trykke gem, og så dukker din baggrund op.
Vi skal nu indsætte tekstbokse. Hvis du har mere en en tekstboks, kan du gentage dette skridt for hver. Hver sikker på at den første tekstboks er helt på plads inden du går videre til den næste.
<div style="width:100px;height:100px;overflow:auto;text-align:left;margin-top:100px;margin-left:100px;float:left;">
<font color="#000000" size="2">
DIN TEKST HER
</font></div>
De to pink tal er tekstboksens placering. Det første er afstanden fra toppen / den sidste tekst-boks du indsatte og det andet er afstanden til venstre kant. Den nemmeste måde at få den på plads, er ved at prøve sig frem, ved at klikke frem og tilbage mellem almindelig visning og html.
De to blå tal er bredden og højden på tekstboksen. Disse indstilles nemmest på samme måde som de pink.
4
5
Nu er vi næsten færdige. Vi mangler kun en enkelt ting
</div>
dette fortæller koden, at nu er vi færdige med layoutet.
Hvis du har problemer, så prøv lige en gang til. Hvis det stadig ikke virker, er du velkommen til at kontakte mig på howrse.
Nu kan vi tilføje knapper, billeder eller andre detaljer, hvis vi vil. Du kan se hvordan man laver knapper her:
Knapper billeder mm. kan tilføjes til tekstbokse uden tekst, for at gøre dem nemme at flytte rundt på. Hvis du vil indsætte en specifik ting, så søg på Google. Hvis Google ikke kan hjælpe, er du velkommen til at sende en besked.