Einstieg ins Layout mit Bootstrap bearbeitet von Claus 02.03.2018 16:33 Hallo, ich bitte schon im Voraus um Entschuldigung, wenn das eine Anfängerfrage ist, aber ich bin gerade erst dabei, mich in die Materie einzuarbeiten. Ich möchte auf der Website (siehe URL) meiner Schwester responsives Webdesign umsetzen und habe mir dazu Bootstrap heruntergeladen. Ich weiß allerdings nicht so genau, was ich mit den heruntergeladenen Dateien nun anfangen soll. Ich habe schon hier im Forum gesucht, habe aber keinen Beitrag zu meinem spezifischen Problem finden können. Ich bin auch gerade erst dabei, mich in HTML5 einzuarbeiten. Ich habe nun einmal als ersten Schritt eine Eingangsseite in HTML5 geschrieben und nach den Vorgaben auf der Bootstrap-Seite CSS und JavaScript eingebunden. Der Code: ~~~HTML <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="generator" content="Bluefish 2.2.7" /> <meta name="author" content="Claus Cyrny" /> <meta name="date" content="2018-02-28T13:42:53+0100" /> <meta name="copyright" content="© Copyright 2018 by Barbara Cyrny. All rights reserved." /> <meta name="keywords" content="Agoraphobie, Barbara Cyrny, Blockaden, Depression, Depressionen, Dipl.-Psych., Diplom-Psychologin, Einzeltherapie, energetische Psychotherapie, Gewichtsprobleme, Gruppentherapie, Hypnotherapie, Hypnose, JumboKids, Klopfakupressur, Milton-Erickson, Oberndorf, Panikattacke, Panikattacken, Praxis, ProFit, Prüfungsängste, psychosomatische Beschwerden, Raucherentwöhnung, Rottenburg/N., Rottenburg am Neckar, Schlafstörungen, Schulpsychologin, Verhaltenstherapie" /> <meta name="description" content="Willkommen auf der Website der Dipl.-Psych. Barbara Cyrny." /> <meta name="robots" content="index,follow"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="shortcut icon" href="images/favicon.png" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <title>Barbara Cyrny, Dipl.-Psychologin : Eingangsseite</title> </head> <body> <header id="header"> <a href="index.html"><figure><img src="images/header.jpg" width="250" height="150" alt="Sonne"></figure></a> </header> <nav> <div id="button_startseite"><a href="index.html" onmouseover="change1.src='images/button_startseite_01b.svg'" onmouseout="change1.src='images/button_startseite_01a.svg'"><img src="images/button_startseite_01a.svg" id="change1" width="160" height="43" title="Startseite" alt="Startseite" /></a></div> <div id="button_01"><a href="aktuelles.html" onmouseover="change2.src='images/button_01b.svg'" onmouseout="change2.src='images/button_01a.svg'"><img src="images/button_01a.svg" id="change2" width="160" height="43" title="Aktuelles" alt="Aktuelles" /></a></div> <div id="button_02"><a href="ueber_mich.html" onmouseover="change3.src='images/button_02b.svg'" onmouseout="change3.src='images/button_02a.svg'"><img src="images/button_02a.svg" id="change3" width="160" height="43" title="Über mich" alt="Über mich" /></a></div> <div id="button_03"><a href="therapieangebote.html" onmouseover="change4.src='images/button_03b.svg'" onmouseout="change4.src='images/button_03a.svg'"><img src="images/button_03a.svg" id="change4" width="160" height="43" title="Therapieangebote" alt="Therapieangebote" /></a></div> <div id="button_04"><a href="anfahrt.html" onmouseover="change5.src='images/button_04b.svg'" onmouseout="change5.src='images/button_04a.svg'"><img src="images/button_04a.svg" id="change5" width="160" height="43" title="Anfahrt" alt="Anfahrt" /></a></div> <div id="button_05"><a href="kontakt.html" onmouseover="change6.src='images/button_05b.svg'" onmouseout="change6.src='images/button_05a.svg'"><img src="images/button_05a.svg" id="change6" width="160" height="43" title="Kontakt" alt="Kontakt" /></a></div> </nav> <p id="zitat" onmouseover="this.innerHTML='"Um klar zu sehen, genügt oft ein Wechsel der Blickrichtung." - Antoine de Saint-Exupéry';" onmouseout="this.innerHTML='"Veränderungen führen deutlich öfter zu Einsichten, als dass Einsichten zu Veränderungen führen." - M. Erickson';"> "Veränderungen führen deutlich öfter zu Einsichten, als dass Einsichten zu Veränderungen führen." - M. Erickson </p> <main> <article id="inhalt"> <h1>Willkommen auf der Website meiner privaten Praxis für Psychotherapie</h1> <p> Es gibt Zeiten im Leben, da spüren wir, dass es Zeit für eine Veränderung ist. Jedoch fehlt uns manchmal der Mut oder das Wissen, eine solche Veränderung in die Wege zu leiten. Ich möchte Sie dabei unterstützen, festgefahrene Denk- und Handlungsmuster aufzudecken, um in schwierigen Situationen neue Sichtweisen und Handlungsalternativen zu ermöglichen. Dabei ist es mir ein besonderes Anliegen, Ihre vorhandenen – und vielleicht noch unentdeckten – Stärken aufzuspüren und zu fördern, um daraus Kraft und Mut zu schöpfen. Ich freue mich darauf, Sie auf diesem Weg begleiten zu dürfen. </p> <p> In meiner privaten Praxis biete ich Unterstützung bei <a class="link" href="depressionen.html">Depressionen</a>, Ängsten, psychosomatischen Beschwerden, <a class="link" href="gewichtsreduktion.html">Gewichtsproblemen</a>, <a class="link" href="schlaftraining.html">Schlafstörungen</a> und zur <a class="link" href="raucherentwoehnung.html">Raucherentwöhnung</a> an. Eine detaillierte Übersicht finden Sie in der Rubrik <a class="link" href="therapieangebote.html">Therapieangebote</a>. Schwerpunkte meiner Arbeit sind die <a class="link" href="hypnotherapie.html">Hypnotherapie</a>, <a class="link" href="energetische_psychotherapie.html">Energetische Psychotherapie</a> sowie die <a class="link" href="verhaltenstherapie.html">Verhaltenstherapie</a>. </p> </article> </main> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> ~~~ Kann mir vielleicht jemand sagen, wie ich einen Einstieg in Bootstrap finde und wie ich den obigen Code modifizieren soll? Vielen Dank, Claus P.S.: Den weißen Text und das weiße Logo auf der ursprünglichen Seite hab eich noch nicht eingebaut, weil es mir da, wenn ich die Seite im Handy anschaue, das ganze Layout verspult. Ich bin wie gesagt noch ein Neuling, was responsives Webdesign angeht.
Einstieg ins Layout mit Bootstrap bearbeitet von Claus 02.03.2018 16:34 Hallo, ich bitte schon im Voraus um Entschuldigung, wenn das eine Anfängerfrage ist, aber ich bin gerade erst dabei, mich in die Materie einzuarbeiten. Ich möchte auf der Website (siehe URL) meiner Schwester responsives Webdesign umsetzen und habe mir dazu Bootstrap heruntergeladen. Ich weiß allerdings nicht so genau, was ich mit den heruntergeladenen Dateien nun anfangen soll. Ich habe schon hier im Forum gesucht, habe aber keinen Beitrag zu meinem spezifischen Problem finden können. Ich bin auch gerade erst dabei, mich in HTML5 einzuarbeiten. Ich habe nun einmal als ersten Schritt eine Eingangsseite in HTML5 geschreiben und nach den Vorgaben auf der Bootstrap-Seite CSS und JavaScript eingebunden. Der Code: ~~~HTML <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="generator" content="Bluefish 2.2.7" /> <meta name="author" content="Claus Cyrny" /> <meta name="date" content="2018-02-28T13:42:53+0100" /> <meta name="copyright" content="© Copyright 2018 by Barbara Cyrny. All rights reserved." /> <meta name="keywords" content="Agoraphobie, Barbara Cyrny, Blockaden, Depression, Depressionen, Dipl.-Psych., Diplom-Psychologin, Einzeltherapie, energetische Psychotherapie, Gewichtsprobleme, Gruppentherapie, Hypnotherapie, Hypnose, JumboKids, Klopfakupressur, Milton-Erickson, Oberndorf, Panikattacke, Panikattacken, Praxis, ProFit, Prüfungsängste, psychosomatische Beschwerden, Raucherentwöhnung, Rottenburg/N., Rottenburg am Neckar, Schlafstörungen, Schulpsychologin, Verhaltenstherapie" /> <meta name="description" content="Willkommen auf der Website der Dipl.-Psych. Barbara Cyrny." /> <meta name="robots" content="index,follow"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="shortcut icon" href="images/favicon.png" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <title>Barbara Cyrny, Dipl.-Psychologin : Eingangsseite</title> </head> <body> <header id="header"> <a href="index.html"><figure><img src="images/header.jpg" width="250" height="150" alt="Sonne"></figure></a> </header> <nav> <div id="button_startseite"><a href="index.html" onmouseover="change1.src='images/button_startseite_01b.svg'" onmouseout="change1.src='images/button_startseite_01a.svg'"><img src="images/button_startseite_01a.svg" id="change1" width="160" height="43" title="Startseite" alt="Startseite" /></a></div> <div id="button_01"><a href="aktuelles.html" onmouseover="change2.src='images/button_01b.svg'" onmouseout="change2.src='images/button_01a.svg'"><img src="images/button_01a.svg" id="change2" width="160" height="43" title="Aktuelles" alt="Aktuelles" /></a></div> <div id="button_02"><a href="ueber_mich.html" onmouseover="change3.src='images/button_02b.svg'" onmouseout="change3.src='images/button_02a.svg'"><img src="images/button_02a.svg" id="change3" width="160" height="43" title="Über mich" alt="Über mich" /></a></div> <div id="button_03"><a href="therapieangebote.html" onmouseover="change4.src='images/button_03b.svg'" onmouseout="change4.src='images/button_03a.svg'"><img src="images/button_03a.svg" id="change4" width="160" height="43" title="Therapieangebote" alt="Therapieangebote" /></a></div> <div id="button_04"><a href="anfahrt.html" onmouseover="change5.src='images/button_04b.svg'" onmouseout="change5.src='images/button_04a.svg'"><img src="images/button_04a.svg" id="change5" width="160" height="43" title="Anfahrt" alt="Anfahrt" /></a></div> <div id="button_05"><a href="kontakt.html" onmouseover="change6.src='images/button_05b.svg'" onmouseout="change6.src='images/button_05a.svg'"><img src="images/button_05a.svg" id="change6" width="160" height="43" title="Kontakt" alt="Kontakt" /></a></div> </nav> <p id="zitat" onmouseover="this.innerHTML='"Um klar zu sehen, genügt oft ein Wechsel der Blickrichtung." - Antoine de Saint-Exupéry';" onmouseout="this.innerHTML='"Veränderungen führen deutlich öfter zu Einsichten, als dass Einsichten zu Veränderungen führen." - M. Erickson';"> "Veränderungen führen deutlich öfter zu Einsichten, als dass Einsichten zu Veränderungen führen." - M. Erickson </p> <main> <article id="inhalt"> <h1>Willkommen auf der Website meiner privaten Praxis für Psychotherapie</h1> <p> Es gibt Zeiten im Leben, da spüren wir, dass es Zeit für eine Veränderung ist. Jedoch fehlt uns manchmal der Mut oder das Wissen, eine solche Veränderung in die Wege zu leiten. Ich möchte Sie dabei unterstützen, festgefahrene Denk- und Handlungsmuster aufzudecken, um in schwierigen Situationen neue Sichtweisen und Handlungsalternativen zu ermöglichen. Dabei ist es mir ein besonderes Anliegen, Ihre vorhandenen – und vielleicht noch unentdeckten – Stärken aufzuspüren und zu fördern, um daraus Kraft und Mut zu schöpfen. Ich freue mich darauf, Sie auf diesem Weg begleiten zu dürfen. </p> <p> In meiner privaten Praxis biete ich Unterstützung bei <a class="link" href="depressionen.html">Depressionen</a>, Ängsten, psychosomatischen Beschwerden, <a class="link" href="gewichtsreduktion.html">Gewichtsproblemen</a>, <a class="link" href="schlaftraining.html">Schlafstörungen</a> und zur <a class="link" href="raucherentwoehnung.html">Raucherentwöhnung</a> an. Eine detaillierte Übersicht finden Sie in der Rubrik <a class="link" href="therapieangebote.html">Therapieangebote</a>. Schwerpunkte meiner Arbeit sind die <a class="link" href="hypnotherapie.html">Hypnotherapie</a>, <a class="link" href="energetische_psychotherapie.html">Energetische Psychotherapie</a> sowie die <a class="link" href="verhaltenstherapie.html">Verhaltenstherapie</a>. </p> </article> </main> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> ~~~ Kann mir vielleicht jemand sagen, wie ich einen Einstieg in Bootstrap finde und wie ich den obigen Code modifizieren soll? Vielen Dank, Claus P.S.: Den weißen Text und das weiße Logo auf der ursprünglichen Seite hab eich noch nicht eingebaut, weil es mir da, wenn ich die Seite im Handy anschaue, das ganze Layout verspult. Ich bin wie gesagt noch ein Neuling, was responsives Webdesign angeht.
nicht angemeldet nicht angemeldet
