Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Druckfunktion für einzelne Seitenbereiche erstellen  (Gelesen 1901 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Druckfunktion für einzelne Seitenbereiche erstellen
« am: 28. Januar 2014, 21:50:39 »

Wie man bestimmte Seitenbereiche einer Website zum Ausdrucken bereitstellen kann, möchte ich in folgendem Tutorial kurz erklären.

Immer wieder mal taucht die Frage danach auf, wie man nur einzelne Bereiche einer Seite ausdrucken lassen kann. Der Hintergrund dieser Frage ist meist der, dass Seiteninhalte wie Banner und Navigationsleisten für einen Ausdruck nicht relevant sind und somit unnötige Platz und Tinte verbrauchen.

Wie aber stelle ich es an, dass nur der gewünschte Bereich ohne das gestalterische Drumherum gedruckt wird? Ich habe ein wenig gegoogelt und eine - wie ich meine - recht passable Lösung gefunden. Wie das Ganze in NOF aussieht und wie es funktioniert könnt ihr anhand dieses Beispielprojekts einmal testen.

(funktioniert nicht für den Ausdruck online ausgefüllter Webformulare)
« Letzte Änderung: 29. Januar 2014, 14:11:06 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Druckfunktion für einzelne Seitenbereiche erstellen
« Antwort #1 am: 29. Januar 2014, 13:10:02 »
Der Kern des Ganzen ist ein kleines Javascript, welches den Inhalt des Druckcontainers* nach Klick auf den Druck-Button** in einer neuen leeren Seite darstellt.

Öffnet also in NOF die Seite eurer Wahl, kopiert euch den folgenden Code und fügt ihn zwischen den Head-Tags der Seite ein. (ich würde das Layout-HTML bevorzugen sofern die Druckfunktion nicht auf jeder Seite genutzt werden soll)

Code: Javascript
  1. <script type="text/javascript">
  2.    var win=null;
  3.    function printContainer(printContent)
  4.     {
  5.      win = window.open();
  6.      self.focus();
  7.      win.document.open();
  8.      win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
  9.      win.document.write('body, td { font-family: Verdana; font-size: 10pt;} h1 {font-family: Verdana; font-size: 12pt;} h2 {font-family: Verdana; font-size: 10pt;}');
  10.      win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
  11.      win.document.write(printContent);
  12.      win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
  13.      win.document.close();
  14.      win.print();
  15.      win.close();
  16.    }
  17. </script>


Das Ganze sollte in den jüngeren NOF-Versionen so aussehen...

« Letzte Änderung: 29. Januar 2014, 13:24:40 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Druckfunktion für einzelne Seitenbereiche erstellen
« Antwort #2 am: 29. Januar 2014, 13:32:36 »
* Nun kommen wir zum Druckcontainer.

Damit unser Script "weiß", welche Inhalte der Seite gedruckt werden sollen, müssten wir diese Inhalte in dem besagten Druckcontainer platzieren. Der Druckcontainer erhält die ID "printcontainer" und kann so vom Script als zu druckender Bereich erkannt werden.

Wie aber erschaffen wir diesen Druckcontainer in NOF? Das ist recht einfach.
Wir fügen in der Arbeitsansich einen neuen Layoutbereich ein und definieren diesen als unseren Druckcontainer.

Sucht euch also in der Symbolleiste das Icon zum Einfügen eines Layoutbereichs, klickt es an und zieht im Anschluss dort, wo eure Seiteninhalte erscheinen sollen einen Layoutbereich auf.

Klickt den Layoutbereich mit einem einfachen Klick an und klickt im Anschluss den HTML-Button auf eurer EP.

Im sich öffnenden Fenster fügt ihr vor dem Tag folgenden Code ein:
Code: HTML5
  1. <div id="printcontainer">

und nach dem Tag fügt ihr diesen Code ein:
Code: HTML5
  1. </div>



Mit diesen zwei Einfügungen haben wir nun den Layoutbereich zu unserem Druckcontainer gemacht. Alles was wir auf diesem Layoutbereich platzieren, wird für den Ausdruck bereitgestellt.
« Letzte Änderung: 29. Januar 2014, 13:53:03 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Druckfunktion für einzelne Seitenbereiche erstellen
« Antwort #3 am: 29. Januar 2014, 13:51:25 »
** Im letzten Schritt befassen wir uns mit dem Druck-Button.

Der Druckbutton ist in diesem Fall kein gewöhnlicher Druckbutton, denn dieser würde die normale Druckfunktion des Browsers aufrufen und die gesamte Seite zum Ausdruck anbieten. Unser Druckbutton muss also eine spezielle Funktion erhalten, mit welcher er das eingefügte Script aufruft. Auch hierfür gibt es wieder einen Codeschnipsel.

In meinem Beispielprojekt findet ihr drei verschiedene Möglichkeiten den Druck zu starten. Ich erläutere euch alle drei Varianten und ihr entscheidet euch welche ihr für euer Projekt nutzen möchtet.

---------------------------------------------------------------------------------------------------
Variante 1 - einfacher Link zum Aufruf der Druckfunktion
---------------------------------------------------------------------------------------------------
Um die Druckfunktion mittels Link auszulösen, fügt Ihr folgenden Code ins HTML eines Textfeldes ein. Wer nicht weiß, wie das geht, findet hier eine kleine Anleitung dazu.

Code: HTML5
  1. <a href="#" class="deine CSS Klasse" onclick="printContainer(document.getElementById('printcontainer').innerHTML); return false">Linktext</a>

Den Code könnt ihr wie folgt anpassen. Möchtet ihr eurem Link eine Formatvorlage zuweisen, dann könnt ihr den Namen dieser Formatvorlage an Stelle von "deine CSS Klasse" in den Code eintragen.

Der Linktext der auf eurer seite erscheinen soll muss dort eingetragen werden wo jetzt "Linktext" steht.


---------------------------------------------------------------------------------------------------
Variante 2 - Formular-Button zum Aufruf der Druckfunktion
---------------------------------------------------------------------------------------------------
Möchtet ihr statt einem Link lieber einen Formular-Button zum Aufruf der Druckfunktion nutzen dann nutzt ihr wie im vorherigen Beispiel wieder ein Textfeld. Der Code für den Button sieht wie folgt aus:

Code: HTML5
  1. <input type="button" value="Buttontext " onclick="printContainer(document.getElementById('printcontainer').innerHTML); return false">
  2. </form>

Statt "Buttontext" tragt ihr hier die gewünschte Aufschrift für euren Druck-Button ein.


---------------------------------------------------------------------------------------------------
Variante 3 - Drucker-Symbol zum Aufruf der Druckfunktion
---------------------------------------------------------------------------------------------------
Um den Druck via Drucker-Symbol auszulösen benötigt ihr zunächst eine entsprechnde Grafik. Ich habe mein Drucker-Symbol in einem Grafikprogramm einfach mit der Schriftart Wingdings 2 und der Zahl 6 erstellt und als Grafik abgespeichert.
Fügt also eure Grafik an der gewünschten Stelle ein und verlinkt diese Grafik wie folgt.

Klickt den Button "Link" auf der Eigenschaftenpalette an, trefft im sich öffnenden Fenster die Auswahl die ihr auf dem folgenden Screenshot seht und klickt dann den html-Button am unteren Fensterrand.




Es öffnet sich ein Fenster in welchem ihr den folgenden Code im Link (innen) einfügt.

Code: HTML5
  1. onclick="printContainer(document.getElementById('printcontainer').innerHTML); return false"



Bestätigt die Eingabe mit OK und beendet den Prozess mit einem Klick auf den Button "Link" rechts unten im noch offenen Fenster.

Das wars auch schon, ich wünsche viel Spaß und gutes Gelingen!  (fubar)


« Letzte Änderung: 19. Februar 2014, 23:21:48 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)