Womit erstellt man die Oberfläche einer Hompage?

Hey!

Also ich bin grade dabei mir HTML, PHP und mySQL anzueignen, um meine eigene Homepage zu erstellen. Jetzt stellt sich mir die Frage, wie ich die Oberfläche am besten gesstalte bzw. womit (macht man das mit CSS und mit einer anderen Sprache?)
Also ich dachte da an solche Sachen wie die Navigationsleiste mit Buttons etc. (Klar gibts auch schon Button bei HTML… aber wie werden die schöner gemacht und mit welchem Programm kann ich die Button erstellen? Danke schonmal mfg

micha

Hi Micha,

am einfachsten ist es für den Anfang CSS zum Gestalten der HP zu nehmen (sofern Du es noch nicht hast, besorg dir „selfHTML“ - sehr gut zum Nachschlagen). Tabellen/Frames gehen zwar auch, werden aber bei größeren Sites zu ner Frickelei, deswegen eher nicht zu empfehlen. Mit CSS bist Du recht flexibel.

Es gibt Freeware, mit der Buttons gestaltbar sind, leider finde ich gerade das Programm, was ich dafür mal genutzt habe nicht mehr -.- Vielleicht findest du über Google etwas. Ansonsten wäre für sowas auch noch Javascript möglich. Ich hoffe ich konnte Dir schonmal einige neue Ansatzpunkte geben.

Gruß,
Marcel

Hi Micha,

Buttons würde ich mit Photoshop gestalten - ein freies Tool wäre Gimp (aber das finde ich nicht intuitiv).

Als Editor nimm doch einfach Phase5, das ist ein kostenloses Tool.

Ansonsten ist ja HTML5 jetzt im Kommen - leider kenne ich mich damit (noch) nicht aus, aber ich denke es ist sehr mächtig. Vielleicht sogar beim Thema Buttons.
Für css ist diese Seite sehr hilfreich http://www.css4you.de/

Ich hoffe, das hilft ein bisschen,
viel Spaß,
Iris

Hallo Micha,

um die Grafiken für eine Homepage zu erstellen, brauchst du ein Grafikprogramm wie Photoshop. Alternativ kannst du auch das kostenlose Programm „Gimp“ verwenden.
CSS wird lediglich dazu verwendet, die Grafiken entsprechend anzuordnen, Abstände und Schriften usw. festzulegen.

Hallo Micha,
Deine Anfrage ist ein bisschen seltsam - Du lernst also HTML, PHP und mySQL und möchtest hier „nur“ wissen, wie man dann die Oberfläche gestaltet. Denn PHP- und mySQL-Kenntnisse sind zur grundsätzlichen Gestaltung einer Homepage nicht unbedingt notwendig, doch ohne CSS ist die Gestaltung heutzutage kaum möglich.
Konzentriere Dich also lieber auf HTML und CSS, dazu gibt es sehr gute Online-Tutorials (frag einfach Tante Google). Zum Bauen eigener Homepages eignet sich z.B. das Freeware-Programm NVU, siehe http://www.nvu-composer.de/ - dort lässt sich einfach nachvollziehen, wie Webseiten aufgebaut sind, wie der CSS-Code funktioniert usw.
Wenn Du diesbezüglich durchblickst, kannst Du immer noch PHP und mySQL hinterher lernen. Ein guter Ansatz dafür ist die Verwendung von „Wordpress“, dem kostenlosen Content Management System.

Viel Erfolg
Anke

Moin!

Lerne PHP und mySQL dazu, weil es für meine Zwecke meiner Hompage nötig ist :wink:

Danke und mfg Micha

Hallo micha
Ich denke, ich kann Dir da nicht wirklich weiterhelfen. Ich habe meine Homepages immer mit Netobjects fusion gemacht. Dies ist ein Programm, mit dem man ganz gut Homepages machen kann. Als Output liefert dann das Programm den HTML-Code der Homepage. Dies ist also ähnlich wie bei Microsoft Frontpage, allerdings schon bedeutend komfortabler. Mit HTML-, PHP- oder SQL-Native kenne ich mich daher nicht aus.

Gruß

Hi,
also Grundkenntnisse in HTML hast du?
Sonst -> http://de.selfhtml.org/

Für die Buttons gibt es mehrere Möglichkeiten…

  1. Standard-Buttons verwenden und „verschönern“ mittels CSS ( http://webmatze.de/css-button-tricks/ )

  2. Du benutzt Grafiken die du dann mittels onmouseover-Befehl zu einem Button machst ( http://www.on-mouseover.de/script1.htm )

  3. Du erstellst eine Tabelle die du dann mit CSS zum Navigationsmenü machst ( http://webmatze.de/hierarchische-menus-mit-css-erste… )

oder wie auf http://www.kasselerwohnzimmer.de/hp/index.php

dort ist der Code

(Head)

<!–
#menue {
width:150px;
margin: 10px;
padding:10px;
}

#menue ul, #menue li {
list-style-type: SQUARE;
margin-left:10px;
padding: 0px;
color:#2F2F2F;
}

#menue li a:link, #menue li a:visited, #menue li a:active {display:block;
border-bottom: SOLID 1px #000;
color:800000;text-decoration:none;
background:TRANSPARENT;
font: normal 11px verdana, sans-serif;
padding-top:0px;
padding-bottom:0px;
height: 24px;
line-height: 24px;
}

#menue li a:hover { background-color:#89BD0D;
border-bottom: solid 1px #000;;
color:#FFFFFF;

}

body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
–>

(Body)

wobei ich die Nr. 3 am schönsten und effektivsten finde.

Wenn du mit Grafiken arbeiten möchtest beachte bitte die Ladezeiten von größeren Bildern.

Wenn du ein Bildbearbeitungsprogramm benötigst würde ich GIMP nehmen ( http://www.chip.de/downloads/GIMP-32-Bit_12992070.html )

Als Editor (da wo du den HTML-Text reinschreibst) benutze ich Weaverslave ( http://www.weaverslave.ws/index.3.html )

Sonst würde ich für alles gestalterische auf deiner Seite, so weit es möglich ist, CSS benutzen. Es ist schneller als Grafiken und wird auch von den meisten Browsern unterstützt.

http://de.selfhtml.org/css/index.htm
Hier steht noch einiges über CSS

Ich hoffe ich konnte dir weiterhelfen.
Wenn noch Fragen bestehen oder ich das Thema verfehlt habe melde dich ruhig.

Lg. Stefan

Hi Micha,

mit HTML beschreibst du das Grundgerüst deiner Internetseite. Anleitung unter:

http://de.selfhtml.org/

Die Eigenschaften wie Form, Farbe und Position, beschreibst du am besten in einer CSS Datei. Diese wird in die HTML Datei eingebunden.

Schau mal bei http://www.css4you.de/ dort findest du eine Eigenschaftsreferenz für deine HTML elemente

Mit den beiden Web-Verzeichnissen lernst du eigendlich alles was du brauchst. Am besten ganz klein anfangen.
Und erstmal nur das lernen was du brauchst. Inzwischen ist HTML 5 ein Thema, da kannst du dich auch ein wenig mit beschäftigen.

Im nächsten Schritt kannst du dann anfangen die Seiten dynamisch zu gestalten, mit PHP und mySQL

http://www.selfphp.info/

Falls du ein Content Management System suchst: Viele nehmen Joomla, ich selbst bevorzuge Redaxo.

Achja, hilfreich ist die Developer leiste für den Firefox. Damit kannst du komfortabel deine Seite inspizieren.

Viele Grüße und frohes Schaffen
Marcus

Bilder und Grafiken mit Adobe Photoshop, Illustrater oder ähnliche kostenfreie derivate. HTML, CSS, JS Code mit Notepad++ unter Windows.