Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Vertikal Dynamische Page



Ranking: -2   Kommentare: 4   |   Bewertung: Keine Berechtigung!  

Vorwort


Diese Tutorial schließt meiner Tutorial zum Slicen in Photoshop an ;) LInk : http://www.designnation.de/version/?go=Tutorial_lesen&id=509 habe schon wieder neues Design gemacht aber falls ihr das alte verstanden habt werdet ihr das auch verstehen da sehe ich keinen zweifel :O

Schritt 1


Abb.1
Abb.1
Hallo :O ich mal wieder

Naja also auf dem Wunsch von vielen habe ich mich entschlossen euch zu zeigen wie ich eine Page Vertikal Dynamisch machen kann.

Zu erst einmal Vertikal Dynamisch was soll das heißen ? also das bedeutet eigtl. nur dass ihr die Page dynamisch macht also ich habt eure Text fläschen wenn man da Text einfügt werden sie automatisch länger so lang wie Text kommt

Auf dem Screen seht ihr dass ein Bild von meiner Seite wo ich schon alle Teile gelöscht habe die ich nicht mehr brauche :O
und dies ist der Hässliche Quellcode den uns dieses ekelhafte Ps generiert hat :

Code:




<html>

<head>

<title>Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- ImageReady Slices (Page.psd) -->

<table id="Tabelle_01" width="951" height="800" border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td rowspan="9">

            <img src="Bilder/Page_01.jpg" width="222" height="800" alt=""></td>

        <td colspan="3" rowspan="2">

            <img src="Bilder/Head.jpg" width="463" height="180" alt=""></td>

        <td rowspan="9">

            <img src="Bilder/Page_03.jpg" width="92" height="800" alt=""></td>

        <td>

            <img src="Bilder/Page_04.jpg" width="55" height="50" alt=""></td>

        <td rowspan="9">

            <img src="Bilder/Page_05.jpg" width="118" height="800" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="50" alt=""></td>

    </tr>

    <tr>

        <td rowspan="8">

            <img src="Bilder/Page_06.jpg" width="55" height="750" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="130" alt=""></td>

    </tr>

    <tr>

        <td rowspan="7">

            <img src="Bilder/Page_07.jpg" width="16" height="620" alt=""></td>

        <td>

            <img src="Bilder/Text-Oben.jpg" width="429" height="13" alt=""></td>

        <td rowspan="7">

            <img src="Bilder/Page_09.jpg" width="18" height="620" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="13" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="Bilder/Page_10.jpg" width="429" height="52" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="52" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="Bilder/Page_11.jpg" width="429" height="100" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="100" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="Bilder/Blau_unten.jpg" width="429" height="18" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="18" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="Bilder/Page_13.jpg" width="429" height="166" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="166" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="Bilder/Page_14.jpg" width="429" height="44" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="44" alt=""></td>

    </tr>

    <tr>

        <td>

            <img src="Bilder/Page_15.jpg" width="429" height="227" alt=""></td>

        <td>

            <img src="Bilder/Abstandhalter.gif" width="1" height="227" alt=""></td>

    </tr>

</table>

<!-- End ImageReady Slices -->

</body>

</html>




Diesen Quelltext könnt ihr schnappen und in den Papierkorb schmeißen ^^^^^^ ;)

Schritt 2


Abb.2
Abb.2
Naja also ich verwende diesen Quelltext n bissl weiter weil ich das ganze in meinem Schönen Windows Editor mache ;)

so nun weiter im Programm ;)

So nun Macht ihr Das Grundgerüst der Page in etwa so wie Ich hier auf Dem Screen

So und nun kommt der Witz das vertikal Dynamischen in den Flächen die bei Text verlängert werden müssen haut ihr einfach das Bild als Background rein ;) und schon seid ihr also:

Code:




<td Background="Bilder/bild.jpg .... .><?php include "News.php"?></td>




das Include könnt ihr auch ganz einfach mit einem Text ergänzen


Auch wenn etz viele Pds (pr0fessional Designers) den Kopf schütteln und sagen ich hab zu viel zeit aber das wird man soooooooooooo oft gefragt das ist nicht mehr schön

//-------------------------------------------
Ich hoffe das für die Anfänger Nützlich
Und fragt bitte niemals in #html.de oder
#hmtl nach Hilfe Weil die immer auf Css
verweisen ...

wennn ihr hilfe braucht entweder #potboy
im Quakenet oder
Msn: webadmin@pr0fessional-Gamer.de
oder
Skype: gfX.Potboy
//---------------------------------------------


Veröffentlicht von: Potboy
Veröffentlicht am: 20 Mar. 2005
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter:

Kommentar(e) (4)


sam sagt:

Haha die Kritisierung gegen html/html.de ist mal wohl ein witz -.-
Nur weil du scheinbar kein richtges html kannst :ß Tabellen zu benutzen ist FALSCH, daher finde ich das Tutorial logischerweise auch schlecht, auch wenn der Schreibstil OK ist. Nut der inhalt ist halt Grundlegend falsch. Man hat sich nach W3C zu richten und nix anderes

17 Apr. 2005 19:44:06 • Antworten


Imrahil sagt:

Jaja liebe Designer nehmts euch zu Herzen wir Coder hätten beim einbinden von Backends in Designs halb soviel Probleme wenn Dynamik bei euch ein ernsteres thema wäre ;)
Imrahil

5 Apr. 2005 21:12:02 • Antworten


7thCroft sagt:

Naja solche Tuts macht man lieber als Video-Tutorial.

Ich werde demnächst eines machen

21 Mar. 2005 18:25:48 • Antworten


Potboy sagt:

meine 2te Tut

Hatte kleine Zeit Probleme weil ich gleich ins Krankenhaus muss :(

ich werde eine ausfürlichere auf meiner Hp Posten
die bald kommen wird ^^^^^

ansonsten hoffe ich das das diese Frage was Dynamisch ist etc beantwortet habe ;)

20 Mar. 2005 16:44:49 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder