Avatar for Martin Turner

by Martin Turner  |  Mai 10, 2022

Erforschung der Website-Erstellung mit QuarkXPress 2022

Content Design

Beim Erstellen einer Website nachgeben oder nicht nachgeben

Flex ist eine Technologie, die Webelemente automatisch skaliert und neu positioniert, sodass sie auf Geräten jeder Größe und mit jeder Form funktionieren. Dies wird als responsives Webdesign bezeichnet und verwendet eine in HTML5 integrierte Funktion namens „Flexbox“. Sie müssen dies nicht wissen, um es zu verwenden. Heutzutage sind fast alle Websites „responsive“ und die meisten verwenden Flex.

Sie erkennen wahrscheinlich sofort eine der Fallstricke: Wenn das Gerät die Website neu skaliert und umformt, woher wissen Sie dann, dass die Integrität Ihres Designs erhalten bleibt?

Darauf gibt es zwei Antworten. Die erste besteht darin, auf einer Vielzahl von Geräten zu testen, zu testen und erneut zu testen. Manchmal möchten Sie vielleicht einen Schlussstrich ziehen und sagen: „Nur Smartphones, Tablets und Computer.“ Die zweite Möglichkeit besteht darin, nicht Flex zu verwenden, sondern die ältere Methode zum Erstellen einer Reihe fester Layouts. Sie können diese in QuarkXPress mit „Fixed“ statt mit „Flex“ erstellen, um Skripte in Ihre Website einzufügen, damit das Gerät automatisch die nächstgelegene Größe wählt. Dies ist auch eine Form des responsiven Webdesigns.

Wenn Sie letztendlich die absolute Kontrolle über Ihre Website haben möchten, erzielen Sie mit der Erstellung einer Reihe von Layouts mit „Fest“ das bestmögliche Ergebnis, benötigen aber auch mehr Zeit für die Erstellung und Aktualisierung.

Die meisten Websites entscheiden sich für Flex.

Wie nutzen Sie Flex auf QuarkXPress 2022?

Wenn Sie beim Erstellen eines neuen Layouts auf „Digital“ statt auf „Drucken“ klicken, erhalten Sie die Option „Fest“ oder „Flex“. Wählen Sie Flex. Sie können direkt loslegen, indem Sie Dinge erstellen und sie als Flex festlegen. Es ist jedoch besser, sie schrittweise durchzuarbeiten. Flex tut sein Bestes, um wie gedruckt auszusehen, aber es ist kein gedrucktes Dokument und verhält sich grundlegend anders.

Im Wesentlichen ist bei Flex – und den meisten Dingen in HTML5 – alles in etwas anderem enthalten, anstatt wie beim Drucken auf der Seite platziert zu werden. Wenn Sie dies im Hinterkopf behalten, wird Ihre Flex-Reise einfacher.

Der einfachste Weg, dies zu sehen, besteht darin, Fenster>Flex-Objektbrowser und Fenster>Flex-Seitenersteller zu öffnen und eine der Vorlagen auf das Hauptdokument zu ziehen. Obwohl diese Vorlagen etwas spezifisch oder sogar wählerisch erscheinen mögen, sind sie tatsächlich sehr leistungsstark und können mit den Quark-Tools, die Sie kennen, auf eine Weise angepasst werden, wie dies beispielsweise bei WordPress-Vorlagen im Allgemeinen nicht möglich ist.

Klicken Sie auf ein beliebiges Kästchen und Sie werden sehen, wie sich der Flex-Objektbrowser ändert und Ihnen zeigt, wo er sich befindet. Auf der obersten Ebene befindet sich der Root-Container und dann eine Reihe von Containern, Zeilen, Spalten und Objekten.

Im Moment müssen Sie nicht mit ihnen spielen, Sie müssen nur wissen, dass sie da sind. Das Anpassen der Vorlage wird Ihnen viel dabei helfen, eine schnelle Website zu erstellen, wenn diese nicht nur schnell, sondern auch korrekt erstellt werden muss.

Flex-Grundlagen in QuarkXPress

Zwei Arten des Website-Designs sind derzeit beliebt. Eine davon ist das traditionelle strukturierte Layout mit mehreren Seiten. Die andere Seite ist eine einzelne Seite, die Sie nach unten scrollen können. Dieser Typ ist tatsächlich einfacher zu erstellen, da Sie einfach eine sehr lange Seite mit nacheinander platzierten Elementen entwerfen. Mithilfe von QuarkXPress Flex-Vorlagen können Sie weitere Vorlagen nacheinander ziehen. Wenn es seltsam aussieht oder sich seltsam verhält, stellen Sie sicher, dass Sie nicht eines in das andere gezogen haben – der Flex-Objektbrowser zeigt Ihnen dies an.

Für das mehrseitige Layout erstellen Sie mehrere Seiten in QuarkXPress und geben ihnen dann mithilfe des Seitenlayout-Bedienfelds und durch Klicken mit der rechten Maustaste bzw. bei gedrückter Strg-Taste in den Seiteneigenschaften einen Webnamen und einen Anzeigenamen.

Der Webname Ihrer Homepage muss index.html heißen. Andernfalls wird der Browser es nicht finden. Sie können anderen Seiten beliebige Namen geben, aber bleiben Sie bei Buchstaben, Zahlen, Bindestrichen und Streifen. Die meisten Webserver unterscheiden zwischen Groß- und Kleinschreibung, am besten bleiben Sie jedoch bei der Kleinschreibung.

Wenn Sie Hyperlinks mithilfe des Hyperlink-Bedienfelds erstellen, wählen Sie „Seite“ anstelle von „URL“.

Im Übrigen können Sie jede gewünschte Interaktion über die Palette „Fenster>HTML5“ anwenden – seien Sie jedoch vorsichtig. Die Zeiten der multimedialen Interaktion auf Websites sind längst vorbei und die Menschen haben sich an die Philosophie „Weniger ist mehr“ gewöhnt. Meine persönliche Empfehlung ist, bei Buttons und YouTube-Videos zu bleiben und alles andere wegzulassen.

Vorschau und Veröffentlichung

Sie können den Griff auf der rechten Seite des Layouts verschieben, um zu sehen, wie es sich verändert, wenn sich die Form ändert, aber Sie müssen es unbedingt in einem Browser überprüfen. Am unteren Bildschirmrand befindet sich ein kleiner „Globus“, der Ihnen eine HTML-Seitenvorschau bietet. Dadurch wird die Seite in Ihrem Standardbrowser geöffnet und Sie können sehen, wie sie angezeigt wird. Links funktionieren nicht – es handelt sich um eine einzelne Seite. Um die Links zu überprüfen, öffnen Sie die Layout-Vorschau. Dadurch wird es tatsächlich als HTML5-Publikation und nicht als Website geöffnet, aber es ist kein Problem, es zu überprüfen.

Zum Veröffentlichen benötigen Sie etwas Webspace, eine URL (d. h. einen Webnamen) und einen FTP-Uploader. Als Uploader können Sie CyberDuck ausprobieren, das gegen eine Spende kostenlos ist. Dann müssen Sie nur noch „Datei“ > „Exportieren als“ > „HTML5“ wählen und die Dateien dann über CyberDuck (oder was auch immer Sie verwenden) auf Ihre Website ziehen. Solange Ihre URL bereits funktionierte, sollten Sie sie sofort sehen können. Wenn dies nicht möglich ist, überprüfen Sie, ob Ihre Homepage index.html heißt und nicht Index.html oder eine andere Variante.

Wenn Sie die URL gerade erst gekauft oder gerade erst auf Ihren Webspace verwiesen haben (fragen Sie Ihren Anbieter nach Anweisungen), dauert es in der Regel 24 Stunden, bis sie verfügbar ist.

Wann sollte Flex verwendet werden?

Mit den Vorlagen von QuarkXPress können Sie schnell eine einfache, stilvolle Website erstellen.

Für mehr Kontrolle können Sie die Site mithilfe des Flex-Layout-Blöcke-Bedienfelds und des Container-Werkzeugs in der Werkzeugpalette von Grund auf neu erstellen. Mehr Kontrolle führt natürlich dazu, dass mehr Dinge schiefgehen. Es ist wahrscheinlich am besten, zuerst mit den integrierten Vorlagen zu experimentieren. Wenn Sie mit den Flex-Layout-Blöcken und dem Container-Tool erstellen, verwenden Sie den Flex-Objektbrowser, um sicherzustellen, dass alles an der richtigen Stelle ist.

Wenn Sie jedoch über eine einfache einzelne Scrollseite oder eine kleine strukturierte Website hinaus entwickeln, ist es oft an der Zeit, das Projekt neu zu planen. Tools wie PineGrow können ein QuarkXPress-Layout in ein WordPress-Layout umwandeln (ein Drittel aller Websites und die Hälfte aller Websites mit Content-Management-Systemen verwenden WordPress). An diesem Punkt befinden Sie sich in einem großen Projekt und es ist wahrscheinlich nicht mehr effektiv, den endgültigen Code in QuarkXPress zu erstellen.

In diesem Stadium eignet sich QuarkXPress möglicherweise besser für die Entwicklung eines Prototyps (große Websites durchlaufen Monate des Prototypings, bevor sie zum Codieren bereit sind). Prototypen werden oft in PowerPoint erstellt, aber dieser Ansatz erzeugt nur flache Wireframes und es kann eine große Lücke zwischen Erwartung und Realität bestehen. Indem QuarkXPress Ihnen ermöglicht, einen Prototyp einer Flex-Website mit interaktiven Elementen zu erstellen, kann es Ihre Geheimwaffe sein, wenn es darum geht, jederzeit effektiv mit dem Programmierteam zu kommunizieren.

Sehen Sie sich das Tutorial zum Erstellen eines an„10-Minuten-Website“.

Copied to clipboard

Recent Blogs

Rationalisierung von Content-Prozessen: Eine Blaupause für CMC-Erfolg durch Wiederverwendung und Automatisierung

  • |

Automatisierung von Inhalten ist in der Pharmakovigilanz unerlässlich: Wie Quark Publishing Platform NextGen dabei hilft, einen effektiven, genauen und sicheren Vertrieb von Arzneimitteln zu gewährleisten

  • |

Kreativität ohne Grenzen:Chris Martins Reise als kreativer Innovator

  • |