Die erste Folgeseite

001_DuplizierenDie Datei "index.html" ist nun geschlossen. Im Dateimanager markieren wir diese Datei und duplizieren diese über "Bearbeiten - Duplizieren" oder mit dem Kurzbefehl. Die eben erstellte Datei "index1.html" benennen wir mit "katze.html".

Öffne diese neue Seite "katze.html" und lösche alle Bilder im DIV "img-row". Mit der Maus markiere diesen DIV und wechsle in den Quellcode. Du siehst nun, dass der ganze DIV "img-row" auch im Quellcode markiert erscheint. Somit ist der gesuchte Code über die Layoutansiht jederzeit sehr leicht zu finden.

002_code_markiert




Nun ersetzen wir "img_row" mit "subnavi" und den gleich darunter folgenden "content" mit "content_f" ("_f" für "folgende") speichern die Datei und öffnen die basic.css. Dort setzen wir den Cursor auf "#img_row" und erstellen einen neuen ID-Stil (#) dem wir den Namen "#subnavi" geben.

003_ID-erstellen

Folgende Eigenschaften weisen wir nun dieser ID (diesem DIV) zu:

  • "Blockeigenschaften" Breite 160px, sowie "Textumfluss" Links.
  • "Aussen- und Innenrandeigenschaften" bei "Innenabstand" Links und Rechts je 20px.

Danach erstellen wir unterhalb der ID "#content" die neue id #content_f" und teilen nachfolgend Eigenschaften zu:

  • "Blockeigenschaften" Breite 520px, sowie "Textumfluss" Rechts.
  • "Aussen- und Innenrandeigenschaften" bei "Innenabstand" Rechts 100px.

Mit dem Textumfluss sagen wir, wo sich der jeweilige DIV platzieren soll. Die Navigation Links - der Inhalt rechts. Wir könnten aber ohne weiteres auch den DIV "content_f" links platzieren. Ich habe in diesem Fall rechts gewählt, weil ich so nicht pixelgenau alles ausrechnen muss.

Wenn wir nun die Seite "katze.html" in der Layoutansicht betrachten, sehen wir einen schönen Durcheinander. Die Fusszeile wird ganz oben und über dem DIV "content_f" dargestellt.

004_DIV_ueber

Wenn wir dies im Firefox oder IE 7 betrachten, ist die Darstellung korrekt. Trotzdem korrigieren wir die Darstellung noch. In der basic.css gehen wir bei "#bottom" auf Blockeigenschaften und definieren bei Fortsetzung "Nach Rechts und Links". So sagen wir, dass dieser Layer auch den Inhalt der jeweiligen vorgängigen Links berücksichtigen und sich erst danach darstellen soll.

Nun lade dieses ZIP [417] runter, entpacke es und lege die beiden Bilder in das Verzeichnis "medien". Anschliessend ziehe das Bild "Katze.jpg" per Drag and Drop über den Titel, vergib dem Bild einen alternativen Text und den Titel unterhalb des Bildes ändere zu "Die Katze". Danach ändere auch gleich noch den Titel der Seite.

005_Vorschau_katze

Nun duplizierte diese Seite, benenne sie mit "hund.html" öffne diese, ersetze das Bild mit dem bild "hund.jpg" und den Titel (h1) sowie den Seitentitel mit "Der Hund".

Nun möchten wir noch die Seiten verlinken. Dazu doppelklicken wir auf die Navigation. Es öffnet sich nun die Komponente. Schliesse die Seite "hund.html" damit du nur noch die Komponente und den Dateimanager offen hast. Markiere den Navigationspunkt "Home" und ziehe im Inspektor das Werkzeug Point @ shoot auf die "index.html". Den Navigationspunkt "Katze" auf die Seite "katze.html" sowie verlinke ebenfalls den Navigationspunkt "hund.html.".

006_PointandShoot

Bei "Ziel" müssen wir nichts eintragen, bei Titel möglichst etwas Aussagekräftiges. Nun speichere die Seite ab. Hiermit wird ein Popub "Komponente wird aktualisiert" angezeigt. Dieses kannst du mit "OK" bestätigen und danach das Fenster mit der Bestätigung schliessen.

007_Komponente_aktualisiere

Nun öffne die Seite "index.html" im Browser und überprüfe das Resultat.

CSS-Formatierung der Navigation

Nun haben wir die horizontale Navigation - wenigstens zum Teil - erstellt. Diese zeigt aber für die Links die Standardwerte an. Wir möchten das Erscheinungsbild nun aber noch etwas verändern.

Deshalb öffne die Dateien "basic.css" und "index.html". Reihe die beiden Dateien so im Fenster an, damit du bei Veränderungen im CSS-Editor diese gleich auch in der Seite anschauen kannst. Damit dies funktioniert, musst du aber im Layout-Editor sein.

008_CSS-vergabe

Erstelle nun unterhalb des Stile "#navi" drei weitere ID-Stile

  • #navi a:link
  • #navi a:visited
  • #navi a:hover

"link" steht für den normalen, noch nicht angeklickten Link. "visited" ist ein bereits angeklickter oder hier besuchter Link und "hover" ist der Effekt, wenn man mit der Maus auf den Link kommt. Dabei spielt die Reihenfolge eine grosse Rolle. Wenn z.B. der "hover" vor dem "visited" kommt, wird beim Überfahren eines besuchten Links kein Hover-Effekt mehr angezeigt.

009_CSS-ElementstileWeshalb setzen wir aber nun noch "#navi" vor den Link? Wir teilen dem Link so mit, dass er nur innerhalb des DIV's "#navi" diese Einstellungen übernehmen darf. Denn es wäre ja nicht gut, wenn auch im weissen Bereich weisse Links angezeigt würden. Die Links im weissen Bereich können wir über die bereits vorhandenen Element-Stile (a:link, a:visited und a:hover) zuweisen.

Aktiviere den ersten eben erstellten Stil "#navi a:link" und nimm folgende Auszeichnungen vor:

  • Schrifteigenschaten: Farbe weiss, Stärke Fett, keine Textauszeichnung
Bei der ID "visited":
  • Schrifteigenschaften: Farbe Hex-Wert 999999, Stärke Fett, keine Textauszeichung
Bei der ID "hover":
  • Schrifteigenschaften: Farbe schwarz (oder rot), Stärke Fett, keine Textauszeichung

Unmittelbar bei der Vergabe des ersten Stils kannst du im Layout-Editor die Änderung mitverfolgen. Nun kannst du natürlich frei etwas spielen oder aber einfach einmal meine obigen Vorgaben übernehmen.

Nun kannst du das Resultat deiner Arbeit wiederum im Browser betrachten. Wenn du nun vorhin bereits einmal alle deine verlinkten Seiten im Browser betrachtet hast, wirst du lediglich die besuchte Linkfarbe angezeigt erhalten.

Natürlich können weitere Eigenschaften, wie z.B. die Hintergrundfarbe oder Linie oben und unten etc. hinzugefügt werden. Der Fantasie und den Möglichkeiten sind beinahe keine Grenzen gesetzt.

 

 


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
PBU_Logo_weiss
HDS Portalpartner
AXA_Company_logo_rgb_Graustufen
HDS Portalpartner
callas_grau