Der eingegeben Text wird markiert und jetzt greifen wir auf unsere - ganz am Anfang definierten - H-Tags zu. Entnehmt bitte dem folgenden

Transkript

1 Das Einfügen und Formatieren von Text- & Bildinhalten So, das Tutorial neigt sich dem Ende und ich bin vermutlich darüber ebenso froh, wie Ihr. ;-) Lasst es uns anpacken! Wir fügen eine Überschrift ein. Der eingegeben Text wird markiert und jetzt greifen wir auf unsere - ganz am Anfang definierten - H-Tags zu. Entnehmt bitte dem folgenden

2 Screenshot, wie Ihr dazu vorgehen müsst. Der Überschrift muss unmittelbar ein harter Zeilenumbruch (Enter) folgen. Das ist deshalb so, weil sonst der gesamte Text dieser Zelle als H-Tag formatiert wird. Der Überschrift folgt ein Text. Ich habe zu einem Blindtext gegriffen, und ihn in meine Zwischenablage kopiert. Den Text füge ich über das Kontextmenü wieder ein. Hier wähle ich jedoch nicht das einfache Einfügen, sondern Speziell Einfügen und dann Unformatierter Text.

3 Das ist extrem wichtig, weil so alle - aus anderen Programmen mitgebrachten - Formatierungen entfernt werden. Gelangen Formatierungen aus z.b. Word in NOF, dann bemerkt man zunächst nichts. Im Quelltext findet man allerdings wüste Ansammlungen dieser Formate und nicht selten geht ein ganzes Projekt hierdurch irreparabel kaputt.

4 Ich habe den Text eingefügt, aber trotz hartem Zeilenumbruch formatiert NOF meinen gesamten Text als Überschrift. Ich markiere also den Text und stelle in der EP wieder auf P zurück. Der Text entspricht nun meinen Vorstellungen, klebt allerdings noch links und oben am Zellenrand. Das möchte ich ändern. Ich klicke einmal in die Zelle und lese auf der EP die dort verwendete Formatvorlage ab.

5 Genau diese Formatvorlage bearbeiten wir so, dass der Text oben, unten und links eingerückt wird. Entnehmt die Einstellungen bitte wieder dem folgenden Screenshot.

6 Wie man sieht, hat der Text jetzt einen schönen Abstand zu den Zellenrändern.

7 Fehlt noch das Bild mit den Blumen. Wir klicken einmal auf das Bild- Symbol und gehen mit der Mouse an den Anfang des Textes. Wenn ein bläulicher Cursor vor dem ersten Buchstaben erscheint klicken wir einmal.

8 Es öffnet sich das Fenster zum Durchsuchen. Wir navigieren zum Bild, markieren es und bestätigen unsere Auswahl mit dem Öffnen-Button.

9

10 Das Bild wird eingefügt, liegt aber noch an der falschen Stelle.

11 Also muss es positioniert werden. Wir markieren mit einem einfachen Klick unser Bild und aktivieren auf der EP den Reiter Ausrichten. Dort aktivieren wir die Option Rechts umbrechen.

12 Eine lokale Publizierung der Seite gibt Aufschluss über das Ergebnis. Das sieht schon sehr schön aus, aber der Abstand zwischen Bild und Text ist mir noch zu gering. Wir schließen das Browserfenster und kehren zu NOF zurück.

13 Wir legen nochmals eine Formatvorlage an - in meinem Falle AbstBildLinks - definieren über den Reiter Absatz die Ränder und Einzüge und bestätigen unsere Einstellungen mit OK.

14 Leider verfügt NOF über keine Möglichkeit, einem Bild über die EP eine CSS-Klasse zuzuweisen. Deshalb müssen wir diese Klasse nun von Hand zuweisen. Dazu markieren wir das Bild und klicken auf der EP den HTML- Button an.

15 Es öffnet sich ein Fenster und wir aktivieren den Reiter Im Tag. Im unteren Teil des Fensters geben wir nun folgenden Code ein: class= AbstBildLinks Wir bestätigen wieder mit OK und haben dem Bild somit die Formatvorlage zugewiesen.

16 Von dieser Formatierung sehen wir allerdings in der Arbeitsansicht nichts und kontrollieren das Ergebnis deshalb mit einer weiteren lokalen Publizierung dieser Seite. Super!

17 Zurück in der Arbeitsansicht von NOF, schiebe ich nun mein aufgeschobenes Layout wieder zusammen, indem ich in der EP unter Höhe wieder eine 1 eingebe und diese Eingabe 2 mal mit Enter diese Eingabe bestätige.

18

19 FERTIG!

20 Ich hoffe, es hat gefallen und ich konnte helfen, NOF ein wenig besser zu verstehen und zu beherrschen. mccolor - Webdesign