Webdesign HTML und stylesheets

D

DerPeppels79

New member
Themenstarter
Registriert
8 Juni 2008
Beiträge
245
Hallo zusammen,

ich versuche eine kleine einfache Webseite zu erstellen und möchte dazu Photoshop mit HTML und stylesheets verwenden. Das reicht für meine Zwecke erstmal aus. Wie ich mit Stylesheets layouten und formatieren kann, habe ich einigermaßen verstanden. Allerdings stehe ich mit den Hyperlinks auf dem Schlauch. Ich habe jetzt 4 "Container" definiert und einen Dummytext eingetragen. Wie schaffe ich es jetzt, dass die Hyperlinks im linken "Navi" Container, den gewünschten Inhalt des Hyperlinks in den "Hauptlesebereich" lädt? Mit Frames leuchtet mir das ein. Bei klick wird ein anderes Frame geladen, aber wie läuft das mit CSS?

Wäre für kurze Hilfe dankbar und wie gesagt, bin Anfänger ;) also habt Nachsicht.

Gruß Chris
 
Sowas realisiert man eigentlich mit einer dynamischen Programmiersprache wie PHP. Frames sind veraltet. Du musst in dem Hyperlink einen Parameter setzen, an dem erkennst, welcher Inhalt geladen werden soll.
 
Du kannst IFRAMES benutzen. Die werden aber geblockt und funktionieren kaum richtig. Wenn du wirklich dynamisch Inhalte laden möchtest musst du entweder alles selbst in Java-Script realisieren oder mittels AJAX was allerdings eine Script-Sprache wie ASP.NET oder PHP vorrausetzt.

Du könntest einfach alle Inhalt-Container übereinander legen und mittels Java-Script jeweils die Eigenschaft "visible" (o.ä.) setzen.

MfG Hanussen
 
OK

Danke erstmal.

Heisst ich muss mich noch mit PHP beschäftigen? Wie läuft das dann sinngemäß? Steht der Inhalt dann in einem "eigenen" PHP Dokument? oder steht das im HTML Quelltext unter den Body Tags?

Ich würde nur gerne wissen, wie diese Dinge ineinander greifen. Wie ist denn der grobe Aufbau? Kann man das in ein paar einfache Sätze fassen?

Ich habe im Netz eine ganz gute Referenz gefunden klick

Nur der Schritt, wie denn jetzt die eigentlichen Inhalte enstehen und vor allem an welcher Stelle, fehlt leider.

Danke und Gruß

Chris
 
Wie du die Inhalte am besten speicherst, hängt von dem Umfang der Seite ab. Wenn es nur sehr wenige Seiten sind, die selten verändert werden, kannst du den Inhalt als einzelne HTML-Dateien abspeichern. Bei einer umfangreicheren Seite solltest du ein CMS verwenden, dass die Verwaltung für dich übernimmt.
 
Also

Danke nochmal an Euch,
der Tipp mit PHP war sehr hilfreich. Nach etwas googeln habe ich eine passende und nicht allzu komplizierte Lösung gefunden.

Gruß
Chris
 
@ ThinkFreak
Wenn du damit meinst, dass das CSS File ausgelagert ist, dann ja. Also die index referenziert die "mystyle.css".
Falls du das nicht gemeint hast, kannst du die Frage bitte anders stellen?

Danke
Gruß Chris
 
hier ein Beispiel für eine in die HTML-Datei implementierte CSS Formatanweisung:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
<h1>Das style-Element</h1>
</body>
</html>


bei extern ausgelagerten CSS Dateien muss es folgendermassen aussehen:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das link-Element für Stylesheets</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<h1>Das link-Element für Stylesheets</h1>
</body>
</html>


entscheidend ist dabei "Link rel" referenziert auf die externe Datei formate.CSS...eine wunderbare Lösung zum Formatieren von mehreren HTML-Dateien
 
Achso... verstehe was du meinst. Mein Problem ist ein Anderes.
Ich habe bis jetzt eine index.html und eine mystyle.css
Die sehen so aus:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body style="text-align:center">
<div class="Seitenrahmen">
	
	<div class = "header">
 	
	</div>
	
	<div class = "body">
 	
	</div>
 
 	<div class = "navi">
 	 	
 	</div>
 
 	<div class = "adresse">
 	
 	</div>
 	
	<div class = "footer">
 
	</div>	
</div>

</body>
</html>
und die css:
Code: 
body
{
font-family:Verdana;
font-size:10pt;
font-color:#696969;
}
.Seitenrahmen
	{
		width:1024px;
		height:700px;
		margin-left:auto;
		margin-right:auto;  
	}
	
.header
	{
		width:1024px;
		height:150px;
		border-top:1px solid #696969;
		border-left:1px solid #696969;
		border-right:1px solid #696969;
		background:url("Bilder/head_bg.gif")
	}
	
.adresse
	{
		width:15%;
		float:right;	
		margin-top:1px;
		height:500px;
		border-left:1px solid #696969;
	}

.navi
	{
		width:15%;
		float:left;
		margin-top:1px;
		height:500px;
		background:url("Bilder/nav_bg.gif");
		background-repeat:no-repeat;
		text-align:left;
		padding-top:10px;
	}
	
.footer
	{
		width:1024px;
		border:1px solid #696969;
	}
Das sieht vom Layout her schonmal ungefähr so aus, wie ich es wollte. Die Container .navi .header usw. stellen eine Art Box bzw. einen Rahmen dar.

Mein Problem ist jetzt, dass ich nicht weiss, wo die Inhalte hinkommen. Wenn ich z.B. in den navi Container einen Hyperlink per Link eingebe, wo kommt dann der Inhalt dieses Links hin?
Ich dachte zuerst, dass ich einfach diesen Container als "Ziel" angeben kann. Salopp ausgedrückt: Wenn klick auf Link1 dann lade Inhalt XY in Container .body oder so. aber das scheint ja nicht zu gehen?!

Gruß Chris
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
  • ok1.de
  • thinkstore24.de
  • ok2.de - Notebook Computer Server
  • Preiswerte-IT - Gebrauchte Lenovo Notebooks kaufen

Werbung

Zurück
Oben