Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Tutorial: Detailseite Sonderauftritt

Detailseiten bestehen üblicherweise hauptsächlich aus Text- und Bildinhalten in einer Section. Es können aber auch mehrere section bzw. wm-section-Tags auf einer Seite eingebunden werden. Neben Text- und Bildinhalten können prinzipiell auch andere Patterns eingebunden werden.

Der Unterschied zu klassischen wien.gv.at-Seiten ist grundsätzlich konzeptioniell (siehe Strategie Sonderauftritte), wobei hier nur auf die unterschiedliche Implementation eingegangen wird. Sonderauftritte haben einen anderen Header und ein anderes Menü. Die CSS-Klasse wien auf dem html-Tag wird auf Sonderauftritten nicht benötigt.

Der Aufbau der Seite und des head-Elements wird auf der Seite "Erste Schritte" erklärt.

Das Ergebnis dieses Tutorials ist diese Template-Seite.

Schritt-für-Schritt Anleitung

  1. HTML Grundstruktur erstellen:

    Erstellen Sie die Grundstruktur des HTML-Dokuments mit den notwendigen Meta-Tags und dem Titel.

    <!DOCTYPE html>
      <html lang="de">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Seitentitel | Stadt Wien</title>
          <!-- ...Head... -->
        </head>
        <body>
          <!-- ...Hauptinhalte Seite... -->
        </body>
      </html>
  2. Der Skip-Link

    Wir starten mit dem 1. Element auf der Seite (innerhalb des body-Tags), dem Skip-Link. Dieser ermöglicht es Keyboard-Nutzer*innen, den Header zu überspringen und direkt zum Hauptinhalt zu springen. 

    <div class="wm-skip-link wm-h-vh">
      <a href="#content" class="wm-e-button">
        Zum Inhalt springen
      </a>
    </div>
    Zum Inhalt springen
    Beispiel: Skip-Link
  3. Header hinzufügen:

    Fügen Sie den Header mit dem Seitentitel und dem Stadt Wien Logo und Menü hinzu.

    <wm-header>
  <div>
    <a href="#">Seitentitel</a>
    <a href="/">
      
  <svg viewBox="0 0 311 142" width="80" role="img" aria-labelledby="site-logo1">
    <title id="site-logo1">Startseite wien.gv.at</title>
    <path fill="#FF0000" d="M55.3 53.6V15.3H14.2c0 13.3 1 26.2 2.9 38.3h38.2zM55.3 65.7h-36c6.9 32.7 20.2 57.1 36 62.2V65.7zM67.3 53.6V15.3h41.1c0 13.3-1 26.2-2.9 38.3H67.3zM67.3 65.7h36c-6.9 32.7-20.2 57.1-36 62.2V65.7z"></path>
    <path fill="currentColor" d="M153.5 65.2c-2.4 0-4.7-.3-6.9-1s-4.4-1.7-6.6-3.1l1.3-8.4h.3c2.1 1.6 4.1 2.7 6.2 3.3 2.1.6 4 .9 5.7.9 5 0 7.5-1.9 7.5-5.6 0-1.3-.4-2.5-1.1-3.5-.7-1-2-2.1-3.8-3.1l-6-3.4c-3.5-1.9-5.9-4-7.4-6.2s-2.2-4.7-2.2-7.4c0-4.2 1.4-7.5 4.2-9.9 2.8-2.4 6.6-3.6 11.3-3.6 4.3 0 8.3 1.1 11.9 3.2l-1.3 8.1h-.3c-1.4-1-3-1.7-4.9-2.2-1.9-.5-3.6-.7-5.3-.7-4.4 0-6.6 1.7-6.6 5 0 1.2.4 2.3 1.1 3.3.8 1 2.2 2.1 4.4 3.3l5.3 2.9c3.3 1.8 5.8 3.8 7.3 6s2.3 4.8 2.3 7.8c0 4.5-1.5 8-4.5 10.6-2.8 2.5-6.8 3.7-11.9 3.7zM183.8 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6H188v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10zM209 64.6c-3.2 0-5.7-.8-7.5-2.5-1.9-1.7-2.8-4-2.8-7.1 0-3.1 1.1-5.5 3.2-7.3 2.2-1.8 5.1-2.8 8.8-3.2l9.1-.9v-.1c0-1.8-.5-3.1-1.5-4-1-.9-2.8-1.4-5.4-1.4-1.9 0-3.9.2-5.9.7-2 .5-3.6 1-4.8 1.6h-.4l1.3-7.7c1.4-.6 3.1-1 5.1-1.5 2-.4 4.2-.6 6.4-.6 4.9 0 8.5 1.1 10.8 3.4 2.3 2.3 3.4 5.6 3.4 10v10.4c0 1.7.1 3.4.4 5 .2 1.6.6 3 1.2 4.2v.4h-8.5c-.3-.6-.5-1.5-.7-2.4-.2-1-.3-1.9-.4-2.7h-.4c-.8 1.6-2.3 2.9-4.3 4s-4.4 1.7-7.1 1.7zm-1.1-10.3c0 1 .3 1.8.9 2.4.6.6 1.7 1 3.1 1 2.3 0 4.1-.7 5.6-2s2.2-3.1 2.2-5.2v-.8l-6.9.8c-1.7.2-3 .6-3.8 1.1-.7.6-1.1 1.5-1.1 2.7zM260.9 64v-4.9h-.4c-1 1.8-2.4 3.2-4.3 4.2s-4 1.5-6.4 1.5c-2.9 0-5.4-.7-7.6-2.1-2.2-1.4-3.9-3.4-5.1-6-1.2-2.6-1.8-5.6-1.8-9 0-3.4.6-6.4 1.8-9 1.2-2.6 2.9-4.5 5.1-6 2.2-1.4 4.7-2.1 7.6-2.1 2.2 0 4.2.4 6 1.3 1.8.9 3.2 2.1 4.2 3.6h.5V15.3h9.1V64h-8.7zm-8.1-7c2.5 0 4.4-.9 5.9-2.6 1.5-1.7 2.2-4 2.2-6.7 0-2.8-.7-5.1-2.2-6.7-1.5-1.7-3.5-2.5-5.9-2.5-2.5 0-4.5.8-5.9 2.5-1.5 1.6-2.2 3.9-2.2 6.8 0 2.8.7 5.1 2.2 6.7 1.4 1.6 3.3 2.5 5.9 2.5zM284.9 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6h-6.4v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10.1zM161.6 126.1h-11c-1.1-2.4-2.3-5.4-3.5-9-1.3-3.6-2.5-7.5-3.6-11.9-1.2-4.4-2.2-8.9-3.1-13.7-.9-4.7-1.5-9.4-1.8-14.1h9.9c.3 4.3.9 8.8 1.7 13.5.8 4.7 1.7 9.2 2.8 13.7 1.1 4.4 2.2 8.5 3.4 12.2h.5l9.9-33h7.3l9.9 33h.5c1.2-3.7 2.3-7.8 3.3-12.2 1-4.4 1.9-9 2.7-13.7.8-4.7 1.3-9.2 1.7-13.5h9.7c-.3 4.7-1 9.4-1.8 14.1-.9 4.7-1.9 9.3-3.1 13.7-1.2 4.4-2.4 8.3-3.6 11.9-1.3 3.6-2.4 6.6-3.5 9h-11l-8.2-27.4h-.7l-8.4 27.4zM213.1 88.3c-1.7 0-3.1-.5-4.2-1.6s-1.6-2.4-1.6-4 .5-3 1.6-4 2.5-1.6 4.2-1.6c1.7 0 3.1.5 4.2 1.6 1.1 1 1.6 2.4 1.6 4s-.5 2.9-1.6 4c-1.1 1-2.5 1.6-4.2 1.6zm-4.6 37.8V93.4h9.1v32.7h-9.1zM241.4 126.9c-3.6 0-6.6-.7-9.2-2.1-2.6-1.4-4.6-3.4-5.9-5.9-1.4-2.6-2.1-5.5-2.1-9 0-3.6.7-6.7 2.2-9.3 1.5-2.6 3.5-4.6 6-5.9 2.6-1.4 5.5-2.1 8.7-2.1 4.8 0 8.5 1.5 11.2 4.4 2.7 2.9 4 7 4 12.2v2l-22.5 2.5c.6 2 1.7 3.4 3.2 4.2 1.6.8 3.5 1.2 5.7 1.2 2.1 0 4.2-.3 6.4-.8 2.1-.6 3.7-1.2 4.8-1.9h.5l-1.3 7.8c-1.2.6-2.9 1.2-5.1 1.8-2.1.6-4.3.9-6.6.9zm-.5-27c-2 0-3.7.6-5 1.9-1.3 1.2-2.1 3.1-2.4 5.6l13.9-1.6c-.3-2-1-3.5-2.1-4.4-1.3-1-2.7-1.5-4.4-1.5zM262.6 126.1V93.4h8.2V99h.4c.8-1.9 2.2-3.4 4.1-4.6 1.9-1.1 4.1-1.7 6.6-1.7 3.8 0 6.8 1.3 9 3.8s3.3 6.1 3.3 10.6v19.1h-9.1v-17.9c0-5.1-2.1-7.7-6.3-7.7-2.1 0-3.8.8-5.1 2.3-1.3 1.5-1.9 3.5-1.9 6v17.3h-9.2z"></path>
  </svg>

    </a>
  </div>
  <div>
    <wm-nav-main microsite type="hiddenmobile">
  <!-- ...verschachtelte Liste mit Links... -->
    </wm-nav-main>
  </div>
</wm-header>
  4. Hauptinhalt hinzufügen:

    Fügen Sie den Hauptinhalt der Seite hinzu, einschließlich des Titels und der Abschnitte.

    <main id="content">
        <wm-stage>
          <h1 slot="content">Tutorial: Detailseite Sonderauftritt</h1>
        </wm-stage>
        <wm-section>
          <h2>Überschrift H2</h2>
          <!-- ...Weitere Inhalte... -->
        </wm-section>
        <wm-section contentsize="text">
          <h2>Was sind Sonderauftritte</h2>
          <p>Sonderauftritte sind spezielle Microsites oder Anwendungen, die eine eigene Menüführung erfordern. Sie folgen den Corporate Design Vorgaben der Stadt Wien.</p>
          <h3>Überschrift H3</h3>
          <!-- ...Weitere Inhalte... -->
        </wm-section>
      </main>
  5. Footer hinzufügen:

    Fügen Sie den Footer mit den notwendigen Links, der Copyright-Komponente und falls gewünscht einen Button "Zum Seitenanfang" hinzu.

    <footer>
        <wm-copyright></wm-copyright>
        <wm-list type="horizontal" separator="pipe" alignment="center">
          <ul>
              <li>
                <a href="https://www.wien.gv.at/info/impressum.html">
                  <strong>Impressum</strong>
                </a>
              </li>
            
              <li>
                <a href="https://www.wien.gv.at/info/datenschutz/index.html">
                  <strong>Datenschutz</strong>
                </a>
              </li>
            
              <li>
                <a href="https://www.wien.gv.at/info/barrierefreiheit.html">
                  <strong>Barrierefreiheit</strong>
                </a>
              </li>
            </ul>
        </wm-list>
        © Stadt Wien, Rathaus, A-1010 Wien
        <!-- Scroll to top Button -->
        <wm-button kind="secondary" round id="wm-button-to-top">
          <a class="wm-e-button" href="#totop">
            <wm-icon iconid="chevron-up" width="28">Zum Seitenanfang</wm-icon>
          </a>
        </wm-button>
      </footer>
  6. Live-Region und Modal Wrapper hinzufügen:

    Fügen Sie die Live-Region und den Modal Wrapper hinzu.

    <!-- Live-Region -->
<div role="status" class="wm-h-vh"></div>
<!-- Wrapper für Modals -->
<wm-modal></wm-modal>
Gesamtes HTML anzeigen 
<!DOCTYPE html>
<!-- Natürliche Sprache des Dokuments. Anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<!-- Die CSS-Klasse "wien" ist nur für den Standard wien.gv.at-Header notwendig!-->
<html lang="de">
  <head>
    <!-- Encoding der Seite, muss im Dokument vor dem <title> kommen -->
    <meta charset="UTF-8">
    <!-- Viewport Meta Tag für responsive Designs, muss im Dokument vor dem <title> kommen. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Seitentitel. Muss einzigartig sein. -->
    <title> | Stadt Wien</title>

    <!-- Wiener Melange Stylesheet -->
    <link rel="stylesheet" href="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">

    <!-- Font für bessere Performance vorladen -->
    <link rel="preload" href="https://assets.wien.gv.at/theme/202/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Buttons -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Button/Button.js" type="module"></script>
    <!-- CTA -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/CTA/CTA.js" type="module"></script>
    <!-- Extrahiert und zeigt Copyright-Information aus Bildern an -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Copyright/Copyright.js" type="module"></script>
    <!-- Header durch JavaScript angereichert -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Header/Header.js" type="module"></script>
    <!-- Icons -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Icon/Icon.js" type="module"></script>
    <!-- Erweitert Listen -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/List/List.js" type="module"></script>
    <!-- Modals -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Modal/Modal.js" type="module"></script>
    <!-- Hauptnavigation durch JavaScript angereichert -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/NavMain/NavMain.js" type="module"></script>
    <!-- Quicklinks -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Quicklinks/Quicklinks.js" type="module"></script>
    <!-- Stage -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Stage/Stage.js" type="module"></script>
    <!-- Sections -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Section/Section.js" type="module"></script>
    <!-- Table -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Table/Table.js" type="module"></script>
    <!-- Tags -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Tag/Tag.js" type="module"></script>
    <!-- Taglist -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Taglist/Taglist.js" type="module"></script>

    <!-- Favicon für ältere Browser -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- Alternative für favicon.ico, skalierbar und berücksichtigt Dark Mode. (Browser Support: https://caniuse.com/link-icon-svg) -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- Homescreen Icon für iOS -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!-- Kanonische URL -->
    <link rel="canonical" href="https://handbuch.wien.gv.at/development/tutorials/sonderauftritt/">

    <!-- Beschreibung der Seite, maimal 150 Zeichen lang, muss einzigartig sein. -->
    <meta name="description" content="Beschreibung der Seite">
    <!-- Farbe des UI im Browser. Anpassen oder entfernen.-->
    <meta name="theme-color" content="#75cde3">

    <!-- Seitentitel -->
    <meta property="og:title" content="Seitentitel">
    <!-- Beschreibung der Seite -->
    <meta property="og:description" content="Beschreibung der Seite">
    <!-- Absoluter Pfad zum Vorschaubild. Muss geändert werden -->
    <meta property="og:image" content="https://handbuch.wien.gv.at/images/meta.png">
    <!-- Sprache der Seite -->
    <meta property="og:locale" content="de">
    <!-- Seitentyp -->
    <meta property="og:type" content="website">
    <!-- Url der Seite. Muss geändert werden -->
    <meta property="og:url" content="https://wwww.wien.gv.at">
    <!-- Großes Vorschaubild auf X -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- Handle der Site auf X. Anpassen, entfernen oder so lassen. -->
    <meta name="twitter:site" content="@StadtWien">
  </head>
  <body id="totop">
    <div class="wm-skip-link wm-h-vh">
      <a href="#content" class="wm-e-button">
        Zum Inhalt springen
      </a>
    </div>
    <!-- Header auf jeder Seite -->
    <wm-header>
      <div>
        <a href="#">Seitentitel</a>

        <a href="/">
          
  <svg viewBox="0 0 311 142" width="80" role="img" aria-labelledby="site-logo1">
    <title id="site-logo1">Startseite wien.gv.at</title>
    <path fill="#FF0000" d="M55.3 53.6V15.3H14.2c0 13.3 1 26.2 2.9 38.3h38.2zM55.3 65.7h-36c6.9 32.7 20.2 57.1 36 62.2V65.7zM67.3 53.6V15.3h41.1c0 13.3-1 26.2-2.9 38.3H67.3zM67.3 65.7h36c-6.9 32.7-20.2 57.1-36 62.2V65.7z"></path>
    <path fill="currentColor" d="M153.5 65.2c-2.4 0-4.7-.3-6.9-1s-4.4-1.7-6.6-3.1l1.3-8.4h.3c2.1 1.6 4.1 2.7 6.2 3.3 2.1.6 4 .9 5.7.9 5 0 7.5-1.9 7.5-5.6 0-1.3-.4-2.5-1.1-3.5-.7-1-2-2.1-3.8-3.1l-6-3.4c-3.5-1.9-5.9-4-7.4-6.2s-2.2-4.7-2.2-7.4c0-4.2 1.4-7.5 4.2-9.9 2.8-2.4 6.6-3.6 11.3-3.6 4.3 0 8.3 1.1 11.9 3.2l-1.3 8.1h-.3c-1.4-1-3-1.7-4.9-2.2-1.9-.5-3.6-.7-5.3-.7-4.4 0-6.6 1.7-6.6 5 0 1.2.4 2.3 1.1 3.3.8 1 2.2 2.1 4.4 3.3l5.3 2.9c3.3 1.8 5.8 3.8 7.3 6s2.3 4.8 2.3 7.8c0 4.5-1.5 8-4.5 10.6-2.8 2.5-6.8 3.7-11.9 3.7zM183.8 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6H188v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10zM209 64.6c-3.2 0-5.7-.8-7.5-2.5-1.9-1.7-2.8-4-2.8-7.1 0-3.1 1.1-5.5 3.2-7.3 2.2-1.8 5.1-2.8 8.8-3.2l9.1-.9v-.1c0-1.8-.5-3.1-1.5-4-1-.9-2.8-1.4-5.4-1.4-1.9 0-3.9.2-5.9.7-2 .5-3.6 1-4.8 1.6h-.4l1.3-7.7c1.4-.6 3.1-1 5.1-1.5 2-.4 4.2-.6 6.4-.6 4.9 0 8.5 1.1 10.8 3.4 2.3 2.3 3.4 5.6 3.4 10v10.4c0 1.7.1 3.4.4 5 .2 1.6.6 3 1.2 4.2v.4h-8.5c-.3-.6-.5-1.5-.7-2.4-.2-1-.3-1.9-.4-2.7h-.4c-.8 1.6-2.3 2.9-4.3 4s-4.4 1.7-7.1 1.7zm-1.1-10.3c0 1 .3 1.8.9 2.4.6.6 1.7 1 3.1 1 2.3 0 4.1-.7 5.6-2s2.2-3.1 2.2-5.2v-.8l-6.9.8c-1.7.2-3 .6-3.8 1.1-.7.6-1.1 1.5-1.1 2.7zM260.9 64v-4.9h-.4c-1 1.8-2.4 3.2-4.3 4.2s-4 1.5-6.4 1.5c-2.9 0-5.4-.7-7.6-2.1-2.2-1.4-3.9-3.4-5.1-6-1.2-2.6-1.8-5.6-1.8-9 0-3.4.6-6.4 1.8-9 1.2-2.6 2.9-4.5 5.1-6 2.2-1.4 4.7-2.1 7.6-2.1 2.2 0 4.2.4 6 1.3 1.8.9 3.2 2.1 4.2 3.6h.5V15.3h9.1V64h-8.7zm-8.1-7c2.5 0 4.4-.9 5.9-2.6 1.5-1.7 2.2-4 2.2-6.7 0-2.8-.7-5.1-2.2-6.7-1.5-1.7-3.5-2.5-5.9-2.5-2.5 0-4.5.8-5.9 2.5-1.5 1.6-2.2 3.9-2.2 6.8 0 2.8.7 5.1 2.2 6.7 1.4 1.6 3.3 2.5 5.9 2.5zM284.9 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6h-6.4v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10.1zM161.6 126.1h-11c-1.1-2.4-2.3-5.4-3.5-9-1.3-3.6-2.5-7.5-3.6-11.9-1.2-4.4-2.2-8.9-3.1-13.7-.9-4.7-1.5-9.4-1.8-14.1h9.9c.3 4.3.9 8.8 1.7 13.5.8 4.7 1.7 9.2 2.8 13.7 1.1 4.4 2.2 8.5 3.4 12.2h.5l9.9-33h7.3l9.9 33h.5c1.2-3.7 2.3-7.8 3.3-12.2 1-4.4 1.9-9 2.7-13.7.8-4.7 1.3-9.2 1.7-13.5h9.7c-.3 4.7-1 9.4-1.8 14.1-.9 4.7-1.9 9.3-3.1 13.7-1.2 4.4-2.4 8.3-3.6 11.9-1.3 3.6-2.4 6.6-3.5 9h-11l-8.2-27.4h-.7l-8.4 27.4zM213.1 88.3c-1.7 0-3.1-.5-4.2-1.6s-1.6-2.4-1.6-4 .5-3 1.6-4 2.5-1.6 4.2-1.6c1.7 0 3.1.5 4.2 1.6 1.1 1 1.6 2.4 1.6 4s-.5 2.9-1.6 4c-1.1 1-2.5 1.6-4.2 1.6zm-4.6 37.8V93.4h9.1v32.7h-9.1zM241.4 126.9c-3.6 0-6.6-.7-9.2-2.1-2.6-1.4-4.6-3.4-5.9-5.9-1.4-2.6-2.1-5.5-2.1-9 0-3.6.7-6.7 2.2-9.3 1.5-2.6 3.5-4.6 6-5.9 2.6-1.4 5.5-2.1 8.7-2.1 4.8 0 8.5 1.5 11.2 4.4 2.7 2.9 4 7 4 12.2v2l-22.5 2.5c.6 2 1.7 3.4 3.2 4.2 1.6.8 3.5 1.2 5.7 1.2 2.1 0 4.2-.3 6.4-.8 2.1-.6 3.7-1.2 4.8-1.9h.5l-1.3 7.8c-1.2.6-2.9 1.2-5.1 1.8-2.1.6-4.3.9-6.6.9zm-.5-27c-2 0-3.7.6-5 1.9-1.3 1.2-2.1 3.1-2.4 5.6l13.9-1.6c-.3-2-1-3.5-2.1-4.4-1.3-1-2.7-1.5-4.4-1.5zM262.6 126.1V93.4h8.2V99h.4c.8-1.9 2.2-3.4 4.1-4.6 1.9-1.1 4.1-1.7 6.6-1.7 3.8 0 6.8 1.3 9 3.8s3.3 6.1 3.3 10.6v19.1h-9.1v-17.9c0-5.1-2.1-7.7-6.3-7.7-2.1 0-3.8.8-5.1 2.3-1.3 1.5-1.9 3.5-1.9 6v17.3h-9.2z"></path>
  </svg>

        </a>
      </div>
      <div>
        <wm-nav-main microsite type="hiddenmobile">
          <ol>
            <li>
              <a href="/#ebook">
                eBook
              </a>
              <ol>
                <li>
                  <a href="/#ebook">Übersicht</a>
                  </li>
                <li>
                  <a href="/#ebook">eBook 1</a>
                </li>
                <li>
                  <a href="/#eBook">eBook 2</a>
                </li>
                <li>
                  <a href="/#emagazine">eBook 3</a>
                </li>
              </ol>
            </li>
            <li>
              <a href="/#eaudio">
                eAudio
              </a>

              <ol>
                <li>
                  <a href="/#eaudio">
                  Übersicht</a>
                </li>
                <li>
                  <a href="/#ebook">eAudio 1</a>
                </li>
                <li>
                  <a href="/#eaudio">eAudio 2</a>
                </li>
                <li>
                  <a href="/#emagazine">eAudio 3</a>
                </li>
              </ol>
            </li>
            <li>
              <a href="/#emagazine">
                eMagazine
              </a>
              <ol>
                <li>
                  <a href="/#emagazine">
                  Übersicht</a>
                </li>
                <li>
                  <a href="/#ebook">eMagazine 1</a>
                </li>
                <li>
                  <a href="/#eMagazine">eMagazine 2</a>
                </li>
              </ol>
            </li>
            <li>
              <a href="/#ePaper">
              ePaper
              </a>
              <ol>
                <li>
                  <a href="/#ePaper">
                  Übersicht</a>
                </li>
                <li>
                  <a href="/#ebook">ePaper 1</a>
                </li>
              </ol>
            </li>
            <li>
              <a href="/#eLlarning">
              eLearning
              </a>
              <ol>
                <li>
                  <a href="/#eLlarning">
                  Übersicht</a>
                </li>
                <li>
                  <a href="/#ebook">eLearning 1</a>
                </li>
                <li>
                  <a href="/#eLearning">eLearning 2</a>
                </li>
                <li>
                  <a href="/#emagazine">eLearning 3</a>
                </li>
                <li>
                  <a href="/#emagazine">eLearning 4</a>
                </li>
                <li>
                  <a href="/#emagazine">eLearning 5</a>
                </li>
              </ol>
            </li>
          </ol>
        </wm-nav-main>
      </div>
    </wm-header>

    <!-- Hauptinhalt der Seite -->
    <main id="content">
      <!-- Titel der Seite -->
      <wm-stage>
        <h1 slot="content">Tutorial: Detailseite Sonderauftritt</h1>
      </wm-stage>

        <wm-section contentsize="text">
          <p>
              Sonderauftritte sind spezielle Microsites oder Anwendungen, die eine eigene Menüführung erfordern. Sie folgen den Corporate Design Vorgaben der Stadt Wien.
          </p>

          <ul>
              <li>Header: Links der Name, rechts das Stadt Wien Logo</li>
              <li>Logo verlinkt auf wien.gv.at</li>
              <li>Eigener Menübalken, optional mit Suche</li>
              <li>Menü kann in Corporate Design Farben eingefärbt werden</li>
              <li>Maximal 5 Menüpunkte, Titel-Länge bis 21 Zeichen</li>
          </ul>

          <h2>Scrollverhalten</h2>
          <ul>
              <li>Beim Scrollen nach unten wird der Header kleiner</li>
              <li>Beim Scrollen nach oben wird der Header wieder größer</li>
          </ul>

          <h2>Varianten Header</h2>
          <h3>"Minimal"</h3>
          <ul>
              <li>Kein Login</li>
              <li>Keine Suchfunktion</li>
              <li>Keine Sprachwahl</li>
          </ul>

          <h3>"Alle Funktionen"</h3>
          <ul>
              <li>Sprachwahl, Login, Suche sichtbar</li>
          </ul>

          <h3>"Suche"</h3>
          <ul>
              <li>Eigene Suche als Icon im Menü</li>
              <li>Direktes Suchfeld möglich, wenn Platz</li>
          </ul>

      </wm-section>
    </main>

    <!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
    <footer>
      <!-- Copyright-Information wird aus Bildern extrahiert und automatisch hier angezeigt-->
      <wm-copyright></wm-copyright>
      <!-- Weiterführende Links -->
      <wm-list type="horizontal" separator="pipe" alignment="center">
        <ul></ul>
      </wm-list>
      © Stadt Wien, Rathaus, A-1010 Wien

      <!-- Scroll to top Button -->
      <wm-button kind="secondary" round id="wm-button-to-top">
        <a class="wm-e-button" href="#totop">
          <wm-icon iconid="chevron-up" width="28">Zum Seitenanfang</wm-icon>
        </a>
      </wm-button>
    </footer>

    <!-- Live-Region -->
    <div role="status" class="wm-h-vh"></div>
    <!-- Wrapper für Modals -->
    <wm-modal></wm-modal>
  </body>
</html>

Das Ergebnis dieses Tutorials ist diese Template-Seite.

Weitere Tutorials

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at