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

PsYch0

Casemodder
Threadstarter
Mitglied seit
09.01.2007
Beiträge
2.730
Alter
29
Standort
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?
 
M

Martin

Mitglied seit
02.12.2008
Beiträge
493
Standort
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.
 
M

Martin

Mitglied seit
02.12.2008
Beiträge
493
Standort
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

PsYch0

Casemodder
Threadstarter
Mitglied seit
09.01.2007
Beiträge
2.730
Alter
29
Standort
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^^
 
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

Mike

i7-6700HQ
Team
Mitglied seit
21.09.2006
Beiträge
24.383
Standort
in der Nähe eines Rechners
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...
 
M

ModellbahnerTT

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

Atem

Mitglied seit
19.10.2009
Beiträge
41
Alter
28
Standort
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

PsYch0

Casemodder
Threadstarter
Mitglied seit
09.01.2007
Beiträge
2.730
Alter
29
Standort
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:

 
B

BitKiller

Mitglied seit
18.07.2007
Beiträge
365
Standort
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.
 
Bullayer

Bullayer

Schwergewicht
Mitglied seit
19.07.2006
Beiträge
24.157
Standort
DE-RLP-COC
@BitKiller: Du bist ein Held, wir sind stolz auf dich. :D
 
PsYch0

PsYch0

Casemodder
Threadstarter
Mitglied seit
09.01.2007
Beiträge
2.730
Alter
29
Standort
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

Mike

i7-6700HQ
Team
Mitglied seit
21.09.2006
Beiträge
24.383
Standort
in der Nähe eines Rechners
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

PsYch0's steiniger Weg zur eigenen Seite - Ähnliche Themen

  • Virenbeseitigung und neu Aktivierung Windows S 3 Laptop

    Virenbeseitigung und neu Aktivierung Windows S 3 Laptop: Habe vor kurzem einen Windows S 3 Laptop von Lenovo gekauft. Heute habe ich die Nachricht erhalten das das Gerät von Viren befallen ist...
  • Windows 10 S Wechsel zu Windows 10 pro nicht möglich, da Microsoft Store fehlt

    Windows 10 S Wechsel zu Windows 10 pro nicht möglich, da Microsoft Store fehlt: Hallo Zusammen, Ich habe mir diese Woche ein Lenovo miix 630 zugelegt mit einem Snapdragon Prozessor. Nun wollte ich von Windows 10 S zu...
  • ****S****t****a****r****t****e****r****p****a****s****s****w****o****r****t**** ****d****e****r**** ****m****o****b****i****l****e****n**** ****W****L

    ****S****t****a****r****t****e****r****p****a****s****s****w****o****r****t**** ****d****e****r**** ****m****o****b****i****l****e****n**** ****W****L: D****a****s S****t****a****r****t****e****r****p****a****s****s****w****o****r****t m****e****i****n****e****s n****e****u****e****n...
  • Laptop mit Smartphone verbinden via Bluetooth. Verbindung passt, überträgt aber gefühlt mit 100 kbp/s.

    Laptop mit Smartphone verbinden via Bluetooth. Verbindung passt, überträgt aber gefühlt mit 100 kbp/s.: Laptop: TREKSTOR Surfbook A13B Smartphone: Motorola Lenovo Moto G7 Power OS: Windows 10 Pro 64-Bit Falls noch was an Specs benötigt wird...
  • Tastatur Fehler (esc öffnet Windows,s den Ordner und mache tasten gehen nicht)

    Tastatur Fehler (esc öffnet Windows,s den Ordner und mache tasten gehen nicht): Ich habe seit einer Woche das Problem dass meine tastatur nach einiger Zeit sich verstellt z.b. bei esc öffne ich Windows bei s öffnet sich mein...
  • Ähnliche Themen

    Oben