Advanced Web Basics

Zur Klärung des Begriffs „Corporate Design“ vgl. die Definition unter http://www.typolexikon.de/c/corporate-design.html: „Englischsprachiger Terminus für die einheitliche visuelle Darstellung einer Unternehmung in den Segmenten Grafikdesign, Industriedesign, Architektur und Werbung; Visuelles Erscheinungsbild eines Unternehmens.“ Eine sehr umfangreiche Sammlung von Corporate Design Manuals bietet designtagebuch.de unter http://www.designtagebuch.de/wiki/corporate-design-manuals/. Corporate Designs und Gestaltungsdokumentationen der Universität zu Köln: „Zum Design der…

Read More Corporate Design(s) und Webauftritt der Universität zu Köln

Index.htm <!DOCTYPE html> <html> <head> <meta charset=“utf-8″> <title>Endlich Montag!</title> <link rel=“stylesheet“ href=“css/style.css“> </head> <body> <div id=“heading“> Quokkas – Die freundlichsten Tiere wo geben tut! </div> </body> </html> Style.css @import url(https://fonts.googleapis.com/css?family=Amatic+SC); html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url(„../img/bgr.jpg“); background-position: left top; background-repeat: no-repeat; background-size: cover; /* CSS…

Read More Lösungen zur Sitzung „Fullscreen-Designs und Google Fonts“

„Bilder sagen mehr als Worte“ – zeitgemäßes (2015) Webdesign stellt häufig hochaufgelöste Bilder in den Vordergrund, die von gut abgestimmtem Text begleitet werden. Eine feine Inspirationsquelle für eigene Arbeiten bieten (u.a.): http://line25.com/articles/30-websites-that-greet-you-with-a-full-screen-photo http://www.awwwards.com http://www.awwwards.com/websites/fullscreen/ http://www.awwwards.com/50-impressive-fullscreen-websites-for-your-inspiration.html https://www.thebestdesigns.com http://www.musikendres.de. Eine gute Quelle frei verfügbarer und kostenlos nutzbarer Schriftarten bietet „Google Fonts“ unter https://www.google.com/fonts.

Read More Ein paar Links und Materialien zu Fullscreen-Designs und Google Fonts

Damit Ihre Webseiten ihren Weg ins WWW finden und nicht auf Ihrem Rechner im Dornröschenschlaf verweilen, müssen Ihre Dateien unter Verwendung des FTP oder SFTP auf einen externen Server übertragen werden. Aufgabe 1 Wenn Sie mit Ihrem eigenen Rechner unter Microsoft Windows arbeiten: Bitte laden Sie sich den (S)FTP-Client „FileZilla“ von https://filezilla-project.org/download.php?show_all=1 herunter und installieren…

Read More Übungsaufgaben „Webauftritt: Webspace, SFTP, Apache & Co.“

Sie können mir Ihre Hausaufgabenlösungen gerne per Email senden (jan.wieners@uni-koeln.de). Erhalte ich von Ihnen keine Mail, gehe ich davon aus, dass Sie die Hausaufgaben bearbeitet haben und Sie keine Probleme bei der Lösung der Aufgaben hatten. Denken Sie bitte daran, Ihre Hausaufgabenlösungen zur nächsten Sitzung am 09.11.2015 mitzubringen! Aufgabe 1 Ergänzen Sie die horizontale Navigationsleiste…

Read More Hausaufgaben zum 09.11.2015

Unter http://www.w3schools.com/html/html5_semantic_elements.asp geben die w3schools einen guten Überblick über die semantischen Elemente von HTML5: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> Weitere nützliche Ressourcen: Beschreibung des Box Models: http://www.w3schools.com/css/css_boxmodel.asp Ausrichten / Umfließen von Elementen (float): http://www.w3schools.com/css/css_float.asp Farbwähler: http://www.w3schools.com/tags/ref_colorpicker.asp Ein elaborierter Farbwähler: https://color.adobe.com/de/ Hintergrund von Elementen vergeben: http://www.w3schools.com/css/css_background.asp Kostenlose Hintergrundgraphiken…

Read More Nützliche Links für die Übungsaufgaben „Ein basales Bloglayout mit CSS“

PDF-Download der Übungsaufgaben (344 KB) Aufgabe 1 Erstellen sie ein einspaltiges Webseitenlayout unter Verwendung von CSS und (u.a.) <div> Containern nach dem folgenden schematischen Vorbild: Verwenden Sie ein externes Stylesheet (z.B. in der Datei „style.css“), um die Darstellung Ihrer Website anzupassen. Bilden Sie die oben angedeuteten Seitenbereiche („logo“, „topnavigation“, etc.) über div-Container ab. Überlegen Sie…

Read More Übungsaufgaben „Ein basales Bloglayout mit CSS“

PDF-Download der Kurzübersicht (360 KB) CSS einbinden 1. Inline-Stildefinitionen <h1 style=“font-family: Helvetica; color: blue; „> Diese Überschrift wird in der Schriftart Helvetica und blau dargestellt </h1> 2. Stylesheetdefinition (z.B.) im Dokumentkopf <html><head><title>Stylesheetdemonstration</title> <style type=“text/css“> h1 { color: red; font-family: Arial; } </style> 3. Externe Stylesheets (eigene CSS-Datei) <html> <head> <title>Beispiel: Externe CSS Datei</title> <link type=“text/css“…

Read More Kurzübersicht CSS

Eine Website über die Giraffe Karl-Heinz Langhans (Gruppe A, 12:00 – 13:30 Uhr) <!DOCTYPE html> <html> <head> <!– Metainformationen –> <meta charset=“utf-8″> <meta name=“description“ content=“Eine wunderschöne Seite über Giraffen“> <meta name=“keywords“ content=“Giraffe, Tierwelt“> <meta name=“author“ content=“Jan Wieners“> <title>Giraffen – Wunder der Natur</title> <style> /* Ein Kommentar in CSS */ body { font-family: Comic Sans, Comic…

Read More Lösungen zur Sitzung “HTML, Referenzierungsarten, Metainformationen, CSS”