Vägen till en lyckad responsiv webbdesign.

Storlek: px
Starta visningen från sidan:

Download "Vägen till en lyckad responsiv webbdesign."

Transkript

1 Vägen till en lyckad responsiv webbdesign. Tänk mobilt först! Utgå ALLTID från den mista skärmen och jobba dig uppåt. Man brukar räkna med att 320px är i minsta laget idag. Korrekt ViewPort är mycket viktig, en sida kan annars bli konstig i vissa webbläsare. Skippa tabeller! Dessa fungerar dåligt eller inte alls med responsivitet, använd div-boxar istället. Försök att använda relativa mått, procent (%) fungerar nästan alltid. Dölj det onödiga med: display: none; och trolla fram det med MediaQuery när du behöver eller lägg det i en meny. Bilder kan du också dölja med: display: none; och ladda med jquery när det behövs. Separat css-fil eller i huvudet eller formatera direkt i koden? Sidan laddar snabbast med separat fil, sen i huvudet och sist direkt i koden. Ska du köra med html5 så bör du veta att vissa koder inte gäller längre från 4.01 & har blivit ersatta. Det kan därför vara klokast att ha CSS i separat fil. Bilder är lite speciella, i synnerhet om man ska ha bakgrundsbilder och dessutom täcka hela sidan (mera om bilder längre fram). Hemsidor över huvud taget ska ha korrekt grammatik men det räcker inte, de ska vara snyggt uppställda rent linjärt också. Planera, planera och planera! Det är ofta viktigare att med gammal hederlig penna och papper rita upp sidor och kopplingar mellan länkar än att lägga tid på att googla fram finesser. Krångla inte till det i onödan. En enkel sida kan också vara väldigt snygg om man gör rätt från början. (det finns gratis teman som är otroligt vackra och har finesser) för den som vill. Ha kul när du programmerar. Att inbilla sig att vissa saker är möjliga eller omöjliga bygger oftast på dålig research från första början. Kör du fast så lägg ner programmeringen ett tag och gör något annat en stund. Nu går vi in på djupet! MediaQuery kan vara nödvändigt att ta till när relativa mått inte hjälper och designen faller ihop och börjar överlappa andra saker. Hur ser det ut? Min variant ser ut så här, och fungerar till det mesta.

2 .exempel { font-family: Arial, 'sans serif', Serif; font-size: 180%; font-weight: bold; text-align: center; color: (min-width: 769px) and (max-width: 1024px) {.exempel { font-size: (min-width: 481px) and (max-width: 768px) {.exempel { font-size: (min-width: 321px) and (max-width: 480px) {.exempel { font-size: (max-width: 320px) {.exempel { font-size: 100%; Här anropar vi den påhittade klassen exempel och minskar dess textstorlek med 20% per brytpunkt. All annan formatering låter vi vara. Detta betyder att vi får 4 brytpunkter förutom originaltextens storlek på 180%. Det är på det här sättet man bygger upp responsiva hemsidor. Vissa menar att man ska anpassa brytpunkterna efter sin egen design och inte efter de mått som olika mobiler & surfplattor redan har. Detta är en smaksak, jag hävdar att man ska anpassa designen efter fasta mått som redan finns. Anta att vi bygger en meny med fyra länkar som vi centrerar, sen när problem börjar uppstå så letar vi upp en brytpunkt som passar. Om då denna brytpunkt ligger mellan 481px & 768px någonstans runt 667px så kan det bli problem på ANDRA plattor och mobiler, än det test du gör på din dator. Marginaler kan man också använda för att göra så det blir följsammare. Detta behöver man sällan sätta in i MediaQuery. Man kan göra så här:.exempel { margin-left: 3%; margin-right: 9%; I exemplet ovan så täcker vi sidan med 88% text på brädden. 3% + 9% = 12%, 12% - 100% = 88%. Det man bör tänka på är proportionalitetsprincipen, dvs något förskjutet till vänster, typ ett 46/54 förhållande, ungefär som det vertikala gula fältet i korset på en svensk flagga, det sitter inte absolut centrerat. Detta kan man använda när det passar.

3 Hur gör man med separata CSS-Filer? Inte så svårt som du tror. Man sätter in en kod i sidans huvud mellan taggarna: <head> <link href=''index.css'' rel=''stylesheet'' type=''text/css''> // andra koder, meta osv. </head> Sedan gör du en fil du döper till index.css och där behöver du ENBART skriva formatet rätt upp och ner: body { background-color: #006400; color: #FFFFFF;.exempel { //koder // #exempel { // koder // Man behöver alltså INTE sätta in style-taggar som man gör när man vill ha CSS i dokumenthuvudet. Då sätter man ut style så här: <head> <style> body { background-color: #006400; color: #FFFFFF;.exempel { //koder // #exempel { // koder // </style> </head> Detta gör att sidan blir lite långsammare än om du kör med separat fil, men med bredband så lär ingen märka så stor skillnad om dokumentstorleken inte är allt för massiv, det är då bättre att ha just en separat fil. Det finns en bestämmande-lag också, det är så att format direkt i sidans html-kod bestämmer sedan i huvudet & sist i separat fil. Med bestämma i det här fallet har med vilken modell som styr, det har inget med laddtider på sidan att göra. 1. Direkt i koden <div style=''font-family: Arial;'' ''// formatering// ''> (Vilken laddar sidan lite trögare.) 2. I huvudet. (Vilken laddar sidan lite snabbare.) <head> <style>.exempel { font-family: Arial; </style> </head> 3. I separat fil vi gått igenom redan, vilken laddar sidan snabbast. Det finns flera fördelar med att ha separata CSS-mallar, de styr, inte användaren, han/hon får hålla sig till det DU bestämmer. Dessutom så behöver du bara ha EN mall till flera sidor även om dessa ligger på andra domäner. Man skriver då ut hela adressen: <link href=''http://www.user.domän/index.css'' rel=''stylesheet'' type=''text/css''> Då blir alltså formatet som någon har på sin sida fjärrstyrt från mallen DU har på ditt webhotell, så det finns för... & nackdelar.

4 Bilder Bilder är lite hopplösa som du märker när du programmerar. Trixet är som så mycket annat att köra med procent OCH blanda det med pixlar samt lite andra finesser. En av finesserna är min-width & max-width. Använder man det rätt så har det sina fördelar. Html: <img src=''bild1.jpg'' class=''a01''> Css:.a01 { width: 325px; max-width: 75%; height: auto; På det viset så blir inte bilderna bredare än 75% men kan bli mindre, höjden är satt till auto vilket gör att bilder skalar proportionerligt dvs. höjden hakar på och anpassar sig, då får du inga cropps så att bilden klipps eller förvrängs. Tvärt om går också bra om du vill, men då kommer bilden att bete sig helt annorlunda. Html: <img src=''bild2.jpg'' class=''a02''> Css:.a02 { width: 325px; min-width: 50%; height: auto; Då kommer bilden att bli 50% STÖRRE men INTE mindre. Oftast så använder man bara max-width av förståeliga skäl då man oftast vill att en bild ska bli MINDRE för att passa på olika plattformar. Detta fungerar även på div-boxar då man vill att en box ska stanna i växten på brädden så man kan få den att flytta sig med flit dit man vill. Man kan på detta sätt stoppa ett objekt från att krympa för mycket. Vilket kan vara bra då man vill slippa fenomenet när man har 4 objekt. Man kan även använda sig av min-height & max-height för att få vissa finesser då man tycker att höjden ska bestämma.

5 Bakgrundsbilder. Dessa är nästan värst att hålla på med. Här får man acceptera att bilder croppas dvs. att vissa delar klipps. I det här fallet så ska man inte köra med procent & tänka 100% X 100% på både höjd & brädd eftersom en bild mycket sällan är en helt liksidig kvadrat, det blir då fel och vi får en bild som ser ut att ha en konstig gummisnodd i sig & stretchar. Det blir förvrängt! Ett av sätten är att köra med cover & center center osv. Html: <body> // behövs ingen klass, vi anropar body rakt av istället. Css: body { background-image: url(bilder/bgstor.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; // övriga format // OBSERVERA -??-background-size: cover; växlarna som är nödvändiga för att koden ska renderas rätt på de flesta förekommande webbläsarna samt att man ALLTID sätter standard-parametern längst ner, det är viktigt. Givna saker som div, span, p, img och body kan man anropa direkt, man behöver inte göra en klass för t. ex. body: <body class=''test''> +.test { color: red; för att få röd text. Man kör bara med <body> + body { color: red; Ett annat sätt är att göra en div-box med brädden 100% & höjden auto samt att lägga in bilden fixerat och bestämma att den också ska följa samma system. Här får du räkna med att bilden croppas dvs. klipps av. Html: <div class= b03 > <img src= bg2.jpg class= b04 > </div>

6 Css:.b03 { position: fixed; top: 0; left: 0; width: 100%; height: auto;.b04 { position: fixed; top: 0; left: 0; width: 100%; height: auto; Observera att du då kommer att få en bild som inte automatiskt skalar rätt på höjden, du är tvungen att jaga nedre högra hörnet på bilden med hörnet på sidan. Gör du sidan långsmal så kommer du alltså att få tomrum under bilden. Som du märker så är bilder lite bökiga att hålla på med. Detta beror på att bilder inte är helt kvadratiskt liksidiga, så icke heller en bildskärm. Detta hänger dock inte ihop fullt ut. Vissa bildskärmar är till sin proportion oftast bredare än de är höga. Vissa skärmar är 16:9 & vissa är 16:10 till sitt format osv. Detta gör det bökigt att anpassa bilder då bilder inte heller håller givna format & storlekar. Vissa fotograferar i vertikalt läge men ibland också i horisontellt läge. Det gör att det kan bli rätt hopplöst då man ska tvinga en bild som är tagen i porträtt-läge dvs. långsmal att synka ut på brädden som en landskaps bild gör per automatik. Den bilden kommer då att bli väldigt stor på höjden & vice versa. ViewPort ViewPort? Vad är det? Det är mycket viktigt för att en sida ska fungera rätt på olika plattformar. Här visar vi 2 st: <meta name=''viewport'' content=''width=device-width, initial-scale=1.0''> Den är vanligast & tillåter att användaren zoomar sidan. <meta name=''viewport'' content=''initial-scale=1.0, user-scalable=no''> Denna är också rätt vanlig men tillåter INTE att användaren zoomar sidan, den används då man vill lägga fokus på att sidan ska vara till för mobiler och surfplattor då man vill förhindra användaren att zooma sidan. Varning om ViewPort Du ska INTE använda ViewPort om sidan inte är responsiv. Fel ViewPort kan göra att en sida INTE ser lika ut på mobilen som den gör på datorn. Prova att ta bort den helt så märker du direkt om du ska använda den över huvud taget.

7 Vad är egentligen ViewPort? Svårt att förklara, men det handlar om att innehållet på sidan ska anpassa sig till storleken på skärmen. Det vanligaste är att ha skalan 1.0 då det fungerar bäst. Då man anger att något ska vara 200% så kommer det att bli 200% av ViewPorten som är 1.0. Innehållet kommer alltså att få rätt skala. Det är därför den är så viktig! Det finns ett sätt till att använda ViewPort och det är att göra det med CSS istället, i huvudet eller i separat fil är valfritt: { zoom: 1.0; width: { width: extend-to-zoom; zoom: 1.0; Detta har jag provat med varierande resultat, får man det att fungera på sin egen design så är det bra, men det verkar som att alla webbläsare inte tar emot detta, så denna får du prova dig fram med. På nästa sida börjar vi med JavaScript som vi använder tillsammans med biblioteket jquery. Det är sätt att styra funktioner snarare än format.

8 jquery (Nu går vi ännu djupare!) jquery är en samling javascript i en ända stor fil som heter.js på slutet. Med hjälp av jquery kan man göra saker som inte går med vanlig HTML eller CSS. Man kan få innehåll att försvinna helt eller dyka upp, man kan flytta innehåll till olika positioner (även z-index, att gömma bakom ett ovan-liggande lager) Man kan bland annat förladda bilder så de visas snabbare. Man får då använda sig av både CSS & jquery. HTML: <html> <head> <meta name=''viewport'' content=''width=device-width, initial-scale=1.0''> <link href=''index.css'' rel=''stylesheet'' type=''text/css''> <script src=''index.js'' type=''text/javascript''></script> <script src=''http://code.jquery.com/jquery min.js'' type=''text/javascript''></script> </head> <body> <p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p> <p> Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p> <br> <div class=''swap''> <a nohref=''#'' class=''b01''><img src=''bg1.jpg'' class=''a01''></a> <a nohref=''#'' class=''b02''><img src=''bg2.jpg'' class=''a01''></a> <a nohref=''#'' class=''b03''><img src=''bg3.jpg'' class=''a01''></a> <a nohref=''#'' class=''b04''><img src=''bg4.jpg'' class=''a01''></a> <!-- Large Pictures --> <a nohref=''#'' class=''c01''><img src=''large/bg1.jpg'' class=''a02''></a> <a nohref=''#'' class=''c02''><img src=''large/bg2.jpg'' class=''a02''></a> <a nohref=''#'' class=''c03''><img src=''large/bg3.jpg'' class=''a02''></a> <a nohref=''#'' class=''c04''><img src=''large/bg4.jpg'' class=''a02''></a> </div> </body> </html>

9 Vi antar nu att vi har 4 mindre bilder som laddas direkt när sidan visas men vid klick på någon av dessa bilder så ska ALLA mindre döljas, sedan så ska motsvarande stora bild visas OCH vice versa. Nu får vi ta till djärva knep! Som du ser så är länkarna lite speciella <a nohref= # etc. a nohef= # gör att sidan inte laddas om vilket är en klar fördel. Nackdelen är att muspekaren inte ändras, den blir inte en hand som pekar, men det går att ändra på, (vi visar det längre ner markerat med en sol ). CSS-FILEN:.swap { position: fixed; top: 0; left: 0; width: 100%; height: auto; text-align: center;. a01 { width: 325px; max-width: 75%; height: auto;. a02 { width: 1080px; max-width: 75%; height: auto; display: none; Okej, vackert så långt. Nu har vi en div-box för bilderna att röra sig i. Vi har också format på bilderna. Men som du ser så har vi inom klassen för de stora bilderna (.a02) lagt till parametern display: none;. Detta gör att de inte syns alls men går att trolla fram när vi behöver dem och det gör vi med jquery. jquery kan du både ladda ner och länka till lokalt eller så kan du göra som i exemplet ovan, länka in det utifrån, i detta fallet direkt från tillverkaren. Motsatsen till display: none; heter display: block; Det som är knepet med detta att dölja bilder är att de redan finns på ditt webbutrymme men visas & döljas inom sidan utan att du behöver vare sig iframes eller undersidor. Då vi inte vet i vilken ordning besökaren kommer att klicka för att se en större bild så måste vi ha dubbla funktioner för varje enskild bild. Vi måste i varje sådan också ta med ALLA bilder.

10 OBS!! Man kan INTE använda bara EN uppsättning bilder, för döljer vi bg1.jpg så är den borta! Vi måste ha både stora & små bilder ELLER lägga samma bilder i en annan mapp som i exemplet. De vanligaste funktionerna är:.show.hide.fadein &.fadeout, men det finns massor att läsa om på jquery.com. Det kommer att bli mycket koder så det gäller att vara konsekvent. JS-Filen: (som kommer att vara ganska lång!) $(document).ready(function() { $(''.b01'').click(function() { $(''.c01'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c01'').click(function() { $(''.c01'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); $(''.b02'').click(function() { $(''.c02'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c02'').click(function() { $(''.c02 '').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); $(''.b03'').click(function() { $(''.c03'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); );

11 $(''.c03'').click(function() { $(''.c03'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); $(''.b04'').click(function() { $(''.c04'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c04'').click(function() { $(''.c04'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); ); Som du ser så är det mycket upprepningar så man behöver inte skriva mer än en uppsättning som man sedan upprepar och redigerar om lite. Funktionsförklaring till jquery-anrop: $(''.b01'').click(function() { $(''.c01'').fadein(2000); $(''.b01'').hide(); $(''.b02'').hide(); $(''.b03'').hide(); $(''.b04'').hide(); ); $(''.c01'').click(function() { $(''.c01'').hide(); $(''.b01'').fadein(2000); $(''.b02'').fadein(2000); $(''.b03'').fadein(2000); $(''.b04'').fadein(2000); ); Som du ser så kommer vissa funktioner att avfyras när vi gör vissa saker. Klickar vi på bilden länkad till funktionen.b01 så kommer.c01 som är länkad till den större bilden att avfyras och då visas bilden. Samtidigt så döljs alla små bilderna. Samma sak gäller för klick på den stora bilden, då får vi en växling av funktionerna, mycket smidigt!

12 Detta fungerar även på div-boxar med text eller på paragrafer <p>text</p>. Man kan i princip visa eller dölja vilken class eller id som helst och även ändra position med mera, jquery är kraftfullt. Det är på detta vis man bygger upp EN sida där man kan växla innehåll utan att ha vare sig iframes eller undersidor. Som angivits i texten tidigare så kommer muspekaren inte att ändras när man kör med a nohref= # För att råda bot på även det lilla fenomenet så får vi ta till CSS igen och formatera länkar. Html: <a nohref=''#'' class=''exempel''>länk 1</a> det går även skriva: <a class=''exempel'' nohref >Länk 1</a> Css: a { text-decoration: none; a:link { color: #ffffff; a:visited { color: #ffffff; a:hover { color: #ffffff; font-style: italic; cursor: pointer; cursor: hand; a:active { color: #ffffff; Alla länkar i exemplet är satta till #ffffff = Vit. Dessutom så har vi tagit bort understrykning med text-decoration: none; Vid hovring så kommer tillägget som gör att muspekaren ändras: cursor: pointer; cursor: hand; I samma veva så lägger vi in att länken ska bli kursiv när vi pekar på den. Har du flera länkar du vill ha annat format på så får vi ta till ett knep till: a.one { text-decoration: none; a.one:link { color: rgb(63,63,63); a.one:visited { color: rgb(63,63,63); a.one:hover { color: rgb(0,0,255); font-size: 150% cursor: pointer; cursor: hand; a.one:active { color: rgb(63,63,63); Man lägger till.ettord i själva css koden OCH man måste anropa en klass i själva länken på sidan också. OBS! Det går INTE med en siffra, måste vara bokstäver! <a href class= one >http://www.exempel.com >Mitt exempel</a> Så det är bara att testa, man kan ha olika färger, typsnitt, storlekar och position. Man behöver bara ha fantasi och tålamod :-) Nu är det dags för lite kaffe! Eller hur?

13 Mera finesser! Det är mycket populärt med små enfärgade platta bilder nu för tiden. Det är inte bilder utan kallas ikon-fonter. I stället för att man får ett formaterat A så får man en ikon! i det här fallet en Dingbats (ett vanligt typsnitt som bygger på ungefär samma princip). Sådana här bibliotek med ico-font's finns att ladda ner, de mest användbara är nog: och https://icomoon.io På dessa sidor kan man ladda ner färdiga paket eller ladda ner en egen grupp man bakar ihop. Instruktioner hur man gör finns på sidorna och även i en websidesfil som följer med per automatik i det man laddar ner. Det finns ett litet problem även här som kan uppstå på mobiltelefoner, har du satt en icon-font till: position: fixed; så kan den hänga sig när man scrollar på mobilen. Detta beror på att en mobil har för klen processor för att rendera sidan så att ikonen sitter fast. Naturligtvis så finns det en lösning på detta! Ange i koden där du har infogat din ico-font:.ico-font1 { font-size: 135%; color: #ffffff; position: fixed; Detta är problemet! bottom: 8px; Detta är problemet! right: 20px; Detta är problemet! -webkit-transform: translatez(0); Detta löser problemet! -moz-transform: translatez(0); Detta löser problemet! -ms-transform: translatez(0); Detta löser problemet! -o-transform: translatez(0); Detta löser problemet! transform: translatez(0); Detta löser problemet! transform: translatez(0); är ett djärvt knep som tillhör CSS3 som är mycket avancerat. Man kan med CSS3 göra transformeringar mellan olika objekt. Tänker inte gå in djupare på det i den här guiden då man sällan behöver använda det för något annat än vissa tjusiga knappar osv. OBSERVERA att ikon-fonter inte fungerar eller ser konstiga ut i inkompatibla webbläsare

14 Öka läsbarheten med textskugga. Har man en ljus bakgrund och absolut vill ha en ljus passande textfärg så kommer kontrasten att bli dålig, samma sak gäller det omvända. Det finns knep för detta, textskugga, (stroke som är en annan teknik går vi inte igenom här) för den är inte så ofta använd. I css filen så anger du där du har din box eller i body'n : text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); Så får du en svart skugga med 50% genomskinlighet på 1px runt varje bokstav. text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); Så får du en vit skugga med 50% genomskinlighet på 1px runt varje bokstav. Medeltalet för färgen grå är 192,192,192 naturligtvis kan du köra med matchande färger men tänk på att det ska ge kontrast. OBS, för att få skugga runt om hela bokstäverna så sätter vi positionen på skuggan till NOLL i både Z och Y axeln Skugga på div-boxar och bilder (och fotoramar)..photo_border { border-top-width: 12px; border-top-style: solid; border-top-color: #f4f4f4; border-right-width: 12px; border-right-style: solid; border-right-color: #f4f4f4; border-bottom-width: 12px; border-bottom-style: solid; border-bottom-color: #f4f4f4; border-left-width: 12px; border-left-style: solid; border-left-color: #f4f4f4; -webkit-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); -moz-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); -ms-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); -o-box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); box-shadow: -8px -8px 14px rgba(0, 0, 0, 0.6); Övre delen är för ramen & den nedre är för skuggan. Observera återigen -webbläsar-tilläggen med standard längst ner. Minus = vänster & uppåt, (plus behövs inte) samt storlek följt av färg. En fotoram är bara en tjock border, inget speciellt med det. Du ser att färg ibland anges i rgba, a står för alfa & gör att man kan få genomskinlighet, 1.0 är homogen 0.5 = 50% osv. OBSERVERA att skuggor på text och bilder / boxar inte fungerar alls eller ser konstigt ut i äldre inkompatibla webbläsare.

15 Google Fonts Google Fonts är också väldigt populärt, då kan man tvinga en webbsida att visa ett typsnitt som inte finns på besökarens dator och ej heller på ditt webbhotell, mycket smidigt då det finns över 600 att välja på. Man går till https://www.google.com/fonts & väljer det typsnittet man vill & klickar på Quick Use, då får man instruktioner hur man ska göra. Det består i att klistra in 2 saker, en länk i huvudet & en format-kod i body'n eller i css, så här ser exemplet ut för Open Sans: <head> <link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'> </head> <body style= font-family: 'Open Sans', sans-serif; > eller CSS: body { font-family: 'Open Sans', sans-serif; Google Fonts är väldigt populärt och smidigt sätt att använda typsnitt på. Själv så föredrar jag Sans'er framför Serif'er. Arial är en Sans-serif det känner man igen på att bokstäverna är ganska raka. Times New Roman Känner man igen på att det har så kallade Serifer. Bokstäverna är stukade med snuttar i ändarna. Andra problem H1 H7 Ger oftast ett extra <br> som man ibland inte vill ha, för att råda bot på det så kan man skapa en css regel även för det: h1, h2, h3, [ etc... ] { display: inline; // Så bör det lösa sig.

16 <div><a name="ankare1"></a></div> Ankare Funkar inte som ankare i alla webbläsare, byt det mot: <div><a name="ankare1"> </a></div> // = Mellanslag så bör det funka, anledningen är att vissa webbläsare inte klarar en tagg som är tom, det räcker med att ha ett mellanslag. Observera att man bör sätta ankaret i en div-box för att det ska funger i t. ex. Internet Explorer. OBSERVERA: Kursiv stil (italic) kan ibland se mycket konstig ut i Safari- Browser som finns på Mac, Ipad och Iphone i vissa typsnitt och det verkar inte finnas något annat sätta att fixa till det än att låta bli. Det man kan göra är att köra med något annat typsnitt eller formatering. Så något smart css-knep för detta verkar idag inte finnas. Centrera i höjdled utan tabeller Centrera i höjdled brukar vara förbehållet tabeller. Tabeller funkar inte med responsivitet, man ska köra med div-boxar. Kan man på något sätt få in tabellens egenskaper i en div-box? Ja visst! Html: <div class=''a01''> <div class=''a02''> Hej på dig!! </div> </div> Css:.a01 { position: fixed; top: 50px; left: 50px; width: 50%; height: 50%; font-size: 150%; font-family: Arial; background-color: gray; color: black; display: table;

17 .a02 { display: table-cell; vertical-align: middle; text-align: center; Observera att vi måste ha 2 boxar, en inre & en yttre för att kunna centrera i både x och y-axeln (i alla fall gör jag så) då tabeller är uteslutet. Teman. Tycker man det är svårt att designa från scratch så finns det 100 tusentals med färdiga teman att ladda ner, så väl som responsiva med HTML5 och jquery till mer simpla, vill du ha det senaste så kan du googla på orden: free html5 themes // om du vill ha en vanlig sida. Eller free html5 responsive themes // om du vill ha en responsiv sida. Det finns massor av gratis-teman, men vissa tar ut en engångskostnad.

18 Referenser: https://jquery.com/ https://www.google.se/ https://www.mozilla.org/sv-se/firefox/developer/ ign https://icomoon.io Hoppas du får en trevlig stund med mina tips även om det finns obegränsat att läsa på nätet, vissa delar har du redan fått återgivit i denna text, med reservation för att det kan förekomma vissa mindre fel.

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

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

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20 Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering

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

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

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

Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r»

Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r» Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r» skriv ut» C SS - gr unde r Infor mation om C S S CS S i exter n mall eller i dokumentet? A

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

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

En mötesplats i centrum

En mötesplats i centrum Finlands svenska biblioteksförenings medlemstidning Nr 1/2011 En mötesplats i centrum EAHIL INTERNET LIBRARIAN INTERNATIONAL ISSOME s turpis vel urna luctus dictum. Morbi non libero mauris, vehicula facilisis

Läs mer

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket. e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av

Läs mer

Välkomna! till e-butik.se

Välkomna! till e-butik.se Välkomna! till e-butik.se Butiken - Butiken - Admin - Arbeta i butiken - Utseende - Viktigt att tänka på - Tips & Idéer Butiken Varukorgen längst ner 1/4 Butiken Varukorgen högst upp 2/4 Butiken Vänstermenyn

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

kontorsmaterial/visitkort

kontorsmaterial/visitkort kontorsmaterial/visitkort Det är viktigt att allt som syns utåt har en enhetlig profil, och här spelar kontorsmaterialet en viktig roll. Med kontorsmaterial menas visitkort, kontaktkort, meddelandeblock,

Läs mer

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1 En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1 Stilmallar en introduktion... 4 Vad är stilmallar?...4 Vad behöver du för att lära dig stilmallar?...4 Hur stilmallar integreras i en

Läs mer

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1 Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min

Läs mer

Guide Till Bättre Nyhetsbrev. För dig som jobbar som webbdesigner eller med HTML i allmänhet

Guide Till Bättre Nyhetsbrev. För dig som jobbar som webbdesigner eller med HTML i allmänhet Guide Till Bättre Nyhetsbrev För dig som jobbar som webbdesigner eller med HTML i allmänhet För dig som har, eller ska börja skicka nyhetsbrev Introduktion Skicka HTML brev Många som är nya på området

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

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

Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN.

Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN. CSS CASCADING STYLE SHEETS GRUNDKURS Introduktion till stilmallar, CSS CSS står för Cascading Style Sheets CSS är ett språk som används för att få bättre kontroll över utseendet (formatering och layout)

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

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

VISUELL IDENTITET FÖR TELTEK

VISUELL IDENTITET FÖR TELTEK VISUELL IDENTITET FÖR TELTEK En grafisk profil är en viktig byggsten i skapandet av ett starkt varumärke och syftar till att skapa en enhetlig visuell identitet för Teltek som är enkel att känna igen för

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

GRAFISK MANUAL Visuell identitet, logotyp och riktlinjer NOVEMBER 2013

GRAFISK MANUAL Visuell identitet, logotyp och riktlinjer NOVEMBER 2013 GRAFISK MANUAL Visuell identitet, logotyp och riktlinjer NOVEMBER 2013 2 INNEHÅLL Innehållsförteckning INLEDNING... 3 LOGOTYP... 4 Versioner... 4 Användning... 5 Frizon... 5 SYMBOLEN... 6 TYPOGRAFI...

Läs mer

Visuell identitet garant

Visuell identitet garant Visuell identitet garant sveriges radio VER 1.3 8 1. Logotypen Logotypen består av ett ordmärke där bokstäverna S och R skapar ett bokstavsmärke. Ordmärke och bokstavsmärke används alltid tillsammans och

Läs mer

Webbdesign vt. 2010. Innehållsförteckning

Webbdesign vt. 2010. Innehållsförteckning Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans

Läs mer

Grafisk manual 2010/2011 1

Grafisk manual 2010/2011 1 Grafisk manual 2010/2011 1 Förord Vi inom Ung Företagsamhet arbetar för fler företagsamma människor och fler företag i Sverige. Vi gör det genom utbildningskoncept i skolan. Var och en inom Ung Företagsamhet

Läs mer

Grundläggande instruktioner för att publicera webbsidor på webbservern.se

Grundläggande instruktioner för att publicera webbsidor på webbservern.se Grundläggande instruktioner för att publicera webbsidor på webbservern.se Av Julia Klingvall i samarbete med webbservern.se. Version 1.1, januari 2005. I denna guide kommer du att lära dig de viktigaste

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

Webbdesign vt. 2009. Innehållsförteckning

Webbdesign vt. 2009. Innehållsförteckning Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...

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

Spelprogrammering med JavaScript och HTML5

Spelprogrammering med JavaScript och HTML5 Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

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

CMS. - Content management system

CMS. - Content management system CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell

Läs mer

Profilmanual Version 1.0. 2003-12-03

Profilmanual Version 1.0. 2003-12-03 Profilmanual Version 1.0. 2003-12-03 Innehåll Förord 3 Ett varumärke och en logotyp 4 Vår logotyp 5 Logotypens uppbyggnad 6 Logotypens reproduktioner 7 Logotypens fria yta 8 Logotypens storlekar 9 Internationell

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

CAEWS CONTEMPORARY AND EASY WEB SCRIPT IDA ENBRANT. Innovativ Programmering VT 2012 TDP019 Projekt: Datorspråk Linköpings universitet

CAEWS CONTEMPORARY AND EASY WEB SCRIPT IDA ENBRANT. Innovativ Programmering VT 2012 TDP019 Projekt: Datorspråk Linköpings universitet CAEWS CONTEMPORARY AND EASY WEB SCRIPT IDA ENBRANT Innovativ Programmering VT 2012 TDP019 Projekt: Datorspråk Linköpings universitet SAMMANFATTNING Caews är ett enkelt web script, tänkt att användas för

Läs mer

GRAFISKA ANVISNINGAR BUSSPOOLEN - VÄSTERBOTTEN

GRAFISKA ANVISNINGAR BUSSPOOLEN - VÄSTERBOTTEN GRAFISKA ANVISNINGAR BUSSPOOLEN - VÄSTERBOTTEN Logotype och symbol Färger Pantone 485 C 100% svart 70% svart 50% svart 40% svart Pantone 485 C 100% svart 70% svart 70% svart 50% svart 100% svart 40% svart

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

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

Läs mer

Hur man lägger upp och redigerar dokument i Typo3.

Hur man lägger upp och redigerar dokument i Typo3. Hur man lägger upp och redigerar dokument i Typo3. Typo3 är ett så kallat CMS, Content Management System där du enkelt och smidigt kan lägga ut kursinformation och bilder. Detta verktyg är webbaserat vilket

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

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

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2) 1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA

Läs mer

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1 Uppdaterad 20131029 WORDPRESSGUIDE 2013 Sida 1 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet. Det perfekta verktyget för både privatpersoner och

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Integrerad i egen cup-portal Sid 1

Integrerad i egen cup-portal Sid 1 Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade

Läs mer

Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller

Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Beräknad tidsåtgång: ca. 3 timmar. I ASP.NET 4.5 finns en stor mängd nya funktioner för att förenkla utvecklingen

Läs mer

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Du kan själv följa med i denna steg-för-steg guide i din texteditor. Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information

Läs mer

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden

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

Visuell identitet P2. sveriges radio VER 1.3 56

Visuell identitet P2. sveriges radio VER 1.3 56 Visuell identitet P2 sveriges radio VER 1.3 56 9. P2 / Verktygslåda Verktygslådan för P2 lyfter fram guidens klassiska och stämningsfulla karaktär. Verktygslådan består av P2:s logotyp i svart, vitt eller

Läs mer

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00 Mitthögskolan ITM Telefon 063-16 53 00 HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon 063-16 53 00 Laborationskompendium för konstruktion

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

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Wordpress och Sociala medier av Sanna Ohlander 110319. Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se

Wordpress och Sociala medier av Sanna Ohlander 110319. Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se 1 Innehållsförteckning Tänk på! Sid 3 Logga in sid 4 Panel sid 5 Sidor och inlägg 1. Skapa eller redigera en sida eller inlägg

Läs mer

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp Lathund till Publisher TEXT Pekverktyget använder du när du ska markera en ram som du vill förändra på något sätt. Klicka på textverktyget. Placera muspekaren på den tomma dokumentytan, det spelar ingen

Läs mer

Hja lp till Mina sidor

Hja lp till Mina sidor Hja lp till Mina sidor Vanliga Frågor Varför godkänner inte Mina sidor mitt personnummer trots att jag har prövat flera gånger och är säker på att jag skrivit rätt? Du behöver använda ett 12 siffrigt personnummer

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2013-10-24

Användarhandledning. edwise Webbläsarinställningar 2013-10-24 Användarhandledning edwise Webbläsarinställningar 2013-10-24 Sida 2/22 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompabilitetsläge... 3 1.1.1 Inställningar för kompabilitetsvyn...

Läs mer

Visa och dölja element med JavaScript

Visa och dölja element med JavaScript Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Anpassning av Windows 7 och Word 2010

Anpassning av Windows 7 och Word 2010 Anpassning av Windows 7 och Word 2010 Det finns en hel del små förändringar man kan göra för att det ska bli lättare att navigera i datorn, läsa och skriva. Med kortare rader, tydligt typsnitt större avstånd

Läs mer

Lab 5: ASP.NET 4.5 Site Navigation

Lab 5: ASP.NET 4.5 Site Navigation Lab 5: ASP.NET 4.5 Site Navigation Enkel navigering är en viktig del av en modern webbapplikation. Eftersom en stor del av utvecklingstiden för en site används för att bygga menyer, trädstrukturer och

Läs mer

Open24 Webtool. Inofficiell komplettering till manual

Open24 Webtool. Inofficiell komplettering till manual Open24 Webtool Inofficiell komplettering till manual Förord När detta skrivs är den officiella manualen knapphändig, speciellt beträffande bilder och tabeller. Jag har provat mig fram och hittat några

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

Grundutbildning EPiServer CMS6

Grundutbildning EPiServer CMS6 Grundutbildning EPiServer CMS6 Välkommen! Presentation av kursledare och kursdeltagare Kursinnehåll Verktygsfält och funktioner Skapa sida, spara och publicera Redigera sida Länkar till andra sidor och

Läs mer

Övrigt Ljud Bild Kyrkvärd. Gun Björk. Liv Ek Nattvard Jon Gran

Övrigt Ljud Bild Kyrkvärd. Gun Björk. Liv Ek Nattvard Jon Gran acal version 1.1 Översikt Den centrala delen i acal är en kalender. Till skillnad från andra digitala kalendrar som vanligen har ett par olika fält kan man här fritt skapa fält utifrån de behov man har.

Läs mer

Om man vill ändra färg inuti går det, men skuggan blir densamma.

Om man vill ändra färg inuti går det, men skuggan blir densamma. Visst är det roligt att kunna göra fina dokument, häften, affischer, inbjudningskort och annat skoj?! Och att få bilderna att hamna där du vill att de ska hamna, i rätt storlek och utan att andra saker

Läs mer

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard.

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. Verktygsfunktioner i BAS Snabbguide Klicka på det verktyg du vill jobba med. Det verktyg

Läs mer

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

Läs mer

www.faltbiologerna.se

www.faltbiologerna.se Redigering av www.faltbiologerna.se sammanställt av Magnus Bjelkefelt, november 2011 reviderad oktober 2012 Innehållsförteckning 1. Logga in................................................... 2 1.1 Var

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1 Personalsupport Medicinska fakulteten, Lunds universitet Textredigeraren Moodle version 2.7.1 Lars Rundgren, 2012-2014 Moodle 2.7.1 Textredigeraren Textredigeraren... 3 Nya ikoner i textredigeraren...

Läs mer

Lär dig programmera! Prova på programmering med enkla exempel! Björn Regnell www.bjornregnell.se

Lär dig programmera! Prova på programmering med enkla exempel! Björn Regnell www.bjornregnell.se Lär dig programmera! Prova på programmering med enkla exempel! Björn Regnell www.bjornregnell.se Mål Så enkelt som möjligt: låg tröskel Ett riktigt programmeringsspråk: inget tak Roliga uppgifter som går

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

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Lär dig POWERPOINT. Lars Ericson datorkunskap.com Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint

Läs mer

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

Läs mer

Kort instruktion för arbete i Sitevision ( exempel från ATM)

Kort instruktion för arbete i Sitevision ( exempel från ATM) Sitevision på HiG BOL /2010-06-07 Kort instruktion för arbete i Sitevision ( exempel från ATM) För att lägga in text eller redigera text på HiG s nya webb måste du tillhöra någon grupp som har behörighet

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

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

Materialspecifikationer webb 2014

Materialspecifikationer webb 2014 SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE SYDSVENSKAN WEBBYRÅ Materialspecifikationer webb 2014 www.sydsvenskan-webbyra.se Standardformat Panoramabanner Storlek: 980x240 px Framerate: 18-24

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

Profilmanual. Övergripande regler och riktlinjer Reviderad: 2011-06-30

Profilmanual. Övergripande regler och riktlinjer Reviderad: 2011-06-30 Profilmanual Övergripande regler och riktlinjer Reviderad: 2011-06-30 Innehåll Inledning 3 Grafiska grunder 4 Logotyp 5 Färger 6 Teckensnitt Neo Sans 7 Teckensnitt Calibri 8 Teckensnitt Arial 9 Dekor 10

Läs mer

Microsoft Word. Lathund för. Innehåll. www.bit.mah.se/support. Autokorrigering. Autotext. Format

Microsoft Word. Lathund för. Innehåll. www.bit.mah.se/support. Autokorrigering. Autotext. Format Lathund för Microsoft Word Innehåll Autokorrigering 1 2 3 4 5 6 7 8 9 4 Format På denna rullgardinsmeny väljer du om du vill skriva brödtext, rubriker osv. Mycket bra verktyg om du arbetar med formatmallar.

Läs mer

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

Läs mer

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

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

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

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

Snabbmanual. för. Lärresurshanteringsverktyget

Snabbmanual. för. Lärresurshanteringsverktyget Snabbmanual för Lärresurshanteringsverktyget Beskrivning av olika vyer i Lärresurshanteringsverktyget Skapa I detta fönster skapar man nya sidor och/eller väljer struktur på sin lärresurs. Men man redigerar

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Lathund länkar. Skapa en intern länk som en sida

Lathund länkar. Skapa en intern länk som en sida Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder

Läs mer

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application Manual till APA En instruktionsmanual för användare av APA Advanced Publication Application Versionshistoria 2005-10-13 början Anders Nilsson 2007-05-12 slutversion Adam Boman Vid frågor om APA eller denna

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

Webbsidekurs för nybörjare

Webbsidekurs för nybörjare Webbsidekurs för nybörjare Hörselskadades distrikt i Stockholms län (www.distriktet.info) Inledande faktaruta Alla HRF föreningar erbjuds möjligheten att kostnadsfritt publicera information på en egen

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