Digitalt skapande - webbutveckling

Övningsarkiv


På den här platsen kommer jag under kursens gång publicera övningar som ni kan göra efter mina föreläsningar.

Lycka till!

  • Övning 1

    Skapa din första webbplats

    Skapa först en mapp på skrivbordet. Öppna sedan upp Dreamweaver. Skapa en html-fil och en css-fil. I rutan resurser längst ned till höger klickar du på hantera platser. Lägg till din mapp från skrivbordet.

    Spara din html-fil och döp den till index.html. Spara din css-fil som style.css. Dra sedan in css-filen från resurser upp innan för headtaggen.

    Öppna upp din html-fil och kopiera in följande innanför body-taggarna:

    <div class="Mainframe">
    
    <div class="HeaderPane">
    <h1> Namnet på din webbplats</h1>
    </div>
    <div class="ContentFrame">
    <div class="ContentPane">
    <h2>En rubrik för webbplatsen </h2>
    <p>Här kommer ditt innehåll </p>
    </div>
    </div>
    <div class="FooterPane">
    Det här är foten där du lägger till exempel kontaktinformation
    </div>
    </div>


    Öppna sedan upp din css-fil och klistra in följande:
    body
    {
     background-color: #000000;
     font-family: verdana;
     font-size: 1em;
    }
    
    h1
    {
     font-size: 3em;
     color: #15abf1;
    }
    
    h2
    {
     font-size: 1.5em;
     color: #15abf1;
    }
    
    a
    {
        color: #15abf1;
    }
    
    .Mainframe
    {
      margin: auto;
      width: 1000px;
    }
    
    .HeaderPane
    {
     width: 100%;
     background-color: #eeeeee;
     float:left;
     height: 100px;
     text-align:center;
    }
    
    .ContentFrame
    {
     background-color: #ffffff;
     float:left;
     width: 100%;
     min-height: 500px;
    }
    
    .ContentPane
    {
     padding: 20px;
    }
    

    Spara filerna och öppna upp dem i en webbläsare.
    Grattis!
    Du har nu skapat din första webbplats :) Testa nu att byta textfärger, storlekar på texter och annat skoj du kan komma på!
  • Övning 2

    Arbeta med floats

    Nu ska vi gå vidare och arbeta med floats. Floats används för att få objekt att ligga bredvid varandra. I din content-div kopierar du in följande:
                                        <div class="left">
                                            Det här är min vänstra ruta där jag vill lägga text
                                        </div>
                                        <div class="right">
                                            Det här är min högra ruta som ska innehålla en bild
                                        </div>
                                    
    Gå nu in i din css-fil och kopiera in följande längst ned.
                                        .left
                                        {
                                           float:left;
                                           background-color: aqua;
                                           width: 400px; 
                                        }
                                        
                                        .right
                                        {
                                         float:right;
                                         background-color: fuchsia;
                                         width: 400px;
                                        }
                                        
                                        
                                    


    De två olika rutorna ligger nu bredvid varandra på följande sätt:

    Det här är min vänstra ruta där jag vill lägga text
    Det här är min högra ruta som ska innehålla en bild


    Med hjälp av det här ska du nu skapa din första webbplats. Tanken är att den ska se ut ungefär såhär:





    Storleken på huvudrutan är 800px bred och 600px hög.

    Lycka till!
  • Övning 3

    Bygg en webbplats från photoshop

    Ladda ned Photoshop-filen här och öppna upp den i Photoshop. Plocka ut de olika delarna som lager och spara dem för webben.

    Bygg därefter en webbplats i HTML med hjälp av de bilderna.

    Obs!Menyn behöver inte vara klickbar!

    Lycka till!
  • Inlämningsuppgift

    Inlämningsuppgift

    Ni ska nu få chansen att visa vad ni lärt er!

    Under hela december och delar av januari ska ni få arbeta med en inlämningsuppgift där ni får chansen att använda det vi hittills har tränat på.

    Förutsättningarna är följande:

    Marknadsför en produkt! Ni ska skapa en kampanj i form av en webbplats där ni marknadsför produkten. Vilken produkten är, om den finns eller inte, är helt upp till er.
    Bolla gärna med mig innan ni sätter igång med designförslag.

    Jag vill att ni ska leverera följande:

    •  En Photoshop-fil med minst 3 mallar (Startsida, vanlig textsida, kontaktsida eller annan undersida som har ett eget utseende)
    • En webbplats byggd i  HTML och CSS och med minst en jQuery-funktion på sidan
    • Webbplatsen ska innehålla en startsida och minst tre olika undersidor. Minst två av undersidorna ska ha olika utseenden kopplat till mallarna i PS-filen.

    Webbplatsen levereras till mig som en zippad fil med alla bilder och filer, antingen per e-post eller på en usb-sticka

    Deadline för inlämning är 21 januari (ni har hela 21:e på er också). Lektionen efter tittar vi tillsammans på webbplatsen och ni får ge era kommentarer runt hur ni tänkt.

     



    Lycka till!
  • Övning 5

    Träna på javascript

    Javascript är ett script-språk som körs på besökarens dator och kan användas till att ge interaktivitet i webbplatsen och att skapa animeringar och effekter.

    På W3Schools finns enkla exempel på hur man använder javascript.
    Med hjälp av följande länkar vill jag att du själv skapar en html-fil där användaren klickar på olika knappar för att förändra bakgrundsfärgen på webbplatsen och samtidigt får information om vilken färg de har bytt till.

    Javacript Tutorial
    Exempel på knapp-klick

    Länkarna ger dig enbart exempel på hur man använder javascript.
    När du har en färdig html-fil, visa mig och lägg sedan upp på ftp:n under en ny mapp med namnet ovn5.

    Blir du klar snabbt, testa de olika exempel som finns på w3Schools.

    Tips för att lösa uppgiften: Googla!


    Lycka till!