Övningar i CSS för anpassning till olika enheter

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Övningar i CSS för anpassning till olika enheter"

Transkript

1 Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner sm vi behöver ta hänsyn till ch utfrma med CSS. Då sidan skrivs ut på papper ska den kanske inte se exakt likadan ut sm på bildskärmen, så man kan skapa en speciell stilmall för utskrift. I mbila enheter (läsplatta eller mbiltelefn) varierar skärmstrleken en hel del. Vi behöver därför kunna anpassa webbsidan, så att den fungerar både på en liten ch en str skärm. Detta är ett mråde sm utvecklas mer ch mer ch brukar kallas respnsiv eller adaptiv webbdesign. Det finns i princip två sätt att gå tillväga antingen utvecklar man först för den mindre, enklare enheten ch gör sedan tillägg för den större, mer avancerade enheten ("mbile first" eller "prgressive enhancement") eller så gör man tvärtm ("graceful degredatin"). Ibland blir det en mix av de båda angreppssätten. I dessa övningar ska vi utgå från en layut sm skapades i slutet av förra labratinen, fast den är lite vidareutvecklad. Bl.a. har den nu kd för "sticky fter", så att sidften alltid visas längst ner på sidan eller längst ner i fönstret. Då sidans innehåll inte fyller hela fönstrets så ska sidften ändå visas längst ner i fönstret. Layuten har nu ckså fått lite andra färger ch CSS3-effekter i frm av rundade hörn, skuggr ch gradient fyllningsfärg. 1. Studera kden i dkumenten På labratinens webbsida kan du ladda ner en mapp med de webbsidr du ska utgå ifrån. Så m du inte redan gjrt det laddar du ner zip-filen ch packar upp den. Du får då en mapp med ett antal webbsidr. Öppna startsidan i webbläsaren Öppna filen index.htm i webbläsaren ch bläddra runt bland de tre sidrna, så att du ser hur de ser ut. Ha sedan filen index.htm öppen, så att du efter varje steg kan ladda m sidan ch studera resultatet. HTML- kden Öppna filen index.htm i editrn ch studera HTML-kden. Det är i strt sett samma kd sm i föregående labratin, fast div-elementet för "fter" är nu flyttat, så att det ligger utanför wrapper. Detta är dels för att kden för "sticky fter" ska fungera ch dels för att kunna göra så att sidften fyller hela fönstrets bredd. CSS- kden Öppna filen sticky_fter.css i editrn ch studera kden. Filen sticky_fter.css imprteras till style.css. Kden i sticky_fter.css kmmer från ett exempel på webben, ch förklaras där. Du behöver dck inte gå igenm det i detalj just nu, för att kunna göra resten av dessa övningar. Så just nu kan vi nöja ss med att det fungerar, så kan du titta på den kden vid ett senare tillfälle. Öppna filen style.css i din editr. Ha sedan filen öppen. I style.css är bredden för wrapper nu satt till 1000 pixlar. Bakgrundsfärgerna för de lika bxarna är nu antingen brttagna (så att bdys vita färg lyser igenm) eller utbytta till andra färger. Det är ckså en del kd för att ge sidhuvudets rubrik rundade hörn, skugga ch gradient bakgrundsfärg. Navigeringslänkarna har ckså rundade hörn. I övrigt är det samma CSS-kd sm i den sista övningen i föregående labratin Rune Körnefrs 1

2 2. Stilmall för utskrift Medieteknik De stilmallar sm du hittills skapat används för presentatin på alla enheter, bl.a. både för skärmen ch för utskrift, eftersm vi satte media="all" i HTML-dkumentens link-tagg. Vill man ha två helt lika stilmallar för skärmen ch utskrift, kan man ändra till media="screen", så används den stilmallen endast för skärmen. Sedan kan man skapa en ny stilmall för utskrift ch länka in den med ytterligare en link-tagg, men där skriver man media="print". Du ska nu delvis göra detta, men vi behåller media="all" i den link-tagg du har. Sedan skapar vi en ny stilmall där vi endast tar med de ändringar vi vill ha i stilen för utskrift jämfört med stilen för skärmen. Denna stilmall länkas sedan in med en link-tagg där vi har media="print". Då kmmer båda stilmallarna att användas för utskriften. Skapa ett nytt CSS- dkument för utskrift Skapa ett nytt dkument i din editr ch spara det med namnet style_print.css. Skriv in följande kd i det nya CSS-dkumentet: bdy {backgrund:#fff; fnt-family:"times New Rman", Times, serif; #wrapper {max-width:nne; width:aut; margin-left:60px; #header h1 {backgrund:#fff; clr:#000; bx-shadw:0 0; brder-bttm:2px slid #000; #nav {display:nne; #fter {backgrund-clr:#fff; clr:#000; brder-tp:1px slid #000; Detta är de ändringar sm vi vill ska gälla vid utskrift. Vi byter bakgrundsfärgen till vit färg. Vi ändrar ckså typsnittet till Times New Rman, ett typsnitt med seriffer, eftersm det är lättare att läsa på papper. Vi begränsar inte bredden, utan sätter width till aut, så att papprets bredd utnyttjas. Samtidigt kan det vara bra att ha en liten marginal i vänsterkanten, ifall man vill slå hål i pappret ch sätta in det i en pärm. Så vi sätter vänstermarginalen till 60 pixlar. Vi ändrar även färgerna i sidhuvudet till vit bakgrund ch svart text. Vi tar ckså brt skuggan, eftersm en del webbläsare inte hanterar den snyggt vid utskrift. Istället lägger vi på en tjckare kantlinje under rubriken. Navigeringslänkarna ska inte skrivas ut, så för nav sätter vi display till nne. Slutligen ändrar vi stilen för fter genm att ta brt den blå bakgrundsfärgen ch istället ha en övre kantlinje. Länka till CSS- dkumentet från HTML- dkumenten Öppna HTML-filerna index.htm, schema.htm ch uppgifter.htm ch skriv in ytterligare en linktagg under den gamla. Du ska alltså ha två link-taggar enligt: <link href="style.css" rel="stylesheet" type="text/css" media="all"> <link href="style_print.css" rel="stylesheet" type="text/css" media="print"> Vid presentatin på skärmen används då endast den första stilmallen. Vid presentatin på skrivare används först den första stilmallen ch sedan den andra. Öppna index.htm i webbläsaren ch prva att skriva ut sidan, så ser du hur utskriften skiljer sig från presentatinen på skärmen. Har du inte tillgång till skrivare, så kan du välja pdf i utskriften Rune Körnefrs 2

3 3. Stilmall för mbila enheter Medieteknik Det sm skiljer mellan en vanlig datr ch mbila enheter är framför allt skärmens strlek. Så att skapa en stilmall för mbila enheter handlar fta m att anpassa layuten, så att den passar i den mbila enheten. Viss flexibilitet finns redan i den layut sm vi har på webbplatsen i övningarna. Istället för en fast bredd har mi satt en maximal bredd ch sett till att sidan anpassar sig till ett smalare fönster. Men då fönstret börjar bli riktigt smalt, så blir det lite för trängt med flera klumner. Då ska vi se till att förändra layuten till en klumn, där "klumnerna" istället visas vanför varandra. Det är även andra saker sm skiljer mellan vanliga datrer ch mbila enheter, t.ex. att hastigheten på nätet fta är långsammare (det är inte alla sm har 4G-nätverk). Då kan en anpassning vara att dölja "nödig" infrmatin sm t.ex. bilder, för att därmed få sidan att laddas snabbare. Link- tagg med media="handheld" I link-taggen har vi använt attributet media="all" ch media="print", för att ange när stilmallen ska användas. Ett annat värde för media är "handheld", så då skulle vi kunna skapa ytterligare en stilmall för handhållna, mbila enheter ch länka in den med media="handheld". Tyvärr bryr sig inte alla mbiltelefner m det attributvärdet, utan istället visar de en förminskad bild av den vanliga webbsidan. Det gör det svårt att se innehållet ch att klicka på länkar. Så vi ska inte använda detta, utan istället en annan teknik. Media queries I CSS3 infördes någt sm kallas media queries, vilket innebär att man kan sätta upp villkr för när en stilmall eller del av den ska användas. En media query kan t.ex. vara "screen and (max-width:640px)", vilket innebär att den ska användas för presentatin på skärmen ch då den maximala bredden på fönstret är 640 pixlar. Detta kan läggas in i media-attributet i link-taggen, för att avgöra m stilmallen ska inkluderas eller ej. Man kan ckså lägga in det sm ett direktiv direkt i CSS-kden ch det är så vi ska göra i dessa övningar. Vanliga bredder på skärmar i mbiler är 240, 320, 480, 640 ch 960 pixlar. Förutm vilken mbil det är berr det ckså på m man håller den stående eller liggande. Det kan naturligtvis ckså förekmma andra strlekar, så man brukar få prva sig fram för att se när man behöver göra en förändring i layuten. Det behöver ju inte vara vid alla dessa strlekar. Den webbplats sm vi har i övningarna är gjrd för 100 pixlar ch är flexibel, så att bredden kan minskas. Det finns därför inget behv av någn förändring redan vid 960 pixlar. I nedanstående övningar kmmer vi att lägga in media queries för 640, 480 ch 320 pixlar. Den kd du ska lägga till ska vara i filen style.css. För att testa det i mbiltelefnen, måste sidrna publiceras på nätet. Men till att börja med kan man testa i webbläsaren genm att göra fönstret smalare, så det ska du göra i övningarna. I en del webbläsare går det dck inte göra fönstret så smalt sm 320 pixlar, men i Opera fungerar det. Så testa resultatet i Opera. Kd för skärmar mindre än 640 pixlar Lägg till följande i screen and (max-width:640px) { #clumns, #nav, #cntent {display:blck; width:aut; Detta gör m clumns, nav ch cntent till egna blck, dvs de kmmer inte att vara klumner intill varandra. Istället kmmer först navigeringslänkarna ch sedan sidans innehåll under dem. Vi sätter ckså width till aut, så att hela fönstrets bredd utnyttjas. Öppna sidan index.htm i webbläsaren ch prva att göra fönstret smalare. Då du kmmer ner i en strlek under 640 pixlar bör du se att layuten förändras Rune Körnefrs 3

4 Lägg ckså till följande kd för screen and (max-width:640px) { #clumns, #nav, #cntent {display:blck; width:aut; #nav {text-align:center; #nav li {display:inline; #nav a:link,#nav a:visited {display:inline; Detta centrerar länkarna ch ändrar dem till inline, så att de ligger intill varandra på en rad. Det är egentligen endast li-taggen sm nrmalt är en blck-tagg ch behöver ändras till inline. A-taggen är nrmalt redan inline, men i stilen högre upp i dkumentet har vi ändrat a-taggen till blck, så därför måste vi nu ändra den till inline igen. Slutligen ska vi för denna media query ckså ta brt marginalerna på sidhuvudets rubrik. Lägg till följande screen and (max-width:640px) { #clumns, #nav, #cntent {display:blck; width:aut; #nav {text-align:center; #nav li {display:inline; #nav a:link,#nav a:visited {display:inline; #header h1 {margin:0; Marginalen runt rubriken sätts till 0, så tar den lite mindre plats när vi nu har ett mindre fönster. Kd för skärmar mindre än 480 pixlar Lägg till följande i screen and (max-width:480px) { #header h1 {fnt-size:medium; padding:4px; bx-shadw:0 0; img {display:nne; När fönstret är mindre än 480 pixlar gör vi rubriken ännu mindre, genm att sätta strleken till medium. Vi minskar ckså värdet för padding ch tar brt skuggan. Observera att det ska vara två 0:r med ett blanktecken efter bx-shadw. Det första värdet är för den hrisntella skuggan ch det andra för den vertikala skuggan. Vi tar ckså brt bilderna. Stilen är för img, så detta tar brt alla bilder på sidan. Vill vi endast ta brt en del bilder, så skulle vi kunna införa en särskild class, t.ex. canbedeleted, ch lägga in den sm ett attribut i de img-taggar sm kan tas brt. Sedan gör vi stilen för.canbedeleted istället för img. Gör nu fönstret ännu smalare, så ser du förändringen. Kd för skärmar mindre än 400 pixlar Lägg till följande i screen and (max-width:400px) { #nav li {display:blck; #nav a:link,#nav a:visited {display:blck; h1,h2,h3,h4 {fnt-size:medium; h3:befre,h3:after {cntent: ""; Rune Körnefrs 4

5 Observera att det här står 400px. I texten innan vi km in på övningarna skrev jag att gränsen skulle vara vid 320px, men efter lite test visade det sig att navigeringsmenyn på en rad blev för str redan vid en lite större bredd, så därför införs denna förändring vid 400 pixlar. Den gäller ju då även när fönstret är 320 pixlar. Navigeringen görs m till blck igen, så att länkarna ligger under varandra. Vi gör ckså samtliga rubriker mindre, så att de bättre får plats. I filen style_general.css hade vi lagt på några tecken före ch efter h3-rubriker. Detta tar vi nu brt. Gör fönstret ännu smalare. 4. Testa i en mbiltelefn Nu är det dags att testa ch se hur det ser ut i en mbiltelefn. Men först måste du dels lägga till en meta-tagg i HTML-filerna ch dels publicera sidrna på webben. Du behöver ju ckså en smartphne ch testa i. Har du ingen egen sådan, så kanske du känner någn annan sm har en, så att du kan låna den ch titta på sidrna i. Du kan ckså använda en emulatr i din webbläsare, t.ex. följande för att emulera en iphne: (med knappen längst ner till höger i telefnen kan du rtera den.) Meta- tagg för viewprt i HTML- dkumenten Öppna index.htm, schema.htm ch uppgifter.htm i editrn ch lägg till följande meta-tagg i headdelen, under den meta-tagg sm redan finns där: <meta name="viewprt" cntent="width=device-width; initial-scale=1.0"> Denna tagg gör att mbiltelefnen inte försöker förminska webbsidan, utan visar vad sm ryms i enhetens fönster utan skalning. Publicera webbsidrna på webben Lägg upp hela mappen i ditt webbutrymme. Se labratin 1, ifall du behöver repetera hur du gör det. Testa i mbilen Skriv in url:en till dina publicerade sidr i mbilen (eller emulatrn sm nämndes van) ch testa hur det ser ut i stående respektive liggande läge. 5. Tabellen på sidan med schemat Om du tittar på sidan med schemat, så ser du att det inte riktigt får plats. Berende på vad du har för telefn ch hur strt fönstret är, så kanske schemat får plats i liggande läge, men inte stående. Tabellen är för bred. Detta är ett av prblemen med mbilanpassning av webbsidr. Det räcker inte med att bara göra m layuten, utan ibland behöver ckså innehållet förändras. En lösning av prblemet kan vara att ändra i HTML-kden ch presentera schemat på ett annat sätt. Men m man vill ha det sm en tabell, då den får plats, så är det ingen bra lösning. Då får vi istället ändra tabellen till någt annat med hjälp av display i CSS. Vi ska här se hur vi kan ändra den till en klumn Rune Körnefrs 5

6 Ändring av schemat Schemat har redan fått en stil med färger, skugga, etc. i filen style_general.css (titta gärna på den kden), så vi inför här de förändringar eller tillägg sm ska göras. Börja med att lägga in följande i screen and (max-width:700px) { #schema {fnt-size:small; Vid 700 pixlar gör vi texten i schemat mindre. Vi behåller det dck sm en tabell ch gör inga fler ändringar här. Ändra till en klumn Lägg in följande i screen and (max-width:600px) { #schema {bx-shadw:0 0; #schema tr {display:blck; #schema td {display:blck; brder:0; backgrund-clr:#fff; clr:#000; Tabellen får kanske plats ända ner till 450 pixlars bredd eller ännu mindre, men för att vara på den säkra sidan inför vi förändringen vid 600 pixlar. Vi tar brt skuggan från tabellen. Vi ändrar varje tabellrad ch tabellcell till blck, så visas de på varsin rad. Vi tar ckså brt kantlinjerna ch ändrar bakgrundsfärgen till vitt ch textfärgen till svart. I style_general.css finns det dck ckså en inställning för #schema tr td:first-child, dvs den första td-taggen i varje rad, där bakgrunden är blå ch texten är vit. Detta ändras inte här, så det kmmer att vara kvar. Lägg till följande rad i CSS-kden: #schema tr:first-child {display:nne; Detta tar brt den första raden med rubrikerna. Nu ser det lite bättre ut, men vi vet ju inte vad siffrrna betyder eller vilka veckdagar sm de lika raderna gäller för, så vi behöver lägga till lite text i de lika raderna. Lägg in förklarande text Vi ska nu lägga till lite text i början av varje rad, sm förklarar vad de avser. Lägg till följande i CSS-kden: #schema tr td:first-child:befre {cntent: "Vecka "; Då lägger vi till rdet Vecka i början av den första td-taggen i varje tr, dvs de sm innehåller vecknumren Rune Körnefrs 6

7 Lägg till följande i CSS-kden: #schema tr td:nth-child(2):befre {cntent: "Må: "; #schema tr td:nth-child(3):befre {cntent: "Ti: "; #schema tr td:nth-child(4):befre {cntent: "On: "; #schema tr td:nth-child(5):befre {cntent: "T: "; #schema tr td:nth-child(6):befre {cntent: "Fr: "; Detta lägger till Må: i den andra td-taggen, Ti: i den tredje td-taggen, etc. Nu fick vi med även de tmma td-taggarna. Lägg till följande i CSS-kden: #schema tr td:empty {display:nne; Därmed visas inte de td-taggar sm är tmma. 6. Slut Därmed är övningarna slut för den här gången. Du har sett hur man i link-taggen kan använda mediaattributet för att referera till lika stilmallar för lika ändamål. Du har ckså sett hur vi kan skriva media queries i stilmallen för att skriva kd för lika skärmstrlekar. För att det ska fungera i mbilen, får du inte glömma brt meta-taggen med viewprt i HTML-dkumenten Rune Körnefrs 7

Övningar i layout med CSS

Övningar i layout med CSS Övningar i layut med CSS Med CSS strukturerar man innehållet i lika delar. Med div-taggar kan man avgränsa delar av kden för sidhuvud, navigeringslänkar, innehåll, etc. Med CSS kan man sedan ge dessa delar

Läs mer

Introducerande övningar i CSS

Introducerande övningar i CSS Intrducerande övningar i CSS CSS (Cascading Style Sheets) är ett språk sm används för att göra stilinställningar av en webbsida skapad i HTML. Stilinställningarna kan läggas in på tre ställen: sm attribut

Läs mer

Övningar i JavaScript del 5

Övningar i JavaScript del 5 Övningar i JavaScript del 5 I dessa övningar ska vi ta upp några lika händelsehanterare. Dessa ska dck inte läggas in med attribut i HTML-kden, så sm vi gjrt tidigare med nclick. Istället ska vi nu lägga

Läs mer

Övningar i JavaScript del 3

Övningar i JavaScript del 3 Övningar i JavaScript del 3 I dessa övningar tar vi upp datumbjektet Date, arrayer ch lpar. Du utgår från ett prgram där man kan klicka på små bilder ch mtsvarande stra bild visas. Detta är i princip samma

Läs mer

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

Övningar i JavaScript del 7

Övningar i JavaScript del 7 Övningar i JavaScript del 7 I denna labratin återanvänder vi bilderna på frukter, sm vi haft i ett par tidigare labratiner. Denna gång ska vi lägga till visuella effekter då en frukt väljs. Klickar man

Läs mer

Labora&on 4 CSS och validering övningar/uppgi9er

Labora&on 4 CSS och validering övningar/uppgi9er Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna

Läs mer

För att kunna utföra en variable data printning böhöver du följande filer:

För att kunna utföra en variable data printning böhöver du följande filer: Printa Variabel Data Variabel data printning tillåter dig att byta infrmatinen ch data i ditt dkument eller i din bild för att skapa utskrifter med unika texter ch bilder i varje kpia. Denna funktinen

Läs mer

Övningar i JavaScript del 2

Övningar i JavaScript del 2 Övningar i JavaScript del 2 Genm dessa övningar frtsätter intrduktinen av JavaScript. Vi tar nu upp if-satser ch lite mer m funktiner. Vi kmmer ckså in på tillämpningar sm att byta en bild på webbsidan

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

Läs mer

Fler introducerande övningar i HTML

Fler introducerande övningar i HTML Fler intrducerande övningar i HTML Hittills har vi talat m kder i HTML ch ibland kallat dem taggar. Vi har då menat de kder sm skrivs inm < ch >, sm t.ex. ch . Ibland behöver vi dck vara lite mer

Läs mer

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.

Läs mer

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

Administrera filmer på Tandberg Content Server

Administrera filmer på Tandberg Content Server Administrera filmer på Tandberg Cntent Server 11/10/2010 Karlstads universitetsbiblitek, Lärstöd Julia Nyberg ch Kenneth Bström På Tandberg Cntent Server lagras alla filmer sm är inspelade via telebildsystemen.

Läs mer

En kom i gång manual till SPF:s hemsidor

En kom i gång manual till SPF:s hemsidor En km i gång manual till SPF:s hemsidr Inlggning Meny (navigatinsträdet) Vad skall finnas på hemsidan Standarduppgifter [Startsidan, Om föreningen, Styrelsen, Kntakt, Bli medlem] Tilläggs/valfria uppgifter

Läs mer

En kom i gång manual till SPF:s hemsidor

En kom i gång manual till SPF:s hemsidor En km i gång manual till SPF:s hemsidr Inlggning Meny (navigatinsträdet) Vad skall finnas på hemsidan Standarduppgifter [Startsidan, Om föreningen, Styrelsen, Kntakt, Bli medlem] Tilläggs/valfria uppgifter

Läs mer

Inför prov 1 i webbdesign

Inför prov 1 i webbdesign Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke

Läs mer

Laboration 2: Xhtml och CSS.

Laboration 2: Xhtml och CSS. Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och

Läs mer

Föreläsning 4. CSS Stilmallar för webben

Föreläsning 4. CSS Stilmallar för webben Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll

Läs mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition

Läs mer

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet

Läs mer

Laghantering i Equipe

Laghantering i Equipe Laghantering i Equipe för klubbar tillhörande Skånes Ridsprtförbund Eftersm distriktet autmatiskt vill betala ut lagstöd till arrangörerna är det viktigt att inrapprteringen av lagklasserna sker på ett

Läs mer

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

Läs mer

Introducerande övningar i HTML

Introducerande övningar i HTML Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer

Läs mer

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS. Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny

Läs mer

Labora&on 2 HTML och validering övningar/uppgi:er

Labora&on 2 HTML och validering övningar/uppgi:er Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det

Läs mer

Tillgänglighetsguide Lunds kommun... 1. Komma igång... 2. Översikt av Guiden... 1

Tillgänglighetsguide Lunds kommun... 1. Komma igång... 2. Översikt av Guiden... 1 Innehållsförteckning Tillgänglighetsguide Lunds kmmun... 1 Översikt av Guiden... 1 Kmma igång... 2 Sökning ch visning av tillgänglighetsinfrmatin... 2 Resultat av sökning... 3 Rapprtering av nya bjekt

Läs mer

Kort användarmanual för Test och quiz i Mondo 2.0

Kort användarmanual för Test och quiz i Mondo 2.0 Krt användarmanual för Test ch quiz i Mnd 2.0 Denna användarmanual är en krtversin av en längre användarmanual ch innehåller de viktigaste delarna för att kmma igång med användningen av Test ch quiz. För

Läs mer

Manual för visionutv.net Redigera

Manual för visionutv.net Redigera Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar

Läs mer

Övningar i JavaScript del 4

Övningar i JavaScript del 4 Övningar i JavaScript del 4 I dessa övningar ska du dels hantera ett frmulär ch dels arbeta med några textsträngar. 1. Dkument i övningsmappen Övningsmappen sm du laddar ner från labratinens webbsida innehåller

Läs mer

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

Läs mer

CSS-övningar. 1. Grunder

CSS-övningar. 1. Grunder CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement

Läs mer

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende

Läs mer

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: TimeEdit Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta kan det finnas mindre avvikelser

Läs mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: K-Skla ch GPUntis Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta kan det finnas mindre avvikelser

Läs mer

Hur man skapar ett test i Test och quiz i Mondo 2.6

Hur man skapar ett test i Test och quiz i Mondo 2.6 Hur man skapar ett test i Test ch quiz i Mnd 2.6 Snabbstart Under Test ch quiz, namnge ditt test under fältet Namn ch klicka senare på Skapa. Börja sedan med att gå igenm inställningarna, för att kmma

Läs mer

Mappar och filer för webbsidor

Mappar och filer för webbsidor Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar

Läs mer

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: Utan schemasystem, manuellt schema i SchlSft Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta

Läs mer

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011 Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man

Läs mer

En bortsprungen katt

En bortsprungen katt Nivå 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. En bortsprungen katt

Läs mer

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

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. 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

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

CAMPINGHANDBOKEN för campinggästen

CAMPINGHANDBOKEN för campinggästen CAMPINGHANDBOKEN för campinggästen Versin 4.2 ANVÄNDARMANUAL VIKTIG INFORMATION FÖR DITT EL-UTTAG Campingplatsnummer: Persnlig kd: Internet bkning: https://www.webel-nline.se Telefn Sverige 075-44 88 000

Läs mer

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång

Läs mer

En stiligare portal Laboration 3

En stiligare portal Laboration 3 Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt

Läs mer

SchoolSoft 2015-05-05

SchoolSoft 2015-05-05 SchlSft 2015-05-05 Arkivering Nytt läsår Schemasystem: NvaSchem (utan elever) Nedan följer en lista på vad sm bör göras i SchlSft mellan två läsår. Berende på sklans sätt att arbeta kan det finnas mindre

Läs mer

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

Skeleton plane & Responsiv webbdesign med CSS

Skeleton plane & Responsiv webbdesign med CSS 1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor

Läs mer

GEOSECMA for ArcGIS GSD datastruktur och import i en SDE geodatabas

GEOSECMA for ArcGIS GSD datastruktur och import i en SDE geodatabas GEOSECMA fr ArcGIS GSD datastruktur ch imprt i en SDE gedatabas ÖVERSIKT Det här dkumentet ger imprtinstruktiner ch en rekmmenderad struktur för Gegrafiska Sverige Data (GSD) i en SDE gedatabas sm ska

Läs mer

Lathund för Sundbybergs IK orienteringssektionen Att arbeta med hemsidan

Lathund för Sundbybergs IK orienteringssektionen Att arbeta med hemsidan Lathund för Sundbybergs IK rienteringssektinen Att arbeta med hemsidan Webbadress för hemsidan http://www.idrttnline.se/sundbyberg/sundbybergsik-rientering Inlggning sker genm att klicka på hänglåssymblen

Läs mer

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan

Läs mer

MOTORVÄRMAR HANDBOKEN manual för användare

MOTORVÄRMAR HANDBOKEN manual för användare MOTORVÄRMAR HANDBOKEN manual för användare Versin 4.3 ANVÄNDARMANUAL VIKTIG INFORMATION FÖR DIN PARKERINGSPLATS Platsnummer: Persnlig kd: 1234 *(OBS - se undantag) https://www.webel-nline.se Telefn Sverige

Läs mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer

F07 Stilmallar Dagens agenda

F07 Stilmallar Dagens agenda F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar

Läs mer

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande Hjälpmedel: Kurslitteratur, utdelade papper, webbdesignskolan, samt World Wide Web. Tillåtna program att skriva kod i är Anteckningar eller

Läs mer

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

Läs mer

ShoreTel Communicator Överblick

ShoreTel Communicator Överblick ShreTel Cmmunicatr Överblick ShreTel Cmmunicatr är det enklaste sättet att kmmunicera effektivt med dina kllegr ch affärspartners. Oavsett m du är nrmal användare, telefnist eller samtalsagent i ett Cntact

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Eldy Användarhandbo Table of Contents

Eldy Användarhandbo Table of Contents Eldy Användarhandb Table f Cntents Table f Cntents... 2 1. Systemkrav:... 3 2. Hur du installerar Eldy på din PC... 3 2.1 INSTALLATION SCREENSHOTS... 4 2.2 Installatin... 4 3. Börja använda ELDY... 5 4.

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...

Läs mer

Även om man placerar information kolumnvis så kommer all information att visas radvis i PDF-utskriften.

Även om man placerar information kolumnvis så kommer all information att visas radvis i PDF-utskriften. Lathund PDF-modulen Detta är en lathund för hur man ställer in och använder PDF-modulen. Med hjälp av PDF-utskrift kan du enkelt skapa PDF-utskrifter av webbsidor. Denna modul omvandlar text, bild och

Läs mer

Examinationsregler i medieteknik

Examinationsregler i medieteknik Dnr: DFM 2012/101 Regeldkument Examinatinsregler i medieteknik Beslutat av Ämneskllegiet i medieteknik 2012-06-19 Gäller från 2012-08-27 Innehåll Examinatinsregler i medieteknik 3 1. Vanliga examinatinsfrmer

Läs mer

1. För att komma till inloggningen skriver du in följande adress i din webbläsare: http://skolpost.varnamo.se

1. För att komma till inloggningen skriver du in följande adress i din webbläsare: http://skolpost.varnamo.se 1. För att komma till inloggningen skriver du in följande adress i din webbläsare: http://skolpost.varnamo.se 2. När du är framme vid själva inloggningen, fönstret nedan, där du skriver in ditt användarnamn

Läs mer

Cisco WebEx: Standardprogramfix den [[DATE]]

Cisco WebEx: Standardprogramfix den [[DATE]] ÄMNE: Cisc WebEx: Standardprgramfix tillämpas den [[DATE]] för [[WEBEXURL]] Cisc WebEx: Standardprgramfix den [[DATE]] Cisc WebEx skickar ut det här meddelandet till utvalda affärskntakter på https://[[webexurl]]

Läs mer

Gör en modern släktbok för CD eller webben

Gör en modern släktbok för CD eller webben Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar

Läs mer

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015 . HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17

Läs mer

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size=6> CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning

Läs mer

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; } /*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:

Läs mer

ANVÄNDARMANUAL. Version 2.3.3. Euromed Networks AB. Årstaängsvägen 11, 117 43 Stockholm. Tel. 08-54 58 99 99. (Juni 2006)

ANVÄNDARMANUAL. Version 2.3.3. Euromed Networks AB. Årstaängsvägen 11, 117 43 Stockholm. Tel. 08-54 58 99 99. (Juni 2006) ANVÄNDARMANUAL Versin 2.3.3 (Juni 2006) Eurmed Netwrks AB. Årstaängsvägen 11, 117 43 Stckhlm. Tel. 08-54 58 99 99 Innehållsförteckning FÖRORD...2 ÅTERFÖRSÄLJARE...3 DIKTERING...3 DIKTERING...4 Diktatlista...

Läs mer

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

Läs mer

Anvisning Registreringsteknik

Anvisning Registreringsteknik Anvisning Registreringsteknik För att den digitala pennan ska registrera krrekt, följ nedan anvisning: 1 Krk = av/på-knapp Krken fungerar sm en av/på-knapp på den digitala pennan. För att pennan ska fungera

Läs mer

1 Paint. 1.1 Öppna Paint. 1.2 Rita linjer

1 Paint. 1.1 Öppna Paint. 1.2 Rita linjer 1 Paint Paint är en funktin i Windws 10 sm du kan använda för att göra teckningar på ett tmt mråde eller på befintliga bilder. Många av verktygen i Paint finns i menyfliksmrådet, sm finns i den övre delen

Läs mer

Innehållsförteckning. Adobe GoLive CS

Innehållsförteckning. Adobe GoLive CS Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra

Läs mer

Lathund PDF-utskrift. Senselogic AB Version 2.3

Lathund PDF-utskrift. Senselogic AB Version 2.3 Lathund PDF-utskrift Senselogic AB Version 2.3 Innehållsförteckning 1.1 PDF -utskrift... 3 1.1.1 Användningsområde... 3 1.1.2 Inställningar för PDF... 3 Fliken Allmänt... 3 Fliken Kapitel... 3 Fliken Formatmallar...

Läs mer

Manual för att importera referenser till DiVA

Manual för att importera referenser till DiVA Manual för att imprtera referenser till DiVA Du kan imprtera referenser från PubMed, Web f Science, Libris ch referenshanteringsprgrammet EndNte. Även referenser i frmaten XML, EndNte XML, Endnte Referer

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Nyheter och ändringar i Adela Grundskola 4.2.0

Nyheter och ändringar i Adela Grundskola 4.2.0 Nyheter ch ändringar i Adela Grundskla 4.2.0 Publicerad 2012-05-03 Tersus Sklsystem AB Lilla Nygatan 2, 411 08 Götebrg Tel: 031-85 70 50 Nya klumner Det har tillkmmit ett antal nya klumner i resultatfönstret

Läs mer

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. 1 Grafisk Webbprofil http://users.du.se/~v10evawa/inlamningsuppgift_3/valkommen.html Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. Författare: Eva Wallin

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

Plus500CY Ltd. Säkerhets- och cookie policy

Plus500CY Ltd. Säkerhets- och cookie policy Plus500CY Ltd. Säkerhets- ch ckie plicy Säkerhets- ch Ckie Plicy Denna webbplats drivs av Plus500CY Ltd. ("vi, ss eller vår"). Det är vår plicy att respektera infrmatinssekretess ch enskildas integritet.

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

Läs mer

Dokument i klassens aktivitet

Dokument i klassens aktivitet Dokument i klassens aktivitet I min mall har jag ju tagit bort Aktivitetens dokument, så att eleverna inte har tillgång till dem. Min tanke med detta är att de lärare som arbetar i klassen då får en plats

Läs mer

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap

Läs mer

Starta med MS Excel Programfönster och arbetsyta

Starta med MS Excel Programfönster och arbetsyta Starta med kalkylprgrammet Starta med MS Excel Prgramfönster ch arbetsyta Systemmeny Menyrad Verktygsfältet Namnruta Funktinsguiden Redigeringsfält/frmelfält Rad- ch klumnrubrik Celler Bk Kalkylblad Systemmeny

Läs mer

Frågor och svar Gränssnittsdesign/Webbutveckling

Frågor och svar Gränssnittsdesign/Webbutveckling Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96

Läs mer

Laboration med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

Designprocessdagbok. Grupp 3; Maria Törnkvist, Ida Gustafsson, Mikael Karlsson, Jonas Lind, Hanne Flink- Sundin.

Designprocessdagbok. Grupp 3; Maria Törnkvist, Ida Gustafsson, Mikael Karlsson, Jonas Lind, Hanne Flink- Sundin. Designprcessdagbk. Grupp 3; Maria Törnkvist, Ida Gustafssn, Mikael Karlssn, Jnas Lind, Hanne Flink- Sundin. Krt intrduktin Under hela vår designprcess har vi fört dagbk över våra möten, dagbken har vi

Läs mer

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8 Laboration 2 CSS del 1 1 av 8 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva

Läs mer

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

Läs mer

ARKIV DIGITAL - att släktforska i färg

ARKIV DIGITAL - att släktforska i färg ARKIV DIGITAL - att släktfrska i färg Av släktfrskare För släktfrskare Arkiv Digital har tillkmmit för att förverkliga en släktfrskares dröm m att kunna läsa arkivmaterial på sin datr, sm m han hade bken

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer