Web Design , html , css

09/09/2016 21:39 Mad0ck#1
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 :)


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.

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:
[Only registered and activated users can see links. Click Here To Register...]

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
09/09/2016 22:20 ScoutHunter88#2
Moin,

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

lg
09/09/2016 22:26 Mad0ck#3
Quote:
Originally Posted by ScoutHunter88 View Post
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 :o
09/09/2016 22:47 ScoutHunter88#4
Quote:
Originally Posted by Mad0ck View Post
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 :o
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
09/09/2016 22:57 LekoArts#5
Bitte mal in jsfiddle hochladen, da ich die Bilder nicht sehe
09/09/2016 23:23 Mad0ck#6
Quote:
Originally Posted by LeKoArts View Post
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 :)
09/09/2016 23:36 ScoutHunter88#7
Quote:
Originally Posted by Mad0ck View Post
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
09/10/2016 09:52 Mad0ck#8
@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 )
09/10/2016 14:52 LekoArts#9
@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 [Only registered and activated users can see links. Click Here To Register...] 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
09/10/2016 14:59 Chii.#10
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: [Only registered and activated users can see links. Click Here To Register...]) angegeben wurde. Ist kein $_GET['s'] gesetzt, lädt er automatisch die Startseite.

Vorerst würde aber die .html Variante reichen.
09/10/2016 15:50 Mad0ck#11

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 :)


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 :D
09/10/2016 15:59 LekoArts#12
Quote:
Originally Posted by Mad0ck View Post
Punkt Nr 2.
Was ist ein nav-tag ? bzw was ist im groben ein " tag " ?
[Only registered and activated users can see links. Click Here To Register...]

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.
[Only registered and activated users can see links. Click Here To Register...]

Quote:
Originally Posted by Mad0ck View Post
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 View Post
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 [Only registered and activated users can see links. Click Here To Register...] benutzen.
09/10/2016 16:18 Mad0ck#13

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 !
09/19/2016 15:11 flibsii#14
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
09/21/2016 18:22 Bgzocker#15
Quote:
Originally Posted by flibsii View Post
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";
?>