• Seite 1 von 1
  • 1
Gemeinschaft uCoz » Für Webmaster » Design » Eigenes Design für uCoz erstellen (Tutorial)
Eigenes Design für uCoz erstellen
Kasach
Beiträge: 726
Ruf: 13
Beitrag # 1 | 15:54 09.02.2012

Tutorial: Eigenes Design auf uCoz erstellen


Hallo uCoz Community,

in diesem Tutorial zeige ich euch, wie man auf uCoz sein eigenes Design erstellt.

Das Tutorial werde ich in 2 Teile teilen.

Im ersten Teil zeige ich euch auf die schnelle, wie man am besten in Adobe Photoshop CS5 ein Design zeichnet.

Dann zeige ich euch im zweiten Teil des Tutorials, wie man ein Design auf uCoz am besten anpasst, und welche Tools sich dafür am besten eignen.

Teil 1 — Design in Photoshop zeichnen




  • Erstellt ein neues Projekt in Photoshop wie folgt:



  • Nachdem ihr das Projekt erstellt habt, solltet ihr zuerst einige Hilfslinien erstellen.
    • Hilfslinien könnt ihr unter Ansicht » Neue Hilfslinien machen.




  • Anschließend sollte es ungefähr so aussehen:



  • Wenn alle Hilfslinien erstellt sind, können wir schon mal anfangen das Design zu zeichnen, so sieht bei mir schon ein Teil vom Header aus:


  • Nach einer weile sollten wir das Design fertig gezeichnet haben

  • Nun müssen wir nur noch das Design "Slicen" dazu müssen wir das Slice-Werkzeug benutzen.

  • Jetzt müssen wir die Bilder abspeichern, wie wir gesliced haben. Dazu müssen wir auf Datei » Für Web und Geräte speichern... gehen.

Anhänge: 6975971.png (36.6 Kb) · 5221332.png (23.2 Kb) · 8403941.png (12.0 Kb) · 0873233.png (183.6 Kb)
Neu bei der uCoz Gemeinschaft? Lese unseren Willkommens Thread.
Kasach
Beiträge: 726
Ruf: 13
Beitrag # 2 | 15:59 09.02.2012

Teil 2 — Design an uCoz anpassen






  • Zuerst sollten wir uns den Standard bearbeitungscode von uCoz besorgen.

    Code
    <html>
    <head>
    <title>[TITLE]</title>
    <link type="text/css" rel="StyleSheet" href="[CSS_URL]" />
    </head>
    <body style="background:#FFFFFF;margin:0;padding:5px;">

    <!-- <header> -->
    <table border="0" cellpadding="2" cellspacing="0" width="100%" style="border:1px solid #A9B8C2;">
    <tr><td style="width:30%;background:#D4DFF7;padding-left:5px;">$WDAY$, $DATE$, $TIME$</td><td align="right" style="background:#D4DFF7;padding-right:5px;"><?if($USER_LOGGED_IN$)?>You logged in as <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | Group "<u>$USER_GROUP$</u>"<?else?>Hello <b>$USERNAME$</b><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td></tr>
    <tr><td colspan="2" style="height:60px;background:#F4F4F4;border-top:1px solid #A9B8C2;border-bottom:1px solid #A9B8C2; padding:10px;"><span style="color:#355473;font:20pt bold Verdana,Tahoma;">SITE LOGO</span></td></tr>
    <tr><td align="right" colspan="2" style="background:#D4DFF7;padding-right:5px;"><a href="$HOME_PAGE_LINK$">Site home</a> <?if($MODULE_URL$)?>| <a href="$MODULE_URL$">$MODULE_NAME$</a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$">Profile page</a><?else?> | <a href="$REGISTER_LINK$">Register now</a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$">Log out</a><?else?> | <a href="$LOGIN_LINK$">Log in</a><?endif?></td></tr>
    </table><div style="padding-top:5px;"></div>
    <!-- </header> -->

    <!-- <middle> -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td valign="top" style="width:200px;">

    <!-- <container> -->

    <!-- <block> -->
    <table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="200">
    <tr><td style="background:#D4DFF7;"><b>» TITLE</b></td></tr>
    <tr><td style="background:#F4F4F4;padding:7px;">CONTENT</td></tr>
    </table>

    <!-- </block> -->

    <!-- </container> -->

    </td>
    <td valign="top" style="padding:0 10px">
    <div style="padding:5px;border:1px solid #A9B8C2;background:#F4F4F4;">[BODY]</div>
    </td>
    <td valign="top" style="width:200px;">

    <!-- <container> -->
    <!-- </container> -->

    </td>
    </tr>
    </table>
    <!-- </middle> -->

    <!-- <footer> -->
    <br/>
    <table border="0" cellpadding="4" cellspacing="0" width="100%" style="border:1px solid #A9B8C2;">
    <tr><td align="center" style="background:#F4F4F4;">[COPYRIGHT]</td></tr>
    <tr><td align="center" style="background:#F4F4F4;">$POWERED_BY$</td></tr>
    </table>
    <!-- </footer> -->

    </body>
    </html>

    <!-- <popup> -->
    <table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="100%">
    <tr><td style="background:#D4DFF7;" align="center"><b>[TITLE]</b></td></tr>
    <tr><td align="center" style="background:#F4F4F4;padding:5px;">[BODY]</td></tr>
    </table>
    <!-- </popup> -->

    • Info:
      Den Code findet man im Verwaltungspanel unter Designverwaltung » Schablonene Generator » Beispiel einer Karkasse.



  • Bearbeitet den anschließend mit Hilfe von Notepad++ oder Adobe Dreamweaver CS5.



  • Nach dem Bearbeiten des Codes sollte es bei euch einigermaßen so aussehen:



  • Vergesst nicht nebenbei auch die CSS für das Design zu bearbeiten, ein Teil meiner CSS sieht so aus:

    • Ich empfehle dazu die CSS von einem uCoz Standard Design zu nehmen, welches ungefähr wie euer Design aussieht.


  • Wenn ihr fertig seit mit dem anpassen, speichert die CSS ab auf eurer Seite, fügt euren HTML-Code vom Design in den Schablonen Generator ein und speichert es ab. Nun müsst ihr noch die einzelnen Module anpassen...

  • Wenn ihr mit allem Fertig seid, sollte das Design bei euch nun richtig funktionieren.




So das wars nun vom Tutorial, hoffe das ich euch damit Helfen könnte.

Falls Fragen dazu bestehen, helfe ich euch gerne :)


MfG

Kasasch
Anhänge: 8821850.png (54.0 Kb) · 4917997.png (36.5 Kb) · 0281629.png (30.8 Kb)
Neu bei der uCoz Gemeinschaft? Lese unseren Willkommens Thread.
lilu
Beiträge: 1590
Ruf: 47
Beitrag # 3 | 17:37 09.02.2012
Kasach, und warum erinnert dieser Tutorial an Tutorial von Cheburator? http://forum.ucoz.de/forum/30-1431-1
Fast gleiche Screenshots und Sätze...

MFG
Macht sich mit uCoz FAQ und Forum Regeln bekannt, bevor ihr Fragen stellt.
uCoz Video Tutorials
Kasach
Beiträge: 726
Ruf: 13
Beitrag # 4 | 18:58 09.02.2012
Hmm, habe aber das "Tutorial" von Cheburator nicht gesehen, und das die Sätze fast gleich sind, ist nur Zufall...

Außerdem ist dort nur wie ich sehe nur wie man ein Design in Photoshop zeichnet (sozusagen erster Teil vom Tutorial von mir).

Nur 2 Bilder ähnel sich gleich der 1. und 3. Screenshot.

Aber ich hoffe dennoch, das es nicht irgendwie als "Plagiat" gezählt wird..
Neu bei der uCoz Gemeinschaft? Lese unseren Willkommens Thread.
Gemeinschaft uCoz » Für Webmaster » Design » Eigenes Design für uCoz erstellen (Tutorial)
  • Seite 1 von 1
  • 1
Suche: