Bei der Größenänderung der Seite fallen diese Blockelemente elegant untereinander. Ich habe einige verschiedene Instanzen von Medienabfragen in einem externen Stylesheet eingerichtet. Dies erleichtert das Nachverfolgen von Stilen, wenn Sie später etwas bearbeiten möchten.

 
 
 
Jake Rocheleau
 
Freiberuflicher Autor und Webentwickler
  Hudson, Massachusetts, Vereinigte Staaten von Amerika  [email protected] Mein Portfolio • @jakerocheleau 
 
  
 
 

Bevor wir uns mit detailliertem CSS beschäftigen, möchte ich die Verwendung von Mikrodaten näher erläutern. Wenn Sie genau hinschauen, habe ich Attribute in vielen verschiedenen Elementen mit den Namen verstreut Gegenstandsart, Itemscope, und itemprop. All dies bezieht sich auf das Schmea-Projekt, das eine Datenstruktur für das Web anbieten möchte.

Formatieren von nützlichen Mikrodaten

Alle großen Suchmaschinen wie Google, Yahoo! und Bing haben Schema als die beste Syntax für das Markieren von Daten akzeptiert. Durch die Kennzeichnung Ihrer persönlichen Daten können Suchmaschinen relevante Ergebnisse für Ihre Inhalte online anzeigen. Lassen Sie uns aufschlüsseln, wie Sie diese einrichten.

Das Attribut itemscope wird auf jeden Container angewendet, der Informationen zu einem Schemaelement enthält. Darauf folgt immer das Attribut itemtype, das in diesem Szenario eine Person beschreibt. In diesem Wrapperdiv kann ich jeden Inhalt kennzeichnen, indem ich itemprop zusammen mit den Details auf seiner Dokumentationsseite benenne.

Die empfohlene Methode besteht darin, Ihren Inhalt in ein span-Tag zu packen, anstatt direkt an das Element anzuhängen. Wenn Sie so etwas wie ein Foto beschriften, sollten Sie itemprop an den anhängen img Element direkt. Andernfalls haben Sie eine deutlichere Markierung, indem Sie Ihre Daten in span-Tags einbetten.

Wie viel ist zu viel?

Ich würde argumentieren, dass es keine Begrenzung für die Menge an Details gibt, auf die Sie eingehen können. Microdata unterstützt Computer dabei, Personen, Organisationen, Produkte und andere Elemente in einem Online-Kontext zu erkennen. Je mehr Informationen Sie anbieten können, desto besser.

Es lohnt sich, offen zu bleiben und zu sehen, wie Sie diese Mikrodaten in Aspekten Ihrer eigenen Website verwenden können. Wenn Sie die Schemadokumentation 10 bis 15 Minuten durcharbeiten, ist das viel einfacher, als Sie denken. Wir können zwei solide Beispiele aus der Demo-Demo betrachten:

 
 
Fähigkeiten
 
 
Entwicklung
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
SQL-Datenbanken
 
Wordpress
 
Pligg CMS
 
Einige Ziel-C
 
 
 
 
Software
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Beim Auflisten meiner verschiedenen Fähigkeiten habe ich einen neuen Container eingerichtet, der das ItemList-Schema definiert. Es gab keine Art von Skillset oder Erfahrung unter einer Person, daher ist dies eine sichere Alternative. Der Wert hier ist, dass Google jeden verstehen kann itemListElement ist miteinander verwandt. In diesem Fall haben wir eine Liste von Sprachen und Software, mit denen ich zu arbeiten weiß.

 
 
Aktuelle Artikel
 
  10 nützliche Fallback-Methoden für CSS und Javascript • Veröffentlicht in Juli 2012
 
  URLs in WordPress neu schreiben: Tipps und Plugins • Veröffentlicht in Juli 2012
 
  JPEG-Optimierung für das Web - Ultimate Guide • Veröffentlicht in Juli 2012
 
  9 Tricks zur Gestaltung des perfekten HTML-Newsletters • Veröffentlicht in Mai 2012
 
  A / B-Test mit dem Google Website-Optimierungstool • Veröffentlicht in März 2012
 
 

Ein weiteres gutes Beispiel ist die Artikelliste ganz unten. Es gibt ein Schema für Artikel und Blogbeiträge, die sich auf online gefundene Inhalte beziehen. Ich habe die Artikel-URL und das Veröffentlichungsdatum angegeben, was mehr als genug Informationen für diese Suchmaschinen-Crawler bietet.

Denken Sie nur daran, dass es bei Mikrodaten darum geht, Inhalte zu formatieren, die von Computern organisiert werden sollen. Dieser Lebenslauf auf einer Seite ist das perfekte Beispiel, um Merkmale einer bestimmten Person zu definieren. Diese werden nicht auf jeder Website nützlich sein, aber es ist eine aufregende Methodik, die man verstehen muss.

Relative CSS-Stile

In diesem letzten Abschnitt werfen wir einen Blick auf die Gestaltung dieser gesamten Webseite. Oben in unserem Stylesheet definiere ich einige anfängliche Rücksetzungen und grundlegende Elementeigenschaften. Dazu gehören Kopfzeilen, Listenelemente und Anker-Hover-Effekte.

* Marge: 0; Polsterung: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); Schriftgröße: 62,5%; Polsterung unten: 65px;  h1 Schriftfamilie: "Simonetta", "Trebuchet MS", Arial, serifenlos; Farbe: # 454545; Schriftgröße: 3.6em; Rand unten: 6px;  h2 Schriftfamilie: "Simonetta", "Trebuchet MS", Arial, serifenlos; Farbe: # 484848; Schriftgröße: 2.5em; Rand unten: 10px; Textdekoration: Unterstrichen;  h3 Schriftfamilie: "Trebuchet MS", Verdana, Arial, serifenlos; Farbe: # 777; Schriftgewicht: normal; Schriftgröße: 1.8em; Rand unten: 10px;  h4 Schriftfamilie: "Trebuchet MS", Verdana, Arial, serifenlos; Farbe: # 656565; Schriftdicke: fett; Schriftgröße: 1.75em; Rand unten: 4px;  p Schriftfamilie: "Balthazar", "Droid Serif", Times New Roman, Serif; Farbe: # 565656; Schriftgröße: 1.8em; Zeilenhöhe: 1.4em; Rand unten: 15px; Polsterung links: 35px;  kleine Schriftfamilie: "Balthazar", Serife; Farbe: # 656565; Schriftgröße: 1.6em; Bildschirmsperre; Rand unten: 6px;  ul display: block; Listenstil: keine;  ul li padding-left: 45px; Typ des Listentyps: keine; vertikal ausrichten: oben; Hintergrund: URL ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; Rand unten: 5px; Schriftfamilie: "Balthazar", Serife; Farbe: # 666; Schriftgröße: 1.6em; Zeilenhöhe: 2.3em;  img border: 0; Max-Breite: 100%;  a color: # 5582d6; Textdekoration: keine;  a: hover Textdekoration: Unterstreichung;  

Nichts zu interessant, außer für einige der benutzerdefinierten Schriftstapel. Ich habe auch ein eindeutiges Aufzählungssymbol genommen, anstatt den Standard zu verwenden “Scheibe”. Sie können versuchen, ein Verzeichnis wie Icon Finder zu durchsuchen, wenn Sie versuchen, ein ähnliches Design zu finden.

/ ** @gruppenkernlayout ** / #w margin: 0px 50px; Polsterung: 20px 40px; Polsterauflage: 35px; Hintergrund: #fff; min-Breite: 260px; Max-Breite: 900px; rechts unten rechts unten: 8px; Rand unten links Radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header width: 100%;  / ** @group persönliche Einstellungen ** / #info float: left; Rand unten: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); Box-Schatten: 0 2px 4px rgba (0, 0, 0, 0,2); Hintergrundfarbe: #fff; Rahmen: 1px fest #ccc; Polsterung: 5px;  

Es gibt nur wenige wichtige Blockbereiche auf der Seite, die Aufmerksamkeit erfordern. Natürlich ist der Wrapper div mit zusätzlichen Rändern und Polsterungen ausgestattet. Auch die maximale Breite ist auf 900px begrenzt, da jede größere Größe das Gefühl hat, dass die Seite zu viel Leerzeichen hat. Ich habe auch abgerundete Ecken am unteren Rand der Seite verwendet, um eine sanftere Wirkung auf die Augen zu erzielen.

Sich anpassendes Design

Möglicherweise ist der wichtigste Aspekt dieses Online-Lebenslaufs die responsive Funktionalität. Ich habe fünf verschiedene Haltepunkte eingerichtet, um verschiedene Effekte bei der Größenänderung des Browserfensters zu erzielen.

@media only screen und (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 Anzeige: Block; Text ausrichten: Mitte;  #info float: none; Bildschirmsperre; Text ausrichten: Mitte;  #photo float: none; Bildschirmsperre; Text ausrichten: Mitte;  #w padding: 20px 15px;  p Auffüllen: 0;  

Der Anfang 740px ist genau dort, wo das Foto mit unserem Kopfzeilentext kollidiert. Anstatt das Foto auf die rechte Seite ziehen zu lassen, löschen Sie beide Elemente und zentrieren das gesamte Layout. Ich habe auch die Textgröße des Headers erhöht, um eine festere Wirkung zu erzielen.

Da das Fenster kleiner wird, habe ich einige zusätzliche Auffüllungen aus dem Wrapper div und den Absätzen entfernt. Das nächste Problem, dem wir nach dem Header begegnen, ist die Liste der Skills-ULs. Ich breche den zweispaltigen Ansatz auf und habe stattdessen Listenelemente nebeneinander.

@media only screen und (max-width: 570px) ul li display: inline-block; Polsterung links: 15px; Breite: 140px; Hintergrundposition: -5px 0px; Rand rechts: 6px; Zeilenhöhe: 1.7em;  # skills-left, skills-right margin-bottom: 15px;  

Dies erfordert auch die Neupositionierung vieler der Standardtexteigenschaften. Wir müssen die Zeilenhöhe aktualisieren und das Aufzählungssymbol jedes Listenelements neu positionieren. Ich habe eine feste Breite festgelegt, so dass das Raster bis zum nächsten Haltepunkt organisierter erscheint.

Kodierung für Smartphones

Die letzten drei Medienanfragen sind klein, aber sehr wichtig. Wenn Sie zwischen Quer- und Hochformat wechseln, ändert das iPhone alle mobilen Browser. Dies ist auch bei den meisten Android-Geräten und Windows Mobile-Handys der Fall.

@media only screen und (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  @media only screen und (max-width: 320px) #w margin: 0 10px;  / ** nur für iPhone ** / @media screen und (max-gerätebreite: 480px)  

Wenn Sie zum ersten Mal 480px oder kleiner schlagen, entfernen Sie einige weitere Auffüllungen aus dem Wrapper und ändern die Größe der Listenelemente erneut. Bei 320px habe ich dann etwas Randbereich außerhalb des Dokuments entfernt. Sie können immer noch den strukturierten Hintergrund sehen, aber in einem so schmalen vertikalen Ansichtsfenster ist dies nicht sehr wichtig.

Zum Schluss benutze ich max-gerätebreite das iPhone-Gerät selbst anvisieren oder nämlich jeden anderen mobilen Bildschirm mit einer maximalen Breite von 480px. In diesem Fall möchte ich die Listenelemente etwas weiter aktualisieren, damit sie den gesamten Bildschirm ausfüllen. Dies wirkt sich nur auf die Liste der Fähigkeiten in der Querformatansicht aus, da Porträt zu dünn ist, um Unterschiede zu erkennen.

• Demo
• Quellcode herunterladen

Abschließende Gedanken

Um über das Internet zu arbeiten, ist häufig zumindest ein Portfolio online erforderlich. Wenn Sie einen Link zu einer einzelnen Seite erstellen können, in der alle Details zusammengefasst sind, zeigt dies, dass Sie es ernst meinen. Seriöse Arbeitgeber und potenzielle Kunden werden sich für eine solch charismatische Darstellung von Professionalität im Webdesign begeistern.

Ich hoffe, Sie können einige wichtige Punkte aus diesem Tutorial nehmen. Freelancer an jedem Ort der Welt können sich mit nur geringem technischen Aufwand vermarkten. Fühlen Sie sich frei, um meinen Demo-Quellcode oben herunterzuladen, und teilen Sie Ihre Gedanken zu diesem Artikel in unserem Kommentarbereich mit.