Layout der Seite gestalten

Seiten-Layout Aufbau

Eine Wiki-Webseite wird in diverse verschachtelte Bereiche aufgeteilt. Um die einzelnen Bereiche per CSS oder JavaScript ansprechen zu können, werden den Bereichen HTML-Id vergeben (Klassen in Klammern):

Layout-Root (editMode|notEditMode [limitWidth])

  Layout-HeaderSection (headerSection pageSection)

    Layout-HeaderFrame (pageFrame)

      Layout-BrandingPart (brandingCol)
        Layout-Branding (branding)
      end Layout-BrandingPart

      Layout-NavigationPart (pagenavCol)

      Layout-SearchPart (searchformCol)

    end Layout-HeaderFrame

    Layout-SiteMenubar (sitemenu)

    Layout-HeaderTextAndImage (headertext)

  end Layout-HeaderSection

  Layout-MainSection (contentSection pageSection)

    Layout-MainFrame (pageFrame|fullScreenFrame)

      SidebarOnOffButtons
        SidebarOffButton (sidebarOnOffButton [hide])
        SidebarOnButton (sidebarOnOffButton [hide])
      TextareaOnOffButtons
        TextareaOffButton (sidebarOnOffButton [hide])
        TextareaOnButton (sidebarOnOffButton [hide])

      Layout-ContentPart (layoutCol75)

        WikiPage (WikiPage)

          <h1>Page-Name</h1>

          Wiki (Wiki)
            // page content
          end Wiki

        end WikiPage

      end Layout-ContentPart

      Layout-SidebarPart (layoutCol25)

        Layout-SidebarItems (sidebarItems)
          WikiFunctions (sidebarItem)
          FirstSbItem (sidebarItem)
          PageDir (sidebarItem)
          MainDir (sidebarItem)
          LastSbItem (sidebarItem)
          SbBox<i> (sidebarItem)
        end Layout-SidebarItems

      end Layout-SidebarPart

    end Layout-MainFrame

    Layout-FooterSection (footerSection pageSection)

      Layout-FooterFrame (pageFrame)
        // footer content
      end Layout-FooterFrame

    end Layout-FooterSection

  end Layout-MainSection

end Layout-Root

Durch dynamisches Zuweisen von Klassen per JavaScript kann das Layout der verschiedenen Bereiche manipuliert werden. Zum Beispiel durch Zuweisung der Klasse hide zu einem Bereich kann dieser ausgeblendet werden.