Umsetzung Webseite

[Centifolia]

Hallo --
ich bin Anfängerin im Bereich Webdesign und benötige ein paar Tipps. Ich hab' in Fireworks das Design für eine Webseite entworfen.
So sieht die Startseite aus, wobei alle anderen Seiten auch hauptsächlich aus Tabellen bestehen :
http://www.pictureupload.de/pictures...2_improved.gif

Die Links aus der Navigation sowie die Inhalte der Tabellen sollen aus der Datenbank geholt werden. Wie setze ich das Design am besten in HTML um? Ich hab' es per Hand versucht, aber das ist ziemlich zeitaufwändig, wenn man nicht so fit darin ist. Machen Slices hier Sinn?

Für Tipps bin ich sehr dankbar!

[the0bone]

Hallo Centifolia,
wie du angefangen hast, sieht schon ganz gut aus. Aber soweit ich Fireworks kenne, ist es für deine Anforderung nicht das richtige Tool.

Datenbankanbindungen und dann eine richtige HTML Seite draus machen, dass macht man besser in Dreamweaver oder vergleichbaren HTML Editoren.

Slices machen bei deiner Anwendung wenig Sinn. Wenn du eine Grafisch aufwendige Seite hast, dann könnte es Sinn machen, eine Grafiken zu zerschneiden.

In deinem Fall würde ich aber die Navigation als Text und nicht Bild erstellen. Und auch die Tabellen sollten Texte sein und keine Bilder. Und wenn du die dann noch aus Datenbanken holen willst, dann kommst du um DW aus meiner Sicht nicht herum.

Sicher kann man das via Hand Coden, DW geht aber dann schneller, da einige Dinge vorgefertigt sind und durch die WYSIWYG Methode sieht man auch gleich was passiert.

[edit]
PS: Solche Planungstools für Teamarbeit oder Eventmanagement gibt es auch schon fertig im Netz...

[Centifolia]

Hallo the0bone --

danke für Deine ausführliche Antwort. Das war sehr hilfreich. Ich denke, ich werde das dann versuchen in DW umzusetzen.
Ganz besonders die Navigation hat mir große Schwierigkeiten bereitet. Ich habe schon alles Mögliche versucht - als Tabelle, als unordered list, die ich dann mit CSS formatiere. Die beiden Striche unter den Links bekomme ich einfach noch nicht so richtig umgesetzt, da die ihre Farbe wechseln, je nachdem ob aktiv oder nicht. Hast Du diesbezüglich vielleicht auch einen Vorschlag?

danke vielmals

P.S.: Ja, es gibt es solche Anwendungen schon, aber ich mache das im Rahmen eines Uniprojektes.

[Torsten]

Hallo Centifolia,

könntest Du das Bild evtl. mal hier im Forum als Anhang einbinden

Vielen Dank!

[Torsten]

Nein, der Link ist ja oben schon, ich komme hier nicht auf die Domain, die ist geblockt...

Ich meinte das bild hier im Beitrag anhängen, als Datei-Anhang - das geht beim Antworten, wenn Du ein bisschen weiter nach unten scrollst

[the0bone]

Also, das mit den Unterstrichen ist recht einfach zu realisieren.
Wenn auch schon oft hier im Forum gepostet... schau dir mal meine Navigation bei www.bushidokarate.de an.
Dort hast du Textlinks über UL und LI. Mit einem hover Effekt und einem aktiv Effekt. Sprich, wenn du im Blog bist, dann ist Blog sogar hinterlegt. Gesteuert über die class="current".

PS: Hier das Bild als Anhang für geblockte

[Torsten]

PS: Hier das Bild als Anhang für geblockte
Anhang 40671

Vielen Dank ich habe dann mal die anderen 2 Posts wieder gelöscht

[Ben-]

Hallo Centifolia,
Datenbankanbindungen und dann eine richtige HTML Seite draus machen, dass macht man besser in Dreamweaver oder vergleichbaren HTML Editoren.

Dreamweaver hilft ihm bei Datenbankanwendungen nun auch nicht weiter. Und ob er seine PHP Scripte in ein textdokument mit dem notepad oder mit nem Editor schreibt, macht auch keinen Unterschied.

Sicher kann man das via Hand Coden, DW geht aber dann schneller, da einige Dinge vorgefertigt sind und durch die WYSIWYG Methode sieht man auch gleich was passiert.

Und wie schön valide das enstandene HTML ist, sieht man dann unter der folgenden URL:
http://validator.w3.org/check?uri=ht...dokarate.de%2F


WYSIWYG Editoren, egal von welchem Editor, sind schrott. Das XHTML/CSS ist zumeist unübersichtlich, nicht valide und überfüllt. Und "man sieht auch gleich was passiert" stimmt: Nämlich nur Unfug. Die Vorschau von solchen Editoren, auch die von Dreamweaver, ist sehr fehlerhaft und unterscheidet sich enorm vom wirklichen Ergebnis im Firefox, Internet Explorer, Opera & co.

Bezüglich Author: Das Design ist simpel und dennoch schick, mir sagt es wirklich zu!
Fireworks ist, für mich zumindest, ein Programm, wo man sich bezüglich seines Layouts austoben und es planen kann. Man baut das Design mit den Farben einfach, wie es später aussehen soll und fertigt ggf. Grafiken dafür an. Und das funktioniert mit Fireworks super. Anhand deines Layouts orientierst Du dich dann und baust mittels XHTML und CSS deine Seite auf - per Hand geschrieben versteht sich. Slicen ist in den meisten Fällen unnötig und wird nur erfordert, wenn Du Grafiken benutzt, die nicht mit CSS/HTML allein umgesetzt werden können. Diese exportierst Du dann einfach einzeln und bindest sie auf deiner Seite ein.

Letztlich wirst Du am glücklichsten, wenn Du die Seite per Hand geschrieben hast, weil dann einfach weniger Fehler drin sind und Du durch deinen XHTML/CSS Code durchblickst. Das Lernen dieser Sachen geht auch recht fix und es lohnt sich definitiv!

GA

[Rea]

Na, du teilst ja ganz schön aus, GA!

[Ben-]

Ist ja nicht böse gemeint, aber man sollte den Threadstarter auch auf die Nachteile aufmerksam machen und nicht nur sagen, wie schick die Oberfläche von DW aussieht oder dass es einen WYSIWYG-Editor hat - und bei the0bone klang es so, als würde das Ding auch noch einwandfrei funktionieren

[Torsten]

Ist ja nicht böse gemeint, aber man sollte den Threadstarter auch auf die Nachteile aufmerksam machen und nicht nur sagen, wie schick die Oberfläche von DW aussieht oder dass es einen WYSIWYG-Editor hat - und bei the0bone klang es so, als würde das Ding auch noch einwandfrei funktionieren

1. funktioniert die aktuelle und die Vorgängerversion von Dreamweaver einwandfrei wenn man sie weiß zu bedienen
2. möchte ich anmerken, das es im Trum-Projekt nicht toleriert wird, das Webseiten die man selbst nicht erstellt hat an den Pranger gestellt werden.

[Centifolia]

Ich hab' damit angefangen, das in DW umzusetzen und ich mußte feststellen, dass mir das Design tatsächlich im Firefox anders dargestellt wird als in DW selbst. Und es ist auch so, dass im Quelltext so einiges hinzugefügt wird, das wahrscheinlich nur verwirrt. Dennoch muss ich gestehen, dass es mir durch WYSIWYG vorerst auf jeden Fall leichter fällt als wenn ich es es per Hand schreiben würde. Ich hab' einfach ein Zeitproblem und weiß nicht, wie ich das am schnellsten beheben kann.

[Ben-]

1. funktioniert die aktuelle und die Vorgängerversion von Dreamweaver einwandfrei wenn man sie weiß zu bedienen
2. möchte ich anmerken, das es im Trum-Projekt nicht toleriert wird, das Webseiten die man selbst nicht erstellt hat an den Pranger gestellt werden.

Zu 1.: In Bezug auf was? Die aktuelle Version von DW bietet tolle Features, doch meine starken Zweifel liegen in der Vorschau-Version, was ich auch erleutert habe. Das hat der Threadersteller ja auch festgestellt.

Zu 2.: Nun stellt sich mir die Frage, ob Du das nicht tollerierst, oder das TP.
Die bushidokarate.de Seite enthält die Angabe von validem HTML, was so nicht stimmt. Was Du nun als Anprangern interpretierst, sehe ich viel mehr als Feedback an den Besitzer der Seite sowie als "Obacht!" an den Threadersteller.
Und ich finde es nicht okay, wenn man anderen Leuten empfiehlt Methoden zu verwenden, in dem man nur (Schein)-Vorteile nennt. Wenn es hier natürlich untersagt wird auch auf die Schattenseiten von diversen Dingen aufmerksam zu machen, dann möge man mir das bitte sagen.

Ich hab' damit angefangen, das in DW umzusetzen und ich mußte feststellen, dass mir das Design tatsächlich im Firefox anders dargestellt wird als in DW selbst. Und es ist auch so, dass im Quelltext so einiges hinzugefügt wird, das wahrscheinlich nur verwirrt. Dennoch muss ich gestehen, dass es mir durch WYSIWYG vorerst auf jeden Fall leichter fällt als wenn ich es es per Hand schreiben würde. Ich hab' einfach ein Zeitproblem und weiß nicht, wie ich das am schnellsten beheben kann.

Wie definiert sich das Zeitproblem? Ist die Seite privat, also für Dich? Dann mach dir da doch keinen Druck, geh die Sache ruhig an und nutz es als praktische Übung zum Lernen. Wenn Du es für jemand anders machst und es ggf. als Referenz nutzen möchtest, solltest Du dir darüber Gedanken machen, dass eine Seite, die in den gängigen Browsern unterschiedlich aussieht, keine vorteilhafte Referenz darstellt. Dies wiederum könnte den aktuellen sowie folgende Kunden abschrecken.

Nur ein gut gemeinter Hinweis.

GA

[Centifolia]

Ich wünschte, sie wäre privat.
Allerdings ist es ein Uniprojekt, das in spätestens 3 Wochen fertig sein muß. Hier haben wir die Vorgabe, das es NUR auf einem Brower laufen muß.
Ein Kommilitone hat bei ähnlichem Seitenaufbau mit Slices gearbeitet und auf die Bilder dann Tabellen gelegt. Ich fand das aber eher fraglich, weil die Inhalte teilweise dynamisch sind.

[the0bone]

Und wie schön valide das enstandene HTML ist, sieht man dann unter der folgenden URL:
http://validator.w3.org/check?uri=ht...dokarate.de%2F

Woooh.... auch wenns nicht böse gemeint ist von dir... der nicht valide Code kommt von Google!!! Aber das einem Hardcore Coder wie dir ja sicher aufgefallen.

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_006879329560583474199%3Aawzfqytuoik&lang=de"></script>

Und wenn, liegt es nicht an der Software, dass der Code nicht valid ist, sondern am Anwender.

Dreamweaver hilft ihm bei Datenbankanwendungen nun auch nicht weiter.

hmmmm. Keine Ahnung, welche Version du nutzt... aber ich glaub seit CS doch! Zumindest CS4 kann dich dranbinden und in der Liveansicht sogar was darstellen!

Also, bis dato alles bu||$&|t. Mein ich ja auch nicht so

Aber zum Thema hast du dann was geschrieben, dem ich nur zustimmen kann.