Alvorens ik begin: welke programma's?

Status
Niet open voor verdere reacties.

theoo

Gebruiker
Lid geworden
13 mrt 2007
Berichten
19
Hallo,

Ik heb een (m.i. eenvoudig) ontwerp gemaakt in Photoshop en wil dit nu 'omzetten' naar een website. Welke programma's gebruik ik daarvoor het beste? Aangezien ik nog nooit een template (Joomla) of theme (Wordpress) heb gezien die op mijn ontwerp lijkt, wil ik de website bouwen in Dreamweaver. Ik meende dat dit samen kan gaan met een CMS van Joomla of Wordpress; is dat juist? Zo ja, wat is dan aan te bevelen? Maak ik een goede start als ik eerst eens Joomla (verder) probeer te installeren?

NB: Ik ben volkomen beginner in het bouwen van websites, wel heb ik diverse websites tekstueel beheerd en minimale html of XML toegepast.

groet, Theo
 
Met adobeFireworks, kun je je template opdelen in vakken. Ik weet niet of dit met photoshop ook kan?
deze kun je dan direct exporteren naar html, en dan heb je het begin in dreamweaver al.
Dan is het gewoon elk vak invullen en de links aan elkaar plakken.
Veel meer ervaring heb ik er ook niet mee.
 
Mijn inziens is en blijft Notepad de beste HTML editor. Je moet alleen wel code kunnen typen.
 
Notepad++ is altijd wel een handig programma, mits je de code herkent zoals eerder al aangegeven. Dreamweaver raad ik af, is niet praktisch.
Met photoshop kan je met de slice tool de template opdelen in vakken en opslaan als html, let wel op dat als je bijv. een wit vlak heb, je dit ook kan realiseren in plain code.
dus je hoeft niet alles te slicen. Als je nog niet bekend bent met HTML/XML/CSS dan zou ik het CMS gedeelte maar even achterwege laten, want als je een eigen template upload naar joomla/wordpress dan moet je ook dingen aanpassen in je templateDetails.xml en je moet posities aangeven, zodat je later in joomla de positie kan kiezen en dan komt het menu bijvoorbeeld op de plek te staan die jij in je CSS hebt aangegeven.

Oefen eerst gewoon met een normale HTML/CSS website en ga dan pas over naar een CMS systeem.


Groeten,
 
@goedlichtJoost: Met Fireworks-tutorials op YouTube ben ik me aan het oriënteren wat ik zoal kan met dat programma. Het lijkt me op het eerste gezicht een meerwaarde hebben tov Photoshop, dus ik zal me er nog eens verder in verdiepen.
@MicMokum: Codes aanpassen kan ik enigszins, maar de opbouw bedenken from scratch is voor mij teveel gevraagd - al helemaal wanneer ik niet gemakkelijk kan switchen tussen html en het resultaat. Ik denk dat daarom het kladblok/notepad voor mij te abstract is.
@jefkebreda: Fijn te horen dat Photoshop geschikt is voor het bouwen van een site. Het afraden van CMS neem ik graag ter harte.
Houdt dat in dat ik geen Joomla of Wordpress dan nodig heb?
Wat is er niet praktisch aan Dreamweaver? (ik dacht dat DW hiervoor juist het programma bij uitstek was)

Dank voor de tips - meer adviezen blijven welkom voor een starter-die-niet-met-templates-werken-wil.
 
Nouja iedereen heeft een andere smaak he, ik vind persoonlijk notepad++ makkelijk werken en het is gewoon gratis.
Joomla/Wordpress kan je altijd proberen kan geen kwaad toch ;)

maar het beste is gewoon om eerst een template gewoon met HTML/CSS online te zetten.
 
Hoi Theoo,
... meer adviezen blijven welkom voor een starter-die-niet-met-templates-werken-wil.
Zelf een template bouwen (want daar komt het op neer) vanaf een eigen getekend ontwerp is nog niet zo eenvoudig voor een starter. :rolleyes:

Omzet-programma's
  • Voordeel: ze nemen je werk uit handen, je hoeft niet precies te weten hoe je het qua codering moet doen.
  • Nadeel: ze gaan je ontwerp opdelen ("slicen") in verschillende background-afbeeldingen die ze op de pagina plaatsen. Meestal doen ze dat door de pagina een tabel-structuur te geven, en dan worden de tabel-cellen met die achtergrond-partjes gevuld. Maar een tabel-structuur is niet bedoeld voor opmaak, en werkt ook niet lekker.
    De html-code komt bomvol met onoverzichtelijke tabel-toestanden te staan, en dat dan op elke pagina. Bij een iets ander pagina moet ook opnieuw gesliced worden. - Iets aan de opmaak veranderen moet ook op elke pagina opnieuw gebeuren.
    Ook komen er ontzettend veel eigenlijk overbodige mini-cellen op de pagina, omdat de opdeling van een tabel in rijen en kolommen gaat en alleen maar rechthoekjes kent. Zitten er in een rij bv. 3 kolommen, dan moet de volgende rij ook 3 kolommen hebben om goed uit te komen. Of je moet cellen gaan samenvoegen, maar dat weet het slice-programma niet: dat weet niet hoe jij je pagina er uit wilt laten zien.
    Ook komen er problemen als een tabelcel (bv. voor een tekstblok op de pagina) moet kunnen groeien of krimpen n.a.v. de hoeveelheid tekst die geplaatst wordt. Dan is er te veel of te weinig achtergrond, of sluit die niet meer aan op de rest van de pagina...
    Of het gaat niet goed bij een andere resolutie dan waarop de pagina gemaakt is. Plus een redelijke kans dat het niet goed cross-browser is (Internet Explorer, of een versie daarvan, heeft vaak eigen opvattingen over tabel-opmaak).
    - Ik doe het nooit op die manier!

Notepad++ e.a. text-editors
  • Voordeel: je kan alles precies zo maken als je wil.
  • Nadeel: je moet precies weten hoe je het moet doen: zelf het ontwerp kunnen opdelen in handige partjes (eventueel met ingebouwde verlengstukjes of herhaal-stukjes) en die in html-code en css-code kunnen omzetten.

Dreamweaver e.a. WYSIWYG-editors
  • Voordeel: er kan qua codering werk uit handen genomen worden, en je kan makkelijk wisselen tussen ontwerp-weergave en code-weergave.
  • Nadeel: als DW of een andere editor het op zijn eigen manier gaat doen, heb je vrij grote kans dat je een onwerkbare pagina krijgt (bv. omdat alle indelingsblokken een absolute positie krijgen, of een vaste hoogte en/of breedte, en niet makkelijk gevuld kunnen worden zonder de rest aan te tasten).
    Dwz: je moet bij dit soort programma's eveneens precies weten hoe je het moet doen: om de editor waar nodig te kunnen bijsturen!

Joomla, Wordpress of een ander CMS
Voordeel: het aanmaken en beheren van pagina's en berichten kan snel en vrijwel automatisch.
Nadeel: een eigen template moet passen in de structuur van het CMS, en daarvoor moet je precies de CMS-structuur kennen, en hoe je die moet aanpassen (wat nogal gecompliceerd kan zijn: alles staat op verschillende plaatsen en heeft eigen variabelen).
D.w.z. naast precies weten wat je wilt en html- en css-inzicht is dan ook kennis van het CMS-systeem en van php nodig, want daar werken CMS'sen meestal mee.

========
Conclusie:
Voor een goed eigen template zal je je moeten verdiepen in html en css. Voor een starter vraagt dat best wat studie.
Meteen een Joomla-template o.i.d. willen maken/aanpassen is denk ik te hoog gegrepen. Inderdaad: eerst maar eens met html en css alleen.


PS: Als het echt een heel eenvoudig ontwerp is, kan het nog wel eens meevallen. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi Theoo,

Zelf een template bouwen (want daar komt het op neer) vanaf een eigen getekend ontwerp is nog niet zo eenvoudig voor een starter. :rolleyes:

Omzet-programma's
  • Voordeel: ze nemen je werk uit handen, je hoeft niet precies te weten hoe je het qua codering moet doen.
  • Nadeel: ze gaan je ontwerp opdelen ("slicen") in verschillende background-afbeeldingen die ze op de pagina plaatsen. Meestal doen ze dat door de pagina een tabel-structuur te geven, en dan worden de tabel-cellen met die achtergrond-partjes gevuld. Maar een tabel-structuur is niet bedoeld voor opmaak, en werkt ook niet lekker.
    De html-code komt bomvol met onoverzichtelijke tabel-toestanden te staan, en dat dan op elke pagina. Bij een iets ander pagina moet ook opnieuw gesliced worden. - Iets aan de opmaak veranderen moet ook op elke pagina opnieuw gebeuren.
    Ook komen er ontzettend veel eigenlijk overbodige mini-cellen op de pagina, omdat de opdeling van een tabel in rijen en kolommen gaat en alleen maar rechthoekjes kent. Zitten er in een rij bv. 3 kolommen, dan moet de volgende rij ook 3 kolommen hebben om goed uit te komen. Of je moet cellen gaan samenvoegen, maar dat weet het slice-programma niet: dat weet niet hoe jij je pagina er uit wilt laten zien.
    Ook komen er problemen als een tabelcel (bv. voor een tekstblok op de pagina) moet kunnen groeien of krimpen n.a.v. de hoeveelheid tekst die geplaatst wordt. Dan is er te veel of te weinig achtergrond, of sluit die niet meer aan op de rest van de pagina...
    Of het gaat niet goed bij een andere resolutie dan waarop de pagina gemaakt is. Plus een redelijke kans dat het niet goed cross-browser is (Internet Explorer, of een versie daarvan, heeft vaak eigen opvattingen over tabel-opmaak).
    - Ik doe het nooit op die manier!

Notepad++ e.a. text-editors
  • Voordeel: je kan alles precies zo maken als je wil.
  • Nadeel: je moet precies weten hoe je het moet doen: zelf het ontwerp kunnen opdelen in handige partjes (eventueel met ingebouwde verlengstukjes of herhaal-stukjes) en die in html-code en css-code kunnen omzetten.

Dreamweaver e.a. WYSIWYG-editors
  • Voordeel: er kan qua codering werk uit handen genomen worden, en je kan makkelijk wisselen tussen ontwerp-weergave en code-weergave.
  • Nadeel: als DW of een andere editor het op zijn eigen manier gaat doen, heb je vrij grote kans dat je een onwerkbare pagina krijgt (bv. omdat alle indelingsblokken een absolute positie krijgen, of een vaste hoogte en/of breedte, en niet makkelijk gevuld kunnen worden zonder de rest aan te tasten).
    Dwz: je moet bij dit soort programma's eveneens precies weten hoe je het moet doen: om de editor waar nodig te kunnen bijsturen!

Joomla, Wordpress of een ander CMS
Voordeel: het aanmaken en beheren van pagina's en berichten kan snel en vrijwel automatisch.
Nadeel: een eigen template moet passen in de structuur van het CMS, en daarvoor moet je precies de CMS-structuur kennen, en hoe je die moet aanpassen (wat nogal gecompliceerd kan zijn: alles staat op verschillende plaatsen en heeft eigen variabelen).
D.w.z. naast precies weten wat je wilt en html- en css-inzicht is dan ook kennis van het CMS-systeem en van php nodig, want daar werken CMS'sen meestal mee.

========
Conclusie:
Voor een goed eigen template zal je je moeten verdiepen in html en css. Voor een starter vraagt dat best wat studie.
Meteen een Joomla-template o.i.d. willen maken/aanpassen is denk ik te hoog gegrepen. Inderdaad: eerst maar eens met html en css alleen.


PS: Als het echt een heel eenvoudig ontwerp is, kan het nog wel eens meevallen. :)

Met vriendelijke groet,
CSShunter

kan hij niet beter ineens HTML5 leren? ipv 4, als hij het toch nog niet kan dan kan hij beter gelijk de nieuwe standaard leren toch? alhoewel er niet echt veel veranderd aan de structuur. ;)
 
@ jefkebreda:
Denk eigenlijk van niet. Op dit moment ondersteunen nog niet alle browsers de nieuwe html-5 standaarden, en deze zijn ook nog in ontwikkeling.
Vooral in de oudere Internet Explorers die op het moment in omloop zijn (nog wat IE7 en behoorlijk veel IE8 gebruikers) gaat het dan mis.
  • Nu zijn er wel javascripts om dat weer recht te breien, maar dat maakt het er niet eenvoudiger op.

Ook volgens de webrichtlijnen.nl (deze) moet je nog geen html-5 toepassen als je een toegankelijke cross-browser website wilt maken..
  • Je zou een uitzondering kunnen maken voor mobieltjes en tablets, maar dan moet je wel weten wat je doet.

Ik zou daarom met "gewone" html4.01-strict beginnen, en daarbij de aanvullingen van xhtml1.0 meepakken: dan krijg je prima code. *)
Als die kennis onder de knie is, is verdere studie naar de html-5 nieuwigheden een stuk makkelijker dan meteen alles tegelijk.

Iets dergelijks geldt m.i. voor css3: ook heel mooi, maar de basiskennis ligt toch in css2.1.
De verfraaiingen en andere extra's van css3 kunnen later ook nog, dan kunnen ook browsers als IE er wat meer aan wennen. ;)
  • Zelf hoef je dan ook niet meteen de trucs te gaan leren om nukkige browsers toch de css3 te laten hanteren (voor zover mogelijk).
Wat ook goed uitkomt: later zijn misschien meer mensen van de nog vele Windows-XP gebruikers overgestapt naar een nieuwere Windows-versie, want met Windows-XP kan je niet verder komen dan IE8. :confused:

Met vriendelijke groet,
CSShunter
________
*) Zie ook deze preek. :)
 
Laatst bewerkt:
Ben ik 't mee eens html5 kun je het beste niet mee beginnen als je helemaal nieuw bent met html.
Volgens deze site is het nog ongeveer 15% IE 7 en 8 gebruikers die zonder html5 support zitten.

Ben trouwens voorstander van notepad2, da's notepad met regelnummers en gekleurde code.
Maar als je een uitgebreide editor wilt heb je nog aptana studio 2 of een andere simpelere is sublime text 2.
 
Bedankt voor de tips!! Ik ga Notepad++ eens downloaden en me eens verder verdiepen in de materie aan de hand van jullie adviezen. Ook eens bezien hoe Notepad werkt. (Ik dacht aanvankelijk dat hiermee het standaard-kladblok mee werd bedoeld. Mijn eerdere opmerking hierover is dus niet juist.)

hartelijke groet, Theo
 
Notepad++ is een andere dan Notepad2; heeft ook kleurcodes en een heleboel handigheidjes; werkt uitstekend, prima ervaringen mee! :)

Met vriendelijke groet,
CSShunter
 
@glompie: dat is 't em nu juist. Ik ben met geen van deze programma's van de list of text editors bekend - zelfs namen ervan komen me niet bekend voor. Ik mis toch ook Seamonkey: waarom staat deze er niet bij? Ofwel: Waarin zit het verschil van dat programma tov bijv. Notepad++?
 
Hoi theoo,
Het verschil tussen Seamonkey en Notepad++ is, dat Seamonkey ook een ontwerp-weergave heeft, en niet alleen een code-weergave.
Verder is Seamonkey een soort totaal-oplossing: het is behalve een webbouw-programma tegelijkertijd ook een browser, een e-mail programma en nog zo wat.
Voor het webbouw-gedeelte gebruikt Seamonkey (opvolger van de Mozilla-browser, die ook een editor aan boord had) de "Composer".
  • Nu ben ik Seamonkey de laatste jaren een beetje uit het oog verloren, en ik weet niet of de Composer van Seamonkey doorontwikkeld is of is blijven stilstaan, dan wel of deze dezelfde is geworden als de stand-alone KompoZer.

Er is namelijk ook een los webbouw-programma uit de Mozilla-stal, dat KompoZer heet, de opvolger is van het webbouw-programma NVU, en regelmatig updates heeft.

Even terug naar af
KompoZer heeft dus zowel een ontwerp-weergave (min of meer WYSIWYG) als een code-weergave (ook met kleurtjes net als de pure text-editors), en je kunt snel wisselen tussen die twee om onder water te kijken of daar dingen te veranderen.
  • Daarmee valt KompoZer in dezelfde categorie als bv. Dreamweaver. Alleen is KompoZer een stuk minder eigenwijs, is ook eenvoudiger (heeft niet alle toeters en bellen van DW), en is daardoor makkelijker te bedienen. En bovendien: voor Dreamweaver moet je flink wat pegels neertellen, voor KompoZer niet!

Verder is er ook nog een tussenvorm tussen de pure text-editors (waar alleen maar code in staat) en editors als KompoZer. Dat zijn text-editiors met een keuzemenu waarin allerlei elementen van een webpagina ingevoegd kunnen worden in hun codevorm (bv. een <p></p> voor een alinea).
  • Voorbeeld hiervan is de HTML-Kit 292, een gratis versie en ook niet slecht; hier te downloaden: www.htmlkit.com/download

Conclusie
Ik zou aan starters aanraden te beginnen met KompoZer.
In de ontwerp-weergave lijkt die erg op Word, met hetzelfde type knoppen. Deze zijn zonder grote rampen direct te gebruiken, en je kunt daarna onder water kijken om te zien hoe KompoZer je opdrachten heeft omgezet in html-code.


  • Dat is dus een prettig hulpmiddel bij het leren van html! :)
  • Voordeel t.o.v. pure text-editors: je hoeft niet meteen alle noodzakelijke html-codes te kennen om iets toonbaars op scherm te krijgen
  • Kom je verder met ingewikkelder dingen, dan kan je dat altijd in de code-weergave toevoegen en/of KompoZer bijsturen.

Op deze manier (+ veel lezen op internet, experimenteren, en in broncodes van sites kijken) heb ik het mezelf ook geleerd.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan