Opzetten site dreamweaver: [+ updatevraagje]

ModeratorCOLON Global Moderators

Gebruikers-avatar
PP
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 2682
GeregistreerdCOLON 26 Mei 2005 20:15
CONTACTCOLON

Na een mislukte uploadpoging van mijn door frontpage gemaakte website wil ik opnieuw starten met een gemaakt met dreamweaver.
Mijn kennis is nog nul en ik heb een boek gekocht, waarmee ik een eindje hoop te komen.

De bedoeling is een website met een vaste kerninhoud en links en rechts een steunkleur zal ik maar zeggen; de "echte site" gecentreerd in het midden, zodat deze op diverse systemen goed te bekijken is.
Beetje geinspireerd door Marianne.nl (ga hem niet kopieren hoor, maar deze site vind ik een mooie rustige uitstraling hebben) het gaat mij dus alleen om het uitgangspunt zoals ik dat beschreven heb.

Voor ik de boel helemaal verkeerd opzet. Moet ik dan uitgaan van lagen, tabellen of frames (of een combinatie)

Alvast bedankt voor de tips.

PP
Laatst gewijzigd door 1 op PP, in totaal 12 keer gewijzigd.
Gebruikers-avatar
oegemeister
Canon shooter+
Canon shooter+
BerichtenCOLON 606
GeregistreerdCOLON 28 Aug 2005 08:54
WoonplaatsCOLON Almelo

het mooiste is als je css gebruikt

een css bestand zou er zo uit kunnen zient

CodeCOLON Alles selecteren

/* dit is de css file */
body {
   margin:0;
   background-color:black;
}

div#main_container {
   margin: auto;
   width: 800px;
   height:600px;
   font-family: Tahoma;
   font-size: 11px;
   color: red;
   background-color:gray;
}
dan maak je een bestandje index.htm of index.html
en dat doe je ong. op de volgende manier

CodeCOLON Alles selecteren

<html>
<head>
/* hier een include tag voor de css file */
</head>
<body>
<div id='main_container'>
/* alles wat hier staat komt in een 'container' van 800px breed en 600px hoog en deze container is gecentreerd op de pagina */
</div>
</body>
</html>
kijk anders ook es op www.handleidinghtml.nl daar staat ook erg veel informatie.

m. vr. gr.
Sjoerd
[size=75]Apple'tje, Apple'tje, jij bent de mooiste van het land! Go Away Micro$oft![/size]
fokkedeboer
Canon shooter Die Hard
Canon shooter Die Hard
BerichtenCOLON 7378
GeregistreerdCOLON 23 Feb 2005 11:57
WoonplaatsCOLON De Bilt
CONTACTCOLON

Wat Sjoerd schrijft, lijkt me wel goed. Maar probeer frames in elk geval te vermijden! Lijkt handig, is het niet (een subpagina heeft geen eigen URL bijv, printen is vaak lastig, en nog het een en ander)
[size=75]Mijn foto's zijn niet perfect. Maar ik heb er wel lol aan om te proberen dat te bereiken![/size] http://www.fotofokke.nl
Gebruikers-avatar
SantaX
Canon shooter+
Canon shooter+
BerichtenCOLON 630
GeregistreerdCOLON 17 Aug 2006 19:51
WoonplaatsCOLON Stein (LB)

In dreamweaver kun je met tekstvakken werken. Die kun je makkelijk absoluut positioneren, en je kunt in die tekstvakken weer images gooien etc. Ik zou daar eens naar kijken. Ik neem aan dat je dreamweaver gebruikt omdat je zelf niet wil coden, en dan zijn de tekstvakken een heel mooi middel om een goede layout te maken.
[size=75]Gepromoveerd tot uitsmijter op 11 april 2007[/size]
Edge
Canon shooter
Canon shooter
BerichtenCOLON 114
GeregistreerdCOLON 27 Jan 2007 15:48
WoonplaatsCOLON Enschede
CONTACTCOLON

De hele bedoeling van css en html is om opmaak (css) en tekst (html) gescheiden te houden, dit kan ik dan ook zéér aanraden. De tekstvakken waar iedereen het over heeft zijn gewoon layers, <div>.

Frames moet je absoluut niet gebruiken, dit is echt een ramp in meerdere opzichten. Ga gewoon met layers werken met css eraan, dit is het makkelijkst en vaak ook het best! Als je nog een voorbeeld wilt zien van een site die helemaal in kladblok gemaakt is met alleen divjes en css, kijk dan op www.valleireizen.nl, die site heb ik gemaakt voor een touringcarbedrijf. Hopelijk heb je er wat aan :P
[size=75]Canon [color=#006699] EOS 350D[/color] | Canon [color=#006699]EF-S 18-55mm F/3.5-5.6 II[/color] | Canon [color=#006699]EF 50mm f/1.8 II[/color][/size]
Soron
Canon shooter pro
Canon shooter pro
BerichtenCOLON 1719
GeregistreerdCOLON 29 Mei 2006 14:13
WoonplaatsCOLON Leeuwarden / Klazienaveen
CONTACTCOLON

Wat er toch zo bijzonder is aan kladblok, is mij nog altijd een raadsel. Als je echt je tijd wil verdoen moet je kladblok gebruiken. Gewoon coderen kan ook binnen dreamweaver en is veel makkelijker. DW is alles behalve alleen een WYSIWYG-editor.

Wil je het goed doen... lees je dan in over (x)html en css. Dat is inderaad de standaard om een site te bouwen. Div's zijn niks anders dan blokken die je een kleur kan geven, een rand, waar je tekst en afbeeldingen in kan zetten, of andere blokken, zoals andere divs, links, en dergelijke. Houd dus goed in de gaten hoe je ontwerp uit deze blokken is opgebouwd en zet ze neer op de pagina doormiddel van CSS. Dan ben je al een heel eind en hoef je ze alleen maar te vullen. xhtml en css is the key en niet eens zo heel moeilijk om te begrijpen. Gewoon maar eens proberen dus.

Frames nooit meer aan beginnen. Tabellen liever ook niet. Tabellen alleen maar gebruiken waar ze voor bedoeld zijn, namelijk om inhoud in een tabel te tonen. Niet om je site mee op te zetten.

Succes :)
Gebruikers-avatar
oegemeister
Canon shooter+
Canon shooter+
BerichtenCOLON 606
GeregistreerdCOLON 28 Aug 2005 08:54
WoonplaatsCOLON Almelo

Soron schreefCOLONWat er toch zo bijzonder is aan kladblok, is mij nog altijd een raadsel. Als je echt je tijd wil verdoen moet je kladblok gebruiken. Gewoon coderen kan ook binnen dreamweaver en is veel makkelijker. DW is alles behalve alleen een WYSIWYG-editor.
Hoezo is coderen in dreamweaver veel makkelijker? Ik gebruik ook dreamweaver, maar alleen omdat die een handige ftp ondersteuning heeft. Ik weet wel zeker dat ik sneller een website kan uittypen dan 'm met de muis in dreamweaver in elkaar 'klikken'..... Dat is dus zeker geen tijd verdoen. Maar gewoon coderen is in dreamweaver niet echt veel makkelijker.... 't enige voordeel is de color coding.... Het grote voordel van dreamweaver is dat deze als je niet zelf tikt 'relatief' nette code uitspuugt (dit itt Frontpage)...

m. vr. gr.
Sjoerd
[size=75]Apple'tje, Apple'tje, jij bent de mooiste van het land! Go Away Micro$oft![/size]
Soron
Canon shooter pro
Canon shooter pro
BerichtenCOLON 1719
GeregistreerdCOLON 29 Mei 2006 14:13
WoonplaatsCOLON Leeuwarden / Klazienaveen
CONTACTCOLON

Kladblok is overrated. Echt zo van "kijk mij eens coole html kunnen kloppen". En wat is er zo bijzonder aan, helemaal niks. In dreamweaver kan je ook gewoon typen in de code en kan ik meestal in minder toetsaanslagen de code neerzetten.

Hoe je die code neerkwakt is echt niet relevant. Toch is het voor sommige zon enorme prestatie dat ze kladblok hebben gebruikt. Terwijl de vormgeving van elle kanten schort. Dat is veel moeilijker zelf dan wat html kloppen. Dus.. ga nou geen kladblok gebruiken om te laten zien hoe goed je html is. Is niet relevant. :) Dat wou ik er mee zeggen. Dank u...
Gebruikers-avatar
SantaX
Canon shooter+
Canon shooter+
BerichtenCOLON 630
GeregistreerdCOLON 17 Aug 2006 19:51
WoonplaatsCOLON Stein (LB)

Ik kan me goed voorstellen dat mensen de code zelf invoeren. Doe ik zelf ook. Maar ik gebruik dan wel een fatsoenlijke editor ervoor. Bluefish in mijn geval. Handige kleurcodes, sniplets archief, tags vanuit de taakbalk etc etc... Kortom een hele mooie tool, die je werk uit handen neemt waar het kan en je toch alle vrijheid geeft.
[size=75]Gepromoveerd tot uitsmijter op 11 april 2007[/size]
Gebruikers-avatar
PP
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 2682
GeregistreerdCOLON 26 Mei 2005 20:15
CONTACTCOLON

Effe tussenstand samenvattend dus:

Geen frames!!
Uitgangspunt layers evt aangevuld met tabellen
Eerst standaard layout maken en opslaan in een CSS?

Waar ik met frontpage de mist in ging is het feit dat je met gemeenschappelijke randen kon/moest werken, waardoor ik de hoofdlay-out niet netjes gecentreerd kreeg.

Hoe pakje dit met dreamweaver aan.
Als je bv layers maakt kun je daarbinnen wel centreren bv maar hoe centreer je de layers zelf over de gehele breedte van het scherm (je kunt toch alleen pixels aangeven?)

PP
eos4all
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 4136
GeregistreerdCOLON 24 Feb 2005 18:19

het fotogerelateerde gehalte van dit topic is extreem laag, als al aanwezig.

Als het dan ook nog alleen over wel/niet kladblok gaat :(

Kun je de vraag niet beter stellen op een van de ziljoen "hoe bouw ik een site" forum's?
Laatst gewijzigd door 1 op eos4all, in totaal 28 keer gewijzigd.
schoffie
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 10370
GeregistreerdCOLON 26 Aug 2005 08:15
CONTACTCOLON

ben blij dat jij het schrijft... hoef ik niet weer de boeman te spelen...
www.johanvanderwielen.nl
Gebruikers-avatar
PP
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 2682
GeregistreerdCOLON 26 Mei 2005 20:15
CONTACTCOLON

I'm so sorry!

PP
Soron
Canon shooter pro
Canon shooter pro
BerichtenCOLON 1719
GeregistreerdCOLON 29 Mei 2006 14:13
WoonplaatsCOLON Leeuwarden / Klazienaveen
CONTACTCOLON

PP schreefCOLONEffe tussenstand samenvattend dus:

Geen frames!!
Uitgangspunt layers evt aangevuld met tabellen
Eerst standaard layout maken en opslaan in een CSS?

Waar ik met frontpage de mist in ging is het feit dat je met gemeenschappelijke randen kon/moest werken, waardoor ik de hoofdlay-out niet netjes gecentreerd kreeg.

Hoe pakje dit met dreamweaver aan.
Als je bv layers maakt kun je daarbinnen wel centreren bv maar hoe centreer je de layers zelf over de gehele breedte van het scherm (je kunt toch alleen pixels aangeven?)

PP
Dit is niet zo moeilijk... zoals zo vaak met website, als je maar weet hoe het werkt.

Ik neem aan dat je je website een vast breedte heeft, zeg maar 750 pixel breed en dat je die altijd in het midden wilt hebben. Zoals ik zei zijn veel elementen in HTML niks anders dan blokken. Wat je nou doet; je neemt een grote div waar je je hele site instopt. Dit is een div die om al je andere elementen heen zit. Die div geef je met CSS de vaste breedte en geeft hem een automatische margin. De margin is de hoeveelheid ruimte om het blokelement heen. Bij je centrale div wil je die automatisch hebben. Dan staat hij altijd in het midden.

In je html wordt dat dus:

CodeCOLON Alles selecteren

<div id="mainContainer"> Inhoud van je site hiero </div>
in je CSS neem je dan de eigenschappen op van de div met id "mainContainer"

CodeCOLON Alles selecteren

#mainContainer {
     width: 750px;
     margin: auto;
}
This should do the trick. Succes!
Gebruikers-avatar
PP
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 2682
GeregistreerdCOLON 26 Mei 2005 20:15
CONTACTCOLON

Bedankt Soron,

Nu ga ik een eindje op weg komen denk ik.
weet alleen niets van HTML. Kun je de eigenschap "div" ook benaderen via een dreamweaver optie o.i.d.

PP
Gebruikers-avatar
Koelman
Canon shooter
Canon shooter
BerichtenCOLON 67
GeregistreerdCOLON 08 Aug 2006 16:41
WoonplaatsCOLON Beverwijk
CONTACTCOLON

Beste PP (en de rest),

Vergis je alsjeblieft niet in de moeilijkheidsgraad van het zelf schrijven van HTML en CSS. Vooral in het begin, maar ook later als je steeds meer wilt, loop je tegen behoorlijke problemen aan.

Vooral het verschil in weergeven tussen Internet Explorer en Firefox is een ontiegelijk drama te noemen. Afmetingen van je div's, groottes van text, uitlijning enz. enz. zijn allemaal verschillend. Vooral als je wat gecompliceerde dingen gaat doen, zoals divs in andere divs, loop je het risico je site met één regeltje code te verprutsen.

Ik ben nu ongeveer twee jaar bezig met het zelf schrijven van sites, en ik durf gerust te zeggen dat ik er redelijk goed in ben, maar het soms ontzettend frustrerend is als zelfs de kleinste dingentjes niet lukken.

Voor de notepad en DW freaks hier... :lol: Ik gebruik zelf Notepad ++, een veredeld kladblok die allerlei soorten codes ondersteund en ze, net als DW trouwens, een kleurcode meegeeft, wat de overzichtelijkheid enorm vergroot. Je kan ook Crimson Editor proberen. Dit zijn allemaal speciale textprogjes die gericht zijn op webdesigners/coders.

Maar nogmaals, uit dit topic blijkt naar mijn inziens dat het in elkaar zetten van een site met behulp van HTML en CSS een eitje is. Dit is, vooral voor beginners, echt NIET zo, er kan van alles misgaan. Vooral het programmeren voor IE en FF is killing.....

Succes!
[url]http://www.stefankoelman.nl[/url]
Gebruikers-avatar
Digilike
Canon shooter Die Hard
Canon shooter Die Hard
BerichtenCOLON 6325
GeregistreerdCOLON 26 Nov 2006 21:35

In DreamWeaver kun je een zogeheten template bestand aanmaken. Dat is een bestand waarin je feitelijk de indeling van je hele site kan regelen. Alle nieuwe html pagina's van je website kun je baseren op deze ene template. Ook reeds bestaande html pagina's kun je relateren aan de template, zodat ze het uiterlijk krijgen dat jij wenst. Bij een template kun je css gebruiken maar dat is niet noodzakelijk.

Zelf heb ik een website opgezet voor mijn damclub. Dat heb ik met een tabel (zonder lijnen) gedaan, die 3 kolommen bevat. In de linkerkolom is de navigatiestructuur van de site geregeld, met allemaal links naar de wepagina' s van de website. In de rechterkolom is ruimte gereserveerd voor de paginateksten. De middelste kolom is leeg en heel smal, speciaal bedoeld om het tekstgedeelte en het navigatiegedeelte van elkaar te scheiden.
En dit alles is dus opgeslagen in een templatebestand.

Voordeel van de template is dat je maar op 1 plek iets hoeft te veranderen (bijvoorbeeld een hyperlink van het navigatiegedeelte) en alle html pagina's die op de template zijn gebaseerd veranderen automatisch mee. Je website wordt daardoor én flexibel én gemakkelijk te onderhouden.

Wat betreft tabellen: het gebruik van tabellen daar ben ik een voorstander van. Je kunt namelijk met tabellen heel gemakkelijk tekst en andere elementen fixeren op je webpagina. De indeling van je pagina kun je er gemakkelijk mee regelen. Layers gebruiken kan ook, maar niet iedere browser gaat daar even gemakkelijk mee om. En ook is de manier waarop mensen layers zien afhankelijk van de tekengrootte die ze hebben ingesteld in hun browser. Layers kunnen daardoor elkaar gaan overlappen en dat heeft dan weer tot gevolg dat teksten door elkaar heen kunnen gaan lopen. Bij tabellen heb je dit ongewenste effect niet.
[size=67]Canon 1D MKIII |Canon EF 50 mm 1.8| Canon EF 70-200 f4 [color=#FF0000][b]L[/b][/color] IS USM|Canon EF 24-105 f4 [color=#FF0000][b]L[/b][/color] IS USM|Canon EF 300 f4 [color=#FF0000][b]L[/b][/color] IS USM |Sigma 12-24m|Sigma 70mm macro| [/size]
Gebruikers-avatar
Digilike
Canon shooter Die Hard
Canon shooter Die Hard
BerichtenCOLON 6325
GeregistreerdCOLON 26 Nov 2006 21:35

PP schreefCOLONBedankt Soron,

Nu ga ik een eindje op weg komen denk ik.
weet alleen niets van HTML. Kun je de eigenschap "div" ook benaderen via een dreamweaver optie o.i.d.

PP
In DreamWeaver kun je aangeven of je de pagina wilt zien zoals je die ook op een website ziet. Maar je kunt ook aangeven dat je de onderliggende code wilt zien of dat je een combinatie van beide wilt hebben. In de code kun je rechtstreeks de DIV tag benaderen en alles wat er tussen <DIV> en </DIV> staat. Probeer het gewoon zo eenvoudig mogelijk te houden. DIV is al wat geavanceerdere html code en niet perse nodig.
[size=67]Canon 1D MKIII |Canon EF 50 mm 1.8| Canon EF 70-200 f4 [color=#FF0000][b]L[/b][/color] IS USM|Canon EF 24-105 f4 [color=#FF0000][b]L[/b][/color] IS USM|Canon EF 300 f4 [color=#FF0000][b]L[/b][/color] IS USM |Sigma 12-24m|Sigma 70mm macro| [/size]
Gebruikers-avatar
PP
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 2682
GeregistreerdCOLON 26 Mei 2005 20:15
CONTACTCOLON

Ik zal eens gaan prullen:
Dank iedereen, jullie horen wel wanneer er een testsite online is.

PP
Gebruikers-avatar
PP
Canon shooter pro+
Canon shooter pro+
BerichtenCOLON 2682
GeregistreerdCOLON 26 Mei 2005 20:15
CONTACTCOLON

Deel een is gelukt.
Ik heb een "maincontainer"zullen we maar zeggen.
Nu wil ik deze verder in gaan delen met tabellen.
Deze invoegen gaat best, maar gegevens in die tabeleen krijg ik alleen uitgelijnd op links, center of rechts.
Ofwel het wordt altijd op middenhoogte van de tabel geplaatst.
Kan ik ook per tabel uitlijnen als top, links zodat de tekst of foto bovenaan in de tabel begint, of moet ik altijd daarvoor extra cellen invoegen?

PP
BUTTON_POST_REPLY

Terug naar