Lernziel
- Einen Einstieg in die Webseitenerstellung finden
Die folgenden Fragen/Aufgaben sind verständlich zu dokumentieren.
Spielregeln
- Quellen aus dem Internet sind im Artikel anzugeben.
- Kein Copy & Paste!
- Versuche Dich erst einmal alleine an der Beantwortung der Fragen. Nimm erst, wenn Du nicht mehr weiter kommst, die Hilfe der Kollegen in Anspruch.
- Schreibe nicht ab, sondern probiere alles auch aus und dokumentiere das mit Screenshots.
- Musst Du firmeninterne Details (Rechnernamen, IP-Adressen, Passwörter…) dokumentieren, so darf Deine Doku nur IT-intern zugreifbar sein, ansonsten kannst Du auch öffentlich (Blog…) dokumentieren.
- Vergiss nicht Bescheid zu sagen, wenn Du fertig bist.
Ausgangslage:
Lies bitte das Dokument HTML 5 Einsteiger Tutorial sowie das Dokument Positionierung mit DIVs und der Kamp mit Display und Co.
Ausgangslage
Dein Lehrmeister hat Dir ein CMS zum „Spielen“ eingerichtet (vorzugsweise MODX) und Du kennst die Zugangsdaten.
Fragen/Aufgaben
- Versuche die folgende Webseite zu erstellen:
Da dies ohne Vorkenntnisse nicht ganz einfach ist, siehts Du hier einen Teil des HTML und CSS-Codes.
Egänzende die fehlenden Elemente „…“
<!DOCTYPE html> <html lang="de"> <head> <title>Ich lerne Webseiten zu erstellen</title> <meta charset="utf-8" /> <link rel="stylesheet" ... /> </head> <body> <div id="..."> <div id="..."> <ul> <li>Menü 1</li> <li>Menü 2</li> <li>Menü 3</li> <li>Menü 4</li> </ul> </div> <div id="..."> <h1>Überschrift</h1> <h2>Kapitel 1</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <h2>Kapitel 2</h2> <p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="floatbreaker"> </div> </div> </body> </html>
body
{
font-family: Verdana, Sans-Serif, Arial, Helvetica;
background: lightgray;
}
h1,
h2,
h3
{
padding: 0;
margin: 0;
color: #004F9D;
margin-bottom: 10px;
font-weight: normal;
}
#box
{
width: 80%;
margin: ...;
border: 2px solid black;
padding: 0%;
display: ...;
background: ...;
}
#left
{
float: ...;
padding-right: ...;
width: ...;
font-size: ...;
font-weight: ...;
color: ....;
}
#right
{
padding-left: ...;
float: ...;
margin: ...;
width: ...;
}
.floatbreaker
{
clear: both;
}
- Was ist ein CMS (Content Management System). Wozu braucht man es, was sind seine Vorteile?
- Such Dir ein paar Screenshots zu MODX und WordPress. Welche CMS gibt es sonst noch.
- Erstelle eine Vorlage genmäss der Homepage, die Du oben ertellt hast. Rechts soll das tatsächliche Menü der jeweiligen Seite erscheinen und links der Inhalt. Such im Internet nach passenden Tutorials. Du musst bestimmte Teile Deiner HTML-Seite mit CMS-Variablen ersetzten.
In MODX würde die neue Vorlage z.B. so ähnlich aussehen. Ergänze auch hier die fehlenden Einträge (…).
<!DOCTYPE html> <html lang="de"> <head> <title>[(site_name)] | Arbeitsauftrag HTML/CSS/MODX</title> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="box"> <div id="left"> [[Wayfinder ...]] </div> <div id="right"> [*content*] </div> <div class="..."> </div> </div> </body> </html>
Achtung!
Dieser Artikel wurde automatisiert vom alten CMS übernommen. Dort war er zuletzt am 21.09.2016 geändert worden. Bei der Konvertierung können sich Fehler eingeschlichen haben, wie zum Beispiel falsche Zeilenumbrüche, fehlende Bilder oder fehlende Zeichen. Wenn du einen solchen Fehler entdeckst, dann schreibe doch bitte einen Kommentar, damit ich das beheben kann.
Vielen Dank für deine Mühe.
Schreibe einen Kommentar