SKAPA BAKGRUND
-Att skapa själva grafiken-

Grunden för alla snygga layouter är en tjusig bakgrund. Dessa kan göras i alla tänkbara stilar och kvalitéer. För att göra en snygg bakgrund så behöver du ett ritprogram, t.ex. Photoshop (som jag använder), GIMP, InDesign, Illustrator, Corel Draw eller liknande. Vissa av dessa program kostar skjortan, flera tusenlappar alltså, och andra är gratis (GIMP är nog mest känt av gratisprogrammen) Alla program har sitt eget sätt att laddas ner eller/och köpas, och det skulle ta för mycket plats att skriva det här, så ni får googla på det själva... Jag vet att ni klarar det! Det finns även vissa onlineprogram, t.ex. pizap.com.
När du nu har ordnat ett ritprogram så är det bara att börja skapa! Du kan göra den precis hur du vill. Men tänk bara på att pixelantalet måste vara korrekt. Här är måtten:
 834px bred och 990px hög.
Om du använder de måtten så får du ingen scrollbar på sidan av pressen. Vill du ha en scrollbar så är det bara att utöka 990 till vad du vill:) Exempel på bakgrund ser ni här:

Stor copyright!

Bilden ovan är inte en mall.
Ni ser att jag inte har någon text i rutorna här - för det ordnar man med HTML sedan. Spara nu bilden i PNG-format, eller GIF om det är en animation (vet du inte hur man gör - så googla) och gå vidare till nästa steg.

Ps. Måtten för en ridcenterlayout är:
     Bredd: 520px Höjd: Valfritt

Font och Fontstorlek
För att byta font och/eller ändra font mitt i texten så använd denna kod:

<font face="FONT"><font size="2">TEXT</font></font>

Byt ut FONT mot en font du tycker om och 2 mot den storlek du vill ha på texten. Den text du vill ha i annan font stoppar du in istället för TEXT och Voila!
Du har bytt font/fontstorlek!

UPPLADDNING
-Att ladda upp bakgrunden på nätet-

För att din grafik ska kunna laddas upp på din presentation så måste den i sin tur vara uppladdad på internet. Det betyder visserligen att i stort sett vem som helst kan se och ta den om de letar, men om du sätter copyright på den så har de i alla fall ingen rätt till det, och du kan anmäla dem om du tycker att det inte räcker med bara en tillsägelse. Några bra och tillförlitliga webbsidor som man kan ladda upp gratis på är följande:
   www.tinypic.com
   www.photobucket.com
[OBS:man måste skapa ett konto där] Tinypic: För att ladda upp så tryck på "bläddra" och välj filen. Observera att den måste vara i GIF eller PNG för att det ska gå! Bry dig inte om File Type, Resize och Share, utan tryck bara på UPLOAD. Kopiera koden "HTML for Websites".
Photobucket: Logga in på ditt konto (eller skapa ett) och tryck på den gröna knappen "Upload". Välj "My Computer" längst till vänster och sedan det album du vill ladda upp det i till höger. Klicka sedan på "Select Photos and Videos" och välj din bakgrund. När den laddat upp klart så kan du scrolla ner en liten bit och fylla i titel, ev beskrivning och taggar till din bild. Tryck sedan "Save and continue to my album". Nu borde du se en mindre version av din bakgrund. Håll musen över den och klicka på HTML-koden som visas upp näst längst ner. Då kopierar den texten.
vidare till nästa steg.

HTML-färger
När du skriver i s.k. HTML så räcker det oftast inte att bara skriva "black" eller "white" någonstans. Du måste skriva färgen på rätt ställe och på rätt sätt. HTML har nämligen ett eget "färgspråk". Alla färger och nyanser har ett eget namn. De består av 6 tecken, siffror eller bokstäver. Här är några av dem:

#FFFFFF (vit)
#000000 (svart)
#FF0000 (röd)
#0000FF (blå)

o.s.v., o.s.v.... Vill du veta fler färgnamn på kan du kolla på den här färgkartan:
Färgkarta

För att byta textfärg på texten i din ruta så använd denna kod:

<span style="color: #ffffff;">TEXT</span>

Klistra in denna istället för TEXT i text- rutekoden och byt ut ffffff mot vilken färg du vill. Nu har du bytt färg!

KODNING
-Att sätta text på bakgrunden-

När jag kodar så använder jag mig av HTML, som är en sorts "data-språk", som berättar för datorn var den ska placera olika saker. Det kan verka krångligt, men när man väl förstått det så är det väldigt enkelt och lättanvänt. Koden i rutan här nere är en kod för en textruta. Den berättar alltså för datorn att du vill ha en textruta, vad det ska stå i den och var den ska sitta. Det är upp till dig att ordna så att koden säger rätt saker till datorn! Observera att olika webbläsare har olika koder, denna fungerar till dessa tre: Google Chrome, Mozilla Firefox och Internet Explorer och ev. Safari.

<span style="Z-INDEX: 11; POSITION: absolute; TOP: 225px; left: 25px"> <p style="font-family: verdana; font-size: 10px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; height: 130px; width: 220px; overflow: auto; scrollbar-face-color: 989ca7; scrollbar-highlight-color: 989ca7; scrollbar-shadow-color: 989ca7; scrollbar-3dlight-color: 989ca7; scrollbar-arrow-color: #cccccc; scrollbar-track-color: 989ca7; scrollbar-darkshadow-color: 989ca7; filter:chroma(color=989ca7); color: black; text-align: justify">
TEXT
<!-- p--></p></span>

Men innan du kan börja koda så måste du ladda upp din bakgrund, eller hur? Så du tar koden som du kopierat och klistrar in den högst upp i HTML-läget, oavsett vad som redan står där. Ta bort det andra som står där och spara. [Om du inte vill radera det du skrivit helt så kan du kopiera det och klistra in i din anteckningsbok.]
Så! Dags att koda. För att skapa en textruta så ska du kopiera och klistra in koden under din bakgrundskod. Spara. Nu är det dags att justera värdena i koden så att den hamnar rätt.
 TOP: XXXpx [Justerar hur långt från    toppen av presentationen rutan är]
 left: XXXpx [Justerar hur långt från  västerkanten rutan är]
 
"font-family: XXX [Justerar vilken font texten är]
 
font-size: XXpx [Justerar vilken storlek texten har]
 
height: XXXpx [Justerar höjden på rutan]
 
width: 220px [Justerar bredden på rutan]
Resten behöver du inte bry dig om om du inte vill. När rutan sitter sätt så är det bara att göra flera om det behövs! Så, simsalabim, var din presentation kodad och klar!
Glöm bara inte att om du redigerar texten med normallägen så måste du hålla in shift när du byter rad.


Det finns en ännu bättre kod än den jag beskrivit här uppe, som går att justera bara genom att dra i rutan och flytta runt den i normalläget, vilket ju blir mycket lättare! Det blir mycket lättare med den här koden, men om man vill så kan man ju fortsätta med den gamla koden:) Lycka till!

Kod från www.Howrseinfo.n.nu

<div style="width: 275px; height: 260px; position: absolute; top: 284px; left: 461px; overflow: auto;">K<span style="color: rgb(0, 0, 0);"><span style="font-style: italic;"></span></span></div>

Copyright

Den här texten skriver jag för att jag är less på alla idé- och grafiktjuvar som bara snor allt jag gör. Förstår ni inte att jag suttit och klurat i timmar, dagar, kanske veckor, på det jag ska göra för att mina kunder ska tycka att jag har bra service och grafik - och så på bara några minuter kopierar ni det och lägger upp det på er sida. Fattar ni inte hur sur, arg och ledsen man blir? När jag, bara jag, kom på idén med presentkorten, idén med kollektioner osv. och var så himla glad att jag kom på det, struttade runt hemma i säkert en timme och bara log - och sedan, en vecka senare sitter jag och svär (ja, svär, jag brukar inte göra det - men...) framför datorn och ser att så himla många har kopierat - och inte ens brytt sig om att skriva att det var jag som kom på idén, skapade grafiken eller vad det nu kan vara. Jag förstår inte hur ni tänker - har ni inget samvete alls? Förstår ni inte vad Copyright betyder? Orkar ni inte läsa igenom texten på 5 rader om min Copyright-policy? Jag vet att vissa av er är unga och inte fattar ett skit av vad som är mitt och ditt - men ropa på dina föräldrar så får de förklara - för det här är allvarligt. (naturligtvis anklagar jag inte er för någonting om ni bara inte förstod. Så länge ni förstår nu så är det OK) Vissa av er kommer bara att strunta fullständigt i den här texten, tycka att jag är en uppblåst och egoistisk idiot - och det är jag ledsen över. Ni kommer aldrig att lära er hur ett samhälle fungerar eller kunna förhålla er i ett, kommer aldrig fatta att det är baserat på ärlighet och tillförlitlighet. Jag hoppas verkligen att ni kommer till insikt nu.

För övrigt så behöver ni inte skicka ett meddelande och säga något om detta om ni inte vill, bara radera det ni stulit så blir jag glad.

Detta gäller naturligtvis inte alla - för det finns faktiskt människor som går att lita på, så ni ska inte ta åt er. Men jag tror att ni andra vet om det här gäller er.

 Förlåt för att detta tar upp så mycket plats på sidan.

JAG ÖNSKAR ER ETT STORT LYCKA TILL MED ER GRAFIK!

Silversmedjan © COPYRIGHT SilverSwept, Tilde Alm 2011
Ingen kopiering tillåten! Hemsida skyddad enligt upphovsrättslagen OCH Copyrightlagen. Kopiering och/eller stöld anmäls utan förvarning.

 

This free website was made using Yola.

No HTML skills required. Build your website in minutes.

Go to www.yola.com and sign up today!

Make a free website with Yola