Anfänger Fragen zu Scripten und Formularen

[Creativé]

Hallo erstmal ,
also ich bin absoluter Neuling im Bereich Homepage basteln ( seit 2 Tagen ).
Das einzigste was ich dank Dreamweaver ^^ kann ist bestimmte Bereiche zu verlinken und ein RollOver zu erstellen ( was dank Dreamweaver relativ einfach ist ).

1. Frage:
Wie füge ich das XHTML Script von Map24 in meine Homepage an die richtige Stelle ein ?

Code: Alles auswählen

<!-- Code generated by Map24 Codegenerator -->


<script type='text/javascript'>
  function map24_removeDefaultValues(){
     if (document.link2map24.s.value == 'Adresse')  document.link2map24.s.value  = '';
 
     }
</script>
<form action='http://link2.map24.com' method='get' onsubmit='map24_removeDefaultValues();'  target='_top' name='link2map24'>
<input type='hidden' name='lid'     value='09a5dfe5' />
<input type='hidden' name='maptype'  value='CGI' />
<input type='hidden' name='width'     value='1000' />
<input type='hidden' name='action'     value='route' />
<input type='hidden' name='d'  value="Dellbrück, Bergisch Gladbacher Straße 1007, 51069" />
<input type='hidden' name='dcountry'  value="DE" />

<table>
   <tr>
  <td><b>Start</b> </td>
   </tr>
   <tr>
  <td>
     <input type='text' name='s' value='Adresse' size='20' onfocus="if (this.value == 'Adresse') this.value = '';" /><br />
     z.B. berlin kochweg 10<br />
     <input type='hidden' name='scountry' value='DE' />
  </td>
   </tr>
     <tr>
    <td><b>Ziel</b></td>
     </tr>
     <tr>
    <td>Dellbrück, Bergisch Gladbacher Straße 1007, 51069</td>
     </tr>
   <tr>
  <td>
     <select class='map24_list' name='rtype'>
  <option value='fast'>Schnellste Route</option>
  <option value='short'>Kürzeste Route</option>
   </select>
     <input type='submit' />
  </td>
   </tr>
   </table>
</form>
<!-- // Code generated by Map24 Codegenerator -->

2. Frage

Wie füge ich ein Kontaktfomular in meine Homepage ein ?

Das Erstellen des Designs ( wie im Beispiel gezeigt ) wäre kein Problem aber wie
erstell ich das Script das mir die Email zu geschickt wird.

Beispiel

JA, ich habe auch schon gegoogelt aber die Tutorials die ich dazu gefunden habe, waren für mich als absoluter Anfänger zu kompliziert.



So nun ist mein langer Thread zuende xD
Danke schonmal im Vorraus
mfg reeZe

[Basti]

Hi,

also den Code den du da hast kannst du wunderbar mit CSS ausrichten. Am einfachsten wäre es da wohl, einen div-Layer um das ganze Script zu legen und diesen dann mit Hilfe von Angaben wie float und margin entsprechend auszurichten.
Wie gut sind denn da schon deine CSS Kenntnisse?

Dann zu 2.: Für das Kontaktformular benötigst du dann wieder ein PHP Script. Davon gibt es im Internet wie du schon selbst sagtest viele Tutorials und fertige Scripte, die du dann ähnlich wie dein erstes Script in die Dateien einbinden müsstest.
Aber immer Sachen irgendwo reinzukopieren ohne sie zu verstehen ist ja auch nicht unbedingt ideal, vorallem wenn man Sachen anders machen möchte oder so.
Deshalb würde ich dir empfehlen, dich zumindest mal in ein paar Grundlagen von PHP einzulesen, damit du auch in etwa verstehst, wie sowas abläuft und so.

WIr können dir dann auch gerne dabei helfen

[Creativé]

Hi,

also den Code den du da hast kannst du wunderbar mit CSS ausrichten. Am einfachsten wäre es da wohl, einen div-Layer um das ganze Script zu legen und diesen dann mit Hilfe von Angaben wie float und margin entsprechend auszurichten.
Wie gut sind denn da schon deine CSS Kenntnisse?

Dann zu 2.: Für das Kontaktformular benötigst du dann wieder ein PHP Script. Davon gibt es im Internet wie du schon selbst sagtest viele Tutorials und fertige Scripte, die du dann ähnlich wie dein erstes Script in die Dateien einbinden müsstest.
Aber immer Sachen irgendwo reinzukopieren ohne sie zu verstehen ist ja auch nicht unbedingt ideal, vorallem wenn man Sachen anders machen möchte oder so.
Deshalb würde ich dir empfehlen, dich zumindest mal in ein paar Grundlagen von PHP einzulesen, damit du auch in etwa verstehst, wie sowas abläuft und so.

WIr können dir dann auch gerne dabei helfen

Joa das werd ich dann wohl auch tun müssen Meine CSS Kenntnisse sind = 0 , daher weiss ich auch weder was ein div-layer noch float und margin sind. Aber ich kann es mir denken

Naja ich werd dann wohl mal was lesen müssen ^^
danke

[Basti]

CSS ist im Grunde gar nicht mal so schwierig, das lernt man relativ schnell.

Also div-Layer kannst du dir als Boxen vorstellen, die du zum Layouten, Text reinschreiben usw. verwenden kannst.
Wenn du nun das Script in einen solchen Layer schreibst, hast du über CSS die Möglichkeit, diese "Box" auf der Seite auszurichten, und damit eben auch ihren gesamten Inhalt.
float ist dann dafür zuständig, dass die Box nach rechts ausgerichtet werden kann und mithilfe von margin hast du dann noch die Möglichkeit, seitliche Abstände vom restlichen Inhalt zu definieren.

Hier mal ein simples Beispiel, wobei du die Werte dann für deine Seite anpassen musst.

Code: Alles auswählen

<div style="float: right; margin-left: 10px;">
[Hier kommt das Script hin]
</div>

Je nachdem werden dann aber auch noch ein paar andere CSS Attribute notwendig, das müsste man dann aber sehen.

[Creativé]

ahh danke schonmal für das Beispiel.

Code: Alles auswählen

<div style="float: right; margin-left: 10px;">
[Hier kommt das Script hin]
</div>

Es kommt in den <body> , richtig ?



p.s Wenn ich dir den HTML Code der Seite gebe kannst du das dann vll für mich einbauen ?
Es würde mir sehr beim erlernen helfen , da ich da jetzt schon was länger am rumbasteln bin :D

[Basti]

Ja, richtig, das kommt in den body-Teil. Dort gehören immer alle Sachen rein, die mit der Ausgabe zu tun haben

Aber das Einbauen sollte doch nicht so schwierig sein, oder?
Das Script hast du doch auch schon in deine Seite integriert, und dann musst du eben diese beiden div-Tags nur noch darum schreiben.

[Creativé]

wenn das so einfach wäre

Wenn ich das so einfüge dann , verschiebt sich die ganzen einzelnen Teile der Homepage und es enstehen ein haufen weißer Felder oO

[Basti]

Arbeitest du mit Tabellen? Ich vermute mal ja, da eigentlich jeder so anfängt.

Deshalb rate ich dir auch sofort, auf div-Layer für das gesamte Layout umzusteigen, dazu findest du hier ein sehr gutes Tutorial.

Ansonsten wäre es hilfreich, wenn du mal ein paar Teile des Codes postest, damit ich mir mal einen Überblick über dein Layout verschaffen kann.

[Creativé]

<html>
<head>
<title>Anfahrt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Anfahrt.psd) -->
<table id="Tabelle_01" width="745" height="551" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="21">
<img src="Bilder/Anfahrt_01.gif" width="744" height="8" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/Anfahrt_02.gif" width="6" height="134" alt=""></td>
<td colspan="18">
<img src="Bilder/Anfahrt_03.gif" width="728" height="134" alt=""></td>
<td rowspan="12">
<img src="Bilder/Anfahrt_04.gif" width="10" height="542" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<img src="Bilder/Anfahrt_05.gif" width="5" height="408" alt=""></td>
<td colspan="3" rowspan="3">
<img src="Bilder/Anfahrt_06.gif" width="97" height="37" alt=""></td>
<td colspan="11">
<img src="Bilder/Anfahrt_07.gif" width="417" height="1" alt=""></td>
<td colspan="2" rowspan="3">
<img src="Bilder/Anfahrt_08.gif" width="111" height="37" alt=""></td>
<td colspan="3">
<img src="Bilder/Anfahrt_09.gif" width="104" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="Bilder/Anfahrt_10.gif" width="3" height="43" alt=""></td>
<td rowspan="2">
<img src="Bilder/Anfahrt_11.gif" width="96" height="36" alt=""></td>
<td rowspan="5">
<img src="Bilder/Anfahrt_12.gif" width="3" height="43" alt=""></td>
<td rowspan="2">
<img src="Bilder/Anfahrt_13.gif" width="97" height="36" alt=""></td>
<td rowspan="5">
<img src="Bilder/Anfahrt_14.gif" width="3" height="43" alt=""></td>
<td colspan="2" rowspan="2">
<img src="Bilder/Anfahrt_15.gif" width="99" height="36" alt=""></td>
<td colspan="4">
<img src="Bilder/Anfahrt_16.gif" width="116" height="1" alt=""></td>
<td rowspan="4">
<img src="Bilder/Anfahrt_17.gif" width="2" height="40" alt=""></td>
<td colspan="2" rowspan="3">
<img src="Bilder/Anfahrt_18.gif" width="102" height="37" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="9">
<img src="Bilder/Anfahrt_19.gif" width="2" height="406" alt=""></td>
<td colspan="2">
<img src="Bilder/Anfahrt_20.gif" width="111" height="35" alt=""></td>
<td rowspan="3">
<img src="Bilder/Anfahrt_21.gif" width="3" height="39" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="Bilder/Anfahrt_22.gif" width="97" height="7" alt=""></td>
<td rowspan="3">
<img src="Bilder/Anfahrt_23.gif" width="96" height="7" alt=""></td>
<td rowspan="3">
<img src="Bilder/Anfahrt_24.gif" width="97" height="7" alt=""></td>
<td colspan="2" rowspan="3">
<img src="Bilder/Anfahrt_25.gif" width="99" height="7" alt=""></td>
<td colspan="2" rowspan="2">
<img src="Bilder/Anfahrt_26.gif" width="111" height="4" alt=""></td>
<td colspan="2" rowspan="2">
<img src="Bilder/Anfahrt_27.gif" width="111" height="4" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/Anfahrt_28.gif" width="102" height="3" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="Bilder/Anfahrt_29.gif" width="109" height="367" alt=""></td>
<td colspan="6" rowspan="2">
<img src="Bilder/Anfahrt_30.gif" width="215" height="245" alt=""></td>
<td rowspan="3">
<img src="Bilder/Anfahrt_31.gif" width="5" height="318" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="Bilder/Anfahrt_32.gif" width="11" height="364" alt=""></td>
<td colspan="7" rowspan="3">
<img src="Bilder/Anfahrt_33.gif" width="358" height="344" alt=""></td>
<td rowspan="5">
<img src="Bilder/Anfahrt_34.gif" width="29" height="364" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="242" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="Bilder/Anfahrt_35.gif" width="215" height="73" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="73" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="Bilder/Anfahrt_36.gif" width="86" height="49" alt=""></td>
<td colspan="4" rowspan="2">
<img src="Bilder/Anfahrt_37.gif" width="134" height="31" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="Bilder/Anfahrt_38.gif" width="358" height="20" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="Bilder/Anfahrt_39.gif" width="134" height="18" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/Abstandhalter.gif" width="5" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="3" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="96" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="3" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="97" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="3" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="70" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="29" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="2" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="109" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="2" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="3" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="81" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="30" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="2" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="97" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="5" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>




</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Das is jez die komplette "Anfahrt" Seite. Wo muss ich denn jetzt dein Beispiel einfügen ?
Ich lies mir mal das Tut durch :D

[Basti]

Oh, na so wird das niemals klappen.

Du hast ja überall nur die fertigen Grafiken eingefügt (bzw. es über Photoshop gemacht), was in der Form überhaupt nicht gut gehen kann.
Auf diese Weise kannst du ja in den einzelnen Teilen keine weiteren Inhalte mehr einfügen, ohne die Bilder zu verschieben. Deshalb müssten zumindest einige dieser Bilder als Hintergrund der jeweiligen Bereiche eingestellt werden, da du sonst keinen Inhalt darüber "schreiben" kannst und damit auch nicht die Scripte.

Neben den div-Layern solltest du deshalb auch versuchen, nur wirklich wichtige Grafiken für das Design zu verwenden und in Bereichen wo es sich anbietet, die Hintergrundbilder wiederholen zu lassen, um so die Größe der verwendeten Grafiken nicht zu groß werden zu lassen. Andernfalls müssen deine Besucher immer ewig laden, bis sie überhaupt etwas angezeigt bekommen.

[Creativé]

jop auf die idee bin ich auch schon gekommen aber wie kann ich das basislayout als hintergrund grafik festlegen die halt für jede seite gebraucht wird ?

Ich weiss bei dem Thema garnit wo ich anfangen soll mich zu informieren

[Basti]

Bei deinem Layout sollte das nicht sehr schwierig sein.

So Sachen wie Header un Menüleiste bleiben ja immer gleich, deshalb solltest du erstmal so ein Grundlayout entwerfen, in dem du dann immer nur im Content-Bereich veränderst (also da wo der jeweilige Inhalt der Seite immer drin steht).

Das geht aber alles nicht so schnell und leicht, wenn du das Grundlayout mit div-Layern hinbekommst ist das schonmal ein wichtiger erster Schritt. Die Grafiken kannst du dann anschließend dort einfügen und entsprechend ausrichten.

Dazu solltest du aber lieber erstmal alle wichtigen Grundlagen zum Thema HTML und CSS erlernen, da das sonst nichts gibt.
Eine vernünftige Seite erfordert schon etwas mehr Arbeit und vorallem die nötigen Kenntnisse

Hilfreiche Links für dich könnten zum einen die Tutorials hier auf dW sein und für weitere HTML Grundlagen SELFHTML sowie für die entsprechenden CSS Grundlagen css4you.

[Creativé]

jo da hast du recht :D

naja dann werd ich mir das mal alles durchlesen danke für deine hilfe

[fluuu]

...habe mir den ganzen Thread durchgelesen und finde es sehr witzig aber auch bemerkenswert mit welcher Geduld umgegangen wird. Wenn ich zurück denke, vor vielen, vielen Jahren als ich mit meiner ersten Website angefangen hatte, hätte ich mir nie getraut meine noch vorhandene Dummheit auf diesem Gebiet in einem Forum Preis zu geben. Habe mir das Buch "Die erfolgreiche Homepage" besorgt und noch mit FrontPage an die Arbeit gemacht die Anleitung zu befolgen. Trotzdem hatte ich jeden Fehler zunächst gemacht, den man machen kann und daraus dann eine Menge gelernt.
Heute sollen in zwei Tagen ein paar Fertigscripte zusammengeschustert werden und das Website-Ergebnis soll stehen, bloß gut, dass es auch heute nicht so simpel ist und die Dummheit gegenüber dem ausgebildeten Webdesigner gewinnen kann.
Hier würde ich echt empfehlen sich Grundlagenwissen in HTML anzueignen, vielleicht an Hand eines praktischen Beispiels in Form eines Buches. Sich nur Bruchstücke von Websiteinhalten in Foren sagen zu lassen, obwohl es keinen funktionierenden Sockel gibt, kann doch niemals zu einem gewinnbringenden Ergebnis führen. Da hilft auch alle Nettigkeit an dem Punkt nicht weiter.
Nur lernen hilft oder eben einen Webdesigner beauftragen (siehe Signatur).

gruß fluuu

[mstrauss]

Hallo Fluu,


nur Nichtwissen mit Dummheit gleichzusetzen, ob nun auch Dich selbst oder andere bezogen, ist nicht in Ordnung.

Creative hat ja selbst gemerkt, dass es mit ein paar kleinen Anpassungen nicht getan ist.


Gruß
Markus