Fragen zu: Buttons, Frames und Word Press

[White_Wolf]

Guten Abend,

Ich bin neu auf dem Gebiet html und habe ich deshalb hier angemeldet.
Die Touren von selfhtml sind das Grundgerüst miner bisherigen Kenntnisse, allerdings finde ich trotz mehrmaligen Lesens nicht in die Materie hinein.
Mein Ziel war es eine Seite zu kreieren wie diese: Budimon.de

Hintergrundgrafik einfügen kein Thema, Texte auf dem Bildschirm erscheinen lassen, ebenfalls nicht schwer, Rahmen darum ziehen bekomme ich auch noch hin, aber all das führt mich nicht zum gewünschten Ergebnis.
Ich habe versucht Frames zu benutzen um die Abgrenzung nach links und rechts (in meinem gewählten Beispiel das dunkelblaue an den Seiten)zu basteln, allerdings hat das nicht zum Erfolg geführt, da die Schrift sich immer noch über den gesamten Bildschirm erstreckte.
--> Frage 1: Sind die Ränder überhaupt Frames oder kann ich die irgendwie anders hinbekommen?

Mein zweites Problem sind Links, die in die Grafik eingefügt werden. In meinem Beispiel machen das die Menüpunkte am oberen Rand deutlich (Home, Blog, Team, Shows etc.).
--> Frage 2: Wie definiere ich die anklickbaren Bereiche und die dahinterliegende Verlinkung?

Sollte ich es dann irgendwann geschafft haben, eine halbwegs vernünftige Website zu schaffen und mir Webspace anzueignen, dann möchte ich nicht unbedingt für jedes Update im Quellcode rumschreiben. Jetzt habe ich nach Möglichkeiten gesucht das zu umgehen und da sprang mir WordPress ins Auge.
--> Frage 3: Wie funktioniert WordPress und kann man es mit jeder Website verwenden und definieren, dass es eben nur in dem Mittelteil Schrift, Grafiken und Videos erscheinen lassen soll?

Der Quellcode von Budimon.de konnte mir irgendwie nicht wirklich Aufschluss darüber geben, was ich falsch mache und das stupide kopieren ist nicht mein Ding (der Wille etwas zu lernen und selbst zu schaffen überwiegt). Auf jeden Fall bitte ich um Verzeihung, dass ich euch mit meinem ersten Post direkt so überfallen habe und hoffe, dass ihr mir mit meinen Problemen helfen könnt.

Mit freundlichen Grüßen White_Wolf, ein verzweifelter HTMLer :)

 

[fiedel]

Hallo White_Wolf!

Das sind ja 'ne ganze Menge Fragen auf einmal! :grin:

Zu Frage 1:
Nein, die Bereiche rechts und links sind keine Frames! Frames ist sowieso ein Begriff, den du so schnell wie möglich aus deinem Wortschatz entfernen solltest, da diese Methode nicht mehr zeitgemäß ist und eigtl. nur Probleme mit sich zieht!
Dieser Mittelteil der Seite wurde mit einem div-Container gruppiert und dann per CSS auf eine bestimmte Breite gebracht und zentriert.

Zu Frage 2:
Anklickbare Bereiche innerhalb eines Bildes definierst du mittels einer Imagemap, das ist aber nicht die Methode, die auf der von dir verlinkten Seite verwendet wird. Dort ist ein bestimmter Bereich mit einer Hintergrundgrafik belegt und darauf befinden sich zum Hintergrund passende Grafiken, die als Link dienen. Codebeispiel:

<a href="home.html"><img src="grafik.gif" alt="Home" /></a>

Zu Frage 3:
Ich kenne mich leider nicht mit der genauen Funktionsweise von Wordpress aus, aber ich kann deine Frage, glaub, mit "ja" beantworten.

Der Quellcode von Budimon.de konnte mir irgendwie nicht wirklich Aufschluss darüber geben, was ich falsch mache und das stupide kopieren ist nicht mein Ding (der Wille etwas zu lernen und selbst zu schaffen überwiegt). Auf jeden Fall bitte ich um Verzeihung, dass ich euch mit meinem ersten Post direkt so überfallen habe und hoffe, dass ihr mir mit meinen Problemen helfen könnt.

Dieser Quellcode ist auch nicht wirklich zur Nachahmung gedacht, da er voller Fehler steckt!


Gruß,
fiedel

 

[Efchen]

Du stehst anscheinend noch ganz am Anfang der Materie.

Daher kann ich Dir folgende Tipps geben:

1. Du musst HTML und CSS lernen.
2. Als erstes musst Du HTML lernen. Dir muss bewusst sein, dass HTML nur zur logischen Auszeichnung Deines Inhalts da ist. Nichts, was Du mit HTML machst, machst Du wegen der Optik. HTML hat nichts mit dem Aussehen zu tun, sondern nur mit der Bedeutung des Inhalts.
3. Wenn Du HTML verstanden hast, anwenden kannst und den Begriff Semantik verstehst, kannst Du DIch an CSS machen.
4. Immer strikt Inhalt (HTML) von Layout (CSS) trennen.
5. CSS ist nur für die Optik zuständig. CSS basiert auf einem validen und semantisch sinnvollen HTML-Code. Wenn Du HTML nicht verinnerlicht hast, wird Dir CSS Schwierigkeiten bereiten und Du wirst Dir doppelte Arbeit machen.

Das erstmal im Groben. Du wirst sicher Fragen haben. Dann frag!
Aber auch beim Lernen solltest Du HTML und CSS strikt trennen und wirklich erstmal mit HTML anfangen und nicht, wie die meisten, mit dem Layout. Das macht den Lernprozess unnötig schwierig.

 

[White_Wolf]

Danke schonmal für eure Hilfe. Ich studiere die Touren bei selfhtml schon seit einiger Zeit und habe gedacht, dass ich ein bisschen was hinbekommen würde, aber scheinbar stehe ich echt noch direkt am Anfang...

Die <div> Container treiben mich bereits in den Wahnsinn.

Ich will ja, dass die Container meine Seite einschließen, aber egal was ich mache, ich bekomme nur einen Kasten auf die linke Seite. Und wenn ich dann Text einfüger, dann erscheint der auch nicht neben dem Container, sondern mittendrin, obendrüber oder untendrunter, je nachdem wo ich das Ganze einfüge...hier mal mein Seitenentwurf bisher, bitte nicht lachen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Erste Website</title>
</head>

<body>

<h1 align="center" style="color:#8B562E">Meine Website</h1>

"Hallo Welt?"

<div id="Layer1"
style="align:absolute; width:300px; height:800px; z-index:1; background-color:
#000033; border: 0px solid #000000">
</div>

</html>

Sind sicher 500 Fehler drin, aber ich hab jetzt nochmal komplett von vorne begonnen. Wäre nett, wenn ihr mir verraten könntet, wie ich es schaffe, einen zweiten <div> Container auf der rechten Seite erscheinen zu lassen und wie ich den Text dann zwischen die Container bekommen kann.
Auf alle Fälle werde ich mir deinen Rat zu Herzen nehmen Efchen und mir html einverleiben, beziehungsweise damit experimentieren.

Nochmals vielen Dank, mit freundlichen Grüßen

White_Wolf

 

[daybreak]

Placeholder!

 

[Loon3y]

Im Prinzip ist es nicht schwer...

zu erst gehst du hin und zeichnest deinen inhalt aus:

html:

[I]Überschrift 1. Grades[/I] -> <h1>Meine Website</h1>
[I]Textabsatz  [/I]             -> <p>Hallo Welt</p>

Das war schonmal alles. Jetzt möchtest du eine Hintergrundfarbe, bzw noch mehr Text gleich anordnen, d.h. mehre Elemente gruppieren:

html:

<div id="over">
 <h1>Meine Website</h1>
 <p>Hallo Welt</p>
[I] /* weitere elemente */[/I]
</div>

Fertig sieht das dann im html so aus:

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
[I]    /* META-ANGABEN */[/I]
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
<title>Erste Website</title>
</head>
 <body>

<div id="over">
 <h1>Meine Website</h1>
 <p>Hallo Welt</p>
</div>

</body></html>

Jetzt gestaltest du alles via css. Die Datei nennst du "style.css" und hast sie im html ja schon oben in deiner html mit:

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

eingebunden.
Deine CSS könnte dann für die 3 html-tags so aussehen:

style.css:

div#over { 
width: 500px; 
height: 800px; 
background-color: #000033; 
border: 1px solid; 
margin: 0px auto; [I]/* zentrierung */[/I]
}

h1 { 
color: #8B562E; 
font-size: 1em; 
text-align:center; 
}

p { 
padding: 5px 15px; 
}

Natürlich müsstest du jetzt noch andere angaben machen wie z.b. im body eine schriftart, schriftgröße usw usf festlegen.

Da könnte man standardmäßig noch das reinschreiben (natürlich schriftart, -größe, zeilenhöhe, hintergrundfarbe, ... , alles variable angaben die du deinen persönlichen vorstellungen gemäß anpassen kannst):

body { font-family:sans-serif; font-size:100.01%; line-height:1.4em; }
* { margin:0; padding:0; border:0px; }

Grüßle
Loon3y

 

[White_Wolf]

Es funktioniert jetzt! Vielen, vielen Dank an alle, besonders an dich, Loon3y. Eine richtig geniale Community :)

Ich werde mich jetzt weiter an Gestaltung meiner Homepage machen und werde sicher noch die ein oder andere Frage haben. Hoffentlich bin ich dann noch erwünscht und nerve nicht jetzt schon ^^ Sollte ich es (unmöglicherweise) alleine schaffen, werde ich noch den Link hier reinschreiben, sobald meine Website online geht.

MfG White_Wolf

 

[Efchen]

Die <div> Container treiben mich bereits in den Wahnsinn.

Und das, obwohl <div> genauso funktioniert, wie jedes andere Block-Element, also nichtmal was Besonderes darstellt, und bei Anwendung mit CSS das einfachste Element ist, weil es keine margins oder andere voreingestellte Werte hat, die einen tendenziell stören.

Sind sicher 500 Fehler drin

Was Du am besten mit dem The W3C Markup Validation Service überprüfen kannst (und auch immer solltest, denn nur ein auch fehlerfreier Code liefert eine sinnvolle Basis für CSS).

Auf alle Fälle werde ich mir deinen Rat zu Herzen nehmen Efchen und mir html einverleiben, beziehungsweise damit experimentieren.

Wovon leider nichts zu sehen ist, wenn Du mit <div> anfängst. Damit rutschst Du in die div-Gosse ab und entfernst Dich schnell von semantischem HTML. Der Weg zurück wird hart.

Schau auf das, was Loon3y geschrieben hat!