Spoiler erstellen mit Dreamweaver

[withoutatrac3]

Hallo.

Ich habe bereits danach gegoogelt und bin auch auf viele Infos gestoßen. Mit diesen konnte ich allerdings nichts anfangen.

Mit dem Code:

Spoiler

text

habe ich im Dreamweaver nichts bewirken können.

Kann mir Jemand helfen?

Bitte detailiert und leicht verständlich weil ich Anfänger bin...

Grüße

EDIT:

Ich habe das gefunden:

yes javascript ,this will work
Code:

<script type="text/javascript">
function toggle(element) {
if (document.getElementById(element).style.display == "none") {
document.getElementById(element).style.display = "";
} else {
document.getElementById(element).style.display = "none";
}
}
</script>

and call it
Code:

<a href="javascript:toggle('hidden')"><span class="style1"><strong>Spoiler</strong></span></a>
<div id="hidden" style="display:none;">
Your content

</div>

Aber wo muss ich das genau einfügen?

EDIT 2:

Ich habe den oberen Code fast ganz oben eingefügt im Code und das zweite weiter unten wo ich den Spoiler brauche.

Nun ist an der Stelle "Spoiler" als Hyperlink.
Ist das so korrekt? Da kann man jetzt eine Tabelle drumherum erstellen?

Sry aber bin hier wirklich Anfänger

 

[Yuuri]

Ist das so korrekt?

Keine Ahnung, wird es denn versteckt/angezeigt beim Klick oder nicht?

 

[withoutatrac3]

man kann nicht drauf klicken...

Aber ich glaube mein Problem ist, dass ich nicht genau weis, wo ich das alles einfügen muss, deshalb hab ich mal einen Screen hier...[Anhang]

Ich möchte gerne da wo jetzt "Trainingsplan" inkl. der ganzen Tabelle drunter in einen Spoiler packen namens "Trainingsplan Saisson 2011/2012".

Wie muss ich vorgehen?

Grüße

 

[Yuuri]

Gib der Tabelle mit dem Trainingsplan eine ID und hinterleg irgendwo einen Link mit entsprechender ID und beim onclick schreibst du obiges hin, was in href drin steht. Das was oben bei hidden steht, muss der ID entsprechen, die du der Tabelle gibst.

 

[withoutatrac3]

Sry aber wie gebe ich dem Trainingsplan eine ID? Und wie hinterlege ich einen Link für diese ID?

Sind vielleicht blöde Fragen aber wie gesagt, das ist für mich alles Neuland...

EDIT:

Ich habe die Tabelle nun im Code markiert und unten beim "ID Reiter" eine "1" gesetzt aber irgendwie wird das nicht übernommen...

 

[Yuuri]

Du gibst der Tabelle, wo der Trainingsplan drin steht einfach eine ID.

<table id="trainingsplan" ...>

Irgendwo hinterlegst du dann einen Link zum Anzeigen/Verstecken.

<a href="#" onclick="toggle('trainingsplan');return false;">anzeigen/verstecken</a>

 

[withoutatrac3]

Und wo muss ich

<table id="trainingsplan" ...>

einfügen?

 

[Yuuri]

Da wo deine Tabelle mit dem Trainingsplan ist. Zeile 27.

 

[withoutatrac3]

Müsste das nicht Zeile 20 sein?

Mein Gott ich muss mir wohl noch ein bischen Basis-Wissen aneignen sry

Wenn ich

<table id="trainingsplan" ...>

in die Zeile 27 neben dem <tr> einfüge, dann kommt auf der rechten Seite ein <tr> (gelb schattiert)

 

[mvBarracuda]

Ich weiß wie verlockend es ist IDEs wie Dreamweaver zu nutzen. Aber mit etwas Basiswissen wäre die Geschichte in der Tat für dich wesentlich leichter.

Etwas querlesen bei SelfHTML sollte schonmal helfen :-)
http://de.selfhtml.org/

 

[mercsen]

bin ich eigentlich blöd oder ist der code verschwunden?

ersetze einfach dein <table> tag durch <table id="abc123">

 

[withoutatrac3]

Hallo.

Welches table soll ich erstetzen?

Wenn ich ein table ersetze steht rechts in der Grafikansicht nur noch ein geldschattierter Text...

 

[Speedy.]

Du hast doch in Zeile 27 folgenden Code:

<table width="100" border="0">

In diesem Tag schreibst du die ID rein, dass sieht dann so aus:

<table id="trainingsplan" width="100" border="0">

Damit hat deine Tabelle eine eindeutige ID und kann mit dem Script angesprochen werden.
Nebenbei bemerkt ist es niemals eine gute Idee, eine Seitenlayout mit Tabellen zu erstellen

Grüße

 

[Daaron]

Nebenbei bemerkt ist es niemals eine gute Idee, eine Seitenlayout mit Tabellen zu erstellen

Definitiv.

So wie ich die Sache sehe fehlt es hier am elementaren Verständnis, wie HTML aufgebaut ist, wozu welche Elemente dienen und wie man CSS + JS clever einsetzt. Schuld ist hier zu einem großen Teil mal wieder Dreamweaver, wo man einfach alles blöde zusammenklickt, ohne zu verstehen was da wie funktioniert.

Mein Tip: alles löschen und in Notepad++ absolut von Null an beginnen, und zwar in syntaktisch korrektem XHTML oder HTML5.

P.S.: Es gibt (für moderne Browser inkl. IE9) sogar einen Weg, solche Spoiler ganz ohne JS zu erzeugen. Ein Hoch auf den :target - Selektor.

 

[mercsen]

So nachdem ich den quellcode mal gefunden habe kann ich dir auch besser helfen.

ich rate dir auch dreamwaever in die tonne zu treten, diese WYSIWYG editoren für HTML zu nutzen sind immer kritisch.
Du benutzt ja gar kein css oder style-attribute. Font ist schon lange veraltet und jeder zelle nen align="center" zu geben ist ziemliche verschwendung von daten.
Aber egal, lasse ich alles mal durchgehen weil anfänger bist

auf jedenfall solltest du die tabelle, welche den inhalt des trainingsplansanzeigt, erstmal in ein <div></div> tag packen.
Dann hast schon mal ein bissl an flexibilität gewonnen.

und jetzt machst du folgendes (der code ist mal auf das wesentliche beschränkt)

<html>
    <head>
        <script type="text/javascript">
            function toggle(element) {
                if (document.getElementById(element).style.display == "none") {
                    document.getElementById(element).style.display = "";
                } else {
                    document.getElementById(element).style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <a href="javascript:toggle('trainingsplan')">Show / Hide</a>
        <div id="trainingsplan" style="position: relative; height: auto; width: 100%">
            <table width="100%" border="1">
                <!-- Hier alle zeilen mit den spielen -->
                <tr>
                    <td>Test</td>
                </tr>
            </table>
        </div>
    </body>
</html>

ist aber eigentlich alles nicht so optimal. z.B. der javascript: befehl im href attribute. Außerdem sollte eine seite lieber ohne JS ausgliefert werden und es klingt sich erst später ins DOM ein und fügt event handler ein, aber es sollte gehen für dich

solltest du mehr machen ist es aber gut sich ein gewisses basis wissen anzueignen und dreamwaever loszuwerden!
In den browsern sieht das meist eh anders aus. Wenn du dich mit dynamischen inhalten beschäftigen willst guck dir mal das DOM an
CSS ist net zu verachten und wirklich schnell zu lernen.
da es eh nicht viele tags / befehle / attribute gibt und man so oder so immer die selben braucht

P.S.
schonmal geschaut ob es für deine zwecke nicht scripte gibt die das verwalten auch leichter machen?

 

[withoutatrac3]

Hallo.

Danke für die Antworten!

auf jedenfall solltest du die tabelle, welche den inhalt des trainingsplansanzeigt, erstmal in ein <div></div> tag packen.
Dann hast schon mal ein bissl an flexibilität gewonnen.

An welcher Stelle genau muss ich das <div></div> setzen?

Nun sieht das Ganze so aus: Anhang

Was muss ich als nächstes machen?

schonmal geschaut ob es für deine zwecke nicht scripte gibt die das verwalten auch leichter machen?

Ja ich habe auf http://www.mozilo.de/pluginarchiv/ mal nachgeschaut aber leider kein Plugin gefunden was mit Spoiler zutun hat...

Du benutzt ja gar kein css oder style-attribute. Font ist schon lange veraltet und jeder zelle nen align="center" zu geben ist ziemliche verschwendung von daten.

Sollte ich das Font updaten? Welche Vorteile hat das? Wie gehe ich vor?
Inwiefern ist es eine Verschwendung von Daten?

Ich werde mir das Basiswissen früher oder später aneignen aber momentan bin ich sonst auch zurecht gekommen irgendwie

 

[Speedy.]

Es wäre Zeitverschwendung, dir das jetzt alles zu erklären. Verstehe mich nicht falsch, aber du musst dir einfach dieses Wissen aneignen. Sowohl HTML als auch CSS. Es gibt im Internet massig kostenlose und sehr gute Tutorials für Anfänger, die helfen dir sicher schnell weiter. So, wie du es jetzt machst, kommt nichts Vernünftiges bei heraus.

PS: Font ist die Schriftart. Die ändert man am besten mit CSS. Deine jetzige ist wohl die Standart-HTML-Schriftart, die jeder Browser für sich interpretiert. Allgemein ist es total veraltet, das Stylen der Seite mit reinem HTML zu machen. Wie gesagt, dafür ist CSS zuständig.

 

[withoutatrac3]

Kein Problem, ich verstehs ja selber...

Aber wenn Dreamweaver schon Müll ist, womit soll ich dann programmieren? PSPad?

Ich schaue mir gerade HTML Tuts an..soll ich anschließend mit PHP fortfahren oder was würdet Ihr mir empfehlen?

Grüße

 

[Speedy.]

Auf keinen Fall gleich in PHP stürzen, wenn du nicht mal sauberes HTML schreibst. An deiner Stelle würde ich mit dem einfachsten beginnen, das wäre erst einmal symantisch korrektes HTML (Stichwort HTML5 oder XHTML 1.1), ziemlich zeitgleich fängst du mit CSS an, damit du mit deinen neu erworbenen Kenntnissen auch schon vorzeigbare Ergebnisse bekommst. Mit etwas CSS-Grundwissen lassen sich schon erstaunlich gute Seiten erstellen.

Dann kommt der schwierigere Teil, die richtigen Programmiersprachen wie PHP und JavaScript. Es ist jedem selbst überlassen, ich hab mit JavaScript angefangen, da diese Sprache recht verständlich und logisch ist. PHP finde ich furchtbar, da kämpfe ich mich gerade durch...
Aber wie gesagt, mit guten HTML und CSS Kenntnissen kannst du schon so einiges anfangen.

Als Texteditor empfehle ich Notepad++ oder Sublime Text 2. In beiden musst du den Code selbst schreiben, aber nur so lernst du ihn auch gut.

 

[withoutatrac3]

Als Texteditor empfehle ich Notepad++ oder Sublime Text 2. In beiden musst du den Code selbst schreiben, aber nur so lernst du ihn auch gut.

Ok das ist ein Argument...Aber sonst geht PSPad auch gut? Ich frag nur, weil ich so das aus dem Tut nachmachen kann weil er dort auch dieses Prog benutzt...

Aber warum ist Dreamweaver Eurer Meinung nach Müll? Weil da auch alles "vorgegeben" wird und man es so nicht alles "selber schreiben" muss?