• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Website umsetzen!

Leventus

Leventus

Neues Mitglied
Hey Community =)

Ich bin relativ neu hier und hoffe, dass ich auf eure Kompetenz zurückgreifen darf,
da ich selbst Anfänger bin, was das Programmieren betrifft.
Code: 
Vorab, ich hab mir das Buch "[URL="http://webseiten-buch.de/"]Webseiten erstellen für Anfänger[/URL]" gekauft und durchgelesen.
Das war schon viel Theorie. =) 

Jetzt möchte ich "learning by doing" lernen =) 
Dazu hab ich mir eine Internet-Seite erstellt.
Die Seite soll mein Portfolio werden.

Kurz zur meiner Person, bin 27 und komme ausm Norden.
Kommunikationsdesign ist meine Leidenschaft und genau in diesem 
Gebiet besitze ich einen Abschluss. Derzeit bin ich als Freelancer tätig.

[B]
Meine Website[/B]
[URL="http://www.nolimit-studios.com/lb/001.jpg"]
[/URL][COLOR=#b22222][B]EDIT:[/B][/COLOR] Website wird überarbeitet! 
Neues Material steht bald zu Verfügung!

Lg.
 
Zuletzt bearbeitet:
Hallo,

also jquery buch hast hoffentlich auch gekauft, denn ohne das wird das nichts.
Deine wünsche sind nicht schlecht und dürften sogar kanpp nicht 5 stellig sein :O).
oder anders gesagt als anfänger hast dir was vorkenommen aber step by step lösbar sein dürften mit mehr oder weniger aufwand.

Design ist schick und ideen die dir gemacht hast auch.

Cheffchen
 
Also - du erwartest laso, dass wir dir hier deine Website basteln?
Wäre ganz sinnvoll, selbst ein bisschen zu googeln.
Und wie weitgehend ist dieses Buch? Nur simples HTML, oder auch Javascript oder gar PHP?
Im Falle dessen, dass du nicht weisst was ich meine, solltest du vielleicht nochmal einen Schritt zurückgehen und versuchen, zu verstehen, was wozu fähig ist.
Mit HTML allein kommst du nicht über mehr als Formatierung und Links hinaus.

EDIT: Und ja, es ist gut möglich, man muss sich nur ne weile ransetzen.
 
Zuletzt bearbeitet:
Das ist sicher ein guter Einstieg in die Materie, aber wenn du bisher noch keine Erfahrungen auf dem Gebiet hast, wirst du viel Zeit und Geduld mitbringen müssen, um deine Site analog zu den Screenshots zu verwirklichen. Betrachte es weniger aus der Top-Down-Perspektive, sondern als ein Projekt, das aus kleinen Anfängen wächst und stückweise erweitert wird. Bau erst einmal eine einfache Startseite mit einer funktionierenden und visuell ansprechenden Navigation. Mit HTML, CSS und etwas jQuery wirst übrigens nicht auskommen, sondern dir zusätzlich noch Grundkenntnisse in PHP und JavaScript aneignen müssen.


Bevor du überhaupt loslegst, solltest du dir die richtigen Werkzeuge besorgen:

- Da Webseiten heutzutage dynamisch sind, benötigst du zur lokalen Entwicklung den Webserver XAMPP.
- Anschließend stellt sich die Frage nach der Entwicklungsumgebung. Im professionellen Umfeld werden zumeist Eclipse oder Netbeans eingesetzt und damit solltest auch einsteigen, anstatt irgendeinen, eventuell sogar kostenpflichtigen, WYSIWG-Editor zu verwenden.
- Für den Firefox brauchst du Extensions wie Firebug und Web Developer Toolbar. Gerade der Firebug ist ein unverzichtbares Tool, um Fehler aufzuspüren und temporäre Änderungen vorzunehmen, ohne dass die Seite über den Webserver neu geladen werden muss. Ich schreibe darin sehr viel CSS und übernehme das anschließend per copy&paste in Eclipse.

Last not least ein Tipp zur Forennutzung. Die Hilfsbereitschaft korreliert direkt mit dem Enthusiasmus, den Eigenbemühungen und der Lernbereitschaft des Fragestellers. Fragen nach Tabellenlayout, Framesets oder ähnlichen no-gos werden hingegen häufig überlesen.
 
Hey vielen dank für eure Antworten! =)

Mit jQuery habe ich mir bisher gar nicht befasst. :/
Ich weiss also auch nicht, wozu das eigentlich ist. Oder welche Vorteile man damit hat.
Da müsste ich mich erst einlesen.

Natürlich erwarte ich nicht, dass ihr mir die Website zusammen bastelt. ;)
Nur ein bisschen Hilfe wäre toll! Es sei denn, ihr möchtet dieses und möchtet dafür zum Beispiel ein Design als Gegenleistung.

Wie sollte ich am besten vorgehen?
1. Die Struktur der Seite in HTML umsetzen?!
Und darauf dann aufbauen?

Lg.
 
Der erste Schritt besteht darin, ein valides HTML-Grundgerüst mit Doctype, Head und Body für die Startseite zu bauen und dort den Navigationsbereich einzufügen.

Aber installiere dir vorher die genannten Tools und mache dich damit vertraut.
 
Hey Tronjer! =)

Dann werde ich mich gleich dran setzen und versuchen genau dieses HTML-Grundgerüst umzusetzen!
Wie ich den Navigationsbereich allerdings einfügen soll, weiss ich noch nicht! Vorhin war ja die Rede von jQuery und damit kenne ich mich gar nicht aus.

Aber erst einmal werde ich nun die genannten Tools installieren.
Ich versuche noch heute Abend/Nacht das Grundgerüst fertig zu bekommen.

Lg.

EDIT: Die Tools sind nun installiert! Ob ich Eclipse oder Netbeans nutzen soll, weiss ich nicht!
Für mich als Anfänger ist die Entscheidung deutlich schwieriger, als für einen Profi.
Der kennt die Arbeitsumgebung ja schon und weiss seine Vor- & Nachteile zu schätzen.
 
Zuletzt bearbeitet:
Das Grundgerüst in HTML steht! =)
Portfolio

Mein Wissen musste ich allerdings auffrischen!
Es ist eben doch wichtig, dass Buch nicht einfach durchzulesen,
sondern auch gleich mitzumachen!

Das Grundgerüst habe ich in HTML geschrieben.
Das Layout hab ich dann in CSS umgesetzt. Das ist ja der heutige Standard oder?

HTML-Struktur
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="all" />
    <title>Levent Bayram</title>
</head>
    
    <body>
        <div class="homebutton">
            <img src="img/lb.png" alt="Levent Bayram / Startseite">
        </div>
    </body>
    
</html>

CSS-Struktur
Code: 
/* Layout für die Seite */

body{
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
}

.homebutton{
    position: absolute;
    top: 25px;
    left: 0px;
}

Doch wie geht es nun weiter?
Wie kann ich so ein gewünschtes Menü umsetzen?
Ich durchforste jetzt mal das Internet, ob ich da was finde.

Sieht der HTML-Code in Ordnung aus? Oder hab ich etwas wichtiges vergessen?
Oder sogar etwas richtig falsch gemacht?

Lg.
 
Der HTML-Code ist durchaus in Ordnung, allerdings hätte ich 2 Anmerkungen:

HTML: 
<div class="homebutton">
            <img src="img/lb.png" alt="Levent Bayram / Startseite">
        </div>

Das kann man auch kürzer schreiben. Ein <div> ist hier imho nicht notwendig. Also:

HTML: 
<img src="img/lb.png" alt="Levent Bayram / Startseite" class="homebutton" />

Auf die absolute Positionierung solltest Du sofort wieder verzichten. Das ist besonders für Einsteiger ungeeignet da es doch sehr verwirrend sein kann solange man die passenden Einsatzzwecke nicht kennt.

Ob dein HTML-Code valide ist sagt dir einer der vielen HTML-Validatoren, der bekannteste: The W3C Markup Validation Service

Wenn Du ein Menü aufbauen willst, findest Du unter "css menü" sehr viele Beispiele im Netz und auch hier im Forum.
 
Der HTML-Code lässt sich noch weiter vereinfachen. Ich zumindest konnte mir den ellenlangen Doctype mit XML-Namespace nie merken. Zum Glück gibt es auch HTML5.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Levent Bayram</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
......
</body>
</html>
 
Danke Tronjer & threadi,

das witzige ist, ich hatte den Head-Bereich vorher so!
Ich habe aber gedacht, dass das falsch sei bzw. nicht vollständig :D
Also hab ich ihn abgeändert.

Seit HTML5 kann ich Sachen also so kurz definieren?

Ich habe gestern noch bis 5h morgens ein Menü gesucht was meinen Erklärungen entspricht.
Doch leider bin ich nicht fündig geworden! :(
"Menu jQuery & Css" war meine Suchanfrage.
Da kamen wirklich auch sehr interessante Menü´s
Doch leider entsprach kein einziges meinen Vorstellungen.

Selber schreiben kann ich so was wahrscheinlich noch nicht.

Lg.
 
Hey threadi,

Ich will nicht nur ein Aufklappmenü.
Das Menü soll gar nicht zu sehen sein!
Neben dem Cursor soll stehen "open menü".
Sobald man klickt, soll sich das Menü genau an dieser Stelle öffnen.
Klickt man noch einmal, soll sich das Menü wieder schließen.
Es sei denn, man klickt auf ein Menüpunkt.

Hast du eine Idee wie man das umsetzen kann?
Lg.
 
Neben dem Cursor soll immer "Open Menü" stehen? Und wenn man klickt (links oder rechts?), dann soll sich das Menü öffnen? An irgendeiner Stelle der Webseite oder unterhalb des Mauszeigers?

Die Interaktion des Klicks kann man in dem Fall nur mit JavaScript machen. Das Aussehen natürlich mit CSS. Für die Positionierung unter dem Mauszeiger ggfs. wieder JavaScript.

Wenn es das ist was Du willst, musst Du mit JavaScript arbeiten. Die JavaScript-Bibliothek jQuery könnte dabei hilfreich sein. Etwas fertiges wirst Du aber sicher nicht finden.
 
Leventus schrieb:
Hey threadi,

Ich will nicht nur ein Aufklappmenü.
Das Menü soll gar nicht zu sehen sein!
Neben dem Cursor soll stehen "open menü".
Sobald man klickt, soll sich das Menü genau an dieser Stelle öffnen.
Klickt man noch einmal, soll sich das Menü wieder schließen.
Es sei denn, man klickt auf ein Menüpunkt.

Hast du eine Idee wie man das umsetzen kann?
Lg.
Zum Vergrößern anklicken....

Ich kann dir einen Ansatz dafür nennen, aber du wirst es alleine wahrscheinlich nicht hinbekommen.

Das Verstecken ist noch relativ einfach zu realisieren, nämlich mit der CSS Eigenschaft display:none. Nun soll das Menü aber nicht die gesamte Zeit (un)sichtbar sein, sondern lediglich dann, wenn ein bestimmtes Ereignis ausgelöst wird. Dafür benötigst du einen sogenannten EventHandler (onclick). Erschwerend hinzu kommt, dass je nach "Zustand" dieser Handler unterschiedliche Aktionen ausführen soll. Du müsstest also eine JavaScript-Funktion schreiben, die prüft ob das Menü sichtbar ist, und in diesem Fall ein display:none zuweist, entweder über eine Klasse oder als inline CSS. Im umgekehrten Fall muss dieses CSS-Attribut natürlich wieder entfernt werden.

Mit jQuery geht es kürzer als in purem JavaScript und könnte etwa so aussehen (Achtung, Pseudocode):

PHP: 
$("#mydiv").click(function() {
  if( $('#nav').is(':visible')){
    $("#nav").hide();
  } else {
     $("#nav").show();
  }
});
 
Tronjer schrieb:
[...]Du müsstest also eine JavaScript-Funktion schreiben, die prüft ob das Menü sichtbar ist, und in diesem Fall ein display:none zuweist, entweder über eine Klasse oder als inline CSS. Im umgekehrten Fall muss dieses CSS-Attribut natürlich wieder entfernt werden. Mit jQuery geht es kürzer als in purem JavaScript und könnte etwa so aussehen (Achtung, Pseudocode):
PHP: 
 $("#mydiv").click(function() {   if( $('#nav').is(':visible')){     $("#nav").hide();   } else {      $("#nav").show();   } });
Zum Vergrößern anklicken....
Noch einfacher wäre natürlich mit .toggle() zu arbeiten. Damit erspart man sich das Überprüfen des aktuellen Display-Status.
 
Ein weiterer Ansatz wäre, statt show() und hide() die Funktionen addClass() und removeClass() zu verwenden. Damit ließen sich dann auch umfangreichere CSS-Manipulationen vornehmen.
 
Hey Jungs =)

Leider sagt mir das alles nicht!

@ threadi, genau so soll es sein!

Ich habe mittlerweile auch endlich mal ein Beispiel gefunden der meinem schon ganz nah kommt. >> Menü
Klickt mal oben in die erste Box (Rechtsklick).
Diese Box müsste sozusagen unsichtbar über den ganzen Background, auf meiner Page, gehen.
Das Design des Menüs würde ich natürlich selbst machen.

Lg.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben