Druckversion des Themas

Hier klicken um das Topic im Orginalformat anzusehen

HTML-Editor phase 5 Support _ HTML _ Html, Css Und Co

Geschrieben von: pandabär 26.07.2004 - 13:08

Zuerst einmal möchte ich als neues Mitglied ein Hallo in die Runde werfen!
Ich bastele schon einige Zeit mit dem html editor Phase 5 und habe nun etwas Grösseres vor:
Ich habe mir eine Homepage mit meheren Seiten mit Hilfe eines Progs Namens:"NetFusion7" erstellt. Weil das Prog auf meinem Rechner nicht mehr funzt und ich nur eine abgespeckte Version davon habe, dachte ich ich überarbeite das Ganze und erstelle einfach eine Homepage mit mehreren Seiten selbst mit Phase 5 um auch Änderungen daran machen zu können.
Anzuschauen unter: www.delfinwelt.de
Nun habe ich aber meine liebe Not damit und ich finde einfach nicht die richtigen Infos um meine Vorstellung in die Tat umsetzen zu können.
Ich möchte auch auf der linken Seite eine Navigation machen. Der Text soll weiterhin mittig sein. Muss ich das nun mit Hilfe einer Tabelle machen oder wie??
Kann mir jemand helfen?

Geschrieben von: Conny 26.07.2004 - 13:19

Hi pandabär,
ja, das kann man mit Hilfe einer Tabelle machen.
Es gibt aber noch viele, viele andere möglichkeiten.
Aus Deinem Text entnehme ich, daß Deine HTML-Kenntnisse, sagen wir mal, wohl eher bescheiden sind.
Das ist der Nachteil von diese klick, klick und fertig Editoren, man lernt nur das Programm zu bedienen und nicht die HTML-Sprache.

Ich kann Dir nur raten Dich zunächst mit HTML als solches zu beschäftigen, (Selfhtml von Stefan Münz).
Danach wird Dir 'unser Editor' viel freude bereiten!
Kopf hoch, Du bist auf dem richtigen Weg!
NetObj. hast Du schon mal rausgeschmissen; das war GUT icon13.gif
Phase5 heruntergeladen und instaliert; das war auch GUT icon13.gif
Jetzt nur noch ein Wenig HTML und es wird SPITZE biggrin.gif

cu
Conny

Geschrieben von: pandabär 26.07.2004 - 13:26

Hi, Conny - danke für Deine ermunternden Worte. Du hast Recht, die Kenntnisse sind nicht gerade gross, ich habe ja auch schon bei Münz gelesen, einiges davon kann ich aber leider nicht umsetzen. Deshalb habe ich mich ja hierhin gewendet.
Ich habe den Navigationsbereich als eine Tabelle gesetzt. Nun bekomme ich aber den Text nicht mittig, sondern er wird unten angefügt.

Geschrieben von: radyserb 26.07.2004 - 14:38

Hallo,
standartmäßig werden die Inhalte vertikal mittig ausgerichtet. Es ist ein bischen schwierig Dein Problem konkret zu erkennen. Bevor Du hier aber den Tabellencode hineinpostest, schau Dir bitte vorher folgendes Beispiel an: http://de.selfhtml.org/html/tabellen/layouts.htm#beispiel. Es sollte Dir weiterhelfen.

Geschrieben von: pandabär 27.07.2004 - 10:20

Hallo, genau diesen versuche ich für meine Seite abzuändern. Aber irgendwie habe ich da meine Schwierigkeiten damit.
Zuerst einmal hätte ich gern den Hintergrund einfarbig, und die "Navigation" bekomme ich auch nicht gleichmäßig hin. Ich habe einfach keine Idee mehr, woran es liegen könnte.
Es wäre wirklich nett, wenn jemand den Code mal checken könnte:

<body background="http://meuschen.bei.t-online.de/backgrounds1/14.gif"></body>
<br>
<br>
<div align="center">
<img src="http://meuschen.bei.t-online.de/homepagegrafiken/delfinbanner.jpg" alt="" border="0"></div>
<br>
<br>
<font size="+4"><font face="SnellboundDB"><font color="#FF0000"><div align="center"><b>
Herzlich willkommen...</b></div></font></font></font>
<br>


<div align="center"><font size="+2"><font face="Comic Sans MS"><font color="#0000FF">
...auf den Seiten zum Thema Delfine und Wale</font></font></font></div>
<br>


<table border="0" cellpadding="0" cellspacing="0" width="100%"
<colgroup>
<col width="200">
<col>
</colgroup>
<tr>
<td colspan="2">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td>

<img src="http://meuschen.bei.t-online.de/homepagegrafiken/6.gif" alt="" border="0">
<a href="http://delfinwelt.de/index.htm"><font size="+1"><font face="Verdana"><font color="#0000FF">
Home</font></font></font></a>

</td>
</tr>
</table>
</td>
</tr>
<br>
<br>

<table border="0" cellpadding="10" cellspacing="0">
<tr><td>
<img src="http://meuschen.bei.t-online.de/homepagegrafiken/6.gif" alt="" border="0">
<a href="http://delfinwelt.de/arten.html"><font size="+1"><font face="Verdana"><font color="#0000FF">
Arten</font></font></font></a>
</td>
</tr>
</table>
</td>
</tr>
<br>
<br>


<table border="0" cellpadding="10" cellspacing="0">
<tr><td>
<img src="http://meuschen.bei.t-online.de/homepagegrafiken/6.gif" alt="" border="0">
<a href="http://delfinwelt.de/html/delfinbilder.htm"><font size="+1"><font face="Verdana"><font color="#0000FF">
Delfingallerie</font></font></font></a>
<br>
<br>

<img src="http://meuschen.bei.t-online.de/homepagegrafiken/6.gif" alt="" border="0">
<a href="http://delfinwelt.de/html/walbilder.htm">
<font size="+1"><font face="Verdana"><font color="#0000FF">
Walgallerie</font></font></font></a>
</td>
</tr>
</table>
</td>
</tr>

<br>
<br>

<table border="0" cellpadding="10" cellspacing="0">
<tr><td>
<img src="http://meuschen.bei.t-online.de/homepagegrafiken/6.gif" alt="" border="0">
<a href="http://delfinwelt.de/html/gastebuch.html"><font size="+1"><font face="Verdana"><font color="#0000FF">
Gästebuch</font></font></font></a>

</td>
</tr>
</table>
</td>
</tr>
<br>
<br>
<table border="0" cellpadding="10" cellspacing="0">
<tr><td>
<img src="http://meuschen.bei.t-online.de/homepagegrafiken/6.gif" alt="" border="0">
<a href="http://delfinwelt.de/html/impressum.html"><font size="+1"><font face="Verdana"><font color="#0000FF">
Impressum</font></font></font></a>
<br>

<br>
</td>
</tr>
</table>
</td>

<td valign="top">
<table border="0" cellpadding="10" cellspacing="0">

<tr>
<td>

<font size="+1"><font face="Comic Sans MS"><font color="#0000FF">
Unzählige Arten dieser intelligenten Meeressäuger bewohnen unsere Weltmeere.
Sie sind durchaus in der Lage, sich nahezu jeder Umgebung anzupassen. Wie weit ihre
Entwicklung zurück geht, kann niemand so ganz genau sagen. Fest steht jedoch, das
der Mensch schon lange dabei ist, den natürlichen Lebensraum dieser faszinierenden
und wohl größten Säugetiere zu zerstören. Jährlich müssen tausende von ihnen auf
qualvolle Weise sterben.

<br>
<br>
Mit meinen Seiten möchte ich Euch ein bisschen was über
Delfine und Wale erzählen, und ich hoffe, das diese und all die anderen Seiten des
Internets, die sich mit diesem Thema beschäftigen, dazu beitragen können, diesem Wahnsinn
ein Ende zu bereiten.<br>


Die Informationen der folgenden Seiten habe ich zusammen getragen und übernehme für deren Richtigkeit
keine Haftung. Auf den Bildern liegt meines Wissens nach kein Copyright, falls dem doch so ist,
dann bitte eine mail an mich.<br> </font></font></font>
<br><font size="+1"><font face="Comic Sans MS"><font color="#00FF00">
<div align="center"><a href="mailto:meuschen@t-online.de">meuschen@t-online.de</a></div>
</font></font></font>
<br>
<br> <font size="+1"><font face="Comic Sans MS"><font color="#FF0000"><b>
Wichtiger Hinweis!<br>
</b><font color="#800080">
Mit Urteil vom 12. 5.1998 hat das Landgericht Hamburg entschieden, das man durch die Anbringung
eines Links die Inhalte der gelinkten Seiten ggf. mit zu verantworten hat. Dies kann nur
dadurch verhindert werden, das man sich von diesen Inhalten distanziert.
Hiermit distanziere ich mich von allen Inhalten aller gelinkten Seiten auf meiner
Homepage und mache mir die Inhalte nicht zu eigen. Die Verantwortung der Inhalte tragen die
Autoren selbst!
</font></font></font>

</td>
</tr>
</table>
</td>
</tr>
</table>


Ich sag schon mal: DANKE

Geschrieben von: helpy 27.07.2004 - 11:07

Hallo ...

Nur mal so als kleinen Hinweis: Wenn Du den Html-Code zwischen den beiden BB-Code Tags [html] und [/html] stellst, ist das ganze etwas lesbarer. Hier mal ein Ausschnitt aus Deinem Code:

HTML
<body background="http://meuschen.bei.t-online.de/backgrounds1/14.gif"></body>
<br>
<br>
<div align="center">
<img src="http://meuschen.bei.t-online.de/homepagegrafiken/delfinbanner.jpg" alt="" border="0">
</div>
<br>
<br>
<font size="+4">
<font face="SnellboundDB">
<font color="#FF0000">
<div align="center">
<b>Herzlich willkommen...</b>
</div>
</font>
</font>
</font>
<br>

<div align="center">
<font size="+2">
<font face="Comic Sans MS">
<font color="#0000FF">
...auf den Seiten zum Thema Delfine und Wale
</font>
</font>
</font>
</div>
<br>

... usw. ...


Und wenn Du Deinen Code noch etwas anders formatierst, dann kann man auch schon mehr erkennen, ... leider werden die Leerzeichen am Zeilennanfang vom Forum geschluckt, so siehst du die Einrückungen oben nicht ...

Also, wenn Du schon CSS verwendest, dann verzichte ganz auf die <font>-Tags. Der obige Code könnte dann z.B. so aussehen:

HTML
<body>
<div id="banner">
<img src="/homepagegrafiken/delfinbanner.jpg" alt="" border="0">
</div>

<div id="wellcome">
Herzlich willkommen...<br>
<span id="welcom">...auf den Seiten zum Thema Delfine und Wale</span>
</div>

... usw. ...
</body>


und im Style-Sheet definierst du dann:
QUELLTEXT
body { background-image: url(/homepagegrafiken/delfinbanner.jpg); }
div.wellcome {  
 font-family: SnellboundDB;
 font-size: 24pt;
 color: #FF0000;
 font-weight: bold;
}
span.wellcome {
 font-size: 12pt;
 font-family: "Comic Sans MS";
 color: #0000FF;
}


Das ganze hab' ich nicht getestet und nur mal schnell so hingeschrieben ... ich übernehme keine Garantie auf fehlerfreiheit wink.gif ... soll also nur ein kleiner Denk-Anstoss sein ...

Ach ja ... den <body>-Tag schließt man am Ende deines Contents!
HTML
<body ...> ... Dein Content ...</body>


Zur Auswahl der Schriftart, den Farben usw. ... sag' ich jetzt mal nichts.
cu, helpy

Geschrieben von: Andreas 27.07.2004 - 12:21

Hi,

warum dann nicht gleich ganz richtig und statt <div ...> ein vernünftigeres <h1 ...> benutzen? Dann haben *alle* Browser was davon und Google kann's ordentlich indizieren bzw. besser gewichten. Kommt der Seite mit einem besseren Ranking zu Gute.

Andreas

(statt <h1 ...> natürlich den Tag des Wunsches nehmen, in diesem speziellen Fall bietet sich ein heading natürlich an ...)

Geschrieben von: pandabär 27.07.2004 - 12:24

Hi, danke Dir für Deine Antwort. Ich habe die ganze Zeit nur mit "Text" gearbeitet und leider noch nicht die große Ahnung von CSS oder Tabelle. Da knie ich mich grad rein. Ich will mal schau'n, das ich es nun besser machen kann. Aber eine Antwort auf meine Frage habe ich jetzt immer noch nicht bekommen.

Geschrieben von: pandabär 27.07.2004 - 12:28

Hi Andreas, ich habe erst jetzt gemerkt, das Du auch geantwortet hast. Hat sich wohl überschnitten.
Wenn ich aber h1 oder so nehme, dann kann ich doch nur die Schriftgröße damit bestimmen, nicht aber die Schriftart oder -Farbe. Oder bin ich jetzt hier falsch?

Geschrieben von: pandabär 27.07.2004 - 12:31

Hallo, was bitte ist ein heading? sick.gif

Geschrieben von: Andreas 27.07.2004 - 12:35

ZITAT(pandabär @ 27.07.2004 - 13:28)
Wenn ich aber h1 oder so nehme, dann kann ich doch nur die Schriftgröße damit bestimmen, nicht aber die Schriftart oder -Farbe.

Du kannst in Deinem Stylesheet ganz normal etwas definieren und das dann natürlich auch auf <h1> anwenden - oder was immer Du möchtest.

Man sollte soweit es eben geht, die Seite mit den dafür vorgesehenen Tags in HTML aufbauen und diese dann per CSS formatieren. DIV-Wüsten sind zwar unter Umständen valide, aber garantiert nicht im Sinne des Erfinders. Der Vorteil der Benutzung und nachträglichen Formatierung der Tags ist doch schlicht der, dass man auch in nicht CSS fähigen Clients (und sei es das von mir dafür geliebte Handy wink.gif ) auch was erkennt - und zwar so, wie sich der Ersteller das gedacht hat. Mit <div> klappt das leider nicht.

Grüße

Andreas

[Nachtrag]
heading => Überschift
h1, h2, h3, h4, h5, h6 sind die Überschriften, die in HTML definiert sind. Unterscheiden sich standardmäßig in der Größe ...

Ich empfehle Dir *dringend* mal in http://de.selfhtml.org reinzuschauen ...

Geschrieben von: pandabär 27.07.2004 - 12:44

Hi, Andreas, ich habe dort schon nachgesehen, aber nicht alles was ich da lese, kann ich auch umsetzen. Ich meine, ich sehe und lese die Buchstaben, kann abermit manchen Infos nichts anfangen. Aber ich bin dabei.

Geschrieben von: helpy 27.07.2004 - 14:09

ZITAT(Andreas @ 27.07.2004 - 14:21)
warum dann nicht gleich ganz richtig und statt <div ...> ein vernünftigeres <h1 ...> benutzen?

lipssealed.gif ... ok ... stimmt ... blush.gif ... vollkommen richtig!

Mach es selbst ja auch immer so, ... stand wohl auf der Leitung ...

Geschrieben von: mipraso 27.07.2004 - 21:52

Hallo pandapär,

ich meine du solltest, zum eigenen Verständnis, vielleicht mal so anfangen:

1. Erstelle dir mal eine html Datei mit dem Inhalt:

QUELLTEXT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de" dir="ltr">
<head>
   <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=ISO-8859-1">

   <title>Meine erste Seite</title>

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

</head>

<body>

   <h1>Test Text</h1>

</body>

</html>


2. Im gleichen Verzeichnis legst du dann eine Datei style.css an, mit dem Inhalt:

QUELLTEXT
h1 {
 color:#007070;
 font-family:verdana,arial,helvetica,sans-serif;
 font-size:20pt;
 font-weight:bold;
 font-style:italic;
}


Dann befasst du dich mit den Werten die für h1 in der CSS eingestellt werden können, hilfreich ist hier das Plugin TopStyle Integrator für Phase 5.3 und alle bis jetzt hier, aufgeführten Links.

So, das war jetzt nur ein kleines Beispiel, h1 in der CSS lässt sich erweitern. Werte für h2....h6 lassen sich dann auch in der CSS-Datei ablegen, steht aber auch schon hier. Ich hoffe der Code kommt so an, wie er sein sollte.

Wichtig, speicher die Änderungen in der CSS immer, bevor du dir die Änderungen in der Vorschau zur Anzeige bringen willst. Das ist ein häufiger Fehler.

Michael

P.S. In den Meta Tags fehlt noch was.

Geschrieben von: pandabär 28.07.2004 - 6:18

rolleyes.gif Hallo, ich danke Euch für Eure Antworten. Werde mich bei nächster Gelegenheit gleich an die Arbeit machen. Ich kann Euch schon so ein kleines bisschen folgen. Habe gestern auch selbst ein bisschen probiert und die Werte ausgetauscht und immer geguckt, was dann passiert ist.
Gruß

Geschrieben von: pandabär 29.07.2004 - 6:43

Hallo und guten Morgen!
Ich habe jetzt den Fehler gefunden, warum die Navigationsleist nicht richtig angezeigt worden ist. (Ha, wieder ein Stück geschafft)
Nun finde ich den Fehler nicht, woran es liegt, das der Text bei mit nicht daneben angezeigt wird, sondern darunter. Ich habe doch das vorgegebene Gerüst abgeändert. Im Prinzip habe ich ja den Code hier schon gepostet. All die Tipps habe ich noch nicht umgesetzt. Nur ein kleiner Teil.

Geschrieben von: pandabär 29.07.2004 - 7:09

In dem selfthml Artikel über das Tabellenlayout steht doch als Erklärung, das der Befehl: <td valign="top"> dafür sorgt, das der Inhalt oben bündig ausgerichtet wird. Welch anderer Befehl ist denn dafür noch zuständig? Weil, bei mit trotz des Befehls das ganze unten unter der Navigation steht und egal was ich ausprobiere, es ist nicht richtig.

Geschrieben von: Andreas 29.07.2004 - 7:30

Bitte lad' den Kram hoch, damit man sich das ansehen kann. Mindestens ich habe keine Lust meine Kristallkugel ständig vom obersten Board im Regal zu holen.

Geschrieben von: avenger 29.07.2004 - 9:27

ZITAT
Bitte lad' den Kram hoch, damit man sich das ansehen kann. Mindestens ich habe keine Lust meine Kristallkugel ständig vom obersten Board im Regal zu holen.


Hm Andreas, da biste ja auch selber Schuld wenn Du die Kirstallkugel auch immer so hochlegst biggrin.gif

Geschrieben von: pandabär 29.07.2004 - 9:41

Hi, Andreas!

ftp://home-up.t-online.de/backgrounds1/U.html

Das mit dem div will ich noch ändern. Danke fürs anschauen!

Geschrieben von: Andreas 29.07.2004 - 9:58

Naja, fast. Aber mit den Angaben konnte ich mir http://meuschen.bei.t-online.de/backgrounds1/U.html zusammenreimen ... Ich gucke mal.

Vielleicht finden andere ja auch was wink.gif

1. Lad' Dir aus den Downloads hier mal den "Tabellenzerleger"! Da sind ein paar Fehler in der Struktur der Tabelle!

2. Lies Dir http://de.selfhtml.org durch, danach noch einmal durchlesen!

3. Benutze http://validator.w3.org - in Deinem Quelltext sind heftigst viele Fehler (2 x body, 2 x </head> usw ...)

4. Blätter' in http://de.selfhtml.org

5. Versuche bei http://de.selfhtml.org mal die Grundstruktur einer HTML Seite zu verstehen.

Geschrieben von: pandabär 29.07.2004 - 11:00

Hi, also den Tabellenzerleger habe ich mit gerade geholt...

Geschrieben von: Ede 30.07.2004 - 11:10

Hi Pandabär,

versteh mich jetzt nicht falsch:
Ich möchte dir dringend anraten eine HTML-Dokumentation komplett zu lesen, damit zu experimentieren und den Themenkreis verstehen zu lernen.
Du findest die Download-Adressen für SelfHTML http://aktuell.de.selfhtml.org/extras/download.shtml
Lad dir die Dokumentation herunter und du kannst alles mit deinem Internet-Browser lesen und diese Dokumentation sogar in den Phase 5 einbinden, so dass du aus dem Phase 5 mit F12 immer die SelfHTML-Doku aufrufen kannst.

Es ist nämlich einfach nicht machbar deine sämtlichen Wissenslücken hier im Forum aufzufüllen. Wenn du dann einmal soweit alles verstanden hast, werden dir bei speziellen Problemen sicherlich viele Hinweise gegeben. Nur verstehen wirst du vieles erst, wenn du wirklich die Grundlagen auch verstanden hast.

Ich habe mir in der Anfangszeit ein Buch gekauft "HTML 3.0 in 14 Tagen" mit 1024 Seiten, die ich in mich hineingefressen hab wink.gif 14 Tage war natürlich etwas untertrieben, aber so hab ich mir meine Grundkenntnisse verschafft.
Erst HTML lernen, dann CSS und alles weitere dann später.

Hab mir übrigens SelfHTML zwischenzeitlich auch als Buch gekauft um dieses Projekt auch finanziell zu unterstützen wink.gif

Viel Erfolg und Spass w00t.gif

Geschrieben von: pandabär 31.07.2004 - 17:10

smile.gif Hallo, Ede - vielen Dank für Deine Antwort. Nein, ich bin nicht böse und verstehe das schon nicht falsch. Nur ich habe ja schon die ganze Website monatlang online und ich sollte dringend ein paar Änderungen vornehmen. Dadurch, das ich das ganze mit NetFusion erstellt habe, und das Progi nicht mehr drauf habe, kann ich Änderungen nur auf Umwegen machen. Ich bin dabei zu lernen, hab auch schon vieles probiert, aber nicht alles, was ich an Befehlen eingebe wird auch angeziegt. Ich meine ich ändere etwas in meinem Übungsdokument und zu sehen ist keine Veränderung.
Schönes Wochenende noch

Geschrieben von: Ede 02.08.2004 - 8:11

Hi Pandabär,

hast du denn im Menü Einstellungen -> Projekt -> Optionen das allerletzte Optionskästchen "Datei speichern bevor der Browser (intern/extern) aufgerufen wird" aktiviert?

Deine Änderungen müsser ja gespeichert werden, bevor die Vorschau aufgerufen wird.
Nur mal so eine Idee wink.gif

Geschrieben von: pandabär 02.08.2004 - 12:53

Hi, Ede - ja, in den Optionen ist das Häkchen bei dieser Einstellung gesetzt. Aber trotzdem Danke für deinen Tipp.

Geschrieben von: Ede 02.08.2004 - 13:19

Nun, dann hast du nicht genug geändert, damit eine sichtbare Veränderung eintritt wink.gif
oder die Änderungen waren nicht die richtigen sad.gif

Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)