ontwerp omzetten naar xhtml / css
22 februari 2009 - 16:18   
geplaatst door: Michael
hi,

dit is mijn ontwerp, nu wil ik dit dus gaan opbouwen maar hoe kan ik dit het beste aanpakken,
hier een screenshot

je ziet rechts ook een kleurkeuze, de groene onderdelen op de site verandern dan in cyaan of magenta.. de standaard is de limegreen dat gaat dmv css denk ik

ik heb het uit de volgende onderdelen opgebouwd hierboven

- header
- divider (groene lijn)
- menu
- text viewer (lichte doorzichtige vlak hier komen texten, ook de hoofdstekst is voorzien van een        graphic die moet meeveranderen in kleur)

- sitemap
- footer

andere pagina's krijgen rechts een submenu erbij

hoop dat iemand me hier mee op weg kan helpen

ontwerp omzetten naar xhtml / css
22 februari 2009 - 16:39    reactie #1
geplaatst door: iMaarten
Wel, begint met een 'skelet' op te bouwen, bestaande uit zes DIV waar de door jou benoemde onderdelen in komen. Als je met PHP werkt is het handig om met behulp van een INCLUDE te werken, dan hoef je maar een keer de footer en de sitemap te maken. Vervolgens kan je de individuele onderdelen gaan 'invullen'. Als je overigens niet of zelden met XHTML/CSS hebt gewerkt lijkt me dit wel een ontwerp dat niet 1-2-3 af is.

Voor dat verspringen van kleuren heb je een klein stukje javascript nodig, dat kan je zo overal op internet vinden.

ontwerp omzetten naar xhtml / css
22 februari 2009 - 16:51    reactie #2
geplaatst door: Michael
Thnks Maarten,
maar van PHP weet ik helemaal niets...

XHTML en CSS ken ik een klein beetje, het is ook voor een project nl en dat wil ik zo goed mogelijk maken

ik had in gedachten het verspringen van kleur met css te doen door gewoon naar een stylesheet te wijzen die de andere kleuren laad

ontwerp omzetten naar xhtml / css
23 februari 2009 - 14:30    reactie #3
geplaatst door: Michael
ontwerp omzetten naar xhtml / css
23 februari 2009 - 15:34    reactie #4
geplaatst door: ettepet
Eerste opzet lijkt me prima.

Kleine opmerking:
Als je toch een nieuwe site gaat optuigen, gebruik dan xhtml1-strict van i.p.v. transitional.

ontwerp omzetten naar xhtml / css
23 februari 2009 - 16:49    reactie #5
geplaatst door: Michael
thnx, alleen het is voor een schoolproject en we moesten juist transitional gebruiken?

ps: heb je ook een idee hoe ik me menu weer werkend krijg? nu het gestyled is met css werkt het niet meer?

ontwerp omzetten naar xhtml / css
23 februari 2009 - 20:58    reactie #6
geplaatst door: ettepet
Laat je docent(e) deze webrichtlijnen eens doorlezen (zie 2.3 en 2.4) :biggrin:

Voor wat betreft je menu: de hyperlink in je header-div is niet afgesloten. Ik verwacht dat het daarom mis loopt.

ontwerp omzetten naar xhtml / css
23 februari 2009 - 21:01    reactie #7
geplaatst door: Michael
hehehe zal ik zeggen :P anders pas ik dat wel gewoon aan nog :D

maar die link is wel afgesloten hoor?
die heb ik er ook net pas bij gezet, dat menu moet echt in elkaar vanavond :( anders ga ik het niet meer redden :S

ontwerp omzetten naar xhtml / css
23 februari 2009 - 21:59    reactie #8
geplaatst door: ettepet
In je hyperlinks (tussen de open en sluit a-tags) heb je nergens iets staan.
Vervang bijvoorbeeld eens:

< li id="menu_over_ons">< a href="#">< /a>< /li>

door:


< li id="menu_over_ons">< a href="#">klikkerdeklik< /a>< /li>

Wel even die spaties na de kleinerdan-tekens weghalen!

[edit]
Maar.... waarom eigenlijk (background)images van je hyperlink-tekst gemaakt?
Nog zo'n webrichtlijn; een blinde bezoeker met een braille-plankje weet niet waar hij moet klikken - tekst op afbeeldingen is alleen maar een nietszeggende compositie van pixels.
[/edit]

(Bewerkt door ettepet om 22:04, 23-02-2009)

ontwerp omzetten naar xhtml / css
23 februari 2009 - 22:02    reactie #9
geplaatst door: Michael
ik weet nie of ik t goed doe natuurlijk maar daar moet toch niets staan?, dan zou er tekst in beeld komen en de tekst op de buttons zijn een niet webfont type dus staan vast op de graphic, ik heb nu in de css bij het menu textdecoration teogevoegd en op noe gezet en nu werken de menu's wel ineens?
ontwerp omzetten naar xhtml / css
23 februari 2009 - 22:06    reactie #10
geplaatst door: ettepet
Plaats dan je afbeeldingen in de a-tag, in plaats van als background-image.
Kun je meteen een alt-tekst voor die slechtziende bezoeker plaatsen  :biggrin:
ontwerp omzetten naar xhtml / css
23 februari 2009 - 22:08    reactie #11
geplaatst door: Michael
hehe wat is beter dan? zoals ik het nu aan het doen ben of in de a tag?
ontwerp omzetten naar xhtml / css
23 februari 2009 - 22:14    reactie #12
geplaatst door: ettepet
Met die display=block en een fixed width op je a-tag kom je er inderdaad ook.
Al vind ik het niet de meest fraaie oplossing.
Dan zou ik er toch voor kiezen de nav-images in de a-tag te plaatsen, met een alt-tekst bij deze nav-items.
ontwerp omzetten naar xhtml / css
23 februari 2009 - 22:31    reactie #13
geplaatst door: Michael
ok, thnx ben ik nu even aan het opmaken
want het moet wel netjes  :shakehands:
ontwerp omzetten naar xhtml / css
23 februari 2009 - 23:20    reactie #14
geplaatst door: Michael
dat staat erop, nu krijg ik alleen lelijke gekleurde randjes in firefox te zien als je er op klikt, en als je erop geklikt hebt... (rood en dan paars)

hoe krijg ik dit nu weg?


(Bewerkt door Michael om 23:25, 23-02-2009)

ontwerp omzetten naar xhtml / css
23 februari 2009 - 23:59    reactie #15
geplaatst door: Peter Villevoye
Dan vind je het zeker ook vies als je straks meer tekst in het
lichtere paneel plaatst (of precies afgemeten en dan zet ik als
oudere schele kijker de corpsen groter) en je volgende vraag
gaat luiden: hoe kan ik een langer tekstkader laten scrollen ?
Antwoord: met een clip voor DIV. Volgende reactie: Bèh vies !
Vervolgens ga je dan maar alles in zwart/grijs in Flash doen...
Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !
ontwerp omzetten naar xhtml / css
24 februari 2009 - 00:02    reactie #16
geplaatst door: Michael
vraag alleen maar advies omdat ik echt niet weet waar ik moet beginnen, ik heb van alles nog de opmaak, en bekijk hoe het beter kan...

dus hoe meer reacties hoe beter :)

ontwerp omzetten naar xhtml / css
24 februari 2009 - 00:45    reactie #17
geplaatst door: Peter Villevoye
Dat is dus het probleem: je hebt al iets ontworpen,
dus eigenlijk ben je wel degelijk al eraan begonnen
en verwacht dit exact zo te kunnen verwezenlijken...
Dat klinkt misschien wat somber (zeker om deze tijd),
maar meer kennis van wat wel en niet goed werkt
in CSS is een voorwaarde vóórdat je ontwerpt.

Het grafische vak is mooi, multimedia ook, maar de
wetten van webdesign zijn helaas enorm eigenwijs.
Dus lang niet alles kan, zeker niet in XHTML en CSS.

Het is juist de kunst van een echt goeie webdesigner
om schijnbaar achteloos een mooi ontwerp te maken
dat ook nog eens technisch doordacht in elkaar zit !

Maar om je niet in het ongewisse te laten, je zult dit
ontwerp met veel nauwkeurig gepositioneerde layers
in Dreamweaver of een ander pakket moeten maken,
en daar komen enkele transparante PNG's bij kijken.
Die vereisen dan weer minstens Microsoft Explorer 7
(tenzij je nog wat scripts voor 6 achter de hand hebt)
dus trek je een wissel voor de 'achterlijke' browsers.

Het is een mooi ontwerp en kan best gaan werken.
Maar nu, om kwart voor een, heb ik geen moed meer
voor intensieve begeleiding omdat iets on-line moet...
Heb je zelf een blikje RedBull bij de hand ?

Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !
ontwerp omzetten naar xhtml / css
24 februari 2009 - 01:05    reactie #18
geplaatst door: Michael
het is voor mij allemaal maar het begin, en ik wil het juist graag leren
ik ben ook nog maar net begonnen met de opleiding hoor :D

overigens maak ik het ook in dreamweaver, en hebben we maar een klein stukje css gehad en wat meer xhtml, misschien heb ik het me te moeilijk gemaakt met dit ontwerp

maar het moet zaterdag klaar zijn, ik dacht dat ik wel goed op weg was nu maar kan ook niet meer hleder denken nu en ga lekker naar bed ;)

trusteee

ontwerp omzetten naar xhtml / css
24 februari 2009 - 01:20    reactie #19
geplaatst door: Peter Villevoye
Oooh, zaterdag pas ? Welterusten !  :sleepy:
Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !
ontwerp omzetten naar xhtml / css
24 februari 2009 - 09:34    reactie #20
geplaatst door: Michael
nou ja pas... :P
ontwerp omzetten naar xhtml / css
24 februari 2009 - 16:17    reactie #21
geplaatst door: Michael
Wat is overigens de beste manier om de content bestaande uit 1 afbeelding met hieronder alle tekst te plaatsen in het wit doorzichtige gedeelte?


ontwerp omzetten naar xhtml / css
24 februari 2009 - 16:28    reactie #22
geplaatst door: macvooh

Citaat
ettepet om 15:34, 23-02-2009

Kleine opmerking:
Als je toch een nieuwe site gaat optuigen, gebruik dan xhtml1-strict van i.p.v. transitional.

met alle respect, maar dit is serieus achterhaalde onzin.

zo'n jaar of 2-3 terug was strict idd de heilige graal, moest iedereen opeens in Strict gaan werken,
maar daar is iedereen ook van teruggekomen: wat een kwelling..

om maar niet te beginnen over javascript en flash embedden in een xhtml strict pagina, die in Internet Explorer moet werken  :happy:


ziet er allemaal mooi uit op papier, maar als je wat serieuze praktijkervaring hebt als webbouwer gebruik je enkel Strict als je zeker bent dat je hierdoor niet in de problemen komt qua compatibiliteit en mogelijkheden.

FREAK!
ontwerp omzetten naar xhtml / css
25 februari 2009 - 15:04    reactie #23
geplaatst door: ettepet
[off-topic]
Ik zal de laatste zijn die zal ontkennen dat er met stric helemaal geen problemen zijn. Ik kom ze regelmatig tegen. En toch is er altijd weer een oplossing gevonden.

Ik bouw echter sites voor overheden en ben dus gebonden aan webrichtlijnen, drempels vrij, accessibility, etc.
In samenspel met de ontwerper is het dan juist de kunst om toch een mooie site te bouwen die voldoet aan (liefst) alle 125 richtlijnen. En fancy flash-movies en bakken met javascript zijn dan wel leuk en aardig, maar d'r moet altijd een laag onder zitten waarop alle content op een duidelijke manier toegankelijk wordt gemaakt.

Wat dat betreft is bijvoorbeeld Google ook maar een blinde bezoeker, als je je site goed vindbaar wilt hebben in een zoekmachine zul je moeten voldoen aan basale voorwaarden, zoals je content duidelijk, gestructureerd in tekst aanbieden.
[/off-topic]

Terug naar de vraag - hoe de content met tekst te plaatsen:

Maak een content-container-div en maak hierin dan een duidelijke opbouw van je content:
Op elke pagina één h1 - header met daaronder eventueel een onderverdeling met één of meerdere h2, h3 - headers etc.
Plaats je content in p - tags.

Met CSS maak je vervolgens alle headers en content naar wens op.
Gebruik eventueel een reset-css om van allerlei hinderlijke en browser verschillende standaardinstellinen af te komen, zodat je met een schone lei de opmaak van je eigen site kunt beginnen.

ontwerp omzetten naar xhtml / css
25 februari 2009 - 20:17    reactie #24
geplaatst door: macvooh
even antwoorden op dit offtopic kronkeltje:

- google ads op een XHTML strict ontwerp.. doe maar eens.. ja het gaat, met omwegen die echt niet mooi zijn!

- voed je webpage eens als aplication/xml aan internet explorer....

xhtml strict is zijn doel voorbijgestreeft.
ik ben ook gebonden aan webrichtlijnen, drempels vrij, accessibility, etc.
maar dat is geen reden om wel of niet in xhtml strict te werken..
het is niet omdat een pagina in transitional geschreven is dat hij daarom niet meer toegankelijk is!

edit:
als je vind van wel, gelieve mij hierop te wijzen, ik leer graag bij van mensen in de branche!!

(Bewerkt door macvooh om 20:18, 25-02-2009)

FREAK!