Webseite desktop

...komplette Frage anzeigen

5 Antworten

Für die Gestaltung von Webseiten brauchst Du HTML und CSS. HTML dient zur Strukturierung der Inhalte, CSS für die Gestaltung dieser Inhalte. Tutorials für beide Sprachen (die btw. keine Programmiersprachen sind) gibt es im Netz viele.

Bevor Du allerdings einen Desktop nachbaust, solltest Du erstmal eine einfache Webseite bauen - also mit Menü, Inhaltsbereich etc. Wenn Du dir das Wissen hierfür soweit angeeignet hast, kannst Du dir überlegen wie Du einen Desktop damit grafisch nachbilden kannst.

Als Unterstützung für diese Entwicklung brauchst Du sicher auch einige Grafiken, die kannst Du dir im Zweifelsfall einfach selbst erstellen indem Du per Screenshot deinen eigenen Desktop zerlegst und diese Einzelteile dann zu einer Webseite zusammenfügst.

Eine Website die so aussieht?

Dafür reichen Grundlagen in HTML und CSS, um einen Haufen Bilder zu positionieren. Die Bilder werden mit einer Bildbearbeitungs-Software erstellt, per HTML eingebunden und mit CSS an die gewünschten Positionen geschoben.

Das kann auch ein Anfänger nach rund zwei Wochen Einarbeitung hinbekommen.

Wenn sich die Seite aber auch wie ein Desktop verhalten soll, wird die Geschichte interessant. Je nachdem was dargestellt und möglich sein soll, kommen umfangreiche Javascript- und PHP-Kenntnisse hinzu.

Out of the box bzw mit ein, zwei tutorials abgefertigt kriegt man sowas nicht zu Stande. Da spielen viele sehr unterschiedliche Faktoren hinein.

Hier mal quick&dirty ein HTML5 Grundgerüst für Windows 8. Schraube gerade an einer 1zu1 Umsetzung von Windows 8. Also mit Kacheln und allem anderen Zip und Zap ;-) Ähnlich sieht auch mein Grundgerüst aus:

<!doctype html>
<html>
    <head>
        <meta chartset="utf-8">
        <title>Windows 8</title>

        <style type="text/css">
            /* --| Styles here |--- */
        </style>

        <!-- or ext. Stylesheet -->

        <link rel="stylesheet" href="assets/css/style.css">
    </head>
    <body>
        <div id="desktop">
            <section id="main">
                <!-- Content here! -->
            </section>
            <aside id="charmBar">
                <nav>
                    <ul><a class="search" href="#"></a></ul>
                    <ul><a class="share" href="#"></a></ul>
                    <ul><a class="start" href="#"></a></ul>
                    <ul><a class="devices" href="#"></a></ul>
                    <ul><a class="settings" href="#"></a></ul>
                </nav>
            </aside>
        </div>
        <div id="taskBar">
            <nav class="taskApps">
                <ul>
                    <li><a class="explorer" href="#"></a></li>
                    <li><a class="browser" href="#"></a></li>
                    <li><a class="player" href="#"></a></li>
                    <li><a class="editor" href="#"></a></li>
                    <li><a class="appName" href="#"></a></li>   
                </ul>
            </nav>
            <nav class="tray">
                <ul>
                    <li><a class="systemTray" href="#">Tray</a></li>
                    <li><p>network</p></li>
                    <li><p>sound</p></li>
                    <li><p>clock, date</p></li>
                </ul>
            </nav>
        </div>
    </body>
</html>

Kleinen copy&past Fehler gefunden. In der charmBar natürlich die ULs durch LI ersetzten und nur ein umschließendes UL-Element. ;-)) Viel nützen wird es dir sicher ohne HTML Kenntnisse eh nicht.

0

Ich empfehle das Buch HTML Grundkurs Computerpraxis von der Baustelle bis JavaScript (Helmut Erlenkötter bei rororo) - da steht alles drin, was Du brauchst. PHP brauchst Du nicht, CSS auch nicht (kannst Du aber auch aus dem Buch lernen).

Ich habe mir HTML mit dem Netscape Composer (gratis) beigebracht. Damit kann man die Seite grafisch arrangieren (also ohne HTML-Kenntnisse) und dann nachschauen, was der Composer daraus an HTML-Quellcode gemacht hat.

Noch ein super Buch: David Siegel - Web Site Design - Killer Web Sites oder im Web: http://www.killersites.com

da steht alles drin, was Du brauchst. PHP brauchst Du nicht, CSS auch nicht

Dir ist schon klar, das man Struktur (HTML) und dessen Gestaltung (CSS) voneinander trennt?

Ich habe mir HTML mit dem Netscape Composer (gratis) beigebracht.

Sei die Frage erlaubt was du dir genau beigebracht hast? HTML-Pfuscherei? Nicht falsch verstehen, aber bei deiner Aussage sehe ich schon diverse Codezeilen vor mir. Alles andere als semantisch korrekt - und somit nicht valide.

0
@medmonk

"Dir ist schon klar, das man Struktur (HTML) und dessen Gestaltung (CSS) voneinander trennt?" — Das ist kein Gesetz, und die Gestaltung lässt sich rein mit HTML machen, wenn auch nicht so elegant.

0

Brauchst du HTTP und PHP für... vllt auch noch andere Programmiersprachen, aber diese zwei sind schonmal die Grundlage dafür..

Brauchst du HTTP...

HTTP ist keine Programmiersprache sonder steht für Hypertext Transfer Protocol

aber diese zwei sind schonmal die Grundlage dafür..

Auch das ist Murks. Die Grundlage / Basis ist immer noch HTML. Damit werden Inhalten (»what ever«) strukturiert. Deren »aussehen« wird mittels CSS beeinflußt. Sprich die einzelnen Elemente in CSS selektiert und entsprechend formatiert.

Kann mich eigentlich sonst Limearts anschließen. Sobald der Desktop-Nachbau funktionaler werden soll, wirst du um JavaScript, »Ajax« und PHP nicht drum herum kommen.

0

Was möchtest Du wissen?