PsYch0's steiniger Weg zur eigenen Seite

Diskutiere PsYch0's steiniger Weg zur eigenen Seite im Internet Forum Forum im Bereich Software Forum; Und damit begrüße ich alle Leser die dies interressiert. :D Kurze Einleitung: Wie vlt. bekannt, mache ich gerade eine Ausbildung zum...

PsYch0

Casemodder
Threadstarter
Dabei seit
09.01.2007
Beiträge
2.730
Alter
30
Ort
Oldenburg
Und damit begrüße ich alle Leser die dies interressiert. :D

Kurze Einleitung:
Wie vlt. bekannt, mache ich gerade eine Ausbildung zum Wirtschaftsinformatiker. Wir haben von unserem Lehrer
(der uns HTML etc beibringt) die Aufgabe bekommen, eine Website über ein beliebiges Thema zu erstellen,
bis zu den Weinachtsferien.
Nun werde ich diesen Thread dafür benutzen, meine Ideen vorzustellen, Zwischenergebnisse zu zeigen,
Rückmeldung zu holen und Fragen zu stellen (mit Hoffnung auf rege Beteiligung).

Zur Website:
Die Website soll einen Startschirm haben, bei der man zwischen zwei Buttons wählen kann
(ist ein Teamprojekt mit einem Freund, wir stellen uns beide als Person dar, daher zwei Möglichkeiten).
Die beiden Seiten von uns werden im Design parallel laufen, nur leichte Farbänderungen sollen sein.
Insgesamt soll der Stil eher "Mac" & "Metall" sein, halt metallisch edel :D
Ich habe viele Skizzen, genaue Vorstellungen, muss halt umgesetzt werden.

Meine Ideen (Auszug):
- Startseite mit zwei Möglichkeiten
- parallele Seiten
- gemeinsame Gallery mit Making-of
- aufklappbare Untermenü's (Winboard oben, "Home" etc.)
- Aktionsbanner (ich in aktion mit Skateboard oder so)
- MP3 Player unter Banner implementiert
- optimiert für 1024x768, jedoch variabel in der Breite
- Navileiste wird mit Grafiken gestaltet in einer Tabelle
- Impressum ist von Startseite aus erreichbar (ist das zulässig?)

Soviel von mir, ich setz mich dann mal dran und scanne ein paar Skizzen ein
und fang schonmal an...

Erste Frage: Wie bekomme ich die ausklappbaren Untermenü's hin, wie oben bei Winboard
(wenn ihr auf "Home" klickt z.B.)? Genaue Anleitung und Erklärung wäre schön ;-)
 
S

seppjo

Gast
Das sind Javascript Menus. Ich weiss nicht ob du das wirklich selbst komplett programmieren willst. Im Fall von Winboard sind das ja "Content Management Systeme" in denen Daten eingepflegt werden. Wenn ich es richtig verstehe will ja euer Lehrer das Ihr die Seite selbst komplett programmiert oder?
Muss es reines HTML mit sein? Dürft Ihr Frameseiten benutzen. Sind auch sprachen wie php oder Contentsysteme erlaubt?
 

Martin

Dabei seit
02.12.2008
Beiträge
493
Ort
nähe Wittenburg
Das sind Javascript Menus. Ich weiss nicht ob du das wirklich selbst komplett programmieren willst. Im Fall von Winboard sind das ja "Content Management Systeme" in denen Daten eingepflegt werden. Wenn ich es richtig verstehe will ja euer Lehrer das Ihr die Seite selbst komplett programmiert oder?
Muss es reines HTML mit sein? Dürft Ihr Frameseiten benutzen. Sind auch sprachen wie php oder Contentsysteme erlaubt?

Geht nicht auch mit DHTML? :blink
 
S

seppjo

Gast
Ist das nicht das Gleiche wie dir von mir genannten Optionen?
http://de.wikipedia.org/wiki/Dynamic_HTML
JavaScript, php, perl...
Ist aber nicht unbedingt anfängertauglich. Außerdem programmiert sowas kaum noch jemand selbst, da es ja CMS gibt.
Ich selbst finde *.php *.pl am Effektivsten da es Serverseitig ausgeführt wird. Von ASP würde ich wegen der M$ Abhängigkeit abraten.
 

Martin

Dabei seit
02.12.2008
Beiträge
493
Ort
nähe Wittenburg
Ist das nicht das Gleiche wie dir von mir genannten Optionen?
http://de.wikipedia.org/wiki/Dynamic_HTML
JavaScript, php, perl...
Ist aber nicht unbedingt anfängertauglich. Außerdem programmiert sowas kaum noch jemand selbst, da es ja CMS gibt.

Ui, da sieht man mal wieder wie lange ich schon nicht mehr programmiert habe. Die Frage ist, auch wenn bei ihm php,mysql etc erlaubt ist, dauert es doch dennoch recht lange, etwas auf die Beine zustellen. Angemessen wäre ja ein Templatedesign, auf Basis php/xml. :satisfied
 
S

seppjo

Gast
Genau das klingt Sinvoll. :up Ich weiss aber nicht ob das wirklich schon gefordert wird. Außderdem würde ich da ein fertiges CMS nehmen.
Klar und um in der Umgebung entwickeln zu können benötigt man XAMPP. Sonst lässt sich ja das Ganze nicht mehr lokal testen.
http://de.wikipedia.org/wiki/XAMPP

Hier ein wenig was um den Überblick zu bekommen:
http://de.wikipedia.org/wiki/Active_Server_Pages
http://de.wikipedia.org/wiki/Perl_(Programmiersprache)
http://de.wikipedia.org/wiki/PHP
http://de.wikipedia.org/wiki/Ajax_(Programmierung)

z.B. ist Joomla ein CMS.
http://www.joomla.de/
oder
http://www.redaxo.de/
 

PsYch0

Casemodder
Threadstarter
Dabei seit
09.01.2007
Beiträge
2.730
Alter
30
Ort
Oldenburg
Hui, danke :D

also wir haben HTML und ein anderes Schulfach in dem wir php lernen.
Gefordert ist (soweit ich denke) HTML mit Tabellen, bildern und text.
Aber ein bisschen Eindruck schinden kann ja nicht schaden oder? :)
Hab bis gerade an Photoshop gesessen und mir eine grobe skizze des Aufbaus sowie einige Buttons erstellt.

Farben sind nur zur Unterscheidung^^
vorlageidee.jpg
 
S

seppjo

Gast
Also kannst du Dir sicherheitshalber wegen dem *.php schon mal den XAMPP ziehen. Damit du die *.php Seiten überhaupt lokal testen kannst. Der Aufbau sieht doch schon ganz gut aus. Solltest das aber vorerst mal dann mit reinem HTML/CSS machen.
Bau Dir also ein Tabellenkonstukt das genau so aussieht wie dein Entwurf.
Was die styles angeht würde ich an deiner Stelle direkt mit einem CSS code anfgreifen. Damit kannt du schon mal den Style "Also Schriften" etc. festlegen.
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
Schau mal um so eine Grundstruktur zu bauen gibt es hier super Beispiele und ne Doku
http://de.selfhtml.org/
Achso als Editor für HTML ist der gut:
http://de.wikipedia.org/wiki/KompoZer (Kein großer Schnickschnack und funktioniert auf allen Browsern. Blos keine M$ Programme nehmen)
 

Mike

i7-6700HQ
Dabei seit
21.09.2006
Beiträge
24.384
Ort
Outdoor oder vorm Rechner
Beitrag PsYch0's steiniger Weg zur eigenen Seite
Ich kann dir nur viel Glück wünschen !

Meine persönliche Meinung ist, dass das keiner mehr so wirklich selbst macht, da es fertige CMS und Scripte gibt, die man ein bißchen anpasst.
Selber machen ist zu teuer und braucht Zeit (hat keiner).
Ich selbst "pflege" 4 Homepages inkl. meiner und hätte nie die Zeit etwas ganz selbst zu machen.

Ich wünsche jedenfalls viel Erfolg.

PS: Hier ein ONLINE-Generator für vertikale und horizontale Menüs auf JAVA-Basis.
http://www.hypergurl.com/generators/submenu.html (englisch!)
 
S

seppjo

Gast
Bau vorerst blos noch nichts mit JavaScript. Menüs solltest erstmal weglassen.
Bei WB sind nur die oberen popup Menüs mit JS gemacht. Wenn man JS also deaktiviert funktioniert WB noch sehr gut. Der Rest ist alles gemischt mit anderen Sprachen. HTML, CSS, php and vermtulich ne SQL Datenbank im Hintergrund.

Das Tolle an PHP es wird Serverseitig ausgeführt und generiert HTML codes. Deswegen auch sehr unanfällig gegen Angriffe. Die Browser müssen nur HTML können und die Seiten laufen.
JS codes werden Clientseitig ausgeführt. Bedeutet den code kann jeder sehen, lesen...
 

ModellbahnerTT

Dabei seit
20.04.2005
Beiträge
3.778
Alter
40
Da Frames nicht barrierefrei sind würde ich dazu divs verwenden um deinen Vorschlag zu realisieren.
 

Atem

Dabei seit
19.10.2009
Beiträge
41
Alter
29
Ort
Landkreis Oldenburg
hi,
also hier sind ja schon ganz schön viele Vorschläge eingegangen,
als erstmals sind solche ausklappmenüs nicht zwingend mit js lösbar es gibt auch Methoden die ein ausklappmenü mit css realisieren
man kann im css mit z-index arbeiten und so divs eine ebene vor oder hinter einer anderen ablegen so verschiebt sich das Design bei einem hover effekt nicht.

aber diese Methode ist nicht so viel versprechend wie js.

so zu PsYchOs frage das Impressum einer Webseite muss auf den ersten blick einsehbar sein. das bedeutet nicht zu kleine Schrift oder irgendwo versteckt.

jeder der möchte muss es ohne lange zu suchen finden. je nach Art der Seite gibt es noch einige sonder fälle wie und wo man das Impressum platzieren darf

hier im Forum zum Beispiel finde ich es nur auf der Startseite
das reicht im großen und ganzen auch aus, da man wenn man eine Seite aufruft sich immer zu erst die Startseite ansieht.

dennoch würde es auch nicht schaden es wo anders zu platzieren. es sollte nur nicht in aus klapp Menüs sein denn da ist es nicht auf ersten blick einsehbar.

einen mp3 player kann man einbauen aber dann nicht im Festdesign und wenn dann sollte er nicht Autostarten, denn jedes mal wenn man die Seite wechselt fängt er wieder von vorne an.
Alternativlösungen währen dann dein Tabellendesign in ein frameset zu legen so dass der mp3 Player nicht immer automatisch startet.

die von euch gewählte breite finde ich recht in Ordnung, zumal niemand mehr was kleineres benutzt.

nun da ich ja weiß das php bedauerlicher weise in dem Projekt nicht zulässig ist, habt ihr natürlich viele Hindernisse zu überwinden ich rate euch wirklich gut zu überlegen was ihr macht, denn wenn die Seite zu groß wird dauern kleinste Änderungen unnötig viel zeit.

das war es soweit von mir falls de bei irgendwas tipps oder hilfe brauchst sage bescheid.

mfg
--
Atem

EDIT by Atem:
zum Thema barrierefreiheit könnte ich ein Lied singen denn wenn man mit Tabellen arbeitet hat man schon verloren. aber da dieses projekt möglicher weise nie online kommt ist das mit der barrierefreiheit halb so wild ich kenne zwar 240 Menschen die sich darüber freuen würden aber davon würden 239 Menschen niemals die Seite sehen.
 

PsYch0

Casemodder
Threadstarter
Dabei seit
09.01.2007
Beiträge
2.730
Alter
30
Ort
Oldenburg
Hat lange gedauert, aber dafür habe ich gleich ein paar mehr Meilensteine vorzuweisen.

Jetzt möchte ich das Menü aber zentriert haben, muss ich dafür einen Menüpunkt erstellen, der 1k x Leerzeichen enthält oder lässt sich das durch irgendwie margin im css lösen?
Unten die HTML und CSS Texte.

Entwicklung läuft leider nur schleppend voran, da ich größtenteils alleine arbeite und mein Partner nichts kann/ tut.

Aber mir gefällt es so, das Design ;-)

HTML:
HTML:
<head:>
<style type="text/css">

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_two */

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

</style>
</head>
<body>
<ul class="menu2">
<li class="current"><a href="content.html"><b>Home</b></a></li>
<li><a href="sven.html" target="content"><b>Sven</b></a></li>
<li><a href="felix.html" target="content"><b>Felix</b></a></li>
<li><a href="media.html" target="content"><b>Media</b></a></li>
<li><a href="impressum.html" target="content"><b>Impressum</b></li>
</ul>
</body

CSS:
Code:
#container {
  position:relative;
  margin-left:250px;
  }
#menu {
  text-align:center;
  position:relative;
  height:8em;
  }
.box {
  position:relative;
  float:left;
  top:30px;
  }
#menu a, #menu a:visited {
  position:relative;
  text-decoration:none;
  background-color:#06a;
  color:#fff;
  display:block;
  width:70px;
  height:15px;
  padding:5px;
  margin:0 1px;
  }
#menu a .topleft, #menu a .topright {
  position:absolute;
  top:0;
  width:0;
  height:0;
  overflow:hidden;
  border-top:10px solid #fff;
  }
#menu a .topleft {
  left:0;
  border-right:10px solid #06a;
  }
#menu a .topright {
  left:70px;
  border-left:10px solid #06a;
  }
#menu a:hover {
  background-color:#000;
  }
#menu a:hover .topleft {
  border-right:10px solid #000;
  border-top:10px solid #fff;
  }
#menu a:hover .topright {
  border-left:10px solid #000;
  border-top:10px solid #fff;
  }

Aktuell:

 

BitKiller

Dabei seit
18.07.2007
Beiträge
365
Ort
Paderborn
Wenn ihr bisschen Protzen wollt, hab ich noch was, was ich gemacht habe, als ich am b.i.b. studiert habe.

Ich hab einmal nen Taschenrechner in Java-Script geschrieben, das hat damals glaube ich ne halbe Stunde gedauert (design != optimal). UNd dann hab ich damals Augenkrebs.php geschrieben, die hat alle 100 ms den Hintergrund der html-Datei geändert. Augenkrebs2.php hat dann sogar noch alle 10 ms nen neues Browserfenster geöffnet. Außerdem hab ich damals in php nen !!! kleines !!! Gästebuch mit den wichtigsten Funktionen geschrieben. War eigentlich auch nicht so schwer, Kollege google hilft ja auch fleißig, wenn man nett zu ihm ist.
 

PsYch0

Casemodder
Threadstarter
Dabei seit
09.01.2007
Beiträge
2.730
Alter
30
Ort
Oldenburg
Abgabetermin rückt immer näher, eine Frage zur Sortierung der Dateien schleicht sich ein.
In meinem Root möchte ich es so machen:
-root
|-sites
||-index.html
||-sound.html
||-....
|-pictures
||-banner.png
...

in die index.html soll jetzt die banner.png eingefügt werden, dafür muss ich ja
HTML:
img src="einenordnerhoch/pictures/banner.png
wie formuliere ich dieses "einenordnerhoch"?

mfg, euer PsYch0 ( der den Termin im Nacken hat :D)
 

Mike

i7-6700HQ
Dabei seit
21.09.2006
Beiträge
24.384
Ort
Outdoor oder vorm Rechner
root ist ja eigentlich nicht vorhanden, da eine Homepage sich normalerweise von Standpunkt der index.html ergibt. Ansonsten den kompletten Pfad eingeben!
 
Thema:

PsYch0's steiniger Weg zur eigenen Seite

Oben