Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen [2023/05/22 10:40]
Olaf Schnürer [Wie man seine Website auf den Tech-Lab-Server überträgt]
+++ lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen [2024/02/15 21:57] (current)
Olaf Schnürer [Einige Anregungen]
@@ Line 18: / Line 18: @@
 ===== Einige Anregungen =====
-Als Anregung einige Beispiele für relativ einfache, aber nützliche Gestaltungsmöglichkeiten (die darin vorkommenen HTML-Elemente ''div'' und ''span'' sind weiter [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:informatik:glf22:html-css:projekt#html-elemente_div_und_span|unten]] erklärt).
+Nette Beispiele findet man hier: https://www.w3schools.com/howto/default.asp
+Als Anregung folgen unten einige Beispiele für relativ einfache, aber nützliche Gestaltungsmöglichkeiten (die darin vorkommenen HTML-Elemente ''div'' und ''span'' sind weiter [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:snr:informatik:glf22:html-css:projekt#html-elemente_div_und_span|unten]] erklärt).
 Empfohlenes Vorgehen: Wenn dir ein "Layout" gefällt und du es verwenden willst: Schau dir den Quell-Code genau an!
@@ Line 32: / Line 34: @@
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/box-layout|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:box-layout.zip|als zip-Datei zum Herunterladen}}
+  * **NEU**: Vertikales Menü (mit JavaScript):
+    * Mausklick links zum Anschauen, Mausklick rechts zum Download: {{ :lehrkraefte:snr:informatik:glf23:html-css-js:vertikales-menu-mit-javascript.html |}}
   * **NEU**: Horizontales Menü (nur mit HTML und CSS):
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/horizontales-menu|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:horizontales-menu.zip|als zip-Datei zum Herunterladen}}
+  * **NEU**: Bild als Mauszeiger:
+    * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/bild-als-cursor|zum Anschauen}}
+    * {{:lehrkraefte:snr:informatik:glf22:html-css:bild-als-cursor.zip|als zip-Datei zum Herunterladen}}
   * Per Buttons verschiedene Texte anzeigen und einfärben (abstrakt: CSS-Eigenschaften ändern mit Buttons):
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/button-steuerung-von-css-eigenschaften|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:button-steuerung-von-css-eigenschaften.zip|als zip-Datei zum Herunterladen}}
-  * Inhalte mit einem "Schalter" sichtbar machen:
+  * Inhalte mit einem "Schalter" sichtbar machen: **Gibt es mittlerweile auch direkt in HTML5: https://www.w3schools.com/tags/tag_details.asp.**((Solche Elemente heissen wohl "accordions" oder Akkordeons. Vgl. https://blog.novatrend.ch/2021/11/15/auf-und-zuklappen-von-textteilen-mit-einfachen-html5-befehlen/, wobei die Spezialeffekte bei mir nicht oder nur teilweise funktioniert haben. Auch auf W3Schools ist eine selbstgebaute Variante: https://www.w3schools.com/howto/howto_js_accordion.asp.))
     * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/inhalt-einblenden|zum Anschauen}}
     * {{:lehrkraefte:snr:informatik:glf22:html-css:inhalt-einblenden.zip|als zip-Datei zum Herunterladen}}
@@ Line 58: / Line 65: @@
   * CSS Flexboxes: https://www.w3schools.com/css/css3_flexbox.asp
-  * Schweizer Karte integrieren per ''Teilen'' und ''Einbetten'' auf https://map.geo.admin.ch/?lang=de <!-- https://help.geo.admin.ch/?ids=52&lang=de -->
+  * Schweizer Karte integrieren über die Menüpunkte ''Teilen'' und ''Einbetten'' auf https://map.geo.admin.ch/?lang=de <!-- https://help.geo.admin.ch/?ids=52&lang=de -->
   * HTML Graphics (''svg'' ist anfangs vermutlich einfacher als ''canvas'', wozu man JavaScript o. ä. braucht): https://www.w3schools.com/graphics/default.asp
   * Parallax Scrolling: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_device oder ein gutes Tutorial im Internet dazu
@@ Line 148: / Line 155: @@
 Deine Website wird sich später in einem geeigneten Unterverzeichnis von [[https://ofi.tech-lab.ch/2023/]] befinden und a priori nur aus dem Schulnetz zugänglich sein.
+<!--
+Die Erklärungen in dem folgenden Link beziehen sich teilweise auf die Schulcomputer und das Jahr 2022, sollten aber sinngemäss weiterhin stimmen.
+  * [[lehrkraefte:snr:informatik:glf22:html-css:filezille|Transfer auf Tech-Lab-Server mit Filezilla]]
+  * [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-filezilla]]
   * [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-filezilla]]
   * eventuell auch nützlich: [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-vorbereitung]]
+-->