Hallo!
Wie versprochen ein Tutorial von mir, wie man Widgets macht.
Vorweg: Ich verwende Illustrator, Photoshop, Dreamweaver und TextEdit.
Es gibt sicher bessere Wege, zum erstellen von Widgets, aber ich kenn mich mit diesen Programmen aus, darum mach ichs auch dort.
Ein Widget ist eigentlich nichts weiter als ein Ordner mit einer Dateiendung. Auch andere Programme fuer einen Mac sind Ordner. Den Ordnerinhalt kann man sich ansehen, indem man mit der rechten Maustaste auf ein Widget oder Programm klickt und dann den Paketinhalt anzeigen laesst.
Ein Widget-Ordner ist so aufgebaut:
Wir erstellen einmal einen gewoehnlichen Ordner. Meiner heisst Mein_Widget.
Gut! Zuerst machen wir die Grafiken. Ich habe deshalb den Illustrator vorgezogen, weil ich gerne mit Vektoren arbeite. Aber man kann auch andere Grafikprogramme verwenden, wenn diese mehr bevorzugt werden.
Folgendes Bild ist bei mir Default.png:
[Blockierte Grafik: http://thumber.zems.net/file_WidgetHintergrun5d22e.png]
Den leichten Schatten habe ich noch mit Photoshop hinzugefuegt.
Icon.png ist bei mir dieses Bild:
[Blockierte Grafik: http://thumber.zems.net/file_Icon6ba8d.png]
Diese Bilder kommen in Mein_Widget.
Sehr schoen. Der erste Schritt ist erledigt. Nun folgt der 2.: Die HTML Seite. Ich erklaere mal kurz was eigentlich eine HTML-Seite ist.
Eine HTML-Seite ist eigentlich eine Anreihung von Codes, die dann den Text nach eigenen Vorstellungen formatieren soll.
(Kleine Info: Ich habe den Dreamweaver auf Englisch und hoffe deshalb, dass die Angaben richtig uebersetzt sind)
Wir oeffnen einmal Dreamweave, erstellen eine neue HTML-Seite und wechseln in die Code-Ansicht.
Wenn man noch nie mit HTML-Seiten gearbeitet hat, dann sieht das ziemlich kompliziert aus. Ist es aber nicht.
Der Code sollte aehnlich wie hier aussehen:
Zwischen <head> und </head> steht alles, was die Seite nicht anzeigen sollte und vor dem eigentlichen Inhalt geladen haben sollte.
Sprich Stylesheets und Javascript, die gleich verwendet werden muessen, werden hier hineingeschrieben.
Zwischen <body> und [/i]</body>[/i] kommt der eigentliche Inhalt hinein.
Da hier aber wahrscheinlich auch noch blutige Anfaenger mitmachen, vergessen wir das ganze fuer einstweilen und gehen in die Design-Ansicht. Wir speichern das Dokument in unserem Widget-Ordner und fahren fort.
Wir wollen unser Default.png als Hintergrundbild verwenden. Dafuer verwenden wir am Besten Stylesheets (CSS). Der Dreamweaver hat eine kleine Werkzeugpalette fuer CSS.
[Blockierte Grafik: http://thumber.zems.net/file_css_win353b5.png]
Dort befindet sich ein kleines Symbol, das eine Seite mit einem kleinen Plus darstellt. Ein Klick darauf und schon haben wir ein kleines Fenster mit ein paar Auswahlmoeglichkeiten.
Wir wollen fuer das Hintergrund einen Tag definieren... den body-Tag.
Dann geben wir in dem Textfeld body ein und definieren das ganze nur in diesem Dokument.
Unter der Kategorie Hintergrund (linke Spalte) finden wir einige Optionen die wir ausfuellen koennen:
Hintergrundbild: Auf Durchsuchen klicken und unser Default.png auswaehlen.
Wiederholung: keine wiederholung. Wir wollen ja nicht, dass unser Hintergrundbild gekachelt wird.
Unter Schrift kann man noch die Schriftart, sowie die Schriftgroesse und einige andere Sachen eintragen.
Ich habe als Schriftart "Arial Rounded MT Bold", Arial, Verdana eingetragen.
Sollte Arial Rounded MT Bold nicht existieren, wird Arial genommen. Sollte Arial nicht vorhanden sein, wird Verdana verwendet und falls dieses auch nicht da ist, wird eine Standardschrift wie Times angezeigt.
Schriftgroesse ist bei mir 20px und Farbe weiss (#FFFFFF)
Ein klick auf Ok und das ganze einmal betrachten. Hat sich ja schon ein bisschen was getan
Aber das ganze ist noch immer oben links in der Ecke.
Dafuer habe ich Div-Ebenen verwendet, um diese in der Mitte darstellen zu lassen.
Eine Div-Ebene ist eine Ebene, die beliebig gross sein und auch frei umherschwirren kann.
Eine davon mit der ID #container habe ich 155x105px gross gemacht, die also genau ueber dem Hintergrund liegt.
Eine ID kann in einem Dokument nur einmal vorkommen und wird entweder fuer Stylesheets oder Javascript benoetigt. Javascript kann man auch fuer Widgets verwenden.
Wir wollen aber der ID ein paar Eigenschaften geben. Also Groesse und Position.
Okay. Wir haben ja bereits body definiert. Nun definieren wir die ID. Eine ID wird immer mit einer fuehrenden Raute (#) definiert, jedoch wird diese Raute nicht bei der Anwendung angegeben. Also wenn man diese ID dann einem HTML-Tag zuweist.
Wir sind also wieder bei diesem Dialog, wo wir erst die Option Tag ausgewaehlt haben und dann body in das Textfeld geschrieben haben. Diesmal klicken wir auf die Option Erwitert und geben in das Textfeld #container ein. Wenn auch noch die letzte Option ausgewaehlt wurde, die meint, dass es nur in diesem Dokument definiert wird, klicken wir auf Ok.
Fuer diese ID definieren wir nur die Groesse, die wir in der Box-Kategorie finden. Dort geben wir fuer die Hoehe 155 Pixel und fuer die Breite 105 Pixel an.
Nun wechseln wir in dei Kategorie Positionierung. Okay! Hier kann man zwar auch die Groesse einstellen, aber ich denke mir es ist eigentlich logischer, wenn man die Groesse auch direkt bei der Box eingibt.
Ueber der Groesseneinstellung kann man den Typ angeben. Wir verwenden absolute oder in der Deutschen Version heisst es glaub ich nur absolut. Bei Platzierung geben wir fuer Oben und Links 0 an.
Gut! Das wars auch schon.
Bevor wir nun fortfahren, bitte jeglichen Text loeschen.
Nun muessen wir eine Ebene einfuegen. Unter dem Menue von Dreamweaver haben wir eine kleine Leiste mit Elementen, die man einfuegen kann. Hier gibt es auch wieder Kategorien. Entweder werden diese als Dropdownmenue angezeigt oder als Tabs (kann man im Dropdownmenue einstellen). Wir wechseln zur Kategorie Layout und waehlen den 2. Button aus, der neben dem Tabellen-Symbol ist.
[Blockierte Grafik: http://thumber.zems.net/file_insert_layer80da2.png]
Nun haben wir ein Fenster vor uns, wo wir wieder einiges Einstellen kann. Unter anderem die ID. Wenn wir auf den Pfeil klicken, sollte nun container aufgelistet werden.Auswaehlen und Ok.
Und was hat sich das jetzt gebracht? Der Text wird ja jetzt noch immer links oben in der Ecke angezeigt. Richtig. Aber wir haben jetzt wenigstens den Text abgegrenzt und er kann nicht mehr irgendwo auf dem Bildschirm herumschwirren (zumindest, wenn wir uns das ganze im Browser ansehen).
Aber nun koennen wir eine weitere Ebene definieren, die sich in dieser container-Ebene befindet und sich nur in dem Bereich bewegen kann, der vorgegeben wurde.
(Den Text bitte wieder loeschen, der eingegeben wurde.)
Wir erstellen also eine neue ID fuer eine neue Ebene und nennen diese #text. Wie vorhin: Neuen Stil anlegen, auf Erweitert klicken, #text eingeben und falls notwendig auch "nur in diesem Dokument definieren" auswaehlen und auf Ok klicken.
Wir wollen, dass sich unser Text in der Mitte befindet. Jedoch ist 50% nicht wirklich Mitte. Mathematisch schon, optisch jedoch nicht.
Gehen wir einmal gleich in die Kategorie Positionieren.
Die Ebene soll ja genauso breit sein, wie #container. Also sagen wir, sie ist 100%. Prozent kann man in dem Dropdown waehlen, wo eigentlich Pixel steht.
Die Hoehe ist ca. der, der Textgroesse. Wir haben 20 Pixel fuer den Text eingestellt. Ein bisschen Ueberschuss und wir sind bei 22 Pixel. Also Hoehe der Ebene #text ist 22 Pixel.
Jetzt brauchen wir nurmehr die Positionierung von oben angeben. Ich habe sie auf 48% gesetzt.
Da gibt es jetzt aber ein kleines Problem. Die Prozent geben an, wieviel vom Elternelement bis zum Anfang des Elements heruntergeschoben werden soll. Das heisst wir muessen noch einen kleinen Trick anwenden, damit er von der Mitte des Elements ausgeht.
Wechseln wir einmal in die Kategorie Box.
Bei Rand waehlen wir Fuer alle gleich ab und geben fuer Oben den Wert -11Pixel. Also genau die Haelfte von der Hoehe.
Jetzt klicken wir einmal in das Feld, wo unsere #container-Ebene ist und fuegen eine weitere DIV-Ebene ein. Nurmehr die ID waehlen, einen Text hineinschreiben, und fertig. Wichtig ist, dass der Text nur eine Zeile ist. Ich habe Mein Widget geschrieben.
Das ganze sieht doch schon nett aus, oder?
[Blockierte Grafik: http://thumber.zems.net/file_dream_widgetb7a40.png]
und im Browser:
[Blockierte Grafik: http://thumber.zems.net/file_widgetbda9c.png]
...
Wie versprochen ein Tutorial von mir, wie man Widgets macht.
Vorweg: Ich verwende Illustrator, Photoshop, Dreamweaver und TextEdit.
Es gibt sicher bessere Wege, zum erstellen von Widgets, aber ich kenn mich mit diesen Programmen aus, darum mach ichs auch dort.
Ein Widget ist eigentlich nichts weiter als ein Ordner mit einer Dateiendung. Auch andere Programme fuer einen Mac sind Ordner. Den Ordnerinhalt kann man sich ansehen, indem man mit der rechten Maustaste auf ein Widget oder Programm klickt und dann den Paketinhalt anzeigen laesst.
Ein Widget-Ordner ist so aufgebaut:
- Default.png
Das ist ein kleines Bild, das angezeigt wird, wenn das Widget am laden ist. - Icon.png
Dieses Bild (82x82px) wird im Dashboard beim hinzufuegen angezeigt. - Info.plist
Eine XML-Datei, in der man Einstellungen setzten kann. - html-Dokument
Eine HTML-Seite, die man vorher in der Info.plist definiert hat.
Wir erstellen einmal einen gewoehnlichen Ordner. Meiner heisst Mein_Widget.
Gut! Zuerst machen wir die Grafiken. Ich habe deshalb den Illustrator vorgezogen, weil ich gerne mit Vektoren arbeite. Aber man kann auch andere Grafikprogramme verwenden, wenn diese mehr bevorzugt werden.
Folgendes Bild ist bei mir Default.png:
[Blockierte Grafik: http://thumber.zems.net/file_WidgetHintergrun5d22e.png]
Den leichten Schatten habe ich noch mit Photoshop hinzugefuegt.
Icon.png ist bei mir dieses Bild:
[Blockierte Grafik: http://thumber.zems.net/file_Icon6ba8d.png]
Diese Bilder kommen in Mein_Widget.
Sehr schoen. Der erste Schritt ist erledigt. Nun folgt der 2.: Die HTML Seite. Ich erklaere mal kurz was eigentlich eine HTML-Seite ist.
Eine HTML-Seite ist eigentlich eine Anreihung von Codes, die dann den Text nach eigenen Vorstellungen formatieren soll.
(Kleine Info: Ich habe den Dreamweaver auf Englisch und hoffe deshalb, dass die Angaben richtig uebersetzt sind)
Wir oeffnen einmal Dreamweave, erstellen eine neue HTML-Seite und wechseln in die Code-Ansicht.
Wenn man noch nie mit HTML-Seiten gearbeitet hat, dann sieht das ziemlich kompliziert aus. Ist es aber nicht.
Der Code sollte aehnlich wie hier aussehen:
HTML-Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
- <title>Untitled Document</title>
- </head>
- <body>
- </body>
- </html>
Zwischen <head> und </head> steht alles, was die Seite nicht anzeigen sollte und vor dem eigentlichen Inhalt geladen haben sollte.
Sprich Stylesheets und Javascript, die gleich verwendet werden muessen, werden hier hineingeschrieben.
Zwischen <body> und [/i]</body>[/i] kommt der eigentliche Inhalt hinein.
Da hier aber wahrscheinlich auch noch blutige Anfaenger mitmachen, vergessen wir das ganze fuer einstweilen und gehen in die Design-Ansicht. Wir speichern das Dokument in unserem Widget-Ordner und fahren fort.
Wir wollen unser Default.png als Hintergrundbild verwenden. Dafuer verwenden wir am Besten Stylesheets (CSS). Der Dreamweaver hat eine kleine Werkzeugpalette fuer CSS.
[Blockierte Grafik: http://thumber.zems.net/file_css_win353b5.png]
Dort befindet sich ein kleines Symbol, das eine Seite mit einem kleinen Plus darstellt. Ein Klick darauf und schon haben wir ein kleines Fenster mit ein paar Auswahlmoeglichkeiten.
Wir wollen fuer das Hintergrund einen Tag definieren... den body-Tag.
Dann geben wir in dem Textfeld body ein und definieren das ganze nur in diesem Dokument.
Unter der Kategorie Hintergrund (linke Spalte) finden wir einige Optionen die wir ausfuellen koennen:
Hintergrundbild: Auf Durchsuchen klicken und unser Default.png auswaehlen.
Wiederholung: keine wiederholung. Wir wollen ja nicht, dass unser Hintergrundbild gekachelt wird.
Unter Schrift kann man noch die Schriftart, sowie die Schriftgroesse und einige andere Sachen eintragen.
Ich habe als Schriftart "Arial Rounded MT Bold", Arial, Verdana eingetragen.
Sollte Arial Rounded MT Bold nicht existieren, wird Arial genommen. Sollte Arial nicht vorhanden sein, wird Verdana verwendet und falls dieses auch nicht da ist, wird eine Standardschrift wie Times angezeigt.
Schriftgroesse ist bei mir 20px und Farbe weiss (#FFFFFF)
Ein klick auf Ok und das ganze einmal betrachten. Hat sich ja schon ein bisschen was getan
Aber das ganze ist noch immer oben links in der Ecke.
Dafuer habe ich Div-Ebenen verwendet, um diese in der Mitte darstellen zu lassen.
Eine Div-Ebene ist eine Ebene, die beliebig gross sein und auch frei umherschwirren kann.
Eine davon mit der ID #container habe ich 155x105px gross gemacht, die also genau ueber dem Hintergrund liegt.
Eine ID kann in einem Dokument nur einmal vorkommen und wird entweder fuer Stylesheets oder Javascript benoetigt. Javascript kann man auch fuer Widgets verwenden.
Wir wollen aber der ID ein paar Eigenschaften geben. Also Groesse und Position.
Okay. Wir haben ja bereits body definiert. Nun definieren wir die ID. Eine ID wird immer mit einer fuehrenden Raute (#) definiert, jedoch wird diese Raute nicht bei der Anwendung angegeben. Also wenn man diese ID dann einem HTML-Tag zuweist.
Wir sind also wieder bei diesem Dialog, wo wir erst die Option Tag ausgewaehlt haben und dann body in das Textfeld geschrieben haben. Diesmal klicken wir auf die Option Erwitert und geben in das Textfeld #container ein. Wenn auch noch die letzte Option ausgewaehlt wurde, die meint, dass es nur in diesem Dokument definiert wird, klicken wir auf Ok.
Fuer diese ID definieren wir nur die Groesse, die wir in der Box-Kategorie finden. Dort geben wir fuer die Hoehe 155 Pixel und fuer die Breite 105 Pixel an.
Nun wechseln wir in dei Kategorie Positionierung. Okay! Hier kann man zwar auch die Groesse einstellen, aber ich denke mir es ist eigentlich logischer, wenn man die Groesse auch direkt bei der Box eingibt.
Ueber der Groesseneinstellung kann man den Typ angeben. Wir verwenden absolute oder in der Deutschen Version heisst es glaub ich nur absolut. Bei Platzierung geben wir fuer Oben und Links 0 an.
Gut! Das wars auch schon.
Bevor wir nun fortfahren, bitte jeglichen Text loeschen.
Nun muessen wir eine Ebene einfuegen. Unter dem Menue von Dreamweaver haben wir eine kleine Leiste mit Elementen, die man einfuegen kann. Hier gibt es auch wieder Kategorien. Entweder werden diese als Dropdownmenue angezeigt oder als Tabs (kann man im Dropdownmenue einstellen). Wir wechseln zur Kategorie Layout und waehlen den 2. Button aus, der neben dem Tabellen-Symbol ist.
[Blockierte Grafik: http://thumber.zems.net/file_insert_layer80da2.png]
Nun haben wir ein Fenster vor uns, wo wir wieder einiges Einstellen kann. Unter anderem die ID. Wenn wir auf den Pfeil klicken, sollte nun container aufgelistet werden.Auswaehlen und Ok.
Und was hat sich das jetzt gebracht? Der Text wird ja jetzt noch immer links oben in der Ecke angezeigt. Richtig. Aber wir haben jetzt wenigstens den Text abgegrenzt und er kann nicht mehr irgendwo auf dem Bildschirm herumschwirren (zumindest, wenn wir uns das ganze im Browser ansehen).
Aber nun koennen wir eine weitere Ebene definieren, die sich in dieser container-Ebene befindet und sich nur in dem Bereich bewegen kann, der vorgegeben wurde.
(Den Text bitte wieder loeschen, der eingegeben wurde.)
Wir erstellen also eine neue ID fuer eine neue Ebene und nennen diese #text. Wie vorhin: Neuen Stil anlegen, auf Erweitert klicken, #text eingeben und falls notwendig auch "nur in diesem Dokument definieren" auswaehlen und auf Ok klicken.
Wir wollen, dass sich unser Text in der Mitte befindet. Jedoch ist 50% nicht wirklich Mitte. Mathematisch schon, optisch jedoch nicht.
Gehen wir einmal gleich in die Kategorie Positionieren.
Die Ebene soll ja genauso breit sein, wie #container. Also sagen wir, sie ist 100%. Prozent kann man in dem Dropdown waehlen, wo eigentlich Pixel steht.
Die Hoehe ist ca. der, der Textgroesse. Wir haben 20 Pixel fuer den Text eingestellt. Ein bisschen Ueberschuss und wir sind bei 22 Pixel. Also Hoehe der Ebene #text ist 22 Pixel.
Jetzt brauchen wir nurmehr die Positionierung von oben angeben. Ich habe sie auf 48% gesetzt.
Da gibt es jetzt aber ein kleines Problem. Die Prozent geben an, wieviel vom Elternelement bis zum Anfang des Elements heruntergeschoben werden soll. Das heisst wir muessen noch einen kleinen Trick anwenden, damit er von der Mitte des Elements ausgeht.
Wechseln wir einmal in die Kategorie Box.
Bei Rand waehlen wir Fuer alle gleich ab und geben fuer Oben den Wert -11Pixel. Also genau die Haelfte von der Hoehe.
Jetzt klicken wir einmal in das Feld, wo unsere #container-Ebene ist und fuegen eine weitere DIV-Ebene ein. Nurmehr die ID waehlen, einen Text hineinschreiben, und fertig. Wichtig ist, dass der Text nur eine Zeile ist. Ich habe Mein Widget geschrieben.
Das ganze sieht doch schon nett aus, oder?
[Blockierte Grafik: http://thumber.zems.net/file_dream_widgetb7a40.png]
und im Browser:
[Blockierte Grafik: http://thumber.zems.net/file_widgetbda9c.png]
...
