Operation Manual
Opmerking:
Naar boven
Opmerking:
Vast
Vloeibaar
Toevoegen aan kop
De voorbeeldcode hierboven is een vereenvoudigde versie van de code waarmee de lay-out met twee kolommen en vaste zijbalk
wordt gemaakt als u een nieuw document maakt met de vooraf ontworpen lay-outs die bij Dreamweaver worden geleverd.
Een pagina met een CSS-lay-out maken
Bij het maken van een nieuwe pagina in Dreamweaver kunt u een pagina maken met een CSS-lay-out. Dreamweaver wordt geleverd met zestien
verschillende CSS-lay-outs waaruit u kunt kiezen. Bovendien kunt u eigen CSS-lay-outs maken en deze opnemen in de configuratiemap zodat ze
verschijnen als lay-outkeuze in het dialoogvenster Nieuw document.
Dreamweaver CSS-lay-outs worden correct weergegeven in de volgende browsers: Firefox (Windows en Macintosh) 1.0, 1.5, 2.0 en 3.6; Internet
Explorer (Windows) 5.5, 6.0, 7.0 en 8.0; Opera (Windows en Macintosh) 8.0, 9.0 en 10.0; Safari 2.0, 3.0 en 4.0 en Chrome 3.0.
Een pagina met een CSS-lay-out maken
1. Selecteer Bestand > Nieuw.
2. In het dialoogvenster Nieuw document selecteert u de categorie Blanco pagina. (Dit is de standaardkeuze.)
3. Als Paginatype selecteert u het soort pagina dat u wenst te maken.
U moet een HTML-paginatype kiezen voor de lay-out. U kunt bijvoorbeeld HTML, ColdFusion®, PHP, enzovoort
selecteren. U kunt geen ActionScript™-, CSS-, Library Item-, JavaScript-, XML-, XSLT- of ColdFusion Component-pagina met
een CSS-indeling maken. De paginatypes in Andere categorie van het dialoogvenster Nieuw document kunnen eveneens
geen CSS-paginalay-outs bevatten.
4. Bij Lay-out kiest u de CSS-lay-out die u wenst te gebruiken. U kunt kiezen uit zestien verschillende lay-outs. Het venster
Beeld toont de lay-out en geeft een korte omschrijving van de gekozen lay-out.
De vooraf ontworpen CSS-indelingen bieden de volgende typen kolommen:
De kolombreedte wordt opgegeven in pixels. De kolom wordt niet groter of kleiner op basis van de grootte van de
browser of de tekstinstellingen van de bezoeker van de site.
De kolombreedte wordt opgegeven als een percentage van de breedte van het browservenster van de bezoeker
van de site. De kolombreedte wordt automatisch aangepast als de bezoeker van de site de browser breder of smaller maakt,
maar wordt niet aangepast als de bezoeker van de site de tekstinstellingen wijzigt.
5. Selecteer een documenttype uit het pop-upmenu DocType.
6. Selecteer een locatie voor de CSS van de lay-out uit Lay-out CSS in het pop-upmenu.
Hiermee wordt CSS voor de indeling toegevoegd aan de kop van de pagina die u maakt.
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
207