Archiv für March 2008


How To Style Wordpress 2.5

21. March 2008 - 10:54 am Uhr
Es ist bald zu Zeit neu zu gestalten meine Web-Site für die "Web 2.0 Zeitalter." Ich habe ernsthaft geprüft auf zwei Plattformen, Drupal und Joomla, mit denen sich diese.

Drupal und Joomla bieten umfassende, dass im Falle von Drupal, ein Blog und Forum als Kernmodule. Themes diesen Plattformen kann sowohl durch CSS (Cascading Style Sheets) und PHP (Personal Home Page oder PHP: Hypertext Preprocessor) Code-Änderungen. Allerdings sind diese Plattformen sind komplex genug, und das Lernen zu installieren, verwalten und anpassen diesen Plattformen kann eine schwierige Aufgabe.

Nach dem Studium der beiden Plattformen, einschließlich der mit ihnen auch auf meinem Bett-Test-Plattform und über die Internet, entschied ich mich, um einen Blick auf WordPress als eine mögliche Lösung, um meine Zukunft Web-Bedürfnisse. Ich war überrascht, dass die neueste Version von WordPress ist einfach zu installieren, einfach zu bedienen und leicht zu Thema.

In diesem Artikel werde ich beschreiben, wie Sie WordPress 2.5.

STYLING WordPress - Jakob DESIGN

Der aktuelle Entwurf für meine persönliche Website, SelectDigitals.com, basiert auf der Arbeit und der Philosophie von Jakob Nielsen, http://www.useit. com /. Nielsen's Arbeit wurde für die nutzbaren Websites, die Inhalte, die einfach zu finden und leicht zu lesen.

Die Gestaltung von Nielsen's Website (und meiner Website, mit Genehmigung) ist einfach und elegant ist der Vorrangiges Ziel der Bereitstellung von Inhalten. WordPress hat auch das vorrangige Ziel der Bereitstellung von Inhalten. Also, mein erstes WordPress Design wird sich bemühen, den Blick und das Gefühl von unseren Seiten mit dem zusätzlichen Merkmal der Besucher Interaktivität. Ich werde auf diese, wie die Jakob-Design.

Es gibt sechs wichtige Komponenten, aus denen sich das Aussehen der Standard-WordPress-Blog:

1. Header-Grafik,

2. Blog-Titel,

3. Tagline,

4. Page,

5. Hintergrund, und

6. Fußzeile.

Um die Jakob-Blog schnell geladen werden, entschied ich mich nicht für die Verwendung eines Kopf-oder Fußzeile Grafik und Design, da die im Wesentlichen die Standard-WordPress Thema mit einem neuen Mantel, nur ein wenig Grafik-Design zu tun. In der Tat, ich nur erforderlich, eine Grafik auf, um die Blog-Seite mit den beiden Spalte Wirkung. Die Blog-Seite wird "Float" zentriert in einem dunkel-blau * * Hintergrund Stelle, die dazu dienen, die Frame-Seite.

Erstellen der Grafik

Ein Blick in die Bild-Verzeichnis für den Standard-WordPress Thema zeigt die Standard-Bilder für die Kubrick-Look. Im Moment gibt es nur eine Datei von besonderem Interesse: kubrickbgwide.jpg. Für die Jakob-Design, die anderen Kubrick Bilder sind nicht erforderlich, wird aber für die "Lust", komplexer Design.

Die Blog-Seite wird von einem "Stück" durch die Mitte der neuen Design. Die Scheibe ist ein schmales Bild der Breite der Blog-Seite.

Begann ich mein Design, indem eine grundlegende Seite (760px X 600px) in Adobe Illustrator. Ich mag mit Illustrator für Kunstwerke dieser Art, aber auch andere Programme verwendet werden könnten, zu.

Habe ich die grundlegenden Seite mit der Seite der Hintergrundfarbe (nicht zu verwechseln mit den dunkelblauen Körper * * Hintergrund ). Das Licht Hintergrundfarbe wird "show-off" farbigen Text, wie der Blog-Titel und Slogan.

I überlagert die Seite mit zwei Rechtecke, oder "Spalten". Die linke Hand, 510px-breiten Spalte ist gefüllt mit einem Pastell-gelbe Farbe, die der rechten Spalte, 230px breit, ist mit einer pastellblau Farbe. Die beiden Spalten innerhalb der Seite mit einer grundlegenden 10px Grenze der Seite Hintergrund um sie herum.

In Illustrator habe ich dann zu einer 760px X 40px Rechteck auf der Seite und verwendet dieses, um eine Scheibe. Ein Stück ist nichts mehr, dass ein Vertreter Stück ein größeres Bild, in diesem Fall, der das Blog-Design. Ich habe dann die Scheibe als kubrickbgwide.jpg. Kubrickbgwide.jpg werden, um die Blog-Seite Hintergrund. Als neue Inhalte in die Blog-Seite, Kopien der Scheibe wird vertikal gestapelt zu "wachsen" die zwei-Spalte Hintergrund. Dies ist das einzige Bild benötigt einen Browser, um die Blog-Homepage. Der Blog wird deshalb sehr schnell laden.

Bisher recht einfach, nicht wahr? Der Rest des Designs wird durch das Thema der CSS-Datei und / oder über die Schnittstelle zur Administration WordPress.

CSS Änderungen

Die Standard-CSS-Datei ist in der WP-content_themes_default Verzeichnis . Der CSS Text unten zeigt die Code-Änderungen zu style.css. Bevor Sie Änderungen an den Standard-CSS-Datei, die ich immer und speichern Sie eine Kopie des Originals. Die CSS-Datei geöffnet werden kann und geändert mit einem Text-Editor. Text zu streichen, wird in eckigen Klammern. Neue oder geänderte Text wird angezeigt, ohne Klammern.

/ * Begin Typography & Colors * / body (

[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]

background: # 636f89; / * Setzen Sie den Body Hintergrundfarbe blau * /

)

# page (

[background-color: white;]

[border: 1px solid # 959596;]

border: none ;

)

[# header (

background: # 73a0c5 url ( 'images / kubrickheader.jpg') no-repeat bottom center;

)

# headerimg

(margin: 7PX 9px 0;

height: 192px;

width: 740px;

)]

# footer (

[background: # eee url ( 'images / kubrickfooter.jpg ') no-repeat top;]

background: # fffef2; / * Sehr leicht gelb * /

)

h1, h1 a, h1 a: hover, h1 a: visited, # headerimg [. Beschreibung]

(text-decoration: none;

[color: white;]

Farbe: rot; / * Machen Sie den Titel rot * /

padding-bottom: .5 em; / * Setzen Sie ein wenig Platz zwischen den Titel und den Slogan * /

)

.

Beschreibung (text-decoration: none;

color: blue; / * Machen Sie den Slogan blau * /

text-align: center;)

/ * End Typography & Colors * /

/ * Begin Structure * /

# page (

[background-color: white;]

background-color: fffef2; / * Sehr leicht gelb * /

[border: 1px solid # 959596;]

border: none;)

# header (

[background-color: # 73a0c5;]

background-color: # fffef2; / * Sehr leicht gelb * /

)

/ * End Structure * /

Nach und speichern diese Änderungen an der Datei style.css, die Blog-Seite neu gestaltet wird.

STYLING WordPress — - DIE FANCY DRESS DESIGN

Obwohl ich, wie die Einfachheit der Jakob-Blog-Design, wird es nicht Appell an alle. Viele Leute lieben "Glanz". Der Preis für ein WordPress Fancy Dress ist oft ein langsamer geladen Blog ohne Erhöhung der Benutzerfreundlichkeit. Allerdings, für diejenigen, die "dress up" das Auftreten von ihr Blog, hier sind weitere Möglichkeiten, diese erreicht werden kann.

Zunächst ist darauf hinzuweisen, dass dem Hintergrund der Standard-WordPress-Seite nutzt header (kubrickheader.jpg) und Fußzeile (kubrickfooter.jpg) Grafiken. Diese Grafiken werden nicht mit einer Farbe, wie in der Jakob-Design, aber mit einem Gefälle. Es scheint auch einen sehr kleinen Schatten unter der Seite.

Aufgrund der Komplexität der Standard-Seite, zusätzliche Grafiken erforderlich sind und somit mehr Scheiben benötigt werden. Außerdem, wenn ein komplexer Körper Hintergrund gewünscht wird, in dem auf "Float" die Seite, ein "Startkapital" für das Bild kann auch verlangt werden (dies ist, was die kubrickbgcolor.jpg Bild ist).

Nach wie vor habe ich eine Zeichnung von der Blog-Seite in Illustrator. Die Seite, mit abgerundeten Ecken, schwimmt auf die Standard-WordPress Hintergrund, hat eine gelbe Gradienten, und hat einen kleinen Schatten.

Ich zum ersten Mal ein 760px X 600px Rechteck auf der Illustrator artboard. Habe ich dieses Rechteck mit der Hintergrundfarbe (C: 8, M: 6, J: 6, K: 0).

Weiter, mit dem Abgerundetes Rechteck-Tool, habe ich eine 736px X 584px Rechteck und füllte ihn mit der gelben Farbverlauf. Im Wesentlichen habe ich die Seite so groß wie möglich in den Hintergrund, wobei genug Platz für den Schatten.

Schließlich habe ich den abgerundeten Rechtecks einen kleinen Schatten.

Um sicherzustellen, dass die Scheiben fusionieren perfekt in den Körper * * Hintergrund habe ich ein 60px X 60px Quadrat der gleichen Hintergrundfarbe (C: 8, M: 6, J: 6, K: 0) und gespeichert, wie es kubrickbgcolor.jpg. Das kleine Bild wird verwendet, um "Farbe" des Körpers Hintergrund. Dies ist ein wichtiger Schritt, da der Hintergrund für die Einrichtung und den Hintergrund für die Seite muss mit perfekt für die Lust auf Design.

Erstellen der Scheiben

Mit dem Rechteck-Werkzeug , Ich habe ein 760px X 200px Rechteck auf dem Layout oben beschrieben. Ich positioniert dieses Rechteck an der Spitze der Layout und benutzte es, um ein Stück für die Header-Grafik. Zuvor habe ich deaktiviert Schlaganfall und füllen.

Ich die Scheibe gespeichert als kubrickheader.jpg.

Habe ich den Fuß-und Seiten-Scheiben in ähnlicher Weise umbenannt und sie als kubrickfooter.jpg und kubrickbgwide.jpg, respectively. Kubrickfooter.jpg ist 760px X 63px und kubrickbgwide ist 760px X 40px.

Es gibt noch zwei weitere Kubrick-Bilder in der Bilder-Verzeichnis: kubrickbg-ltr.jpg und kubrickbg-rtl.jpg (von links nach rechts, und von rechts nach links). Diese Bilder sind die gleichen wie kubrickbgwide.jpg. Also habe ich zwei Kopien kubrickbgwide.jpg und sie entsprechend umbenannt.

CSS Änderungen

Die Standard-CSS-Datei ist in der WP-content_themes_default Verzeichnis. Der CSS Text unten zeigt die Code-Änderungen zu style.css. Eckige Klammern zeigen an, welche Codes zu löschen und den neuen Code wird ohne Klammern. Bevor Sie die Änderung, ich kopiert und gespeichert, die Original-Datei. Für die Lust auf Design, die CSS-Änderungen sind minimal.

/ * Begin Typography & Colors * / body (

[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]

background: # e7e7e7 url (' images / kubrickbgcolor.jpg ');)

# page (

[background-color: white;]

[border: 1px solid # 959596;]

)

# header (

[background: # 73a0c5 url ( 'images / kubrickheader.jpg') no-repeat bottom center;]

background: # e7e7e7 url ( 'images / kubrickheader.jpg') no-repeat bottom center;)

# footer (

[background: # eee url ( 'images / kubrickfooter.jpg') no-repeat top;]

background: # e7e7e7 url ( 'images / kubrickfooter.jpg') no-repeat top;

)

h1, h1 a, h1 a: hover, h1 a: visited, # headerimg [Bezeichnung] (

[color: white;]

Farbe: rot; / * Machen Sie den Blog-Titel rot * /

padding-bottom: .5 em; / * Setzen Sie ein wenig Platz zwischen den Titel und den Slogan * /

)

.

Beschreibung (text-decoration: none;

color: blue; / * Nehmen Sie die Blog-Slogan blau * /

text-align: center;)

/ * End Typography & Colors * /

/ * Beginn Struktur * /

# page (

[background-color: white;]

background-color: # e7e7e7;

[border: 1px solid # 959596;]

border: none;)

# header (

[background-color: # 73a0c5;]

background-color: # e7e7e7;)

/ * End Structure * /

Nach die Gestaltung und die CSS-Arbeit, die WordPress zeigt es neue Kleider für den gesamten Internet.

STYLING WordPress - Der NO-GRAFIK DESIGN

Nichts alle schief geht, wenn ein Browser-Lasten eine Seite aus dem Internet, oder? Selbst wenn dies in der Tat der Fall ist, ist es immer noch sinnvoll, zu prüfen, wie eine Seite zeigt den Fall, dass die Grafiken nicht gefunden werden kann.

Bei der Jakob-Design, wenn kubrickbgwide . jpg nicht heruntergeladen haben, aus irgendeinem Grund, wird die Seite nicht angezeigt akzeptabel. Aufgrund der hellen Hintergrund, die für die Kopf-und Fußzeilen, sie normalerweise auf dem Display dunkel-blauen Hintergrund für den Körper. Allerdings ist die Seite Inhalt wird schwer zu lesen: sie fast verliert sich in der dunkel-blauen Hintergrund. Ein heller Hintergrund für den Körper hätte eine viel klüger Wahl.

Der Schöpfer der Kubrick Design dieses Problem gelöst, indem alternative Hintergrundfarben verwendet werden, wenn die Grafik nicht vorhanden waren. Die Aufgaben sind innerhalb der style.css-Datei:

body (background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');)

# header (background: # 73a0c5 url ( 'images / kubrickheader.jpg') no-repeat bottom center;)

# footer (background: # eee url ( 'images / kubrickfooter.jpg') no-repeat top;)

Wenn die Bilder nicht verfügbar sind, die alternative RGB Farbwert wird.

Wenn die Grafiken nicht zur Verfügung stehen, die Standard-WordPress-Blog ist noch präsentabel und nutzbar. Für eine erste Seite Redesign, beginnend mit dem grundlegenden Design Kubrick, ohne Grafiken, könnte ein guter Ort, um zu beginnen. Dies kann durch die Vereinfachung der Aussagen über:

body (background: # d5d6d7;)

# header (background: # 73a0c5;)

# footer (background: # EEE;)

Die Farben können dann geändert werden, um verschiedene Farbschemata Blog. Ändern Sie einfach die RGB-Farbe-Codes, speichern Sie die CSS-Datei, und aktualisieren Sie den Browser, um zu sehen, die Änderungen sofort.

Ihr für eine erfolgreiche Blog,

Royce Tivel

Comments Off | Internet

Wie kommen Sie an kostenlose Ausbildung zum Build Wordpress-Blogs und Websites

1. March 2008 - 2:38 pm Uhr
Wenn Sie bauen wollen, Blogs oder Webseiten, müssen Sie ernsthaft in Betracht ziehen, mit Wordpress, dies zu tun, aber vergessen Sie nicht, Sie einige freie Wordpress Ausbildung, bevor Sie starten.

Es gibt viele kostenlose Tutorials und in einigen Fällen ganze Websites, die kostenlose Ausbildung in Wordpress, einschließlich der neuesten Version 2.7

Wordpress ist nur so einfach zu installieren, nutzen und zu warten, dass Sie wäre verrückt nicht zu benutzen und natürlich ist auch diese Software kostenlos!

Um ehrlich zu sein, gibt es wirklich keinen Grund zu zahlen für Ihre Wordpress Ausbildung, da es nur so viel über das Internet - gehen Sie einfach auf Google und Suche nach "Free Wordpress Training" und Sie werden sehen, was ich meine.

Neben einer großen Nur-Text-Tutorials gibt es viele andere Ausbildung zur Verfügung stehenden Mittel für Wordpress, mit Schritt-für-Schritt - Führer mit Bildern klar zu definieren, was Sie tun müssen, viele Videos, wie die Konfiguration der Software und schreiben Sie Ihre Beiträge für die Inhalte und Seiten und Empfehlungen über die besten Plug-ins und freie Themen, die für Ihre eigenen Websites oder Blogs.

Wordpress ist kostenlos Open-Source-Software, die ursprünglich entwickelt als Blog-Plattform, aber jetzt, nachdem ein Großteil der Entwicklung und den jüngsten Erweiterungen hat sich die ultimative Website Builder-und Content-Management-System kombiniert werden.

Es ist wirklich nicht zu schlagen, und Tausende von Blogger und Website-Erbauer haben bereits eine große Anzahl von Standorten mit dieser großartigen Software. Und natürlich die meisten von ihnen haben eine Ausbildung irgendeiner Art, bevor sie begann.

Wie alle Software allerdings werden Sie dann noch viel besser und viel schneller Fortschritte, wenn Ihr Zug selbst ersten und ich muss sagen, , dass die Lernkurve ist wirklich nicht so steil und auch für den Anfänger oder nicht-technische Person in den Griff bekommen mit dieser Software ist schnell, einfach und ziemlich schmerzlos Prozess.

Auch wenn Sie noch nie online Software, bevor Sie die Möglichkeit zur Nutzung dieser Website Builder - es ist wirklich nicht schwieriger als die Verwendung von Microsoft Word oder Excel.

immer die richtigen Ausbildung für das, was Sie erreichen wollen, mit Ihrer Website. Es ist so viel freier Wordpress Ausbildung zur Verfügung, kann es schwierig zu wissen, wo ich anfangen soll.

Zunächst würde ich empfehlen, dass Sie zu Wordpress.com und Einrichtung eines kostenlosen Blog. Diese können Sie spielen mit der Software kostenlos, während Sie nach, welche Ausbildung Sie wählen. Diese Kosten keine Lösung ist eine einfache und schnelle Möglichkeit, bis zu beschleunigen und zu testen, was die Ausbildung erfahren Sie, zu tun.

Am einfachsten Teilen zu lernen, wird, wie Sie den Inhalt zu schreiben und wie Sie das Layout der neuen Seite. Dies wird vor allem die Stellen schriftlich und Auswahl ein Thema, das Sie gerne von den vielen, die zur Verfügung gestellt werden können. Nachdem Sie haben ein paar Stellen schon bald, worauf es ankommt und vor dem lange Sie zu einem kompetenten Blogger.

Je schwieriger Stoff kommt, wenn Sie möchten, dass Ihre eigenen WordPress-Website mit eigenen Domain-Namen auf Ihrem Web-Host. Dies erfordert die Installation der Software auf Ihrem Web-Hosting-Unternehmen und die Schaffung eines selbst gehosteten Wordpress Seite. Sie werden dann auch zu entscheiden, welche Plug-ins zu verwenden und wie Sie die richtigen Einstellungen für Ihre Website.

Noch einmal, wenn Sie das richtige Training, bevor Sie zu diesem Zeitpunkt werden Sie alle für einen einfachen und schnellen Weg zum Erstellen Ihrer eigenen Website oder ein Blog mit Wordpress. Dann, bevor Sie es kennen, werden Sie eine Website Builder, Webmaster und Blogger alle in einem!

Comments Off | Internet