Claus: Einstieg ins Layout mit Bootstrap

SELF-Forum

Einstieg ins Layout mit Bootstrap

Claus (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

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:

<!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&uuml;fungs&auml;ngste, psychosomatische
Beschwerden, Raucherentw&ouml;hnung, Rottenburg/N., Rottenburg am Neckar, Schlafst&ouml;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="&Uuml;ber mich" alt="&Uuml;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='&quot;Um klar zu sehen, genügt oft ein Wechsel der Blickrichtung.&quot; - Antoine de Saint-Exupéry';"
onmouseout="this.innerHTML='&quot;Ver&auml;nderungen f&uuml;hren deutlich &ouml;fter zu  Einsichten, als dass Einsichten zu Ver&auml;nderungen f&uuml;hren.&quot; - M. Erickson';">
&quot;Ver&auml;nderungen f&uuml;hren deutlich &ouml;fter zu  Einsichten, als dass Einsichten zu Ver&auml;nderungen f&uuml;hren.&quot; - M. Erickson
</p>

<main>

<article id="inhalt">

<h1>Willkommen auf der Website meiner privaten Praxis f&uuml;r Psychotherapie</h1>

<p>
Es gibt Zeiten im Leben, da sp&uuml;ren wir, dass es Zeit f&uuml;r eine Ver&auml;nderung ist. Jedoch fehlt uns manchmal der Mut oder das Wissen, eine solche Ver&auml;nderung in die Wege zu leiten. Ich m&ouml;chte Sie dabei unterst&uuml;tzen, festgefahrene Denk- und Handlungsmuster aufzudecken, um in schwierigen Situationen
neue Sichtweisen und Handlungsalternativen zu erm&ouml;glichen. Dabei ist es mir ein besonderes Anliegen, Ihre vorhandenen – und vielleicht noch unentdeckten – St&auml;rken aufzusp&uuml;ren und zu f&ouml;rdern, um daraus Kraft und Mut zu sch&ouml;pfen. Ich freue mich darauf, Sie auf diesem Weg begleiten zu d&uuml;rfen.
</p>

<p>
In meiner privaten Praxis biete ich Unterst&uuml;tzung bei <a class="link" href="depressionen.html">Depressionen</a>, &Auml;ngsten, psychosomatischen Beschwerden, <a class="link" href="gewichtsreduktion.html">Gewichtsproblemen</a>, <a class="link" href="schlaftraining.html">Schlafst&ouml;rungen</a> und zur <a class="link" href="raucherentwoehnung.html">Raucherentw&ouml;hnung</a> an. Eine detaillierte &Uuml;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.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Einstieg ins Layout mit Bootstrap

    Matthias Scharwies (Versionen)
    +3 Informationen zu den Bewertungsregeln

    problematische Seite

    Servus!

    ... 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.

    Responsives Webdesign ist gut und erstrebenswert.

    Bootstrap ist ein "Framework", das dazu fertige Layouts und Strukturen bietet. Dazu muss man aber das HTML-Markup mit vielen präsentationsbezogenen Klassen „vollmüllen“. Hier im Forum wirst Du wsl. den Tipp kriegen, dir …

    1. das Markup sauber zu erstellen (hast du schon; die &uuml; können aber ruhig ü bleiben)

    2. ein mobiles Layout (alles untereinander) mit den passenden Farben zu erstellen

    3. dann zu schauen, ob Elemente bei breiteren Viewports nebeneinander positioniert werden können, was mittels media queries relativ einfach geht.

    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.

    Die Grundstruktur ist gut, das ist imho aber Overkill und nicht best practice:

    <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>

    <nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>

    Anstelle von JavaScript kann man dies auch mit CSS (und dann auch für Tastaturbedienung) erreichen.

    nav a {
  color: white;
  background: blue;
}

nav a:hover,
nav a:focus {
  background: darkblue;
}

    Hier einige Links:

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln

    1. Einstieg ins Layout mit Bootstrap

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      problematische Seite

      @@Matthias Scharwies

      Bootstrap ist ein "Framework", das dazu fertige Layouts und Strukturen bietet. Dazu muss man aber das HTML-Markup mit vielen präsentationsbezogenen Klassen „vollmüllen“.

      Mit anderen Worten: Heutzutage ist es deutlich einfacher, seine Seiten ohne Bootstrap zu layouten als mit.

      1. dann zu schauen, ob Elemente bei breiteren Viewports nebeneinander positioniert werden können, was mittels media queries relativ einfach geht.

      Auch das geht heutzutage mitunter einfacher ohne media queries als mit.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Einstieg ins Layout mit Bootstrap

        Matthias Scharwies
        – Informationen zu den Bewertungsregeln

        problematische Seite

        1. dann zu schauen, ob Elemente bei breiteren Viewports nebeneinander positioniert werden können, was mittels media queries relativ einfach geht.

        Auch das geht heutzutage mitunter einfacher ohne media queries als mit.

        Ja, aber wohl eher für Gruppen von gleichartigen Inhalten wie Galerien und noch nicht für ganze Webseiten - obwohl man das mal ausprobieren müsste.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Einstieg ins Layout mit Bootstrap

      Claus
      – Informationen zu den Bewertungsregeln

      problematische Seite

      Hallo Matthias,

      vielen Dank für Deine Antwort und die Links. Ich habe mir jetzt eine Design-Vorlage heruntergeladen, die ich modifizieren möchte.

      Grüße,

      Claus

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Einstieg ins Layout mit Bootstrap

        Matthias Scharwies
        – Informationen zu den Bewertungsregeln

        problematische Seite

        Servus!

        Perfekt! Wenn dort oder in den verlinkten Tutorials etwas unverständlich formuliert ist, scheu Dich nicht hier im Forum nachzufragen.

        Viel Spaß!

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln