Inhalte im Mainbereich einbinden

Ranger 1281

Mitglied
Hi All,

ich möchte folgendes realisieren, finde aber keine Lösung.

Ich möchte eine Site mit bestimmten festen, sich immer wiederholenden, Elementen erstellen. Diese Site soll NICHT mit Frames realisiert werden.

Ich es möglich den Inhalt des "Mainbereiches" mittels Link in ein vorgefertigtes Layout einzubinden (in "Boxmain"), so dass ich im Falle einer Veränderung des Layouts nur eine Datei ändern muß.

----------------------------
Hier der Quelltext:


index.html:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Zentriert mit menuleft</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Ralf Schepp" />
  <meta name="robots" content="all" />
  <meta name="language" content="de" />
  <meta name="DC.rights" content="Raf Schepp" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <meta http-equiv="date" content="23.02.2010" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="content-type" content="text/css; charset=iso-8859-1" />
  <meta http-equiv="content-type" content="text/javascript; charset=iso-8859-1" />
 </head>
 <body>
  <div id="boxtop"><img src="img/img_top_1024x200.jpg" alt="Oberes Banner" border="0" width="1024" height="200"></div>
  <div id="leftmenu"><img src="img/menu_left_200x568.jpg" alt="Navigation" border="0" width="200" height="568" usemap="#menuleft"></div>
   <map name="menuleft">
    <area shape="rect" coords="0,0,200,40" href="index.html">
    <area shape="rect" coords="0,40,200,80" href="firma.html">
    <area shape="rect" coords="0,80,200,120" href="leistungen.html">
    <area shape="rect" coords="0,120,200,160" href="impressionen.html">
    <area shape="rect" coords="0,160,200,200" href="galerie.html">
    <area shape="rect" coords="0,200,200,240" href="kontakt.html">
    <area shape="rect" coords="0,280,200,320" href="impressum.html">
   </map>
  <div id="boxmain"><img src="img/main_824x568.jpg" alt="" border="0" width="824" height="568"></div>
 </body>
 </html>

---------------------

externes CSS:


style.css:

Code:
body {  background-color: #ffffff;}

a:link { color: #0000ff;}

a:visited { color: #00ff00;}

a:active { color: #0000ff;}

a:hover { color: #0000ff; text-decoration: underline;}

h1 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 150%; font-weight: bold;}

h2 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 140%; font-weight: bold;}

h3 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 130%; font-weight: bold;}

h4 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 120%; font-weight: bold;}

h5 { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 110%; font-weight: bold;}

p { color: #000000; font-family: arial,verdana,sans-serif; font-style: italic; font-size: 100%; font-weight: bold;}

#box1 { position: fixed; left: 0px; top: 0px; z-index: 7;}    /* für den oberen Dummy, falls nötig*/

#boxtop { position: fixed; left: 50%; margin-left: -512px; top: 5px; z-index: 7;}    /*für das obere Banner*/

#menu { position: fixed; left: 50%; margin-left: -512px; top: 205px; z-index: 7;}    /*horizontales Menu, falls vorhanden*/

#leftmenu { position: fixed; left: 50%; margin-left: -512px; top: 205px;  z-index: 7;}    /*linkes Menu*/

#boxmain {  position: fixed; left: 50%; margin-left: -312px; top: 205px;  z-index: 1;}     /* BG Hauptbereich*/

#mainmenu { position: absolute; left: 125px; top: 45px;  z-index: 2;}    /* Menu im Hauptbereich, falls vorhanden*/

#h1 { position: absolute; left: 50%; margin-left: -250px; top: 250px; width: 900px; z-index: 2;}   /*Überschrift*/

#main { position: absolute; left: 175px;  top: 2050px; width: 650px;}   /*zusätzliches Mainelement, falls vorhanden*/

#text1 { position: absolute; left: 50px;  top: 35px;  width: 650px;  text-align: justify;  z-index: 2;}   /*Haupttext*/

#pic1 {  position: fixed; left: 0px; top: 30px;}    /*Bild*/

#pic2 {  position: absolute; left: 650px;  top: 500px;  z-index: 3;}   /*Bild*/

#pic3 {  float: right;  top: 350px;  z-index: 3;}   /*Bild*/


------------------------------

Ich danke Euch bereits jetzt für Eure Tipps

Ralf
 

Anhänge

  • screenshot_1.jpg
    screenshot_1.jpg
    20,2 KB · Aufrufe: 28
Zuletzt bearbeitet:

Dr Dau

ich wisch hier durch
Hallo!

Deinen Quelltext sehe ich mir nicht an.
1. hat er keine Syntaxhervorhebung (dafür gibt es im Eingabeformular extra einen "HTML-Code einfügen"-Button).
2. hat er keinerlei Struktur (Zeileneinrückung).

Aber, HTML ist eine statische Sprache und somit nicht veränderbar.
Folglich kann auch nichts dynamisch eingebunden werden.
Dazu gibt es dynamische Scriptsprachen wie z.B. PHP und der dortigen include()-Funktion.

Ob es eine solche Funktion auch für JavaScript gibt, entzieht sich meiner Kenntnis.
Aber selbst wenn, würde ich davon abraten.
Schliesslich würden bei deaktivierten JavaScript wesentliche Elemente Deiner Seite nicht mehr funktionieren. ;)

Gruss Dr Dau
 

StupidBoy

Mitglied Gold
Das ganze lässt sich - wenn du nicht serverseitige Technologien zurückgriefen willst - mittels AJAX respektive xmlHttpRequest lösen.
Mit diesem schickst du einen simplen HTTP-Request an deinen Webserver, dieser liefert dann den gewünschten Content zurück und diesen kannst du mittels JS in die Seite einbinden.
Wenn ein Besucher allerdings kein JS aktiviert hat kann er deine Seite auch nicht benutzen, folglich solltest du dir überlegen wie deine Zielgruppe aussieht.

http://de.wikipedia.org/wiki/XMLHttpRequest

http://www.dhtmlgoodies.com/index.html?whichScript=ajax-dynamic-content
 

Ranger 1281

Mitglied
Hallo,

vorweg Danke für Eure schnellen Antworten.
@ Dr. Dau:
sorry, an die Boardfunktionen muß ich mich erst gewöhnen, das war mein 3. Beitrag in diesem Forum, ich gelobe Besserung. Struktur habe ich auch reingebracht....
Also, wenn ich Euch richtig verstehe, werde ich, sofern ich bei einer reinen (x)HTML / CSS- Lösung bleiben will, nicht um Frames, respektive I-Frames herum kommen. Schade, ich hatte gehofft, das es eine Alternative in diesem Bereich gibt...

Wie sieht es bei einer Lösung mit Frames / I-Frames bezüglich der Robots von den Suchmaschinen aus?
Ich habe gelesen, dass es hier zu Problemen kommen kann, weil die Robots den Inhalt so nicht auslesen können.
Kann ich die Robots über "index, follow" oder "all" doch dazu bringen, die Inhalt an ihre Suchmaschine zu übertragen?

Viele Grüße

Ralf
 
M

Maik

Hi,

in dem gestrigen Thread Website nur Inhalt soll wechseln und laden (in der Themenübersicht drei Zeilen unter deinem) hab ich die technischen Alternativen zum Frameset / iFrame genannt, und mit Beispielen verlinkt.

Mit der Indizierung sieht's schlecht aus, wenn du auf Frames zurückgreifst.

mfg Maik
 

Ranger 1281

Mitglied
Hi maik,

whow das war schnell!

Danke für den Hinweis, damit bestätigst Du meine Befürchtung. Ok, da muß ich mir was überlegen.
Eine abschließende Frage noch:

So wie mein Quellcode jetzt da steht, werden von den Robots jedoch die Keywords (wenn ich dann welche eingetragen habe...) gelesen und übermittelt oder?
Das wäre ja besser als nichts....
Für die Description würde das gleiche gelten, Richtig?

Viele Grüße

Ralf
 
M

Maik

Wenn sich die Angaben im Dokumentheader auch im darauffolgenden Dokumentkörper (<body>...</body>) wiederfinden, ja :)

mfg Maik