Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen [2023/06/25 22:41] Olaf Schnürer [Einige Anregungen] |
lehrkraefte:snr:informatik:glf22:html-css:projekt-anregungen [2024/02/15 21:57] (current) Olaf Schnürer [Einige Anregungen] |
===== Einige Anregungen ===== | ===== 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! | Empfohlenes Vorgehen: Wenn dir ein "Layout" gefällt und du es verwenden willst: Schau dir den Quell-Code genau an! |
* {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/box-layout|zum Anschauen}} | * {{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}} | * {{: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): | * **NEU**: Horizontales Menü (nur mit HTML und CSS): |
* {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/horizontales-menu|zum Anschauen}} | * {{https://fginfo.ksbg.ch/~olaf/web-projekt-vorlagen/horizontales-menu|zum Anschauen}} |
| |
* CSS Flexboxes: https://www.w3schools.com/css/css3_flexbox.asp | * 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 | * 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 | * Parallax Scrolling: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_device oder ein gutes Tutorial im Internet dazu |
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. | 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. | 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]] | * [[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]] |
* [[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]] |