Nellid | woensdag 19 december 2007 @ 18:45 | |
Ok, het zit zo: iemand heeft aan mij gevraagd of ik een website kon maken. Nou vind ik t leuk om in photoshop te kutten enzo maar een website heb ik eigenlijk alleen nog nooit ontwikkeld. Dit heb ik in Photoshop even in elkaar geknutseld: ![]() Nu is de vraag dus of ik dit zonder ervaring in elkaar kan zetten? En hoe? Dit is dus de homepagia. De content (als je op dichterbij in t blauw klikt bijv.) komt in t stuk waar nu agenda en het logo van Dichterbij staat. Er komt dus een pagina dichterbij, contact, agenda (is gewoon simpel per maand opnder elkaar waar ze optreden) en muziek (gastenboek kan weg denk ik en het fotoalbum moet in zo'n soort van flash pop up komen). Het meest tricky wordt "muziek" daar moet namelijk een stukje van ieder nummer van een cd te beluisteren zijn. Nu had ik dit al gevonden en dat leek me wel geschikt hiervoor: XSPF Web Music Player Volgens mij gratis en ziet er wel simpel uit. Maar goed, kan ik dat? met 10% ervaring met html... Ik denk zelf eigenlijk totaal van niet ![]() | ||
RemcoDelft | woensdag 19 december 2007 @ 19:05 | |
Google een cursusje HTML en CSS, dan lukt het wel. | ||
Papierversnipperaar | woensdag 19 december 2007 @ 19:07 | |
Het kan best, het duurt alleen heel lang omdat je tijdens het bouwen de nodige kennis moet vergaren. Persoonlijk vind ik dat een uitstekende manier van leren, zelf uitvinden. | ||
killswitch | woensdag 19 december 2007 @ 19:15 | |
quote:of je loopt hier eens een zootje tutorials door http://www.tutorialized.com/ staan ook erg veel photoshop tutorials, dus sowieso wel toffe link | ||
Jack. | woensdag 19 december 2007 @ 19:16 | |
Als je jezelf afvraagt of dit een ingewikkelde structuur is om een HTML website uit te ontwikkelen: zeker niet Iemand die al eens een website in elkaar geknutseld heeft (en dus wat kennis van HTML heeft) zet dit makkelijk op een uurtje in elkaar. Dus als je een projectje wil om HTML te leren, dan is dit zeker een goede start om de basis onder de knie te krijgen. Hoe? Persoonlijk doe ik het in een gewone editor (crimson editor, krijg je der ook nog kleurtjes bij zonder alle andere tralala), maar ik schrijf m'n html dan ook zelf ipv het te laten genereren door drag and drop toestanden (zoals dreamweaver etc). Wellicht dat je met dreamweaver iets sneller weg bent dan dat je pure html code gaat schrijven. | ||
Nellid | woensdag 19 december 2007 @ 19:17 | |
Ik had er misschien bij moeten zetten, in een redelijk korte tijd ![]() Ik die online cursussen html en css wel maar vaak is dat vrij standaard toch? Qua opbouw van de website dan (wat html betreft)? Dit leek me zo lastig omdat ik dan met veel frames enzo moet gaan werken, omdat t in t midden moet enzo. Maar voor de duidelijkheid: iemand met aardig wat ervaring heeft dit zo gemaakt? Anders vind ik t een beetje nutteloos daar heel veel tijd in te steken ![]() | ||
Jack. | woensdag 19 december 2007 @ 19:19 | |
btw: http://www.handleidinghtml.nl/ Heb ik jaren geleden als naslagwerk gebruikt om HTML te leren. Kan je ook gebruiken als je met dreamweaver aan de slag gaat ipv pure html. | ||
Nellid | woensdag 19 december 2007 @ 19:20 | |
quote:Ik had deze nog niet gezien... Maar met dreamweaver ben ik al eens bezig geweest ja, maar dat ging niet zo heel lekker ![]() Maar als ik iemand zoek die al aardig wat ervaring erin heeft, heeft ie t zo gemaakt? Anders is t de moeite voor mij ook niet ecth waard. Heb t best druk namelijk... | ||
Jack. | woensdag 19 december 2007 @ 19:20 | |
quote:Dat in het midden zetten doe je niet met frames (gebruik van frames is reeds enige tijd afgeschreven) ![]() quote:Ja iemand met aardig wat ervaring heeft het zo in elkaar geknutseld. | ||
Nellid | woensdag 19 december 2007 @ 19:23 | |
Hmm, t klinkt nu zo simpel dat ik mezelf een loser zou vinden als t me niet zou lukken haha ![]() Ik zal eens kijken naar die links, maar als t me teveel tijd gaat kosten schuif ik m toch maar door ![]() En dat frames tegenwoordig afgeschreven zijn wist ik nog niet trouwens, benieuwd hoe t nu gaat dan... | ||
Jack. | woensdag 19 december 2007 @ 19:26 | |
Als je er geen interesse voor hebt zal het altijd te veel tijd kosten, omdat je dan die zaken niet onthoud en elke keer weer dingen moet gaan opzoeken. Maar wat ik wilde zeggen is dat het echt geen moeilijk design is om om te zetten naar een website. | ||
Lkw | woensdag 19 december 2007 @ 19:37 | |
Als het snel online moet, zou ik zeker nog eens Dreamweaver opstarten en dan simpelweg de losse plaatjes via het WYSIWYG-gedeelte importeren en op de juiste plek zetten (in 'layers' bijv.). Eerst de homepage, daarna de andere pagina's. Als eea dan online staat, kun je je op je gemak wat verdiepen in CSS / divs en andere zaken om alles wat flexibeler en makkelijker aanpasbaar te maken. Je moet bij Dreamweaver misschien even een drempeltje over, maar die is niet zo hoog en als je 'm eenmaal hebt genomen, zet je daarna snel van alles en nog wat in elkaar. Desnoods allemaal via WYSIWYG. | ||
wicked-j | woensdag 19 december 2007 @ 19:45 | |
misschien CMS een idee? even googlen op de verschillende. Joomla is een van de grotere maar hoge instap. template kan je dan bijv tijdelijk een andere nemen zodat je op je gemak kan puzzellen om die van jou te maken. of je besteed het natuurlijk uit. voordeel van CMS is dat je ook geen kennis nodig hebt van php / html om hem te kunnen updaten enz. | ||
Nellid | woensdag 19 december 2007 @ 19:53 | |
quote:Grappig, ze gebruiken nu een CMS van Joomla ![]() Maar heb je daarin wel flinke vrijheid om aan te passen? Bijvoorbeeld een mp3 webplayer toevoegen, kan dat eenvoudig? Dat het geen moeilijk design is ben ik inmiddels wel achter, dat is mooi dan. Misschien toch nog maar even in Dreamweaver gaan duiken dan... iig in dat WYSIGetc. ![]() ![]() En ohja, bedankt voor de hulp al zo snel ![]() | ||
freiss | woensdag 19 december 2007 @ 19:56 | |
Als je het echt heel quick & dirty wil doen, er zit volgens mij in Photoshop een optie om op te slaan als webpagina. | ||
Tarabass | woensdag 19 december 2007 @ 20:52 | |
Slices en exporteren naar html. Button-rollovers maken met image ready en inbouwen. Is vrij makkelijk.. | ||
Nellid | woensdag 19 december 2007 @ 21:20 | |
Het wordt steeds makkelijker, nog ff en t gaat vanzelf ![]() Maar een en ander, de agenda bijvoorbeeld, en het fotoalbum moeten ook simpel aanpasbaar zijn. Is dat met bovengenoemde opties ook mogelijk? En is het zo, dat als ik in Dreamweaver de website opmaak, je het naderhand gewoon kan updaten (de agenda bijvoorbeeld) met kladblok? Of moet dat dan per se ook met dreamweaver? Want een maand en wat data toevoegen kan makkelijk met kladblok of een andere html editor... | ||
Nellid | woensdag 19 december 2007 @ 21:21 | |
quote:Niet in mijn versie geloof ik, maar dat lijkt me ook niet handig... Zeker niet met updaten enzo. Maar zou inderdaad wel lekker snel zijn ![]() | ||
Nellid | woensdag 19 december 2007 @ 21:22 | |
quote:Deze begrijp ik niet helemaal, slices? edit: gevonden. Zijn ook wel tutorials over te vinden. Zat ![]() ![]() [ Bericht 32% gewijzigd door Nellid op 19-12-2007 21:46:41 ] | ||
mschol | woensdag 19 december 2007 @ 21:55 | |
quote:DW drag & drop? nee niet echt... DW gebruik ik ook alleen maar in code view voor zowel php als html. en de autocomplete feature is verdomde handig, versneld het hele proces enorm.. | ||
mcDavid | woensdag 19 december 2007 @ 22:29 | |
www.w3schools.com http://www.flos-freeware.ch/notepad2.html En succes! ![]() Ohja en die muziek is heel makkelijk. Die doe je gewoon niet. | ||
Nellid | vrijdag 21 december 2007 @ 17:46 | |
Zo, ben inmiddels met Dreamweaver begonnen en ik moet zeggen dat t best aardig gaat ![]() Ik kom hier alleen niet uit: De menubuttons moeten natuurlijk gewoon blijven staan... Zoals in mijn OP. En wat me ook niet lukt is de tekst te versmallen zeg maar, zodat t niet meteen tegen de buttons aan staat maar dat er nog wat ruimte zit tussen de tekst en de buttons. Kan t ook niet in een tutorial vinden zo snel, thanx alvast! | ||
Swetsenegger | vrijdag 21 december 2007 @ 19:33 | |
verschillende divjes gebruiken (en geen tabellen) en de ruimte kan je creëren door padding toe te voegen. | ||
Swetsenegger | vrijdag 21 december 2007 @ 19:37 | |
Ow en het antwoord op je originele vraag is "neen". Je kan deze website niet snel zonder ervaring bouwen. Je kan heel snel tot 98% van je originele idee komen. Vervolgens ben je gedurende lange tijd bezig met finetuning tot 100%.... En dan ga je het resultaat bekijken in een andere browser... | ||
WyriHaximus | vrijdag 21 december 2007 @ 22:30 | |
quote:Ja dit idee dus een beetje ![]() ![]() | ||
Nellid | vrijdag 21 december 2007 @ 22:57 | |
quote: ![]() Ik moet zeggen dat ik al redelijk wat heb, krijg er zelfs muziek op ![]() Maar goed, met divjes ( ![]() | ||
Nellid | zaterdag 22 december 2007 @ 00:32 | |
quote:Hmm, misschien een goede tutorial over die divjes? Kan er geen wijs uit worden... Inmiddels padding wel gevonden maar als ik dat toe pas in mn CSS sheet dan stopt ie overal 20px tussen, dus ook tussel alle buttons enzo. Dat is niet de bedoeling, kan ik het ook toe passen op alleen het stukje tekst? (ja natuurlijk, maar hoe dus ![]() Bedankt weer. | ||
mschol | zaterdag 22 december 2007 @ 00:57 | |
quote:het is gewoon niet eens grappig .... gewoon zielig dat mensen dit verzinnen... zeker gemaakt door een W3C fetishist? | ||
Dzy | zaterdag 22 december 2007 @ 02:13 | |
quote:Nou ik ben het er anders wel mee eens. Al ben ik over het algemeen iets meer bezig met het schelden. | ||
Swetsenegger | zaterdag 22 december 2007 @ 09:12 | |
quote:handleidinghtml.nl legt het goed uit. quote:Door je tekst in een aparte div te stoppen, kan je alleen op dat 'block element' een padding toepassen. Heel kort, je hebt inline elementen en block elementen. Daarmee bouw je een website op. Je volledige content staat in een block element. In dat block element kan je natuurlijk andere block elementen nesten, waardoor je bv een plaatje op elke positie in je tekst kan zetten. Met inline elementen kan je binnen dat block element bv een stuk tekst bold maken. block elementen zijn bv <div> & <p>. Inline elementen zijn bv <span> en <a> | ||
Nellid | zaterdag 22 december 2007 @ 12:08 | |
quote:Thanx! Aleen ik gebruik nu dreamweaver en eigenlijk doe ik niks met html, zag wel dat je een div in kon voegen in dreamweaver maar t lukt me niet dat ding op de goede plek te krijgen ![]() | ||
Swetsenegger | zaterdag 22 december 2007 @ 12:20 | |
quote:En dat is de reden waarom dreamweaver zuigt voor beginners. wat mij betreft zijn sleur en pleur omgevingen JUIST voor gevorderde gebruikers, die weten hoe ze de boel kunnen rechtzetten als dreamweaver er weer eens een zooi van maakt. | ||
Nellid | maandag 24 december 2007 @ 22:52 | |
Ik heb nu alles in divjes staan en t gaat best redelijk moet ik zeggen ![]() Ik krijg alleen die divjes niet gecentreerd op de pagina. Al die losse elementen heb ik dus in divjes gezet (de buttons en jpegs) maar ze staan nu allemaal linksbovenin en ik krijg ze niet gecentreerd, heb ook geen optie align ofzo. Iemand die me uit kan leggen hoe ik dat moet doen? Het zijn die AP divs, mag toch hopen dat ik die wel kan verplaatsen ![]() | ||
Swetsenegger | maandag 24 december 2007 @ 22:55 | |
quote:Nesten. Dus je maakt een container div waar je de rest ingooit. Overigens zou ik niet voor elke knop een aparte div maken. Je maakt gewoon een menu div. | ||
Nellid | maandag 24 december 2007 @ 22:59 | |
quote:Dat wilde ik ook doen, maar dat lukt niet (alles in 1 div). Hoe doe ik dat nesten? Want wat me tot nu toe is gelukt is dat ik een div heb die precies om alle andere divs heen staat maar die erboven hangt zeg maar en leeg is (als ik die dus verplaats verplaats ik alleen de div en alles dat "erin" staat blijft gewoon staan. De div die ik verplaats is dus leeg... Hoe krijg ik alles in die ene div? Een menu div? Tsja, heb nu alles al los ![]() Wat ik nu dus heb is dit: klik | ||
Swetsenegger | maandag 24 december 2007 @ 23:22 | |
quote:
quote:Je moet het zelf weten, maar het wordt minder hanteerbaar. | ||
SuperRembo | maandag 24 december 2007 @ 23:26 | |
Persoonlijk vind ik deze zooi onsamenhangende absoluut gepositioneerde divjes niet totaal "beter", "mooier" of "handiger" dan een tabel. Maar laat dat je vooral niet tegenhouden ![]() | ||
Nellid | maandag 24 december 2007 @ 23:26 | |
quote:Thanx. Maar ik heb nu alles al, het is in feite af ![]() ![]() | ||
Nellid | maandag 24 december 2007 @ 23:29 | |
quote:Joh, ik ben al blij dat ik heb wat ik heb ![]() Wilde trouwens ook uiteindelijk tabellen gebruiken met de tracing image functie maar ik kreeg mn image niet exact getraced, dat lukte gewoon echt niet. Daarna met tracing image ap divjes gemaakt en dat lukte wel, vandaar divjes. Ik had voor een tabel gekozen omdat ik die volgens mij wel in 1 keer had kunnen centreren op de pagina... | ||
SuperRembo | maandag 24 december 2007 @ 23:33 | |
quote:Dat maakt niet zo gek veel veel verschil. | ||
Nellid | maandag 24 december 2007 @ 23:36 | |
hmm, lukt niet :) Zal wel iets fout doen... Heb nu dit bij mn indexpagina:
| ||
Swetsenegger | maandag 24 december 2007 @ 23:36 | |
tering ![]() | ||
Nellid | maandag 24 december 2007 @ 23:38 | |
quote:haha. Ik dacht al dat ik zo'n antwoord zou krijgen ![]() Onthou ff dat t mn eerste website ooit is he ![]() | ||
Swetsenegger | maandag 24 december 2007 @ 23:38 | |
Overigens staat je body binnen de container div. Das niet de bedoeling.
| ||
devvertje | maandag 24 december 2007 @ 23:39 | |
doe ff kappuh met die onnodige 'position:absolute;' ![]() en gebruik gewoon relatieve positionering | ||
Swetsenegger | maandag 24 december 2007 @ 23:42 | |
quote:De jongen weet net wat html is. Geef dan gelijk een relevant voorbeeld. | ||
Nellid | maandag 24 december 2007 @ 23:42 | |
quote:oh ja, natuurlijk. ik weet niet eens wat t verschil is ![]() | ||
Nellid | maandag 24 december 2007 @ 23:45 | |
quote:Zo heb ik m nu staan ja, maar waar vul ik precies welke marges in om m in t midden van de pagina te krijgen? Dus left, top en right... En bedankt nog ![]() | ||
devvertje | maandag 24 december 2007 @ 23:45 | |
www.google.com zoek ff op "CSS positioning", het spijt me dat ik je overschat heb TS | ||
Swetsenegger | maandag 24 december 2007 @ 23:46 | |
quote:Bij relatieve positionering, wordt elk element relatief tov de voorgaande geplaatst. Dus "top:10px;" zal het element bij absolute positionering 10 pixels vanaf de top van je browserscherm (het canvas) zetten en bij relatieve positionering 10 pixels vanaf de onderzijde van het voorgaande element. | ||
Swetsenegger | maandag 24 december 2007 @ 23:47 | |
quote:Je zal ze relatief moeten positioneren. | ||
Nellid | maandag 24 december 2007 @ 23:50 | |
quote:Ik heb op t moment eigenlijk alles gedaan door wat termen die ik in dit topic heb gezien en verder met behulp van de training van lynda.com die ik heb gedownload, dat ik op deze html code uitkom is puur het volgen van handelingen waarvan ik denk dat ik ze moet doen. Ik kan totaal geen oordeel geven over die code, of t omslachtig is, veel te veel etc. Dat dat zo is geloof ik meteen. Ben alleen blij als ik op preview klik en t klopt wat ik zie ![]() | ||
Nellid | maandag 24 december 2007 @ 23:53 | |
quote:Ik snapte t ook wel een beetje ![]() Maar ik ga er weer mee aan de slag, wordt iets voor morgen. | ||
Aaargh! | dinsdag 25 december 2007 @ 02:29 | |
quote:Dat is niet correct, of eigenlijk: veel simpeler voorgesteld dan het daadwerkelijk is (wat haast nog erger is). Bij absolutie positionering wordt het element uit de normale flow gehaald en heeft dus ook geen invloed meer op volgende elementen. Bij relatieve positionering wordt het element eerst geplaatst volgens de normale flow, en daarna pas verplaats relatief aan de positie die het element in de normale flow heeft. Alle opvolgende elementen worden dus ook gelayout alsof het relatief verplaatste element niet verschoven was. Stel dat een element een position:relative heeft en een left: -10px. dan wordt dit element gelayout en daarna 10 pixels naar links verplaatst. Stel dat hiernaast nog een element staat met position: relative en een left: 10px; dan staat deze dus NIET 10 pixels rechts van het element ervoor , maar 20 pixels. Beide elementen worden volgende de normale flow gelayout, en daarna wordt het eerste element 10 pixels naar links geschoven en het tweede element 10 pixels naar rechts. Het is misschien handig om eens in de W3C CSS documentatie te lezen hoe het box-model werkt en hoe het 'visual formatting' model werkt. Misschien wat taaie kost maar het helpt wel te begrijpen hoe een browser de positie van het e.a. bepaald. | ||
Swetsenegger | dinsdag 25 december 2007 @ 07:38 | |
quote:Ja HIER gaat TS het mee snappen. Leuk hoor volledig correct willen zijn, maar niet altijd op zijn plaats. | ||
devvertje | dinsdag 25 december 2007 @ 11:56 | |
True Swetselnigger |