Deze les * recap css selectors * pseudoclasses * styling links: live tutorial * references, recources, categorisation * live tutorial o add css to template.html.

Presentatie over: "Deze les * recap css selectors * pseudoclasses * styling links: live tutorial * references, recources, categorisation * live tutorial o add css to template.html."— Transcript van de presentatie:

1 Deze les * recap css selectors * pseudoclasses * styling links: live tutorial * references, recources, categorisation * live tutorial o add css to template.html o validate Html and CSS : template.html o set stylesheet external o style form o style tables o style links : global o style prev-next links o class="active" * dreamweaver * excersise home : do same as live tutorial according to specs * webdroid.be

2 recap css selectors Syntax: – Selector{ attr:value; } Selectors – by tag (object) Object-type{attr:value; } – by class.classname{attr:value; } – By id #id{attr:value; }

3 Recap html attributes Noodzakelijk kwaad – herkenning – gebruik – obj/attr concept Nu : zo weinig mogelijk gebruiken Strategie: html en styles scheiden Overgebleven html attributen: – class=“gekozen naam” – >meerdere keren aanspreekbaar (css) – id =“unieke naam” – >van toepassing op één uniek object op de pagina – >unieke vormgeving (css)

4 Oef tables : show onscreen Webpage met tables gestyled met html attributen Alle attributen verwijderd Style-tag toegevoegd Styles gedefinieerd – By tagname – By classname – By ID

5 Keuze css selector bepalen? By tag – Globaal > nagenoeg alles, algemeen, veelvuldig voorkomend op site By Class – Globaal > regelmatige gebruikt, uitzonderingen By Id – Globaal > éénmalig voorkomend op pagina

6 Vb Effect op tag/object: link a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ Kan op andere objecten ook; – Issues met crossbrowser, symantic web – >> later meer Css : Pseudo classes

7 Style links : show onscreen Links in oef table Style 1 – Geen onderlijning – Onrolover wél – Vet Style 2 – Randje rond elke link – Onrollover : vlakje gekleurd Comment : /* your comment here */

8 Tool : W3C validation : CSS

9 Recource : CSS reference W3C – http://www.w3schools.com/css/css_reference.asp http://www.w3schools.com/css/css_reference.asp css property groups Gezien: Background Border and outline Font List Margin Padding Table Text Pseudo-classes/elements CSS1 voorlopig

10 /style.css Een keer laden ;-) Browsercache! – IE : extra -> Int. Options -> browse hist. -> settings – Firefox : https://addons.mozilla.org/en-US/firefox/addon/1801 External style sheet

11 Template.html Tabel oefening toepassen op template.html Website_6/assets Attributen strippen Validate! Styles definieren in head Validate! Style sheet extern Koppelen aan elke pagina Aanvullingen:

12 Aanwezig in lokaal Aangewezen voor thuis – http://www.edupartner.be/shop/product_info.php/manufactur ers_id/24/products_id/49 Snelheid coderen / bouwen Intellisence Hulpmiddellen – ftp – Filebrowser – Project beheer – Linkchecking – Template building dreamweaver

13 Webdroid.be Sessions : – Slideshow – Gekoppelde referenties Resources – Info – link - tutorials Examples – Codesnips, website-code Excesrsises – Q-A Tools – Info - link Strageties – info Andere info – Social media content – Blog – cms – Drupal modules, cms

14 Oef thuis : opgave Template.html : – Css in head – Validated css and html link – Volg voorbeeld! Nav: – home – google search on relevant site Direct result – tables long page named links – mytemplate With 2 validation links – Contact To email address

15 Webdroid.be Webservices: Avatar : wikipedia, videocontent Flickr : pics from phone Twitter : textmessages Levend gegeven Rollen / authenticatie – Inbreng jullie : social networking? – Downloads! – Cms’ers: meewerken!!