Internetseite mit CSS (HTML) mit Frames oder einzelnen Seiten?
- Ersteller Awek
- Erstellt am
Hallo,
ich möchte eine Internetseite programmieren, habe allerdings kaum Erfahrung damit.
Jetzt hab ich schonmal rausgefunden das css (html) am besten wär.
Ein Bsp. won einer Seite habe ich bereits gemacht (siehe Quellcode).
Jetzt ist nur noch die Frage ob ich pro Link den Quellcode kopiere und soweit verändere oder ob ich sowas wie einen Frame mache (keine Ahnung wie das mit css geht)!??
Was würdet ihr sagen? Ich denke mit dem kopieren wär ganz okay da es keine große Seite ist. Gibt es dabei irgenwelche Nachteile?
Schonmal vielen Dank im Vorraus!!!
Hier der Code:
ich möchte eine Internetseite programmieren, habe allerdings kaum Erfahrung damit.
Jetzt hab ich schonmal rausgefunden das css (html) am besten wär.
Ein Bsp. won einer Seite habe ich bereits gemacht (siehe Quellcode).
Jetzt ist nur noch die Frage ob ich pro Link den Quellcode kopiere und soweit verändere oder ob ich sowas wie einen Frame mache (keine Ahnung wie das mit css geht)!??
Was würdet ihr sagen? Ich denke mit dem kopieren wär ganz okay da es keine große Seite ist. Gibt es dabei irgenwelche Nachteile?
Schonmal vielen Dank im Vorraus!!!
Hier der Code:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #c3c3c3;
}
ul#Navigation {
margin: 0; padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: #adadad;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0.4em; padding: 0;
}
ul#Navigation a, ul#Navigation span {
padding: 0.2em 0.8em;
text-decoration: none; font-weight: bold;
border: 0px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><span>Bilder</span></li>
<li><a href="einfuehrung.htm">Grafik</a></li>
<li><a href="#Beispiel">Texte</a></li>
<li><a href="#Beispiel">Biografie</a></li>
<li><a href="#Beispiel">Impressum</a></li>
<li><a href="#Beispiel">Links</a></li>
</ul>
<div align="center">
<h2 id="Beispiel">test</h2>
</div>
<div align="center">
<br>
<img style="width: 400px; height: 590px;" alt="Leipzig1" src="Leipzig/Leipzig01%20neu.jpg"><br>
<h6>Leipzig 01</h6>
<br><br> <br>
<img style="width: 400px; height: 590px;" alt="Leipzig2" src="Leipzig/Leipzig02.jpg"><br>
<h6>Leipzig 02</h6>
<br> <br> <br>
<img style="width: 400px; height: 594px;" alt="Leipzig3" src="Leipzig/Leipzig03.jpg"><br>
<h6>Leipzig 03</h6>
<br> <br> <br>
</div>
</body>
</html>
Zuletzt bearbeitet:
Gruß Thomas!
Grand Admiral Special
Als erstes, das ganze in
oder
setzen, dass man das ganze besser lesen kann.
Beispiel:
Ansonsten würde ich die Seite mit einzelnen Seiten machen, Frames werden nicht mehr benutzt. Die Style Datei lagerst du am besten aus, das spart unnötige Copy & Paste Fehler.
mfg
elite.bl4ze
Code:
PHP:
Beispiel:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #c3c3c3;
}
ul#Navigation {
margin: 0; padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: #adadad;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0.4em; padding: 0;
}
ul#Navigation a, ul#Navigation span {
padding: 0.2em 0.8em;
text-decoration: none; font-weight: bold;
border: 0px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><span>Bilder</span></li>
<li><a href="einfuehrung.htm">Grafik</a></li>
<li><a href="#Beispiel">Texte</a></li>
<li><a href="#Beispiel">Biografie</a></li>
<li><a href="#Beispiel">Impressum</a></li>
<li><a href="#Beispiel">Links</a></li>
</ul>
<div align="center">
<h2 id="Beispiel">test</h2>
</div>
<div align="center">
<br>
<img style="width: 400px; height: 590px;" alt="Leipzig1" src="Leipzig/Leipzig01%20neu.jpg"><br>
<h6>Leipzig 01</h6>
<br><br> <br>
<img style="width: 400px; height: 590px;" alt="Leipzig2" src="Leipzig/Leipzig02.jpg"><br>
<h6>Leipzig 02</h6>
<br> <br> <br>
<img style="width: 400px; height: 594px;" alt="Leipzig3" src="Leipzig/Leipzig03.jpg"><br>
<h6>Leipzig 03</h6>
<br> <br> <br>
</div>
</body>
</html>Ansonsten würde ich die Seite mit einzelnen Seiten machen, Frames werden nicht mehr benutzt. Die Style Datei lagerst du am besten aus, das spart unnötige Copy & Paste Fehler.
mfg
elite.bl4ze
Vielen Dank schonmal!
Sieht dann so aus, okay?
Sieht dann so aus, okay?
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<ul id="Navigation">
<li><span>Bilder</span></li>
<li><a href="einfuehrung.htm">Grafik</a></li>
<li><a href="#Beispiel">Texte</a></li>
<li><a href="#Beispiel">Biografie</a></li>
<li><a href="#Beispiel">Impressum</a></li>
<li><a href="#Beispiel">Links</a></li>
</ul>
<div align="center">
<h2 id="Beispiel">test</h2>
</div>
<div align="center">
<br>
<img style="width: 400px; height: 590px;" alt="Leipzig1" src="Leipzig/Leipzig01%20neu.jpg"><br>
<h6>Leipzig 01</h6>
<br><br> <br>
<img style="width: 400px; height: 590px;" alt="Leipzig2" src="Leipzig/Leipzig02.jpg"><br>
<h6>Leipzig 02</h6>
<br> <br> <br>
<img style="width: 400px; height: 594px;" alt="Leipzig3" src="Leipzig/Leipzig03.jpg"><br>
<h6>Leipzig 03</h6>
<br> <br> <br>
</div>
</body>
</html>
Fürn Anfang schonmal nicht schlecht. 
Paar Sachen gibts noch:
Gruß,
Max
Paar Sachen gibts noch:
- Das "align"-Attribut ist deprecated -> Nutz CSS (text-align)
- Um Abstände zu erzeugen sollte man keine <br> verwenden -> CSS (margin, padding)
- Überschriften in richtiger Reihenfolge nutzen -> h1 -> h2 -> h3. Die Darstellung ggf per CSS anpassen (h1 { font-size: 1em; ... })
- Inline-CSS ist "böse". Vorallem kannst du bei Bildern die HTML-Attribute (width und height) gerne verwenden
- Alternativ-Texte sollten möglichst aussagekräftig sein und den Inhalt des Bild beschreiben
Gruß,
Max
Shai Hulud
Grand Admiral Special
Zum Beispiel...
PHP:
<div style="text-align:center">
<h2 id="Beispiel">test</h2>
</div>MFG!
Genau, oder per externem CSS
HTML:
<div class="center">
<h2 id="Beispiel">test</h2>
</div>
Code:
.center {
text-align: center;
}Max
Okay, soweit ist alles klar.
Jetzt wollte ich das gleiche bei den Grafiken machen (inklusive dem <br> weglassen), allerdings funktioniert das nicht richtig.
Der Abstand ist oben und unten gleich, so das der Text genau zwichen den Grafiken steht und man nicht weiß zu welcher er gehört.
Was habe ich falsch gemacht? Und ist es richtig text-align für Grafiken zu verwenden?
Jetzt wollte ich das gleiche bei den Grafiken machen (inklusive dem <br> weglassen), allerdings funktioniert das nicht richtig.
PHP:
<div style="margin-top: 15px;margin-bottom: 8px;text-align:center">Was habe ich falsch gemacht? Und ist es richtig text-align für Grafiken zu verwenden?
eR1K1
Vice Admiral Special
Also wenn du html "programmieren" willst, gewöhn dir an das Gerüst in html zu bauen und alle Design Aspekte in die CSS-Datei auszulagern.
Das bedeutet das alle Container/Tags eine ID/Klasse bekommen und darüber im CSS angesprochen werden.
Somit sind schonmal das Design und das Gerüst von einander getrennt.
Beispiel:
Du kannst mit CSS alle HTML Tags direkt ansprechen.
Ich habe mir zu dem Thema von Galileo Press das Video von Bernhard Stockmann mit dem Titel "Websiten erstellen" angetan. Da erklärt er das wunderbar. Aber sonst gibbet mit selfhtml eine super Referenz und eine Menge freier Tutorial im Internet.
Wenn du Firefox nutzt, solltest du auch unbedingt das Plugin Firebug und das Web Developer Kit installieren -> sehr hilfreich.
Ansonsten schau dir einfach mal den Quelltext der Seiten an, die dir so gefallen und kopier dir den Quelltext in deine Datei um den Aufbau zu verstehen. Mit Firebug kannst du dann in Echtzeit CSS-Einstellungen vornehmen.
Das bedeutet das alle Container/Tags eine ID/Klasse bekommen und darüber im CSS angesprochen werden.
Somit sind schonmal das Design und das Gerüst von einander getrennt.
Beispiel:
HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Willkommen beim IT-Schaf</title>
<meta http-equiv="Content-Typ" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!-- Einbinden des Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="#" />
</head>
<body>
<div id="main-container">
<?php include('branding.php')?>
<?php include('navigation.php')?>
<?php include('teaser.php')?>
<div id="content">
<div id="main-content">
<h1>Über mich</h1>
<div><img class="portrait" src="#" alt="Portraitfoto von "Name"" title="Name" /></div>
<p>Hier folgen in Kürze einige Infos über meine Wenigkeit.</p>
HTML:
*{
margin: 0px;
padding: 0px;
}
body {
font-family: "Trebuchet MS", "Verdana", "Tahoma", "Arial", sans-serif;
font-size: 12px;
background-color:#00FFFF;
background-image:none;
background-repeat:repeat-x;
background-position:center; /*10px 0px würde eine Verschiebung nach rechts um 10px bedeuten*/
/*background:#00FFFF url() center repeat-x; <-- statt der anderen background Attribute*/
}
a{
color:#0066CC;
}
a:hover{
color:#00CC33;
}
a:visited{
color: #000099;
}
h1,h2 {
color: #00CC33;
border-bottom: 1px dotted #00CC33;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom: 5px;
}
h1{font-size: 180%;}
h2{font-size: 140%;}
img {
border-style:none;
}
p{
line-height: 140%;
text-align:justify;/*Blockschrift*/
margin-bottom:5px;
}
#main-container {
width: 768px;
margin: 40px 0px 20px 100px; /* oben rechts unten links Außenabstand*/
background-color:#FFFFFF;Du kannst mit CSS alle HTML Tags direkt ansprechen.
Ich habe mir zu dem Thema von Galileo Press das Video von Bernhard Stockmann mit dem Titel "Websiten erstellen" angetan. Da erklärt er das wunderbar. Aber sonst gibbet mit selfhtml eine super Referenz und eine Menge freier Tutorial im Internet.
Wenn du Firefox nutzt, solltest du auch unbedingt das Plugin Firebug und das Web Developer Kit installieren -> sehr hilfreich.
Ansonsten schau dir einfach mal den Quelltext der Seiten an, die dir so gefallen und kopier dir den Quelltext in deine Datei um den Aufbau zu verstehen. Mit Firebug kannst du dann in Echtzeit CSS-Einstellungen vornehmen.
Zuletzt bearbeitet:
Ähnliche Themen
