jQuery für Webdesigner

HTML-Grundlayout mit CSS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert Aufbau und Struktur der CSS-Datei und liefert Erklärungen zu später benutzten Klassen für die jQuery-Programmierung.

Transkript

Schauen wir uns in diesem Video das HTML-Grundgerüst genauer an und ordnen schrittweise die Cascading-Stylesheet-Anweisungen den HTML-Objekten zu. Ich befinde mich in NetBeans und öffne jetzt einfach die Datei index.html aus dem kopierten Startordner bike-travel-scotland. So, und damit sind wir hier in dieser HTML-Datei. Ja, und ich denke, ich klappe nur mal gerade links zu, ich denke, wenn Sie sich diese Datei jetzt anschauen, fällt sofort auf, dass da nicht wirklich viel drin steht. Das ist ein sehr übersichtliches Dokument. Wir haben HTML5 und dann gucken wir uns mal den None-Bereich genauer an. Also im eigentlichen None-Bereich gibt es einen None, der die id="header" bekommt. Und der Header ist entsprechend im Moment so ausgestattet, dass eine einzige Grafik dort geladen wird. Später wird dort die Position für den Slider untergebracht. Dann haben wir einen None, den ich mit der id="main_nav" bezeichnet habe. Und das entspricht dem Hauptmenü, dem horizontal angeordneten Hauptmenü. Die einzelnen Unterklassen, die brauche ich für das Ansprechen der Cascading Style Sheets und damit wir den Hover-Effekt et cetera erzeugen können. Hier fällt auf: Ich habe Ihnen verschiedene Menüpunkte dort untergebracht. Und zwar finden Sie hier einen Link, der mit goo.gl, also einem Link-Shortener, gekürzt wurde. Der Grund ist einfach der: Ich möchte das Dokument übersichtlicher halten, damit wir uns auf das HTML konzentrieren und nicht auf solche langen Hyperlinks, die hier drin stehen, und das ist der Grund, warum ich das verwendet habe. Hier unten das Impressum, das ist mit der Raute einfach hinterlegt, das hat überhaupt keinen Link. Alle anderen aber, hier unten, sehen Sie, sind hinterlegt. Und vielleicht interessieren Sie sich ja mal für das schottische Nationalgericht Haggis, und dann können Sie sich im Wikipedia darüber ein klein wenig informieren. Und für die anderen, wie Grouse oder Kilmeny Kail, hab ich Ihnen sogar Rezeptanweisungen hinterlegt. Also: Es ist spannend. Gut, gehen wir in die main_nav zurück. Also, das war das horizontale Menü. Dann folgt auf dem horizontalen Menü in der gleichen Ebene der content_wrapper. Ich klicke auf den Befehl None mit NetBeans und dann wird das gelb dargestellt und wenn ich jetzt nach unten scrolle, dann sehen Sie, bis wohin das geht. Das heißt also: Der gesamte untere Abschnitt, der unterhalb des horizontalen Menüs liegt, wird von dem content_wrapper eingefasst. Danach folgt das links stehende Menü, und das geht bis dorthin. Das heißt: Der content_wrapper umfasst sowohl das links stehende Menü als auch dann den gesamten unteren Teil des Fließtextes. Der Fließtext ist schnell abgehandelt: Der hat einen Layer, der die Bezeichnung id="content" hat und in dem Layer nochmal eine Klasse "entry", falls man mehrere solche Blöcke unterbringen möchte. Das links stehende Menü, das ist etwas komplexer. Das hat die id="leftmenue" und dann kommen einzelne Aufzählungs-, also nicht nummerierte Listen in HTML. Schauen wir uns das mal an in dem Webbrowser. Und hier klicke ich dann aus diesem Grund auf den Ordner bike-travel in dem Ordner htdocs. Ja, und dann sieht man hier unter Wissenswertes, dass bei Edinburgh beispielsweise castle, royal mile, parlament hier eine Einrückung stattfindet, und das ist so realisiert, dass wir also hier den Eintrag Edinburgh haben und dann danach nicht das None zugeht, (das None schließt sich hier unten) sondern neben dem normalen Texteintrag und Hyperlink haben wir dann darauffolgend eine weitere nicht nummerierte Liste. Und diese Liste beinhaltet dann die drei Menüpunkte, die Sie hier sehen oder die vier jetzt bei Schottland selber unten drunter, also, das haben wir dann an der Position. So ist das Ganze aufgebaut für das gesamte Menü, also das heißt, man hat immer, wenn man Unterpunkte möchte, direkt innerhalb des None-Tags weitere untere, nicht nummerierte Listen. Bed & Breakfast ist der einzige Eintrag, der keine hat, also keine weiteren Unterpunkte, da sieht man, da schließt sich dann auch ganz unmittelbar hinter dem Hyperlink der Aufzählungscontainer. Die ganzen Bezeichner, die habe ich bereits hier hineingesetzt und die benötigen wir nun für die Zuordnung zu dem Stylesheet. Ja, und das Stylesheet ist bereits hier oben eingebunden und muss nur noch entsprechend kommentiert oder besser gesagt neu benannt werden. So, wenn sie den Unterstrich vor style.css wegnehmen und das Dokument speichern, dann können Sie hier auch dieses HTML-Dokument im Webbrowser aktualisieren und jetzt haben wir schon ein bisschen besseres Aussehen. Also wir haben hier einen grünen Hintergrund, alles springt in die Mitte bis auf den Fließtext, den wir unten stehen haben und das ist schon mal so auch hier die Hover-Effekte, die sind schon mal drin. Schauen wir uns das ganz kurz im Browser an. So, dazu öffne ich in NetBeans die Datei style. Ich hab einfach jetzt verschiedene Dinge auskommentiert, aber Sie sehen: Hier oben gibt es für das Gesamtdokument, dann für den body, für den #header bereits Definitionen. Jetzt scrollen wir eine ganze Ecke runter. So, #content habe ich bereits drin und eben die Hyperlinks, dann die Einträge unten. Mehr ist das im Moment noch nicht, also quasi das reine Aussehen. Schauen wir uns nun an, was passiert, wenn wir die Main-Navigation freigeben und dazu kommentieren Sie bitte, schauen Sie: Da steht unter dem eigentlichen Eintrag Main-Navigation noch mal ein öffnender Kommentar, den nehme ich heraus. Jetzt scrolle ich herunter bis vor die Zeile END - Main-Navigation und lösche dort ebenfalls den schließenden Kommentar. So, das speichern wir ab, wechseln in den Browser und aktualisieren, und schon haben wir aus diesem Menü Home, Anreise, Fähren, Schottland und Impressum das horizontale Menü. Da funktioniert auch schon, wie man hier sieht, der Hover-Effekt. Der ist jetzt bisschen merkwürdig, weil normalerweise der Hintergrund später durch den Effekt hell wird. Also sieht man jetzt nicht mehr so gut, wo die Maus sich drauf befindet, aber es wird deutlich, was da passiert und so viel ist das gar nicht, denn im Wesentlichen definiere ich den #main_mav hier nur mit dem Aussehen. Ich geb ein paar Breiten an und ja, ich sag mal, der eigentliche Hover-Effekt findet dann hier statt. Das Ganze dann auch noch mal für die Gesamtdarstellung, also dass man die Hyperlinks selber formatiert, das sind diese drei Befehle, plus die Anordnung der einzelnen nicht nummerierten Listen, dass wir dort also auf jeden Fall zum Beispiel auch keine Aufzählungspunkte mehr haben et cetera. Mehr passiert bei diesem Dokument nicht. Ja, dann schauen uns den #content_wrapper an. Also: Der #content_wrapper beinhaltet nun dieses Menü als auch den Fließtext. Und in dem Moment, wenn ich den #content_wrapper freischalte, wird das entsprechend angeordnet. So, dazu gehen Sie bitte in die Zeile 70 und unterhalb des Kommentars END - Main-Navigation löschen dort den öffnenden Kommentar und dann in der Reihenfolge in Zeile 76 auch das Kommentarzeichen. Und Sie sehen, hier passiert wirklich nicht viel: margin-Befehl mit 0 auto, damit das Gesamtdokument, also der Layer, der None, in die Mitte rutscht. Den Text werde ich wieder auf links setzen, weil: Der ist hier oben an der Position hier zentriert worden. Das hat den Grund, damit wir eben eine schwebende Ebene bekommen, die immer in der Mitte des Fensters ist. Und dann setze ich das ganze Dokument noch auf 800px Breite. So, speicher ich und aktualisiere nochmal. Und dann sehen Sie: Jetzt wird das Ganze schon einigermaßen vernünftig. So, und das Ganze mache ich jetzt noch mal in Zeile 78 in der Reihenfolge und lösche das Kommentarzeichen hierunter bis vor END - … Menue und lösche auch das raus und damit wäre das schon komplett erledigt und speicher ich hab. So, und Sie sehen: Jetzt steht das Ganze so in der Anordnung, dass wir weiter damit arbeiten können. Also, es ist noch nichts Besonderes. Was wir jetzt haben, ist ein ganz normales HTML-Dokument und das #leftmenue ist halt so aufgebaut, dass wir einfach eine ganz normale Formatierung haben. Sie sehen also: Da steht nichts drin, was schwer nachzuvollziehen ist, und das ist die Basis einschließlich der ganzen Bezeichner, die wir nun für die jQuery-Programmierung heranziehen können.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!