"Modernisierung" von Firmenwebsite

Gopher

Hallo!
Ich muss derzeit für meinen Chef die Website www . baugema.de modernisieren.
Hauptsächlich geht es hier um SEO-Maßnahmen, der Text wird erst später verändert.
Zuerst habe ich alle Seiten die zukünftig gebraucht werden in HTML gespeichert.
Dann hab ich Metas für alle Seiten definiert, überflüssigen Code aus dem Headbereich entfernt und die URL´s sinnvoll benannt.
Dann hab ich ein neues Menü eingebunden: Bsp:(www . http://fightforfreedom.de/menue/arbeitsschutz2.html)
Hier ist schon mein erstes Problem:
Ich bekomme den Code

HTML

<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */
#menu4 {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #000000;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 30px;
}
#menu4 li a:hover, #menu4 li #current {
color: #fff;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
#menu4 li a:active {
color: #fff;
background: url(menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}
-->
  </style>

Alles anzeigen

nicht sauber in die style.css-Datei. Deshalb hab ich sie so reingeschrieben.
Mein zweites Problem sind die vielen Tabellen.
Gibt es eine Möglichkeit das komplette Design (Firmenlogo und die gelben Balken) sauber ohne Tabellen zu nutzen?
Also in den HTML-Dokumenten nur der komplette "Bildschirmtext"+Head und das Design separat in CSS, so wie es sein soll.
Ich möchte in Zukunft den freien Platz auf der Seite besser auslasten, mit einem anpassbarem 3-Spaltenmenü.
Kann mir bitte jemand helfen?

Gruß, Gopher

Bandit

Zitat von Gopher

Ich muss derzeit für meinen Chef die Website www . baugema.de modernisieren.

Aha, wir sollen also deine Arbeit machen?!

Zitat von Gopher

Ich bekomme den Code nicht sauber in die style.css-Datei.

Keine Ahnung, was du uns damit sagen willst.

Zitat von Gopher

Gibt es eine Möglichkeit das komplette Design (Firmenlogo und die gelben Balken) sauber ohne Tabellen zu nutzen?

Natürlich

Zitat von Gopher

Kann mir bitte jemand helfen?

Wobei?

synaptic

also was ich immer faszinierend finde, ist das chefs sich offensichtlich genug gedanken machen, um nepage zu rebrushen oder zu pimpen.
was ich nie verstehe, ist wieso man dafür keinen profi holt und das anständig bezahlt.
es werden immer arme "opfer" aus dem mitarbeiterkreis auserkoren, die dann die arbeit aufgebrummt bekommen und sich dann an foren wenden, um für etwas kommerzielles kostenlosen support zu bekommen.
eigentlich ein unding!

zu deinen fragen:
ja man kann die page ohne tabellen semantisch korrekt aufbauen
man kann jedwegen style in eine css-datei auslagern, muss diese dann nur richtig einbinden
dein projekt schreit nach eigentlich schon php und auch nach htaccess

Gopher

Hallo Bandit,
erstmal danke für die Antwort.
Nein, hier soll natürlich niemand meine Arbeit machen aber ich komme halt nicht weiter.
Fällt mir ein wenig schwer mein Problem zu erklären da ich kein beruflicher Programmierer bin sondern ein wenig Grundwissen habe und ansonsten heißt es Learning by doing.
Erstmal zum CSS-Code:
Für das neue Menü muss ich den Code den ich oben gepostet habe, wahrscheinlich in die Style.css einfügen, richtig? Mein Problem ist aber das es so nicht korrekt dargestellt wird. Im Head-Bereich jedoch funktioniert der Code, er formatiert aber den gesamten Text und nicht nur den Menütext.
Was mache ich falsch?
Zum Design:
Ich habe schon selbst versucht in NVU das Design ohne Tabellen zu benutzen. Habe quasi die Bilder zusammengefügt. Das Problem hierbei sind die Balken: http://fightforfreedom.de/menue/images/neu_1_02_bg_top.gif

Die Tabellen möchte ich entfernen da durch sie neuer inhalt viel schwieriger einzufügen ist und dann der Code kleiner wird.

Ich hoffe mal das ist verständlicher,
Gruß - Gopher

Bandit

Zitat von Gopher

ein wenig Grundwissen habe und ansonsten heißt es Learning by doing.

Sorry, aber das kann eigentlich nur im Chaos enden

Zitat von Gopher

Für das neue Menü muss ich den Code den ich oben gepostet habe, wahrscheinlich in die Style.css einfügen, richtig?

Ja, aber ohne
<style type="text/css">

</style>

Zitat von Gopher

Ich habe schon selbst versucht in NVU das Design ohne Tabellen zu benutzen.

Höre bitte auf mit dem NVU, das ist ein Drecksprogramm, das nur katastrophalen Quellcode liefert

Alles in allem hast du da in Anbetracht deines Wissensstandes ein riesiges Projekt vor der Nase. Hinzu kommt, dass die Seite teilweise PHP benutzt und das auch durchaus sinnvoll ist. Ich gehe allerdings mal davon aus, dass du von PHP noch weniger Ahnung hast.

Gopher

Hey,
naja ich habe kein Problem damit mich tiefer in die Materie einzuarbeiten. Auch wenn ich weiß das das dauern wird. NVU hab ich nur benutzt weil ich mir den Code gleich dargestellt ansehen kann und die Befehle farbig markiert sind. Das erleichtert es auch wenn WYSIWYG Editoren natürlich qualitativ schlechten Code fabrizieren.
Zukünftig sollen alle Seiten im HTML Format sein. Das habe ich schon gemacht.
Das dadurch der Shop und das Kontaktformular nicht gehen, weiß ich.
Auf der Seite soll später auch kein Shop mehr sein, deutscher Rechtslage sei dank.
Aber egal... wie werde ich jetzt die Tabellen los ohne die jetzige Gestaltung zu zerstören?
Vielen Dank,
Gopher

Bandit

Zitat von Gopher

Das erleichtert es auch wenn WYSIWYG Editoren natürlich qualitativ schlechten Code fabrizieren.

Wie schon gesagt, NVU ist Mist! Lerne die Grundlagen und verlasse dich nicht auf einen WYSIWYG-Editor

Zitat von Gopher

Zukünftig sollen alle Seiten im HTML Format sein.

Das wäre dumm, denn wie synaptic schon sagte, dein Projekt schreit eigentlich nach PHP, um nicht endlos viel doppelten Code zu erzeugen

Zitat von Gopher

Das dadurch der Shop und das Kontaktformular nicht gehen, weiß ich. Auf der Seite soll später auch kein Shop mehr sein, deutscher Rechtslage sei dank.

Aber das Kontaktformular wäre futscht, was aber dumm wäre.

Zitat von Gopher

wie werde ich jetzt die Tabellen los ohne die jetzige Gestaltung zu zerstören?

Du musst dir einen sinnvollen Aufbau der Seite überlegen, sprich, du musst die Seite in Blöcke zerlegen. Hilfreich dürfte sein: http://www.css4you.de/wslayout1/index.html

Gopher

Hm... also doch wieder php?
Wollte davon eigentlich weg... Derzeit werden die Seiten aus einer Datenbank erzeugt. Veränderungen sind nur über das CMS möglich. Unter php haben die Seiten auch keine eindeutigen Namen mehr (../schuhe.html), was für Suchmaschinen eine Rolle spielt. Außerdem lassen sich die Metas nur einmal für alle Seiten festlegen. Mit dem Editor des CMS können nur Veränderungen im Body-Bereich getätigt werden. Das riesige Java-Menü ist in der Offline-Version wie gesagt nicht mehr vorhanden. Das Kontaktformular kann man ja ersetzen. Vom Layout weiß ich ja eigentlich schon wie es aussehen soll:
3-Spalten Layout
Links Menü, Mitte Text und Rechts "Sidebar" mit weiteren Informationen, Kontakt-Möglichkeit...
Anders lässt sich doppelter Content nicht vermeiden?
Danke für die Hilfe,
Gopher

Bandit

Wenn man, so wie bei dir, viele Seiten hat, zerlegt man das ganze und baut es zur Laufzeit wieder zusammen. Sprich, du hast das Menü, den Header und Footer nur ein einziges mal. Das macht Anpassungen deutlich einfacher. Es spricht ja auch nichts dagegen, wenn du für jede Seite eine eigene Datei machst. Vom Prinzip her sieht dann ein PHP-Script vereinfacht dargestellt so aus:

PHP

<?php
   include ("./includes/header.html");
   include ("./includes/menu.html");
   include ("./includes/content.html"); // Hier werden dann die entsprechenden Inhalte eingebunden
   include ("./includes/sidebar.html");
   include ("./includes/footer.html");
?>

Mit einiges Tricks kann man die Content-Seite sogar per Script ermitteln

Gopher

Also falls ich das richtig verstanden habe:
Ich definiere verschiedene Bereiche (Header, Footer,...) mit

<div class="menuelinks"> und schreibe dann in diesen Bereich den include-Befehl,
in diesem Fall fürs Menü?

Bandit

Ungefähr so sehen die einzelnen Dateien aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="main">

Alles anzeigen

Code

<div id="menu">
  Hier das Menü rein
</div>

Code

<div id="content">
  Hier den Content rein
</div>

Code

<div id="sidebar">
  hier die Sidebar rein
</div>

Code

<div id="footer">
  Copyright by Donald Duck
</div>
</div>
</body>
</html>

Und mit dem oben geschrieben PHP-Script werden sie zusammengebaut. Du musst dann nur noch für jede einzelne Seite eine Content-Seite erstellen.

Gopher

Okay vielen Dank für die Hilfe.
Mal sehen wie das klappt.

Gopher

Hallo!
Bin jetzt dabei Header und Navigation zu bauen.
Allerdings gibts da ein kleines Problem:
Header und Navigation bestehen aus jeweils 2 Grafiken: 1 Logo/Bild mit fester Größe und ein "variabler" Balken (jeweils waggerecht und senkrecht) der bis zum Ende der Seite gehen soll.
Navigation und Header stehen nebeneinander. so wie im Orginal.
Mein Problem ist jetzt die Größenzuweisung da ich für die variablen Balken ja xx% des Bildschirms zuweisen muss, aber nicht weiß wie viel % die vorhandenen Bilder wegnehmen.
Außerdem kann ich die Navigation nur neben und nicht auf das Bild schreiben. Was das ganze Vorhaben wieder sinnlos macht, wenn ich das nicht hinbekomme...
Weiß jemand Rat?
Gruß - Gopher

master_1

also ich stelle auch gelegentlich fragen in foren, aber nie für einen chef. dein chef sieht ja nicht unbedingt pleite aus und sollte einen 10er für eine anständige page locker machen. was du hier nachfragst bringt dich nicht besonders weit mit diesem projekt. es ist übrigens üblich das chefs die real gute arbeit leisten keinen blasssen schimmer vom internet haben, und denken sie müssen halt dabei sein, aber zahlen wollens dafür nichts. neulich hat mich wieder so ein komiker gefragt ob ich ihm einen shop gestalte. er wollte dafür 300 zahlen, und das erst wenn alles fertig ist. lauter verrückte.

---

wenn du schon für deinen chef in dieser richtung tätig sein willst/musst dan frag ihn ob er dir wenigstens ein anständiges progarmm wie z.b.dreamweaver kauft weil da hast auch farblichen code usw. auch ein gutes grafiker programm ( photoshop ) um ein paar tausender wäre nicht schlecht, oder nimm gimp da kostet nix.

---

ich kann dir anbieten eine grafik kostenlos zu erstellen wenn du willst, nicht für deinen chef sondern damit du bei ihm einen erfolg verbuchen kannst !

zu deiner letzten frage.

kannst du mir eine demo zeigen dann kann ich dir eventuell helfen ?

lg

Bandit

Wie ich schon sagte, eigentlich kann das nur im Chaos enden.

Du musst die Grafik als Hintergrund einbinden, dann bekommst du das Menü auch auf die Grafik

Gopher

Hey master_1,
also hier ist ein Beispiel: http://fightforfreedom.de/menue/arbeitsschutz2.html
(Dort ist schon das neue Menü integriert.)
Ich wollte jetzt die Grafiken trennen.
Also ab dem Minibagger senkrecht runter, das soll dann der Navigationsbereich werden.
(Hier kann ich nur neben dem Balken schreiben, das Menü soll aber so wie in dem Link oben sein)
Dann wird das Logo und der langgezogene Balken der Headerbereich.

Vielen Dank für das Angebot, aber ich will das Design ja "nur" ohne Tabellen nachbauen mit den selben Grafiken. Habe da nur leider ein paar Schwierigkeiten.

Danke für die Hilfe

master_1

Zitat von Gopher

Hey master_1,
also hier ist ein Beispiel: http://fightforfreedom.de/menue/arbeitsschutz2.html
(Dort ist schon das neue Menü integriert.)
Ich wollte jetzt die Grafiken trennen.
Also ab dem Minibagger senkrecht runter, das soll dann der Navigationsbereich werden.
(Hier kann ich nur neben dem Balken schreiben, das Menü soll aber so wie in dem Link oben sein)
Dann wird das Logo und der langgezogene Balken der Headerbereich.

Vielen Dank für das Angebot, aber ich will das Design ja "nur" ohne Tabellen nachbauen mit den selben Grafiken. Habe da nur leider ein paar Schwierigkeiten.

Danke für die Hilfe

Alles anzeigen

das sieht ja schon um einige sbesser aus als das original.

du willst die grafik trennen, schneiden in zwei teile ? ich verstehe nicht so recht was du genau willst kannst du es nochmal für begriffstützige erklären

Gopher

Mit Grafiken trennen meine ich sie den richtigen Bereichen zuordnen: Header, Navigation,...
Ich will nichts zerschneiden oder so.
Die Navigation besteht aus einem Minibagger und danach folgend einem skalierbaren Balken.
Der Balken soll sich der Auflösung anpassen und bis zum Ende der kompletten Seite gehen (also nur länger werden). Der Minibagger jedoch hat eine feste Größe die sich nicht verändern soll.
Der Header besteht aus dem Firmenlogo, das wieder eine feste Größe beibehalten soll und einem Balken der sich der Auflösung anpassend bis zum Bildschirmrand ziehen soll.
Hoffe mal das ist verständlicher...
Gruß&Danke - Gopher

master_1

naja du solltest eine css erstellen und divs anlegen.

beispiel:

in die style.css

.navi{
background-image: url("../images/bg_bagger.png"); background-repeat: no-repeat; background-position: left top; background-attachment:scroll;
width: 100%;
height:72px;
}

in die html

den balken machst zb. auf width:100% background-repeat: repeat-x; dann wird der balken wiederholt und geht von links nach rachts in der css

ist jetzt kein korrektes css aber so in etwa soll es sein. da musst echt bei css nachlesen sonst wirds ein problem.

lg

Gopher

Okay vielen Dank für die Hilfe..
Ja da muss ich noch ne Menge lesen & lernen, das weiß ich.
Ich hab jetzt Feierabend, werd mich aber heute abend und morgen weiter damit beschäftigen
und melde mich dann nochmal.
Schönen Abend noch,
Gopher

Tags