Kontaktformular, wie einbinden ?

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von Jasko »

So ich habe nun dein Design in Header und Footer geteilt! Aber ACHTUNG, deine Bilder sind alle relativ Verlinkt, das heißt überall dort wo jetzt images/bildname.ext steht muss so was rein, also die URL der Bilder in deinem nPage Account http://file1.npage.de/081508/15/bilder/bildname.ext (Diese URL ist nur eine Beispiel URL)

Es fehlt auch die entsprechende Verlinkung zur CSS Datei
<link href="css/layout.css" rel="stylesheet" type="text/css">

Der Browser weiß nicht wo das ist. Es muss eine Absolute URL her wie bei den Bildern. Hier mein Tutorial dazu, wie man die URLs bekommt

Hier die Aufteilung:

Header:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index.html</title>
    <!-- Bootstrap -->
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <link href="css/layout.css" rel="stylesheet" type="text/css">

   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
  <meta name="description" content="Bilder nach alter Art gemalt und Wandtechniken nach alten Rezepturen angefertigt.">

  </head><meta name="keywords" content="alte Öl Maltechniken, Wandtechnik, Öl Gemälde, malen, fertiggestellt,">

  <body>
  <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div><a href="#"><img src="images/Logo.gif" alt="Logo-kw-painting.at" width="120" height="120" id="ogo"/></a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html" class="active">Home</a>
                </li>
                <li><a href="meine_gemäde.html">meine Gemälde</a>
                </li>
                <li><a href="alte_techniken.html">alte Techniken
                </a></li>
                <li><a href="austellungen.html">Austellungen</a>
                </li>
                <li><a href="#">über mich</a>
                </li>
            </ul>
        </div>
    </div>
</div>
  <div class="container-fluid">
Footer Code:

Code: Alles auswählen

<div class="row" id="footer">
    <div class="col-md-4">
        <p><h2 class="footerh2">Kontaktdaten</h2>
        <p class="footer-p" id="footer-p-tap">Karl Weichinger <br>
          Fladnitz 126 <br>
          A-8163 Fladnitz/Teichalm<br>
          <br>
          Tel.: +43 664 88 41 64 64<br>
          <br>
          EMail: karl.weichinger@semriach.com</p>
        </p>
    </div>
<div class="col-md-4 footer-p footer-a">
  <h2>Links</h2>
  <a href="#" class="footer-a"> Home</a> <br>
  <a href="#" class="footer-a"> meine Gemälde</a> <br>
  <a href="#" class="footer-a"> alte Techniken</a> <br>
  <a href="#" class="footer-a"> Projekte</a> <br>
  <a href="#" class="footer-a"> Kontakt </a></div>
      <div class="col-md-4">
        <h2 class="footerh2">Social Media</h2>
      <a href="#"><img src="images/icon_social_facebook_64.png" width="64" height="64" alt="Icon Facebook"/></a><a href="#"><img src="images/icon_social_twitter_64.png" width="64" height="64" alt="Icon Twitter"/></a><a href="#"><img src="images/icon_social_googlep_64.png" width="64" height="64" alt="Icon Google plus"/></a> </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
  </body>
</html>
Un dieser Code kommt mit hilfe des HTML-Modus vom nPage Editor in eine Textseite, und zwar in die Textseite die als Startseite definiert wurde.

Code: Alles auswählen

<div class="row hidden-xs" id="intro">
    <div class="col-md-12">
        <h1>
        Das größte Verdienst eines Gemäldes ist es,
        </h1>
<h1>        ein Fest für das Auge zu sein.</h1>


        <h2>Ferdinand Victor Eugène Delacroix</h2>
<h3>(1798 - 1863), französischer Maler der Romantik und Grafiker
</h3>
        <img src="images/icon_down.png" alt="icon nach unten scrollen" width="256" height="256" class="icon"/>
       

       
      </div>
    </div>
<h1 class="text" id="pil-h1">Philosophie</h1>
<div class="row" id="pilosopie">
    <div class="col-lg-6 col-xs-10 col-sm-12"><img src="images/Pilosopie.jpg" alt="Philosopie- Selbstportrait mit logo" class="img-responsive" id="philosopie-img">    </div>
<div class="col-md-6 col-lg-6">
  <p>Bereits seit frühester Jugend an, <br>
    ist das Zeichnen und Malen meine Leidenschaft gewesen, <br>
    aber erst im Alter ist mein Hobby zur Berufung geworden. <br>
    Dazu hat es eine allgemeine Ausbildung in den bildenden Künsten bedurft, <br>
    so wie ein zwei Jähriges Fernstudium bei einer Kunstschule <br>
    und diverse Kurse in den verschiedenen Öl Maltechniken. <br>
  <br>
    Ich wünsche ihnen beim Betrachten meiner Bilder viel Freude <br>
    und bedanke mich für Ihr Interesse. </p>
</div>
</div>
<div class="row" id="weg">
  <div class="col-md-12 col-sm12">
    <a href="über_mich.html">
    <button type="button" class="btn btn-default btn-more-l">Mehr über meinen künstlerischen Werdegang
</button>
    </a>  </div>
  <h1 id="derweg">Der Weg zu einem Öl Gemälde</h1>
  <div class="col-md-3 col-sm-6"> <img src="images/planung_weis.gif" alt="Der Weg zu einem Öl Gemäld-Icon Planung" width="137" height="200" id="scrimg01"/>
      <h2>Planung</h2>
        <p class="weg-p">Die Inspiration, <br>
eine Idee und sich Gedanken machen<br>
 wie man dieses am besten Umsetzen könnte.</p>
</div>
<div class="col-md-3 col-sm-6"> <img src="images/ausführung_weiß.gif" alt="Der Weg zu einem Öl Gemäld-Icon Ausführung" width="159" height="200" id="scrimg02"/>
  <h2>Ausführung</h2>
  <p class="weg-p">Die Vorzeichnung -<br>
anschließend die Ausarbeitung, <br>
jäh nach Art des Gemäldes mit verschiedenen
Bindemittel/Farben und Techniken.</p>
</div>
<div class="col-md-3 col-sm-6"><img src="images/fertigstellung_weis.gif" alt="Der Weg zu einem Öl Gemäld-Icon Fertigstellung" width="154" height="200" class="scrimg03"/>
  <h2>Fertigstellung</h2>
  <p class="weg-p">Die Nachbearbeitung -
Ausbessern von kleinen Fehlern vertiefen <br>
der Schatten und anbrigen der Spitzlichter, <br>
nach einigen Monaten Trocknungszeit das Auftragen der Firnis.</p>
</div>
<div class="col-md-3 col-sm-6"><img src="images/presentation_weis.gif" alt="Der Weg zu einem Öl Gemäld-Icon Presendation" width="87" height="200" id="scrimg04"/>
<h2>Presentation</h2>
    <p class="weg-p">Die Übergabe an den Auftraggeber
oder die Presendation bei Austellungen.</p>
</div>
<div class="col-md-12 col-sm12"> </div>
</div>
<div class="row" id="alteTechnik">
    <h1 id="philosopieh1">Alte Öl Maltechniken</h1>
<h1 id="alt-h1">
  Gemälde nach alter Art gemalt - etwas näher betrachtet</h1>
    <a href="alte_techniken.html">
    <button type="button" class="btn btn-default" id="bu-alte-rechts">etwas mehr darüber</button>
    </a>
      <div class="col-md-3 col-sm-6" id="alttech-imag"><img src="images/jesus.jpg" class="img-responsive" alt="Alte Öl Maltechniken-Jesus am Kreuz"><a href="jesus-alte- art.html">
        <button type="button" class="btn btn-default btn-more-gem">Jesus -<br>
mehr darüber</button>
    </a> </div>
    <div class="col-md-3 col-sm-6"><img src="images/judith.jpg" class="img-responsive" alt="Alte Öl Maltechniken-Judith nach Caravagio"><a href="judith_alte-art.html">
      <button type="button" class="btn btn-default btn-more-gem">Judith -<br>
mehr darüber</button>
    </a> </div>
      <div class="col-md-3 col-sm-6"><img src="images/madona.jpg" class="img-responsive" alt="Alte Öl Maltechniken-alba Madonna nach Raffael"><a href="madonna_alte-art.html">
        <button type="button" class="btn btn-default btn-more-gem">Madonna -<br>
mehr darüber</button>
    </a> </div>
      <div class="col-md-3 col-sm-6"><img src="images/rembrandht.jpg" class="img-responsive" alt="Alte Öl Maltechniken-nach Rembrandt-die Überfahrt"><a href="rembrandt_alte-art.html">
        <button type="button" class="btn btn-default btn-more-gem">Rembrandt -<br>
mehr darüber</button>
    </a></div>
</div>
<div class="col-md-12">
    <h1 id="vorh1">Vor kurzem fertiggestellt:</h1>
    </div>
    <div class="row" id="lezte-img">
      <div class="col-md-4 lezte-img">
       
        <div class="row l-img">
          <div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder1.jpg" alt="Vor kurzem fertiggestellt-kleine Almlandschaft" width="280" height="280" id="l-img"/></div>
          <div class="col-md-12 col-sm-6"></div>
          <p class="name">kleine Almlandschaft</p>
          <p class="groese">Öl auf LW 50X50</p>
        </div>
      </div>
<div class="col-md-4">
      <div class="row">
        <div class="col-md-12 col-sm-6"><img src="images/die-Klamm.jpg" alt="Vor kurzem fertiggestellt-die Klamm" width="280" height="280" class="l-img"/></div>
          <div class="col-md-12 col-sm-6"></div>
          <p class="name">die Klamm</p>
          <p class="groese">Öl auf LW 50X70</p>
      </div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder3.jpg" alt="Vor kurzem fertiggestellt-welle am Heck eines Schiffes" width="280" height="280" class="l-img"/></div>
          <div class="col-md-12 col-sm-6"></div>
          <p class="name">Wellen am Heck</p>
          <p class="groese">Öl auf MDF Platte 50X70</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder4.jpg" alt="Vor kurzem fertiggestellt-Venedig in Lasurtechnik" width="280" height="280" class="l-img"/></div>
          <div class="col-md-12 col-sm-6"></div>
          <p class="name">kleines Venedig Bild</p>
          <p class="groese">Öl auf LW 50X50</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder5.jpg" alt="Vor kurzem fertiggestellt-nach Aiwasofski-Venedig" width="280" height="280" class="l-img"/></div>
          <div class="col-md-12 col-sm-6"></div>
          <p class="name">nach Aiwasowski</p>
          <p class="groese">Öl auf Holzplatte 150X133</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <div class="col-md-12 col-sm-6"><img src="images/lezte-Bilder6.jpg" alt="Vor kurzem fertiggestellt-Hotel Styria-Fladnitz" width="280" height="280" class="l-img"/></div>
          <div class="col-md-12 col-sm-6"></div>
          <p class="name">Hotel Styria </p>
          <p class="groese">Öl auf LW 50X70</p>
        </div>
      </div>
    </div>
    <a href="meine_gemäde.html">
    <button type="button" class="btn btn-default btn-more-l btn-more-gem">Mehr über meine Öl Gemälde</button>
    </a>
<div class="row" id="altmeister">
    <div class="col-md-3 col-sm-6"></div>
      <div class="col-md-3 col-sm-6"></div>
      <div class="col-md-3 col-sm-6"></div>
      <div class="col-md-3 col-sm-6"></div>
    </div>
    <div class="row" id="projekte">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <h1 id="wegh1">Projekte Wandtechnik</h1>
      </div>
      <div class="col-md-3 col-sm-6"><img src="images/projekte-1.jpg" class="img-responsive" alt="Projekt Wandtechnik-Antik Wandtechnik"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-2.jpg" class="img-responsive" alt="Projekt Wandtechnik-Jugenstiel Stuck"></div>
<div class="col-md-3 col-sm-6"><img src="images/projekte-3.jpg" class="img-responsive" alt="Projekt Wandtechnik-Stuckmarmor"></div>
      <div class="col-md-3 col-sm-6"><img src="images/projekte-4.jpg" class="img-responsive" alt="Projekt Wandtechnik-Stucco lustro"></div>
      <div class="col-md-3 col-sm-6"><img src="images/projekte-5.jpg" class="img-responsive" alt="Projekt Wandtechnik-Barocke Decke"></div>
      <div class="col-md-3 col-sm-6"><img src="images/projekte-6.jpg" class="img-responsive" alt="Projekt Wandtechnik-Marmorsaulen aussen"></div>
      <div class="col-md-3 col-sm-6"><img src="images/projekte-7.jpg" class="img-responsive" alt="Projekt Wandtechnik-Gewölbe mit gemalten Engel"></div>
      <div class="col-md-3 col-sm-6"><img src="images/projekte-8.jpg" class="img-responsive" alt="Projekt Wandtechnik-Deckenmalerei"></div>
      <div class="col-md-12 col-sm12">
        <a href="wandtechniken.html">
        <button type="button" class="btn btn-default btn-more-l">Mehr über Wandtechnik</button>
      </a>      </div>
</div>
    <div class="row">
      <div class="col-md-12">
        <h1 id="kontakth1">Kontakt</h1>
      </div>
      <div class="col-md-6">
<h2>Meine Adresse:</h2>
        <p id="kontakt-p">Karl Weichinger<br>
          Fladnitz 126 <br>
          A-8163 Fladnitz/Teichalm<br>
        </p>
        <h2>Kontaktformular:</h2>
        <form id="form1" name="form1" method="post">
          <label for="textfield">Name:</label>
          <input type="text" class="form-control" id="textfield">
          <label for="textfield2">E-Mail:</label>
          <input name="textfield2" type="text" class="form-control" id="textfield2">
          <label for="textarea">Nachricht:</label>
          <textarea name="textarea" rows="6" class="form-control" id="textarea"></textarea>
          <button type="button" class="btn btn-default btn-more-gem">Senden</button>
         
        </form>
      </div>
<div class="col-md-6">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2706.7288244982306!2d15.475879615971275!3d47.28055527916445!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476e3eb8b5e811d5%3A0x524cacd95d596938!2sFladnitz+an+der+Teichalm+126%2C+8163+Fladnitz+an+der+Teichalm!5e0!3m2!1sde!2sat!4v1480784859630" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
    </div>
HINWEIS:
Ich habe für bootstrap css und javascript, eine CDN verlinkung vorgenommen, als auch für jquery, aber für eigene css und js Datein muss man die Verlinkung entsprechend anpasse, vorher natürlich die entsprechenden Scripte in den nPage Account hochladen, damit man die Verlinkungen auch machen kann.
Benutzeravatar
karl23
Forengänger
Forengänger
Beiträge: 44
Registriert: Sa 12. Nov 2016, 20:24
Mein Vorname: Karl
Wohnort: Steiermark (A)
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von karl23 »

Danke!
habe jetzt den Code so eingefügt wie du geschrieben hast. funkt jetzt besser, allerdings ist bei der Startseite welche ich nun die Seite "Künstlerischer Werdegang" genommen habe oben auf der Startseite. Als Haupseite kann ich keine index.html angeben da ich sie so nicht verlinken kann.
Schau noch mal auf wk-paint.apage.de nach, dann siehst du was ich meine.
Zu den verlinkungen dann etwas später
LG Karl
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von Jasko »

Ich kann leider nichts sehen, die Seite deren Link du da gelassen hast, kann nicht geladen werden :(
Benutzeravatar
karl23
Forengänger
Forengänger
Beiträge: 44
Registriert: Sa 12. Nov 2016, 20:24
Mein Vorname: Karl
Wohnort: Steiermark (A)
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von karl23 »

http://wk-paint.npage.de/uebermich.html
sorry, habe mich verschrieben
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von Jasko »

Ja das lässt sich einfach erklären, du hast zwei mal den Code drin.

Der Code den du einmal in den Header und einmal in den Footer gemacht hasst, darf nicht mehr in eine Textseite, in diesem Fall in die textseite uebermich.html kommen. Welcher Code doppelt drin ist ist ganz leicht zu sehen, wenn du in einem Browser Fenster dein Design auf machst und dort im Kästchen Header nachschaust, und im anderen die textseite uebermich.html im HTML-Modus, dann wirst du schnell sehen, das der Code am anfang der textseite der selbe ist wie im Header, unda das darf nicht sein, sonnst sieht es so aus wie jetzt.

Einfach den Doppelten code in der Textseite weg löschen.
Benutzeravatar
karl23
Forengänger
Forengänger
Beiträge: 44
Registriert: Sa 12. Nov 2016, 20:24
Mein Vorname: Karl
Wohnort: Steiermark (A)
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von karl23 »

als erste Seite welche im Browser erscheint sollte die index.html sein, das lässt sich aber nicht machen da ich sie nicht Verlinken kann.
Würde ich nun den Code von meiner Index.html aus der Textseite in meinen fall "über mich" herauslöschen so hätte ich als Startseite nur meinen Künstlerischen Werdegang.
Ich will aber als Startseite ab den Absatz Das gröste Verdienst eines Gemäldes...
soll ich noch mal eine Textseite erstellen, diese als Startseite benennen und den Code von meiner index.html Seite einkopieren, könnte das gehen?
Benutzeravatar
karl23
Forengänger
Forengänger
Beiträge: 44
Registriert: Sa 12. Nov 2016, 20:24
Mein Vorname: Karl
Wohnort: Steiermark (A)
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von karl23 »

so habe ich es jetzt gemacht, eine neue Seite erstellt meine Code von der index.html eingefügt, diese als startseite angegeben und jezt sieht es so aus das eigendlich bis auf die nav die ich zwei mal habe alles passt
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von Jasko »

Ich habe bereit geschrieben wie man die Startseite einstellt.

Man macht irgend eine Textseite, man kann diese nennen wie man will, Index, dan wird daraus automatisch index.html, oder man nennt die Seite Startseite, dann macht nPage daraus startseite.html, oder auch Home, dann wird daraus home.html.

Nun geht man unter Design -> Mein Design, dann unter Einstellungen, und sucht sich dort die Startseite aus, da nPage ein Bauckasten ist, muss die Seite nicht zwangsläufig index.html heißen um die Funktion dieser Seite (einer index.html) zu erfühlen.

Darum hatt ich in meinem Post, als ich die Unterteilung gemacht habe, geschrieben, das der eine Teil in eine Textseite soll die als Startseite ausgewählt wird, sommit ist das dan automatisch eben diese, die Startseite.
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von Jasko »

karl23 hat geschrieben:so habe ich es jetzt gemacht, eine neue Seite erstellt meine Code von der index.html eingefügt, diese als startseite angegeben und jezt sieht es so aus das eigendlich bis auf die nav die ich zwei mal habe alles passt
Es passt nicht.
Du hast den Header und den Footer doppelt. Bitte genau nach Anweisung, die Aufteilung, in Header, Footer, und den Teil der der Inhalt einer Textseite ist beachten. Den nur der Teil der eine Textseite darstellt sollte auch in der Textseite drin sein, und nicht nochmal der ganze Code.

Problem ist, wenn du in jede Textseite den ganzen Code machst, dann must du bei nur einem Linkwechsel in der Naviagtion, das alles in jeder Textseite anpassen, so wird es einmal im Design gemacht und es ist auf allen Textseiten eingestellt. ;)
Benutzeravatar
karl23
Forengänger
Forengänger
Beiträge: 44
Registriert: Sa 12. Nov 2016, 20:24
Mein Vorname: Karl
Wohnort: Steiermark (A)
Kontaktdaten:

Re: Kontaktformular, wie einbinden ?

Beitrag von karl23 »

danke Jasko das du dir solche Mühe mit mir machst, ich habe es auch so gemacht- leider habe ich nun zwei mal die Navigation mit dem Logo, kann aber keinen doppelten Code auf der Startseite finden.
sieh noch mal
http://wk-paint.npage.de/neuestartseite.html
LG Karl
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 20 Gäste