Webbdesign       http://www.ungdesign.se/Webbdesign

Administratör: kallepersson
Kalle om design på webben/hemsidor.

2008-01-15 Tre tips om hur man stylar om sin presentation!

(Kategori: Artiklar) Ge en kommentar
Som jag nämnde i mitt förra inlägg så verkar det ha blivit ett stort intresse bland användarna att styla om sina  presentationer. Användaren Mattias Dellmo har bland annat en katt som bakgrund, något som får de flesta att stanna upp och bli nyfikna.

Här kommer tre tips på hur man kan styla om sin presentations olika element.
Fyll i de olika exemplen i ert kodfält som ni kan ändra när ni skriver i er presentation.

Tips 1 - Ändra färg på texten på din sida:
I detta exemplet blir texten mörkröd.
<style type="text/css">
body {
color: darkred;
}
</style>

Tips 2 - Ändra bakgrundsfärgen på "boxarna" i din profil:
I detta exemplet blir bakgrunden ljust gul.
<style type="text/css">
.boxBorder  {
background-color: antiquewhite;
}
</style>

Tips 3 - Ändra färg på din profilmeny
I detta exemplet blir menyn gulgrön.
<style type="text/css">
.memberMenu {
color: yellowgreen;
}
</style>

Glatt experimenterande!






2007-09-12 Hur du byter bakgrundsbild på din presentation!

(Kategori: Artiklar) 6 kommentarer
Som Mattias Dellmo har listat ut så går det att ändra bakgrundsbilden på sin presentation, med lite trix.
Klistra in följande kodsnutt i ett av kodfälten på sidan där du ändrar din presentation.
Byt ut adressen mellan paranteserna mot en sökväg till en bild online.

<style type="text/css">
body {
background-image:url('http://www.minadress.se/minbild.jpg');
}
</style>






2007-09-11 Tre webbsidor som får dig att ramla av stolen

(Kategori: Inspiration) Ge en kommentar










2007-08-28 Varför det är bättre att skriva HTML själv istället för att ta hjälp av program

(Kategori: Artiklar) 1 kommentarer
När jag började med webbdesign så använde jag Microsoft Frontpage för att bygga webbsidor. Det var riktigt enkelt att lägga ut text och bild. Att skapa hela layouter var lika enkelt, och jag kände mig riktigt proffsig när jag  kunde lägga ihop hela hemsidor själv.

Idag, när jag arbetar fulltid som webbutvecklare använder jag aldrig sådana program. Istället skriver jag all min kod själv. Det låter kanske otympligt, men låt mig berätta varför.

Det jag upplevde efter att ha använt såkallade WYSISYG(What you see is what you get)-redigerare ett tag var att jag förlorade kontrollen över min webbsida och kände mig helt maktlös när jag ville justera saker som programmet inte kunde ändra. Visst, programmet hade en massa färgglada knappar och moduler som kunde göra riktigt häftiga saker, men det hjälpte ju inte mig när jag ville gå ner på detaljnivå och ändra..

I början tog det emot, men när jag väl lärt mig grundläggande HTML, hur man skapade länkar och strukturerade upp tabeller fungerade allt faktiskt riktigt bra och jag kände att jag hade kontroll över min produktion igen.

Av detta skäl är det helt enkelt bäst att lära sig en teknik, inte programmet som gör det åt dig. Ska man arbeta med webbutveckling professionellträcker det inte att vara expert på Dreamweaver (eller liknande program), eftersom användandet av detta program bara går ut på att klicka på rätt knappar*.
(* Det finns också ett s.k "Kodläge" i Dreamweaver, som är mycket bra)

När man sedan vill gå vidare och lära sig tekniker som JavaScript och PHP är det mycket enklare att implementera dessa i sin webbsida om man har koll på den grundläggande koden från början.






2007-06-12 HTML: Introduktion

(Kategori: Guider) 2 kommentarer
HTML är ett s.k uppmärkningsspråk som man använder för att bestämma vilka olika element en webbsida innehåller. Det är ett väldigt enkelt språk som låter dig strukturera upp webbsidor snabbt och effektivt. HTML har med andra ord inget som helst med sidans utseende att göra. Utseendet ställer man in på annat vis, något jag kommer att gå in på senare.

I denna artikel kommer du få lära dig hur man märker upp en enkel hemsida. Jag kommer att gå igenom några olika HTML-element som man märker upp webbsidan med. Du kommer bland annat att få lära dig hur man sätter en huvudrubrik, ordrar styckeindelning och sätter upp en lista.

En webbsida består alltid av vissa speciella grundelement som alltid ska vara med. Nästan alla HTML-element består av en s.k öppningstagg och en stängningstagg.
Här följer en lista på vanliga HTML-element med förklaringar på vad de står för:

<h1> - Rubrik ett, det vill säga sidans huvudrubrik. Detta element används alltså för att märka ut en huvudrubrik på en webbsida. <h2>, <h3> och ända till <h6> finns också och de märker upp underrubriker där <h6> är den understa rubriken.
Exempel: <h1>Min huvudrubrik</h1>

<a> - Länk. Detta element skapar en klickbar länk som webbsidans besökare kan klicka på för att komma vidare. Man ställer in attributet href för att ange vart länken går.
Exempel: <a href="http://www.ungdesign.se>Min länk till [udps]</a>

<p> - Stycke. Om du ska dela in din text på hemsida i stycken så är detta elementet du söker efter.
Exempel: <p>Mitt stycke med text.</p>

<img> - Bild. Med detta element infogar man enkelt en bild genom att ange attributet src, där man skriver bildens sökväg. Detta element behöver inte avslutas som de andra.
Exempel: <img src="minbild.jpg">

<ul>  och <ol> - Listor. Det första list-elementet är till för att skapa en punktlista. Du använder elementet <li> för att skriva ut varje listrad.
Exempel:
<ul>
    <li>En punktlisterad</li>
    <li>Ännu en punktlisterad</li>
</ul>

<ol>
    <li>En numrerad rad</li>
    <li>Ännu en numrerad rad</li>
</ol>

Lycka till mer erat HTML-knackande!