Der nächste Schritt zum Webdesign

GFX-Sector - HTML, CSS

GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Der nächste Schritt zum Webdesign

» Hello Guest [Login|Register]

Last Post | First Unread Post

Print Page | Recommend to a Friend | Add Thread to Favorites

HTML, CSS

Einfache Scriptsprachen und deren Layout mit HTML und CSS

Der nächste Schritt zum Webdesign

Author

Post

« Previous Thread | Next Thread »

Cas-

Designartist

Registration Date: 04.05.2009
Posts: 1,305
Program: Photoshop CS4
Deviantart: shinodarush

Der nächste Schritt zum Webdesign

werbefreies Forum?

Hallo Community,
Ich habe jetzt lang und intensiv HTML und CSS geübt und bin jetzt der Meinung einen Schritt weiter in Richtung "Eigene Website" zu gehen.
Ich würde gerne meine Website komplett grafisch anpassen, sodass zB die Navi komplett aus Bildern besteht.

Wie geht das? Was muss ich dabei beachten?

Ich hoffe ihr könnt mir ein zweites mal helfen, der letzte Thread war mir sehr sehr hilfreich!

Mfg, Shino

EDIT: also es geht ums Coden nicht ums designen Wink

.cya

This post has been edited 1 time(s), it was last edited by Cas-: 31.05.2010 22:19.

31.05.2010 22:17

scotty
Epic Arts

Registration Date: 05.07.2008
Posts: 1,152

hmm naja ich bin kein experte auf dem gebiet aber wenn dus einfach haben willst kannst
dass mit dem slice werkzeug von photoshop machen
du nimmst dein design und teilsts mit dem slice werkzeug in flächen auf - photoshop setzt
die dir dann in html um und speichert die bilder der einzelnen flächen in nem extraordner

hab jez kein spezielles tutorial dazu parat aber per google dürfte man da schon einiges
finden...such einfach mal nach "slice tutorial photoshop"
kA ob du auf sowas hinaus wolltest

31.05.2010 22:35

Cas-

Designartist

Registration Date: 04.05.2009
Posts: 1,305
Program: Photoshop CS4
Deviantart: shinodarush

Thread Starter Thread Started by Cas-

Danke für den Tipp^^
Ja vom Slicen hab ich schonmal gehört, auch schon probiert smile

Meine Frage ist bloß, wie code ich das?

.cya

31.05.2010 22:46

scotty
Epic Arts

Registration Date: 05.07.2008
Posts: 1,152

hier n beispiel
du sliced das ding...legst die textflächen fest...
(slice hintergrundart hab ich hier auf ohne gelassen deshalb übernimmt er einfach bgcolor="#FFFFFF" (siehe zeile 6))

und wandelst es per "für web und geräte speichern" in ein html dokument um
text wie auf dem bspbild kommt in der html datei in zeile 16 "hier kommt ein Text rein"
der rest ist einfaches html

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

<html>
<head>
<title>Unbenannt-1</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 (Unbenannt-1) -->
<table id="Tabelle_01" width="500" height="500" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="Bilder/Unbenannt-1_01.gif" width="500" height="168" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="Bilder/Unbenannt-1_02.gif" width="115" height="332" alt=""></td>
		<td width="303" height="163">hier kommt ein Text rein</td>
		<td rowspan="2">
			<img src="Bilder/Unbenannt-1_04.gif" width="82" height="332" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Unbenannt-1_05.gif" width="303" height="169" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

beantwortet das deine frage?

die nummern der flächen stehn ja im eckchen fläche 2 ist gespeichert unter "Bilder/Unbenannt-1_02.gif"

This post has been edited 1 time(s), it was last edited by scotty: 01.06.2010 00:27.

01.06.2010 00:23

bpr

Spender

Registration Date: 18.11.2007
Posts: 557
Location: London
Program: Zend Studio
Forums: Coding; International Section

Fang bloss nicht mit diesem Photoshop Slice kack an. Ganz ehrlich lass es einfach.

Du willst deine Navi aus Bildern machen ?

Dann stellen sich ein paar Fragen:

Was fuer eine Navi ?
Was fuer eine Schriftart ?
Was fuer Schrifteffekte?
Wie weit sollen diese Effekte in verschiedenen Browsern unterstuezt werden?
Gibt es Transparenzen?
Moechtest du einen Sprite verwenden?
Lohnt sich ein Sprite?
Brauchst du nur ein einziges bild, was sich auf der x-achse wiederholt?
Was fuer weitere Effekte hat das ganze teil die beachtet werden sollen?

So, wenn du dir diese Fragen beantwortet hast, greifst du an.

ist nen sprite, und was man dann macht ist ganz einfach:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

#mainMenu{width:1000px;height:50px;background-image:url("tl_files/img/menu_sprite.png");background-repeat:no-repeat;background-position:0px -50px;}
#mainMenu li{float:left;}
#mainMenu li a{width:100px;height:50px;display:inline-block;margin-top:1px;}
#mainMenu li #menu_startseite{width:170px;}
#mainMenu li a#menu_startseite:hover{background-image:url("tl_files/img/menu_sprite.png");background-position:0px 0px;}
#mainMenu li #menu_geistheilung{width:160px;}
#mainMenu li a#menu_geistheilung:hover{background-image:url("tl_files/img/menu_sprite.png");background-position:-170px 0px;}
#mainMenu li #menu_eventkalender{width:160px;}
#mainMenu li a#menu_eventkalender:hover{background-image:url("tl_files/img/menu_sprite.png");background-position:-330px 0px;}
#mainMenu li #menu_seminare{width:150px;margin-left:10px;}
#mainMenu li a#menu_seminare:hover{background-image:url("tl_files/img/menu_sprite.png");background-position:-500px 0px;}
#mainMenu li #menu_hubertruhs{width:150px;margin-left:10px;}
#mainMenu li a#menu_hubertruhs:hover{background-image:url("tl_files/img/menu_sprite.png");background-position:-660px 0px;}
#mainMenu li #menu_kontakt{width:150px;margin-left:10px;}
#mainMenu li a#menu_kontakt:hover{background-image:url("tl_files/img/menu_sprite.png");background-position:-820px 0px;}

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<ul id="mainMenu">
                    <li><a href="index.php" id="menu_startseite"> </a></li>

                    <li><a href="index.php/Geistheilung.html" id="menu_geistheilung"> </a></li>
                    <li><a href="index.php/event-kalender.html"  id="menu_eventkalender"> </a></li>
                    <li><a href="index.php/Seminare.html" id="menu_seminare"> </a></li>
                    <li><a href="index.php/hubert-ruhs.html" id="menu_hubertruhs"> </a></li>
                    <li><a href="index.php/kontakt.html" id="menu_kontakt"> </a></li>
                </ul>

So kann es aussehen.
Es kann aber auch ganz anders geloest werden.
Sprites geben dir aber den vorteil, dass du nur einmal 1 bild uebertragen musst!
Wenn ich das menu mit 5 bildern gemacht haette, haette man 5 bilder uebertragen muessen. Da geht es ein wenig um optimierung. Auf kleinen seiten macht es keinen unterschied, ob man 1 bild uebertragt oder 20. Auf seiten mit 20k benutzern pro tag macht es nen unterschied, weil naemlich 380 000 unnuetze verbindungen auf und abgebaut werden muessen Wink

Bei vertikalen Menus kann das ganz anders aussehen. Wenn du nur nen Verlauf hast brauchst du nur ne grafik die so hoch ist wie dein verlauf, dafuer muss sie aber nur 1px breit sein und du laesst die wiederholen auf der x-achse.

Eine andere art waere, wenn du auf verschiedene browser scheisst, dass du es mit css3 machst : 0

Du koenntest auch schriften ueber css3 einbinden und zum clienten uebertragen

Du koenntest schatteneffekte ueber css3 regeln

aber all diese sachen werden nicht von allen browsern zu 100% unterstuezt. Es spricht aber nichts dagegen sie trotzdem zu verwenden - man sollte es wenigstens einmal machen, damit man seine erfahrung mit der zukunft gemacht hat : ) Denn dadurch brauch man deutlich weniger bilder in seinen webseiten => weniger verbindungsaufbauten, weniger traffic, schnellere webseite ... weitere vorteile liegen klar auf der hand, denn das gilt auch bei mobiltelefonen, kuehlschraenken, fernsehrn usw usw usw -> und da schaltet jeder eigentlich bilder aus, wenn dann die effekte trotzdem mit css angezeigt werden koennen ist schon geil : )

Naja, aber da driften wir gerade zu weit ab.
Was ich empfehle -> mach nen menu und setz es um, aber bitte ohne photoshop slice und son dreck -> selfmade baby

01.06.2010 03:45

Cas-

Designartist

Registration Date: 04.05.2009
Posts: 1,305
Program: Photoshop CS4
Deviantart: shinodarush

Thread Starter Thread Started by Cas-

Wow, vielen vielen Dank euch zwei, hatte nicht so viel erwartet^^

Also zur Navi, hier ist das gute Stück:

Würde das gerne so haben, dass es ein Mouse-Over-Effekt hat, wie es bei Home dargestellt ist. Das soll dann zB bei About grün sein usw Wink
Habe jetzt zwischendurch etwas nach "Webdesign Sprite" gegooglet und glaube, dass ich jetzt verstanden hab was das überhaupt ist^^ Quasi 1 Bild, in dem mehrere drin sind und man sich einzelne Teile rausschneidet Zunge raus

Bin mir jetzt nicht sicher ob es sich für meine Website lohnen würde.
Es soll ein schickes Portfolio sein. Am besten wär ein CMS oder so, damit ich ohne große Probleme meine Artworks usw. hochladen kann. Ein Blog wär auch super.

Ob ich css3 benutze oder css weiss ich eigentlich garnicht so wirklich... ist das denn ein großer Unterschied?
Habe das meiste bis jetzt auf www.little-boxes.de gelernt.

Würde mich freuen wenn ihr mir weiterhin helfen würdet, da ich das ganze nämlich nicht so leicht zu verstehen finde und es meiner Meinung nach auch sehr lange dauert über Google eine Lösung zu finden.

Liebe Grüße, Shino

EDIT: ach ich poste jetzt einfach mal das komplette Design:

Ist aber noch nicht ganz fertig Wink zB der Header/Logo usw...
Wie gehe ich jetzt am Besten vor? Ich möchte das Design komplett Coden.

.cya

This post has been edited 2 time(s), it was last edited by Cas-: 07.06.2010 06:32.

01.06.2010 16:06

quantum

Pfadfinder

Spender

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Ein Blogsystem wie Wordpress wäre ideal, da du zum einen einen Blog, und zum anderen statische Seiten verwalten kannst. Ferner gibt es diverse Plugins die dir helfen, dein Portfolio mit ausreichenden Funktionen auszustatten.

Erster Schritt wäre das Markup. Du erstellst ein grundlegendes Layout mit diversen Boxen/Containern, die den Seitenaufbau repräsentieren.

Dann füllst du das ganz einfach mit den Inhalten, bzw. deren Elemente.

Wenn du dann ein CMS verwendest, lässt du die Elemente der Container einfach dynamisch generieren, was anfangs wohl erstmal nicht für dich in Frage kommt.

Dann passt du den Style an, Bilder „schnippeln“, css usw.

07.06.2010 13:40

Cas-

Designartist

Registration Date: 04.05.2009
Posts: 1,305
Program: Photoshop CS4
Deviantart: shinodarush

Thread Starter Thread Started by Cas-

Habe mich entschieden, die Navigation per Sprite zu machen.
Probiere jetzt schon seit 2h rum aber bekomm das irgendwie nicht hin... im html klappt alles, aber im css hab ich n riesen Fragezeichen übern Kopf -.-

Könnte mir das jemand bitte mal richtig eingeben? Wär echt super nett!

hier ist die Navi:

lg, Shino

.cya

08.06.2010 17:31

Dariusch

Fingerwischer

Registration Date: 01.01.2010
Posts: 31

schreib mal den code hier rein von der ganzen Navileiste und der Css dann korrigier ich dir das

08.06.2010 18:32

Cas-

Designartist

Registration Date: 04.05.2009
Posts: 1,305
Program: Photoshop CS4
Deviantart: shinodarush

Thread Starter Thread Started by Cas-

kk,

html:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>- shinoxero -</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navi">
<ul id="mainMenu">
                    <li><a href="index.php" id="menu_startseite"> </a></li>

                    <li><a href="index.php/gallery.html" id="menu_gallery"> </a></li>
                    <li><a href="index.php/about.html"  id="menu_about"> </a></li>
                    <li><a href="index.php/blog.html" id="menu_blog"> </a></li>
                    <li><a href="index.php/contact.html" id="menu_contact"> </a></li>
                </ul>
<div id="content">
<div id="footer">
</div> <!-- ende footer -->
</div> <!-- ende content -->
</div> <!-- ende navi -->
</div> <!-- ende header -->
</div> <!-- ende wrapper -->
</body>
</html>

css:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

#mainMenu{width:830px;height:46px;background-image:url("img/navi.png");background-repeat:no-repeat;background-position:0px 0px;list-style-type: none; /* ohne Aufzählungspunkte */}
#mainMenu li{float:left;}
#mainMenu li a{width:0px;height:20px;display:inline-block;margin-top:1px;}
#mainMenu li #menu_startseite{width:170px;}
#mainMenu li a#menu_startseite:hover{background-image:url("img/navi.png");background-position:0px -43px;}
#mainMenu li #menu_gallery{width:160px;}
#mainMenu li a#menu_gallery:hover{background-image:url("img/navi.png");background-position:-170px -43px;}
#mainMenu li #menu_about{width:160px;}
#mainMenu li a#menu_about:hover{background-image:url("img/navi.png");background-position:-330px -43px;}
#mainMenu li #menu_blog{width:150px;margin-left:10px;}
#mainMenu li a#menu_blog:hover{background-image:url("img/navi.png");background-position:-500px -43px;}
#mainMenu li #menu_contact{width:150px;margin-left:10px;}
#mainMenu li a#menu_contact:hover{background-image:url("img/navi.png");background-position:-660px -43px;}

wär echt super nett, wenn das jemand für mich kurz anpassen könnte.. steige da nämlich nicht ganz durch, wie das mit dme sprite funktioniert unglücklich

.cya

This post has been edited 1 time(s), it was last edited by Cas-: 09.06.2010 17:18.

08.06.2010 19:24

bpr

Spender

Registration Date: 18.11.2007
Posts: 557
Location: London
Program: Zend Studio
Forums: Coding; International Section

tja, nicht einfach kopieren : ) selber schreiben und verstehen Wink

09.06.2010 20:03

congo
Filtertester

Registration Date: 13.04.2010
Posts: 9

N'abend,

quote:

wär echt super nett, wenn das jemand für mich kurz anpassen könnte

Das bringt dir rein garnichts, da der Lernfaktor gleich null ist.

quote:

.. steige da nämlich nicht ganz durch, wie das mit dme sprite funktioniert unglücklich

Dann übe doch an einem einfachen Beispiel, es muss ja nicht gleich eine komplette Navigation sein. Schau mal hier rein:
http://bueltge.de/css-sprites-einfach-erklaert/675/
-Baue das Beispiel anhand einer von dir erstellten Grafik nach, spiele ein wenig mit dem CSS rum, um mit der Technik (CSS) vertraut zu werden.

Zu deinem HTML:
Dein HTML-Grundgerüst schaut etwas merkwürdig aus. Da passt zum einen der Doctype nicht rein, bei Little-Boxes wird XHTML verwendet.
Unterschiede zwischen HTML und XHTML
Auch die Struktur ist etwas abenteuerlustig, z.B. umschliesst der DIV#header fast die gesamte Seite. Warum?

Hier mal mein Strukturansatz:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de" />
<title>Test</title>
<meta name="description" content="" />
<meta name="author" content="" />
<link href="neu.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="wrapper">

    <div id="header">
        <ul id="navi">
            <li><a href="#" id="startseite"></a></li>
            <li><a href="#" id="gallery"></a></li>
            <li><a href="#" id="about"></a></li>
            <li><a href="#" id="blog"></a></li>
            <li><a href="#" id="contact"></a></li>
        </ul>
    </div> <!-- ende header -->

    <div id="content">
    </div> <!-- ende content -->

    <div id="footer">
    </div> <!-- ende footer -->

</div> <!-- ende wrapper -->

</body>
</html>

Zu deinem CSS:
Warum es bei dir nicht funktioniert dürfte wohl auch daran liegen, das du das erste Listenelement nicht verschoben hast. Denn nach deiner Navigationsgrafik, beginnt der erste Navigationspunkt ja nicht genau linksbündig sondern ungefähr 300px vom linken Rand entfernt.

Hab mal deine Grafik in eine Beispielseite (!) eingebaut:
http://dhx.bplaced.net/gfxs09062010/neu.html
und hier die dazugehörige CSS-Datei:
http://dhx.bplaced.net/gfxs09062010/neu.css

Bitte nicht einfach blind kopieren -wie ich oben schon sagte bringt dir das nix.

This post has been edited 1 time(s), it was last edited by congo: 10.06.2010 04:56.

09.06.2010 20:10

echo
Ohnefiltergrafiker

Registration Date: 01.10.2008
Posts: 361

Nur so nebenbei würde es vieleicht sinnvoller, wenn du vieleicht das mit Klassen machst und nicht mit ID's ...

weil ID's sind einmalig gebrauchbar und klassen kannst du so oft benutzen wie du willst.

und dann kannst du auch sowas machen wir:

code:
1:	<div class="navi 1"></div>

zum Beispiel

Und das CSS ist dann:

code:
1: 2: 3: 4: 5: 6:	.navi { background: url(link/zum/sprite.png); } .1 { background-position: 0 -180px; }

Also dann läd der Browser nicht immer die Backgrounds neu bzw. muss er nicht soviel code verarbeiten.

09.06.2010 21:54

GFX-Sector
unregistered

Have you enjoyed this topic?

If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.

After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.

In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.

Sign up now and enjoy the advantages as a registered member.

(This website will be ad-free after a complete free sign up.)

09.06.2010 21:54

Tree Structure | Board Structure

GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Der nächste Schritt zum Webdesign

Similar topics to Der nächste Schritt zum Webdesign

Thread

Halo Signatur mal was anderes (Forum: Signaturen/Avatare)

Tanne wächst in der Lunge (Forum: World & Hightech News)

[Webdesign/Artwork] BodenseeGrafik Schmierblock :) (Forum: Designs)

TokioStyles Renders (Forum: Ressourcen-Archiv)

Render richtig einarbeiten (Forum: Tutorial Suche)