Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Tabellenbasierte Homepage nach auflösung skalieren

  1. #1
    Teeny
    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Tabellenbasierte Homepage nach auflösung skalieren

    Hallo,

    hier mal kurz die Vorgeschichte :

    Ein Kollege möchte gerne eine eigene Internetpräsenz für seinen nebenberuf. Um ein bisschen Werbung zu machen hat er sich mit einem Grafikdesigner zusammengesetzt und dementsprechend Flyer, Visitenkarten etc. erstellen lassen. Dieser Grafikdesigner hat ebenfalls auch das Design für die Homepage erstellt. Alles in Photoshop gemacht, und mir die .PSD files zukommen lassen.

    Ich habe die .PSD mit Photoshop geöffet und die entsprechend benötigten bereiche "gesliced". In Dreamweaver importiert. Alles funktioniert wunderbar. Die Seite wird Korrekt dargestellt, die "gesliceden" bereiche lassen sich Problemlos mit einem Hyperlink versehen etc.


    Nun zu meinem Problem :

    Durch dieses "slicen" wird die Homepage Tabellenartig aufgebaut. Und überall in den Feldern sitzen eigentlich nur Bilder, welche dann im gesamtbild eine komplette Seite ergeben.

    Mein Ziel ist es nun, dass die Seite, mit jeglicher auflösung auf jedem Monitor auf Volle Größe angezeigt wird.

    Hier mal der Code :

    HTML-Code:
    <html>
    <head>
    <title>links</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (links.psd) -->
    <table id="Tabelle_01" width="1225" height="769" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="24"><a href="index.html"><img src="Bilder/links_01.jpg" width="1224" height="215" alt=""></a></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="215" alt=""></td>
        </tr>
        <tr>
            <td colspan="24">
                <img src="Bilder/links_02.jpg" width="1224" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
        </tr>
        <tr>
            <td colspan="2">
                <img src="Bilder/links_03.jpg" width="166" height="55" alt=""></td>
            <td><a href="neuigkeiten.html"><img src="Bilder/links_04.jpg" width="136" height="55" alt=""></a></td>
            <td>
                <img src="Bilder/links_05.jpg" width="19" height="55" alt=""></td>
            <td colspan="2"><a href="bio.html"><img src="Bilder/links_06.jpg" width="157" height="55" alt=""></a></td>
            <td>
                <img src="Bilder/links_07.jpg" width="18" height="55" alt=""></td>
            <td colspan="3"><a href="leistungen.html"><img src="Bilder/links_08.jpg" width="120" height="55" alt=""></a></td>
            <td>
                <img src="Bilder/links_09.jpg" width="17" height="55" alt=""></td>
            <td colspan="2"><a href="di-noc.html"><img src="Bilder/links_10.jpg" width="124" height="55" alt=""></a></td>
            <td>
                <img src="Bilder/links_11.jpg" width="19" height="55" alt=""></td>
            <td><a href="galerie.html"><img src="Bilder/links_12.jpg" width="83" height="55" alt=""></a></td>
            <td>
                <img src="Bilder/links_13.jpg" width="19" height="55" alt=""></td>
            <td colspan="2" rowspan="2"><a href="referenzen.html"><img src="Bilder/links_14.jpg" width="123" height="57" alt=""></a></td>
            <td>
                <img src="Bilder/links_15.jpg" width="18" height="55" alt=""></td>
            <td><a href="kontakt.html"><img src="Bilder/links_16.jpg" width="86" height="55" alt=""></a></td>
            <td>
                <img src="Bilder/links_17.jpg" width="18" height="55" alt=""></td>
            <td colspan="2" rowspan="2"><a href="links.html"><img src="Bilder/links_18.jpg" width="67" height="57" alt=""></a></td>
            <td>
                <img src="Bilder/links_19.jpg" width="34" height="55" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="55" alt=""></td>
        </tr>
        <tr>
            <td colspan="16">
                <img src="Bilder/links_20.jpg" width="878" height="2" alt=""></td>
            <td colspan="3">
                <img src="Bilder/links_21.jpg" width="122" height="2" alt=""></td>
            <td>
                <img src="Bilder/links_22.jpg" width="34" height="2" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>
        </tr>
        <tr>
            <td colspan="24">
                <img src="Bilder/links_23.jpg" width="1224" height="158" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="158" alt=""></td>
        </tr>
        <tr>
            <td colspan="5" rowspan="2">
                <img src="Bilder/links_24.jpg" width="332" height="226" alt=""></td>
            <td colspan="3"><a href="http://www.xyz.de" target="_blank"><img src="Bilder/links_25.jpg" width="253" height="92" alt=""></a></td>
            <td colspan="16" rowspan="2">
                <img src="Bilder/links_26.jpg" width="639" height="226" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="92" alt=""></td>
        </tr>
        <tr>
            <td colspan="3">
                <img src="Bilder/links_27.jpg" width="253" height="134" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="134" alt=""></td>
        </tr>
        <tr>
            <td colspan="24">
                <img src="Bilder/links_28.jpg" width="1224" height="39" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="39" alt=""></td>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="Bilder/links_29.jpg" width="41" height="72" alt=""></td>
            <td rowspan="3">
                <img src="Bilder/links_30.jpg" width="125" height="58" alt=""></td>
            <td colspan="22">
                <img src="Bilder/links_31.jpg" width="1058" height="18" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="18" alt=""></td>
        </tr>
        <tr>
            <td colspan="7" rowspan="3">
                <img src="Bilder/links_32.jpg" width="444" height="54" alt=""></td>
            <td colspan="3"><a href="impressum.html"><img src="Bilder/links_33.jpg" width="85" height="31" alt=""></a></td>
            <td colspan="5" rowspan="3">
                <img src="Bilder/links_34.jpg" width="230" height="54" alt=""></td>
            <td colspan="5"><a href="http://www.xyz.de" target="_blank"><img src="Bilder/links_35.jpg" width="238" height="31" alt=""></a></td>
            <td colspan="2" rowspan="3">
                <img src="Bilder/links_36.jpg" width="61" height="54" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="31" alt=""></td>
        </tr>
        <tr>
            <td colspan="3" rowspan="2">
                <img src="Bilder/links_37.jpg" width="85" height="23" alt=""></td>
            <td colspan="5" rowspan="2">
                <img src="Bilder/links_38.jpg" width="238" height="23" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="9" alt=""></td>
        </tr>
        <tr>
            <td>
                <img src="Bilder/links_39.jpg" width="125" height="14" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="1" height="14" alt=""></td>
        </tr>
        <tr>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="41" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="125" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="136" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="146" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="89" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="25" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="17" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="62" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="62" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="83" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="47" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="76" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="86" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="40" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>
            <td>
                <img src="Bilder/Abstandhalter.gif" width="34" height="1" alt=""></td>
            <td></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>


    Ich habe versucht in dieser Zeile : <table id="Tabelle_01" width="1225" height="769" border="0" cellpadding="0" cellspacing="0">
    width und height auf 100% zu stellen, aber dann verschiebt sich das ganze, und sieht dementsprechend aus.

    Gibt es eine Möglichkeit alles proportional zu skalieren, ohne dass sich die Seite "zersetzt" ?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    Hallo,

    Gibt es eine Möglichkeit alles proportional zu skalieren, ohne dass sich die Seite "zersetzt" ?
    Ja. Allerdings ist deinem Beispielcode nicht viel zu entnehmen, um dir konkret helfen zu können. So fehlen unter anderem die Bilder. Am sinnvollsten wäre es, wenn du ein Online-Beispiel bereitstellen könntest.

    Insgesamt solltest du auch überlegen, auf das Tabellenlayout zu verzichten. Wie soll die Darstellung zum Beispiel auf Smartphones im Hochformat sein? Bei einer proportionalen Verkleinerung dürfte da kaum noch etwas zu erkennen sein.

    Gruss

    MrMurphy

  3. #3
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    Kann mich MrMurphy nur anschliessen. Ohne Bilder ist da nichts zu machen. Wenn du noxh keinen Webspace hast, dann kannst du dich zum Beispiel bei bplaced.net anmelden und dort kostenlos deine Seite hochladen, oder bei einem anderen Free Webspace Hoster. Stelle uns anschliessend deinen Link zur Verfügung.

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    Wie gewünscht habe ich es mal auf nen webspace geladen...


    EDIT : link entfernt

    Habe nur mal die eine Seite (links.html) + die dazugehörigen Bilder hochgeladen...

    Nimmt es mir nicht übel, aber firmenname etc. habe ich mal verwischt
    Geändert von z1000 (26.01.2014 um 17:19 Uhr)

  5. #5
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    So eine Seite macht man nicht mit Tabellenlayout.

    Du brauchst dafür vom Grafiker lediglich das Bild vom Auto und den gekachelten Hintergrund sowie die geöffnete umgeklappte rote Ecke als Bild. Den Rest der Hintergründe kannst du heute bereits mit CSS3 erledigen. Also alle Farbverläufe und Schatten macht man mit CSS3 und nicht mehr mit Bildern.

    Deine Seite teilst du in 4 Abschnite ein. Von Oben nach unten sind das Header, Navigation, Main und Footer.

    Danach machst du die Einteilung innerhalb dieser Abschnitte.
    Verwende Html für dein Gerüst und CSS zum Stylen.

    Benutze nicht Dreamweaver sondern einen geeigneten Editor. Liste findest du hier: http://de.wikipedia.org/wiki/Liste_von_Texteditoren

    Lerne die HTML.Elemente richtig zu verwenden. Liste der HTML-Elemente findest du hier: http://html5doctor.com/
    Lerne mit CSS3 umzugehen. Übersicht siehe http://meiert.com/de/publications/in...ss-properties/ und Tutorial dazu unter http://webkompetenz.wikidot.com/html-handbuch:css

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    ok, dann werde ich das mal probieren...

    die aufteilung in 4 abschnitte sollten über frames erfolgen ? oder über "<div>" ?

  7. #7
    Bandit
    Gast

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    Auf keinen Fall Frames!

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    alles klar danke

  9. #9
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    Keine Frames und keine Divs. Die Elemente heissen schon so. Warum mache ich mir denn die Mühe und verlinke schon zu den entsprechenden Beiträgen?
    Überleg jetzt mal.

  10. #10
    Teeny
    Themenstarter

    Registriert seit
    26.01.2014
    Beiträge
    25
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellenbasierte Homepage nach auflösung skalieren

    sorry, habe mich falsch ausgedrückt...

    nutze die "sections" elemente... header, nav, main und footer.

    bin gerade daran damit zu werkeln, bisher sieht es ganz ok aus.

    habe noch kleine probleme beim gestalten, aber diese möchte ich hier erstmal noch nicht erfragen, sondern selbst ein wenig ausprobieren.

Ähnliche Themen

  1. Hompage je nach auflösung verändern
    Von Sunteufel im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 08.07.2008, 20:52
  2. Auflösung Skalieren mit PHP? - Nicht mit Javascript!
    Von PM im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 08.11.2006, 21:49
  3. Antworten: 4
    Letzter Beitrag: 03.09.2006, 16:49
  4. weiterleitung nach auflösung
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 20.12.2005, 01:40
  5. Bilder prozentual nach größe der Auflösung darstellen
    Von eNeRgY im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 12.08.2005, 00:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •