Hoofdstuk 2 Layers en CSS

Document Sample
Hoofdstuk 2 Layers en CSS Powered By Docstoc
					Auteur: F van Kralingen bron :GLR

Hoofdstuk 2        Layers en CSS

Het maken van layers in DW

Ga naar Layout -> Draw APDiv en teken een container -> selecteer en de onderstaande eigenschappen verschijnen




Verklaringen:
L en T is locatie van de layer, W en H= breedte en hoogte, Z=welke layer, vis= Visible, overflow en clip.

BRONCODE:




=>Voorbeeld (opdracht) :”Vakantie Winkel” en ” Krant”

2.2 Voorgeschiedenis HTML

Html 1.0: pagina’s leken op elkaar, grijze achtergrond, Time roman lettertype, blauwe hyperlinks.
Html 2.0: achtergrond kleuren en afbeeldingen, tabellen en formulieren
Html 3.2: enorme uitbreiding aanopmaak mogenlijkheden, frames
Html 4.0: verplaatst de opmaak (css)
Xhtml 1.0 en 1.1: inhoud en opmaakt strikt gescheiden,
Xhtml Mobile 1.0: speciaal voor mobiel platform

Het W3C is het World wide web Consortium is een non-profit organisatie die is opgericht om standaarden te
ontwikkelen voor het web
zie ook: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.3 Het maken van een Stylesheet
Opmaakeigenschappen van een website kunnen gemaakt worden in een Cascade Style Sheet (CSS)
Deze css kan gekoppeld worden aan de website door:

A: CSS in de pagina (tussen <head> en </head>)       OF

<head>




B: Een apart CSS-bestand (bestand.css) in een map CSS in dezelfde directory

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<link href="file:CSS/test.css" rel="stylesheet" type="text/css" /> <=verwijzing naar css-bestand
</head>

<body>
<div id="apDiv1"></div>
</body>
</html>

Openen CSS-panel voor maken van een CSS-sheet




+ is een nieuw sheet
Nieuwe CSS-regel:

Selector type: - class (kan worden toegepast op ieder HTML-element)
              - Id (van toepassing op slechts 1 html element)
              - Tag (wijzigt de definitie van een html elementen XX)
              - Compound (samengesteld op basis van je selectie)
              -
Naam van de selector: - bijv :body, td, th table (veld hieronder geeft omschrijving)

Regeldefinitie: - Alleen dit document (tussen header)
        of      - Nieuwe style-pagina bestand (bestand.css) ->

     Stijlpagina opslaan (zie figuur rechtsboven) -> Definitie van css-regel wordt geopend (zie onder)
2.4 Pagina’s koppelen aan stylesheet

Kies in het CSS-paneel het schakelpictogram en het Attach External Style sheet verschijnt.




Klik op de knop browse en kies het stylesheet dat je aan de pagina wilt koppelen

2.5 Wijzigen van een stylesheet.

Vanuit iedere pagina kan de stylesheet aangepast worden.




2.6 Selector Classes gebruiken

Soms is het handiger om een gedefinieerde style alleen op een bepaalde plek in de pagina toe te passen.
Stel, je wilt de tekst benadrukken door grotere en cursieve letters dan kan dit met een zgn “Custom Style”

. open een bestand
. kies Text ->, CSS Styles ->Edit Style sheet.
. Selekteer het stylesheet en klik op New
. Neem de instellingen over en klik op OK. (je kunt wederom je instellingen vastleggen en opslaan)
. Wanneer de instellingen zijn opgeslagen is het mogelijk deze in de pagina op een geselecteerd
  stuk tekst toe te passen met het menu Text, CSS styles…

2.7. Selector ID en Compound

De derde optie bestaat uit het gericht toekennen van opmaak aan een element op basis van het ID van dat element.
Dus opmaak voor bijvoorbeeld een specifieke div, maar niet geldend voor alle div’s.
                                                                    optie 3: nieuwe css regel met selector ID


De vierde optie die u kunt toepassen is compound. Deze optie maakt het mogelijk om bijvoorbeeld het gebruik van
H1in een tabel een andere opmaak te geven dan buiten de tabel. Een selector bestaat dus uit een combinatie van
HTML-elementen,waarvan een bepaalde opmaak kan worden toegekend.



                                                                  <-Waar staat dit uitklapmenu




Met CSS selectors kun je ook aan hyperlinks een opmaak toekennen, die afhankelijk is van de status van de hyperlink

OEFENING 5:
Maak een nieuw stylesheet met de naam styleopdracht.css en leg daarin de volgende opmaakeigenschappen vast:
-Alle pagina’s krijgen een donkerblauwe achtergrond met lichtgrijze letters van het type Courier New,
 behalve in een tabel daar wordt het standaard lettertype gebruikt.
2.8 De broncode van het Stylesheet
Het herkennen van de broncode is een belangrijk gereedschap om stylesheets op het internet te raadplegen
en wellicht (in aangepaste vorm) te gebruiken.




2.9 Rules, selectors, declaraties, eigenschappen en waarden




2.10 Stylesheets op het web

In de hoofddirectory van een website worden vaak aparte mappen gemaakt voor
o.a. Images, flash en css.

Een stylesheet is makkelijk te herkennen in de Html broncode, de koppeling herken je door LINK
<link href=”stylesheet.css” rel=”stylesheet” type=”text/css”>
Staat er bijv href=”naam/naam.css” dan staat de css in een aperte map!
De map heet dan http://www.naam.nl/css/naam.css

2.11 Stijlen buiten het stijlblad
Er zijn verschillende redenen om stijlen buiten een stijlblad te plaatsen.
Je kunt dan stijlkenmerken in de webpagina zelf plaatsen (deze gaan voor de externe sheet)

Bijv: <head> <title></title> <style> body {background:#000000}</style></head>


2.12 Vermelding in het element (inline)
Je kunt style ook als een attribuut van een element gebruiken, het lijkt dan op een html-toepassing

Bijv: <P style=”color:#00ffff”; font-size:20pt; ”>