| Aktuelle Version |
Dein Text |
| Zeile 133: |
Zeile 133: |
| * Datum in Dateistruktur | | * Datum in Dateistruktur |
|
| |
|
| === HTML/ CSS === | | === Software === |
| | |
| '''Quick-Guide zur Handhabung von HTML/ CSS für den Monitor'''
| |
| | |
| | |
| Es gibt zwei wesentliche Datein, um die Slideshow zu realisieren:
| |
| | |
| ''index.html
| |
| style.css''
| |
|
| |
| | |
| Wenn ihr etwas in den Datein veraendern wollt, nutzt am besten einen ganz einfachen Text-Editor. Sofern ihr euch mit anderweitigen HTML Programmen (etwa Adobe Dreamweaver oder Phase5) auskennt, nutzt ruhig diese.
| |
| | |
| ''Index.html'' bildet lediglich das Grundgerüst, um später die Bilddateien in einem Loop anzuzeigen und gliedert sich in:
| |
| | |
| ''<head>
| |
| <meta charset="utf-8">
| |
| <meta http-equiv="refresh" content="1800" >
| |
| <title>CSS Slideshow</title>
| |
| <link rel="stylesheet" href="style.css">
| |
| </head>''
| |
| | |
| Wobei der erste Meta-Tag die Zeichenkodierung für Unicode-Zeichen darstellt. Der zweite Meta-Tag gibt den Befehl nach einer bestimmten Anzahl von Sekunden die HTML neuzuladen. Auf Wunsch kann der Titel beliebig in ''<title>'' geändert werden, für die Slideshow allerdings nicht notwendig. Als letzter Tag findet sich noch eine Verlinkung zur CSS Datei, welche sich unbedingt im selben Ordner befinden, um Verlinkungsprobleme zu vermeiden.
| |
| | |
| Des Weiteren:
| |
| | |
| ''<body>
| |
| | |
| <div class="container">
| |
| <div class="slider">
| |
| | |
| <div class="slide">
| |
| </div>
| |
| | |
| <div class="slide">
| |
| </div>
| |
| | |
| <div class="slide">
| |
| </div>
| |
| | |
| <div class="slide">
| |
| </div>
| |
| | |
| <div class="slide">
| |
| </div>
| |
| | |
| </div>
| |
| </div>
| |
| | |
| </body>''
| |
| | |
| Der Inhalt des Body bildet eine Art digitalen Dia-Projektor, der später zusammen mit den Verlinkungen in der CSS Datei die Inhalte anspielt. Der Tag ''<div class="container">'' stellt sozusagen die "Dia-Projektion" dar. Die untergeordneten div-Tags sind jeweils ein "Dia", welche zusammen als Bild-Schieber fungieren.
| |
| | |
| Der CSS- Teil kurz und knapp kommentiert:
| |
| | |
| @charset "utf-8";
| |
| '''/* CSS Document */'''
| |
| | |
| body
| |
| {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| '''/* damit body im Vollbild angezeigt wird */'''
| |
| | |
| | |
| .container
| |
| {
| |
| width: 100%;
| |
| position: relative;
| |
| overflow-x: hidden;
| |
| }
| |
| '''/* "Diaprojektor" */'''
| |
| | |
| | |
| | |
| | |
| .slider
| |
| {
| |
| position: relative;
| |
| width: 500%;
| |
| animation: animate 120s linear infinite;
| |
| }
| |
| '''/* "Diaschieber" 500% da 5 Inhalte (100% pro Inhalt) */'''
| |
| | |
| | |
| .slide
| |
| {
| |
| position: relative;
| |
| width: 20%;
| |
| float: left;
| |
| height: 100vh;
| |
| }
| |
| '''/* "Dia" 20%, da ganze Slideshow 100% */'''
| |
| | |
| | |
| h1
| |
| {
| |
| margin: 0;
| |
| padding: 0;
| |
| position: absolute;
| |
| top: 50%;
| |
| transform: translate-Y (-50%);
| |
| text-align: center;
| |
| font-size: 6em;
| |
| width: 100%;
| |
| background: rgba(0,0,0,.6);
| |
| color: #fff;
| |
| font-family: sans-serif;
| |
| }
| |
| '''/* nicht relevant */'''
| |
| | |
| | |
| .slide
| |
| {
| |
| background-size: cover;
| |
| }
| |
| '''/* soll Anzeige des Dia regeln, funktioniert aktuell noch nicht,
| |
| deswegen Bedingung der Pixelmassen */'''
| |
| | |
| | |
| .slide:nth-child(1)
| |
| {
| |
| background: url(sommer.jpg);
| |
| }
| |
| | |
| .slide:nth-child(2)
| |
| {
| |
| background: url(sommer.jpg);
| |
| }
| |
| | |
| .slide:nth-child(3)
| |
| {
| |
| background: url(sommer.jpg);
| |
| }
| |
| | |
| .slide:nth-child(4)
| |
| {
| |
| background: url(sommer.jpg);
| |
| }
| |
| | |
| .slide:nth-child(5)
| |
| {
| |
| background: url(sommer.jpg);
| |
| }
| |
| | |
| '''/* je child eine Bilddatei (NAME.jpg), die Inhalte, die auf dem Bildschirm
| |
| erscheinen */'''
| |
| | |
| | |
| | |
| @keyframes animate
| |
| {
| |
| 0%
| |
| {
| |
| left: 0;
| |
| }
| |
| 16%
| |
| {
| |
| left: 0;
| |
| }
| |
| 20%
| |
| {
| |
| left: -100%;
| |
| }
| |
| 36%
| |
| {
| |
| left: -100%;
| |
| }
| |
| 40%
| |
| {
| |
| left: -200%;
| |
| }
| |
| 56%
| |
| {
| |
| left: -200%;
| |
| }
| |
| 60%
| |
| {
| |
| left: -300%;
| |
| }
| |
| 76%
| |
| {
| |
| left: -300%;
| |
| }
| |
| 80%
| |
| {
| |
| left: -400%;
| |
| }
| |
| 96%
| |
| {
| |
| left: -400%;
| |
| }
| |
| 100%
| |
| {
| |
| left: 0;
| |
| }
| |
| }
| |
| '''/* die Animation ist 0% bis 100%; 0% bis -400% beschreibt die Position der "Dias" */'''
| |
|
| |
|
| === Daten === | | === Daten === |