Visa och dölja element med JavaScript

Storlek: px
Starta visningen från sidan:

Download "Visa och dölja element med JavaScript"

Transkript

1 Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik Rune Körnefors

2 Visa och dölja element Förändra elementets sdl för display eller visibility display="block" display="hidden" visibility="visible" visibility="hidden" 2

3 Visa/dölja e8 element med display HTML- och CSS- kod: <div id="b"> </div> #b {display:none;} Visas som en del av sidans innehåll JavaScript- kod: Referens: var element = document.getelementbyid("b"); Visa: element.style.display = "block"; (eller element.style.display = "inline"; eller något annat, beroende på hur taggen ska visas.) Dölj: element.style.display = "none"; 3

4 Exempel: Expanderbar meny En innehållsförteckning (meny) har eb antal undermenyer som kan expanderas I det första exemplet visas eller döljs undermenyn genom ab klicka på dess rubrik. Alla undermenyer kan visas samddigt. I det andra exemplet visas undermenyn genom ab klicka på dess rubrik. Den kan dock inte döljas igen. Istället döljs den, då man klickar på rubriken för en annan undermeny. Alltså kan endast en undermeny åt gången visas. ex3-1" ex3-2" I det tredje exemplet kombineras de båda föregående. Endast en meny åt gången kan visas, men det går också ab dölja den meny som visas genom ab klicka på dess rubrik. ex3-3" HTML- och CSS- kod är densamma i alla tre fallen. Det enda som skiljer exemplen åt är funkdonen showhidemenu. 4

5 Exempel: Menyn med annan layout! Samma föregående exempel, fast med en annan layout HTML- och JavaScript- koden är exakt densamma som i ex3-3 Endast Dllägg av några sdlar i sdlmallen, för ab ändra sdl för menyerna ex4" 5

6 Visa/dölja e8 element med visibility Med reladv posidonering Visas som en del av sidans innehåll HTML- och CSS- kod: <div id="b"> </div> #b {posidon:reladve; visibility:hidden;} JavaScript: Referens: var element = document.getelementbyid("b"); Visa: element.style.visibility = "visible"; Dölj: element.style. visibility = "hidden"; 6

7 Exempel: Meny med visibility Samma kod som i exempel 4, med den skillnaden ab visibility används istället för display. ex5" Ändringar från display Dll visibility både i JavaScript- koden och CSS- koden 7

8 Visa/dölja e8 element med visibility Med absolut posidonering Visas i eb lager framför övrigt innehåll på sidan HTML- kod: <div id="b"> </div> #b {posidon:absolute; visibility:hidden;} JavaScript: Referens: var element = document.getelementbyid("b"); Visa: element.style.visibility = "visible"; Dölj: element.style. visibility = "hidden"; 8

9 Visa/dölja e8 element med visibility Med absolut posidonering inom eb block HTML- och CSS- kod: <div id= a > <div id= b > < > </div> </div> JavaScript: Referens: var element = document.getelementbyid( b ); Visa: element.style.visibility = visible"; Dölj: element.style.visibility = hidden"; #a {posidon:reladve;} #b {posidon:absolute; visibility:hidden;} PosiDoneras inom det omgivande blocket 9

10 Exempel: Meny i e8 lager Menyn i föregående exempel utökas med posidonering Steg 1 HTML- och JavaScript- koden är exakt densamma som Ddigare CSS- koden förändras på följande säb: li- taggen som omger undermenyn får reladv posidonering den inre menyn (ul) får absolut posidonering ex6-1" Steg 2 händelsehanterarna ändrade, så ab menyerna dyker upp på onmouseover och försvinner på onmouseout funkdonen är uppdelad i varsin funkdon för händelserna ex6-2" 10

11 Exempel: Popupmenyer I exempel 6-2 finns eb problem. Menyerna försvinner då man för ner markören över dem. Deba är här fixat, genom ab flyba in händelsehanterarna Dll li- taggen. Eb class- abribut i li- taggarna, för ab enkelt komma åt dem med getelementsbyclassname i JavaScript- koden. Ta bort parentnode i referensen Dll undermenyn. ex7" 11

12 Exempel: Ändring av z- index Olika boxar med informadon ligger delvis överlappande varandra. posidon:absolute och förskjuten ler- koordinat Man kan bläddra igenom boxarna, så ab man ändrar vilken som ska ligga längst fram ändra z- index ex8" 12

13 display eller visibility? display visas inbäddad i dokumentets presentadon värde på display bestämmer hur det bäddas in block, eb eget stycke inline, en del av raden/ stycket döljs med värdet none övrigt innehåll trycks ihop visibility och posidon:absolute visas i eb lager framför övrigt innehåll kan posidoneras med koordinater flera lager kan förekomma z- index bestämmer lagerskikt (z- axel) ju högre värde på z- index, desto längre fram döljs med värdet hidden övrigt innehåll påverkas ej 13

Ö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

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

Loopar och objekt i JavaScript

Loopar och objekt i JavaScript Föreläsning i webbdesign Loopar och objekt i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Programflöde Vanligt sekvendellt flöde InstrukDonerna ugörs en eher en i den

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

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

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

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

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

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

JavaScript del 9 Dynamik och animeringar

JavaScript del 9 Dynamik och animeringar JavaScript del 9 Dynamik och animeringar Det sista vi ska titta på när det kommer till att lära oss JavaScript är hur vi skapar dynamik på vår webbplats, ge användarna chansen att påverka vad som händer

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

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

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

JavaScript. DOM Scripting

JavaScript. DOM Scripting JavaScript DOM Scripting Vad är Document object Model (DOM)? En standardiserad modell där man ser en webbsida och dess innehåll som objekt document.getelementsbytagname( p ); document.getelementbyid( mittid

Läs mer

Labbrapport: HTML och CSS

Labbrapport: HTML och CSS Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):

Läs mer

Länkar och navigering

Länkar och navigering Föreläsning i webbdesign Länkar och navigering Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Hypertext Hyper [grekiska] över Hypertext Går över textens sekvengella flöde Referens

Läs mer

Introduk+on +ll JavaScript if- sats, funk+oner, bilder

Introduk+on +ll JavaScript if- sats, funk+oner, bilder Föreläsning i webbdesign Introduk+on +ll JavaScript if- sats, funk+oner, bilder Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se if- sats I en if- sats kan man kontrollera ee villkor

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

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se

Föreläsning i webbdesign. Interak*onsdesign. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se Föreläsning i webbdesign Interak*onsdesign Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Från föreläsning F1 Användarcentrerad design "Take the user into account every step of

Läs mer

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg

layout-tagg

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

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara: Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter

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

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

Widgetguiden Vad är Publits widgetshop?

Widgetguiden Vad är Publits widgetshop? Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för

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

www.grade.com LUVIT LMS Quick Guide LUVIT Composer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

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

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Labora&on 1 Variabler och beräkningar övningar/uppgi9er Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

F r a m e s - r a m a r

F r a m e s - r a m a r skriv ut» F r a m e s - r a m a r Exempel på framesets» Ramkanter (borders)» Färg på ramkanter» Bläddringslister (scrolling)» Marginaler» Länkning i ramar» Uppdatera flera ramar samtidigt» IFRAME - inbäddad

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

Ö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

TDDD52 CSS. Färger. Färger 1/3/13

TDDD52 CSS. Färger. Färger 1/3/13 Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis

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

Textsträngar och formulär i JavaScript

Textsträngar och formulär i JavaScript Föreläsning i webbdesign Textsträngar och formulär i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Antag a4 variabeln s innehåller följande text s = "pics/small/bridge.jpg"

Läs mer

E07 "Greased Lightning"

E07 Greased Lightning E07 "Greased Lightning" Föreläsning 7, HT2014 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer

Läs mer

En introduktion till Dynamisk HTML (DHTML)

En introduktion till Dynamisk HTML (DHTML) En introduktion till Dynamisk HTML (DHTML)? 2002 1 DHTML en introduktion...3 Vad är DHTML?...3 Vad behöver du för att lära dig DHTML?...3 Document Object Model i Internet Explorer 4...4 Document Object

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

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

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende: Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både

Läs mer

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se Adobe Dreamweaver CS3 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 2 Arbeta i Dreamweaver... 2 Fönster... 3 Statusfältet... 4 Menyer...

Läs mer

AIF:arens guide till cyberrymden

AIF:arens guide till cyberrymden AIF:arens guide till cyberrymden www.andrarumsif.se Reviderad 2008-04-14 1 Välkommen till www.andrarumsif.se:s användarmanual! Denna manual ska inte ses som en fullständig manual till hemsidan utan snarare

Läs mer

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

Läs mer

Användarhandledning. Svenska Turistföreningen. Wordmallar Office 2010 2013-03-01

Användarhandledning. Svenska Turistföreningen. Wordmallar Office 2010 2013-03-01 Användarhandledning Svenska Turistföreningen Wordmallar Office 2010 2013-03-01 Inledning Nedan följer en kort instruktion om hur man går till väga för att använda STFs Wordmallar för Office 2010. Handledning

Läs mer

LUVIT LMS Quick Guide LUVIT Composer

LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

Läs mer

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI Återanvända

Läs mer

Prototyper och användartest

Prototyper och användartest Föreläsning i webbdesign Prototyper och användartest Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Prototyp för en webbplats! Utkast eller enkel variant av webbplatsen" Syfte"

Läs mer

6 LÄGG TILL INTERAKTIVITET

6 LÄGG TILL INTERAKTIVITET 6 LÄGG TILL INTERAKTIVITET I den här lektionen, lägger du till Webb 2.0-funktionalitet till dina webbsidor genom att göra följande: Använda Dreamweaver-beteenden Tillämpa ett beteende med hjälp av Spry-effekter

Läs mer

Visuell design Bilder & färger

Visuell design Bilder & färger 1ME321 Webbteknik 1 Lek0on 8 Visuell design Bilder & färger Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 43 Läsanvisningar UpphovsräPslagen Kort sammanfapning

Läs mer

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett relaterat ämne till ett annat. En länk från en sida

Läs mer

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbutveckling Laboration 1: HTML5 och CSS3. Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan

Läs mer

Business Online Generellt

Business Online Generellt Motsvarande vägledningar för vänstermeny hittar du längre ner i dokumentet Menyn Du kan navigera i Business Online på flera olika sätt. Ingången till de olika funktionerna hittar du via toppmenyn. Genom

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

Att skriva rapport. Innehåll

Att skriva rapport. Innehåll Att skriva rapport Innehåll 1 Skapa ny rapport... 2 2 Börja skriva på sidan 7 (udda sida)... 2 3 Formatmallar... 2 4 Egen flik... 3 5 Innehållsförteckning... 3 Uppdatera innehållsförteckningen... 4 6 Titelsidor...

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

PRO Järbo Navigeringsguide

PRO Järbo Navigeringsguide PRO Järbo Navigeringsguide Startsida PRO Järbo Fliken Start i HUVUDMENYN är markerat. Vi befinner oss på webbplatsens STARTSIDA. Nyhetskarusellen - webbplatsens löpsedlar. Växla genom att klicka på vänstra

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering

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

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

Läs mer

Lathund. Skriva artiklar på http://kalmar.regionbiblioteket.se 2014-12-04

Lathund. Skriva artiklar på http://kalmar.regionbiblioteket.se 2014-12-04 2014-12-04 Lathund Skriva artiklar på http://kalmar.regionbiblioteket.se Introduktion Denna lathund beskriver hur du ska göra för att skriva artiklar på regionbibliotekets egna sidor i den gemensamma

Läs mer

Business Online Generellt

Business Online Generellt Menyn Du kan navigera i Business Online på flera olika sätt. Ingången till de olika funktionerna hittar du via toppmenyn. Genom att klicka på menyn fälls de tillhörande undermenyerna ut. Du kan bara se

Läs mer

JAVASCRIPT. Beteende

JAVASCRIPT. Beteende JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren

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

Excel kortkommando. Infoga rad, kolumn eller cell Ta bort rad, kolumn eller cell

Excel kortkommando. Infoga rad, kolumn eller cell Ta bort rad, kolumn eller cell Excel kortkommando Kommando Allmänt F10 Ctrl + B eller Skift + F5 Ctrl + G Ctrl + H Ctrl + i F1 Ctrl + N Ctrl + O Ctrl + P Ctrl + S F12 eller Alt + F2 Ctrl + W eller Alt + F4 Skift + F1 Skift + F10 Ctrl

Läs mer

när du arbetar med uppsatser och andra långa texter

när du arbetar med uppsatser och andra långa texter Tricks i Word när du arbetar med uppsatser och andra långa texter Åsa Kronkvist Högskolan Kristianstad Våren 2007 Innehåll Dags att skriva uppsats?... 3 Att tänka på innan du börjar... 3 Spara klokt...

Läs mer

Att använda laget.se

Att använda laget.se 2012 Att använda laget.se för ungdomsledare i MSSK Dokumentet är framtaget för att hjälpa till att förenkla användningen av lagens webbsidor. Har du förslag på ändringar eller ser felaktigheter kan du

Läs mer

Manual för Juseks aktivitetsadministrationssystem

Manual för Juseks aktivitetsadministrationssystem Manual för Juseks aktivitetsadministrationssystem ett system baserat på Softadmin från Multisoft Komma åt och logga in i aktivitetssystemets admindel Tanken är att du skall kunna komma åt systemet på samma

Läs mer

Word 2003. bengt hedlund

Word 2003. bengt hedlund Word 2003 bengt hedlund Det här dokumentet är tänkt underlätta för Dig när Du arbetar med Word. I kursen Datagrund, när Du skriver en rapport i någon annan kurs, eller i varje sammanhang när Du vill använda

Läs mer

Övningar i CSS för anpassning till olika enheter

Övningar i CSS för anpassning till olika enheter Ö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

Läs mer

Webbdesign Process till produkt

Webbdesign Process till produkt Webbdesign Process till produkt Umeå Universitet Mediaproduktion för www II 7,5hp Isak Madoun Introduktion; VÅR-KOKBOK Är en kokbok som i sin första upplgaga kom ut på 50-talet. Boken innehåller mer av

Läs mer

Användarhandbok. version 1.15.8. sida 1 av 15

Användarhandbok. version 1.15.8. sida 1 av 15 Användarhandbok version 1.15.8 sida 1 av 15 Innehållsförteckning Introduktion... 4 Gränssnitt... 4 Inloggning... 5 Användarnamn och lösenord... 5 Kod... 5 Startsida... 6 Menyer... 6 Systembild... 7 Sidobjekt...

Läs mer

Skapa en mall för inlämning av skriftliga uppgifter. med hjälp av Open Office Writer

Skapa en mall för inlämning av skriftliga uppgifter. med hjälp av Open Office Writer Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Open Office Writer Enkel guide till ordbehandling med Open Office www.openoffice.org Medieteknik Södertörns högskola 31 januari 2011 uppdaterad

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

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

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

Lathund - Redaktörer

Lathund - Redaktörer Lathund - Redaktörer 1. Logga in sid 3 2. Ladda upp/publicera dokument...sid 4-6 2.1 Att lägga till ett dokument...sid 5 2.2 Var publiceras mitt dokument...sid 6 3. Jobba i befintligt dokument...sid 7

Läs mer

Användarhandledning DORUM

Användarhandledning DORUM Demografiska databasen Sid 1 (19) Användarhandledning DORUM Datum: 2012-09-19 Version: 1.0 Projektledare: Carin Hedlund, Mattias Sandström Innehållsförteckning Åtkomst 3 Ej inloggad 3 Inloggning 7 Dorums

Läs mer

Så här funkar Föreningsliv

Så här funkar Föreningsliv Så här funkar Föreningsliv Logga in Logga in på den adress du fått skickat till dig via mail. Använd det lösenord och användarnamn som du tilldelats. Kom alltid ihåg att logga ut när du skrivit färdigt,

Läs mer

Lathund för att skapa dokument i redigeraren

Lathund för att skapa dokument i redigeraren Lathund för att skapa dokument i redigeraren Denna guide beskriver hur man skapar ett dokument i redigeraren. Redigeraren är Fronters inbyggda textredigerare. Man kan även låta andra skriva och kommentera

Läs mer

Innehåll. Inloggningen. Kort manual för dig som ska jobba med medarbetare som publicerare. Den innehåller lite

Innehåll. Inloggningen. Kort manual för dig som ska jobba med medarbetare som publicerare. Den innehåller lite Innehåll Inloggningen Redigeringsfönstret Egenskaper Redigering av standardsida. Skapa ett nytt block Bildblock Länklista Lnu-Play Lägga till kontaktperson Personallistor Engelsk version. Fakta tips mm

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

Ladda hem administratörs klient För att mata in resultaten i systemet används ett speciellt administratörs program. Det finns att ladda hem från:

Ladda hem administratörs klient För att mata in resultaten i systemet används ett speciellt administratörs program. Det finns att ladda hem från: Sida 1 av 8 Kort manual för tävlingsledare och administratörer inmatning av resultat. Nedan följer en väldigt kortfattad manual/instruktion avsedd för de som skall installera och använda administratörs/rapporterings

Läs mer

LATHUND TILL GOOGLE SITES

LATHUND TILL GOOGLE SITES LATHUND TILL GOOGLE SITES 2012 Mörbyskolan Denna lathund går igenom hur du skapar, redigerar och kan använda Google Sites i undervisningen Rev. 1.0a Innehållsförteckning 1. VAD ÄR GOOGLE SITES? ES?.........2

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

Laboration 1. Webbprodution Struktur & innehåll HT2015

Laboration 1. Webbprodution Struktur & innehåll HT2015 Laboration 1 Webbprodution Inledning Denna inledande laboration syftar i mångt och mycket till att du ska känna dig bekväm med den laborationsmiljö ni blivit introducerat inför. De inledande uppgifterna

Läs mer

ibooks Author Komma igång

ibooks Author Komma igång ibooks Author Komma igång Välkommen till ibooks Author, ett lätt sätt att skapa snygga och interaktiva Multi-Touch-böcker för ipad och Mac. Börja med proffsiga Apple-designade mallar med mängder av eleganta

Läs mer

SPF/MiRiaM Manual avancerad sökning

SPF/MiRiaM Manual avancerad sökning SPF/MiRiaM Manual avancerad sökning 2016-09-15 Skapat av: Fältström Ingrid 1 (31) Innehållsförteckning 1. Inledning... 3 1.1 Begreppsförklaringar... 3 1.1.1 Kolumn... 3 1.1.2 Lista... 3 1.1.3 Posttyp...

Läs mer

Webbprogrammering 725G54

Webbprogrammering 725G54 Webbprogrammering 725G54 Hej! Jakob Bandelin, gästadjunkt jakob.bandelin@liu.se Interaktionsdesign, webbdesign, apputveckling Agenda Kursmål och -upplägg HTML Teckenkodning Validering Lab 1. Kursmål exemplifiera

Läs mer

Snabbguide till GlobalTwitcher (Juni 2012)

Snabbguide till GlobalTwitcher (Juni 2012) Snabbguide till GlobalTwitcher (Juni 2012) Denna snabbguide är avsedd att hjälpa nya medlemmer att komma igång med huvudfunktionerna på GlobalTwitcher (GT). Siten innehåller dock ett stort antal funktioner

Läs mer

4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell.

4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell. Lathund för Microsoft Excel 1 2 9 4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell. Innehåll Autofyll Celler Diagram Ändra diagramtyp

Läs mer

Att bygga enkla webbsidor

Att bygga enkla webbsidor Nivå 1 Att bygga enkla webbsidor 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/18cplpy to find out what

Läs mer

GEKAB Marking & Sign System - genvägen till en effektiv märkning

GEKAB Marking & Sign System - genvägen till en effektiv märkning GEKAB Marking & Sign System - genvägen till en effektiv märkning www.gekab.se INNEHÅLL LOGGA IN SYSTEMET SKAPA SKYLTAR 5 - SKAPA NY SKYLT 6 - IMPORTERA FRÅN EXCEL 7 - LISTAN 8 SKAPA MÄRKE 9 - IMPORTERA

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor http://w3.msi.vxu.se/multimedia Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor Rune Körnefors Innehåll Variabler i JavaScript

Läs mer

Webbteknik för ingenjörer

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

Läs mer

Kom igång och redigera din hemsida!

Kom igång och redigera din hemsida! Kom igång och redigera din hemsida Smelink WEB l Storgatan 14 l 352 31 Växjö l support@smelink.se l www.smelink.se Senast uppdaterad: 120918 Del 1 Logga in Välkommen att ta del av vårt uppdateringsverktyg,

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

Användarmanual WebNailer. 19 januari 2004

Användarmanual WebNailer. 19 januari 2004 Användarmanual WebNailer Tobias Holgers Mattias Castegren 19 januari 2004 1 Innehåll 1 Inledning 3 1.1 Definitionerochförkortningar... 3 2 WebNailer 4 2.1 Knapprad... 4 2.1.1 Gemensamma... 4 2.1.1.1 Webbläsare...

Läs mer

729G04 PYTHON 6 JODY FOO. Department of Computer and Information Science (IDA) Linköping University, Sweden

729G04 PYTHON 6 JODY FOO. Department of Computer and Information Science (IDA) Linköping University, Sweden 729G04 PYTHON 6 JODY FOO Department of Computer and Information Science (IDA) Linköping University, Sweden Dagens föreläsning Nya verktyg IPython Texteditorer Ny datatyp Dictionary Abstraktion Felhantering

Läs mer

Nätet. Uppgiften. Nivå

Nätet. Uppgiften. Nivå Nivå 1 Nätet 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. Uppgiften Har

Läs mer