Howrse'SOS

Das Hilfeforum der Seite www.Howrse.de
 
StartseiteFAQSuchenAnmeldenMitgliederNutzergruppenHilfeLoginHowrse

Austausch | 
 

 Codieren mit der Firefox Developer Edition

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten 
AutorNachricht
Mariacher J.E.
Hilfsmod
Hilfsmod
avatar

Weiblich
Anzahl der Beiträge : 572
Alter : 19
Howrse-Login : Mariacher J.E.
Anmeldedatum : 23.11.12

BeitragThema: Codieren mit der Firefox Developer Edition   Mi Jun 28, 2017 1:40 pm

Codieren mit der Firefox Developer Edition

Neben dem Browser Mozilla Firefox gibt es noch eine besondere Browseredition, die extra für Programmierer und Designer erstellt wurde, die Firefox Developer Edition. Diese Edition beinhaltet Entwicklertools, welche Teils auch das Add-on Firebug ersetzen, welches inzwischen auf Eis gelegt und einst für den Mozilla Firefox progammiert wurde.

Um Grafiken für Howrse zu codieren, braucht es hier nicht sonderlich viel. Als erstes müsst ihr natürlich eine Grafik erstellt haben. Diese ladet ihr anschließend bei einem sogenannten hoaster hoch; dieser speichert eure Grafik auf einem Server und erstellt dazu einen Direktlink, mit diesem können andere eure Grafik dann sehen. Am ehesten würde ich euch hier abload.de empfehlen; die Website kommt aus Deutschland und ihr könnt euch ein Konto erstellen, eure Grafiken in Galerien einordnen und sie auch jederzeit wieder komplett vom Server löschen / entfernen.

Habt ihr eure Grafik inzwischen hochgeladen? — Gut!
Nun braucht ihr die Pixelangaben in Höhe und Breite, sowie den Direktlink euer Grafik. Öffnet bitte eure Präsentation in Howrse und geht in den HTML-Modus. Wenn ihr diesen geöffnet habt, fügt bitte diesen Coden ein:
Code:
<div style="background: url(#URL#) no-repeat; width: #Breite#px; height: #Höhe#px; ">
Dieser Code ist dazu da, damit ihr eure Grafik sehen könnt. Bitte ersetzt das #URL# mit eurem Direktlink und fügt bei #Breite# und #Höhe# die entsprechenden Werte ein.

Nun geht es weiter mit den Scrollboxen; hierzu fügt ihr, direkt hinter dem ersten Code, diesen ein:
Code:
<div style="width: 100px; height: 100px; display: inline; margin-top: 20px; margin-left: 20px; overflow: auto; float: left; border: 1px solid">Text ...</div>
Pro Textbox braucht ihr einen solchen Code. Habt ihr also nun drei Scrollboxen, so müsst ihr diesen Code dreimal (hintereinander) einfügen.

Solltet ihr das alles erledigt haben, dann schließen wir den Code für eure Grafik ab. Wir haben hier ausschließlich mit DIV-Codes gearbeitet; um einen HTML-Code zu schließen nutzt man einen / vor der Codeart, somit sieht der Code zum Abschließen so aus:
Code:
</div>

Bei meinem Layout, welches zwei Scrollboxen haben wird, sieht der HTML-Code folgendermaßen aus:

Wechsle ich nun in den normalen Modus, so bekomme ich das zu sehen:
Euch fällt sicher auf, dass hier schon Text vorhanden ist. Dies ist ein Blindtext, der einem, wenn man keine umrandete Textbox haben möchte, zeigt, wo der Text später stehen wird. Solltet ihr umrandete Textboxen haben, so braucht ihr keine extra Grafik mit Blindtext. Wenn man, so wie ich, mit einer extra Blindtextgrafik arbeitet, so muss man die normale Grafik, sowie eine Grafik mit Blindtext hochladen und zuerst den Direktlink der Grafik mit Blindtext nutzen, und diesen später dann austauschen.

Jetzt müsst ihr Werkezuge für Web-Entwickler öffnen; um es abzukürzen könnt ihr auch die Tastenkombination Strg + Umschalt + I nutzen. Solltet ihr nicht die Tastenkombination nutzen, so wählt bitte Werkzeuge ein-/ausblenden aus.

Ihr müsstet nun unten ein „Zusatzfenster“ erhalten haben. In der obrigen Leiste dieses Zusatzfensters findet ihr ganz links einen Pfeil, welcher auf einen Bildschirm zeigt. Diesen wählt ihr aus, fahrt mit euerer Maus auf die entsprechende Scrollbox und macht einen Linksklick. Bitte achtet darauf, dass ihr wirklich die Scrollbox auswählt und nicht etwas anderes.
Wie ihr sehen könnt ist dieser Pfeil mit dem Bildschirm nun grün und unten ist der Code unserer Scrollbox markiert. Sobald ihr die scrollbox ausgewählt habt, wird sie nicht mehr blau angezeigt, außer ihr fahrt mit eurer Maus über ihren Code.

Rechts im Zusatzfenster sehen wir nun eine Box mit Pixelwerten:
Ihr könnt nun einen der Werte anklicken und die Zahlen bearbeiten, bzw. auch mit den Pfeiltasten höher oder kleiner werden lassen. Hier eine kurze Zusammenfassung von den Werten an denen ihr rumspielen werdet und für was sie sind:
Spoiler:
 


Jetzt könnt ihr die Werte so verändern, bis eure Scrollboxen am gewünschten Platz angelangt sind. Bei mir sieht das, nach der ersten Scrollbox so aus:
Da meine erste Scrollbox schon fast die komplette Breite des Layouts einnimmt, wurde die zweite automatisch nach unten versetzt. Wenn ihr nun die Scrollbox am gewünschten Platz positioniert habt, so fahrt mit eurer Maus auf das Fenster mit den Werten und entfernt den Hacken bei border.

Auf diese Art könnt ihr das für alle Scrollboxen machen. Ihr müsst nach Abschluss nur noch die Präsentation speichern und schon habt seid ihr fertig. Um in eurer Layout zu schreiben braucht ihr natürlich keine Entwicklertools. Solltet ihr, wie ich, eine Blindtextgrafik verwendet haben, so vergesst nicht vor der Benutzung den Direktlink auszutauschen!

Für den Fall, dass ihr Quellen verlinken müsst, so wechselt wieder in den HTML-Modus und fügt folgenden Code, hinter dem letzten </div> ein:
Code:
<pre><a href="#URL"><font color="#000000"><code>#Name#</code></font></a></pre>

Bitte ersetzt das #URL# mit der entsprechenden Webadresse und fügt bei #Name# den Namen der Website oder des Künstlers ein. Bei diesem Coden habe ich auch einen FONT-Code verwendet, welcher die Farbe bestimmt. In diesem Fall ist die Farbe des Links schwarz. Mit Hilfe der Farbpipette könnt ihr #000000 durch eine neue HTML-Farbe ersetzen. Ich bin mir sicher, ihr findet schnell herraus, wie ihr mit der Pipette umgehen müsst.

Solltet ihr irgendwelche Fragen haben, oder etwas nicht verstehen, so schreibt dies doch bitte hier in diesen Thread. Ich werde mich bemühen so schnell es geht euch zu helfen und eure Fragen zu beantworten.

In Liebe
Jelly
Nach oben Nach unten
http://www.howrse.de/joueur/fiche/?id=9281108
 
Codieren mit der Firefox Developer Edition
Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben 
Seite 1 von 1
 Ähnliche Themen
-
» Gibt es eine Möglichkeit, dass bei Firefox html codes angezeigt werden?
» Firefox, alle Versionen, das Drag and Drop von verhindern!
» BB2, Firefox: Tabelle auf Startseite verschoben
» javascript problem mit firefox
» Unterschied zwischen Mozilla Firefox und Expoloer8

Befugnisse in diesem ForumSie können in diesem Forum nicht antworten
Howrse'SOS :: Kunst :: Anleitungen-
Gehe zu: