Dreamweaverdesign im Browser verrutscht

3Antworten
  1. #1
    Avatar von Paulina
    Paulina

    Standard Dreamweaverdesign im Browser verrutscht

    Ich habe mit Dreamweaver eine Testhomepage erstellt, diese hochgeladen und leider verschieben sich Schrift und Bild wenn ich das Internetfenster verschiebe, verkleinere.
    Eigentlich wollte ich ja ein ganz anderes Layout haben, links die Navigationsleiste und nicht oben. Aber wenn ich etwas schreibe verschiebt sich das sobald ich einen Bildplatzhalter auf gleicher Höhe paltzieren will. Und wenn ich mit Frame arbeite krieg ich die komplette Seite nicht gespeichert. Ich bin total Dreamweaver Anfänger und vielleicht habe ich was grundsätzliches am designen in diesem Programm noch nicht kapiert. Bin sehr dankbar für jede Hilfe!

    Achja, wie stelle ich denn die Seitengröße überhaupt ein und vor allem auch auf wie viele Pixel? Arbeite mit einem Mac Book.

    Jedenfalls, das ist die Seite um die es sich handelt:
    https://www.barbarakoedel.de

    Und das der Code zur Seite Portfolio:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 20px;
    }
    .Stil1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    }
    .Stil2 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
    a:link {
    color: #000000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    color: #333333;
    }
    -->
    </style></head>

    <body>
    <p class="Stil1">Barbara Koedel Photography</p>
    <p class="Stil2">HomeInfoContact</p>
    <p class="Stil2">Portfolio 0102 030405 06 07 08 09
    10 11 12 13 14 15 16 17
    18 19 20 prev/next</p>
    <p class="Stil2"></p>
    <p align="right" class="Stil2">[img]bilder/Marie01.jpg[/img]bild0101</p>
    </body>
    </html>

  2. #2
    Avatar von Spyx
    Spyx ist offline

    Title
    Moderator
    seit
    21.08.2006
    Beiträge
    9.155

    Standard Re: Dreamweaverdesign im Browser verrutscht

    Zitat Zitat von Paulina
    Ich habe mit Dreamweaver eine Testhomepage erstellt, diese hochgeladen und leider verschieben sich Schrift und Bild wenn ich das Internetfenster verschiebe, verkleinere.
    Das liegt an HTML, der Skriptsprache, mit der du deine Homepage "zusammenbaust". HTML ist eigentlich dafür ausgelegt, dass es bei jeder Fenstergröße auf jedem Rechner läuft. Und deswegen ist alles, was dargestellt wird, sehr variabel, was die Position angeht.

    Zitat Zitat von Paulina
    Eigentlich wollte ich ja ein ganz anderes Layout haben, links die Navigationsleiste und nicht oben.
    Dann solltest du mit mehrspaltigem CSS-Layout arbeiten.

    Zitat Zitat von Paulina
    Aber wenn ich etwas schreibe verschiebt sich das sobald ich einen Bildplatzhalter auf gleicher Höhe paltzieren will.
    Nach jedem Bild wird normalerweiße eine neue Zeile begonnen. Das kann man mit der Float-Eigenschaft lösen.

    Zitat Zitat von Paulina
    Und wenn ich mit Frame arbeite krieg ich die komplette Seite nicht gespeichert.
    Eine kleine Bitte von einem etwas erfahreneren PC-User: Bitte keine Frames. Es scheint recht einfach zu sein, aber selbst der Erfinder der Frames hat mittlerweile festgestellt, dass das eine für HTML schlechte Erfindung war.

    Zitat Zitat von Paulina
    Ich bin total Dreamweaver Anfänger und vielleicht habe ich was grundsätzliches am designen in diesem Programm noch nicht kapiert. Bin sehr dankbar für jede Hilfe!
    Bei Dreamweaver kann ich dir nicht helfen. Da musst du jmd. anders fragen. Aber, wenn du eine eigene Homepage online stellen willst und diese auch etwas professionell aussehen soll, dann rate ich dir HTML zu lernen. z.B.: https://de.selfhtml.org/

    Zitat Zitat von Paulina
    Achja, wie stelle ich denn die Seitengröße überhaupt ein und vor allem auch auf wie viele Pixel?
    Auf alle Seitengrößen. Von 200x150 Pixel, über 640x480 Pixel bis zum 2185x3412 Pixel. Das macht grade HTML aus. Der Inhalt wird variabel dargestellt. Das Design ist eigentlich nebensächlich bei HTML - was unsere aktuelle Gesellschaft aber nicht versteht / verstehen will.

  3. #3
    Avatar von Paulina
    Paulina

    Standard Re: Dreamweaverdesign im Browser verrutscht

    Vielen dank für deine Hilfe!

    Ich habe heute den ganzen Tag am Computer gesessen und eine Seite mit Stylesheets gebaut. Als ich sie vorhin hochgeladen habe, hatte ich mich schon gefreut, weil im Oprabrowser auf meinem MacBook alles prima aussah. Als ich die Seite dann aber auf einem anderen Computer angeschaut habe, sah sie leider nicht mehr so gut aus.
    Nun ist die Schrift verrutscht und die Bilder sind verzogen. D.h. die Bilder sind in der Länge länger als sie sein sollten. Ich hatte einen Platzhalter mit 600x400 Pixel ins Layout eingefügt und die Hochkantbilder in eine weiße Arbeitsfläche mit dieser Größe kopiert und das ganze dann in den Platzhalter eingefügt.
    Außerdem ist die Seite auf meinem Macbook vollständig zu sehen und auf einem anderen Computer ist sie zu lang.

    Wie stellt man denn den Modus "What you get is what you see" ein? Dachte das wäre automatisch so.

    Hier der Cote zu dieser Seite : https://www.barbarakoedel.de/Portfolio0101.html
    (vielleicht erkennt ja jemand daran was falsch eingestellt ist. ich kapiere das mit der seitengrößeeinstellung einfach nicht. du schreibst ja, dass das bei html egal ist.
    Und "Home" sollte eigentlich auf gleicher Höhe wie "Barbara Koedel Photography" sein.)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    <!--
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }

    .twoColElsLt #container {
    width: 800px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
    }

    .twoColElsLt #sidebar1 {
    float: left;
    width: 90px;
    background: #F2F2F2; /
    padding: opx 0;
    }
    .twoColElsLt #sidebar1 h3, .twoColElsLt #sidebar1 p {
    margin-left: 10px;
    margin-right: 10px;
    }

    .twoColElsLt #mainContent {
    margin: 0 1.5em 0 6em;
    }

    .fltrt {
    float: right;
    margin-left: 8px;
    }
    .fltlft {
    float: left;
    margin-right: 8px;
    }
    .clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }
    .Stil1 {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    }
    .Stil4 {font-size: 12px}
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    a:link {
    color: #000000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #000000;
    }
    a:hover {
    text-decoration: none;
    color: #000000;
    }
    a:active {
    text-decoration: none;
    color: #000000;
    }
    -->
    </style><!--[if IE]>
    <style type="text/css">
    .twoColElsLt #sidebar1 { padding-top: 30px; }
    .twoColElsLt #mainContent { zoom: 1; padding-top: 15px; }
    </style>
    <![endif]--></head>

    <body class="twoColElsLt">

    <div id="container">
    <div id="sidebar1">


    </p>


    Home</p>




    Portfolio</p>


    0111</p>


    0212</p>


    0313</p>


    0414</p>


    0515</p>


    0616</p>


    0717</p>


    0818</p>


    0919</p>


    1020</p>


    </p>


    </p>


    </p>


    </p>


    </p>


    Info</p>


    Contact </p>
    </div>


    </p>


    Barbara Koedel Photography</p>


    prev/<a href="Portfolio0102.html" target="_self">next
    </a></p>


    </p>
    <p align="center">[img]Marie0101.jpg[/img]</p>



    Marie Kienecker, actress</p>


    </p>


    </p>




    </p>
    </div>
    </body>
    </html>

  4. #4
    Avatar von Spyx
    Spyx ist offline

    Title
    Moderator
    seit
    21.08.2006
    Beiträge
    9.155

    Standard Re: Dreamweaverdesign im Browser verrutscht

    Mach den Seitenabstand nicht mit Leerzeichen. Wenn jmd. eine andere Schriftart einstellt, dann ist alles verrückt. Dafür gibt es die CSS-Eigenschaft padding.
    Und keine Platzhalter verwenden. Benutze doch gleich richtige Bilder - und für den Abstand padding bzw. margin.

    Es ist wichtig, dass du deine Seite nicht nur in deinem Opera anschaust. Jeder Browser stellt die Seite anders dar. Ich bin im Moment nicht an meinem heimischen Rechner - sobald ich wieder da bin, poste ich noch einen Link, wo man sehen kann, wie die Webseite in vielen Browsern aussieht.

    HTML passt sich der aktuellen Fenstergröße und der Auflösung an. Das heisst nicht, dass deine Homepage immer so aussieht, wie du das willst.
    Bau deine Seite so, dass sie so aussieht wie su willst, auch wenn du dein Opera-Fenster in der Größe änderst.

Ähnliche Themen

  1. Browser

    Von MarcoL im Forum Webbrowser und Kommunikation
    Antworten: 2
    Letzter Beitrag: 05.11.2007, 07:43
  2. Browser

    Von schmidt im Forum Netzwerk Probleme
    Antworten: 1
    Letzter Beitrag: 22.02.2007, 17:03
  3. Browser

    Von misskissyou im Forum Netzwerk Probleme
    Antworten: 3
    Letzter Beitrag: 14.10.2005, 21:52
  4. partitionen "verrutscht"

    Von anna im Forum Anwendersoftware
    Antworten: 3
    Letzter Beitrag: 15.07.2005, 16:15
  5. Internet Browser ???

    Von Master24 im Forum Netzwerk Probleme
    Antworten: 6
    Letzter Beitrag: 23.05.2005, 19:27

Benutzer, die dieses Thema gelesen haben: 0

Derzeit gibt es keine Benutzer zum Anzeigen.
Diese Seite benutzt Cookies Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies zu. Infos zum Datenschutz