Accentsconagua

WordPress ca un CMS Partea 2

Cod
Share

În ultimul tutorial am bifat un layout rapid și simplu în Photoshop și acum trebuie să transformăm acest lucru într-o pagină statică HMTL și CSS.

Disponibile și în această serie:

  1. WordPress ca un CMS: Partea 1
  2. WordPress ca un CMS: Partea 2
  3. WordPress ca un CMS: Partea 3

Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.

Odată ce devii mai confortabil cu HTML și WordPress, poți sări peste acest pas și doar creezi tema WordPress, dar asta ar învinge scopul acestui tutorial, așa că vom face acest pas în plus.

Există două tipuri diferite de tutoriale pe care le văd acolo, iar cea mai populară pare să fie aici este HTML-ul complet și aici este CSS-ul complet și acesta este sfârșitul tutorialului. Nu sunt un mare fan al acestei metode, așa că te voi purta în întregul proces. Pentru cei care sunt fani ai celeilalte metode, puteți găsi întregul HMTL și CSS la sfârșitul acestui tutorial.

A taia si marunti

Am rămas cu un design extrem de simplu, așa că trebuie doar să tăiem 2 imagini. Acestea sunt logo-ul și imaginea noastră de conținut.

Scoateți instrumentul de tăiere și tăiați ambele imagini.


Pentru siglă, încercați să o păstrați cât mai aproape de fiecare margine posibil.



Salvați imaginea pentru web și apoi faceți același lucru pentru imaginea noastră de conținut.


Aveți nevoie de o fundație solidă

Acum, că avem toate imaginile noastre despicate și salvate, putem merge mai departe și să ne creăm fișierul HTML.

Deschideți editorul și pregătiți-vă să creați niște dosare și fișiere. În directorul rădăcină creați aceste dosare și fișiere.

img /

inc /

index.html

Mutați imaginile nou create în folderul img și accesați folderul inc. Odată ce am intrat în cc, vom crea un nou dosar, precum și 2 fișiere noi. Creați un folder nou numit CSS și în interiorul acelui director creați 2 fișiere noi, reset.css și style.css.

Structura dosarului dvs. ar trebui să arate ca imaginea noastră de mai jos.


Resetați și structura de bază

Atunci când creați un site, este întotdeauna bine să începeți cu o resetare solidă CSS. Acest lucru vă asigură că începeți la zero și eliminați orice inconsecvență de browser pe care o aveți.

Resetarea CSS pe care o folosesc întotdeauna este de la http://meyerweb.com/eric/tools/CSS/reset/, așa că orientați browserul către site-ul respectiv și copiați codul de resetare CSS pe care la creat.

Înainte de a lipi acest lucru în fișierul reset.CSS, îl vom comprima rapid într-un fișier mai mic.

Dacă aveți compresor Google CSS există sute de scripturi care vor face acest lucru pentru dvs., personal folosesc CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/ din nou, indicați browser-ul dvs. pe acest site.

Inserați codul de resetare CSS în caseta respectivă și setați modul de comprimare la supercompact. Hit comprima-l!



Veți fi redirecționat către o altă pagină cu noul cod de resetare CSS. Copiați codul, deschideți-l reset.css în editorul dvs. și lipiți în codul dvs. Salvați reset.css și închideți acest fișier.

Acum, când am resetat toate setările CSS, vom crea structura HTML de bază a site-ului nostru, astfel încât să putem aplica câteva stiluri CSS pentru a ne asigura că totul funcționează corect.

Full Screencast


Blocuri de construcție

Deschide index.html și adăugați acest HTML pentru fișierul HTML de bază.

    WordPress CMS - Partea 2

Acum, că avem cel mai simplu fișier HTML creat, putem crea cele 4 elemente principale ale paginii noastre. Aceste elemente sunt Header, Sidebar, Content și Footer. Din nou, pentru că lucrăm cu un șablon care este împotriva unui fundal complet solid, nu trebuie să ne facem griji că vom adăuga elemente de umplutură la elementele noastre, așa că putem crea doar 4 divs de containere și începem să adăugăm ceva stil.

Creați 4 div pentru fiecare element și adăugați _container la fiecare nume. Vom adăuga un container care va găzdui fiecare dintre elementele noastre, astfel încât să putem centraliza tot conținutul nostru pe pagină. Acest lucru se va numi container.

Veți observa că fiecare etichetă div de închidere are un comentariu lângă ea. Șablonul nostru nu va fi extrem de lung, dar în viitor, când lucrați cu numeroase divizii și elemente pe pagina dvs., este dificil să urmăriți ce

eticheta aparține deschiderii sale
etichetă. Adăugarea de comentarii va permite să urmăriți ce ender aparține deschiderii sale.

Avem toate containerele noastre, astfel încât să începem adăugarea unui stil astfel încât să ne asigurăm că bara laterală și containerele de conținut vor pluti alături unul de celălalt!

Deschide style.css și adăugați rapid câteva stiluri generale.

Acest om are un stil

 corp fundal: # f5f5f5; dimensiune font: 62,5%; culoare: # 6e6e6e; font-familie: Helvetica, Verdana, Sans-Serif;  p font-size: 1.4; Înălțimea liniei: 1,5cm; marcă: 0 0 15px 0;

Dacă ați folosit vreodată un fișier CSS, acesta ar trebui să pară foarte familiarizat. Dacă nu ați făcut ceea ce am făcut, se schimbă unele variabile ale elementului corpului nostru. Acest lucru afectează fișierul nostru HTML principal. Am schimbat culoarea de fundal în culoarea fișierului nostru PSD, precum și am schimbat culoarea implicită a oricărui text din pagină utilizând culoarea.

Apoi am setat stiva de fonturi implicită pe care dorim să o folosim pentru site-ul nostru. Acest lucru spune browser-ului nostru ca dorim ca Helvetica sa fie fontul principal folosit pentru pagina noastra. Dacă Helvetica nu este disponibilă, atunci browserul va căuta Verdana, iar apoi în cele din urmă următorul font sans-serif disponibil.

Dacă te deschizi index.html în browserul dvs. veți vedea o pagină bej goală. Pentru că nu avem elemente în interiorul containerului nostru, vom adăuga o înălțime implicită și câteva culori de fundal pentru a putea vedea cu ce lucrăm.

 div height: 200px;  / * - Elemente de structură - * / #container width: 900px; marja: 0 auto;  #header_container width: 100%; fundal: roșu;  #sidebar_container width: 280px; fundal: albastru;  #content_container width: 580px; fundal: portocaliu;  #footer_container width: 100%; fundal: verde;

Actualizați pagina și ar trebui să aveți ceva care arată ca imaginea de mai jos.


Am stabilit o înălțime implicită de 200 de pixeli pentru toate divs-urile noastre, astfel încât să le putem vedea fără conținut în interiorul lor. Fără înălțimea implicită, diviziile noastre ar avea toate o înălțime de 0px și nu am vedea nimic.

Acum, când ne aflăm pe pagina noastră, trebuie să ne asigurăm că bara laterală și containerele de conținut se află alături de ele pe pagină. Vom folosi proprietatea float pentru a realiza acest lucru.

Notă: Dacă nu vă spun să eliminați toate stilurile din elementul CSS curent, adăugați doar proprietățile noi proprietăților deja existente.

 #header_container float: left; clar: ambele;  #sidebar_container float: left;  #content_container float: right #footer_container float: left; clar: ambele;

Vom flota bara laterală div în partea stângă a paginii și conținutul div în partea dreaptă a paginii. Aceasta este una dintre machetele mai ușoare pe care le veți întâlni. Nu vrem ca containerele cu antet si subsol sa aiba elemente care plutesc alaturi de ele, asa ca am adaugat un clar: ambele; proprietate cu proprietatea float. Asigurați-vă că nu există alte elemente care să fie pe ambele părți ale containerului curent.

Actualizați și consultați imaginea de ecran!


Acum avem structura de bază a paginii noastre, astfel încât să putem începe să adăugăm celelalte elemente pe pagină. Vom începe cu antetul. Știm că totul este plut și aliniat corespunzător, astfel încât să puteți elimina culorile de fundal din diviziile noastre de containere.

Cum despre o anumită navigație

În interiorul header_container div vă permite să adăugați o etichetă h1, precum și o listă neordonată care va acționa ca navigație de top.

 / * - header_container - * / 
Gear'd

Dacă reîmprospătați pagina, veți vedea etichetele implicite, nu trebuie să vă uitați la nimic. Vom folosi h1 ca logo-ul nostru. Reveniți la style.css și adăugați câteva proprietăți tagului nostru h1 # logo.

 h1 # logo lățime: 280px; înălțime: 96px; text-indent: -9999px; background: url (... / ... /img/logo.gif) din stânga sus nu-repeta; plutește la stânga;

Ceea ce am făcut aici este setarea înălțimii și lățimii h1 până la înălțimea și lățimea imaginii noastre. În continuare, am eliminat textul prin indentarea acestuia cu -9999 pixeli. În cele din urmă, am setat fundalul h1-ului nostru pe tag-ul nostru și l-am flotat la stânga. Acest lucru vă va face să stați bine lângă navigație.


Logo-ul arată minunat, dar navigația are nevoie de puțină dragoste CSS. Să-i dau câteva!

O scurtă ocolișare de la navigația noastră, vom include rapid fontul Zilelor pe care l-am folosit pentru logo-ul și navigația noastră.

Vom folosi @ font-face pentru a spune CSS că vrem să folosim noul font pentru fișierul nostru. Această proprietate nu este disponibilă în toate browserele, dar vom folosi un stiluri de fonturi pentru a vă asigura că celălalt browser va putea vedea în continuare stilurile noastre.

Mai întâi trebuie să includeți fontul nostru în fișierul nostru CSS. Creați un folder nou numit fonturi din interiorul directorului nostru inc și trageți zile.otf în interiorul noului folder de fonturi.

Dacă nu aveți fontul de zile, îl puteți descărca, precum și alte fonturi care pot fi protejate prin fonturi de la http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

Odată ce avem fontul, putem folosi @ font-face pentru al include în scriptul nostru CSS.

 @ Font-face font-family: Zile; src: url ("... /fonts/days.otf");

Prima proprietate spune fișierului nostru CSS care este numele fontului astfel încât îl putem folosi în proprietatea font-familie cu alte elemente. A doua proprietate este în cazul în care fontul nostru este situat.

Înapoi la navigarea noastră. A devenit standard pentru a utiliza liste neordonate sau ordonate atunci când vine vorba de navigație. Stylingul navigării poate deveni dificil când sunteți începător, dar odată ce vă prindeți poate fi foarte puternic.

 ul.nav float: dreapta; margine: 25px 0 0 0;  ul.nav li float: stânga; margine: 0 0 0 10px;  ul.nav li font-family: Zile, Helvetica, Verdana, Sans-Serif; text-decoration: nici unul; padding: 5px 10px; culoare: # 6e6e6e; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 1.4;  ul.nav li a: hover fundal: # e0e0e0;  ul.nav li.active a background: # 00b8ff; culoare: # f5f5f5;

Ne referim ul.nav și plutește bine. Acest lucru o pune în extrema dreaptă a conținutului nostru div de la logo-ul nostru.

În mod implicit, tagurile li ale listelor noastre se află una peste alta pe o linie nouă pentru fiecare li. Nu vrem asta, vrem ca navigația noastră să stea alături. Puneți la salvare! Adăugăm un pic de marjă fiecărui element li pentru a le distra puțin.

Vom adăuga câteva elemente de stil pentru elementele noastre de legătură pentru a le face să arate ca butoane grafice. Vom folosi o altă proprietate care nu este disponibilă în toate browserele, dar vreau să păstrez totul simplu din motive de învățare.

Aici -Moz-border-radius și -webkit-border-radius intră în joc. Aceste două proprietăți adaugă o rază de 5 pixeli frumos fiecărui element de legătură. Veți observa numai rotunjirea atunci când link-ul este activ sau este suspendat, deoarece acestea sunt singurele 2 evenimente în care schimbăm culoarea de fundal.

Reîmprospătați și bucurați-vă de gloria noii dvs. navigări!


Odată cu noua noastră cunoaștere a listelor, vom trece la bara laterală și vom adăuga o altă listă neordonată pentru o anumită navigație laterală. Metoda de creare a navigației cu bare laterale este aproape identică cu cea de navigare de sus, așa că dacă sunteți în căutarea unei provocări încercați să faceți singură bara laterală și să o stilizați înainte de a vă uita la codul actual!

Mai jos veți găsi codul HTML și codul CSS pentru navigarea în bara noastră laterală. Nu voi trece prin el pentru că, așa cum am spus mai devreme, este aproape identic cu navigația antetului nostru, cu excepția faptului că stabilim o lățime pentru elementele noastre de legătură deoarece dorim ca acestea să fie dimensiunea completă a barei laterale.

 
 #sidebar_container ul, #sidebar_container ul li float: stânga; clar: ambele; lățime: 280px;  #sidebar_container ul li marja: 0 0 10px 0;  #sidebar_container ul li un -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 7px 10px; text-decoration: nici unul; culoare: # 6e6e6e; plutește la stânga; clar: ambele; lățime: 260px; font-size: 1.5; text-transform: majuscule; font-family: Zile, Helvetica, Verdana, Sans-Serif;  #sidebar_container ul li a: hover fundal: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; culoare: # f5f5f5;

Până acum ar trebui să fii o listă neordonată pro și nu-mi place să-ți fac asta, dar o să mai promitem încă o listă. Vom folosi o altă listă pentru subsolul nostru.

Din nou, vă voi oferi atât codul HTML, cât și codul CSS, cu o mică explicație, pentru că este aproape identică, cu excepția faptului că plutim niște elemente diferit de această dată.

 
 #footer_container culoare: #bebebe;  #footer_container a culoare: # 6e6e6e; text-decoration: nici unul; font-size: 1.4;  #footer_container ul li float: dreapta; frontieră-stânga: 1px solid #bebebe; umplutură: 0 10px;  #footer_container ul li.copyright float: left; umplutura: 0; frontieră: 0;  #footer_container ul li p marja: 0;

Avem lista de footer și fiecare dintre elementele noastre li sunt flotate corect, dar dorim ca li.copyright să stea pe partea stângă a paginii noastre departe de lista de subsol. Pentru a face acest lucru îi dăm o clasă de drepturi de autor și plutește în stânga, în loc de dreapta. Am adăugat, de asemenea, niște margini la stânga fiecărui element li, cu excepția dreptului de autor li pentru un pic de condiment.

Te-ai îmbolnăvit încă de liste? Dacă răspunsul este da, aveți noroc, am terminat cu listele pentru acest tutorial. Mulțumesc că te-ai lipit atât de mult: P

Suntem aproape de linia de sosire, trebuie doar să adăugăm câteva elemente de conținut și să adăugăm câteva atingeri de ultim moment.

Umpleți-l cu conținut

 
Planuri și prețuri
 
Planul gratuit
 
 
  
Lorem ipsum dolor stau amet, consectetuer adipiscing elit. Etiam se află în vecinătatea arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, și mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris cumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus în diam. Nam sapien ligula, numarul de ordine, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrici, orci.
 
Lorem ipsum dolor stau amet, consectetuer adipiscing elit. Etiam se află în vecinătatea arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, și mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris cumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus în diam. Nam sapien ligula, numarul de ordine, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrici, orci.
 
Lorem ipsum dolor stau amet, consectetuer adipiscing elit. Etiam se află în vecinătatea arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, și mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris cumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus în diam. Nam sapien ligula, numarul de ordine, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrici, orci.

Toate elementele noastre de conținut sunt în principal elemente implicite pe pagină, cu excepția header_image div. Acest lucru este bun, deoarece înseamnă o sumă minimă de CSS pentru ca pagina noastră să arate minunat.

 / * - Elemente antet - * / h1, h2, h3 font-family: Zile, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4; culoare: # 00b8ff;  h3 font-size: 2m; culoare: # 6e6e6e; linia-înălțime: 2em;  / * - Post Elemente - * / .header_image float: left; clar: ambele; margine: 10px 0; fundal: # 00b8ff; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Anteturile sunt șterse, imaginea antetului este minunată. Totul pare să se întâlnească. Reîmprospătați pagina și bucurați-vă de gloria paginii dvs. noi! Antetul arată puțin cam deși este aspirat până în partea de sus a paginii.


Vom adăuga un pic de margine de sus și de jos la containerul nostru antet pentru a spațiu totul afară.

Adăugați proprietatea marjă la elementul header_container.

margine: 20px 0;

Aceasta adaugă 20 de pixeli de margine în partea superioară și inferioară a header_container. E foarte simplu!

Atingerea finală pe care o vom adăuga este un pic de umplutură și de frontieră la footer_container noastre.

 frontieră: 1px solid # d0d0d0; padding: 10px 0;

Suntem cu toții codificați și totul arată foarte bine, astfel că este sfârșitul acestui tutorial. Mergeți în următorul tutorial în care vom lua acest fișier și vom face ca WordPress să genereze conținut pentru fiecare pagină!

Cod
×