• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Webseite: Richtige "Frames" setzen

Status
Für weitere Antworten geschlossen.
G

greenS

Neues Mitglied
Hallo Leute!

Bin neu hier und hoffe ihr könnt mir ein paar hilfreiche Tips zu ein paar kleinen Problemchen geben.

Ich habe schon einige Erfahrungen mit html, habe aber jetz seit gut 4 Jahren konkret in html nichts mehr geschrieben und erstellt, da ich zwischenzeitlich überwiegend mit CMS´ gearbeitet habe.

Meine Idee ist folgende:
Ich möchte eine recht simple html seite erstellen. um mir die worte zu sparen habe ich meine ideen mal zu "papier" gebracht.

so soll es "frametechnisch" aussehen:

html_sample2.JPG


nun soll es aber so sein, dass die frames wirklich fließend ineinander übergehen. und genau darin liegt mein problem. als ich damals mit html webseiten erstellt habe gabs das einfach frame. da kam dann eventuell noch der scrollbalken dazu und fertig.
leider sah das dann auch nicht immer wirklich gut aus.

im endeffekt soll die seite aussehen wie aus einem guss:

html_sample.JPG


nun die große frage: wie heißt das schlüsselwort mit dem ich diese aufteilung herbeizaubere damit der optische effekt der "einheit" gewährt wird?
frames, iframes, ebenen oder was auch immer im angebot steht.
es soll so sein, dass wenn man im menueframe auf einen link klickt, der inhalt vom sideframe UND vom mainframe geändert werden. also beide mittleren frames vom menueframe abhängen.
es soll KEINE scrollbalken geben.
und: der mittlere frame soll nach rechts und links quasi endlos sein. also dass der farbton des sideframes links und der des mainframes rechts nicht auf einmal im weißen enden. unten und oben ist dann aber weiß.

als editoren steht mir Microsoft Expression Web zur Verfügung. Ansonsten diverse Bildbearbeitungsprogramme und Texteditoren.
Für Programmtips, falls erforderlich, (möglichst freeware) bin ich auch dankbar.

Vielen Dank an alle Helfenden!
 
Also, das Wort Frames streichst du jetzt erstmal aus deinem Wortschatz, die braucht man für Webseiten nicht mehr ;). Das Zauberwort in deinem Fall heißt HTML + CSS lernen. Dieses Tutorial könnte als Einstieg gut helfen.

Das was du dir als Layout für deine Seite vorstellst, ist im groben ein Standard-Layout und mit HTML und CSS überhaupt kein Problem.

Als Editor verwende ich entweder Notepad2, oder Eclipse (beide kostenlos), wobei Eclipse nur für HTML und CSS vielleicht etwas übertrieben ist.

Wenn du etwas Zeit investieren willst und kannst, empfehle ich wirklich, das Tutorial durchzuarbeiten, erst HTML, dann CSS, so findest du einen guten Einstieg und kannst dich danach an die komplexeren Aufgaben begeben.

Ein für mich mittlerweile unverzichtbare Tools für die Webentwicklung, sind der Web Developer und der HTML Validator für Firefox.
 
aaaahja. danke. also funktionsweise und sprache von html sind mir ebreits bekannt.

css kenn ich von dem CMS´her. der genaue hintergrund war mir aber nur bedingt klar.
hab mir das css tutorial mal durchgelesen.

ises wenn ich es richtig verstanden habe also so, dass die von mir gewünschte aufteilung des layouts mit den sogenannten "boxes" umgesetzt wird?!
kurz: jeder "frame" ist eine eigene "box" die ich nur noch in alle richtungen (in meinem fall absolut) konfigurieren mus und für die dann den jeweiligen style (backgroundcolor, fonts etc. pp.) festlegen muss?
 
greenS schrieb:
dass die von mir gewünschte aufteilung des layouts mit den sogenannten "boxes" umgesetzt wird?!
Zum Vergrößern anklicken....
Diese Aussage kann man so stehen lassen. Jede "Box" könnte durch ein <div> repräsentiert werden, in welches dann der gewünschte Inhalt kommt.

greenS schrieb:
die ich nur noch in alle richtungen (in meinem fall absolut) konfigurieren muss
Zum Vergrößern anklicken....
Teilweise richtig, die absolute Positionierung ist meistens nicht nötig, das lässt sich alles mit float, margin, width und ein paar anderen Properties machen. Mein Vorschlag wäre, spiel mal ein bisschen mit dem CSS rum, erstmal ohne absolute Positionierung. Interessant hierbei ist das Verhalten der verschiedenen Elemente.
 
also, hab mir das ganze nochmal angeschaut und nun einige stunden rumprobiert.

ich hab da teilweise vorgefertigte templates verwendet und mri dort die css sheets angeschaut um etwas mehr klarheitin den ausfbau und die struktur zu bekommen.

leider ist es noch nicht all zu hell im dunkeln:

wie genau steht denn nun dieser "boxenbau" im vergleich zu den einstigen frames, ganz einfach erläutert.
die verbindung und die umsetzung zwischen html und/mit css ist mir nun klar.

aber die konkrete erstellung so einer einteilung noch nicht ganz.
nach dem tutorial sind die "boxen" ja bausteine die jeiweils einen doer mehrere inhalte eingrenzen und optisch konfigurieren.

also im grunde wollt ich wissen wie das csslayout technsich funktioniert. ich selbst habe noch die funktionsweise der frames im kopf.
alle aufteilungen (wie oben gezeigt) sind einzelne frames. vom menü aus dann links mit target mainframe oder sideframe etc.

aber ganz so simpel ist es mit css anscheinend nicht. weil es ja desemal fixe inhalte sind.

sagt euch eigentlich die dateiendung .dwt etwas?!
was haltet ihr von so eienr konstruktion? habe nämlich ein vorgefertigtes template an dem ich rumprobiert habe. das ".dwt" file ist quasi das mastergestell dass die verschiedenen bausteine und "frames" der website beinhaltet. dann hat das ganze noch drei versch. css datein zur optischen konfiguration und jeweils prolink aus dem menü die KOMPLETTE (?) seite mit den jeweiligen inhalten...

alles nich so eifnach ;ugl

edit: oder kann mir kurz jemand freundlicherweise den css zeilencode angeben mit dem ich zb das topframe in der gewünschten größe umsetze?! mir fehlt da grad noch die konkrete griffige umsetzung auf die ich aufbauen kann. thx
 
Zuletzt bearbeitet:
Ich hab dir hier mal nen kleinen Ansatz gebastelt, der sollte dir eigentlich weiter helfen, wenn nicht, einfach weiter fragen ;)

PHP: 
<!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" xml:lang="en">
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link type="text/css" rel="stylesheet" media="screen, projection" href="../css/styles.css" />
    <script type="text/javascript" src="../javascript/script.js"></script>
  </head>
  <body>
    <div id="header">
      <h1>Header</h1>
    </div>

    <div id="menu">
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
      </ul>
    </div>

    <div id="headline">
      <h2>Headline</h2>
    </div>

    <div id="content">
      <p>Inhalt</p>
    </div>
    <div class="clear" />
  </body>
</html>
und hier das CSS
Code: 
h1, h2, p {
  margin: 0;
}

.clear {
  clear: both;
}

#header {
  background-color: #DAD3C2;
}

#headline {
  background-color: #E2DDCF;
  margin: 0 0 0 150px;
  }

#menu {
  background-color: #F0EDE6;
  width: 150px;
  float: left;
}

#content {
  background-color: #F7F5F2;
  margin: 0 0 0 150px;
}
 
Damit es eine klare Abgrenzung gibt, wenn z.B. noch ein Logo, weitere Grafiken oder Hintergrundbilder dazu kommen. Natürlich braucht man in diesem Beispiel die div's nicht wirklich, hab die automatisch geschrieben und nicht weiter drüber nachgedacht.
 
<html>
<head>
<title>Erste Frameset-Definition</title>
</head>
<frameset rows=“80,*“>
<frame name=“topframe“ src=“toppage.html“>
<frameset cols=“100,*“>
<frame name=“leftframe“ src=“leftpage.html“>
<frame name=“mainframe“ src=“mainpage.html“>
</frameset>
</frameset>
</html>
;)

hoffe , das hilft ...


GreeTz Fritte
 
:roll: Warum nur immer wieder Frames. Wurde hier nicht mittlerweile oftgenug gezeigt, dass es ohne Frames geht und diese veraltet sind?
 
sodelle, hab mir aus den zahlreichen tips (vielen dank hierbei besodners an die freundliche unterstützung von thor) mal selbst das erste css layout zusammengeschustert.

im moment noch totaler murks aber dafür kann ich meine fragen schon präzisieren:

1.) gibt es ne "float: top" funktion? im beispiel floaten die Links (die ich als extra "class" eingefügt habe leider nicht innerhalb der "id"=menue nebeneinander nach oben. ich will ja dass sie nebeneinander stehen.
geht das nun nur indem ich die class auflöse und die links eifnach mit <p> in die id menü einbinde?

2.) gleiches spiel auch bei der id=main. warum schließt die jetzt nicht zum top auf sondern bleibt da unten hängen und bildet diese hässliche weiße lücke? wie setz ich das codetechnisch um?

joa, das sind die fragen die mir spontan gekomme sind. thx.

HTML
Code: 
<!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=utf-8" />
<link type="text/css" rel="stylesheet" media="screen, projection" href="styles.css" />
<title>Testseite#X</title>
</head>

<body>

<div id="menue">
	<div class="links">
	<p>Link Nr.1</p>
	</div>
	<div class="links">
	<p>Link Nr.2</p>
	</div>
	<div class="links">
	<p>Link Nr.3</p>
	</div>
</div>
<div id="side">
	<div class="sidepicture">
	<p>Bilduntertitel</p>
	</div>
</div>
<div id="top">
	<div class="headings">
	<p>Überschrift</p>
	</div>
</div>
<div id="main">
	<div class="content">
	<p>bla bla bla</p>
	</div>

</div>
</body>

</html>


CSS
Code: 
#menue	
	{
	background-color: #ffffff;
	width: 500px;
	}
#side
	{
	background-color: #6fa600;
	width: 150px;
	float: left;
	}
	
#top
	{
	background-color: #9ac600;
	}

#main
	{
	background-color:#eaf5cc;
	width: 500px
	}

#menue
	{
	background-color:#ffffff;
	width:500px;
	}

#links
	{
	float:left;
	margin:5 5 5 5;
	font-style:normal;
	font-family:Arial, Helvetica, Sans-Serif;
		
}
 
Nein, ein float:top gibt es nicht, damit du die Links nebeneinander bekommst, benutzt du am besten eine Liste, wie ich in meinem Beispiel gemacht habe und machst auf <li> float: left, dann sind sie nebeneinander.
Wichtig dabei ist aber, dass du danach clear: both machst, um das float für die nachfolgenden Elemente wieder aufzuheben.

Der Abstand zu top kommt von dem Aussenabstand (margin). Ein p hat anders als ein div schon einen vordefinierten Aussenabstand, damit man es gut im Text für Absätze verwenden kann. Lässt sich aber auch auf 0 setzen, dann hat es keinen Aussenabstand mehr.
 
so langsam kommt licht ins dunkel. es wird imme rbesser und besser.

kurze und kanppe frage die mir eben kam:

wann setzt man im css zur benennung einer class/id einen punkt "." und wann eine raute "#" ? was ist der unterschied?
 
Klassen (die mit dem Punkt) dürfen öfter im Quellcode einer Seite vorkommen, ID's (die mit der Raute) dürfen auf jeder Seite nur einmal vorkommen.

Klassen verwendet man, wenn mehrere Elemente auf der Seite die Eigenschaft (z.B. font-weight: bold; font-style: italic;) haben sollen.

ID's verwendet man, wenn man genau ein Element ansprechen will.
 
gibt es einen befehl mit dem ich festlegen kann, dass zb die min-höhe von #1 niemals von #2 überschritten werden darf ohne dass ich diese jedesmal manuell anpassen muss?

also quasi eine abhängigkeit der mindest hähe der #2 von #1 wobei #1 das maß dr dinge ist.
oder auch: höhe von #1 = #2 wenn das ganze relativ ist.
beispiel: im linken menü setze ich ein bild ein. die optische höhe verändert sich im browser dementsprechend. nun soll die höhe, da sich diese in #side verändert hat, in #content ebenfalls angepasst werde (damit beide wieder auf gleicher höhe sind) aber in JEDOCH darf dabei #content NIEMALS höher werden als #side.

how to?

thx

edit: noch ne frage: wenn jetzt ein teil der seite, wie in meinem fall das sidemenu float:left, dann verhalten sich ja top und content als würde von ihrer fläche noch ein teil unter #side liegen. wenn ich nun .p zb links auf 10px setze, tut sich nicht viel.
wie setztman es denn codetechnisch um, dass #content auch erst nach #side main und nicht bereits darunter beginn und dann veränderungen an .pwirkung zeigen?
 
Zuletzt bearbeitet:
greenS schrieb:
es soll KEINE scrollbalken geben.
Zum Vergrößern anklicken....
Und was, wenn der verfügbare Platz nicht ausreicht, um den Inhalt aufzunehmen? Dann sind Scrollbalken zwingend erforderlich!

<Thor> schrieb:
Natürlich braucht man in diesem Beispiel die div's nicht wirklich, hab die automatisch geschrieben und nicht weiter drüber nachgedacht.
Zum Vergrößern anklicken....
Und aufgrund solcher gedankenlosen Antworten ist heute so weit verbreitet, dass "Layout mit divs" ne gute Sache wären.

greenS schrieb:
wie setztman es denn codetechnisch um, dass #content auch erst nach #side main und nicht bereits darunter beginn und dann veränderungen an .pwirkung zeigen?
Zum Vergrößern anklicken....
Mit einem margin auf der entsprechenden Seite in der Breite des gefloateten Elements (mindestens).

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben