Inns_Web Dunkeldesign

Für Diejenigen (wie bspw. mich)schüchtern_smiley, die lieber dunkle Websites mögen, habe ich nun auch ein Dunkel Design erstellt. Denn ich fände es recht angenehm, wenn es auf jeder Seite so einen Button geben würde, der den Wechsel auf ein dunkles Design ermöglicht.

Inns_Web Dunkel Design

Nichtsdestotrotz möchte ich betonen, dass dies nur eine Testseite ist, die mir als Übung dient. Wie sie dann aussehen wird, entscheidet sich, sobald ich diesen Fachlehrgang besucht habe und Webdesigner bin.

Hier ein paar Bilder zum Dunkel Design:

Die Responsive-Navigation funktioniert!

Heute war ich den ganzen Tag am Rumwerkeln, doch nun funktioniert auch alles schüchtern_smiley!
Bin mega glücklich darüber, dass alles so gut hingehauen hat. Ich denke, dass die Seite jetzt um Einiges besser aussieht.

Hier der Link zur Hauptseite:

Inns_Web

 

Javascript: Responsive Navigation Bar

Gestern war ich länger am Lesen und Üben, doch irgendwie sah ich die Zeit nicht, endlich mal eine Navigationsleiste zu erstellen, die sich auf alle Seitenverhältnisse anpassen kann. Ich hatte ja schon mal eine Responsive-Navigation von w3schools
eingebaut, doch irgendwie war da der Wurm drin, das Menü funktionierte nur dann, wenn man das Fenster zusammenzog, ansonsten blieb die Seite leer. Damals war ich echt am Verzweifeln, weil ich nicht verstand, welcher Befehl auf meiner Seite mit dem Responsive-Menü in Konflikt kam. Man muss extremst aufpassen, dass sich gewisse Befehle nicht beißen^^ teufel_smiley
Naja, gestern hab ich bei Null wieder angefangen und die Navbar funktioniert, is ja auch kein Wunder, ich musste lediglich copy+past anwenden 😀 …was mich extremst ärgert, da ich mein altes, simples Button-Menü immer noch lieber mag, als diese Responsive Navigationsleiste. Es war mein eigens erstelltes Menü! Doch was will man machen, diese verdammten Smartphones machen das komplette Design kaputt, es ist unmöglich ein schönes und gleichzeitig einfaches Design zu erstellen, ohne auf Javascript zurückgreifen zu müssen. Mir persönlich wäre es lieber mit einfachen Mitteln zu arbeiten, denn je weniger zusätzliche Funktionen eingebaut werden umso besser ist es und umso schneller lädt auch die Seite. Na, ich werde im Herbst nicht ohne Grund diesen Fachlehrgang besuchen, weil ich genau das lernen möchte…wie man trotz Responsive-Kacke eine schöne, einfache Seite erstellen kann -.-

Hier mal der Link zur gestern eingefügten Responsive Navigation:
Responsive Inns_Web

Ich hab das Menü etwas umgebaut und versucht es meinem einfachen Button-Menü anzupassen. Links sind noch keine gesetzt worden, weil ja ohnehin alles noch ein Test ist.
Es ist natürlich nur eine Testseite, deswegen sieht sie auch dementsprechend aus… auch die Farben, sowie der Banner oder das Logo dienen nur zu Testzwecken. Es geht im Moment mal nur darum, die Seite mit Responsive Menü funktionsfähig zu machen. Nebenbei muss ich noch checken, wie ich die Abstände der aufgeklappten Menüleisten – im minimierten Fenster – minimieren kann. Hier fehlt nämlich ein zusätzlicher CSS-Befehl, den ich noch herausfinden muss, denn ansonsten verstellt sich die Navbar in der Normalansicht -.-
Ich muss ja auch noch ein weiteres Menü einfügen und ich bin mir sicher, dass es da dann wieder Probs geben wird…AHHHHHHHHHHHHH!übel_smiley

 

… das zusätzliche menü funktioniert!!! ätsch_smiley Allerdings hab ich nun das Problem, dass ich es über Lima-City nicht hochladen kann, irgendwie gibt es da ein Problem mit der Javascript-Datei grins_smiley staun_smileymies_smiley
Problem gelöst, ich hab einfach über Lima-City die Js-Datei direkt ins HTML eingefügt…finde ich zwar blöde, aber nun läuft es grins_smiley. Zumindest in der Normalansicht teufel_smiley, denn wenn man das Fenster verkleinert, öffnet sich dann nur das Menü in der Mitte…es ist zum Kotzen! kotz_smiley grün_smiley

Die Menü´s beißen sich und ich hab noch nicht die nötige Erfahrung um zu wissen, wie man so ein Problem löst. …DOCH ICH FINDE ES NOCH HERAUS -.- mies_smiley

 

Javascript Zusammenfassung

Ich fasse für mich zusammen, weil ich auf diese Weise leichter bzw. schneller lerne. Außerdem muss ich zuerst mal verstehen, WARUM gewisse Befehle angegeben werden müssen und welche Funktion sie haben, weil ansonsten verstehe ich nur Bahnhof. hm_smileyWobei ich natürlich einiges schon kenne, aber trotzdem aufschreiben möchte.
Es wird eine Weile dauern, doch ich werde versuchen diese Zusammenfassung nach und nach zu erweitern.

Einstieg in Javascript

Javascript Anweisungen müssen zunächst in den HTML-Code eingebunden werden. Das Script kann entweder im Header- oder im Bodybereich eingefügt werden. Wird das Script bspw. im Header eingebunden, so wird es bevor sich die Website öffnet ausgeführt.
Das Script ist mittels eines -Tags anzugeben und all das was sich in diesen Container befindet scriptist ein Script. Damit verständlich wird, um welche Scriptsprache es sich handelt, kann man dies über den Parameter „language“ angeben, wodurch der Befehl lautet:

language javascript

Der Script-Typ wird mittels“type“ angegeben.

Beispiel:

type javascript

Wird zum Beispiel eine separate Scriptdatei verwendet, so muss man das ebenfalls im Code angeben und zwar durch das Attribut „src„, das auf den Pfad zur separaten Datei hinweist:
<script language=“javascript“ type=“text/javascript“ src=“meineFunktion.js“>

Elementare Grundstrukturen von Javascript

Variablen
Arrays
Datentypen
Operatoren
Ausdrücke
Anweisungen
Kommentare

Weiterlesen

Html/CSS: Banner mit Lichteffekt

In den letzten Tagen war ich lange am Rumprobieren. Eigentlich wollte ich ein Logo entwerfen, blieb aber schlussendlich beim Banner stehen. Beim Entwurf eines Logos tue ich mich echt schwer, weil sie eben eher schlicht gehalten werden müssen. Außerdem muss das Logo auch in kleinster Größe erkennbar sein… es ist nicht leicht. Naja, aber den Banner finde ich echt cool, wobei er noch nicht fertig ist. Er hat jedoch schon eine goile Eigenschaft, es geht das Licht an, sobald man mit der Maus darüberfährt 😀  Eine witzige Spielerei, die mir gestern auf Anhieb gelungen ist, ohne nachgoogeln zu müssen, mhmmm 🙂 ^^
Echt mega, ich liebe es..ich könnte von früh-morgens bis spätabends an dieser Seite herumexperimentieren, es ist mega cool. Ja, heute werde ich den Banner noch ausarbeiten und dann mit dem Logo beginnen.

hier mein Lichteffekt-Banner:

Inns_Web 

Man kanns natürlich auch noch steigern xD

wobei ich dieses Beispiel hier eher zum Spaß gemacht habe. Es ist ein einfacher Banner mit Hover-Effekt, also 2 Bilder die mittels Mouseover aktiviert werden 🙂

HTML/CSS: Menü funktioniert! =)

So, jetzt hab ich es endlich geschafft, dass mein Menü nicht zusammenbricht, sobald das Browserfenster verkleinert wird. Ich hätte noch gerne auf jedem Button ein Icon, doch bei längerem Linktext, wie bspw. „Impressum“ rutscht der Text immer unter den Button. Ich hab zwar herausgefunden, wie ich mein Icon positionieren kann, doch es haut irgendwie nicht hin, dass alle Icons mit Schrift einheitlich positioniert sind. Aus diesem Grund gibt es nur das Home-Icon 😀

hier der Link zur Seite:

Dams

– Der Banner muss noch ausgeschmückt werden, außerdem möchte ich noch ein weiteres Menü einsetzen, allerdings anders positioniert und dann müsste ich noch gucken ob es senkrecht oder ebenfalls horizontal erscheinen soll.
Der Name der Site (Dams) ist auf jeden Fall noch wandelbar, denn den Namen gibt es schon…es ist alles noch wandelbar und dient einfach nur dazu, ein Gefühl für html und CSS zu bekommen. Es gibt noch Vieles zu lernen, leider ist das Tutorial nun fertig, ich finde es schade, dass Macjo nicht weitere Tutorials hochgeladen hat, da er wirklich gut und verständlich erklären kann.
Es gibt sicherlich noch x weitere Youtuber, die ähnliche Tutorials anbieten, doch mir wäre es lieber gewesen weiterhin von ihm zu lernen.

HTML/CSS: Kleiner Spaß :-) (Image-Hover-Button)

Letztlich dachte ich mir, dass es cool aussehen könnte, Tastatur-Tasten als Buttons zu benutzen. Schlussendlich hab ich welche gemacht und versucht sie einzusetzen. Leider gefallen sie mir nicht. Sie sehen zwar witzig aus, doch die normalen CSS-Buttons sind deutlich schöner. Aus diesem Grund werden sie nicht zum Einsatz kommen, aber es ist nicht schlecht, dass ich sie gemacht habe, denn so ein Image-hover-Button kann mir vielleicht später mal nützlich sein. Es war jedenfalls eine spaßige Übung, auch wenn ich ziemlich lange daran herumgebastelt habe 🙂

Die Icons von den Tasten-Buttons sind nicht von mir, ich hab sie mir bei deviantart herunter geladen 🙂
Es war nur ein Test, ansonsten hätte ich natürlich selbst welche gezeichnet.

HTML & CSS: Hover Effekt mit Button

Heute konnte ich wieder an meiner Testwebsite arbeiten.
Momentan bin ich am Lernen, wie man Buttons mit diversen Effekten erstellt und wie man mit Schriften arbeitet.
Ab einem gewissen Punkt, wenn ich das Fenster verkleinere, bricht mein Menu zusammen, ich werde daran arbeiten, dass es hinhaut. Es hatte bereits funktioniert, aber ich wollte die buttons erstens nicht ganz oben starten und ihnen auch einen gewissen Abstand verleihen und somit wars dahin^^
Sobald das Fenster eine gewisse Größe erreicht, klappen die buttons nach unten und das ist mega sch…
Ich muss mir das CSS noch ein bisschen genauer angucken.

… LOL, ich habs hinbekommen. Nun sehen die buttons zwar anders aus, aber nun funktioniert es 😀

so, nun passt es, doch zufrieden bin ich nicht, weil jetzt die Schrift zu klein ist…ich musste sie verkleinern, weil sonst der Button-Text nach unten gerutscht wäre

nö…es fuchst immer noch -.- HOPPSALA xD
…ich habs, es ist das LOGO xD, das Logo ist der Grund für die runter springenden Buttons xD…ey -.-

– Wahrscheinlich ist das was ich hier gerade gemacht habe, nicht wirklich möglich 😀
Ich hab da zwei oder 3 verschiedene Tutorials vermischt, also irgendwie umfunktioniert, ohne wirklich schon Ahnung, von einem Button-Menü zu haben, denn im Turorial ging es nur um den Button. Eigentlich käme ein normaler Link oben in die Navigation, aber ich wollte eben den durchsichtigen Navigationsstreifen und ein Button-Menü^^…ich finde das voll cool 🙂 (Morgen schau ich mit einer box zu arbeiten)
Doch ich glaube, dafür muss man andere Befehle geben und die jeweiligen Buttons auch numerieren bzw. ihnen eine class zuteilen. Jo, das is mir aber jetzt echt zu viel, ich hab heute nur 2 Stunden geschlafen. Doch ich werde weiter daran arbeiten und einfach mal die Turorials weiter (der Reihe nach) verfolgen, weil die sind wirklich super!

Tutorial(CSS Tutorial deutsch, CSS3 lernen für Anfänger #1):

CSS Tutorial deutsch, (CSS3 lernen für Anfänger #1 (2018)):

HTML und CSS

Vorgestern hab ich mit html und CSS begonnen, da ich mich auf eine Ausbildung vorbereiten möchte. Es läuft sehr gut, ich konnte bereits eine komplette Seite mit Menü, Links und Bildern erstellen. Mit dem Notepad++ klappt das recht gut, weil man den html- und den css Code nebeneinander legen kann und somit alles gut im Überblick hat. Ein paar Fehler sind noch drin (der Text oder die Bilder passen sich dem Fenster nicht an und das wird bei Handys problematisch. Nebenbei springt die Überschrift hin und her), da mir noch das Wissen dazu fehlt, doch ich werde weiter lernen und daran arbeiten. Ich muss die Positionierung abändern, momentan lautet mein Befehl für den Text so:
margin-left: 400px;
margin-right: 400px; und das führt natürlich dazu, dass sich der Text nicht dem Fenster anpassen kann…doch das muss ich eben noch checken 😀

Es macht richtig Spaß!

Hier meine Test-Website:

Dams

(es ist alles erfunden, auch das Logo ist nur ein Testlogo)

Gameguru hab ich mal zur Seite gelegt, da mein Computer einfach zu alt ist und sich die Gestaltung des Spiels als noch mühevoller als erwartet herausstellt. Ich warte jetzt mal ab, bis die ganzen Neuerungen heraußen sind und bis ich einen neuen, gut funktionierenden PC habe.
Es ist auch so, dass ich des Öfteren an komplett selbst erstellten Objekten arbeite…stundenlang daran arbeite… und dann lassen sie sich aus unerklärlichen Gründen nicht hochladen. Das Sofa, welches ich erst kürzlich erstellt hatte, lässt sich ebenfalls nicht ins Spiel integrieren, nur die Kissen. Das Problem dabei ist, dass ich absolut nicht verstehe wo der Fehler liegt und jo, das nervt! 🙂