adb.study/webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

apparently they did some changes
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
adb-sh 2023-01-05 19:37:00 +01:00
parent 32605ed267
commit 7e42dfe295
14 changed files with 98 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Gruppenmitglieder.txt
View File

@ -1,5 +1,5 @@
Alban Becker
Leon Ehricht
Luca Nicolas Fleck
Niklas Minkowitsch
Lukas Pfau (730134)
Alban Becker 710985
Leon Ehricht 730492
Luca Nicolas Fleck 730096
Niklas Minkowitsch 730329
Lukas Pfau 730134

4
src/animation/animations.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animationen</title>
<title>Animationen-Einführung</title>
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/animations.css">
</head>
@ -15,7 +15,7 @@
<h1>Animationen</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>

31
src/animation/keyframes.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes</title>
<title>Animationen-Funktionen</title>
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/animations.css">
</head>
@ -15,7 +15,7 @@
<h1>Animationen</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -142,6 +142,10 @@
}
</code>
</div>
<p class="explanation">
Durch den Wert "infinit" wir die Animation unendlich oft ausgeführ.
Um die Anzahl zu begrenzen kann ansonsten einfach eine Zahl angegeben werden.
</p>
</section>
</article>
<article>
@ -175,8 +179,11 @@
Example
</p>
<p class="explanation">
Hier dreht sich die erste Animation nach rechts
(normal) und die zweite nach links (reverse).
Hier dreht sich die erste Animation nach rechts
(normal) und die zweite nach links (reverse). <br> <br>
Als Möglichkeiten gäbe es noch zur Auswahl:
<br> &emsp; - alternate - erst Vorwärts, dann Rückwärts
<br> &emsp; - alternate-reverse - erst Rückwärts und dann Vorwärts
</p>
</section>
</article>
@ -211,8 +218,13 @@
Example
</p>
<p class="explanation">
Die erste Animation bewegt sich immer gleich schnell (linear)
und die zweite am Anfang und am Ende schneller als in der Mitte (ease).
Die erste Animation bewegt sich immer gleich schnell (linear)
und die zweite am Anfang und am Ende schneller als in der Mitte (ease). <br> <br>
Andere Möglichkeiten wären: <br>
&emsp; - ease-in - die Animation startet langsam <br>
&emsp; - ease-out - die Animation endet langsam <br>
&emsp; - ease-in-out startet und endet langsam <br>
&emsp; - cubic-bezier(n,n,n,n) - für eigene Angaben
</p>
</section>
</article>
@ -241,6 +253,13 @@
}
</code>
</div>
<p class="explanation">
Weitere Möglichkeiten zum Einsetzten sind: <br>
&emsp; - none - Standard <br>
&emsp; - forwards - Style vom letzten keyframe <br>
&emsp; - backwards - Style vom letzten keyframe <br>
&emsp; - both - beide Styles werden verwendet
</p>
</section>
</article>
</main>

6
src/css/layout.css
View File

@ -69,12 +69,6 @@ footer {
border-bottom: 4px solid var(--primary);
}
code {
padding: .25rem .75rem;
border-radius: .35rem;
background-color: rgba(40, 40, 40, 0.8);
}
.code-example {
margin: 4px;
padding: 8px;

8
src/flexbox/allgemeines.html
View File

@ -15,7 +15,7 @@
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -29,13 +29,13 @@
</nav>
<main>
<article>
<h2 id="anchor10">Allgemeines</h2>
<h2>Allgemeines</h2>
<p>
Die Flexbox ist eine Styling-Option, mit der das Layout der Seite angepasst wird. Die Flexbox ordnet
alle Unterelemente eines Bereichs in einer Reihe an.
</p>
<section>
<h3 id="anchor11">Eine Flexbox erzeugen</h3>
<h3>Eine Flexbox erzeugen</h3>
<div class="code-example">
<code>
#example1 { <br> &emsp; display: flex; <br> }
@ -54,7 +54,7 @@
</p>
</section>
<section>
<h3 id="anchor12">flex-direction</h3>
<h3>flex-direction</h3>
<div class="code-example">
<code>
#example2 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> }

14
src/flexbox/eigenschaften.html
View File

@ -15,7 +15,7 @@
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -29,12 +29,12 @@
</nav>
<main>
<article>
<h2 id="anchor20">Eigenschaften</h2>
<h2>Eigenschaften</h2>
<p>
Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können.
</p>
<section>
<h3 id="anchor21">flex-wrap</h3>
<h3>flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4>
<div class="code-example">
<code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
@ -70,7 +70,7 @@
hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen.
Der Standard-Wert ist <code>nowrap</code>, <code>wrap</code> aktiviert das Wrapping.
</p>
<h3 id="anchor22">flex-flow</h3>
<h3>flex-flow</h3>
<div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
600px; <br> }</code>
@ -81,7 +81,7 @@
</p>
</section>
<section>
<h3 id="anchor23">justify-content</h3>
<h3>justify-content</h3>
<div class="code-example">
<code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: center; <br> }</code>
@ -117,7 +117,7 @@
</p>
</section>
<section>
<h3 id="anchor24">align-content</h3>
<h3>align-content</h3>
<div class="code-example">
<code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
@ -148,7 +148,7 @@
</p>
</section>
<section>
<h3 id="anchor25">overflow</h3>
<h3>overflow</h3>
<div class="code-example">
<code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
scroll; <br> }</code>

10
src/flexbox/unterelemente.html
View File

@ -15,7 +15,7 @@
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -29,12 +29,12 @@
</nav>
<main>
<article>
<h2 id="anchor30">Eigenschaften der Unterelemente</h2>
<h2>Eigenschaften der Unterelemente</h2>
<p>
Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet.
</p>
<section>
<h3 id="anchor31">flex-grow</h3>
<h3>flex-grow</h3>
<div class="code-example">
<code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
@ -50,7 +50,7 @@
</p>
</section>
<section>
<h3 id="anchor32">flex-basis</h3>
<h3>flex-basis</h3>
<div class="code-example">
<code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
@ -65,7 +65,7 @@
</p>
</section>
<section>
<h3 id="anchor33">flex-shrink</h3>
<h3>flex-shrink</h3>
<div class="code-example">
<code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>

2
src/grid/allgemeines.html
View File

@ -15,7 +15,7 @@
<h1>Grid-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>

2
src/grid/container.html
View File

@ -15,7 +15,7 @@
<h1>Grid-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>

2
src/grid/items.html
View File

@ -15,7 +15,7 @@
<h1>Grid-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>

4
src/index.html
View File

@ -12,7 +12,7 @@
<h1>Home</h1>
</header>
<nav class="navigationbar">
<a href="">Home</a>
<a href="index.html">Home</a>
<a href="flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="grid/allgemeines.html">Grid-Layout</a>
<a href="text_styling/allgemeines.html">Text-Styling</a>
@ -95,7 +95,7 @@
</article>
</main>
<footer>
<code>Abgabe zum 05.01.2023</code>
<p>Abgabe zum 05.01.2023</p>
</footer>
</body>
</html>

8
src/position/allgemeines.html
View File

@ -5,17 +5,17 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animationen</title>
<title>Positionen</title>
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/position.css">
</head>
<body>
<header>
<h1>Animationen</h1>
<h1>Positionen</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -116,7 +116,7 @@
<div class="code-example">
<code>
#example4 .active {<br>
&emsp;position: relative;<br>
&emsp;position: fixed;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}

28
src/text_styling/allgemeines.html
View File

@ -15,7 +15,7 @@
<h1>Text-Styling</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a>
@ -33,31 +33,31 @@
Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb
des
Programmes in dem die Webseite erstellt wird
gegebennen Möglichkeiten bearbeitet um den Wünschen des Webssitenbesitzers zu entsprechen. Heutzutage
gegebenen Möglichkeiten bearbeitet um den Wünschen des Webseitenbesitzers zu entsprechen. Heutzutage
ist diese
Methode jedoch stark veralltet. Die gängigste
arte eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu
Methode jedoch stark veraltet. Die gängigste
Art eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu
erstellen und
die Textoptik dann mithilfe eines zusätzlichen
CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten.
Diese sind
in form der Größe, der Schriftart und
der Textfarbe und so funktionieren die drei verschiedenen bearbeitungsfunktionen:
der Textfarbe und so funktionieren die drei verschiedenen Bearbeitungsfunktionen:
</p>
<section>
<h3>
Veränderung der Textgröße
</h3>
<p>
Mit hilf von Css lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften
Mit hilfe von CSS lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften
verändern.
Einige Beispiele für
die verschiedenen Mäßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der
standart
Schriftgröße(%) oder sogar Centimeter(cm).<br>
die verschiedenen Maßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der
standard
Schriftgröße(%) oder Zentimeter(cm).<br>
Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern
möchte und
nutz dann den befehl "font-size".
nutz dann den Befehl "font-size".
Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert
auf welchen
man sie verändern. Danach endet man den CSS befehl mit einem Semikolon.
@ -86,9 +86,9 @@
<li id="font-sizeCM">Prozent</li>
</ol>
<p class="explanation">
Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene größen. Hierfür nutzt man dann
Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene Größen. Hierfür nutzt man dann
statt einem
Parameter mit Wert einfach eine der Vorgegeben Größenstufen,
Parameter mit Wert einfach eine der vorgegeben Größenstufen,
indem man sie als Wort hinschreibt.
</p>
<br>
@ -116,8 +116,8 @@
<li id="font-sizeL">Prozent</li>
</ol>
<p class="explanation">
So lässt sich grob und schnell die Schrifgröße des textes auf des
webseite auf die passende Größe einstellen.
So lässt sich grob und schnell die Schrifgröße des Textes auf der
Webseite auf die passende Größe einstellen.
</p>
<br>
</section>

57
src/text_styling/beispiele.html
View File

@ -15,7 +15,7 @@
<h1>Text-Styling</h1>
</header>
<nav class="navigationbar">
<a href="../">Home</a>
<a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a>
@ -34,15 +34,15 @@
Veränderung der Textart
</h3>
<p>
Ebenfalls möglich, ist das ändern der Schriftart über CSS. Im Grunde verhält es sich hierbei
ähnlich, wie das ändern der Schriftgröße.
Der unterschied liegt hierbei darin, dass es anstatt vieler verschiedener Option zur Einstellung der
größe eine Auswahl verschiedener schrifftarten gibt.
Die Schriftarten sind hierbei die selben, wie bei den Standartmäßig verwendeten Schreibprogrammen
Ebenfalls möglich, ist das Ändern der Schriftart über CSS. Im Grunde verhält es sich hierbei
ähnlich, wie das Ändern der Schriftgröße.
Der Unterschied liegt hierbei darin, dass es anstatt vieler verschiedener Optionen zur Einstellung der
größe eine Auswahl verschiedener Schriftarten gibt.
Die Schriftarten sind hierbei die selben, wie bei den Standardmäßig verwendeten Schreibprogrammen
wie Word oder Open Office.
Zum ändern der Schriftart definiert man hierfür den Abschnitt, bei dem man die Schriftart ändern
möchte und nutz dann den befehl "font-family".
Daraus folgt ein doppelpunkt und hinter diesen schreibt man den Namen der gewünschten Schriftart.
Daraus folgt ein Doppelpunkt und hinter diesen schreibt man den Namen der gewünschten Schriftart.
Zum Abschluss ein Semikolon und die Schriftart wurde erfolgreich geändert.
</p>
<div class="code-example">
@ -74,13 +74,13 @@
Schriftfarbe ändern
</h3>
<p>
Auch die Farbe der Schrift lässt sich CSS verändern. Dafür steht dem Nutzer ein großteil des
sichtbaren Farbspektrum zur Verfügung.
Auch die Farbe der Schrift lässt sich mit CSS verändern. Dafür steht dem Nutzer ein Großteil des
sichtbaren Farbspektrums zur Verfügung.
Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der
Website.
Webseite.
Dahinter gibt man dann die gewünschte Farbe an. Dafür gibt es zwei Möglichkeiten. Entweder man
schreibt einfach den Namen der Farbe und die
standart Version der gewünschten Farbe wird genutzt oder man gibt die RGB Werte einer Farbe an um
standard Version der gewünschten Farbe wird genutzt oder man gibt die RGB Werte einer Farbe an um
einen genauen Farbton zur erhalten.
Danach bendet man die Anweisung wieder mit einem Semikolon.
</p>
@ -110,9 +110,9 @@
Schrift stylen
</h3>
<p>
Zusätzlich kann man mit hilfe der "font-styles" Anweisung das aussehen der Schrift verändern um
gewisse Anschnitte eines textes hervor zu heben.
Dafür kann man entweder den italic oder den onlique stle verwenden in dem man sie wie die anderern
Zusätzlich kann man mit hilfe der "font-styles" Anweisung das Aussehen der Schrift verändern um
gewisse Ausschnitte eines Textes hervor zu heben.
Dafür kann man entweder den italic oder den onlique style verwenden in dem man sie wie die andereren
font Anweisungen anwendet.
</p>
<div class="code-example">
@ -144,8 +144,8 @@
</h3>
<p>
Mit der Anweisung "font-weight" lässt sich lässt sich die Dicke des Schrift verstellen. Auch hierbei
gibt es zwei möglichkeiten die Werte anzugeben.
Entweder man nutz einen der vorgefährtigten Werte von CSS oder man gibt den Wert in einer Zahl an.
gibt es zwei Möglichkeiten die Werte anzugeben.
Entweder man nutz einen der vorgefertigten Werte von CSS oder man gibt den Wert in einer Zahl an.
Dabei gehen die Werte von 100 bis 900 in 100ter schritten
während die Standart dicke der Schrift bei 400 liegt. Anzuwenden ist die Anweisung wie die
vorherigen Module.
@ -178,9 +178,8 @@
Schrift Variante ändern
</h3>
<p>
Mit der Anweisung "font-variant" kann man die art der Schrift zwischen normal und small-caps
Mit der Anweisung "font-variant" kann man die Art der Schrift zwischen normal und small-caps
verändern.
Die Anweisung ist wie die anderen Anweisungen.
</p>
<div class="code-example">
<code>
@ -208,9 +207,8 @@
Textausrichtung ändern
</h3>
<p>
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig,
Rechtsseitig und Blocksats ändern.
Die Anweisung ist wie die anderen Anzuwenden.
Mit der Anweisung text-align lässt sich die Ausrichtung eines Textes zwischen Linksseitig, Mittig,
Rechtsseitig und Blocksatz ändern.
</p>
<div class="code-example">
<code>
@ -244,9 +242,8 @@
Textgestaltung
</h3>
<p>
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift
Hinzufügen.
Die Anweisung wird ausgeführt wie die Vorherigen.
Mit hilfe der "text-decoration" Anweisung kann man der Schrift Linien über, unter und durch die Schrift
hinzufügen.
</p>
<div class="code-example">
<code>
@ -277,10 +274,10 @@
Wort- und Zeichenabstände verändern
</h3>
<p>
Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die
Die "word-spacing" Anweisung funktioniert im Grunde wie die "font-size" Anweisung nur anstatt dass man die
Größe der Wörter verändert
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das
man den abstand nicht in Prozenten(%)
erhöht oder veringert man den zwischen den einzelnen Worten. Der Rest ist identisch, außer dass
man den Abstand nicht in Prozenten(%)
angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p>
<div class="code-example">
@ -318,7 +315,7 @@
</h3>
<p>
Über die Anweisung "text-indent" kann der Nutzer Zeilen einrücken.
Die einheiten zum eingebn sind hierbei die gleichen wie beim word- und letter-spacing.
Die Einheiten zum eingeben sind hierbei die gleichen wie beim word- und letter-spacing.
</p>
<div class="code-example">
<code>
@ -361,7 +358,7 @@
</ol>
<p>
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der
rechtschreibung für Leute,
Rechtschreibung für Leute,
mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
</p>
<div class="code-example">
@ -392,7 +389,7 @@
</ol>
</section>
<p>
Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt.
Nun weißt du alles was es über das Gestalten eines Textes mit CSS zu wissen gibt.
</p>
</article>
</main>