Share
Soms lijkt het erop dat er zoveel CMS-producten zijn als er webontwikkelaars zijn. In deze tutorial gaan we een eenvoudige pagina van één pagina maken en die dan in minder dan 5 minuten instellen met een Twitter-feed voor dagelijkse updates en met CushyCMS voor algemene inhoud. Als je het nog niet hebt gezien, is Cushy een volledig gratis en uiterst eenvoudig te gebruiken product dat recentelijk op de markt is gekomen.
Onlangs kwam ik tot het besef dat ik echt een persoonlijke site zou moeten hebben. Ik neem geen ontwerpwerk, maar het is leuk om een plek te hebben waar ik naar kan verwijzen als ik bio's schrijf enzovoort. Ongeveer een maand geleden begon ik Twitter te gebruiken om mijn dagelijkse gedachten over zaken, het internet en zo verder op te zetten. Dit leek een logisch iets om op mijn persoonlijke pagina te blijven. Het is ook belangrijk dat de site eenvoudig te beheren is, dus ik laat het niet weggaan. Dus je zou kunnen zeggen dat dit mijn opdracht was.
Voordat ik naar de build ging, bracht ik een paar uur door in Photoshop en probeerde ik wat ideeën. Ik heb iets eenvoudigs nodig - ik heb geen tijd voor iets anders, professional - wie weet wie er gaat bezoeken en ziet er leuk uit - ik beweer een ontwerper te zijn?
Hoe dan ook, hier is mijn ontwerp. Ik heb een mooie vectorillustratie van iStock gebruikt - altijd goed om snel iets te doen dat er geweldig uitziet! Ik heb een heel leuk en gratis lettertype gebruikt - Colaborate Thin. En tenslotte een mooie oranjeblauwe kleurstelling die met een beetje geluk overeenkwam met mijn oranje foto!
Dus ik zal niet teveel stilstaan bij het ontwerp. Als u op de onderstaande afbeelding klikt, kunt u een grote versie van de JPG downloaden voor het geval u deze wilt volgen.
Kijkend naar het ontwerp in Photoshop, is het duidelijk dat er een heleboel afbeeldingen zijn die ik nodig zal hebben. Als dit een complexer ontwerp zou zijn, zou ik de Slice-tool van Photoshop gebruiken, maar het is vrij eenvoudig, dus ik zal het bestand gewoon bijsnijden en een aantal afbeeldingen maken - een voor de tabel, een voor alle titels, een voor de "volg me" -bel, een voor de afbeelding van de nettuts en een voor de foto van mijn gigantische voorhoofd! Dit zijn de afbeeldingen die ik heb gemaakt:
Opmerking Ik heb slechts één titel getoond, maar ik heb er natuurlijk veel van gemaakt.
Vervolgens plannen we onze HTML-lay-out. Heel bewust zal deze site zeer eenvoudig te bouwen zijn. Het is gewoon een opeenvolging van blokken. Eerder heb ik geschreven over hoe we Absolute Positionering kunnen maken om een lay-out te maken, deze keer gaan we supereenvoudig gebruiken Relatieve positionering.
Zoals u zich zult herinneren wanneer u elementen op een pagina plaatst, hebben ze een natuurlijke plaats waar ze naartoe gaan, ten opzichte van elementen die eerder kwamen. Omdat we geen kolommen gebruiken of echt iets speciaals in dit ontwerp, zal het perfect zijn voor het gebruik van deze reguliere positionering.
Als algemene regel geldt dat wanneer u uw leven gemakkelijk wilt maken in HTML, het het beste is om dingen horizontaal in blokken te doen. Dit is de gemakkelijkste manier om met CSS te werken en vereist niet veel gehannes voor browsercompatibiliteit. Zodra je columned lay-outs begint te plaatsen, wordt het een beetje lastiger. Dus dat bewaren we voor een andere zelfstudie, voor een ander project.
Dus hoe dan ook, de lay-out die we zullen gebruiken is zoiets als dit:
Hoofdrubriek Sectie Heading Div Blok van inhoud Sectie Heading Div Blok van inhoud Sectie Heading Div Blok van inhoud ... en zo verder ...
Het beste van dit plan is dat we later als we plotseling gaan "hey, ik wou dat ik mijn een extra blok had voor favoriete afbeeldingen", het is als geen probleem! Trek het gewoon in, gebruik dezelfde CSS-klassen en alles. Dit is echt de eenvoudigste lay-out, en met een mooi ontwerp kan het er toch heel gaaf uitzien!
OK Maak een index.html-bestand en dan is dit mijn eerste keer in de HTML, het is niet perfect en mist het Twitter-bit, maar het is een goed startpunt en we kunnen een paar aanpassingen later doen als we gaan:
Collis Ta'eed - A Little About Me Hallo, ik ben Collis, ondernemer, blogger en ontwerper.
In april lanceerde Eden een zustersite voor PSDTUTS waaraan ik heb gewerkt. De site bevat webontwikkeling en ontwerptutorials.
Enkele links naar sites die ik heb ingeleverd:
- FlashDen - Ons belangrijkste Eden-project
- Hoe een Rockstar Freelancer te zijn - Een boek dat ik koos met mijn lieve vrouw
- FreelanceSwitch - De zeer succesvolle blog over freelancen
- PSDTUTS - De beste photoshop-blog die er is!
- Blogactiedag - een jaarlijks evenement zonder winstoogmerk
Ik ben de eerste om toe te geven dat ik niet erg goed ben in het beantwoorden van al mijn e-mails, maar ik doe mijn best en als je het nodig hebt, kun je me e-mailen.
Dingen om op te merken:
Nu voegen we een klein beetje CSS toe om de pagina er een beetje meer uit te laten zien als waar het uiteindelijk zal eindigen. Maak je 'style.css'-bestand en plaats deze twee definities in:
body achtergrondkleur: # 191e25; margin: 0; padding: 0; color: # 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 (images / computer.jpg); background-repeat: no-repeat; achtergrond-positie: rechtsboven;
Een paar dingen om op te merken:
En dit is hoe onze pagina er nu uitziet:
Nu voegen we de inhoud van Twitter toe. Dit is een geweldige manier om de pagina echt dynamisch te laten voelen, omdat ik de meeste dagen mijn Twitter-feed bijwerk. Het is ook een manier om mensen over te halen om me aan hun Twitter-netwerken toe te voegen, en in de toekomst wanneer ik nieuwe sites start, kan ik verkeer naar nieuwe plaatsen leiden. Het maakt dus echt deel uit van mijn niet bijzonder sluwe plan.
Dus Twitter heeft het maken van hun feed heel gemakkelijk voor ons gemaakt, doe gewoon het volgende:
Dit is het proces in afbeeldingen!
En hier is de code die Twitter ons geeft:
Opmerking ik heb de
Dus door te kijken naar de HTML die ze ons hebben gegeven, kunnen we raden dat het Javascript dat waarschijnlijk gaat invullen
Nu zal ik op dit moment ook wat Javascript toevoegen om mijn site aan Google Analytics te koppelen. Ik denk dat de meeste webontwikkelaars wel eens van Analytics hebben gehoord, maar als je toevallig onder een steen hebt geleefd, raad ik je aan het uit te proberen. Het is gratis en het is een krachtige manier om uw verkeer te controleren. Als je een account hebt, ben je eenvoudig Maak een nieuw websiteprofiel, voer een domeinnaam in en je krijgt in ruil daarvoor een Javascript-code om in je HTML-documenten te plakken. Makkelijk!
Vervolgens voegen we nog enkele stijlen toe die ons nog dichter bij ons eindproduct brengen. Zij zijn:
een img border: 0 a color: # cc5630; text-decoration: none; a: hover color: #ffffff; .content_box width: 590px; margin-top: 15px; margin-bottom: 30px;
Hier verwijderen we de randen van gekoppelde afbeeldingen (d.w.z. de link naar NETTUTS en de foto van mij die naar een grotere versie zal linken), ook bepalen we de kleur van onze links op de pagina in het algemeen. Als laatste met de content_box-stijl stellen we een breedte in voor onze inhoudsblobs en scheiden de boven- en ondermarges ze op de pagina. Zo ziet onze pagina er nu uit:
Het volgende dat je moet doen is om wat tekstterugloop rond onze twee afbeeldingen te krijgen. Het eerste wat je moet doen, is een klasse toevoegen aan de afbeeldingen die we willen inpakken (de foto en de afbeelding van de nettuts). Ik had niet gedacht dit eerder te doen, maar kan nu zien dat ik het nodig heb. Dus we veranderen de afbeeldingen om:
Dan voegen we een snelle stijl toe om de float naar links te maken met een beetje een marge, zoals deze:
img.photo float: left; margin-right: 20px;
Jammer genoeg, hoewel leuk en eenvoudig, maakt deze oplossing het cijfer niet helemaal omdat mijn tekstblok te lang is, dus het wikkelt ... boe! Laat maar, gemakkelijk opgelost. We zullen die tekst in zijn eigen blok plaatsen en laten zweven.
Dus we zullen dit content_box aanpassen, zodat de HTML-code nu is:
Na als webdesigner gewerkt te hebben - zowel in loondienst als freelance - heb ik in 2006 een startup opgericht met een paar vrienden. Ons bedrijf, Eden, is sindsdien gegroeid en ik heb het geluk gehad om aan heel veel zeer opwindende en interessante projecten te werken. alles van FlashDen tot Blogactiedag.
Dankzij de briljante aard van het internet, woon en werk ik momenteel vanuit Hong Kong en reis ik de wereld over. Je kunt me online vinden op Twitter, waar ik willekeurige gedachten post, of je kunt me een e-mail sturen via het formulier onderaan deze pagina. Bedankt voor het langskomen!
Zodat u kunt zien dat ik de tekst in a heb gewikkeld
en vervolgens een toegevoegd aan de onderkant. Deze extra.about_text float: left; width: 380px; .helder duidelijk: beide;
We moeten ons over-tekstblok een breedte geven zodat het naast de foto zweeft. Nu lost dat ons probleem goed op. Als je echter naar de onderstaande afbeelding kijkt, lijkt het alsof er een rare opening is tussen de bovenkant van ons tekstblok en de afbeelding.
Vreemde hiaten zijn de slechtst om tegen te komen, omdat het heel moeilijk kan zijn om erachter te komen wat ze veroorzaakt. In ons geval hier hoewel ik toevallig onthoud dat de
tag heeft een standaard bovenmarge die ons probleem waarschijnlijk oplost als we daarmee af raken. Hier is de code om dit te repareren:
p margin: 0px; margin-bottom: 20px;
Dus elke alinea heeft geen marge behalve 20px eronder (het volgende alinea-element uitsplitsen).
Zoals ik eerder al zei, gebruiken we een beetje CSS om onze te vervangen
Dus alles wat we gaan doen is de tag die we zo slim eerder hebben geplaatst om de weergave van de tekst in te stellen als niets - het verborgen houden. Dan geven we de een hoogte zodat de achtergrondafbeelding niet wordt afgesneden en uiteindelijk zullen we de afbeelding instellen om te verschijnen. Dit is de CSS-code die we nodig hebben om dit mogelijk te maken:
h1 background-image: url (images / title_main.jpg); background-repeat: no-repeat; hoogte: 60px; margin-bottom: 50px; h1 span display: none;
Vervolgens stylen we onze twitter-box. Maar voordat we het deden, besefte ik dat ik helemaal was vergeten mijn "Follow Me op Twitter" -afbeelding op de pagina te plaatsen (dwaze Collis!) Het maakt niet uit, ik zal het nu toevoegen, hier is de resulterende HTML-code voor het gebied dat we werken aan:
Merk op dat de afbeelding verschijnt binnen de twitter_div. We gaan een van de grote voordelen van CSS-styling gebruiken om het zo te positioneren dat het buiten de doos blijft. Nu als dit de oude dagen waren en ik maakte deze lay-out met een
Accentsconagua
