Seite fertig :)

Gestern war ich bis 07:00 Uhr morgens am bauen ^^ätsch_smiley
und bin mit meinem Ergebnis zufrieden, die Seite für das Hotel ist nun fertig!
Ich habe mit einfachen Mitteln und ohne CSS gearbeitet, was das Ganze etwas schwieriger gestaltet-, mich aber nicht daran gehindert hat Farbe auf die Seite zu bringen. Sie ist trotz Hindernisse schön geworden! schüchtern_smiley Ich konnte wieder Einiges dazulernen, überhaupt bin ich sehr viel sicherer beim Codeschreiben geworden.

Hier ein kleiner Einblick (Header (verschleiert, da Fotos nicht von mir) + Footer):

Auch meinen Menü-hover-Banner konnte ich optisch noch ein bisschen verbessern und muss nur noch gucken, wie ich aus dem Menü ein Dropdown-Menü zaubern kann.

 

Menü mit Hover-Bilderwechsel – 2.Versuch

Gestern, sowie auch heute, arbeitete ich an meiner Idee weiter. Die Seite ist nun zentriert und ich konnte meine Vorstellung umsetzen. Grafisch könnte sich der Banner natürlich noch bessern, er ist vielleicht ein bisschen zu konfus gestaltet, aber den Effekt den ich erzielen wollte habe ich erreicht und bin sehr glücklich darüber!
Nächste Woche arbeite ich an den restlichen Aufgaben, dieses We war nur für den Banner bestimmt 😀

 

Menü mit Hover-Bilderwechsel

Gestern wollte ich mal schauen, ob es möglich ist eine Slideshow so abzuändern, dass man die Bilder mittels eines Menüs mit Hovereffekt aktivieren kann.
Ich hatte ganz übersehen, dass die Slideshow mit Javascript funktioniert, wodurch ich es dann sein gelassen habe. Es war zwar möglich „onklick“ einfach mit „onmouseover“ zu tauschen, aber die dots konnte ich nicht in ein Menü abwandeln.
Nichtsdestotrotz konnte ich einen Banner erstellen, der über das Menü die Bilder wechselt.
Hier mein Testbeispiel:

Schwer tue ich mich nun, die komplette Seite zu zentrieren und auch das Menü etwas mehr rechts vom Bild zu haben….aber ich werde mich weiter üben^^ Eigentlich wollte ich es rechts unter dem Bild haben, aber irgendwie will es noch nicht so wie ich mir das vorstelle^^ Doch ich bin froh, dass ich zumindest nahe an meiner Vorstellung dran bin 😀
Natürlich muss auch noch der leere Banner etwas an Farbe gewinnen. Er wird sich noch ändern, es war lediglich mal ein Test.

Dienstag

bin wieder zuhause 🙂
ich kann nun tabellen erstellen^^
da muss ich gestehen, dass ich anfängliche schwierigkeiten hatte. vor allem deswegen, weil ich erst checken musste, welcher befehl was auslöst…hat ne weile gedauert, aber ich werde demnächst ein paar tabellen basteln. ich muss immer alles ausprobieren und anschauen, um genau zu verstehen was ich ins html tippe.
– auf jeden fall freue ich mich sehr auf die nächste aufgabe, dabei geht es um die gestaltung bzw. die erarbeitung der eigenen homepage und ich denke, dass ich sehr gerne daran arbeiten- und mit sicherheit ein schlaffreies we haben werde xD
schlaffrei deswegen, weil ich bestimmt wieder irgend welche unrealisierbaren effekte einbauen möchte.
eine idee hab ich schon, doch die ist mit verdammt viel arbeit verknüpft, da ich für dieses projekt noch zu wenig kann. doch ich werde mich draufstürzen und einfach mal mit den möglichkeiten, die ich im moment habe, versuchen der idee näher zu kommen.
ich freue mich riesig darauf, denn ich kann wieder kreativ sein, herumtüfteln, meinen pc anschreien und zuschauen, wie meine idee an farbe gewinnt. und das tolle daran ist, ich erhalte ein feedback, das feedback eines profis und jenes der restlichen teilnehmer des kurses! 🙂
schmett 3

 

html –

Bin gerade dabei an einer Seite zu arbeiten.
Momentan arbeite ich ohne CSS, weil wir es noch nicht durchgenommen haben. Es soll eine einfache Seite mit mehreren, im Menü verlinkten Unterseiten sein. Bis auf das Menü im Footer funktioniert auch alles, leider konnte ich den Fehler noch nicht ausfindig machen. Die Links werden im Footer zwar angezeigt, doch sie lassen sich nicht anklicken 😀
Ich vermute, dass sich irgend etwas beißt, doch fragt mich nicht was^^ Wahrscheinlich sind es die beiden Link-Menüs, doch ich wollte Impressum oder bspw. Datenschutz nicht im top-Menü haben. Ich werde es mir morgen genauer anschauen, ansonsten frage ich den Lehrer, was ich falsch gemacht habe. Vielleicht ist es auch das fixierte Logo??? KA 😀
Mal hoffen, dass ich es noch rauskriege^^

 

html -8-)

Demnächst werde ich eine kleine Website mit einfachen Html-Elementen entwerfen =)
Ich freue mich schon darauf und bin gespannt wie ich das Erlernte anwenden werde. Damit ich alles im Kopf behalte, werde ich versuchen den Html-Code mit Inhalt- zunächst – vom Kopf heraus zu schreiben, denn so lerne ich am besten, in der Hoffnung, dass mir zukünftig alles automatisch von der Hand geht 🙂
Doch bei diesem Lehrer habe ich keine Zweifel, das wird schon hinhauen! Echt klasse!

 

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:

Simpler Image Hover Effekt

Ich bin gerade dabei unseren momentanen Banner zu animieren, da der alte Image-Hover-Glow-Effekt ziemlich gut ankam. Es gibt verschiedene Hovereffekte, die recht gut aussehen und sehr einfach einzubauen sind, doch einen Hover-Glow-Effekt auf einer Bilddatei konnte ich nicht ausfindig machen. Effekte, die es ermöglichen einen Bilderrahmen zum Leuchten zu bringen gibt es, doch keinen, der ein ganzes Bild mit diesem Effekt ausstattet.
Ziemlich cool finde ich den  Grayscale Effect von w3schools, den ich momentan über unseren Banner gezogen habe.

hier ein Beispiel:

grayscale_effekt

oder hier der Link um den Effekt auszuprobieren (einfach mit der Maus über den Banner fahren):

Inns_Web Grayscaleeffekt

(der Link wird wahrscheinlich nicht lange mit diesem Effekt funktionieren, da ich irgendwann meinen Glow-Effekt einfügen werde)

Und hier mein Image-Glow-Effekt:

Image_Glow

Image_Glow_fenster

Link (einfach mit der Maus über den Banner fahren):

Inns_Web Image-Gloweffekt

 

Bitte die Slideshow Gallery nicht beachten, sie war/ist ein Test…die komplette Seite dient zu Testzwecken.

Der Image-Hover-Gloweffekt ist im Grunde genommen ganz simpel, hierfür muss man lediglich 2 gleiche Bilder erstellen (eines mit- und eines ohne Gloweffekt). Das erste Bild (ohne Gloweffekt) wird als Hauptimage verwendet und bei Mouseover wird das Bild mit dem Gloweffekt aktiviert. Es ist ein simpler Hover-Befehl, der im CSS und natürlich auch im html festgelegt wird.
Damit das Ganze einen Übergang hat und sich der Effekt langsam ein- und ausschaltet, hab ich eine Transition von 0.7s mit eingefügt. Mit Google Chrome funktioniert alles perfekt, Firefox ignoriert die Transition und braucht ein paar Anläufe auch beim Hovereffekt im Menü und den Internet Explorer brauche ich gar nicht zu erwähnen, der hat generell ein Problem bange_smiley…wobei im Groben und Ganzen die wichtigsten Dinge sichtbar sind und glücklicherweise auch die Farben richtig dargestellt werden.
Bin mega froh, dass alles genau so funktioniert, wie ich mir das vorgestellt habe, zumindest mit Chrome!! party_smiley

– Demnächst werde ich an einem Dunkel-Design arbeiten, damit auch jene die lieber dunkelfarbige Seiten mögen, auch ihre Freude an Inns_Web haben können grins_smiley

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

Javascript: Hallo Welt!

Heute habe ich mein erstes Javascript in meinem HTML-Code eingefügt.
Es handelt sich dabei um eine einfache Funktion, bei der sich beim Laden der Seite, eine Meldung öffnet, in der „Hallo Welt!“ steht.

javascript_hallo_welt

HTML:

html javascript

Dadurch, dass es sich um ein einfaches Text-Script handelt, sollte der Befehl korrekterweise so lauten:

textscript

Wenn das Script separat abgespeichert wird, dann lautet der Befehl im HTML-Code so, insofern die js-Datei im selben Ordner liegt wie die html-Datei:

separater js code

und in der .js Datei wird nur die Funktion eingegeben:

js textscript

CSS:

css javascript

Als Texteditor verwende ich immer Notepad++ , da ich damit die Dateien nebeneinander legen und gleichzeitig anschauen kann. Ein einfaches aber sehr cooles Programm verliebt_smiley

Und hier das JavaScript Tutorial von listenwhatisayoh aus YouTube, welches ich mir in der nächsten Zeit zum Lernen ansehen werde:

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 🙂