Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden.

Slides:



Advertisements
Lignende præsentationer
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,
Advertisements

En lille introduktion Angående links til
Introduktion til HTML HTML dokumentets struktur & Indhold.
Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?
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.
Grundlæggende PowerPoint
Introduktion til Javascript – Grundlæggende Webdesign, F2004. Introduktion til Javascript.
Vejledning i weblog-værktøjet
Dag 4 Fortryk-knap og videre til kasse Dagens program: 1.Fortryd-knappen ud for hver vare i kurven skal virke Formiddagens arbejde:
Vejledning i blog-værktøjet WordPress Opdateret august 2009.
Interaktion 4 Stefan Grage.
Hjemmesider Intro.
Vejledning i blog-værktøjet WordPress Opdateret august 2008.
Vejledning i blog-værktøjet WordPress Opdateret februar 2009.
+ Interaktion 1 Stefan Grage. + DAGENS MÅL  HTML5 recap  Layoutdiagrammer revisited  Layout & grids  Lyd & video på web  Canvas & animation – vil.
Dag 7: Javascript Html- og css-billedgalleri Javascript-intro
Dagsorden: Formål: Jeres websider skal layoutes i bokse/sektioner
Asma (Mona) Khan & Mathilde Lolle
J2EE Java Server Pages (JSP) Introduktion Internetteknologi 2 (ITNET2)
+ Interaktion 2 Stefan Grage. + DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web.
POSITIONERING Stefan Grage
Introduktion til indholdsfortegnelser j Tryk derefter på F5, eller klik på Slideshow > Fra begyndelsen for at starte kurset. Klik på Aktivér redigering.
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.
Dag 9: Programpakker Jquery og JQuery Mobile
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
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.
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?
XML1 4.7 XML and Its Data Model. XML2 Introduktion til XML, 178 XML = eXtensible Markup Language Markup language –sprog, hvor data "pakkes ind" i tags.
XML1 4.7 XML and Its Data Model. XML2 Introduktion til XML, 178 XML = eXtensible Markup Language Markup language –sprog, hvor data "pakkes ind" i tags.
1 Test i Word 2007 Klik her for at begynde. 2 Hvor skal du klikke for at gemme dit dokument?
Print af vektordata med Kortforsyningen Nikolaj Kamstrup National Geodatabank, Kort & Matrikelstyrelsen.
Beginning CSS and Web Development kap
Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen
HTML intro Dag 1. Client – Server miljø Client Server Klient ◦ Hardware (Screen size, colors, processor…) ◦ Platform (Mac, Windows, Linux…) ◦ Browser.
Ø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.
Grundlæggende Webdesign
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.
IT i Byggeriet Semester kursusgang Introduktion til projektweb og html Kjeld Svidt Kjeld Svidt  Institut for Bygningsteknik.
DWDK Øvelsesgang 2. Tegnsæt: utf-8 vs. iso Utf-8 = universelt tegnsæt Giver advarsel i validator Dokument skal gemmes i utf-8 format i notepad.
Tilgængelighed og Content Management Systemer - ATAG.
IT i Byggeriet Semester kursusgang Introduktion til projektweb og html Kjeld Svidt Kjeld Svidt  Institut for Bygningsteknik  Aalborg.
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.
ATAG Tilgængelighed og Content Management Systemer.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
Tekst til nettet Digitale Medier E /11. MENU DIGITALE MEDIER: FORMIDLING OG DESIGN SØGEMASKINER OG OPTIMERING Tekst på nettet Opsummering på kursets.
DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev
Grundlæggende web design, ITU Torsdag d. 3 nov Javascript.
Lise Muusmanns hjemmeside
Grundlæggende DW, HTML, CSS, udskæring.
Webdesign & Webkommunikation, ITU Torsdag d. 9 feb HTML © Hasse Feldthaus.
PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets.
Øvelsestimer (opgave 3) v/Morten Davidsen Øvelseslærer på ITU cand.merc.(dat.) studerende på CBS.
Øvelsestimer (opgave 3) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Dreamweaver, CSS og eksterne applikationer Fjerde øvelsesgennemgang Onsdag den 20. juni Webkommunikation 2007 v/ Niels Christian Nielsen.
Internet, html og Dreamweaver Anden øvelsesgennemgang Onsdag den 13. juni Webkommunikation 2007 v/ Niels Christian Nielsen.
Dd.mm.åååå Side 1 Titel på præsentation (Arial Reg. 32 pkt.) Foredragholders navn og dato (Arial Reg. 18 pkt.)
Tabeller Webintegrator HTML 5. Tabeller HTML Table tag kan bruges til at lave tabeller på din side. © Mercantec 2014 Jill Smith 50 ….. Forkortet…. Jack.
Eclipse projekter.
Lister i html kommer i 2 udgaver
Skabelon mailopsætning
19. september 2018 AFP brugergruppe møde d maj 2007 Segmenter – Logo’er mv. i farver. Tips og tricks.
Vejledning: Arkivering af artikler fra portalen.
Vejledning: Publicering af artikler på portalen.
Efter folkeskolen kan du i Danmark typisk vælge én af 2 ”retninger”
Præsentationens transcript:

Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden style sheet Eksempel med Style sheetmed Style sheet

Adskillelse af indhold og udtryk html dokument Overskrift celle HTML Indhold/struktur CSS Form/udtryk body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } H1 { color: #FFFFFF; background-color: #000000; letter-spacing: 12pt; text-indent: 12pt; float: none; clear: right; height: 45px; width: auto; }

Adskillelse af medietype •I CSS kan man definere screen { p {font- family:verdana,sans-serif; font- size:14px} } Print, handheld, aural, projection mm.

Større typografisk frihed Nye muligheder: Linieafstand Indryk Punktstørrelse Præcis placering mm.

Nemmere redigering CSS body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } H1 { color: #FFFFFF; background-color: #000000; letter-spacing: 12pt; text-indent: 12pt; float: none; clear: right; height: 45px; width: auto; } HTML html dokument Overskrift celle html dokument Overskrift celle html dokument Overskrift celle html dokument Overskrift celle Centralt administreret

HTML og CSS Tre måder: 1.Link til ekstern css-fil i html dokument 2.Indlejret css i sidehovedet, 3.Lokalt placeret i html dokument

Link til ekstern css-fil •Link til css-fil indsættes i html- dokumentets -sektion:......

Direkte i HTML dokument h3 { color: #006699; }...

Lokal placering (Inline Style Sheets) Overskrift <div style= ”font-family: Helvetica, Arial, Sans- serif; Background-color: #EEEEEE; text-align: center”>Her Kommer den grå centrerede Helvetica tekst......

Klasser (Classes)... Her kommer den tekst der bliver formateret med reglerne for "afsnit1"......

Dreamweaver, browsere og CSS •Redigering og applikering i Dreamweaver •WYSIWYG - med forhold! •Browsere tolker css forskelligt (jf, tidligere eksempel). Se liste med browser supportliste med browser support