Lay-out vraag

Status
Niet open voor verdere reacties.
P

Pete033

Gebruiker
Lid geworden
20 aug 2009
Berichten
5
Hallo,

Ik hoop dat iemand mij kan helpen met het volgende:

Ik wil graag een site maken met de volgende lay-out:

http://www.sophie-y.com/album.php

Kan iemand mij hiermee helpen? In de meeste cursussen wordt verwezen naar een standaard sjabloon met aan de linkerkant een menu, een header en footer maar ik zou graag willen weten hoe ik een lay-out kan maken zoals in het voorbeeld. Met name de scrollbalk met fotogalerij.

Eerste post dus ik hoop dat ik niks verkeerds heb gevraagd/gepost:)
 
Als je dreamwaver gebruikt, (wat waarschijnlijk het geval is) kun je zoals je al zei een standaard lay-out gebruiken.

Dan zoek je naar je css bestand en kijk je hoe hij het gemaakt heeft.:D
 
Bedankt voor je antwoord.

Ik gebruik inderdaad dreamweaver (cs4). Ik begrijp dat het in css zit maar de vraag is Hoe maak ik het aan??

Ik heb het nu met lagen geprobeert maar dan krijg ik alle afbeeldingen onder elkaar met een scroll balk aan de rechterkant. Ik zit dus volgens mij wel in de goede richting te zoeken:confused:
 
Als je in dreamwaver een nieuw bestand kiest:

dan zoek je in HTML een goede dan kies je onderin nieuw css bestand aanmaken. dan kies je waar je het wilt opslaan en klaar.
 
Nogmaals bedankt voor je antwoord:thumb:
Maar dit weet ik allemaal al via mijn dreanmweaver handboeken.

Wat nu eigenlijk mijn vraag is is het volgende:

Hoe kan ik zo`n fotoalbum/boek maken zoals in de voorbeeldsite. Dus de foto`s naast elkaar met de scrollbalk onderaan??

Hoop dat je deze vraag kunt beantwoorden:)

p.s
Ik denk niet dat je zo`n site kunt maken met de voorbeeld sjablonen in dreamweaver. Volgens mij kun je dan beter eerst de lay-out maken met lagen (AP DIV) en deze lay-out vervolgens als een sjabloon opslaan.
 
Hoi Pete,
rickrottweiler zei eerder al:
Dan zoek je naar je css bestand en kijk je hoe hij het gemaakt heeft. :D
Klik om te vergroten...
Want websites zijn heel verradelijk. Hoezo? Ze verraden altijd zichzelf ... via de broncode!
Wat hebben ze op sophie-y.com/album.php gedaan?
  1. Gooi het slot eraf en open de broncode van sophie.
  2. Waar zit het rijtje foto's?
  3. Kennelijk in de tabel van regel 30, want daar zitten alle .jpg'tjes in.
  4. Klopt, dat moet een hele lange tabel zijn, want alle cellen hebben breedtes van 300px tot soms 675px.
  5. Vraag is nu: hoe is deze tabel vormgegeven?
  6. In de html staat in de table style niets wat over breedtes gaat.
  7. De <div id="mainContent">, waar de tabel in verpakt zit, heeft in de html óók geen styles.
  8. Dan moeten we het hogerop zoeken.
  9. Klopt: in de head! ;)
  10. Daar staat de verwijzing naar het stylesheet sy_alg.css, en naar sy_ie6.css.
  11. Er zit ook nog javascript in, maar laten we eerst maar eens het algemene stylesheet proberen.
  12. Open sy_alg.css uit de map css, dus www.sophie-y.com/css/sy_alg.css
  13. We speuren naar #mainContent.
  14. We vinden:
Code: 
[font=courier]#mainContent {
   width:100%;
   height:auto;
   overflow:auto;
   margin-top:-20px;
}[/font]
  • Aha,de mainContent (waar de tabel met foto's in zit) heeft een breedte van 100%.
  • De tabel mag dus nooit breder dan het scherm worden.
  • De hoogte van de tabel gaat automatisch, maar dat zoeken we niet.
  • De margin-top is 20px omhoog, dat zoeken we ook niet.
  • Blijft over: overflow:auto. Dat zou het moeten zijn!
  • Maar wat is overflow (in NL: "overvloeien")?
  • Dat zoeken we op! Bv. in de handleiding html.
  • Afdeling CSS, eigenschappen, klik: Overflow.
  • Kassa! "Met de overflow eigenschap wordt bepaald wat er gebeurt, als de inhoud (...) de opgegeven hoogte of breedte ervan te boven gaat."
  • Even naar beneden scrollen: daar staan de voorbeeldjes al. :)

Met vriendelijke groet,
Sherlock C.S.S. Hunter
 
Bedankt voor je antwoord!! Ben nu al een stuk verder gekomen. Ben een beginnend websitemaker maar dat had je vast al door:D

Ik heb nu een sjabloom met lagen gemaakt. Wil er dan per sitepagina een tabel in plaatsen en daar de foto`s in plaatsen.

Is dit een handige manier of??

Gaat nog niet helemaal goed met het maken van het fotoalbum maar zal nog even wat knutselen. Ben helaas niet zo goed met het werken in de code weegave:(
 
Je leert vanzelf goed omgaan met de code.

Je moet zoveel mogelijk proberen met de code te doen, en alles wat niet lukt kun je in dreamweaver in voorbeeld weergave aanpassen.

Het is goed dat je er mee bezig bent en vragen stelt.
 
Ja, de code-weergave gaat zeker wennen! Langzaam maar zeker kom je steeds meer te weten over wat die codes nou eigenlijk betekenen. :)

Verder zou ik niet al te veel vertrouwen op de voorbeeld-weergave van Dreamweaver (of een andere html-editor). Het beste is om elke test-versie te uploaden, en dan "in het echt" met een browser te bekijken. D.w.z.: in Firefox, om te zien wat goede browsers ervan maken, en ook een keer in Internet Explorer, om te zien wat die ervan bakt (kan wel eens verschillen...).
Voor je foto-album heb ik een paar testpagina's gemaakt à la Sophie, met een schuivende fotostrook:
Zie de broncode (code-view!) voor hoe dit gedaan is. In de tweede pagina zitten in de broncode wat verklaringen van hoe en waarom.

Succes!
CSShunter
 
Bedankt! Ik zal hiermee even testen.

Ik heb zelf via via al wat codes gekregen voor het aanmaken van het fotoalbum maar dit functioneert niet helemaal naar wens als de webpagina op een groter scherm wordt geopend.

De volgende code heb ik gekregen:

In de header:
<style>
#scrol{
overflow: auto;}
</style>


In de layer:
<div id="scrol">
<table style="margin:0; padding:0; border:none;">

<td><img src="foto.jpg" height=450><br>naamonderdefoto</td>

</tr>
</table>
</div>


Dit werkt op een laptop scherm maar als ik de pagina op een andere pc met een groter scherm open krijg ik aan de rechterkant een schuifbalk en dat wil ik niet!

Tevens krijg ik dan boven de foto`s de style te zien:

<style>
#scrol{
overflow: auto;}
</style>

Dit wil ik natuurlijk ook niet!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan