Die horizontale Hauptnavigation

Nun fehlt uns noch die Hauptnavigation und die Fusszeile, welche ja eigentlich wiederum eine kleine Navigation darstellt.

Damit wir möglichst wenig Arbeit haben, erstellen wir diese Bereiche als Komponenten und fügen diese dann in die Seiten ein.

Gehe also auf Datei - Web - Seiten - Komponentenseite und lösche den vorhandenen Text. Schreibe die Navigationspunkte Home, Katze, Nashorn, Hund und Tiger hinein, wobei du nach jedem (auch nach Tiger) Navigationspunkt eine Zeilenschaltung ("Enter" oder auch "harter Zeilenumbruch" genannt) machst. Markiere diese und klicke das Icon "Nicht nummerierte Liste" an.

Der letzte Zeilenumbruch dient dazu, damit auf der rechten Seite des Navigationspunktes "Tiger" eine weisse Linie angezeigt wird.

4-01_Liste

Danach gehen wir auf Datei - speichern und geben der Datei den Namen "navi.html". Automatisch wird als Speicherort das richtige Verzeichnis "Komponeten" vorgeschlagen.

Im Dateimanager können wir nun unter dem Register "Extras" im Ordner "Komponenten" die "navi.html" ausmachen.

4-02_komponente

Im Dateimanager können wir nun unter dem Register "Extras" im Ordner "Komponenten" die "navi.html" ausmachen.

4-03_extras

Ebenfalls sehen wir die "navi.html" auch in der Palette "Bibliothek" beim Register Komponenten im Ordner "snowball.site". Sollte diese Palette noch nicht eingeblendet sein, gehe auf "Fenster - Web-Site - Bibliothek" und blende sie ein. Wir werden bei der Verwendung von Komponenten immer diese Palette verwenden.

4-04_bibliothek

Nun öffnen wir wieder die Datei basic.css, wählen den Element-Stile aus und erstellen einen neuen Element-Stile "ul". Diesem vergeben wir den Namen "#navi ul".

4-05_element-ul

Diesem Stile weisen wir nun bei den Blockeigenschaften eine Breite von 820px, sowie bei Aussen- und Innenrandeigenschaften je bei "Alle" den Wert "0" zu.
Noch einen weiteren Stile müssen wir erstellen: den Listenstile "#navi li".

  • Unter den "Text-Eigenschaften" vergeben wir bei "Textausrichtung" den Wert "Zentriert".
  • Blockeigenschaften: Breite 100px, Höhe 24px, Textumfluss "Links".
  • Aussen- und Innenrandeigenschaften: Aussenabstand Alle "0", Innenabstand Oben "9px".
  • Rand- und Umrisseigenschaften: Links "2px", Farbe "#FFFFFF" (weiss), Durchgezogen
  • Listenelement und andere Eigenschaften: Stil "Ohne"

Nun haben wir alle CSS-Eigenschaften vergeben, welche für die Hauptnavigation notwendig sind. Nun müssen wir die Komponente lediglich noch in die Datei "index.html" einfügen.

Dazu öffnen wir wiederum diese Datei und bringen auch die Palette "Bibliothek" zur Ansicht. Aus dieser Palette ziehen wir nun per Drag and Drop die Komponente "navi" in den DIV "navi" hinein und löschen den überflüssigen Text "navi".

4-06_komponente-einfuegen

Zuletzt fehlt uns noch die Fusszeile.

Auch hier erstellen wir wieder über " Datei - Web - Seiten - Komponentenseite" eine neue Komponente, welche wir "footer" benennen. Wie bereits bei der Navigation erstellen wir eine Liste, jedoch müssen wir nach dem letzten Navigationspunkt "Copyright" keinen Zeilenschaltung machen. Nun muss die neue Datei nur noch als "footer" zu den Komponenten abgespeichert werden.

Auch jetzt müssen wir wieder in die Datei basic.css um das Aussehen dieser Fusszeile zu definieren:

Dazu markieren wir den Element-Stile "#navi li" und erstellen einen neuen Element-Stile "#bottom li". Formatierungen Aussenabstand Alle "0", Innenabstand Rechts und Links je "20px", Listenelement und Eigenschaften bei Anzeige "Inline".

Natürlich kann dieser Teil auch ohne Liste formatiert werden, indem in der Komponente einfach mit nebeneinanderliegendem Text gearbeitet wird. Hier ein Beispiel:

4-07_footer

In diesem Beispiel habe ich mit Sonderzeichen gearbeitet:

4-08_Sonderzeichen

"nbsp" sind bedingte Leerzeichen. "#x25CF;" markiert den Punkt.

Nun sehen wir, dass sich die Fusszeile horizontal nicht wirklich in der Mitte befindet. Damit dies nun noch korrekt dargestellt wird müssen wir den Stile "bottom" noch etwas ändern: Und zwar ändern wir die Breite von 820px auf 871px und den Aussenabstand Rechts bzw. Links löschen wir ganz.





Damit hätten wir die erste Seite eigentlich fertig. Die Navigationspunkte können wir natürlich erst dann verlinken, wenn wir auch entsprechende Seiten erstellt haben.

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.11.2021 - 10.12.2021

Digicomp Academy AG, Zürich
Freitag, 05. Nov. 2021, 13.00 Uhr - Freitag, 10. Dez. 2021, 19.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: 3'250.– zzgl. 7.7% MWST
Dauer: 8.5 Tage (ca. 56 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB

Veranstaltungen
14.02.2022

Zürich, Online
Montag, 14. Feb. 2022, 07.30 - 18.00 Uhr

Word Press / Digitalisierung / Selbständigkeit

Digitalisierung und KMU's in der Schweiz Leistungsfähig im Zeitalter der Digitalisierung Machine Learning Künstliche Intelligenz CRM Change Management Kommunikation im Betrieb Kommunikation digitale Medien Digitale Vertriebsmodelle

Ja

Organisator: B. Isik

Kontaktinformation: B. Isik / Daniela Lovric, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/website-mit-wix-erstellen/

HDS Portalpartner
HDS Portalpartner
callas_grau
HDS Portalpartner
PBU_Logo_weiss
HDS Portalpartner
AXA_Company_logo_rgb_Graustufen