lehrkraefte:blc:informatik:glf22:web-tech:layout

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
lehrkraefte:blc:informatik:glf22:web-tech:layout [2023/05/09 07:48]
Ivo Blöchliger
lehrkraefte:blc:informatik:glf22:web-tech:layout [2023/05/09 13:47] (current)
Ivo Blöchliger [Entwurf im Raster]
Line 1: Line 1:
 ====== Page Layout ====== ====== Page Layout ======
 +===== Entwurf im Raster =====
 +
 <WRAP todo> <WRAP todo>
 Erstellen Sie auf Papier (oder dem Tablet) eine Skizze Ihrer Webseite, mit mindestens folgenden Elementen: Erstellen Sie auf Papier (oder dem Tablet) eine Skizze Ihrer Webseite, mit mindestens folgenden Elementen:
Line 8: Line 10:
 Die Elemente sollen in einem einfachen Raster ausgelegt werden.  Die Elemente sollen in einem einfachen Raster ausgelegt werden. 
  
-Wer eine Herausforderung sucht, kann das Raster auch komplizierter machen, so dass sich einzelne Inhaltsblöcke über mehrere Zeilen und/oder Spalten erstrecken. Schauen Sie sich dazu kurz die Bilder auf [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf22:web-tech:css|dieser Webseite]] an, um einen Eindruck zu kriegen.+Wer eine Herausforderung sucht, kann das Raster auch komplizierter machen, so dass sich einzelne Inhaltsblöcke über mehrere Zeilen und/oder Spalten erstrecken. Schauen Sie sich dazu kurz die Bilder auf [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung|dieser Webseite]] an, um einen Eindruck zu kriegen.
  
 Ein extremes Beispiel dafür wird hier vorgestellt: https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870 Ein extremes Beispiel dafür wird hier vorgestellt: https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870
 </WRAP> </WRAP>
 +
 +===== Start und Upload =====
 +
  
 <WRAP todo> <WRAP todo>
Line 26: Line 31:
   * Testen Sie in dem Sie in Ihr Verzeichnis navigieren: https://ofi.tech-lab.ch/2023/2hW/   * Testen Sie in dem Sie in Ihr Verzeichnis navigieren: https://ofi.tech-lab.ch/2023/2hW/
 </WRAP> </WRAP>
 +
 +===== Erstes Layout der Elemente =====
  
 <WRAP todo> <WRAP todo>
Line 34: Line 41:
   * Testen.   * Testen.
 </WRAP> </WRAP>
 +===== Tipps zum Testen und Fehlersuche =====
  
 <WRAP info> <WRAP info>
  • lehrkraefte/blc/informatik/glf22/web-tech/layout.1683611307.txt.gz
  • Last modified: 2023/05/09 07:48
  • by Ivo Blöchliger