Share
Uneori se pare că există cât mai multe produse CMS acolo, deoarece există dezvoltatori web. În acest tutorial vom construi un site simplu de o pagină și apoi în mai puțin de 5 minute, să îl configurați cu un feed Twitter pentru actualizări zilnice și cu CushyCMS pentru conținut general. Dacă nu l-ați văzut, Cushy este complet gratuit și extrem simplu de utilizat produs care vine pe piață recent.
Recent am ajuns la realizarea faptului că ar trebui să am un site personal. Eu nu iau munca de proiectare, dar e frumos să ai un loc unde să te referi când scriu biografii și așa mai departe. De asemenea, cu o lună în urmă, am început să folosesc Twitter pentru a-mi pune gândurile zilnice despre afaceri, web și alte lucruri. Acest lucru părea un lucru logic să rămân pe pagina mea personală. De asemenea, este important ca site-ul să fie ușor de gestionat, așa că nu-l las să iasă din întâmplare. Așa că ați putea spune că aceasta a fost scurta mea informație.
Înainte de a ajunge la construcție am petrecut câteva ore în Photoshop încercând câteva idei. Am nevoie de ceva simplu - nu am timp pentru nimic altceva, profesionist - cine știe cine va vizita, și arata frumos - eu pretind a fi un designer dreapta?
Oricum, aici este designul meu. Am folosit o ilustrație grafică frumoasă de la iStock - întotdeauna bună pentru a face ceva rapid care arată minunat! Am folosit un font foarte frumos și gratuit - Colaborați subțire. Și, în final, o schemă de culoare portocalie frumoasă, care, printr-o lovitură de noroc, sa dovedit a se potrivi cu fotografia mea portocalie!
Așa că nu voi prea multă parte din design. Dacă faceți clic pe imaginea de mai jos puteți obține o versiune mai mare a fișierului JPG în cazul în care doriți să urmați de-a lungul.
Privind designul din Photoshop, este clar că există o grămadă de imagini de care am nevoie. Dacă ar fi un design mai complex, aș folosi instrumentul Photoshop's Slice, dar este destul de simplu, așa că voi decupa fișierul și voi crea o grămadă de imagini - una pentru masă, una pentru toate titlurile, una pentru urmăriți-mi balonul, unul pentru imaginea nettuts și unul pentru fotografia frunții mele uriașe! Iată imaginile pe care le-am făcut:
Notă Am arătat doar un titlu, dar, desigur, am făcut multe.
Apoi planificăm aspectul HTML. Foarte deliberat acest site va fi extrem de ușor de construit. Este pur și simplu o secvență de blocuri. Anterior am scris despre cum să ne poziționăm absolut pentru a face un aspect, de data aceasta vom folosi foarte simplu Poziționarea relativă.
Așa cum vă veți aminti când plasați elemente pe o pagină pe care le au un loc natural, ei merg în legătură cu elementele care au apărut înainte. Pentru că nu folosim coloane sau altceva în acest design, va fi perfect pentru utilizarea acestei poziționări obișnuite.
Ca regulă generală, ori de câte ori doriți să vă faceți viața mai ușoară în HTML, este mai bine să faceți lucrurile în blocuri așezate orizontal. Acesta este cel mai simplu mod de a lucra cu CSS și nu necesită multă atenție pentru compatibilitatea browser-ului. De îndată ce începeți să puneți în layout-uri pe coloane, lucrurile devin puțin mai complicate. Așa că vom salva asta pentru un alt tutorial, pe alt proiect.
Deci, oricum, aspectul pe care îl vom folosi este ceva de genul:
Principal Secțiune Rubrică Div Bloc de conținut Secțiune Rubrică Div Bloc de conținut Secțiune Rubrică Div Bloc de conținut ... și așa mai departe ...
Cel mai bun lucru despre acest plan este că, mai târziu, dacă vom merge brusc "hey mi-aș dori să am un bloc suplimentar pentru imaginile preferate", este ca și cum nici o problema! Glisați-l, utilizați aceleași clase CSS și tot. Acest lucru este cu adevărat cel mai simplu aspect în jurul valorii de, și cu un design frumos se poate arata cu adevarat misto, cu toate acestea!
OK Creeaza un fisier index.html si apoi iata prima mea lovitura de la HTML, nu este perfecta si lipseste bitul Twitter, dar este un bun inceput si putem face cateva ajustari mai tarziu in timp ce mergem:
Collis Ta'eed - puțin despre mine Bună Sunt Collis, antreprenor, blogger și designer.
În aprilie, Eden a lansat un site surori la PSDTUTS, pe care am lucrat. Site-ul găzduiește tutoriale de dezvoltare web și de design.
Unele link-uri către site-uri la care am parte:
- FlashDen - Proiectul principal Eden
- Cum sa fii un Freelancer Rockstar - O carte pe care am cowrote cu sotia mea minunata
- FreelanceSwitch - blogul de mare succes pe freelancing
- PSDTUTS - Cel mai bun blog cu Photoshop din jur!
- Ziua de acțiune a blogului - un eveniment non-profit, anual
Sunt primul care a recunoscut că nu sunt foarte bun în a răspunde la toate e-mailurile mele, dar fac tot ce pot și dacă aveți nevoie, puteți să-mi trimiteți un e-mail.
Lucruri de reținut:
Acum vom adăuga un pic de CSS pentru a face pagina să pară mai mult ca în cazul în care se va termina. Creați fișierul "style.css" și plasați aceste două definiții în:
corp fundal-culoare: # 191e25; margin: 0; padding: 0; Culoare: # 5f6874; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif; font-size: 13px; line-height: 21px; #container width: 900px; padding: 50px; padding-top: 30px; background-image: url (imagini / Computer.jpg); background-repeat: no-repetare; pozitie fundal: in partea dreapta sus;
Câteva lucruri de reținut:
Iată cum arată acum pagina noastră:
Acum adaugam continutul de pe Twitter. Aceasta este o modalitate foarte bună de a face pagina să se simtă într-adevăr dinamică, deoarece îmi actualizez feed-ul de Twitter în cele mai multe zile. De asemenea, va fi o modalitate de a conduce oamenii pentru a mă adăuga la rețelele lor Twitter, iar apoi, în viitor, când voi lansa noi site-uri, pot conduce trafic spre noi locuri. De fapt, totul face parte din planul meu, care nu este deosebit de curat.
Prin urmare, Twitter și-a făcut foarte ușor hrănirea cu hrana pentru animale, procedați astfel:
Iată procesul în imagini!
Iată codul pe care ni-l dă Twitter:
Notă am șters
Deci, uitandu-ne la HTML-ul pe care l-au dat, putem sa ghicesc ca Javascript-ul probabil va umple acest lucru
Acum, în acest moment, voi adăuga și un Javascript pentru a împlini site-ul cu Google Analytics. Cred că majoritatea dezvoltatorilor web au auzit de Analytics, dar dacă întâmplător trăiți sub o stâncă, chiar recomand să încerc. Este gratuit și este o modalitate puternică de a vă monitoriza traficul. Când ai obținut un cont, ești simplu Creați un nou profil de site, introduceți un nume de domeniu și veți primi în schimb un cod Javascript pentru a lipi în documentele dvs. HTML. Pesă ușoară!
Apoi vom adăuga încă câteva stiluri care ne vor aduce mai aproape de produsul nostru final. Sunt:
o imagine img border: 0 a color: # cc5630; text-decoration: none; a: hover culoare: #ffffff; .content_box width: 590px; margin-top: 15px; margin-bottom: 30px;
Aici eliminăm granițele imaginilor conectate (adică linkul către NETTUTS și fotografia mea care va face legătura cu o versiune mai mare), de asemenea, setăm culoarea legăturilor noastre pe pagină în general. În sfârșit, cu stilul content_box, setăm o lățime pentru bloburile noastre de conținut și folosim margini de sus și de jos pentru a le separa pe pagină. Iată cum arată acum pagina noastră:
Următorul lucru pe care trebuie să-l faceți este să obțineți o împachetare a textului în jurul celor două imagini. Primul lucru pe care trebuie să-l faceți este să adăugați o clasă imaginilor pe care doriți să le înfășurăm (fotografia și imaginea nettuts). Nu m-am gândit să fac asta mai devreme, dar pot vedea că am nevoie acum. Deci schimbăm imaginile pe care le avem:
Apoi adăugăm un stil rapid pentru a face flotorul la stânga cu un pic de marjă, după cum urmează:
img.photo float: left; marja de-dreapta: 20px;
Din păcate, în timp ce frumos și simplu, această soluție nu face destul de grad, deoarece blocul meu de text este prea lung, așa că este ambalaj ... booo! Nu contează, ușor de stabilit. Vom plasa acel text în propriul bloc și îl vom face să plutească.
Deci vom ajusta acest content_box astfel încât codul HTML este acum:
După ce am lucrat în calitate de web designer - atât angajat, cât și independent - am fondat un startup cu câțiva prieteni în 2006. Compania noastră, Eden, a crescut de atunci și am avut norocul să lucrez la multe proiecte foarte interesante și interesante, totul de la FlashDen la Ziua de acțiune a blogului.
Datorită naturii strălucite a webului, în prezent trăiesc și lucrez din Hong Kong și călătoresc lumea. Mă poți găsi online pe Twitter unde postez gânduri aleatorii sau îmi poți trimite un e-mail din formularul din partea de jos a acestei pagini. Mulțumesc că te-ai oprit!
Deci puteți vedea că am înfășurat textul într-un
și apoi a adăugat a în partea de jos. În plus.about_text float: left; lățime: 380px; .clear clar: ambele;
Trebuie să dăm blocului nostru about_text o lățime, astfel încât acesta să plutească alături de fotografie. Acum, asta rezolvă problema noastră frumos. Cu toate acestea, dacă vă uitați la imaginea de mai jos, se pare că există un decalaj ciudat care apare între partea de sus a blocului nostru de text și imaginea.
Deficiențele ciudate sunt cel mai rău să vină, pentru că poate fi foarte greu să dau seama ce le provoacă. În cazul nostru aici, deși mi se întâmplă să amintesc că
tag-ul are o margine de top implicită care, dacă scăpăm, probabil ne va rezolva problema. Iată codul pentru a repara acest lucru:
p margine: 0px; margin-bottom: 20px;
Deci, acum fiecare paragraf nu va avea nicio marjă, cu excepția a 20px sub ea (distanțând elementul următor al paragrafului).
După cum am menționat mai devreme, vom folosi un pic de CSS pentru a ne înlocui
Deci tot ce vom face este să folosim tag-ul pe care l-am plasat atât de inteligent mai devreme pentru a seta afișarea textului la nici unul - făcându-l ascuns. Apoi o vom da o înălțime astfel încât imaginea de fundal să nu se taie și, în final, vom seta imaginea să apară. Iată codul CSS de care trebuie să facem acest lucru:
h1 imagine-imagine: url (imagini / titlu_main.jpg); background-repeat: no-repetare; înălțime: 60 px; margin-bottom: 50px; h1 span afișare: niciunul;
Mai târziu, vom modela caseta noastră de twitter. Dar înainte de a face, mi-am dat seama că am uitat total să-mi plasez imaginea "Urmați-ma pe Twitter" pe pagina (prostie Collis!) Nu contează, o voi adăuga acum, aici este codul HTML rezultat pentru zona pe care lucrează la:
Observați că imaginea apare interior twitter_div. Vom folosi unul dintre marile beneficii ale stilului CSS pentru ao poziționa astfel încât să se afle în afara casetei. Acum, dacă acestea ar fi fost vremurile vechi și am făcut acest aspect cu o
Accentsconagua
