Anzeige
Tutorialbeschreibung

infinity - making of

infinity - making of

Dieses Tut ist weniger ein solches als eine Dokumentation über mein allgemeines Verfahren, das Grundgerüst einer neuen Page zu basteln.

Es zeigt nicht, wie man etwas genau macht, und setzt relativ gute html- und css-Kenntnisse voraus.



 


Willkommen ;D
Im Forum haben viele Leute nicht wirklich ein Konzept, wenn sie eine Page anfangen, sie machen einfach mal drauf los, speichern mit Imageready ihren Code und modifizieren diesen - obwohl sie eigentlich Ahnung davon hätten, wie es gehen müsste (ich wage es mal als gefährliches Halbwissen zu bezeichnen).
Und weil ich grad noch im Kopf hatte, wie ich meine inf-page gemacht hatte, hab ich den Code einfach nochmal stufenweise geschrieben und (hoffentlich) ausreichend und sinnvoll auskommentiert.

Dann wolln wir mal ...
Anfangen sollte man generell immer damit, sich auf einem Papier oder schnell in PS ein Konzept zur Platzverteilung und Namensgebung der Container anzulegen.
Also: welches div ist wie groß, wo kommt was hin, wie nenn ich sie etc.
Bei mir sah das in etwa so aus:
Bilder

Die rote Schrift ist dann hinterher die Klassenbezeichnung im css-teil (also zb div class="header_upper")
alles fertig usw., sieht das ergebnis bei mir dann so aus, obwohl sowohl Grafik als auch der php-Code nicht Teil dieses Tuts sind:
Bilder

(png8 damits nicht zu groß wird... jpeg wäre doppelt so groß :x)


Achtung: nach den html-kommentaren gehts los! ;)
Ich schlage vor, ihr kopiert euch die betreffenden Zeilen in den html-Editor eures Vertrauens, mit syntax highlighting ist das ganze wesentlich einfacher lesbar :)
Ab jetzt sind alle Erläuterungen kommentare:
-php: /* kommentar */ oder // kommentar
-css: /* kommentar */
-html <!-- kommentar -->
glhf ;)
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->


<!-- die ersten divs, das gröbste layout also, wird schematisch geschrieben; dabei hilft die anfangs erstellte graphik -->

<html>
<head>
    <title>the making of infinity</title>
    <style type="text/css">
        <!-- die seite wird mal xhtml, von daher braucht man den style-teil nicht auszukommentieren -->
        html { background: #000; }
        body { margin: 0; }
        .body { /* KLASSE body! hat nichts mit body zu tun! das wird der äußerste frame */ }
        .header { /* selbsterklärend */ }
        .content { /* der mittelteil */ }
        .footer { /* selbsterklärend */ }
    </style>
</head>
<body>
<div class="body">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>
</body>
</html>
<!-- das ergebnis wäre, wenn es denn nun einigermaßen funktionieren WÜRDE, eine große box, die in sich drei weitere boxen, welche eine über der anderen liegen, befinden -->

<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- nächster schritt... den php-teil am anfang einfach nur lesen, verstehen müsst ihr nur die kommentare. -->
<!-- in diesem teil wird das layout vervollständigt, die divs werden im allgemeinen geschrieben, größen werden festgelegt.
bilder werden allerdings noch nicht eingebunden. das ergebnis ist ungefähr das, was man ein gerüst nennen kann. ein buntes noch dazu ;) -->

<?php // dieser teil wird nur zu testzwecken verwendet. die funktion rndcol() gibt eine zufällige farbe aus, mit der man hinterher seine divs umrahmt, um die proportionen zu erkennen, ohne bilder einsetzen zu müssen. um die zufallszahl einzufügen, einfach <*?php rndcol(); ?*> an die stelle einfügen (ohne die sternchen).
srand((double)microtime()*1000000);
function rndcol() { // zur erläuterung...
    $return=""; // der string $return wird als leerer string angelegt...
    for($i=1; $i<=6; $i++) { // for-schleife, 6 durchläufe...
        $return .= dechex(rand(0,15)); // an $return wird bei jedem schleifendurchlauf eine dezimalzahl von 0-15 in form einer hexadezimalzahl von 1-f hinzugefügt...
    }
    echo $return; // das ergebnis ist ein string der form ab2f16; dieser wird ausgegeben
}
?>
<html>
<head>
    <title>the making of infinity</title>
    <style type="text/css">
        <!-- die höhen der einzelnen divs hängen einerseits vom gewünschten design ab, andererseits aber auch alleine von den ausmaßen der graphiken, die mah hinterher einfügen will. diese rndcol();-sache hat mir beim allgemeinen aufbau des layouts ziemlich geholfen. wenns euch stört - lasst es einfach weg ;) -->
        html { background: #fff; }
        body { margin: 0; }
        .body {
            width: 980px; /* feste breite */
            background: #fff; /* weißer bg */
            border: 1px solid #<?php rndcol(); ?>; /* hier wird die obige zufallsfunktion das erste mal benutzt */
            text-align: left; /* linksbündig */
            margin: auto auto; /* element mittig zentrieren */
        }
        /* .header wird aufgespalten in 3 teile: oben, mitte, unten. oben: bild; mitte: navi; unten: bild */
        .header_upper {
            height: 142px;
            border: 1px solid #<?php rndcol(); ?>;
        }
        .header_center {
            height: 24px;
            border: 1px solid #<?php rndcol(); ?>;
        }
        .header_center > div { /* alle divs, die unterhalb eines .header_center-elements liegen, erhalten die folgenden attribute */
            height: 24px;
            float: left;
            border: 1px solid #<?php rndcol(); ?>;
        }
        .header_center_left { /* der teil links neben der navi */
            width: 48px;
        }
        .header_center_right {
            width: 239px;
        }
        .header_center a {
            height: 24px;
            width: 99px;
            border: none;
            display: block; /* wichtig! "um die links aufzuspannen" - sonst wären sie einfach nur null pixel hohe striche, da ein inline-element, wie a es nunmal eines ist, seine ausmaße alleine durch den inhalt erhält */
        }
        .content {
            border: 1px solid #<?php rndcol(); ?>;
            padding: 5px; /* damit hinterher der content-teil nicht so am rand klebt */
        }
        .footer {
            height: 24px;
            border: 1px solid #<?php rndcol(); ?>;
        }
    </style>
</head>
<body>
<!-- so, jetzt haben wir ja eigentlich das ganze layout schon vom grunstil her gebastelt, jetzt müssen nur noch die divs geschrieben werden... -->
<div class="body"> <!-- ich habe mich übrigens für die einbindung aller layout-bilder als bg entschieden, um hinterher leichter banner oä drüber legen zu können. außerdem siehts nicht so doof aus wenn man crtl+a drückt ;) -->
<!--
in der body-klasse sind allgemein 5 divs übereinander angeordnet:
header_upper
header_center (wird noch weiter unterteilt)
header_lower
content
footer
-->
    <div class="header_upper"></div>
    <div class="header_center">
        <div class="header_center_left"></div>
        <div class="menu_1"><a href="#"></a></div>
        <div class="menu_2"><a href="#"></a></div>
        <div class="menu_3"><a href="#"></a></div>
        <div class="menu_4"><a href="#"></a></div>
        <div class="menu_5"><a href="#"></a></div>
        <div class="menu_6"><a href="#"></a></div>
        <div class="menu_7"><a href="#"></a></div>
        <div class="header_center_right"></div>
    </div>
    <div class="header_lower"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>
</body>
</html>

<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- schon der letzte schritt :D -->

<!-- jetzt können die rndcol-teile gelöscht und ggf durch schwarz ersetzt werden;
jetzt ist außerdem die richtige zeit, "kosmetik" wie den doctype, die xml-zeichendeklaration und die meta-tags einzufügen.
jetzt ist auch die richtige zeit, das stylesheet auszulagern. nimm also einfach den teil zwischen <style...> </style> und pack ihn
in eine datei.css. die bilder können jetzt ebenfalls eingefügt werden. am ende des html-teils unten steht das stylesheet.
-->

<?PHP
// start furchtbar komplizierte funktion, die es nur für den ie gibt, weil er kein application/xhtml... kennt... peinlich. den php-teil hier oben müsst ihr nicht verstehen, pinselt den einfach ab :)
function content_type_by_accept() { // müsste mal kompakter realisiert werden
    $accept = isset($_SERVER['HTTP_ACCEPT']) ? $_SERVER['HTTP_ACCEPT'] : 'application/xhtml+xml';
    $accept = preg_replace('/s+/','',$accept); // whitespace entfernen (auch in quoted-strings!)
    $accept = preg_replace('/;[^x00-x1fx7fx80-xff()<>@,;:"/[]?={}s]+=".*(?<!)"/U','',$accept); // token=quoted-string entfernen
    $accept = preg_replace('/;[^qx00-x1fx7fx80-xff()<>@,;:"/[]?={}s][^x00-x1fx7fx80-xff()<>@,;:"/[]?={}s]*(?:=[^x00-x1fx7fx80-xff()<>@,;:"/[]?={}s]+)?/','',$accept); // (außer q=token [eigentlich soll nur q=qvalue bleiben, ein token wird aber in float umgewandelt])
    $accept = explode(',',$accept);
    foreach($accept as $key => $value){
        if($key==0) unset($accept);
        $value = explode(';q=',$value);
        $accept[$value[0]] = count($value)>1 ? (float)$value[1] : 1;
    }
    return !empty($accept['application/xhtml+xml']) ? 'application/xhtml+xml' : 'text/html'; // es sollte auch application/xhtml+xml gesendet werden, wenn text/html nicht akzeptiert wird
}
header('Content-Type: '.content_type_by_accept().';charset=iso-8859-1');
// ende
echo '<?xml version="1.0" encoding="iso-8859-1"?>'."n";
include "encrypt.php"; // das script, das die mailadressen für (für? gegen!) farmbots verschlüsselt (für dieses tut nicht relevant)
include "cms.php"; // die funktionen, die nötig sind, um die news- und memberlisten zu schreiben (ebenfalls nicht relevant)
$pagedir="http://stupidname.org/infinity2"; // um bei bedarf absolute adressen angeben bzw diese schnell ändern zu können
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE"> <!-- namespace nicht vergessen :) -->
<head>
    <meta name="author" content="blackout"/> <!-- selbsterklärend -->
    <meta name="description" content="dieser text wird bei google später mal in der beschreibung der seite angezeigt"/>
    <meta name="keywords" content="hier, kommen, alle, begriffe, rein, die, für, suchmaschinen, interessant, sein, könnten, getrennt, durch, kommata"/>
    <title>infinity</title>
    <link rel="stylesheet" type="text/css" href="style.css"/> <!-- hier wird das externe stylesheet eingebunden -->
    <link rel="icon" href="gfx/layout/icon.ico"/> <!-- das favicon -->
    <!-- <link rel="alternate" type="application/rss+xml" href="rss.php" title="infinity"/> <!-- rss-feed ist sicher nicht sinnvoll, aber eine hübsche spielerei :) (wie man den schreibt wird hier nicht behandelt -->
</head>
<body>
<div class="body">
    <div class="header_upper"></div>
    <div class="header_center">
        <div class="header_center_left"></div>
        <div class="menu_1"><a href="#"></a></div>
        <div class="menu_2"><a href="#"></a></div>
        <div class="menu_3"><a href="#"></a></div>
        <div class="menu_4"><a href="#"></a></div>
        <div class="menu_5"><a href="#"></a></div>
        <div class="menu_6"><a href="#"></a></div>
        <div class="menu_7"><a href="#"></a></div>
        <div class="header_center_right"></div>
    </div>
    <div class="header_lower"></div>
    <div class="content">
        HIER KÖNNTE IHR BLINDTEXT STEHEN ;)
    </div>
    <div class="footer"></div>
</div>
</body>
</html>
<!--/* HIER DAS STYLESHEET */-->
.body { width: 980px; background: #fff; border: 1px solid #000; text-align: left; margin: auto auto; }
.header_upper { height: 142px; background: url(gfx/layout/header_upper.jpg); }
.header_center { height: 24px; }
.header_center > div { height: 24px; float: left; }
.header_center_left { width: 48px; background: url(gfx/layout/header_center_left.jpg); }
.header_center_right { width: 239px; background: url(gfx/layout/header_center_right.jpg); }
.header_center a { height: 24px; width: 99px; border: none; display: block; }
.menu_1 { width: 99px; background: url(gfx/layout/menu_1.jpg); }
.menu_1:hover { background: url(gfx/layout/menu_1.jpg) 99px 0px; }
.menu_2 { width: 99px; background: url(gfx/layout/menu_2.jpg); }
.menu_2:hover { background: url(gfx/layout/menu_2.jpg) 99px 0px; }
.menu_3 { width: 99px; background: url(gfx/layout/menu_3.jpg); }
.menu_3:hover { background: url(gfx/layout/menu_3.jpg) 99px 0px; }
.menu_4 { width: 99px; background: url(gfx/layout/menu_4.jpg); }
.menu_4:hover { background: url(gfx/layout/menu_4.jpg) 99px 0px; }
.menu_5 { width: 99px; background: url(gfx/layout/menu_5.jpg); }
.menu_5:hover { background: url(gfx/layout/menu_5.jpg) 99px 0px; }
.menu_6 { width: 99px; background: url(gfx/layout/menu_6.jpg); }
.menu_6:hover { background: url(gfx/layout/menu_6.jpg) 99px 0px; }
.menu_7 { width: 99px; background: url(gfx/layout/menu_7.jpg); }
.menu_7:hover { background: url(gfx/layout/menu_7.jpg) 99px 0px; }
.header_lower { height: 26px; background: url(gfx/layout/header_lower.jpg); }
.content { background: url(gfx/layout/content.jpg) no-repeat; padding: 5px; }
.footer { height: 24px; background: url(gfx/layout/footer.jpg); border-top: 1px solid #000; }
<!--/* ENDE STYLESHEET */-->




<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->
<!-- =============================================================================================================================== -->

Tjo, vom html her was das schon. da wo bei mir der Blindtext steht, kommt hinterher der Content rein, am besten in ein eigenes div. aber
das hat nicht mehr wirklich etwas mit dem Gesamtkonzept der Page zu tun, vielmehr mit dem Feinschliff. Aber hey, hier wird nicht mal Grafik
verwendet, von daher ist Layouten des Contents nicht wirklich nötig.

Hier könnt ihr übrigens das Ergebnis live ankucken:
http://stupidname.org/infinity2/
(sozusagen als Belohnung für alle, die sich die ganze Suppe da oben durchgelesen haben) ;)



Wenn euch was nicht passt motzt mich einfach im Forum an. ;P
-blackout

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von PitPanda
  • 04.09.2010 - 19:27

Gutes Tut :) Kannte zwar schon alles, aber super für Anfänger.

Portrait von Kalabrix
  • 03.09.2010 - 18:30

Da ich Homepages selber sehr gerne baue, find ich das Tutorial richtig klasse! Aber für welche die keine Ahnung von der Materie haben ist es verwirrend, da sollten dann wirklich noch einige Erklärungen hinzu.

Kleiner Tipp für den Code ;-) Wenn du einen Editor mit Text-Highlightning hast, mache einen Screenshot und füge die Quelldatei als Download dem Tutorial hinzu. :-)

Portrait von _ObiHoernchen_
  • 09.09.2009 - 23:02

klasse arbeit!.....hat mir sehr geholfen

Portrait von quasibodo
  • 25.08.2009 - 20:38

endlich mal jemand, der weiß, wovon er redet und wie man "einfache" Seiten erstellt :)

Portrait von forrest666
  • 15.08.2009 - 09:47

mir hats jetzt auch net sooooo viel weiter geholfen :)

liegt aber denk ich an mir

gruß

Portrait von pegamin
  • 08.08.2009 - 17:21

bisschen komplex für mich aber danke für das tutorial :)

Portrait von jschweitzer
  • 26.06.2009 - 14:43

bisserl unübersichtlich wenn mans vom browser her versucht das tut nachzumachen. Und paar allg. erklärugen fehlen vielleicht, aber ansonsten gutes tut^^

Portrait von juhecomp
  • 18.06.2009 - 09:19

sehr unübersichtlich und nicht gut erklärt
geht es dir nur um die punkte???

Portrait von Golyat
  • 13.06.2009 - 15:07

hat mir überhaupt nich geholfen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.06.2009 - 15:51

Da dieses Thema einen großen Bereich umfasst ist es relativ kurz gefasst und nciht für alle verständlich.

Portrait von jonetsu
  • 10.02.2009 - 21:01

Mal schön zu sehen wie andere so vorgehen =)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.12.2008 - 21:41

Wie mein Vorredner schon sagte, für einen Laien zu unübersichtlich.
Es mangelt an Struktur und der Code ist auch nicht farblich hervorgehoben.....

An sich aber trotzdem gut.

Portrait von Chaos_Infernum
  • 23.11.2008 - 12:05

Leider zu unübersichtlich geschrieben.

Portrait von Chaos_Infernum
  • 23.11.2008 - 12:04

Leider zu unübersichtlich geschrieben.

Portrait von Newbie123
  • 26.10.2008 - 09:29

Viel Text,Kommentare sehr unübersichtlich,die Seite sieht ganz gut aus nur kann man nicht davon ausgehen das jeder einen XHTML fähigen Browser hat,die masse verwendet nun mal IE6-7 und man sollte eine Seite die von vielen gelesen werden soll schon halbwegs unabhängig vom verwendeten Browser machen.Aber vom vorgehen her wie man aus ner PS Seite eine Webseite machen kann ganz ok aber nicht wirklich für jedermann praktikabel

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2008 - 19:01

viel Text, aber viele Informationen!!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.04.2008 - 18:22

Das sieht für mich so aus als wollte er mal schnell Punkte machen :)

Sehr unübersichtlich und einfach nur den Code hingeklatscht.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.03.2008 - 08:17

naja code via copy paste + bissel erklärung mir hätte die herranführung an das eigentliche problem homepage besser gefallen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.03.2008 - 17:32

Ich finde du hättest ein wenig übersichtlicher erklären sollen.
Damit mein ich, du hättest vllt. alles in einzelne Abschnitte(Header, Content-Bereich,...) mit einer eigenen Erklärung schreiben sollen.
Aber sonst wunderbar ;)

Portrait von m-steffen
  • 31.10.2007 - 10:24

tutorial-workshop????????

x
×
×