Introduktion til CSS Videre med CSS. Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber,

Slides:



Advertisements
Lignende præsentationer
Videregående pc-vejledning Modul 13: Brug af tekstbehandling 60+Bornholm.
Advertisements

En lille vejledning til ændring af skærmens udseende.
1 Test 2 Klik for at begynde. 2 Hvor skal du klikke for at få vist tabelværktøjer?
Lidt om pladsholdere.
Mini-PC-kørekort – Modul 6
Introduktion til HTML HTML dokumentets struktur & Indhold.
Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?
Fortæl med PowerPoint XP
Videregående pc-vejledning
Introduktion til HTML Tabeller. Formatering af tekst, overskrifter, brødtekster og links bringer os ganske langt. Men ofte vil vi også have brug for at.
Introduktion til Javascript – Grundlæggende Webdesign, F2004. Introduktion til Javascript.
Introduktion til HTML Formularer V1 introduktion til formularer Den sidste af HTML strukturmarkørerne er FORM-markøren, der bruges til at lave.
Velkommen til vores færdige applikationsdesign til kurset CBC hos PDJA. Nederst på billede står fem kategorier, som indeholder materiale, features og værktøjer.
Hvordan kommunikerer jeg med min PC
Generelle regler for brug af PowerPoints
Introduktion til HTML Hypertekst referencer. Uden links – Hypertekst referencer – intet world wide web. World wide web er et Hypermedium….. Link definition.
Sidetyper Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Links Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Introduktion til CSS I gang med min første HTML & CSS hjemmeside.
Interaktion 4 Stefan Grage.
”Design og fremstil – med udgangspunkt i vores case – et eller flere medieprodukter, der vil kunne indgå som del af kampagnen, der skal skabe opmærksomhed.
Vejledning i blog-værktøjet WordPress Opdateret august 2008.
Vejledning i blog-værktøjet WordPress Opdateret februar 2009.
Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden.
Formularer (Access, del 3)
Dag 7: Javascript Html- og css-billedgalleri Javascript-intro
Dagsorden: Formål: Jeres websider skal layoutes i bokse/sektioner
Asma (Mona) Khan & Mathilde Lolle
Hvordan bruger jeg First Class konferencerne ?
Hvad kan tabeller anvendes til
POSITIONERING Stefan Grage
Join.me/webkursus. * Vi kan nu ramme de html-elementer vi vil… * Lad os få placeret vores “kasser”/strukturelle elementer * Dertil bruger vi en række.
CSS ver. 2 Rikke Møller-Poulsen. Visning af billeder?!? Er der stadig nogen, der har problemer med at få vist billeder på deres site?
Skoleporten Hvordan tilpasser jeg layout mulighederne i
Masterpages/Otto Knudsen 1 Master Pages Master Pages i ASP.NET 2.0.
Studieweb Kaare og Jonathan.
Dag 4 - dagsorden: Formål: I skal lære at lave menuer I Tekst/CSS-baserede menuer 1. Lodret menu med mouse-over-effekt 2. Vandret menu med mouse-over-effekt.
Blog kommentar Åben arkivet ved at trykke på den lille sorte trekant der peger ind på et årstal (næste billede)
Formål med dag 2 1.Hvordan lægger man websider ud på internettet 2.Hvordan optimerer man billeder til web? 3.Hvordan sætter man billeder ind på websider?
Beginning CSS and Web Development kap
Ældre Sagen ”Gem som” - et dokument Følg numrene osv.
XML Rasmus D. Lehrmann DM Indhold Hvad er XML? XML standarder Hvor bruges XML? XML struktur Træ struktur Element & Attribute Syntaks i XML Stylesheets.
Øvelsestimer (opgave 5) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Dag 7: Javascript Screen-broadcast – gå til - Indtast mødenummer - Vælg html-viewer - Klik Join sessionwww.123beam.com Php-opsamling (php-warning.
HTML 2. Lister – ul og ol tags En uordnet liste første element anden element tredie element En ordnet liste første element anden element tredie element.
Copyright (C) 1998 Klaus Fuglevig Office 4.x til Office 97 Word Excel Klaus Fuglevig - FBT.
Gennemgang af hjemmeside.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
XML 2. Formatering af XML data med CSS Når man arbejder med XML og CSS er fremgangsmåden den samme som i forbindelse med HTML og CSS.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev
Lise Muusmanns hjemmeside
Grundlæggende DW, HTML, CSS, udskæring.
Masterpages/Otto Knudsen 1 Temaer (Themes) Stylesheets til ASP.NET web-applikationer.
PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets.
IT i Byggeriet Semester kursusgang Projektweb og html (fortsat) Kjeld Svidt Kjeld Svidt  Institut for Bygningsteknik  Aalborg.
Danmarks Matematiklærerforening Introduktion til Joomla (12 slides)
Dreamweaver, CSS og eksterne applikationer Fjerde øvelsesgennemgang Onsdag den 20. juni Webkommunikation 2007 v/ Niels Christian Nielsen.
Videregående pc-vejledning
Videregående pc-vejledning
IT for let øvede Modul 5: ”Tekstbehandling ”. Formål KULTUR & FRITIDSHUSET – SKOLEGADE 54 – TLF: Kunne skrive en tekst med store og små bogstaver.
Mammen Friskole – ”Et godt sted at være, et godt sted at lære” Formatering Lidt grundlæggende om formatering i tekstbehandling og hvilke muligheder det.
Power up Your PowerPoint Udarbejdet af Irene Krainer Larsen Irla.
Skabelon mailopsætning
19. september 2018 AFP brugergruppe møde d maj 2007 Segmenter – Logo’er mv. i farver. Tips og tricks.
Introduktion af PowerPoint 2007
PowerPoint i undervisningen - med særligt fokus på billeder
Filmbånd (Øvet)   Du kan genskabe effekterne på dette dias ved at benytte følgende fremgangsmåde: Klik på Layout i gruppen Dias under fanen Startsiden,
Præsentationens transcript:

Introduktion til CSS Videre med CSS

Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber, manipulere ved hele dokumentets form og udseende. Eksempel Lidt nyttig info: HTML kommentarmarkøren er Hvor stylesheet kommentarmarkøren ser således ud: /* */

Praktiske eksempler på tekst formatering Der hører mere til et tekstbillede end skriftens navn & størrelse. Øvrige egenskaber som kan knyttes til teksten er: Letter-spacing = der sætter afstanden imellem bogstaverne i teksten Line-height= der sætter skydningen imellem linierne i en tekst Text-align= der justerer teksten i forhold til det overordnede element Text-decoration= der sætter linier over, under eller igennem teksten Text-indent= der indrykker den første linie i et tekstelement Text-transform= der ændrer teksten fra store til små eller vice versa Vertical-align= der justerer teksten lodret i forhold til det overordnede element

Praktiske eksempler på tekst formatering Der hører mere til et tekstbillede end skriftens navn & størrelse. Øvrige egenskaber som kan knyttes til teksten er: Font-family= der vælger hvilken skrifttype man ønsker at anvende Font-style= der åbner for generel formning af teksten Font-size= der definerer teksten i absolut- (px) el. relativ (%) skriftstørelse Letter-spacing = der sætter afstanden imellem bogstaverne i teksten Line-height= der sætter skydningen imellem linierne i en tekst Text-align= der justerer teksten i forhold til det overordnede element Text-decoration= der sætter linier over, under eller igennem teksten Text-indent= der indrykker den første linie i et tekstelement Text-transform= der ændrer teksten fra store til små eller vice versa Vertical-align= der justerer teksten lodret i forhold til det overordnede element Color= der definerer tekst farven mm.

Justering af billeder & tabeller med float egenskaben Traditionelt bruger vi align-attributten til at placere et element i enten højre eller venstre margin af websiden. Der er forskellige ulemper forbundet ved denne metode, derfor foreslår jeg at du anvender float- egenskaben til dette formål. Se eksempel på et img float her…

Du skal nu gå ind på ITs Learning og i mappen /V1 materialer/Litteratur & kompendier/ finder du en PDF fil ved navn, CSS - referenceoversigt. Læs den grundigt igennem. Når du har gjort det, skal du kalde på Jørgen for at få åbnet opgave 007 – Tilpas og leg med denne dropdown menu inde på ITs Learning