df-edv.de > Service > Berichte > Microsoft Office 2010 > Webseitenentwurf mit Microsoft VISIO erstellen

Visio für den Webseiten-Entwurf

  

Visio LogoNach der Entscheidung für ein bestimmtes Gestaltungsraster – das heißt die grundsätzlichen Aufteilungen in Bereiche für Kopf, Fuß, Spalten und so weiter – stellt sich die Frage nach der konkreten Umsetzung und des zu verwendendem Modells. Eines davon ist das sogenannte Grid-Modell, bei dem die Seite in mehrere gleichmäßig breite Spalten aufgeteilt wird. Es gibt 12er-, 16er-, 24er- Grid-Modelle, die sich entweder auf eine  feste Gesamtbreite beziehen, oder in Abhängigkeit der Fenstergröße variable Breiten berücksichtigen.

Für meinen Entwurf habe ich mich auf ein 960-Grid mit 12 Spalten entschieden. Alle Inhalte sind in <DIV>-Container untergebracht, die über eine CSS-Klassenzuweisung „g1“ … „g12“ eine definierte Breite erhalten. Das 960-Grid mit 12 Spalten ergab sich aus verschiedenen Versuchen und Entwürfen, die mit Visio erstellt wurden.

Visio bietet bei den Seiteneigenschaften die Möglichkeit mit der Punkt-Maßeinheit zu arbeiten. Dementsprechend wurde für das Zeichenblatt eine Breite von 1024 Pixeln (Punkt) gewählt, da ich von einer Monitorauflösung von 1024 Pixeln in der Breite als Standard ausgegangen bin.

Nach Abzug der Breite für Rahmen und Bildlaufleisten, stehen für die Gestaltung des Inhalts die sich aus dem Grid ergebenden 960 Pixel zur Verfügung. Eine Gesamtbreite von 960 Pixeln hat zudem den Vorteil, dass die Zahl auch durch 2, 3, 4 und  6 teilbar und somit für verschiedenste Kombinationen von Text- und Objektspalten geeignet ist.

Screenshot Seite einrichten

Es könnte entgegnet werden, dass die Auflösung von 1024 Pixeln nicht mehr Zeitgemäß ist, da heutige Monitore mit Pixelbreiten von 1280 oder 1920 (Full-HD Auflösung) immer gebräuchlicher werden. Ich habe mir auch länger überlegt, ob ich eine höhere Auflösung und eine Wide-Screen Seitenaufteilung wählen soll. Da aber noch einige Monitore mit der klassischen 1024er-Auflösung im Einsatz sind, war dies mein „Obergrenze“ (die „alte“ df-edv.de Website war noch von dem 800 x 600er-Standard ausgegangen). Zudem werden so auch kleinere Ausgabegeräte berücksichtigt, wie Tablets, Netbooks oder manche Smartphones, die  - heute, Ende 2011 - mit 1024 Pixeln arbeiten. Auch auf kleineren Monitoren  kann die Website somit in originärer Auflösung und Umbruch anzeigt werden. Grundsätzlich wird  darüber hinaus bei einer Gestaltung mit <DIV>-Elementen und verschiedene CSS-Dateien für Screen und Mobilgeräte ein flexibler Umgang prinzipiell ermöglicht.

Möglich wäre auch eine variable Variante  die verschiedene CSS-Dateien in Abhängigkeit der Monitorauflösung einsetzen. Dies schränkt die Flexibilität allerdings an anderer Stelle wieder ein und erfordert JavaScript und Browser- bzw. Geräteweichen.

An einer weiteren Stelle der Dateieigenschaften der Visio-Zeichnung können Hintergrundseiten definiert werden. Diese beinhalten feste Bestandteile wie den Seitenkopf und können als zusätzliche Ebene den eigentlichen Zeichenblättern zugefügt wird. Die Hintergrundblätter können zudem aufeinander aufbauend miteinander kombiniert werden.

Screenshot Seite einrichten

Somit können Hintergründe sehr flexibel ein- und ausgeblendet werden:

Seitenentwurf mit Visio

Screenshot Seitenentwurf 1

Screenshot Seitenentwurf 2

So lassen sich verschiedene Gestaltungsvarianten ausprobieren und beliebig verschieben.

Ressourcen Grid

Rund um das Grid-System finden sich verschiedene interessante Webseiten.

Einen allgemeinen Überblick über das Grid-System im Allgemeinen und eine Vorstellung verschiedener Webseiten zum Thema bietet der Blog www.elmastudio.de

Auf 960.gs können Grid-Raster über Screenshots von verschiedenen Webseiten gelegt werden, um den Effekt und die Gestaltungsmöglichkeiten direkt nachvollziehen zu können. Auf einer Demoseite werden die verschiedenen Breiten innerhalb des Grid dargestellt. Klasse auch die fertigen Vorlagen für Photoshop, InDesign, Illustrator, Corel, Flash… und eben auch für Visio und natürlich das Tool zum Erstellen der individuellen CSS-Datei.

Eindrucksvoll auch die Demoseite zum Fluid 960 Grid System, welches über die verbreiteten Mootools ein dynamisches Grid ermöglichen: designinfluences.com/fluid960gs. Gezeigt wird hier auch die Ansicht ohne Mootool, wenn JavaScript deaktiviert ist.

Weitere Unterstützung durch VISIO

Bei der Konzeption der Website unterstützt Visio auch bei der Entwicklung Seitenstruktur, bzw. bietet einen Assistenten, der aus einer bestehenden Domain die Seitenstruktur ausliest.

 Screenshot Webseitenübersicht 

Lesen Sie auch Teil 1: Vektorgrafiken und Logos mit VISIO erstellen

  

Inhalt

 

Training und Support

Visio 

 

Weitere Informationen 

Zusätzliche Informationen sowie regelmäßige Berichte und Artikel zu den Neuerungen rund um Microsoft Office und Windows auf unserem Blog:

 

blog.df-edv.de

 

Nachgefragt

 

FAQ - Office 2010