German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)
Vor ein paar Wochen haben wir gelernt, wie erstellen Sie ein comic-Buch-Thema web-design Laufe bei unserer Schwester-site, Webdesigntuts+. Heute, wir werden angehen, der zweite Teil: es ist Zeit, schneiden Sie das design und verwandeln Sie es in eine funktionale HTML-layout, bereit, um portiert werden zu jedem CMS. Let ' s get started!
Bevor Wir Beginnen
Sie können Ihre ganz eigene PSD, indem Sie die folgenden der Schritt für Schritt Prozess, bei Webdesigntuts+ oder einfach hier herunterladen.
Da dies kein Anfänger-tutorial, werde ich überspringen einige grundlegende Erläuterungen -- Kenntnisse von HTML und CSS werden erwartet, sowie ein wenig Kenntnisse über das schneiden von Bildern auf Photoshop.
Schritt 1 - HTML-Layout
Lassen Sie uns beginnen Sie, indem Sie den Ordner Aufgaben; da dieses tutorial erfordert nicht die Verwendung eines server-side-Sprache, kann es überall auf Ihrem system. Erstellen Sie eine Datei namens index.html und die ersten drei Ordner:
/Bilder- /js
/style
Die Inhalte dieser Ordner sollte ziemlich selbsterklärend.
Fügen Sie die grundlegenden Container der Seite zu index.html. Ich bin wickeln alles mit einem div namens Seite. Innerhalb dieses div-Element, fügen Sie drei weitere mit der id header, Inhalt und Fußzeile jeweils.
In den style-Ordner, erstellen Sie eine neue Datei namens default.css und fügen Sie einen reset entfernen Sie alle default-styles. Ich bin mit Eric Meyer ' s, aber fühlen Sie sich frei, mit zu beginnen, Ihre Lieblings -.
Folgenden HTML-code für diesen Schritt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Comicastic</title> <link href="style/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <div id="header"> Header </div> <div id="content"> Content </div> <div id="footer"> Footer </div> </div> </body> </html>
Und das CSS:
@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of reset */ Testen Sie den code in Firefox, Sie sollten so etwas wie dieses:
Schritt 2 - Grundlegende CSS-Layout
Lasst uns den Stil, das layout, die Struktur der ersten.
Wir wickeln alle Inhalte mit 960px Breite-container, und legen Sie dann die Höhe der inneren divs. Um die genaue Höhe der einzelnen div-Sie können die Photoshop-Lineal-tool.
Wir schneiden Sie die hintergrund-Bilder der gesamten Seite und die Fußzeile Abschnitt jetzt.
Öffnen Sie In Photoshop Comicastic.psd und verstecken alles, aber die Header-BG und Footer-BG Ordner. Mit dem "slice" - Werkzeug zeichnen Sie ein großes Stück von der oberen linken bis 575px unterhalb der oberen Grenze. Als Nächstes zeichnen Sie eine weitere Scheibe aus der Führung der Abgrenzung der footer-hintergrund (werfen Sie einen Blick auf das Bild unten). Natürlich können Sie die Hilfslinien, um ein präzises Ergebnis zu erhalten.
Mit dem "slice-Auswahl" - Werkzeug, wählen Sie die zwei kürzlich erstellte slices und name mit Ihren jeweiligen Namen -- bg-body und bg-footer. Doppelklicken Sie dann klicken Sie auf alle auto-Scheiben, und ändern Sie die "slice-Typ" Kein Bild".
Nächste, gehen Sie zu Datei > Speichern für Web und Geräte. Wählen Sie die zwei Scheiben, die Sie speichern möchten (Halten Sie die Umschalttaste gedrückt, um mehrere auszuwählen), legen Sie die "Datei-Typ" JPG und die Qualität auf 70 und klicken Sie auf Speichern. Suchen Sie Ihr Arbeitsverzeichnis und wählte die root-Datei (dieses Dialogfeld wird automatisch speichern Sie Ihre Dateien im /images-Ordner).
Jetzt haben Sie das hintergrund-Bilder, können Sie die CSS-Datei für alle Container.
Setzen wir einen test-Höhe des divs mit Ausnahme der header (das ist 180px Höhe tatsächlich) und fügen Sie einige temporäre Hintergrundfarben für Testzwecke.
/*Common*/
body{
background-color:#000;
background-image:url(../images/bg-body.jpg);
background-position:center top;
background-repeat:no-repeat;
}
/*Containers*/
#page{
margin:0px auto;
width:960px;
}
#header{
width:960px;
height:180px;
float:left;
background-color:#666;
}
#content{
width:960px;
height:400px;/* Temporal */
float:left;
background-color:#FCC;
}
#footer{
width:960px;
height:250px;/* Temporal */
float:left;
background-image:url(../images/bg-footer.jpg);
background-position:top center;
background-repeat:no-repeat;
} Testen in einem browser, sollten Sie etwas wie das Bild unten.
Schritt 3 - schneiden Sie die Header-und Content-Hintergrund-Bilder
Jetzt wissen Sie, wie das Bild geschnitten wird, machen wir das gleiche mit allen header-und content-hintergrund (oder Vordergrund) Bilder. Für die header-Bilder, erstellen Sie eine Kopie der "comicastic.psd -" Dokument und blendet alles aus, aber das Logo Ordner und die Suche Hintergründe der Ebenen (plus ich bin das hinzufügen der Schaltfläche suchen in dieser Ansicht, wenn Sie ein paar Pixel rechts). Jetzt ziehen sich die Scheiben rund um die sichtbare Segmente, und benennen Sie diese mit logo, bg-such-und Suche-Taste, beziehungsweise. Speichern Sie Sie als PNG-Bilder mit transparenten Hintergründen.
Lasst uns vorwärts zu bewegen mit der content-banner.
Zeigen Sie nur den Hintergrund Ordner im oberen Banner, zeigen Sie die Page Curl Ordner und die Page Bg-Schicht unter Seite Inhalt und zeigen Sie den Header Bg-Ordner, einschließlich der gesamten schwarzen Hintergrund. Dann, mit diesen Schichten sichtbar ist, ziehen Sie zwei Scheiben: eine für das banner hintergrund benannt bg-banner und andere kleine für die Seite curl mit der Bezeichnung content-Seite-curl. Speichern Sie anschließend sowohl von Ihnen als JPEGs.
Fügen Sie ein neues div-Element namens-logo in den "header" und ein weiteres div-Element namens top-banner im inneren Inhalte unserer HTML-Datei.
<div id="header"> <div id="logo"> <a href="#"><img src="images/logo.png" width="340" height="135" alt="Comicastic" /></a> </div> </div> <div id="content"> <div id="top_banner">Top Banner</div> </div>
Und der CSS code Aussehen, damit Sie Recht:
#logo{
padding-top:32px;
padding-left:70px;
}
[...]
#top_banner{
float:left;
width:960px;
height:250px;
background-image:url(../images/bg-banner.jpg);
background-position:center top;
background-repeat:no-repeat;
} Jetzt solltest du so etwas wie so:
Schritt 4 - Obere Navigation
Lassen Sie uns fügen Sie den HTML-Code für die top-navigation. Fügen Sie den folgenden code in den header-div, unterhalb des Logos.
<ul id="main_navigation"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul>
Die härteste Arbeit mit diesem div wird die Positionierung. Wir machen es float rechts, und spielen mit der Polsterung, um es zu passen in seinen richtigen Platz. Fügen Sie den folgenden CSS:
#main_navigation{
float:right;
}
#main_navigation li{
display:inline;
}
#main_navigation li a{
display:block;
float:left;
}
#main_navigation li a:hover{
} 
Schritt 5 - Font-Ersetzung
Da habe ich nicht die Absicht, mit "Comic Sans" für das design verwenden wir ein interessanter Schrift. Wir werden die Vorteile von CSS3 zu machen, sieht toll aus in modernen Browsern.
Zuerst laden Sie die CSS-font-Pakete "Komika Title" und "Komika Text" und legen Sie Sie in einen neuen Ordner mit dem Namen /Schriftarten. Jedes kit hat eine Reihe von font-Dateien und eine .CSS-Datei, die wir importieren zu unserem Standard.css-Dokument, wie folgt:
/*Font Face Kits*/
@import url("../fonts/komika-text/stylesheet.css") screen;
@import url("../fonts/komika-title/stylesheet.css") screen; Nun, die Schriften werden importiert, können wir Ihnen überall auf unserer Webseite. Jeder Satz hat eine Anzahl von Varianten zur Auswahl, die Sie verwenden können, diejenigen, die nach dem Grafik-design. Für den Anfang werden wir alle den text mit 'KomikaTextTightRegular' wie folgt:
body{
background-color:#000;
background-image:url(../images/bg-body.jpg);
background-position:center top;
background-repeat:no-repeat;
font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif;
font-size:1em;
} Und Sie können testen Sie das Ergebnis im browser:
Step 6 - Styling der top-Navigation
Zurück zu der psd-Datei nun. Hide alles, aber die Registerkarte hintergrund, erstellen Sie eine neue Scheibe für das Navigations-tab mit dem Namen bg-Haupt-navigation und speichern Sie Sie für das web als PNG-Datei.
In unsere CSS-Datei fügen wir die Stile für die in der Navigationsleiste, um die gewünschten hover-Effekt. Wir werden hinzufügen, den hintergrund der hover-Aktion und erstellen Sie einen ähnlichen Stil für die ein.ausgewählte Instanz. In Bezug auf die typographie, pro die Grafik, verwenden wir "KomikaTextItalic" und fügen Sie einen schönen text-shadow-Stil zu machen es besser Aussehen.
#main_navigation{
float:right;
margin-top:-18px;
margin-right:20px;
}
#main_navigation li{
display:inline;
width:120px;
}
#main_navigation li a{
display:block;
float:left;
padding-top:7px;
padding-bottom:8px;
padding-left:20px;
padding-right:20px;
margin-left:5px;
color:#FFF;
font-family:'KomikaTextItalic', Arial, Helvetica, sans-serif;
font-size:18px;
text-decoration:none;
text-shadow:2px 2px 2px rgba(0,0,0,.5);
-webkit-border-top-right-radius: 3px;
-khtml-border-radius-topright: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
}
#main_navigation li a:hover{
background-image:url(../images/bg-main-navigation.png);
background-position:left;
background-repeat:no-repeat;
}
#main_navigation li a.selected{
background-image:url(../images/bg-main-navigation.png);
background-position:left;
background-repeat:no-repeat;
} Ihre Seite sollte so wie in diesem Stadium der Entwicklung:
Schritt 7 - Header Content
Neben dem logo und der Navigationsleiste, werden wir hinzufügen müssen, um die Suchleiste und die social-media-links, um den header-Abschnitt. Beginnen wir mit dem erstellen der container-box in HTML und das hinzufügen der folgenden div in das header-div.
<div id="header-content"> Top Right </div>
Und einige notwendige styles:
#header-content{
background-color:#036;
float:right;
width:440px;
height:105px;
} Wenn im browser getestet:
Schritt 8 - Suchleiste
Als Nächstes werden wir beginnen die styling-Suche-Bereich. Es ist im Grunde ein Formular mit einem Eingabefeld und eine Schaltfläche (siehe Schritt 3). Für diese, fügen Sie den folgenden code innerhalb der "header-content-div:
<div id="search">
<form>
<input type="text" class="search_input" value="Looking for something?"/>
<input type="image" src="images/search-btn.png" />
</form>
</div> Und das styling machen es schön Aussehen:
#search{
text-align:right;
padding-top:10px;
}
#search input{
vertical-align:middle;
}
#search .search_input{
width:160px;
margin-right:10px;
padding:6px 10px;
color:#F2AA00;
font-family:'KomikaTextTightRegular',Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#280000;
border:1px solid #7C0000;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
} Das sollte uns geben:
9. Schritt - Social-Media-Links
Unterhalb der Suchmaske div, fügen Sie ein div mit der id " social_media. In ihm können Sie eine Liste der social-media-links Ihrer Wahl. Ich bin mit Social Media Icon Pack von Komodo Media
<div id="social_media"> Follow us <a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a> <a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a> </div>
Und auf das stylesheet:
#social_media{
padding-top:15px;
text-align:right;
color:#FFF;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:15px;
vertical-align:middle;
text-shadow:2px 2px 2px rgba(0,0,0,.5);
} 
Schritt 10 - Schiebe-Banner
Wir beginnen mit dem Schiebe-banner. Beginnen durch das herunterladen von Easy Slider 1.5 und fügen Sie die Dateien in einen Ordner namens Banner.
Es gibt mehrere Beispiele in den Ordner "library" -- wir werden nachahmen 02.html. Benennen Sie die Datei, wenn nötig, löschen Sie alle unnötigen HTML-code und ersetzen Sie die Bilder mit ein paar Beispiel-Bilder.
So, die HTML-Datei für das banner sollte so etwas wie dieses:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Banner</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body> <div id="container">
<div id="content">
<div id="slider">
<ul>
<li><a href="#"><img src="images/01.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
<li><a href="#"><img src="images/02.jpg" alt="Preview" /><div class="bubble">test22</div></a></li>
<li><a href="#"><img src="images/03.jpg" alt="Preview" /></a></li>
<li><a href="#"><img src="images/04.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
<li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
</div>
</div> </body> </html>
Und hier ist der CSS
@charset "utf-8";
/* CSS Document */
/* image replacement */
img{
border:0px;
}
.graphic, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{
position:relative;
width:760px!important;
background:none;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
background:none;
}
#slider li{
width:760px!important;
}
#slider li a{
background:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
.bubble{
position:absolute;
float:right;
background-color:#036;
width:250px;
height:100px;
margin-top:-240px;
margin-left:500px;
color:#FFF;
}
/* // Easy Slider */ An dieser Stelle sollten Sie etwas wie dieses:
Keine Sorge, wenn der Schieberegler ist ein wenig buggy, beheben wir den Fehler in einer minute.
Die Positionierung anzupassen und ersetzen Sie die Pfeile
Schneiden Sie die zwei Pfeile (prev und next) und speichern Sie Sie als PNG-Dateien in den Ordner "Bilder" von der banner-Verzeichnis testen.
Dann anpassen der CSS, um richtig zu arbeiten mit den neuen Pfeilen
#prevBtn, #nextBtn{
display:block;
width:50px;
height:40px;
position:absolute;
left:-50px;
top:71px;
}
#nextBtn{
left:630px; /* this is the li width*/
}
#prevBtn a{
display:block;
width:50px;
height:40px;
background:url(../images/btn-prev.png) no-repeat 0 0;
}
#nextBtn a{
display:block;
width:50px;
height:40px;
background:url(../images/btn-next.png) no-repeat 0 0;
} Was produziert:
Positionieren
Jetzt legen wir die Positionierung, Breite und Höhe des das Banner im Zusammenhang mit Divs. Wir werden auch fix die JS-Bibliothek zu vermeiden, jedes problem in Bezug auf die zusätzliche bubble-div.
Hier ist die geänderte CSS:
#container{
margin:0 auto;
width:830px;
position:relative;
text-align:left;
background:#096;
margin-bottom:2em;
padding-left:65px;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{
position:relative;
width:830px;
overflow:hidden;
background:none;
background-color:#09F;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
background:none;
}
#slider li{
width:830px;
height:250px;
overflow:hidden;
}
#slider li a{
background:none;
}
#prevBtn, #nextBtn{
display:block;
width:65px;/*img width +15 padding*/
height:40px;
position:absolute;
left:-65px;
top:185px;
}
#nextBtn{
left:630px; /*Banner Width*/
}
#prevBtn a{
display:block;
width:65px; /*img width +15 padding*/
height:40px;
background:url(../images/btn-prev.png) no-repeat left;
background-color:#066;
}
#nextBtn a{
display:block;
width:65px;/*img width +15 padding*/
height:40px;
background:url(../images/btn-next.png) no-repeat right;
background-color:#066;
}
.bubble{
position:absolute;
float:right;
background-color:#036;
width:250px;
height:100px;
margin-top:-240px;
margin-left:500px;
color:#FFF;
}
/* // Easy Slider */ Und das Ergebnis im browser:
Bubble Hintergrund
Nun schneiden Sie die post-Inhalt-hintergrund. Nur mit dem reden Blasen sichtbar in Ihr .PSD, zeichnen Sie ein Slice mit dem Namen "bg-Blase", und speichern Sie es als .png-Datei.
Ändern Sie die CSS-hinzufügen hintergrund und passen Sie die Positionierung der Blase div, entsprechend.
.bubble{
position:absolute;
float:right;
width:295px;
height:210px;
margin-top:-255px;
margin-left:535px;
background-image:url(../images/bg-bubble.png);
color:#FFF;
} Hier ist, wie es aussieht in der browser-Software verhindern; entfernen Sie alle temporären Hintergrundfarbe, wenn Sie wünschen.
Post Inhalt
Beenden Sie die banner-Abteilung, lassen Sie ' s fügen Sie den HTML-Code für die Veröffentlichung von Inhalten.
<div class="featured_post">
<h2 class="post_title">Post title</h2>
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
<div class="post_info">
<span class="author">Posted by <a href="#">Admin</a></span>,
<span class="date">Apr 14</span>
</div>
<div class="post_comments">
<div class="number"><a href="#">29</a></div>
<div class="comments"><a href="#">Comments</a></div>
</div>
</div> Verschmelzen mit dem Haupt-Template-Datei
Es ist Zeit zum Zusammenführen der separaten Modul-mit unserem Hauptdokument.
Zuerst kopieren Sie die banner /js-Ordner in das root-template, fügen Sie dann alle banner Bilder in den /images Ordner in das template-Verzeichnis.
Als Nächstes fügen Sie den folgenden code innerhalb des - tag unserer index.html" Datei:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script> Und fügen Sie die banner divs entsprechend innerhalb der top_banner div.
<!-- Top Banner -->
<div id="top_banner">
<div class="banner_container">
<div id="slider">
<ul>
<li><a href="#"><img src="images/banner/01.jpg" alt="Preview" /></a>
<div class="bubble">
<div class="featured_post">
<h2 class="post_title">Post title</h2>
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
<div class="post_info">
<span class="author">Posted by <a href="#">Admin</a></span>,
<span class="date">Apr 14</span>
</div>
<div class="post_comments">
<div class="number"><a href="#">29</a></div>
<div class="comments"><a href="#">Comments</a></div>
</div>
</div>
</div>
</li>
<li><a href="#"><img src="images/banner/02.jpg" alt="Preview" /></a><div class="bubble">test22</div></li>
<li><a href="#"><img src="images/banner/03.jpg" alt="Preview" /></a><div class="bubble">test333</div></li>
<li><a href="#"><img src="images/banner/04.jpg" alt="Preview" /></a><div class="bubble">test4444</div></li>
<li><a href="#"><img src="images/banner/05.jpg" alt="Preview" /></a><div class="bubble">test55555</div></li>
</ul>
</div>
</div>
</div>
<!-- End of Top Banner --> Und die komplette CSS, um das banner der Arbeit
/* Top Banner */
#top_banner{
float:left;
width:830px;
height:250px;
padding-left:130px;
padding-top:10px;
background-image:url(../images/bg-banner.jpg);
background-position:center top;
background-repeat:no-repeat;
}
.banner_container{
float:left;
width:860px;
height:250px;
position:relative;
text-align:left;
}
/* image replacement */
#prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
position:absolute;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider{
position:relative;
width:830px;
margin-left:100px
overflow:hidden;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
background:none;
}
#slider li{
width:830px;
height:250px;
overflow:hidden;
}
#slider li img{
border:1px solid #FFF;
height:248px;
}
#slider li a{
background:none;
}
#prevBtn, #nextBtn{
display:block;
width:65px;/*img width +15 padding*/
height:40px;
position:absolute;
left:-65px;
top:185px;
}
#nextBtn{
left:630px; /*Banner Width*/
}
#prevBtn a{
display:block;
width:65px; /*img width +15 padding*/
height:40px;
background:url(../images/btn-prev.png) no-repeat left;
}
#nextBtn a{
display:block;
width:65px;/*img width +15 padding*/
height:40px;
background:url(../images/btn-next.png) no-repeat right;
}
.bubble{
position:absolute;
float:right;
width:295px;
height:210px;
margin-top:-255px;
margin-left:535px;
background-image:url(../images/bg-bubble.png);
color:#FFF;
}
/* // Easy Slider */
/* End of Top Banner*/ Wir werden den Stil der vorgestellten Inhalte in Kürze. An diesem Punkt, obwohl, sollten Sie etwas ähnlich dem folgenden Bild:
Schritt 11 - Content-Wrapper und Hintergrund
Voran mit der Attrappe, fügen Sie ein div unter dem top-banner, namens content_wrapper, und in einem anderen div-Element namens page_content, welche die eigentlichen Informationen beinhalten.
<div id="content_wrapper"> <div id="page_content"> Page content </div> </div>
Dann, um zu machen es so Aussehen wie das design, nutzen wir die CSS3 zum hinzufügen von abgerundeten Ecken bis hin zu den page_content div und die Seite LOCKE, die wir in Scheiben geschnitten in Schritt 3.
/*Page content*/
#content{
float:left;
width:960px;
}
#content_wrapper{
float:left;
width:910px;
padding-left:10px;
padding-right:40px;
padding-top:10px;
}
#page_content{
float:left;
width:100%;
height:350px;/*temporal*/
background-color:#FFF;
background-image:url(../images/content-page-curl.jpg);
background-position:bottom right;
background-repeat:no-repeat;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-radius-bottomright: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}
/*End of Page Content*/ Was unsere Seite Aussehen soll, wie an dieser Stelle:
Schritt 12 - Post-Bild und Titel
Let ' s mock-up ein Test-post.
Pro das design, wir benötigen ein quadratisches Bild mit der post-Titel und die Kategorien-Liste platziert auf zwei Streifen oben. Lassen Sie sich mit der HTML-ersten.
Erstellen Sie ein div namens post und legen Sie Sie in die page_content div. Dann fügen Sie ein Bild, einen Titel und einige Metadaten auf den container.
<div class="post"> <img src="images/posts/01.jpg" class="post-image" /> <h2><a href="#">Lorem Ipsum Post Title</a></h2> <div class="met ad at a"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launches</a>, <a href="#">Lorem Ipsum Category</a></div> </div>
Das CSS für diesen Teil ist kompliziert, da jeder Beitrag muss 50% der Breite in Bezug auf die page_content container, plus der Streifen sollte vor das Bild. Wir müssen spielen, um mit relativer Positionierung und negativen margins, dies zu verwirklichen.
.post{
float:left;
width:445px;
height:230px;
}
.post .post-image{
position:relative;
top:0px;
left:0px;
border:1px solid #FFB800;
}
.post h2{
position:relative;
top:-70px;
left:0px;
width:300px;
padding:5px;
padding-left:10px;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:18px;
color:#680000;
background-color:#F2AA00;
}
.post h2 a{
color:#680000;
text-decoration:none;
}
.post h2 a:hover{
color:#FFFFFF;
}
.post .metadata{
position:relative;
top:-70px;
left:0px;
width:250px;
padding:5px;
padding-left:10px;
font-size:13px;
background-color:#FFF;
border:1px solid #FFB800;
}
.post .metadata a{
color:#000;
text-decoration:none;
}
.post .metadata a:hover{
color:#9C0000;
} Sie sollten nun etwas, das etwa so:
Schritt 13 - Post-Inhalt, Hintergrund und Position
Nun, wir fügen Sie ein div, das den Beitrag enthält, den Inhalt.
<div class="post"> <img src="images/posts/01.jpg" class="post-image" /> <h2><a href="#">Lorem Ipsum Post Title</a></h2> <div class="metadata"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launchs</a>, <a href="#">Lorem Ipsum Category</a></div> <div class="post_content">Post Content</div> </div>
Schneiden Sie die hintergrund-Bild für die post_content div, und speichern Sie es als PNG-Datei.
Erste, setzen wir Ihre Positionierung in der CSS-Datei.
.post .post_content{
position:relative;
top:-275px;
left:230px;
width:210px;
height:220px;
background-image:url(../images/bg-post-content.png);
background-position:top left;
background-repeat:no-repeat;
} Ein Blick in den browser:
Schritt 14 - Inhalte Posten
Lassen Sie die Container für die post brief -, post-Informationen und Kommentare:
<div class="post_content">
<div class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam
</div>
<div class="post_info">
<span class="author">Posted by <a href="#">Admin</a></span>,
<span class="date">Apr 14</span>
</div>
<div class="post_comments">
<div class="number"><a href="#">29</a></div>
<div class="comments"><a href="#">Comments</a></div>
</div>
</div> Und das styling, um alles schön Aussehen:
.post .post_content .post_brief{
width:150px;
height:98px;
overflow:hidden;
padding-left:35px;
padding-top:15px;
text-align:right;
color:#FFF;
}
.post .post_info{
width:150px;
margin-left:35px;
margin-top:8px;
padding-top:4px;
text-align:right;
border-top:1px solid #787878;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#787878;
}
.post .post_info a{
color:#787878;
text-decoration:none;
}
.post .post_info a:hover{
color:#D8D8D8;
text-decoration:none;
}
.post .post_comments{
width:50px;
margin-top:37px;
margin-left:56px;
text-align:center;
}
.post .post_comments a{
color:inherit;
text-decoration:none;
}
.post .post_comments .number{
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFF;
}
.post .post_comments .comments{
font-size:12px;
color:#F2AA00;
} Und wir sind fertig mit der post!!!
Schritt 15 - Fügen Sie Weitere Beiträge
Lassen Sie uns gehen Sie vor und fügen Sie weitere Beiträge um Ihre Attrappen. Dupliziere diese block für so viele Male, wie Sie wollen, dass die post div. Sie sollten loszuwerden, die temporären Höhe, die wir auf der page_content div. Wenn alles wurde korrekt ausgeführt, wird das layout erhöhen Sie Ihre Höhe, wie wir hinzufügen, mehr Beiträge auf der homepage.
Schritt 16 - Featured-Post-Content
Jetzt haben wir die grundlegenden post-styling fertig sind, lassen Sie uns Stil die vorgestellten Inhalte zu veröffentlichen. Denken Sie daran, wie hatten wir den folgenden code innerhalb der Blase div?
<div class="featured_post">
<h2 class="post_title">Post title</h2>
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
<div class="post_info">
<span class="author">Posted by <a href="#">Admin</a></span>,
<span class="date">Apr 14</span>
</div>
<div class="post_comments">
<div class="number"><a href="#">29</a></div>
<div class="comments"><a href="#">Comments</a></div>
</div>
</div> Fügen Sie den folgenden CSS und replizieren die Blase auf alle Folien unserer rotierenden banner.
/* Post */
.featured_post .post_title{
height:29px;
padding-top:18px;
text-align:right;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:18px;
color:#680000;
}
.featured_post .post_title a{
color:#680000;
text-decoration:none;
}
.featured_post .post_title a:hover{
color:#FFFFFF;
}
.featured_post .post_brief{
height:67px;
padding-left:30px;
overflow:hidden;
text-align:right;
color:#1B1B1B;
}
.featured_post .post_info{
margin-left:30px;
text-align:right;
padding-top:2px;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#969696;
border-top:1px solid #FFC000;
}
.featured_post .post_info a{
color:#969696;
text-decoration:none;
}
.featured_post .post_info a:hover{
color:#1B1B1B;
}
.featured_post .post_comments{
text-align:center;
float:right;
margin-top:20px;
margin-right:10px;
width:65px;
height:40px;
}
.featured_post .post_comments a{
color:inherit;
text-decoration:none;
}
.featured_post .post_comments .number{
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:24px;
color:#FFF;
}
.featured_post .post_comments .comments{
font-size:14px;
color:#F2AA00;
}
/* // Post */ Ich habe auch einen border und box-shadow, um das Schiebe-Bild:
#slider li img{
border:1px solid #FFF;
height:248px;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
} Es sollte ungefähr so Aussehen:
Schritt 17 - Footer-Widgets
Anstelle der klassischen sidebar, wollte ich hinzufügen, widget bereit Fußzeile. Fügen Sie den folgenden code in das footer-div. Innerhalb der sidebar wird ein weiterer container mit dem Namen widget, und von innen, div:
- Titel
- eine ungeordnete Liste und
- ein div für die gelockt Ecke
Wir kümmern uns um die Kategorien-Liste.
<div id="sidebar">
<div class="widget">
<h3>Categories</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipisicing elit</a></li>
<li><a href="#">Sed do eiusmod tempor</a></li>
<li><a href="#">Incididunt ut labore</a></li>
<li><a href="#">Et dolore magna aliqua</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">Consectetur adipisicing</a></li>
</ul>
<div class="corner"> </div>
</div>
<div class="widget">W2</div>
<div class="widget">W3</div>
</div> Jetzt in der PSD-Datei, schneiden Sie die Ecke, name it widget-curl und speichern Sie das Bild für das web als JPG-Datei. Wieder, schneiden Sie den kleinen Pfeil neben den links, name it Pfeil und speichern Sie es als PNG-Datei.
Und Bearbeiten Sie die CSS-Datei, etwa so:
/*Footer*/
#footer{
width:940px;
padding-left:0px;
padding-right:10px;
padding-top:20px;
height:250px;/* Temporal */
float:left;
background-image:url(../images/bg-footer.jpg);
background-position:top center;
background-repeat:no-repeat;
}
/*End of Footer*/
/* Footer sidebar */
#sidebar{
float:left;
width:940px;
}
.widget{
float:left;
margin-left:10px;
margin-right:10px;
}
.widget h3{
color:#F2AA00;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:14px;
padding-bottom:10px;
padding-left:10px;
}
.widget ul{
width:200px;
padding:20px 10px;
background-color:rgba(26,26,26,.5);
border:1px solid #252525;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.widget .corner{
background-image:url(../images/widget-curl.jpg);
background-position:bottom right;
background-repeat:no-repeat;
height:30px;
margin-top:-30px;
margin-right:-2px;
}
.widget ul li{
font-size:16px;
padding-bottom:3px;
color:#FFF;
}
.widget ul li a{
padding-left:20px;
color:#FFF;
text-decoration:none;
}
.widget ul li a:hover{
color:#DC0000;
background-image:url(../images/arrow.png);
background-position:0px 6px;
background-repeat:no-repeat;
}
/* //Footer sidebar */ Beim testen in einem browser, sollten Sie etwas wie das folgende Bild:
Schritt 18 - Weitere Widgets
Replizieren Sie den HTML-code und fügen Sie eine zweite oder sogar eine Dritte Liste-widget. Diese Zeit werden wir hinzufügen, Archiv der Fußzeile. Testen kann man das layout jetzt hinzufügen mehrere Exemplare des widget-div zu sehen, wie es aussieht. Optimal, der footer-Bereich erhöhen, wie Sie mehr hinzufügen widgets.
<!-- Widget -->
<div class="widget">
<h3>Archives</h3>
<ul>
<li><a href="#">January 2011</a></li>
<li><a href="#">February 2011</a></li>
<li><a href="#">March 2011</a></li>
<li><a href="#">May 2011</a></li>
<li><a href="#">June 2011</a></li>
<li><a href="#">July 2011</a></li>
</ul>
<div class="corner"> </div>
</div>
<!-- End of widget --> Dies ist, wie sieht es mit der Archive-Abschnitt Hinzugefügt:
Schritt 19 - Tabbed Pane
Als Beispiel für eine komplexere widget, fügen Sie ein Registerkarten-Bereich mit drei unterschiedlichen Inhaltstypen in den einzelnen Tabs.
Zuerst fügen Sie den folgenden HTML-code als Basis-markup: eine ungeordnete Liste für die tabs, und die divs mit unterschiedlichen ids für die Inhalte. Ich bin das hinzufügen einer Allgemeinen Klasse namens " Registerkarte, um alle content-divs, um zu vermeiden, duplizieren Sie den code in der CSS-Datei.
<div class="widget">
<div id="tabs">
<ul>
<li><a href="#tab-1">Popular Posts</a></li>
<li><a href="#tab-2">Recent Posts</a></li>
<li><a href="#tab-3">Recent Comments</a></li>
</ul>
<div class="tab" id="tab-1">
<p>Tab1</p>
</div>
<div class="tab" id="tab-2">
<p>Tab2</p>
</div>
<div class="tab" id="tab-3">
<p>Tab3</p>
</div>
</div>
<div class="corner"> </div>
</div> Zunächst erstellen wir eine JavaScript-Dokument, namens tabs.js und speichern Sie Sie in den /js Ordner. Sie sind durch hinzufügen dieser Zeile in den - tag.
<script type="text/javascript" src="js/tabs.js"></script>
Fügen Sie nun eine grundlegende jQuery tabbed pane, indem Sie den folgenden code, um die tabs.js Datei.
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
}); Mit der JavaScript-Funktion arbeiten, können Sie die styling machen es hübsch Aussehen. Als erstes müssen wir uns die Scheibe den kleinen Pfeil, um die ausgewählte Registerkarte. Name it tab-Taste, und speichern Sie Sie als PNG.
Nun fügen Sie den folgenden code in die CSS-Datei:
/* Footer Tabbed Pane */
#tabs{
}
#tabs ul{
background:none;
border:0px;
padding:0px;
margin:0px;
width:428px;
min-height:30px;
height:30px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#tabs ul li{
display:inline;
float:left;
text-align:left;
}
#tabs ul .active{
background-image:url(../images/tab-arrow.png);
background-position:bottom center;
background-repeat:no-repeat;
}
#tabs ul .active a{
color:#F2AA00;
}
#tabs ul li a{
display:block;
margin:0px;
padding:0px;
color:#5A5A5A;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:14px;
padding-bottom:10px;
padding-left:10px;
padding-right:20px;
}
#tabs ul li a:hover{
background-image:none;
color:#F2AA00;
}
#tabs .tab{
width:405px;
padding:20px 10px;
min-height:170px;
/*This is to get the arrow above the tab*/
margin-top:-6px;
background-color:rgba(26,26,26,.5);
border:1px solid #252525;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* //Footer Tabbed Pane */ Jetzt sollten Sie über das Bedienfeld mit Registerkarten arbeiten, können Sie die Inhalte im inneren!
Schritt 20 - Tab-Inhalte
Lassen Sie uns gehen Sie vor und fügen Sie einige Inhalte auf die Reiter. Ein Blick auf die Grafik, Sie werden feststellen, dass wir eine Liste der drei Beiträge (aktuelle und beliebte) mit dem Titel und eine kurze, und ein pager unten zu navigieren Sie durch die Beiträge.
Fügen Sie den folgenden code innerhalb einer Registerkarte:
<span class="item"> <h4><a href="#">John Doe</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> </span> <span class="item"> <h4><a href="#">Jane Smith</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> </span> <span class="item"> <h4><a href="#">SpiderHuman</a></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> </span> <span class="pager"><a href="#">«</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">»</a></span>
Und jetzt das CSS:
/*Tabs Content*/
.tab .item{
float:left;
padding:5px 10px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.tab .item:hover{
background-color:#000;
background-image: -moz-linear-gradient(left, #000000, #0D0D0D);
background-image: -webkit-gradient(linear, left, right, color-stop(0.00, #000000), color-stop(1.00, #0D0D0D));
}
.tab .item:hover h4 a{
color:#F2AA00;
}
.tab .item h4{
padding-bottom:3px;
color:#FFFFFF;
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
font-size:14px;
}
.tab .item h4 a{
color:#FFFFFF;
text-decoration:none;
}
.tab .item h4 a:hover{
color:#F2AA00;
}
.tab .item p{
color:#909090;
font-size:15px;
}
.pager{
float:right;
text-align:right;
padding-right:40px;
}
.pager a{
color:#4A4848;
padding-left:5px;
}
.pager a:hover{
color:#F2AA00;
}
.pager a.active{
color:#D11300;
}
/* //Tabs Content*/ Replizieren Sie den HTML-Code für jede Registerkarte. Dies ist, wie es Aussehen sollte:
Schritt 21 - Footer
Schließlich, fügen Sie die Fußzeile, Navigationsleiste und die copyright-Informationen:
<div id="footer_content"> <ul id="footer_nav"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Sitemap</a></li> </ul> <div id="copyright">Tuts+</div> </div>
Nun schneiden Sie die 1px verlaufslinie aus der PSD-Datei, mit dem Namen "bg-footer-line" und speichern Sie es als JPG-Datei. Schließlich Bearbeiten Sie die CSS um alles einzurichten.
/* Footer Nav */
#footer_content{
float:left;
width:940px;
height:45px;
padding:10px;
margin-top:10px;
background-image:url(../images/bg-footer-line.jpg);
background-position:top center;
background-repeat:no-repeat;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#515151;
}
#footer_nav{
}
#footer_nav li{
display:inline;
}
#footer_nav li:last-child a{
border-right:none;
}
#footer_nav li a{
color:#515151;
padding-right:5px;
border-right:1px solid #292929;
}
#footer_nav li a:hover{
color:#F2AA00;
}
#copyright{
float:right;
padding-right:30px;
} 
Fazit
Und das ist es! Und das ist es! Wir sind fertig mit der Konvertierung. Der code wurde hier getestet in allen gängigen Browsern. Wenn Sie brauchen, IE6 und 7-Kompatibilität, sollte es nicht eine große Sache zu schreiben, ein paar fixes für Sie konkret. Unser design ist nun bereit für die Integration in eine CMS-wie eine Haut. Viel Glück und vielen Dank für das Lesen!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
