Die Formatierungen im Cascading Style Sheet

Als nächstes öffnen wir nun das bereits vorhandene CSS basic.css im Ordner "css" und legen die Fensteransicht so fest, damit wir links den HTML-Code der eben erstellten index.html sehen.

css-1

Nun klicken wir im CSS-Editor auf das unterste CSS "a:active" und anschliessend oben auf das #-Symbol "Stil für eindeutige Elemente".

css-2

Diesen benennen wir mit "container". Es sollte nun also unterhalb "a:active" ein neuer Stile "#container"aufgelistet sein. Nun wechseln wir im CSS-Editor auf das Register "Blockeigenschaften" und legen dort die Breite der effektiven Webseite auf 871px fest. (Im unteren Screenshot ist der Wert von 853px falsch eingetragen - also bitte nicht beachten!)

css-3

Unter dem Register Aussen- und Innenrandeigenschaften legen wir bei "Aussenabstand" "rechts" und "links" die Werte "auto" fest.

css-4

Anschliessend wechseln wir auf den Ritter "Hintergrundeigenschaften" wählen bei "Bild" den Wert "URL" und danach können wir das Hintergrundbild bg_container.jpg verknüpfen sowie bei "Wiederholen" den Wert "Vertikal" vergeben.

css-5

Als nächstes legen wir die Eigenschaften für den DIV "top" fest. Wir erstellen wiederum einen "Stile für eindeutige Elemente" benennen diesen mit "top" legen unter "Blockeigenschaften die Grösse fest. Breite 100% und Höhe 126px. Dies ist die Grösse der Grafik top.jpg, welche sich im Ordner "medien" befindet.
Erstelle in gleicher Weise die Eigenschaften für navi:


Erstelle in gleicher Weise die Eigenschaften für den DIV "navi":
Blockeigenschaften: Breite - 820px. Höhe 33px. Aussenabstand rechts 25px und links 26px.
Hintergrund: bg_navi.jpg - Wiederholen "Horizontal"

Weshalb eine Breite von 820px? Der Container hat eine Breite von 871px. Wir haben links und rechts je einen andersfarbigen Rahmen von 25px bzw. 26px. 820px + 25px + 26px = 871px.

Für den DIV "img_row" sind folgende Einstellungen zu vergeben:
Breite 820 px; Höhe 150 px; Aussenabstände Oben 30px, Rechts 25px und Links 26px.
Die 30px Abstand von oben bezwecken den Abstand zwischen der Navigation und den Bildern.

Der DIV "content" hat folgende Eigenschaften:
Beim Register Schrifteigenschaften (A) eine Zeilenhöhe von 1.5em. Somit erreichen wir eine bessere Weite zwischen den einzelnen Zeilen. Bei den Blockeigenschaften vergeben wir die Breite von 620px.
Bei Aussen -und Innenrandeigenschaften:
Aussenabstand Oben 50px, Rechts 25px und Links 26px.
Innenabstand Rechts und Links je 100px. Somit haben wir von Links und Rechts einen schönen Abstand, den du natürlich beliebig variieren kannst. Denke aber daran, dass bei einer Veränderung des Innenabstandes auch immer wieder die Breite unter den Blockeigenschaften angepasst werden muss. Inklusive allen Abständen darf es den Wert von 871 Pixel nicht übersteigen.

Zuletzt haben wir noch den DIV "bottom":
Im Register "Texteigenschaften" geben wir die Textausrichtung "Zentriert" vor. Bei Blockeigenschaften die Breite 820px.
Bei Aussen -und Innenrandeigenschaften:
Aussenabstand rechts 25px, Rechts 26px. Innenabstand Oben 30px und Unten 15px (hiermit wird zwischen der Fusszeile und dem Browserrand ein Abstand erstellt).

Hiermit haben wir die Formatierungen der Layer abgeschlossen. Da wir aber noch keinen Inhalt in den Layern haben, ist in der Seite leider noch nicht sehr viel aussagekräftiges auszumachen. Doch im nächsten Teil sieht es dann ganz schnell einmal etwas anders aus!

Wenn wir die Startseite "index.html" nun im Layout-Editor öffnen, sollte die Ansicht etwa so sein:

layout_ansicht_o_Inhalt

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/

Aktuell

PDF / Print
pdf-standards-300x300
HDS Portalpartner
HDS Portalpartner
PBU_Logo_weiss
HDS Portalpartner
AXA_Company_logo_rgb_Graustufen
HDS Portalpartner
callas_grau