CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.

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

Introduktion til HTML HTML dokumentets struktur & Indhold.

Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?

Hejnsvigbynet.dk Opdatering med typo3 CMS. •Mål –Deltagere skal kunne oprette og redigere tekst, tabeller og billeder på en underside •Forudsætninger.

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.

Websider og design Dette Power Point består af 2 dele Se hver del hver for sig, tag en pause imellem de 2 dele. Første del handler især om overvejelser.

Hjemmesidekonstruktion Tjekspørgsmål 1.Hvad er et markup-sprog – hvad bruges det til? 2.Hvad er forskellen mellem et markup-sprog og et scriptsprog? 3.Hvad.

Launchy – En Mozilla Extension 9 juni 2005Henrik Gemal Side 1 ● Launchy er en Mozilla extension. Dvs. En udvidelse til Mozilla. ● Virker.

Generelle regler for brug af PowerPoints

Søgeord og konverteringer En webtekst skal på samme tid skabe synlighed i søgemaskinerne og motivere brugerne til at udføre en handling, vi som afsendere.

Sidetyper Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.

Hjemmesider Intro.

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

Dag 7: Javascript Html- og css-billedgalleri Javascript-intro

Dagsorden: Formål: Jeres websider skal layoutes i bokse/sektioner

Asma (Mona) Khan & Mathilde Lolle

+ Interaktion 2 Stefan Grage. + DAGENS MÅL  CSS recap  CSS3 Status & anvendelse  Baggrunde, kanter, skygger, opacity, gradients…  Transitions  Web.

POSITIONERING Stefan Grage

Side-egenskaber Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.

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.

Design effektive PowerPoint præsentationer Enkelt Konsekvent Tydeligt Stort Progressivt Afslut.

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?

Meta-Presentation Gruppe 2 (og Gruppe 4) 12/02/08.

Skoleporten Hvordan tilpasser jeg layout mulighederne i

Introduktion/Otto Knudsen 1 Overblik WebForms ASP.NET.

Center for Undervisningsmidler Dispositionsvisning Den hurtige professionelle måde at arbejde på. Her kan du koncentrere dig fuldstændig om indholdet.

Blogging Udvidet design og funktion

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.

Beginning CSS and Web Development kap

HTML intro Dag 1. Client – Server miljø Client Server Klient ◦ Hardware (Screen size, colors, processor…) ◦ Platform (Mac, Windows, Linux…) ◦ Browser.

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.

Hvordan ændrer jeg min SkoleIntras setup, så den passer til de lokale forhold? Man kan tilpasse SkoleIntra til skolens eller kommunens behov på mange måder.

Gennemgang af hjemmeside.

JavaScript i externe filer JavaScript gemmes i en ekstern fil (myscripts.js ) og så hentes ind i dokument hvor de skal bruges med, svarende at koden var.

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 Ø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.

Hjemmesiden Stilen Funktionalitet Mangler. Stilen Simpel, enkle linier, klart mønster Få farver i tekst – symbolik – valgt med henblik på kunstnerens.

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.

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.

Client / Server teknologi Eksamensteori Anbefaling: Tag notater.

Kjeld Svidt  Institut for Byggeri og Anlæg  Aalborg Universitet IT i Byggeriet Semester kursusgang Introduktion til projektweb og html Kjeld.

PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets.

Udvikling af mobilsites Einar Gislason / FTF. Mobilsites Mobilvenlige sites.

Ø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.

Opsamling og repetition. Forelæsning 12 Hvad I ikke lærte Repetition? - date() - arrays - echo og return I funktioner - strukturering af script - navngivning.

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.

Videregående pc-vejledning

GoMINIsite – og få en ny og bedre hjemmeside på minutter 0.

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.

Dd.mm.åååå Side 1 Titel på præsentation (Arial Reg. 32 pkt.) Foredragholders navn og dato (Arial Reg. 18 pkt.)

Simpelt Konsistent Klar Stor Progressiv Opsummering.

Retningslinier for din præsentation

Adam Tulinius | | 2010

De grundlæggende redskaber

1.09 Dokumentation.

De grundlæggende redskaber

Skabelon mailopsætning

Powerpoint-præsentation

Introduktion af PowerPoint 2007

Vejledning: Publicering af artikler på portalen.

Efter folkeskolen kan du i Danmark typisk vælge én af 2 ”retninger”

Præsentationens transcript:

CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere mange sider Større uafhængighed af platform og software Renere kode Mere kompakt kode - hurtigere at downloade og parse

Kun til nyere browsere: >= Internet Explorer (1996), Netscape (1997) Manglende standarder: IE og Netscape implementerer forskelligt CSS-problemer Løsningsmuligheder: Layout siderne så de også er læselige uden css Skriv meget enkle css’er Skriv flere css’er og benyt JavaScript til browserkontrol men ikke dobbeltsæt af sider hhv med og uden css css og HTML-formateringskoder i samme dokument

CSS - 3 niveauer af cascading Selvstændig CSS-fil linket til HTML-filer Prioritet: 3 Indlejret CSS - dvs. CSS-blok i HTML-filen Prioritet: 2 Inline CSS-koder i HTML-koderne Prioritet: 1

Selvstændig fil... CSS i dokumentet Indlejret  Inline Tekst

CSS syntaks H2 {font-family: 'Arial'; font-weight: bold; font-size: x-large;} SelectorPropertyValue elementegenskabværdi H2 { font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'; font-weight: bold; font-size: x-large; color: #660066; }

CSS arvelighed P { font-family: 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica'; font-weight: bold; font-size: 11pt; … color: #000066; position: relative; (Arves af P.small) margin-left: 1cm; } P.small { font-family: 'Arial', 'Sans-Serif'; font-weight: normal; font-size: 8pt; text-align: center; }

CSS- generel klasse, specielle klasser.note { font-family: 'Arial', 'Sans-Serif'; font-size: 10pt; font-weight: normal; color: #006600; } Specielle klasser for A.link { color: #FFFF00 } A.visited { color: # } A.active { color: #FF0000 }

”sikre” CSS-muligheder - i hovedtræk Font størrelse skrifttype udformning (vægt, stil) Tekst Linjeafstand Justering Indrykning udsmykning (u, s, sub, sup) Automatisk stort 1.bogstav Knibning bogst, ord Farver Tekstfarve Baggrundsfarve/billede Margin Margin, V og H, T og B Luft langs sider Layout Placering fra T, V Position ift. Dok., Overordnet element Mål på element H, B Synlig/skjult Udklip (gennemsigtigt omr.) Kasser Margin, V og H, T og B Luft langs sider Ramme-udformning Punktopstilling Punkt-udforming