zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden richtig slicen / ausschneiden von Webseiten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.10.2011, 20:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2011
Beiträge: 24
StefanK befindet sich auf einem aufstrebenden Ast
Standard richtig slicen / ausschneiden von Webseiten

Hallo,

mein Name ist Stefan.

Ich fange jetzt erst an mit dem Webdesign (Erstellte Photoshop Datei in HTML Code / CSS Code umzuwandeln). Ich würde gerne auswändige Webdesigns umsetzen. Viel Grafik und co.

Hier ein Beispiel:

Wie schneidet / Sliced man das am besten? Die Bilder rechts, oben und links? Als ganzes, oder doch immer nur kleinere Teile? Ich würde gerne professionell arbeiten. Freue mich über jede Anregung / Hilfe.

Mit freundlichen Grüßen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.10.2011, 01:32
Benutzerbild von fox
fox fox ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Beiträge: 1.008
fox sorgt für eine eindrucksvolle Atmosphärefox sorgt für eine eindrucksvolle Atmosphäre
Standard

Solche extrem grafiklastigen Designs werden natürlich immer sehr große Webseiten ergeben, vor allem, da du kaum wiederholende Muster hast.

Leider habe ich in diesem Bereich wenig Erfahrung, würde das ganze aber folgendermaßen angehen:
Möglichst große Bereiche von Bildern als Hintergrundbild zusammenfassen, wenns geht sogar als Sprite(s) (reduziert die Anzahl von Anfragen an den Webserver). So etwa für jeden Inhaltsbereich, der nicht in jedem Browser 100%tig an der selben Stelle steht (z.B. der Bilderrahmen oben links) ein eigenes Bildchen, das sich dann u.U. mit dem Inhalt kleines bisschen verschiebt, je nach Browser.
Insgesamt also so wenig Teile wie möglich. Mehr kleine Teile lassen zwar den Inhalt ein wenig früher erkennen, erhöht aber die Last für das Netzwerk/den Server und insgesamt auch die Ladezeit.
Herrje, halb 1, ich hoffe du verstehst in etwa was ich meine

Kleine Anmerkung am Rande: Schönes Design, gefällt mir. Aber wie schon gesagt, die Bilder werden natürlich sehr groß werden.
__________________
:)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.10.2011, 01:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2011
Beiträge: 24
StefanK befindet sich auf einem aufstrebenden Ast
Standard

Hallo fox,

da hast Du recht. Leider gibt es auch solche Webdesigns, welches auch immer mehr auftritt. Ich habe mir sowas in die Richtung schon gedacht, nur es perfekt um zu setzen ist allerdings nicht grade schwer aber etwas heikel.

Allerdings suche ich Personen die sich damit auskennen und damit täglich arbeiten. Vielleicht lerne Ich (und auch Du *g) mehr dazu.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.11.2011, 17:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2011
Beiträge: 24
StefanK befindet sich auf einem aufstrebenden Ast
Standard

Keiner sonst eine Idee?!
Mit Zitat antworten
  #5 (permalink)  
Alt 07.11.2011, 17:47
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Doch. Was den Hintergrund angeht, solltest du den erstmal pur speichern ohne eigentliche Seite.

Generell gilt, was nicht wirklich wichtig für den Seitenaufbau ist, fliegt erstmal raus. Das sind Texte, Icons etc.

Desweiteren noch ein Tipp. Fang erstmal an, dir in HTML ein Grundraster aufzubauen und diese farbig zu füllen, danach kannst du diese mit den Jeweiligen Bildern füllen.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.11.2011, 00:08
Benutzer
neuer user
 
Registriert seit: 24.07.2011
Beiträge: 83
lolDog befindet sich auf einem aufstrebenden Ast
Standard

Über was du dir auch noch gedanken machen musst: Was passiert wenn der Bildschirm breiter bzw höher als das Design ist? Breiter sollte wahrscheinlich öfters vorkommen als höher. Sollte der User den restlichen Bildschirm nur weiß sehen sieht das so wie ich finde das bei dem Layout ein wenig komisch aus. Das Problem bei dem Layout ist, dass es am Rand keine einheitliche Farbe gibt und du dir da wohl noch irgendwas ausdenken musst..


Ich würde den braunen Hintergrund als ein großes Bild machen, ohne das Logo und das PostIt, da das ja beide inhaltliche Elemente sind.
Danach würde ich das innere Element (natürlich wieder ohne Inhalt nehmen und in der Mitte (ca da wo im Moment links die 6 weißen Kästchen liegen) strecken, so dass das Bild höher wird, damit falls es mal mehr Content geben sollte die Inhaltsbox größer (also höher) werden kann.

Die Seite sieht zwar ganz schön aus aber wird wahrscheinlich wie schon von den anderen erwähnt recht groß werden. Aber ich finde heutzutage braucht man nicht mehr mit den KBs zu geizen, die meisten Leitungen sollten schnell genug sein. Für mobile Geräte kannst du ja das Hintergrundbild mit einem kleineren ersetzen.

Bei einer ähnlich grafisch aufwändigen Seite (dort sind die Bilder alleine 1,6MB) habe ich die Hintergrundbilder mit JavaScript am Ende nachgeladen. Das heißt erst einmal die Seite ohne Hintergrundbilder geladen und erst als alles fertig ist werden die Hintergrundbilder geladen und gesetzt. Somit erzielst du auch bei einer großen Seite einen relativ schnellen Seitenaufbau und Suchmaschinen freuen sich auch da es bei diesen auch ein wenig schneller laufen wird.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Formular wird im IE 8 nicht richtig angezeigt Basti82 (X)HTML 14 12.05.2011 16:55
Semantik SO richtig umgesetzt? dercoe CSS 9 06.08.2010 16:34
Auf welchen Browsern checkt ihr eure Webseiten? tomaso Site- und Layoutcheck 21 08.01.2008 11:04
Grafik richtig positionieren?! Pumpkin CSS 7 13.06.2007 23:43
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig nick CSS 6 19.08.2006 03:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:12 Uhr.