Befüllen der ersten Seite und CSS-Anpassungen

Nun können wir damit beginnen, die Seite mit Inhalt zu befüllen und zusätzliche Formatierungen zu vergeben.

Öffne als erstes die "index.html" im Layout-Editor. Im Hintergrund ist nach wie vor der Dateimanager von GoLive offen. Öffne da den Ordner "medien" und ziehe per Drag and Drop das Bild in den Layer "top" hinein. Lösche danach den überflüssigen Text "top".

bild_in_layouteditor_ziehen

Nachfolgend ziehe die Bilder bild-1.jpg bis bild4.jpg in den Layer "img-row". Sie werden nun alle nebeneinander dargestellt. Auch hier kannst du nun den überflüssigen Text löschen.

img_row

Achte darauf, dass du im Bildinspektor bei jedem Bild! jeweils einen Alternativen Text angibst!

Bildbeschriftung

Im Layer "content" fügst du diesen Muster-Text [831] ein. Dem Titel "Home, Begrüssung, Vorstellung:" weise über die Hauptwerkzeugleiste den "Überschrift 1" zu.

hauptwerkzeugleiste

Nun möchten wir gerne, dass die vier Bilder im Verhältnis zur Seite schön ausgerichtet sind. Du magst dich vielleicht erinnern, dass die Breite des DIV's "img_row" 820px aufweist. Die vier Bilder sind je 200 px breit, verbleiben also 20px. Zwischen den Seitenränder und den Bildern je einen Abstand sind insgesamt fünf Abstände was eine Breite von 4 px ergibt.

Wir erstellen deshalb in der Datei "basic.css" einen weiteren Stile. Und zwar in diesem Falle eine Klasse für die vier Bilder. Gehe im CSS-Editor auf den untersten Stile "#bottom", und klicke oben auf den Klassenstil. Benenne die Klasse ".img". Achte aber darauf, dass der Punkt zu beginn von "img" stehen bleibt. Im Register Aussen- und Innenrandeigenschaften vergibst du einen Aussenabstand bei Links von 4px.

css-editor-klassenstile

Über "Fenster - CSS" blendest du nun die CSS-Palette ein (sofern dies nicht bereits der Fall ist). Du findest in der CSS-Palette nun einen neuen Stil "img". Markiere nun im Layout-Editor das erste Bild mit der Katze und klicke in der CSS-Palette vertikal wie horizontal "img" an.

css_bildabstand

Dies wiederholst du bei den anderen drei Bildern auch. Nun kannst du einmal zur Vorschau wechseln und du siehst, dass die Bilder nun horizontal schön aufeinander abgestimmt sind. Voraussetzung für ein richtiges Anzeigen im Browserfenster ist dabei das Abspeichern der Dateien index.html und basic.css!!!

Als nächstes wollen wir doch gleich noch die Überschrift etwas schöner gestalten. Klick deshalb im CSS-Editor den Stile "p" an (ich versuche jeweils, Element-Stiles, Klassen-Stiles und ID's gruppiert zu vergeben) und drücke mit der Maustaste etwas länger auf die spitzen Klammern (<>), womit sich ein Dropdown öffnet und du Stile "h1" auswählen kannst.

h1-waehlen

Ändere die Schriftgrösse von 2em auf 1.4 em und vergib den RGB-Farbwert 66CC33.

farbwert

Solltest du nebenbei die "index.html" noch im Layout-Editor geöffnet haben, wirst du gleich die Änderungen mitverfolgen können.

Nun möchten wir generell noch eine Schriftfamilie, den Seiten-Aussenabstand und die Hintergrundfarbe festlegen. Dazu aktivieren wir in der "basic.css" einen das Element "body", gehen auf den Ritter "Texteigenschaften" und dort ganz unten auf das Icon, wo die Schriftfamilien ausgelesen werden können.

 

css_schriftfamilie

Da wählen wir die "Verdania-Sammlung" aus. Wenn du nun noch die Schriftgrösse über die ganze Website verändern möchtest, gebe diese bei "Grösse" ein. Wir haben aber bereits im DIV "content" den vertikalen Abstand vergeben, so wäre es gut, wenn du auch dort die Schriftgrösse vergeben würdest.

Dann gehe in das Register "Aussen- und Innenrandeigenschaften" und setze bei Aussenbastand "Alle" den Wert auf "0". Hiermit erreichen wir, dass wir keinen Abstand zwischen dem Browserrand zum DIV "container" mehr haben. Unter dem Register "Hintergrundeigenschaften" wählst du das Bild bg_body.jpg aus. Weitere Eigenschaften benötigen wir nicht. Speichere die Datei basic.css ab, klicke im Dateimanager die Datei index.html an und klicke in der Hautwerkzeugleiste auf den Browser-Symbol. So kannst du deine bisher erstellte Arbeit im Browser betrachten.

In der nächsten Lektion fügen wir dann die Hauptnavigation ein.

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

HDS Portalpartner
HDS Portalpartner
PBU_Logo_weiss
HDS Portalpartner
callas_grau
HDS Portalpartner
AXA_Company_logo_rgb_Graustufen