Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Storlek: px

Starta visningen från sidan:

Download "Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle."

Ola Åkesson
för 9 år sedan
Visningar:

1 Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera favoritlänkar samt ett motivationsstycke. (Googla om du är osäker på vad du ska ha med i ett cv) Målet är inte att du ska berätta ditt livs historia utan att du ska skapa en webbsida med korrekt HTML & CSS - så du behöver inte ta med allt du gjort i livet och allt du skriver kan lika gärna vara påhittat. Motivationsdelen är dock mycket viktig - i den delen ska du skriva: varför du valt att gå programmet varför du vill bli webbutvecklare hur din framtid kommer se ut efter examen tack vare utbildningen Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. Format För att ni ska börja vänja er vid att jobba i Visual Studio 2010 så skall sidan göras med hjälp av Visual Studio i ett standard-mvc-3-projekt (vi ska dock inte direkt pyssla med några Asp.net, mvc 3 eller c#-grejer, utan MVC 3-projektet är bara ett skal). Så få inte panik över den stora mängden med filer och grejer som finns i projektet - du behöver varken använda dem eller förstå dem just nu. Om ni inte har installerat Visual Studio 2010 och MVC 3, så gör det! Instruktioner för installationen finns på JensenOnline. Det är en hel del grejer som behöver installeras och ifall du får problem, fråga gärna någon av dina kamrater som redan har installerat allt. Asp.net MVC 3-projekt Skapa ett standardprojektet för Asp.net MVC3 i VS2010 (Internet application). Kryssa i att du vill använda HTML5 semantic markup

(Googla om du är osäker på vad du ska ha med i ett cv) Målet är inte att du ska berätta ditt livs historia utan att du ska skapa en webbsida med korrekt HTML & CSS - så du behöver inte ta med allt du

3 (Ifall du inte har någon kryssruta för HTML5 semantic markup (som ovan) behöver du installera MVC3 Tools Update )

4 Snabb förklaring av strukturen: Standardsidan är "Index.cshtml" som du hittar i /Views/Home/ (det är där du lägger din HTML) Den övergripande layouten (som delas av alla sidor som standard) finns i Views/Shared/ _Layout.cshtml (Layoutsidan bäddar in indexsidan där det står "@RenderBody()" ) Bilder läggs i katalogen /Content/ (skapa gärna en underkatalog som heter 'Images) Skapa även din CSS-fil i Content-katalogen (där det redan ligger en Style.css). Länka in din egen CSS-fil på din html-sida sedan. (antingen i Views/Home/Index.cshtml eller i /Views/ Shared/_Layout.cshtml) Alltså: Din HTML-sida skapar du i /Views/Home/Index.cshtml Din CSS lägger du i en fil som du skapar i /Content/-katalogen (och länkar in i din HTMLsida) Du behöver inte bry dig om standardutseendet du får på sidan automatiskt av MVC3. För att se din sida behöver du köra igång den; Gå till Debug-menyn i Visual Studio och välj Start Debugging eller Start without debugging.

cshtml (Layoutsidan bäddar in indexsidan där det står "@RenderBody()" ) Bilder läggs i katalogen /Content/ (skapa gärna en underkatalog som heter 'Images) Skapa även din CSS-fil i Content-katalogen

5 Deadline: Tanken är att ni ska vara klara med labben senast fredagen den 14/9. Är ni inte det så kommer det bli svårt att hinna med resten av kursen - men absolut sista deadline är sista dagen på kursen, d.v.s. fredagen den 28/9. Om ni redovisat och fått G så får ni givetvis redovisa igen sen ifall att ni även hunnit med att göra VG-delen (så länge det sker senast 14/9) Krav för G: HTML Bild på dig ska finnas på sidan och den skall ligga bredvid texten (tips: CSS, float) Följande HTML-taggar ska användas minst en gång (i "korrekt" sammanhang): <html>, <head>, <title>,<body>, <div>, <span>, <p>, <a>, <h1>, <h2>, <header>, <nav>, <footer>, <article>, <section>, <em>, <strong>, <br />, <q>, <blockquote>, <table>, <th>, <tr>, <td>, <img>, <ul>/<ol>, <li> (ni får givetvis använda fler taggar om det känns lämpligt, så länge de inte är borttagna ur HTML5) Inga taggar som tagits bort (deprecated) i samband med HTML5 får finnas på sidan: (<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>) Table får inte användas för att skapa layout på något vis utan endast för att visa tabelldata (typ listan på dina utbildningar/jobb). För layout använder vi <div> (och motsvarande) En motivationsdel måste vara med All utseende-"styling" sker med CSS - Ingen styling i HTML:en. HTML:en ska bara ange strukturen på innehållet - inte hur det ska se ut. All CSS skall finnas i en egen fil och länkas in på HTML-sidan via "<link...". Det får alltså inte finnas någon CSS kodad på HTML-sidan. Sidan skall klara HTML5-valideringen på (när ni öppnat sidan i en browser - välj visa källa och klistra in i validatorn) CSS Du skall bygga en två-, tre-, eller fyrakolumns layout någonstans på sidan. Bilden skall som sagt ligga i en sidokolumn. Du får välja om du skall ha fasta bredder eller dynamiska bredder (alltså om kolumnerna ändrar storlek när man ändrar storlek på fönstret, eller ifall kolumnerna alltid har en fast storlek). Du får välja ifall din layout ligger inuti standardlayouten du får med Asp.net MVC 3 standardprojekt eller om du vill ändra hela sidans layout (d.vs. det är ok ifall din layout ligger inuti den vita rutan) Tips: <div>, float, clear Alla länkar (<a...>) ska vara "bold" samt inte ha streck under sig Sidan ska ha en bakgrundsfärg (eller bakgrundsbild) och texten ska ha lämplig färg så att den går att läsa mot bakgrunden (t.ex. är inte svart text på en svart bakgrund speciellt lättläst). På någon del av sidan ska texten vara centrerad (exempelvis i rubriker)

Om ni redovisat och fått G så får ni givetvis redovisa igen sen ifall att ni även hunnit med att göra VG-delen (så länge det sker senast 14/9) Krav för G: HTML Bild på dig ska finnas på sidan och den

6 Rubriker ska ha teckensnittsfamilj utan serifer och vara i en annan färg än blå eller svart Brödtext ska ha teckensnittsfamilj med serifer Någonstans på sidan ska det finnas en ruta med annan bakgrundsfärg och en kantlinje på 1px Krav för VG G-kraven ska vara uppfyllda Första bokstaven i varje paragraf med brödtext ska vara dubbelt så stor som övrig text samt i fetstil använd 960.gs för din layout ( Tips: finns en guide på svenska längst ner på sidan. För att lyckas så måste du ändra både /Views/Home/Index.cshtml och /Views/ Shared/_Layout.cshtml. Utmaningen är att veta vilken del av 960.gs-koden som skall in i vilken del När man för musen över en länk ska länken få streck under sig och byta färg. För att göra tabellen mer lättläst skall tabell-headern vara i en tydlig annan färg samt så ska även varannan rad ha en annan färg (glöm inte att "styling" endast får ske med CSS) Tips: En lista över taggarna i HTML5 (samt de som inte längre skall användas) hittar ni på: Om ni kör fast - googla! Och var heller inte rädda för att fråga mig, skicka iväg ett mail. (Tyvärr kommer jag vara bortrest och inte ha tillgång till dator mellan fredagen den 7:e september och tisdag eftermiddag den 11:e, men jag svarar på mail så fort jag kommer hem) Extra utmaning: Få dina kolumner att vara lika höga. Sätt olika färger på header, alla "columns" samt footer. Lägg olika mycket text i de olika kolumnerna (en av kolumnerna måste ha mer text än vad som får plats på skärmen utan att scrolla). Se till att alla kolumner sträcker sig hela vägen ner till footern.

gs för din layout (http://960.gs/) Tips: finns en guide på svenska längst ner på sidan. För att lyckas så måste du ändra både /Views/Home/Index.cshtml och /Views/ Shared/_Layout.cshtml. Utmaningen är att veta vilken del av 960.

Relevanta dokument

Webbteknik för ingenjörer

Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera