[Dreamweaver/Photoshop] Homepage vriendengroep

[Verwijderd]

Inleiding

Mijn vrienden en ik voetballen in een vriendenelftal. Omdat het meer een kroegelftal is, kunnen sommige voor geen meter voetballen. Omdat we vorig jaar geen keeper hadden en alles verloren met 12-1 en soortgelijke cijfers. Kwam ik op stap op de naam Bende van ellende. Dit hebben wij op shirts en truien laten drukken, dus zo gaan wij in ons dorp/stad (Valkenswaard) voortaan door het leven.

Nu leek het mij leuk om een website te maken. Dan gericht op voetbal gerelateerde zaken, zoals aankomende wedstrijd, uitslagen, tijden training, informatie over spelers. Tevens moet er een fungedeelte zijn, waar foto's opgezet kunnen worden (die elke zondag worden genomen in ons café). Ook een forum zou gewenst zijn.

Nu was mijn eerste doel om het domein www.bendevanellende.nl te bemachtigen. Dit domein was al geregistreerd, maar (ik meen) al vier jaar nix aan gedaan. Ik geprobeerd de eigenaar op te bellen, kreeg ik een mevrouw aan de lijn en die was op dit adres gaan wonen. Ik Versatel opgebeld, waar het domein was geregistreerd, maar de man betaalde nog netjes zijn rekening. Deze man was echter betrokken bij oplichterspraktijken wat ik gelezen had op Internet. Na veel onderhandelen kon ik dit domein toch op mijn naam schrijven.

Webhosting heb ik genomen bij PCextreme op advies van onze webmaster, die dus eigenlijk de site zou gaan maken. Het domein staat op mijn naam vanaf 1 oktober en er is nog niets aan gedaan. Ik vraag dit telkens, maar hij doet gewoon niks. Nu is een broer van 'groeplid' webdesigner van beroep en hij zou het wel doen. Hij heeft echter geen tijd en sms’t niet terug, maar op stap beloofd hij van alles. Jullie snappen dus ook wel dat ik hier helemaal gek van wordt en heb besloten (aangezien ik nu geen werk heb) om zelf de site te maken.

Kennis

Ik heb al kennis van html, omdat ik dit toentertijd op de Havo moest leren. Ik heb ook lichte ervaring met Photoshop. Met Dreamweaver en Fireworks heb ik geen ervaring. Omdat ik weet dat je het één en ander gedaan moet hebben voordat je hier mag posten (kennis opdoen) heb ik onderstaand geleerd, dit zijn beide elf uur durende lessen!
• Lynda.Com.Macromedia.Dreamweaver.8.Essential.Training
• Lynda.Com.Macromedia.Fireworks.8.Essential.Training

Ontwerp

Ik was dus begonnen met het maken van tabellen, en het aan de ex-webmaster laten zien. Nee je kan het beste met Photoshop werken. Ik helemaal chagrijnig naar 22 uur studeren/lessen. Vroeg ik hoe, komt er geen duidelijk reactie op, dat ik alleen een ontwerp moet maken. Dit heb ik dus op papier gedaan, omdat ik dit fijner vind ontwerpen. Zie hieronder voor het ontwerp (clickable):



Nu heb ik de site gebaseerd op de volgende sites. Ik heb tevens screenshots genomen van elementen van elke site die mij aanstaan.
• www.feyenoord.nl
• www.adodenhaag.nl
• www.psv.nl/web/show

Feyenoord
1. het logo mooi in de hoek en vanaf daar beginnen de lijnen van de site.

2. Het aankondigen van de aankomende wedstrijden met het logo van de clubs.

3. Het random laten zien van foto's.


ADO Den Haag
1. De strepen in de banner zijn heel erg mooi. Voor onze site zouden ze alleen geel, zwart moeten worden, omdat dit onze clubkleuren zijn. Ook het menu is zeer handig voor algemene zaken, zoals contact/login/sitemap/etc.


PSV
1. Wil eigenlijk van die tabellen gebruiken, zoals je hier ziet met de titel nieuws. Het rood zal dan of geel worden of donkergrijs.

2. Het weergeven van siteinformatie en sponsors in een aparte tabel die strookt met bovenstaand.

Problemen

1. Om te beginnen bij een ontwerp moet je weten wat de maten zijn. Ik ben uitgegaan van een 1024x768 resolutie in Internet Explorer 7. De maten zijn dan 1006x591 pixels. Omdat nog een achtergrond wil plaatsen die men moet kunnen zien wordt er 63 pixels van de kant gewerkt. Boven is dit 30 en onder is dit 10 pixels.
2. Het bovenste deel is dus eigenlijk een banner en wat daaronder komt is een tabel met tekst, foto's en dergelijke.
3. Het clublogo komt linksboven in de hoek. Als je daar overheen gaat dan komt er een pop-up menu. Ik heb hier voor gekozen, omdat er in de website ook een forum moet komen. Heb ik een vast menu links, dan wordt de overige ruimte voor een forum te klein. Ik wil niet dat het forum in een apart venster opent, omdat ik dan bang ben dat iedereen alleen maar op het forum zit.

vraag 1: De banner moet ik ontwerpen met Photoshop en om delen die moeten linken naar andere pagina's moet ik maken met Image Maps in Dreamweaver. Klopt dit?
vraag 2: De rest van de site kan ik het beste maken in Dreamweaver zelf met behulp van tabellen. Is dit het meest logische, na het zien van de screenshots?
vraag 3: De manier van werken die ik wil toepassen is dit de meest logische?

edit:
Verdere vragen komen hier tevens te staan en worden doorgelikt naar het antwoord verder in het topic. Welke vragen dit worden weet ik pas als ik tegen problemen oploop.

Links

http://www.shootnshop.nl/
\[W&G FAQ] groepsproject
(is na twee jaar ook nog niet af, dus daar kan ik ook niet veel informatie uit halen.)

Updates

Wanneer er een update plaats vindt zal deze hier gepost worden zodat jullie op www.bendevanellende.nl kunnen hoe het nu met de site is, en eventueel tips kunnen geven hoe het beter kan.

[Verwijderd]

Je gehele Design in 1 keer maken. En dan slicen.. Dit werkt verreweg het beste als beginner
http://www.web-con.nl/site/tutorials.php?tutorial=269

[Verwijderd]

Waarom tabellen?
Je kunt beter met <div> tags aan de gang aan.
Anders krijg straks een tabel, in een tabel, in een tabel in een tabel.

[Verwijderd]

Verwijderd schreef op vrijdag 26 januari 2007 @ 15:36:
Waarom tabellen?
Je kunt beter met <div> tags aan de gang aan.
Anders krijg straks een tabel, in een tabel, in een tabel in een tabel.

Een site maken als beginner is al moeilijk genoeg. Ga een moeilijke layout positioneren via divs(CSS) en je hebt nog een studie aan je kont.

Overgens, waarom zou je een mooie code willen als het een vrienden site is?

[CyPh]

Inderdaad is het makkelijkste om image slicen via ImageReady (zit bij Photoshop) te doen.
Dreamweaver is (wat ik ervan hoor) erg makkelijk om sites mee te maken, maar ik zou niet weten of je daar ook pop-up/pulldown menu's mee kan maken.

offtopic: Valkenswaard? LOL! Welke kroeg dan?

[ Voor 79% gewijzigd door CyPh op 26-01-2007 16:02 ]

[Arethusa]

Verwijderd schreef op vrijdag 26 januari 2007 @ 15:53:
[...]


Een site maken als beginner is al moeilijk genoeg. Ga een moeilijke layout positioneren via divs(CSS) en je hebt nog een studie aan je kont.

Overgens, waarom zou je een mooie code willen als het een vrienden site is?

Misschien omdat je dan later de layout of enorm makkelijke wijze kan aanpassen. Onderhoudbaarheid van je site lijkt me een pre. Met tabellen is dat vrij ellendig kan ik je vertellen. Je moet dan veel pagina's nalopen terwijl css/divs je het gemak bieden van 1 bestandje die je wijzigen kan en die op alle delen van de site het een en ander aanpast.

Verder heb je gelijk wat betreft het slicen. De verleiding om gelijk je site te bouwen zonder goed ontwerp is groot en maakt het er vaak niet makkelijker op.

[ Voor 10% gewijzigd door Arethusa op 26-01-2007 16:01 . Reden: typo ]

[Verwijderd]

Arethusa schreef op vrijdag 26 januari 2007 @ 16:00:
[...]


Misschien omdat je dan later de layout of enorm makkelijke wijze kan aanpassen. Onderhoudbaarheid van je site lijkt me een pre. Met tabellen is dat vrij ellendig kan ik je vertellen. Je moet dan veel pagina's nalopen terwijl css/divs je het gemak bieden van 1 bestandje die je wijzigen kan en die op alle delen van de site het een en ander aanpast.

Verder heb je gelijk wat betreft het slicen. De verleiding om gelijk je site te bouwen zonder goed ontwerp is groot en maakt het er vaak niet makkelijker op.

Dat is inderdaad een zeer groot voordeel. Echter moet je het wel met me eens zijn dat het echt een bitch kan zijn om een layout goed te positioneren in beide IE en FF.

IMO niet de moeite waard om te leren als je net begint met layouts maken in Photoshop.

[Arethusa]

Verwijderd schreef op vrijdag 26 januari 2007 @ 16:05:
[...]


Dat is inderdaad een zeer groot voordeel. Echter moet je het wel met me eens zijn dat het echt een bitch kan zijn om een layout goed te positioneren in beide IE en FF.

IMO niet de moeite waard om te leren als je net begint met layouts maken in Photoshop.

Daar heb je wel gelijk in ja. Ikzelf ben ook met tabellen begonnen. Het vergt denk ik op dit moment te veel kennis van de TS om iets dergelijks met css en divs op te zetten als ik de layout bekijk. Ik raadt dan aan om te slicen en de slices in tabellen te drukken. Wel zou ik tekst gerelateerde zaken (kleur, grootte etc) achtergrondafbeeldingen, etc in de css plakken. Zo leer je alvast een stukje css en word je layout ook in tabellen opgebouwd. Wees er echter niet te scheutig mee.

[Verwijderd]

CSS is ook besproken in Lynda.Com.Macromedia.Dreamweaver.8.Essential.Training. Ik wil dit wel toepassen, want als ik de stijl later aan wil passen moet ik de css-style aanpassen en hoef ik niet alles handmatig te doen in de code.

Tevens wil ik het pop-up menu maken met Fireworks, omdat je dan meer keuze hebt/meer mogelijkheden. Het menu moet zichtbaar worden als men over het logo gaat met de cursor.

Ook weet ik precies hoe mijn site, moet worden. Ik heb hier lang over nagedacht en uitgetekend. Ik heb echter een nette tekening gemaakt zodat jullie ook globaal een beeld kunnen krijgen.

Hieronder heb ik de site even vlug gemaakt met Photoshop. Zo moet hij dus globaal worden.


Alles moet ik dus maken met Photoshop en slicen. Maar, waar in bovenstaand voorbeeld het nieuws van PSV is weergegeven, kan de ene keer meer tekst bevatten als de andere keer. Dit is dus geen vaste waarde. Je moet dan omlaag scrollen via Internet Explorer. Het is mij niet duidelijk hoe ik dit kan maken met Photoshop. De site die ik ontwerp in Photoshop heeft dan toch een vaste (width en) height?

Daarom dacht ik eraan alleen het bovenste gedeelte met Photoshop te doen en het andere gedeelte waar de tekst in komt (in dit voorbeeld Nieuws, Sponsors en Sitemap) te maken met tabellen, zodat er veel of weinig tekst in kan. Ik ben dan dus niet gebonden aan de hoogte van 591 pixels.

Klopt het wat ik hier beredeneer?

[Verwijderd]

ik ben zelf ook bezig met een website en heb de lay-out gemaakt met CSS. Ik heb voor €14.95 bij bol.com het boekje 'CSS in 10 minuten' gekocht. Deze kan ik echt aanraden als je een beginner bent.
http://www.nl.bol.com/is-...004002411950&Section=BOOK

[Arethusa]

Verwijderd schreef op vrijdag 26 januari 2007 @ 17:58:
Alles moet ik dus maken met Photoshop en slicen. Maar, waar in bovenstaand voorbeeld het nieuws van PSV is weergegeven, kan de ene keer meer tekst bevatten als de andere keer. Dit is dus geen vaste waarde. Je moet dan omlaag scrollen via Internet Explorer. Het is mij niet duidelijk hoe ik dit kan maken met Photoshop. De site die ik ontwerp in Photoshop heeft dan toch een vaste (width en) height?

Daarom dacht ik eraan alleen het bovenste gedeelte met Photoshop te doen en het andere gedeelte waar de tekst in komt (in dit voorbeeld Nieuws, Sponsors en Sitemap) te maken met tabellen, zodat er veel of weinig tekst in kan. Ik ben dan dus niet gebonden aan de hoogte van 591 pixels.

Klopt het wat ik hier beredeneer?

Je zou voor het dynamische gedeelte gebruik kunnen maken van CuteNews. Dit CMS werkt op basis van includes en tags. Deze includes kun je op je site plaatsen waar je maar wilt. Hiermee kun je dus gemakkelijk dynamisch nieuws op je site plaatsen. Voor een beginner is dit erg makkelijk. Dit CMS heb ik zelf ook gebruikt voordat ik op Wordpress overstapte. Hier enkele features:

• Quick and easy installation
• You don't need MySQL, everything is stored in files
• Super-Easy to use Template system
• Visitors can post comments
• Smilies, Avatars and HTML code can be used in posts
• Multilpe categories function
• WYSIWYG editor
• Different User Levels with restricted access
• Add/Edit/Post news, comments and users online
• Auto archiving of old news
• No news building, everything is automated
• Edit news templates
• Visitors can search in your news news database
• Password protected names in comments
• Flood protection & IP Banning of users
• Backup Function
• And many more cool functions ...

Misschien heb je hier wat aan.

[Verwijderd]

Ik heb zelf nog nooit gewerkt met CSS, maar heb de lessen daarvan wel gevolgd. Als ik het goed begrijp is de opmaak van de site daarin op te slaan. Als je wilt dat een bepaalde pagina style 1 krijgt pas je alleen css style 1 toe. De site zal dan de waardes in css style 1 toepassen.

Ik ben nu bezig met de banner, maar het gedeelte waar tekst komt te staan kan ik dat nu het beste maken met tabellen?

[Verwijderd]

@Arethusa het gaat met niet om het plaatsen van nieuws en waarme. Ik wil dus verschillende mededelingen in dit gedeelte van de site zetten. Maar als er teveel tekst staat moet men scrollen. Dit scrollen wil ik niet in de site hebben maar via InternetExplorer. Als ik dus een layout maak heb ik een vast beeld (1006x591). Als er 1000 pixels tekst staat blijft de layout 591 pixels. Snap je wat ik bedoel?

[Kiphaas7]

Bij mijn weten is de maximale breedte 984px zonder horizontale scrollbars bij een resolutie van 1024x768.

[Arethusa]

Verwijderd schreef op vrijdag 26 januari 2007 @ 18:41:
@Arethusa het gaat met niet om het plaatsen van nieuws en waarme. Ik wil dus verschillende mededelingen in dit gedeelte van de site zetten. Maar als er teveel tekst staat moet men scrollen. Dit scrollen wil ik niet in de site hebben maar via InternetExplorer. Als ik dus een layout maak heb ik een vast beeld (1006x591). Als er 1000 pixels tekst staat blijft de layout 591 pixels. Snap je wat ik bedoel?

Misschien kun je een hoogte en een breedte met percentages gaan meegeven zodat het een ander mee groeit afhankelijk van de grootte van de tekst.

[Verwijderd]

Ja dat bedoel ik ook, maar dit kan ik toch niet maken met Photoshop.

[Arethusa]

Dat hoeft ook niet. Je kunt natuurlijk eventueel lege vlakken opvullen met een kleurtje. Een layout uit photoshop hoef je niet 1:1 in html na te maken.

[Verwijderd]

Ik heb na veel steggelen eindelijk een layout gevonde. Alleen wil ik nu een foto als achtergrond gebruiken. Als mensen met een 19 tot 21 inch beeldscherm dan op de site komen, zal er langs de foto de achtergrondkleur van de site zichtbaar zijn. Dit moet eigenlijk ook de foto zijn. Nu kan ik de foto wel aanpassen aan die resolutie, maar wat zijn daarvan de zichtbare maten. Ik kan dit namelijk niet testen op mijn computer. Ik heb 17 inch. Of moet ik dan gewoon mijn resolutie aanpassen?