WaBis

walter.bislins.ch

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.

Weitere Infos zur Seite
Erzeugt Freitag, 2. März 2012
von wabis
Zum Seitenanfang
Geändert Freitag, 24. Juni 2016
von wabis