Web Design , html , css

Mad0ck · 09/09/2016, 21:39

Hey

Da ich seit 2 Tagen das Fach Webdesign habe, und ich ganz hin und weg davon bin , da es das erste mal seit Jahren ist was mich auch wirklich interessiert ...

Unser erstes Projekt soll eine simple Startseite sein ohne verlinken etc etc.
Sprich jediglich html und css anwenden und etwas herumprobieren.
Das Thema ist: Online-Videothek

Da ich soweit schon verlinkungen etc hinzugefügt habe ,da ich darin sehr interessiert bin, wolllte ich nun etwas probieren.

So sieht die Webseite aktuell aus.
Eventuell etwas Anfänger Like ... hatet nicht bin erst seit 2 Tagen dabei

Spoiler

verlinkungen etc ist alles schon gemacht.
Jedoch habe ich es so gemacht, dass wenn ich auf einen button drücke, eine neue .html Seite aufgerufen wird.

Ich würde jedoch gerne ,dass sich nur der markierte Bereich ändert, und die ganze Webseite sso nicht geladen werden muss.

Spoiler

Funktioniert sowas mit ner <div ....> </div> Funktion ?

Oder wie macht man sowas. ....

Bitte schaut auf den Code. Ist er umständlich geschrieben oder im großen und ganzen Ok ?
Hier der Code:

Wäre im Allg. +über JEDE einzelne begründete Kritik erfreut.
Ich nehme auch Hilfe in Form von Tutorials wo expliziet auf solche Sachen eingegangen wird gerne an =)

Mein Problem ist erstmals, dass ich nur mit px gearbeitet habe und nicht mit % , so kann ich die Seite auf keinen naderen Bildschirmn ausgeben :>
Weiters kommt es ir so vor, als wäre der code komplett falsch aufgebaut.

lg
Michi

~~ScoutHunter88~~ · 09/09/2016, 22:20

Moin,

da kämst du mit HTML&CSS nicht weiter.
Hierfür wäre JavaScript nötig. Kommt also noch in der Schule

lg

Mad0ck · 09/09/2016, 22:26

Quote:

Originally Posted by ScoutHunter88

Moin,

da kämst du mit HTML&CSS nicht weiter.
Hierfür wäre JavaScript nötig. Kommt also noch in der Schule
lg

Danke für die Rückmeldung

Java script hmm :c Das dauert dann noch ne weile :c

Kommt erstmal php dran , und zwischen drin werden Datenbanken erstellt x.x

Wäre jedoch nicht abgeneigt mich etwas mit java script zu beschäftigen, sofern es nicht al zu viel aufwand ist.

Später für meine Abschlusarbeit mache ich eh was mit Datenbanken wo ich dann so doer so php brauche und evt Java script brauche

~~ScoutHunter88~~ · 09/09/2016, 22:47

Quote:

Originally Posted by Mad0ck

Danke für die Rückmeldung
Java script hmm :c Das dauert dann noch ne weile :c

Kommt erstmal php dran , und zwischen drin werden Datenbanken erstellt x.x

Wäre jedoch nicht abgeneigt mich etwas mit java script zu beschäftigen, sofern es nicht al zu viel aufwand ist.

Später für meine Abschlusarbeit mache ich eh was mit Datenbanken wo ich dann so doer so php brauche und evt Java script brauche

Ich kann deine Abneigung verstehen, aber wenn du dich 1-2 Tage intensiv mit JS beschäftigst und es nach 1 oder 2 Wochen erneut aufgreifst, kommt das Verständnis dafür langsam.

Mit JS sollte dein Code nicht länger als ein paar Zeilen sein

Wenn kommt, dann kommt.
Von Nichts, kommt Nichts.

lg

LekoArts · 09/09/2016, 22:57

Bitte mal in jsfiddle hochladen, da ich die Bilder nicht sehe

Mad0ck · 09/09/2016, 23:23

Quote:

Originally Posted by LeKoArts

Bitte mal in jsfiddle hochladen, da ich die Bilder nicht sehe

Habs mal reeditet , müsste jetzt funktionieren.

Würde mich btw. auch über feedback vom Design freuen

Mich würde interessieren ob die Seite eher ansprechen oder abwertend für euch ist auf den ersten blick

~~ScoutHunter88~~ · 09/09/2016, 23:36

Quote:

Originally Posted by Mad0ck

Habs mal reeditet , müsste jetzt funktionieren.

Würde mich btw. auch über feedback vom Design freuen
Mich würde interessieren ob die Seite eher ansprechen oder abwertend für euch ist auf den ersten blick

Finde es ehrlich gesagt mega gut, wenn man bedenkt, dass du erst seit 2 Tagen dabei bist.

Habe in dieser Hinsicht schon sehr viel Schlechteres gesehen.. Im gleichen Zeitrahmen.

Lob von mir ++

lg

Edit: Hab es mir nur oberflächlich angeschaut wegen Handy.. Kein Code Review

Mad0ck · 09/10/2016, 09:52

@LeKoArts @ScoutHunter88

Könnt Ihr mal den Code überfliegen und mir sagen ob der so grob passt , oder ob er komplett umständlich geschrieben ist.

Würde mich immer über gute Lern Tuts freuen, die euch auch damals geholfen haben ( deutsch - Englisch )

LekoArts · 09/10/2016, 14:52

@Mad0ck

Zu deiner Frage im Startpost:
Das könntest du mit AJAX realisieren, was jetzt erstmal zu viel wäre. Begnüge dich mit den einzelnen Seiten.

Zum Code:
Habe ich mal auf

hochgeladen.

Sachen, die ich ändern würde:

HTML:

PHP Code:


			
<div class="container"></div>

"Container" ist ein allgemeiner Name. Sei dir dessen bewusst und verwende die Klasse dann auch Seitenübergreifend für immer die gleiche Funktion.

PHP Code:


			
<img id="Logo" src="Logo.png" title="Logo der Videothek MultiPleXX"/>

Füge hier noch einen Alt-Tag dazu, falls das Bild mal nicht verfügbar seien sollte

PHP Code:


			
<a href="DVD_BluRay_page1.html"><button class="button">DVD/Blu-Ray Übersicht</button></a><br>

<a href="Genres_page2.html"><button class="button button2">Genres</button></a><br>

<a href="Neuerscheinungen_page3.html"><button class="button button3">Neuerscheinungen</button></a>

Hier würde ich noch einen nav-Tag außenrum packen. Wofür die jeweiligen Button-Klassen (button1, button2, button3)?

PHP Code:


			
<article>

    <h1 id="articleHeading"> MultiPleXX </h1>

    <p id="article">Bestelle oder downloade dir die neusten Filme 

    für ein Monatliches Entgeld <br>von 4,99€ / Device  noch HEUTE !<br>

    Lieferung ist versanfrei ! </p>

</article>

Hier ist es sehr unpassend den Elementen IDs zu verpassen. Immerhin wird es auf der Seite noch mehrere Überschriften und Texte geben. Ändere das zu Klassen.

CSS:

PHP Code:


			
body {

    background-color:black;

}



div.container {

    width:max-width;

    background-color:black;        

}

Wenn du beim body schon die Hintergrund-Farbe festlegst, brauchst du das beim container nicht noch einmal.
Die Zuordnung width: max-width; gibt es so nicht. max-width ist ein eigenes Attribut.

PHP Code:


			
#articleHeading {

    font-family:Impact;

    font-size: 50px;

    color: red;    

}

#article {

    font-family:Impact;

    font-size:20px;    

}

Die Zuordnung font-family: Impact; reicht nicht. Ich weiß gerade nicht, ob es eine Standardfont ist, aufjedenfall sollten immer noch Alternativen angeboten werden. Wenn es außergewöhliche Fonts sind, musst du diese außerdem noch mit hochladen und verlinken, sonst sehen das deine Gäste ohne Font diese nicht.

Insgesamt ist dein Layout halt noch statisch, was überhaupt nicht schlimm ist für 2 Tage!
Zum Design selber:
Suche dir bitte eine andere Schriftart und ein anderes Rot aus. Passt nicht

Chii. · 09/10/2016, 14:59

Möglich wäre auch die PHP Variante:

Code:

<?php
if(!isset($_GET['s']))
{
    $_GET['s'] = "home";
}
include("sites/".$_GET['s'].".php");
?>

Das kannst du in den Container packen, wo sich die Seite ändern soll, dort included er dann die Datei rein, die über $_GET['s'] (Beispiel:

) angegeben wurde. Ist kein $_GET['s'] gesetzt, lädt er automatisch die Startseite.

Vorerst würde aber die .html Variante reichen.

Mad0ck · 09/10/2016, 15:50

Spoiler

Quote:

Originally Posted by LeKoArts

@Mad0ck

Zu deiner Frage im Startpost:
Das könntest du mit AJAX realisieren, was jetzt erstmal zu viel wäre. Begnüge dich mit den einzelnen Seiten.

Zum Code:
Habe ich mal auf hochgeladen.

Sachen, die ich ändern würde:

HTML:

PHP Code:

<div class="container"></div>

"Container" ist ein allgemeiner Name. Sei dir dessen bewusst und verwende die Klasse dann auch Seitenübergreifend für immer die gleiche Funktion.

PHP Code:

<img id="Logo" src="Logo.png" title="Logo der Videothek MultiPleXX"/>

Füge hier noch einen Alt-Tag dazu, falls das Bild mal nicht verfügbar seien sollte

PHP Code:

<a href="DVD_BluRay_page1.html"><button class="button">DVD/Blu-Ray Übersicht</button></a><br> <a href="Genres_page2.html"><button class="button button2">Genres</button></a><br> <a href="Neuerscheinungen_page3.html"><button class="button button3">Neuerscheinungen</button></a>

Hier würde ich noch einen nav-Tag außenrum packen. Wofür die jeweiligen Button-Klassen (button1, button2, button3)?

PHP Code:

<article>     <h1 id="articleHeading"> MultiPleXX </h1>     <p id="article">Bestelle oder downloade dir die neusten Filme     für ein Monatliches Entgeld <br>von 4,99€ / Device  noch HEUTE !<br>     Lieferung ist versanfrei ! </p> </article>

Hier ist es sehr unpassend den Elementen IDs zu verpassen. Immerhin wird es auf der Seite noch mehrere Überschriften und Texte geben. Ändere das zu Klassen.

CSS:

PHP Code:

body {     background-color:black; } div.container {     width:max-width;     background-color:black;         }

Wenn du beim body schon die Hintergrund-Farbe festlegst, brauchst du das beim container nicht noch einmal.
Die Zuordnung width: max-width; gibt es so nicht. max-width ist ein eigenes Attribut.

PHP Code:

#articleHeading {     font-family:Impact;     font-size: 50px;     color: red;     } #article {     font-family:Impact;     font-size:20px;     }

Die Zuordnung font-family: Impact; reicht nicht. Ich weiß gerade nicht, ob es eine Standardfont ist, aufjedenfall sollten immer noch Alternativen angeboten werden. Wenn es außergewöhliche Fonts sind, musst du diese außerdem noch mit hochladen und verlinken, sonst sehen das deine Gäste ohne Font diese nicht.

Insgesamt ist dein Layout halt noch statisch, was überhaupt nicht schlimm ist für 2 Tage!
Zum Design selber:
Suche dir bitte eine andere Schriftart und ein anderes Rot aus. Passt nicht

Ich danke dir vielmals für dein ausführliches Feedback !
Da ich leider erst seit kurzem dabei bin, kenne ich noch nicht die ganzen Bezeichnungen etc. deshalb ein paar kurze Fragen

Punkt Nr 2.
Was ist ein nav-tag ? bzw was ist im groben ein " tag " ?
Button1, 2,3 sind die Buttons für die verlinkungen zu den anderen Webseitenkategorien.

Die Änderungen welche du mir vorgeschlagen hast, werde ich natürlich umsetzen !
Ich werde heute versuchen, den ganzen code umzustrukturieren, sodass ich für die einzelnen grafiken etc keine px nehme sonder % , sodass es für jedes Ausgabegerät in größeren / kleineren " angaben auch noch passt

Spoiler

Danke für den Tipp.
Jedoch verfüge ich noch nicht über grundlegende Kenntnisse mit PHP.

Das Ziel war es erstmal nur nen hintergrund zu machen für die nächsten 3 wochen bin schon ca 3-4 Monate vorne , von dem was eig gemacht werden müsste

LekoArts · 09/10/2016, 15:59

Quote:

Originally Posted by Mad0ck

Punkt Nr 2.
Was ist ein nav-tag ? bzw was ist im groben ein " tag " ?

Quote:

Der Inhalt von HTML-Dateien wird mit HTML-Elementen ausgezeichnet. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der „Gültigkeitsbereich“ des entsprechenden Elements. Tags werden in spitzen Klammern notiert.

Quote:

Originally Posted by Mad0ck

Button1, 2,3 sind die Buttons für die verlinkungen zu den anderen Webseitenkategorien.

Ich meinte die Klassennamen. Wenn du später einzelne Buttons in der Navigation auswählen willst, kannst du das so machen:

PHP Code:


			
nav a:nth-child(2) {

/* Deine Änderung */

}

Quote:

Originally Posted by Mad0ck

Ich werde heute versuchen, den ganzen code umzustrukturieren, sodass ich für die einzelnen grafiken etc keine px nehme sonder % , sodass es für jedes Ausgabegerät in größeren / kleineren " angaben auch noch passt

Du brauchst gar nicht umbedingt Prozentwerte, sondern kannst auch

benutzen.

Mad0ck · 09/10/2016, 16:18

Spoiler

hast du skype oder ähnliches ?
Wenn ich mal fragen habe denke kann ich mich an dich wenden sofern du dazu bereit wärst

Werd mir deine Ratschläge zu herzen nehmen und mir das mal ansehen !

flibsii · 09/19/2016, 15:11

Guten Tag,

es ist möglich nur den von dir makierten Bereich ändern zu lassen ohne die ganze Seite neu laden zu lassen. Das Ganze funktioniert mit dem Inline-Frame! Für mehr Informationen stehe ich dir gerne weiter zur Verfügung.

Skype: flibsii

Mit freundlichen Grüßen

Fabian

Bgzocker · 09/21/2016, 18:22

Quote:

Originally Posted by flibsii

Guten Tag,

es ist möglich nur den von dir makierten Bereich ändern zu lassen ohne die ganze Seite neu laden zu lassen. Das Ganze funktioniert mit dem Inline-Frame! Für mehr Informationen stehe ich dir gerne weiter zur Verfügung.

Skype: flibsii

Mit freundlichen Grüßen

Fabian

Servus,
erstmal das Design finde ich echt toll!

Ich würde hierfür nicht mit Frames arbeiten... Funktioniert bei manchen Browsern nicht mehr so gut und deine Website wird ggf. später schlechter bewertet (z.B. durch Google -> schlechteres Ranking).
Javascript wäre hierfür wohl die Premiumlösung. Wenn du diesen Schritt machen möchtest ein paar Tipps:
- schau dir das Javascript Framework jquery an. Ist relativ leicht rein zu kommen und sollte dir schnell helfen
- Beim Seitenaufruf wird dan aber alle Unterseiten geladen. Dies könnte bei langsamer Internetverbindung Probleme darstellen (-> schlecht für Mobile). Daher solltest du dir bei einem weiteren Schritt überlegen. Die Inhalte (Unterseiten) dynamisch nachzuladen. Stichwort Ajax

Für dich erstmal beste Lösung (meiner Meinung nach):
Schau dir php an. Setz dir mit z.B. xampp einen lokalen Webserver auf und erstelle verschiedene Views für den einen Inhalt. Kanns schlecht erklären. Ich meins so etwa (sehr vereinfacht):

PHP Code:


			


<!-- Menü -->

<a href="index.php?page=index">Startseite</a>

<a href="index.php?page=unterseite">Unterseite x</a>



<!--Content der sich ändern soll -->

<?php

if(isset($_Get['page']) and file_exists("views/".$_GET['page'].".php")) {

  include "views/".$_GET['page'].".php";

} else {

  include "views/index.php";

?>