Archief - Beginner vraagje

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
H

Homer`

Legacy Member
Dus, ik probeer mezelf wat Dreamweaver aan te leren, maar het lukt niet zo goed... :p

Wat heb ik gedaan:
  • een psd bestand gesliced en geïmporteerd in Adobe DreamWeaver
  • editable content aangeduid
  • een template van gemaakt (klik
  • alle <naam>.html files met de template gemaakt (enkel de files, nog geen content)

Maar nu probeer ik dus content (tekst + foto) toe te voegen aan de index.html, maar het 'verneukt' de lay out nogal.. Het geeft namelijk dit. Als ik enkel tekst er heb staan is het nog OK, maar vanaf die foto is het dus naar de vaantjes... Ook werkt het in firefox niet (lay out niet goed)...

Nog een klein vraagje: hoe krijg je die 'link border' rond de knoppen en de banner weg?
KEEP IN MIND: ik ben een superbeginner dus leg alles alstublief rustig en goed uit.. Dank bij voorbaat :)

Hier is de code, als je het wil weten...
Code: 
<html><!-- InstanceBegin template="/Templates/main_layout.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Layout</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #524B45;
}
-->
</style>
<link href="css/site_layout.css" rel="stylesheet" type="text/css">
<link href="css/site_layout_content.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#site_layout #Table_01 tr td #site_layout_content p {
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	color: #9D958C;
	background-color: #332F2B;
	list-style-type: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top: 0px;
	padding-right: 12px;
	padding-bottom: 0px;
	padding-left: 12px;
}
-->
</style>
<!-- InstanceEndEditable -->
<!-- InstanceParam name="header_img_src" type="URL" value="https://www.beyondgaming.be/forums" -->
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Layout.psd) -->
<div id="site_layout">
  <table width="780" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="21">
        <img src="https://www.beyondgaming.be/forums" width="780" height="15" alt=""></td>
      </tr>
    <tr>
      <td colspan="3" rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="15" height="157" alt=""></td>
      <td colspan="15"><a href="index.html"><img src="https://www.beyondgaming.be/forums" width="750" height="150" alt=""></a></td>
      <td colspan="3" rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="15" height="157" alt=""></td>
      </tr>
    <tr>
      <td colspan="15">
        <img src="https://www.beyondgaming.be/forums" width="750" height="7" alt=""></td>
      </tr>
    <tr>
      <td rowspan="7">
        <img src="https://www.beyondgaming.be/forums" width="6" height="428" alt=""></td>
      <td colspan="3"><a href="index.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="9" height="32" alt=""></td>
      <td><a href="site/wiezijnwij.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="9" height="32" alt=""></td>
      <td colspan="2"><a href="site/showavond.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="9" height="32" alt=""></td>
      <td><a href="site/fotos.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="9" height="32" alt=""></td>
      <td colspan="2"><a href="site/nieuws.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="9" height="32" alt=""></td>
      <td><a href="site/kalender.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="2">
        <img src="https://www.beyondgaming.be/forums" width="9" height="32" alt=""></td>
      <td colspan="3"><a href="site/contact.html"><img src="https://www.beyondgaming.be/forums" width="102" height="26" alt=""></a></td>
      <td rowspan="7">
        <img src="https://www.beyondgaming.be/forums" width="6" height="428" alt=""></td>
      </tr>
    <tr>
      <td colspan="3">
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      <td colspan="2">
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      <td colspan="2">
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      <td colspan="3">
        <img src="https://www.beyondgaming.be/forums" width="102" height="6" alt=""></td>
      </tr>
    <tr>
      <td rowspan="5">
        <img src="https://www.beyondgaming.be/forums" width="8" height="396" alt=""></td>
      <td colspan="17">
        <img src="https://www.beyondgaming.be/forums" width="752" height="10" alt=""></td>
      <td rowspan="5">
        <img src="https://www.beyondgaming.be/forums" width="8" height="396" alt=""></td>
      </tr>
    <tr>
      <td colspan="17">
        <img src="https://www.beyondgaming.be/forums" width="752" height="9" alt=""></td>
      </tr>
    <tr>
      <td rowspan="3">
        <img src="https://www.beyondgaming.be/forums" width="1" height="377" alt=""></td>
      <td colspan="15"><!-- InstanceBeginEditable name="main_content_area" -->
        <div id="site_layout_content">
          <img src="https://www.beyondgaming.be/forums" alt="Showavond 2009" width="398" height="259" border="3" align="left"><p>Destijds ontsproot er uit de Koninklijke Fanfare een groep jeugd die meer wou.   Toen nog onder leiding van Jan Moons en Chris Vandeweyer. Ze noemden zichzelf   <strong>de Notenbalkers</strong>.</p>
          <p>Nu vele jaren, evoluties en revoluties later bestaan wij nog   steeds. We zijn nog altijd een groep jonge muzikanten die meer willen. We zijn   niet echt te vinden voor saai ons blaadje afspelen. We willen muziek combineren   met andere vormen van creativiteit zoals beeld en woord. </p>
          <p>Het belangrijkste is nog dat we proberen dat toegankelijk te   maken voor alle jonge muzikanten. We proberen zo iedereen aan bod te laten   komen, en een groep te vormen waarin de rol van ieders instrument belangrijk is,   al is het nu eerste viool of vierde triangel. We proberen bij iedereen het beste uit de kan te halen, en   toch een leuke sfeer te behouden.</p>
<p> De Notenbalkers bestaan nu uit twee groepen: de <strong>jeugdband</strong> (   blazers begeleid door drums en klein percussie) o.l.v. Kurt Goossens en de   <strong>drumband</strong> (percussieorkest) o.l.v. Jan Janssens.</p>
        </div>
      <!-- InstanceEndEditable --></td>
      <td rowspan="3">
        <img src="https://www.beyondgaming.be/forums" width="1" height="377" alt=""></td>
      </tr>
    <tr>
      <td colspan="15">
        <img src="https://www.beyondgaming.be/forums" width="750" height="31" alt=""></td>
      </tr>
    <tr>
      <td colspan="5">
        <img src="https://www.beyondgaming.be/forums" width="261" height="21" alt=""></td>
      <td colspan="5">
        <img src="https://www.beyondgaming.be/forums" width="252" height="21" alt=""></td>
      <td colspan="5">
        <img src="https://www.beyondgaming.be/forums" width="237" height="21" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="6" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="8" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="1" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="93" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="9" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="102" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="9" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="48" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="54" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="9" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="102" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="9" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="78" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="24" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="9" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="102" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="9" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="93" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="1" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="8" height="1" alt=""></td>
      <td>
        <img src="https://www.beyondgaming.be/forums" width="6" height="1" alt=""></td>
      </tr>
  </table>
</div>
<!-- End Save for Web Slices -->
</body>
<!-- InstanceEnd --></html>

Ik veronderstel dat da hier vanzelf 9lives heeft gezet... in Code.. :p
C

Curahee Q

Legacy Member
Wij zijn dat wel niet zo graag een design dat in tables is opgebouwd... Dat is dus het nadeel aan dreamweaver en andere wysiwyg editors. Als iemand zo een editor kent die 100% goede code levert loop ik in mijnen blote van hier thuis naar antwerpen...
D

Drone

Legacy Member
Ik zou photoshop of dreamweaver de code niet laten schrijven maar het zelf doen. Probleem met html als dit is dat het erg lastig is om jou te helpen omdat de code zo chaotisch en slecht is. Html en css is echt niet zo moeilijk als het lijkt en het geeft veel meer controle dan dreamweaver of photoshop.

Ik zou heel simpel beginnen met een leeg html document in dreamweaver. Het eerste wat je dan doet is de bruine achtergrond instellen via css en misschien de pagina container aanmaken en die de juist kleur geven en centreren. Als dat lukt zet het dan eens online en post een link naar het document hier zodat we het eens kunnen nakijken. Daarna kan je de header aanmaken en eventueel de links er in zetten.

Als je het toch via WYSIWYG wilt doen zet dan alles eens online dat maakt het voor ons gemakkelijker om het na te kijken.
H

Homer`

Legacy Member
Curahee Q zei:
Wij zijn dat wel niet zo graag een design dat in tables is opgebouwd... Dat is dus het nadeel aan dreamweaver en andere wysiwyg editors. Als iemand zo een editor kent die 100% goede code levert loop ik in mijnen blote van hier thuis naar antwerpen...
Klik om te vergroten...

Werkt niet alles met tables? (leek) :wtf:

@ Drone: zal is wat proberen..
C

Curahee Q

Legacy Member
Homer` zei:
Werkt niet alles met tables? (leek) :wtf:
Klik om te vergroten...

Je moet altijd zo denken, gebruik de componenten voor wat ze dienen. Tabellen zoals de naam het zegt wordt gebruikt om een tabel op te bouwen. Bijvoorbeeld om gegevens te laten zien uit een database of dergelijke. Een list wordt dan weer gebruikt om een lijst op te bouwen, unordered of ordered. En div's worden gebruikt om het design te maken. Dit alles in samenwerking met css geeft veel meer controle...
H

Homer`

Legacy Member
Dat was een van m'n volgende vragen.. Ik snap het concept 'div' niet. Ik zie het in superveel codes in tutorials voorkomen, maar wordt nooit uitgelegd... :s Weet dus ook niet wanneer ik het moet gebruiken of dergelijke...
X

Xavez

Legacy Member
Homer` zei:
Dat was een van m'n volgende vragen.. Ik snap het concept 'div' niet. Ik zie het in superveel codes in tutorials voorkomen, maar wordt nooit uitgelegd... :s Weet dus ook niet wanneer ik het moet gebruiken of dergelijke...
Klik om te vergroten...

Zoals hierboven gezegd moet je het web anders bekijken. Het semantisch gedeelte geeft een bepaalde waarde aan elk object. Om goed te zijn maak je éérst de (x)html-pagina, zonder opmaak en geef je elk element de juiste tag mee: <h1> voor je hoofdtitel, <h2>-<h6> voor subtitels, <strong> voor een benadrukt woord, <div> voor een division enzovoort. Binnenkort komt er dan ook nog eens (x)html 5 aan, waarin er elementen als <nav> geïntroduceerd worden, maar dat is nog niet helemaal aan de orde voor een leek denk ik.

Let wel: het voorgaande is in een ideale situatie. Meestal heb je toch nog hier of daar overbodige elementen zoals <b> of <div>'s die eigenlijk helemaal geen inhoud hebben. De "regels" mogen gerust doorbroken worden, maar je moet eerst weten wat het ideaal is waar je naar moet streven natuurlijk! Als je echt geïnteresseerd bent zou ik zeker voor het boek Zeldman: Designing With Web Standards, 2nd Edition gaan. Dat legt op een heel begrijpelijke manier uit waarnaar het web geëvolueerd is over de jaren heen.
J

Jerre Muesli

Legacy Member
Mooie uitleg maar het legt een leek niet uit wat een div nu juist is volgens mij.
Ik heb de eerste de beste site genomen, maar ik denk dat deze tutorial je wel kan wijzer maken.
a

azerty201

Legacy Member
Dus, ik probeer mezelf wat Dreamweaver aan te leren, maar het lukt niet zo goed...

Wat heb ik gedaan:
een psd bestand gesliced en geïmporteerd in Adobe DreamWeaver
editable content aangeduid
een template van gemaakt (klik
alle <naam>.html files met de template gemaakt (enkel de files, nog geen content)

Maar nu probeer ik dus content (tekst + foto) toe te voegen aan de index.html, maar het 'verneukt' de lay out nogal.. Het geeft namelijk dit. Als ik enkel tekst er heb staan is het nog OK, maar vanaf die foto is het dus naar de vaantjes... Ook werkt het in firefox niet (lay out niet goed)...

Nog een klein vraagje: hoe krijg je die 'link border' rond de knoppen en de banner weg?
KEEP IN MIND: ik ben een superbeginner dus leg alles alstublief rustig en goed uit.. Dank bij voorbaat

Hier is de code, als je het wil weten...
Klik om te vergroten...



Zoals eerder gezegd is de code geschreven door photoshop niet zo handig...
In plaats van tabellen kan je beter je website/template opbouwen met DIVs, beschouw het als containers of afgebakende vlakken waarin je later je inhoud gaat plaatsen (die dan nog eens veel makkelijker aanpasbaar zijn m.b.v. css).

Maak een nieuw dreamweaver document aan, en ga naar de toolbox -> Layout onderdeel en experimenteer wat met de DIV en apDIV tools, zet er wat foto's in of text en probeer nadien eens het geraamte van je originele template na te bootsen. Je kan DIVs net als tabellen in elkaar nestelen. Vergeet ook niet geregeld naar de code te kijken, zien wat er gebeurt: Voor elke div wordt een css regel geplaatst (met o.a. de afmetingen, positiestijl, etc..). Die kan je handmatig of via dreamweaver makkelijk aanpassen en uitbreiden.

Misschien handiger om op youtube eens te kijken naar videotutorials, bvb:
YouTube - Designing with Divs Layers & CSS Styles: Dreamweaver Tutorial!
dan wordt het een pak duidelijker, en kan je eveneens ook zien hoe je css regels kan aanmaken en/of wijzigen (bijvoorbeeld om er voor te zorgen dat text zich niet uitvuld zoals in je eerdere screenshot, of om de border voor alle afbeeldingen op '0' te zetten).

hopelijk helpt het wat
b

b0rt

Legacy Member
azerty201 zei:
Zoals eerder gezegd is de code geschreven door photoshop niet zo handig...
In plaats van tabellen kan je beter je website/template opbouwen met DIVs, beschouw het als containers of afgebakende vlakken waarin je later je inhoud gaat plaatsen (die dan nog eens veel makkelijker aanpasbaar zijn m.b.v. css).

Maak een nieuw dreamweaver document aan, en ga naar de toolbox -> Layout onderdeel en experimenteer wat met de DIV en apDIV tools, zet er wat foto's in of text en probeer nadien eens het geraamte van je originele template na te bootsen. Je kan DIVs net als tabellen in elkaar nestelen. Vergeet ook niet geregeld naar de code te kijken, zien wat er gebeurt: Voor elke div wordt een css regel geplaatst (met o.a. de afmetingen, positiestijl, etc..). Die kan je handmatig of via dreamweaver makkelijk aanpassen en uitbreiden.

Misschien handiger om op youtube eens te kijken naar videotutorials, bvb:
YouTube - Designing with Divs Layers & CSS Styles: Dreamweaver Tutorial!
dan wordt het een pak duidelijker, en kan je eveneens ook zien hoe je css regels kan aanmaken en/of wijzigen (bijvoorbeeld om er voor te zorgen dat text zich niet uitvuld zoals in je eerdere screenshot, of om de border voor alle afbeeldingen op '0' te zetten).

hopelijk helpt het wat
Klik om te vergroten...
Hij moet sowieso zijn werkwijze veranderen, dan lijkt het me beter om ff door te bijten en het direct op de goede manier te leren (met externe css-files enzo) ipv dreamweaver dit te laten doen, aangezien dw nogal slordig omgaat met css (heel veel inline-code en overbodige spullen enzo).
D

Drone

Legacy Member
Het probleem is niet de editor maar de kennis van html/css. Een editor met intellisense kan wel helpen om properties te checken. Maar je zou even goed de website met notepad kunnen maken.
H

Homer`

Legacy Member
Wel, het gemakkelijke aan Publisher is dat het in het Nederlands is, ik gewoon zoals met Word kan werken. Enige downside: kan de pagina niet centreren, maar dat zal ik nog proberen veranderen in de code zelf.

Ik weet dat je een site in principe gewoon in notepad kan schrijven, maar 'k wil niet eens weten wat dat geeft als ik dat probeer. Ik weet zeer weinig over html/css/php maar genoeg om te weten dat ik het niet zelf ga proberen schrijven.. :p En voor nu is het genoeg als de site met publisher is gemaakt, denk ik. Eens online (kan nog lang duren) zal ik hier een link posten ofzo..
X

Xavez

Legacy Member
Sjeesh, als je het dan echt amateuristisch wil houden, pak dan ten minste iets als http://sites.google.com/. Alles van Microsoft waar je iets web-related mee kan doen, kan je per definitie beter in de vuilbak gooien :).
H

Homer`

Legacy Member
Xavez zei:
Sjeesh, als je het dan echt amateuristisch wil houden, pak dan ten minste iets als http://sites.google.com/. Alles van Microsoft waar je iets web-related mee kan doen, kan je per definitie beter in de vuilbak gooien :).
Klik om te vergroten...

En waarom? (serieuze vraag)

Ik ben nu een 'opvolger' van een andere site aan het maken, en die vorige site was met frontpage gemaakt. Als jullie echt per se de 'professionals' willen zijn, mij best, maar waarom zou ik, als ik geen tijd noch goesting heb om elk html/CSS/PHP fragment te leren, op weet ik veel welk professionele manier een site proberen werkend te krijgen?

Ik weet er de ballen van, en Publisher laat mij het simpel houden, en het werkt (zoals de frontpage site) dus dat is het simpelst voor mij.


j design zei:
kan ni wachten :niceone:
Klik om te vergroten...

Sarcasm ftw
D

Drone

Legacy Member
Xavez zei:
Sjeesh, als je het dan echt amateuristisch wil houden, pak dan ten minste iets als http://sites.google.com/. Alles van Microsoft waar je iets web-related mee kan doen, kan je per definitie beter in de vuilbak gooien :).
Klik om te vergroten...

Behalve dan Visual Studio wat zowat de beste IDE is :) en waar je zelfs een gratis versie van kan downloaden.

Ik snap wel van waar je komt met die comment, als ik aan MS office en webdesign denk word ik ook niet direct vrolijk. Maar niet alles wat microsoft doet is per definitie slecht.
C

Curahee Q

Legacy Member
Als je dan toch een editor gebruikt, gebruik dan nog liever dreamweaver dan 1 of ander MS program. Het probleem met deze programma's is ook dat ze nooit in alle browsers deftig zullen werken.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan