Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

EADMRW · 3. Dezember 2016

Guten Morgen Leute,

bin durch einen Freund der momentan auf einer Fachschule ist auf eine seiner Aufgaben gestoßen.

Die Aufgabe:
Ziel ist die Darstellung von Informationsseiten zu einem Thema, das mehrere Unterthemen hat. Das Thema ist einem Überlassen.

Das Layout soll jedoch dreispaltig sein, links die Navigation in der Mitte ein Bereich für eine Abbildung zum grade dargestellten Unterpunkt, rechts eine detaillierterer informations-Text zum dargestellten Objekt.

Die einzusetzenden Techniken sind HTML5 und CSS3. Diese müssen getrennt notiert werden, also keine Direktformatierung in HTML-Code.

Die Navigation hat keine Aufzählungspunkte wird aber dennoch durch eine unsortierte Liste realisiert.

Das ist die Standard Aufgabe, jetzt noch die Extras für die schlauen:

Die Informationen rechts werden nur eingeblendet wenn man mit der Maus über einem Link ist.
Die Navigation wird ebenfalls ausgeblendet und ist nur sichtbar, wenn der Maus Zeiger am linken Bildschirmrand ist.
Die Navigation hat eine feste Breite, die verbleibende Breite wird immer 60 zu 40 aufgeteilt.
Erst ab einer bestimmten Breite des Viewports werden die Elemente nebeneinander dargestellt, bei kleineren Breiten untereinander.
Einbau von CSS-Animationen.

Ich habe so gut wie keine Vorkenntnisse in diesem Berreich, habe vorhin mit hilfe von tuts schon sowas dreispaltiges mit punkten hinbekommen.
Jedoch fehlt mir das Wissen wie ich zb. aus der linken Spalte ein Punkt auswähle, in der mittleren Spalte ein Bild und in der rechten Spalte ein Text dazu einfüge.
Vorallem mit den Extra-Aufgaben mit dem Hover (wenn ich das richtig verstanden habe) gehen soll.

Ich möchte das sehr gerne lernen, vllt hat hier jmd Lust und Zeit mir paar Dinge zu erklären bzw weis wo ich gute tuts dafür finden kann ?
Bin für jede Hilfe offen und dankbar
Würde ja meinem Freund fragen, doch er versteht das selbst nicht so ganz. :-/

Lg Alex

EADMRW · 3. Dezember 2016

So hab jetzt hier mal mein Ergebnis wie ich mir die den Aufbau nach Anleitung vorstelle, Farben sind nur damit ich besser sehe wie sich was wo verhält wenn ich was änder.

HTML

<!DOCTYPE html>
<html>
<head>




<link rel="stylesheet" href="testfile.css" type="text/css">
<meta http-equiv="Content-Style-Type" content="text/html; charset=utf-8">










</head>




<body>
<div class="wh">
Autos
</div>




<div class="l">
Automarken
<div class="l1">
<ul>
<li>Mercedes
</li>
<li>Volkswagen</li>




</ul>







</div>
</div>




<div class="m">
Bild
<p><img src="automarken-logos-uberblick.jpg" width="600" height="680" </p>
</div>







<div class="r">
Infobox
<p>Klicken Sie auf eine Marke Ihrer Wahl um weitere Informationen zu erhalten.</p>
</div>










</body>
</html>

Alles anzeigen

und die CSS Datei:

CSS

body {
	margin: 1%;
	text-align: center;
	background: red;
	font-size: 2em;
}







.l {
background: blue;
width: 20%;
float: left;
margin: 0.5%;
}




.m {
background: Pink;
width: 50%;
float: left;
margin: 0.5%;

}




.r {
background: green;
width: 25%;
float: left;
margin: 0.5%;




}

Alles anzeigen

Soweit bin ich nun mit dem ersten tut von Youtube gekommen. Jedoch finde ich keine Möglichkeit links einen Punkt auszuwählen bzw per Mouseover Funktion das Bild und rechts den Text zu ändern.
Dachte an sowas wie ein If oder ähnliches. If MouseOver="Mercedes" then Bild="Mercedes Logo" Text="Mercedes wurde dann und dann gegründet... ect"
Aber leider finde ich nichts was mir direkt helfen würde.

MrMurphy · 3. Dezember 2016

Hallo

Die Aufgabenstellung passt in sich nicht. Die wirst du mangels eigenem Wissen nicht ganz richtig übernommen haben.

Nur mit HTML und CSS wird eine Lösung nur mit Tricks und mehrfachem um die Ecke denken möglich sein. Das hat mit dem Lernen oder Abfragen von HTML/CSS-Kenntnissen aber nichts zu tun.

Praktisch wird man um JavaScript nicht herumkommen. Dazu neigst du ja mit dem "If MouseOver" auch selbst.

Es wäre schön wenn du die Aufgabe einscannen und als Grafik einfügen könntest um Übermittlungsprobleme zu vermeiden.

Gruss

MrMurphy

EADMRW · 3. Dezember 2016

So hab nun Screenshots von Ihm bekommen und diese noch fix zusammen gesetzt.
Jetzt kann man die Aufgabe, Bonus Aufgabe und das Beispiel komplett sehen.

Gruß Alex

djheke · 3. Dezember 2016

Du solltest die Aufgabe wie gefordert umsetzen. Das mit JS kannst du zum Schluss machen.

MrMurphy · 3. Dezember 2016

Hallo

Ich war zunächst etwas im Zweifel ob eine einzelne Seite erstellt werden soll oder ein Webauftritt mit mehreren Seiten.

Deshalb habe ich mir grade die Aufgabe noch einmal durchgelesen. Aus der Formulierung

Zitat

Ziel ist die Darstellung von Informationsseiten ...

schließe ich eher, dass ein Webauftritt mit mehreren HTML-Seiten gefordert ist, die auf ein gemeinsames CSS zugreifen.

Durch die Formulierung

Zitat

Die einzusetzenden Techniken sind HTML5 und CSS3.

wird in Aufgabenstellungen einerseits gefordert, dass beide Techniken verwendet werden müssen, andererseits aber keine weiteren Techniken wie JavaScript oder PHP verwendet werden dürfen.

Damit passt die Aufgabenstellung auch zu einer üblichen HTML-Schulung und ist mit sinnvollem Aufwand umsetzbar und praktisch einsetzbar.

Ich habe mal ein Beispielside erstellt, bei der ich nur einige Aufgabenteile (zwei hover-Effekte) weggelassen habe, die meiner Ansicht nach besucherunfreundlich sind. Die lassen sich aber problemlos nachrüsten. Dies sollte natürlich auch geschehen, wenn die Aufgabe benotet wird.

[Testside auf Wunsch des Thread-Eröffners entfernt.]

In der Seite Aufgabenstellung habe ich mich etwas über die einzelnen Aufgabenteile ausgelassen - ... die Gedanken sind frei.

Gruss

MrMurphy

EADMRW · 6. Dezember 2016

Hey vielen dank für die Hilfe und das Beispiel.

hab aber eine bitte an dich, auch wenn es nicht schwer ist, das Beispiel vllt doch raus zu nehmen, da die Aufgabe an der Schule aktuell noch nicht gelöst ist.
Wir möchten ja nicht das sich ein paar schlaue Schüler hier ein teil der Lösung abgucken können

Ja nachdem klar war das mehrere Seiten gemeint sind, ist es kein Problem. Verlinkung und alles klappt wunderbar und mit bisschen google benutzung findet man auch sehr leicht wie ein hover für den Info text funzt.

Hab persönlich noch keine Ahnung wie das Ausblenden des Menüs klappen soll aber denke mit ein bisschen suche bekommt man das schon raus, sobald die Aufgabe an der Schule abgeschlossen ist werde ich mein Erarbeitetes Beispiel als Code mal hochladen. Wäre super wenn du mit mir dann den Aufbau des Codes überarbeiten kannst da ich momentan einfach alles so rein schreibe wie ich es "lerne" und ich den schon gerne Sauber dort stehen hätte.

Ok nochmal vielen dank für deine Hilfe und wie gesagt, wenn die Aufgabe an der Schule durch ist, lad ich meinen Code mal hoch.

Lg Alex

djheke · 6. Dezember 2016

Zitat von EADMRW

Guten Morgen Leute,
[bin durch einen Freund der momentan auf einer Fachschule ist auf eine seiner Aufgaben gestoßen....

Konnte ich mir schon denken, dass die Aufgabe nicht von Deinem Kumpel ist.

MrMurphy · 6. Dezember 2016

Hallo

Zitat

das Beispiel vllt doch raus zu nehmen

Erledigt. Obwohl das eher unsinnig ist, da mein Testcase von Suchmaschinen nicht gefunden wird.

Gruss

MrMurphy

EADMRW · 6. Dezember 2016

Zitat

Konnte ich mir schon denken, dass die Aufgabe nicht von Deinem Kumpel ist.

Aso nene da bist du echt auf dem falschen Pferd oder wie das Sprichwort heißt.

Ich bin nicht auf der Schule, kann ich mir nicht leisten, muss Geld verdienen

mache es aus reinen Interesse, finde es sehr spannend sowas zu lernen und mit der ganzen Hilfe im Internet weiter zu kommen.
Wie gesagt, wenn die die Aufgabe abgeschlossen haben möchte ich mein Code mal hier hoch laden wegen der Struktur des codes.
Ich kann ja leider nicht zu den seinen Lehrer an die Schule gehen und sagen: Gucken Sie sich das bitte mal an
Bin nicht auf der Schule, ich habe keinen "nutzen" außer dem das ich was lerne

Nochmal vielen dank an MrMurphy für deine Hilfe. Ich denke aber man findet das Forum leicht und den Beitrag. trz danke das du es rausgenommen hast

Lg Alex

Aufgabe zur Erstellung einer Informationsseite zu einem Thema HTML5 & CSS3 [Neuling]

Jetzt mitmachen!

Teilen