Grid och flexbox

Nu börjar ni kunna mycket med hur man bygger upp utseendet på en hemsida. Några 'relativt' nya metoder man kan använda sig av och som är allt mer vanliga är att avända sig av grid och flexbox. En introduktion till grid går att hitta här och en mycket bra interaktiv tutorial går att hitta här. (Registrera dig med ditt skol-email. Det är kostnadsfritt).

Uppgifter

  1. Du ska nyligen gjort en Provuppgift (Efterlysningssidan) där du använde dig av positioneringar. Nu ska du göra om (Skapa en kopia) den sidan men använda dig utav en grid-layout istället. Gör de ändringar som behövs i både html-filen och css-filen och försök att skala bort allt som inte behövs. Koden ska vara lättläslig. Kommentera gärna i koden om du gör någon klurig lösning. Utseendet ska bli likadant eller bättre/snyggare än originalet. Tänk också på att sidan ska vara fin att titta på även på mindre skärmar, se till att sidan blir responsiv.
  2. Du ska skriva en tutorial om flexbox. Det finns otaliga tutorials om olika saker på internet. Nu är det din tur att göra en sida som förklarar något, i det här fallet flexbox. Du ska skriva en tutorial som tar upp allt man kan tänkas vilja veta om flexbox och visa exempel på hur de olika inställningarna man kan göra påverkar utseendet. Förklara styrkor och svagheter och när man bör andvända flexbox och när man kan använda sig av någon annan metod. OBS! Du SKA ange källor på eventuella böcker, hemsidor och videor du använt dig av! Du ska även använda dig av allt du lärt dig tidigare för att göra en snygg och läsbar sida som gör att man vill lära sig mer om CSS genom att följa just din sida.
  3. Gör en snygg logotyp med hjälp av sammansatta bakgrunder enligt exempel här.
  4. Så tänk dig att du ska göra ett par bilder på din superhjälte kanske i olika poser eller vinklar. Dessa ska du modifiera så att de färgmässigt passar ihop med varandra och resten av färg och form på sidan. Det ska även finnas textbaserad information om din superhjälte som ska presenteras på ett sätt att färger och design av elementen passar in med de bilder och de färger du valt. Visuellt så kan man väl säga att det skulle säkert passa bra att välja svart, mörkblått och gult som färger på en sida om Läderlappen, medans samma färger inte skulle fungera så bra på en sida om Bamse till exempel. Texterna ska vara tydliga och läsbara och handla om t.ex. hjältens bakgrundshistoria (Orgin story), kanske en lista eller en tabell över superkrafter eller styrkor och svagheter, Det kan också handla om hur han vanligtvis strider, eller kanske något om hans större hjältedåd. Exakt vad som passar beror ju på vilken superhjälte du väljer. Bilder får du ta från nätet för den här uppgiften.
    Man kan också tänka sig att man ska kunna göra någon typ av effekter på sidan, som att information kanske kommer fram när man för musen över ett objekt eller något liknande. Superhjälte i den här uppgiften är en term som är ganska löst definierad, du kan välja t.ex. Stålmannen, Dr. Mugg, Hulken eller kanske Kalle Anka. Men beroende på vem man väljer så får man ju anpassa texten så att det passar den karaktären. Kalle Anka bör du t.ex. inte beskriva i termer av att han har räddat universum och sprutar eld ur näsborrarna, för även om han kanske gjort båda sakerna någon gång i sin serietidningskarriär så är det knappast det som han är känd för, snarare att han är vresig med ett hett temperament, har ofta otur, omöjlig att förstå, men med hjärtat på rätta stället.

    Jag föreslår att du börjar med att:
    1. Bestäm dig för vilken figur du vill göra en sida om. Om din karaktär har både tecknat utseende eller en (eller flera) skådespelare så välj endast ett utseende till din sida.
    2. Välj ut ett par bilder och färger som kan passa tillsammans så att du har en överblick vad du vill göra. Välj gärna fler än en, samma figur kan finnas på flera platser på en sida t.ex. som en bakgrund till hela sidan.
    3. Skapa HTML-delen av sidan och hitta och skriv in information i olika taggar, bry dig inte om utseendet alls i början du vill ha in information som du sedan kan försöka formatera. Placera textblocken förslagsvis i DIV-taggar som du ger class och/eller id. Gruppera taggar som hör ihop inuti grupperingstaggar, dvs div-taggar inuti div-taggar.
    4. Nu borde du ha en tråkig vit sida med en massa text. När den delen är färdig så börjar du med din siddesign, d.v.s. att du sätter enkla bakgrunder på dina element och ser till att försöka placera ut dem på rätt plats på skärmen. Håll blocken enkla nu, det viktigaste är att de hamnar rätt och att du kan se var de ligger. Du ska försöka få in informationen på en sida som man inte ska behöva scrolla på. Det här steget fungerar bäst om man försöker rita på papper eller på annat sätt var de olika delarna ska finnas innan man börjar. Då har man en mall att utgå från. Här behöver du använda dig av de kunskaper du fått i positionering av block och kanske om mer avancerade metoder som flexbox och grid.
    5. När det mesta ser ut att ligga rätt så börjar du med själva färgläggningen för att få det att se bra och enhetligt ut. I det här läget (om du inte gjort det i steg 4) så kan det bli nödvändigt att modifiera din HTML-kod för att få till de effekter som du önskar. Här är det meningen att du ska ha fokus på presentationen och det visuella. Du kan behöva manipulera bilder i photoshop, t.ex. ta bort bakgrunder, men du kan också behöva blanda olika bilder för att få till önskade effekter/övertoningar så att bilder och design passar ihop.
    6. Se till att bilder inte är för stora! Jag vill inte se sidor med bilder på över 1MB. Filstorleken går att krympa i photoshop utan att man behöver dra ner på den totala storleken.  

Tillbaka till startsidan